/* ════════════════════════════════
   VULTA — Landing
   Un seul élément fort par section. Le dégradé de marque n'apparaît que
   sur le titre principal et les appels à l'action.
════════════════════════════════ */

/* ── Barre réduite ──
   Cette page reçoit du trafic publicitaire : tout lien qui n'est pas l'appel à
   l'action est une sortie. Il ne reste que le logo et la porte des habitués. */
.lp-nav {
    /* Fixe, et non sticky : la feuille du site réserve déjà la hauteur d'une
       barre fixe avec `main { padding-top: var(--nav-h) }`. En sticky, cette
       réserve restait vide et repoussait la promesse de 64 px vers le bas. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px clamp(16px, 4vw, 40px);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-neutral);
}
.lp-nav__logo { display: inline-flex; align-items: center; flex: none; }
.lp-nav__logo img { height: 26px; width: auto; display: block; }

.lp-nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-nav__links a {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    transition: color var(--t-fast);
}
.lp-nav__links a:hover { color: var(--text); }

.lp-nav__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.lp-nav__login {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}
.lp-nav__login:hover { color: var(--text); }

@media (max-width: 860px) {
    /* Le menu s'efface avant l'appel à l'action : sur un écran étroit, mieux
       vaut perdre trois ancres qu'un bouton. */
    .lp-nav__links { display: none; }
}
@media (max-width: 460px) {
    .lp-nav__login { display: none; }
    .lp-nav__logo img { height: 22px; }
}

/* ── Héros ── */
.lp-hero {
    padding: 92px 0 76px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.lp-hero h1 {
    font-size: var(--fs-hero);
    font-stretch: 122%;
    letter-spacing: -0.035em;
    line-height: 0.98;
    margin-bottom: 22px;
    text-wrap: balance;
}
.lp-hero__lead {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: var(--muted);
    max-width: 58ch;
    margin: 0 auto 34px;
    line-height: 1.6;
}
.lp-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* La pastille ne porte plus qu'une mention : son rembourrage redevient
   symétrique, l'ancien décalage réservait la place d'une puce colorée. */
.lp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 17px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 26px;
    /* La mention tient sur une ligne quoi qu'il arrive : coupée en deux, une
       pastille de trois mots ressemble à un défaut d'affichage. */
    white-space: nowrap;
}
.lp-pill svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }

/* ── Sections ── */
.lp-section { padding: 84px 0; position: relative; z-index: 1; }
/* Les cartes sont blanches : les sections restent donc toujours teintées, sinon
   les cartes ne se détachent plus. L'alternance se joue sur deux nuances très
   proches, c'est suffisant pour rythmer la page. */
.lp-section--alt { background: var(--surface-2); border-block: 1px solid var(--border-neutral); }
.lp-section__head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
/* Le titre des tarifs n'a rien sous lui : c'est la bascule qui suit. */
.lp-section__head--tight { margin-bottom: 26px; }

/* Le filet des surtitres passe SOUS le texte et se centre avec lui. Posé à
   gauche, il tirait l'œil hors de l'axe d'une section pourtant centrée.
   La règle est bornée à la vitrine : dans l'espace de travail, le surtitre
   est aligné à gauche et son filet y est à sa place. */
.lp-section__head .v-eyebrow {
    flex-direction: column;
    gap: 11px;
}
.lp-section__head .v-eyebrow::before { order: 2; }
.lp-section__head h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.lp-section__head p { color: var(--muted); line-height: 1.62; }

/* ── Étapes ── */
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.lp-step {
    position: relative;
    padding: 30px 26px;
    background: var(--surface);
    border: 1px solid var(--border-neutral);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm), var(--edge-top);
}
.lp-section--alt .lp-step { background: var(--surface); }
.lp-step__n {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    font-stretch: 118%;
    line-height: 1;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 16px;
}
.lp-step h3 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 700; margin-bottom: 9px; }
.lp-step p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.62; }

/* ── Bénéfices ──
   Une seule ligne sous les étapes. L'ancienne grille de quatre cartes
   repoussait le prix d'un écran entier, pour un lecteur qui avait déjà
   compris ce que fait le produit. */
.lp-perks {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.lp-perks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--border-neutral);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.lp-perks svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.lp-section__cta { margin-top: 38px; text-align: center; }

