/* Carton Plein — feuille produit.
   Extraite telle quelle de la grammaire livrée par le designer (design/v2/carton.css).
   Retiré : la chrome de revue (cadres, échelles, spécimens, palettes, squelettes).
   Ajouté : le responsive des vraies fenêtres, en fin de fichier. */


/* ============ TOKENS ============ */
:root{
  --hue: 22;                                   /* the one pilot value */

  /* ink & paper — dark card stock, fluorescent dauber ink */
  --ground:  oklch(0.16 0.012 var(--hue));
  --field:   oklch(0.21 0.014 var(--hue));
  --raised:  oklch(0.27 0.016 var(--hue));
  --rule:    oklch(0.36 0.02  var(--hue));
  --text:    oklch(0.95 0.012 var(--hue));
  --text-2:  oklch(0.71 0.02  var(--hue));
  --ink:     oklch(0.72 0.20  var(--hue));
  --ink-deep:oklch(0.55 0.19  var(--hue));
  --on-ink:  oklch(0.15 0.03  var(--hue));
  --hot:     oklch(0.32 0.06  var(--hue));
  --struck:  oklch(0.52 0.015 var(--hue));
  --ink-alpha: 0.92;
  --ghost-alpha: 0.32;

  /* materials */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hair: 1px;
  --hair-2: 2px;
  --rule-heavy: 4px;
  --rule-overlay: 6px;

  /* type */
  --font-display: "Anton", Impact, Haettenschweiler, "Franklin Gothic Heavy", "Arial Narrow", sans-serif;
  --font-text: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-1: 12px;  --lh-1: 1.35;
  --fs-2: 14px;  --lh-2: 1.45;
  --fs-3: 17px;  --lh-3: 1.4;
  --fs-4: 22px;  --lh-4: 1.2;
  --fs-5: 34px;  --lh-5: 1.0;
  --fs-6: 56px;  --lh-6: 0.95;
  --fs-7: 120px; --lh-7: 0.9;
  --fs-cell-3: 15px; --fs-cell-4: 11px; --fs-cell-5: 8.5px; --lh-cell: 1.06;
  --track-display: 0.02em;
  --track-caps: 0.12em;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 112px;
  --measure: 62ch;
  --page-pad: var(--s-5);
  --page-max: 1440px;
  --col-gap-360: 12px; --col-gap-1440: 24px;
  --frame-360: 360px; --frame-1440: 1440px; --frame-360-h: 480px; --frame-1440-h: 420px;

  /* components */
  --cell-gap: 2px; --cell-pad: 3px; --cell-pad-3: 8px;
  --target: 44px;
  --btn-h: 48px; --btn-pad: 20px;
  --field-h: 56px;
  --mark-xs: 20px; --mark-s: 44px; --mark-m: 88px; --mark-l: 200px;
  --swatch: 72px;
  --bar-h: 10px;
  --notice-h: 44px;
  --radius-0: 0; --radius-blot: 50%;

  /* motion */
  --t-fast: 120ms;
  --t-mark: 260ms;
  --t-count: 180ms;
  --t-bingo: 900ms;
  --t-exit: 220ms;
  --ease-land: cubic-bezier(.34, 1.4, .64, 1);   /* one overshoot */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --rot-step: 47deg;
  --off-step: 3%;
}
[data-theme="light"]{
  --ground:  oklch(0.965 0.010 var(--hue));
  --field:   oklch(0.925 0.012 var(--hue));
  --raised:  oklch(0.88  0.014 var(--hue));
  --rule:    oklch(0.78  0.02  var(--hue));
  --text:    oklch(0.18  0.02  var(--hue));
  --text-2:  oklch(0.42  0.02  var(--hue));
  --ink:     oklch(0.60  0.21  var(--hue));
  --ink-deep:oklch(0.47  0.19  var(--hue));
  --on-ink:  oklch(0.98  0.01  var(--hue));
  --hot:     oklch(0.90  0.06  var(--hue));
  --struck:  oklch(0.58  0.015 var(--hue));
}
/* OS preference: light applies unless the document has chosen explicitly */
@media (prefers-color-scheme: light){
  :root:not([data-theme]), :root[data-theme="auto"]{
    --ground:  oklch(0.965 0.010 var(--hue));
    --field:   oklch(0.925 0.012 var(--hue));
    --raised:  oklch(0.88  0.014 var(--hue));
    --rule:    oklch(0.78  0.02  var(--hue));
    --text:    oklch(0.18  0.02  var(--hue));
    --text-2:  oklch(0.42  0.02  var(--hue));
    --ink:     oklch(0.60  0.21  var(--hue));
    --ink-deep:oklch(0.47  0.19  var(--hue));
    --on-ink:  oklch(0.98  0.01  var(--hue));
    --hot:     oklch(0.90  0.06  var(--hue));
    --struck:  oklch(0.58  0.015 var(--hue));
  }
}
@font-face{ font-family:"Anton"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/static/anton-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Anton"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/static/anton-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Public Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/static/publicsans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Public Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/static/publicsans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@media (prefers-reduced-motion: reduce){
  :root{ --t-fast:0ms; --t-mark:0ms; --t-count:0ms; --t-bingo:0ms; --t-exit:0ms; }
}

/* ============ GROUND ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--ground); color:var(--text); font:var(--fs-2)/var(--lh-2) var(--font-text); -webkit-text-size-adjust:100%; }
body{ background-color:var(--ground); background-image:var(--paper); min-height:100vh; }
a{ color:var(--ink); text-decoration-color:var(--rule); }
a:hover{ color:var(--text); text-decoration-color:var(--ink); }
button,input{ font:inherit; color:inherit; }
svg.defs{ position:absolute; width:0; height:0; overflow:hidden; }


/* ============ UTILITAIRES ============ */
.label{ font-size:var(--fs-1); line-height:var(--lh-1); color:var(--text-2); text-transform:uppercase; letter-spacing:var(--track-caps); }
.mono{ font-variant-numeric:tabular-nums; }
.slot{ color:var(--text-2); border:var(--hair) dashed var(--rule); padding:var(--s-1) var(--s-2); font-size:var(--fs-1); }

