/* Bien démarrer avec VOKO — /bien-demarrer. Feuille propre à la page : aucune dépendance au site (pas de data.js, pas de bibliothèque). */
:root{--p:#28666E;--p7:#1D4B51;--p9:oklch(28% .035 205);--p10:oklch(23% .03 205);--pc:oklch(74% .06 205);--e:#079C79;--bc:#F8FCF9;--s:#FEDC97;--o:#B5B682;--r:#FF99BB;--or:#FF580A;--ink:#1E2E2C;--p1:oklch(94% .02 205);--fd:"Poppins",system-ui,sans-serif;--fb:"DM Sans",system-ui,sans-serif;--nav:76px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--fb);color:var(--ink);background:var(--bc);font-size:17px;line-height:1.55;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--e)}a:hover{color:var(--p)}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:8px}
.ic{display:block;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{position:relative;scroll-margin-top:0;padding:calc(var(--nav) + 40px) 16px 72px}
.sombre{background:var(--p9);color:var(--bc)}
.petrole{background:var(--p);color:var(--bc)}
.clair{background:var(--bc)}
.cadre{max-width:1180px;margin:0 auto;position:relative}
.titre{font-family:var(--fd);font-weight:800;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1.titre{font-size:clamp(38px,9.6vw,60px)}
h2.titre{font-size:clamp(28px,7.4vw,46px);color:var(--p)}
.sombre h2.titre,.petrole h2.titre{color:var(--bc)}
.chapo{font-size:18px;line-height:1.55;max-width:34ch;text-wrap:pretty;margin-top:16px}
.indice{font-size:15px;opacity:.85;margin-top:16px;text-align:center}
.pose{width:84px;height:auto;margin-bottom:14px}
.pose-titre{display:flex;align-items:flex-end;gap:12px}
.pose-titre .pose{margin:0;width:72px}

/* Navigation : pilule flottante + barre de progression */
.nav{position:fixed;z-index:50;top:10px;left:8px;right:8px;max-width:860px;margin:0 auto}
.pilule{display:flex;align-items:center;gap:6px;background:var(--p);border-radius:999px;padding:6px;box-shadow:0 8px 28px rgb(0 0 0/.22)}
.pilule-logo{flex:none;width:40px;height:40px;border-radius:50%;background:var(--bc);display:grid;place-items:center}
.pilule-logo img{width:26px;height:26px}
.puces{position:relative;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:2px 18px;scroll-padding-inline:18px;min-width:0;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.puces::-webkit-scrollbar{display:none}
.puces a{flex:none;scroll-snap-align:center;text-decoration:none;color:var(--bc);font:600 14px/1 var(--fb);padding:12px 14px;border-radius:999px;white-space:nowrap;transition:background .25s,color .25s}
.puces a:hover{background:rgb(255 255 255/.1);color:var(--bc)}
.puces a[aria-current="true"]{background:var(--e);color:#fff}
.progression{height:3px;margin:6px 22px 0;border-radius:3px;background:rgb(40 102 110/.25);overflow:hidden}
.progression span{display:block;height:100%;background:var(--e);transform-origin:0 50%;transform:scaleX(0)}

/* Apparitions douces (seulement si animations autorisées) */
.anim .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--dl,0s)}
.anim .rv.vu{opacity:1;transform:none}

/* Orbites */
.orb{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orb-trace{fill:none;stroke:var(--c);stroke-width:1.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px var(--c));stroke-dasharray:1;stroke-dashoffset:0}
.orb-fond{stroke:none;fill:var(--c);opacity:.06}
.orb-comete{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:5 95;opacity:0}
.orb-planete{fill:var(--c);filter:drop-shadow(0 0 6px var(--c))}
.anim .orb-trace{stroke-dashoffset:1;transition:stroke-dashoffset 2s cubic-bezier(.6,.1,.3,1);transition-delay:var(--dl,0s)}
.anim .vu .orb-trace{stroke-dashoffset:0}
.anim .vu .orb-comete{opacity:.9;transition:opacity 1s 2s;animation:comete var(--d,60s) linear infinite}
@keyframes comete{to{stroke-dashoffset:-100}}
.rm .orb-planete{display:none}

/* 1 — Bienvenue */
#bienvenue{min-height:100svh;display:flex;align-items:center;padding-bottom:40px}
.accueil{display:grid;gap:18px;justify-items:center;text-align:center;width:100%}
.systeme{position:relative;width:min(84vw,380px);aspect-ratio:1}
.systeme .mascotte{position:absolute;left:50%;top:50%;width:30%;transform:translate(-50%,-50%)}
.anim .systeme .mascotte{animation:flotte 6s ease-in-out infinite}
@keyframes flotte{50%{transform:translate(-50%,-56%)}}
.pastille{position:absolute;transform:translate(-50%,-50%);font:700 13px/1 var(--fb);padding:9px 13px;border-radius:999px;background:var(--p10);border:1.5px solid var(--c);color:var(--bc);white-space:nowrap;box-shadow:0 0 14px color-mix(in oklab,var(--c) 45%,transparent);display:flex;gap:7px;align-items:center}
.pastille i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.anim .pastille.rv{transform:translate(-50%,-30%)}.anim .pastille.rv.vu{transform:translate(-50%,-50%)}
.accueil .chapo{margin-left:auto;margin-right:auto}
.fleche{margin-top:6px;width:48px;height:48px;border-radius:50%;border:1.5px solid rgb(248 252 249/.4);display:grid;place-items:center;color:var(--bc)}
.anim .fleche svg{animation:descend 2.2s ease-in-out infinite}
@keyframes descend{50%{transform:translateY(5px)}}
@media (min-width:900px){.accueil{grid-template-columns:minmax(0,1fr) minmax(0,460px);text-align:left;justify-items:start;gap:56px}.accueil .chapo{margin-left:0}.accueil .systeme{grid-column:2;grid-row:1/4;width:100%;max-width:460px}.accueil .texte{grid-column:1;grid-row:1}}

/* 2 — Ton premier mois */
.mois{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
.anneau{position:relative;width:min(72vw,300px);aspect-ratio:1;margin:34px auto 0;justify-self:center}
.anneau svg{width:100%;height:100%;overflow:visible}
.anneau-centre{position:absolute;inset:22%;display:grid;place-content:center;text-align:center;gap:2px}
.anneau-num{font:800 52px/1 var(--fd);color:var(--p)}
.anneau-sur{font-size:13px;color:var(--p);font-weight:600}
.anneau-moment{font:700 14px/1.3 var(--fd);color:var(--p);margin-top:6px;text-wrap:balance}
.piste{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:4px 16px 8px;scroll-padding-inline:16px}
.piste::-webkit-scrollbar{display:none}
.carte{color:var(--ink);flex:0 0 82%;scroll-snap-align:start;border-radius:28px;padding:24px;background:#fff;border:1.5px solid var(--p1);display:flex;flex-direction:column;gap:10px;min-height:260px}
.carte-tete{display:flex;justify-content:space-between;align-items:center}
.carte-ic{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--s);color:var(--p)}
.carte-num{font:800 15px/1 var(--fd);color:var(--e)}
.carte h3,.carte h4{font:800 21px/1.2 var(--fd);color:var(--p);margin-top:6px;text-wrap:balance}
.carte p{font-size:16.5px;line-height:1.55;text-wrap:pretty}
.carte strong{color:var(--p)}
.commandes{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.points{display:flex;gap:4px}
.points button{width:28px;height:44px;border:0;background:none;display:grid;place-items:center}
.points button::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--p);opacity:.25;transition:all .3s}
.points button[aria-current="true"]::after{opacity:1;background:var(--e);width:22px;border-radius:5px}
.sombre .points button::after,.petrole .points button::after{background:var(--bc)}
.sombre .points button[aria-current="true"]::after,.petrole .points button[aria-current="true"]::after{background:var(--e)}
.fleches{display:flex;gap:8px}
.fleches button{width:48px;height:48px;border-radius:50%;border:1.5px solid currentColor;background:none;display:grid;place-items:center;color:var(--p)}
.fleches button:disabled{opacity:.3;cursor:default}
.petrole .fleches button{color:var(--bc)}
.boucle{margin-top:24px;font:800 clamp(21px,5.4vw,28px)/1.25 var(--fd);color:var(--p);text-wrap:balance;max-width:28ch;transition:opacity .6s,transform .6s}
.boucle[data-cache="true"]{opacity:0;transform:translateY(10px)}
@media (min-width:900px){.mois{grid-template-columns:340px minmax(0,1fr);align-items:center;gap:56px}.anneau{width:340px}.carte{flex-basis:340px}.piste{margin:0;padding:4px 0 8px;scroll-padding-inline:0}}

/* 1b — Où trouver quoi */
.nav-texte{max-width:60ch;text-wrap:pretty}
.ic-ligne{display:inline-flex;vertical-align:-3px;color:var(--e)}
.nav-tels{display:flex;gap:20px;margin:32px -20px 0;padding:8px 20px 20px;overflow-x:auto;scroll-snap-type:x mandatory;--w:210px}
.nav-fig{margin:0;flex:none;scroll-snap-align:center;display:grid;gap:14px;justify-items:center}
.nav-fig img{display:block;width:100%;height:auto}
.nav-exemple{display:block;margin-top:4px;font:500 13px/1.3 var(--fb);color:var(--ink);opacity:.75}
.etape-notes{list-style:none;display:grid;gap:12px}.etape-notes .par-note{margin-top:0}
.nav-fig figcaption{font:700 15px/1.3 var(--fb);color:var(--p);text-align:center;max-width:var(--w);text-wrap:balance}
.nav-vide{aspect-ratio:9/19;display:grid;place-items:center;background:var(--p1);color:var(--p);font:600 14px/1.3 var(--fb);text-align:center;padding:16px}
@media (min-width:900px){.nav-tels{justify-content:center;overflow:visible;margin:40px 0 0;padding:0;gap:40px;--w:240px}}

/* 2 — Ton parcours */
.par-chapo{max-width:52ch}
.par-intro{margin-top:14px;max-width:62ch;text-wrap:pretty}
.parcours{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:36px}
.par-tel{display:none}
.par-carte{position:relative;aspect-ratio:1080/1891;overflow:hidden;background:#DCEFE8}
.par-carte img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s ease,transform .9s cubic-bezier(.3,.7,.3,1)}
.par-carte img[data-etat="avant"]{opacity:0;transform:translateY(-12%)}
.par-carte img[data-etat="apres"]{opacity:0;transform:translateY(12%)}
.par-ici{position:absolute;left:50%;top:52.8%;width:24%;aspect-ratio:1;border-radius:50%;border:3px solid var(--or);transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgb(255 88 10/.2);transition:left .7s cubic-bezier(.3,.7,.3,1),top .7s cubic-bezier(.3,.7,.3,1);pointer-events:none}
.anim .par-ici{animation:ici 2s ease-in-out infinite}
@keyframes ici{50%{box-shadow:0 0 0 12px rgb(255 88 10/.08)}}
.rm .par-carte img,.rm .par-ici{transition:none}
.paliers{list-style:none;display:grid;gap:48px}
.par-banniere{width:100%;aspect-ratio:1;object-fit:cover;border-radius:28px;margin-bottom:20px}
.par-sur{font:700 13px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--e)}
.par-titre{display:flex;gap:12px;align-items:center;font:800 clamp(23px,5.8vw,30px)/1.15 var(--fd);color:var(--p);margin-top:10px;text-wrap:balance}
.par-ic{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--s);color:var(--p);flex:none}
.par-etapes{list-style:none;display:grid;gap:12px;margin-top:18px}
.etape{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;background:#fff;border:1.5px solid var(--p1);border-radius:24px;padding:18px;transition:border-color .3s,box-shadow .3s}
.etape[aria-current="step"]{border-color:var(--e);box-shadow:0 0 0 4px rgb(7 156 121/.1)}
.etape-rond{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--bc);border:2px solid var(--e);color:var(--p)}
.etape-num{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:var(--p);color:var(--bc);font:800 12px/24px var(--fd);text-align:center}
.etape h4{font:800 19px/1.2 var(--fd);color:var(--p);text-wrap:balance}
.etape-quoi{font-weight:600;color:var(--p);margin-top:3px;text-wrap:pretty}
.etape-temps{display:inline-flex;gap:7px;align-items:center;margin-top:10px;font:700 14px/1.3 var(--fb);color:var(--p);background:var(--p1);padding:7px 12px;border-radius:14px}
.etape-texte{margin-top:10px;font-size:16px;line-height:1.5;text-wrap:pretty}
.par-note{margin-top:14px;padding:16px 18px;border-radius:20px;background:var(--s);color:var(--p);font-size:16px;line-height:1.5;text-wrap:pretty}
.arrivee{background:var(--p);color:var(--bc);border-radius:28px;padding:24px;transition:box-shadow .3s}
.arrivee .par-sur{color:var(--s)}.arrivee .par-titre{color:var(--bc)}
.arrivee[aria-current="step"]{box-shadow:0 0 0 4px rgb(7 156 121/.25)}
.outils{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.outils li{display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:999px;background:var(--bc);color:var(--p);font:700 15px/1 var(--fb)}
.regles{margin-top:64px}
.regles-titre{font:800 clamp(24px,6vw,34px)/1.15 var(--fd);color:var(--p);text-wrap:balance}
.regles-grille{list-style:none;display:grid;gap:12px;margin-top:22px}
.regle{background:#fff;border:1.5px solid var(--p1);border-top:6px solid var(--e);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:10px}
.regle:nth-child(2){border-top-color:var(--s)}.regle:nth-child(3){border-top-color:var(--o)}
.regle-ic{width:48px;height:48px;border-radius:16px;background:var(--p1);color:var(--p);display:grid;place-items:center}
.regle h4{font:800 20px/1.2 var(--fd);color:var(--p);text-wrap:balance}
.regle p{font-size:16px;line-height:1.55;text-wrap:pretty}
@media (min-width:900px){.parcours{grid-template-columns:320px minmax(0,1fr);gap:72px;align-items:start}.par-tel{display:block;position:sticky;top:calc(var(--nav) + 28px);--w:300px}.par-banniere{display:none}.paliers{gap:56px}.regles-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 3 — Ta boussole */
.passage{font:800 clamp(20px,5.2vw,26px)/1.3 var(--fd);color:var(--s);margin-top:18px;text-wrap:balance}
.passage-sous{margin-top:10px;font-size:17px;text-wrap:pretty;max-width:52ch;margin-left:auto;margin-right:auto}
.passage-sous strong{color:var(--s)}
.cycle{margin-top:80px;padding-top:56px;border-top:1px solid rgb(248 252 249/.15)}
.cycle-titre{font:800 clamp(24px,6vw,34px)/1.15 var(--fd);color:var(--bc);text-wrap:balance}
.anneau svg{color:var(--p)}.anneau-piste{stroke:#DCEBEC}
.sombre .anneau svg{color:var(--bc)}.sombre .anneau-piste{stroke:rgb(248 252 249/.16)}
.sombre .anneau-num,.sombre .anneau-sur,.sombre .anneau-moment,.sombre .boucle{color:var(--bc)}
.sombre .fleches button{color:var(--bc)}
#boussole .entete{text-align:center;max-width:780px;margin:0 auto}
#boussole .pose{margin:0 auto 14px}
.roue{position:relative;width:100%;max-width:560px;margin:28px auto 0;aspect-ratio:1000/1340;container-type:inline-size;--b:clamp(44px,11.4cqw,64px)}
.bulle{position:absolute;left:var(--x);top:var(--y);width:24cqw;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:0;transform:translate(-50%,calc(var(--b)/-2));color:var(--bc);border-radius:16px}
.bulle.haut{flex-direction:column-reverse;transform:translate(-50%,calc(-100% + var(--b)/2))}
.bulle-rond{width:var(--b);height:var(--b);border-radius:50%;display:grid;place-items:center;background:var(--p10);border:2px solid var(--c);color:var(--c);box-shadow:0 0 0 4px color-mix(in oklab,var(--c) 14%,transparent),0 0 20px color-mix(in oklab,var(--c) 40%,transparent);transition:transform .25s,box-shadow .25s}
.bulle-rond .ic{width:46%;height:46%}
.bulle-nom{font:600 clamp(11.5px,3.3cqw,15px)/1.2 var(--fb);text-align:center;text-wrap:balance}
.bulle:hover .bulle-rond,.bulle[aria-expanded="true"] .bulle-rond{transform:scale(1.1);box-shadow:0 0 0 6px color-mix(in oklab,var(--c) 22%,transparent),0 0 28px color-mix(in oklab,var(--c) 60%,transparent)}
.legende{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px;list-style:none}
.legende li{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--fb);padding:10px 14px;border-radius:999px;border:1.5px solid var(--c)}
.legende i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.feuille{position:fixed;inset:0;z-index:80;overflow:hidden}
.feuille[hidden]{display:none}
.feuille-fond{position:absolute;inset:0;background:rgb(10 30 32/.55);opacity:0;transition:opacity .3s}
.feuille-panneau{position:absolute;left:0;right:0;bottom:0;background:var(--bc);color:var(--ink);border-radius:28px 28px 0 0;padding:14px 22px 30px;transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);max-height:85svh;overflow:auto}
.feuille.ouverte .feuille-fond{opacity:1}.feuille.ouverte .feuille-panneau{transform:none}
.feuille-poignee{width:44px;height:5px;border-radius:3px;background:var(--p1);margin:0 auto 14px}
.f-tete{display:flex;gap:14px;align-items:center;padding-right:48px}
.f-rond{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--c);color:var(--p);flex:none;background:#fff}
.f-groupe{font:700 12px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--p);display:flex;gap:6px;align-items:center}
.f-groupe i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.f-titre{font:800 24px/1.15 var(--fd);color:var(--p);margin-top:6px}
.f-fermer{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--p1);background:#fff;display:grid;place-items:center;color:var(--p)}
.f-lignes{margin-top:22px;display:grid;gap:12px}
.f-lignes div{background:#fff;border:1.5px solid var(--p1);border-radius:20px;padding:16px 18px}
.f-lignes dt{display:flex;gap:8px;align-items:center;font:700 14px/1 var(--fb);color:var(--e)}
.f-lignes dd{margin-top:8px;font-size:17px;line-height:1.5;text-wrap:pretty}
@media (min-width:900px){.feuille-panneau{left:auto;top:16px;bottom:16px;right:16px;width:400px;border-radius:28px;padding:28px;transform:translateX(110%);max-height:none}.feuille-poignee{display:none}.feuille-fond{background:rgb(10 30 32/.3)}}
.rm .feuille-panneau,.rm .feuille-fond{transition:none}

/* 4 — La méthode */
.gestes{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.geste{width:100%;height:100%;border:0;background:none;padding:0;perspective:1000px;text-align:left;border-radius:22px}
.geste-in{display:grid;height:100%;min-height:190px;transition:transform .6s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.face{grid-area:1/1;border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.recto{background:#fff;border:1.5px solid var(--p1);color:var(--p)}
.recto .carte-ic{width:42px;height:42px;border-radius:14px}
.recto b{font:800 15.5px/1.28 var(--fd);text-wrap:balance}
.dos{background:var(--p);color:var(--bc);transform:rotateY(180deg);justify-content:center;font-size:16px;line-height:1.45}
.dos b{font:800 13px/1 var(--fd);color:var(--s)}
.geste[aria-pressed="true"] .geste-in{transform:rotateY(180deg)}
.recto{transition:visibility 0s .3s}.dos{visibility:hidden;transition:visibility 0s .3s}
.geste[aria-pressed="true"] .recto{visibility:hidden}.geste[aria-pressed="true"] .dos{visibility:visible}
.face-num{display:flex;justify-content:space-between;align-items:center;font:800 14px/1 var(--fd);color:var(--e)}
@media (prefers-reduced-motion:reduce){.geste-in{transform:none!important;transition:none}.dos{transform:none;opacity:0}.geste[aria-pressed="true"] .dos{opacity:1}.geste[aria-pressed="true"] .recto{opacity:0}}
@media (min-width:900px){.gestes{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.face{padding:20px}.recto b{font-size:17px}}
.consigne{display:flex;gap:8px;align-items:center;margin-top:18px;color:var(--p);font-weight:600;transition:opacity .4s}
.consigne[data-cache="true"]{opacity:0}

/* Cadre téléphone (équivalent de PhoneFrame : coque encre, poinçon, écran intérieur) */
.tel{width:var(--w);background:var(--ink);border-radius:calc(var(--w)*.16);padding:calc(var(--w)*.03);box-shadow:0 24px 48px rgb(30 46 44/.22)}
.tel-ecran{border-radius:calc(var(--w)*.13);overflow:hidden;background:var(--bc)}
.tel-barre{height:calc(var(--w)*.075);display:grid;place-items:center}
.tel-barre::after{content:"";width:calc(var(--w)*.04);height:calc(var(--w)*.04);border-radius:50%;background:var(--ink)}

/* 5 — L'aide */
.aide-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch;margin:30px auto 0;max-width:820px;--w:168px}
.aide-col{display:flex;flex-direction:column;justify-content:space-around;gap:10px;position:relative;z-index:2}
.aide-scene .tel{position:relative;z-index:1}
.repere{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:4px 0;color:var(--p);border-radius:16px}
.repere-rond{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--e);box-shadow:0 0 0 4px rgb(7 156 121/.12);transition:transform .3s,background .3s,color .3s;font:800 22px/1 var(--fd)}
.repere-nom{font:700 12.5px/1.2 var(--fb);text-align:center;text-wrap:balance;max-width:92px;display:flex;flex-direction:column;gap:3px}
.repere-ou{font:500 11.5px/1.25 var(--fb);color:var(--ink)}
.repere-nom .long{display:none}
.repere[aria-pressed="true"] .repere-rond{transform:scale(1.18);background:var(--or);border-color:var(--or);color:#fff;box-shadow:0 0 0 6px rgb(255 88 10/.16)}
.aide-info{max-width:560px;margin:26px auto 0;background:#fff;border:1.5px solid var(--p1);border-radius:24px;padding:20px 22px;min-height:118px}
.aide-info b{display:block;font:800 19px/1.25 var(--fd);color:var(--p)}
.aide-info p{margin-top:6px;text-wrap:pretty}
.aide-info.vide{display:grid;place-items:center;color:var(--p);font-weight:600;text-align:center}
@media (min-width:900px){.aide-scene{--w:260px;gap:28px}.repere{flex-direction:row;gap:14px;text-align:left}.aide-col:first-child .repere{flex-direction:row-reverse}.aide-col:first-child .repere-nom{text-align:right}.repere-nom{font-size:15px;max-width:180px}.repere-nom .long{display:inline}.repere-ou{font-size:13.5px}.repere-nom .court{display:none}.repere-rond{width:60px;height:60px}}

/* 6 — À deux */
.duo-scene{position:relative;width:100%;max-width:520px;aspect-ratio:16/11;margin:26px auto 0}
.duo-orbite{transition:transform .8s cubic-bezier(.3,.7,.3,1);transform-box:fill-box;transform-origin:center}
[data-mode="solo"] .duo-orbite{transform:scale(.42,.62)}
.avatar{position:absolute;top:46%;left:var(--ax);width:var(--as);aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--sc,1));opacity:var(--op,1);transition:all .8s cubic-bezier(.3,.7,.3,1);display:flex;flex-direction:column;align-items:center}
.avatar-rond{width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:var(--p);box-shadow:0 0 0 5px rgb(248 252 249/.12),0 0 26px rgb(255 153 187/.25)}
.avatar-rond .ic{width:46%;height:46%}
.avatar-nom{font:600 13px/1.2 var(--fb);margin-top:8px;white-space:nowrap}
.avatar-rond img{width:100%;height:100%;border-radius:50%}
.av-a{--ax:50%;--as:30%}.av-a .avatar-rond{background:var(--r)}
.av-b{--ax:50%;--as:22%;--sc:.2;--op:0}.av-b .avatar-rond{background:var(--s)}
[data-mode="seul"] .av-a{--ax:33%;--as:24%}[data-mode="seul"] .av-b{--ax:69%;--as:17%;--sc:1;--op:1}
[data-mode="ensemble"] .av-a{--ax:31%;--as:21%}[data-mode="ensemble"] .av-b{--ax:69%;--as:21%;--sc:1;--op:1}
.duo-gestes{position:absolute;left:69%;top:84%;transform:translateX(-50%);display:flex;flex-direction:column;gap:5px;align-items:center;opacity:0;transition:opacity .5s}
[data-mode="seul"] .duo-gestes{opacity:1;transition-delay:.5s}
.duo-gestes span{font:700 12px/1 var(--fb);padding:7px 10px;border-radius:999px;background:var(--bc);color:var(--p);white-space:nowrap}
.duo-budget{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:all .6s;font:800 13px/1.15 var(--fd);text-align:center;padding:10px 12px;border-radius:999px;background:var(--e);color:#fff}
[data-mode="ensemble"] .duo-budget{opacity:1;transform:translate(-50%,-50%);transition-delay:.4s}
.selecteur{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:var(--p7);border-radius:22px;padding:5px;max-width:560px;margin:30px auto 0}
.selecteur-pouce{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);border-radius:18px;background:var(--e);transition:transform .4s cubic-bezier(.3,.7,.3,1);transform:translateX(calc(var(--i,0)*100%))}
.selecteur button{position:relative;z-index:1;border:0;background:none;color:var(--bc);font:700 14px/1.25 var(--fb);padding:12px 8px;min-height:56px;border-radius:18px;text-wrap:balance}
.duo-phrase{text-align:center;font:800 clamp(19px,5vw,24px)/1.3 var(--fd);max-width:30ch;margin:20px auto 0;min-height:3.9em;text-wrap:balance}
.etapes-duo{margin-top:36px}
.etapes-duo .carte{background:var(--bc);border:0;color:var(--ink)}
.etapes-duo .carte h3{font-size:20px}
@media (min-width:900px){.etapes-duo .piste{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}.etapes-duo .commandes{display:none}.duo-gestes{top:80%}}

/* 7 — Tes données */
.donnees{list-style:none;display:grid;gap:28px;margin-top:32px}
.donnees li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center}
.donnee-ic{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;position:relative}
.donnee-ic .ic{width:42px;height:42px}
.donnees li p{font-size:18px;line-height:1.45;text-wrap:pretty}
.donnees li strong{display:block;font:800 21px/1.2 var(--fd);color:var(--p);margin-bottom:4px}
.etoiles{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}
.anim .vu .etoiles{animation:tourne 40s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.anim .vu .anse{animation:anse 4s ease-in-out infinite}
@keyframes anse{0%,60%,100%{transform:none}70%{transform:translateY(-3px)}80%{transform:none}}
.anim .vu .main{animation:salut 3.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes salut{0%,55%,100%{transform:none}65%{transform:rotate(-14deg)}75%{transform:rotate(10deg)}85%{transform:rotate(-6deg)}}
.donnees-note{margin-top:30px;font-size:15.5px;color:var(--p);max-width:52ch}
@media (min-width:900px){.donnees{grid-template-columns:repeat(3,1fr);gap:32px}.donnees li{grid-template-columns:1fr;justify-items:start}.donnee-ic{width:120px;height:120px}.donnee-ic .ic{width:52px;height:52px}}

/* 8 — Clôture */
#cloture{text-align:center;overflow:hidden;padding-top:96px;padding-bottom:96px}
#cloture .orb{inset:auto;left:50%;top:50%;width:min(1100px,190vw);height:auto;aspect-ratio:2;transform:translate(-50%,-50%)}
#cloture .cadre{display:grid;justify-items:center;gap:18px}
#cloture .mascotte{width:120px}
.anim #cloture .vu.mascotte,.anim #cloture .mascotte.vu{animation:signe 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes signe{0%,60%,100%{transform:none}70%{transform:rotate(-5deg)}80%{transform:rotate(4deg)}}
#cloture h2{max-width:16ch;color:var(--bc)}
.question{font-size:18px}
.question a{color:var(--s);font-weight:700}.question a:hover{color:#fff}
.signature{font:700 17px/1 var(--fb);display:flex;gap:8px;align-items:center;color:var(--s)}

/* Pied de page réduit */
.pied{background:var(--p10);color:var(--bc);padding:28px 16px 36px}
.pied .cadre{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;align-items:center}
.pied ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px}
.pied a{color:var(--bc);font-size:15px;text-decoration:none;padding:10px 0;display:inline-block}
.pied a:hover{color:var(--s);text-decoration:underline}
.pied small{font-size:13.5px;opacity:.8}

@media (min-width:900px){section{padding:calc(var(--nav) + 64px) 40px 120px}.chapo{font-size:20px}}