/* Coque d'application (UX 10 nov. 2026, retour de Hugues : « ça doit vraiment faire application »).
   Chargée après labo.css par chaque jeu qui met class="app" sur <body>.
   - Une manche tient dans un écran : 100dvh, encoches (safe-area), aucun défilement de page pendant le jeu.
   - L'action principale (Valider, Manche suivante, Voir mon score) vit dans le dock, en bas, au pouce : pleine largeur sur téléphone, 56 px.
   - Le résultat d'une manche s'ouvre en feuille au-dessus du dock (.sheet) : il ne pousse jamais le bouton hors de l'écran.
   - Fin de partie : body.is-scroll rend le défilement normal (récapitulatif, partage, crédits en pied de page).
   Structure attendue :
     body.app > .wrap.wrap--game > header.top, main.app__main (> .app__title … .stage …), .dock (> .sheet#res, .dock__bar > .cta), footer.foot */

html:has(body.app:not(.is-scroll)){ height:100%; overflow:hidden; }
body.app:not(.is-scroll){ height:100dvh; min-height:0; overflow:hidden; overscroll-behavior:none; }
.app:not(.is-scroll) .wrap--game{ height:100dvh; display:flex; flex-direction:column; padding-bottom:0; }
.app .top{ height:52px; flex:none; }
.app .app__main{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; position:relative; }
.app:not(.is-scroll) .app__main{ overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; }
/* marge de 4 px pour que les anneaux de focus et de pastille ne soient pas coupés par le cadre qui défile */
.app:not(.is-scroll) .app__main{ margin:0 -4px; padding:0 4px; }
.app:not(.is-scroll) .app__main::-webkit-scrollbar{ display:none; }
.app:not(.is-scroll) .foot{ display:none; }

/* titre compact : nom du jeu et mode sur deux lignes serrées */
.app .app__title{ flex:none; display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0; }
.app .title{ margin:0; font-size:clamp(25px, 7.4vw, 30px); letter-spacing:-.045em; line-height:1.05; }
.app .kicker{ margin:6px 0 0; font-size:13px; }
.app .kicker .tag{ height:22px; font-size:11.5px; }

/* ---------- dock : l'action principale au pouce ---------- */
.dock{ flex:none; position:relative; z-index:20; margin:0 calc(-1 * (var(--gutter) + var(--safe-r))) 0 calc(-1 * (var(--gutter) + var(--safe-l)));
  padding:0 calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); }
.dock__bar{ position:relative; z-index:2; padding:10px 0 calc(12px + var(--safe-b)); background:var(--bg); }
.dock__bar::before{ content:""; position:absolute; left:calc(-1 * (var(--gutter) + var(--safe-l))); right:calc(-1 * (var(--gutter) + var(--safe-r))); bottom:100%; height:18px;
  background:linear-gradient(to top, var(--bg), transparent); pointer-events:none; }
.dock .cta{ height:56px; }
.dock__hint{ margin:0 0 8px; color:var(--fg-3); font-size:12.5px; line-height:1.35; text-align:center; text-wrap:balance; }
.dock__hint:empty{ display:none; }
.dock.is-open .dock__bar{ background:var(--raised); }
.dock.is-open .dock__bar::before{ display:none; }
.dock.is-open .dock__hint{ display:none; }

/* feuille de résultat : s'ouvre au-dessus du dock, recouvre le bas de la scène, défile seule si besoin */
.sheet{ position:absolute; left:0; right:0; bottom:100%; z-index:1; margin:0; max-height:var(--sheet-max, min(64dvh, 520px)); overflow-y:auto; overscroll-behavior:contain;
  padding:18px calc(var(--gutter) + var(--safe-r)) 6px calc(var(--gutter) + var(--safe-l));
  background:var(--raised); border:0; border-top:1px solid var(--line-2); border-radius:26px 26px 0 0;
  box-shadow:0 -18px 40px rgba(0,0,0,.55); scrollbar-width:thin; }