/* ============ GRILLES ============ */
.grid{ display:grid; gap:var(--cell-gap); background:var(--rule); padding:var(--cell-gap); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); --fs-cell:var(--fs-cell-3); --pad:var(--cell-pad-3); }
.grid-4{ grid-template-columns:repeat(4, minmax(0,1fr)); --fs-cell:var(--fs-cell-4); --pad:var(--s-1); }
.grid-5{ grid-template-columns:repeat(5, minmax(0,1fr)); --fs-cell:var(--fs-cell-5); --pad:var(--cell-pad); }
.cell{ position:relative; aspect-ratio:1; min-width:0; background:var(--field); padding:var(--pad); display:flex; align-items:flex-start; overflow:hidden; }
.cell-label{ font-size:var(--fs-cell); line-height:var(--lh-cell); hyphens:auto; overflow-wrap:anywhere; color:var(--text); width:100%; }
.cell[data-state="rejected"] .cell-label{ color:var(--struck); text-decoration:line-through; text-decoration-color:var(--ink); text-decoration-thickness:var(--hair-2); }
.cell[data-state="hot"]{ background:var(--hot); }
.cell[data-line]{ outline:var(--hair-2) solid var(--ink); outline-offset:calc(-1 * var(--hair-2)); }
/* ============ THE MARK ============ */
.mark{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;
  rotate:calc(var(--i, 0) * var(--rot-step));
  translate:calc((mod(calc(var(--i, 0) * 7), 5) - 2) * var(--off-step)) calc((mod(calc(var(--i, 0) * 3), 5) - 2) * var(--off-step)); }
