/* PLOT TWIST — identité : nuit électrique, néon violet/rose, or pour les autres courbes. */

/* ============ THÈME PAR DÉFAUT : « nuit » (nuit électrique) ============
   Tout le pipeline couleur — CSS, canvas, confettis — passe par ces variables.
   Chaque palette de courbes (u1/u2/crowd/camp2 sur sa surface) est validée
   daltonisme + contraste au validateur dataviz. */
:root {
  --bg: #08080e;
  --surface: #0d0d16;
  --panel: rgba(255, 255, 255, 0.038);
  --panel-border: rgba(255, 255, 255, 0.09);
  --ink: #f2f1fa;
  --ink-2: rgba(242, 241, 250, 0.72);
  --ink-3: rgba(242, 241, 250, 0.55); /* >= 4.5:1 sur --bg (AA petit texte) */
  --u1: #8a7bff;
  --u2: #e33d92;
  --crowd: #bd8512;
  --camp2: #1a9c86;
  --radius: 22px;
  --font-display: 'Unbounded', 'Segoe UI', sans-serif;
  --font-body: 'Space Grotesk', 'Segoe UI', sans-serif;
  /* surfaces & habillage */
  --modal-bg: #12121d;
  --modal-back: rgba(5, 5, 10, 0.72);
  --overlay-bg: rgba(13, 13, 22, 0.85);
  --overlay-bg-strong: rgba(13, 13, 22, 0.92);
  --inset-bg: rgba(255, 255, 255, 0.045);
  --inset-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --wrap-tint: rgba(138, 123, 255, 0.05);
  --title-grad-a: #ffffff;
  --title-grad-b: #c9c3ec;
  --noise-op: 0.055;
  --btn-ink: #ffffff;
  --btn-grad-a: var(--u1);
  --btn-grad-b: var(--u2);
  --streak-ink: #ffb84d;
  --track-bg: rgba(255, 255, 255, 0.07);
  --hover-bg: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.05);
  --modal-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  --link-ink: var(--u1);
  --glow-a: rgba(138, 90, 255, 0.35);
  --glow-b: rgba(227, 61, 146, 0.42);
  --pop-glow: rgba(227, 61, 146, 0.8);
  --banner-bg: rgba(138, 123, 255, 0.1);
  --banner-border: rgba(138, 123, 255, 0.3);
  --badge-bg: rgba(138, 123, 255, 0.13);
  --badge-border: rgba(138, 123, 255, 0.35);
  --badge-ink: #b9aeff;
  --tip-u: #f393c8;
  --tip-a: #e0a52e;
  --tip-b: #2dc4ac;
  --band-swatch: rgba(224, 165, 46, 0.28);
  /* canvas (lu par js/theme.js pour le moteur de dessin) */
  --c-grid: rgba(255, 255, 255, 0.045);
  --c-grid-mid: rgba(255, 255, 255, 0.09);
  --c-user-glow: rgba(227, 61, 146, 0.45);
  --c-user-area: rgba(138, 123, 255, 0.16);
  --c-crowd-glow: rgba(224, 165, 46, 0.4);
  --c-camp2-glow: rgba(45, 196, 172, 0.4);
  --c-ghost: rgba(255, 255, 255, 0.07);
  --c-ghost-a: rgba(224, 165, 46, 0.10);
  --c-ghost-b: rgba(45, 196, 172, 0.10);
  --c-band: rgba(224, 165, 46, 0.08);
  --c-diverge: rgba(227, 61, 146, 0.06);
  --c-demo: rgba(255, 255, 255, 0.13);
  --c-demo-dot: rgba(255, 255, 255, 0.4);
  --c-pen-core: rgba(255, 255, 255, 0.95);
  --c-pen-halo: rgba(227, 61, 146, 0.6);
  --c-inspect: rgba(255, 255, 255, 0.28);
  --c-dot-ring: rgba(10, 10, 18, 0.85);
  --c-jalon: rgba(255, 255, 255, 0.09);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.hidden { display: none !important; }

html { color-scheme: dark; }
/* La gouttière de défilement est réservée en permanence. Sans ça, l'apparition
   de #results au reveal fait apparaître la barre, clientWidth perd ~11 px et la
   colonne du graphe rétrécit EN PLEINE ANIMATION : le ResizeObserver relance
   _size() + render() au milieu de la timeline. Le graphe doit faire exactement
   la même largeur en dessin et en reveal (invariant verrouillé, CLAUDE.md). */
html { scrollbar-gutter: stable; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- fond animé ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
/* Dégradés pré-adoucis (multi-stops) plutôt que filter:blur animé :
   supprime le shimmer GPU et réduit le banding sur fond sombre. */
.blob {
  position: absolute;
  width: 55vw; height: 55vw;
  border-radius: 50%;
  will-change: transform;
}
.b1 {
  background: radial-gradient(circle,
    rgba(109, 77, 255, 0.11) 0%, rgba(109, 77, 255, 0.08) 25%,
    rgba(109, 77, 255, 0.045) 45%, rgba(109, 77, 255, 0.015) 62%, transparent 75%);
  top: -18vw; left: -12vw;
  animation: drift1 26s ease-in-out infinite alternate;
}
.b2 {
  background: radial-gradient(circle,
    rgba(227, 61, 146, 0.07) 0%, rgba(227, 61, 146, 0.05) 25%,
    rgba(227, 61, 146, 0.028) 45%, rgba(227, 61, 146, 0.01) 62%, transparent 75%);
  bottom: -20vw; right: -14vw;
  animation: drift2 32s ease-in-out infinite alternate;
}
.b3 {
  background: radial-gradient(circle,
    rgba(25, 227, 183, 0.04) 0%, rgba(25, 227, 183, 0.025) 30%,
    rgba(25, 227, 183, 0.01) 55%, transparent 72%);
  top: 30vh; left: 55vw;
  width: 36vw; height: 36vw;
  animation: drift1 40s ease-in-out infinite alternate-reverse;
}
@keyframes drift1 { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(9vw, 6vh) rotate(40deg); } }
@keyframes drift2 { from { transform: translate(0, 0); } to { transform: translate(-8vw, -7vh); } }
.noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: var(--noise-op); /* grain : dither le banding des dégradés */
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) {
  .blob,
  .eyebrow .dot,
  .draw-hint span,
  .reveal-status span { animation: none !important; }
  html { scroll-behavior: auto !important; }
  /* la colonne de résultats apparaît EN PLACE : c'est le seul mouvement du
     reveal depuis la suppression du count-up, il doit pouvoir être coupé */
  .results { transition: none !important; }
}

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1360px; margin: 0 auto;   /* aligné sur main, sinon le header est en retrait */
  padding: 22px 24px 4px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 2px;
  color: var(--ink);
  user-select: none;
}
.logo em {
  font-style: normal;
  background: linear-gradient(100deg, var(--u1), var(--u2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo svg { color: var(--u2); margin-left: 4px; transform: translateY(-3px); }
.chips { display: flex; align-items: center; gap: 8px; }
.chip {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 7px 13px; border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--ink-2);
  backdrop-filter: blur(10px);
}
.chip.streak b { color: var(--streak-ink); }
.icon-btn {
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--ink-2);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  position: relative;
}
/* zone tactile élargie (~46px) sans changer le visuel */
.icon-btn::after, .modal-close::after {
  content: '';
  position: absolute; inset: -6px;
}
.icon-btn:hover { transform: translateY(-1px); background: var(--hover-bg); }

/* ---------- layout ---------- */
/* 1360 et non 1080 : la deuxième colonne ne se paie PAS en surface de dessin.
   Le canvas retrouve ~865 × 486 à 1440 contre 924 × 520 à une colonne. */
main { max-width: 1360px; margin: 0 auto; padding: 12px 24px 60px; }

/* La grille : le graphe à gauche (jamais recouvert, jamais redimensionné entre
   le dessin et le reveal), la colonne de droite au-dessus du pli. Deux paliers
   seulement — 1000 et 640. Pas de `sticky` : une info qui suit l'œil est une
   info qu'on ne peut pas laisser derrière soi (budget, même raison que le
   `position: fixed` permanent interdit). */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(272px, 28%, 380px);
  gap: 20px;
  align-items: start;
}
.side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------- hero ---------- */
/* aligné à GAUCHE, sur le bord du plateau : « alignements francs » */
.hero { text-align: left; padding: 14px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--u1), var(--u2));
  box-shadow: 0 0 12px var(--pop-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.7; } }
.topic-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.7vw, 40px);
  line-height: 1.12;
  margin: 10px 0 8px;
  max-width: 850px;
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, var(--title-grad-a), var(--title-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topic-title .emoji {
  -webkit-text-fill-color: initial;
  font-family: 'Segoe UI Emoji', sans-serif;
  filter: drop-shadow(0 6px 24px var(--glow-a));
}
.topic-q { color: var(--ink-2); font-size: 16.5px; }
.state-banner {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 10px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  font-size: 13.5px; font-weight: 500;
}
.link-btn {
  background: none; border: none;
  color: var(--link-ink);
  font: inherit; font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- plateau ---------- */
.board-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  /* marges latérales généreuses : toute la carte est dessinable,
     commencer un trait « à côté » du graphe fonctionne */
  padding: 20px 28px 14px;
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--card-shadow);
}
/* ⚠️ JAMAIS de `min-height` ici : sur une boîte en `aspect-ratio`, un
   min-height se TRANSFÈRE en min-width (transferred size suggestion) —
   min-height 400px + 16/9 impose une largeur plancher de 711 px et fait
   déborder la colonne. On pilote par le ratio, on ne borne que par max-height,
   qui letterboxe sans rien transférer. */
