/* Layout : appli d'apprentissage ludique et lumineuse. Barre XP · chapitres · carte des niveaux · scène (piste qui défile vers la ligne de frappe) · barre d'action collante · résultat en surimpression.
   Une seule ambiance claire, assumée : surfaces blanches, couleurs franches sans néon, boutons en relief. */
:root{
  /* Thème « Cabine » : fond très sombre et texte clair. L'orange et le bleu sont **réservés aux platines A et B**
     (c'est un langage, pas une décoration : pendant une partie, on lit la couleur avant le texte), le vert et le rouge
     aux messages réussi / raté, le doré aux étoiles et aux récompenses.
     Lot 36 (18 oct. 2026) : les gris passent au bleu-noir du brief de direction artistique, le violet et la lavande
     prennent ses valeurs exactes. Toutes les couleurs du site passent par cette liste. */
  --bg:#0B0E16;
  --glow-a:#0B0E16;
  --glow-b:#0B0E16;
  --panel:#151A27;
  --panel-2:#1D2233;
  --line:#3A3F56;   /* « ardoise » du brief : contours et surfaces secondaires */
  --fg:#f2f3f5;
  --muted:#a6acb8;
  --a:#ff7a45;   /* platine A : seulement ce qui touche à A */
  --b:#3ea6ff;   /* platine B : seulement ce qui touche à B */
  --accent:#f2f3f5;   /* tout le reste : sélection, repère, focus (thème « Cabine pure », 14 oct. 2026) */
  --xp:#c4c9d2;
  --ok:#35d07f;
  --mid:#ffb020;
  --medal-bg:#2a2112;   /* fond d'une médaille gagnée (lot 23), sous le doré des étoiles */
  --bad:#ff6b6b;
  --ink:#0B0E16;
  --go:#f2f3f5;
  --go-edge:#8d939e;
  --go-ink:#0B0E16;
  --edge:rgba(0,0,0,.45);
  --shadow:0 18px 40px rgba(0,0,0,.35);
  --display:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;   /* police Nunito partout (lot 28, choix de l'utilisateur) */
  --sans:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --on-fg:#0B0E16;
  --hi:#232942;
  --ok-bg:#12301f;
  --ok-ink:#7ee2a8;
  --xp-bg:#242A3C;
  --xp-bg-2:#2B3145;
  --xp-line:#434A63;
  --hot:#33201a;
  --hot-edge:#4d2c20;
  --slot:#282E42;
  --track:#2C3246;
  --dot:#1D2233;
  /* Couleur de DJingood (lots 27 à 30) : le violet, pour Vini, le bouton principal des « Premiers pas » et les quêtes du jour */
  --brand:#7C4DFF;
  --brand-edge:#5229C4;
  --brand-light:#B89BFF;
  --brand-soft:#1c1630;
  --brand-line:#3d2d7a;
  --on-brand:#ffffff;   /* blanc : le violet du brief (#7C4DFF) est trop sombre pour du texte noir (4,0 au lieu de 4,5) */
  --a-edge:#C0522A;   /* le relief sous le bouton « Jouer », orange foncé (maquette du 22 oct. 2026) */
  /* Les disques des niveaux (maquette du 22 oct. 2026) */
  --vinyle-haut:#272E40;    /* reflet en haut à gauche du disque */
  --vinyle-bas:#0A0D14;     /* le noir du disque */
  --vinyle-haut-fait:#2B3346;   /* un peu plus clair quand le niveau est réussi */
  --vinyle-sillon:rgba(255,255,255,.07);
  --vinyle-sillon-fait:rgba(255,255,255,.09);
  --vinyle-bord:rgba(255,255,255,.07);
  --vinyle-bord-fait:rgba(255,255,255,.10);
  --vinyle-lisere:rgba(255,255,255,.22);   /* le liseré autour de la pastille centrale */
  --vinyle-reflet:rgba(255,255,255,.06);   /* la brillance en diagonale sur le disque */
  --vinyle-bande:rgba(0,0,0,.5);           /* les sillons profonds, plus espacés */
  --vinyle-rim:rgba(255,255,255,.14);      /* le bord extérieur du disque, qui accroche la lumière */
  --vinyle-ombre:rgba(0,0,0,.55);
  --off:#242A3C;   /* bouton grisé (rien de choisi) */
  --off-edge:#1B2030;
  --off-ink:#6b7182;
  /* Vini, la mascotte (js/vini.js) */
  --vini-300:#B89BFF;
  --vini-500:#7C4DFF;
  --vini-600:#6F3FEA;
  --vini-700:#5229C4;
  --vini-cream:#FFF7E6;
  --vini-ring:#F0DCC4;
  --vini-ink:#16181F;
  --vini-dk:#2F3340;
  --vini-dk2:#404554;
  --vini-dk3:#5C6377;
  --vini-spark:#FFD54A;
  --vini-drop:#79C6FF;
  --vini-tongue:#FF7FA8;
  --vini-shadow:rgba(0,0,0,.35);
  --vini-beat:.4839s;   /* un temps à 124 BPM : Vini danse sur le tempo des morceaux */
  --qt-ok:#2b2f3a;   /* barre d'une quête, fond */
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100%;
  background-image:radial-gradient(900px 500px at 15% -10%,var(--glow-a),transparent 70%),radial-gradient(800px 500px at 100% 10%,var(--glow-b),transparent 70%)}
.wrap{max-width:1060px;margin:0 auto;padding-inline:24px;padding-block:22px 64px;display:flex;flex-direction:column;gap:22px}
@media (max-width:600px){.wrap{padding-inline:16px}}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}

/* En-tête */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
/* Le logo du site : Vini lui-même (lot 36). Avant, c'était un vinyle dessiné en CSS, puis un carré orange
   hérité de l'ancien thème — ce qui contredisait la règle « l'orange, c'est la platine A ». */
.blogo{width:40px;height:40px;display:block;flex:none}
.brand-name{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;line-height:1}
.brand-sub{font-size:13px;color:var(--muted)}
.hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600}
.lvl{font-family:var(--display);font-weight:800;color:var(--xp)}
.xpbar{width:90px;height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--xp),var(--accent));border-radius:4px;transition:width .6s}
.star{color:var(--mid)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.status.on i{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.status{color:var(--muted)}.status.on{color:var(--fg)}
a.chip{color:var(--fg);text-decoration:none}
a.chip:hover{border-color:var(--muted)}

/* Carte des niveaux */
.map{position:relative;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:6px;padding-top:4px}
.map::before{content:"";position:absolute;left:calc(50% / var(--n,7));right:calc(50% / var(--n,7));top:31px;height:4px;border-radius:2px;background:var(--line)}
.map .prog{position:absolute;left:calc(50% / var(--n,7));top:31px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--xp));transition:width .6s}
.node{position:relative;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;text-align:center;min-width:0}
.node .dot{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:26px;background:var(--panel);border:3px solid var(--line);transition:transform .15s}
.node:hover .dot{transform:translateY(-2px)}
.node.done .dot{background:linear-gradient(135deg,var(--accent),var(--xp));border-color:transparent;color:var(--ink)}
.node[aria-pressed="true"] .dot{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--fg)}
.node .t{font-weight:600;font-size:14px;line-height:1.2}
.node .s{font-size:14px;letter-spacing:.12em;color:var(--line)}
.node .s b{color:var(--mid);font-weight:400}
@media (max-width:760px){.map{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:16px}.map::before,.map .prog{display:none}.node .dot{width:52px;height:52px;font-size:20px}.node .t{font-size:13px}}

/* Scène */
.stage{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:24px;display:flex;flex-direction:column;gap:20px;overflow:hidden}
.stage-head{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.lnum{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--xp)}
.stage h1{margin:2px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(28px,4.4vw,44px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.goal{margin:8px 0 0;font-size:18px;font-weight:500;max-width:46ch}
.how{margin:4px 0 0;color:var(--muted);max-width:60ch;font-size:15px}
.ringwrap{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.ring{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;border:4px solid var(--line);position:relative;will-change:transform}
.ring::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:4px solid transparent;border-top-color:var(--accent);border-right-color:var(--accent);opacity:var(--o,0)}
.ring .big{font-family:var(--display);font-weight:800;font-size:46px;line-height:1}
.ring.hot{border-color:var(--accent);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 50%,transparent)}
.ring.hot .big{color:var(--accent)}
.ringlab{font-size:13px;color:var(--muted);text-align:center;max-width:16ch;line-height:1.3;min-height:2.6em}
.hw{position:relative;border-radius:18px;overflow:hidden;background:var(--bg)}
#hw{width:100%;height:210px;display:block}
.pops{position:absolute;inset:0;pointer-events:none}
.pop{position:absolute;left:22%;top:42%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:800;font-size:clamp(22px,4vw,34px);white-space:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.6);animation:pop 1.3s ease-out forwards}
.pop.ok{color:var(--ok)}.pop.mid{color:var(--mid)}.pop.bad{color:var(--bad)}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}30%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-120%) scale(1)}}
.bar{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--xp))}

.controls{display:flex;gap:30px;justify-content:center;align-items:flex-end;flex-wrap:wrap;min-height:64px}
.group{display:flex;flex-direction:column;align-items:center;gap:10px}
.group .gl{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pair{display:flex;gap:22px;align-items:flex-end}
.chan{display:flex;flex-direction:column;align-items:center;gap:6px}
.chan .cl{font-family:var(--display);font-weight:800;font-size:16px}
.chanA .cl{color:var(--a)}.chanB .cl{color:var(--b)}
.auto{opacity:.4;pointer-events:none}
.auto::after{content:"auto";font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.launch{border:0;border-radius:20px;padding:22px 42px;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.01em;background:var(--b);color:var(--ink);display:flex;align-items:center;gap:12px;box-shadow:0 8px 0 color-mix(in srgb,var(--b) 45%,var(--bg)),0 0 40px color-mix(in srgb,var(--b) 35%,transparent);transition:transform .08s,box-shadow .08s}
.launch:active:not(:disabled){transform:translateY(6px);box-shadow:0 2px 0 color-mix(in srgb,var(--b) 45%,var(--bg))}
.launch:disabled{opacity:.35;cursor:default;box-shadow:none}
.launch svg{width:22px;height:22px}
.knob{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:12px;padding:2px 4px}
.knob svg{width:76px;height:76px;display:block}
.knob .trk{fill:none;stroke:var(--panel-2);stroke-width:6;stroke-linecap:round}
.knob .arc{fill:none;stroke-width:6;stroke-linecap:round}
.chanA .arc{stroke:var(--a)}.chanB .arc{stroke:var(--b)}
.knob .body{fill:var(--panel-2)}
.knob .ptr{stroke:var(--fg);stroke-width:3;stroke-linecap:round}
.knob .kv{font-size:12px;color:var(--muted)}
.fader{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;--v:0;width:54px;height:172px;cursor:ns-resize}
.fader .slot{position:absolute;left:50%;top:11px;bottom:11px;width:8px;margin-left:-4px;border-radius:4px;background:var(--panel-2)}
.fader .fill{position:absolute;left:50%;bottom:11px;width:8px;margin-left:-4px;border-radius:4px;height:calc(var(--v) * (100% - 22px))}
.chanA .fill{background:var(--a);box-shadow:0 0 12px var(--a)}.chanB .fill{background:var(--b);box-shadow:0 0 12px var(--b)}
.fader .cap2{position:absolute;left:3px;right:3px;height:24px;border-radius:8px;background:var(--fg);bottom:calc(var(--v) * (100% - 22px) - 1px);box-shadow:0 3px 8px rgba(0,0,0,.5)}
.fader .cap2::after{content:"";position:absolute;left:10px;right:10px;top:11px;height:2px;border-radius:1px;background:var(--ink)}
.start-row{display:flex;justify-content:center;flex-direction:column;align-items:center;gap:8px}
.start{border:0;border-radius:16px;padding:16px 34px;font-family:var(--display);font-weight:800;font-size:18px;background:linear-gradient(135deg,var(--accent),var(--xp));color:var(--ink);box-shadow:0 0 30px color-mix(in srgb,var(--xp) 35%,transparent)}
.start.stop{background:var(--panel-2);color:var(--fg);box-shadow:none}
.hint{margin:0;color:var(--muted);font-size:14px;text-align:center;min-height:1.4em}
.setup{background:var(--panel-2);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;width:100%;max-width:560px}
.setup h3{margin:0;font-family:var(--display);font-weight:800;font-size:18px}
.setup p{margin:0;color:var(--muted);font-size:14px}
.setup ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.setup li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--panel);border-radius:12px;padding:9px 12px;font-size:15px}
.setup li .ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;background:var(--line);color:var(--fg)}
.setup li.ok .ic{background:var(--ok);color:var(--ink);box-shadow:0 0 10px var(--ok)}
.setup li.wrong .ic{background:var(--mid);color:var(--ink)}
.setup li .what{font-size:14px;color:var(--muted);text-align:right}
.setup li.ok .what{color:var(--ok)}
.setup .skip{align-self:center;border:0;background:transparent;color:var(--muted);text-decoration:underline;font-size:13px;padding:4px}
.opts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}
.seg{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:4px}
.seg .sl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 8px}
.seg button{border:0;background:transparent;border-radius:10px;padding:7px 12px;font-weight:600;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.seg button:disabled{opacity:.4;cursor:default}
.seg button.earb[aria-pressed="true"]{background:var(--xp);color:var(--ink)}
.styletag{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.stage.ear .ring{border-color:var(--xp)}
.chapters{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.chap{flex:none;min-width:170px;border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:10px 14px;text-align:left;display:flex;flex-direction:column;gap:2px}
.chap .cn{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chap strong{font-family:var(--display);font-weight:800;font-size:16px;line-height:1.15}
.chap .cs{font-size:13px;color:var(--muted)}
.chap[aria-pressed="true"]{border-color:transparent;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 25%,var(--panel)),color-mix(in srgb,var(--xp) 25%,var(--panel)));box-shadow:inset 0 0 0 2px var(--fg)}
.chap:disabled{opacity:.5;cursor:default}
.chap.test{border-style:dashed;border-color:var(--accent)}
.chap.test strong{color:var(--accent)}
.pbanner{background:color-mix(in srgb,var(--accent) 14%,var(--panel));border:1px solid var(--accent);border-radius:16px;padding:12px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.pbanner b{font-family:var(--display);font-weight:800}
.pbanner button{border:0;background:transparent;color:var(--muted);text-decoration:underline}
.node .e{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--xp)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.watch{border:2px solid var(--accent);background:transparent;color:var(--accent);border-radius:16px;padding:14px 26px;font-family:var(--display);font-weight:800;font-size:18px}
.watch:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 12%,transparent)}
.watch:disabled{opacity:.35;cursor:default}
.stage.demo .hw{box-shadow:inset 0 0 0 2px var(--accent)}
.demo-tag{position:absolute;top:10px;right:12px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--ink);background:var(--accent);border-radius:8px;padding:3px 9px}
.cmp{display:flex;flex-direction:column;gap:8px;text-align:left}
.cmp-t{font-family:var(--display);font-weight:800;font-size:16px}
#cmp{width:100%;display:block;border-radius:12px;background:var(--bg)}
.cmp-leg{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.cmp-leg i{display:inline-block;width:22px;height:0;border-top:2px dashed var(--fg);vertical-align:middle;margin-right:6px}
.cmp-leg u{display:inline-block;width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--a),var(--b));vertical-align:middle;margin-right:6px;text-decoration:none}
.echo{width:104px;height:104px;border-radius:50%;border:3px solid var(--xp);background:var(--panel-2);color:var(--xp);font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.04em;transition:background .08s,box-shadow .08s}
.echo[aria-pressed="true"]{background:var(--xp);color:var(--ink);box-shadow:0 0 40px color-mix(in srgb,var(--xp) 60%,transparent)}
.echo:disabled{opacity:.35;cursor:default}
.setup .learn{border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:10px;padding:5px 10px;font-weight:700;font-size:13px}
.setup .learn.on{background:var(--accent);color:var(--ink)}
.start:disabled{background:var(--panel-2);color:var(--muted);box-shadow:none;cursor:default}
.start.ready{animation:readyPulse 1.2s ease-in-out infinite}
@keyframes readyPulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--xp) 25%,transparent),0 0 40px color-mix(in srgb,var(--xp) 45%,transparent)}}

