/* Labo viral : DA « négatif » (famille Color Guesser / dialed.gg), reprise d'Échelle. Geist, noir, une action blanche par écran. */
:root{
  --bg:#0A0A0A; --raised:#141414; --raised-2:#1C1C1C; --raised-3:#262626;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.24);
  --fg:#FAFAFA; --fg-2:#A6A6A6; --fg-3:#939393; --fg-4:#5C5C5C;
  --ink:#0A0A0A;
  --ok:#30D158; --gold:#FFD23F; --warm:#FF9F0A; --hot:#FF453A; --cool:#64D2FF;
  --u:#FFB020;
  --r-xl:30px; --r-lg:22px; --r-md:16px; --r-pill:999px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.56,.4,1);
  --ease-soft:cubic-bezier(.22,.85,.3,1);
  --ease-exit:cubic-bezier(.5,0,.7,.4);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --gutter:16px;
  color-scheme:dark;
}
@media (min-width:768px){ :root{ --gutter:24px; } }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; background:var(--bg); overscroll-behavior:none; }
body{ margin:0; background:var(--bg); color:var(--fg); min-height:100svh;
  font:400 16px/1.5 Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
a{ color:inherit; }
input{ font:inherit; font-size:16px; color:inherit; }
:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; border-radius:12px; }
.tnum{ font-variant-numeric:tabular-nums; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------- page ---------- */
.wrap{ max-width:560px; margin:0 auto; padding:0 calc(var(--gutter) + var(--safe-r)) calc(40px + var(--safe-b)) calc(var(--gutter) + var(--safe-l)); }
.top{ display:flex; align-items:center; justify-content:space-between; gap:8px; height:64px; padding-top:var(--safe-t); box-sizing:content-box; }
.back{ display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:none; color:var(--fg-2); font-size:15px; font-weight:500; }
.back svg{ width:18px; height:18px; }
.top__end{ display:flex; align-items:center; gap:6px; }
.langs{ display:flex; gap:2px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.chip{ min-width:38px; height:34px; border-radius:var(--r-pill); font-size:13px; font-weight:560; color:var(--fg-2); transition:background-color .22s ease, color .22s ease; }
.chip[aria-pressed="true"]{ background:var(--fg); color:var(--ink); }
.iconbtn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--raised); border:1px solid var(--line); color:var(--fg); transition:transform .16s var(--ease-out), background-color .22s ease; }
.iconbtn svg{ width:18px; height:18px; }
.iconbtn:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .iconbtn:hover{ background:var(--raised-2); } .chip[aria-pressed="false"]:hover{ color:var(--fg); } }

.title{ margin:8px 0 0; font-size:clamp(40px, 12vw, 56px); font-weight:500; letter-spacing:-.055em; line-height:.92; }
.kicker{ margin:10px 0 0; color:var(--fg-3); font-size:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tag{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--r-pill); background:var(--raised-2); border:1px solid var(--line); color:var(--fg-2); font-size:12px; font-weight:560; letter-spacing:.01em; }
.tag--u{ background:var(--u); color:var(--ink); border-color:transparent; }
.lead{ margin:14px 0 0; color:var(--fg-2); font-size:16px; line-height:1.45; max-width:42ch; }

.card{ background:var(--raised); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }

/* bouton principal : blanc, une seule action par écran */
.cta{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:56px; border-radius:var(--r-pill);
  background:var(--fg); color:var(--ink); font-weight:600; font-size:17px; letter-spacing:-.01em;
  transition:transform .16s var(--ease-out), opacity .2s ease; }
.cta:active{ transform:scale(.97); }
.cta[disabled]{ opacity:.35; pointer-events:none; }
.cta svg{ width:18px; height:18px; }
.ghost{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:52px; border-radius:var(--r-pill);
  background:var(--raised); border:1px solid var(--line-2); color:var(--fg); font-weight:560; font-size:16px; transition:transform .16s var(--ease-out), background-color .2s ease; }
.ghost:active{ transform:scale(.97); }
.ghost svg{ width:18px; height:18px; }
@media (hover:hover) and (pointer:fine){ .ghost:hover{ background:var(--raised-2); } }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stack{ display:grid; gap:10px; }

.src{ color:var(--fg-3); font-size:13px; }
.src a{ color:var(--fg-2); text-underline-offset:3px; word-break:break-word; }
.foot{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); color:var(--fg-4); font-size:12px; line-height:1.5; }
.foot a{ color:var(--fg-3); }

.toast{ position:fixed; left:50%; top:calc(12px + var(--safe-t)); z-index:50; transform:translate(-50%, -160%); opacity:0; background:var(--fg); color:var(--ink); font-weight:560; font-size:15px; padding:10px 18px; border-radius:var(--r-pill); pointer-events:none;
  transition:transform .2s var(--ease-exit), opacity .15s ease; }
.toast.is-on{ transform:translate(-50%, 0); opacity:1; transition:transform .34s var(--ease-out), opacity .2s ease; }

.rise{ animation:rise .5s var(--ease-soft) both; animation-delay:calc(var(--i,0) * 50ms); }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } }
@media (prefers-reduced-motion:reduce){ .rise{ animation:fade .3s ease both; } @keyframes fade{ from{ opacity:0; } } }