.canvas-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 62vh;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--wrap-tint), transparent 55%),
    var(--surface);
  /* pointillé : la frontière est perméable — on peut commencer son trait autour */
  border: 1.5px dashed var(--inset-border);
  cursor: crosshair;
}
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ylab {
  position: absolute; left: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
  background: var(--overlay-bg);
  padding: 3px 8px; border-radius: 6px;
}
.ylab.top { top: 10px; }
.ylab.bottom { bottom: 10px; }
.draw-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.draw-hint span {
  padding: 10px 20px; border-radius: 999px;
  background: var(--overlay-bg-strong);
  border: 1px solid var(--panel-border);
  font-size: 14.5px; font-weight: 500;
  color: var(--ink-2);
  animation: hintFloat 2.8s ease-in-out infinite;
}
@keyframes hintFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.draw-hint.out { opacity: 0; }
.hover-tip {
  position: absolute; top: 52px; /* sous la légende pour ne jamais la couvrir */
  transform: translateX(-50%);
  padding: 7px 13px; border-radius: 10px;
  background: var(--overlay-bg-strong);
  border: 1px solid var(--panel-border);
  font-size: 13px;
  pointer-events: none;
  white-space: nowrap;
  display: flex; gap: 10px; align-items: baseline;
  z-index: 3;
}
.hover-tip b { font-size: 14px; }
.tip-u { color: var(--tip-u); font-weight: 700; }
.tip-m { color: var(--tip-a); font-weight: 700; }
.pen-year {
  position: absolute; bottom: 8px;
  transform: translateX(-50%);
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--overlay-bg);
  border: 1px solid var(--panel-border);
  padding: 3px 9px; border-radius: 7px;
  pointer-events: none;
  z-index: 2;
}
.pen-year.pop { animation: yearPop 0.28s cubic-bezier(0.22, 1.6, 0.36, 1); }
@keyframes yearPop {
  0% { transform: translateX(-50%) scale(1); }
  35% {
    transform: translateX(-50%) scale(1.35);
    box-shadow: 0 0 20px var(--pop-glow);
    border-color: var(--u2);
  }
  100% { transform: translateX(-50%) scale(1); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pen-year.pop { animation: none; }
}
/* la légende n'est plus dans .canvas-wrap : elle s'ancre sur la carte, et les
   coordonnées intègrent le padding (20+10, 28+12) pour un rendu identique */
.board-card { position: relative; }
.legend {
  position: absolute; top: 30px; right: 40px;
  display: flex; gap: 14px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--overlay-bg);
  border: 1px solid var(--panel-border);
  font-size: 12px; color: var(--ink-2);
  pointer-events: none;
}
.lg { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 18px; height: 4px; border-radius: 2px; display: inline-block; }
.sw-you { background: linear-gradient(90deg, var(--u1), var(--u2)); }
.sw-crowd { background: var(--crowd); }
/* plein = fait, pointillé = estimation : la légende reprend la convention du canvas */
.sw-dash { background: repeating-linear-gradient(90deg, var(--crowd) 0 5px, transparent 5px 9px); }
.sw-band { background: var(--band-swatch); height: 9px; }
.xlabs {
  display: flex; justify-content: space-between;
  padding: 9px 4px 0;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* jalons : les événements clés sous la timeline, révélés avec les résultats */
.jalons {
  position: relative;
  height: 46px;
  margin-top: 8px;
  pointer-events: none; /* la zone reste dessinable par-dessus */
}
/* en attente : visibles mais estompés — ils servent de repères pour viser */
.jalon.pending {
  opacity: 0.35;
  animation: none;
}
/* « palier atteint » : le trait passe dessus — plus fort que le pop
   d'année, et le mouvement plonge vers le bas */
.jalon.hit {
  opacity: 1; /* état final explicite (et arrivée directe en reduced-motion) */
  animation: jalonHit 0.55s cubic-bezier(0.22, 1.6, 0.36, 1) both;
  z-index: 2;
}
@keyframes jalonHit {
  0% {
    opacity: 0.35;
    transform: translateX(-50%) translateY(-4px) scale(0.85);
  }
  40% {
    opacity: 1;
    transform: translateX(-50%) translateY(7px) scale(1.5);
    filter: drop-shadow(0 0 10px var(--pop-glow));
    color: var(--ink);
  }
  70% { transform: translateX(-50%) translateY(-2px) scale(1.04); }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .jalon.hit { animation: none; }
}
.jalon {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  text-align: center;
  animation: jalonIn 0.5s ease both;
}
/* assurance (pas un correctif de bug prouvé) : un jalon très long ne peut pas
   pousser scrollWidth au-delà de clientWidth, à AUCUNE largeur */
.jalon { max-width: 30%; overflow: hidden; text-overflow: ellipsis; }
.jalon.r0 { top: 0; }
.jalon.r1 { top: 23px; }
.jalon i {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  margin: 0 auto 3px;
}
.jalon.r1 i { display: none; }
.jalon b { color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: 3px; }
@keyframes jalonIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .jalon { animation: none; }
}
@media (max-width: 640px) {
  .jalon {
    font-size: 10px;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .jalons { height: 42px; }
}

/* ---------- actions ---------- */
/* #actionsRow EST le panneau de la colonne de droite : Verrouiller en haut,
   la jauge, puis Recommencer en discret. Aucun id n'a changé, aucun nœud
   conteneur n'a été ajouté. */
.board-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  box-shadow: var(--card-shadow);
}
.board-actions .btn { width: 100%; }
.cov { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.progress {
  height: 5px; border-radius: 99px;
  background: var(--track-bg);
  overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--u1), var(--u2));
  border-radius: 99px;
  transition: width 0.18s ease;
}
.cov-hint {
  font-size: 12px; color: var(--ink-3);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn {
  font-family: var(--font-body);
  font-size: 14.5px; font-weight: 700;
  padding: 12px 22px;
  border-radius: 14px;
  border: none; cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }
.btn.primary {
  background: linear-gradient(120deg, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--btn-ink);
  box-shadow: 0 8px 28px var(--glow-a);
}
.btn.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px var(--glow-b);
}
.btn.primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(0.4);
}
.btn.ghost {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--ink-2);
}
.btn.ghost:hover { background: var(--hover-bg); color: var(--ink); transform: translateY(-1px); }
.btn.big { font-size: 16px; padding: 15px 34px; }
.btn.small { font-size: 13px; padding: 8px 15px; border-radius: 11px; }
/* l'emplacement des remarques pendant le dessin : un titre et une ligne, zéro
   contrôle. Sa durée de vie est EXACTEMENT celle du panneau d'action — d'où la
   règle de frère qui suit, plutôt que trois show/hide à tenir synchronisés dans
   main.js. Elle suppose que .remarks-ph reste le frère de #actionsRow. */
.remarks-ph {
  padding: 18px;
  border: 1px dashed var(--inset-border);
  border-radius: var(--radius);
  color: var(--ink-3);
  font-size: 13.5px;
}
.remarks-ph h3 {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
#actionsRow.hidden ~ .remarks-ph { display: none; }

.reveal-status {
  text-align: center;
  font-size: 14.5px; color: var(--ink-2);
}
.reveal-status span { animation: pulse 1.2s ease-in-out infinite; display: inline-block; }

/* ---------- résultats ---------- */
/* #results EST la colonne de reveal : `show()` / `.in` marchent tels quels.
   .res-grid passe en `display: contents` — elle disparaît de la mise en page
   sans qu'on touche au HTML de ses enfants. */
.results {
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.results.in { opacity: 1; transform: translateY(0); }
.res-grid { display: contents; }
.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(18px);
  box-shadow: var(--card-shadow);
}
.card h3 {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
/* La carte de score : 4 nœuds. Pas de ::after décoratif — le radial-gradient
   était calibré pour 625 px de large et cadrait faux à 272. Aucun min-width,
   aucune largeur en px : c'est ce qui casserait scrollWidth === clientWidth. */
.score-card { text-align: left; }
/* LA PHRASE, le héros. Alignée à GAUCHE, jamais centrée : c'est, avec la
   bascule de couleur sur la seconde ligne et l'absence totale d'emoji, ce qui
   rend la carte reconnaissable dans un flux. Rapport de taille inversé :
   phrase/score = 27/19 en faveur de la phrase (c'était 92/21 pour le chiffre). */
.score-phrase {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.score-phrase span { display: block; }
/* la seconde ligne dans le dégradé du logo, du bouton primaire et de la courbe
   joueur : la ligne qui parle du joueur porte sa couleur. Zéro hex en dur. */
.score-phrase span + span {
  background: linear-gradient(120deg, var(--u1), var(--u2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.score-phrase span:empty { display: none; }
/* le filet : la phrase au-dessus, les statistiques en dessous */
.statline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
}
.statline span { display: inline-flex; align-items: baseline; gap: 7px; }
.statline b {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.statline i {
  font-family: var(--font-display);
  font-style: normal; font-weight: 800; font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.share-cta { margin-top: 14px; width: 100%; }
/* le débrief, sans repli : 1 ligne en Hype, 3 en Vérité (dont la source, qui
   doit être lisible sans clic). Remplace l'ancien <details class="debrief">. */
.debrief-line {
  margin-top: 12px;
  font-size: 13px; line-height: 1.5;
  color: var(--ink-3);
}
.debrief-line:empty { display: none; }
.debrief-line span { display: block; }
.debrief-line .src { color: var(--ink-2); }
/* l'ancienne .next-card (391 × 233) en UNE ligne, en pied de colonne */
.nextline {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 0 4px;
  font-size: 13px; color: var(--ink-3);
}
#countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-2); }
.teaser { display: inline-flex; align-items: baseline; gap: 6px; }
.teaser-label { color: var(--ink-3); }
.teaser-title { filter: blur(5px); user-select: none; }

/* ---------- footer ---------- */
footer {
  text-align: center;
  padding: 10px 24px 34px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ---------- modales ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-back {
  position: absolute; inset: 0;
  background: var(--modal-back);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal.in .modal-back { opacity: 1; }
.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--modal-bg);
  border: 1px solid var(--panel-border);
  border-radius: 26px;
  padding: 34px;
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  box-shadow: var(--modal-shadow);
}
.modal.in .modal-card { transform: translateY(0) scale(1); opacity: 1; }
.modal-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 6px;
}
.modal-sub { color: var(--ink-3); font-size: 13.5px; margin-bottom: 18px; }
.modal-card:focus { outline: none; }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 13px;
}
.modal-close:hover { background: var(--hover-bg); }
.modal-logo {
  font-family: var(--font-display);
  font-weight: 900; font-size: 17px;
  margin-bottom: 14px;
}
.modal-logo em {
  font-style: normal;
  background: linear-gradient(100deg, var(--u1), var(--u2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.intro-card { text-align: center; }
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0 26px;
  text-align: center;
}
.step {
  background: var(--inset-bg);
  border: 1px solid var(--inset-border);
  border-radius: 18px;
  padding: 18px 12px;
}
.step-ico { font-size: 30px; margin-bottom: 10px; }
.step h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.step p { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.archive-list { display: flex; flex-direction: column; gap: 9px; }
.archive-row {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px;
  background: var(--inset-bg);
  border: 1px solid var(--inset-border);
  border-radius: 15px;
}
.archive-emoji { font-size: 23px; }
.archive-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.archive-info b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-info small { color: var(--ink-3); font-size: 12px; text-transform: capitalize; }
.archive-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--badge-ink);
  white-space: nowrap;
}
.archive-empty { color: var(--ink-3); text-align: center; padding: 20px 0; }
.reset-btn { width: 100%; margin-top: 14px; font-size: 13px; }
.share-card-modal { text-align: center; }
.share-preview {
  width: 100%; max-width: 380px;
  border-radius: 18px;
  border: 1px solid var(--panel-border);
  margin: 14px auto 16px;
  display: block;
}
.share-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.share-feedback { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); min-height: 1.2em; }

/* ---------- confettis ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* ---------- os, badges, skins, remarques ---------- */
/* point de notification : un badge débloqué pas encore vu (disparaît à l'ouverture) */
#denBtn.unseen::before {
  content: '';
  position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--u1), var(--u2));
  border: 2px solid var(--bg);
}

/* toast unique : pilule discrète bottom-center, clic = fermeture */
#toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translate(-50%, 12px);
  z-index: 80;
  padding: 11px 20px; border-radius: 999px;
  background: var(--overlay-bg-strong);
  border: 1px solid var(--panel-border);
  color: var(--ink-2);
  font-size: 14px; font-weight: 700;
  box-shadow: var(--card-shadow);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden; text-overflow: ellipsis;
}
#toast.in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  #toast { transform: translate(-50%, 0); transition: opacity 0.2s ease; }
}

