/* Labo : feuille commune des prototypes. Base copiée d'Échelle (DA « négatif », famille Color Guesser / dialed.gg) :
   Geist, noir, une action blanche par écran. Ajouts propres au Labo en fin de fichier. */
: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;
  --ref:#8A8A8A;          /* silhouette de référence */
  --u:#FFB020;            /* couleur du pack (posée par JS) */
  --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);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --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); }
body{
  margin:0; background:var(--bg); color:var(--fg);
  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; }
:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; border-radius:12px; }
.tnum{ font-variant-numeric:tabular-nums; }
.skip{ position:absolute; left:-999px; top:8px; z-index:10; background:var(--fg); color:var(--ink); padding:10px 16px; border-radius:var(--r-pill); }
.skip:focus{ left:16px; }

/* ---------- icônes : Phosphor (MIT), fichiers SVG par référence, teinte = currentColor ---------- */
.ico{ display:inline-block; width:20px; height:20px; flex:none; background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
.ico--x{ --i:url(icons/x.svg); }
.ico--plus{ --i:url(icons/plus.svg); }
.ico--minus{ --i:url(icons/minus.svg); }
.ico--arrow{ --i:url(icons/arrow-right.svg); width:18px; height:18px; }
.ico--share{ --i:url(icons/share-network.svg); width:18px; height:18px; }
.ico--replay{ --i:url(icons/arrow-counter-clockwise.svg); width:18px; height:18px; }
.ico--sound{ --i:url(icons/speaker-high.svg); }
[aria-pressed="false"] > .ico--sound{ --i:url(icons/speaker-slash.svg); }
.ico--vert{ --i:url(icons/arrows-vertical.svg); width:18px; height:18px; }
.ico--horiz{ --i:url(icons/arrows-horizontal.svg); width:18px; height:18px; }
.ico--back{ --i:url(icons/arrow-left.svg); width:18px; height:18px; }
.ico--out{ --i:url(icons/arrow-up-right.svg); width:14px; height:14px; }

/* ---------- écrans ---------- */
.app{ min-height:100svh; }
.screen{ padding:calc(var(--safe-t)) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.screen.is-enter{ animation:screenIn .34s var(--ease-out) both; }
.screen.is-enter-back{ animation:screenInBack .34s var(--ease-out) both; }
.screen.is-exit{ animation:screenOut .2s var(--ease-exit) both; }
@keyframes screenIn{ from{ opacity:0; transform:translateX(24px); } }
@keyframes screenInBack{ from{ opacity:0; transform:translateX(-24px); } }
@keyframes screenOut{ to{ opacity:0; transform:translateX(-24px); } }

/* ---------- barre du haut (accueil) ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1180px; margin:0 auto; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:560; font-size:18px; letter-spacing:-.02em; min-height:44px; }
.topbar__end{ display:flex; align-items:center; gap:8px; }
.langs{ display:flex; gap:2px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.chip{ min-width:40px; height:36px; border-radius:var(--r-pill); font-size:14px; 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:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--raised); border:1px solid var(--line); color:var(--fg); transition:transform .34s var(--ease-out), background-color .22s ease; }
.iconbtn:active{ transform:scale(.94); transition-duration:.1s; }
@media (hover:hover) and (pointer:fine){ .iconbtn:hover{ background:var(--raised-2); } .chip[aria-pressed="false"]:hover{ color:var(--fg); } }

/* ---------- accueil ---------- */
.home__hero{ max-width:1180px; margin:0 auto; padding:24px 0 8px; }
.hero{ margin:0; display:flex; flex-direction:column; gap:14px; }
.hero__word{ font-size:clamp(76px, 19vw, 188px); font-weight:500; letter-spacing:-.06em; line-height:.86; margin-left:-.04em; }
.hero__sub{ font-size:clamp(22px, 3.2vw, 34px); font-weight:500; letter-spacing:-.035em; line-height:1.08; color:var(--fg); max-width:18ch; }
.lead{ margin:18px 0 0; color:var(--fg-2); font-size:17px; line-height:1.45; max-width:40ch; letter-spacing:-.01em; }
.hero__word, .hero__sub, .home__hero .lead{ animation:rise .62s var(--ease-soft) both; }
.hero__sub{ animation-delay:.06s; } .home__hero .lead{ animation-delay:.12s; }
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } }

.packs{ max-width:1180px; margin:28px auto 0; display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:760px){ .packs{ grid-template-columns:repeat(3,1fr); gap:16px; } }
.pack{
  position:relative; text-align:left; display:grid; grid-template-rows:auto 1fr; overflow:hidden; isolation:isolate;
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .34s var(--ease-out), border-color .22s ease;
  animation:rise .62s var(--ease-soft) both; animation-delay:calc(.18s + var(--i,0) * 60ms);
  min-height:44px;
}
.pack:active{ transform:scale(.98); transition-duration:.1s; }
.pack::before{ content:""; position:absolute; inset:auto -20% -40% -20%; height:70%; z-index:-1;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--u) 22%, transparent), transparent); opacity:.7; transition:opacity .3s ease; }
@media (hover:hover) and (pointer:fine){ .pack:hover{ border-color:color-mix(in srgb, var(--u) 45%, transparent); } .pack:hover::before{ opacity:1; } .pack:hover .pack__go{ transform:translateX(3px); } }
.pack__art{ height:150px; padding:18px 20px 0; display:block; }
.pack__art svg{ width:100%; height:100%; display:block; overflow:visible; }
.pack__body{ padding:16px 20px 20px; display:grid; gap:6px; }
.pack__top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pack__name{ margin:0; font-size:24px; font-weight:500; letter-spacing:-.035em; line-height:1.1; }
.pack__tag{ font-size:12px; font-weight:600; color:var(--ink); background:var(--u); border-radius:var(--r-pill); padding:2px 8px; letter-spacing:.01em; }
.pack__desc{ margin:0; color:var(--fg-2); font-size:15px; line-height:1.45; }
.pack__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.pack__best{ font-size:13px; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.pack__best b{ color:var(--fg); font-weight:560; }
.pack__go{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:var(--r-pill); background:var(--fg); color:var(--ink); font-weight:600; font-size:15px; transition:transform .34s var(--ease-out); }
.pack__go .ico{ width:16px; height:16px; }

/* ---------- texte indexable ---------- */
.seo{ max-width:720px; margin:72px auto 0; color:var(--fg-2); }
.seo h2{ color:var(--fg); font-size:26px; font-weight:500; letter-spacing:-.04em; line-height:1.1; margin:48px 0 14px; }
.seo h2:first-child{ margin-top:0; }
.seo p{ margin:0 0 12px; max-width:65ch; }
.seo strong{ color:var(--fg); font-weight:560; }
.steps{ margin:0; padding-left:22px; display:grid; gap:10px; }
.steps li::marker{ color:var(--fg-3); font-variant-numeric:tabular-nums; }
.faq{ display:grid; gap:8px; }
.faq details{ background:var(--raised); border:1px solid var(--line); border-radius:var(--r-md); padding:0 18px; }
.faq summary{ cursor:pointer; list-style:none; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--fg); font-weight:500; letter-spacing:-.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; width:16px; height:16px; flex:none; background:var(--fg-3); -webkit-mask:url(icons/plus.svg) center/contain no-repeat; mask:url(icons/plus.svg) center/contain no-repeat; transition:transform .34s var(--ease-out); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 16px; }
.faq a{ color:var(--fg); text-underline-offset:3px; text-decoration-color:var(--line-3); }
.foot{ max-width:720px; margin:56px auto 0; padding:24px 0 calc(32px + var(--safe-b)); border-top:1px solid var(--line); color:var(--fg-3); font-size:13px; }
.foot p{ margin:0; }