/* ── Tarifs ── */
/* ── Bascule mensuel / annuel ──
   La case elle-même ne s'affiche jamais : elle porte l'état, les trois
   étiquettes la commandent, et les sélecteurs frères plus bas décident quel
   prix se montre. Aucun script n'intervient. */
.lp-switch__input { position: absolute; opacity: 0; pointer-events: none; }

.lp-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 34px;
    font-size: var(--fs-sm);
}
.lp-switch__side {
    cursor: pointer;
    color: var(--text-dim);
    font-weight: 600;
    transition: color var(--t-fast);
}
/* Le rail reste neutre dans les deux positions : peint en dégradé, il se
   lirait comme « activé » quel que soit le côté du curseur, alors qu'aucune
   des deux périodes n'est un réglage qu'on allume. C'est la pastille qui
   porte la couleur, et l'étiquette en gras qui dit laquelle est choisie. */
.lp-switch__track {
    position: relative;
    width: 54px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
}
.lp-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-accent);
    box-shadow: 0 1px 5px rgba(255, 31, 122, .45);
    transition: transform var(--t);
}

/* Non cochée : l'annuel, mis en avant par défaut. */
.lp-switch__input:not(:checked) ~ .lp-switch .lp-switch__side--year { color: var(--text); }
.lp-switch__input:checked ~ .lp-switch .lp-switch__side--month { color: var(--text); }
.lp-switch__input:checked ~ .lp-switch .lp-switch__knob { transform: translateX(24px); }

.lp-switch__input:not(:checked) ~ .lp-plans .lp-price--month,
.lp-switch__input:checked ~ .lp-plans .lp-price--year { display: none; }

/* Une seule formule est vendue : la carte se centre à une largeur de lecture
   au lieu de s'étirer sur toute la grille, où elle aurait l'air d'un tableau. */
.lp-plans { display: flex; justify-content: center; }
.lp-plan {
    width: min(100%, 430px);
    padding: 30px 26px;
    background: var(--surface);
    border: 1px solid var(--border-neutral);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm), var(--edge-top);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}
.lp-plan--best {
    border-color: var(--accent);
    box-shadow: var(--shadow-md), var(--edge-top);
}
.lp-plan__tag {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.lp-plan h3 { font-size: 1.3rem; font-family: var(--font-body); font-weight: 700; text-align: center; }
.lp-plan__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    text-align: center;
}
.lp-plan__price s {
    flex-basis: 100%;
    color: var(--text-dim);
    font-size: var(--fs-sm);
    text-decoration-thickness: 1.5px;
}
.lp-plan__price b {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -0.03em;
    line-height: 1;
}
.lp-plan__price span { color: var(--muted); font-size: var(--fs-sm); }
.lp-plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-plan li {
    display: flex;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.5;
}
.lp-plan li svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 2.4; flex-shrink: 0; margin-top: 2px; }
/* Le signe de l'infini est dessiné bien plus petit que les chiffres de la
   même fonte : sans ce rattrapage il se lit comme une virgule. */
.lp-plan li b { font-size: 1.2em; line-height: 1; }

/* ── FAQ ── */
.lp-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.lp-faq details {
    border: 1px solid var(--border-neutral);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.lp-section--alt .lp-faq details { background: var(--surface); }
.lp-faq summary {
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-sm);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
    content: '+';
    font-size: 1.3rem;
    color: var(--accent);
    line-height: 1;
    flex-shrink: 0;
}
.lp-faq details[open] summary::after { content: '−'; }
.lp-faq p { padding: 0 22px 20px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; margin: 0; }

/* ── Pied minimal ── */
.lp-foot {
    padding: 28px 0 34px;
    border-top: 1px solid var(--border-neutral);
    background: var(--surface-2);
}
.lp-foot .v-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 22px;
}
.lp-foot p { margin: 0; font-size: var(--fs-xs); color: var(--text-dim); }
.lp-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lp-foot a { font-size: var(--fs-xs); color: var(--muted); text-decoration: none; }
.lp-foot a:hover { color: var(--text); }

@media (max-width: 860px) {
    .lp-hero { padding: 52px 0 48px; }
    .lp-section { padding: 58px 0; }
    .lp-hero__cta .v-btn { width: 100%; }
}