.mark use{ fill:var(--ink); opacity:var(--ink-alpha); filter:url(#blot-a); }
[data-i="1"] .mark use,[data-i="4"] .mark use,[data-i="7"] .mark use,[data-i="10"] .mark use,[data-i="13"] .mark use,[data-i="16"] .mark use,[data-i="19"] .mark use,[data-i="22"] .mark use{ filter:url(#blot-b); }
[data-i="2"] .mark use,[data-i="5"] .mark use,[data-i="8"] .mark use,[data-i="11"] .mark use,[data-i="14"] .mark use,[data-i="17"] .mark use,[data-i="20"] .mark use,[data-i="23"] .mark use{ filter:url(#blot-c); }
[data-i="0"]{--i:0}[data-i="1"]{--i:1}[data-i="2"]{--i:2}[data-i="3"]{--i:3}[data-i="4"]{--i:4}[data-i="5"]{--i:5}[data-i="6"]{--i:6}[data-i="7"]{--i:7}[data-i="8"]{--i:8}[data-i="9"]{--i:9}[data-i="10"]{--i:10}[data-i="11"]{--i:11}[data-i="12"]{--i:12}[data-i="13"]{--i:13}[data-i="14"]{--i:14}[data-i="15"]{--i:15}[data-i="16"]{--i:16}[data-i="17"]{--i:17}[data-i="18"]{--i:18}[data-i="19"]{--i:19}[data-i="20"]{--i:20}[data-i="21"]{--i:21}[data-i="22"]{--i:22}[data-i="23"]{--i:23}[data-i="24"]{--i:24}

/* flagged by me: dauber touched, not pressed — a hollow ring */
.ring{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ring use{ fill:none; stroke:var(--ink); stroke-width:var(--rule-heavy); filter:url(#blot-b); }

/* crowd pressure: a ghost blot that grows with share of the room, count in its centre */
.ghost use{ opacity:var(--ghost-alpha); }
.ghost{ scale:calc(0.25 + var(--p, 0) * 0.75); transition:scale var(--t-count) var(--ease-out); }
.count{ position:absolute; inset:0; display:grid; place-items:center; font:var(--fs-5)/var(--lh-5) var(--font-display); color:var(--text); font-variant-numeric:tabular-nums; pointer-events:none;
  font-size:calc(var(--fs-3) + var(--p, 0) * (var(--fs-5) - var(--fs-3))); }
.count.tick{ animation:tick var(--t-count) var(--ease-out); }
@keyframes tick{ 0%{ scale:1 } 40%{ scale:1.18 } 100%{ scale:1 } }
[data-p="1"]{--p:.1}[data-p="2"]{--p:.2}[data-p="3"]{--p:.3}[data-p="4"]{--p:.4}[data-p="5"]{--p:.5}[data-p="6"]{--p:.6}[data-p="7"]{--p:.7}[data-p="8"]{--p:.8}[data-p="9"]{--p:.9}[data-p="10"]{--p:1}

/* standalone mark sizes */
.mark-box{ position:relative; background:var(--field); display:grid; place-items:center; }
.mark-box.xs{ width:var(--mark-xs); height:var(--mark-xs); } .mark-box.s{ width:var(--mark-s); height:var(--mark-s); }
.mark-box.m{ width:var(--mark-m); height:var(--mark-m); } .mark-box.l{ width:var(--mark-l); height:var(--mark-l); }
.mark-box.clear{ background:transparent; }
.land .mark, .mark.land{ animation:land var(--t-mark) var(--ease-land) both; }
@keyframes land{ 0%{ scale:.55; opacity:0 } 55%{ opacity:var(--ink-alpha) } 100%{ scale:1; opacity:1 } }

/* ============ BINGO ============ */
.bingo{ display:inline-grid; gap:var(--s-1); padding:var(--s-4) var(--s-6) var(--s-5); background:var(--ink); color:var(--on-ink); rotate:-2.5deg; filter:url(#rough); }
.bingo-word{ font:var(--fs-7)/var(--lh-7) var(--font-display); letter-spacing:var(--track-display); text-transform:uppercase; }
.bingo-who{ font-size:var(--fs-4); line-height:var(--lh-4); }
.bingo.land{ animation:stamp var(--t-bingo) var(--ease-out) both; }
@keyframes stamp{ 0%{ scale:1.6; rotate:-9deg; opacity:0 } 30%{ scale:.97; rotate:-2deg; opacity:1 } 45%{ scale:1.02; rotate:-2.5deg } 100%{ scale:1; rotate:-2.5deg } }
.bingo.exit{ animation:fold var(--t-exit) var(--ease-out) both; }
@keyframes fold{ to{ opacity:0; translate:0 var(--s-3) } }

/* ============ COMPOSANTS ============ */

.list{ list-style:none; display:grid; }
.tl{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s-3); align-items:baseline; padding:var(--s-3) 0; border-bottom:var(--hair) solid var(--rule); min-height:var(--target); }
.tl time{ font-size:var(--fs-1); color:var(--text-2); font-variant-numeric:tabular-nums; }
.tl .who{ font-size:var(--fs-1); color:var(--text-2); }
.tl .who b{ font:var(--fs-3)/var(--lh-3) var(--font-display); color:var(--ink); }
.tl[data-kind="reject"] .what{ color:var(--struck); text-decoration:line-through; text-decoration-color:var(--ink); }
.tl-dot{ position:relative; width:var(--mark-xs); height:var(--mark-xs); align-self:center; }
.tl-dot .mark{ translate:0 0; }

.lb{ display:grid; grid-template-columns:var(--s-6) minmax(0,1fr) auto auto; gap:var(--s-3); align-items:center; min-height:var(--target); padding:var(--s-1) 0; border-bottom:var(--hair) solid var(--rule); }
.lb-rank{ font:var(--fs-4)/var(--lh-4) var(--font-display); color:var(--text-2); font-variant-numeric:tabular-nums; }
.lb[data-rank="1"] .lb-rank{ color:var(--ink); }
.lb-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-marks{ display:flex; gap:var(--s-1); }
.lb-marks i{ position:relative; display:block; width:var(--s-2); height:var(--s-2); background:var(--ink); border-radius:var(--radius-blot); }
.lb-marks i.off{ background:var(--rule); }
.lb-lines{ font:var(--fs-4)/var(--lh-4) var(--font-display); font-variant-numeric:tabular-nums; min-width:var(--s-5); text-align:right; }
.lb[data-near] .lb-name::after{ content:""; display:inline-block; width:var(--s-2); height:var(--s-2); margin-left:var(--s-2); background:var(--hot); outline:var(--hair) solid var(--ink); vertical-align:middle; }

.notice{ display:flex; align-items:center; gap:var(--s-3); min-height:var(--notice-h); padding:0 var(--s-4); background:var(--ink); color:var(--on-ink); max-width:480px; }
.notice.quiet{ background:var(--raised); color:var(--text); border-left:var(--rule-heavy) solid var(--ink); }
.notice b{ font:var(--fs-3)/var(--lh-3) var(--font-display); text-transform:uppercase; letter-spacing:var(--track-display); }
.notice .n{ margin-left:auto; font-variant-numeric:tabular-nums; }
.notice button{ background:none; border:0; text-decoration:underline; text-underline-offset:var(--s-1); min-height:var(--target); padding:0 var(--s-2); cursor:pointer; }

.q{ display:grid; grid-template-columns:minmax(0,1fr) 180px auto; gap:var(--s-4); align-items:center; padding:var(--s-3) 0; border-bottom:var(--hair) solid var(--rule); }
.q:focus-within{ background:var(--field); outline:var(--hair-2) solid var(--ink); outline-offset:var(--s-1); }
.q-label{ font-size:var(--fs-3); line-height:var(--lh-3); }
.q-press{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-2); align-items:center; }
.q-bar{ display:block; height:var(--bar-h); background:var(--rule); position:relative; }
.q-bar::after{ content:""; position:absolute; inset:0; right:auto; width:calc(var(--p,0) * 100%); background:var(--ink); transition:width var(--t-count) var(--ease-out); }
.q-n{ font:var(--fs-4)/var(--lh-4) var(--font-display); font-variant-numeric:tabular-nums; }
.q-act{ display:flex; gap:var(--s-2); }
kbd{ font:inherit; font-size:var(--fs-1); opacity:1; border:var(--hair) solid currentColor; padding:0 var(--s-1); margin-left:var(--s-2); }

.btn{ min-height:var(--btn-h); padding:0 var(--btn-pad); border:var(--hair-2) solid var(--ink); background:transparent; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:var(--s-1); font-size:var(--fs-3); }
.btn:focus-visible{ outline:var(--hair-2) solid var(--ink); outline-offset:var(--s-1); }
.btn-primary{ background:var(--ink); color:var(--on-ink); font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--track-display); font-size:var(--fs-4); }
.btn-primary:hover{ background:var(--ink-deep); }
.btn-quiet{ border-color:var(--rule); }
.btn-quiet:hover{ border-color:var(--text-2); }
.btn-danger{ border-color:var(--text); border-width:var(--rule-heavy); color:var(--text); }
.btn-danger[data-armed]{ background:var(--text); color:var(--ground); }
.btn-danger .armed{ display:none; } .btn-danger[data-armed] .armed{ display:inline; } .btn-danger[data-armed] .idle{ display:none; }
.btn:disabled{ border-color:var(--rule); color:var(--text-2); cursor:default; }

.field{ display:grid; gap:var(--s-2); max-width:360px; }
.field label{ font-size:var(--fs-1); color:var(--text-2); text-transform:uppercase; letter-spacing:var(--track-caps); }
.field input{ height:var(--field-h); background:transparent; border:0; border-bottom:var(--hair-2) solid var(--rule); font-size:var(--fs-4); color:var(--text); padding:0; outline:none; }
.field input:focus{ border-bottom-color:var(--ink); }
.field .hint{ font-size:var(--fs-1); color:var(--text-2); display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; }
.field[data-error] input{ border-bottom-color:var(--ink); border-bottom-width:var(--rule-heavy); }
.field[data-error] .hint{ color:var(--ink); }
/* ============ STATES ============ */
[data-conn="lost"] .grid{ background:var(--field); }
[data-conn="lost"] .cell{ outline:var(--hair) dashed var(--rule); outline-offset:calc(-1 * var(--hair)); }
[data-conn="lost"] .cell-label{ color:var(--text-2); }
[data-conn="lost"] .mark use{ opacity:var(--ghost-alpha); }
[data-conn="lost"] .count{ color:var(--text-2); }
.notice.conn{ background:var(--ground); color:var(--text); border:var(--hair-2) dashed var(--ink); }
.notice.conn b{ color:var(--ink); }
.uninked use{ fill:none; stroke:var(--rule); stroke-width:var(--hair-2); stroke-dasharray:6 5; filter:url(#blot-a); }
.empty-grid .cell{ background:transparent; outline:var(--hair) dashed var(--rule); outline-offset:calc(-1 * var(--hair)); }
.empty-grid .cell-label{ color:var(--text-2); }
.empty-grid .cell-label::before{ content:counter(slot) " / "; counter-increment:slot; }
.empty-grid{ counter-reset:slot; background:transparent; }
.q.empty, .lb.empty{ color:var(--text-2); border-bottom:var(--hair) dashed var(--rule); grid-template-columns:minmax(0,1fr) auto; }
.q.empty .q-label{ color:var(--text-2); }
.podium{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-4); max-width:480px; padding:var(--s-5) 0; }
.pod{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s-4); align-items:baseline; border-bottom:var(--hair) solid var(--rule); padding-bottom:var(--s-3); }
.pod-rank{ font-family:var(--font-display); color:var(--text-2); font-variant-numeric:tabular-nums; }
.pod-name{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--track-display); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod-lines{ font-size:var(--fs-2); color:var(--text-2); }
.pod[data-rank="1"]{ grid-template-columns:auto minmax(0,1fr) auto; }
.pod[data-rank="1"] .pod-rank{ font-size:var(--fs-6); line-height:var(--lh-6); color:var(--ink); }
.pod[data-rank="1"] .pod-name{ font-size:var(--fs-6); line-height:var(--lh-6); position:relative; padding-left:var(--s-6); }
.pod[data-rank="1"] .pod-name .mark-box{ position:absolute; left:0; top:0; }
.pod[data-rank="2"] .pod-rank, .pod[data-rank="2"] .pod-name{ font-size:var(--fs-5); line-height:var(--lh-5); }
.pod[data-rank="3"] .pod-rank, .pod[data-rank="3"] .pod-name{ font-size:var(--fs-4); line-height:var(--lh-4); }
.pod.me{ border-bottom:0; padding-top:var(--s-3); font-size:var(--fs-2); color:var(--text-2); font-family:var(--font-text); }
.pod.me .pod-rank, .pod.me .pod-name{ font:var(--fs-3)/var(--lh-3) var(--font-text); text-transform:none; letter-spacing:0; color:var(--text); }

/* ============ OVERLAY ============ */
.ov{ position:absolute; inset:0; }
.ov-corner{ position:absolute; left:var(--ov-pad); bottom:var(--ov-pad); display:grid; gap:var(--ov-gap); justify-items:start; }
.ov-banner{ display:flex; align-items:center; gap:var(--ov-gap-l); height:var(--ov-banner-h); padding:0 var(--ov-pad-x); background:var(--ground); color:var(--text); border-left:var(--ov-rule) solid var(--ink); font:var(--ov-fs-2)/1 var(--font-display); text-transform:uppercase; letter-spacing:var(--track-display); }
.ov-banner b{ color:var(--ink); }
.ov-recent{ display:flex; align-items:center; gap:var(--ov-gap); height:var(--ov-recent-h); }
.ov-recent .mark-box{ width:var(--ov-mark); height:var(--ov-mark); }
.ov-recent-label{ background:var(--ground); color:var(--text); padding:var(--ov-gap) var(--ov-gap-l); font-size:var(--ov-fs-1); line-height:var(--ov-lh); max-width:var(--ov-label-w); }
.ov-recent-label small{ display:block; font-size:var(--ov-fs-0); color:var(--text-2); }
.ov-lb{ position:absolute; right:var(--ov-pad); bottom:var(--ov-pad); width:var(--ov-lb-w); list-style:none; display:grid; background:var(--ground); color:var(--text); border-top:var(--ov-rule) solid var(--ink); }
.ov-lb li{ display:grid; grid-template-columns:var(--ov-rank-w) minmax(0,1fr) auto; gap:var(--ov-gap); align-items:center; height:var(--ov-row-h); padding:0 var(--ov-gap-l); font:var(--ov-fs-1)/1 var(--font-display); text-transform:uppercase; letter-spacing:var(--track-display); }
.ov-lb li + li{ border-top:var(--ov-rule) solid var(--field); }
.ov-lb li span:first-child{ color:var(--ink); }
.ov-lb li span:nth-child(2){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-bingo{ position:absolute; left:var(--ov-pad); bottom:var(--ov-bingo-b); padding:var(--ov-gap-l) var(--ov-pad-xl) var(--ov-pad-y); --fs-7:var(--ov-fs-3); }
.ov-bingo .bingo-who{ font-size:var(--ov-fs-1); }
/* ============ STAGE TWO TOKENS (additions only; the frozen layer above is untouched) ============ */
:root{
  --fs-8: 240px; --lh-8: 0.88;
  --player-w: 360px; --player-h: 800px;
  --console-w: 1440px; --console-h: 900px;
  --landing-w: 1440px; --landing-h: 900px;
  --ov-w: 1920px; --ov-h: 1080px;
  --ov-pad: 48px; --ov-pad-x: 32px; --ov-pad-y: 40px; --ov-pad-xl: 56px; --ov-gap: 16px; --ov-gap-l: 24px;
  --ov-rule: 6px; --ov-fs-0: 28px; --ov-fs-1: 40px; --ov-fs-2: 56px; --ov-fs-3: 160px; --ov-lh: 1.1;
  --ov-mark: 120px; --ov-lb-w: 520px; --ov-lb-w-final: 640px; --ov-banner-h: 96px; --ov-row-h: 80px; --ov-rank-w: 72px; --ov-recent-h: 120px; --ov-label-w: 720px; --ov-bingo-b: 320px;
  --ov-slide: 110%;
  --rail-l: 300px; --rail-r: 340px; --bar-top: 56px; --q-press-w: 180px; --draft-n-w: 40px; --draft-count-w: 64px;
  --sheet-lb-w: 132px; --clamp: 2; --pl-top-h: 28px;
  --wm-ratio: 1.3; --wm-blot: .55em; --wm-blot-x: -.22em; --wm-blot-y: -.12em; --wm-dot: .42em; --wm-gap: .16em; --wm-sq: 96px; --wm-sq-s: 32px;
  --frame-gap: var(--s-6);
  --t-hold-in: -0.45; --t-hold-out: -0.5;
}

/* ============ WORDMARK ============ */
.wm{ display:inline-grid; justify-items:start; position:relative; font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--track-display); line-height:var(--lh-8); font-size:var(--fs-6); color:var(--text); }
.wm > span:first-child{ font-size:1em; }
.wm > span:nth-child(2){ font-size:calc(1em * var(--wm-ratio)); }
.wm .mark-box{ position:absolute; right:var(--wm-blot-x); bottom:var(--wm-blot-y); width:var(--wm-blot); height:var(--wm-blot); background:transparent; }
.wm.l{ font-size:var(--fs-8); }
.wm.s{ font-size:var(--fs-4); line-height:var(--lh-6); }
.wm-line{ display:inline-flex; align-items:center; gap:var(--wm-gap); font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--track-display); line-height:var(--lh-6); font-size:var(--fs-5); color:var(--text); }
.wm-line .mark-box{ width:var(--wm-dot); height:var(--wm-dot); background:transparent; }
.wm-sq{ position:relative; width:var(--wm-sq); height:var(--wm-sq); background:var(--ground); display:grid; place-items:center; overflow:hidden; font-family:var(--font-display); font-size:calc(var(--wm-sq) / 2.6); line-height:1; color:var(--on-ink); letter-spacing:var(--track-display); }
.wm-sq.s{ width:var(--wm-sq-s); height:var(--wm-sq-s); font-size:calc(var(--wm-sq-s) / 2.6); }
.wm-sq .mark{ inset:calc(-1 * var(--s-1)); width:auto; height:auto; }
.wm-sq b{ position:relative; font-weight:normal; }

/* ============ PLAYER ============ */
.pl{ height:100%; display:grid; grid-template-rows:var(--pl-top-h) minmax(0,1fr) auto; gap:var(--s-3); padding:var(--s-3); color:var(--text); }
.pl-top{ display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-1); color:var(--text-2); font-variant-numeric:tabular-nums; }
.pl-top b{ font-weight:normal; color:var(--text); }
.pl-body{ display:grid; grid-template-rows:auto minmax(0,1fr); gap:var(--s-3); min-height:0; }
.pl-sheet{ display:grid; grid-template-columns:minmax(0,1fr) var(--sheet-lb-w); gap:var(--s-4); min-height:0; border-top:var(--hair) solid var(--rule); padding-top:var(--s-3); }
.pl-sheet .label{ margin-bottom:var(--s-2); }
.pl-tl{ list-style:none; display:grid; align-content:start; }
.pl-tl li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-2); align-items:baseline; padding:var(--s-2) 0; border-bottom:var(--hair) solid var(--rule); min-height:var(--target); }
.pl-tl time{ font-size:var(--fs-1); color:var(--text-2); font-variant-numeric:tabular-nums; }
.pl-tl .what{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--clamp); overflow:hidden; font-size:var(--fs-2); line-height:var(--lh-2); }
.pl-tl .n{ grid-column:2; font-size:var(--fs-1); color:var(--text-2); }
.pl-tl .n b{ font:var(--fs-3)/var(--lh-3) var(--font-display); color:var(--ink); }
.pl-tl li[data-kind="reject"] .what{ color:var(--struck); text-decoration:line-through; text-decoration-color:var(--ink); }
.pl-lb{ list-style:none; display:grid; align-content:start; }
.pl-lb li{ display:grid; grid-template-columns:var(--s-5) minmax(0,1fr) auto; gap:var(--s-2); align-items:baseline; padding:var(--s-2) 0; border-bottom:var(--hair) solid var(--rule); font-size:var(--fs-1); }
.pl-lb li span:first-child{ font:var(--fs-3)/var(--lh-3) var(--font-display); color:var(--text-2); }
.pl-lb li[data-rank="1"] span:first-child{ color:var(--ink); }
.pl-lb li span:nth-child(2){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-lb li span:last-child{ font:var(--fs-3)/var(--lh-3) var(--font-display); }
.pl-lb li.me{ color:var(--text); background:var(--field); margin:var(--s-2) calc(-1 * var(--s-1)) 0; padding:var(--s-2) var(--s-1); border-bottom:0; }
.pl-lb li.me span:first-child{ color:var(--text); }
.pl-foot{ min-height:var(--notice-h); display:grid; align-items:end; }
.pl-foot .notice{ max-width:none; }
.pl-status{ display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-1); color:var(--text-2); min-height:var(--notice-h); }
.pl-status b{ font:var(--fs-4)/var(--lh-4) var(--font-display); color:var(--text); }
.pl-status .lines{ display:flex; gap:var(--s-1); align-items:center; }
.pl-status .lines i{ display:block; width:var(--s-2); height:var(--s-2); background:var(--rule); border-radius:var(--radius-blot); }
.pl-status .lines i.on{ background:var(--ink); }
/* join / waiting / final variants: same page, different rows */
.pl.join{ grid-template-rows:var(--pl-top-h) minmax(0,1fr) auto auto; }
.pl.join .wm{ align-self:end; margin-bottom:var(--s-6); }
.pl.join .field{ max-width:none; }
.pl.join .btn-primary{ width:100%; justify-content:center; }
.pl.wait .pl-body{ grid-template-rows:auto auto minmax(0,1fr); }
.pl-count{ display:grid; gap:var(--s-1); padding:var(--s-4) 0; }
.pl-count b{ font:var(--fs-7)/var(--lh-7) var(--font-display); font-variant-numeric:tabular-nums; font-weight:normal; color:var(--text); }
.pl-count span{ color:var(--text-2); font-size:var(--fs-2); }
.pl.final .pl-body{ grid-template-rows:auto minmax(0,1fr); align-content:start; }
.pl.final .podium{ max-width:none; }
.pl.final .btn-quiet{ width:100%; justify-content:center; }

/* ============ OVERLAY: entrances and exits ============ */
.ov-banner.enter{ animation:ov-in var(--t-mark) var(--ease-out) both; }
.ov-banner.exit{ animation:ov-out var(--t-exit) var(--ease-out) both; }
.ov-lb.enter{ animation:ov-rise var(--t-mark) var(--ease-out) both; }
.ov-lb.exit{ animation:ov-sink var(--t-exit) var(--ease-out) both; }
.ov-recent.enter .mark{ animation:land var(--t-mark) var(--ease-land) both; }
.ov-recent.enter .ov-recent-label{ animation:ov-in var(--t-mark) var(--ease-out) both; }
.ov-recent.exit{ animation:ov-fade var(--t-exit) var(--ease-out) both; }
@keyframes ov-in{ from{ translate:calc(-1 * var(--ov-slide)) 0; } to{ translate:0 0; } }
@keyframes ov-out{ to{ translate:calc(-1 * var(--ov-slide)) 0; } }
@keyframes ov-rise{ from{ translate:0 var(--ov-slide); } to{ translate:0 0; } }
@keyframes ov-sink{ to{ translate:0 var(--ov-slide); } }
@keyframes ov-fade{ to{ opacity:0; } }
/* frozen mid-flight frames for review: paused at a negative delay */
.ov-lb.final{ width:var(--ov-lb-w-final); }
.ov-lb.final li:first-child{ height:calc(var(--ov-row-h) * 1.5); font-size:var(--ov-fs-2); }
.ov-lb.final li:first-child span:nth-child(2){ position:relative; padding-left:var(--ov-row-h); }
.ov-lb.final li:first-child .mark-box{ position:absolute; left:0; top:0; width:var(--ov-fs-2); height:var(--ov-fs-2); background:transparent; }
/* ============ CONSOLE ============ */
.cs{ height:100%; display:grid; grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r); grid-template-rows:var(--bar-top) minmax(0,1fr); color:var(--text); }
.cs-bar{ grid-column:1 / -1; display:flex; align-items:center; gap:var(--s-5); padding:0 var(--s-5); border-bottom:var(--hair) solid var(--rule); }
.cs-bar .room{ font:var(--fs-4)/var(--lh-4) var(--font-display); text-transform:uppercase; letter-spacing:var(--track-display); }
.cs-bar .meta{ color:var(--text-2); font-size:var(--fs-1); font-variant-numeric:tabular-nums; }
.cs-bar .end{ margin-left:auto; display:flex; gap:var(--s-3); align-items:center; }
.cs-bar .btn{ min-height:calc(var(--btn-h) - var(--s-2)); }
.cs-rail{ border-right:var(--hair) solid var(--rule); padding:var(--s-4) var(--s-5); display:grid; align-content:start; gap:var(--s-5); min-height:0; overflow:hidden; }
.cs-rail-r{ border-right:0; border-left:var(--hair) solid var(--rule); }
.cs-main{ padding:var(--s-4) var(--s-5); min-height:0; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:var(--s-3); }
.cs-main .label{ display:flex; justify-content:space-between; }
.cs-main .list{ overflow:hidden; align-content:start; }
.cs .q{ grid-template-columns:minmax(0,1fr) var(--q-press-w) auto; padding:var(--s-2) var(--s-2); }
.cs .q .btn{ min-height:calc(var(--btn-h) - var(--s-2)); padding:0 var(--s-3); }
.cs .q:focus-within, .cs .q[data-focus]{ background:var(--field); outline:var(--hair-2) solid var(--ink); outline-offset:calc(-1 * var(--hair-2)); }
.cs .q[data-focus] kbd{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.cs-keys{ display:flex; flex-wrap:wrap; gap:var(--s-4); color:var(--text-2); font-size:var(--fs-1); padding-top:var(--s-2); border-top:var(--hair) solid var(--rule); }
.cs-keys kbd{ margin-left:0; margin-right:var(--s-1); color:var(--text); }
.links{ list-style:none; display:grid; gap:var(--s-2); }
.links li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-2); align-items:center; }
.links .url{ font-size:var(--fs-1); color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.links .url b{ display:block; font-weight:normal; color:var(--text); font-size:var(--fs-2); }
.links .btn{ min-height:calc(var(--target) - var(--s-2)); padding:0 var(--s-3); font-size:var(--fs-1); }
.cs-notices{ display:grid; gap:var(--s-2); }
.cs-notices .notice{ max-width:none; min-height:calc(var(--notice-h) - var(--s-2)); font-size:var(--fs-1); }
.cs-notices .notice b{ font-size:var(--fs-2); }
.cs .lb{ grid-template-columns:var(--s-5) minmax(0,1fr) auto; min-height:calc(var(--target) - var(--s-2)); }
.cs .lb-rank{ font-size:var(--fs-3); }
.cs .lb-lines{ font-size:var(--fs-3); }
/* draft */
.cs.draft{ grid-template-columns:minmax(0,1fr) var(--rail-r); }
.draft-list{ list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-flow:column; grid-template-rows:repeat(15, auto); column-gap:var(--s-6); align-content:start; }
.draft-list li{ display:grid; grid-template-columns:var(--draft-n-w) minmax(0,1fr) var(--draft-count-w); gap:var(--s-2); align-items:baseline; min-height:var(--target); padding:var(--s-1) 0; border-bottom:var(--hair) solid var(--rule); }
.draft-list li.slot-row{ border-bottom:var(--hair) dashed var(--rule); color:var(--text-2); }
.draft-list .n{ font:var(--fs-3)/var(--lh-3) var(--font-display); color:var(--text-2); font-variant-numeric:tabular-nums; }
.draft-list .txt{ font-size:var(--fs-2); line-height:var(--lh-2); }
.draft-list .txt:focus{ outline:none; border-bottom:var(--hair-2) solid var(--ink); }
.draft-list .c{ font-size:var(--fs-1); color:var(--text-2); text-align:right; font-variant-numeric:tabular-nums; }
.draft-list li[data-over] .c{ color:var(--ink); }
.thresholds{ display:grid; gap:var(--s-3); }
.thresholds li{ display:grid; grid-template-columns:var(--s-6) minmax(0,1fr) auto; gap:var(--s-3); align-items:baseline; list-style:none; color:var(--text-2); font-size:var(--fs-1); }
.thresholds li b{ font:var(--fs-4)/var(--lh-4) var(--font-display); color:var(--text-2); font-variant-numeric:tabular-nums; }
.thresholds li[data-met] b{ color:var(--ink); }
.thresholds li[data-met]{ color:var(--text); }
.thresholds .q-bar{ align-self:center; }

/* ============ LANDING ============ */
.ld{ height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); color:var(--text); }
.ld-brand{ display:grid; align-content:end; padding:var(--s-7); border-right:var(--hair) solid var(--rule); }
.ld-doors{ display:grid; grid-template-rows:1fr 1fr; }
.door{ display:grid; align-content:center; gap:var(--s-4); padding:var(--s-7); }
.door + .door{ border-top:var(--hair) solid var(--rule); }
.door h2{ font:var(--fs-5)/var(--lh-5) var(--font-display); text-transform:uppercase; letter-spacing:var(--track-display); font-weight:normal; }
.door p{ color:var(--text-2); max-width:var(--measure); }
.door .field{ max-width:none; }
.door-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-4); align-items:end; }
.ld.m{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
.ld.m .ld-brand{ border-right:0; padding:var(--s-5); }
.ld.m .ld-doors{ grid-template-rows:auto auto; }
.ld.m .door{ padding:var(--s-5); }
.ld.m .door-row{ grid-template-columns:minmax(0,1fr); }
.ld.m .btn-primary, .ld.m .door .btn{ justify-content:center; }
.ld small{ color:var(--text-2); font-size:var(--fs-1); }

/* skeleton comparison (index) */

/* ============ FENÊTRES RÉELLES (ajout produit) ============
   Le designer a composé dans des cadres fixes : 360x800 pour le joueur,
   1440x900 pour la console et l'accueil. Ici les mêmes squelettes sont
   posés sur la fenêtre du visiteur. L'overlay reste fixe : c'est une
   source navigateur OBS de 1920x1080, pas une page. */

html, body { height:100%; }
body.surface { min-height:100dvh; display:grid; }
.hidden { display:none !important; }

/* --- joueur : une colonne de téléphone, centrée si l'écran est large --- */
body.s-player { background-image:var(--paper); }
body.s-player .pl { width:100%; max-width:var(--player-max); margin:0 auto;
  height:100dvh; background:var(--ground); }
:root { --player-max: 440px; }
@media (min-width:520px){
  body.s-player .pl { border-left:var(--hair) solid var(--rule); border-right:var(--hair) solid var(--rule); }
}
.pl-body { overflow-y:auto; overscroll-behavior:contain; }
.pl-sheet { min-height:0; }
.pl-tl, .pl-lb { overflow-y:auto; }

/* --- console : les deux rails se replient quand la fenêtre rétrécit --- */
body.s-console .cs { height:100dvh; }
@media (max-width:1180px){
  body.s-console .cs { grid-template-columns:minmax(0,1fr) var(--rail-r); }
  body.s-console .cs-rail:not(.cs-rail-r) { display:none; }
  body.s-console .cs.draft { grid-template-columns:minmax(0,1fr) var(--rail-r); }
}
@media (max-width:820px){
  body.s-console .cs, body.s-console .cs.draft {
    grid-template-columns:minmax(0,1fr); grid-template-rows:var(--bar-top) minmax(0,1fr) auto; height:auto; min-height:100dvh; }
  body.s-console .cs-rail-r { border-left:0; border-top:var(--hair) solid var(--rule); }
  body.s-console .cs-main { overflow:visible; }
  .cs-bar { flex-wrap:wrap; padding:var(--s-2) var(--s-4); gap:var(--s-3); }
  .cs .q { grid-template-columns:minmax(0,1fr); gap:var(--s-2); }
  .cs-keys { display:none; }
  .draft-list { grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-template-rows:none; }
}
.cs-main .list, .cs-rail { overflow-y:auto; }

/* --- accueil : le pli du designer, déclenché par la fenêtre --- */
body.s-landing .ld { min-height:100dvh; }
@media (max-width:900px){
  body.s-landing .ld { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  body.s-landing .ld-brand { border-right:0; padding:var(--s-5); }
  body.s-landing .ld-doors { grid-template-rows:auto auto; }
  body.s-landing .door { padding:var(--s-5); }
  body.s-landing .door-row { grid-template-columns:minmax(0,1fr); }
  body.s-landing .btn-primary, body.s-landing .door .btn { justify-content:center; }
}

/* Le pavé du logo est calibré pour un cadre de 1440 figé, et il y débordait
   déjà : mesuré sur la police, CARTON en capitales avec son interlettrage et
   le blot qui dépasse occupe 3,16 fois la taille de police. À 240px il réclame
   757px dans une colonne qui en offre 592, et il passait par-dessus les deux
   portes. Ici il se règle sur la largeur réelle de sa colonne, sans jamais
   dépasser la taille voulue par le dessin. */
.ld-brand { container-type:inline-size; overflow:hidden; }
.ld-brand .wm.l { font-size:min(var(--fs-8), 31cqi); }

/* --- overlay : source OBS, dimensions figées, fond transparent ---
   La racine porte le fond du site : sans cette règle, OBS composite une page
   opaque et l'overlay masque le direct au lieu de s'y poser. */
html:has(body.s-overlay) { background:transparent; }
body.s-overlay { background:none; background-image:none; width:var(--ov-w); height:var(--ov-h); overflow:hidden; }

/* --- le studio du streamer : sa page entière une fois connecté --- */
.studio { display:grid; grid-template-rows:var(--bar-top) minmax(0,1fr); min-height:100dvh; }
.st-bar .wm-line { font-size:var(--fs-3); }
.st-bar .meta { color:var(--text); }
.st-corps { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-6);
  padding:var(--s-7) var(--s-5) var(--s-8); max-width:var(--page-max); margin:0 auto; width:100%; }
@media (min-width:900px){ .st-corps { grid-template-columns:minmax(0,1fr) var(--rail-r); gap:var(--s-8); } }
.st-neuf { display:grid; gap:var(--s-4); align-content:start; max-width:var(--measure); }
.st-neuf h2 { font:var(--fs-6)/var(--lh-6) var(--font-display); text-transform:uppercase;
  letter-spacing:var(--track-display); font-weight:normal; }
.st-neuf p { color:var(--text-2); text-wrap:pretty; }
.st-neuf .field { max-width:none; }
.st-neuf .btn-primary { justify-self:start; }
.st-rail { display:grid; gap:var(--s-6); align-content:start; }
@media (min-width:900px){ .st-rail { border-left:var(--hair) solid var(--rule); padding-left:var(--s-6); } }
.rows { list-style:none; display:grid; }
.rows li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3);
  align-items:baseline; min-height:var(--target); padding:var(--s-2) 0;
  border-bottom:var(--hair) solid var(--rule); }
