/* comprendre.css — page /comprendre v2 IMMERSIVE (14/09/2026 soir, BRIEF-comprendre-v2-1409.md). Chargée UNIQUEMENT par
   comprendre.php. Vocabulaire de l'accueil (bloc v10 d'outil.css) : Lilita One (--cartoon), jaune --sun, vert --vert,
   fond sombre, cartes navy, bulle bord blanc 3 px, éclairs jaunes lumineux, lynx (keyframes `resp` d'outil.css).
   Préfixe .cq- (libre : grep fait sur assets/, admin/, inc/, index.php, espace.php avant de nommer).
   MÉCANIQUE D'ANIMATION (assets/comprendre.js) :
   - sans JS ou prefers-reduced-motion : aucune classe posée → chaque schéma est dans son ÉTAT FINAL, statique ;
   - .cq-arm (posée par le JS sur chaque bande) → état de DÉPART (éléments cachés / à zéro) ;
   - .cq-arm.cq-go (bande entrée à l'écran) → les keyframes jouent de l'état de départ à l'état final
     (fill-mode both), le délai de chaque élément est dans sa variable --t (attribut style, CSP ok).
   Aucun prix, délai ni année ici : les textes viennent du PHP. */

/* ── socle des bandes ─────────────────────────────────────────────────────────────────────────────────────── */
/* v5 (BRIEF-comprendre-v5-1509.md, section 3, écarts A.3 « toutes les sections ») : l'accueil enchaîne des
   sections à hauteur de CONTENU, rythme resserré et asymétrique (jamais de min-height:100vh, jamais de
   hairline entre sections, fonds alternés PLATS) — c'était la cause principale du sentiment « pas cohérent
   entre elles » (chaque question devenait un écran plein façon diaporama). Le hero ne bouge pas : sa mise en
   page plein-écran centrée reste scopée à .cq-hero.cq-band uniquement (règle plus bas). Padding resserré et
   asymétrique comme l'accueil (ex. .plus{padding:64px 0 30px} dans outil.css), plus de border-top hairline
   (l'accueil sépare SEULEMENT par l'alternance de fond), .cq-band::before garde sa structure (nécessaire au
   halo du hero et du point clé, qui redéfinissent son `background`) mais n'a plus de fond par défaut : les
   bandes normales restent PLATES comme .alt/.regles-sec sur l'accueil. */
