/* ============================================================
   BANC — feuille principale
   Toutes les valeurs de couleur, de durée et de courbe viennent de
   css/tokens.css. Les @keyframes vivent dans css/motion.css.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink);color:var(--paper);font-family:var(--body);
  font-size:var(--fs-4);line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Deux grilles superposées plutôt qu'une seule : la maille fine donne
   la texture d'un papier millimétré, la maille large donne l'échelle.
   Aucune image : deux paires de dégradés répétés suffisent. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--line-rgb),.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--line-rgb),.55) 1px,transparent 1px),
    linear-gradient(rgba(var(--line-rgb),.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--line-rgb),.22) 1px,transparent 1px),
    radial-gradient(62% 44% at 16% -4%,rgba(var(--amber-rgb),.060),transparent 70%),
    radial-gradient(56% 46% at 90% 6%,rgba(var(--cyan-rgb),.052),transparent 72%);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px,100% 100%,100% 100%;
  background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px,0 0,0 0;
}
/* Vignette : ramène l'œil au centre et éteint la grille sur les bords. */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(132% 92% at 50% -12%,
    transparent 26%,rgba(var(--ink-rgb),.70) 70%,rgb(var(--ink-rgb)) 100%);
}

.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 96px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Barres de défilement : la barre système claire trahit tout de suite
   un thème sombre bricolé. */
*{scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--line-hi);background-clip:content-box}

::selection{background:rgba(var(--cyan-rgb),.28);color:var(--paper)}

/* ---------- RAIL D'INSTRUMENTATION ---------- */
.rail{
  position:sticky;top:0;z-index:var(--z-rail);
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid var(--line);
  padding:12px var(--gut);
  box-shadow:0 1px 0 rgba(var(--white-rgb),.03) inset,0 12px 28px -24px rgba(var(--black-rgb),.9);
}
/* Filet lumineux sous le rail : c'est lui qui fait « appareil allumé ». */
.rail::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--amber-rgb),.34) 22%,
    rgba(var(--cyan-rgb),.34) 74%,transparent);
  opacity:.75;
}
.rail-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}

.brand{
  font-family:var(--display);font-weight:700;font-size:var(--fs-5);letter-spacing:.14em;
  display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:none;
  color:var(--paper);padding:2px 2px;border-radius:var(--r);
  transition:color var(--t) var(--ease-out),text-shadow var(--t)
}
.brand:hover{color:var(--amber);text-shadow:0 0 18px rgba(var(--amber-rgb),.45)}

/* La LED n'est pas un rond coloré : un cœur saturé, un liseré, et un
   halo diffusé plus large que la pastille elle-même. */
.led{
  position:relative;width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,var(--amber-hi),var(--amber) 62%);
  box-shadow:0 0 0 1px rgba(var(--amber-rgb),.35),0 0 12px 1px rgba(var(--amber-rgb),.55),
             inset 0 0 3px rgba(var(--white-rgb),.55);
  animation:bancBlink 2.4s infinite
}
.led::after{
  content:'';position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--amber-rgb),.28),transparent 68%)
}
.led.busy{
  background:radial-gradient(circle at 35% 30%,var(--cyan-hi),var(--cyan) 62%);
  box-shadow:0 0 0 1px rgba(var(--cyan-rgb),.35),0 0 12px 1px rgba(var(--cyan-rgb),.55),
             inset 0 0 3px rgba(var(--white-rgb),.55);
  animation:bancBlink .7s infinite
}
.led.busy::after{background:radial-gradient(circle,rgba(var(--cyan-rgb),.30),transparent 68%)}

.gauge{flex:1;min-width:170px}
.gauge-top{
  display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-1);
  color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px
}
.gauge-top b{color:var(--paper);font-weight:500}

/* Jauge segmentée : le dégradé complet est peint une fois derrière les
   segments ; un segment « off » est un cache opaque posé dessus. La
   couleur d'un segment dépend donc de sa position, pas d'une classe. */
.segs{
  position:relative;display:flex;gap:0;height:10px;border-radius:3px;overflow:hidden;
  background:var(--panel2);
  box-shadow:inset 0 1px 2px rgba(var(--black-rgb),.55),0 0 0 1px rgba(var(--white-rgb),.03)
}
.segs::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan-hi) 34%,
    var(--cyan) 58%,var(--amber) 88%,var(--amber-hi) 100%)
}
/* Le cache d'un segment éteint doit être OPAQUE : avec une teinte
   translucide, le dégradé peint derrière transparaît et la jauge paraît
   pleine en permanence, quel que soit l'XP réel. */
.seg{
  position:relative;z-index:1;flex:1;background:var(--panel2);
  box-shadow:inset -2px 0 0 var(--ink);
  transition:background var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out)
}
.seg:last-child{box-shadow:none}
.seg.on{background:transparent}
/* Front de progression : le premier segment éteint après un segment
   allumé reçoit la diffusion. La lueur avance donc avec la jauge. */
.seg.on + .seg:not(.on){box-shadow:inset -2px 0 0 var(--ink),inset 5px 0 9px -3px rgba(var(--cyan-rgb),.85)}
.seg.on.hot + .seg:not(.on){box-shadow:inset -2px 0 0 var(--ink),inset 5px 0 9px -3px rgba(var(--amber-rgb),.9)}

.stat{
  font-family:var(--mono);font-size:var(--fs-2);color:var(--muted);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px
}
.stat::before{content:"\1F525";font-size:var(--fs-2);line-height:1;filter:saturate(.85)}
.stat b{color:var(--paper);font-weight:500}

/* Cœurs en verre : chaque cœur est une pastille bombée qui s'éteint
   plutôt qu'un caractère qu'on rend transparent. */
.hearts{display:inline-flex;gap:3px;white-space:nowrap;font-family:var(--mono);font-size:var(--fs-2)}
.hearts span{
  display:inline-grid;place-items:center;width:19px;height:19px;border-radius:6px;
  color:var(--red);font-size:var(--fs-1);line-height:1;
  background:linear-gradient(165deg,var(--glass-hi),transparent 58%),var(--panel2);
  border:1px solid var(--line);
  box-shadow:0 0 10px -3px rgba(var(--red-rgb),.85),inset 0 1px 0 rgba(var(--white-rgb),.10);
  transition:color var(--t),box-shadow var(--t),opacity var(--t),transform var(--t) var(--ease-spring)
}
.hearts span.off{
  color:var(--faint);opacity:.55;
  background:var(--panel2);
  box-shadow:inset 0 1px 2px rgba(var(--black-rgb),.45)
}

/* ---------- BOUTONS ---------- */
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--amber-hi),var(--amber) 64%);
  color:var(--on-accent);font-weight:600;padding:12px 26px;border-radius:var(--r);
  box-shadow:var(--e1),0 0 0 1px rgba(var(--amber-rgb),.30),
             inset 0 1px 0 rgba(var(--white-rgb),.40);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t) var(--ease-out),
             filter var(--t)
}
.btn:hover:not(:disabled){
  transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:var(--e2),var(--glow-amber),inset 0 1px 0 rgba(var(--white-rgb),.45)
}
.btn:active:not(:disabled){
  transform:translateY(1px) scale(.985);
  box-shadow:inset 0 2px 7px rgba(var(--black-rgb),.42),0 0 0 1px rgba(var(--amber-rgb),.35)
}
.btn:disabled{opacity:.32;cursor:not-allowed;box-shadow:none;filter:saturate(.4)}