/* panneau « Ce qui se dit » — sous la carte de score dans la colonne de droite
   sur PC, après elle sur mobile : je trace → je vois le graphe → j'apprends où
   je me situe → j'écoute ce qui se dit. Mettre les remarques avant, c'est faire
   commenter un résultat que le joueur n'a pas encore lu. */
.remark {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.remarks-list .remark:last-child { border-bottom: none; }
.remark-pseudo { font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; }
.remark.mine .remark-pseudo { color: var(--link-ink); }
.remark-votes {
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.remark-text {
  grid-column: 1 / -1;
  font-size: 14px; color: var(--ink-2); line-height: 1.45;
  overflow-wrap: anywhere;
}
.remarks-more { max-height: 240px; overflow-y: auto; }
.remarks-toggle { display: block; padding: 8px 0 2px; font-size: 13px; }
.remark-cta { margin-top: 14px; }
.remark-cta .btn { width: 100%; }
.remark-cta .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.remark-hint { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.remark-feedback { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.remark-composer { margin-top: 14px; }
.remark-composer textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--inset-bg);
  border: 1px solid var(--inset-border);
  color: var(--ink);
  font: inherit; font-size: 14px; line-height: 1.45;
}
.remark-composer textarea:focus-visible { outline: 2px solid var(--link-ink); outline-offset: 1px; }
#remarksMore:focus-visible { outline: 2px solid var(--link-ink); outline-offset: 1px; }
.composer-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 6px;
  font-size: 12px; color: var(--ink-3);
}
.composer-count { font-variant-numeric: tabular-nums; font-weight: 700; }
.composer-actions { display: flex; gap: 10px; margin-top: 10px; }
.remarks-note { margin-top: 14px; font-size: 12px; color: var(--ink-3); }

/* « Chez toi » */
.den-balance {
  margin: 6px 0 20px;
  padding: 16px 18px;
  background: var(--inset-bg);
  border: 1px solid var(--inset-border);
  border-radius: 15px;
}
.den-bones { font-family: var(--font-display); font-weight: 800; font-size: 34px; }
.den-rule { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.den-earn { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.den-h {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 18px 0 2px;
}
.den-sub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px; }
.den-skins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.den-skin {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 10px;
  background: var(--inset-bg);
  border: 1px solid var(--inset-border);
  border-radius: 15px;
}
.den-skin canvas { width: 100%; max-width: 132px; height: auto; }
.den-skin-name { font-size: 13px; font-weight: 700; }
.den-skin .btn { width: 100%; }
.den-skin .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.den-skin .btn.equipped { opacity: 1; color: var(--ink); cursor: default; }
.den-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.den-badge {
  padding: 12px;
  background: var(--inset-bg);
  border: 1px solid var(--inset-border);
  border-radius: 15px;
  text-align: center;
}
.den-badge.locked { opacity: 0.55; }
.den-badge.locked .den-badge-emoji { filter: grayscale(1); }
.den-badge-emoji { font-size: 26px; }
.den-badge-name { font-size: 13px; font-weight: 700; margin-top: 5px; }
.den-badge-cond { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.den-foot { margin-top: 18px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* Réglages : leur propre modale, ouverte par ⚙️ dans le header. Le <details>
   qui les repliait dans « Chez toi » a été retiré — replier des réglages déjà
   cachés derrière une modale, c'est les cacher deux fois. */
.reglage-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  font-size: 13.5px; color: var(--ink-2);
  border-top: 1px solid var(--divider);
}
.reglage-row small { color: var(--ink-3); }
.reglage-btn { width: 100%; margin-top: 12px; font-size: 13px; }
/* les pastilles de DA sont le seul chemin vers les thèmes : elles doivent être
   visibles au clavier et assez grandes pour un doigt */
.theme-picker button { min-width: 30px; min-height: 30px; }
.theme-picker button:focus-visible { outline: 2px solid var(--link-ink); outline-offset: 2px; }

/* ---------- paliers ---------- */
/* Entre 880 et 1200, deux colonnes en 16/9 rendraient le graphe trop plat pour
   la place restante : on passe en 3/2, jamais en dessous de 1,4. */
@media (min-width: 880px) and (max-width: 1199px) {
  .canvas-wrap { aspect-ratio: 3 / 2; }
}
/* La rupture est à 880 et pas à 1000 : une fenêtre calée sur la moitié d'un
   écran 1920 fait 960 px CSS — un cas de PC parfaitement ordinaire, où les
   remarques repassaient SOUS le graphe alors que Thomas les veut à droite.
   À 880, la colonne de droite tient son plancher de 272 px et le graphe garde
   560 px de large en 3/2. En une colonne, max-height: 46vh aplatit le graphe et
   remonte la carte de score d'environ 90 px : sans ça elle repasserait sous le
   pli des deux côtés du palier. */
@media (max-width: 879px) {
  .stage { grid-template-columns: 1fr; }
  .canvas-wrap { max-height: 46vh; }
  /* en une colonne il n'y a pas de colonne à remplir, et un cadenas juste
     au-dessus du bouton Verrouiller serait du bruit */
  .remarks-ph { display: none; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .canvas-wrap { aspect-ratio: 4 / 3; max-height: none; }
  .den-skins { grid-template-columns: repeat(2, 1fr); }
  .den-badges { grid-template-columns: repeat(2, 1fr); }
  #toast { bottom: 18px; font-size: 13px; }
}
/* ==================== THÈMES ALTERNATIFS ==================== */

/* ---- PAPIER : éditorial clair, serif, encre & framboise (palette validée light) ---- */
[data-theme="papier"] {
  --bg: #f2ecdf;
  --surface: #faf6ee;
  --panel: #ffffff;
  --panel-border: rgba(26, 23, 18, 0.14);
  --ink: #1d1913;
  --ink-2: rgba(29, 25, 19, 0.78);
  --ink-3: rgba(29, 25, 19, 0.66); /* 0.56 échouait AA sur crème/blanc */
  --u1: #c2185b;
  --u2: #e65100;
  --crowd: #2563eb;
  --camp2: #0d9488;
  --font-display: 'Instrument Serif', Georgia, serif;
  --modal-bg: #fffdf8;
  --modal-back: rgba(60, 50, 30, 0.4);
  --overlay-bg: rgba(255, 253, 248, 0.92);
  --overlay-bg-strong: rgba(255, 253, 248, 0.97);
  --inset-bg: rgba(29, 25, 19, 0.04);
  --inset-border: rgba(29, 25, 19, 0.12);
  --card-shadow: 0 10px 40px rgba(80, 65, 40, 0.14);
  --wrap-tint: rgba(37, 99, 235, 0.03);
  --title-grad-a: #1d1913;
  --title-grad-b: #52493a;
  --noise-op: 0.04;
  --btn-ink: #ffffff;
  --btn-grad-b: #b84000; /* l'orange u2 passait sous AA avec un label blanc */
  --streak-ink: #92600a;
  --track-bg: rgba(29, 25, 19, 0.12);
  --hover-bg: rgba(29, 25, 19, 0.06);
  --divider: rgba(29, 25, 19, 0.08);
  --modal-shadow: 0 20px 60px rgba(80, 65, 40, 0.25);
  --link-ink: #a11450;
  --glow-a: rgba(80, 65, 40, 0.22);
  --glow-b: rgba(194, 24, 91, 0.3);
  --pop-glow: rgba(230, 81, 0, 0.55);
  --banner-bg: rgba(194, 24, 91, 0.07);
  --banner-border: rgba(194, 24, 91, 0.3);
  --badge-bg: rgba(37, 99, 235, 0.08);
  --badge-border: rgba(37, 99, 235, 0.35);
  --badge-ink: #2563eb;
  --tip-u: #c2185b;
  --tip-a: #2563eb;
  --tip-b: #0d9488;
  --band-swatch: rgba(37, 99, 235, 0.22);
  --c-grid: rgba(29, 25, 19, 0.07);
  --c-grid-mid: rgba(29, 25, 19, 0.13);
  --c-user-glow: rgba(0, 0, 0, 0);
  --c-user-area: rgba(194, 24, 91, 0.07);
  --c-crowd-glow: rgba(0, 0, 0, 0);
  --c-camp2-glow: rgba(0, 0, 0, 0);
  --c-ghost: rgba(29, 25, 19, 0.09);
  --c-ghost-a: rgba(37, 99, 235, 0.12);
  --c-ghost-b: rgba(13, 148, 136, 0.12);
  --c-band: rgba(37, 99, 235, 0.07);
  --c-diverge: rgba(194, 24, 91, 0.06);
  --c-demo: rgba(29, 25, 19, 0.2);
  --c-demo-dot: rgba(29, 25, 19, 0.45);
  --c-pen-core: rgba(29, 25, 19, 0.9);
  --c-pen-halo: rgba(230, 81, 0, 0.5);
  --c-inspect: rgba(29, 25, 19, 0.3);
  --c-dot-ring: rgba(255, 253, 248, 0.95);
  --c-jalon: rgba(29, 25, 19, 0.1);
}
[data-theme="papier"] .blob,
[data-theme="papier"] .noise { display: none; } /* le grain ne dither rien sur crème */
[data-theme="papier"] .board-card,
[data-theme="papier"] .card,
[data-theme="papier"] .chip,
[data-theme="papier"] .icon-btn { backdrop-filter: none; } /* panneaux opaques : coût GPU pour rien */
[data-theme="papier"] .bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(194, 24, 91, 0.05), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(37, 99, 235, 0.05), transparent 70%);
}
[data-theme="papier"] { color-scheme: light; }
[data-theme="papier"] .topic-title { font-weight: 400; letter-spacing: 0; }
[data-theme="papier"] .score-phrase, [data-theme="papier"] .statline i { font-weight: 400; }

/* ---- BRUT : néo-brutalisme, bordures noires, ombres dures, flat (palette validée light) ---- */
[data-theme="brut"] {
  --bg: #efeee8;
  --surface: #f7f6f1;
  --panel: #ffffff;
  --panel-border: #141414;
  --ink: #141414;
  --ink-2: rgba(20, 20, 20, 0.8);
  --ink-3: rgba(20, 20, 20, 0.62); /* 0.58 échouait AA sur le fond */
  --u1: #dc2626;
  --u2: #dc2626; /* courbe joueur UNIE — brutal assume le flat */
  --crowd: #2563eb;
  --camp2: #059669;
  --radius: 10px;
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --modal-bg: #ffffff;
  --modal-back: rgba(20, 20, 20, 0.5);
  --overlay-bg: #ffffff;
  --overlay-bg-strong: #ffffff;
  --inset-bg: #f7f6f1;
  --inset-border: #141414;
  --card-shadow: 6px 6px 0 #141414;
  --wrap-tint: transparent;
  --title-grad-a: #141414;
  --title-grad-b: #141414;
  --noise-op: 0;
  --btn-ink: #141414;
  --streak-ink: #92600a;
  --track-bg: rgba(20, 20, 20, 0.14);
  --hover-bg: rgba(20, 20, 20, 0.08);
  --divider: rgba(20, 20, 20, 0.1);
  --modal-shadow: 8px 8px 0 #141414;
  --link-ink: #b91c1c;
  --glow-a: rgba(0, 0, 0, 0);
  --glow-b: rgba(0, 0, 0, 0);
  --pop-glow: rgba(220, 38, 38, 0.55);
  --banner-bg: #fff3bf;
  --banner-border: #141414;
  --badge-bg: #ffd60a;
  --badge-border: #141414;
  --badge-ink: #141414;
  --tip-u: #dc2626;
  --tip-a: #2563eb;
  --tip-b: #059669;
  --band-swatch: rgba(37, 99, 235, 0.25);
  --c-grid: rgba(20, 20, 20, 0.1);
  --c-grid-mid: rgba(20, 20, 20, 0.18);
  --c-user-glow: rgba(0, 0, 0, 0);
  --c-user-area: rgba(220, 38, 38, 0.07);
  --c-crowd-glow: rgba(0, 0, 0, 0);
  --c-camp2-glow: rgba(0, 0, 0, 0);
  --c-ghost: rgba(20, 20, 20, 0.1);
  --c-ghost-a: rgba(37, 99, 235, 0.14);
  --c-ghost-b: rgba(5, 150, 105, 0.14);
  --c-band: rgba(37, 99, 235, 0.08);
  --c-diverge: rgba(220, 38, 38, 0.07);
  --c-demo: rgba(20, 20, 20, 0.22);
  --c-demo-dot: rgba(20, 20, 20, 0.5);
  --c-pen-core: #141414;
  --c-pen-halo: rgba(220, 38, 38, 0.45);
  --c-inspect: rgba(20, 20, 20, 0.35);
  --c-dot-ring: #f7f6f1;
  --c-jalon: rgba(20, 20, 20, 0.12);
}
[data-theme="brut"] { color-scheme: light; }
[data-theme="brut"] .blob, [data-theme="brut"] .noise { display: none; }
[data-theme="brut"] .card,
[data-theme="brut"] .board-card,
[data-theme="brut"] .modal-card,
[data-theme="brut"] .chip,
[data-theme="brut"] .icon-btn,
[data-theme="brutnoir"] .card,
[data-theme="brutnoir"] .board-card,
[data-theme="brutnoir"] .modal-card,
[data-theme="brutnoir"] .chip,
[data-theme="brutnoir"] .icon-btn { border-width: 2px; backdrop-filter: none; }
[data-theme="brut"] .btn.primary,
[data-theme="brutnoir"] .btn.primary {
  background: #ffd60a;
  border: 2px solid #141414;
  box-shadow: 4px 4px 0 var(--brut-shadow, #141414);
}
[data-theme="brutnoir"] { --brut-shadow: #000000; }
[data-theme="brut"] .btn.primary:hover:not(:disabled),
[data-theme="brutnoir"] .btn.primary:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--brut-shadow, #141414);
}
[data-theme="brut"] .btn.ghost,
[data-theme="brutnoir"] .btn.ghost { border-width: 2px; }
/* Brut : pas de dégradé de texte — même parti pris que la courbe joueur, unie
   sur brut/brutnoir. La 2e ligne de la phrase reste la ligne « du joueur ». */
[data-theme="brut"] .score-phrase span + span,
[data-theme="brut"] .logo em,
[data-theme="brutnoir"] .score-phrase span + span,
[data-theme="brutnoir"] .logo em {
  background: none;
  -webkit-text-fill-color: var(--u1);
  color: var(--u1);
}
/* thèmes clairs : le fondu d'opacité du bouton désactivé (recette fond sombre)
   rendait le CTA principal illisible — état désactivé plein et mat à la place */
[data-theme="papier"] .btn.primary:disabled,
[data-theme="brut"] .btn.primary:disabled {
  opacity: 1;
  filter: none;
  background: var(--inset-bg);
  color: var(--ink-3);
  box-shadow: none;
}

/* ---- BRUT NOIR : néo-brutalisme nocturne — LE DÉFAUT (palette validée dark) ---- */
[data-theme="brutnoir"] {
  --bg: #0d0d0c;
  --surface: #131312;
  --panel: #191917;
  --panel-border: #ebe8df;
  --ink: #f2f0e8;
  --ink-2: rgba(242, 240, 232, 0.78);
  --ink-3: rgba(242, 240, 232, 0.58);
  --u1: #e5484d;
  --u2: #e5484d; /* courbe joueur UNIE, comme Brut clair */
  --crowd: #3e8bff;
  --camp2: #27a33b;
  --radius: 10px;
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --modal-bg: #191917;
  --modal-back: rgba(0, 0, 0, 0.7);
  --overlay-bg: rgba(13, 13, 12, 0.92);
  --overlay-bg-strong: rgba(13, 13, 12, 0.97);
  --inset-bg: rgba(242, 240, 232, 0.06);
  --inset-border: rgba(242, 240, 232, 0.3);
  --card-shadow: 6px 6px 0 #000000;
  --wrap-tint: transparent;
  --title-grad-a: #f2f0e8;
  --title-grad-b: #f2f0e8;
  --noise-op: 0.04;
  --btn-ink: #141414;
  --streak-ink: #ffd60a;
  --track-bg: rgba(242, 240, 232, 0.12);
  --hover-bg: rgba(242, 240, 232, 0.09);
  --divider: rgba(242, 240, 232, 0.09);
  --modal-shadow: 8px 8px 0 #000000;
  --link-ink: #ffd60a;
  --glow-a: rgba(0, 0, 0, 0);
  --glow-b: rgba(0, 0, 0, 0);
  --pop-glow: rgba(255, 214, 10, 0.55);
  --banner-bg: rgba(255, 214, 10, 0.1);
  --banner-border: rgba(255, 214, 10, 0.5);
  --badge-bg: #ffd60a;
  --badge-border: #000000;
  --badge-ink: #141414;
  --tip-u: #ff7b7f;
  --tip-a: #7cb1ff;
  --tip-b: #5ad973;
  --band-swatch: rgba(62, 139, 255, 0.28);
  --c-grid: rgba(242, 240, 232, 0.07);
  --c-grid-mid: rgba(242, 240, 232, 0.13);
  --c-user-glow: rgba(0, 0, 0, 0);
  --c-user-area: rgba(229, 72, 77, 0.09);
  --c-crowd-glow: rgba(0, 0, 0, 0);
  --c-camp2-glow: rgba(0, 0, 0, 0);
  --c-ghost: rgba(242, 240, 232, 0.09);
  --c-ghost-a: rgba(62, 139, 255, 0.13);
  --c-ghost-b: rgba(39, 163, 59, 0.13);
  --c-band: rgba(62, 139, 255, 0.08);
  --c-diverge: rgba(229, 72, 77, 0.07);
  --c-demo: rgba(242, 240, 232, 0.16);
  --c-demo-dot: rgba(242, 240, 232, 0.45);
  --c-pen-core: #f2f0e8;
  --c-pen-halo: rgba(229, 72, 77, 0.5);
  --c-inspect: rgba(242, 240, 232, 0.3);
  --c-dot-ring: #0d0d0c;
  --c-jalon: rgba(242, 240, 232, 0.1);
}
[data-theme="brutnoir"] .blob, [data-theme="brutnoir"] .noise { display: none; }

/* ===========================================================================
   ENCRE — noir et blanc, épuré. Aucune couleur nulle part.
   La hiérarchie se paie en densité de matière, jamais en teinte : ta courbe
   est le seul trait plein et continu, les autres n'existent que par leur
   accumulation. Conséquence utile : une échelle de luminance reste lisible
   pour toutes les formes de daltonisme, sans avoir à valider quoi que ce soit.
   =========================================================================== */
[data-theme="encre"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --panel: #ffffff;
  --panel-border: #111111;
  --ink: #111111;
  --ink-2: rgba(17, 17, 17, 0.72);
  --ink-3: rgba(17, 17, 17, 0.52);
  --u1: #111111;
  --u2: #111111;                    /* courbe joueur UNIE */
  --crowd: rgba(17, 17, 17, 0.55);
  --camp2: rgba(17, 17, 17, 0.32);
  --ghost-mode: uni;                /* les 56 : une seule encre, cf. theme.js */
  --radius: 0px;
  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-body: 'Archivo', 'Segoe UI', sans-serif;
  --modal-bg: #ffffff;
  --modal-back: rgba(255, 255, 255, 0.86);
  --overlay-bg: rgba(255, 255, 255, 0.94);
  --overlay-bg-strong: rgba(255, 255, 255, 0.98);
  --inset-bg: rgba(17, 17, 17, 0.04);
  --inset-border: rgba(17, 17, 17, 0.22);
  --card-shadow: none;
  --modal-shadow: none;
  --wrap-tint: transparent;
  --title-grad-a: #111111;
  --title-grad-b: #111111;
  --noise-op: 0;
  --btn-ink: #ffffff;
  --btn-grad-a: #111111;
  --btn-grad-b: #111111;
  --streak-ink: #111111;
  --track-bg: rgba(17, 17, 17, 0.10);
  --hover-bg: rgba(17, 17, 17, 0.06);
  --divider: rgba(17, 17, 17, 0.12);
  --link-ink: #111111;
  --glow-a: transparent;
  --glow-b: transparent;
  --pop-glow: rgba(17, 17, 17, 0.35);
  --banner-bg: rgba(17, 17, 17, 0.05);
  --banner-border: rgba(17, 17, 17, 0.30);
  --badge-bg: #111111;
  --badge-border: #111111;
  --badge-ink: #ffffff;
  --tip-u: #111111;
  --tip-a: rgba(17, 17, 17, 0.55);
  --tip-b: rgba(17, 17, 17, 0.32);
  --band-swatch: rgba(17, 17, 17, 0.14);
  --c-grid: rgba(17, 17, 17, 0.07);
  --c-grid-mid: rgba(17, 17, 17, 0.13);
  --c-user-glow: transparent;        /* aucun halo : le trait suffit */
  --c-user-area: transparent;        /* aucun aplat sous la courbe */
  --c-crowd-glow: transparent;
  --c-camp2-glow: transparent;
  --c-ghost: rgba(17, 17, 17, 0.085);
  --c-ghost-a: rgba(17, 17, 17, 0.085);
  --c-ghost-b: rgba(17, 17, 17, 0.055);
  --c-band: rgba(17, 17, 17, 0.05);
  --c-diverge: rgba(17, 17, 17, 0.045);
  --c-demo: rgba(17, 17, 17, 0.18);
  --c-demo-dot: rgba(17, 17, 17, 0.45);
  --c-pen-core: #111111;
  --c-pen-halo: rgba(17, 17, 17, 0.25);
  --c-inspect: rgba(17, 17, 17, 0.30);
  --c-dot-ring: #ffffff;
  --c-jalon: rgba(17, 17, 17, 0.14);
}

/* ---- ENCRE NUIT : la même logique inversée. L'accumulation éclaircit. ---- */
[data-theme="encrenuit"] {
  --bg: #0c0c0d;
  --surface: #0c0c0d;
  --panel: #0c0c0d;
  --panel-border: #f2f0ec;
  --ink: #f2f0ec;
  --ink-2: rgba(242, 240, 236, 0.74);
  --ink-3: rgba(242, 240, 236, 0.54);
  --u1: #ffffff;
  --u2: #ffffff;
  --crowd: rgba(242, 240, 236, 0.55);
  --camp2: rgba(242, 240, 236, 0.32);
  --ghost-mode: uni;
  --radius: 0px;
  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-body: 'Archivo', 'Segoe UI', sans-serif;
  --modal-bg: #131315;
  --modal-back: rgba(0, 0, 0, 0.82);
  --overlay-bg: rgba(12, 12, 13, 0.94);
  --overlay-bg-strong: rgba(12, 12, 13, 0.98);
  --inset-bg: rgba(242, 240, 236, 0.05);
  --inset-border: rgba(242, 240, 236, 0.22);
  --card-shadow: none;
  --modal-shadow: none;
  --wrap-tint: transparent;
  --title-grad-a: #f2f0ec;
  --title-grad-b: #f2f0ec;
  --noise-op: 0;
  --btn-ink: #0c0c0d;
  --btn-grad-a: #f2f0ec;
  --btn-grad-b: #f2f0ec;
  --streak-ink: #f2f0ec;
  --track-bg: rgba(242, 240, 236, 0.12);
  --hover-bg: rgba(242, 240, 236, 0.08);
  --divider: rgba(242, 240, 236, 0.12);
  --link-ink: #f2f0ec;
  --glow-a: transparent;
  --glow-b: transparent;
  --pop-glow: rgba(242, 240, 236, 0.35);
  --banner-bg: rgba(242, 240, 236, 0.06);
  --banner-border: rgba(242, 240, 236, 0.30);
  --badge-bg: #f2f0ec;
  --badge-border: #f2f0ec;
  --badge-ink: #0c0c0d;
  --tip-u: #ffffff;
  --tip-a: rgba(242, 240, 236, 0.55);
  --tip-b: rgba(242, 240, 236, 0.32);
  --band-swatch: rgba(242, 240, 236, 0.14);
  --c-grid: rgba(242, 240, 236, 0.06);
  --c-grid-mid: rgba(242, 240, 236, 0.12);
  --c-user-glow: transparent;
  --c-user-area: transparent;
  --c-crowd-glow: transparent;
  --c-camp2-glow: transparent;
  --c-ghost: rgba(242, 240, 236, 0.075);
  --c-ghost-a: rgba(242, 240, 236, 0.075);
  --c-ghost-b: rgba(242, 240, 236, 0.05);
  --c-band: rgba(242, 240, 236, 0.05);
  --c-diverge: rgba(242, 240, 236, 0.04);
  --c-demo: rgba(242, 240, 236, 0.18);
  --c-demo-dot: rgba(242, 240, 236, 0.45);
  --c-pen-core: #ffffff;
  --c-pen-halo: rgba(242, 240, 236, 0.25);
  --c-inspect: rgba(242, 240, 236, 0.30);
  --c-dot-ring: #0c0c0d;
  --c-jalon: rgba(242, 240, 236, 0.14);
}

/* ===========================================================================
   1-BIT — deux couleurs dans toute l'image, aucun gris.
   `--px` déclenche le chemin de rendu dédié d'engine.js : les 56 courbes sont
   COMPTÉES dans une grille de densité, puis cette densité est rendue au
   tramage de Bayer. Ce n'est pas un filtre posé sur une image finie — c'est ce
   qui distingue ce mode des deux tentatives précédentes, qui produisaient des
   aplats parce qu'elles réduisaient un rendu déjà antialiasé.
   Corollaire : ni bande interquartile ni rectangle de désaccord. La densité
   les dit déjà, et un objet graphique posé par-dessus les données en serait un
   résumé de plus.
   =========================================================================== */
[data-theme="bit"] {
  --px: 3;
  --ghost-mode: uni;
  --bg: #ffffff;
  --surface: #ffffff;
  --panel: #ffffff;
  --panel-border: #000000;
  --ink: #000000;
  --ink-2: #000000;
  --ink-3: #000000;
  --u1: #000000;
  --u2: #000000;
  --crowd: #000000;
  --camp2: #000000;
  --radius: 0px;
  --font-display: 'Silkscreen', 'Courier New', monospace;
  --font-body: 'Archivo', 'Segoe UI', sans-serif;
  --modal-bg: #ffffff;
  --modal-back: rgba(255, 255, 255, 0.9);
  --overlay-bg: rgba(255, 255, 255, 0.96);
  --overlay-bg-strong: #ffffff;
  --inset-bg: #ffffff;
  --inset-border: #000000;
  --card-shadow: 3px 3px 0 #000000;
  --modal-shadow: 3px 3px 0 #000000;
  --wrap-tint: transparent;
  --title-grad-a: #000000;
  --title-grad-b: #000000;
  --noise-op: 0;
  --btn-ink: #ffffff;
  --btn-grad-a: #000000;
  --btn-grad-b: #000000;
  --streak-ink: #000000;
  --track-bg: rgba(0, 0, 0, 0.12);
  --hover-bg: rgba(0, 0, 0, 0.07);
  --divider: #000000;
  --link-ink: #000000;
  --glow-a: transparent;
  --glow-b: transparent;
  --pop-glow: transparent;
  --banner-bg: #ffffff;
  --banner-border: #000000;
  --badge-bg: #000000;
  --badge-border: #000000;
  --badge-ink: #ffffff;
  --tip-u: #000000;
  --tip-a: #000000;
  --tip-b: #000000;
  --band-swatch: #000000;
  --c-grid: #000000;
  --c-grid-mid: rgba(0, 0, 0, 0.55);
  --c-user-glow: #ffffff;        /* en 1-bit ce n'est pas un halo : c'est le
                                    liseré blanc creusé sous la courbe joueur */
  --c-user-area: transparent;
  --c-crowd-glow: transparent;
  --c-camp2-glow: transparent;
  --c-ghost: #000000;
  --c-ghost-a: #000000;
  --c-ghost-b: #000000;
  --c-band: transparent;
  --c-diverge: transparent;
  --c-demo: rgba(0, 0, 0, 0.35);
  --c-demo-dot: #000000;
  --c-pen-core: #000000;
  --c-pen-halo: transparent;
  --c-inspect: rgba(0, 0, 0, 0.45);
  --c-dot-ring: #ffffff;
  --c-jalon: rgba(0, 0, 0, 0.25);
}
/* le décor : aucun flou, aucune texture. Les cadres sont des filets nets. */
[data-theme="encre"] .blob, [data-theme="encre"] .noise,
[data-theme="encrenuit"] .blob, [data-theme="encrenuit"] .noise,
[data-theme="bit"] .blob, [data-theme="bit"] .noise { display: none; }

[data-theme="encre"] .card, [data-theme="encre"] .board-card,
[data-theme="encre"] .modal-card, [data-theme="encre"] .chip,
[data-theme="encre"] .icon-btn,
[data-theme="encrenuit"] .card, [data-theme="encrenuit"] .board-card,
[data-theme="encrenuit"] .modal-card, [data-theme="encrenuit"] .chip,
[data-theme="encrenuit"] .icon-btn { border-width: 1px; backdrop-filter: none; }

[data-theme="bit"] .card, [data-theme="bit"] .board-card,
[data-theme="bit"] .modal-card, [data-theme="bit"] .chip,
[data-theme="bit"] .icon-btn { border-width: 3px; backdrop-filter: none; }
/* biseau pixel : arête claire en haut-gauche, sombre en bas-droite, zéro arrondi */
[data-theme="bit"] .btn,
[data-theme="bit"] .card,
[data-theme="bit"] .board-card { box-shadow: inset 3px 3px 0 rgba(255,255,255,.9), inset -3px -3px 0 rgba(0,0,0,.28); }
[data-theme="bit"] .btn.primary { box-shadow: inset 3px 3px 0 rgba(255,255,255,.32), inset -3px -3px 0 rgba(0,0,0,.5); }
[data-theme="bit"] .btn:active { box-shadow: inset -3px -3px 0 rgba(255,255,255,.55), inset 3px 3px 0 rgba(0,0,0,.35); }
[data-theme="bit"] .logo { letter-spacing: 0; }

/* --- Silkscreen : où elle a le droit d'aller, et où non ---------------------
   C'est une VRAIE police bitmap. Deux conséquences dures, vérifiées sur les
   fichiers de la fonte : (1) elle n'a PAS de minuscules — les 26 minuscules ont
   le contour de leur capitale, donc « Les gens se sont coupés en deux. » sort
   tout en capitales ; (2) elle n'est nette qu'à des tailles multiples de 8 px,
   or le site utilise des tailles fluides en vw qui n'y tombent presque jamais.
   Elle reste donc sur les libellés COURTS et déjà en capitales, et le texte de
   phrase repasse en Archivo. C'est la règle du cadrage technique : police
   bitmap en display seulement. */
[data-theme="bit"] .score-phrase,
[data-theme="bit"] .topic-title,
[data-theme="bit"] h1, [data-theme="bit"] h2, [data-theme="bit"] h3 {
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}
/* les libellés qui restent en bitmap sont calés sur la grille de 8 px */
[data-theme="bit"] .statline,
[data-theme="bit"] .xlabs,
[data-theme="bit"] .lg { font-family: var(--font-display); font-size: 16px; letter-spacing: 0; }

/* --- La légende sans couleur ------------------------------------------------
   Sous `bit` tout est noir : trois pastilles de couleur deviennent trois barres
   identiques. La distinction repasse donc sur la FORME, exactement comme le
   canvas la porte — plein, tirets, creux. */
[data-theme="bit"] .sw { border-radius: 0; height: 6px; }
[data-theme="bit"] .sw-you { background: var(--ink); }
[data-theme="bit"] .sw-crowd,
[data-theme="bit"] .sw-camp2 {
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px);
}
[data-theme="bit"] .sw-camp2 { height: 3px; }
[data-theme="bit"] .sw-dash {
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px);
}
[data-theme="bit"] .sw-band { background: none; box-shadow: inset 0 0 0 2px var(--ink); height: 10px; }

/* --- L'état désactivé du bouton principal -----------------------------------
   `opacity: .35 + saturate(.4)` est la recette « fond sombre » : elle est déjà
   neutralisée pour papier et brut parce qu'elle rendait le bouton illisible.
   Les trois thèmes ajoutés tombaient dans le même trou — « Verrouiller ma
   courbe » est le premier objet de la partie, et il sortait à 2,3:1. */
[data-theme="encre"] .btn.primary:disabled,
[data-theme="encrenuit"] .btn.primary:disabled {
  opacity: 1;
  filter: none;
  background: var(--inset-bg);
  color: var(--ink-3);
  box-shadow: none;
}
/* bit n'a pas de gris : l'état inactif s'écrit en inversant la face. */
[data-theme="bit"] .btn.primary:disabled {
  opacity: 1;
  filter: none;
  background: var(--bg);
  color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--ink);
}