.rows a { text-decoration:none; }
.rows .n { color:var(--text-2); font-size:var(--fs-1); font-variant-numeric:tabular-nums; }
.rows.empty { color:var(--text-2); font-size:var(--fs-2); }
.chips { display:flex; flex-wrap:wrap; gap:var(--s-2); }
.chips .btn { min-height:var(--target); font-size:var(--fs-2); padding:0 var(--s-3); }
.err { color:var(--ink); font-size:var(--fs-2); min-height:var(--lh-2); }
kbd { font:var(--fs-1)/1 var(--font-text); border:var(--hair) solid var(--rule);
  padding:2px var(--s-1); background:var(--field); }

/* --- la case est un bouton : le designer l'a dessinée, il faut la rendre pressable --- */
button.cell { border:0; font:inherit; text-align:left; cursor:pointer; color:inherit; }
button.cell:disabled { cursor:default; }
button.cell:focus-visible { outline:var(--hair-2) solid var(--ink); outline-offset:calc(-1 * var(--hair-2)); }

/* --- pied de page joueur : la bande de notice occupe toute la largeur --- */
.pl-foot .notice { width:100%; }

/* --- la présentation, sous les deux portes --- */
.pitch { border-top:var(--hair) solid var(--rule); }
.pit { max-width:var(--page-max); margin:0 auto; padding:var(--s-7) var(--s-5);
  border-bottom:var(--hair) solid var(--rule); display:grid; gap:var(--s-5); }