.sheet::before{ content:""; display:block; width:36px; height:4px; margin:-8px auto 12px; border-radius:2px; background:var(--line-3); }
.sheet.is-in{ animation:sheetin .42s var(--ease-out) both; }
@keyframes sheetin{ from{ transform:translateY(28px); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .sheet.is-in{ animation:sheetfade .2s ease both; } @keyframes sheetfade{ from{ opacity:0; } } }

/* petits écrans (375 × 667, 360 × 740) : on resserre */
@media (max-height:760px){
  .app .top{ height:46px; }
  .app .title{ font-size:24px; }
  .app .kicker{ margin-top:4px; }
  .dock__bar{ padding-top:8px; padding-bottom:calc(10px + var(--safe-b)); }
  .dock .cta{ height:52px; }
  .dock__hint{ display:none; }
}

/* ---------- tablette et ordinateur : mêmes principes, centrés ---------- */
@media (min-width:700px){
  .app .title{ font-size:40px; }
  .dock{ margin:0; padding:0; }
  .dock__bar{ display:flex; flex-direction:column; align-items:center; background:transparent; }
  .dock__bar::before{ display:none; }
  .dock .cta{ width:min(100%, 420px); }
  .sheet{ left:50%; right:auto; width:min(100%, 640px); transform:translateX(-50%); bottom:calc(100% - 8px); padding:20px 26px 10px; border:1px solid var(--line-2); border-radius:26px;
    box-shadow:0 24px 60px rgba(0,0,0,.6); }
  .sheet.is-in{ animation:sheetin2 .42s var(--ease-out) both; }
  @keyframes sheetin2{ from{ transform:translate(-50%, 24px); opacity:0; } }
  .sheet::before{ display:none; }
  .dock.is-open .dock__bar{ background:transparent; }
}
@media (min-width:1000px){
  .app .top{ height:64px; }
  .app .title{ font-size:44px; }
}
@media (min-width:700px) and (prefers-reduced-motion:reduce){ .sheet.is-in{ animation:sheetfade .2s ease both; } }

/* ---------- téléphone, refonte du 15 nov. 2026 (Hugues : « tout est trop serré, trop d'infos ; la page doit être une cour
   de récréation ») : une manche = le titre, la question, la scène en grand, la réponse, le bouton. Rien d'autre.
   Gouttière de 20 px, plus d'air entre la barre du haut et le titre, plus de carte dans la carte, plus de surtitres ni
   de descriptions longues (elles restent dans la feuille de résultat). ---------- */
@media (max-width:699px){
  :root{ --gutter:20px; }
  .app .top{ height:60px; }
  .app .app__title, .app .title{ margin-top:10px; }
  .app .title{ font-size:30px; letter-spacing:-.04em; }
  .app .kicker{ margin:10px 0 0; }
  .app .kicker > span:not(.tag), .app .kicker > .tnum{ display:none; }
  .app .hud{ margin:22px 0 14px; }
  .app .qcard{ padding:0; background:none; border:0; box-shadow:none; border-radius:0; }
  .app .qcard::before, .app .qcard::after{ display:none; }
  .app .q__kicker, .app .q__sub, .app .qcard .art, .app .readout__lbl, .app .formula:not(.res .formula), .app .stage__hint{ display:none !important; }
  .app .q{ margin:0 0 16px; padding-right:0 !important; font-size:24px; line-height:1.15; letter-spacing:-.03em; font-weight:500; text-wrap:balance; }
  .app .q__kicker + .q{ margin-top:0; }
  .app .readout{ margin-top:14px; }
  .app .readout__num{ font-size:clamp(40px, 12vw, 52px); letter-spacing:-.045em; }
  .app .nudge button, .app .ctl .iconbtn{ width:48px; height:48px; }
  .dock__hint{ display:none; }
  .dock__bar{ padding-top:14px; }
}
/* la scène d'abord : elle garde au moins un bon tiers de l'écran (billets, piles, cartes) */
@media (max-width:699px){
  .app .cash, .app .zoom{ min-height:96px; }
  /* petit écran (SE) : le titre du jeu cède la place à la scène */
  @media (max-height:700px){ .app .title{ font-size:24px; } .app .kicker{ display:none; } .app .hud{ margin:12px 0 8px; } }
}

/* 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. */
.res__fact, .res__src, .res__cr, .res .formula{ display:none !important; }