.btn-ghost{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);color:var(--muted);padding:9px 16px;border-radius:var(--r);
  font-size:var(--fs-3);background:linear-gradient(180deg,rgba(var(--white-rgb),.03),transparent);
  transition:border-color var(--t),color var(--t),background var(--t),
             box-shadow var(--t),transform var(--t-fast) var(--ease-out)
}
.btn-ghost:hover:not(:disabled){
  border-color:rgba(var(--cyan-rgb),.55);color:var(--cyan);
  background:rgba(var(--cyan-rgb),.07);box-shadow:var(--glow-soft-cyan);transform:translateY(-1px)
}
.btn-ghost:active:not(:disabled){transform:translateY(1px) scale(.99)}
.btn-ghost:disabled{opacity:.38;cursor:not-allowed}
.btn-ghost.live{
  border-color:rgba(var(--cyan-rgb),.6);color:var(--cyan);
  background:rgba(var(--cyan-rgb),.09);box-shadow:var(--glow-soft-cyan)
}
.btn-ghost.sm{padding:5px 11px;font-size:var(--fs-2)}
.btn-ghost .hintline{opacity:.65}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

/* ---------- EN-TÊTES ---------- */
.eyebrow{
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);margin-bottom:var(--s3);display:flex;align-items:center;gap:10px
}
.eyebrow::after{
  content:'';flex:1;height:1px;max-width:180px;
  background:linear-gradient(90deg,rgba(var(--amber-rgb),.45),transparent)
}
h1{
  font-family:var(--display);font-size:var(--fs-7);line-height:1.06;font-weight:700;
  letter-spacing:-.022em;margin-bottom:var(--s3)
}
h1 em{
  font-style:normal;color:var(--cyan);
  text-shadow:0 0 34px rgba(var(--cyan-rgb),.35)
}
.lede{color:var(--muted);max-width:56ch;margin-bottom:var(--s5);font-size:var(--fs-4)}

/* Bandeau technique décoratif de l'accueil. */
.hero{position:relative}
.hero-mark{
  display:flex;align-items:center;gap:10px;margin:0 0 var(--s5);
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)
}
.hero-mark i{
  flex:none;width:26px;height:6px;border-radius:1px;font-style:normal;
  background:repeating-linear-gradient(90deg,var(--line-hi) 0 2px,transparent 2px 5px)
}
.hero-mark span{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* ---------- BANDEAU RÉVISIONS ---------- */
.revbar{
  position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 20px 16px 22px;margin-bottom:var(--s5);
  box-shadow:var(--e1);overflow:hidden
}
.revbar::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--violet),rgba(var(--violet-rgb),.35));
  box-shadow:0 0 14px -2px rgba(var(--violet-rgb),.8)
}
.revbar::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 140% at 0% 50%,rgba(var(--violet-rgb),.10),transparent 62%)
}
.revbar>*{position:relative;z-index:1}
.revbar h3{font-family:var(--display);font-size:var(--fs-4);font-weight:500}
.revbar p{font-size:var(--fs-3);color:var(--muted);flex:1;min-width:200px}
.revbar .n{font-family:var(--mono);color:var(--violet);font-size:var(--fs-4)}

/* ---------- CARTE « CONTINUER » ----------
   L'accueil posait vingt-six cartes et six cents mots pour un seul
   bouton utile. Il pose maintenant une décision : où tu en étais. */
.resume{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--panel2-hi),var(--panel));
  border:1px solid var(--line-hi);border-radius:var(--r-xl);
  padding:var(--s5);box-shadow:var(--e3);margin-bottom:var(--s4)
}
.resume[hidden]{display:none}
.resume::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 200px at 90% 0%,rgba(var(--amber-rgb),.10),transparent 70%)
}
.resume>*{position:relative;z-index:1}
.resume .k{
  font-family:var(--mono);font-size:var(--fs-1);font-weight:500;color:var(--amber);
  letter-spacing:.22em;text-transform:uppercase
}
.resume h2{font-family:var(--display);font-size:var(--fs-6);font-weight:700;margin:var(--s3) 0 6px;letter-spacing:-.01em}
.resume .sub{color:var(--muted);font-size:var(--fs-4)}
.resume .bar{margin:var(--s4) 0 var(--s2)}
.resume .meta{font-family:var(--mono);font-size:var(--fs-2);color:var(--faint);margin-bottom:var(--s4)}
.btn.big{font-size:var(--fs-4);padding:15px 28px;border-radius:var(--r-lg)}

/* ---------- ONGLETS DE L'ACCUEIL ---------- */
.tabs{display:flex;gap:6px;margin:var(--s5) 0 var(--s3);border-bottom:1px solid var(--line)}
.tabs button{
  font-family:var(--body);font-size:var(--fs-3);font-weight:600;cursor:pointer;color:var(--muted);
  background:none;border:none;border-bottom:2px solid transparent;padding:11px 16px;
  transition:color var(--t),border-color var(--t)
}
.tabs button:hover{color:var(--paper)}
.tabs button[aria-selected="true"]{color:var(--amber);border-bottom-color:var(--amber)}

/* ---------- UN MONDE, NIVEAU PAR NIVEAU ---------- */
#world[hidden]{display:none}
.wtop{margin:var(--s4) 0 var(--s5)}
.levels{display:flex;flex-direction:column;gap:10px}
.lv{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s4);
  cursor:pointer;box-shadow:var(--e2);color:var(--paper);
  transition:transform var(--t) var(--ease-out),border-color var(--t),box-shadow var(--t)
}
.lv:hover:not(:disabled){transform:translateX(3px);border-color:var(--line-hi);box-shadow:var(--e3)}
.lv:disabled{opacity:.45;cursor:not-allowed}
.lv-n{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:var(--fs-3);font-weight:700;
  background:var(--panel2);color:var(--muted);border:1px solid var(--line)
}
.lv.done .lv-n{background:var(--green);color:var(--on-accent);border-color:transparent}
.lv.now .lv-n{background:var(--amber);color:var(--on-accent);border-color:transparent;box-shadow:var(--glow-amber)}
.lv-tx{min-width:0}
.lv b{font-family:var(--display);font-size:var(--fs-4);font-weight:600;display:block;line-height:1.2}
.lv small{color:var(--faint);font-family:var(--mono);font-size:var(--fs-2)}
.lv .go{margin-inline-start:auto;color:var(--faint);font-size:var(--fs-4);flex:none}
.lv.boss .lv-n{background:linear-gradient(180deg,var(--violet),rgba(var(--violet-rgb),.7));color:var(--on-accent);border-color:transparent}