.cq{position:relative;overflow-x:clip}
.cq-band{position:relative;overflow:hidden;padding:clamp(40px,6vh,64px) 0 clamp(32px,5vh,48px);background:var(--bg)}
.cq-band::before{content:'';position:absolute;inset:0;pointer-events:none}
.cq-alt{background:var(--card)}
@media(min-width:941px) and (min-height:700px){.cq-hero.cq-band{min-height:calc(100vh - 78px);display:flex;align-items:center}.cq-hero.cq-band>.cq-in{width:100%}}
.cq-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding-inline:32px;box-sizing:border-box}
.cq-tete{text-align:center;margin:0 auto clamp(22px,4vh,42px)}
/* v5 : l'eyebrow par bande réutilise .eyebrow (outil.css), plus de badge icône+fraction ni de numéro fantôme */
.cq-band h2{font-size:clamp(28px,4.3vw,58px);line-height:1.04;max-width:24ch;margin:16px auto 0;color:#fff}
.cq-band h2 .sun{color:var(--sun)}
.cq-scene{position:relative;margin:0 auto;max-width:1100px}
.cq-texte{max-width:780px;margin:clamp(22px,4vh,38px) auto 0;text-align:center}
.cq-texte p{margin:0 0 10px;font:500 17px/1.6 var(--b);color:var(--ink2)}
.cq-texte p:last-child{margin-bottom:0}
.cq-texte strong{color:#fff}
.cq-lbl{margin:0 0 10px;font:700 12.5px/1.25 var(--h);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.cq-cap{margin:12px 0 0;font:600 14.5px/1.35 var(--b);color:var(--mute)}
.cq-cap b{color:var(--sun)}
.cq-l{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
.w20{width:20%}.w30{width:30%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}
/* ?de=<id> : mise en évidence 2 s de la bande (classe posée par assets/outil.js, mécanisme v1 conservé) */
.cq-band.hlp-vise{box-shadow:inset 0 0 0 3px var(--sun),inset 0 0 140px rgba(255,197,61,.16);transition:box-shadow 1.6s ease}
/* v4 (15/09/2026, BRIEF-comprendre-v4-1509.md, item 2) : arrivée par ancre (?de=, clic rail/pastilles/« Voir le
   point clé », #hash direct) — le titre de la bande ne doit jamais atterrir SOUS le header + la barre « point
   clé » (+ le sommaire sticky mobile <941 px). --hlp-anchor-top est la hauteur RÉELLE mesurée par comprendre.js
   (0 côté JS, fallback statique ici si JS indisponible : 76 px de header + une estimation de la barre « point
   clé » sur 2 lignes, un peu plus large que nécessaire — jamais plus étroite, un chevauchement serait pire
   qu'une marge en trop). Respecté à la fois par le hash natif ET par le scrollIntoView({block:'start'}) d'outil.js
   (hors périmètre, non modifié) : les deux honorent scroll-margin-top. */
/* .cq-band[data-hlp-sec] (spécificité 0,2,0), pas [data-hlp-sec] seul (0,1,0) : outil.css (hors périmètre) pose
   déjà `section[id]{scroll-margin-top:92px}` (0,1,1) pour les ancres de la home — plus spécifique qu'un simple
   attribut, il gagnait TOUJOURS ici quel que soit l'ordre des <link>, d'où le titre resté sous le bandeau malgré
   cette règle (constaté en testant en local, cf. PREUVES-comprendre-v4-1509.md §2). */
.cq-band[data-hlp-sec]{scroll-margin-top:var(--hlp-anchor-top,190px)}
@media(max-width:940px){.cq-band[data-hlp-sec]{scroll-margin-top:var(--hlp-anchor-top,220px)}}

/* ── animations génériques : départ (.cq-arm) → final (.cq-go) ─────────────────────────────────────────────── */
@keyframes cqUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cqPop{0%{opacity:0;transform:translateY(12px) scale(.86)}70%{opacity:1;transform:translateY(-2px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes cqGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cqGrowV{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.cq-arm .cq-a,.cq-arm .cq-pop{opacity:0}
.cq-arm.cq-go .cq-a{animation:cqUp .7s cubic-bezier(.2,.8,.2,1) var(--t,0s) both}
.cq-arm.cq-go .cq-pop{animation:cqPop .6s cubic-bezier(.2,.8,.2,1) var(--t,0s) both}
.cq-arm .cq-grow{transform:scaleX(0)}
.cq-arm.cq-go .cq-grow{animation:cqGrow .45s ease-out var(--t,0s) both}

/* éclair jaune (même rendu que .bolt / .tbb de l'accueil) */
.cq-bolt,.cq-hb{fill:none;stroke:#FFE08A;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:0;filter:drop-shadow(0 0 6px #FFC53D) drop-shadow(0 0 14px rgba(255,197,61,.8))}
@keyframes cqDraw{from{stroke-dashoffset:320;opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes cqFlick{0%,100%{opacity:1}8%{opacity:.45}12%{opacity:1}55%{opacity:.8}60%{opacity:1}}

/* ── HERO ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.cq-hero{background:var(--navy);padding:clamp(40px,6vh,72px) 0 clamp(40px,6vh,64px);flex-direction:column;justify-content:center}
.cq-hero::before{background:radial-gradient(ellipse 34% 55% at 78% 30%,rgba(46,91,255,.35),transparent 65%),radial-gradient(ellipse 26% 40% at 95% 95%,rgba(255,197,61,.2),transparent 65%),radial-gradient(ellipse 30% 35% at 6% 90%,rgba(46,91,255,.18),transparent 65%)}
.cq-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:32px;align-items:center}
.cq-hero h1{font-size:clamp(36px,4.3vw,64px);line-height:1;margin:14px 0 20px;color:#fff;text-shadow:0 4px 0 #04070d,0 14px 34px rgba(0,0,0,.5)}
.cq-bulles{display:grid;gap:14px}
.cq-bulle{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--card);border:3px solid #fff;border-radius:22px;padding:14px 20px;box-shadow:0 0 0 6px rgba(255,255,255,.05),0 30px 60px -30px rgba(0,0,0,.85)}
.cq-bulle p{margin:0;font:500 15.5px/1.5 var(--b);color:var(--ink2)}
.cq-bulle strong{color:#fff}
.cq-bulle-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--sun);font-style:normal;font-size:21px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.cq-bulle-v::after{content:'';position:absolute;right:-18px;top:34px;width:30px;height:30px;background:var(--card);border-top:3px solid #fff;border-right:3px solid #fff;border-radius:0 6px 0 0;transform:rotate(45deg)}
.cq-bulle-a{border-color:var(--vert);box-shadow:0 0 0 6px rgba(47,208,143,.08),0 0 40px -10px rgba(47,208,143,.45)}
.cq-bulle-a .cq-bulle-ico{background:var(--vert)}
.cq-bulle-a strong{color:var(--vert)}
.cq-hero-d{position:relative}
.cq-hero-lynx{position:relative;width:min(100%,300px);margin:0 auto}
.cq-lynx-img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));animation:resp 5s ease-in-out infinite;transform-origin:50% 100%}
.cq-halo{position:absolute;left:-10%;right:-10%;top:12%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(255,197,61,.32),transparent 62%);animation:cqHalo 3.2s ease-in-out infinite}
@keyframes cqHalo{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.cq-hero-bolts{position:absolute;left:-18%;top:-4%;width:136%;height:90%;overflow:visible;z-index:0}
.cq-hb{animation:cqZap 3.6s linear var(--t,0s) infinite}
@keyframes cqZap{0%{opacity:0;stroke-dashoffset:320}6%{opacity:1;stroke-dashoffset:0}10%{opacity:.4}13%{opacity:1}24%{opacity:.9}30%,100%{opacity:0;stroke-dashoffset:0}}
.cq-q{position:absolute;z-index:2;font:400 46px/1 var(--cartoon);color:var(--sun);text-shadow:0 4px 0 #04070d;animation:cqFlotte 4s ease-in-out infinite}
.cq-q1{left:-6%;top:8%}.cq-q2{right:-4%;top:22%;animation-delay:-1.3s;font-size:36px}.cq-q3{right:28%;top:-6%;color:var(--vert);animation-delay:-2.6s}
@keyframes cqFlotte{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(6deg)}}
.cq-sommaire{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:clamp(22px,4vh,36px)}
.cq-pastille{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px 12px;border-radius:18px;background:var(--card);border:1px solid var(--line2);text-decoration:none;color:var(--ink2);text-align:center;transition:transform .2s,border-color .2s,box-shadow .2s}
.cq-pastille:hover,.cq-pastille:focus-visible{transform:translateY(-4px);border-color:var(--sun);box-shadow:var(--glow-sun);color:#fff}
.cq-pastille svg{width:26px;height:26px;fill:none;stroke:var(--sun);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cq-pastille span{font:700 13px/1.2 var(--b)}
.cq-pn{position:absolute;top:-8px;left:-6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:#1A1200;font:400 13px/1 var(--cartoon);font-style:normal;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}

/* rail de l'accueil : outil.js allume le lien dont data-s = id d'une section visible ; ici l'id « prix » est une bande de
   /comprendre alors que le lien mène à /#prix sur l'accueil → on neutralise l'état allumé sur cette page seulement */
@media(min-width:1240px){.rail a.rl.on{color:var(--on-navy-mute)}.rail a.rl.on i{background:rgba(255,255,255,.04);color:var(--faint);border-color:rgba(255,255,255,.16);box-shadow:none}.rail a.rl.on span{text-shadow:none}}

/* ── 1 · C'EST QUOI ─────────────────────────────────────────────────────────────────────────────────────────── */
/* .cq-serp/.cq-serp-l/.cq-moi/.cq-autre/.cq-g + leurs animations cqMonte/cqDescend/cqMonteFleche : mini résultat
   Google qui grimpe, conçu pour la v2 (14/09), inutilisé depuis la v3 (6 cases + flèche, plus de mini-SERP) —
   RÉCUPÉRÉ tel quel pour le nouveau schéma v4 (item 1, ci-dessous) : c'est exactement le mécanisme demandé
   (« la cible reste bas … / la cible grimpe »), pas besoin de le réécrire. Le reste du bloc v2 (.cq-art, .cq-ancre,
   .cq-quoi-bolt, .cq-bolt-h/.cq-bolt-v — schéma 1-vers-1 remplacé dès la v3) n'a plus aucun usage HTML : retiré. */
.cq-serp{background:#F7F8FB;border:3px solid #fff;border-radius:22px;padding:16px 18px 18px;box-shadow:0 0 0 6px rgba(255,255,255,.05),0 30px 60px -30px rgba(0,0,0,.85);position:relative}
.cq-serp .cq-lbl{color:#5A6A85;display:flex;align-items:center;gap:8px}
.cq-g{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid #DDE3EE;font:800 13px/1 var(--b);color:#2E5BFF}
.cq-serp-l{--rh:58px;list-style:none;margin:0;padding:0 0 0 30px;position:relative;height:calc(var(--rh) * 5)}
.cq-serp-l::before{content:'1\A 2\A 3\A 4\A 5';white-space:pre;position:absolute;left:0;top:0;width:22px;font:400 18px/58px var(--cartoon);color:#8C98AE;text-align:center}
.cq-serp-l li{position:absolute;left:30px;right:0;height:calc(var(--rh) - 10px);display:flex;align-items:center;padding:0 14px;border-radius:12px;background:#fff;border:1px solid #E3E7EF}
.cq-serp-l li div{min-width:0;display:grid;gap:5px;width:100%}
.cq-serp-l li b{font:700 15px/1.1 var(--b);color:#22304A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-serp-l li small{font:600 12.5px/1 var(--b);color:#1a7f37}
.cq-serp-l .cq-autre small.cq-l{height:6px;background:#E3E7EF}
.cq-autre{top:calc((var(--k) + 1) * var(--rh))}
.cq-moi{top:0;z-index:2;background:linear-gradient(90deg,#FFF1C2,#fff 80%)!important;border:2px solid var(--sun)!important;box-shadow:0 10px 24px -10px rgba(245,166,35,.8)}
.cq-moi b{color:#1A1200!important;font-size:16px!important}
.cq-moi::after{content:'▲';position:absolute;right:14px;top:50%;margin-top:-12px;font:900 22px/1 var(--b);color:#1DB27A}
@keyframes cqMonte{from{transform:translateY(calc(var(--rh) * 4))}to{transform:none}}
@keyframes cqDescend{from{transform:translateY(calc(var(--rh) * -1))}to{transform:none}}
@keyframes cqMonteFleche{0%{opacity:0;transform:translateY(16px)}30%{opacity:1}100%{opacity:1;transform:translateY(-6px)}}
.cq-arm .cq-moi{transform:translateY(calc(var(--rh) * 4))}
.cq-arm .cq-autre{transform:translateY(calc(var(--rh) * -1))}
.cq-arm .cq-moi::after{opacity:0}
/* v4 (item 1) : « en tête » n'a de sens qu'une fois la page montée en rang 1 (AVEC/final) — en SANS elle est basse
   dans la liste, ce texte doit rester invisible tant que la carte n'a pas fini de grimper (même minutage que la
   flèche ▲ juste au-dessus). Sans JS/reduced-motion : aucune classe .cq-arm posée, texte visible d'emblée (état
   final = AVEC), convention du fichier respectée. */
.cq-arm .cq-moi small{opacity:0}
/* v5 (BRIEF-comprendre-v5-1509.md, item 1) : la cible ne grimpe qu'APRÈS articles+traits+pages (1.9s → 3.2s,
   même écart entre les 2 keyframes suivantes, décalé d'autant) */
.cq-arm.cq-go .cq-moi{animation:cqMonte 1.4s cubic-bezier(.55,0,.2,1) 3.2s both}
.cq-arm.cq-go .cq-autre{animation:cqDescend 1.4s cubic-bezier(.55,0,.2,1) 3.2s both}
.cq-arm.cq-go .cq-moi::after{animation:cqMonteFleche .9s ease-out 3.45s both}
.cq-arm.cq-go .cq-moi small{animation:cqMonteFleche .9s ease-out 3.45s both}

/* ── 2 · PRIX ──────────────────────────────────────────────────────────────────────────────────────────────── */
.cq-s-prix{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:center;max-width:1000px}
.cq-bocal{position:relative;height:300px;display:flex;align-items:flex-end;justify-content:center}
.cq-jar{position:relative;width:172px;height:222px;border:4px solid rgba(255,255,255,.88);border-top:0;border-radius:0 0 36px 36px;overflow:hidden;background:rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 30px rgba(0,0,0,.45),0 24px 50px -20px rgba(0,0,0,.8)}
.cq-jar::before{content:'';position:absolute;left:-4px;right:-4px;top:0;height:4px;background:rgba(255,255,255,.35)}
.cq-jar-fill{position:absolute;left:0;right:0;bottom:0;min-height:6%;background:linear-gradient(180deg,#FFD46A,var(--sun) 50%,#F5A623);box-shadow:0 -6px 18px rgba(255,197,61,.5);transition:height .9s cubic-bezier(.2,.8,.2,1)}
.cq-jar-n{position:relative;font:400 66px/1 var(--cartoon);color:#fff;text-shadow:0 4px 0 #04070d}
.cq-jar small{position:relative;font:700 13px/1.2 var(--h);letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #04070d}
.cq-pluie{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;z-index:2}
.cq-pluie i{position:absolute;top:0;left:calc(26% + var(--k) * 6.5%);font-size:22px;font-style:normal;opacity:0}
@keyframes cqTombe{0%{opacity:0;transform:translateY(-10px) rotate(0)}12%{opacity:1}80%{opacity:1;transform:translateY(150px) rotate(200deg)}100%{opacity:0;transform:translateY(176px) rotate(240deg)}}
.cq-pluie.cq-tombe i{animation:cqTombe .95s cubic-bezier(.5,0,.8,.6) calc(var(--k) * .09s) both}
.cq-calc{display:grid;gap:14px;min-width:0}
.cq-ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;background:var(--navy2);border:1px solid var(--line2);border-radius:18px;padding:14px 20px}
.cq-l-gen{border-color:rgba(255,197,61,.55);box-shadow:var(--glow-sun)}
.cq-chip-t{font:400 13px/1 var(--cartoon);letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:99px;background:rgba(255,255,255,.08);color:var(--ink2);white-space:nowrap}
.cq-l-gen .cq-chip-t{background:var(--sun);color:#1A1200}
.cq-x{font:700 18px/1.2 var(--b);color:var(--ink2)}
.cq-eq{font:400 30px/1 var(--cartoon);color:var(--mute)}
.cq-tot{font:400 clamp(36px,4vw,52px)/1 var(--cartoon);color:var(--sun);text-shadow:0 3px 0 #04070d;white-space:nowrap}
.cq-tot small{font:700 15px/1 var(--b);color:var(--mute);margin-left:4px;text-shadow:none}
.cq-l-them .cq-tot{color:#fff}
@keyframes cqBump{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
.cq-tot.cq-bump{animation:cqBump .45s cubic-bezier(.2,.8,.2,1)}
.cq-paliers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cq-palier{border:1px dashed var(--line2);border-radius:14px;padding:10px 8px;text-align:center;transition:border-color .35s,background .35s,box-shadow .35s,transform .35s}
.cq-palier b{display:block;font:400 20px/1.1 var(--cartoon);color:var(--ink)}
.cq-palier small{display:block;margin-top:3px;font:600 13.5px/1.3 var(--b);color:var(--mute)}
.cq-palier.on{border-style:solid;border-color:var(--sun);background:var(--sun-soft);box-shadow:0 0 0 1px var(--sun),0 10px 30px -12px rgba(255,197,61,.6);transform:translateY(-3px)}
.cq-palier.on b{color:var(--sun)}.cq-palier.on small{color:#fff}

/* ── 2+ · ABONNEMENT ≠ LOCATION ─────────────────────────────────────────────────────────────────────────────── */
.cq-b-abonnement{background:linear-gradient(180deg,#0d1833,#0b1220 70%)}
.cq-b-abonnement::before{background:radial-gradient(ellipse 45% 40% at 50% 0%,rgba(255,197,61,.14),transparent 70%),radial-gradient(ellipse 35% 45% at 95% 90%,rgba(47,208,143,.1),transparent 70%)}
.cq-s-abo{max-width:1060px}
.cq-abo-leg{display:flex;justify-content:center;gap:10px 26px;flex-wrap:wrap;margin:0 0 18px}
.cq-abo-leg span{display:flex;align-items:center;gap:9px;font:500 16px/1.3 var(--b);color:var(--ink2)}
.cq-abo-leg em{font-style:normal}
.cq-abo-leg b{color:#fff}
.cq-abo-leg i{flex:0 0 18px;height:18px;border-radius:50%}
.cq-blk-paye{background:var(--sun);box-shadow:0 0 10px rgba(255,197,61,.8)}
.cq-blk-acquis{background:var(--vert);box-shadow:0 0 10px rgba(47,208,143,.7)}
.cq-abo-tab{display:grid;gap:10px}
.cq-abo-row{display:grid;grid-template-columns:96px minmax(0,1fr) 130px 130px;align-items:center;gap:16px;background:var(--navy2);border:1px solid var(--line2);border-radius:18px;padding:10px 20px}
.cq-abo-m{font:400 24px/1 var(--cartoon);color:#fff}
.cq-abo-blocs{display:flex;gap:12px;min-width:0}
.cq-blk{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 9px;border-radius:12px;border:1px solid}
.cq-neuf{border-color:rgba(255,197,61,.6);background:rgba(255,197,61,.1)}
.cq-acquis{border-color:rgba(47,208,143,.55);background:rgba(47,208,143,.09)}
.cq-blk-pts{display:grid;grid-template-columns:repeat(5,18px);gap:5px}
.cq-blk-pts i{width:18px;height:18px;border-radius:50%}
.cq-neuf i{background:var(--sun);box-shadow:0 0 8px rgba(255,197,61,.85)}
.cq-acquis i{background:var(--vert);box-shadow:0 0 8px rgba(47,208,143,.75)}
.cq-blk small{font:800 12.5px/1.15 var(--b);color:var(--sun);text-align:center}
.cq-acquis small{color:var(--vert)}
.cq-abo-paye small,.cq-abo-ligne small{display:block;font:700 12px/1.2 var(--h);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.cq-abo-paye b,.cq-abo-ligne b{font:400 26px/1 var(--cartoon);color:#fff;white-space:nowrap}
.cq-abo-paye b{color:var(--sun)}
.cq-abo-barres{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.cq-barre{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:16px;padding:12px 18px}
.cq-barre small{grid-column:1/-1;font:700 12.5px/1.2 var(--h);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cq-bar{height:16px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.cq-bar i{display:block;height:100%;border-radius:9px}
.cq-barre-paye .cq-bar i{width:34%;background:linear-gradient(90deg,#F5A623,var(--sun))}
.cq-barre-ligne .cq-bar i{width:100%;background:linear-gradient(90deg,#1DB27A,var(--vert))}
.cq-barre b{font:400 30px/1 var(--cartoon);color:var(--sun);white-space:nowrap}
.cq-barre-ligne b{color:var(--vert)}
.cq-empile{display:inline-grid;min-width:2ch;text-align:right}
.cq-empile span{grid-area:1/1;opacity:0}
.cq-empile span:last-child{opacity:1}
.cq-ex-note{font-size:14.5px!important;color:var(--mute)!important}
/* timeline : mois 1 à .2 s, mois 2 à 1.9 s, mois 3 à 3.6 s (pas de 1.7 s, cf. comprendre.php) */
@keyframes cqPt{0%{opacity:.15;transform:scale(0)}70%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes cqBarLigne{0%{width:0}8%,33%{width:33.4%}41%,66%{width:66.7%}74%,100%{width:100%}}
@keyframes cqBarPaye{from{width:0}to{width:34%}}
@keyframes cqN1{0%,33%{opacity:1}35%,100%{opacity:0}}
@keyframes cqN2{0%,34%{opacity:0}36%,66%{opacity:1}68%,100%{opacity:0}}
@keyframes cqN3{0%,67%{opacity:0}69%,100%{opacity:1}}
@keyframes cqAcquis{0%{opacity:.2;filter:saturate(0)}100%{opacity:1;filter:none}}
.cq-arm .cq-abo-row{opacity:0}
.cq-arm.cq-go .cq-abo-row{animation:cqUp .5s cubic-bezier(.2,.8,.2,1) var(--t) both}
.cq-arm .cq-neuf i{opacity:.15;transform:scale(0)}
.cq-arm.cq-go .cq-neuf i{animation:cqPt .35s cubic-bezier(.2,.8,.2,1) calc(var(--b) + var(--k) * .07s) both}
.cq-arm.cq-go .cq-acquis{animation:cqAcquis .5s ease-out calc(var(--b) + .1s) both}
.cq-arm .cq-bar i{width:0}
.cq-arm.cq-go .cq-barre-paye .cq-bar i{animation:cqBarPaye .6s ease-out .5s both}
.cq-arm.cq-go .cq-barre-ligne .cq-bar i{animation:cqBarLigne 5.1s linear .2s both}
.cq-arm .cq-empile span{opacity:0}
.cq-arm.cq-go .cq-empile span:nth-child(1){animation:cqN1 5.1s linear .2s both}
.cq-arm.cq-go .cq-empile span:nth-child(2){animation:cqN2 5.1s linear .2s both}
.cq-arm.cq-go .cq-empile span:nth-child(3){animation:cqN3 5.1s linear .2s both}

/* ── 3 · ANCRE ─────────────────────────────────────────────────────────────────────────────────────────────── */
.cq-s-ancre{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;max-width:1000px}
.cq-form{background:var(--navy2);border:3px solid #fff;border-radius:24px;padding:20px 22px 22px;box-shadow:0 0 0 6px rgba(255,255,255,.05),0 34px 70px -30px rgba(0,0,0,.85)}
.cq-champ{margin-top:12px}
.cq-champ small{display:block;margin:0 0 7px;font:700 14px/1.2 var(--b);color:var(--ink2)}
.cq-input{display:flex;align-items:center;min-height:50px;padding:10px 14px;border-radius:12px;background:var(--navy);border:1px solid var(--line2);font:600 16px/1.35 var(--b);color:#fff;overflow-wrap:anywhere;transition:border-color .25s,box-shadow .25s;box-sizing:border-box}
.cq-champ.on .cq-input{border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,197,61,.25)}
.cq-caret{flex:0 0 2px;width:2px;height:20px;margin-left:2px;background:var(--sun);opacity:0}
.cq-champ.on .cq-caret{opacity:1;animation:cqCaret .9s steps(1) infinite}
@keyframes cqCaret{50%{opacity:0}}
.cq-envoi{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 18px;border-radius:99px;background:var(--vert);color:#062A1B;font:800 15px/1 var(--b)}
.cq-arm .cq-envoi{opacity:0}
.cq-arm.cq-go .cq-envoi{animation:cqPop .5s cubic-bezier(.2,.8,.2,1) 2.35s both}
.cq-exemples{display:grid;gap:14px}
.cq-ex{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center;padding:16px 20px;border-radius:20px;border:2px solid}
.cq-ex i{grid-row:span 2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:900 24px/1 var(--b);font-style:normal}
.cq-ex span{font:400 24px/1.1 var(--cartoon);color:#fff}
.cq-ex small{font:600 15px/1.3 var(--b);color:var(--ink2)}
.cq-ex-ko{border-color:var(--no);background:var(--no-soft)}
.cq-ex-ko i{background:var(--no);color:#fff}
.cq-ex-ko s{position:relative;text-decoration:none;color:#ffb3b5}
.cq-ex-ko s::after{content:'';position:absolute;left:-5px;right:-5px;top:50%;height:4px;border-radius:2px;background:var(--no);transform:rotate(-5deg);transform-origin:left center}
@keyframes cqRaye{from{transform:rotate(-5deg) scaleX(0)}to{transform:rotate(-5deg) scaleX(1)}}
.cq-arm .cq-ex-ko s::after{transform:rotate(-5deg) scaleX(0)}
.cq-arm.cq-go .cq-ex-ko s::after{animation:cqRaye .35s ease-out 2.9s both}
.cq-ex-ok{border-color:var(--ok);background:var(--ok-soft);box-shadow:0 0 34px -10px rgba(47,208,143,.6)}
.cq-ex-ok i{background:var(--ok);color:#062A1B}

/* ── 4 · INSCRIPTION OU LISTE ──────────────────────────────────────────────────────────────────────────────── */
.cq-s-liste{display:grid;gap:16px;max-width:1060px}
.cq-chemin{display:grid;grid-template-columns:150px 56px minmax(0,1fr) 56px 200px;align-items:center;gap:12px;background:var(--navy2);border:1px solid var(--line2);border-radius:22px;padding:18px 20px}
.cq-badge{text-align:center;padding:12px 10px;border-radius:16px;background:var(--sun-soft);border:1px solid rgba(255,197,61,.45);font:600 15px/1.2 var(--b);color:var(--ink2)}
.cq-badge b{display:block;font:400 28px/1 var(--cartoon);color:var(--sun);margin-bottom:3px}
.cq-fleche{position:relative;display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(255,197,61,.25),var(--sun));transform-origin:left center}
.cq-fleche::before{content:'';position:absolute;top:-2px;bottom:-2px;left:0;width:26%;border-radius:4px;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:0}
@keyframes cqLueurH{0%{left:-26%;opacity:1}70%,100%{left:100%;opacity:1}}
@keyframes cqLueurV{0%{top:-26%;opacity:1}70%,100%{top:100%;opacity:1}}
.cq-arm.cq-go .cq-fleche::before{animation:cqLueurH 1.5s linear calc(var(--t,0s) + .5s) infinite}
.cq-fleche::after{content:'';position:absolute;right:-2px;top:50%;width:12px;height:12px;border-top:4px solid var(--sun);border-right:4px solid var(--sun);transform:translateY(-50%) rotate(45deg)}
.cq-mini{background:var(--navy);border:1px solid var(--line2);border-radius:14px;padding:12px 14px}
.cq-mini .cq-lbl{margin-bottom:4px;font-size:12px}
.cq-mini-l{display:flex;align-items:center;gap:8px;margin-top:9px}
.cq-mini-l b{color:var(--faint);font-weight:400}
.cq-mini-l .cq-l:first-child{flex:1 1 auto}.cq-mini-l .cq-l:last-child{flex:0 0 30%;background:rgba(255,197,61,.45)}
.cq-fin{padding:13px 12px;border-radius:14px;background:rgba(47,208,143,.12);border:1px solid rgba(47,208,143,.5);font:600 15px/1.3 var(--b);color:var(--vert);text-align:center}
.cq-fin b{color:#fff}
.cq-envoi-zone{position:relative;height:104px;display:flex;align-items:center;justify-content:center;gap:18px}
.cq-lignes{padding:8px 12px;border-radius:12px;background:rgba(255,197,61,.1);border:1px dashed rgba(255,197,61,.5);font:600 14px/1.2 var(--b);color:var(--ink2);white-space:nowrap}
.cq-lignes b{font:400 20px/1 var(--cartoon);color:var(--sun)}
.cq-fichier{position:absolute;left:0;top:50%;display:flex;flex-direction:column;align-items:center;transform:translateY(-50%);opacity:0}
.cq-fichier i,.cq-enveloppe i{font-style:normal;line-height:1}
.cq-fichier i{font-size:38px}
.cq-fichier small{font:700 12.5px/1.2 var(--b);color:var(--mute)}
.cq-enveloppe{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:190px}
.cq-enveloppe i{font-size:48px;filter:drop-shadow(0 0 14px rgba(255,197,61,.4))}
.cq-enveloppe small{font:600 14px/1.25 var(--b);color:var(--ink2);text-align:center}
@keyframes cqGlisse{0%{left:0;opacity:1;transform:translateY(-50%) scale(1)}75%{left:calc(50% - 60px);opacity:1;transform:translateY(-80%) scale(.7)}100%{left:calc(50% - 50px);opacity:0;transform:translateY(-50%) scale(.4)}}
.cq-arm .cq-fichier{opacity:1}
.cq-arm.cq-go .cq-fichier{animation:cqGlisse 1.3s cubic-bezier(.5,0,.3,1) 1.2s both}
.cq-projets{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.cq-projets .cq-lbl{margin:0}
.cq-projet{padding:8px 13px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line2);font:600 14.5px/1 var(--b);color:var(--ink2)}

/* ── 5 · SUR QUELS SITES ───────────────────────────────────────────────────────────────────────────────────── */
.cq-s-sites{max-width:1080px}
.cq-cartes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;perspective:1100px}
.cq-carte{height:222px}
.cq-carte-in{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.cq-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}
.cq-avant{background:var(--navy2);border:1px solid var(--line2);border-top:5px solid var(--c)}
.cq-dot{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.cq-avant b{font:400 20px/1.1 var(--cartoon);color:#fff}
.cq-flou{font:700 15px/1 var(--b);color:var(--ink2);filter:blur(4.5px);user-select:none}
.cq-tf{margin-top:auto;font:600 13.5px/1.2 var(--b);color:var(--mute)}
.cq-tf b{display:block;font:400 34px/1 var(--cartoon);color:var(--sun)}
.cq-avant small{font:600 12.5px/1.2 var(--b);color:var(--faint)}
.cq-apres{transform:rotateY(180deg);background:linear-gradient(160deg,#133a2c,#0c2a22);border:2px solid var(--vert);justify-content:center;align-items:center;text-align:center;gap:10px}
.cq-pub{padding:6px 12px;border-radius:99px;background:var(--vert);color:#062A1B;font:800 14px/1 var(--b)}
.cq-apres b{font:400 18px/1.15 var(--cartoon);color:#fff}
.cq-url{font:700 15px/1.2 var(--b);color:var(--vert)}
.cq-apres small{font:600 13px/1.3 var(--b);color:#bfe9d6}
.cq-carte:nth-child(2n) .cq-carte-in{transform:rotateY(180deg)}
@keyframes cqFlip{0%,22%{transform:rotateY(0)}32%,78%{transform:rotateY(180deg)}88%,100%{transform:rotateY(360deg)}}
.cq-arm .cq-carte .cq-carte-in{transform:none}
.cq-arm.cq-go .cq-carte .cq-carte-in{animation:cqFlip 6.5s cubic-bezier(.5,0,.3,1) var(--f) infinite both}
.cq-legende{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin-top:16px}
.cq-legende span{display:flex;align-items:center;gap:8px;font:600 14.5px/1.3 var(--b);color:var(--ink2)}
.cq-legende i{width:16px;height:16px;border-radius:5px}
.cq-lg-a{background:var(--navy2);border:2px solid var(--line2);border-top:4px solid var(--sun)}
.cq-lg-b{background:#133a2c;border:2px solid var(--vert)}

/* ── 6 · ET APRÈS ──────────────────────────────────────────────────────────────────────────────────────────── */
.cq-frise{position:relative;max-width:1080px;margin:0 auto;padding-top:6px}
.cq-frise ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cq-etape{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
/* un connecteur PAR intervalle, chacun avec son segment lumineux qui progresse puis une étincelle qui circule (règle Mathias) */
.cq-seg{position:absolute;z-index:0;top:32px;left:calc(50% + 42px);width:calc(100% + 12px - 84px);height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.cq-seg i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--sun),var(--vert));box-shadow:0 0 14px rgba(255,197,61,.6)}
.cq-seg::after{content:'';position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:0}
.cq-rond{position:relative;z-index:1}
.cq-rond{width:70px;height:70px;border-radius:50%;background:var(--navy);border:3px solid var(--sun);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(255,197,61,.12),0 0 30px rgba(255,197,61,.35)}
.cq-rond svg{width:30px;height:30px;fill:none;stroke:var(--sun);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cq-etape:last-child .cq-rond{border-color:var(--vert);box-shadow:0 0 0 6px rgba(47,208,143,.14),0 0 30px rgba(47,208,143,.45)}
.cq-etape:last-child .cq-rond svg{stroke:var(--vert)}
.cq-v{margin-top:10px;font:400 clamp(30px,3.4vw,46px)/1 var(--cartoon);color:var(--sun);text-shadow:0 3px 0 #04070d;white-space:nowrap}
.cq-etape:last-child .cq-v{color:var(--vert)}
.cq-et{font:400 20px/1 var(--cartoon);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.cq-etape small{max-width:22ch;font:500 15px/1.4 var(--b);color:var(--mute)}
@keyframes cqFill{from{width:0}to{width:100%}}
@keyframes cqEtincelle{0%{left:-30%;opacity:1}60%,100%{left:110%;opacity:1}}
@keyframes cqEtincelleV{0%{top:-30%;opacity:1}60%,100%{top:110%;opacity:1}}
@keyframes cqRond{0%{box-shadow:0 0 0 0 rgba(255,197,61,.9)}100%{box-shadow:0 0 0 18px rgba(255,197,61,0),0 0 30px rgba(255,197,61,.35)}}
.cq-arm .cq-seg i{width:0}
.cq-arm .cq-etape{opacity:0}
.cq-arm.cq-go .cq-seg i{animation:cqFill .55s ease-in-out var(--s) both}
.cq-arm.cq-go .cq-seg::after{animation:cqEtincelle 1.6s linear calc(var(--s) + .6s) infinite}
.cq-arm.cq-go .cq-etape{animation:cqPop .55s cubic-bezier(.2,.8,.2,1) var(--t) both}
.cq-arm.cq-go .cq-etape .cq-rond{animation:cqRond .8s ease-out var(--t) both}

/* ── 7 · LE LIEN OFFERT ────────────────────────────────────────────────────────────────────────────────────── */
.cq-cal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1000px;margin:0 auto}
.cq-mois{position:relative;background:var(--navy2);border:1px solid var(--line2);border-radius:20px;padding:18px 12px 16px;text-align:center}
.cq-mois::before,.cq-mois::after{content:'';position:absolute;top:-7px;width:10px;height:16px;border-radius:5px;background:var(--line2);border:2px solid var(--card)}
.cq-mois::before{left:28%}.cq-mois::after{right:28%}
.cq-mois-t{margin:0 0 12px;padding-bottom:10px;border-bottom:1px dashed var(--line2);font:400 21px/1 var(--cartoon);color:#fff}
.cq-cadeaux{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.cq-cadeau{position:relative;display:flex;flex-direction:column;align-items:center;width:96px;padding-top:40px}
.cq-boite{display:block;width:62px;height:44px;border-radius:0 0 7px 7px;background:linear-gradient(90deg,#E5484D 0 42%,var(--sun) 42% 58%,#E5484D 58%);box-shadow:0 10px 20px -8px rgba(0,0,0,.6)}
.cq-couv{position:absolute;top:24px;left:50%;width:72px;height:17px;margin-left:-36px;border-radius:5px;background:linear-gradient(90deg,#FF6B6F 0 42%,#FFD46A 42% 58%,#FF6B6F 58%);transform-origin:12% 100%;transform:translateY(-8px) rotate(-32deg)}
.cq-couv::after{content:'';position:absolute;left:50%;top:-11px;width:22px;height:12px;margin-left:-11px;border:3px solid var(--sun);border-bottom:0;border-radius:12px 12px 0 0}
.cq-cadeau b{display:block;margin-top:9px;font:800 13.5px/1.25 var(--b);color:var(--sun)}
.cq-cadeau::before{content:'✨';position:absolute;top:4px;left:50%;margin-left:-10px;font-size:20px;opacity:1}
.cq-rt .cq-boite{background:linear-gradient(90deg,#3D63E6 0 42%,#fff 42% 58%,#3D63E6 58%)}
.cq-rt .cq-couv{background:linear-gradient(90deg,#5B80FF 0 42%,#fff 42% 58%,#5B80FF 58%)}
.cq-rt .cq-couv::after{border-color:#fff}
.cq-rt b{color:#9DB5FF}
.cq-ensuite{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border-style:dashed;border-color:rgba(255,197,61,.5)}
.cq-infini{font:400 70px/1 var(--cartoon);color:var(--sun);text-shadow:0 4px 0 #04070d}
.cq-ensuite small{font:600 15px/1.3 var(--b);color:var(--ink2)}
.cq-sans-cb{margin:18px 0 0;text-align:center;font:700 15.5px/1.3 var(--b);color:var(--vert)}
@keyframes cqOuvre{0%{transform:none}35%{transform:translateY(2px) rotate(6deg)}55%{transform:translateY(0) rotate(-4deg)}100%{transform:translateY(-8px) rotate(-32deg)}}
@keyframes cqEtoile{0%{opacity:0;transform:scale(.2) translateY(10px)}60%{opacity:1;transform:scale(1.4) translateY(-6px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.cq-arm .cq-couv{transform:none}
.cq-arm .cq-cadeau b,.cq-arm .cq-cadeau::before{opacity:0}
.cq-arm.cq-go .cq-couv{animation:cqOuvre .7s cubic-bezier(.2,.8,.2,1) var(--o) both}
.cq-arm.cq-go .cq-cadeau::before{animation:cqEtoile .6s ease-out calc(var(--o) + .3s) both}
.cq-arm.cq-go .cq-cadeau b{animation:cqUp .45s ease-out calc(var(--o) + .3s) both}

/* ── 8 · SI J'ARRÊTE ───────────────────────────────────────────────────────────────────────────────────────── */
.cq-s-arreter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px;max-width:1000px}
.cq-compteur,.cq-restent{background:var(--navy2);border:1px solid var(--line2);border-radius:22px;padding:22px 22px 24px;text-align:center}
.cq-switch{position:relative;display:inline-flex;align-items:center;width:160px;height:50px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--line2)}
/* v5 correctif (relecture expert-design) : var(--no) est le rouge « erreur » de l'app (.cq-ex-ko) — la résiliation n'est pas une erreur, juste l'état final du demo. Neutre (var(--mute)) plutôt que rouge d'alerte. */
.cq-switch i{position:absolute;left:80px;top:4px;width:74px;height:40px;border-radius:99px;background:var(--mute);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.cq-switch b{position:relative;z-index:1;flex:1 1 50%;font:800 14.5px/1 var(--b);text-align:center}
.cq-sw-on{color:var(--faint)}.cq-sw-off{color:#fff}
.cq-paye{margin:18px 0 0}
.cq-paye small,.cq-jusqua small{display:block;margin-bottom:6px;font:700 13px/1.2 var(--h);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cq-paye b{font:400 clamp(58px,6vw,84px)/1 var(--cartoon);color:#fff;text-shadow:0 4px 0 #04070d}
.cq-points{display:grid;grid-template-columns:repeat(5,28px);justify-content:center;gap:12px;margin:10px 0 18px}
.cq-points i{width:28px;height:28px;border-radius:50%;background:var(--vert);box-shadow:0 0 14px rgba(47,208,143,.8)}
.cq-jusqua{margin:0}
.cq-jusqua b{font:400 clamp(52px,5.4vw,72px)/1 var(--cartoon);color:var(--vert);text-shadow:0 4px 0 #04070d}
@keyframes cqSwitch{from{left:4px;background:var(--vert)}to{left:80px;background:var(--mute)}}
@keyframes cqSwOn{from{color:#062A1B}to{color:var(--faint)}}
@keyframes cqSwOff{from{color:var(--faint)}to{color:#fff}}
@keyframes cqLueur{0%,100%{box-shadow:0 0 10px rgba(47,208,143,.6)}50%{box-shadow:0 0 22px rgba(47,208,143,1),0 0 0 4px rgba(47,208,143,.2)}}
.cq-arm .cq-switch i{left:4px;background:var(--vert)}
.cq-arm .cq-sw-on{color:#062A1B}.cq-arm .cq-sw-off{color:var(--faint)}
.cq-arm.cq-go .cq-switch i{animation:cqSwitch .45s cubic-bezier(.2,.8,.2,1) 1s both}
.cq-arm.cq-go .cq-sw-on{animation:cqSwOn .45s 1s both}
.cq-arm.cq-go .cq-sw-off{animation:cqSwOff .45s 1s both}
.cq-arm.cq-go .cq-points i{animation:cqLueur 2s ease-in-out calc(1.2s + var(--k) * .1s) infinite}

/* ── 9 · ENCORE UNE QUESTION ───────────────────────────────────────────────────────────────────────────────── */
.cq-s-question{display:grid;grid-template-columns:260px minmax(0,560px);justify-content:center;gap:34px;align-items:center}
.cq-q-lynx{position:relative;padding-top:70px}
.cq-q-lynx img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));animation:resp 5s ease-in-out infinite;transform-origin:50% 100%}
.cq-q-bulle{position:absolute;top:0;left:10px;right:-20px;z-index:1;background:#fff;color:#0F1B2D;border-radius:18px;padding:10px 14px;font:400 17px/1.15 var(--cartoon);text-align:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}
.cq-q-bulle::after{content:'';position:absolute;left:46%;bottom:-8px;width:18px;height:18px;background:#fff;transform:rotate(45deg)}
.cq-q-form .hlp-form{margin:0;padding:24px;background:var(--navy2);border:3px solid #fff;border-radius:26px;box-shadow:0 0 0 6px rgba(255,255,255,.05),0 34px 70px -30px rgba(0,0,0,.85)}
.cq-q-form .champ label{color:var(--ink2)}
.cq-q-form input[type=email],.cq-q-form textarea{width:100%;box-sizing:border-box;background:var(--navy);color:#fff;border:1px solid var(--line2);border-radius:12px;font-size:16px}
.cq-q-form input::placeholder,.cq-q-form textarea::placeholder{color:var(--faint)}
.cq-q-form input:focus,.cq-q-form textarea:focus{border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,197,61,.25);outline:0}
.cq-q-form .alerte{margin:0 0 14px}

/* ── tablette ──────────────────────────────────────────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .cq-sommaire{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cq-chemin{grid-template-columns:130px 40px minmax(0,1fr) 40px 170px}
  .cq-abo-row{grid-template-columns:84px minmax(0,1fr) 110px 110px;gap:12px}
}
@media(max-width:940px){
  .cq-in{padding-inline:20px}
  .cq-hero-grid{grid-template-columns:1fr;gap:0}
  .cq-hero-g{display:contents}
  .cq-hero-g .eyebrow{order:1;justify-self:start}.cq-hero h1{order:2}.cq-hero-d{order:3}.cq-bulles{order:4}
  .cq-hero h1{margin:14px 0 8px}
  .cq-hero-lynx{width:150px;margin:0 auto 6px}
  .cq-q{font-size:30px}.cq-q2{font-size:24px}
  .cq-bulle-v::after{display:none} /* 21/09 : la pointe (vers le lynx, masqué sur mobile) mordait le H1 */
  .cq-bulles{margin-top:12px}
  .cq-s-quoi{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);gap:10px}
  .cq-s-prix{grid-template-columns:180px minmax(0,1fr);gap:22px}
  .cq-bocal{height:220px}
  .cq-jar{width:140px;height:168px}.cq-jar-n{font-size:52px}
  .cq-s-ancre{gap:18px}
  .cq-s-question{grid-template-columns:180px minmax(0,1fr);gap:22px}
  .cq-cadeaux{gap:6px;flex-wrap:nowrap}
  .cq-cadeau{width:66px;padding-top:34px}
  .cq-boite{width:48px;height:36px}
  .cq-couv{width:56px;height:14px;margin-left:-28px;top:20px}
  .cq-cadeau b{font-size:12px}
  .cq-mois{padding:16px 6px 14px}
  .cq-q-bulle{left:-10px;right:-10px;font-size:15px}
  .cq-chemin{grid-template-columns:118px 34px minmax(0,1fr) 34px 150px;gap:8px;padding:14px}
  .cq-cartes{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .cq-carte{height:206px}.cq-face{padding:11px;gap:6px}.cq-avant b,.cq-apres b{font-size:16px}.cq-tf b{font-size:26px}
}
/* ── mobile ────────────────────────────────────────────────────────────────────────────────────────────────── */
@media(max-width:700px){
  .cq-chemin{grid-template-columns:1fr;justify-items:stretch;gap:8px;padding:16px}
  .cq-fleche{width:4px;height:22px;margin:0 auto;background:linear-gradient(180deg,rgba(255,197,61,.25),var(--sun));transform-origin:top center}
  .cq-fleche::after{right:auto;left:50%;top:auto;bottom:-2px;transform:translateX(-50%) rotate(135deg)}
  .cq-arm .cq-grow{transform:scaleY(0)}
  .cq-arm.cq-go .cq-grow{animation-name:cqGrowV}
  .cq-fleche::before{left:-2px;right:-2px;width:auto;top:0;height:26%;background:linear-gradient(180deg,transparent,#fff,transparent)}
  .cq-arm.cq-go .cq-fleche::before{animation-name:cqLueurV}
  .cq-s-quoi{grid-template-columns:1fr;gap:6px;max-width:560px}
  .cq-bolt-h{display:none}.cq-bolt-v{display:block;height:52px}
  .cq-quoi-bolt .cq-cap{margin-top:0}
  .cq-art{padding:14px 16px}.cq-art-doc{gap:9px;padding:12px}.cq-art .cq-cap{margin-top:8px}
  .cq-serp{padding:12px 14px 12px}
  .cq-s-prix{grid-template-columns:1fr;gap:14px;max-width:600px}
  .cq-bocal{height:190px}
  .cq-jar{width:132px;height:150px}.cq-jar-n{font-size:48px}
  .cq-s-ancre{grid-template-columns:1fr;max-width:600px}
  .cq-s-arreter{grid-template-columns:1fr;max-width:600px;gap:14px}
  .cq-compteur,.cq-restent{padding:16px}
  .cq-s-question{grid-template-columns:1fr;justify-items:center;gap:10px}
  .cq-q-lynx{width:160px;padding-top:62px}.cq-q-form{width:100%;max-width:560px}
  .cq-q-bulle{left:-40px;right:-40px}
  .cq-chemin{padding:12px;gap:6px}
  .cq-badge{padding:8px 10px;display:flex;justify-content:center;align-items:baseline;gap:8px}
  .cq-badge b{display:inline;font-size:22px;margin:0}
  .cq-fleche{height:14px}
  .cq-mini{padding:10px 12px}.cq-mini-l{margin-top:7px}
  .cq-fin{padding:10px}
  .cq-envoi-zone{height:84px}
  .cq-enveloppe i{font-size:38px}.cq-enveloppe small{font-size:13px}
  .cq-projets{gap:6px}.cq-projet{padding:6px 10px;font-size:13.5px}
  .cq-abo-barres{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .cq-barre{padding:10px 12px;gap:6px 8px}
  .cq-barre small{font-size:11.5px;letter-spacing:.04em}
  .cq-abo-tab{gap:8px}
  .cq-band{padding:48px 0 54px}
  .cq-in{padding-inline:16px}
  .cq-band h2{font-size:clamp(27px,7.4vw,36px)}
  .cq-texte{text-align:left}
  .cq-texte p{font-size:16px}
  .cq-sommaire{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
  .cq-pastille{padding:12px 4px 10px}
  .cq-pastille span{font-size:13px;text-wrap:balance}
  .cq-bulle{grid-template-columns:1fr;padding:14px 16px;gap:8px}
  .cq-bulle-ico{width:36px;height:36px;font-size:18px}
  .cq-bulle p{font-size:15.5px}
  .cq-serp-l{--rh:54px}
  .cq-serp-l::before{line-height:54px}
  .cq-ligne{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px 14px}
  .cq-chip-t{grid-column:1/-1;justify-self:start}
  .cq-eq{display:none}
  .cq-x{font-size:16px}
  .cq-tot{font-size:36px}.cq-tot small{font-size:13px}
  .cq-palier b{font-size:17px}.cq-palier small{font-size:13px}
  .cq-abo-leg{justify-content:flex-start;flex-direction:column;gap:8px}
  .cq-abo-leg span{font-size:15.5px}
  .cq-abo-row{grid-template-columns:62px minmax(0,1fr) auto;grid-template-areas:"m blocs blocs" "paye paye ligne";gap:8px 10px;padding:10px 12px}
  .cq-abo-m{grid-area:m;font-size:19px}
  .cq-abo-blocs{grid-area:blocs;gap:6px;justify-content:flex-start}
  .cq-abo-paye{grid-area:paye}.cq-abo-ligne{grid-area:ligne;text-align:right}
  .cq-abo-paye,.cq-abo-ligne{display:flex;align-items:baseline;gap:8px}
  .cq-abo-ligne{justify-content:flex-end}
  .cq-abo-paye small,.cq-abo-ligne small{margin:0;font-size:12px}
  .cq-abo-paye b,.cq-abo-ligne b{font-size:21px}
  .cq-blk{padding:6px 5px;gap:4px}
  .cq-blk-pts{grid-template-columns:repeat(5,9px);gap:3px}
  .cq-blk-pts i{width:9px;height:9px}
  .cq-blk small{font-size:11.5px;max-width:64px}
  .cq-barre b{font-size:24px}
  .cq-ex span{font-size:21px}.cq-ex i{width:42px;height:42px;font-size:20px}
  .cq-cartes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cq-carte{height:164px}
  .cq-carte:last-child{grid-column:1/-1;height:140px}
  .cq-face{padding:11px 12px;gap:5px}
  .cq-apres{gap:6px}.cq-apres small{font-size:12px}.cq-avant small{font-size:12px}.cq-flou{font-size:13px}
  .cq-avant b{font-size:18px}.cq-tf b{font-size:28px}
  .cq-apres b{font-size:16px}
  .cq-legende{flex-direction:column;align-items:flex-start;gap:6px}
  .cq-frise{padding:0 0 0 4px}
  .cq-seg{top:calc(50% + 36px);left:28px;width:6px;height:calc(100% + 18px - 72px)}
  .cq-seg i{background:linear-gradient(180deg,var(--sun),var(--vert))}
  .cq-seg::after{left:0;right:0;width:auto;top:-30%;height:30%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.9),transparent)}
  .cq-frise ol{grid-template-columns:1fr;gap:18px}
  .cq-etape{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"rond v" "rond et" "rond s";align-items:center;justify-items:start;text-align:left;gap:2px 16px}
  .cq-rond{grid-area:rond;width:62px;height:62px;align-self:center}
  .cq-v{grid-area:v;margin:0;font-size:34px}.cq-et{grid-area:et;font-size:18px}.cq-etape small{grid-area:s;max-width:none}
  .cq-arm .cq-seg i{width:100%;height:0}
  .cq-arm.cq-go .cq-seg i{animation-name:cqFillV}
  .cq-arm.cq-go .cq-seg::after{animation-name:cqEtincelleV}
  .cq-cal{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cq-points{grid-template-columns:repeat(5,24px);gap:10px}
  .cq-points i{width:24px;height:24px}
}
@keyframes cqFillV{from{height:0}to{height:100%}}
/* ── mobile paysage (844×390) : bandes sans hauteur d'écran, schémas en 2 colonnes quand ça tient ── */
@media(max-width:940px) and (max-height:500px){
  .cq-band{padding:40px 0 44px}
  .cq-hero-lynx{width:120px}
}
/* v3 correctif (retour coordinateur 15/09, point 1) : sur mobile étroit ET pas très haut (400×860 portrait,
   844×390 paysage — les 2 tailles mobiles de preuve du brief), le hero doit tenir sans défilement pour voir les
   2 encarts + les pastilles. La mascotte est purement décorative (déjà aria-hidden) : on la retire pour
   regagner la hauteur nécessaire, on resserre les marges/paddings du hero SEUL (les autres bandes gardent leur
   respiration normale — .cq-hero.cq-band, 2 classes, gagne sur .cq-band{padding:48px 0 54px} plus bas dans le
   fichier). Un mobile plus haut (portrait normal, ≥900px de hauteur) garde la mascotte, rien ne change pour lui. */
@media(max-width:940px) and (max-height:900px){
  .cq-hero-d{display:none}
  .cq-hero.cq-band{padding:16px 0 20px}
  .cq-hero-g .eyebrow{margin-bottom:6px}
  .cq-hero h1{margin:6px 0 6px}
  .cq-bulles{gap:8px}
  .cq-bulle{padding:10px 14px}
  .cq-sommaire{margin-top:14px}
}
/* paysage très bas (ex. 844×390) : le header + la barre « point clé » + la bande de pastilles sticky occupent déjà
   ~170 px des 390 (mesuré, cf. PREUVES §5) avant même le hero — on compacte encore, mais un plancher physique
   existe : à cette taille, la 2ᵉ bulle (abonnement) peut rester juste sous la ligne de flottaison (documenté,
   pas caché) plutôt que de raboter le texte partagé avec l'accueil (hors périmètre de ce correctif). */
@media(max-width:940px) and (max-height:500px){
  .cq-hero-g .eyebrow{display:none}
  .cq-hero h1{font-size:22px;line-height:1.05;margin:2px 0 4px}
  .cq-bulles{gap:5px}
  .cq-bulle{padding:6px 10px}
  .cq-bulle p{font-size:13px;line-height:1.3}
  .cq-bulle-ico{width:30px;height:30px;font-size:15px}
  .cq-sommaire{margin-top:8px}
}
@media print{
  .cq-band{min-height:0!important;padding:24px 0;background:#fff!important;color:#000}
  .cq-scene,.cq-hero-d,.cq-sommaire{display:none!important}
  .cq-band h2,.cq-hero h1,.cq-texte p,.cq-bulle p{color:#000!important;text-shadow:none!important}
}

/* ══ v3 (15/09/2026, BRIEF-comprendre-v3-1509.md + ADDENDUM) ═══════════════════════════════════════════════ */

/* ── bande sticky mobile des 8 pastilles (item 2 du brief : toujours visibles quelque part en sticky sur mobile).
   Doublon volontaire du sommaire du hero (qui reste au-dessus de la ligne de flottaison, inchangé) : cette bande
   n'existe QUE <941px, colle sous le header + la barre « point clé » (assets/barre-cle.css), défile à l'horizontale,
   la question en cours est surlignée en jaune et centrée par comprendre.js (IntersectionObserver déjà en place). */
.cq-mobnav{display:none}
@media(max-width:940px){
  .cq-mobnav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:sticky;top:var(--cq-mobnav-top,76px);z-index:41;background:var(--navy);border-bottom:1px solid var(--line2);padding:9px 14px;box-shadow:0 10px 22px -18px rgba(0,0,0,.8)}
  .cq-mobnav::-webkit-scrollbar{display:none}
  .cq-mobnav-a{flex:0 0 auto;scroll-snap-align:center;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--faint);font:700 12px/1 var(--b);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
  .cq-mobnav-a.on{background:var(--sun);border-color:var(--sun);color:#1A1200}
  .cq-mobnav{scroll-snap-type:x proximity}
}
@media(max-width:940px) and (max-height:430px){
  /* paysage très bas (ex. 844×390) : on condense — plus de sticky pour la bande de pastilles, elle repasse en flux normal */
  .cq-mobnav{position:static;box-shadow:none}
}

/* ── section « quoi » v5 (BRIEF-comprendre-v5-1509.md, item 1 — remplace la v4 « 1 carte nous ») ───────────────
   Étage 3 (nous, 12 petites cartes-articles en jaune/or, 2 par page) | Étage 2 (vos 6 pages) | Étage 1
   (la cible) — 3 colonnes desktop, empilées < 941 px. Le déséquilibre visuel (gauche plus fourni que le
   centre) vient du nombre de cartes : 12 à gauche contre 6 au centre, groupées par paire pour que chaque
   paire lise comme « ces 2 articles poussent cette page ». Un seul trait par page (le brief autorise le
   choix entre un trait ou un faisceau de 2 — un seul trait suffit, épaissi en ligne double via .cq-trace-duo
   pour suggérer les 2 articles). Ordre d'animation demandé par Mathias : ARTICLES → TRAITS → PAGES → LA CIBLE
   MONTE (délais ci-dessous respectent cet ordre strict). Départ (.cq-arm, SANS) : articles et pages ternes,
   cible basse dans le mini-SERP. Arrivée (.cq-arm.cq-go, AVEC) : articles allumés par paire, puis traits vers
   les pages, puis pages allumées, puis traits pages→cible et cible qui grimpe en tête. Sans JS/reduced-motion :
   état final AVEC direct (aucune classe .cq-arm posée). */
/* v5 correctif (relecture expert-design) : align-items:center créait ~140px de vide entre le libellé de phase et
   la colonne « nous » — la colonne « cible » (avec son mini-SERP) est bien plus haute que « nous »/« pages », le
   centrage vertical du grid poussait ces 2 colonnes vers le bas. align-items:start aligne les 3 colonnes en
   haut : plus de vide, la densité de la colonne « nous » se voit dès le premier coup d'œil. */
.cq-s-quoi.cq-quoi3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,.9fr);gap:16px;align-items:start;max-width:1180px}
.cq-quoi-phase{grid-column:1/-1;justify-self:center;position:relative;display:inline-block;min-width:160px;height:1.4em;margin-bottom:2px;text-align:center}
.cq-quoi-phase b{position:absolute;left:0;right:0;top:0;font:800 12.5px/1.4 var(--h);letter-spacing:.08em;text-transform:uppercase}
.cq-ph-sans{color:var(--faint)}
.cq-ph-avec{color:var(--sun);opacity:0}
.cq-arm.cq-go .cq-ph-sans{animation:cqPhOut .01s linear 1.75s forwards}
.cq-arm.cq-go .cq-ph-avec{animation:cqPhIn .01s linear 1.75s forwards}
@keyframes cqPhOut{to{opacity:0}}
@keyframes cqPhIn{to{opacity:1}}
/* étage 3 · nous : 12 cartes (6 paires), jaune/or — même langage de carte que .cq-page-carte, en plus petit
   et teinté --sun (réutilise le vocabulaire de carte existant plutôt que d'en inventer un nouveau) */
.cq-nous-lignes{display:flex;flex-direction:column;gap:8px}
.cq-nous-paire{display:flex;gap:6px}
.cq-nous-mini{flex:1 1 0;display:flex;align-items:center;gap:6px;min-width:0;padding:7px 9px;border-radius:12px;background:var(--sun-soft);border:1px solid rgba(255,197,61,.4)}
.cq-nous-mini-ico{font-size:12px;font-style:normal;flex:0 0 auto;color:var(--sun);filter:drop-shadow(0 0 5px rgba(255,197,61,.65))}
.cq-nous-mini span{font:700 11.5px/1.2 var(--b);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-arm .cq-nous-mini{opacity:.5;filter:grayscale(1) brightness(.72)}
.cq-arm.cq-go .cq-nous-mini{animation:cqPageLume .45s ease-out calc(.15s + var(--k,0) * .1s) both}
/* étage 2 · vos 6 pages, chacune reliée par un trait à sa paire d'articles (à gauche) et à la cible (à droite) */
.cq-quoi-lignes{display:flex;flex-direction:column;gap:8px}
.cq-quoi-ligne{display:grid;grid-template-columns:22px minmax(0,1fr) 22px;align-items:center;gap:6px}
.cq-trace{position:relative;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--sun),var(--vert));transform:scaleX(1);transform-origin:left center}
.cq-trace-duo{height:5px;background:linear-gradient(180deg,var(--sun) 0 2px,transparent 2px 3px,var(--sun) 3px 5px)}
.cq-arm .cq-trace{transform:scaleX(0)}
.cq-arm.cq-go .cq-trace-in{animation:cqTraceGrow .4s ease-out var(--t,0s) both}
.cq-arm.cq-go .cq-trace-out{animation:cqTraceGrow .4s ease-out var(--t,0s) both}
@keyframes cqTraceGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cq-jus-tok{position:absolute;top:50%;left:0;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--sun);box-shadow:0 0 9px rgba(255,197,61,.95);opacity:0}
.cq-arm.cq-go .cq-jus-tok{animation:cqJusTravel .75s linear var(--jt,0s) both}
@keyframes cqJusTravel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.cq-page-carte{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:13px;background:var(--card);border:1px solid var(--line2);min-width:0;transition:none}
.cq-page-zap{font-size:12px;font-style:normal;flex:0 0 auto;color:var(--sun)}
.cq-page-ico{font-size:15px;font-style:normal;flex:0 0 auto}
.cq-page-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.cq-page-txt b{font:700 12.5px/1.25 var(--b);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-page-txt small{font:500 10.5px/1.2 var(--b);color:var(--mute)}
.cq-arm .cq-page-carte{opacity:.5;filter:grayscale(1) brightness(.72)}
.cq-arm .cq-page-zap{opacity:0}
.cq-arm.cq-go .cq-page-carte{animation:cqPageLume .5s ease-out calc(1.85s + var(--k,0) * .15s) both}
.cq-arm.cq-go .cq-page-zap{animation:cqPop .4s cubic-bezier(.2,.8,.2,1) calc(1.85s + var(--k,0) * .15s) both}
@keyframes cqPageLume{from{opacity:.5;filter:grayscale(1) brightness(.72)}to{opacity:1;filter:none}}
/* étage 1 · la cible, + son mini-SERP qui grimpe (.cq-serp récupéré de la v2, cf. plus haut) — apparaît et
   grimpe APRÈS que tout le reste (articles, traits, pages) s'est allumé (v5, ordre demandé par Mathias) */
.cq-qz-cible{display:flex;flex-direction:column;gap:14px;align-items:center}
.cq-cible-carte{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px 18px;border-radius:20px;background:var(--card);border:3px solid var(--sun);box-shadow:0 0 0 6px rgba(255,197,61,.12),0 26px 54px -28px rgba(0,0,0,.85);width:100%;box-sizing:border-box}
.cq-cible-carte .cq-dot{width:11px;height:11px;border-radius:50%;background:var(--vert);box-shadow:0 0 11px rgba(47,208,143,.8)}
.cq-cible-carte b{font:400 22px/1.15 var(--cartoon);color:#fff}
.cq-cible-carte small{font:600 12px/1.3 var(--b);color:var(--faint)}
.cq-cible-direct{margin-top:6px;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.06);font:700 11px/1 var(--b);color:var(--mute)}
.cq-arm .cq-cible-carte{opacity:0;transform:translateY(8px)}
.cq-arm.cq-go .cq-cible-carte{animation:cqUp .5s cubic-bezier(.2,.8,.2,1) 2.7s both}
.cq-serp{width:100%;box-sizing:border-box;padding:12px 14px 14px}
@media(max-width:1180px){
  .cq-s-quoi.cq-quoi3{grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr)}
  .cq-page-txt small{display:none}
  .cq-nous-mini span{font-size:10.5px}
}
@media(max-width:940px){
  .cq-s-quoi.cq-quoi3{grid-template-columns:1fr;max-width:520px;gap:14px}
  /* empilement mobile (item 1) : articles en grille compacte 4×3, PUIS pages, PUIS cible — display:contents
     sur la paire fait remonter ses 2 cartes comme enfants directs de la grille, sans dupliquer le HTML */
  .cq-nous-lignes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .cq-nous-paire{display:contents}
  .cq-nous-mini{padding:8px 6px;flex-direction:column;text-align:center;gap:3px}
  .cq-nous-mini span{white-space:normal;font-size:10px;line-height:1.15}
  .cq-serp-l{--rh:46px}
  .cq-serp-l::before{line-height:46px}
}
@media(max-width:400px){
  .cq-nous-lignes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* v4 correctif (BRIEF-comprendre-v4-1509.md item 1) : le schéma doit tenir SANS scroll supplémentaire à 1000×650
   ET 400×860 (exigence explicite du brief). Mesuré au Playwright (measure_quoi_parts.py) : sur ordinateur mais
   fenêtre basse (1000×650, 1100×700 — ≥941 px de large, la grille 3 colonnes reste active), c'est la colonne
   « cible » (carte + mini-SERP à 5 rangs) qui pousse toute la ligne à ~520 px de haut. On raccourcit le mini-SERP
   à 3 rangs (au lieu de 5 — « en tête » reste visible, le principe « ça grimpe » aussi) et on resserre les 3
   cartes ; scopé #quoi uniquement, aucune autre section n'est concernée. */
@media(min-width:941px) and (max-height:760px){
  #quoi.cq-band{padding:16px 0 18px}
  #quoi .cq-tete{margin-bottom:8px}
  #quoi .cq-s-quoi.cq-quoi3{gap:10px}
  #quoi .cq-nous-lignes{gap:4px}
  #quoi .cq-nous-mini{padding:4px 7px}
  #quoi .cq-lbl{margin-bottom:6px}
  #quoi .cq-quoi-lignes{gap:4px}
  #quoi .cq-page-carte{padding:5px 9px}
  #quoi .cq-cible-carte{padding:12px 16px;gap:3px}
  #quoi .cq-cible-carte small{display:none}
  #quoi .cq-qz-cible{gap:8px}
  #quoi .cq-serp{padding:6px 10px 8px}
  #quoi .cq-serp .cq-lbl{display:none}
  #quoi .cq-serp-l{--rh:26px;height:calc(var(--rh) * 3)}
  #quoi .cq-serp-l::before{content:'1\A 2\A 3';line-height:26px}
  #quoi .cq-serp-l li:nth-child(n+4){display:none}
  #quoi .cq-serp-l li{padding:0 10px}
  #quoi .cq-texte{margin-top:8px}
  /* liste ramenée de 5 à 3 rangs : « votre page » doit descendre au rang 3 (dernier visible), pas au rang 5
     (calc(var(--rh)*4) sortirait du cadre, cf. capture cassée du 15/09) — les concurrents (.cq-autre) montent
     toujours d'1 rang, inchangé. */
  #quoi.cq-arm .cq-moi{transform:translateY(calc(var(--rh) * 2))}
  #quoi.cq-arm.cq-go .cq-moi{animation-name:cqMonte3}
}
@keyframes cqMonte3{from{transform:translateY(calc(var(--rh) * 2))}to{transform:none}}
/* v4 correctif préventif (même logique que le point 5 v3, 400×860/844×390) : schéma empilé plus long qu'avant
   (nous + 6 lignes + cible + mini-SERP) — on resserre les paddings/gaps SEULS sur mobile bas, rien n'est retiré. */
@media(max-width:940px) and (max-height:900px){
  #quoi.cq-band{padding:10px 0 12px}
  #quoi .cq-tete{margin-bottom:2px}
  #quoi .cq-tete h2{font-size:22px}
  #quoi .cq-texte{margin-top:4px}
  #quoi .cq-texte p{font-size:13px;line-height:1.4}
  .cq-s-quoi.cq-quoi3{gap:9px}
  #quoi .cq-qz-pages .cq-lbl{display:none}
  .cq-quoi-lignes{gap:3px}
  .cq-page-carte{padding:3px 6px}
  #quoi .cq-page-txt b{font-size:11.5px}
  #quoi .cq-nous-lignes{gap:4px}
  #quoi .cq-nous-mini{padding:5px 6px}
  #quoi .cq-nous-mini span{font-size:9.5px}
  .cq-cible-carte{padding:8px 10px;gap:2px}
  .cq-cible-carte b{font-size:16px}
  #quoi .cq-cible-carte small{display:none}
  #quoi .cq-qz-cible{gap:6px}
  .cq-serp{padding:4px 6px 6px}
  #quoi .cq-serp .cq-lbl{display:none}
  .cq-serp-l{--rh:24px}
  #quoi .cq-serp-l{height:calc(var(--rh) * 3)}
  #quoi .cq-serp-l li:nth-child(n+4){display:none}
  .cq-serp-l::before{line-height:24px;font-size:12px}
  #quoi .cq-serp-l::before{content:'1\A 2\A 3'}
  .cq-serp-l li{padding:0 8px}
  .cq-serp-l li b{font-size:11px}
  /* même correctif que ci-dessus (bloc ≥941 px) : 3 rangs visibles, « votre page » descend au rang 3, pas 5. */
  #quoi.cq-arm .cq-moi{transform:translateY(calc(var(--rh) * 2))}
  #quoi.cq-arm.cq-go .cq-moi{animation-name:cqMonte3}
}
@media(max-width:940px) and (max-height:500px){
  .cq-qz-pages .cq-lbl{display:none}
  .cq-serp .cq-lbl{display:none}
}

/* ── section « prix » v3 : 2-3 exemples de commandes, visuel façon configurateur, NON manipulable (CM-0154) ──── */
/* v4 correctif (BRIEF-comprendre-v4-1509.md, item 2) : .cq-s-prix n'a QUE 2 colonnes déclarées (jar + calc) mais
   3 enfants directs (.cq-bocal, .cq-calc, .cq-cmd-ex) — sans grid-column explicite, l'auto-placement casait
   .cq-cmd-ex dans la 1re colonne (250/180 px) en ligne 2, d'où les cartes écrasées dans le coin gauche et le vide
   à droite (capture Mathias, ~1000 px). .cq-cmd-ex passe pleine largeur de la section : ses propres cartes ont
   alors la place annoncée par le brief. */
.cq-cmd-ex{grid-column:1/-1;margin-top:26px}
.cq-cmd-ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cq-cmd-ex-carte{padding:18px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line2);text-align:center}
.cq-cmd-ex-carte b{display:block;margin-bottom:14px;font:700 13.5px/1.35 var(--b);color:var(--ink2)}
/* piste longue façon configurateur (.cfg-range de la home) : pastille dorée qui suit le remplissage */
.cq-cmd-ex-track{display:block;position:relative;height:12px;border-radius:99px;background:rgba(255,255,255,.08);overflow:visible;margin:0 10px 16px}
.cq-cmd-ex-fill{position:relative;display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--sun),var(--vert));transition:width 1s cubic-bezier(.2,.8,.2,1) calc(var(--k,0) * .18s + .2s);overflow:visible}
.cq-cmd-ex-fill::after{content:'';position:absolute;right:-10px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:linear-gradient(180deg,#FFD46A,#F5A623);border:3px solid var(--card);box-shadow:0 0 0 1px var(--line2),0 6px 14px -4px rgba(255,197,61,.8)}
.cq-arm.cq-go .cq-cmd-ex-fill{width:var(--w,0%)}
.cq-cmd-ex-carte small{display:block;font:800 20px/1 var(--h);color:#fff;white-space:nowrap}
@media(max-width:700px){.cq-cmd-ex-grid{grid-template-columns:1fr}}

/* ── section « ancre » v3 : reproduction animée de l'espace client qui commande (addendum §4) ─────────────────── */
.cq-s-cmd{display:flex;flex-direction:column;gap:22px;max-width:900px;margin:0 auto}
/* v5 correctif (relecture expert-design) : le bloc 1 (curseurs) flottait sans carte alors que le bloc 2
   (.cq-cmd-cases, juste en dessous) en a une — même traitement carte pour les 2 blocs de la démo. */
.cq-cmd-choix{padding:16px 16px 14px;border-radius:18px;background:var(--card);border:1px solid var(--line2)}
.cq-cmd-sliders{display:flex;flex-direction:column;gap:10px}
.cq-cmd-sl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) 34px;align-items:center;gap:12px}
.cq-cmd-sl b:first-child{font:700 13px/1.25 var(--b);color:var(--ink2)}
.cq-cmd-track{position:relative;height:12px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.cq-cmd-fill{display:block;height:100%;width:0;border-radius:99px;background:var(--c,var(--sun))}
.cq-cmd-n{text-align:right;font:800 15px/1 var(--h);color:#fff}
.cq-cmd-cases{position:relative;padding:16px 16px 14px;border-radius:18px;background:var(--card);border:1px solid var(--line2)}
/* v3 correctif (retour coordinateur 15/09) : la bulle « Ici, votre lien » (.cq-cmd-bulle, posée au-dessus du
   champ, ~40 px de hauteur avec sa marge) recouvrait le libellé juste au-dessus (10 px de marge seulement) —
   on décale la 1re ligne de champs vers le bas pour lui laisser sa place, seulement là où des bulles existent
   (.cq-cmd-l2, dans .cq-cmd-fort, n'en a pas et n'est pas concernée). */
.cq-cmd-cases .cq-lbl{margin-bottom:44px}
.cq-cmd-ligne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cq-cmd-champ{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0}
.cq-cmd-champ small{font:700 10.5px/1.2 var(--h);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.cq-cmd-champ small i{font-style:normal;text-transform:none;color:var(--mute);font-weight:600}
.cq-cmd-val{display:block;min-height:20px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--line2);font:600 13px/1.3 var(--b);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-cmd-auto span{display:block;min-height:20px;padding:7px 10px;border-radius:9px;background:rgba(47,208,143,.1);border:1px dashed rgba(47,208,143,.4);font:600 13px/1.3 var(--b);color:var(--vert)}
.cq-cmd-bulle{position:absolute;top:-14px;transform:translateY(-100%);padding:6px 11px;border-radius:12px;background:var(--sun);color:#1A1200;font:700 12px/1.2 var(--b);white-space:nowrap;opacity:0;pointer-events:none;box-shadow:0 10px 20px -10px rgba(0,0,0,.7);transition:opacity .25s,transform .25s}
.cq-cmd-bulle.on{opacity:1;transform:translateY(-108%)}
.cq-cmd-bulle[data-cq-bulle="url"]{left:0}
.cq-cmd-bulle[data-cq-bulle="ancre"]{left:34%}
.cq-cmd-bulle[data-cq-bulle="titre"]{left:68%}
.cq-cmd-encore{margin:12px 0 0;font:700 12.5px/1 var(--b);color:var(--faint);text-align:right}
.cq-cmd-fort{padding:16px 18px;border-radius:18px;background:var(--sun-soft);border:1px solid rgba(255,197,61,.4)}
.cq-cmd-fort b{display:block;margin-bottom:4px;font:800 16px/1.2 var(--b);color:var(--sun)}
.cq-cmd-fort>p{margin:0 0 12px;font:500 14px/1.4 var(--b);color:var(--ink2)}
.cq-arm .cq-cmd-fort{opacity:0}
.cq-arm.cq-go .cq-cmd-fort{animation:cqPop .5s cubic-bezier(.2,.8,.2,1) var(--t,0s) both}
@media(max-width:700px){
  .cq-cmd-ligne{grid-template-columns:1fr}
  .cq-cmd-bulle{position:static;transform:none;opacity:1;display:inline-block;margin-top:2px}
  .cq-cmd-bulle:not(.on){display:none}
  .cq-cmd-sl{grid-template-columns:88px minmax(0,1fr) 30px}
  /* bulle en flux normal (pas absolue) ici : la marge supplémentaire du correctif desktop ne sert à rien */
  .cq-cmd-cases .cq-lbl{margin-bottom:10px}
}

/* ── section « sites » v3/v5 : moyennes réelles par thématique (addendum §5, item 2 du BRIEF-v5-1509) ────────── */
.cq-sites-intro{max-width:640px;margin:0 auto 14px;text-align:center;font:500 16px/1.5 var(--b);color:var(--ink2)}
.cq-sites-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cq-site-carte{padding:16px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line2);border-top:3px solid var(--c,var(--sun))}
.cq-site-nom{display:block;margin-bottom:10px;font:700 13px/1.25 var(--b);color:#fff}
.cq-jauge-track{flex:1 1 auto;position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.cq-jauge-fill{display:block;height:100%;width:0;border-radius:99px;background:var(--c,var(--sun));transition:width 1.1s cubic-bezier(.2,.8,.2,1) var(--t,0s)}
.cq-arm.cq-go .cq-jauge-fill{width:var(--w,0%)}
/* v5 (BRIEF-comprendre-v5-1509.md, item 2) : Mathias — « domaine référent et trust flow moyen écrits trop
   petits ». Les 2 valeurs deviennent chacune un bloc CHIFFRE + LIBELLÉ lisible à 1 m (17-20 px, gras) — RD en
   premier et le plus gros (34→40 px), TF juste en dessous, un cran plus petit mais un vrai grand chiffre, plus
   une petite jauge à 18 px minuscule. Les valeurs et leur calcul ne changent pas (rlk_stats_livraison(), inchangé). */
.cq-site-rd{margin:2px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.cq-rd-n{display:block;font:800 40px/1 var(--h);color:#fff}
.cq-site-rd small{display:block;margin:6px 0 8px;font:700 17px/1.25 var(--b);color:var(--ink2)}
.cq-rd-track{display:block;height:7px}
.cq-site-tf{margin-bottom:0}
.cq-tf-n{display:block;font:800 27px/1 var(--h);color:var(--sun)}
.cq-site-tf small{display:block;margin:5px 0 7px;font:700 15px/1.25 var(--b);color:var(--ink2)}
.cq-tf-track{display:block;height:6px}
.cq-sites-source{margin:18px 0 0;text-align:center;font:600 12px/1.3 var(--b);color:var(--faint)}
@media(max-width:1300px){.cq-sites-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.cq-sites-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){
  .cq-sites-grid{grid-template-columns:1fr}
  .cq-rd-n{font-size:34px}
  .cq-tf-n{font-size:24px}
}

/* ── section « arrêter » v3 : 6 mois qui s'allument, résiliation, tout reste allumé (addendum §7) ───────────── */
.cq-arr-grille{max-width:960px;margin:0 auto}
/* v5 correctif (relecture expert-design) : vignettes jugées trop petites/gadget — même poids visuel que les
   libellés « Mois N » de la section abonnement juste au-dessus (.cq-abo-m, cartoon 24px blanc). */
.cq-arr-mois-liste{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:26px}
.cq-arr-mois{padding:14px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line2);text-align:center;transition:border-color .3s,background .3s}
.cq-arr-mois small{display:block;margin-bottom:10px;font:400 22px/1 var(--cartoon);color:#fff}
.cq-arr-pts{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cq-arr-pts i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.1);transition:background .3s,box-shadow .3s}
.cq-arr-mois.on{border-color:rgba(47,208,143,.4);background:rgba(47,208,143,.06)}
.cq-arr-mois.on .cq-arr-pts i{background:var(--vert);box-shadow:0 0 8px rgba(47,208,143,.7)}
.cq-s-arreter{grid-template-columns:1fr}
.cq-arr-panneau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px}
@media(max-width:940px){.cq-arr-mois-liste{grid-template-columns:repeat(3,minmax(0,1fr))}.cq-arr-panneau{grid-template-columns:1fr}}
@media(max-width:400px){.cq-arr-mois-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* le switch résilié se déclenche plus tard qu'en v2 (grille de 6 mois à faire apparaître avant) */
.cq-s-arreter .cq-switch i{animation-delay:2.7s!important}
.cq-s-arreter .cq-sw-on{animation-delay:2.7s!important}
.cq-s-arreter .cq-sw-off{animation-delay:2.7s!important}
/* 15/09 orchestrateur : mini-SERP compact (fenêtre basse) — rangs de 26 px trop courts pour « Votre page » + « en tête »
   (texte qui débordait sur le rang du dessus à 1000×650) : une seule ligne par rang, hauteur pleine. */
@media(min-width:941px) and (max-height:760px){
  #quoi .cq-serp-l li{height:calc(var(--rh) - 4px)}
  #quoi .cq-serp-l li small{display:none}
  #quoi .cq-serp-l li b{font-size:13px;line-height:1}
}

/* 17/09/2026 (Mathias) : « le héros est trop bas » — plus de centrage vertical sur toute la hauteur d'écran,
   le héros commence juste sous la barre du haut. */
@media(min-width:941px){.cq-hero.cq-band{min-height:0;align-items:flex-start;padding:clamp(22px,3.5vh,40px) 0 clamp(28px,4vh,48px)}}

/* 21/09 Mathias (iPhone 393×852) : mini-SERP mobile à rangs de 24-26 px — « Votre page » + « en tête » et la barre grise
   débordaient sur le rang voisin. Même correctif que la fenêtre basse ordinateur : une seule ligne par rang. */
@media(max-width:940px) and (max-height:900px){
  .cq-serp-l li{height:calc(var(--rh) - 4px)}
  .cq-serp-l li small{display:none}
  .cq-serp-l li b{line-height:1}
}