/* Résultat */
.result{position:absolute;inset:0;overflow:auto;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;z-index:3}
.rcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px;max-width:560px;width:100%;display:flex;flex-direction:column;gap:16px;text-align:center}
.rstars{display:flex;justify-content:center;gap:10px}
.rstars span{font-size:54px;line-height:1;color:var(--line);transform:scale(.4);opacity:0;animation:starIn .45s cubic-bezier(.3,1.6,.6,1) forwards}
.rstars span.on{color:var(--mid);text-shadow:0 0 24px color-mix(in srgb,var(--mid) 60%,transparent)}
@keyframes starIn{to{transform:scale(1);opacity:1}}
.rclose{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);font-size:22px;line-height:1;display:grid;place-items:center}
.rclose:hover{border-color:var(--muted)}
.rcard h2{margin:0;font-family:var(--display);font-weight:800;font-size:28px;line-height:1.1}
.gain{font-family:var(--display);font-weight:800;color:var(--xp);font-size:18px}
.details{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.details li{display:flex;gap:10px;align-items:flex-start;font-size:15px;background:var(--panel-2);border-radius:12px;padding:10px 12px}
.details li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.details li.bad::before{background:var(--bad);box-shadow:0 0 8px var(--bad)}.details li.mid::before{background:var(--mid);box-shadow:0 0 8px var(--mid)}
.rrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rbtn{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:12px 22px;font-weight:700}
.rbtn.go{border:0;background:linear-gradient(135deg,var(--accent),var(--xp));color:var(--ink)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
/* Guide de premier lancement */
.onb{position:fixed;inset:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px;overflow:auto}
.onb-card{background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:26px;max-width:720px;width:100%;display:flex;flex-direction:column;gap:16px;position:relative}
.onb-dots{display:flex;gap:6px}
.onb-dots i{width:22px;height:5px;border-radius:3px;background:var(--line)}
.onb-dots i.on{background:linear-gradient(90deg,var(--accent),var(--xp))}
.onb-card h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(24px,4vw,34px);line-height:1.05}
.onb-card p.tx{margin:0;font-size:17px;max-width:60ch}
.onb-svg{width:100%;height:auto;display:block;border-radius:16px;background:var(--bg)}
.onb-svg .body{fill:var(--panel-2);stroke:var(--line);stroke-width:2}
.onb-svg .part{fill:var(--line)}
.onb-svg .jog{fill:var(--panel);stroke:var(--line);stroke-width:3}
.onb-svg text{fill:var(--muted);font-family:var(--sans);font-size:11px;font-weight:600}
.onb-svg .hl{fill:var(--xp);filter:drop-shadow(0 0 8px var(--xp))}
.onb-svg .hl-ring{fill:none;stroke:var(--xp);stroke-width:3;animation:hlPulse 1.1s ease-in-out infinite}
@keyframes hlPulse{50%{opacity:.25}}
.onb-try{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel-2);border-radius:16px;padding:14px 16px}
.onb-try .act{font-weight:700}
.onb-try input[type=range]{flex:1;min-width:160px;accent-color:var(--xp)}
.onb-try .ok{margin-left:auto;font-family:var(--display);font-weight:800;color:var(--ok)}
.onb-play{border:0;border-radius:12px;padding:10px 18px;font-family:var(--display);font-weight:800;background:var(--accent);color:var(--ink)}
.onb-learn{border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:10px;padding:6px 12px;font-weight:700;font-size:13px}
.onb-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;width:100%}
.onb-grid .bar{height:auto;background:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;border-radius:0;overflow:visible}
.onb-grid .bar span{height:26px;border-radius:4px;background:var(--panel)}
.onb-grid .bar span:first-child{background:var(--line)}
.onb-grid .bar span.on{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.onb-grid .bar span.past{background:color-mix(in srgb,var(--accent) 30%,var(--panel))}
.onb-count{font-family:var(--display);font-weight:800;font-size:15px;color:var(--muted)}
.onb-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.onb-nav .skip{border:0;background:transparent;color:var(--muted);text-decoration:underline;font-size:14px}
.onb-nav .go{border:0;border-radius:14px;padding:13px 26px;font-family:var(--display);font-weight:800;font-size:16px;background:linear-gradient(135deg,var(--accent),var(--xp));color:var(--ink)}
.onb-nav .back{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:12px 18px;font-weight:700}
.onb-note{font-size:13px;color:var(--muted);margin:0}
/* ---------- Mise en page compacte ---------- */
.wrap{gap:16px;padding-block:18px 48px}
.hud{gap:8px}
.chip{padding:6px 12px}
.status span{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapters{gap:8px}
.chap{min-width:150px;padding:8px 12px;border-radius:14px}
.chap strong{font-size:15px}
.chap .cs{font-size:12px}
.map{padding-top:2px}
.map::before,.map .prog{top:23px}
.node{gap:4px}
.node .dot{width:46px;height:46px;font-size:20px;border-width:2px}
.node .t{font-size:13px}
.node .s{font-size:12px}
.stage{overflow:clip;padding:22px;gap:16px}
.stage h1{font-size:clamp(26px,3.4vw,38px)}
.goal{font-size:17px;margin-top:6px}
.styletag{margin-top:8px}
.ring{width:96px;height:96px}
.ring .big{font-size:38px}
.ringlab{max-width:14ch;font-size:12px}
.start-row{display:flex;flex-direction:column;align-items:center;gap:10px}
.actionbar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom, 0px));z-index:2;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
  background:color-mix(in srgb,var(--panel-2) 88%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:20px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.actionbar .opts{gap:8px}
.actionbar .seg{background:var(--bg)}
.start,.watch{padding:12px 24px;font-size:17px}
.btnrow{gap:10px}
.brand-name{white-space:nowrap}
.map{padding-top:8px}
.stage.running .actionbar{position:static;box-shadow:none}
.btnrow>button{white-space:nowrap}
@media (max-width:760px){
  .brand-sub{display:none}
  .brand-name{font-size:19px}
  .blogo{width:34px;height:34px}
  .xpbar{display:none}
  .top{flex-wrap:nowrap;align-items:center}
  .hud{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;padding-block:2px}
  .hud::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .status span{max-width:120px}
  .map{display:flex;overflow-x:auto;gap:4px;scrollbar-width:none;padding-bottom:4px}
  .map::-webkit-scrollbar{display:none}
  .node{flex:none;width:84px}
  .stage{padding:16px;border-radius:22px}
  .stage-head{flex-wrap:nowrap;align-items:flex-start;gap:12px}
  .stage-head>div:first-child{min-width:0}
  .ring{width:70px;height:70px;border-width:3px}
  .ring .big{font-size:28px}
  .ringlab{font-size:11px;max-width:11ch}
  .goal{font-size:16px}
  .how{font-size:14px}
  #hw{height:190px}
  .seg{flex-wrap:wrap;justify-content:center}
  .seg .sl{display:none}
  .actionbar{width:100%;padding:8px;gap:8px}
  .btnrow{width:100%;flex-wrap:nowrap}
  .btnrow>button{flex:1;padding:11px 8px;font-size:15px}
  .actionbar .seg button{padding:6px 9px;font-size:13px}
  .controls{gap:14px 18px;align-items:flex-end}
  .group{gap:6px}
  .group .gl{font-size:11px}
  .pair{gap:10px}
  .knob svg{width:58px;height:58px}
  .fader{width:44px;height:140px}
  .launch{padding:14px 26px;font-size:18px;border-radius:16px}
  .echo{width:84px;height:84px;font-size:17px}
  .chan .cl{font-size:14px}
}
/* ---------- Habillage clair et ludique (remplace l'ambiance club) ---------- */
body{background-image:radial-gradient(900px 480px at 8% -12%,var(--glow-a),transparent 70%),radial-gradient(760px 460px at 105% 0%,var(--glow-b),transparent 70%)}

.brand-name{letter-spacing:-.02em}
.chip{background:var(--panel);border-color:var(--line);box-shadow:0 2px 0 var(--line)}
a.chip:hover,button.chip:hover{border-color:var(--muted)}
.status.on i{box-shadow:none}
.chap{background:var(--panel);box-shadow:0 2px 0 var(--line)}
.chap[aria-pressed="true"]{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),color-mix(in srgb,var(--xp) 16%,var(--panel)));box-shadow:inset 0 0 0 2px var(--xp),0 2px 0 var(--line)}
.chap.test{background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.node .dot{background:var(--panel);border-color:var(--line);box-shadow:0 3px 0 var(--line)}
.node.done .dot{box-shadow:0 3px 0 color-mix(in srgb,var(--xp) 55%,#000)}
.node[aria-pressed="true"] .dot{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--xp)}
.stage{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow)}
.ring{background:var(--panel);border-color:var(--line)}
.ring.hot{box-shadow:none;background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.hw{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.pop{text-shadow:0 3px 0 var(--panel),0 -2px 0 var(--panel),2px 0 0 var(--panel),-2px 0 0 var(--panel),0 10px 22px rgba(27,31,51,.18)}
.launch{box-shadow:0 6px 0 color-mix(in srgb,var(--b) 62%,#000)}
.launch:active:not(:disabled){box-shadow:0 1px 0 color-mix(in srgb,var(--b) 62%,#000)}
.launch:disabled{box-shadow:0 6px 0 var(--line)}
.chanA .fill,.chanB .fill{box-shadow:none}
.fader .cap2{box-shadow:0 3px 0 var(--edge)}
.start{background:var(--xp);color:var(--ink);box-shadow:0 5px 0 color-mix(in srgb,var(--xp) 62%,#000);transition:transform .08s,box-shadow .08s}
.start:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--xp) 62%,#000)}
.start.stop{background:var(--panel);color:var(--fg);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.start:disabled{background:var(--panel-2);color:var(--muted);box-shadow:0 4px 0 var(--line)}
@keyframes readyPulse{50%{box-shadow:0 5px 0 color-mix(in srgb,var(--xp) 62%,#000),0 0 0 7px color-mix(in srgb,var(--xp) 22%,transparent)}}
.watch{background:var(--panel);border:2px solid var(--line);color:var(--accent);box-shadow:0 4px 0 var(--line);transition:transform .08s,box-shadow .08s}
.watch:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.watch:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.actionbar{background:color-mix(in srgb,var(--panel) 90%,transparent);box-shadow:0 10px 30px rgba(27,31,51,.12)}
.seg{background:var(--panel-2)}
.actionbar .seg{background:var(--panel-2)}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:0 2px 0 var(--line),inset 0 0 0 1px var(--line)}
.echo{background:var(--panel)}
.echo[aria-pressed="true"]{box-shadow:0 5px 0 color-mix(in srgb,var(--xp) 62%,#000)}
.setup li.ok .ic{box-shadow:none}
.result{background:color-mix(in srgb,var(--bg) 78%,transparent)}
.rcard{background:var(--panel);box-shadow:0 20px 50px rgba(27,31,51,.18)}
.rstars span.on{text-shadow:0 3px 0 color-mix(in srgb,var(--mid) 60%,#000)}
.details li{background:var(--panel-2)}
.details li::before,.details li.bad::before,.details li.mid::before{box-shadow:none}
.rbtn{background:var(--panel);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.rbtn.go{background:var(--xp);color:var(--ink);border-color:transparent;box-shadow:0 4px 0 color-mix(in srgb,var(--xp) 62%,#000)}
.onb{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.onb-card{box-shadow:0 20px 50px rgba(27,31,51,.16)}
.onb-svg .hl{filter:none}
.onb-grid .bar span.on{box-shadow:none}
.onb-nav .go{background:var(--xp);color:var(--ink);box-shadow:0 4px 0 color-mix(in srgb,var(--xp) 62%,#000)}
.onb-play{color:var(--ink)}
.demo-tag{color:var(--ink)}
.pbanner{background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
/* ---------- Formes arrondies, boutons en pastille, bulle de conseil (couche héritée du thème « Tout doux ») ---------- */
body{background-image:radial-gradient(circle at 104% -6%,var(--glow-a) 0 260px,transparent 261px),radial-gradient(circle at -6% 108%,var(--glow-b) 0 240px,transparent 241px);background-attachment:fixed}
h1,.brand-name,.chap strong,.node .dot,.ring .big,.launch,.start,.watch,.rcard h2,.onb-card h2,.echo,.gain,.pop,.lvl{font-family:var(--display)}
.stage h1{font-weight:700;letter-spacing:-.01em}

.chip{border:0;border-radius:999px;box-shadow:none;background:var(--panel)}
.lvl{color:var(--xp)}
.xpbar i{background:var(--xp)}
.chap{border:0;border-radius:22px;box-shadow:none}
.chap[aria-pressed="true"]{background:var(--panel);box-shadow:inset 0 0 0 3px var(--accent)}
.chap.test{border:2px dashed var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.chap.test strong{color:var(--xp)}
.map::before{background:var(--track);height:6px;border-radius:3px}
.map .prog{background:var(--go);height:6px}
.node .dot{border:0;background:var(--dot);box-shadow:none;color:var(--muted)}
.node.done .dot{background:var(--go);color:var(--ink);box-shadow:0 4px 0 var(--go-edge)}
.node[aria-pressed="true"] .dot{background:var(--panel);color:var(--fg);box-shadow:0 0 0 4px var(--accent)}
.node .s b{color:var(--mid)}
.stage{border:0;border-radius:32px;box-shadow:var(--shadow)}
.lnum{color:var(--muted);letter-spacing:.02em;text-transform:none;font-size:14px}
.styletag{border:0;background:var(--panel-2)}
.ring{border:0;background:var(--panel-2);box-shadow:inset 0 -6px 0 var(--line)}
.ring::before{border-top-color:var(--accent);border-right-color:var(--accent)}
.ring.hot{background:var(--hot);box-shadow:inset 0 -6px 0 var(--hot-edge)}
.stage-head{flex-wrap:nowrap;align-items:flex-start}
.stage-head>div:first-child{flex:1;min-width:0}
.buddy{flex:none;display:flex;align-items:flex-end;gap:12px;margin-left:auto;align-self:center}
.bubble{max-width:210px}
.bubble{margin:0;max-width:230px;background:var(--hi);border-radius:18px;padding:12px 16px;font-weight:700;font-size:15px;line-height:1.35}
.hw{border-radius:22px;box-shadow:none;background:var(--panel-2)}
.launch{border-radius:999px;background:var(--b);color:var(--ink);box-shadow:0 5px 0 color-mix(in srgb,var(--b) 65%,#000)}
.launch:active:not(:disabled){box-shadow:0 1px 0 color-mix(in srgb,var(--b) 65%,#000)}
.knob .body{fill:var(--panel-2)}
.fader .slot{background:var(--slot)}
.fader .cap2{border-radius:12px}
.start{border-radius:999px;background:var(--go);color:var(--go-ink);box-shadow:0 5px 0 var(--go-edge)}
.start:active:not(:disabled){box-shadow:0 1px 0 var(--go-edge)}
@keyframes readyPulse{50%{box-shadow:0 5px 0 var(--go-edge),0 0 0 8px color-mix(in srgb,var(--go) 30%,transparent)}}
.start.stop{border-radius:999px}
.watch{border-radius:999px;border:2px solid var(--xp-line);color:var(--xp);box-shadow:none}
.watch:hover:not(:disabled){background:var(--xp-bg-2)}
.actionbar{border:0;border-radius:999px;padding:10px 14px;box-shadow:0 14px 34px rgba(35,49,43,.14)}
.seg{border:0;border-radius:999px}
.seg button{border-radius:999px}
.echo{border-color:var(--xp);color:var(--xp)}
.echo[aria-pressed="true"]{background:var(--xp)}
.rcard{border:0;border-radius:32px}
.details li{border-radius:16px}
.rbtn{border-radius:999px;border-color:var(--xp-line);color:var(--xp);box-shadow:none}
.rbtn.go{background:var(--go);color:var(--go-ink);box-shadow:0 4px 0 var(--go-edge)}
.onb-card{border:0;border-radius:32px}
.onb-nav .go{border-radius:999px;background:var(--go);color:var(--go-ink);box-shadow:0 4px 0 var(--go-edge)}
.onb-nav .back{border-radius:999px}
.onb-play{border-radius:999px}
.setup{border:0;border-radius:22px}
.setup li{border-radius:14px}
.pbanner{border:0;border-radius:22px;background:var(--hi)}
.howto{margin-top:6px}
.howto summary{cursor:pointer;font-weight:700;color:var(--xp);font-size:14px;list-style:none;display:inline-flex;align-items:center;gap:6px}
.howto summary::-webkit-details-marker{display:none}
.howto summary::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--xp-bg);font-size:15px}
.howto[open] summary::before{content:"–"}
.howto .how{margin-top:6px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tags .styletag{margin-top:0}
.modetag{font-size:13px;font-weight:700;color:var(--ink);background:var(--xp);border-radius:999px;padding:4px 12px}
/* Lot 20 : bouton du Mode Expert, allumé quand il est choisi */
.xtoggle{font-size:13px;font-weight:700;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer}
.xtoggle:hover{color:var(--fg);border-color:var(--muted)}
.xtoggle[aria-pressed="true"]{color:var(--on-fg);background:var(--accent);border-color:var(--accent)}
.stage-head .goal{font-size:19px;font-weight:700;color:var(--fg)}
.bubble{font-size:16px;max-width:250px}
.ringlab{min-height:0}
.group{padding:10px 14px;border-radius:24px;transition:background .2s,box-shadow .2s}
.group.focus{background:var(--hi);box-shadow:0 0 0 3px var(--accent)}
.group.focus .gl{color:var(--fg)}
.group .gl{font-size:13px}
.knob .kv{font-size:12px}
@media (max-width:760px){.buddy{display:none}.actionbar{border-radius:26px}}
@media (min-width:761px){#hint{display:none}}
/* ---------- Onglets du parcours, accueil, étapes à venir ---------- */
a.brand{color:inherit;text-decoration:none}
.view{display:flex;flex-direction:column;gap:22px}
.tabs{display:flex;gap:6px;background:var(--panel);border-radius:999px;padding:6px;align-self:center;max-width:100%}
.tabs a{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:999px;color:var(--muted);text-decoration:none;font-family:var(--display);font-weight:600;font-size:16px;white-space:nowrap}
.tabs a .tn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--panel-2);font-size:13px}
.tabs a:hover{color:var(--fg)}
.tabs a[aria-current="page"]{background:var(--fg);color:var(--on-fg)}
.tabs a[aria-current="page"] .tn{background:var(--on-fg);color:var(--fg)}
.hero,.page{background:var(--panel);border-radius:32px;box-shadow:var(--shadow);padding:36px}
.hero{display:flex;gap:28px;align-items:center;justify-content:space-between}
.hero h1,.page h1{margin:0;font-weight:700;font-size:clamp(30px,4.6vw,48px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.page h1{margin-top:2px;font-size:clamp(28px,3.4vw,38px)}
.lead{margin:14px 0 22px;font-size:19px;font-weight:700;max-width:40ch}
.need{margin:18px 0 0;font-size:14px;color:var(--muted);max-width:52ch}
.cta{display:inline-block;text-decoration:none;font-family:var(--display);font-weight:700;font-size:18px;padding:14px 30px;border-radius:999px;background:var(--go);color:var(--go-ink);box-shadow:0 5px 0 var(--go-edge);transition:transform .08s,box-shadow .08s}
.cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--go-edge)}
.steps,.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:8px}
.step,.card{background:var(--panel);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;color:inherit;text-decoration:none}
.card{background:var(--panel-2)}
.step:hover{box-shadow:inset 0 0 0 3px var(--accent)}
.step .sn{font-size:14px;font-weight:700;color:var(--accent)}
.step strong,.card strong{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.15}
.step .sd,.card p{margin:0;font-size:15px;color:var(--muted)}
.sp{margin-top:auto;font-size:13px;font-weight:700;border-radius:999px;padding:4px 12px;background:var(--ok-bg);color:var(--ok-ink)}
.sp.soon,.card .soon{background:var(--xp-bg);color:var(--xp)}
.card .soon{font-size:13px;font-weight:700;border-radius:999px;padding:4px 12px}
button.card{border:0;text-align:left;transition:box-shadow .15s}
button.card:hover:not(:disabled){box-shadow:inset 0 0 0 3px var(--accent)}
button.card:disabled{opacity:.55;cursor:default}
.card .soon.ok{background:var(--ok-bg);color:var(--ok-ink)}
.view.prac .chapters,.view.prac .map{display:none}
.sub{margin:26px 0 6px;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2}
.subnote{margin:0 0 14px;font-size:15px;color:var(--muted)}
.howlist{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:6px;max-width:60ch}
.rbrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
button.cta{border:0}
.ghost{border:2px solid var(--xp-line);background:var(--panel);color:var(--xp);border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px}
.ghost:hover{background:var(--xp-bg-2)}
.rbsum{margin:0;font-weight:700}
.rbfind{width:100%;max-width:420px;border:2px solid var(--line);border-radius:999px;padding:10px 18px;background:var(--panel);margin-bottom:14px}
.duos{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.duo{border:0;text-align:left;background:var(--panel-2);border-radius:20px;padding:14px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:4px 14px;align-items:center}
.duo:hover{box-shadow:inset 0 0 0 3px var(--line)}
.duo[aria-pressed="true"]{background:var(--hi);box-shadow:inset 0 0 0 3px var(--accent)}
.duo .pt{min-width:0;display:flex;flex-direction:column}
.duo .pt b{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duo .pt span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duo .ar{font-family:var(--display);font-weight:700;font-size:20px;color:var(--accent)}
.duo .why{grid-column:1/-1;font-size:14px;color:var(--muted)}
.duo .why b{color:var(--ok-ink);background:var(--ok-bg);border-radius:999px;padding:2px 10px;font-size:13px;margin-right:8px}
.missions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.missions label{display:flex;gap:14px;align-items:flex-start;background:var(--panel-2);border-radius:20px;padding:14px 18px;cursor:pointer}
.missions input{flex:none;width:24px;height:24px;margin:2px 0 0;accent-color:var(--ok)}
.missions strong{display:block;font-family:var(--display);font-weight:600;font-size:17px}
.missions span{font-size:15px;color:var(--muted)}
.missions li.done label{background:var(--ok-bg)}
.rbdone{margin:16px 0 0;font-weight:700;background:var(--hi);border-radius:18px;padding:12px 16px}
.rbmsg{margin:14px 0 0;font-weight:700;color:var(--bad)}
.rbmsg:empty{display:none}
@media (max-width:600px){.duo{grid-template-columns:1fr}.duo .ar{display:none}}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px}
.choices .ask{grid-column:1/-1;margin:0;font-family:var(--display);font-weight:600;font-size:18px}
.choice{border:0;text-align:left;background:var(--panel-2);border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;transition:box-shadow .15s}
.choice:hover{box-shadow:inset 0 0 0 3px var(--accent)}
.choice[aria-pressed="true"]{background:var(--hi);box-shadow:inset 0 0 0 3px var(--accent)}
.choice strong{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2}
.choice span{font-size:14px;color:var(--muted)}
.path-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.path-head .sub{margin:0}
.stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.stages li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--panel-2);border-radius:20px;padding:12px 16px}
.stages li.now{background:var(--hi);box-shadow:inset 0 0 0 3px var(--accent)}
.stages .num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--panel);font-family:var(--display);font-weight:700;color:var(--muted)}
.stages li.done .num{background:var(--ok);color:var(--ink)}
.stages li.now .num{background:var(--accent);color:var(--ink)}
.stages strong{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
.stages div span{font-size:14px;color:var(--muted)}
.stages .sp{margin-top:0;white-space:nowrap}
@media (max-width:600px){.choices{grid-template-columns:1fr}.stages li{grid-template-columns:auto minmax(0,1fr)}.stages .sp{grid-column:2;justify-self:start}}
a.chip.status{color:var(--muted)}a.chip.status.on{color:var(--fg)}
.tgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.tscroll{overflow-x:auto;background:var(--panel-2);border-radius:22px;padding:10px}
:is(#tSvg,#vfSvg){display:block;width:100%;min-width:620px;height:auto}
:is(#tSvg,#vfSvg) .body{fill:none;stroke:var(--line);stroke-width:2}
:is(#tSvg,#vfSvg) text{fill:var(--muted);font-family:var(--sans);font-size:11px;font-weight:700;pointer-events:none}
:is(#tSvg,#vfSvg) .tc{cursor:pointer;outline:none}
:is(#tSvg,#vfSvg) .tc>circle,:is(#tSvg,#vfSvg) .tc>rect{fill:var(--panel);stroke:var(--line);stroke-width:2;transition:fill .15s}
:is(#tSvg,#vfSvg) .tc .in,:is(#tSvg,#vfSvg) .tc .cap{fill:var(--slot)}
:is(#tSvg,#vfSvg) .tc .hit,:is(#tSvg,#vfSvg) .tc:hover>.hit,:is(#tSvg,#vfSvg) .tc.site>.hit{fill:transparent;stroke:none}
:is(#tSvg,#vfSvg) .mk{stroke:var(--muted);stroke-width:3;stroke-linecap:round}
:is(#tSvg,#vfSvg) .mkf{fill:var(--muted)}
:is(#tSvg,#vfSvg) .tc.site.ta>circle,:is(#tSvg,#vfSvg) .tc.site.ta>rect{stroke:var(--a)}
:is(#tSvg,#vfSvg) .tc.site.tb>circle,:is(#tSvg,#vfSvg) .tc.site.tb>rect{stroke:var(--b)}
:is(#tSvg,#vfSvg) .tc.site.tm>circle,:is(#tSvg,#vfSvg) .tc.site.tm>rect{stroke:var(--xp)}
:is(#tSvg,#vfSvg) .tc:hover>circle,:is(#tSvg,#vfSvg) .tc:hover>rect{fill:var(--line)}
:is(#tSvg,#vfSvg) .tc:focus-visible>circle,:is(#tSvg,#vfSvg) .tc:focus-visible>rect{stroke:var(--fg);stroke-width:3}
:is(#tSvg,#vfSvg) .tc.sel>circle,:is(#tSvg,#vfSvg) .tc.sel>rect{fill:var(--hi);stroke:var(--fg);stroke-width:3}
:is(#tSvg,#vfSvg) .tc.live>circle,:is(#tSvg,#vfSvg) .tc.live>rect{fill:var(--go)}
.tpanel{background:var(--panel-2);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-height:150px}
.tpanel strong{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2}
.tpanel p{margin:0;font-size:15px;color:var(--muted)}
.tpanel .tlive{color:var(--fg);font-weight:700}
.tnote{margin:14px 0;font-size:14px;color:var(--muted)}
/* Lot 19 : une autre table que la FLX4 (bandeau, « Régler ma table ») */
.tablebar{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin:0 0 16px;padding:14px 18px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.tablebar p{margin:0;flex:1 1 320px;font-size:15px;line-height:1.45}
.regtext{margin:0;color:var(--muted);line-height:1.5}
.regstate{margin:0;padding:12px 14px;border-radius:14px;background:var(--panel-2);font-weight:600;color:var(--muted)}
.regstate:empty{display:none}
.regstate.ok{color:var(--ok)}
.regstate.warn{color:var(--fg)}
.reglist{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.reglist li{padding:9px 12px;border-radius:12px;background:var(--panel-2);color:var(--muted)}
.reglist li.ok{color:var(--fg)}
/* Schéma vivant : aiguille des potards (foncée sur un potard allumé), bouton appuyé */
.onb-svg .ndl{stroke:var(--fg);stroke-width:2.5;stroke-linecap:round}
.onb-svg .hl + .ndl{stroke:var(--ink)}
.onb-svg .press{fill:var(--fg)}
.tnote:empty{display:none}
/* Quiz (question bonus, quiz éclair) et badges */
.quiz{position:fixed;inset:0;z-index:31;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px;overflow:auto}
.qcard{position:relative;background:var(--panel);border-radius:32px;box-shadow:var(--shadow);padding:28px;max-width:560px;width:100%;display:flex;flex-direction:column;gap:14px}
.qcard h2{margin:0 44px 0 0;font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2;text-wrap:balance}
.qopts{display:flex;flex-direction:column;gap:8px}
.qopt{border:0;text-align:left;background:var(--panel-2);border-radius:18px;padding:14px 16px;font-weight:600;transition:box-shadow .15s}
.qopts:not(.done) .qopt:hover{box-shadow:inset 0 0 0 3px var(--accent)}
.qopts.done .qopt{cursor:default}
.qopt.ok{background:var(--ok-bg);color:var(--ok-ink);box-shadow:inset 0 0 0 3px var(--ok)}
.qopt.bad{box-shadow:inset 0 0 0 3px var(--bad)}
.qwhy{margin:0;font-size:15px;background:var(--panel-2);border-radius:16px;padding:12px 14px}
.qcard .rbtn{align-self:center}
.newbadge{margin:0;font-weight:700;color:var(--mid)}
/* Tests avec des débutants : « Mon avis », « C'était clair ? » */
.avq{display:flex;flex-direction:column;gap:6px;font-weight:600}
.avq textarea,.avtext{width:100%;border:2px solid var(--line);border-radius:14px;background:var(--panel-2);padding:10px 12px;font:inherit;font-weight:400;color:inherit;resize:vertical}
.avq textarea:focus,.avtext:focus{outline:none;border-color:var(--xp)}
.avnote,.clair{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.avnote span{font-weight:600;margin-right:4px}
.avnote button,.clair button{border:2px solid var(--line);background:var(--panel-2);border-radius:999px;min-width:42px;padding:6px 12px;font-weight:700}
.avnote button[aria-pressed="true"],.clair button[aria-pressed="true"]{background:var(--xp);border-color:var(--xp);color:var(--ink)}
.clair{justify-content:center;font-size:15px}
.clair .merci{color:var(--ok);font-weight:700}
.avh{margin:8px 0 0;font-family:var(--display);font-weight:700;font-size:18px}
.avsmall{margin:0;font-size:14px;color:var(--muted)}
.avreset summary{cursor:pointer;color:var(--muted);font-size:14px;text-decoration:underline}
.avreset[open]{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.avreset .rbtn{border-color:var(--bad);color:var(--bad)}
.avbtn{color:var(--xp)}
.howlist a{color:var(--xp);font-weight:700}
@media (max-width:600px){.avnote span{flex-basis:100%}}
/* Lot 8 : guide « Les parties d'un morceau », lexique, plus de badges */
.onb-parts{display:flex;gap:4px;width:100%}
.onb-parts span{flex-basis:0;min-width:0;border-radius:8px;padding:8px 6px;font-size:13px;font-weight:700;text-align:center;background:color-mix(in srgb,var(--a) 30%,var(--panel));color:var(--fg)}
.onb-parts span.full{background:var(--a);color:var(--ink)}
.onb-lex{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;width:100%;font-size:15px}
.onb-lex dt{font-weight:700}
.onb-lex dd{margin:0;color:var(--muted)}
.lex{white-space:pre-line;border-left:3px solid var(--xp-line);padding-left:10px}
/* Lot 9 : objectif du jour */
.goalbox{display:flex;align-items:center;gap:16px;margin-top:22px;background:var(--panel-2);border-radius:22px;padding:14px 18px;max-width:520px}
.gring{flex:none;width:64px;height:64px;transform:rotate(-90deg)}
.gring circle{fill:none;stroke-width:7}
.gtrack{stroke:var(--track)}
.gfill{stroke:var(--xp);stroke-linecap:round;stroke-dasharray:169.6;stroke-dashoffset:169.6;transition:stroke-dashoffset .6s}
.goalbox.done .gfill{stroke:var(--go)}
.gtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gtxt strong{font-family:var(--display);font-weight:700;font-size:17px}
.gtxt>span{font-size:14px;color:var(--muted)}
.gset{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:13px}
.gset span{color:var(--muted);margin-right:2px}
.gset button{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 10px;font-weight:700;font-size:13px}
.gset button[aria-pressed="true"]{background:var(--xp);border-color:var(--xp);color:var(--ink)}
.goalline{margin:0;font-weight:700;color:var(--muted)}
.goalline.done{color:var(--ok)}
/* Lot 10 : page de présentation (presentation.html) */
.pres .top{flex-wrap:nowrap}
a.ghost{text-decoration:none;display:inline-block}
.pres-hero h1{max-width:18ch}
.pres-h2{margin:4px 0 18px;font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.15;text-wrap:balance}
.pres-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;align-items:center;padding:22px 0;border-top:1px solid var(--line)}
.pres-step img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);display:block}
.pres-txt h3{margin:8px 0 6px;font-family:var(--display);font-weight:700;font-size:22px}
.pres-txt p{margin:0 0 10px;color:var(--muted)}
.pres-n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--ink);font-weight:800}
.pres-faq{display:flex;flex-direction:column;gap:8px}
.pres-faq details{background:var(--panel-2);border-radius:16px;padding:14px 16px}
.pres-faq summary{cursor:pointer;font-weight:700}
.pres-faq p{margin:8px 0 0;color:var(--muted)}
.pres-end{justify-content:center;text-align:center}
.pres-end .rbrow{justify-content:center}
@media (max-width:760px){.pres-step{grid-template-columns:1fr;gap:14px}.pres .top .ghost{padding:7px 12px;font-size:14px}}
/* Lot 11 : rangement (pastille du niveau, parcours replié, « Mes progrès », chapitres et style repliés, carte de résultat) */
a.lvlchip{color:inherit;text-decoration:none}
a.lvlchip:hover{border-color:var(--muted)}
.lvlchip .star{color:var(--mid);margin-left:4px}
.pathbox{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:20px 24px}
.pathbox details{width:100%}
.pathbox summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:17px}
.pathbox details[open] summary{margin-bottom:14px}
#progGoalSet{margin-top:0}
.chapsel{position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.chapbtn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 16px;font-family:var(--display);font-weight:700;font-size:15px}
.chapbtn::after,.stylebtn::after{content:" ▾";color:var(--muted)}
.chapbtn[aria-expanded="true"]::after,.stylebtn[aria-expanded="true"]::after{content:" ▴"}
.chapsel .chapters{flex-wrap:wrap;overflow:visible}
.view.prac .chapsel{display:none}
.stylepick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stylebtn{border:1px solid var(--line);background:var(--panel-2);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px}
.rmeta{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 14px;font-size:14px}
.rmeta .gain{font-size:15px}
.rmeta>span:empty{display:none}
details.cmp summary{cursor:pointer;font-weight:700;color:var(--xp);font-size:14px}
details.cmp[open] summary{margin-bottom:8px}
.clair{font-size:14px;color:var(--muted)}
.clair button{padding:4px 10px;min-width:0;font-size:13px}
/* Lot 12 : Passer au vrai, une étape à la fois */
.rbdots{display:flex;gap:8px;margin:0 0 14px}
.rbdots span{width:14px;height:14px;border-radius:50%;background:var(--track)}
.rbdots span.done{background:var(--ok)}
.rbdots span.now{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.missions li.now{display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:var(--panel-2);border-radius:22px;padding:6px 6px 16px}
.missions li.now label{background:none;padding:12px 14px 0}
.missions li.now strong{font-size:20px}
.missions li.now span{font-size:16px;color:var(--fg)}
.rbok{margin-left:52px;font-size:16px;padding:10px 24px}
.rbmis-row{margin-top:14px}
/* Lot 17 : « Passer au vrai » visuel (paire du jour, deux platines, trois pastilles) */
.linkbtn{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:14px;padding:6px 4px}
.linkbtn:hover{color:var(--fg)}
.rbempty .lead{max-width:46ch}
.rbsteps{list-style:none;margin:6px 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rbsteps li{background:var(--panel-2);border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.rbsteps strong{font-family:var(--display);font-weight:700;font-size:17px}
.rbsteps li>span:last-child{font-size:14px;color:var(--muted)}
.rbn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--ink);font-weight:800;margin-bottom:6px}
.rbtop{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-bottom:14px}
.rbtop .rbsum{margin:0 auto 0 0;color:var(--muted);font-weight:600}
.rbhero{background:var(--panel-2);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.rbdecks{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center;width:100%}
.rbdeck{display:flex;gap:14px;align-items:center;background:var(--panel);border-radius:22px;padding:16px;min-width:0}
.rbdeck>div{display:flex;flex-direction:column;min-width:0}
.rbdeck strong{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.rbside{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.rba .rbside{color:var(--a)}.rbb .rbside{color:var(--b)}
.rbart{color:var(--muted);font-size:14px}
.rbmeta{margin-top:6px;font-size:13px;font-weight:600;color:var(--fg)}
.rbdisc{flex:none;width:56px;height:56px;border-radius:50%;background:repeating-radial-gradient(circle,var(--panel-2) 0 2px,var(--bg) 2px 4px);position:relative;box-shadow:inset 0 0 0 3px var(--c)}
.rbdisc::after{content:"";position:absolute;inset:20px;border-radius:50%;background:var(--c)}
.rba .rbdisc{--c:var(--a)}.rbb .rbdisc{--c:var(--b)}
.rbto{font-size:26px;color:var(--muted)}
.rbchips{display:flex;gap:8px;flex-wrap:wrap}
.rbchip{border-radius:999px;padding:6px 12px;font-size:14px;background:var(--panel);color:var(--muted)}
.rbchip b{font-weight:700}
.rbchip.ok b{color:var(--ok)}
.rbchip.mid b{color:var(--mid)}
@media (max-width:760px){.rbsteps{grid-template-columns:1fr}.rbdecks{grid-template-columns:1fr}.rbto{justify-self:center;transform:rotate(90deg)}}
/* Lot 18 : position de départ dessinée, encadré « Pendant le niveau », fiches */
.pic{display:inline-block;width:22px;height:22px;vertical-align:-6px;margin-right:8px}
.pic svg{width:100%;height:100%;display:block}
.pic .dial{fill:none;stroke:var(--line);stroke-width:2.5}
.pic .track{fill:var(--line)}
.pic .cap{fill:var(--c);stroke:var(--c);stroke-width:3;stroke-linecap:round}
.pic.pa{--c:var(--a)}.pic.pb{--c:var(--b)}
.plan{background:var(--panel-2);border-radius:18px;padding:12px 16px;display:flex;flex-direction:column;gap:6px;max-width:560px;margin-top:12px}
.plan h3{margin:0;font-family:var(--display);font-weight:700;font-size:15px;color:var(--muted)}
.plan ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:2px;font-weight:600;font-size:15px}
.plan p{margin:0;color:var(--muted);font-size:13px}
.start-row{flex-wrap:wrap}
.lfiches{display:flex;flex-wrap:wrap;gap:0 14px;margin-top:6px}
.page-note{margin:20px 0 0;font-size:15px;color:var(--muted)}
.page-note a{color:var(--xp);font-weight:700}
@media (max-width:760px){.hero,.page{padding:24px;border-radius:26px}.steps{grid-template-columns:1fr}}
@media (max-width:600px){.tabs{align-self:stretch}.tabs a{flex:1;padding:9px 6px;font-size:14px}.tabs a .tn{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}
/* Lot 23 : « Mes progrès » rangée en cartes, badges en médailles */
.pg{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.pgcard{background:var(--panel-2);border-radius:22px;padding:18px 20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pgrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pgcard.pgrow{flex-direction:row}
.pgleft{justify-content:flex-start;gap:16px}
.pgcard .pgbig{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em}
.pgsub{font-size:14px;color:var(--muted)}
.pgcard strong{display:block;font-family:var(--display);font-weight:700;font-size:17px}
.pgcard .sub{margin:0}
.pgbar{height:10px;border-radius:5px;background:var(--track);overflow:hidden}
.pgbar i{display:block;height:100%;width:0;border-radius:5px;background:var(--accent)}
.pgduo{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pgring{flex:none;width:58px;height:58px;transform:rotate(-90deg)}
.pgring circle{fill:none;stroke-width:7}
.pgflame{flex:none;width:44px;height:44px;fill:none;stroke:var(--mid);stroke-width:2;stroke-linejoin:round}
.pgday .linkbtn{align-self:flex-start;padding:0}
.pgnext{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
.pgnextt{flex:1 1 220px;display:flex;flex-direction:column;gap:4px;min-width:0}
.pgnextt .pgbar{margin-top:6px}
.medals{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px 8px}
.medal button{width:100%;background:none;border:0;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--fg);border-radius:16px}
.medal button[aria-pressed="true"]{background:var(--panel)}
.mdisc{display:grid;place-items:center;width:72px;height:72px;border-radius:50%}
.mdisc svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.medal.won .mdisc{background:var(--medal-bg);color:var(--mid);box-shadow:inset 0 0 0 3px var(--mid)}
.medal.off .mdisc{background:var(--panel);color:var(--muted);box-shadow:inset 0 0 0 2px var(--line)}
.medal strong{font-family:var(--sans);font-size:13px;font-weight:600;text-align:center;line-height:1.25}
.medal.off strong{color:var(--muted)}
.pgnext .mdisc{width:64px;height:64px;color:var(--fg);box-shadow:none;border:2px dashed var(--line)}
.pginfo{margin:6px 0 0}
.pgchaps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pgch{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;background:none;border:0;padding:8px 6px;border-radius:12px;color:var(--fg);text-align:left;font-size:15px;font-weight:600}
button.pgch:hover{background:var(--panel)}
.pgch .pgbar{grid-column:1/-1}
.locked .pgch{color:var(--muted);font-weight:500}
@media (max-width:520px){.medals{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:12px 4px}.mdisc{width:60px;height:60px}.mdisc svg{width:26px;height:26px}
  .pgch{grid-template-columns:minmax(0,1fr);gap:4px}.pgcard{padding:16px}}
/* ---------- Vini, la mascotte (lot 28) : dessin dans js/vini.js ---------- */
.vini{display:block;flex-shrink:0}
.vini svg{display:block;width:100%;height:100%;overflow:visible}
.vn-m3{fill:var(--vini-300)} .vn-m5{fill:var(--vini-500)} .vn-m6{fill:var(--vini-600)} .vn-m7{fill:var(--vini-700)}
.vn-cr{fill:var(--vini-cream)} .vn-ink{fill:var(--vini-ink)} .vn-dk{fill:var(--vini-dk)} .vn-dk2{fill:var(--vini-dk2)} .vn-dk3{fill:var(--vini-dk3)}
.vn-sp{fill:var(--vini-spark)} .vn-dr{fill:var(--vini-drop)} .vn-tg{fill:var(--vini-tongue)} .vn-sh{fill:var(--vini-shadow)}
.vn-st{fill:none;stroke-linecap:round;stroke-linejoin:round}
.vn-s-ink{stroke:var(--vini-ink)} .vn-s-m6{stroke:var(--vini-600)} .vn-s-dk{stroke:var(--vini-dk)} .vn-s-dk3{stroke:var(--vini-dk3)}
.vn-bras{stroke-width:15} .vn-sillon{stroke-width:2;opacity:.5} .vn-r1{opacity:.55} .vn-r2{opacity:.3}
.vn-anneau{stroke:var(--vini-ring);stroke-width:2.5} .vn-fossette{stroke-width:3} .vn-sourcil{stroke-width:3.5}
.vn-arceau{stroke-width:14} .vn-arceau2{stroke-width:3.5;opacity:.9}
.vn-f{display:none}
.vn-danse .vn-fd,.vn-danse .vn-fb,.vn-danse .vn-fn,.vn-rate .vn-fr,.vn-rate .vn-fb,.vn-parfait .vn-fp,.vn-calme .vn-fd,.vn-calme .vn-fb{display:inline}
.vn-corps{transform-box:view-box;transform-origin:120px 240px}
.vn-danse .vn-corps{animation:vn-bob var(--vini-beat) infinite cubic-bezier(.3,.7,.4,1);animation-delay:var(--vini-delay,0s)}
.vn-parfait .vn-corps{animation:vn-joie calc(var(--vini-beat)*2) infinite cubic-bezier(.3,.7,.4,1)}
.vn-rate .vn-corps{animation:vn-triste 2.4s infinite ease-in-out}
.vn-ombre{transform-box:view-box;transform-origin:120px 246px}
.vn-danse .vn-ombre{animation:vn-ombre var(--vini-beat) infinite cubic-bezier(.3,.7,.4,1);animation-delay:var(--vini-delay,0s)}
.vn-parfait .vn-ombre{animation:vn-ombre-joie calc(var(--vini-beat)*2) infinite cubic-bezier(.3,.7,.4,1)}
.vn-yeux{transform-box:fill-box;transform-origin:50% 50%;animation:vn-cligne 4.2s infinite}
.vn-reflet{transform-box:view-box;transform-origin:120px 132px;animation:vn-tourne 1.9s linear infinite}
.vn-etoile{transform-box:fill-box;transform-origin:50% 50%;animation:vn-scintille calc(var(--vini-beat)*2) infinite ease-in-out}
.vn-etoile.vn-t2{animation-delay:calc(var(--vini-beat)*-.6)} .vn-etoile.vn-t3{animation-delay:calc(var(--vini-beat)*-1.2)}
.vn-note{transform-box:fill-box;transform-origin:50% 50%;animation:vn-note calc(var(--vini-beat)*4) infinite ease-out;opacity:0}
.vn-note.vn-n2{animation-delay:calc(var(--vini-beat)*-2)}
.vn-goutte{transform-box:fill-box;transform-origin:50% 0%;animation:vn-goutte 2.4s infinite ease-in}
@keyframes vn-bob{0%{transform:translateY(0) scale(1.07,.93)}35%{transform:translateY(-9px) scale(.97,1.04)}70%{transform:translateY(-2px) scale(1,1)}100%{transform:translateY(0) scale(1.07,.93)}}
@keyframes vn-ombre{0%,100%{transform:scale(1.05,1);opacity:.4}35%{transform:scale(.82,.8);opacity:.25}}
@keyframes vn-joie{0%{transform:translateY(0) scale(1.1,.9)}25%{transform:translateY(-30px) scale(.94,1.07) rotate(-4deg)}50%{transform:translateY(-34px) scale(.98,1.02) rotate(3deg)}80%{transform:translateY(0) scale(1.08,.92)}100%{transform:translateY(0) scale(1.1,.9)}}
@keyframes vn-ombre-joie{0%,80%,100%{transform:scale(1.06,1);opacity:.4}25%,50%{transform:scale(.62,.7);opacity:.18}}
@keyframes vn-triste{0%,100%{transform:rotate(-2.5deg) translateY(3px)}50%{transform:rotate(2.5deg) translateY(3px)}}
@keyframes vn-cligne{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.12)}}
@keyframes vn-tourne{to{transform:rotate(360deg)}}
@keyframes vn-scintille{0%,100%{transform:scale(0) rotate(0);opacity:0}30%{transform:scale(1.15) rotate(25deg);opacity:1}60%{transform:scale(.9) rotate(45deg);opacity:1}}
@keyframes vn-note{0%{transform:translate(0,10px) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(14px,-46px) scale(1) rotate(12deg);opacity:0}}
@keyframes vn-goutte{0%,40%{transform:translateY(-4px) scale(.6);opacity:0}55%{opacity:1}100%{transform:translateY(14px) scale(1);opacity:0}}

/* ---------- Premiers pas (lot 28) : une question par écran, Vini qui parle, un gros bouton en bas ---------- */
html.pp-open,html.pp-open body{overflow:hidden}
.pp{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;justify-content:center;overflow:auto}
.pp-col{width:100%;max-width:600px;min-height:100%;display:flex;flex-direction:column;gap:22px;padding:18px 18px calc(22px + env(safe-area-inset-bottom, 0px))}
.pp-col:focus{outline:none}
.pp-top{display:flex;align-items:center;gap:12px}
.pp-back{width:44px;height:44px;flex-shrink:0;border:0;background:none;padding:0;display:grid;place-items:center;color:var(--muted);cursor:pointer;border-radius:12px}
.pp-back svg{width:26px;height:26px}
.pp-back[hidden]{display:grid!important;visibility:hidden}
.pp-bar{flex:1;height:16px;border-radius:8px;background:var(--track);position:relative;overflow:hidden}
.pp-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;background:var(--brand);transition:width .45s cubic-bezier(.3,1.3,.5,1)}
.pp-bar i::after{content:"";position:absolute;left:8px;right:8px;top:3.5px;height:4px;border-radius:2px;background:var(--brand-light);opacity:.8}
.pp-skip{flex-shrink:0;min-height:44px;padding:0 6px;border:0;background:none;color:var(--muted);font:inherit;font-weight:800;cursor:pointer}
.pp-skip:hover,.pp-back:hover{color:var(--fg)}
.pp-body{display:flex;flex-direction:column;gap:20px;flex:1}
.pp-in{animation:pp-in .32s cubic-bezier(.2,.8,.3,1)}
.pp-in-back{animation:pp-in-back .32s cubic-bezier(.2,.8,.3,1)}
@keyframes pp-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes pp-in-back{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.pp-head{display:flex;align-items:center;gap:12px}
.pp-head .vini{width:118px;height:128px}
.pp-bubble{position:relative;flex:1;margin:0;background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:14px 18px;font-size:20px;font-weight:800;line-height:1.3}
.pp-bubble::before{content:"";position:absolute;left:-10px;top:26px;width:16px;height:16px;background:var(--panel);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.pp-hero .pp-head{flex-direction:column-reverse;gap:18px;margin-top:4vh}
.pp-hero .pp-head .vini{width:220px;height:238px}
.pp-hero .pp-bubble{flex:none;text-align:center;font-size:22px;max-width:440px}
.pp-hero .pp-bubble::before{left:50%;top:auto;bottom:-10px;margin-left:-8px;border-left:0;border-right:2px solid var(--line)}
.pp-opts{display:flex;flex-direction:column;gap:12px}
.pp-opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;min-height:70px;padding:12px 18px;font:inherit;font-size:18px;font-weight:800;line-height:1.25;color:var(--fg);
  background:var(--bg);border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;cursor:pointer;transition:transform .08s ease,background .15s ease,border-color .15s ease}
.pp-opt:hover{background:var(--panel)}
.pp-opt:active{transform:translateY(3px)}
.pp-opt[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);border-bottom-color:var(--brand-edge);animation:pp-pop .28s ease-out}
@keyframes pp-pop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.pp-opt .pp-ic{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;color:var(--brand-light)}
.pp-opt .pp-ic svg{width:100%;height:100%}
.pp-b-on{fill:var(--brand)} .pp-b-off{fill:var(--line)}
.pp-opt .pp-txt{flex:1;display:flex;flex-direction:column;gap:2px}
.pp-opt .pp-sub{font-size:15px;font-weight:600;color:var(--muted)}
.pp-opt[aria-pressed="true"] .pp-sub{color:var(--brand-light)}
.pp-opt .pp-tag{font-size:16px;font-weight:700;color:var(--muted)}
.pp-opt[aria-pressed="true"] .pp-tag{color:var(--brand-light)}
.pp-opt .pp-check{width:28px;height:28px;flex-shrink:0;border:2px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--on-brand)}
.pp-opt .pp-check svg{width:18px;height:18px;opacity:0}
.pp-opt[aria-pressed="true"] .pp-check{background:var(--brand);border-color:var(--brand)}
.pp-opt[aria-pressed="true"] .pp-check svg{opacity:1}
.pp-opt.pp-big{min-height:104px;padding:16px 18px}
.pp-opt.pp-big .pp-ic{width:56px;height:56px}
.pp-opt{position:relative}
.pp-badge{position:absolute;top:-13px;right:16px;background:var(--brand);color:var(--on-brand);font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:9px}
.pp-opts.pp-espace{gap:22px;padding-top:8px}
.pp-note{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--brand-soft);border:2px solid var(--brand-line);font-size:17px;font-weight:700;line-height:1.4;animation:pp-monte .35s ease-out}
.pp-note b{color:var(--brand-light);font-weight:900}
.pp-note svg{width:34px;height:34px;flex-shrink:0}
@keyframes pp-monte{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.pp-foot{position:sticky;bottom:0;padding-top:8px;background:linear-gradient(transparent,var(--bg) 30%)}
.pp-go{width:100%;min-height:56px;border:0;border-bottom:5px solid var(--brand-edge);border-radius:16px;background:var(--brand);color:var(--on-brand);font:inherit;font-size:18px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .08s ease}
.pp-go:active{transform:translateY(3px)}
.pp-go:disabled{background:var(--off);border-bottom-color:var(--off-edge);color:var(--off-ink);cursor:default;transform:none}
.pp-go:focus-visible,.pp-opt:focus-visible,.pp-back:focus-visible,.pp-skip:focus-visible{outline:3px solid var(--brand-light);outline-offset:3px}
@media (max-width:420px){.pp-head .vini{width:96px;height:104px}.pp-bubble{font-size:18px}.pp-opt{font-size:17px}}
@media (prefers-reduced-motion: reduce){.vini *,.pp-in,.pp-in-back,.pp-opt,.pp-note,.pp-bar i{animation:none!important;transition:none!important}}

/* ---------- Ça bouge (lot 29) : Vini dans les niveaux, carte de résultat, écran de la série ---------- */
.buddy .vini{width:84px;height:91px}
.buddy .bubble{position:relative}
.buddy .vini + .bubble::before{content:"";position:absolute;left:-6px;bottom:20px;width:14px;height:14px;background:var(--hi);transform:rotate(45deg);border-radius:2px}
.rvini{width:132px;height:143px;margin:-4px auto -8px}
.rcard h2.win{color:var(--mid)}
.rstats{display:flex;justify-content:center;gap:10px}
.rstat{flex:1 1 0;max-width:170px;border:3px solid var(--line);border-radius:16px;overflow:hidden;animation:rstat-in .4s ease-out both}
.rstat:nth-child(2){animation-delay:.12s} .rstat:nth-child(3){animation-delay:.24s}
.rstat .rlab{display:block;padding:5px 4px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.rstat .rval{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 4px;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.rstat .rval svg{width:20px;height:20px;flex-shrink:0}
.rstat.xp{border-color:var(--mid)} .rstat.xp .rlab{background:var(--mid)} .rstat.xp .rval{color:var(--mid)}
.rstat.prec{border-color:var(--ok)} .rstat.prec .rlab{background:var(--ok)} .rstat.prec .rval{color:var(--ok)}
.rstat.temps{border-color:var(--brand)} .rstat.temps .rlab{background:var(--brand);color:var(--on-brand)} .rstat.temps .rval{color:var(--brand-light)}   /* texte blanc : le violet du lot 36 est trop sombre pour --ink */
@keyframes rstat-in{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.serie{position:fixed;inset:0;z-index:41;background:var(--bg);display:flex;justify-content:center;overflow:auto}
.serie-col{width:100%;max-width:480px;min-height:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 18px calc(24px + env(safe-area-inset-bottom, 0px))}
.serie .serie-bulle{flex:none;text-align:center;max-width:380px}
.serie .serie-bulle::before{left:50%;top:auto;bottom:-10px;margin-left:-8px;border-left:0;border-right:2px solid var(--line)}
.serie-scene{display:flex;align-items:flex-end;justify-content:center;margin-top:22px}
.serie-flamme{width:136px;height:196px;transform-origin:50% 100%;animation:serie-flamme calc(var(--vini-beat)*2) infinite ease-in-out}
.serie-flamme .sf1{fill:var(--mid)} .serie-flamme .sf2{fill:var(--vini-spark)}
.serie-scene .vini{width:176px;height:191px;margin-left:-34px}
.serie-num{font-size:120px;line-height:1;font-weight:900;color:var(--mid);margin-top:10px;animation:serie-num .55s cubic-bezier(.3,1.5,.5,1) both .2s}
.serie-txt{font-size:28px;font-weight:900;color:var(--mid)}
.serie-sem{list-style:none;margin:22px 0 28px;padding:0;width:100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.serie-sem li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:15px;font-weight:900;color:var(--muted)}
.serie-sem i{width:40px;height:40px;border-radius:50%;background:var(--off);display:grid;place-items:center;color:var(--ink)}
.serie-sem svg{width:22px;height:22px}
.serie-sem li.fait i{background:var(--mid)}
.serie-sem li.auj{color:var(--mid)}
.serie-sem li.auj.fait i{animation:serie-jour .45s cubic-bezier(.3,1.6,.5,1) both .7s}
.serie .pp-go{margin-top:auto}
@keyframes serie-flamme{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(1.04,.95) skewX(-3deg)}65%{transform:scale(.97,1.05) skewX(3deg)}}
@keyframes serie-num{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes serie-jour{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.rstat .rlab,.rstat .rval{white-space:nowrap}
@media (max-width:420px){.rvini{width:104px;height:113px}.rstats{gap:6px}.rstat .rval{font-size:19px;padding:9px 2px}.rstat .rval svg{display:none}.rstat .rlab{font-size:10.5px;letter-spacing:.02em;padding:5px 2px}}
@media (prefers-reduced-motion: reduce){.rstat,.serie-flamme,.serie-num,.serie-sem i{animation:none!important}}

/* ---------- Quêtes du jour (lot 30) : sur l'accueil, sous la prochaine étape ---------- */
.quetes{padding:0;overflow:hidden}
.qt-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px 10px;background:var(--brand-soft);border-bottom:2px solid var(--brand-line)}
.qt-head h2{margin:0;font-size:24px;font-weight:900}
.qt-head p{margin:2px 0 0;color:var(--brand-light);font-weight:700;font-size:15px}
.qt-list{list-style:none;margin:0;padding:6px 22px 14px;display:flex;flex-direction:column}
.qt{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.qt:last-child{border-bottom:0}
.qt-ic{width:34px;height:34px;flex-shrink:0;color:var(--brand-light)}
.qt-ic svg{width:100%;height:100%}
.qt-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.qt-mid strong{font-size:17px;font-weight:800}
.qt-haut{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.qt-bar{position:relative;height:12px;border-radius:6px;background:var(--qt-ok);overflow:hidden}
.qt-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--brand);transition:width .5s cubic-bezier(.3,1.3,.5,1)}
.qt.faite .qt-bar i{background:var(--mid)}
.qt-n{flex-shrink:0;font-size:15px;font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums}
.qt-coffre{position:relative;width:56px;height:56px;flex-shrink:0;border:0;background:none;padding:4px;cursor:pointer;border-radius:14px}
.qt-coffre svg{width:100%;height:100%;overflow:visible}
.qt-coffre .qt-bois{fill:var(--brand)} .qt-coffre .qt-bois2{fill:var(--brand-edge)} .qt-coffre .qt-or{fill:var(--mid)}
.qt-coffre:disabled{cursor:default}
.qt:not(.faite) .qt-coffre .qt-bois,.qt:not(.faite) .qt-coffre .qt-bois2,.qt:not(.faite) .qt-coffre .qt-or{fill:var(--off)}
.qt:not(.faite) .qt-coffre svg{opacity:.9}
.qt.faite:not(.ouverte) .qt-coffre{animation:qt-attend 1.6s ease-in-out infinite}
.qt.faite:not(.ouverte) .qt-coffre:hover{background:var(--panel-2)}
.qt-couvercle{transform-box:fill-box;transform-origin:0% 100%;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.qt.ouvre .qt-couvercle,.qt.ouverte .qt-couvercle{transform:rotate(-38deg) translate(-2px,-4px)}
.qt.ouvre .qt-coffre{animation:qt-secoue .35s ease-in-out}
.qt.faite .qt-n{color:var(--mid)}
.qt.ouverte .qt-coffre{width:auto;height:auto;padding:0}
.qt-gain{display:inline-block;padding:6px 10px;border-radius:10px;border:2px solid var(--mid);font-size:14px;font-weight:900;color:var(--mid);white-space:nowrap}
.qt.ouvre .qt-coffre::after{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--mid) 55%,transparent),transparent 70%);animation:qt-eclat .7s ease-out forwards}
.questline{display:block;width:100%;color:var(--brand-light);font-weight:800}
.qt-coffre:focus-visible{outline:3px solid var(--brand-light);outline-offset:2px}
@keyframes qt-attend{0%,100%{transform:rotate(0) scale(1)}10%{transform:rotate(-7deg) scale(1.06)}20%{transform:rotate(6deg) scale(1.06)}30%{transform:rotate(0) scale(1)}}
@keyframes qt-secoue{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.1)}}
@keyframes qt-eclat{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}
@media (max-width:520px){.qt-head{padding:14px 16px 8px}.qt-list{padding:4px 16px 10px}.qt-mid strong{font-size:16px}.qt-coffre{width:50px;height:50px}}
@media (prefers-reduced-motion: reduce){.qt-coffre,.qt-couvercle,.qt-bar i{animation:none!important;transition:none!important}}

/* ---------- Vini sur l'accueil et bouton des sons (lot 31) ---------- */
.hero .hbuddy{display:flex;align-items:center;gap:14px;align-self:center;margin-left:auto}
.hvini{width:150px;height:163px;flex-shrink:0;border:0;background:none;padding:0;cursor:pointer;border-radius:22px}
.hvini .vini{width:100%;height:100%}
.hvini:focus-visible{outline:3px solid var(--brand-light);outline-offset:4px}
.hbuddy .bubble{position:relative;max-width:230px}
.hbuddy .bubble::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-7px;width:14px;height:14px;background:var(--hi);transform:rotate(45deg);border-radius:2px}
.sonsbtn{display:grid;place-items:center;width:40px;padding:0}
.sonsbtn svg{width:20px;height:20px}
.sonsbtn[aria-pressed="false"]{color:var(--muted)}
@media (max-width:760px){.hero{flex-wrap:wrap}.hero .hbuddy{display:flex;margin:0;width:100%;flex-direction:row-reverse;justify-content:flex-end}
  .hvini{width:92px;height:100px}.hbuddy .bubble::after{right:auto;left:-6px}}

/* ---------- Vini en haut des pages (lot 32) ---------- */
.vcoin{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.vcoin .hvini{width:96px;height:104px}
.vcoin .bubble{position:relative;max-width:560px}
.vcoin .bubble::before{content:"";position:absolute;left:-6px;top:50%;margin-top:-7px;width:14px;height:14px;background:var(--hi);transform:rotate(45deg);border-radius:2px}
@media (max-width:520px){.vcoin{gap:10px;margin-bottom:12px}.vcoin .hvini{width:76px;height:82px}}

/* ---------- Vérifier ma table (lot 33) ---------- */
.vfcard{max-width:620px}
.vfbar{height:10px;border-radius:5px;background:var(--track);overflow:hidden;margin-right:40px}
.vfbar i{display:block;height:100%;width:0;border-radius:5px;background:var(--brand);transition:width .4s cubic-bezier(.3,1.3,.5,1)}
#vfTitle:focus{outline:none}
.vflist li{font-weight:700}
.vflist li.ok{color:var(--ok)}
.vfsvg{display:block;width:100%;height:auto;border-radius:14px;background:var(--panel-2)}
.vfchoix{display:flex;flex-direction:column;gap:10px}
.vfq{margin:6px 0 0;font-weight:800}
.vfrow{display:flex;flex-wrap:wrap;gap:8px}
.vfopt{min-height:44px;padding:8px 14px;border-radius:14px;border:2px solid var(--line);border-bottom-width:4px;background:var(--bg);color:var(--fg);font:inherit;font-weight:800;cursor:pointer}
.vfopt[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);border-bottom-color:var(--brand-edge)}
.vfjouer{align-self:flex-start}
.vfnote{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:var(--muted)}
.vfnote textarea,.vfout{width:100%;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:15px;padding:10px 12px;resize:vertical}
#vfSvg{min-width:0}
#verif .rbtn.go:disabled{background:var(--off);color:var(--off-ink);box-shadow:0 4px 0 var(--off-edge);cursor:default}
.tverif{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:0 0 16px;padding:14px 18px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line)}
.tverif p{margin:0;display:flex;flex-direction:column;gap:2px}
.tverif span{color:var(--muted);font-size:14px}

/* Lot 34 : le compte (se connecter avec Google) */
.cptbtn{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cptbtn.on{color:var(--brand-light);border-color:var(--brand-line);background:var(--brand-soft)}
#compte .rbtn,#compte .ghost{width:100%}
.cptgoogle{display:flex;align-items:center;justify-content:center;gap:10px}
.cptchoix{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:var(--brand-soft);border:1px solid var(--brand-line)}
.cptchoix .rbrow{margin-top:12px;flex-direction:column}
#cptEtatTxt{margin:0 0 14px}
#cptTitle:focus{outline:none}

/* Lot 35 : l'écran du compte (créer / se connecter) */
.cptcard{max-width:420px}
.cpthead{display:flex;align-items:center;gap:14px;margin:0 0 6px}
.cptvini{flex:0 0 auto;width:62px;height:62px;display:block}
.cptvini svg{width:100%;height:100%;display:block}
.cpthead h2{margin:2px 0 0}
.cptetat{color:var(--muted);font-size:14px;margin:0 0 16px;line-height:1.45}
.cptpas{display:flex;flex-direction:column;gap:10px;margin:0}
.cptplus{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:9px}
.cptplus li{position:relative;padding-left:26px;font-size:15px;line-height:1.4}
.cptplus li::before{content:'';position:absolute;left:4px;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--brand)}
#compte .cptmain{background:var(--brand);color:var(--on-brand);box-shadow:0 4px 0 var(--brand-edge)}
#compte .cptmain:hover{filter:brightness(1.07)}
.cptch{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:700;color:var(--muted)}
.cptch input{width:100%;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:16px;font-weight:600;padding:11px 13px}
.cptch input:focus{outline:none;border-color:var(--brand-light)}
.cptmdp{position:relative;display:block}
.cptmdp input{padding-right:76px}
.cptmdp button{position:absolute;right:7px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:6px 8px;border-radius:8px;cursor:pointer}
.cptmdp button:hover{color:var(--fg)}
.cptaide{margin:-4px 0 0;color:var(--muted);font-size:13px}
.cptlien{background:none;border:0;color:var(--brand-light);font:inherit;font-size:14px;font-weight:700;padding:6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cptlien:hover{color:var(--fg)}
.cptou{display:flex;align-items:center;gap:12px;margin:2px 0;color:var(--muted);font-size:13px}
.cptou::before,.cptou::after{content:'';flex:1;height:1px;background:var(--line)}
#cptNote{margin:16px 0 0;font-size:13px}
@media (max-width:480px){.cptvini{width:52px;height:52px}}   /* titre visé à l'ouverture, comme #vfTitle : pas de cadre */

/* ---------- Lot 36 : l'écran d'un niveau, rangé en cartes (brief d'interface du 18 oct. 2026) ----------
   Quatre demandes de l'utilisateur : une hiérarchie claire, des cartes bien espacées, l'action principale
   qui se voit, et la largeur de l'écran utilisée. Ces règles arrivent après les couches héritées du
   fichier (« Tout doux », « habillage », formes arrondies), qui redéfinissent .start et .watch deux fois. */

/* L'action principale se voit : elle est violette, les autres sont secondaires */
.start{background:var(--brand);color:var(--on-brand);box-shadow:0 5px 0 var(--brand-edge);border:0;font-size:19px;padding:17px 40px}
.start:disabled{background:var(--off);color:var(--off-ink);box-shadow:0 4px 0 var(--off-edge)}
.watch{background:transparent;border:2px solid var(--line);color:var(--fg);box-shadow:none;font-size:17px;padding:14px 26px}
.watch:hover:not(:disabled){border-color:var(--brand-light);color:var(--brand-light)}

/* Des cartes, avec du blanc entre elles */
.stage{gap:18px}
.consigne{background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:18px 20px;flex:1 1 420px;min-width:0}
.deck{background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:14px 18px 18px;min-width:0}
.decklab{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.deck .controls{gap:30px;min-height:0;justify-content:space-evenly;align-items:flex-end}
.deck #gPlay{margin-bottom:6px}
.bside{display:flex;flex-direction:column;gap:14px;min-width:0}

/* « Jouer » à portée de vue (après le gardien du 19 oct. 2026). En bas de la scène, il était sous le bas de l'écran
   d'un PC 1366 × 768 (et encore plus bas avec la « Position de départ »). Sur ordinateur, il monte dans la colonne de
   droite de la consigne, avec Vini, le compte à rebours et la position de départ : quand on choisit un niveau, la scène
   monte en haut de l'écran (stageIntoView) et « Jouer » est dedans. .stage-head, .bottom et .bside s'effacent
   (display:contents) pour que leurs enfants se rangent dans la grille de la scène. */
@media (min-width:1040px){
  .stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;
    grid-template-areas:"cons buddy ring" "cons start start" "cons act act" "hw hw hw" "bar bar bar" "deck deck deck";
    column-gap:22px;row-gap:16px;align-items:start}
  .stage-head,.bottom,.bside{display:contents}
  .consigne{grid-area:cons;align-self:stretch}
  .buddy{grid-area:buddy;margin:0;align-self:center;justify-self:start}
  .ringwrap{grid-area:ring}
  .start-row{grid-area:start;align-items:stretch}
  .start-row:has(> #setup[hidden]){display:none}
  .start-row .setup{max-width:none}
  .stage>.hw{grid-area:hw} .stage>.bar{grid-area:bar} .deck{grid-area:deck}
  .actionbar{grid-area:act;position:static;background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:none;
    flex-direction:column;align-items:stretch;gap:12px}
  .actionbar .opts{flex-direction:row;flex-wrap:wrap;justify-content:flex-start}
  .actionbar .btnrow{flex-direction:row;flex-wrap:nowrap;gap:10px}
  .actionbar .btnrow .watch{flex:1 1 0;padding-inline:14px}
  .actionbar .btnrow .start{flex:1.4 1 0;padding-inline:18px}
}
/* Sur téléphone et petite fenêtre, la barre se recolle en bas de l'écran : elle doit être un enfant direct de la scène
   (une barre collée ne sort jamais de la boîte qui la contient), d'où display:contents. */
@media (max-width:1039px){
  .bottom,.bside{display:contents}
}
/* « Jouer » prêt (après la démo) : la pulsation reprend le violet, plus l'ancien gris et blanc */
@keyframes readyPulse{50%{box-shadow:0 5px 0 var(--brand-edge),0 0 0 8px color-mix(in srgb,var(--brand) 35%,transparent)}}

/* ---------- Lot 39 : la table complète (deux platines et la table de mixage) ----------
   Choix de l'utilisateur sur la maquette du 20 oct. 2026 : toute la table est affichée, mais seules les commandes dont
   le niveau se sert sont allumées (les autres : .eteint, inertes) ; 4 pads par platine ; pendant une partie, la consigne
   se replie (.stage.joue) pour que la piste et la table tiennent sur un écran de PC portable. */
.table3{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:stretch}
.pl,.mx{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px;min-width:0}
.pl{display:flex;flex-direction:column;gap:10px}
.pl-head{display:flex;align-items:center;gap:8px}
.pltag{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:var(--ink)}
.plA .pltag{background:var(--a)} .plB .pltag{background:var(--b)}
.pl-bpm{margin-left:auto;font-weight:800;font-size:13px;color:var(--muted)}
.pl-mid{display:flex;align-items:center;justify-content:space-around;gap:10px}
.pl-jog,.pl-tempo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px;border-radius:14px}
.pl-jog .gl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.jog{width:104px;height:104px;border-radius:50%;position:relative;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(circle,var(--panel-2) 0 33%,var(--line) 34% 36%,var(--panel-2) 37% 100%);border:2px solid var(--line);box-shadow:inset 0 0 0 8px var(--panel)}
.jog.tenu{cursor:grabbing;border-color:var(--fg)}
.jog .mk{position:absolute;inset:0}
.jog .mk::before{content:"";position:absolute;left:50%;top:7px;width:4px;height:18px;margin-left:-2px;border-radius:2px}
.plA .jog .mk::before{background:var(--a)} .plB .jog .mk::before{background:var(--b)}
.fader.tempo{width:40px;height:104px}
.fader.tempo .fill{display:none}
.fader.tempo .slot::after{content:"";position:absolute;left:-10px;right:-10px;top:50%;height:2px;background:var(--line)}
.tpct{font-size:12px;font-weight:800}
.pl-bas{display:flex;flex-direction:column;gap:8px;align-items:stretch}
/* CUE et PLAY (LANCE B) au-dessus des pads, côte à côte : LANCE B reste visible pendant une partie sur un PC portable */
.pl-pads{order:1}
.pl-tr{display:flex;gap:10px;align-items:center;justify-content:center;padding:4px;border-radius:14px}
.pl-tr .group{padding:0}
.rb{width:52px;height:52px;border-radius:50%;border:2px solid var(--line);background:var(--panel-2);color:var(--fg);font:inherit;font-weight:900;font-size:12px;padding:0}
.plA .rb{border-color:var(--a);color:var(--a)} .plB .rb{border-color:var(--b);color:var(--b)}
.plB .launch{padding:10px 14px;font-size:14px;gap:8px}
.plB .launch svg{width:16px;height:16px}
.pl-pads{flex:1;min-width:0;padding:4px;border-radius:14px}
.ptabs{display:flex;gap:6px;margin-bottom:6px}
.ptabs button{flex:1;font:inherit;font-size:11px;font-weight:800;padding:5px 0;border-radius:8px;background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.plA .ptabs [aria-pressed="true"]{background:var(--a);border-color:var(--a);color:var(--ink)}
.plB .ptabs [aria-pressed="true"]{background:var(--b);border-color:var(--b);color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pad{height:44px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);font:inherit;font-weight:900;font-size:15px;padding:0}
.plA .pad.pose{border-color:var(--a);color:var(--a);background:color-mix(in srgb,var(--a) 16%,var(--panel-2))}
.plB .pad.pose{border-color:var(--b);color:var(--b);background:color-mix(in srgb,var(--b) 16%,var(--panel-2))}
.plA .pad.live{background:var(--a);border-color:var(--a);color:var(--ink)} .plB .pad.live{background:var(--b);border-color:var(--b);color:var(--ink)}
/* Table de mixage */
.mx{display:grid;grid-template-columns:auto auto auto;gap:6px 6px;justify-items:center;align-content:start}
.mx-col,.mx-lab{display:flex;flex-direction:column;align-items:center;gap:2px}
.mx-col>*,.mx-lab>span{height:35px;display:grid;place-items:center}
.mx .group{padding:2px;gap:0}
.mx .knob{padding:0;gap:0}
.mx .knob svg{width:34px;height:34px}
.mx .cl,.deck .table3 .auto::after{display:none}
.mx .knob{position:relative}
.mx .knob .kv{position:absolute;left:50%;top:-4px;transform:translate(-50%,-100%);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:11px;font-weight:800;color:var(--fg);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:3}
.mx .knob:hover .kv,.mx .knob:focus-visible .kv,.mx .knob:active .kv,.mx .knob.bouge .kv{opacity:1}
.mx-lab>span{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
/* l'effet en haut de la table de mixage (comme le BEAT FX de la FLX4) : il reste visible pendant une partie */
.mx-fx{grid-column:1 / 4}
.mx-fx .group{padding:0}
.mx .echo{width:auto;height:34px;padding:0 22px;border-radius:999px;font-size:12px;border-width:2px}
.mx-bas{justify-content:center}
.mx-fad{grid-column:1 / 4;display:flex;align-items:flex-end;gap:8px;justify-content:center}
.mx-fad .group{padding:4px 6px}
.mx-fad .pair{gap:8px;align-items:flex-end}
.mx .fader{width:40px;height:100px}
.vu{width:6px;height:78px;margin-bottom:11px;border-radius:3px;background:var(--track);position:relative;overflow:hidden}
.vu i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(to top,var(--ok) 0 60%,var(--mid) 60% 85%,var(--bad) 85%);background-size:100% 78px;background-position:bottom}
.hcue{font:inherit;font-size:11px;font-weight:900;padding:7px 8px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);margin-bottom:38px}
.hcue[aria-pressed="true"]{background:var(--mid);border-color:var(--mid);color:var(--ink)}
.mx-bas{grid-column:1 / 4;display:flex;align-items:center;gap:10px}
.mx-xf{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;border-radius:14px}
.fader.xf{width:170px;height:34px;cursor:ew-resize}
.fader.xf .slot{left:11px;right:11px;top:50%;bottom:auto;width:auto;height:8px;margin:-4px 0 0}
.fader.xf .fill{display:none}
.fader.xf .cap2{top:4px;bottom:4px;width:22px;height:auto;right:auto;left:calc(var(--v) * (100% - 22px))}
.fader.xf .cap2::after{left:10px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
.xlab{display:flex;gap:12px;font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.xlab .la{color:var(--a)} .xlab .lb{color:var(--b)}
/* Allumé / éteint, et la commande à toucher maintenant */
.deck .eteint{opacity:.3;filter:grayscale(.7)}
.deck [data-g].focus{background:var(--hi);box-shadow:0 0 0 3px var(--accent);border-radius:14px}
/* Pendant une partie, la consigne se replie et la scène se resserre : Vini, le compte à rebours et « Arrêter » sur une
   ligne, puis la piste et toute la table, sur un écran de PC portable (1366 × 768) */
.stage.joue .consigne,.stage.joue .start-row,.stage.joue .actionbar .opts,.stage.joue .decklab{display:none}
@media (min-width:1040px){
  .stage.joue{grid-template-columns:minmax(0,1fr) auto minmax(220px,auto);grid-template-areas:"buddy ring act" "hw hw hw" "bar bar bar" "deck deck deck";row-gap:12px}
  .stage.joue .actionbar{align-self:center;padding:10px}
  .stage.joue .ring{width:80px;height:80px}
  .stage.joue .deck{padding-top:10px;padding-bottom:10px}
}
/* Téléphone et petite fenêtre (au gardien du lot 39 : LANCE B et « Arrêter » sortaient de l'écran) : seules les commandes du
   niveau sont affichées, comme avant ; une partie de la table qui n'a rien d'allumé disparaît ; chaque potard porte son nom */
@media (max-width:1039px){
  .table3{grid-template-columns:minmax(0,1fr);gap:10px}
  .deck .table3 [data-g].eteint,.mx-lab{display:none}
  .table3>section:not(:has([data-g]:not(.eteint))){display:none}
  .mx{grid-template-columns:auto auto;align-items:end}
  .mx-fx,.mx-fad,.mx-bas{grid-column:1 / 3}
  .mx-col>*{height:auto}
  .mx .knob::before{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
  .mx [data-k^="trim"]::before{content:"TRIM"} .mx [data-k^="hi"]::before{content:"HI"} .mx [data-k^="mid"]::before{content:"MID"}
  .mx [data-k^="low"]::before{content:"LOW"} .mx [data-k^="cfx"]::before{content:"FILTRE"}
  .pl-mid,.pl-bas{gap:8px}
}

/* ---------- Lot 40 : chapitre 5 « Le calage » ----------
   Au-dessus de la table : les trois réponses du niveau « Entendre le décalage », et le compteur de décalage (aiguille sur
   ±100 ms, zone « calé » au milieu). Le BPM des platines disparaît dans les niveaux qui l'interdisent (.stage.sansbpm). */
.calquiz{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0 0 12px}
.calquiz span{font-weight:800;color:var(--muted);margin-right:4px}
.calquiz button{font:inherit;font-weight:800;font-size:15px;padding:12px 20px;border-radius:999px;border:2px solid var(--line);background:var(--panel);color:var(--fg)}
.calquiz button:not(:disabled):hover{border-color:var(--brand-light)}
.calquiz button:disabled{opacity:.45}
.calbar{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.calech{position:relative;flex:1;height:10px;border-radius:5px;background:var(--track)}
.calech .calmid{position:absolute;left:calc(50% - 7.5%);width:15%;top:0;bottom:0;border-radius:5px;background:color-mix(in srgb,var(--ok) 35%,var(--track))}
.calech .calaig{position:absolute;top:-5px;width:4px;height:20px;margin-left:-2px;border-radius:2px;background:var(--b);left:50%;transition:left .08s linear}
.caltxt{min-width:190px;font-weight:800;font-size:15px;text-align:right;color:var(--bad)}
.calbar.mid .caltxt{color:var(--mid)}
.calbar.ok .caltxt{color:var(--ok)}
.stage.sansbpm .pl-bpm{visibility:hidden}
.calbar.attend .calaig{display:none}
.calbar.attend .caltxt{color:var(--muted);font-weight:700}
/* téléphone : le texte du compteur tient sur une ligne (sur deux, il poussait « Arrêter » sous le bas de l'écran) */
@media (max-width:1039px){ .calbar{gap:10px;padding:8px 12px} .caltxt{min-width:0;font-size:13px;white-space:nowrap} }
/* Téléphone, pendant une partie (gardien du lot 40) : la barre reste collée en bas, sinon « Arrêter » sortait de l'écran
   aux niveaux qui allument beaucoup de commandes (chapitre 5, niveaux 5 et 6). La scène garde de la place en bas pour
   que la barre ne cache jamais la dernière commande. */
@media (max-width:1039px){
  .stage.joue .actionbar{position:sticky}
  .stage.joue .deck{margin-bottom:84px}
}

/* ---------- Les niveaux en vinyles (22 oct. 2026) ----------
   Demande de l'utilisateur, d'après deux maquettes qu'il a envoyées : les pastilles des niveaux deviennent de
   vrais disques (sillons, pastille centrale colorée), et l'orange et le violet se voient davantage — « ça rajoute
   de la vie et c'est plus ludique ».
   Les couleurs alternent d'un niveau à l'autre : --pastille vaut l'orange ou le violet. ATTENTION : c'est de la
   décoration, pas le langage des platines. Pendant une partie, l'orange veut toujours dire « platine A » et le
   bleu « platine B » (piste, potards, faders) : ces règles-là ne sont pas touchées.
   Cette section est à la FIN du fichier exprès : les couches héritées plus haut redéfinissent .node .dot,
   .xpbar i et .lnum, il faut passer après elles. */
.node{--pastille:var(--brand)}
.map .node:nth-child(odd){--pastille:var(--a)}

.node .dot{
  position:relative;
  width:62px;height:62px;border-radius:50%;
  font-family:var(--display);font-weight:900;font-size:23px;
  color:var(--on-brand);
  border:2px solid var(--vinyle-bord);
  background:
    radial-gradient(circle at 50% 50%, var(--pastille) 0 35%, rgba(0,0,0,0) 35.5%),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyle-sillon) 0 1px, rgba(0,0,0,0) 1px 4px),
    radial-gradient(circle at 36% 30%, var(--vinyle-haut) 0%, var(--vinyle-bas) 72%);
  box-shadow:0 6px 18px var(--vinyle-ombre);
  transition:transform .15s, box-shadow .25s;
}
/* l'arc de néon autour du disque */
.node .dot::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 205deg, var(--pastille) 0deg 68deg, rgba(0,0,0,0) 68deg 178deg, var(--pastille) 178deg 232deg, rgba(0,0,0,0) 232deg 360deg);
  -webkit-mask:radial-gradient(farthest-side, rgba(0,0,0,0) calc(100% - 3px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, rgba(0,0,0,0) calc(100% - 3px), #000 calc(100% - 2px));
  opacity:.45;
}
.node.done .dot{background:
    radial-gradient(circle at 50% 50%, var(--pastille) 0 35%, rgba(0,0,0,0) 35.5%),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyle-sillon-fait) 0 1px, rgba(0,0,0,0) 1px 4px),
    radial-gradient(circle at 36% 30%, var(--vinyle-haut-fait) 0%, var(--vinyle-bas) 72%);
  border-color:var(--vinyle-bord-fait);color:var(--on-brand)}
.node.done .dot::after{opacity:.75}
.node:hover .dot{transform:translateY(-3px);box-shadow:0 10px 24px var(--vinyle-ombre)}

/* le niveau en cours : anneau complet, lumineux, qui tourne lentement comme un disque */
.node[aria-pressed="true"] .dot{box-shadow:0 0 0 3px var(--bg), 0 0 26px -2px var(--pastille), 0 8px 22px var(--vinyle-ombre)}
.node[aria-pressed="true"] .dot::after{
  inset:-8px;opacity:1;
  background:conic-gradient(from 0deg, var(--a), var(--brand) 38%, var(--brand-light) 55%, var(--a) 100%);
  animation:vinyle-tourne 9s linear infinite;
}
@keyframes vinyle-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.node[aria-pressed="true"] .dot::after{animation:none}}

/* le fil qui relie les disques, aux deux couleurs */
.map::before{background:var(--line);opacity:.65}
.map .prog{background:linear-gradient(90deg,var(--brand),var(--a))}

/* un peu plus de couleur ailleurs, sans toucher au langage des platines */
.xpbar i{background:linear-gradient(90deg,var(--brand),var(--a))}
.lnum{color:var(--brand-light)}

@media (max-width:760px){.node .dot{width:54px;height:54px;font-size:20px}}
@media (max-width:420px){.node .dot{width:48px;height:48px;font-size:18px}.node .dot::after{inset:-5px}}

/* ---------- Barre d'onglets, boutons et espacement, d'après la maquette (22 oct. 2026) ----------
   Demande de l'utilisateur : « fais tout comme sur la capture », sauf le fond d'écran et le logo au vinyle orange.
   Choix validé par lui : on GARDE les quatre onglets (Accueil, Apprendre, S'entraîner, Passer au vrai) et on leur
   donne l'allure de la maquette — centrés, une icône chacun, soulignement violet sur l'onglet affiché. Les trois
   numéros 1-2-3 des onglets ont été remplacés par des icônes, comme sur la maquette.
   « Jouer » passe à l'ORANGE et « Regarde d'abord » prend un contour violet, comme sur la maquette.
   Toujours à la fin du fichier : les couches héritées redéfinissent .tabs, .start et .watch plus haut. */
.tabs{background:none;border-radius:0;padding:0;gap:4px;justify-content:center;flex-wrap:wrap}
.tabs a{position:relative;gap:9px;padding:12px 18px 14px;border-radius:12px;color:var(--muted);font-weight:700;font-size:16px}
.tabs a .tn{width:20px;height:20px;background:none;border-radius:0;color:inherit}
.tabs a .tn svg{width:20px;height:20px;display:block}
.tabs a:hover{color:var(--fg);background:var(--hi)}
.tabs a[aria-current="page"]{background:none;color:var(--fg)}
.tabs a[aria-current="page"] .tn{background:none;color:var(--brand-light)}
/* le trait violet sous l'onglet affiché */
.tabs a[aria-current="page"]::after{
  content:"";position:absolute;left:18px;right:18px;bottom:2px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-light));
}

/* les deux boutons de la barre d'action */
.start{background:var(--a);color:var(--ink);box-shadow:0 5px 0 var(--a-edge)}
.start:hover:not(:disabled){filter:brightness(1.06)}
.start:disabled{background:var(--off);color:var(--off-ink);box-shadow:0 4px 0 var(--off-edge);filter:none}
.watch{border:2px solid var(--brand-line);color:var(--brand-light)}
.watch:hover:not(:disabled){border-color:var(--brand-light);background:var(--brand-soft);color:var(--brand-light)}

/* « Pendant le niveau » : des pastilles violettes numérotées au lieu de 1. 2. */
.plan{padding:16px 18px;gap:10px}
.plan ol{list-style:none;padding-left:0;gap:9px;counter-reset:plan}
.plan ol li{counter-increment:plan;display:flex;align-items:flex-start;gap:11px;line-height:1.35}
.plan ol li::before{
  content:counter(plan);flex:none;width:25px;height:25px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:13px;margin-top:1px;
}

/* un peu plus d'air, comme sur la maquette */
.chapsel{margin-bottom:6px}
.map{padding-top:10px;gap:10px}
.node{gap:9px}
@media (max-width:600px){
  .tabs a{padding:10px 10px 12px;font-size:14px;gap:7px}
  .tabs a .tn,.tabs a .tn svg{width:18px;height:18px;display:block}
  .tabs a[aria-current="page"]::after{left:10px;right:10px}
}

/* ---------- Retours de l'utilisateur sur l'habillage (22 oct. 2026, soir) ----------
   1. « Accueil / Apprendre / S'entraîner / Passer au vrai sont trop bas » → la barre remonte sur la ligne du logo,
      tout en haut, et les pastilles (XP, table, Guide…) passent sur la ligne du dessous. Sur petit écran, l'ordre
      s'inverse : les pastilles d'abord, les onglets en dessous et qui défilent — l'ordinateur décide de la mise en
      page (90 % des joueurs), le téléphone doit juste rester utilisable.
   2. « Mets le D et le J en violet » → .brand-name .dj.
   3. « Des disques plus réalistes, avec les petits détails » → le disque est fait de six couches superposées :
      la pastille, son liseré, la brillance en diagonale, les sillons fins, les sillons profonds, puis le corps du
      disque ; plus un liseré de lumière sur le bord extérieur et un halo coloré sur l'arc de néon. */
.top{justify-content:space-between;row-gap:12px}
.top .tabs{order:2;flex:1 1 auto;justify-content:center}
.top .hud{order:3;flex:1 1 100%;justify-content:center}
.brand-name .dj{color:var(--brand-light)}

.node .dot{
  width:66px;height:66px;font-size:24px;
  background:
    radial-gradient(circle at 50% 50%, var(--pastille) 0 32%, rgba(0,0,0,0) 32.4%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 32.4%, var(--vinyle-lisere) 32.4% 33.8%, rgba(0,0,0,0) 34%),
    conic-gradient(from 140deg at 50% 50%, rgba(0,0,0,0) 0deg, var(--vinyle-reflet) 24deg, rgba(0,0,0,0) 54deg,
      rgba(0,0,0,0) 176deg, var(--vinyle-reflet) 204deg, rgba(0,0,0,0) 234deg, rgba(0,0,0,0) 360deg),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyle-sillon) 0 .5px, rgba(0,0,0,0) .5px 2.5px),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyle-bande) 0 1px, rgba(0,0,0,0) 1px 8px),
    radial-gradient(circle at 34% 26%, var(--vinyle-haut) 0%, var(--vinyle-bas) 68%);
  box-shadow:inset 0 0 0 1px var(--vinyle-rim), 0 7px 20px var(--vinyle-ombre);
}
.node.done .dot{
  background:
    radial-gradient(circle at 50% 50%, var(--pastille) 0 32%, rgba(0,0,0,0) 32.4%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 32.4%, var(--vinyle-lisere) 32.4% 33.8%, rgba(0,0,0,0) 34%),
    conic-gradient(from 140deg at 50% 50%, rgba(0,0,0,0) 0deg, var(--vinyle-reflet) 24deg, rgba(0,0,0,0) 54deg,
      rgba(0,0,0,0) 176deg, var(--vinyle-reflet) 204deg, rgba(0,0,0,0) 234deg, rgba(0,0,0,0) 360deg),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyle-sillon-fait) 0 .5px, rgba(0,0,0,0) .5px 2.5px),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyle-bande) 0 1px, rgba(0,0,0,0) 1px 8px),
    radial-gradient(circle at 34% 26%, var(--vinyle-haut-fait) 0%, var(--vinyle-bas) 68%);
}
.node .dot::after{inset:-7px;filter:drop-shadow(0 0 5px var(--pastille))}
.node[aria-pressed="true"] .dot::after{inset:-9px;filter:drop-shadow(0 0 9px var(--pastille))}

@media (max-width:980px){
  .top{flex-wrap:wrap}
  .top .tabs{order:3;flex:1 1 100%}
  .top .hud{order:2;flex:1 1 100%}
}
@media (max-width:760px){
  .top{flex-wrap:wrap}
  .top .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .top .tabs::-webkit-scrollbar{display:none}
  .top .tabs a{flex:none}
  .node .dot{width:58px;height:58px;font-size:21px}
}
@media (max-width:420px){.node .dot{width:52px;height:52px;font-size:19px}}

/* Le fil passe DERRIÈRE les disques (sur la maquette il s'arrête au bord), et le disque du niveau en cours
   est plus gros que les autres, comme sur l'image de référence. */
.map::before,.map .prog{z-index:0}
.node{z-index:1}
.node[aria-pressed="true"] .dot{transform:scale(1.13)}
.node[aria-pressed="true"]:hover .dot{transform:scale(1.13) translateY(-3px)}

/* Le fil doit relier le CENTRE des disques : il suit leur taille (10 px de padding + la moitié de 66 px). */
.map::before,.map .prog{top:41px}