/* ---------- CARTE DES MONDES ---------- */
.track-hd{
  display:flex;align-items:baseline;gap:14px;margin:var(--s6) 0 var(--s4);padding-bottom:10px;
  border-bottom:1px solid var(--line);position:relative
}
.track-hd::after{
  content:'';position:absolute;inset-inline-start:0;bottom:-1px;width:64px;height:1px;
  background:linear-gradient(90deg,var(--amber),transparent)
}
.track-hd h2{
  font-family:var(--display);font-size:var(--fs-4);letter-spacing:.16em;
  text-transform:uppercase;font-weight:500
}
.track-hd span{font-family:var(--mono);font-size:var(--fs-2);color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(262px,100%),1fr));gap:var(--s3)}

.card{
  position:relative;width:100%;text-align:left;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 58%);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px 21px;
  box-shadow:var(--e1);
  transition:border-color var(--t),transform var(--t) var(--ease-spring),
             box-shadow var(--t) var(--ease-out)
}
/* Liseré d'état. En survol il se met à parcourir sa propre hauteur :
   le mouvement dit « ouvert », l'immobilité dit « au repos ». */
.card::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--line);
  background-size:100% 220%;transition:background-color var(--t),box-shadow var(--t)
}
/* Voile de survol, jamais visible au repos. */
.card::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(120% 78% at 50% -18%,var(--sheen),transparent 62%);
  transition:opacity var(--t) var(--ease-out)
}
.card.open::before{background:linear-gradient(180deg,var(--cyan),rgba(var(--cyan-rgb),.30),var(--cyan));
  box-shadow:0 0 14px -3px rgba(var(--cyan-rgb),.9)}
.card.done::before{background:linear-gradient(180deg,var(--green),rgba(var(--green-rgb),.30),var(--green));
  box-shadow:0 0 14px -3px rgba(var(--green-rgb),.9)}
.card.partial::before{background:linear-gradient(180deg,var(--amber),rgba(var(--amber-rgb),.30),var(--amber));
  box-shadow:0 0 14px -3px rgba(var(--amber-rgb),.9)}

.card.open:hover,.card.partial:hover,.card.done:hover{
  border-color:rgba(var(--cyan-rgb),.42);transform:translateY(-3px);
  box-shadow:var(--e2),0 0 0 1px rgba(var(--cyan-rgb),.16)
}
.card.open:hover::after,.card.partial:hover::after,.card.done:hover::after{opacity:1}
.card.open:hover::before,.card.partial:hover::before,.card.done:hover::before{
  animation:bancRail 1.7s linear infinite
}
.card.done:hover{border-color:rgba(var(--green-rgb),.42);box-shadow:var(--e2),0 0 0 1px rgba(var(--green-rgb),.16)}
.card:active:not(:disabled){transform:translateY(-1px) scale(.995)}

/* Verrouillé : des hachures d'atelier, pas une opacité globale.
   Le texte reste lisible — on doit pouvoir lire ce qu'on n'a pas encore. */
.card.todo{
  cursor:not-allowed;border-style:dashed;color:var(--muted);
  background-image:repeating-linear-gradient(135deg,var(--hatch) 0 7px,transparent 7px 15px),
                   linear-gradient(180deg,var(--panel-hi),var(--panel) 58%);
  box-shadow:none
}
.card.todo h3{color:var(--muted)}
.card.todo p{color:var(--faint)}
.card.todo{opacity:.72}

.card-id{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);letter-spacing:.16em}
.card h3{font-family:var(--display);font-size:var(--fs-4);font-weight:500;margin:7px 0 5px;color:var(--paper)}
.card p{font-size:var(--fs-3);color:var(--muted);line-height:1.5}
.card-foot{
  margin-top:var(--s3);display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);gap:8px
}
.card-req{font-family:var(--mono);font-size:var(--fs-1);color:var(--faint);margin-top:8px}
/* Un prérequis non tenu n'interdit plus rien : il se présente comme une
   indication de lecture, en retrait, et surtout pas comme un avertissement.
   La puce cyan le rattache aux repères d'aide, pas aux erreurs. */
.card-req.conseil{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--muted);opacity:.85
}
.card-req.conseil::before{
  content:'';flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--cyan);opacity:.7
}

.bar{
  position:relative;height:4px;background:var(--track);border-radius:99px;overflow:hidden;margin-top:10px;
  box-shadow:inset 0 1px 2px rgba(var(--black-rgb),.5)
}
.bar i{
  position:relative;display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,rgba(var(--cyan-rgb),.55),var(--cyan));
  box-shadow:0 0 10px -2px rgba(var(--cyan-rgb),.9);
  transition:width var(--t-slow) var(--ease-out)
}
/* Brillance qui balaie la portion acquise : la progression a l'air vivante. */
.bar i::after{
  content:'';position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--shine),transparent);
  animation:bancSweep 2.8s var(--ease-in-out) infinite
}
.card.done .bar i{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.55),var(--green));
  box-shadow:0 0 10px -2px rgba(var(--green-rgb),.9)
}
.card.partial .bar i{
  background:linear-gradient(90deg,rgba(var(--amber-rgb),.5),var(--amber));
  box-shadow:0 0 10px -2px rgba(var(--amber-rgb),.9)
}

/* ---------- BADGES ---------- */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.badge{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;
  padding:5px 13px;font-family:var(--mono);font-size:var(--fs-2);color:var(--muted);
  background:linear-gradient(180deg,rgba(var(--white-rgb),.03),transparent);
  transition:border-color var(--t),color var(--t),box-shadow var(--t),transform var(--t) var(--ease-spring)
}
.badge:hover{transform:translateY(-1px)}
.badge.got{
  border-color:rgba(var(--amber-rgb),.55);color:var(--amber);
  background:linear-gradient(180deg,rgba(var(--amber-rgb),.13),rgba(var(--amber-rgb),.04));
  box-shadow:var(--glow-soft-amber)
}

/* ---------- LECTEUR ---------- */
.player{display:none}
.player.on{display:block}
.pbar{display:flex;gap:3px;margin-bottom:8px}
.pbar i{
  flex:1;height:3px;background:var(--track);border-radius:99px;
  transition:background var(--t) var(--ease-out),box-shadow var(--t)
}
.pbar i.seen{background:rgba(var(--cyan-rgb),.75)}
.pbar i.now{background:var(--amber);box-shadow:0 0 10px -1px rgba(var(--amber-rgb),.95)}
.ptop{
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);
  font-size:var(--fs-1);color:var(--muted);margin-bottom:var(--s4);letter-spacing:.08em
}
.ptop>span:last-child{display:inline-flex;gap:8px}

.screen{
  position:relative;
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 180px);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 30px;min-height:340px;
  box-shadow:var(--e2)
}
/* Passage d'un écran au suivant : sortie puis entrée. Les deux classes
   sont posées par js/player.js, qui ne les pose pas du tout sous
   mouvement réduit — il repeint alors sans attendre. */
.screen.sortie{
  opacity:0;transform:translateY(-7px);
  transition:opacity .14s var(--ease-out),transform .14s var(--ease-out)
}
/* Un fondu, pas une montée : les enfants directs de `.screen` montent
   déjà en cascade (css/motion.css). Deux mouvements superposés se
   liraient comme un défaut d'affichage. */
