/* ═══════════════════════════════════════════════════════════════════════
   KONSENT STUDIO · site/css/site.css — le manuel vivant (12/11/2026)
   Choix de Damien (12/11) : UNE scène sombre et profonde pour toute la
   page — le modèle fixe derrière, les parties qui défilent par-dessus —,
   en noir et gris charbon (pas de vert dans le fond). Les pièces sont
   celles de konsent.fr : Poppins 500 serré, la pastille d'en-tête en
   verre, les boutons en pilule, le vert #25E389 réservé à l'action.
   Le site est un PARCOURS : les vues, puis le cours pièce par pièce, puis
   « chez vous » (la réalité augmentée, installer le studio).
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Poppins';font-weight:300;font-display:swap;src:url('../fonts/poppins-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:700;font-display:swap;src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2')}

:root{
  --fond:#000000; --carte:#141416; --ink:#FFFFFF; --dim:rgba(255,255,255,.72); --pale:rgba(255,255,255,.5);
  --trait:rgba(255,255,255,.14); --traitDoux:rgba(255,255,255,.08);
  --cta:#25E389; --cta-h:#3BF09A; --cta-ink:#04201C;
  --font:Poppins,"Segoe UI",system-ui,-apple-system,sans-serif;
  --max:1240px; --ease:cubic-bezier(.2,.7,.2,1);
  /* les jetons que lit la roue (banc/manuel/roue-interactive.css) */
  --surface:rgba(22,23,26,.82); --surface2:rgba(8,8,9,.9); --text:#FFFFFF; --mut:rgba(255,255,255,.7); --faint:rgba(255,255,255,.46);
  --line:rgba(255,255,255,.14); --lineSoft:rgba(255,255,255,.08);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--fond);overflow-x:clip}
body{margin:0;background:var(--fond);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:10px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media(min-width:900px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:500;letter-spacing:-.03em}
.h1{font-size:clamp(44px,6.6vw,92px);line-height:1.02}
.h2{font-size:clamp(34px,4.4vw,60px);line-height:1.05}
.accent{color:#25E389}
.lead{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:rgba(255,255,255,.86);font-weight:400}

/* ── la scène : le modèle, fixe derrière la page ── */
#scene{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;z-index:0;touch-action:pan-y;cursor:grab;outline:none}
#scene:active{cursor:grabbing}
.voile{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.5) 32%,rgba(0,0,0,0) 60%),
             linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,.5) 100%)}
/* le calque des jeux : repères, tracés, cibles, par-dessus la scène */
#jeu{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:2;pointer-events:none;overflow:visible}
main,.nav{position:relative;z-index:3}
main{pointer-events:none}
main .hv-copy>*,main .colonne>*{pointer-events:auto}