/* fin de partie */
.end{ margin-top:22px; padding:22px; }
.end__label{ margin:0; color:var(--fg-3); font-size:13px; }
.end__big{ margin:4px 0 0; font-size:clamp(48px, 15vw, 72px); font-weight:500; letter-spacing:-.06em; line-height:.9; font-variant-numeric:tabular-nums; }
.end__big small{ display:block; margin-top:8px; font-size:16px; font-weight:400; color:var(--fg-3); letter-spacing:-.01em; }
.end__verdict{ margin:12px 0 0; font-size:18px; font-weight:500; letter-spacing:-.02em; }
.end__note{ margin:8px 0 0; color:var(--fg-2); font-size:15px; }
.end__grid{ margin:16px 0 0; font-size:22px; letter-spacing:2px; line-height:1.35; white-space:pre; }
.end .stack{ margin-top:20px; }
.next{ margin:14px 0 0; text-align:center; color:var(--fg-3); font-size:13px; }
.bulle{ position:fixed; left:0; top:0; z-index:40; pointer-events:none; white-space:nowrap; contain:layout style; will-change:transform; }
.bulle__in{
  position:relative; padding:10px 18px 11px; border-radius:20px; background:#fff; color:var(--ink); text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
  opacity:0; transform:scale(.86); transition:transform .16s var(--ease-out), opacity .12s ease;
}
.bulle.is-on .bulle__in{ opacity:1; transform:none; }
.bulle.is-on.is-settled .bulle__in{ transform:scale(.82); transition:transform .26s var(--ease-out), opacity .12s ease; }
.bulle.is-away .bulle__in{ opacity:0; }
.bulle__main{ margin:0; font:600 clamp(40px, 11vw, 52px)/1 Geist, ui-sans-serif, system-ui, sans-serif; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.bulle__unit{ margin-left:.14em; font-size:.5em; font-weight:560; letter-spacing:-.02em; color:#5C5C5C; }
.bulle__sub{ margin:4px 0 0; font:560 15px/1.2 Geist, ui-sans-serif, system-ui, sans-serif; letter-spacing:-.01em; color:#3D3D3D; font-variant-numeric:tabular-nums; }
.bulle__tail{ position:absolute; left:0; bottom:-7px; width:16px; height:8px; background:#fff; clip-path:polygon(0 0, 100% 0, 50% 100%); }
.bulle[data-place="down"] .bulle__tail{ bottom:auto; top:-7px; clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.bulle[data-place="side"] .bulle__tail{ display:none; }
.bulle-live{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
@media (prefers-reduced-motion:reduce){
  .bulle__in, .bulle.is-on.is-settled .bulle__in{ transition:opacity .12s linear !important; }
}
@media (prefers-contrast:more){ .bulle__in{ box-shadow:0 0 0 2px #000, 0 12px 32px rgba(0,0,0,.6); } }

/* ---------- fête : halo et paillettes (fete.js), couche fixe au-dessus de tout, sans clic ---------- */
.fete{ position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden; contain:strict; }
.fete__glow{ position:absolute; border-radius:50%; opacity:0; will-change:transform, opacity;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 18%, transparent) 55%, transparent); mix-blend-mode:screen; }
.fete__bit{ position:absolute; left:0; top:0; width:5px; height:9px; border-radius:2px; opacity:0; will-change:transform, opacity; }
.fete__bit--dot{ width:4px; height:4px; border-radius:50%; }

/* ---------- tablette et ordinateur (11 nov. 2026) ----------
   Chaque jeu met .wrap--game sur son .wrap. Tablette portrait (≥ 700 px) : colonne plus large, texte plus grand.
   Ordinateur et tablette paysage (≥ 1000 px) : 1 200 px de large ; chaque jeu range ses blocs en deux colonnes (grille dans sa page). */
@media (min-width:700px){
  .wrap--game{ max-width:720px; }
  .wrap--game .title{ font-size:60px; }
}
@media (min-width:1000px){
  .wrap--game{ max-width:1200px; }
  .wrap--game .top{ height:72px; }
  .wrap--game .title{ font-size:64px; }
  .wrap--game .foot{ margin-top:56px; }
  /* fin de partie avec récapitulatif : carte large, récap à droite */
  .wrap--game .end:has(> .recap){ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:44px; align-content:start; padding:32px 36px; }
  .wrap--game .end:has(> .recap) > *{ grid-column:1; }
  .wrap--game .end:has(> .recap) > .recap{ grid-column:2; grid-row:1 / span 20; align-self:start; margin-top:4px; }
}
@media (min-width:1600px) and (min-height:900px){ .wrap--game{ max-width:1400px; } }
/* pistes : le pouce prend la couleur du jeu quand la piste a le focus clavier */
[role="slider"]:focus-visible{ outline:2px solid color-mix(in srgb, var(--fg) 55%, transparent); outline-offset:6px; }
/* souris : la main ouverte sur ce qu'on peut glisser, fermée pendant le geste */
@media (hover:hover) and (pointer:fine){
  .cta:hover{ background:#fff; }
  .cta:not([disabled]):hover{ box-shadow:0 0 0 4px rgba(255,255,255,.12); }
  .is-grab{ cursor:grab; }
  .is-grab.is-drag, .is-grab:active{ cursor:grabbing; }
}
.cta{ transition:transform .16s var(--ease-out), opacity .2s ease, box-shadow .2s ease; }
.kbd{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:6px; border:1px solid var(--line-3); background:var(--raised-2); color:var(--fg-2); font-size:12px; font-weight:560; font-variant-numeric:tabular-nums; line-height:1; }
/* les aides clavier ne s'affichent qu'avec une souris */
.only-mouse{ display:none; }
@media (hover:hover) and (pointer:fine){ .only-mouse{ display:revert; } .only-touch{ display:none; } }

/* 12 nov. 2026 (Labo) : même en-tête que les autres jeux, retour + son. Le Labo est en français ; ?lang=en ou ?lang=pt reste possible. */
.langs{ display:none; }
.top .back{ min-height:44px; }