.screen.entree{animation:bancFade .28s var(--ease-out) backwards}

/* Repère d'angle : un coin d'équerre, comme sur un plan coté. */
.screen::before{
  content:'';position:absolute;top:11px;inset-inline-end:11px;width:26px;height:26px;pointer-events:none;
  border-top:1px solid var(--line-hi);border-inline-end:1px solid var(--line-hi);
  border-top-right-radius:var(--r);opacity:.8
}
.screen::after{
  content:'';position:absolute;left:14px;right:14px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--glass-line),transparent)
}
.screen h2{
  font-family:var(--display);font-size:var(--fs-6);font-weight:500;letter-spacing:-.012em;
  margin-bottom:var(--s3);line-height:1.18;padding-inline-end:44px
}
.screen h3{font-family:var(--display);font-size:var(--fs-4);font-weight:500;margin:22px 0 10px;color:var(--paper)}
/* ---------- RESPIRATIONS (écran concept) ----------
   Une idée à la fois. Les respirations déjà lues restent dans le DOM :
   revenir en arrière ne redemande donc aucun rendu, et le lecteur
   d'écran garde le fil. */
.beats{position:relative;min-height:210px}
.beat{display:none}
.beat.on{display:block;animation:bancRise .42s var(--ease-out) backwards}
/* Les éléments d'une respiration entrent en cascade : c'est ce qui fait
   lire « une idée puis son code » plutôt qu'un pavé qui apparaît. */
.beat.on>*{animation:bancRise .4s var(--ease-out) backwards}
.beat.on>*:nth-child(2){animation-delay:60ms}
.beat.on>*:nth-child(3){animation-delay:120ms}
.beat.on>*:nth-child(n+4){animation-delay:180ms}

.dots{display:flex;gap:7px;align-items:center;margin-bottom:var(--s4)}
.dots i{
  width:9px;height:9px;border-radius:50%;background:var(--line);flex:none;
  transition:background var(--t),transform var(--t) var(--ease-spring),box-shadow var(--t)
}
.dots i.on{background:var(--amber);box-shadow:var(--glow-soft-amber);transform:scale(1.3)}
.dots i.past{background:rgba(var(--cyan-rgb),.8)}
.dots b{
  margin-inline-start:auto;font-family:var(--mono);font-size:var(--fs-1);
  color:var(--faint);letter-spacing:.1em;font-weight:500
}

.beatnav{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.beatnav .btn[hidden]{display:none}
.beat-tail[hidden]{display:none}

.screen p{margin-bottom:var(--s3);max-width:64ch}
.screen p:last-child{margin-bottom:0}
.screen ul,.screen ol{margin:0 0 var(--s3) 22px}
.screen li{margin-bottom:6px}
.screen li::marker{color:var(--faint)}
.screen strong{color:var(--amber);font-weight:600}

code{
  font-family:var(--mono);font-size:.88em;background:rgba(var(--cyan-rgb),.10);
  padding:2px 6px;border-radius:4px;color:var(--cyan);
  box-shadow:inset 0 0 0 1px rgba(var(--cyan-rgb),.16)
}
pre{
  position:relative;font-family:var(--mono);font-size:var(--fs-3);
  background:linear-gradient(180deg,var(--deep-hi),var(--deep) 90px);
  border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px 16px 22px;overflow-x:auto;margin:18px 0;line-height:1.65;
  box-shadow:var(--e1),inset 0 1px 0 rgba(var(--white-rgb),.03)
}
/* Gouttière colorée : elle sépare le code du texte sans ajouter de bordure. */
pre::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--cyan),rgba(var(--violet-rgb),.75));
  border-radius:var(--r) 0 0 var(--r)
}
pre code{background:none;padding:0;color:var(--paper);font-size:inherit;box-shadow:none}
.kw{color:var(--sx-kw)}
.str{color:var(--sx-str)}
.num{color:var(--sx-num)}
.cm{color:var(--sx-cm);font-style:italic}
.fn{color:var(--sx-fn)}
.op{color:var(--sx-op)}

.note{
  position:relative;border-inline-start:3px solid var(--amber);
  background:linear-gradient(90deg,rgba(var(--amber-rgb),.10),rgba(var(--amber-rgb),.03) 60%,transparent);
  padding:13px 16px;border-radius:0 var(--r) var(--r) 0;margin:18px 0;font-size:var(--fs-3);
  box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.03)
}
.note b{color:var(--amber)}
.note.warn{
  border-color:var(--red);
  background:linear-gradient(90deg,rgba(var(--red-rgb),.11),rgba(var(--red-rgb),.03) 60%,transparent)
}
.note.warn b{color:var(--red)}

/* ---------- QCM / PREDICT ---------- */
.q{font-size:var(--fs-4);margin-bottom:var(--s4);max-width:64ch}
.opts{display:flex;flex-direction:column;gap:var(--s2)}
.opt{
  position:relative;overflow:hidden;isolation:isolate;width:100%;text-align:left;
  background:linear-gradient(180deg,var(--panel2-hi),var(--panel2));
  border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;
  font-family:var(--mono);font-size:var(--fs-3);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  box-shadow:var(--e1);
  transition:border-color var(--t),background var(--t),box-shadow var(--t),
             transform var(--t-fast) var(--ease-out)
}
.opt:hover:not(.dead){
  border-color:rgba(var(--cyan-rgb),.55);transform:translateX(3px);
  box-shadow:var(--e2),var(--glow-soft-cyan)
}
.opt:active:not(.dead){transform:translateX(3px) scale(.995)}
.opt .tx{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.opt .k{
  width:22px;height:22px;flex:none;border:1px solid var(--line);border-radius:5px;
  display:grid;place-items:center;font-size:var(--fs-1);color:var(--muted);
  background:linear-gradient(180deg,rgba(var(--white-rgb),.05),transparent);
  box-shadow:inset 0 -1px 0 rgba(var(--black-rgb),.35);
  transition:border-color var(--t),color var(--t),box-shadow var(--t)
}
/* Marqueur de verdict : une lame de couleur à gauche, pas un aplat criard. */
.opt.good::before,.opt.bad::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px
}
.opt.good{
  border-color:rgba(var(--green-rgb),.7);
  background:linear-gradient(90deg,rgba(var(--green-rgb),.15),rgba(var(--green-rgb),.05));
  box-shadow:var(--glow-green);
  animation:bancGlowOk .95s var(--ease-out) 1
}
.opt.good::before{background:var(--green);box-shadow:0 0 14px -1px rgba(var(--green-rgb),.95)}
.opt.good .k{border-color:var(--green);color:var(--green)}
.opt.bad{
  border-color:rgba(var(--red-rgb),.7);
  background:linear-gradient(90deg,rgba(var(--red-rgb),.15),rgba(var(--red-rgb),.05));
  box-shadow:var(--glow-red);
  animation:bancShake .4s var(--ease-in-out) 1
}
.opt.bad::before{background:var(--red);box-shadow:0 0 14px -1px rgba(var(--red-rgb),.95)}
.opt.bad .k{border-color:var(--red);color:var(--red)}
.opt.dead{cursor:default;opacity:.6;box-shadow:none}
.opt.dead.good,.opt.dead.bad{opacity:1}