/* ---------- manche ---------- */
.screen--round, .screen--end{ position:fixed; inset:0; overflow:hidden; display:flex; flex-direction:column; background:var(--bg); }
.screen--end{ overflow-y:auto; overscroll-behavior:contain; }
html.in-game, html.in-game body{ overflow:hidden; overscroll-behavior:none; }
.rbar{ flex:none; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; height:60px; max-width:1180px; width:100%; margin:0 auto; }
.rbar__progress{ display:flex; gap:4px; justify-content:center; }
.rbar__progress i{ width:22px; height:4px; border-radius:2px; background:var(--raised-3); transition:background-color .3s ease, transform .34s var(--ease-out); }
.rbar__progress i.is-done{ background:var(--fg-2); }
.rbar__progress i.is-now{ background:var(--u); transform:scaleX(1.25); }
.rbar__count{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.rbar__total{ margin:0; min-width:44px; text-align:right; font-weight:560; font-size:17px; letter-spacing:-.02em; }
.rbar__end{ display:flex; align-items:center; gap:2px; margin-right:-10px; }
.iconbtn--sm{ background:none; border-color:transparent; color:var(--fg-2); }

.round__body{ flex:1; min-height:0; width:100%; max-width:1180px; margin:0 auto; display:grid; grid-template-rows:auto minmax(200px,1fr) auto; gap:4px; }
.round__body.is-slide-out{ animation:slideOut .22s var(--ease-exit) both; }
.round__body.is-slide-in{ animation:slideIn .42s var(--ease-out) both; }
@keyframes slideOut{ to{ opacity:0; transform:translateX(-32px); } }
@keyframes slideIn{ from{ opacity:0; transform:translateX(40px); } }
@media (min-width:960px){
  .round__body{ grid-template-columns:1fr 380px; grid-template-rows:auto 1fr; column-gap:32px; padding-bottom:24px; }
  .round__q{ grid-column:1 / -1; }
  .panel{ align-self:end; }
}
.round__q{ padding:4px 0 0; }
.q{ margin:0; font-size:clamp(21px, 2.6vw, 30px); font-weight:500; letter-spacing:-.035em; line-height:1.12; max-width:26ch; }
.q__ref{ margin:6px 0 0; font-size:14px; color:var(--fg-3); }
.q__ref b{ color:var(--fg-2); font-weight:500; }

.stage{ position:relative; min-height:0; border-radius:var(--r-xl); background:var(--raised); border:1px solid var(--line); overflow:hidden; touch-action:none; cursor:ns-resize; }
.stage.is-h{ cursor:ew-resize; }
.stage__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* grille technique : mineure très discrète, majeure, puissances de dix un cran plus claires ; règle graduée à gauche */
.grid{ fill:none; stroke-width:1; shape-rendering:crispEdges; }
.grid--minor{ stroke:rgba(255,255,255,.028); }
.grid--major{ stroke:rgba(255,255,255,.065); }
.grid--decade{ stroke:rgba(255,255,255,.12); }
.ruler line{ stroke:var(--line-3); stroke-width:1; shape-rendering:crispEdges; }
.ruler path{ fill:none; stroke-width:1; shape-rendering:crispEdges; }
.ruler__min{ stroke:rgba(255,255,255,.22); }
.ruler__maj{ stroke:rgba(255,255,255,.5); }
.ruler text{ fill:var(--fg-4); font:500 10px Geist, system-ui, sans-serif; font-variant-numeric:tabular-nums; letter-spacing:0; }
.ruler text.is-dec{ fill:var(--fg-2); font-weight:600; }
.ruler text.is-unit{ fill:var(--fg-3); }
.snap{ transform-box:fill-box; transform-origin:50% 100%; }
.ground{ stroke:var(--line-3); stroke-width:1; shape-rendering:crispEdges; }
.sil--ref{ color:var(--ref); fill:currentColor; }
.sil--target{ color:var(--u); fill:currentColor; }
.sil--ghost{ fill:#fff; }
.sil--truthfill{ fill:#fff; opacity:0; }
.sil--truth{ fill:none; stroke:#fff; stroke-linejoin:round; stroke-linecap:round; }
.sil .shade{ fill:#000; fill-opacity:.22; }
.sil--ghost .shade, .sil--truth .shade, .sil--truthfill .shade{ display:none; }
.idle{ transform-box:fill-box; transform-origin:50% 100%; }
.is-playing .idle{ animation:breathe 3.2s ease-in-out infinite alternate; }
@keyframes breathe{ to{ transform:scaleY(1.012) translateY(-.4%); } }
.chain circle{ fill:none; stroke:rgba(255,255,255,.32); opacity:0; transition:opacity .25s ease; }
.chain circle.is-on{ opacity:1; }
.labels text{ font:600 13px Geist, system-ui, sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.labels .lb-real{ fill:#fff; } .labels .lb-you{ fill:var(--u); } .labels .lb-dist{ fill:var(--fg-2); }
.labels line{ stroke:rgba(255,255,255,.35); stroke-dasharray:3 4; }
.scalebar line{ stroke:var(--fg-3); stroke-width:2; }
.scalebar text{ fill:var(--fg-3); font:500 12px Geist, system-ui, sans-serif; font-variant-numeric:tabular-nums; }

.handle{
  position:absolute; left:0; top:0; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink); z-index:2; will-change:transform; cursor:grab;
}
.handle::before{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--fg); box-shadow:0 0 0 4px color-mix(in srgb, var(--u) 55%, transparent), 0 6px 18px rgba(0,0,0,.5); transition:transform .34s var(--ease-out); }
.handle .ico{ position:relative; width:16px; height:16px; }
.handle.is-grab::before{ transform:scale(1.18); }
.handle.is-grab{ cursor:grabbing; }
.handle[hidden]{ display:none; }
.stage__hint{ position:absolute; left:46px; right:16px; top:12px; margin:0; font-size:13px; color:var(--fg-3); pointer-events:none; transition:opacity .3s ease; }
.stage__hint.is-gone{ opacity:0; }

.burst{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.burst i{ position:absolute; left:0; top:0; width:8px; height:12px; border-radius:2px; will-change:transform, opacity; }

.panel{ display:grid; gap:12px; padding:8px 0 calc(12px + var(--safe-b)); }
.readout{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.readout__name{ margin:0 0 2px; font-size:14px; color:var(--fg-3); }
.readout__num{ margin:0; font-size:clamp(40px, 11vw, 60px); font-weight:500; letter-spacing:-.05em; line-height:.9; }
.readout__num small{ font-size:.42em; color:var(--fg-3); letter-spacing:-.02em; margin-left:.12em; }
.steppers{ display:flex; gap:10px; }
.roundbtn{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--raised-2); border:1px solid var(--line-2); transition:transform .34s var(--ease-out), background-color .22s ease; }
.roundbtn:active{ transform:scale(.92); transition-duration:.1s; background:var(--raised-3); }
.cta{
  height:56px; width:100%; border-radius:var(--r-pill); background:var(--fg); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:17px; letter-spacing:-.01em;
  transition:transform .34s var(--ease-out);
}
.cta:active{ transform:scale(.97); transition-duration:.1s; }
.cta.is-nudge{ animation:nudge .72s cubic-bezier(.28,1.5,.4,1); }
.cta.is-wait{ background:var(--raised-3); color:var(--fg-3); pointer-events:none; }
.cta.is-wait .ico{ opacity:0; }
/* montée de suspense : les commandes se retirent, la valeur défile */
.steppers{ transition:opacity .2s ease, transform .3s var(--ease-out); }
.is-sus .steppers{ opacity:0; transform:scale(.92); pointer-events:none; }
.is-sus .readout__num{ color:#fff; }
@keyframes nudge{ 30%{ transform:scale(1.035); } }
@media (hover:hover) and (pointer:fine){ .cta:hover .ico{ transform:translateX(3px); } .roundbtn:hover{ background:var(--raised-3); } }
.cta .ico{ transition:transform .34s var(--ease-out); }

/* résultat */
.result{ display:grid; gap:10px; }
.result > *{ animation:rise .5s var(--ease-soft) both; animation-delay:calc(var(--d,0) * 1ms); }
.result__score{ display:grid; grid-template-columns:auto 1fr; align-items:end; column-gap:14px; }
.result__label{ grid-column:1 / -1; margin:0 0 2px; font-size:13px; color:var(--fg-3); }
.result__num{ margin:0; font-size:clamp(52px, 14vw, 76px); font-weight:500; letter-spacing:-.06em; line-height:.84; color:var(--tier, var(--fg)); transition:color .3s ease; }
.result__unit{ font-size:.32em; color:var(--fg-3); letter-spacing:-.02em; margin-left:.1em; }
.verdict{ margin:0 0 6px; font-size:17px; font-weight:500; letter-spacing:-.02em; color:var(--fg); opacity:0; transform:scale(.92); transform-origin:left bottom; }
.verdict.is-on{ opacity:1; transform:none; transition:opacity .2s ease, transform .3s var(--ease-pop); }
.meter{ display:grid; gap:4px; }
.meter__axis{ position:relative; height:14px; }
.meter__axis::before{ content:""; position:absolute; left:0; right:0; top:6px; height:2px; background:linear-gradient(90deg, var(--raised-3), var(--fg-4) 50%, var(--raised-3)); border-radius:1px; }
.meter__zone{ position:absolute; left:calc(50% - 2.5%); width:5%; top:3px; height:8px; border-radius:4px; background:color-mix(in srgb, var(--gold) 70%, transparent); }
.meter__mark{ position:absolute; top:0; left:0; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--tier, var(--fg)); box-shadow:0 0 0 3px var(--bg); transform:translateX(var(--x, 0px)); transition:transform .9s cubic-bezier(.24,1.1,.28,1); }
.meter__labels{ display:flex; justify-content:space-between; font-size:12px; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.compare{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.compare div{ background:var(--raised); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 14px; }
.compare dt{ font-size:12px; color:var(--fg-3); }
.compare dd{ margin:0; font-size:20px; font-weight:560; letter-spacing:-.03em; }
.compare div:first-child dd{ color:var(--u); }
.fact{ margin:0; font-size:15px; line-height:1.45; color:var(--fg-2); }
.src{ margin:0; font-size:12px; color:var(--fg-3); }
.src a{ color:var(--fg-2); text-underline-offset:3px; text-decoration-color:var(--line-3); }

@media (max-width:959px){
  .round__body.is-reveal{ grid-template-rows:auto minmax(170px,1fr) auto; }
  .is-reveal .fact{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
}
@media (max-width:959px) and (max-height:800px){
  .is-reveal .compare{ display:none; }
  .is-reveal .result__score{ grid-template-columns:auto 1fr; }
}

/* ---------- fin ---------- */
.end{ width:100%; max-width:640px; margin:0 auto; padding:8px 0 calc(24px + var(--safe-b)); display:grid; gap:4px; }
.end > *{ animation:rise .62s var(--ease-soft) both; animation-delay:calc(var(--i,0) * 60ms); }
.end__pack{ margin:0; color:var(--fg-3); font-size:14px; }
.end__title{ margin:0; font-size:clamp(34px, 6vw, 48px); font-weight:500; letter-spacing:-.04em; line-height:1; }
.end__total{ margin:16px 0 0; font-size:clamp(96px, 28vw, 180px); font-weight:500; letter-spacing:-.065em; line-height:.82; }
.end__max{ font-size:.26em; color:var(--fg-3); letter-spacing:-.02em; margin-left:.08em; }
.end__verdict{ margin:10px 0 0; font-size:19px; color:var(--fg); letter-spacing:-.02em; }
.badge{ justify-self:start; margin:8px 0 0; font-size:13px; font-weight:600; color:var(--ink); background:var(--gold); border-radius:var(--r-pill); padding:4px 10px; }
.tiles{ list-style:none; margin:20px 0 8px; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.tiles.is-one{ grid-template-columns:minmax(0,200px); }
.tile{ background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:10px 8px 10px; display:grid; gap:6px; justify-items:center; text-align:center;
  animation:tileIn .62s cubic-bezier(.24,1.1,.28,1) both; animation-delay:calc(.25s + var(--i,0) * 70ms); }
@keyframes tileIn{ from{ opacity:0; transform:translateY(18px) scale(.94); } }
.tile svg{ width:100%; height:56px; display:block; color:var(--u); fill:currentColor; overflow:visible; }
.tile__score{ font-size:22px; font-weight:560; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--tier, var(--fg)); line-height:1; }
.tile__name{ font-size:11px; color:var(--fg-3); line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.4em; }
.end__actions{ display:grid; gap:10px; margin-top:12px; }
.end__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ghost{ height:52px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--raised); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:560; font-size:15px; transition:transform .34s var(--ease-out), background-color .22s ease; }
.ghost:active{ transform:scale(.97); transition-duration:.1s; }
@media (hover:hover) and (pointer:fine){ .ghost:hover{ background:var(--raised-2); } }

/* ---------- toast ---------- */
.toast{ position:fixed; left:50%; top:calc(12px + var(--safe-t)); z-index:20; 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; }
.toast{ 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; }

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.15s !important; animation-delay:0s !important; transition-duration:.15s !important; }
  .is-playing .idle{ animation:none; }
  .hero__word, .hero__sub, .home__hero .lead, .pack, .end > *, .tile, .result > *{ animation-name:fade !important; }
  .screen.is-enter, .screen.is-enter-back, .round__body.is-slide-in{ animation-name:fade !important; }
  .screen.is-exit, .round__body.is-slide-out{ animation-name:fadeOut !important; }
  .verdict.is-on{ transform:none; }
  .meter__mark{ transition:none; }
}
@keyframes fade{ from{ opacity:0; } }
@keyframes fadeOut{ to{ opacity:0; } }
@media (prefers-contrast:more){ :root{ --fg-2:#C8C8C8; --fg-3:#B4B4B4; --line:rgba(255,255,255,.2); --ref:#B0B0B0; } }

/* ---------- crédits ---------- */
.foot a{ color:var(--fg-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-3); }
.foot a:hover{ color:var(--fg); }
.foot__links{ margin-top:10px !important; }
.page-credits{ overflow:auto; }
.credits{ max-width:1080px; margin:0 auto; padding:0 20px calc(64px + var(--safe-b, 0px)); }
.credits__back{ padding:0 18px; height:44px; text-decoration:none; font-size:14px; }
.credits__title{ font-size:clamp(48px, 9vw, 96px); font-weight:500; letter-spacing:-.06em; line-height:.95; margin:40px 0 0; }
.credits .lead{ max-width:62ch; }
.credits__note{ color:var(--fg-3); font-size:14px; line-height:1.5; max-width:70ch; margin:14px 0 0; }
.credits__note a, .cr a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-3); }
.credits__note a:hover, .cr a:hover{ color:var(--fg); }
.credits code{ font-size:.92em; color:var(--fg-2); }
.credits h2{ font-size:26px; font-weight:500; letter-spacing:-.04em; margin:56px 0 16px; }
.cr-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--raised); }
.cr{ width:100%; min-width:760px; border-collapse:collapse; font-size:14px; line-height:1.4; }
.cr th, .cr td{ text-align:left; vertical-align:top; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--fg-2); }
.cr thead th{ color:var(--fg-3); font-weight:500; font-size:12px; letter-spacing:.02em; white-space:nowrap; }
.cr tbody th{ color:var(--fg); font-weight:560; white-space:nowrap; }
.cr tbody tr:last-child th, .cr tbody tr:last-child td{ border-bottom:0; }
.cr td:nth-child(4){ white-space:nowrap; }

/* ---------- bulle : la valeur en direct, au-dessus du point qu'on déplace (bulle.js) ---------- */
.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%; }

/* =================== Ajouts Labo =================== */
html{ overscroll-behavior:none; }
button, a, [role="button"]{ touch-action:manipulation; }
button, .cta, .ghost, .chip, .iconbtn{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.proto{ font-size:12px; font-weight:600; color:var(--fg-3); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px 10px; letter-spacing:.01em; }
.brand .ico{ width:18px; height:18px; color:var(--fg-2); }

/* intro d'un jeu */
.screen--intro{ min-height:100svh; display:flex; flex-direction:column; }
.intro{ flex:1; width:100%; max-width:640px; margin:0 auto; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:24px 0 calc(40px + var(--safe-b)); }
.intro > *{ animation:rise .62s var(--ease-soft) both; }
.intro > *:nth-child(2){ animation-delay:.05s; } .intro > *:nth-child(3){ animation-delay:.1s; } .intro > *:nth-child(4){ animation-delay:.15s; } .intro > *:nth-child(5){ animation-delay:.2s; }
.intro__k{ margin:0; font-size:14px; color:var(--fg-3); }
.intro__title{ margin:0; font-size:clamp(54px, 15vw, 112px); font-weight:500; letter-spacing:-.06em; line-height:.9; }
.intro__title::after{ content:""; display:block; width:56px; height:6px; border-radius:3px; background:var(--u); margin-top:18px; }
.intro__lead{ margin:0; font-size:19px; line-height:1.4; color:var(--fg); letter-spacing:-.015em; max-width:32ch; }
.intro__how{ margin:0; display:flex; gap:10px; align-items:center; color:var(--fg-2); font-size:15px; }
.intro__how .ico{ color:var(--u); }
.intro__go{ margin-top:14px; }
.intro__best{ margin:0; min-height:20px; font-size:14px; color:var(--fg-3); font-variant-numeric:tabular-nums; }

/* manche */
.q__k{ margin:0 0 4px; font-size:13px; color:var(--fg-3); }
.q__ref b{ color:var(--fg); }
.stage{ cursor:ns-resize; }
.stage__hint{ left:12px; right:auto; top:10px; padding:5px 10px; border-radius:var(--r-pill); background:rgba(10,10,10,.72); color:var(--fg-2); z-index:1; }
.readout__num small{ font-size:.42em; }
.result__num{ display:flex; align-items:baseline; }

/* scènes : textes et traits communs */
.sc-tick{ stroke:rgba(255,255,255,.18); stroke-width:1; shape-rendering:crispEdges; }
.sc-tick--maj{ stroke:rgba(255,255,255,.4); }
.sc-axis{ stroke:rgba(255,255,255,.35); stroke-width:2; stroke-linecap:round; }
.sc-t{ font:500 11px Geist, system-ui, sans-serif; fill:var(--fg-3); font-variant-numeric:tabular-nums; }
.sc-t--b{ font-weight:600; fill:var(--fg-2); }
.sc-l{ font:600 13px Geist, system-ui, sans-serif; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.sc-l--ref{ fill:var(--fg-2); } .sc-l--you{ fill:var(--u); } .sc-l--real{ fill:#fff; } .sc-l--dim{ fill:var(--fg-3); font-weight:500; }
.sc-ref{ color:var(--ref); fill:var(--ref); }
.sc-you{ color:var(--u); fill:var(--u); }
.sc-ghost{ color:#fff; fill:#fff; opacity:.16; }
.sc-truth{ fill:none; stroke:#fff; stroke-width:2; stroke-linejoin:round; }
.sc-dash{ stroke:rgba(255,255,255,.35); stroke-dasharray:3 4; fill:none; }
.sc-ground{ stroke:var(--line-3); stroke-width:1; shape-rendering:crispEdges; }

/* fin */
.screen--end .rbar{ grid-template-columns:44px 1fr 44px; }
.end__title{ font-size:clamp(28px, 5vw, 40px); }
.tile{ padding:14px 6px 12px; }
.tile__score{ font-size:26px; }
.finale{ margin:8px 0 4px; padding:18px 20px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); border-left:3px solid var(--u); }
.finale__k{ margin:0 0 6px; font-size:12px; color:var(--fg-3); letter-spacing:.02em; }
.finale__t{ margin:0; font-size:17px; line-height:1.45; letter-spacing:-.015em; }
.ghost{ text-decoration:none; color:var(--fg); }
.end__credits{ margin:6px 0 0; text-align:center; font-size:13px; }
.end__credits a{ color:var(--fg-3); text-underline-offset:3px; }

/* accueil du labo (hub) */
.hub{ max-width:1180px; margin:0 auto; padding-bottom:calc(48px + var(--safe-b)); }
.hub__hero{ padding:28px 0 8px; }
.hub__title{ margin:0; font-size:clamp(64px, 17vw, 160px); font-weight:500; letter-spacing:-.065em; line-height:.86; margin-left:-.04em; }
.hub__lead{ margin:16px 0 0; color:var(--fg-2); font-size:17px; line-height:1.45; max-width:44ch; }
.games{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:760px){ .games{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (min-width:1100px){ .games{ grid-template-columns:repeat(3,1fr); } }
.game{ display:block; position:relative; overflow:hidden; isolation:isolate; text-decoration:none; color:inherit; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-xl);
  transition:transform .16s var(--ease-out), border-color .22s ease; animation:rise .62s var(--ease-soft) both; animation-delay:calc(.12s + var(--i,0) * 60ms); }
.game:active{ transform:scale(.98); }
.game::before{ content:""; position:absolute; inset:auto -20% -45% -20%; height:70%; z-index:-1; background:radial-gradient(closest-side, color-mix(in srgb, var(--u) 22%, transparent), transparent); opacity:.7; }
@media (hover:hover) and (pointer:fine){ .game:hover{ border-color:color-mix(in srgb, var(--u) 45%, transparent); } .game:hover .pack__go{ transform:translateX(3px); } }
.game__art{ height:132px; padding:18px 20px 0; }
.game__art svg{ width:100%; height:100%; display:block; overflow:visible; }
.game__body{ padding:14px 20px 20px; display:grid; gap:6px; }
.game__n{ font-size:12px; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.game__name{ margin:0; font-size:26px; font-weight:500; letter-spacing:-.04em; line-height:1.05; }
.game__desc{ margin:0; color:var(--fg-2); font-size:15px; line-height:1.45; }
.game__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:12px; }
.game__stat{ font-size:13px; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.game__stat b{ color:var(--fg); font-weight:560; }
.hub__note{ margin:40px 0 0; padding-top:20px; border-top:1px solid var(--line); color:var(--fg-3); font-size:13px; line-height:1.5; max-width:70ch; }
.hub__note a{ color:var(--fg-2); text-underline-offset:3px; }
.sc-real{ fill:#fff; color:#fff; }

/* =====================================================================
   Grands écrans, tablettes et souris (10 nov. 2026)
   Mobile inchangé sous 960 px. Au-dessus : question et scène à gauche, tableau latéral à droite
   (manches, scores, total, réponse, valider, raccourcis). Conteneur qui grandit avec l'écran.
   ===================================================================== */
:root{ --wrap:1180px; --side:clamp(340px, 27vw, 430px); }
@media (min-width:1360px){ :root{ --wrap:1320px; } }
@media (min-width:1600px){ :root{ --wrap:1520px; --gutter:32px; } }
@media (min-width:1880px){ :root{ --wrap:1680px; } }
.topbar, .rbar, .round__body, .hub{ max-width:var(--wrap); }

/* tableau latéral : caché sur mobile et tablette portrait */
.board, .kbd{ display:none; }
.kbd kbd{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; margin:0 2px; border-radius:6px; border:1px solid var(--line-2); border-bottom-width:2px; background:var(--raised-2); color:var(--fg-2); font:600 11px/1 Geist, system-ui, sans-serif; }

/* tablette portrait (768 à 959) : scène plus haute, commandes plus aérées */
@media (min-width:700px) and (max-width:959px){
  .round__body{ gap:10px; }
  .q{ font-size:clamp(24px, 3.4vw, 30px); }
  .panel{ grid-template-columns:1fr minmax(220px, 300px); align-items:end; column-gap:20px; }
  .panel > .readout{ grid-column:1; }
  .panel > .result{ grid-column:1 / -1; }
  .panel > .cta{ grid-column:2; grid-row:1; align-self:end; }
  .is-reveal .panel > .cta{ grid-row:auto; grid-column:1 / -1; }
}

@media (min-width:960px){
  .round__body{ grid-template-columns:minmax(0,1fr) var(--side); grid-template-rows:auto minmax(0,1fr); column-gap:clamp(20px, 2.2vw, 36px); row-gap:14px; padding-bottom:calc(20px + var(--safe-b)); }
  .round__body.is-reveal{ grid-template-rows:auto minmax(0,1fr); }
  .round__q{ grid-column:1; grid-row:1; }
  .stage{ grid-column:1; grid-row:2; }
  .panel{ grid-column:2; grid-row:1 / span 2; align-self:stretch; min-height:0; display:flex; flex-direction:column; gap:14px;
    padding:20px 20px 18px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  .panel > .readout, .panel > .result{ margin-top:auto; }
  .board{ display:grid; gap:10px; }
  .board__k{ margin:0; font-size:13px; color:var(--fg-3); }
  .board__rows{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
  .board__rows li{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:32px; padding:0 10px; border-radius:10px; color:var(--fg-4); font-size:14px; }
  .board__rows li span{ font-variant-numeric:tabular-nums; font-size:12px; }
  .board__rows li b{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board__rows li em{ font-style:normal; font-weight:600; font-size:15px; color:var(--tier); }
  .board__rows li.is-done{ color:var(--fg-2); }
  .board__rows li.is-now{ color:var(--fg); background:var(--raised-2); box-shadow:inset 3px 0 0 var(--u); }
  .board__rows li.is-now b{ color:var(--fg-3); font-weight:500; }
  .board__total{ margin:0; display:flex; align-items:baseline; justify-content:space-between; padding:10px 10px 0; border-top:1px solid var(--line); color:var(--fg-3); font-size:13px; }
  .board__total b{ color:var(--fg); font-size:22px; font-weight:560; letter-spacing:-.03em; }
  .board__total small{ font-size:13px; color:var(--fg-3); font-weight:500; margin-left:2px; }
  .panel .readout__num{ font-size:clamp(44px, 4.4vw, 68px); }
  .panel .result__num{ font-size:clamp(56px, 5vw, 80px); }
  .panel .roundbtn{ width:52px; height:52px; }
  .is-reveal .fact{ -webkit-line-clamp:unset; display:block; }
  .rbar__progress{ visibility:hidden; } /* le tableau latéral dit déjà où l'on en est */
  .q{ max-width:34ch; }
}
@media (min-width:960px) and (hover:hover) and (pointer:fine){ .kbd{ display:block; margin:0; font-size:12px; color:var(--fg-3); line-height:1.9; } }
/* tablette paysage et écrans bas : tableau compact pendant la révélation */
@media (min-width:960px) and (max-height:860px){
  .is-reveal .board__k, .is-reveal .compare{ display:none; } /* toi et réel restent écrits sur la scène */
  .panel{ gap:10px; padding:16px; }
  .board__rows li{ min-height:28px; }
}
@media (min-width:1280px){
  .q{ font-size:clamp(28px, 2.3vw, 38px); }
  .q__ref, .q__measure{ font-size:15px; }
  .stage__hint{ font-size:14px; }
  .labels text{ font-size:14px; }
  .ruler text{ font-size:11px; }
}

/* fin de partie : deux colonnes sur grand écran (score à gauche, manches et actions à droite) */
.end__side{ display:contents; }
.end__side > *{ animation:rise .62s var(--ease-soft) both; animation-delay:calc(var(--i,0) * 60ms); }
@media (min-width:1100px){
  .end{ max-width:min(var(--wrap), 1200px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:64px; align-content:center; min-height:calc(100svh - 60px); padding-top:0; }
  .end > *:not(.end__side){ grid-column:1; }
  .end__side{ display:grid; gap:8px; grid-column:2; grid-row:1 / span 6; align-content:center; }
  .end__side > .tiles{ margin-top:0; }
  .end__total{ font-size:clamp(150px, 12vw, 220px); }
}

/* souris : survol, prise, lâcher */
@media (hover:hover) and (pointer:fine){
  .stage{ cursor:grab; }
  .stage.is-h, .stage:not(.is-h){ cursor:grab; }
  .stage.is-drag, .stage.is-drag .handle{ cursor:grabbing; }
  .handle::before{ transition:transform .34s var(--ease-out), box-shadow .22s ease; }
  .handle:hover::before, .stage:hover .handle::before{ transform:scale(1.08); box-shadow:0 0 0 6px color-mix(in srgb, var(--u) 45%, transparent), 0 10px 26px rgba(0,0,0,.55); }
  .handle.is-grab::before{ transform:scale(1.2); box-shadow:0 0 0 7px color-mix(in srgb, var(--u) 60%, transparent), 0 16px 34px rgba(0,0,0,.6); transition:transform .16s var(--ease-out), box-shadow .16s ease; }
  .is-reveal .stage, .is-sus .stage{ cursor:default; }
  .ghost:hover .ico--replay{ transform:rotate(-40deg); }
  .ghost .ico{ transition:transform .34s var(--ease-out); }
  .board__rows li.is-done{ transition:background-color .2s ease; }
}
/* lâcher : la poignée retombe avec un léger rebond */
.handle:not(.is-grab)::before{ transition:transform .42s var(--ease-pop), box-shadow .22s ease; }
.handle:focus-visible{ outline:none; }
.handle:focus-visible::before{ box-shadow:0 0 0 3px var(--bg), 0 0 0 6px var(--fg), 0 6px 18px rgba(0,0,0,.5); }
.cta:focus-visible, .ghost:focus-visible, .roundbtn:focus-visible, .iconbtn:focus-visible, .game:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }
.game:focus-visible{ border-radius:var(--r-xl); }
@media (prefers-reduced-motion:reduce){ .handle:not(.is-grab)::before{ transition-timing-function:ease; } }
@media (prefers-reduced-motion:reduce){ .end__side > *{ animation-name:fade !important; } }

/* Labo : écran d'intro et accueil plus amples sur grand écran */
@media (min-width:1100px){
  .intro{ max-width:820px; }
  .intro__lead{ font-size:22px; max-width:36ch; }
  .intro__go{ max-width:360px; }
  .end__side > .finale{ margin-top:8px; }
  .hub__lead{ font-size:19px; }
  .game__art{ height:160px; }
}
@media (min-width:1600px){ .games{ grid-template-columns:repeat(3,1fr); gap:20px; } .game__name{ font-size:30px; } }
@media (hover:hover) and (pointer:fine){ .game .pack__go{ transition:transform .34s var(--ease-out); } }
.stage__hint{ font-size:13px; }
@media (min-width:1280px){ .stage__hint{ font-size:14px; } .sc-t{ font-size:12px; } .sc-l{ font-size:14px; } }
@media (min-width:960px){ .q__k{ display:none; } }
@media (min-width:1100px){ .end__side .tile svg, .end__side .tile img{ height:84px; } .end__side .tile .tile__glyph{ width:64px; height:64px; } .end__side .tile__score{ font-size:28px; } .end__side .tile__name{ font-size:12px; } }
.screen--intro .topbar{ width:100%; }

.q{ text-wrap:balance; }

/* =====================================================================
   App sur téléphone (11 nov. 2026, retour d'Hugues : « que ça fasse vraiment app »)
   Une manche tient dans un écran (100dvh, zones sûres), sans défilement de page, à 390 × 844, 360 × 740
   et 375 × 667. Le bouton principal (Valider, Manche suivante, Voir le résultat) est en bas, pleine largeur,
   sous le pouce. La révélation est compacte ; si elle déborde, seul son texte défile, jamais le bouton.
   ===================================================================== */
.screen--round{ height:100dvh; bottom:auto; }
.stage{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; overscroll-behavior:contain; }
.stage img{ -webkit-touch-callout:none; }
/* rail horizontal des jeux de taille (Microscope, La Terre en boules) */
.sc-rail{ stroke:rgba(255,255,255,.26); stroke-width:4; stroke-linecap:round; }
.sc-rail-t{ font-size:12px; }
.sc-rail-end{ font:600 17px Geist, system-ui, sans-serif; fill:var(--fg-2); }
@media (pointer:coarse){
  .handle{ width:52px; height:52px; margin:-26px 0 0 -26px; }
}
@media (max-width:959px){
  .rbar{ height:52px; }
  .round__body{ grid-template-rows:auto minmax(150px,1fr) auto; gap:10px; }
  .round__body.is-reveal{ grid-template-rows:auto minmax(140px,1fr) auto; }
  .q{ font-size:clamp(20px, 5.6vw, 26px); }
  .q__ref{ font-size:13px; line-height:1.35; margin-top:4px; }
  .panel{ gap:10px; padding:0 0 calc(10px + var(--safe-b)); }
  .readout__num{ font-size:clamp(32px, 9.5vw, 46px); }
  .roundbtn{ width:50px; height:50px; }
  .cta{ min-height:56px; }
  /* révélation compacte : points et verdict sur une ligne, toi / réel côte à côte, le fait en 14 px */
  .result{ gap:8px; max-height:min(44dvh, 340px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
  .result::-webkit-scrollbar{ display:none; }
  .result__score{ grid-template-columns:auto 1fr; align-items:center; }
  .result__label{ display:none; }
  .result__num{ font-size:clamp(42px, 12vw, 56px); }
  .verdict{ margin:0; }
  .is-reveal .compare{ display:grid; }
  .compare div{ padding:7px 12px; border-radius:14px; }
  .compare dt{ font-size:11px; }
  .compare dd{ font-size:17px; line-height:1.2; }
  .compare dd .ep-ago{ margin-top:1px !important; font-size:12px !important; }
  .fact{ font-size:14px; line-height:1.42; }
  .is-reveal .fact{ display:block; -webkit-line-clamp:unset; overflow:visible; }
  .src{ font-size:11px; }
}
/* téléphones bas (iPhone SE, petits Android) : on gagne de la place en haut */
@media (max-width:959px) and (max-height:760px){
  .q__k{ display:none; }
  .round__body.is-reveal .q__ref{ display:none; }
  .rbar{ height:48px; }
  .result{ max-height:min(46dvh, 300px); }
}
@media (max-width:959px) and (max-height:700px){
  .q__ref{ font-size:12px; }
  .readout__name{ display:none; }
  .readout__num{ font-size:34px; }
  .roundbtn{ width:48px; height:48px; }
}

/* fin de partie : « Rejouer » (et « Partager ») dans une barre collée en bas, sous le pouce ; le reste défile au-dessus */
.end__actions{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:12px; }
.end__actions .ghost{ height:56px; padding:0 20px; }
.end__credits{ display:flex; justify-content:center; gap:10px; margin:10px 0 0; }
.end__credits a{ color:var(--fg-3); }
@media (max-width:1099px){
  .end{ padding-bottom:0; display:flex; flex-direction:column; flex:1 0 auto; }
  .end .badge{ align-self:flex-start; }
  .end__credits{ margin-top:auto; padding-top:16px; }
  .end__actions{ position:sticky; bottom:0; z-index:3; order:99; margin:6px calc(-1 * var(--gutter)) 0; padding:18px var(--gutter) calc(12px + var(--safe-b));
    background:linear-gradient(to bottom, rgba(10,10,10,0), var(--bg) 18px); }
}
@media (min-width:1100px){ .end__actions{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
/* jeux à jeton : la consigne passe en bas de la scène, le nom du jeton tenu en main occupe le haut */
.jt-stage .stage__hint, .ep-stage .stage__hint{ top:auto; bottom:10px; }

/* ---------- téléphone, refonte du 15 nov. 2026 (Hugues : « trop serré, trop d'infos, la scène est trop petite ») :
   la question, une ligne de repère au plus, la scène qui prend toute la place, la réponse et le bouton. ---------- */
@media (max-width:699px){
  :root{ --gutter:20px; }
  .topbar{ height:60px; }
  .round__body{ gap:14px; grid-template-rows:auto minmax(260px,1fr) auto; }
  .round__q{ padding:10px 0 0; }
  .q{ font-size:25px; line-height:1.14; letter-spacing:-.03em; }
  .q__ref{ margin-top:8px; font-size:14px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .stage{ border-radius:24px; }
  .readout__name{ display:none; }
}

/* 15 nov. 2026 (Hugues : « trop d info ici, supprime ») : après une manche, plus de phrase d explication ni de source.
   Les sources restent sur la page des crédits. */
.result .fact, .result .src{ display:none !important; }

/* 15 nov. 2026, 2e passe téléphone : la scène montre déjà les bornes et le repère ; plus de ligne de repère ni de bulle d aide */
@media (max-width:699px){ .q__ref{ display:none; } .stage__hint{ display:none !important; } .q{ font-size:27px; } }