.pit > h2 { font:var(--fs-5)/var(--lh-5) var(--font-display); text-transform:uppercase;
  letter-spacing:var(--track-display); font-weight:normal; }
.pit-grid { display:grid; gap:var(--s-5); grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .pit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6); } }
@media (min-width:1100px){ .pit-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pit-grid article { display:grid; gap:var(--s-2); align-content:start;
  border-top:var(--rule-heavy) solid var(--ink); padding-top:var(--s-3); }
.pit-grid b { font:var(--fs-5)/var(--lh-5) var(--font-display); color:var(--ink); font-weight:normal; }
.pit-grid h3 { font-size:var(--fs-3); line-height:var(--lh-3); font-weight:normal; }
.pit-grid p { color:var(--text-2); font-size:var(--fs-2); line-height:var(--lh-2); text-wrap:pretty; }
.pit-pied { max-width:var(--page-max); margin:0 auto; padding:var(--s-6) var(--s-5) var(--s-7);
  display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:baseline; justify-content:space-between; }
.pit-pied p { color:var(--text-2); font-size:var(--fs-1); }

/* ── La règle, dite au joueur ──────────────────────────────────────────
   L'écran de jeu était muet : rien ne disait qu'on touche une case pour
   signaler, ni que rien ne se marque avant la décision du streamer. */
.regle{ margin:0; padding:0 0 0 var(--s-5); display:grid; gap:var(--s-2);
  font-size:var(--fs-2); line-height:var(--lh-2); color:var(--text-2); }
.regle li::marker{ color:var(--ink); font-variant-numeric:tabular-nums; }
.regle b{ color:var(--text); }
.pl-aide{ margin-left:auto; min-height:var(--target); font-size:var(--fs-1);
  text-transform:uppercase; letter-spacing:var(--track-caps); }
.regle-panneau{ display:grid; gap:var(--s-3); padding:var(--s-4);
  background:var(--raised); border-left:var(--rule-heavy) solid var(--ink); }
.regle-panneau .label{ margin:0; }
.legende{ margin:0; padding:0; list-style:none; display:grid; gap:var(--s-2);
  font-size:var(--fs-2); line-height:var(--lh-2); color:var(--text-2); }
.legende li{ display:flex; align-items:center; gap:var(--s-3); }
.lg{ flex:none; width:var(--mark-s); height:var(--mark-s); background:var(--field); position:relative; }
.lg-mine{ box-shadow:inset 0 0 0 var(--rule-heavy) var(--ink); }
.lg-valid{ background:var(--ink); opacity:var(--ink-alpha); }
.lg-rej::after{ content:""; position:absolute; inset:45% 10% auto; height:var(--hair-2); background:var(--ink); }
.coach{ margin-bottom:var(--s-2); }
/* Le corps de l'écran de jeu porte quatre blocs depuis qu'il explique la
   règle : le panneau, le rappel, la grille, puis le feuillet qui défile.
   Avec les deux rangées d'origine, le rappel tombait dans la rangée
   souple et se retrouvait écrasé à quelques pixels, texte compris. */
.pl.jeu .pl-body{ grid-template-rows:auto auto auto minmax(0,1fr); }
.cs-dit{ color:var(--text-2); font-size:var(--fs-1); align-self:center; }
.quiet-note{ color:var(--text-2); font-size:var(--fs-1); line-height:var(--lh-1); margin:0; }
#csConn{ margin-bottom:var(--s-3); }