/* Justification de la bonne réponse, posée DANS le bouton après une
   erreur. Elle occupe toute une ligne — d'où le `flex-wrap` de `.opt` —
   et repasse en typo de lecture : c'est une phrase, plus du code. */
.opt-why{
  flex:0 0 100%;order:2;margin-top:11px;padding-top:11px;
  border-top:1px solid rgba(var(--green-rgb),.28);
  font-family:var(--body);font-size:var(--fs-3);line-height:1.55;
  color:var(--muted);white-space:normal;word-break:break-word;
  animation:bancUnfold .32s var(--ease-out) backwards
}
.opt-why b{color:var(--green);font-weight:600}
.opt-why code{font-size:.9em}

.verdict{margin-top:var(--s4);padding:14px 16px;border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-3);display:none}
.verdict.on{display:block;animation:bancRise .3s var(--ease-out) backwards}
.verdict.ok{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.12),transparent 70%);
  border-inline-start:3px solid var(--green)
}
.verdict.no{
  background:linear-gradient(90deg,rgba(var(--red-rgb),.12),transparent 70%);
  border-inline-start:3px solid var(--red)
}
.verdict.info{
  background:linear-gradient(90deg,rgba(var(--cyan-rgb),.10),transparent 70%);
  border-inline-start:3px solid var(--cyan)
}

/* ---------- ORDER (réordonner) ---------- */
.order{display:flex;flex-direction:column;gap:7px;margin:6px 0 4px}
.ord{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--panel2-hi),var(--panel2));
  border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;
  font-family:var(--mono);font-size:var(--fs-3);cursor:grab;box-shadow:var(--e1);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t-fast) var(--ease-out)
}
.ord:hover{border-color:rgba(var(--cyan-rgb),.4)}
.ord[draggable=true]:active{cursor:grabbing}
.ord.drag{opacity:.35;border-style:dashed;box-shadow:none}
.ord.over{border-color:var(--cyan);box-shadow:var(--glow-soft-cyan);transform:translateY(-1px)}
.ord .n{font-size:var(--fs-1);color:var(--faint);width:16px;flex:none}
.ord .txt{flex:1;white-space:pre-wrap}
.ord .mv{display:flex;flex-direction:column;gap:2px;flex:none}
.ord .mv button{
  font-size:var(--fs-1);line-height:1;color:var(--muted);padding:2px 5px;
  border:1px solid var(--line);border-radius:3px;transition:var(--t-fast)
}
.ord .mv button:hover{color:var(--cyan);border-color:var(--cyan)}
.ord.good{border-color:rgba(var(--green-rgb),.75);box-shadow:var(--glow-green)}
.ord.bad{border-color:rgba(var(--red-rgb),.75);box-shadow:var(--glow-red)}

/* ---------- MATCH (associer) ---------- */
.match{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:6px 0}
.match .col h4{
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px
}
.mit{
  display:block;width:100%;text-align:left;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--panel2-hi),var(--panel2));
  border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;
  font-size:var(--fs-3);margin-bottom:7px;box-shadow:var(--e1);
  transition:border-color var(--t),background var(--t),box-shadow var(--t),
             transform var(--t-fast) var(--ease-out)
}
.mit:hover:not(.done){border-color:rgba(var(--cyan-rgb),.55);transform:translateY(-1px);box-shadow:var(--e2)}
.mit.sel{
  border-color:var(--amber);
  background:linear-gradient(180deg,rgba(var(--amber-rgb),.16),rgba(var(--amber-rgb),.06));
  box-shadow:var(--glow-amber)
}
.mit.done{
  border-color:rgba(var(--green-rgb),.55);opacity:.6;cursor:default;box-shadow:none;
  background:rgba(var(--green-rgb),.06)
}
.mit .tag{font-family:var(--mono);font-size:var(--fs-1);color:var(--faint);display:block;margin-top:3px}

/* ---------- BUILD (assemblage de blocs) ---------- */
.bank{
  display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 var(--s3);padding:12px;
  background:var(--deep);border:1px dashed var(--line);border-radius:var(--r);min-height:56px;
  box-shadow:inset 0 2px 10px -6px rgba(var(--black-rgb),.9)
}
.blk{
  position:relative;overflow:hidden;isolation:isolate;font-family:var(--mono);font-size:var(--fs-3);
  background:linear-gradient(180deg,var(--panel2-hi),var(--panel2));
  border:1px solid var(--line);border-radius:var(--r);padding:7px 12px;white-space:pre;
  box-shadow:var(--e1);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t-fast) var(--ease-out)
}
.blk:hover{border-color:rgba(var(--cyan-rgb),.6);transform:translateY(-1px);box-shadow:var(--e2)}
.blk:active{transform:translateY(0) scale(.98)}
.slots{
  position:relative;display:flex;flex-direction:column;gap:4px;background:var(--deep);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 14px 19px;min-height:80px;
  box-shadow:inset 0 2px 10px -6px rgba(var(--black-rgb),.9)
}
.slots::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--amber),rgba(var(--amber-rgb),.3));
  border-radius:var(--r) 0 0 var(--r)
}
.slot{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-3)}
.slot .n{font-size:var(--fs-1);color:var(--faint);width:16px;flex:none}
.slot .blk{flex:0 0 auto}

/* ---------- ÉDITEUR DE CODE ---------- */
.brief{
  position:relative;background:linear-gradient(180deg,var(--panel2-hi),var(--panel2));
  border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;
  margin-bottom:var(--s3);font-size:var(--fs-3);box-shadow:var(--e1)
}
.brief b{color:var(--amber)}
.ed-wrap{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--deep-hi),var(--deep) 120px);overflow:hidden;
  box-shadow:var(--e2);
  transition:border-color var(--t),box-shadow var(--t)
}
.ed-wrap::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;z-index:2;
  background:linear-gradient(180deg,var(--amber),rgba(var(--amber-rgb),.3));
  transition:background var(--t)
}
.ed-wrap.focus{border-color:rgba(var(--cyan-rgb),.6);box-shadow:var(--e2),var(--glow-soft-cyan)}
.ed-wrap.focus::before{background:linear-gradient(180deg,var(--cyan),rgba(var(--cyan-rgb),.3))}
/* Bande de ligne courante. Premier enfant de `.ed-wrap`, donc peinte
   avant les trois couches de texte sans avoir besoin d'un z-index :
   l'ordre du document suffit entre éléments positionnés. Position,
   hauteur et teinte viennent de `js/editor.js`, qui seul connaît
   l'interligne réel. */
.ed-band{z-index:0}
.ed-band.err{
  box-shadow:inset 0 1px 0 rgba(var(--red-rgb),.30),inset 0 -1px 0 rgba(var(--red-rgb),.30)
}
/* Les trois couches partagent exactement la même métrique : toute
   divergence de police, d'interligne ou de padding décale la coloration. */
