/* ============================================================
   Je passe le relais : landing publique (refonte août 2026)
   Source : BRIEF-REFONTE.md (Laurent, Ma Pause Café).
   Principe : la promesse client d'abord, l'IA en coulisses (FAQ).
   Charte « café ». Typographie : Inter, la police du site précédent,
   remise à la demande de Laurent (04/08/2026) à la place de la stack
   système + Georgia de la maquette. Chargée depuis Google Fonts dans
   index.html, en display=swap. Les pages légales gardent
   css/tokens.css + site.css.
   ============================================================ */

:root{
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-titre:var(--font);
  --espresso:#2E1D13;
  --espresso-2:#44301F;
  --ink:#31261D;
  --caramel:#B86A33;
  --caramel-d:#8F4F22;
  --cream:#F5EDE2;
  --cream-2:#FAF5EC;
  --tint:#F7F1E8;
  --green:#1DA851;
  --green-vif:#25D366;
  --green-bg:#E7F6EC;
  --mute:#8A7B6E;
  --white:#FFFFFF;
  --radius:16px;
  --shadow:0 10px 30px rgba(46,29,19,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
/* Toute la typographie est en rem : ce 85 % la réduit de 15 % d'un coup
   (Laurent, 04/08/2026), en restant relatif à la taille choisie par le
   visiteur dans son navigateur. Les bornes hautes des clamp() étant en rem,
   les titres suivent aussi. */
html{font-size:85%;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.6}
h1,h2,h3,.serif{font-family:var(--font-titre);font-weight:800;letter-spacing:-.02em}
img{max-width:100%}
a{color:var(--caramel-d)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:36px 0}
.kicker{display:block;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--caramel);margin-bottom:10px}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.25;margin-bottom:14px}
.lead{font-size:1.05rem;color:var(--mute);max-width:640px}
:focus-visible{outline:3px solid var(--caramel);outline-offset:2px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;border:none;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-wa{background:var(--green-vif);color:#fff}
.btn-ghost{background:transparent;color:var(--espresso);border:2px solid var(--espresso)}
.btn-cream{background:var(--cream);color:var(--espresso)}
.btn-block{display:flex;width:100%;justify-content:center}
.btn svg{flex:none}

/* ---------- Bandeau de lancement ---------- */
/* Bandeau devenu un lien vers Enzo le 11/08/2026 (c'était un bouton de liste
   d'attente) : text-decoration et color sont repris, sinon la règle globale
   des liens le repeint en caramel souligné. */
.launch-banner{display:block;width:100%;background:var(--espresso);color:var(--cream);text-align:center;font-size:.85rem;padding:10px 16px;line-height:1.4;border:0;cursor:pointer;font-family:inherit;text-decoration:none}
.launch-banner:hover{background:var(--espresso-2)}
.launch-banner b{font-weight:800;color:var(--white)}
.launch-cta{color:var(--green-vif);font-weight:700}

/* ---------- Header ---------- */
/* En haut de page le header passe DERRIÈRE la pile du hero, qui doit déborder
   dessus. Dès que ça défile, js/site.js pose .colle et le header repasse au
   premier plan pour rester lisible. */
/* Bandeau + header collés ensemble : c'est le bloc qui colle, pas chacun de
   son côté, donc rien à coder en dur sur la hauteur du bandeau. */
/* z-index 20 en haut de page : la pile de démarches (z-index 30) passe DEVANT
   le header, c'est elle qui accueille. Dès qu'on défile, `.colle` fait repasser
   l'ensemble au-dessus pour que la navigation reste lisible. */
.topfixe{position:sticky;top:0;z-index:20}
.topfixe.colle{z-index:60}
header{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid #EFE7DA}
/* 80 px, et non 68 : la tête d'Enzo dépasse sa capsule de 14 px, il lui faut
   cette hauteur pour tenir dans le header au lieu de mordre sur le bandeau. */
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-titre);font-weight:700;font-size:1.15rem;color:var(--espresso);text-decoration:none}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{color:var(--ink);text-decoration:none;font-size:.92rem;white-space:nowrap}
.nav-links a:hover{color:var(--caramel-d)}

/* Bouton « Enzo est là ». Une pastille blanche cerclée, le visage d'Enzo calé
   à gauche et rogné par l'arrondi, son nom, sa disponibilité en vert. Le
   visage est plus haut que la pastille et débordé volontairement vers le bas :
   c'est ce qui lui donne l'air d'être posé dedans plutôt que collé dessus. */
.btn-enzo{display:inline-flex;align-items:flex-end;gap:9px;padding:0 20px 0 0;height:52px;
  background:var(--white);border:1.5px solid #E3DACC;border-radius:999px;
  text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .1s}
.btn-enzo:hover{border-color:var(--green);box-shadow:0 4px 14px rgba(46,29,19,.12)}
.btn-enzo:active{transform:scale(.985)}
/* Enzo DÉPASSE la capsule par le haut, calé sur son bord bas : c'est ce
   débordement qui fait sortir le personnage du bouton au lieu de l'y enfermer.
   Le fond blanc du dessin rejoint celui de la capsule, la jonction ne se voit
   pas. Retourné à l'horizontale pour qu'il regarde vers son nom, pas dehors. */
.enzo-face{width:56px;height:64px;object-fit:cover;object-position:center 4%;flex:none;
  margin:0 0 0 0;transform:scaleX(-1);
  /* Le bas suit l'arrondi de la capsule, sinon un coin carré dépasse sous le
     bord gauche. Le haut reste droit : c'est l'épaule, elle sort du bouton.
     Miroir oblige, l'arrondi se pose à DROITE avant le retournement. */
  border-bottom-right-radius:25px}
.enzo-txt{display:flex;flex-direction:column;line-height:1.15;gap:2px;padding-bottom:9px}
.enzo-txt b{font-size:1rem;font-weight:800;color:var(--espresso)}
.enzo-txt i{font-style:normal;font-size:.84rem;font-weight:600;color:var(--green);display:flex;align-items:center;gap:6px}
.pastille{width:8px;height:8px;border-radius:50%;background:var(--green-vif);flex:none}
.nav .btn{padding:10px 18px;font-size:.9rem}
.burger{display:none;background:none;border:none;font-size:1.6rem;color:var(--espresso);cursor:pointer}

/* ---------- Hero ----------
   Fond clair : le clair domine dès le premier écran (arbitrage Laurent,
   03/08/2026). Il ne reste que deux respirations sombres sur la page :
   le simulateur et le CTA final. */
.hero{background:linear-gradient(180deg,#FDFAF4 0%,#F6EFE4 100%);color:var(--ink);padding:0}
/* Trois zones : le texte, l'illustration qui court sur toute la hauteur, et la
   preuve sociale. Nommer les zones permet de la faire passer sous Enzo en
   mobile sans toucher au HTML ni dupliquer le bloc. */
/* `1fr auto` sur les lignes : la hauteur libre laissée par l'illustration part
   dans la ligne du texte, pas dans celle de la preuve sociale. Sans ça, cette
   dernière descendait au ras du bas de la page au lieu de suivre le texte. */
.hero-grid{display:grid;grid-template-columns:1fr 460px;grid-template-areas:"copy art" "social art";grid-template-rows:1fr auto;column-gap:28px;row-gap:0;align-items:end;padding-top:40px;padding-bottom:18px}
/* Les 40 px de respiration du bas passent de la colonne de texte à la preuve
   sociale, qui la termine désormais. Sans ce transfert, ils s'ajoutaient à
   l'écart entre les deux et décrochaient les visages du texte. */
.hero-copy{grid-area:copy;padding-bottom:0}
.hero-art{grid-area:art}
.hero-social{grid-area:social;padding-bottom:40px}
.hero h1{font-size:clamp(2.1rem,4.6vw,3rem);line-height:1.15;margin-bottom:18px;color:var(--espresso)}
.hero h1 em{color:var(--caramel-d);font-style:normal}
/* « Considérez que c'est fait. » doit tenir sur une seule ligne (Laurent). */
@media (min-width:901px){ .hero h1 em{white-space:nowrap} }
.hero p.sub{font-size:1.12rem;color:#5C4F42;margin-bottom:30px;max-width:540px}
.hero p.sub strong{color:var(--espresso)}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.hero .wink{font-family:var(--font-titre);font-style:italic;color:var(--caramel-d);font-size:.98rem}
/* Invitation WhatsApp : un petit téléphone dessiné en CSS qui déborde sur une
   pilule. Purement visuel pour l'instant, aucun lien tant que le numéro
   d'Enzo n'est pas ouvert. */
/* Depuis le 11/08/2026 c'est un vrai lien vers la conversation d'Enzo. Le
   visuel ne bouge pas : seuls le survol et l'appui le disent cliquable. */
.wa-invite{display:inline-flex;margin-top:4px;text-decoration:none;color:inherit;transition:transform .12s}
.wa-invite:hover .wa-pill{border-color:var(--caramel);box-shadow:var(--shadow)}
.wa-invite:active{transform:scale(.99)}
.wa-phone{flex:none;width:44px;height:76px;margin:-27px 0;padding:8px 7px;border:4px solid var(--espresso);border-radius:13px;background:var(--white);display:flex;flex-direction:column;gap:5px}
.wa-phone i{display:block;height:7px;border-radius:99px;background:#E3DDD2}
.wa-phone i.v{background:#A9E3A4}
.wa-phone i.lg{width:100%}
.wa-phone i.md{width:74%}
.wa-phone i.sm{width:52%}
.wa-phone i.dr{align-self:flex-end}
.wa-pill{padding:15px 30px 15px 16px;border-radius:999px;background:var(--white);border:1px solid #E8DCCB;color:var(--espresso);font-size:1rem;font-weight:700;line-height:1.35;display:inline-flex;align-items:center;gap:16px}

/* Le bloc s'ajuste à la largeur de l'invitation, ce qui permet de centrer la
   ligne de disponibilité exactement sous elle. */
.wa-bloc{display:inline-block}
.hero-dispo{margin-top:14px;font-size:.95rem;color:#5C4F42;text-align:center}
.hero-dispo b{color:var(--espresso)}
/* Retour à la ligne réservé au mobile. */
.br-mob{display:none}
/* Capsules de navigation sous le CTA : elles remplacent les points de
   réassurance et emmènent vers les trois sections que le visiteur cherche. */
.hero-liens{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-liens a{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;background:var(--white);border:1px solid #E4D9C9;color:var(--espresso);font-size:.9rem;font-weight:600;text-decoration:none;transition:border-color .15s ease,color .15s ease,transform .15s ease}
.hero-liens a:hover{border-color:var(--caramel);color:var(--caramel-d);transform:translateY(-1px)}
/* Les trois visages qui se chevauchent, puis la phrase, sur une même ligne. */
.hero-social{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
/* Sur grand écran, les visages précèdent la phrase, comme avant que le bloc ne
   soit sorti de la colonne de texte. Le HTML les met après, pour l'ordre voulu
   sur mobile : `order` rétablit l'ordre d'origine ici, sans dupliquer le bloc. */
.hero-avatars{display:inline-flex;flex:none;order:-1}
/* Agrandis de moitié le 11/08/2026 : 38 px se remarquaient à peine sous la
   phrase. Le chevauchement suit la même échelle pour garder la pile serrée. */
.hero-avatars img{width:57px;height:57px;border-radius:50%;object-fit:cover;border:2px solid var(--white);box-shadow:0 2px 6px rgba(46,29,19,.14);margin-left:-18px}
.hero-avatars img:first-child{margin-left:0}
.hero-social b{font-size:.98rem;color:var(--espresso)}

.bub{max-width:85%;padding:10px 14px;border-radius:14px;font-size:.88rem;margin-bottom:10px;line-height:1.45}
.bub.user{background:#DCF8C6;color:#2B3A28;margin-left:auto;border-bottom-right-radius:4px}
.bub.enzo{background:#fff;color:var(--ink);border-bottom-left-radius:4px}
.jeton-inline{width:1.15em;height:1.15em;border-radius:50%;vertical-align:-.22em;margin:0 1px}
.bub .proof{display:inline-flex;align-items:center;gap:6px;background:var(--green-bg);color:var(--green);font-weight:700;border-radius:8px;padding:4px 8px;font-size:.8rem;margin-top:6px}

/* ---------- Bandeau garanties ---------- */
.guarantees{background:var(--cream);padding:26px 0;border-top:1px solid #E8DCCB;border-bottom:1px solid #E8DCCB}
.g-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.g-item{display:flex;align-items:center;gap:12px;font-size:.92rem;font-weight:600;color:var(--espresso)}
.g-item .ic{width:40px;height:40px;flex:none;border-radius:50%;background:var(--white);display:grid;place-items:center;box-shadow:0 3px 10px rgba(46,29,19,.08)}

/* ---------- Comment ça marche : iPhone à gauche, intro + étapes à droite ---------- */
.comment-grid{display:grid;grid-template-columns:360px 1fr;grid-template-areas:"tel intro" "tel etapes";column-gap:56px;row-gap:26px;align-items:start}
.comment-intro{grid-area:intro}
.comment-grid .phone{grid-area:tel;align-self:center}
.comment-etapes{grid-area:etapes;display:grid;gap:14px}
.comment-etapes .steps{grid-template-columns:1fr;gap:14px;margin-top:0}
.comment-note{font-size:1.05rem;color:var(--mute);margin-top:6px}
.comment-note a{font-weight:700}
h2 em{color:var(--caramel-d);font-style:normal}

/* Les deux issues : réussite en vert, échec en crème. */
.issues{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.issue{border-radius:var(--radius);padding:20px 22px}
.issue h3{font-size:1.02rem;margin-bottom:6px}
.issue p{font-size:.9rem;color:#5C4F42}
.issue b{color:var(--espresso)}
.issue-ok{background:var(--green-bg)}
.issue-ok h3{color:var(--green)}
.issue-ko{background:var(--tint);border:1px solid #EDE3D4}
.issue-ko h3{color:var(--caramel-d)}

/* ---------- Le téléphone ---------- */
.phone{width:340px;justify-self:center}
.phone-frame{background:#1B1B1F;border-radius:46px;padding:11px;box-shadow:0 24px 60px rgba(46,29,19,.26)}
.phone-screen{position:relative;height:640px;border-radius:36px;overflow:hidden;background:#ECE1D2;display:flex;flex-direction:column}
.phone-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:92px;height:24px;background:#000;border-radius:999px;z-index:4}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:11px 20px 5px;font-size:.7rem;font-weight:700;color:var(--espresso);background:#F3F6F2}
.ph-status-ic{display:flex;gap:3px;align-items:flex-end}
.ph-status-ic b{display:block;width:3px;background:var(--espresso);border-radius:1px}
.ph-status-ic b:nth-child(1){height:5px}
.ph-status-ic b:nth-child(2){height:8px}
.ph-status-ic b:nth-child(3){height:11px}
.ph-head{display:flex;align-items:center;gap:10px;padding:6px 16px 10px;background:#F3F6F2;border-bottom:1px solid #E1D8C8}
.ph-head img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.ph-head b{display:block;font-size:.82rem;color:var(--espresso);line-height:1.2}
.ph-head small{font-size:.7rem;color:var(--green)}
.ph-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:none}
.ph-body::-webkit-scrollbar{display:none}
/* `margin-top:auto` colle le fil en bas tant qu'il est court, sans casser le
   défilement quand il devient plus haut que l'écran. */
.ph-fil{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:14px 12px}
/* `margin-bottom` seul : un `margin:0` écraserait le `margin-left:auto` qui
   pousse les messages du client à droite. */
/* pre-line : les retours à la ligne écrits dans les messages sont rendus. */
.ph-fil .bub{font-size:.8rem;max-width:88%;margin-bottom:0;box-shadow:0 1px 1px rgba(46,29,19,.08);white-space:pre-line}
.ph-vide{height:2.4em;flex:none}
.ph-barre{padding:9px 16px 14px;background:#F3F6F2;border-top:1px solid #E1D8C8}
.ph-barre span{display:block;background:#fff;border-radius:999px;padding:8px 14px;font-size:.75rem;color:var(--mute)}

/* Curseur de la machine à écrire */
.bub.tape::after{content:"";display:inline-block;width:2px;height:.95em;background:currentColor;margin-left:2px;vertical-align:-2px;animation:ph-curseur .8s steps(1) infinite}
@keyframes ph-curseur{50%{opacity:0}}
/* « Enzo écrit… » */
.ph-ecrit{display:flex;gap:4px;align-items:center;background:#fff;border-radius:14px;border-bottom-left-radius:4px;padding:12px 14px;width:max-content}
.ph-ecrit i{width:6px;height:6px;border-radius:50%;background:#B9AC9C;animation:ph-point 1.2s infinite}
.ph-ecrit i:nth-child(2){animation-delay:.2s}
.ph-ecrit i:nth-child(3){animation-delay:.4s}
@keyframes ph-point{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* La facture envoyée par le client */
.facture{display:block;background:#fff;border-radius:10px;padding:11px 12px;margin-bottom:6px;box-shadow:0 1px 4px rgba(46,29,19,.16)}
.facture-tete{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #EAE0D2;padding-bottom:6px;margin-bottom:8px}
.facture-tete b{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--espresso)}
.facture-tete i{font-style:normal;font-size:.66rem;color:var(--mute)}
.facture-l{display:block;height:5px;border-radius:3px;background:#EFE7DA;margin-bottom:5px}
.facture-l.court{width:52%}
.facture-l.moyen{width:74%}
.facture-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:9px;padding-top:7px;border-top:1px solid #EAE0D2;font-size:.72rem;color:var(--mute)}
.facture-total b{font-size:.86rem;color:var(--espresso)}

/* ---------- Étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.step{background:var(--tint);border-radius:var(--radius);padding:30px 26px;position:relative}
.step .num{width:44px;height:44px;border-radius:50%;background:var(--espresso);color:var(--cream);display:grid;place-items:center;font-family:var(--font-titre);font-size:1.25rem;font-weight:700;margin-bottom:18px}
.step h3{font-size:1.15rem;margin-bottom:8px}
.step p{font-size:.95rem;color:#5C4F42}
/* Empilées à côté du téléphone : plus compactes, et sans numéro. */
.comment-grid .step{padding:20px 22px}
.comment-grid .step h3{font-size:1.02rem;margin-bottom:6px}
.comment-grid .step p{font-size:.9rem}

/* ---------- Missions & prix ---------- */
.missions{background:var(--cream-2)}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
/* Fermées, les cartes d'une même rangée s'alignent sur la plus haute : c'est ce
   qui rend la grille nette. Mais dès qu'un détail s'ouvre, cet alignement
   étirait ses deux voisines à la même hauteur — 273 px devenaient 889, dont 600
   de blanc. Ouvert, chacune reprend donc sa taille. */
.m-grid:has(.carte-plus[open]){align-items:start}
.m-card{background:var(--white);border-radius:var(--radius);padding:26px;box-shadow:0 4px 16px rgba(46,29,19,.06);display:flex;flex-direction:column;gap:8px}
.m-card h3{font-size:1.08rem}
.m-card p{font-size:.9rem;color:#5C4F42;flex:1}
.price{font-weight:800;color:var(--green);font-size:1.02rem;white-space:nowrap}
.price small{color:var(--mute);font-weight:400;font-size:.76rem}
/* Jetons, prix en euros et tarif pack sur une seule ligne (Laurent). */
.m-foot{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-top:4px}
.m-foot .chip{flex:none}
.m-note{text-align:center;margin-top:22px;font-size:.9rem;color:var(--mute)}
.lead-large{max-width:none}
.packs-intro{font-size:.95rem;color:#5C4F42}

/* Immatriculation ORIAS : bloc de réassurance, discret mais lisible. */
.orias{margin-top:26px;background:var(--white);border:1px solid #EFE7DA;border-left:4px solid var(--caramel);border-radius:var(--radius);padding:22px 24px;display:grid;gap:10px}
.orias p{font-size:.88rem;line-height:1.6;color:#5C4F42}
.orias b{color:var(--espresso)}

/* ---------- Simulateur ---------- */
.sim{background:var(--espresso);color:var(--cream)}
.sim h2{color:var(--cream)}
.sim-box{background:var(--espresso-2);border-radius:20px;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin-top:38px}
.sim label{display:block;font-size:.9rem;margin-bottom:10px;color:#D8C9B8}
.sim select{width:100%;padding:14px 16px;border-radius:12px;border:none;font-size:1rem;color:var(--ink);background:var(--white)}
.sim-result{text-align:center}
.sim-result .euros{font-family:var(--font-titre);font-size:3rem;font-weight:700;color:var(--green-vif);line-height:1.1;font-variant-numeric:tabular-nums}
.sim-result .detail{font-size:.9rem;color:#D8C9B8;margin:8px 0 18px}
.sim-note{font-size:.82rem;color:#B5A28E;margin-top:18px}
/* Visuel « Enzo à son bureau », format d'origine conservé (aucun recadrage). */
.sim-figure{max-width:620px;margin:34px auto 0}
.sim-figure .capsule{left:0;bottom:0}

/* ---------- Preuve ---------- */
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:44px 0 10px}
.counter{background:var(--tint);border-radius:var(--radius);padding:30px;text-align:center}
.counter .big{font-family:var(--font-titre);font-size:2.4rem;font-weight:700;color:var(--espresso);line-height:1.1;font-variant-numeric:tabular-nums}
.counter .lbl{font-size:.9rem;color:var(--mute);margin-top:6px}
.proof-caption{text-align:center;font-size:.82rem;color:var(--mute)}

/* ---------- Jetons & packs (section du site précédent, charte café) ---------- */
.tarif{background:var(--white)}
.tarif-une{display:flex;align-items:center;gap:22px;margin-top:26px}
.tarif-une-jeton{width:120px;height:auto;flex:none}
.tarif-une-titre{font-family:var(--font-titre);font-size:1.3rem;font-weight:700;color:var(--espresso);line-height:1.25}
.tarif-une-sub{color:#5C4F42;font-size:.95rem}
.tarif-une-sub b{color:var(--caramel-d)}
.tarif-sub{margin-top:18px}

.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px;align-items:stretch}
.price-card{position:relative;background:var(--tint);border:1px solid #EDE3D4;border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.price-card-pop{background:var(--white);border:2px solid var(--green);box-shadow:0 10px 28px rgba(29,168,81,.12)}
.pop-badge,.promise-badge{position:absolute;top:-12px;left:22px;padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.pop-badge{background:var(--green);color:#fff}
.promise-badge{background:var(--caramel);color:#fff}
.price-label{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.price-big{font-family:var(--font-titre);font-size:1.75rem;font-weight:700;color:var(--espresso);line-height:1.15;font-variant-numeric:tabular-nums}
.price-big span{display:block;font-family:inherit;font-size:.82rem;font-weight:400;color:var(--mute);margin-top:4px}
.price-list{list-style:none;display:grid;gap:9px;font-size:.88rem;color:#5C4F42;flex:1}
/* Le ✓ est sorti du flux : sinon les <b> deviennent des éléments flex et le
   texte se casse en colonnes. */
.price-list li{position:relative;padding-left:20px;line-height:1.45}
.price-list li > span:first-child{position:absolute;left:0;top:0;color:var(--green);font-weight:800}
.price-list b{color:var(--espresso)}
.btn-card{justify-content:center;padding:12px 18px;font-size:.92rem}
.promise-card{background:var(--green-bg);border-color:#C9E8D4}
.promise-price{color:var(--green)}
.grid-note{margin-top:20px;font-size:.85rem;color:var(--mute);text-align:center}

.jetons-explain{margin-top:44px;background:var(--cream-2);border:1px solid #EFE7DA;border-radius:var(--radius);padding:28px}
.jetons-title{font-family:var(--font-titre);font-size:1.2rem;font-weight:700;color:var(--espresso);margin-bottom:16px}
.bareme{display:grid;gap:2px}
.bareme-row{display:grid;grid-template-columns:180px 110px 1fr;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid #EFE7DA;font-size:.92rem}
.bareme-row:last-child{border-bottom:0}
.bareme-cat{font-weight:700;color:var(--espresso)}
.bareme-cr{font-weight:800;color:var(--caramel-d);text-align:right;font-variant-numeric:tabular-nums}
.bareme-ex{color:#5C4F42}
.bareme-add{color:var(--mute)}
.jetons-note{margin-top:16px;font-size:.85rem;color:var(--mute)}
.jetons-note b{color:var(--espresso)}

.packs-title{font-family:var(--font-titre);font-size:1.4rem;color:var(--espresso);margin:0 0 10px}
/* Le titre des packs à gauche, Enzo à son bureau à droite, calé sur le bord
   droit des cartes qui suivent. */
/* `end` : le bas de l'illustration se cale sur la dernière ligne du texte. */
.packs-head{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:end;margin:48px 0 22px}
.packs-enzo{margin-top:12px;font-size:.92rem;line-height:1.6;color:#5C4F42;max-width:640px}
.packs-enzo b{color:var(--espresso)}
.packs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
/* Même règle que la grille des missions, et pour la même raison : ouvrir le
   Pack Detox, qui occupe les deux rangées, faisait passer les deux cartes de
   gauche de 213 à 662 px chacune. Fermé, l'alignement reprend ses droits. */
.packs-grid:has(.carte-plus[open]){align-items:start}
/* Le fond crème des cartes se confondait avec le fond crème de la section :
   fond blanc, ombre portée et liseré caramel en tête, qui les distingue aussi
   des missions à l'unité juste au-dessus (blanches, sans liseré). */
.pack-card{position:relative;background:var(--white);border:1px solid #EFE7DA;border-top:3px solid var(--caramel);border-radius:var(--radius);padding:22px 24px 24px;box-shadow:0 6px 20px rgba(46,29,19,.07);transition:transform .15s ease,box-shadow .15s ease}
.pack-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(46,29,19,.11)}
/* Le pack mis en avant, sur le modèle de « Le plus choisi » des tarifs. */
.pack-card-pop{border-color:var(--green);border-top-color:var(--green);box-shadow:0 10px 28px rgba(29,168,81,.14)}
.pack-card-pop .pop-badge{top:-11px}
/* L'offre fusionnée occupe la colonne de droite sur toute la hauteur. */
/* Le pack du milieu occupe les deux rangées de la colonne de droite. `align-self`
   l'empêche de s'ÉTIRER quand une carte de gauche s'ouvre : sans lui, déplier le
   Pack Contrats faisait passer le Pack Detox de 447 à 1210 px, dont 760 de blanc.
   Fermé, sa hauteur naturelle vaut déjà les deux rangées : rien ne change. */
.pack-card-haut{grid-column:2;grid-row:1 / span 2;align-self:start;display:flex;flex-direction:column;gap:10px}
.pack-suite-titre{font-size:.9rem;font-weight:700;color:var(--espresso);margin-top:2px}
.pack-suite{list-style:none;display:grid;gap:7px;font-size:.88rem;line-height:1.55;color:#5C4F42}
.pack-suite li{position:relative;padding-left:16px}
.pack-suite li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--caramel)}
.pack-suite b{color:var(--espresso)}
.packs-garantie{margin-top:20px;font-size:.9rem;color:#5C4F42;text-align:center}
.packs-garantie b{color:var(--espresso)}
.pack-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.pack-head b{font-family:var(--font-titre);font-size:1.08rem;color:var(--espresso)}
.pack-head .chip{white-space:nowrap}
.pack-price{font-weight:800;color:var(--caramel-d);white-space:nowrap}
.pack-card p{font-size:.9rem;color:#5C4F42}
.packs-argument{margin-top:22px;font-size:.95rem;color:#5C4F42;text-align:center}
.packs-argument b{color:var(--espresso)}

/* Réassurance : six capsules en deux rangées de trois, centrées. */
.reassure{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.rchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px 18px;border-radius:20px;background:var(--white);border:1px solid #EFE7DA;font-size:.82rem;color:#5C4F42;line-height:1.4;text-align:center}
.rchip b{font-size:.88rem;color:var(--espresso)}

/* La capsule paiement porte le libellé et les quatre logos. */
.pay-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.pay{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:50px;padding:0 10px;border-radius:8px;background:var(--white);border:1px solid #E8DCCB}
.pay svg{display:block}

/* ---------- FAQ ---------- */
.faq{background:var(--cream-2)}
.faq-list{max-width:760px;margin:38px auto 0}
details{background:var(--white);border-radius:14px;margin-bottom:12px;box-shadow:0 3px 12px rgba(46,29,19,.05);overflow:hidden}
summary{cursor:pointer;padding:20px 24px;font-weight:700;color:var(--espresso);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;color:var(--caramel);flex:none;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details .body{padding:0 24px 20px;font-size:.95rem;color:#5C4F42}

/* ---------- Parrainage ---------- */
.refer-box{background:var(--green-bg);border-radius:20px;padding:40px;display:flex;align-items:center;gap:30px;justify-content:space-between;flex-wrap:wrap}
.refer-box h2{margin-bottom:6px}
.refer-box p{color:#43604C;max-width:520px}
.refer-note{font-size:.8rem;color:#5F7A67;margin-top:10px}

/* ---------- CTA final ---------- */
.final{background:var(--espresso);color:var(--cream);text-align:center;padding:44px 0}
.final h2{color:var(--cream);font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:12px}
.final p{color:#D8C9B8;margin-bottom:30px}
/* Le même visuel d'invitation, mais posé sur le fond sombre du CTA final. */
.final .wa-bloc{margin-top:22px}
.final .wa-phone{border-color:var(--cream)}
.final .wa-pill{background:#EDE1CD;border-color:transparent}
.final .hero-dispo{color:#D8C9B8}
.final .hero-dispo b{color:var(--cream)}

/* ---------- Footer ---------- */
footer{background:#241610;color:#B5A28E;padding:36px 0;font-size:.85rem}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:#D8C9B8;text-decoration:none;margin-right:18px}
footer a:hover{text-decoration:underline}
.foot-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-titre);color:var(--cream)}
.foot-jeton{border-radius:50%}

/* ---------- Charte : chips, capsules, avatars ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:700}
.chip-jeton{background:#FBEED9;color:var(--caramel-d)}
.chip-jeton img{width:18px;height:18px}
.chip-green{background:var(--green-bg);color:var(--green)}
.capsule{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:999px;padding:10px 20px 10px 12px;box-shadow:var(--shadow);width:max-content;max-width:100%}
.capsule img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.capsule b{color:var(--espresso);font-size:.9rem;line-height:1.3}
.capsule small{display:block;color:var(--mute);font-size:.78rem;font-weight:400}
.avatar-img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--caramel)}
.logo-img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.logo-img.off{display:none}

/* ---------- Illustrations Enzo ----------
   Les illustrations sont des découpes à fond transparent : ni cadre ni
   ombre portée (le rectangle se verrait), elles posent directement sur
   le fond clair. */
.figure{position:relative}
/* « > » indispensable : sinon cette règle écrase l'avatar de .capsule.
   `height:auto` obligatoire : sans lui, l'attribut height du HTML fige la
   hauteur et l'illustration est étirée. */
.figure > img{width:100%;height:auto;display:block}
.figure .capsule{position:absolute;left:0;bottom:8px}
/* Bandeau missions : repris du site actuel, la pile du hero passe devant.
   Défilement continu : deux pistes identiques se suivent et l'ensemble
   translate de la largeur d'une piste, d'où une boucle sans raccord.
   `padding-right` (et non un gap sur le conteneur) garde l'écart de jonction
   identique à l'écart interne : sans ça, un saut serait visible à chaque tour. */
.band{background:var(--espresso);padding-block:16px;overflow:hidden}
.band-marquee{display:flex;width:max-content;animation:band-defile 55s linear infinite}
.band-marquee:hover{animation-play-state:paused}
.band-track{display:flex;gap:22px;align-items:center;padding-right:22px;font-size:.88rem;font-weight:600;color:#fff;white-space:nowrap}
.band-track > *{flex:none}
.band .dot{color:var(--caramel)}
/* Second bandeau, juste avant le CTA final : même fond sombre que lui, donc
   un filet clair marque la séparation. */
.band-final{border-bottom:1px solid rgba(245,237,226,.16)}
@keyframes band-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Mouvement réduit : plus d'animation, une seule piste, calée à gauche. */
@media (prefers-reduced-motion:reduce){
  .band-marquee{animation:none;width:100%}
  .band-track:last-child{display:none}
  .band-track{padding-inline:24px}
}

/* Visuel du hero : la pile de démarches, l'ampleur du sujet en un coup d'œil.
   Calage repris du site actuel : elle remonte devant le bandeau sombre et le
   bas du header. `pointer-events:none` pour que sa zone transparente ne bloque
   pas les liens du menu. */
/* Le fichier a ~7 % de transparence en haut : le décalage tient compte de ce
   vide pour que le sommet visible de la pile morde vraiment sur le header. */
/* L'illustration est calée sur le HAUT de la rangée (align-self:start) : sa
   position ne dépend donc plus de la hauteur du texte, et elle ne bouge plus
   quand on ajoute ou retire une ligne dans le hero. */
.hero-art{position:relative;z-index:30;align-self:start;margin-top:-155px;pointer-events:none}
.hero-art img{display:block;width:100%;height:auto}
.float-card{position:absolute;left:15px;top:34%;background:var(--white);border-radius:14px;border-bottom-right-radius:4px;box-shadow:var(--shadow);padding:11px 15px;font-size:.82rem;line-height:1.5;color:#5C4F42;width:max-content;max-width:100%}
.float-card b{color:var(--espresso)}

/* ---------- Profils ---------- */
.personas{background:var(--white)}
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.p-card{background:var(--tint);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px}
.p-head{display:flex;align-items:center;gap:14px}
.p-avatar{width:56px;height:56px;border-radius:50%;flex:none;background:var(--caramel);color:#fff;display:grid;place-items:center;font-family:var(--font-titre);font-size:1.3rem;font-weight:700;overflow:hidden}
/* `display:contents` : sans lui, le <picture> casserait le dimensionnement
   de la photo dans la pastille ronde. */
.p-avatar picture{display:contents}
.p-avatar img{width:100%;height:100%;object-fit:cover}
.p-card h3{font-size:1.05rem;line-height:1.3}
.p-card .quote-txt{font-family:var(--font-titre);font-style:italic;color:var(--caramel-d);font-size:.95rem}
.p-card p{font-size:.9rem;color:#5C4F42}
/* Type, prix et gain sur une seule ligne, comme le pied des cartes missions. */
.p-chips{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;margin-top:auto}
.p-chips .chip{white-space:nowrap;padding:6px 11px;font-size:.78rem}
.p-chips .chip-jeton img{width:16px;height:16px}
.p-note{font-size:.82rem;color:var(--mute);margin-top:22px;text-align:center}

/* Enzo debout à gauche des questions, aligné sur le haut de la première.
   Hauteur FIXE : une hauteur relative à la liste le ferait grandir à chaque
   question ouverte. */
.faq-grid{display:grid;grid-template-columns:210px 1fr;gap:40px;align-items:start;margin-top:38px}
.faq-side img{display:block;height:480px;width:auto;max-width:100%}
.faq-list{max-width:none;margin:0}
.faq-caption{font-size:.85rem;color:var(--mute);margin:26px auto 0;max-width:760px;text-align:center}

/* ---------- Pop-up liste d'attente ---------- */
.wl-overlay{position:fixed;inset:0;background:rgba(46,29,19,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.wl-overlay[hidden]{display:none}
.wl-modal{position:relative;background:var(--white);border-radius:20px;width:440px;max-width:100%;padding:28px;box-shadow:0 24px 60px rgba(46,29,19,.30)}
.wl-close{position:absolute;top:14px;right:16px;background:none;border:0;font-size:18px;color:var(--mute);cursor:pointer;line-height:1}
.wl-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.wl-head img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;background:var(--tint)}
.wl-head h3{font-size:1.25rem;color:var(--espresso);line-height:1.2}
.wl-intro{font-size:.88rem;color:var(--mute);line-height:1.5;margin-bottom:18px}
#wlForm{display:grid;gap:12px}
#wlForm label{display:block;font-size:.8rem;font-weight:700;color:var(--espresso)}
#wlForm input{width:100%;margin-top:6px;padding:12px 14px;border:1px solid #E4D9C9;border-radius:12px;font-size:1rem;font-family:inherit;color:var(--ink);background:var(--cream-2)}
#wlForm input:focus{outline:2px solid var(--caramel);border-color:var(--caramel)}
.wl-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wl-consent{font-size:.72rem;color:var(--mute);line-height:1.5;margin-top:2px}
.wl-msg{font-size:.82rem;font-weight:700;margin:2px 0 0}
.wl-msg.wl-ok{color:var(--green)}
.wl-msg.wl-err{color:#B3372B}

/* ---------- Responsive ---------- */
/* Le menu passe en burger dès que les 7 entrées ne tiennent plus sur une ligne. */
@media (max-width:1040px){
  /* Le bouton d'Enzo est replié dans le menu : le header n'a plus besoin des
     80 px qui logeaient sa tête. Le menu déroulant se recale sur cette hauteur. */
  .nav{height:68px}
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--white);flex-direction:column;align-items:flex-start;gap:16px;padding:20px;border-bottom:1px solid #EFE7DA;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .burger{display:block}
}
@media (max-width:1180px){
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr 400px}
}
@media (max-width:1040px){
  .comment-grid{grid-template-columns:1fr;grid-template-areas:"intro" "tel" "etapes";row-gap:32px}
  .comment-grid .phone{justify-self:center}
}
@media (max-width:900px){
  /* Le bandeau reste affiché sur mobile : il défile, plus compact.
     `gap` et `padding-right` doivent rester égaux pour que la boucle
     se raccorde sans saut. */
  .band{padding-block:11px}
  .band-track{font-size:.8rem;gap:16px;padding-right:16px}
  .phone{width:300px}
  .phone-screen{height:560px}
  /* Une colonne, et la preuve sociale passe SOUS l'illustration d'Enzo. */
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "art" "social";gap:0;padding-top:28px;padding-bottom:0}
  .hero-copy{padding-bottom:0}
  /* Mobile : invitation, capsules, avatars et phrase sont centrés. */
  .wa-bloc{display:block;text-align:center}
  .wa-invite{display:inline-flex}
  /* Deux capsules par ligne, de largeur égale. */
  /* Bouton raccourci et titres réduits sur mobile (hero -10 %, CTA final -20 %). */
  .wa-long{display:none}
  .hero h1{font-size:1.89rem}
  .final h2{font-size:1.44rem}
  .br-mob{display:inline}
  .hero-liens{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-liens a{justify-content:center;padding:9px 10px}
  /* La phrase d'abord, les visages ensuite. Le bas de la zone respire : sans
     cette marge, la phrase collait au bord de la section. */
  .hero-social{flex-direction:column;align-items:center;gap:10px;text-align:center;padding-bottom:25px}
  .hero-avatars{order:0}   /* mobile : la phrase d'abord, les visages dessous */
  .hero-art{margin:6px 0 -24px;z-index:1}
  .float-card{left:0;top:38%;font-size:.78rem;padding:9px 12px}
  .p-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr;gap:0}
  .faq-side{display:none}
  .g-row{grid-template-columns:repeat(2,1fr)}
  .steps,.m-grid,.counters,.pricing-grid,.packs-grid,.issues,.reassure{grid-template-columns:1fr}
  .pack-card-haut{grid-column:auto;grid-row:auto}
  .packs-head{grid-template-columns:1fr;gap:18px}
  .packs-figure{max-width:300px;margin:0 auto}
  .tarif-une{flex-direction:column;align-items:flex-start;gap:14px}
  .tarif-une-jeton{width:96px}
  .bareme-row{grid-template-columns:1fr auto;gap:4px 12px}
  .bareme-ex{grid-column:1/-1;font-size:.86rem}
  .jetons-explain,.tarif-reassurance{padding:22px 18px}
  .sim-box{grid-template-columns:1fr}
  section{padding:28px 0}
  /* Footer centré sur mobile, marque et mentions. */
  .foot{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .foot > div{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}
  footer a{margin-right:0}
}
@media (max-width:520px){
  .wl-row{grid-template-columns:1fr}
  .wl-modal{padding:22px}
}
@media (max-width:480px){
  .cta-min{display:none}
  .btn{padding:14px 22px;font-size:.95rem}
  .launch-banner{font-size:.78rem;padding:8px 14px}
}

/* ============================================================
   Le catalogue vivant (27/08/2026)
   ------------------------------------------------------------
   La section s'alimente du catalogue réel : elle grandit toute
   seule quand une fiche est publiée. Trois partis pris :

   · on se PROMÈNE. Filtres, recherche et dé « surprenez-moi » :
     la liste est longue, elle doit se parcourir sans effort ;
   · une carte s'ouvre SUR PLACE, sans changer de page ni ouvrir
     de fenêtre. Sur mobile, une fenêtre modale casse le pouce ;
   · chaque mission garde son appel à l'action sous les yeux :
     lire un processus donne envie de le confier, c'est là qu'il
     faut le bouton, pas seulement en bas de page.
   ============================================================ */
.cat{background:var(--cream-2)}
.cat-total{color:var(--caramel);white-space:nowrap}

.cat-tools{display:flex;gap:12px;align-items:center;margin:18px 0 12px;flex-wrap:wrap}
.cat-search{flex:1 1 320px;position:relative}
.cat-search input{width:100%;padding:13px 16px;border:2px solid var(--cream);border-radius:999px;
  background:var(--white);font:inherit;color:var(--ink)}
.cat-search input:focus{outline:none;border-color:var(--caramel)}
.cat-hasard{padding:12px 18px;font-size:.95rem;white-space:nowrap}

/* Les filtres : une bande qui défile au doigt sur mobile, sans barre visible. */
.cat-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chip{flex:none;padding:8px 14px;border-radius:999px;border:2px solid var(--cream);background:var(--white);
  color:var(--espresso);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.cat-chip:hover{border-color:var(--caramel)}
.cat-chip[aria-pressed="true"]{background:var(--espresso);border-color:var(--espresso);color:var(--white)}
.cat-chip b{font-weight:700;opacity:.7;margin-left:6px}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:6px}

/* Une carte = un <details> : l'ouverture est native, donc elle marche au
   clavier, au doigt, et même sans JavaScript. */
.cat-card{background:var(--white);border:2px solid var(--cream);border-radius:var(--radius);overflow:hidden;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.cat-card[open]{border-color:var(--caramel);box-shadow:var(--shadow)}
.cat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cat-card > summary{list-style:none;cursor:pointer;padding:16px 18px;display:block}
.cat-card > summary::-webkit-details-marker{display:none}
.cat-card h3{font-size:1.05rem;line-height:1.3;margin-bottom:6px;color:var(--espresso)}
.cat-card p{font-size:.92rem;color:var(--mute);margin-bottom:10px}
.cat-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cat-jeton{display:inline-flex;align-items:center;gap:6px;background:var(--tint);border-radius:999px;
  padding:5px 12px;font-size:.85rem;font-weight:700;color:var(--espresso)}
.cat-prix{font-size:.85rem;color:var(--mute)}
.cat-prix b{color:var(--ink)}
.cat-cate{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--caramel)}
.cat-ouvrir{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--caramel-d)}
.cat-card[open] .cat-ouvrir{opacity:.55}

.cat-detail{padding:0 18px 18px;border-top:2px dashed var(--cream)}
.cat-detail h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:14px 0 8px}
.cat-etapes{list-style:none;counter-reset:e}
.cat-etapes li{counter-increment:e;position:relative;padding:6px 0 6px 30px;font-size:.92rem;color:var(--ink)}
.cat-etapes li::before{content:counter(e);position:absolute;left:0;top:6px;width:21px;height:21px;border-radius:50%;
  background:var(--tint);color:var(--espresso);font-size:.72rem;font-weight:800;display:grid;place-items:center}
.cat-qui{display:inline-block;margin-left:6px;font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--green-bg);color:var(--green)}
.cat-qui-vous{background:var(--tint);color:var(--caramel-d)}
.cat-reco{display:inline-block;margin-left:6px;font-size:.72rem;color:var(--mute)}
.cat-preuve{background:var(--green-bg);border-radius:12px;padding:12px 14px;font-size:.9rem;color:var(--ink);margin-top:6px}
.cat-opti{list-style:none;font-size:.9rem}

/* Le détail déplié sur les cartes du haut de page (missions & packs).
   Il réutilise .cat-detail et ses enfants : une seule écriture du processus,
   donc une seule vérité quand une fiche change. */
.carte-plus{margin-top:14px;border-top:2px dashed var(--cream)}
.carte-plus > summary{list-style:none;cursor:pointer;padding:13px 0 9px;font-size:.85rem;font-weight:700;
  color:var(--caramel-d)}
.carte-plus > summary::-webkit-details-marker{display:none}
.carte-plus > summary:hover{color:var(--espresso)}
.carte-plus[open] > summary{opacity:.55}
.carte-plus .cat-detail{padding:0;border-top:0}
.cat-liste{list-style:none;display:grid;gap:4px}
/* 44 px au moins : c'est un doigt, pas une souris. Les titres courts tenaient
   sur une ligne et tombaient à 38 px. */
.cat-lien{width:100%;min-height:44px;text-align:left;background:var(--cream);border:0;border-radius:10px;
  cursor:pointer;padding:10px 12px;font:inherit;font-size:.9rem;color:var(--ink);display:flex;gap:10px;
  align-items:center}
.cat-lien:hover{background:var(--tint);color:var(--espresso)}
.cat-lien-jetons{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--caramel-d);white-space:nowrap}
.cat-reste{font-size:.85rem;color:var(--mute);margin-top:8px}

.cat-opti li{padding:6px 0 6px 22px;position:relative;color:var(--ink)}
.cat-opti li::before{content:"💡";position:absolute;left:0;top:6px;font-size:.9rem}
.cat-opti b{color:var(--espresso)}
.cat-detail .btn{margin-top:14px}

.cat-vide{margin-top:16px;color:var(--mute)}
.cat-plus{display:flex;justify-content:center;margin-top:18px}
.cat-cta{margin-top:26px;background:var(--white);border:2px solid var(--cream);border-radius:var(--radius);
  padding:20px 22px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cat-cta p{color:var(--ink);max-width:640px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:760px){
  .cat-grid{grid-template-columns:1fr}
  .cat-hasard{flex:1 1 auto;justify-content:center}
  .cat-cta{flex-direction:column;align-items:stretch;text-align:center}
  .cat-cta .btn{justify-content:center}
}