/* ---- ARCADE : CRT nocturne, néons verts/cyan, scanlines (palette validée dark) ---- */
[data-theme="arcade"] {
  --bg: #04060d;
  --surface: #070b16;
  --panel: rgba(122, 220, 255, 0.045);
  --panel-border: rgba(122, 220, 255, 0.17);
  --ink: #e8f6ff;
  --ink-2: rgba(232, 246, 255, 0.72);
  --ink-3: rgba(232, 246, 255, 0.55);
  --u1: #14a76c;
  --u2: #1a9cd8;
  --crowd: #e0552e;
  --camp2: #b93dc9;
  --modal-bg: #0a1020;
  --modal-back: rgba(2, 4, 10, 0.8);
  --overlay-bg: rgba(7, 11, 22, 0.88);
  --overlay-bg-strong: rgba(7, 11, 22, 0.95);
  --inset-bg: rgba(122, 220, 255, 0.05);
  --inset-border: rgba(122, 220, 255, 0.13);
  --card-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  --wrap-tint: rgba(20, 167, 108, 0.05);
  --title-grad-a: #e8f6ff;
  --title-grad-b: #9fd8c9;
  --noise-op: 0.05;
  --btn-ink: #ffffff;
  --glow-a: rgba(20, 167, 108, 0.35);
  --glow-b: rgba(26, 156, 216, 0.4);
  --pop-glow: rgba(26, 156, 216, 0.8);
  --banner-bg: rgba(20, 167, 108, 0.1);
  --banner-border: rgba(20, 167, 108, 0.35);
  --badge-bg: rgba(26, 156, 216, 0.15);
  --badge-border: rgba(26, 156, 216, 0.4);
  --badge-ink: #7fd4ff;
  --tip-u: #4ade9d;
  --tip-a: #ff8a5e;
  --tip-b: #dd7bf0;
  --band-swatch: rgba(224, 85, 46, 0.28);
  --c-grid: rgba(122, 220, 255, 0.06);
  --c-grid-mid: rgba(122, 220, 255, 0.11);
  --c-user-glow: rgba(26, 156, 216, 0.45);
  --c-user-area: rgba(20, 167, 108, 0.14);
  --c-crowd-glow: rgba(224, 85, 46, 0.4);
  --c-camp2-glow: rgba(185, 61, 201, 0.4);
  --c-ghost: rgba(232, 246, 255, 0.07);
  --c-ghost-a: rgba(224, 85, 46, 0.11);
  --c-ghost-b: rgba(185, 61, 201, 0.11);
  --c-band: rgba(224, 85, 46, 0.08);
  --c-diverge: rgba(26, 156, 216, 0.06);
  --c-demo: rgba(232, 246, 255, 0.13);
  --c-demo-dot: rgba(232, 246, 255, 0.4);
  --c-pen-core: rgba(255, 255, 255, 0.95);
  --c-pen-halo: rgba(26, 156, 216, 0.6);
  --c-inspect: rgba(232, 246, 255, 0.28);
  --c-dot-ring: rgba(4, 6, 13, 0.85);
  --c-jalon: rgba(232, 246, 255, 0.09);
}
[data-theme="arcade"] .bg::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(200, 240, 255, 0.02) 0px, rgba(200, 240, 255, 0.02) 1px,
    transparent 1px, transparent 3px);
  pointer-events: none;
}
[data-theme="arcade"] .b1 {
  background: radial-gradient(circle,
    rgba(20, 167, 108, 0.09) 0%, rgba(20, 167, 108, 0.05) 30%,
    rgba(20, 167, 108, 0.02) 55%, transparent 72%);
}
[data-theme="arcade"] .b2 {
  background: radial-gradient(circle,
    rgba(26, 156, 216, 0.07) 0%, rgba(26, 156, 216, 0.04) 30%,
    rgba(26, 156, 216, 0.015) 55%, transparent 72%);
}
[data-theme="arcade"] .b3 { display: none; }
[data-theme="arcade"] .topic-title { text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- TERMINAL : hacker/phosphore, noir profond, vert CRT + ambre (palette validée dark) ---- */
[data-theme="terminal"] {
  --bg: #020806;
  --surface: #051009;
  --panel: rgba(61, 255, 141, 0.035);
  --panel-border: rgba(61, 255, 141, 0.2);
  --ink: #d8ffe9;
  --ink-2: rgba(216, 255, 233, 0.75);
  --ink-3: rgba(216, 255, 233, 0.58); /* 6.4:1 sur --bg et --panel (AA petit texte) */
  --u1: #0daa76;
  --u2: #0daa76; /* trace phosphore UNIE — un oscillo ne fait pas de dégradé */
  --crowd: #c28028;
  --camp2: #1d9fc4;
  --radius: 10px;
  --font-display: 'IBM Plex Mono', 'Cascadia Mono', 'Consolas', monospace;
  --modal-bg: #04120b;
  --modal-back: rgba(0, 6, 3, 0.82);
  --overlay-bg: rgba(2, 10, 6, 0.88);
  --overlay-bg-strong: rgba(2, 10, 6, 0.96);
  --inset-bg: rgba(61, 255, 141, 0.045);
  --inset-border: rgba(61, 255, 141, 0.15);
  --card-shadow: 0 0 0 1px rgba(13, 170, 118, 0.05), 0 20px 70px rgba(0, 0, 0, 0.55);
  --wrap-tint: rgba(13, 170, 118, 0.05);
  --title-grad-a: #eafff3;
  --title-grad-b: #7de8b4;
  --noise-op: 0.05;
  --btn-ink: #01130a; /* label sombre sur bouton phosphore : 6.4:1 min sur le dégradé */
  --btn-grad-a: #10c184;
  --btn-grad-b: #0daa76;
  --streak-ink: #e8a83c;
  --track-bg: rgba(61, 255, 141, 0.1);
  --hover-bg: rgba(61, 255, 141, 0.07);
  --divider: rgba(61, 255, 141, 0.09);
  --modal-shadow: 0 0 0 1px rgba(13, 170, 118, 0.12), 0 40px 120px rgba(0, 0, 0, 0.7);
  --link-ink: #35d896;
  --glow-a: rgba(13, 170, 118, 0.3);
  --glow-b: rgba(16, 193, 132, 0.45);
  --pop-glow: rgba(53, 216, 150, 0.7);
  --banner-bg: rgba(13, 170, 118, 0.08);
  --banner-border: rgba(13, 170, 118, 0.35);
  --badge-bg: rgba(194, 128, 40, 0.12);
  --badge-border: rgba(194, 128, 40, 0.4);
  --badge-ink: #e5b264;
  --tip-u: #4fe0a5;
  --tip-a: #eab060;
  --tip-b: #5cc8e8;
  --band-swatch: rgba(194, 128, 40, 0.3);
  --c-grid: rgba(61, 255, 141, 0.05);
  --c-grid-mid: rgba(61, 255, 141, 0.1);
  --c-user-glow: rgba(13, 170, 118, 0.5);
  --c-user-area: rgba(13, 170, 118, 0.12);
  --c-crowd-glow: rgba(194, 128, 40, 0.35);
  --c-camp2-glow: rgba(29, 159, 196, 0.35);
  --c-ghost: rgba(216, 255, 233, 0.07);
  --c-ghost-a: rgba(194, 128, 40, 0.11);
  --c-ghost-b: rgba(29, 159, 196, 0.11);
  --c-band: rgba(194, 128, 40, 0.08);
  --c-diverge: rgba(13, 170, 118, 0.06);
  --c-demo: rgba(216, 255, 233, 0.13);
  --c-demo-dot: rgba(216, 255, 233, 0.4);
  --c-pen-core: rgba(234, 255, 243, 0.95);
  --c-pen-halo: rgba(53, 216, 150, 0.6);
  --c-inspect: rgba(216, 255, 233, 0.28);
  --c-dot-ring: rgba(2, 8, 6, 0.85);
  --c-jalon: rgba(216, 255, 233, 0.09);
}
/* pas de blur : un terminal ne floute rien (et ça libère le GPU) */
[data-theme="terminal"] .board-card,
[data-theme="terminal"] .card,
[data-theme="terminal"] .chip,
[data-theme="terminal"] .icon-btn { backdrop-filter: none; }
[data-theme="terminal"] .modal-back { backdrop-filter: none; }
/* blobs → halos phosphore quasi imperceptibles, ambre en coin bas */
[data-theme="terminal"] .b1 {
  background: radial-gradient(circle,
    rgba(13, 170, 118, 0.07) 0%, rgba(13, 170, 118, 0.04) 30%,
    rgba(13, 170, 118, 0.015) 55%, transparent 72%);
}
[data-theme="terminal"] .b2 {
  background: radial-gradient(circle,
    rgba(194, 128, 40, 0.04) 0%, rgba(194, 128, 40, 0.02) 35%,
    transparent 65%);
}
[data-theme="terminal"] .b3 { display: none; }
/* scanline discrète (pas 4px, plus légère que l'arcade) */
[data-theme="terminal"] .bg::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(160, 255, 200, 0.016) 0px, rgba(160, 255, 200, 0.016) 1px,
    transparent 1px, transparent 4px);
  pointer-events: none;
}
/* IBM Plex Mono s'arrête à 700 : on cape pour éviter le faux-gras synthétique */
[data-theme="terminal"] .logo,
[data-theme="terminal"] .modal-logo,
[data-theme="terminal"] .topic-title,
[data-theme="terminal"] .score-phrase,
[data-theme="terminal"] .statline i,
[data-theme="terminal"] .modal-card h2 { font-weight: 700; }
[data-theme="terminal"] .topic-title { letter-spacing: -0.02em; }
/* boîtes plus carrées (les pastilles 999px restent des pastilles) */
[data-theme="terminal"] .btn { border-radius: 7px; }
[data-theme="terminal"] .btn.small { border-radius: 6px; }
[data-theme="terminal"] .canvas-wrap { border-radius: 8px; }
[data-theme="terminal"] .modal-card { border-radius: 12px; }
/* curseur bloc qui clignote après le logo */
[data-theme="terminal"] .logo::after {
  content: '▮';
  color: var(--link-ink);
  font-size: 0.8em;
  margin-left: 5px;
  animation: ptTermBlink 1.2s steps(1) infinite;
}
@keyframes ptTermBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="terminal"] .logo::after { animation: none; }
}
[data-theme="terminal"] ::selection { background: rgba(13, 170, 118, 0.45); color: #eafff3; }
.theme-picker button[data-t="terminal"] { background: linear-gradient(135deg, #020806 50%, #0daa76 50%); }

/* ---- PASTEL : pop bulle claire, lavande/crème, accents bonbon (palette validée light) ---- */
[data-theme="pastel"] {
  --bg: #f3effa;
  --surface: #fbf9ff;
  --panel: #ffffff;
  --panel-border: rgba(96, 70, 178, 0.16);
  --ink: #2a2140;
  --ink-2: rgba(42, 33, 64, 0.78);
  --ink-3: rgba(42, 33, 64, 0.66); /* 4.73:1 sur --bg, 5.00:1 sur --panel (AA petit texte) */
  --u1: #c2255c;
  --u2: #e8590c;
  --crowd: #099268;
  --camp2: #7048e8;
  --radius: 28px;
  --font-display: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --modal-bg: #ffffff;
  --modal-back: rgba(90, 70, 140, 0.35);
  --overlay-bg: rgba(253, 252, 255, 0.92);
  --overlay-bg-strong: rgba(253, 252, 255, 0.97);
  --inset-bg: rgba(112, 72, 232, 0.05);
  --inset-border: rgba(96, 70, 178, 0.14);
  --card-shadow: 0 14px 44px rgba(158, 118, 220, 0.22), 0 3px 10px rgba(158, 118, 220, 0.10); /* ombre douce lavande */
  --wrap-tint: rgba(112, 72, 232, 0.04);
  --title-grad-a: #2a2140;
  --title-grad-b: #6b4bb8;
  --noise-op: 0;
  --btn-ink: #ffffff;
  --btn-grad-b: #bc4708; /* la pêche u2 passait sous AA avec un label blanc (3.58:1) */
  --streak-ink: #a3560c;
  --track-bg: rgba(42, 33, 64, 0.10);
  --hover-bg: rgba(112, 72, 232, 0.08);
  --divider: rgba(42, 33, 64, 0.08);
  --modal-shadow: 0 24px 70px rgba(120, 85, 190, 0.32);
  --link-ink: #a61e4d;
  --glow-a: rgba(194, 37, 92, 0.25);
  --glow-b: rgba(232, 89, 12, 0.30);
  --pop-glow: rgba(232, 89, 12, 0.5);
  --banner-bg: rgba(194, 37, 92, 0.07);
  --banner-border: rgba(194, 37, 92, 0.28);
  --badge-bg: rgba(112, 72, 232, 0.09);
  --badge-border: rgba(112, 72, 232, 0.32);
  --badge-ink: #5f3dc4;
  --tip-u: #c2255c;
  --tip-a: #087f5b;
  --tip-b: #6238d6;
  --band-swatch: rgba(9, 146, 104, 0.24);
  --c-grid: rgba(42, 33, 64, 0.06);
  --c-grid-mid: rgba(42, 33, 64, 0.12);
  --c-user-glow: rgba(194, 37, 92, 0.18); /* halo rose très doux, vibe bulle */
  --c-user-area: rgba(194, 37, 92, 0.07);
  --c-crowd-glow: rgba(0, 0, 0, 0);
  --c-camp2-glow: rgba(0, 0, 0, 0);
  --c-ghost: rgba(42, 33, 64, 0.09);
  --c-ghost-a: rgba(9, 146, 104, 0.13);
  --c-ghost-b: rgba(112, 72, 232, 0.13);
  --c-band: rgba(9, 146, 104, 0.08);
  --c-diverge: rgba(194, 37, 92, 0.06);
  --c-demo: rgba(42, 33, 64, 0.2);
  --c-demo-dot: rgba(42, 33, 64, 0.45);
  --c-pen-core: rgba(42, 33, 64, 0.9);
  --c-pen-halo: rgba(232, 89, 12, 0.45);
  --c-inspect: rgba(42, 33, 64, 0.3);
  --c-dot-ring: rgba(251, 249, 255, 0.95);
  --c-jalon: rgba(42, 33, 64, 0.1);
}
[data-theme="pastel"] { color-scheme: light; }
[data-theme="pastel"] .noise { display: none; } /* le grain ne dither rien sur lavande claire */
[data-theme="pastel"] .board-card,
[data-theme="pastel"] .card,
[data-theme="pastel"] .chip,
[data-theme="pastel"] .icon-btn { backdrop-filter: none; } /* panneaux opaques : coût GPU pour rien */
/* bulles de fond recolorées en lavis pastel (pêche / rose / menthe) */
[data-theme="pastel"] .b1 {
  background: radial-gradient(circle,
    rgba(232, 89, 12, 0.10) 0%, rgba(232, 89, 12, 0.06) 30%,
    rgba(232, 89, 12, 0.025) 55%, transparent 72%);
}
[data-theme="pastel"] .b2 {
  background: radial-gradient(circle,
    rgba(214, 51, 108, 0.09) 0%, rgba(214, 51, 108, 0.055) 30%,
    rgba(214, 51, 108, 0.02) 55%, transparent 72%);
}
[data-theme="pastel"] .b3 {
  background: radial-gradient(circle,
    rgba(9, 146, 104, 0.07) 0%, rgba(9, 146, 104, 0.04) 35%,
    rgba(9, 146, 104, 0.015) 58%, transparent 74%);
}
/* rondeurs bonbon : boutons pilule, plateau et modale extra-ronds */
[data-theme="pastel"] .btn { border-radius: 999px; }
[data-theme="pastel"] .canvas-wrap { border-radius: 18px; }
[data-theme="pastel"] .modal-card { border-radius: 30px; }
/* état désactivé plein et mat (le fondu d'opacité est une recette fond sombre) */
[data-theme="pastel"] .btn.primary:disabled {
  opacity: 1;
  filter: none;
  background: var(--inset-bg);
  color: var(--ink-3);
  box-shadow: none;
}
.theme-picker button[data-t="pastel"] { background: linear-gradient(135deg, #f3effa 50%, #c2255c 50%); outline: 1px solid rgba(96, 70, 178, 0.4); }

/* ---- RETRO70 : chaleur seventies, crème & orange brûlé, slab lourde (palette validée light) ---- */
[data-theme="retro70"] {
  color-scheme: light;
  --bg: #ede0c4;
  --surface: #f7edd8;
  --panel: #fbf4e2;
  --panel-border: rgba(59, 40, 20, 0.16);
  --ink: #2b1d12;
  --ink-2: rgba(43, 29, 18, 0.8); /* 7.17:1 sur --bg, 8.05:1 sur --panel */
  --ink-3: rgba(43, 29, 18, 0.68); /* 5.02:1 sur --bg, 5.40:1 sur --panel (0.64 échouait AA) */
  --u1: #cf4a0e;
  --u2: #9c1f45;
  --crowd: #2f5fd0;
  --camp2: #0d8a78;
  --radius: 26px; /* arrondis généreux, mobilier 70s */
  --font-display: 'Alfa Slab One', Rockwell, 'Arial Black', Georgia, serif;
  --modal-bg: #fdf7e8;
  --modal-back: rgba(46, 30, 15, 0.45);
  --overlay-bg: rgba(253, 247, 232, 0.92);
  --overlay-bg-strong: rgba(253, 247, 232, 0.97);
  --inset-bg: rgba(43, 29, 18, 0.045);
  --inset-border: rgba(43, 29, 18, 0.13);
  --card-shadow: 0 12px 40px rgba(94, 62, 22, 0.16);
  --wrap-tint: rgba(207, 74, 14, 0.04);
  --title-grad-a: #3c2410;
  --title-grad-b: #8a4a14; /* brun -> rouille, 5.23:1 sur --bg (display large) */
  --noise-op: 0;
  --btn-ink: #fff6e6;
  --btn-grad-a: #b03c07; /* u1 passait sous AA avec label clair (4.22) -> assombri, 5.60:1 */
  --btn-grad-b: #8f1c3e; /* 8.14:1 avec --btn-ink */
  --streak-ink: #7d5000; /* moutarde foncée, 5.32:1 sur --bg */
  --track-bg: rgba(43, 29, 18, 0.14);
  --hover-bg: rgba(43, 29, 18, 0.06);
  --divider: rgba(43, 29, 18, 0.09);
  --modal-shadow: 0 20px 60px rgba(70, 45, 15, 0.3);
  --link-ink: #963305; /* 5.79:1 sur --bg */
  --glow-a: rgba(176, 60, 7, 0.26);
  --glow-b: rgba(143, 28, 62, 0.32);
  --pop-glow: rgba(207, 74, 14, 0.55);
  --banner-bg: rgba(176, 124, 12, 0.12);
  --banner-border: rgba(125, 80, 0, 0.4);
  --badge-bg: rgba(47, 95, 208, 0.09);
  --badge-border: rgba(47, 95, 208, 0.35);
  --badge-ink: #2a53b8; /* 5.61:1 sur badge-bg composité */
  --tip-u: #b03c07; /* 5.62:1 sur overlay */
  --tip-a: #2a53b8; /* 6.49:1 sur overlay */
  --tip-b: #0b7264; /* 5.45:1 sur overlay */
  --band-swatch: rgba(47, 95, 208, 0.22);
  --c-grid: rgba(43, 29, 18, 0.08);
  --c-grid-mid: rgba(43, 29, 18, 0.14);
  --c-user-glow: rgba(0, 0, 0, 0); /* pas de néon sur crème */
  --c-user-area: rgba(207, 74, 14, 0.08);
  --c-crowd-glow: rgba(0, 0, 0, 0);
  --c-camp2-glow: rgba(0, 0, 0, 0);
  --c-ghost: rgba(43, 29, 18, 0.09);
  --c-ghost-a: rgba(47, 95, 208, 0.13);
  --c-ghost-b: rgba(13, 138, 120, 0.13);
  --c-band: rgba(47, 95, 208, 0.08);
  --c-diverge: rgba(207, 74, 14, 0.07);
  --c-demo: rgba(43, 29, 18, 0.2);
  --c-demo-dot: rgba(43, 29, 18, 0.45);
  --c-pen-core: rgba(43, 29, 18, 0.9);
  --c-pen-halo: rgba(207, 74, 14, 0.5);
  --c-inspect: rgba(43, 29, 18, 0.3);
  --c-dot-ring: rgba(247, 237, 216, 0.95);
  --c-jalon: rgba(43, 29, 18, 0.11);
}
[data-theme="retro70"] .blob,
[data-theme="retro70"] .noise { display: none; } /* pas de grain ni de blobs néon sur crème */
[data-theme="retro70"] .board-card,
[data-theme="retro70"] .card,
[data-theme="retro70"] .chip,
[data-theme="retro70"] .icon-btn { backdrop-filter: none; } /* panneaux opaques : coût GPU pour rien */
/* arches concentriques discrètes, motif pochette 70s (décor uniquement, hors palette data) */
[data-theme="retro70"] .bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 88% -14%,
      transparent 14vw, rgba(207, 74, 14, 0.07) 14vw 20vw,
      rgba(176, 124, 12, 0.06) 20vw 26vw,
      rgba(107, 112, 42, 0.05) 26vw 32vw,
      transparent 32vw),
    radial-gradient(circle at -6% 108%,
      transparent 12vw, rgba(156, 31, 69, 0.05) 12vw 18vw,
      rgba(207, 74, 14, 0.05) 18vw 24vw,
      rgba(176, 124, 12, 0.05) 24vw 30vw,
      transparent 30vw);
}
/* Alfa Slab One n'existe qu'en 400 : couper le faux-gras synthétique partout */
[data-theme="retro70"] .logo,
[data-theme="retro70"] .topic-title,
[data-theme="retro70"] .score-phrase,
[data-theme="retro70"] .statline i,
[data-theme="retro70"] .modal-card h2,
[data-theme="retro70"] .modal-logo { font-weight: 400; }
/* thème clair : état désactivé plein et mat (même recette que papier/brut) */
[data-theme="retro70"] .btn.primary:disabled {
  opacity: 1;
  filter: none;
  background: var(--inset-bg);
  color: var(--ink-3);
  box-shadow: none;
}
.theme-picker button[data-t="retro70"] { background: linear-gradient(135deg, #ede0c4 50%, #cf4a0e 50%); outline: 1px solid rgba(61, 41, 16, 0.35); }

/* ---- LUXE : minimalisme haut de gamme sombre — noir bleuté, or champagne, bordeaux (palette validée dark, courbe joueur UNIE) ---- */
[data-theme="luxe"] {
  --bg: #090a10;
  --surface: #0d0f17;
  --panel: rgba(243, 239, 228, 0.035);
  --panel-border: rgba(243, 239, 228, 0.1);
  --ink: #f3efe4;
  --ink-2: rgba(243, 239, 228, 0.75);
  --ink-3: rgba(243, 239, 228, 0.6); /* 6.48:1 sur --bg, 6.38:1 sur --panel (AA petit texte) */
  --u1: #c04a66;
  --u2: #c04a66; /* courbe joueur UNIE — le luxe ne dégrade pas */
  --crowd: #b98d2f;
  --camp2: #6d8ede;
  --radius: 16px;
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --modal-bg: #12141d;
  --modal-back: rgba(4, 5, 9, 0.78);
  --overlay-bg: rgba(13, 15, 23, 0.88);
  --overlay-bg-strong: rgba(13, 15, 23, 0.95);
  --inset-bg: rgba(243, 239, 228, 0.04);
  --inset-border: rgba(243, 239, 228, 0.09);
  --card-shadow: 0 20px 70px rgba(0, 0, 0, 0.38); /* ombre large et douce, jamais dure */
  --wrap-tint: rgba(185, 141, 47, 0.04);
  --title-grad-a: #f6f2e7;
  --title-grad-b: #d8c69a;
  --noise-op: 0.04;
  --btn-ink: #16130b; /* encre sombre sur or : 11.17:1 / 6.11:1 selon l'extrémité du dégradé */
  --btn-grad-a: #e2c684;
  --btn-grad-b: #b98d2f;
  --streak-ink: #e3c47b;
  --track-bg: rgba(243, 239, 228, 0.08);
  --hover-bg: rgba(243, 239, 228, 0.06);
  --divider: rgba(243, 239, 228, 0.07);
  --modal-shadow: 0 40px 110px rgba(0, 0, 0, 0.55);
  --link-ink: #d9b96a;
  --glow-a: rgba(0, 0, 0, 0.4); /* aucun néon : les « glows » deviennent des ombres portées douces */
  --glow-b: rgba(0, 0, 0, 0.5);
  --pop-glow: rgba(226, 198, 132, 0.45);
  --banner-bg: rgba(185, 141, 47, 0.08);
  --banner-border: rgba(185, 141, 47, 0.3);
  --badge-bg: rgba(185, 141, 47, 0.1);
  --badge-border: rgba(185, 141, 47, 0.32);
  --badge-ink: #e0c078;
  --tip-u: #e58ea1;
  --tip-a: #d9b05c;
  --tip-b: #9db4ec;
  --band-swatch: rgba(185, 141, 47, 0.28);
  --c-grid: rgba(243, 239, 228, 0.045);
  --c-grid-mid: rgba(243, 239, 228, 0.085);
  --c-user-glow: rgba(0, 0, 0, 0); /* pas de halo néon sur les courbes */
  --c-user-area: rgba(192, 74, 102, 0.1);
  --c-crowd-glow: rgba(0, 0, 0, 0);
  --c-camp2-glow: rgba(0, 0, 0, 0);
  --c-ghost: rgba(243, 239, 228, 0.07);
  --c-ghost-a: rgba(185, 141, 47, 0.12);
  --c-ghost-b: rgba(109, 142, 222, 0.12);
  --c-band: rgba(185, 141, 47, 0.08);
  --c-diverge: rgba(192, 74, 102, 0.06);
  --c-demo: rgba(243, 239, 228, 0.13);
  --c-demo-dot: rgba(243, 239, 228, 0.4);
  --c-pen-core: rgba(246, 242, 231, 0.95);
  --c-pen-halo: rgba(226, 198, 132, 0.35); /* soupçon champagne, pas un phare */
  --c-inspect: rgba(243, 239, 228, 0.28);
  --c-dot-ring: rgba(9, 10, 16, 0.85);
  --c-jalon: rgba(243, 239, 228, 0.09);
}
/* fond : deux respirations très discrètes, or en haut, bleu nuit en bas */
[data-theme="luxe"] .b1 {
  background: radial-gradient(circle,
    rgba(185, 141, 47, 0.07) 0%, rgba(185, 141, 47, 0.045) 28%,
    rgba(185, 141, 47, 0.02) 50%, transparent 70%);
}
[data-theme="luxe"] .b2 {
  background: radial-gradient(circle,
    rgba(109, 142, 222, 0.05) 0%, rgba(109, 142, 222, 0.03) 30%,
    rgba(109, 142, 222, 0.012) 55%, transparent 72%);
}
[data-theme="luxe"] .b3 { display: none; }
/* Cormorant Garamond s'arrête à 700 : on redescend les graisses 800/900,
   la serif fait le travail d'élégance toute seule */
[data-theme="luxe"] .topic-title { font-weight: 600; letter-spacing: 0.005em; }
[data-theme="luxe"] .logo,
[data-theme="luxe"] .modal-logo { font-weight: 700; letter-spacing: 0.03em; font-size: 24px; }
[data-theme="luxe"] .modal-logo { font-size: 20px; }
[data-theme="luxe"] .score-phrase { font-weight: 600; }
[data-theme="luxe"] .statline i { font-weight: 600; letter-spacing: 0.06em; }
[data-theme="luxe"] .modal-card h2 { font-weight: 600; font-size: 26px; }
.theme-picker button[data-t="luxe"] { background: linear-gradient(135deg, #090a10 50%, #d9b96a 50%); }

/* ---- sélecteur de thème (proto) ----
   Vit dans « Chez toi » → Réglages. Plus aucun `position: fixed` permanent :
   il mangeait 302 × 42 px et des événements pointer au-dessus du plateau. */
.theme-picker {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--overlay-bg);
  border: 1px solid var(--panel-border);
}
.theme-picker button {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
  padding: 0;
}
.theme-picker button:hover { transform: scale(1.18); }
.theme-picker button.active { border-color: var(--ink); }
.theme-picker button[data-t="brutnoir"] { background: linear-gradient(135deg, #0d0d0c 50%, #ffd60a 50%); outline: 1px solid rgba(235,232,223,0.5); }
.theme-picker button[data-t="nuit"] { background: linear-gradient(135deg, #08080e 50%, #8a7bff 50%); }
.theme-picker button[data-t="papier"] { background: linear-gradient(135deg, #f2ecdf 50%, #c2185b 50%); }
.theme-picker button[data-t="brut"] { background: linear-gradient(135deg, #efeee8 50%, #dc2626 50%); outline: 1px solid rgba(20,20,20,0.4); }
/* les trois directions à l'essai : elles n'ont pas de couleur d'accent, donc la
   pastille montre ce qui les distingue vraiment — le fond, l'encre, la trame */
.theme-picker button[data-t="encre"] { background: linear-gradient(135deg, #ffffff 50%, #111111 50%); outline: 1px solid rgba(20,20,20,0.4); }
.theme-picker button[data-t="encrenuit"] { background: linear-gradient(135deg, #0c0c0d 50%, #f2f0ec 50%); outline: 1px solid rgba(242,240,236,0.4); }
.theme-picker button[data-t="bit"] {
  background:
    repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 0 0 / 6px 6px,
    #fff;
  outline: 1px solid rgba(20,20,20,0.5);
}
.theme-picker button[data-t="arcade"] { background: linear-gradient(135deg, #04060d 50%, #14a76c 50%); }

@media (max-width: 640px) {
  .top { padding: 16px 16px 2px; }
  main { padding: 8px 14px 44px; }
  .hero { padding: 18px 0 16px; }
  .topic-q { font-size: 15px; }
  .canvas-wrap { aspect-ratio: 4 / 3; }
  .board-card { padding: 14px 20px 12px; }
  .board-actions { flex-wrap: wrap; gap: 10px; }
  .cov { order: -1; flex-basis: 100%; }
  .board-actions .btn { flex: 1; }
  .legend { display: none; }
  /* exception Vérité : la légende nomme les trois courbes — c'est elle qui
     remplace le libellé « LA RÉALITÉ » qu'on refuse de dessiner au canvas. */
  /* en flux sous le graphe, pas par-dessus : c'est LA courbe réelle qu'on est
     venu voir, la légende ne doit pas en masquer le sommet */
  .legend.verite {
    display: flex; flex-wrap: wrap; justify-content: center;
    position: static; margin: 8px 0 0; max-width: 100%;
    background: none; border: none;
    gap: 10px; font-size: 11px;
  }
  .chip { padding: 6px 10px; font-size: 11.5px; }
  .modal-card { padding: 26px 20px; }
}

/* ============================================================================
   ATELIER DE DIRECTIONS — OUTIL DE PROTO, à supprimer avec le bloc #themeLab
   d'index.html quand la direction sera tranchée. C'est la seule exception
   assumée à la règle « zéro position:fixed permanent ».
   ========================================================================== */
#themeLab {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  width: 208px; max-height: 70vh; overflow: auto;
  background: var(--modal-bg, #16110c);
  border: 1px solid var(--panel-border, #333);
  border-radius: 10px;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
#themeLab.reduit .lab-list { display: none; }
.lab-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3, #888);
  border-bottom: 1px solid var(--divider, #2a2a2a);
}
.lab-tag {
  font-size: 9.5px; letter-spacing: 0.1em;
  padding: 2px 5px; margin-left: 6px; border-radius: 4px;
  background: var(--banner-border, #c47); color: var(--bg, #000);
}
.lab-head button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3, #888); font-size: 16px; line-height: 1;
  padding: 0 2px;
}
.lab-list { padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.lab-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 7px;
  background: none; border: 1px solid transparent;
  cursor: pointer; text-align: left; width: 100%;
  color: var(--ink-2, #ccc);
}
.lab-row:hover { background: var(--hover-bg, rgba(255,255,255,0.05)); }
.lab-row[aria-current="true"] {
  border-color: var(--banner-border, #c47);
  background: var(--hover-bg, rgba(255,255,255,0.06));
}
/* l'aperçu : les 3 couleurs qui comptent — toi, les gens, le 2e camp */
.lab-swatch {
  display: flex; flex: 0 0 auto; width: 30px; height: 20px;
  border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.lab-swatch i { flex: 1; }
.lab-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lab-nom { font-size: 13px; font-weight: 700; color: var(--ink, #eee); }
.lab-note { font-size: 10.5px; color: var(--ink-3, #888); }
/* Sur téléphone l'atelier était purement et simplement masqué : impossible de
   comparer les directions là où le jeu se joue vraiment. Il reste donc là,
   mais REPLIÉ par défaut (js/main.js ajoute .reduit sous ce seuil) — un seul
   bouton en bas à gauche, qu'on déplie pour choisir. Raccourci sans interface :
   ajouter ?theme=bit à l'adresse. */
/* Sur téléphone, ce panneau flottant se pose exactement là où le pouce
   travaille : mesuré sur un viewport d'iPhone réel (390×664, la barre d'URL
   rogne la hauteur), même replié il recouvre le coin gauche de « Verrouiller
   ma courbe » — on vise le libellé, on touche l'atelier. Une surface fixe
   permanente n'a rien à faire dans le chemin du doigt.
   Il sort donc du mobile, mais SANS coûter la trouvabilité : les cinq
   directions sont dans les Réglages ⚙️, et ?theme=... reste branché. */
@media (max-width: 879px) { #themeLab { display: none; } }