.ed-hl,.ed-ta{
  font-family:var(--mono);font-size:var(--fs-3);line-height:1.65;
  padding:16px 18px 16px 52px;margin:0;border:0;white-space:pre;tab-size:4;
  letter-spacing:normal;word-spacing:normal;
}
/* `.ed-hl` est un <pre> : sans ces annulations il hérite du bloc de code
   de cours — fond opaque, ombre, coins arrondis et gouttière colorée en
   ::before — et, comme il est postérieur à `.ed-gut` dans le document et
   couvre toute la largeur, il efface purement et simplement les numéros
   de ligne. Rien ici ne touche à la métrique. */
.ed-hl{
  position:absolute;inset:0;pointer-events:none;color:var(--paper);overflow:hidden;
  background:none;box-shadow:none;border-radius:0
}
.ed-hl::before{display:none}
.ed-ta{
  position:relative;display:block;width:100%;min-height:150px;max-height:440px;
  background:transparent;color:transparent;caret-color:var(--cyan);resize:none;outline:none;overflow:auto
}
.ed-ta::selection{background:rgba(var(--cyan-rgb),.28)}
.ed-gut{
  /* Volontairement NON logique : voir .editor[dir=ltr] plus bas. */
  position:absolute;left:0;top:0;width:40px;height:100%;padding:16px 8px 0 0;text-align:right;
  font-family:var(--mono);font-size:var(--fs-3);line-height:1.65;color:var(--faint);
  z-index:1;
  background:linear-gradient(90deg,rgba(var(--black-rgb),.42),rgba(var(--black-rgb),.22));
  border-right:1px solid var(--line);pointer-events:none;
  user-select:none;overflow:hidden;will-change:transform
}
.ed-gut i{display:block;font-style:normal;transition:color var(--t-fast) var(--ease-out)}
.ed-gut i.cur{color:var(--cyan)}
.ed-gut i.err{color:var(--red);font-weight:700;text-shadow:0 0 10px rgba(var(--red-rgb),.9)}
.tools{display:flex;gap:10px;margin-top:var(--s3);flex-wrap:wrap;align-items:center}
.tools .spacer{flex:1}

/* ---------- CONSOLE / TESTS ---------- */
.console{
  margin-top:var(--s3);background:var(--deep);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:var(--fs-2);overflow:hidden;box-shadow:var(--e1)
}
.console-hd{
  display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(var(--white-rgb),.035),transparent);
  color:var(--muted);font-size:var(--fs-1);letter-spacing:.14em;text-transform:uppercase
}
.console-hd .ms{margin-inline-start:auto;color:var(--faint)}
.console-hd .dot{
  width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none;
  transition:background var(--t),box-shadow var(--t)
}
.console-hd .dot.run{background:var(--cyan);box-shadow:0 0 10px rgba(var(--cyan-rgb),.9);animation:bancBlink .7s infinite}
.console-hd .dot.ok{background:var(--green);box-shadow:0 0 10px rgba(var(--green-rgb),.9)}
.console-hd .dot.err{background:var(--red);box-shadow:0 0 10px rgba(var(--red-rgb),.9)}
.console-body{padding:12px 14px;max-height:260px;overflow:auto;white-space:pre-wrap;line-height:1.55}
.console-body .err{color:var(--red)}
.console-body .dim{color:var(--faint)}
.tests{border-top:1px solid var(--line)}
/* Sélecteur volontairement plus spécifique que `.stagger>*` : la liste
   de tests porte aussi cette classe, et son entrée par la gauche se lit
   mieux qu'une montée verticale sur des lignes serrées. */
.tests .test{
  display:flex;gap:10px;align-items:flex-start;padding:9px 14px;
  border-bottom:1px solid rgba(var(--line-rgb),.55);font-size:var(--fs-2);
  animation:bancTestIn .34s var(--ease-out) backwards
}
.test:last-child{border-bottom:none}
.test .m{flex:none;width:14px;font-weight:700;display:inline-block}
.test.pass .m{color:var(--green);text-shadow:0 0 10px rgba(var(--green-rgb),.7);animation:bancTick .42s var(--ease-spring) backwards}
.test.fail .m{color:var(--red);text-shadow:0 0 10px rgba(var(--red-rgb),.7);animation:bancCross .42s var(--ease-out) backwards}
.test.pass{background:linear-gradient(90deg,rgba(var(--green-rgb),.05),transparent 40%)}
.test.fail{background:linear-gradient(90deg,rgba(var(--red-rgb),.06),transparent 40%)}
.test .body{flex:1;min-width:0}
.test .name{color:var(--paper)}
.test .diff{margin-top:5px;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.test .diff em{font-style:normal;color:var(--red)}
.test .diff b{font-weight:400;color:var(--green)}
/* Les tests arrivent en cascade : on lit le résultat, on ne le subit pas. */
.tests .test:nth-child(1){animation-delay:0ms}
.tests .test:nth-child(2){animation-delay:60ms}
.tests .test:nth-child(3){animation-delay:120ms}
.tests .test:nth-child(4){animation-delay:180ms}
.tests .test:nth-child(5){animation-delay:240ms}
.tests .test:nth-child(6){animation-delay:300ms}
.tests .test:nth-child(7){animation-delay:360ms}
.tests .test:nth-child(n+8){animation-delay:420ms}

/* ---------- SVG ---------- */
.viz{
  position:relative;background:linear-gradient(180deg,var(--deep-hi),var(--deep));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin:18px 0;
  box-shadow:var(--e1),inset 0 1px 0 rgba(var(--white-rgb),.03)
}
.viz::before{
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%,rgba(var(--cyan-rgb),.05),transparent 68%)
}
.viz svg{position:relative;width:100%;height:auto;display:block}
.viz figcaption{
  position:relative;font-family:var(--mono);font-size:var(--fs-1);color:var(--faint);
  margin-top:10px;text-align:center;letter-spacing:.06em
}
.cell{fill:var(--panel2);stroke:var(--line)}
.cell.live{fill:rgba(var(--cyan-rgb),.14);stroke:var(--cyan)}
.cell.hot{fill:rgba(var(--amber-rgb),.14);stroke:var(--amber)}
/* Les deux seules tailles hors échelle de la feuille, et pour une
   raison : elles sont exprimées dans les unités du viewBox des SVG de
   js/viz.js, pas en pixels d'écran. Les faire suivre la densité ferait
   déborder les étiquettes de cadres qui, eux, ne bougent pas. Le schéma
   entier grandit déjà avec la colonne qui le porte. */
.lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--muted)}
.val{font-family:'IBM Plex Mono',monospace;font-size:13px;fill:var(--paper)}
.acc{fill:var(--amber)}

/* ---------- PIEDS D'ÉCRAN ET RENVOIS AU TUTEUR ----------
   Ces conteneurs portent aussi `.tools` en secours ; les règles ci-dessous
   viennent après dans la feuille, elles gagnent donc à égalité de poids. */