/* les boutons : la pilule */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;font-weight:500;font-size:16px;border:0;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cta);color:var(--cta-ink)}.btn-primary:hover{background:var(--cta-h)}
.btn-outline{background:rgba(0,0,0,.25);color:#fff;border:1.5px solid rgba(255,255,255,.6)}.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-sm{height:42px;padding:0 18px;font-size:14px}
.btn svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}.btn:hover svg{transform:translateX(3px)}
.lien{background:none;border:0;padding:0;color:var(--pale);font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.lien:hover{color:#fff}

/* la barre : posée sur la scène */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,0))}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.logo{display:inline-flex;align-items:center;height:30px}.logo img{height:30px;width:auto}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--dim);font-size:15px;white-space:nowrap;transition:color .2s}.nav-links a:hover,.nav-links a.ici{color:#fff}
.nav-sec{display:flex;gap:12px;align-items:center}

/* le fil du parcours : où l'on en est, à droite */
.parcours{position:fixed;right:max(18px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;align-items:flex-end;list-style:none;margin:0;padding:0}
.parcours a{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--pale);pointer-events:none}
/* seuls le point et le libellé montré se prennent : le reste de la ligne laisse passer la main vers le modèle */
.parcours i,.parcours a.ici span{pointer-events:auto}
.parcours i{position:relative}.parcours i::after{content:"";position:absolute;inset:-9px;border-radius:50%}
.parcours span{opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s var(--ease);padding:3px 10px;border-radius:999px;background:rgba(20,22,24,.7);border:1px solid var(--traitDoux);white-space:nowrap}
.parcours i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.parcours a:hover span,.parcours a.ici span{opacity:1;transform:none}
.parcours a.ici{color:#fff}.parcours a.ici i{background:#25E389;transform:scale(1.35);box-shadow:0 0 0 4px rgba(37,227,137,.22)}
.parcours a.fait i{background:rgba(37,227,137,.55)}

/* ── l'accueil ── */
.heros{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 90px}
.hv-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hv-copy .h1{max-width:12ch}
.h1 .line{display:block;overflow:hidden}.h1 .line>span{display:inline-block;animation:rise 1s var(--ease) both}.h1 .line:nth-child(2)>span{animation-delay:.12s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hv-copy .lead{max-width:520px}
.hv-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:#fff}
.hv-pill i{width:8px;height:8px;border-radius:50%;background:#25E389;box-shadow:0 0 0 4px rgba(37,227,137,.25)}
.hv-ctas{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.hv-ctas .lien{font-size:14.5px}
/* l'invitation : le bouton qui lance l'exercice respire (un halo lent), comme la touche à prendre sur la roue */
.btn.appel{animation:appel-btn 2.4s var(--ease) infinite}
.btn.appel:hover{animation:none}
@keyframes appel-btn{0%{box-shadow:0 0 0 0 rgba(37,227,137,.5)}70%,100%{box-shadow:0 0 0 16px rgba(37,227,137,0)}}
/* l'exercice d'un coup d'œil : les étapes, reliées d'un trait */
.hv-etapes{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:6px 0 0;padding:0;font-size:13.5px;color:rgba(255,255,255,.82)}
.hv-etapes li{display:inline-flex;align-items:center}
.hv-etapes li+li::before{content:"";width:18px;height:1px;margin:0 10px;background:rgba(255,255,255,.28)}
.hv-etapes a{display:inline-flex;align-items:center;gap:8px;transition:color .2s}.hv-etapes a:hover{color:#fff}
.hv-etapes b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(37,227,137,.7);color:#25E389;font-size:11.5px;font-weight:600}
.hv-etapes .puis{color:var(--pale)}
.hv-scroll{position:absolute;left:50%;bottom:22px;width:22px;height:36px;border:2px solid rgba(255,255,255,.6);border-radius:12px;transform:translateX(-50%)}
.hv-scroll span{position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(12px)}}

/* ── une partie : la colonne à gauche, sur la scène ── */
.partie{position:relative;min-height:100vh;display:flex;align-items:center;padding:92px 0 36px}
.colonne{max-width:520px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.colonne .h2{font-size:clamp(34px,3.8vw,54px)}
.colonne .lead{max-width:44ch}
.commande{display:flex;align-items:center;gap:14px;margin-top:4px}
.choix-matiere{display:flex;align-items:center;gap:16px;min-height:0}
/* qui joue la roue : la démonstration (neutre, elle se regarde) ou vous (vert, l'action) */
.bascule{display:inline-flex;padding:4px;border-radius:999px;background:rgba(14,15,17,.6);border:1px solid var(--line)}
.bascule button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--pale);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .25s,color .25s}
.bascule button:hover{color:#fff}
.bascule svg{width:15px;height:15px;fill:currentColor;stroke:none}
.bascule #mode-demo[aria-pressed="true"]{background:rgba(255,255,255,.92);color:#101214}
.bascule #mode-demo[aria-pressed="true"] svg{animation:lecture 1.4s ease-in-out infinite}
.bascule #mode-vous[aria-pressed="true"]{background:var(--cta);color:var(--cta-ink)}
@keyframes lecture{50%{opacity:.35}}
/* la roue dit elle aussi qui la tient : un bord en pointillé qui tourne pendant la démonstration, un bord vert quand c'est à vous */
.partie .roue-essai.demo .re-verre{stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-dasharray:3 10;animation:demo-bord 14s linear infinite}
.partie .roue-essai.vous .re-verre{stroke:rgba(37,227,137,.6);stroke-width:1.6}
@keyframes demo-bord{to{stroke-dashoffset:-260}}
/* les vues : la vue où l'on est en vert, les autres allumées en neutre (un choix, pas un appel), celle qu'on survole entre les deux */
/* la roue des matières (13/11) : sept étapes allumées ne font pas un noyau tout vert — le gris clair des vues, l'étape en cours en vert */
#roue-matieres .re-secteur.appel:not(.vise):not(.courant) path{fill:#4C4F55;animation:none}
#roue-matieres .re-secteur.appel .re-nom-secteur{fill:#fff}
#roue-matieres .re-secteur.courant path{fill:var(--re-vert);animation:none}
#roue-matieres .re-secteur.courant .re-nom-secteur{fill:#0B2A1C;font-weight:700}
#roue-matieres .re-secteur.vise:not(.courant) path{fill:color-mix(in srgb, var(--re-vert) 42%, #4C4F55)}
#roue-vues .re-secteur.appel:not(.vise):not(.courant) path{fill:#4C4F55;animation:none}
#roue-vues .re-secteur.appel .re-nom-secteur{fill:#fff}
#roue-vues .re-secteur.courant path{fill:var(--re-vert);animation:none}
#roue-vues .re-secteur.courant .re-nom-secteur{fill:#0B2A1C;font-weight:700}
#roue-vues .re-secteur.vise:not(.courant) path{fill:color-mix(in srgb, var(--re-vert) 42%, #4C4F55)}
#roue-vues .re-secteur.vise:not(.courant) .re-nom-secteur{fill:#fff;font-weight:600}
/* réussir se sent : la coche du temps saute, la roue s'éclaire un instant */
/* les pages du tour des matières (13/11) : au coin bas droit du carré de la roue */
.pages-tour{position:absolute;z-index:4;display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(14,15,17,.82);border:1px solid var(--line);font-size:12px;color:var(--pale);font-variant-numeric:tabular-nums}
.pages-tour[hidden]{display:none}
.pages-tour.vertical{flex-direction:column;padding:3px 2px}.pages-tour.vertical span{min-width:0;padding:2px 0;font-size:11px}
.pages-tour span{min-width:34px;text-align:center}
.pages-tour button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;padding:0}
.pages-tour button:hover{background:rgba(37,227,137,.22)}
.pages-tour svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(pointer:coarse){.pages-tour button{width:34px;height:34px}}
.temps li.ouvrable{cursor:pointer;border-color:rgba(37,227,137,.4)}.temps li.ouvrable:hover{color:#fff}
.temps li.gagne{animation:gagne-pilule .8s var(--ease)}
.temps li.gagne::before{animation:gagne-coche .6s var(--ease)}
@keyframes gagne-coche{0%{transform:scale(.4)}55%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes gagne-pilule{0%{box-shadow:0 0 0 0 rgba(37,227,137,.55)}100%{box-shadow:0 0 0 12px rgba(37,227,137,0)}}
.partie .roue-essai.gagne .re-svg{animation:gagne-roue .9s var(--ease)}
@keyframes gagne-roue{0%{filter:drop-shadow(0 0 0 rgba(37,227,137,0))}30%{filter:drop-shadow(0 0 20px rgba(37,227,137,.6))}100%{filter:drop-shadow(0 0 0 rgba(37,227,137,0))}}
/* la roue du manuel : en verre sur la scène, au vert de la marque */
.partie .roue-essai{--re-vert:#25E389;--roue:clamp(270px, calc(100vh - 480px), 440px);align-self:stretch;margin:0 0 0 -14px;padding:0;background:transparent;border:0;border-radius:0;max-width:var(--roue)}
.partie .roue-essai .re-tete{display:none}
.partie .roue-essai .re-svg{max-width:var(--roue)}
.partie .roue-essai .re-verre{fill:rgba(14,15,17,.55);stroke:var(--line)}
.partie .roue-essai .re-legende,.partie .roue-essai .re-fil{background:rgba(14,15,17,.78);border-color:var(--line)}

/* ── le cours : les temps de la pièce, la consigne ── */
.temps{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;counter-reset:t}
.temps li{counter-increment:t;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border-radius:999px;font-size:12.5px;color:var(--pale);border:1px solid var(--traitDoux);background:rgba(14,15,17,.5);transition:color .3s,border-color .3s,background .3s}
.temps li::before{content:counter(t);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1);font-size:11px;font-weight:600;color:var(--dim);transition:background .3s,color .3s}
.temps li.ici{color:#fff;border-color:rgba(37,227,137,.55);background:rgba(37,227,137,.1)}
.temps li.ici::before{background:#25E389;color:#04201C}
.temps li.fait{color:var(--dim)}
.temps li.fait::before{content:"";background:rgba(37,227,137,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325E389' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.consigne{margin:0;min-height:2.9em;font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:rgba(255,255,255,.9);max-width:34ch}
.consigne b{font-weight:600;color:#25E389}
.consigne.entre{animation:consigne .5s var(--ease) both}
@keyframes consigne{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.partie.cours .colonne .h2{font-size:clamp(30px,3vw,44px)}
.partie.cours .roue-essai{--roue:clamp(240px, calc(100vh - 392px), 480px)}
/* la roue en grand (Damien, 12/11 : « on ne voit pas assez les textes ») : elle prend la place du fil d'Ariane, ses noms sont plus gros */
.partie .roue-essai{--roue:clamp(240px, calc(100vh - 392px), 480px)}
/* un chapitre tient dans l'écran (Damien, 12/11) : la légende de la roue AU-DESSUS d'elle, sur une ligne ; en bas de la
   colonne, à gauche le chapitre d'avant, à droite la suite */
.partie .roue-essai .re-scene{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.partie .roue-essai .re-legende{order:-1;flex-wrap:nowrap;justify-content:flex-start;white-space:nowrap;overflow:hidden;max-width:100%;min-height:34px;margin-left:14px}
.partie .roue-essai .re-legende span{overflow:hidden;text-overflow:ellipsis}
.commande.pas{width:100%;gap:16px;margin-top:2px}
.voir-roue{display:none}
/* la barre des chapitres est épinglée au bas de l'écran : le chapitre d'avant sous la roue, la suite tout à droite de l'interface */
@media(min-width:901px){
  .partie{--bas:26px}
  .partie .colonne{padding-bottom:58px}
  .commande.pas{position:absolute;z-index:3;bottom:var(--bas);left:var(--gauche,64px);right:64px;width:auto;margin:0}
  .fin .colonne{padding-bottom:0}
  .fin .commande.pas{position:static;margin-top:10px}
  .partie:not(.fin){height:100vh;min-height:0;overflow:hidden}
}
@media(min-width:901px) and (min-height:781px){ .partie .roue-essai,.partie.cours .roue-essai{--roue:clamp(250px, calc(100vh - 478px), 480px)} }
.commande.pas .prec svg{transition:transform .25s var(--ease)}.commande.pas .prec:hover svg{transform:translateX(-3px)}
.commande.pas > .btn-primary,.commande.pas > #suite-vues{margin-left:auto;order:5}
.fin .commande.pas{margin-top:6px}
/* écran peu haut : la place va à la roue (titre plus petit, pastille d'étape retirée) */
@media (max-height:780px) and (min-width:901px){ .partie:not(.fin) .hv-pill{display:none} .partie .colonne .h2,.partie.cours .colonne .h2{font-size:30px} .partie{padding-top:76px;padding-bottom:20px} .consigne{font-size:17px;min-height:2.6em} }
.partie .roue-essai .re-fil{display:none}
.partie .roue-essai .re-nom-secteur{font-size:16.5px}
.partie .roue-essai .re-nom-outil{font-size:14.5px}
.partie .roue-essai .re-coeur-nom{font-size:14px}
.partie .roue-essai .re-tour-nom{font-size:14px}
.partie .colonne{gap:12px}
.partie{padding-top:84px}

/* ── le calque du jeu ── */
#jeu{font-family:var(--font)}
.jeu-pietement text{font-family:var(--font);font-weight:600;font-size:12px;fill:#04201C;pointer-events:none}
.jeu-repere circle,.jeu-repere text{transform-box:fill-box;transform-origin:center}
.jeu-point{fill:rgba(255,255,255,.85);transition:fill .25s}
.jeu-repere.suivant .jeu-point,.jeu-repere.fait .jeu-point{fill:#25E389}
.jeu-halo{fill:rgba(37,227,137,0);stroke:none}
.jeu-pastille{fill:rgba(16,18,20,.9);stroke:rgba(255,255,255,.75);stroke-width:1.5;transition:fill .25s,stroke .25s}
.jeu-repere text{fill:#fff;transition:fill .25s}
.jeu-repere.suivant .jeu-halo{fill:rgba(37,227,137,.28);animation:jeu-halo 1.4s var(--ease) infinite}
.jeu-repere.suivant .jeu-pastille{stroke:#25E389;stroke-width:2.2}
.jeu-repere.fait .jeu-pastille{fill:#25E389;stroke:#25E389}
.jeu-repere.fait text{fill:#04201C}
.jeu-repere.pose .jeu-pastille{animation:jeu-pose .4s var(--ease)}
.jeu-repere.refus .jeu-pastille{animation:jeu-refus .4s;stroke:#FF7A6B}
.jeu-repere.range{opacity:0;transition:opacity .45s .1s}
@keyframes jeu-halo{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}
@keyframes jeu-pose{0%{transform:scale(1.7)}100%{transform:scale(1)}}
@keyframes jeu-refus{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.jeu-trace{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.jeu-trace.neuf.va{stroke-dasharray:var(--l) var(--l);animation:jeu-trait .28s var(--ease) both}
@keyframes jeu-trait{from{stroke-dashoffset:var(--l)}to{stroke-dashoffset:0}}
.jeu-elastique{stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-dasharray:5 5}
.jeu-elastique.aimante{stroke:#25E389;stroke-dasharray:none;stroke-width:2.2}
.jeu-forme{fill:rgba(237,231,220,0);stroke:none;transition:fill .5s var(--ease)}
.jeu-forme.pleine{fill:rgba(237,231,220,.92)}
.jeu-cote rect,.jeu-etiquette rect{fill:rgba(16,18,20,.88);stroke:rgba(255,255,255,.3);stroke-width:1;transition:fill .2s,stroke .2s}
.jeu-cote text,.jeu-etiquette text{fill:#fff;font-size:13px}
.jeu-cote.juste rect{fill:#25E389;stroke:#25E389}.jeu-cote.juste text{fill:#04201C}
.jeu-etiquette rect{stroke:rgba(37,227,137,.6)}.jeu-etiquette text{fill:#25E389;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.jeu-cible{fill:rgba(37,227,137,.1);stroke:#25E389;stroke-width:2;stroke-dasharray:6 5;stroke-linejoin:round;animation:jeu-fourmis 1s linear infinite}
.jeu-cible.prise{fill:rgba(37,227,137,.05);stroke-width:3;stroke-dasharray:none;animation:none;filter:drop-shadow(0 0 6px rgba(37,227,137,.55))}
@keyframes jeu-fourmis{to{stroke-dashoffset:-11}}
.jeu-fleche{stroke:rgba(255,255,255,.6);stroke-width:1.6;stroke-dasharray:2 6;stroke-linecap:round}
.jeu-rayon{stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.jeu-rayon.cible{stroke:#25E389;stroke-dasharray:6 5;animation:jeu-fourmis 1s linear infinite}
.jeu-arc{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.4}
.jeu-pivot{fill:#fff}
.jeu-but circle{fill:rgba(37,227,137,.14);stroke:#25E389;stroke-width:2;stroke-dasharray:4 4;transform-box:fill-box;transform-origin:center;animation:jeu-but 1.6s var(--ease) infinite}
.jeu-but.prise circle{fill:#25E389;stroke-dasharray:none;animation:none}
@keyframes jeu-but{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.jeu-poignee circle{fill:#fff;stroke:#25E389;stroke-width:3;transform-box:fill-box;transform-origin:center;transition:transform .18s var(--ease)}
.jeu-poignee.tenue circle{transform:scale(1.35)}
.jeu-poignee.faite{display:none}
.jeu-etiquette rect{transform-box:fill-box;transform-origin:center}
.jeu-etiquette.refus rect{animation:jeu-refus .4s;stroke:#FF7A6B}
.jeu-etiquette{transition:opacity .3s}
/* la loupe : le bord en coupe, pendant qu'on dose l'arrondi */
.jeu-loupe .fond{fill:rgba(12,14,16,.9);stroke:rgba(255,255,255,.28);stroke-width:1.2}
.jeu-loupe .matiere{fill:rgba(237,231,220,.2);stroke:none}
.jeu-loupe .profil{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.jeu-loupe .vise{fill:none;stroke:#25E389;stroke-width:1.8;stroke-dasharray:5 5;stroke-linecap:round;animation:jeu-fourmis 1s linear infinite;transition:opacity .2s}
.jeu-loupe .valeur{fill:#fff;font-size:17px;font-weight:600;transition:fill .2s}
.jeu-loupe .mot{fill:rgba(255,255,255,.55);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.jeu-loupe.juste .profil{stroke:#25E389}.jeu-loupe.juste .valeur{fill:#25E389}.jeu-loupe.juste .vise{opacity:0}
.jeu-loupe.juste .fond{stroke:#25E389}
.jeu-loupe-fil{stroke:rgba(255,255,255,.5);stroke-width:1.2}
.jeu-loupe-point{fill:#fff}
.jeu-axe{stroke:#25E389;stroke-width:2;stroke-dasharray:8 6;animation:jeu-fourmis .6s linear infinite}
.jeu-pop{fill:none;stroke:#25E389;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:jeu-pop .65s var(--ease) both}
@keyframes jeu-pop{from{transform:scale(.4);opacity:1}to{transform:scale(4.5);opacity:0}}

/* ── la fin : chez vous (la réalité augmentée), installer le studio ── */
.fin .colonne{gap:16px;max-width:500px}
/* une étape verrouillée : hors de la page, ses liens éteints */
.partie[hidden],.heros[hidden],.pied[hidden]{display:none}
a.verrou{opacity:.34;pointer-events:none;cursor:default}
.parcours a.verrou i{background:rgba(255,255,255,.3)}
.ar-rappel{margin:0;font-size:14.5px;color:rgba(255,255,255,.86)}
.ar-etat{margin:0;font-size:13.5px;color:var(--dim)}
.btn:disabled{opacity:.6;cursor:progress}
.ar-bloc{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:18px;background:rgba(20,22,24,.62);border:1px solid var(--trait);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);align-self:stretch}
.ar-bloc p{margin:0;font-size:14px;color:var(--dim);line-height:1.5}
.ar-bloc p b{color:#fff;font-weight:600}
.ar-pic{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(37,227,137,.14);display:grid;place-items:center}
.ar-pic svg{width:24px;height:24px;fill:none;stroke:#25E389;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ar-qr{flex:none;width:132px;height:132px;border-radius:12px;background:#fff;padding:6px;image-rendering:pixelated}
.installer{align-self:stretch;margin-top:10px;padding-top:22px;border-top:1px solid var(--trait);display:grid;gap:10px}
.installer h3{font-size:22px}
.installer p{margin:0;color:var(--dim);font-size:15px;max-width:42ch}
.installer .hv-ctas{margin-top:6px}
.installer small{color:var(--pale);font-size:12.5px}
/* le fauteuil vu dans un téléphone : le cadre se pose sur le modèle de la scène */
.fin .wrap{position:relative;z-index:2}
.telephone{position:fixed;left:calc(50% + 23vw);top:50%;height:min(76vh,700px);aspect-ratio:9/18.6;transform:translate(-50%,-50%) scale(.94);border:3px solid rgba(255,255,255,.92);border-radius:46px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 100vmax rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.fin.vue .telephone{opacity:1;transform:translate(-50%,-50%)}
.telephone::before{content:"";position:absolute;left:50%;top:12px;width:88px;height:24px;margin-left:-44px;border-radius:14px;background:#000}
.telephone b{position:absolute;width:22px;height:22px;border:2.5px solid #25E389}
.telephone b:nth-of-type(1){left:13%;top:26%;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.telephone b:nth-of-type(2){right:13%;top:26%;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.telephone b:nth-of-type(3){left:13%;bottom:22%;border-right:0;border-top:0;border-radius:0 0 0 6px}
.telephone b:nth-of-type(4){right:13%;bottom:22%;border-left:0;border-top:0;border-radius:0 0 6px 0}
.telephone span{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);white-space:nowrap;padding:7px 14px;border-radius:999px;background:rgba(20,22,24,.8);border:1px solid var(--trait);font-size:12px;color:#fff;display:flex;align-items:center;gap:8px}
.telephone span::before{content:"";width:7px;height:7px;border-radius:50%;background:#25E389}
.pied{position:relative;z-index:3;background:#050506;border-top:1px solid var(--traitDoux);padding:34px 0 30px;color:var(--pale);font-size:14px}
.pied .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.pied p{margin:0}.pied a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}

/* ── la démonstration : le curseur dessiné ── */
.demo-curseur{position:fixed;left:0;top:0;z-index:45;width:26px;height:26px;margin:-3px 0 0 -5px;pointer-events:none;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.demo-curseur svg{width:26px;height:26px;fill:#fff;stroke:#000;stroke-width:1.3;stroke-linejoin:round}
.demo-onde{position:absolute;left:5px;top:3px;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid #25E389;opacity:0}
.demo-onde.va{animation:onde .6s var(--ease)}
@keyframes onde{0%{transform:scale(.2);opacity:1}100%{transform:scale(1);opacity:0}}

/* ── le chargement ── */
.chargement{position:fixed;right:24px;bottom:22px;z-index:45;display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(20,22,24,.72);border:1px solid var(--trait);color:#fff;font-size:13px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .6s}
.chargement span{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#25E389;animation:tourne 1s linear infinite}
.chargement.fini{opacity:0;pointer-events:none}
@keyframes tourne{to{transform:rotate(360deg)}}

@media(max-width:1180px){.nav-sec .btn-outline{display:none}}
/* ── téléphone : le modèle en haut, fixe ; les parties défilent dessous ── */
@media(max-width:900px){
  .nav-links,.parcours{display:none}
  .nav{z-index:60;background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0))}
  .nav .wrap{height:60px}.logo,.logo img{height:24px}
  .nav-sec .btn-primary{height:40px;padding:0 14px;font-size:13px}
  #scene,#jeu{height:42vh;height:42svh}
  #scene{z-index:4}#jeu{z-index:5}
  .voile{display:none}
  main{padding-top:42svh}
  .heros,.partie{min-height:auto;padding:22px 0 30px;scroll-margin-top:42svh}
  .hv-copy{gap:12px}
  .hv-copy .h1{max-width:none}
  .h1{font-size:40px}
  .hv-pill{padding:5px 12px;font-size:10px}
  .hv-ctas .btn{height:44px;padding:0 18px;font-size:14px}
  .hv-scroll,.telephone{display:none}
  .hv-etapes{font-size:12.5px}.hv-etapes li+li::before{width:10px;margin:0 6px}.hv-etapes .puis{flex-basis:100%;margin-top:2px}.hv-etapes .puis::before{display:none}
  .bascule button{height:36px;padding:0 13px;font-size:13px}
  .colonne{gap:10px;max-width:none}.colonne .h2{font-size:30px}.colonne .lead,.colonne>.hv-pill{display:none}
  .fin .colonne .lead{display:block;font-size:16px}
  .partie .roue-essai,.partie.cours .roue-essai{--roue:min(100%, 350px);margin:0 auto}
  .partie .roue-essai .re-fil{display:none}
  .consigne{min-height:0;font-size:17px;max-width:none}
  .temps li{font-size:12px;padding:4px 10px 4px 5px}.temps li:not(.ici){padding-right:5px}.temps li:not(.ici) span{display:none}
  .jeu-pietement .jeu-repere text{font-size:10.5px}
  .chargement{bottom:auto;top:calc(42svh - 46px);right:14px;z-index:61}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} }

/* ── au doigt (tablette, téléphone) : cibles d'au moins 44 px, pas de zoom au double contact, hauteur réelle de la fenêtre ── */
.hv-scroll{display:none}
html{-webkit-tap-highlight-color:transparent}
a,button,.re-svg{touch-action:manipulation}.re-svg{touch-action:none;-webkit-touch-callout:none}
@supports(height:100dvh){
  @media(min-width:901px){
    .partie:not(.fin){height:100dvh}
    .partie .roue-essai,.partie.cours .roue-essai{--roue:clamp(240px, calc(100dvh - 392px), 480px)}
  }
  @media(min-width:901px) and (min-height:781px){ .partie .roue-essai,.partie.cours .roue-essai{--roue:clamp(250px, calc(100dvh - 478px), 480px)} }
}
/* un chapitre qui tient dans l'écran ne défile pas : le doigt fait tourner le fauteuil dans tous les sens */
@media(min-width:901px){ body:not([data-page="fin"]) #scene{touch-action:none} body:not([data-page="fin"]){overscroll-behavior:none} }
@media(pointer:coarse){
  .nav-links{gap:6px}.nav-links a{display:inline-flex;align-items:center;height:44px;padding:0 10px}
  .parcours{gap:0}.parcours a{min-height:40px}.parcours i::after{inset:-18px}
  .btn-sm{height:46px;padding:0 20px;font-size:15px}
  .bascule button{height:44px}
  .lien{min-height:44px;padding:0 6px}
  .temps li{font-size:13px}
  .btn:hover svg,.commande.pas .prec:hover svg{transform:none}
}
/* tablette debout : la scène en haut, la colonne dessous, la roue au milieu et plus grande */
@media(min-width:600px) and (max-width:900px){
  #scene,#jeu{height:40svh}main{padding-top:40svh}.heros,.partie{scroll-margin-top:40svh;padding:22px 12px 24px}
  .chargement{top:calc(40svh - 46px)}
  .partie .roue-essai,.partie.cours .roue-essai{--roue:clamp(300px, calc(60svh - 318px), 460px);width:100%;max-width:none;margin:0}
  .partie .roue-essai .re-scene{align-items:center}.partie .roue-essai .re-legende{margin-left:0}
  .partie .roue-essai .re-svg{width:var(--roue)}
  .colonne .h2{font-size:34px}.consigne{font-size:18px}
  .h1{font-size:52px}
}

/* ── téléphone debout (12/11, Damien : iPhone 14 Pro Max) : un chapitre par écran, sans défilement — le fauteuil en haut,
   le titre et la frise sur une ligne, la consigne, la roue, et la barre des chapitres épinglée en bas, sous le pouce ── */
@media(max-width:599px){
  :root{--scene:clamp(170px, calc(100svh - 398px), 52svh)}
  #scene,#jeu{height:var(--scene)}main{padding-top:var(--scene)}.heros,.partie{scroll-margin-top:var(--scene)}
  .chargement{top:calc(var(--scene) - 46px)}
  #scene{touch-action:none}body{overscroll-behavior:none}
  .heros{padding:16px 0 20px}.h1{font-size:34px}
  .partie:not(.fin){display:block;height:calc(100svh - var(--scene));padding:6px 0 0;overflow:hidden}
  .partie:not(.fin) .colonne{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:4px 10px;align-items:center}
  .partie:not(.fin) .colonne>*{grid-column:1 / -1;min-width:0}
  .partie:not(.fin) .colonne>.h2{grid-column:1;font-size:16px;line-height:28px;margin:0;white-space:nowrap}
  .partie:not(.fin) .colonne>.temps,.partie:not(.fin) .colonne>.bascule{grid-column:2;justify-self:end;flex-wrap:nowrap}
  .temps li,.temps li.ici{padding:4px}.temps li span,.temps li.ici span{display:none}
  .bascule{padding:2px}.bascule button{height:26px;padding:0 10px;font-size:11.5px}.bascule svg{display:none}
  /* de vrais cercles (Damien, 13/11) : la pastille carrée, sans marge ni écart pour un texte caché ; le rond vert la remplit presque */
  .temps li,.temps li.ici,.temps li:not(.ici){width:27px;height:27px;padding:0;gap:0;justify-content:center;flex:none;box-sizing:border-box;font-size:0}
  .temps li::before{width:21px;height:21px;font-size:11px;line-height:1;flex:none;box-sizing:border-box;padding-top:2px;font-variant-numeric:tabular-nums}.temps li.fait::before{padding:0;background-size:13px;background-position:center}
  .consigne{font-size:13px;line-height:1.35;min-height:calc(2 * 1.35em)}
  .partie .roue-essai,.partie.cours .roue-essai{--roue:max(200px, min(calc(100vw - 40px), calc((100svh - var(--scene) - 125px) / .83), 400px));width:100%;max-width:none;margin:0}
  .partie .roue-essai .re-scene{align-items:center;gap:0}
  /* la pilule de la roue, petite, en haut à gauche de la vue, sous le logo : elle ne prend pas de hauteur et ne passe ni
     devant le fauteuil ni devant ses repères (le cadrage laisse 90 px en haut : `haut` dans page.js) */
  .partie .roue-essai .re-legende{position:fixed;z-index:6;left:14px;top:60px;margin:0;min-height:24px;padding:3px 10px;gap:6px;max-width:calc(100vw - 28px);width:max-content;font-size:11px;background:rgba(10,11,13,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  /* la roue déborde un peu en haut et en bas (ses noms du dehors, estompés) pour que le disque soit plus grand */
  .partie .roue-essai .re-svg{margin:calc(var(--roue) * -.085) 0}
  /* la roue des matières porte ses sphères et leurs noms jusqu'au bord : un peu plus petite, presque sans débord */
  .partie #roue-matieres .re-svg{width:calc(var(--roue) * .82);margin:calc(var(--roue) * -.03) 0}
  main{z-index:6}.partie .roue-essai .re-legende,main .colonne>.roue-essai .re-legende{pointer-events:none}
  .partie .roue-essai .re-svg{width:var(--roue)}
  .partie .roue-essai .re-nom-secteur{font-size:20px}.partie .roue-essai .re-coeur-nom{font-size:16px}.partie .roue-essai .re-tour-nom{font-size:17px}.partie .roue-essai .re-nom-outil{font-size:17px}
  .commande.pas{position:fixed;z-index:30;left:16px;right:16px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;margin:0;gap:10px}
  /* les deux boutons du bas et « Installer », en haut à droite : 15 % plus petits (Damien, 12/11) */
  .commande.pas .btn-sm{height:29px;padding:0 11px;font-size:10.6px;gap:6px}.commande.pas .btn-sm svg{width:12px;height:12px}
  .nav-sec .btn-primary{height:34px;padding:0 12px;font-size:11px}.commande.pas .lien{font-size:12px;padding:0 2px;min-height:34px}
  .commande.pas .lien .long{display:none}.commande.pas .lien{white-space:nowrap}
  /* la fin tient sur un écran, sans défilement (Damien, 13/11) : ni le rappel des matières, ni le bloc « À sa vraie taille »,
     ni l'installation sur Mac, ni le pied ; le titre, une phrase, le bouton, et la barre des chapitres épinglée en bas */
  .fin{display:block;height:calc(100svh - var(--scene));min-height:0;padding:14px 0 0;overflow:hidden}
  .fin .colonne{gap:10px}
  .fin .colonne .hv-pill,.fin .ar-rappel,.fin .ar-bloc,.fin .installer,.fin .telephone{display:none}
  .fin .colonne .h2{font-size:24px;margin:0}
  .fin .colonne .lead{font-size:14px;line-height:1.45;margin:0}
  .fin .commande:not(.pas){margin:2px 0 0}
  .fin .commande.pas{position:fixed;margin:0}
  body[data-page="fin"]{overflow:hidden;overscroll-behavior:none;--scene:max(170px, calc(100svh - 250px))}
  body[data-page="fin"] .pied{display:none}
  /* le geste se fait dans la vue (classe posée par page.js) : la roue s'efface, la vue prend sa place */
  :root.en-vue{--scene:max(170px, calc(100svh - 124px))}
  :root.roue-inerte .commande.pas .voir-roue{display:inline-flex;align-items:center;margin-left:auto;order:4;color:#fff;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:0 11px;min-height:29px;font-size:10.6px}
  :root.roue-inerte .commande.pas > .btn-primary:not([hidden]) ~ .voir-roue,:root.roue-inerte .commande.pas .voir-roue{margin-left:auto}
  :root.roue-inerte .commande.pas > .btn-primary,:root.roue-inerte .commande.pas > #suite-vues{margin-left:0}
  :root.en-vue .partie .roue-essai .re-svg{display:none}
}

/* ── accueil.html (13/11) : l'étape des matières en page d'accueil du logiciel ── */
.accroche{display:none}
body[data-accueil] .partie.cours#matieres .accroche{display:block;margin:2px 0 14px;max-width:46ch;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.74)}
body[data-accueil] #fin .installer small a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){
  body[data-accueil] .partie.cours#matieres .accroche{display:none}
}
@media (max-width:600px){ .nav .btn .long, .commande.pas .prec .long{display:none} }
/* l'accueil : la colonne tient sous la barre du haut (une ligne d'accroche de plus que l'étape du parcours) */
@media (min-width:601px){
  body[data-accueil] #matieres .colonne .h2{font-size:clamp(28px,2.6vw,40px)}
  body[data-accueil] #matieres .consigne{font-size:clamp(16px,1.35vw,19px)}
  body[data-accueil] #matieres .accroche{margin:0 0 10px}
}
@media (min-width:601px){
  body[data-accueil] #matieres .colonne > .hv-pill{display:none}
  body[data-accueil] #matieres .accroche b{color:#fff;font-weight:500}
  body[data-accueil] #matieres .commande.pas .lien:not(.voir-roue){margin-right:110px}
}
@media (min-width:601px) and (max-height:960px){
  body[data-accueil] #matieres .re-legende{display:none}
}