/* Landing page (index.html) */

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Plus Jakarta Sans",system-ui,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ── Ambient night background ─────────────────────────── */
  .sky{
    position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
      radial-gradient(900px 600px at 78% -8%, rgba(109,92,224,.30), transparent 60%),
      radial-gradient(700px 500px at 8% 12%, rgba(155,140,255,.16), transparent 60%),
      radial-gradient(1000px 700px at 50% 108%, rgba(90,80,200,.20), transparent 60%),
      linear-gradient(180deg,#0B0B16 0%, #0C0B1C 40%, #0A0A15 100%);
  }
  .stars{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.9}
  .star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.5;
    box-shadow:0 0 6px 1px rgba(255,255,255,.5); animation:tw 4s ease-in-out infinite}
  @keyframes tw{0%,100%{opacity:.2}50%{opacity:.9}}

  /* ── Layout ───────────────────────────────────────────── */
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
  section{padding:90px 0}
  .prose{max-width:640px}
  .center{text-align:center; margin-left:auto; margin-right:auto}

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; letter-spacing:.04em;
    color:var(--lav-bright); text-transform:uppercase;
    background:rgba(155,140,255,.10); border:1px solid rgba(155,140,255,.22);
    padding:7px 14px; border-radius:100px;
  }
  h1,h2,h3{font-family:"Fredoka",sans-serif; font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0}
  h1{font-size:clamp(34px,6.4vw,60px); font-weight:600}
  h2{font-size:clamp(27px,4.4vw,42px)}
  h3{font-size:20px}
  p{margin:0}
  .lead{color:var(--muted); font-size:clamp(16px,2.2vw,19px)}
  .kicker{color:var(--lav-bright)}

  /* ── Buttons ──────────────────────────────────────────── */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-family:"Fredoka",sans-serif; font-weight:600; font-size:17px;
    padding:15px 26px; border-radius:100px; border:0; cursor:pointer;
    text-decoration:none; transition:transform .18s ease, box-shadow .25s ease, filter .2s ease;
  }
  .btn-primary{
    /* Texte blanc : sur le dégradé lavande clair d'avant il se serait délavé, donc
       le dégradé est descendu d'un cran vers le violet — le blanc y passe l'AA (grand
       texte). Même logique que le bouton de la nav, désormais alignée partout. */
    color:#fff;
    background:linear-gradient(135deg,#8877F0 0%, #7060E2 55%, #6151CE 100%);
    box-shadow:0 8px 20px -8px rgba(60,45,140,.6), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .btn-primary:hover{transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 10px 22px -10px rgba(60,45,140,.65), inset 0 1px 0 rgba(255,255,255,.4)}
  .btn-ghost{color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line)}
  .btn-ghost:hover{background:rgba(255,255,255,.08); transform:translateY(-2px)}
  .btn-lg{padding:17px 32px; font-size:18px}

  .cta-note{color:var(--muted-2); font-size:14px; margin-top:14px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center}
  .cta-note span{display:inline-flex; align-items:center; gap:7px}
  .dot{width:5px;height:5px;border-radius:50%;background:var(--lav)}

  /* ── Hero ─────────────────────────────────────────────── */
  .hero{padding-top:64px; padding-bottom:60px; text-align:center; position:relative}
  .hero .lead{margin:22px auto 30px; max-width:560px}
  /* Le hero porte depuis le 26/07/2026 une ligne d'accroche AVANT la liste du
     parcours. Les 30 px du bas de .lead et les 24 px du haut de .parcours ne
     s'effondrent pas — .parcours est un inline-grid, donc de niveau ligne —, ce
     qui ouvrait un trou de 54 px entre les deux. */
  .hero .lead + .parcours{margin-top:6px}
  .hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

  /* Le parcours en trois temps, sous le titre : ce qu'on donne, ce qui est croisé,
     ce qu'on reçoit. Classe à part plutôt que .etapes réutilisée — celle-là pose
     déjà un séparateur en ::before, qui entrerait en conflit avec les puces.

     Les puces alignent les trois lignes sur une même marge gauche : l'œil descend
     tout droit au lieu de repartir du centre à chaque ligne. Le bloc, lui, reste
     centré dans le hero. La dernière porte un « = » au lieu d'un point : elle n'est
     pas une étape de plus, c'est le résultat des deux précédentes. */
  .parcours{
    list-style:none; margin:24px 0 28px; padding:0;
    display:inline-grid; gap:10px; justify-items:start; text-align:left;
    font-size:15.5px; color:var(--muted);
  }
  /* La puce est posée en absolu, pas en flex : un li en flex ferait du <b> un
     élément à part, et le gap s'ajouterait à l'espace du mot — « questionnaire de
     [trou] 10 minutes ». Le même piège qu'avec les puces de la carte de prix. */
  .parcours li{position:relative; padding-left:20px}
  .parcours li::before{
    content:"•"; position:absolute; left:0; top:0; width:13px; text-align:center;
    color:var(--lav-bright);
  }
  .parcours .resultat::before{content:"="; font-weight:700; color:var(--canard-clair)}
  .parcours b{color:var(--canard-clair); font-weight:600}

  /* La première question, dans le hero. Les pastilles sont l'appel à l'action
     principal : le bouton du dessous n'est plus que la sortie de secours de
     celle qui ne se reconnaît dans aucune.

     Pas de grille : `flex-wrap` laisse les libellés garder leur longueur
     naturelle. Une grille à colonnes égales alignerait « Pleurs au coucher »
     sur « Dépendance à la tétine ou aux bras » et creuserait la moitié des
     pastilles. */
  .hero-q{margin:26px auto 14px; font-size:16px; color:var(--text); font-weight:600}
  .hero-chips{
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
    max-width:660px; margin:0 auto;
  }
  .chip{
    display:inline-block; padding:11px 16px; border-radius:999px;
    background:rgba(255,255,255,.03); border:1px solid var(--line);
    color:var(--text); text-decoration:none; font-size:14.5px; line-height:1.25;
    transition:border-color .18s, background .18s, color .18s;
    /* Sans quoi le mobile attend 300 ms avant de valider l'appui — même piège
       que napper.css. Une pastille qui « ne répond pas » se reclique. */
    touch-action:manipulation;
  }
  .chip:hover, .chip:focus-visible{
    background:rgba(155,140,255,.12); border-color:var(--lav); color:#fff;
  }
  /* L'appui, marqué le temps que la page suivante arrive (site.js). Le choix
     se remplit, les autres s'effacent : deux signaux plutôt qu'un, parce que
     le seul remplissage se confond avec le survol sur un écran tactile — où
     le survol reste collé à la dernière pastille touchée.

     Pas de coche ajoutée en ::after : elle élargirait la pastille et ferait
     sauter la ligne au moment même où l'on veut donner l'impression que tout
     est stable. Le remplissage suffit, il ne déplace rien. */
  .chip.presse{
    background:var(--violet); border-color:var(--lav); color:#fff; font-weight:600;
    transform:scale(.98);
  }
  .hero-chips.a-repondu .chip:not(.presse){opacity:.35}
  /* Le mouvement n'est là que pour dire « c'est parti ». Quelqu'un qui a
     demandé moins d'animations n'a pas besoin de cette information-là sous
     forme de déplacement — la couleur la porte déjà. */
  @media (prefers-reduced-motion:reduce){
    .chip{transition:none}
    .chip.presse{transform:none}
  }
  /* Sous 600 px les pastilles occupent la largeur : centrées et à moitié
     pleines, elles se lisaient comme un nuage de mots-clés, pas comme des
     réponses à choisir. */
  @media(max-width:600px){
    .hero-chips{flex-direction:column; align-items:stretch; max-width:340px}
    .chip{text-align:center}
  }

  /* L'exemple de bilan : un lien, plus un second bouton pleine largeur qui se
     disputait le clic avec le vrai appel à l'action. */
  .hero-second{margin-top:18px; font-size:15px}
  .hero-second a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px}
  .hero-second a:hover{color:var(--text); border-bottom-color:var(--lav)}

  .moon-stage{position:relative; height:170px; margin:8px auto 30px; width:170px}
  .moon{
    position:absolute; inset:0; margin:auto; width:118px; height:118px; border-radius:50%;
    background:radial-gradient(circle at 36% 32%, #FBFAFF 0%, #D9D2FF 34%, #A99CFF 66%, #7E6EF0 100%);
    box-shadow:0 0 60px 12px rgba(155,140,255,.55), inset -10px -12px 26px rgba(90,74,190,.55), inset 8px 8px 18px rgba(255,255,255,.5);
    animation:breathe 6s ease-in-out infinite;
  }
  .moon::before,.moon::after{content:""; position:absolute; border-radius:50%; background:rgba(110,92,200,.28); box-shadow:inset 2px 2px 4px rgba(70,56,150,.5)}
  .moon::before{width:26px;height:26px; top:30px; left:60px}
  .moon::after{width:16px;height:16px; top:66px; left:40px}
  .halo{position:absolute; inset:-30px; margin:auto; border-radius:50%; background:radial-gradient(circle,rgba(155,140,255,.28),transparent 62%); animation:pulse 6s ease-in-out infinite}
  .cloud{position:absolute; bottom:18px; left:50%; transform:translateX(-18%); width:96px; height:26px; border-radius:100px;
    background:linear-gradient(180deg,#2A2952,#1D1C3C); box-shadow:0 8px 20px rgba(0,0,0,.4); animation:drift 9s ease-in-out infinite}
  .cloud::before{content:""; position:absolute; width:44px;height:44px;border-radius:50%; background:#26254C; top:-22px; left:14px}
  .cloud::after{content:""; position:absolute; width:30px;height:30px;border-radius:50%; background:#242349; top:-14px; left:50px}
  @keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.02)}}
  @keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
  @keyframes drift{0%,100%{transform:translateX(-18%)}50%{transform:translateX(-6%)}}

  /* ── Empathy ──────────────────────────────────────────── */
  .empathy{padding-top:40px}
  .empathy h2{margin-bottom:18px}

  /* ── Photos d'ambiance ────────────────────────────────── */
  /* Même traitement que les photos du blog (.art-photo) : voile lavande en
     surimpression, pour qu'une photo n'arrive pas comme une pièce rapportée
     sur le fond nuit. Une nouvelle photo entre dans le style sans retouche. */
  .photo-bande{
    position:relative; display:block; overflow:hidden; margin:0 auto;
    max-width:720px; border-radius:26px; border:1px solid var(--line);
    background:#0E0D1E;
  }
  .photo-bande img{
    display:block; width:100%; height:auto;
    aspect-ratio:3/2; object-fit:cover;
    filter:contrast(1.05) brightness(.86);
  }
  .photo-bande::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(160deg, rgba(155,140,255,.30), rgba(109,92,224,.18) 45%, rgba(11,11,22,.58));
    mix-blend-mode:screen;
  }
  .photo-bande::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, rgba(11,11,22,.55));
  }
  @media(max-width:720px){ .photo-bande{ border-radius:18px } }

  /* ── Steps ────────────────────────────────────────────── */
  .grid{display:grid; gap:18px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .g2{grid-template-columns:repeat(2,1fr)}
  .card{
    background:linear-gradient(180deg,var(--bg-2),#101026);
    border:1px solid var(--line); border-radius:var(--radius); padding:26px;
    transition:transform .2s ease, border-color .2s ease;
  }
  .card:hover{transform:translateY(-4px); border-color:rgba(155,140,255,.4)}
  .card h3{margin-bottom:8px}
  .card p{color:var(--muted); font-size:15px}

  .ic{width:46px;height:46px;margin-bottom:14px; filter:drop-shadow(0 6px 14px rgba(120,105,240,.5))}

  /* ── Different (wedge) ────────────────────────────────── */
  .diff{background:linear-gradient(180deg,#0C0B1C,#0A0A16)}
  .compare{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
  .cmp{padding:24px; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-2)}
  .cmp.mine{border:2px solid var(--lav); background:linear-gradient(180deg, rgba(155,140,255,.20), rgba(124,107,238,.06)); box-shadow:0 26px 54px -18px rgba(120,100,240,.65), 0 0 0 6px rgba(155,140,255,.09); transform:translateY(-10px); position:relative; z-index:1}
  .cmp:not(.mine){opacity:.62}
  .cmp.mine .t{color:var(--lav-bright)}
  .cmp-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-family:"Fredoka",sans-serif; font-weight:600; font-size:12.5px; color:#0B0B16; background:linear-gradient(135deg,#B9ADFF,#8776F2); padding:5px 15px; border-radius:100px; box-shadow:0 8px 20px -6px rgba(140,120,245,.7)}
  .cmp .t{font-size:13px; font-weight:600; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px}
  .cmp .h{font-family:"Fredoka",sans-serif; font-weight:600; font-size:19px; margin-bottom:8px}
  .cmp.mine .h{color:var(--lav-bright)}
  .cmp p{color:var(--muted); font-size:14.5px}

  /* ── Pricing ──────────────────────────────────────────── */
  .price-card{
    max-width:520px; margin:34px auto 0; padding:38px 34px;
    background:linear-gradient(180deg,#171634,#101026);
    border:1px solid rgba(155,140,255,.35); border-radius:28px;
    box-shadow:0 30px 70px -24px rgba(80,60,200,.6); text-align:center; position:relative; overflow:hidden;
  }
  .price-card::before{content:""; position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:220px;height:220px; background:radial-gradient(circle,rgba(155,140,255,.35),transparent 65%); pointer-events:none}
  .price-amt{font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-weight:800; font-size:62px; line-height:1; letter-spacing:-.02em; margin:6px 0}
  .price-amt small{font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-size:20px; font-weight:600; letter-spacing:0; color:var(--muted)}
  .incl{list-style:none; padding:0; margin:22px 0 28px; text-align:left; display:grid; gap:12px}
  .incl li{display:flex; gap:11px; align-items:flex-start; color:var(--text); font-size:15.5px}
  .check{flex:0 0 auto; width:22px;height:22px;border-radius:50%; background:rgba(155,140,255,.16); display:grid;place-items:center; margin-top:1px}
  .check svg{width:12px;height:12px}
  .upsell{margin-top:20px; color:var(--muted-2); font-size:14px}
  .upsell a{color:var(--lav-bright); text-decoration:none; border-bottom:1px solid rgba(155,140,255,.4)}

  /* ── Témoignages : messages reçus ─────────────────────── */
  /* Ce sont de vrais messages de clientes, montrés tels quels — d'où la
     forme de bulle de conversation plutôt qu'une citation mise au propre. */
  .avis-rail{display:flex; gap:16px; align-items:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 0 18px; scrollbar-width:none}
  .avis-rail::-webkit-scrollbar{display:none}
  .avis-rail:focus-visible{outline:2px solid var(--lav); outline-offset:4px; border-radius:var(--radius)}
  .avis-msg{flex:0 0 min(86%,400px); scroll-snap-align:center; background:var(--avis-fond); border:1px solid var(--avis-bord); border-radius:var(--radius); padding:18px 16px 22px}
  .avis-heure{text-align:center; font-size:12.5px; font-weight:600; color:var(--avis-gris); margin:0 0 14px}
  .avis-ligne{display:flex; align-items:flex-end; gap:9px}
  .avis-ava{width:32px;height:32px; flex:0 0 32px; border-radius:50%; object-fit:cover; background:var(--avis-bulle)}
  .avis-bulle{background:var(--avis-bulle); color:var(--avis-texte); border-radius:20px; padding:13px 16px; font-size:15px; line-height:1.5}
  .avis-reaction{margin:-8px 0 0 41px; width:fit-content; background:var(--avis-bulle); border:1px solid var(--avis-bord); border-radius:100px; padding:3px 9px; font-size:13px; line-height:1}
  .avis-hint{margin:0; text-align:center; color:var(--muted-2); font-size:14px}

  /* ── Témoignages : avis notés ─────────────────────────── */
  /* Cartes claires façon plateforme d'avis — le seul bloc du site qui sort du
     thème nuit, d'où des couleurs propres au bloc plutôt que dans tokens.css.
     Les tailles du fichier de design (27 px un nom, 24 px un texte) valaient
     pour des cartes deux fois plus larges : tout est ramené ici à l'échelle
     de trois colonnes, sinon les étiquettes écrasent les cartes. */
  /* Le blanc s'arrête à la largeur du contenu : au-delà, à gauche et à droite,
     c'est le fond nuit du site qui reprend. Sur grand écran, un blanc pleine
     largeur coupait la page en deux d'une bande claire. */
  .avis-plateforme{
    background:transparent;
    font-family:"Nunito Sans",-apple-system,"Segoe UI",sans-serif;
    padding:40px 22px; display:flex; justify-content:center;
  }
  .avis-plateforme-grille{
    /* min(100%,300px) : sur un écran étroit, une piste fixe de 300 px déborde
       de son conteneur et fait défiler la page de côté. */
    display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    gap:18px; max-width:var(--maxw); width:100%;
    background:#ffffff; border-radius:28px; padding:26px;
  }
  .avis-p{
    background:#ffffff; border:1px solid #e3e3e9; border-radius:20px;
    padding:24px 24px 20px; box-shadow:0 1px 3px rgba(20,23,40,0.05);
    display:flex; flex-direction:column; position:relative;
  }
  .avis-p-tete{display:flex; align-items:center; gap:14px}
  .avis-p-initiale{
    flex:0 0 auto; width:52px; height:52px; border-radius:50%;
    background:#fce8d1; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:18px; color:#20242f; letter-spacing:0.5px;
  }
  .avis-p-nom{font-weight:800; font-size:17px; color:#20242f; line-height:1.15}
  .avis-p-meta{font-size:13.5px; color:#6b7280; margin-top:3px; line-height:1.3}
  .avis-p-notes{display:flex; gap:2px; margin:16px 0 14px}
  .avis-p-notes span{width:22px; height:22px; background:#00b67a; display:flex; align-items:center; justify-content:center}
  .avis-p-notes svg{width:14px; height:14px; fill:#ffffff}
  .avis-p-titre{font-family:inherit; font-weight:800; font-size:17px; color:#20242f; line-height:1.25; margin-bottom:8px}
  .avis-p-texte{
    font-size:15px; color:#20242f; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }
  /* « Voir plus » déplie vraiment le texte : une case à cocher masquée sert
     d'interrupteur, pour garder le rendu du design sans une ligne de JS. */
  .avis-p-plus{position:absolute; opacity:0; width:0; height:0}
  .avis-p-plus ~ label{font-size:15px; color:#2b6ef2; margin-top:10px; display:inline-block; cursor:pointer}
  .avis-p-plus ~ label:hover{text-decoration:underline}
  .avis-p-plus ~ label::after{content:"Voir plus"}
  .avis-p-plus:checked ~ label::after{content:"Voir moins"}
  .avis-p-plus:checked ~ .avis-p-texte{-webkit-line-clamp:unset}
  .avis-p-plus:focus-visible ~ label{outline:2px solid #2b6ef2; outline-offset:3px; border-radius:4px}
  .avis-p-pied{display:flex; align-items:center; gap:24px; margin-top:auto; padding-top:22px; color:#4b5563}
  .avis-p-pied > div{display:flex; align-items:center; gap:8px}
  .avis-p-pied span{font-size:14px}
  .avis-p-pied svg{width:17px; height:17px}
  /* Sur téléphone, les trois avis empilés faisaient 1 158 px à eux seuls — plus
     d'un écran et demi de défilement, pour trois cartes qui disent la même chose.
     Ils passent en rail glissant, comme les messages juste au-dessus : les trois
     avis sont toujours là, en entier, mais la page en récupère 780 px.
     Le pied de carte est aligné en bas (margin-top:auto), donc les trois gardent
     la même hauteur quelle que soit la longueur du texte. */
  @media(max-width:520px){
    .avis-plateforme{padding:28px 14px}
    .avis-plateforme-grille{
      display:flex; gap:14px; padding:16px; border-radius:22px;
      overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    }
    .avis-plateforme-grille::-webkit-scrollbar{display:none}
    .avis-p{flex:0 0 86%; scroll-snap-align:center}
  }

  /* ── FAQ ──────────────────────────────────────────────── */
  .faq{max-width:720px; margin:8px auto 0}
  .q{border:1px solid var(--line); border-radius:16px; margin-bottom:12px; background:var(--bg-2); overflow:hidden}
  .q summary{list-style:none; cursor:pointer; padding:20px 22px; font-family:"Fredoka",sans-serif; font-weight:500; font-size:17px; display:flex; justify-content:space-between; align-items:center; gap:14px}
  .q summary::-webkit-details-marker{display:none}
  .q .plus{flex:0 0 auto; width:24px;height:24px; position:relative; transition:transform .25s ease}
  .q .plus::before,.q .plus::after{content:""; position:absolute; background:var(--lav); border-radius:2px; top:50%; left:50%}
  .q .plus::before{width:13px;height:2px; transform:translate(-50%,-50%)}
  .q .plus::after{width:2px;height:13px; transform:translate(-50%,-50%)}
  .q[open] .plus::after{transform:translate(-50%,-50%) scaleY(0)}
  .q .a{padding:0 22px 20px; color:var(--muted); font-size:15px}

  /* ── Founder ──────────────────────────────────────────── */
  .founder{max-width:720px; margin:0 auto; background:linear-gradient(180deg,var(--bg-2),#101026); border:1px solid var(--line); border-radius:26px; padding:34px}
  .founder .row{display:flex; gap:18px; align-items:center; margin-bottom:18px}
  .founder .pic{width:72px;height:72px;border-radius:50%; object-fit:cover; flex:0 0 auto; box-shadow:var(--glow); border:2px solid rgba(155,140,255,.35)}
  .founder p{color:var(--muted); font-size:16px}
  .founder p + p{margin-top:14px}
  .sig{font-family:"Fredoka",sans-serif; color:var(--text); font-weight:500; margin-top:18px}
  .expert-box{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
  .expert-head{display:flex; gap:11px; align-items:flex-start; font-family:"Fredoka",sans-serif; font-weight:500; font-size:15px; color:var(--text); margin-bottom:15px; line-height:1.4}
  .expert-head .ehic{flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#9483F5,#6D5CE0); display:grid; place-items:center; box-shadow:var(--glow); margin-top:1px}
  .expert-head .ehic svg{width:16px; height:16px}
  .expert-creds{display:grid; gap:11px}
  .cred{position:relative; padding-left:24px; color:var(--muted); font-size:14.5px; line-height:1.55}
  .cred .star{position:absolute; left:0; top:0; color:var(--lav-bright); font-weight:700; font-size:14px; line-height:1.55}
  .cred b{color:var(--text); font-weight:600}

  /* ── Final CTA ────────────────────────────────────────── */
  .final{text-align:center}
  .final h2{margin-bottom:10px}
  .final .lead{margin:0 auto 28px; max-width:480px}

  /* ── Footer ───────────────────────────────────────────── */
  footer{border-top:1px solid var(--line); padding:40px 0; color:var(--muted-2); font-size:13.5px}
  .foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
  /* text-decoration:none n'est pas décoratif : sur la landing la marque est un
     <span>, mais sur le questionnaire, le blog et À propos c'est un <a> vers
     l'accueil — elle s'affichait donc soulignée sur quinze pages. */
  .brand{font-family:"Fredoka",sans-serif; font-weight:600; color:var(--text); font-size:18px; display:inline-flex; align-items:center; gap:9px; text-decoration:none}
  .brand .m{width:20px;height:20px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#EDE9FF,#8776F2); box-shadow:var(--glow)}
  .disclaimer{max-width:var(--maxw); margin:20px auto 0; color:var(--muted-2); font-size:12.5px; line-height:1.6; opacity:.85}
  /* Les liens par âge, en tête de pied de page. Discrets par rapport au reste
     du pied : ce sont quinze liens, ils ne doivent pas peser plus lourd que les
     mentions légales à côté desquelles ils vivent. */
  .foot-ages{padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line)}
  .foot-ages-t{margin:0 0 12px; color:var(--muted); font-size:13px; font-weight:600}
  .foot-ages .navlinks a{font-size:13px}

  /* ── Nav ──────────────────────────────────────────────── */
  nav{position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); background:rgba(11,11,22,.72); border-bottom:1px solid rgba(38,37,74,.6)}
  .navrow{display:flex; justify-content:space-between; align-items:center; height:64px;
          position:relative}   /* l'ancre du menu du téléphone, voir plus bas */
  .navlinks{display:flex; gap:26px; align-items:center}
  .navlinks a{color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:500}
  .navlinks a:hover{color:var(--text)}
  /* Le bouton de la nav est petit : sur le dégradé lavande clair des gros CTA,
     son texte foncé se délavait. Violet uni + blanc (4,9:1, AA) : il claque,
     et il reste le seul élément blanc de la barre — donc le seul à cliquer. */
  .nav-cta{padding:10px 20px; font-size:15px}
  .navlinks a.nav-cta{color:#fff; font-weight:700; background:var(--violet); box-shadow:0 14px 34px -8px rgba(150,130,255,.9), inset 0 1px 0 rgba(255,255,255,.25)}
  .navlinks a.nav-cta:hover{color:#fff; background:#7C6BEE}

  /* ── TROIS NIVEAUX, PAS SEPT LIENS À PLAT (05/08/2026) ──────
     La barre alignait sept items du même poids : les rubriques, la page
     « qui sommes-nous », l'ancre de l'offre et « Voir un exemple de bilan » —
     qui est l'argument de vente le plus fort du site, noyé au milieu du reste.
     Rien ne disait où cliquer.

     Trois zones désormais, séparées par un filet : les RUBRIQUES à gauche,
     AURÉLIE avec son visage, puis les deux GESTES — voir, et commencer. */
  .navsep{flex:none; width:1px; height:22px; background:rgba(155,140,255,.24)}

  /* Le visage. Il est partout ailleurs — la bulle, le bilan, la signature des
     emails —, et la barre du haut était le seul endroit anonyme d'un site qui
     se vend sur une personne. Elle mène à « à propos », et remplace au passage
     « Qui sommes-nous » : le reste du site dit « je ». */
  .navqui{display:inline-flex; align-items:center; gap:8px}
  .navlinks a.navqui{color:var(--text); font-weight:600}
  .navqui img{width:28px; height:28px; border-radius:50%; object-fit:cover;
              border:1px solid rgba(155,140,255,.5)}

  /* Le second geste, en contour : voir un exemple n'engage à rien, mais c'est
     ce qui fait acheter. Un lien texte le faisait passer pour une rubrique. */
  .navlinks a.nav-ghost{border:1px solid rgba(155,140,255,.45); border-radius:999px;
    padding:9px 16px; color:#E7E3FF; font-weight:600; font-size:14px}
  .navlinks a.nav-ghost:hover{border-color:rgba(155,140,255,.85); color:#fff}

  /* ── LE MENU DU TÉLÉPHONE ───────────────────────────────────
     Sous 900 px, il n'y avait RIEN : la règle qui masque les liens laissait la
     marque et le bouton d'achat, rien d'autre. Or le blog est une arrivée de
     Google, donc majoritairement mobile — un lecteur d'article n'avait aucun
     chemin vers le reste du site.

     <details> ouvre et ferme sans une ligne de JavaScript, comme les panneaux
     de la messagerie : une navigation qui exige un script est une navigation
     perdue le jour où le script ne charge pas. */
  /* ⚠ PAS DE position:relative ICI. Le panneau s'ancre sur la BARRE
     (.navrow), pas sur le bouton : ancré au bouton, ses 272 px partaient vers
     la gauche depuis un carré de 44 px et sortaient de l'écran. */
  .navmob{display:none; flex:none; order:-1; margin-right:4px}
  .navmob>summary{
    list-style:none; cursor:pointer; touch-action:manipulation;
    width:44px; height:44px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
    border:1px solid rgba(155,140,255,.32); border-radius:13px;
  }
  .navmob>summary::-webkit-details-marker{display:none}
  .navmob>summary i{display:block; width:18px; height:2px; border-radius:2px; background:#D9D4F5}
  .navmob[open]>summary i:nth-child(2){opacity:0}
  /* Pleine largeur sous la barre : au pouce, une liste qui prend l'écran se
     vise mieux qu'une colonne de 272 px collée à un bord. */
  .navmob-p{
    position:absolute; left:0; right:0; top:calc(100% + 10px);
    background:#12122A; border:1px solid rgba(155,140,255,.35); border-radius:18px;
    padding:8px; box-shadow:0 26px 60px -18px rgba(0,0,0,.85); z-index:30;
  }
  .navmob-p a{display:flex; align-items:center; gap:10px; padding:12px 14px;
    border-radius:12px; color:var(--text); text-decoration:none; font-size:15px; font-weight:500}
  .navmob-p a:hover{background:rgba(155,140,255,.12)}
  .navmob-p img{width:26px; height:26px; border-radius:50%; object-fit:cover}
  .navmob-p .fil{border:0; border-top:1px solid rgba(155,140,255,.18); margin:6px 10px}

  /* ── Insight / cycle (plus-value) ─────────────────────── */
  .cycle-svg{width:100%; height:auto; display:block; margin:6px auto 0; max-width:600px}
  .insight-card{
    max-width:600px; margin:36px auto 0;
    background:linear-gradient(180deg,#171634,#101026);
    border:1px solid rgba(155,140,255,.35); border-radius:24px; padding:28px 30px;
    box-shadow:0 26px 60px -24px rgba(80,60,200,.55); position:relative; overflow:hidden;
  }
  .insight-card::before{content:""; position:absolute; top:-50px; right:-30px; width:180px; height:180px; background:radial-gradient(circle,rgba(155,140,255,.28),transparent 65%); pointer-events:none}
  .faille-badge{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#F7B7D2; background:rgba(245,163,199,.12); border:1px solid rgba(245,163,199,.28); padding:5px 12px; border-radius:100px}
  .insight-card h3{margin:16px 0 10px; font-size:22px}
  .insight-card .mech{color:var(--muted); font-size:15.5px}
  .insight-div{height:1px; background:var(--line); margin:20px 0}
  .insight-plan{display:flex; gap:12px; align-items:flex-start}
  .insight-plan .arrow{flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:rgba(155,140,255,.16); display:grid; place-items:center; margin-top:1px}
  .insight-plan .arrow svg{width:15px; height:15px}
  .insight-plan p{color:var(--text); font-size:15.5px}
  .insight-plan b{color:var(--lav-bright)}

  /* ── Reveal ───────────────────────────────────────────── */
  /* L'apparition au scroll ne masque le contenu que si JavaScript tourne
     (classe « js » posée dans le <head>). Sans JS, la page reste lisible
     au lieu d'être entièrement blanche. */
  .js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
  .js .reveal.in{opacity:1; transform:none}

  /* ── Focus + motion ───────────────────────────────────── */
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--lav-bright); outline-offset:3px; border-radius:8px}

  @media (max-width:860px){
    .g3,.g4,.compare,.g2{grid-template-columns:1fr 1fr}
    /* Le pied de page réutilise .navlinks pour hériter du même alignement. Sans
       `nav >` ici, cette règle l'emportait aussi : sur tout téléphone, le pied
       de page perdait ses neuf liens — dont Mentions légales, CGV et
       Confidentialité, qui doivent rester joignables depuis chaque page. Un
       lecteur venu du blog n'avait alors plus aucun chemin nulle part. */
    /* ⚠ « > » : ENFANTS DIRECTS SEULEMENT. Sans lui, la règle attrapait aussi
       les liens du panneau du menu — qui vit dans .navlinks — et le menu
       s'ouvrait vide, sur une pilule de trente pixels de haut. */
    /* ⚠ « .navrow » : LA BARRE DU HAUT SEULEMENT. « nav » ne suffit pas — les
       quinze liens par âge du pied vivent dans <nav class="wrap foot-ages">,
       donc ils tombaient eux aussi : sur téléphone, l'accueil montrait le titre
       « Le sommeil de bébé, âge par âge » seul au-dessus d'un bloc vide, et le
       site perdait ses quinze liens internes les mieux placés. Le pied
       principal, lui, avait échappé au piège parce qu'il n'est pas un <nav>. */
    nav .navrow .navlinks > a:not(.nav-cta), nav .navrow .navlinks > .navsep{display:none}
    /* Le menu prend leur place — le bouton d'achat, lui, ne bouge pas. */
    .navmob{display:block}
    .navlinks{gap:10px}
  }
  @media (max-width:560px){
    section{padding:64px 0}
    .g3,.g4,.compare,.g2{grid-template-columns:1fr}
    .foot{flex-direction:column; text-align:center}
    /* Neuf liens redevenus visibles doivent rester visables au pouce : on les
       centre et on leur donne de la hauteur. L'écart, lui, est posé en style en
       ligne dans les seize pages — inutile d'essayer de le reprendre ici. */
    .foot .navlinks{justify-content:center}
    .foot .navlinks a{padding:6px 0}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
    .js .reveal, .reveal{opacity:1; transform:none}
  }


  /* trust strip */
  .trust-strip{max-width:580px; margin:22px auto 0; font-size:13.5px; color:var(--muted); line-height:1.6}
  .trust-strip b{color:var(--text); font-weight:600}
  /* pricing 2 formules */
  .pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:860px; margin:34px auto 0; align-items:start}
  .pricing-grid .price-card{margin:0; max-width:none}
  .price-card.tier2{border:2px solid var(--lav); box-shadow:0 26px 56px -20px rgba(120,100,240,.55), 0 0 0 5px rgba(155,140,255,.09)}
  .tier-tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#0B0B16; background:linear-gradient(135deg,#B9ADFF,#8776F2); padding:4px 12px; border-radius:100px; margin-bottom:12px}
  @media(max-width:760px){ .pricing-grid{grid-template-columns:1fr} }
  /* aimant email */
  .lead-magnet{max-width:840px; margin:0 auto; background:linear-gradient(180deg,var(--bg-2),#101026); border:1px solid var(--line); border-radius:26px; padding:32px 34px; display:flex; gap:28px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow)}
  .lm-text{flex:1 1 300px}
  .lm-text h2{font-size:25px; margin:10px 0 8px}
  .lm-text p{color:var(--muted); font-size:15px}
  .lm-form{flex:1 1 260px; display:flex; gap:10px; flex-wrap:wrap}
  /* 16 px minimum : en dessous, Safari iOS zoome la page dès qu'on entre dans le champ. */
  .lm-form input{flex:1 1 160px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--text); font-size:16px; font-family:inherit}
  .lm-form input::placeholder{color:var(--muted-2)}
  .lm-form input:focus{outline:none; border-color:var(--lav); box-shadow:0 0 0 3px rgba(155,140,255,.2)}
  /* avatar de la puéricultrice — bloc retiré le 28/07/2026, styles gardés pour le retour */
  .ehic-p{font-family:"Fredoka",sans-serif; font-weight:700; color:#0B0B16; font-size:15px}




  /* ⚠ NI JUSTIFIÉ NI COUPÉ (07/09/2026). C'est un <p> dans `.founder`, donc il
     héritait de la justification et de `hyphens:auto` posés dans tokens.css —
     une règle écrite pour de la PROSE. Sur un label en capitales espacées, ça
     donnait « VOTRE CONSUL-TANTE SOMMEIL » : le mot coupé en deux, à 500 px.
     Invisible tant que le métier s'appelait « coach sommeil », deux syllabes
     qui tenaient toujours. Une étiquette ne se justifie pas. */
  .expert-lab{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:14px}
  /* ⚠ `.founder .expert-lab`, PAS `.expert-lab` SEUL : la règle de
     justification de tokens.css vise `.founder p`, qui pèse plus lourd qu'une
     classe seule et l'emportait. Écrite sans le parent, la correction n'avait
     aucun effet — et ça ne se voit qu'à la capture, le CSS étant parfaitement
     valide dans les deux cas. */
  .founder .expert-lab{ text-align:left; hyphens:none; -webkit-hyphens:none }
  .pauline-row{display:flex; gap:14px; align-items:center; margin-top:20px; padding-top:18px; border-top:1px solid var(--line)}
  .pauline-photo{width:54px; height:54px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:2px solid rgba(155,140,255,.35)}
  .pauline-row > div{font-size:14.5px; color:var(--text); line-height:1.5}
  .pauline-row b{color:var(--text); font-weight:600}
  .pauline-row .prole{color:var(--muted)}
  .pauline-row .ptag{color:var(--muted); font-size:13px}


  /* newsletter (discrète, fin de page) */
  .newsletter{padding:42px 0; border-top:1px solid var(--line)}
  .nl-lead{color:var(--muted); font-size:15px; margin-bottom:16px}
  .nl-form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:440px; margin:0 auto}
  /* 16 px minimum : en dessous, Safari iOS zoome la page dès qu'on entre dans le champ. */
  .nl-form input[type=email]{flex:1 1 200px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:12px 15px; color:var(--text); font-size:16px; font-family:inherit}
  .nl-form input::placeholder{color:var(--muted-2)}
  .nl-form input[type=email]:focus{outline:none; border-color:var(--lav); box-shadow:0 0 0 3px rgba(155,140,255,.2)}
  .nl-form .btn{padding:12px 22px; font-size:15px}
  .nl-trap{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}   /* piège à robots */
  .nl-msg{max-width:440px; margin:16px auto 0; font-size:14.5px; padding:11px 16px; border-radius:12px}
  .nl-msg.ok{color:#6EE7B7; background:rgba(110,231,183,.10); border:1px solid rgba(110,231,183,.28)}
  .nl-msg.ko{color:#F7B7D2; background:rgba(245,163,199,.10); border:1px solid rgba(245,163,199,.28)}
  .nl-legal{max-width:440px; margin:14px auto 0; font-size:12.5px; color:var(--muted-2); line-height:1.6}
  .nl-legal a{color:var(--muted); text-decoration:underline}


  /* lien aperçu, plus visible (pas un bouton) */
  .apercu-link{display:inline-flex; align-items:center; gap:8px; color:var(--lav-bright); text-decoration:none; font-size:15.5px; font-weight:600; border-bottom:2px solid rgba(155,140,255,.5); padding-bottom:3px; transition:color .2s ease, border-color .2s ease}
  .apercu-link:hover{color:#fff; border-bottom-color:var(--lav-bright)}


  /* liste 'vous vous reconnaissez ?' — elle porte désormais le titre de la section,
     l'introduction et la conclusion qui l'encadraient ayant été retirées. */
  .recognize{max-width:720px; margin:64px auto 0; text-align:center}
  .recognize h2{margin-bottom:14px}
  /* Une phrase d'accroche entre le titre et la liste. */
  .recognize-intro{max-width:560px; margin:0 auto 30px; color:var(--muted);
    font-size:clamp(15px,2vw,17px); line-height:1.62}
  .recognize-intro em{color:var(--lav-bright); font-style:italic}

  /* ═══ Blocs portés depuis la maquette « observatoire des nuits » ═══
     Un seul monde : nuit + lavande. Empathie (avec dessin de bébé), déclic
     (courbe des cycles), CTA final (lune). Rien de tranché. */
  .eyebrow-min{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--lav-bright);
    font-family:"Plus Jakarta Sans",sans-serif}
  .eyebrow-min::before{content:""; width:16px; height:1px; background:linear-gradient(90deg,transparent,var(--lav))}

  /* — Empathie, une colonne centrée : accroche + cartes — */
  .recog-wrap{max-width:720px; margin:0 auto; text-align:center}
  .recog-wrap h2{margin-top:16px}
  .recog-lead{max-width:560px; margin:14px auto 28px; color:var(--muted);
    font-size:clamp(15px,2vw,17px); line-height:1.62}
  .recog-lead em{color:var(--lav-bright); font-style:italic}
  .recog-grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left;
    max-width:660px; margin:0 auto}
  .rec{display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:16px;
    background:rgba(255,255,255,.03); border:1px solid var(--line); font-size:15px; color:var(--text)}
  .rec .dot{width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center;
    background:rgba(155,140,255,.12); color:var(--lav-bright)}
  .rec .dot svg{width:17px; height:17px}
  @media(max-width:600px){ .recog-grid2{grid-template-columns:1fr; max-width:360px} }

  /* — Déclic, deux colonnes : texte + courbe des cycles — */
  .proof-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center;
    max-width:var(--maxw); margin:0 auto}
  .proof-grid h2{line-height:1.1}
  .badge-faille{display:inline-flex; align-items:center; gap:8px; margin:18px 0 8px;
    font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--wake); background:rgba(245,163,199,.1);
    border:1px solid rgba(245,163,199,.28); padding:6px 12px; border-radius:7px}
  .proof-lead{color:var(--muted); font-size:clamp(16px,2vw,18px); line-height:1.62; margin-top:16px}
  .proof-lead strong{color:var(--text); font-weight:600}
  .chart{background:linear-gradient(180deg,var(--bg-2),#100f24); border:1px solid var(--line);
    border-radius:22px; padding:24px 22px 18px}
  .chart-t{font-family:"Plus Jakarta Sans",sans-serif; font-weight:600; font-size:12px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--lav-bright); margin-bottom:6px}
  .chart svg{width:100%; height:auto; display:block; margin-top:8px}
  .chart .cap{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted-2); margin-top:4px}
  .cyc-line{fill:none; stroke:var(--lav-bright); stroke-width:2.4; stroke-linecap:round;
    stroke-dasharray:1100; stroke-dashoffset:1100; animation:cyc-draw 2.3s ease .3s forwards}
  @keyframes cyc-draw{to{stroke-dashoffset:0}}
  .wake-dot{fill:var(--wake)}
  @media(max-width:860px){.proof-grid{grid-template-columns:1fr; gap:30px}}
  @media (prefers-reduced-motion:reduce){.cyc-line{animation:none; stroke-dashoffset:0}}

  /* — Lune du CTA final (remplace la photo) — */
  .moon-final{width:120px; height:120px; margin:0 auto 20px; animation:moonfloat 7s ease-in-out infinite}
  .moon-final svg{width:100%; height:100%; filter:drop-shadow(0 0 40px rgba(231,198,187,.4))}
  @keyframes moonfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @media (prefers-reduced-motion:reduce){.moon-final{animation:none}}
  .recognize-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; text-align:left; max-width:660px; margin:0 auto}
  .rec-item{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--text); line-height:1.4}
  .rec-item .ck{flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:rgba(155,140,255,.15); display:flex; align-items:center; justify-content:center; margin-top:1px}
  .rec-item .ck svg{width:11px; height:11px}
  @media(max-width:600px){ .recognize-grid{grid-template-columns:1fr; max-width:360px} }

  /* Les trois étapes, en une ligne sous le bilan d'exemple. Elles occupaient une
     section entière de trois cartes, qui redisait la carte à 19 €. */
  .etapes{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:10px 22px; margin:26px auto 0; padding:0; max-width:640px;
    list-style:none; font-size:14.5px; color:var(--muted);
  }
  .etapes li{position:relative}
  /* Le point de séparation se pose dans l'espace entre deux étapes, sans faire de
     chaque <li> un conteneur flex — sinon « croisés » et son <b> se retrouveraient
     séparés de 22 px. */
  .etapes li + li::before{content:"·"; position:absolute; left:-13px; color:var(--lav-bright); opacity:.7}
  .etapes b{color:var(--text); font-weight:600}
  @media(max-width:600px){
    .etapes{flex-direction:column; gap:8px}
    .etapes li + li::before{display:none}
  }



  /* ── Aperçu du bilan : modale (l'utilisateur reste sur la page) ── */
  .apercu-modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px}
  .apercu-modal[hidden]{display:none}
  .apercu-backdrop{position:absolute; inset:0; background:rgba(6,6,16,.78); backdrop-filter:blur(4px)}
  .apercu-box{position:relative; display:flex; flex-direction:column; width:min(980px,100%); height:min(88vh,900px);
    background:var(--bg-2); border:1px solid rgba(155,140,255,.35); border-radius:22px; overflow:hidden;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
  /* Les deux barres sont du cadre, pas du contenu : ce qu'elles prennent en
     hauteur, le bilan le perd. On les tient au plus juste — de quoi lire le
     titre et viser les boutons, rien de plus. */
  .apercu-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 16px;
    border-bottom:1px solid var(--line); background:rgba(255,255,255,.03)}
  .apercu-title{font-family:"Fredoka",sans-serif; font-weight:600; font-size:14.5px}
  .apercu-close{width:28px; height:28px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
    background:rgba(255,255,255,.05); color:var(--text); font-size:13px; line-height:1}
  .apercu-close:hover{background:rgba(255,255,255,.12)}
  .apercu-frame{flex:1; min-height:0}
  .apercu-frame iframe{width:100%; height:100%; border:0; display:block; background:var(--bg)}
  .apercu-foot{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    padding:10px 16px; border-top:1px solid var(--line); background:rgba(255,255,255,.03)}
  /* Les boutons du site sont taillés pour une page entière ; dans une barre de
     40 px de haut ils la font gonfler à eux seuls. */
  .apercu-foot .btn{font-size:15px; padding:10px 20px}
  body.apercu-open{overflow:hidden}
  @media(max-width:640px){
    .apercu-modal{padding:0}
    .apercu-box{height:100%; width:100%; border-radius:0; border:0}
  }

  /* ── Vitrine de l'aperçu : on montre le bilan au lieu de le nommer ── */
  .apercu-showcase{
    display:block; position:relative; max-width:760px; margin:0 auto;
    border-radius:24px; overflow:hidden; text-decoration:none;
    border:1px solid rgba(155,140,255,.3);
    box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
    /* Le bilan est affiché EN ENTIER : la hauteur finale est calculée par le JS à
       partir de la hauteur réelle du document réduit. Rien n'est coupé.

       Le min-height n'est PAS décoratif : le cadre est en position absolue (hors
       du flux), donc sans lui la carte ferait 0 px avant la mesure. Et un élément
       de 0 px n'entre jamais dans le champ de vision : le cadre en chargement
       différé ne se chargerait jamais, le JS ne se déclencherait jamais, et la
       carte resterait vide. C'est ce blocage circulaire qui rendait l'aperçu
       invisible. */
    min-height:420px;
    transition:transform .25s ease, border-color .25s ease;
  }
  .apercu-showcase:hover{ transform:translateY(-4px); border-color:var(--lav) }

  /* Replié, le document est coupé net : ce dégradé lui rend une fin, et dit sans
     un mot qu'il continue. Il ne prend pas les clics — le lien passe dessous. */
  .apercu-showcase.est-replie::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:190px;
    pointer-events:none; z-index:2;
    background:linear-gradient(180deg, rgba(11,11,22,0), rgba(11,11,22,.72) 55%, rgba(11,11,22,.97));
  }

  /* Le bouton qui ouvre la suite. Il était gris sur fond sombre, avec un liseré
     de la couleur des séparateurs : posé juste sous le document, il se confondait
     avec lui et on ne le voyait pas. Il porte donc maintenant la lavande du site.
     Il reste malgré tout un cran en dessous de « Recevoir le bilan de mon bébé »,
     qui suit immédiatement : celui-là seul a un fond plein. */
  .apercu-plus{
    display:inline-flex; align-items:center; gap:9px;
    margin-top:20px; padding:13px 24px;
    font-family:"Fredoka",sans-serif; font-weight:600; font-size:15.5px; line-height:1;
    color:var(--lav-bright); background:rgba(155,140,255,.10);
    border:1px solid rgba(155,140,255,.42); border-radius:100px; cursor:pointer;
    transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  .apercu-plus:hover{ color:var(--text); background:rgba(155,140,255,.18); border-color:var(--lav) }
  .apercu-plus svg{ width:16px; height:16px; flex:0 0 auto; transition:transform .25s ease }
  .apercu-plus[aria-expanded="true"] svg{ transform:rotate(180deg) }

  /* — La liste « Ce que contient le bilan », à côté du document — */
  .apercu-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:44px; align-items:center}
  .apercu-liste .recog-lead{text-align:left; margin:14px 0 0; max-width:none}
  .apercu-col-doc{min-width:0}
  .sheet-list{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:15px}
  .sheet-list li{display:flex; gap:14px; align-items:flex-start}
  .sheet-list .ic{width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center;
    background:rgba(155,140,255,.12); color:var(--lav-bright)}
  .sheet-list .ic svg{width:16px; height:16px}
  .sheet-list b{font-family:"Fredoka",sans-serif; font-weight:600; font-size:16px; color:var(--text); display:block; margin-bottom:2px}
  .sheet-list .d{color:var(--muted); font-size:14px; line-height:1.5}
  @media(max-width:860px){ .apercu-grid{grid-template-columns:1fr; gap:28px} }

  /* Déplié, le bilan fait plusieurs écrans de haut, et le seul bouton pour le
     refermer était celui du dessous : il fallait dérouler le document en entier
     avant d'atteindre la section suivante. Celui-ci reste à portée tant qu'on
     parcourt le document, et disparaît dès qu'on en est sorti.
     Sur ordinateur aussi : le document y est encore plus haut qu'au téléphone. */
  .apercu-replier{
    /* La barre de geste de l'iPhone mange les 18 px du bas : on la contourne. */
    display:none; position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    z-index:60; align-items:center; gap:8px;
    font-family:"Fredoka",sans-serif; font-weight:600; font-size:15px; line-height:1;
    padding:13px 22px; border-radius:100px; cursor:pointer;
    color:var(--text); background:rgba(27,26,56,.94);
    border:1px solid rgba(155,140,255,.45);
    box-shadow:0 14px 30px -10px rgba(0,0,0,.9);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:background .2s ease, border-color .2s ease;
  }
  .apercu-replier svg{ width:16px; height:16px; flex:0 0 auto }
  .apercu-replier:not([hidden]){ display:inline-flex }
  .apercu-replier:hover{ border-color:var(--lav); background:rgba(38,36,76,.96) }

  /* La vraie page du bilan, réduite. Les valeurs par défaut servent si le JS
     n'a pas encore mesuré la carte ; napper.js/site.js les ajustent au pixel. */
  .apercu-page{
    position:absolute; top:0; left:0; border:0; display:block;
    width:940px; height:570px; transform:scale(.808); transform-origin:top left;
    pointer-events:none;   /* le clic doit atteindre le lien, pas la page du dessous */
    background:var(--bg);
  }

  /* L'appel à l'action passe SOUS le document, puisqu'on ne masque plus sa fin.
     (Nom distinct de body.apercu-open, qui signale la modale ouverte.) */
  .apercu-cta{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    text-align:center; margin-top:26px;
  }
  .apercu-hint{ font-size:13.5px; color:var(--muted-2) }

  @media(max-width:640px){
    .apercu-showcase{ border-radius:18px; min-height:300px }
    .apercu-hint{ font-size:12.5px; padding:0 16px }
    /* Sur iPhone le document collait aux bords de l'écran : on lui redonne de l'air. */
    #apercu .wrap{ padding-left:14px; padding-right:14px }
    #apercu{ padding:60px 0 }

    /* Replié, le document était coupé au milieu d'une phrase et le fondu effaçait
       la moitié des mots restants : on lisait « La nuit d'Arthur est déjà presque
       là » à travers un voile, ce qui ressemblait à un bug d'affichage plutôt qu'à
       un teaser. Le fondu est raccourci et devient franc en bas : la coupure se lit
       alors comme « ça continue » et non comme « le texte s'efface ».

       Le noir complet est atteint AVANT le bas du cadre, pas au dernier pixel :
       sinon la coupure tombait en plein milieu d'une pastille du bilan, qu'on
       voyait tranchée en deux à travers un voile — ce qui se lit comme un défaut
       d'affichage. Les 34 derniers pixels sont opaques, donc rien n'est jamais
       montré à moitié, quelle que soit la hauteur du document. */
    .apercu-showcase.est-replie::after{
      height:150px;
      background:linear-gradient(180deg,
        rgba(11,11,22,0) 0%, rgba(11,11,22,.55) 24%,
        rgba(11,11,22,.94) 60%, rgba(11,11,22,1) 78%, rgba(11,11,22,1) 100%);
    }
  }

  /* ── Le mobile respirait trop ──────────────────────────────
     Les 90 px de marge haute et basse de chaque section ont été dessinés pour un
     écran large. Sur un iPhone, mis bout à bout, ils ajoutaient l'équivalent de
     trois écrans de vide : on faisait défiler longtemps entre deux idées, et la
     page paraissait vide plutôt qu'aérée. */
  @media(max-width:600px){
    section{padding:56px 0}
    .hero{padding-top:40px; padding-bottom:44px}
    /* On resserre le décor, pas la lune : ses cratères sont placés en pixels fixes
       et se décaleraient si on la redimensionnait. */
    .moon-stage{height:140px; margin:4px auto 20px}
    .recognize{margin-top:40px}
    .recognize h2{margin-bottom:22px}
    .empathy{padding-top:26px}
  }

  /* La maquette du téléphone fait 844 px de haut, mais son contenu s'arrête bien
     avant : il restait un grand vide entre les réglages et la barre du bas, qui
     donnait au téléphone un air « étiré ». On raccourcit la coque : la barre du
     bas, ancrée en bas, remonte et le vide disparaît. (!important : la hauteur est
     posée en style en ligne par napper.js.)
     L'application réelle (/app/) n'est pas concernée : elle ne charge pas ce fichier. */
  .napper > div{ height:762px !important; }

  /* ═══════════════════════════════════════════════════════════════════
     RYTHME DE COULEUR

     Le site n'avait qu'un accord — lavande sur bleu nuit — tenu du hero au
     pied de page. Rien n'y était laid, mais tout s'y ressemblait : sur une
     page longue, l'œil n'a aucun repère pour savoir où il en est.

     Ce bloc introduit deux familles secondaires (définies dans tokens.css)
     et leur donne un emploi fixe :
       · vert-canard  → ce qui informe et compare, froid et sérieux ;
       · terre rose   → ce qui parle des gens, chaud.
     La lavande garde l'exclusivité de l'ACTION : boutons, prix, liens.
     C'est ce partage qui empêche l'effet sapin de Noël — trois couleurs
     employées au hasard font désordre, trois couleurs qui ont chacune un
     rôle font une charte.

     Additif, et posé en fin de fichier à dessein : aucune règle existante
     n'est réécrite, donc revenir en arrière c'est supprimer ce bloc.
     ═══════════════════════════════════════════════════════════════════ */

  /* Le comparatif : c'est la section qui informe. Fond canard très dilué —
     assez pour qu'on sente le changement en faisant défiler, trop peu pour
     qu'on puisse le nommer. */
  #different{ background:linear-gradient(180deg,#0A1518 0%, #0A0A16 100%) }
  #different .cmp:not(.mine){ border-color:rgba(143,201,194,.20) }
  #different .cmp:not(.mine) .t{ color:var(--canard-clair) }

  /* La section humaine : la fondatrice, puis les messages reçus. Halo tiède
     en haut, pour la détacher du comparatif froid qui la précède. */
  #qui{ background:radial-gradient(120% 55% at 50% 0%, rgba(221,179,168,.075) 0%, transparent 72%) }
  #qui .eyebrow{ color:var(--terre); border-color:rgba(221,179,168,.34); background:rgba(221,179,168,.10) }
  .founder{ border-color:rgba(221,179,168,.26) }
  .expert-box{ border-top-color:rgba(221,179,168,.30) }
  .founder .sig{ color:var(--terre) }
  .cred .star{ color:var(--terre) }

  /* Les étapes sous l'aperçu : un repère chiffré, pas une action. */
  .etapes li b{ color:var(--canard-clair) }

  /* La newsletter : on y demande quelque chose à quelqu'un. Fond tiède, et
     le liseré du haut passe en terre pour annoncer le changement de ton. */
  .newsletter{
    background:linear-gradient(180deg, rgba(221,179,168,.07) 0%, transparent 60%);
    border-top-color:rgba(221,179,168,.22);
  }

  /* Le pied de page ferme sur le froid, comme le hero ouvrait sur le nuit. */
  footer{ border-top:1px solid rgba(143,201,194,.14) }

  /* ── Le bandeau « Reprendre où j'en étais » (site.js) ──────────────
     Posé sous la nav, il défile avec la page : ce n'est pas une alerte
     collante, c'est un rappel qu'on voit en arrivant et qu'on oublie
     ensuite. Pas de seconde barre fixe — la nav en est déjà une, sur
     64 px, et deux bandeaux collés mangeraient un sixième d'un écran de
     téléphone en permanence. La croix est la porte de sortie : celle qui
     revient pour autre chose ne doit pas se sentir rattrapée.

     IL EST CANARD, PAS LAVANDE, et c'est le fond du problème qu'il
     résout. Son dégradé lavande s'éteignait en transparence sur une page
     lavande : on ne le voyait pas. Surtout, son bouton portait
     `btn-primary` — la couleur exacte du bouton qui RECOMMENCE le
     questionnaire, à quelques centimètres. Or ce bandeau existe parce
     qu'une cliente a fait quatre allers-retours puis tout retapé de zéro
     (voir site.js) : deux boutons de la même couleur, dont l'un reprend
     et l'autre efface une demi-heure de travail, c'est le piège qu'on
     voulait retirer. Le canard (--canard, déjà la famille des documents
     imprimés) dit « ce n'est pas le même geste » sans sortir de la
     palette. */
  /* Il suit le défilement, collé sous la barre du haut (64 px, .navrow).
     Deux éléments sticky l'un sous l'autre : la nav se pose à 0, celui-ci à
     64 — et il passe DESSOUS la nav (z-index 19 contre 20), jamais devant.

     Pourquoi le fixer : celle qui revient par l'accueil descend lire la page
     avant de décider. Si le rappel de son analyse est resté en haut, elle ne
     le retrouve qu'en remontant — c'est-à-dire jamais, et elle retape ses
     réponses (le cas du 26/07/2026 qui a fait naître ce bandeau).

     Le fond passe opaque : en flux, il n'avait que le ciel derrière lui ;
     collé, c'est le texte de la page qui défile dessous, et un fond à 30 %
     le laissait traverser. Même recette que la nav — un noir dense et un
     flou — avec la teinte verte par-dessus pour qu'il reste reconnaissable. */
  .reprise{
    position:sticky; top:64px; z-index:19;
    background:linear-gradient(180deg, rgba(60,107,105,.30), rgba(60,107,105,.10)),
               rgba(11,11,22,.86);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(143,201,194,.34);
  }
  .reprise-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px }
  .reprise-t{ margin:0; flex:1 1 240px; font-size:15px; color:var(--text) }
  .reprise-cta{
    padding:11px 20px; font-size:15px; color:#fff;
    /* Blanc sur #3C6B69 : 5,4:1, AA sur tout texte. Même construction que
       btn-primary (dégradé sur trois arrêts, ombre portée, filet clair en
       haut) pour que ce soit visiblement le même objet d'une autre couleur. */
    background:linear-gradient(135deg,#4C837F 0%, #3C6B69 55%, #2C5150 100%);
    box-shadow:0 8px 20px -8px rgba(20,60,58,.65), inset 0 1px 0 rgba(255,255,255,.24);
  }
  .reprise-cta:hover{
    transform:translateY(-2px); filter:brightness(1.06);
    box-shadow:0 10px 22px -10px rgba(20,60,58,.7), inset 0 1px 0 rgba(255,255,255,.36);
  }
  .reprise-x{
    background:none; border:0; cursor:pointer; padding:4px 8px;
    color:var(--muted-2); font-size:22px; line-height:1; border-radius:8px;
  }
  .reprise-x:hover{ color:var(--text); background:rgba(255,255,255,.06) }