.ask-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:var(--s3)}
.screen-foot{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid rgba(var(--line-rgb),.6)
}
/* Vides, ils ne doivent pas laisser un trou ni un filet orphelin. */
.ask-row:empty,.screen-foot:empty{display:none;margin:0;padding:0;border:0}
.verdict-ask{margin-top:11px}
.verdict-ask .ask-btn{margin-top:0}

/* Séparateur `---` du markdown de cours : une respiration, pas un trait. */
hr.sep{
  border:0;height:1px;margin:var(--s5) 0;
  background:linear-gradient(90deg,transparent,var(--line-hi) 18%,
    var(--line-hi) 82%,transparent)
}

/* ---------- CHECKPOINT / BOSS ---------- */
.cp-lede{color:var(--muted);font-size:var(--fs-4);margin-bottom:var(--s4)}
.screen .recap{list-style:none;display:flex;flex-direction:column;gap:11px;margin:var(--s4) 0}
.recap li{display:flex;gap:12px}
.recap .tick{color:var(--green);font-family:var(--mono);flex:none;text-shadow:0 0 10px rgba(var(--green-rgb),.6)}

/* La file de révision : bloc violet, comme partout où le SRS parle. */
.cp-srs{
  position:relative;margin:var(--s5) 0 0;padding:18px 20px 20px 23px;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--violet-rgb),.08),transparent 60%),var(--panel2);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e1)
}
.cp-srs::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--violet),rgba(var(--violet-rgb),.25));
  box-shadow:0 0 14px -2px rgba(var(--violet-rgb),.8)
}
.screen .cp-srs h3{margin:0 0 8px;color:var(--paper)}
.cp-srs-lede{color:var(--muted);font-size:var(--fs-3);line-height:1.55;margin-bottom:var(--s4);max-width:62ch}
.cp-srs-lede b{color:var(--violet);font-weight:600}

/* Échéancier : une frise horizontale. Chaque palier est un nœud sur une
   ligne, avec sa date réelle — « J+16 » seul ne rassure personne. */
.cp-srs .srs-plan{
  display:flex;list-style:none;margin:0 0 var(--s4);padding:0;
  align-items:flex-start
}
.cp-srs .srs-step{
  position:relative;flex:1 1 0;min-width:0;margin:0;padding-top:20px;
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center
}
.cp-srs .srs-step::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;z-index:1;
  background:var(--panel2);border:2px solid var(--violet);
  box-shadow:0 0 10px -2px rgba(var(--violet-rgb),.95)
}
.cp-srs .srs-step::after{
  content:'';position:absolute;top:5px;left:50%;right:-50%;height:1px;
  background:linear-gradient(90deg,rgba(var(--violet-rgb),.55),rgba(var(--line-rgb),.9))
}
.cp-srs .srs-step:last-child::after{display:none}
.cp-srs .srs-step .when{
  font-family:var(--mono);font-size:var(--fs-2);font-weight:500;color:var(--violet);
  letter-spacing:.06em
}
.cp-srs .srs-step .date{
  font-family:var(--mono);font-size:var(--fs-1);color:var(--faint);
  line-height:1.35;word-break:break-word
}

/* Notions programmées : nom à gauche, échéance à droite. */
.cp-srs .srs-notions{list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(var(--line-rgb),.7)}
.cp-srs .srs-notion{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin:0;padding:9px 0;border-bottom:1px solid rgba(var(--line-rgb),.55)
}
.cp-srs .srs-notion:last-child{border-bottom:none;padding-bottom:0}
.cp-srs .srs-notion .nm{color:var(--paper);font-size:var(--fs-3);min-width:0;word-break:break-word}
.cp-srs .srs-notion .due{
  font-family:var(--mono);font-size:var(--fs-1);color:var(--violet);
  white-space:nowrap;flex:none;opacity:.9
}

.score{display:flex;align-items:baseline;gap:10px;font-family:var(--display);margin:18px 0 6px}
.score b{
  /* Hors échelle à dessein : le score du boss est un chiffre
     d'affichage, pas du texte à lire. */
  font-size:46px;line-height:1;color:var(--amber);font-weight:700;
  text-shadow:0 0 40px rgba(var(--amber-rgb),.45)
}
.score span{font-family:var(--mono);font-size:var(--fs-2);color:var(--muted)}

/* ---------- PIED / DIVERS ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s4);gap:14px;flex-wrap:wrap}
.hintline{font-family:var(--mono);font-size:var(--fs-1);color:var(--muted);letter-spacing:.06em}
/* La ligne d'aide du lecteur attend un silence. Elle garde sa place
   dans la mise en page — la faire disparaître ferait sauter le bouton
   Suivant d'un écran à l'autre. */
#hint{opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
#hint.on{opacity:1}

.toast{
  position:fixed;left:50%;bottom:34px;
  transform:translate(-50%,150%) scale(.96);opacity:0;
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(var(--amber-rgb),.55);color:var(--amber);
  font-family:var(--mono);font-size:var(--fs-3);
  padding:12px 24px;border-radius:99px;z-index:var(--z-toast);
  box-shadow:var(--e3),var(--glow-soft-amber);
  max-width:calc(100vw - 40px);text-align:center;
  transition:transform var(--t-slow) var(--ease-out),opacity var(--t) ease
}
.toast.on{
  transform:translate(-50%,0) scale(1);opacity:1;
  transition:transform .5s var(--ease-spring),opacity var(--t-fast) ease
}
.toast.bad{border-color:rgba(var(--red-rgb),.6);color:var(--red);box-shadow:var(--e3),0 0 18px -8px rgba(var(--red-rgb),.8)}

.loadbar{
  position:fixed;inset-inline-start:0;top:0;height:2px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--cyan),var(--amber));
  transition:width var(--t) var(--ease-out);
  box-shadow:0 0 12px rgba(var(--cyan-rgb),.9)
}

/* ---------- RÉGLAGES ---------- */
.sheet{
  position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;
  background:rgba(var(--black-rgb),.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:20px
}
.sheet.on{display:flex;animation:bancFade .2s ease backwards}
.sheet-in{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel) 140px);
  border:1px solid var(--line);border-radius:var(--r-xl);
  width:min(470px,100%);max-height:86vh;overflow:auto;padding:26px;
  box-shadow:var(--e3);
  animation:bancPop .32s var(--ease-spring) backwards
}
.sheet-in h2{font-family:var(--display);font-size:var(--fs-5);font-weight:500;margin-bottom:6px}
.sheet-in p.sub{font-size:var(--fs-3);color:var(--muted);margin-bottom:18px}
.row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid rgba(var(--line-rgb),.6)
}
.row:last-of-type{border-bottom:none}
.row label{font-size:var(--fs-3)}
.row .h{font-size:var(--fs-2);color:var(--muted);display:block;margin-top:2px}
.row input[type=range]{width:130px;accent-color:var(--cyan)}
.row select,.row input[type=text]{
  background:var(--deep);border:1px solid var(--line);color:var(--paper);
  font-family:var(--mono);font-size:var(--fs-2);padding:7px 10px;border-radius:var(--r);
  transition:border-color var(--t),box-shadow var(--t)
}
.row select:focus,.row input[type=text]:focus{border-color:var(--cyan);box-shadow:var(--glow-soft-cyan);outline:none}
.sw{
  width:44px;height:24px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);
  position:relative;flex:none;cursor:pointer;
  box-shadow:inset 0 1px 3px rgba(var(--black-rgb),.5);
  transition:background var(--t),border-color var(--t),box-shadow var(--t)
}
.sw::after{
  content:'';position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;
  background:var(--muted);box-shadow:0 1px 3px rgba(var(--black-rgb),.6);
  transition:left var(--t) var(--ease-spring),background var(--t)
}
.sw.on{background:rgba(var(--cyan-rgb),.20);border-color:rgba(var(--cyan-rgb),.7);box-shadow:var(--glow-soft-cyan)}
.sw.on::after{inset-inline-start:22px;background:var(--cyan);box-shadow:0 0 12px rgba(var(--cyan-rgb),.9)}

/* Choix à deux ou trois valeurs. Un interrupteur ne sait dire que oui ou
   non ; « compacte / confortable / grande » n'est pas une question
   fermée. Le curseur glisse plutôt que de clignoter, sinon on ne voit
   pas quelle valeur on vient de quitter. */
.pick{
  display:inline-flex;flex:none;padding:3px;gap:2px;border-radius:99px;
  background:var(--panel2);border:1px solid var(--line);
  box-shadow:inset 0 1px 3px rgba(var(--black-rgb),.4)
}
.pick button{
  font-family:var(--body);font-size:var(--fs-2);color:var(--muted);
  padding:6px 13px;border:0;border-radius:99px;background:none;cursor:pointer;white-space:nowrap;
  transition:color var(--t),background var(--t),box-shadow var(--t)
}
.pick button:hover{color:var(--paper)}
.pick button[aria-checked="true"]{
  color:var(--on-accent);font-weight:600;
  background:linear-gradient(180deg,var(--cyan-hi),var(--cyan));
  box-shadow:var(--glow-soft-cyan)
}

/* Titre de section de la feuille de réglages : le panneau porte
   maintenant quatre familles de choix, une liste plate ne se lit plus. */
.sheet-in h3.sec{
  font-family:var(--mono);font-size:var(--fs-1);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
  margin:var(--s4) 0 2px
}
.sheet-in h3.sec:first-of-type{margin-top:var(--s3)}

.sheet-foot{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center}

/* ---------- TABLEAUX DE CONTENU ---------- */
.tablewrap{
  overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--e1)
}
.tablewrap table{border-collapse:collapse;width:100%;font-size:var(--fs-3)}
.tablewrap th,.tablewrap td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tablewrap thead th{
  background:linear-gradient(180deg,var(--panel2-hi),var(--panel2));
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:500;white-space:nowrap
}
.tablewrap tbody tr:last-child td{border-bottom:none}
.tablewrap tbody tr{transition:background var(--t-fast)}
.tablewrap tbody tr:hover{background:rgba(var(--cyan-rgb),.05)}
.tablewrap code{white-space:nowrap}

/* ---------- RESPONSIVE ----------
   Les surcharges de taille descendent d'un cran sur l'échelle, elles ne
   posent plus de pixels : sinon le réglage de densité s'arrêterait net
   au bord d'un téléphone, qui est justement l'endroit où « plus gros »
   se demande le plus. Trois d'entre elles ont disparu — elles
   retombaient sur le jeton que la règle de bureau utilisait déjà. */
@media (max-width:620px){
  .wrap{padding:0 14px 80px}
  .screen{padding:24px 18px;border-radius:var(--r)}
  .screen h2{padding-inline-end:0}
  .screen::before{display:none}
  .rail{padding:10px 14px}
  .rail-in{gap:10px 12px}
  .brand{font-size:var(--fs-4)}
  .gauge{order:5;flex-basis:100%;min-width:0}
  .stat{font-size:var(--fs-1)}
  .match{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr;gap:10px}
  /* Un segmenté de trois valeurs ne tient pas à côté de son libellé :
     il passe sous lui et prend toute la largeur. */
  .row{flex-wrap:wrap}
  .pick{width:100%;justify-content:space-between}
  .pick button{flex:1}
  .btn{padding:11px 20px}
  .nav{gap:10px}
  .toast{bottom:20px;font-size:var(--fs-2);padding:10px 18px}
  /* Cinq paliers côte à côte ne tiennent pas : la frise bascule à la
     verticale, mêmes nœuds, même fil conducteur. */
  .cp-srs{padding:16px 16px 18px 19px}
  .cp-srs .srs-plan{flex-direction:column;align-items:stretch}
  .cp-srs .srs-step{
    flex:none;flex-direction:row;align-items:baseline;gap:12px;
    text-align:left;padding:5px 0 5px 26px
  }
  .cp-srs .srs-step::before{top:8px;inset-inline-start:4px;transform:none}
  .cp-srs .srs-step::after{
    top:19px;bottom:-5px;inset-inline-start:9px;inset-inline-end:auto;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(var(--violet-rgb),.55),rgba(var(--line-rgb),.9))
  }
  .cp-srs .srs-notion{flex-direction:column;gap:2px}
  .cp-srs .srs-notion .due{align-self:flex-start}
}
@media (max-width:420px){
  .hearts span{width:16px;height:16px}
  .btn-ghost{padding:8px 12px;font-size:var(--fs-2)}
}

/* Retour au portail de l'Atelier. BANC est servi sous /banc/ : le lien remonte
   d'un cran. Discret, et il disparaît sur petit écran où la place manque. */
.rail-back{
  text-decoration:none;display:inline-flex;align-items:center;
  padding:7px 12px;font-size:var(--fs-4,.78rem);letter-spacing:.02em;white-space:nowrap
}
@media (max-width:720px){ .rail-back{display:none} }

/* ============================================================
   DE DROITE À GAUCHE

   L'interface se retourne quand la langue l'exige — c'est le rôle des
   propriétés logiques posées partout ailleurs dans cette feuille. Mais
   le code, lui, ne se retourne jamais : une ligne de Python lue de
   droite à gauche n'est plus du Python, et la gouttière de numéros doit
   rester du côté où commence l'instruction. Ces blocs sortent donc du
   flux inversé par un `direction` explicite.

   Ce n'est pas une entorse : c'est ce que font tous les éditeurs de code
   sous interface arabe ou hébraïque.
   ============================================================ */
[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] .ed-mount,
[dir="rtl"] .ed-ta,
[dir="rtl"] .ed-gut,
[dir="rtl"] .console,
[dir="rtl"] .console-body,
[dir="rtl"] .trace-out{
  direction:ltr;
  text-align:left;
}

/* L'en-tête de console garde le sens de lecture de l'interface — ce sont
   des mots, pas du code — mais son contenu s'aligne alors à droite. */
[dir="rtl"] .console-hd{direction:rtl;text-align:right}

/* Les quelques flèches dessinées en CSS plutôt qu'écrites dans le texte. */
[dir="rtl"] .lv .go,
[dir="rtl"] .rail-back{transform:scaleX(-1);display:inline-block}