/* Shared interface of the games: colour tokens, readable type, 44 px targets, cards that scroll
   inside on small screens. Text size follows the player's setting through html { font-size }. */
:root {
  --nuit: #05070D;
  --panneau: rgba(9, 13, 28, 0.94);
  --texte: #E8EEFF;
  --texte-doux: #A9B4D6;
  --cyan: #4FD1FF;
  --violet: #A58BFF;
  --orange: #FF7634;
  --vert: #5EEA9A;
  --ambre: #FFC94F;
  --rose: #FF6B8A;
  --police-titre: 'Chakra Petch', system-ui, sans-serif;
  --police-texte: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --police-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --rayon: 14px;
}
.carte {
  background: var(--panneau);
  color: var(--texte);
  font-family: var(--police-texte);
  border: 1.5px solid rgba(79, 209, 255, 0.45);
  border-radius: var(--rayon);
  box-shadow: 0 0 0 1px rgba(5, 7, 13, 0.6), 0 0 32px rgba(79, 209, 255, 0.18);
  padding: 1.1rem 1.2rem 1.2rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  line-height: 1.5;
}
.carte h2, .carte h3 { font-family: var(--police-titre); line-height: 1.25; }
.carte :focus-visible, .bouton:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.carte h2:focus { outline: none; }
.cq-entete { margin: 0 0 0.4rem; color: var(--texte-doux); font-size: 0.9rem; letter-spacing: 0.02em; }
.cq-quartier { color: var(--cyan); }
.cq-enonce { margin: 0 0 1rem; font-size: 1.3rem; }
.cq-reponses { display: grid; gap: 0.6rem; }
.cq-reponse {
  display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; width: 100%;
  min-height: 44px; padding: 0.75rem 0.9rem; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 1.05rem; color: var(--texte);
  background: rgba(15, 22, 44, 0.95); border: 1.5px solid rgba(79, 209, 255, 0.4);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cq-reponse:hover:not([disabled]) { border-color: var(--cyan); box-shadow: 0 0 16px rgba(79, 209, 255, 0.3); }
.cq-reponse[disabled] { cursor: default; opacity: 0.6; }
.cq-reponse[aria-pressed="true"] { opacity: 1; border-color: var(--orange); box-shadow: 0 0 16px rgba(255, 118, 52, 0.4); }
/* The answer being read aloud: a lit outline and a speaker icon (the icon says it, not the colour). The focus ring
   stays the orange outline of .carte :focus-visible, so the two never look alike. No animation. */
.cq-reponse.en-lecture { border-color: var(--cyan); background: rgba(79, 209, 255, 0.16); box-shadow: 0 0 0 2px var(--cyan), 0 0 14px rgba(79, 209, 255, 0.35); }
.cq-haut-parleur { flex: none; margin-left: auto; display: inline-grid; place-items: center; color: var(--cyan); visibility: hidden; }
/* The icon is always in the button (its room is reserved); it only shows while the answer is read, so no size changes. */
.cq-reponse.en-lecture .cq-haut-parleur { visibility: visible; }
.cq-lettre {
  flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px;
  font-family: var(--police-titre); font-weight: 700; color: var(--nuit); background: var(--cyan);
}
.cq-aide { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--texte-doux); }
.cv-titre { margin: 0 0 0.6rem; font-size: 1.45rem; display: flex; align-items: center; gap: 0.5rem; }
.cv-icone { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.1rem; color: var(--nuit); }
.cv-titre.cv-bon { color: var(--vert); } .cv-titre.cv-bon .cv-icone { background: var(--vert); }
.cv-titre.cv-incomplet { color: var(--ambre); } .cv-titre.cv-incomplet .cv-icone { background: var(--ambre); }
.cv-titre.cv-piege { color: var(--rose); } .cv-titre.cv-piege .cv-icone { background: var(--rose); }
.cv-verdict.cv-bon { border-color: rgba(94, 234, 154, 0.6); }
.cv-verdict.cv-incomplet { border-color: rgba(255, 201, 79, 0.6); }
.cv-verdict.cv-piege { border-color: rgba(255, 107, 138, 0.6); }
.cv-replique { margin: 0 0 0.6rem; color: var(--violet); font-style: italic; }
.cv-label { color: var(--texte-doux); }
.cv-choix, .cv-pourquoi, .cv-bonne, .cv-consequence { margin: 0 0 0.6rem; }
.cv-retenir { margin: 0.8rem 0; padding: 0.7rem 0.9rem; border-left: 4px solid var(--violet); background: rgba(165, 139, 255, 0.1); border-radius: 0 10px 10px 0; }
.cv-retenir h3 { margin: 0 0 0.2rem; font-size: 1rem; color: var(--violet); }
.cv-retenir p { margin: 0; }
.cv-source { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--texte-doux); }
.cv-source a { color: var(--cyan); }
.cv-actions { display: flex; justify-content: flex-end; margin-top: 1rem; position: sticky; bottom: -1.2rem; padding: 0.6rem 0 0.2rem; background: linear-gradient(transparent, var(--panneau) 35%); }
/* Buttons: the icon (an inline svg) sits before the text and flows with it, so it stays beside its label
   when a large text size wraps the label over several lines. */
.bouton {
  display: inline-block; text-align: center; min-height: 44px; min-width: 44px; padding: 0.65rem 1.3rem; border-radius: 14px; cursor: pointer;
  font: inherit; font-family: var(--police-titre); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
  color: var(--texte); background: rgba(15, 22, 44, 0.85); border: 1.5px solid rgba(79, 209, 255, 0.6);
  transition: box-shadow 0.15s, transform 0.15s, filter 0.15s, background-color 0.15s;
}
.bouton .icone, .bouton-principal .icone { width: 1.25em; height: 1.25em; vertical-align: -0.25em; margin-inline-end: 0.5em; }
.bouton:hover:not([disabled]), .bouton:focus-visible { background: rgba(79, 209, 255, 0.14); box-shadow: 0 0 14px rgba(79, 209, 255, 0.35); }
/* The main button: a soft vertical gradient, a lighter inner top edge, a glow (box-shadow only) on hover and focus. */
.bouton-principal {
  color: var(--nuit); background: linear-gradient(180deg, #FF9A5E 0%, #FF7634 55%, #F2601C 100%); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 10px rgba(255, 118, 52, 0.3);
}
.bouton-principal:hover:not([disabled]), .bouton-principal:focus-visible {
  background: linear-gradient(180deg, #FF9A5E 0%, #FF7634 55%, #F2601C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 118, 52, 0.7);
}
.bouton-principal:hover:not([disabled]) { transform: translateY(-2px); }
/* Pressed state, visible on every button. */
.bouton:active:not([disabled]) { transform: translateY(1px) scale(0.98); filter: brightness(0.88); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45); }
html.moins-de-mouvement .bouton, html.moins-de-mouvement .bouton:hover, html.moins-de-mouvement .bouton:active { transition: none; transform: none; }
.bouton[disabled] { opacity: 0.55; cursor: default; box-shadow: none; }
@media (max-width: 480px) {
  .carte { padding: 0.9rem 0.9rem 1rem; }
  .cq-enonce { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .cq-reponse { transition: none; } }
html.moins-de-mouvement .cq-reponse { transition: none; }

/* Animated figures in an explanation (animation-explication.js). */
.cv-animation { margin: 0.9rem 0; }
.ae { margin: 0; padding: 0.8rem 0.9rem; border-radius: 12px; background: rgba(79, 209, 255, 0.07); border: 1px solid rgba(79, 209, 255, 0.25); }
.ae-legende { margin-top: 0.5rem; font-size: 0.88rem; color: var(--texte-doux); }
.ae-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ae-valeur { margin: 0; font-family: var(--police-titre); font-weight: 700; font-size: 2.2rem; color: var(--cyan); line-height: 1.1; }
.ae-unite { font-size: 1.1rem; color: var(--texte); }
.ae-lignes { display: grid; gap: 0.45rem; }
.ae-ligne { display: grid; grid-template-columns: minmax(4.5rem, auto) 1fr auto; align-items: center; gap: 0.6rem; }
.ae-libelle { font-size: 0.95rem; }
.ae-piste { height: 0.8rem; border-radius: 999px; background: rgba(169, 180, 214, 0.18); overflow: hidden; }
.ae-remplissage { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.ae-apres .ae-remplissage { background: linear-gradient(90deg, var(--orange), #FFC94F); }
.ae-chiffre { font-family: var(--police-titre); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.ae-fil { display: flex; flex-direction: column; gap: 0.4rem; }
.ae-message { margin: 0; max-width: 85%; padding: 0.45rem 0.7rem; border-radius: 12px; font-size: 0.95rem; min-height: 1.6em; opacity: 0; }
.ae-message.ae-visible { opacity: 1; }
.ae-personne { align-self: flex-end; background: rgba(255, 118, 52, 0.18); border: 1px solid rgba(255, 118, 52, 0.5); }
.ae-ia { align-self: flex-start; background: rgba(165, 139, 255, 0.16); border: 1px solid rgba(165, 139, 255, 0.5); }
.ae-etapes { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--violet); display: grid; gap: 0.45rem; }
.ae-etape { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.ae-etape.ae-visible { opacity: 1; transform: none; }
.ae-date { font-family: var(--police-titre); color: var(--cyan); margin-right: 0.3rem; }
html.moins-de-mouvement .ae-etape { transition: none; }

/* Kertredan page. Shared tokens and the question card come from moteur/src/ui/base.css (prepended by the build). */
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-style: normal; font-display: swap; src: url('./fonts/chakra-petch-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-style: normal; font-display: swap; src: url('./fonts/chakra-petch-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-style: normal; font-display: swap; src: url('./fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-style: normal; font-display: swap; src: url('./fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('./fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nuit); color: var(--texte); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; overflow: hidden;
  font-family: var(--police-texte); line-height: 1.5; overflow-wrap: break-word;
  background: radial-gradient(ellipse at 50% 120%, #10183A 0%, var(--nuit) 60%);
}
[hidden] { display: none !important; }
a { color: var(--cyan); }
button { font: inherit; }

.scene { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; }

/* Home */
.accueil {
  position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  padding: max(1.2rem, env(safe-area-inset-top)) 1rem max(3.2rem, env(safe-area-inset-bottom)); text-align: center;
  background: linear-gradient(180deg, rgba(5, 7, 13, 0) 45%, rgba(5, 7, 13, 0.55) 100%);
  overflow-y: auto;
}
.accueil > :first-child { margin-top: auto; }
/* Text sits on a dark panel: the lit city behind never washes it out. */
.accueil-panneau {
  width: min(40rem, 100%); padding: 1.3rem 1.2rem 1.1rem; border-radius: 22px;
  background: rgba(5, 7, 13, 0.82); border: 1px solid rgba(79, 209, 255, 0.28);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.marque { margin: 0; font-family: var(--police-titre); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem; color: var(--texte-doux); }
.titre {
  margin: 0.1rem 0 0; font-family: var(--police-titre); font-weight: 700; line-height: 1;
  font-size: min(clamp(2.8rem, 12vw, 6.5rem), 13vw); letter-spacing: 0.04em; color: #FFFFFF;
  text-shadow: 0 0 8px rgba(79, 209, 255, 0.5);
}
.sous-titre { margin: 0.2rem 0 0.8rem; font-family: var(--police-titre); font-weight: 500; color: var(--cyan); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.95rem; }
.intro { margin: 0 auto 1.2rem; max-width: 34rem; font-size: 1.05rem; color: var(--texte); }
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.accueil .bouton-principal { font-size: 1.2rem; padding: 0.8rem 2.4rem; }
.infos { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--texte-doux); }
.alerte { margin: 1rem auto 0; max-width: 32rem; padding: 0.8rem 1rem; border-radius: 12px; border: 1.5px solid var(--ambre); background: rgba(40, 30, 6, 0.85); color: var(--texte); }

/* Below the buttons and the subtitles, never over "Jouer" or a card's actions. */
.alerte-flottante { position: fixed; z-index: 4; left: 50%; top: calc(max(0.7rem, env(safe-area-inset-top)) + 110px); transform: translateX(-50%); width: min(30rem, calc(100vw - 2rem)); margin: 0; }

/* Game overlays */
.jeu { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.jeu > * { pointer-events: auto; }
/* The question sits at the bottom centre, the pawn above it; the answer opens as a window in the middle. */
.zone-carte {
  position: absolute; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(44rem, calc(100vw - 2rem)); max-height: 46dvh;
  display: flex; flex-direction: column;
}
.zone-carte:empty { display: none; }
.zone-carte .carte { max-height: 46dvh; }
.fenetre {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  /* The window starts under Ijin's stage and the gauge (--pile-bas, set by jeu.js). It has no background of its own:
     jeu.js veils the city under Ijin's close-up instead (rendu.voiler), so Ijin stays bright beside the card. */
  --haut-fenetre: max(calc(max(0.7rem, env(safe-area-inset-top)) + 116px), var(--pile-bas, 0px));
  padding: var(--haut-fenetre) 1rem max(1rem, env(safe-area-inset-bottom));
}
.fenetre[hidden] { display: none; }
.fenetre .carte { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - var(--haut-fenetre) - 1rem - env(safe-area-inset-bottom)); overflow-y: auto; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); }
.fenetre .cv-titre { font-size: clamp(1.6rem, 5vw, 2.2rem); }
/* « Continuer » stays in view at the bottom of the window, big and orange. */
.fenetre .cv-actions { position: sticky; bottom: -1px; margin-top: 0.6rem; padding-top: 0.9rem; background: linear-gradient(rgba(9, 13, 28, 0), var(--panneau) 40%); }
.fenetre .cv-actions .bouton-principal { min-height: 56px; font-size: 1.2rem; padding-inline: 2.6rem; }
.zone-choix {
  position: absolute; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(44rem, calc(100vw - 2rem)); max-height: calc(100dvh - 140px); overflow-y: auto; text-align: center;
  padding: 1rem; border-radius: var(--rayon); background: rgba(9, 13, 28, 0.9); border: 1.5px solid rgba(79, 209, 255, 0.45);
}
.choix-titre { margin: 0 0 0.7rem; font-family: var(--police-titre); font-size: 1.2rem; }
.choix-titre:focus { outline: none; }
.choix-boutons { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; }
.choix-bouton {
  min-height: 44px; padding: 0.7rem 0.9rem; border-radius: 14px; cursor: pointer; text-align: left;
  color: var(--texte); background: rgba(15, 22, 44, 0.95); border: 2px solid var(--couleur, var(--cyan));
  box-shadow: 0 0 16px color-mix(in srgb, var(--couleur, #4FD1FF) 35%, transparent);
  transition: box-shadow 0.15s, transform 0.15s, filter 0.15s;
}
.choix-bouton:hover:not([disabled]) { box-shadow: 0 0 24px color-mix(in srgb, var(--couleur, #4FD1FF) 70%, transparent); transform: translateY(-2px); }
.choix-bouton:active:not([disabled]) { transform: translateY(1px) scale(0.98); filter: brightness(0.88); }
html.moins-de-mouvement .choix-bouton, html.moins-de-mouvement .choix-bouton:hover, html.moins-de-mouvement .choix-bouton:active { transition: none; transform: none; }
.choix-nom .icone { width: 1.2em; height: 1.2em; vertical-align: -0.2em; margin-inline-end: 0.4em; }
.choix-bouton:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.choix-nom { display: block; font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; color: var(--couleur, var(--cyan)); }
.choix-theme { display: block; font-size: 0.95rem; color: var(--texte-doux); }
.zone-chute {
  position: absolute; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 140px); overflow-y: auto; text-align: center;
  padding: 1.2rem 1rem; border-radius: var(--rayon); background: rgba(9, 13, 28, 0.92); border: 2px solid var(--orange);
  box-shadow: 0 0 28px rgba(255, 118, 52, 0.35);
}
.chute-titre { margin: 0 0 0.6rem; font-family: var(--police-titre); font-weight: 700; font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); text-shadow: 0 0 14px rgba(255, 118, 52, 0.8); animation: chute-clignote 1s steps(1) infinite; }
.chute-phrase { margin: 0 0 0.8rem; }
.chute-compte { margin: 0 0 0.8rem; color: var(--texte-doux); font-family: var(--police-titre); }
.chute-bouton { min-height: 56px; min-width: 44px; max-width: 100%; }
@keyframes chute-clignote { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0.8; } }
html.moins-de-flashs .chute-titre, html.moins-de-mouvement .chute-titre { animation: none; }
.zone-borne {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem;
  background: rgba(5, 7, 13, 0.72); backdrop-filter: blur(3px);
  transition: opacity 0.35s ease;
}
/* While Ijin introduces the booth in close-up, the booth waits, see-through. */
.zone-borne.attente { opacity: 0; pointer-events: none; }
html.moins-de-mouvement .zone-borne { transition: none; }
.borne-ecran {
  width: min(44rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.2rem;
  border-radius: 18px; background: rgba(8, 10, 24, 0.98); border: 2px solid var(--violet);
  box-shadow: 0 0 16px rgba(165, 139, 255, 0.25);
}
.zone-fin {
  /* No background of its own: the city is veiled by the renderer (under Ijin). The content starts under Ijin and his subtitles
     (--bulle-bas on narrow screens, where his stage is in the top row), and right of him on wide screens. */
  position: absolute; inset: 0; overflow-y: auto;
  padding: max(max(1rem, env(safe-area-inset-top)), calc(var(--bulle-bas, 0px) + 0.6rem)) 1rem 4rem;
}

/* Ijin's subtitles */
.bulle-ijin {
  position: fixed; z-index: 3; left: 50%; top: max(0.8rem, env(safe-area-inset-top)); transform: translateX(-50%);
  /* Centred, with room on both sides for the sound and settings buttons on the right. */
  display: flex; align-items: flex-start; gap: 0.5rem; width: max-content; max-width: min(46rem, calc(100vw - 340px));
}
.bulle-ijin[hidden] { display: none; }
/* Ijin's stage: the 3D canvas shows through this transparent box (a second camera draws him in light, with his own bloom).
   Shown during the game and whenever he speaks; no border, so he stands in the scene. --ijin-l and --ijin-h are its size. */
.scene-ijin {
  display: none; position: fixed; z-index: 1; pointer-events: none;
  width: var(--ijin-l); height: var(--ijin-h);
  background: radial-gradient(closest-side, rgba(165, 139, 255, 0.14) 0%, rgba(165, 139, 255, 0) 100%);
}
body:has(#jeu:not([hidden])) .scene-ijin, body:has(#bulle-ijin:not([hidden])) .scene-ijin { display: block; }
/* His reaction to a verdict: a short growth away from the screen edges (top left on narrow screens, bottom left on wide ones). */
.scene-ijin { transform-origin: top left; transition: transform 0.25s ease-out; }
.scene-ijin.reagit { transform: scale(1.12); }
html.moins-de-mouvement .scene-ijin { transition: none; }
/* While the camera films Ijin in close-up the portrait is not drawn; the box and its halo go too (it keeps its place). */
.scene-ijin.cache { visibility: hidden; }
:root { --ijin-l: 104px; --ijin-h: 104px; }
@media (min-width: 700px) { :root { --ijin-l: 150px; --ijin-h: 150px; } }
@media (max-height: 600px) { :root { --ijin-l: 104px; --ijin-h: 104px; } }
html.texte-grand { --ijin-l: 72px; --ijin-h: 72px; }
.soustitres {
  min-width: 0; max-height: 30dvh; overflow-y: auto;
  margin: 0; padding: 0.55rem 0.9rem; border-radius: 14px; font-size: 1rem;
  background: rgba(14, 9, 34, 0.9); border: 1.5px solid var(--violet); color: var(--texte);
  box-shadow: 0 0 22px rgba(165, 139, 255, 0.35);
}
.soustitres::before { content: 'Ijin : '; font-family: var(--police-titre); font-weight: 700; color: var(--violet); }

/* Top bar, settings, footer */
.barre { position: fixed; z-index: 4; top: max(0.7rem, env(safe-area-inset-top)); right: max(0.7rem, env(safe-area-inset-right)); display: flex; gap: 0.5rem; }
.bouton-rond {
  width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--texte); background: rgba(9, 13, 28, 0.85); border: 1.5px solid rgba(79, 209, 255, 0.5);
}
.bouton-rond svg { width: 24px; height: 24px; }
.bouton-rond[hidden] { display: none; }
.bouton-rond:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
#son .icone-son { display: none; }
#son[aria-pressed="true"] .icone-son { display: block; }
#son[aria-pressed="true"] .icone-muet { display: none; }
.reglages {
  position: fixed; z-index: 5; top: calc(max(0.7rem, env(safe-area-inset-top)) + 54px); right: max(0.7rem, env(safe-area-inset-right));
  width: min(22rem, calc(100vw - 1.4rem)); max-height: calc(100dvh - 80px - env(safe-area-inset-top)); overflow-y: auto; display: grid; gap: 0.7rem;
}
.reglages { background: rgba(9, 13, 28, 0.98); }
.reglages h2 { margin: 0; font-size: 1.2rem; }
.reglages h2:focus { outline: none; }
.reglage { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; }
.reglage input[type="checkbox"] { width: 1.3rem; height: 1.3rem; accent-color: var(--cyan); }
.reglage-choix { flex-wrap: wrap; justify-content: space-between; }
.reglage select { min-height: 44px; font: inherit; color: var(--texte); background: #0F162C; border: 1.5px solid rgba(79, 209, 255, 0.5); border-radius: 10px; padding: 0 0.6rem; }
.reglage-note { margin: 0; font-size: 0.88rem; color: var(--texte-doux); }
.pied { position: fixed; z-index: 1; left: max(0.8rem, env(safe-area-inset-left)); bottom: max(0.5rem, env(safe-area-inset-bottom)); font-size: 0.85rem; }
.pied a { color: var(--texte-doux); }

/* End of the game */
.fin { width: min(46rem, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* The first block (title, two buttons, figures, profile, replay) is built to fit the first screen. */
.fin-premier { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; justify-items: stretch; text-align: center; padding: 0.9rem 1rem; border-radius: 18px; background: rgba(5, 7, 13, 0.72); }
.fin-premier h2 { margin: 0; font-family: var(--police-titre); font-size: clamp(1.7rem, 6vw, 2.6rem); line-height: 1.15; }
.fin-premier h2:focus { outline: none; }
.fin-premier h2, .fin .bouton { hyphens: manual; overflow-wrap: normal; }
html.texte-grand .fin-premier h2 { font-size: 1.15rem; }
.fin-premier { min-width: 0; }
.fin-premier h2 { scroll-margin-top: calc(var(--bulle-bas, 0px) + 12px); }
.fin-pourcent { font-size: 1.15em; color: var(--cyan); white-space: nowrap; }
html.texte-grand .fin .bouton-grand { padding-inline: 0.5rem; }
.fin-ijin { display: none; margin: 0; padding: 0.5rem 0.8rem; border-radius: 12px; font-size: 0.95rem; background: rgba(14, 9, 34, 0.9); border: 1.5px solid var(--violet); color: var(--texte); }
.fin-ijin::before { content: 'Ijin : '; font-family: var(--police-titre); font-weight: 700; color: var(--violet); }
.fin-invite { margin: 0; font-weight: 600; }
.fin-choix { flex-wrap: wrap; }
.fin-choix .bouton { flex: 1 1 9.5rem; min-width: 0; justify-content: center; }
.fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; width: 100%; }
.fin-chiffres { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.2rem; font-size: 1.05rem; }
.fin-profil { margin: 0; font-size: 1.05rem; }
.fin-profil strong { color: var(--orange); }
.fin-noir { margin: 0; color: var(--ambre); }
.fin-rejouer { margin: 0; }
/* The end screen scrolls as a whole: its blocks must not be scroll boxes that swallow the mouse wheel. */
.fin-bloc { margin: 0; max-height: none; overflow: visible; overscroll-behavior: auto; }
.fin-bloc h3 { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--cyan); }
.fin-phrase { margin: 0; font-size: 1.15rem; min-height: 4.5em; }
.fin-appris-lien { margin: 0.3rem 0 0.6rem; }
.fin-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.fin-compteur { color: var(--texte-doux); padding-inline: 0.3rem; }
.fin-coulisses summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; color: var(--violet); }
.fin-coulisses ul { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.fin-message { margin: 0; min-height: 0; color: var(--vert); }
.fin-message:empty { display: none; }

/* Icons and buttons of the end screen: the shared button look lives in moteur/src/ui/base.css; here only the
   end screen's own variants (big buttons, cyan) and its link-buttons. */
.icone { width: 1.25em; height: 1.25em; flex: none; }
.fin .lien-bouton, .fin .lien-article { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; text-decoration: none; }
.fin .bouton-grand { min-height: 52px; padding: 0.7rem 1.4rem; font-size: 1.15rem; border: 0; color: #07101F; flex: 1 1 min(11rem, 100%); min-width: 0; }
.fin .bouton-cyan { background: linear-gradient(180deg, #8CE4FF 0%, #4FD1FF 55%, #2FB8EA 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 10px rgba(79, 209, 255, 0.3); }
.fin .bouton-cyan:hover, .fin .bouton-cyan:focus-visible { background: linear-gradient(180deg, #8CE4FF 0%, #4FD1FF 55%, #2FB8EA 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 22px rgba(79, 209, 255, 0.7); }
.fin .bouton-cyan:hover:not([disabled]) { transform: translateY(-2px); }
html.moins-de-mouvement .fin .bouton-cyan:hover { transform: none; }
.fin .lien-bouton { min-height: 44px; padding: 0 1rem; font: inherit; font-weight: 700; color: var(--texte); background: none; border: 0; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; border-radius: 10px; }
.fin .lien-bouton:hover { color: var(--cyan); }
.fin .lien-bouton:focus-visible, .fin .lien-article:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.fin .lien-article { min-height: 44px; }

/* Short screens (a laptop, a phone on its side): the question card may grow taller; on very short
   ones its answers sit side by side, so all three show without scrolling. */
@media (max-height: 700px) and (min-width: 721px) and (min-aspect-ratio: 4/5) {
  .zone-carte, .zone-carte .carte { max-height: 78dvh; }
}
@media (max-height: 500px) and (min-width: 721px) and (min-aspect-ratio: 4/5) {
  .zone-carte .carte { padding: 0.7rem 0.9rem 0.8rem; }
  .zone-carte .cq-entete { margin-bottom: 0.2rem; }
  .zone-carte .cq-enonce { font-size: 1.05rem; margin-bottom: 0.5rem; }
  .zone-carte .cq-reponses { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .zone-carte .cq-reponse { padding: 0.45rem 0.6rem; font-size: 0.95rem; gap: 0.5rem; }
  .zone-carte .cq-aide { display: none; }
  /* No room for the panel above the card: the three answers come first (the verdict keeps its panel). */
  .zone-carte .da-volet { display: none; }
}

/* Phones: cards become bottom sheets so the city stays visible above. */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .zone-carte { left: 0.5rem; right: 0.5rem; top: auto; bottom: max(0.5rem, env(safe-area-inset-bottom)); transform: none; width: auto; max-height: 64dvh; }
  /* The window starts under Ijin's subtitles and the energy gauge (--pile-bas, set by jeu.js). */
  .fenetre { --haut-fenetre: max(calc(max(0.7rem, env(safe-area-inset-top)) + 116px), var(--pile-bas, 0px)); padding: var(--haut-fenetre) 0.5rem max(0.5rem, env(safe-area-inset-bottom)); }
  .fenetre .carte { width: 100%; max-height: calc(100dvh - var(--haut-fenetre) - 1rem - env(safe-area-inset-bottom)); }
  .fenetre .cv-actions .bouton-principal { width: 100%; padding-inline: 1rem; white-space: nowrap; }
  /* At large text the icon and the word may not fit side by side: the icon goes above the word, never over the edge. */
  html.texte-grand .fenetre .cv-actions .bouton-principal { white-space: normal; hyphens: manual; }
  .zone-carte .carte { max-height: 64dvh; }
  .zone-choix, .zone-chute { bottom: max(0.5rem, env(safe-area-inset-bottom)); }
  .soustitres { font-size: 0.95rem; }
  .pied { display: none; }
  /* A more compact home panel on phones, so the flight over the city shows above it. */
  .accueil-panneau { padding: 0.9rem 0.9rem 0.8rem; }
  .titre { font-size: min(clamp(2.4rem, 11vw, 3.4rem), 13vw); }
  .sous-titre { margin-bottom: 0.5rem; font-size: 0.85rem; }
  .intro { font-size: 0.95rem; margin-bottom: 0.8rem; }
  .accueil .bouton-principal { padding: 0.7rem 1.6rem; }
  /* The arcade screen starts below Ijin's stage and the gauge. */
  .zone-borne { padding-top: max(calc(max(0.7rem, env(safe-area-inset-top)) + 116px), var(--pile-bas, 0px)); }
  .borne-ecran { max-height: calc(100dvh - max(calc(max(0.7rem, env(safe-area-inset-top)) + 116px), var(--pile-bas, 0px)) - 1rem); }
  html.texte-grand .soustitres { max-height: 26dvh; hyphens: manual; }
  /* No card on screen (opening, end screen): the whole line stays readable; the end panel follows --bulle-bas. */
  html.texte-grand body:has(#fin:not([hidden])) .soustitres, html.texte-grand .bulle-ijin:has(.passer-actions) .soustitres { max-height: none; overflow-y: visible; }
html.texte-grand body.ecran-fin .soustitres { max-height: none; overflow-y: visible; }
  html.texte-grand .accueil { padding-top: max(calc(max(0.7rem, env(safe-area-inset-top)) + 62px + 22dvh), calc(var(--bulle-bas, 0px) + 8px)); }
  /* Large text: the fork, the fall screen and the booth start under Ijin's bubble and the gauge (--pile-bas, set by jeu.js). */
  html.texte-grand .zone-choix, html.texte-grand .zone-chute { max-height: calc(100dvh - var(--pile-bas, 132px) - 0.5rem - env(safe-area-inset-bottom)); }
  html.texte-grand .zone-chute { padding: 0.6rem 0.8rem; }
  html.texte-grand .chute-titre { font-size: 1.2rem; letter-spacing: 0.04em; margin-bottom: 0.3rem; hyphens: manual; }
  html.texte-grand .chute-phrase { margin-bottom: 0.5rem; }
  html.texte-grand .zone-borne { padding-top: max(calc(max(0.7rem, env(safe-area-inset-top)) + 62px + 22dvh), var(--pile-bas, 0px)); }
  html.texte-grand .borne-ecran { max-height: calc(100dvh - max(calc(max(0.7rem, env(safe-area-inset-top)) + 62px + 22dvh), var(--pile-bas, 0px)) - 1rem); }
}
/* Long words on narrow lines at large text sizes. */
html.texte-grand body { hyphens: auto; }
html.moins-de-mouvement *, html.moins-de-mouvement *::before { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

a.bouton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.bouton .icone { flex: none; vertical-align: baseline; }

/* Energy gauge, top left; on phones it sits under the round buttons' row and Ijin's subtitles, never over the question card. */
.jauge[hidden] { display: none; }
.jauge {
  position: fixed; z-index: 3; top: max(0.7rem, env(safe-area-inset-top)); left: max(0.7rem, env(safe-area-inset-left));
  display: grid; gap: 0.25rem; padding: 0.45rem 0.7rem; min-height: 44px; max-width: 280px; border-radius: 14px;
  background: rgba(9, 13, 28, 0.88); border: 1.5px solid rgba(79, 209, 255, 0.5); color: var(--texte);
}
.jauge-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.jauge-etiquette { display: inline-flex; align-items: center; gap: 0.2rem; font-family: var(--police-titre); font-weight: 700; font-size: 0.95rem; color: var(--cyan); }
.jauge-eclair { width: 1.1em; height: 1.1em; flex: none; }
.jauge-segments { display: flex; gap: 2px; }
.jauge-segment { width: 7px; height: 14px; border-radius: 1px; background: rgba(79, 209, 255, 0.16); border: 1px solid rgba(79, 209, 255, 0.35); box-sizing: border-box; }
.jauge-segment.allume { background: var(--cyan); border-color: var(--cyan); }
.jauge-chiffre { min-width: 24px; text-align: right; font-family: var(--police-titre); font-weight: 700; font-size: 2rem; line-height: 1; }
.jauge-ligne { display: flex; align-items: center; gap: 0.6rem; }
.jauge-ligne:empty { display: none; }
.jauge-bas { font-weight: 700; font-size: 0.9rem; color: var(--ambre); }
.jauge-bas::before { content: '\26A0\00a0'; }
.jauge-bas:empty::before { content: none; }
.jauge-boucliers { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.9rem; color: var(--violet); }
.jauge-icone { width: 18px; height: 18px; }
.jauge-serie { flex-basis: 100%; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--texte); }
.jauge-point { width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--violet); background: transparent; }
.jauge-point.plein { background: var(--violet); border-radius: 3px; transform: rotate(45deg) scale(0.85); }
.jauge-serie-texte { margin-left: 0.2rem; }
.jauge.basse { border-color: var(--ambre); }
.jauge.basse .jauge-segment.allume { background: var(--ambre); border-color: var(--ambre); }
.jauge.basse .jauge-chiffre { animation: jauge-pulse 1s ease-in-out infinite; }
@keyframes jauge-pulse { 50% { opacity: 0.55; } }
/* The opening points at the gauge: one ring that spreads once; the streak demo ends on the shield. */
.jauge.pulse { animation: jauge-anneau 0.8s ease-out 1; }
@keyframes jauge-anneau { from { box-shadow: 0 0 0 0 rgba(79, 209, 255, 0.7); } to { box-shadow: 0 0 0 12px rgba(79, 209, 255, 0); } }
html.moins-de-mouvement .jauge.pulse { animation: none; }
.jauge-serie-bouclier { display: none; color: var(--violet); }
.jauge.demo-bouclier .jauge-serie-bouclier { display: inline-block; }
.jauge.demo-bouclier .jauge-serie-texte { display: none; }
html.moins-de-flashs .jauge.basse .jauge-chiffre, html.moins-de-mouvement .jauge.basse .jauge-chiffre { animation: none; }
.jauge-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jauge-annonces { position: absolute; left: 100%; top: 0; margin-left: 0.4rem; display: flex; gap: 0.4rem; pointer-events: none; }
.jauge-annonce { font-family: var(--police-titre); font-weight: 700; font-size: 1.3rem; padding: 0 0.4rem; border-radius: 8px; background: rgba(9, 13, 28, 0.9); animation: jauge-vol 1.2s ease-out forwards; }
.jauge-annonce.gain { color: var(--cyan); border: 1.5px solid var(--cyan); }
.jauge-annonce.perte { color: var(--ambre); border: 1.5px solid var(--ambre); }
@keyframes jauge-vol { from { transform: translateY(8px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-10px); opacity: 1; } }
.jauge-annonce.calme, html.moins-de-mouvement .jauge-annonce { animation: none; }
/* District label shown above a district while its towers light up; jeu.js sets left and top (px), clamped on screen. */
.etiquette-quartier {
  position: fixed; z-index: 3; left: 50%; top: 40%; transform: translate(-50%, -50%); margin: 0; max-width: calc(100vw - 1rem);
  padding: 0.35rem 0.9rem; border-radius: 999px; pointer-events: none; text-align: center; white-space: nowrap;
  font-family: var(--police-titre); font-weight: 700; font-size: 1.25rem; color: #FFFFFF;
  background: rgba(9, 13, 28, 0.9); border: 2px solid var(--couleur-quartier, var(--cyan)); box-shadow: 0 0 18px var(--couleur-quartier, var(--cyan));
  animation: etiquette-monte 0.35s ease-out;
}
.etiquette-quartier[hidden] { display: none; }
@keyframes etiquette-monte { from { opacity: 0; margin-top: 12px; } to { opacity: 1; margin-top: 0; } }
html.moins-de-mouvement .etiquette-quartier { animation: none; }
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .etiquette-quartier { font-size: 1.1rem; }
  .jauge { top: max(calc(max(0.7rem, env(safe-area-inset-top)) + 54px), calc(var(--bulle-bas, 0px) + 6px)); left: 0.5rem; max-width: calc(100vw - 1rem); }
  .jauge-annonces { left: auto; right: 0; top: 100%; margin: 0.2rem 0 0; }
  .zone-carte, .zone-carte .carte { max-height: min(64dvh, calc(100dvh - 54px - 70px - 2rem - env(safe-area-inset-top))); }
  html.texte-grand .zone-carte, html.texte-grand .zone-carte .carte { max-height: min(64dvh, calc(100dvh - var(--pile-bas, 132px) - 0.5rem - env(safe-area-inset-bottom))); }
}

/* Layout A: the card and its side panel (volet). Stacked by default, the panel above the text and at
   most 30 % of the screen height; side by side on a wide landscape screen. */
.disposition-a { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; max-height: 100%; }
.da-volet {
  flex: 0 0 auto; max-height: 30dvh; overflow-y: auto; display: grid; place-items: center; padding: 0.5rem;
  border-radius: 14px; background: rgba(8, 10, 24, 0.94); border: 1.5px solid rgba(165, 139, 255, 0.45);
}
.da-volet:empty { display: none; }
.da-volet .cv-animation { margin: 0; width: 100%; }
.da-carte { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.zone-carte .disposition-a .da-carte > .carte, .fenetre .disposition-a .da-carte > .carte { max-height: none; min-height: 0; width: auto; }
.zone-carte .disposition-a { flex: 1 1 auto; }
.fenetre .disposition-a { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - var(--haut-fenetre) - 1rem - env(safe-area-inset-bottom)); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); }
.ve-image { display: block; max-width: 100%; max-height: calc(30dvh - 1rem); object-fit: contain; border-radius: 10px; }
.ve-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.embleme { display: block; width: 72px; height: 72px; max-height: calc(30dvh - 1.5rem); animation: embleme-tourne 48s linear infinite; }
.embleme.calme, html.moins-de-mouvement .embleme { animation: none; }
/* Illustrations glide slowly (Ken Burns style) and a faint diagonal light band crosses the panel now and then. */
.volet-image-anime { width: 100%; height: calc(30dvh - 1rem); object-fit: cover; object-position: 0% 0%; animation: volet-glisse 18s ease-in-out infinite alternate; }
/* Diagonal pan: whichever axis overflows moves (vertical on phones, horizontal on wide panels). */
@keyframes volet-glisse { from { object-position: 0% 0%; } to { object-position: 100% 100%; } }
.volet-lueur { position: relative; overflow: hidden; }
.volet-lueur::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.12) 50%, transparent 65%);
  transform: translateX(-100%); animation: volet-lueur 7s linear infinite;
}
/* The band is visible for the first 1.6 s of each 7 s cycle (23 %), at 0.12 opacity at most, with soft edges. */
@keyframes volet-lueur { 0% { transform: translateX(-100%); opacity: 1; } 22.8% { transform: translateX(100%); opacity: 1; } 22.9%, 100% { transform: translateX(100%); opacity: 0; } }
html.moins-de-mouvement .volet-image-anime { object-position: 50% 50%; }
html.moins-de-mouvement .volet-image-anime, html.moins-de-flashs .volet-lueur::after, html.moins-de-mouvement .volet-lueur::after { animation: none; }
html.moins-de-mouvement .volet-lueur::after, html.moins-de-flashs .volet-lueur::after { display: none; }
@keyframes embleme-tourne { to { transform: rotate(360deg); } }
/* The energy change, said in words and a sign next to the verdict word, never by color alone. */
.cv-bandeau { display: inline-block; margin: 0 0 0.6rem; padding: 0.15rem 0.7rem; border-radius: 999px; font-family: var(--police-titre); font-weight: 700; font-size: 1.05rem; border: 1.5px solid currentColor; }
.cv-bandeau.cv-bon { color: var(--vert); }
.cv-bandeau.cv-incomplet { color: var(--ambre); }
.cv-bandeau.cv-piege { color: var(--rose); }
/* Medium landscape: the stacked panel needs a taller zone than the plain card did. */
@media (min-width: 721px) and (max-width: 899px) and (min-aspect-ratio: 4/5) {
  .zone-carte, .zone-carte .carte { max-height: 70dvh; }
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .zone-carte { width: min(64rem, calc(100vw - 2rem)); }
  .disposition-a { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 0.8rem; }
  .da-volet { max-height: none; }
  .ve-image { max-height: 100%; }
  .volet-image-anime { height: 100%; max-height: none; }
  .embleme { width: 120px; height: 120px; max-height: none; }
  .fenetre .disposition-a { width: min(64rem, calc(100vw - 2rem)); }
}
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  /* The bigger type needs the room: a smaller panel above the question on narrow screens. */
  .fenetre .da-volet { max-height: 20dvh; }
  .fenetre .ve-image { max-height: calc(20dvh - 1rem); }
  .fenetre .volet-image-anime { height: calc(20dvh - 1rem); }
  .fenetre .disposition-a { width: 100%; max-height: calc(100dvh - var(--haut-fenetre) - 1rem - env(safe-area-inset-bottom)); }
}
/* The question opens in the same centre window as the answer, larger: big statement, big lettered tiles. */
.fenetre .cq-enonce { font-size: clamp(1.6rem, 2.4vw, 1.9rem); line-height: 1.3; margin-bottom: 1.1rem; }
.fenetre .cq-reponses { gap: 0.8rem; }
.fenetre .cq-reponse { font-size: 1.2rem; min-height: 56px; padding: 0.9rem 1.1rem; gap: 1rem; }
.fenetre .cq-lettre { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
.fenetre .cq-entete { font-size: 1rem; }
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .fenetre .cq-enonce { font-size: 1.45rem; margin-bottom: 0.8rem; }
  .fenetre .cq-reponses { gap: 0.55rem; }
  .fenetre .cq-reponse { font-size: 1.2rem; padding: 0.65rem 0.8rem; gap: 0.75rem; }
  .fenetre .cq-lettre { width: 2.1rem; height: 2.1rem; }
}
@media (max-height: 500px) and (min-width: 721px) and (min-aspect-ratio: 4/5) {
  /* The question window starts under Ijin's portrait (122 px high) and uses the rest. */
  .fenetre:has(.cq-reponses) { padding-top: 128px; padding-bottom: 0.5rem; }
  .fenetre:has(.cq-reponses) .disposition-a, .fenetre:has(.cq-reponses) .carte { max-height: calc(100dvh - 128px - 0.5rem); }
  .fenetre .cq-enonce { font-size: 1.05rem; margin-bottom: 0.4rem; }
  .fenetre .cq-reponses { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .fenetre .cq-reponse { font-size: 0.95rem; min-height: 44px; padding: 0.45rem 0.6rem; gap: 0.5rem; }
  .fenetre .cq-lettre { width: 1.7rem; height: 1.7rem; font-size: 0.95rem; }
  .fenetre .cq-aide { display: none; }
  /* No room for the panel above the question: the three answers come first (the verdict keeps its panel). */
  .fenetre .disposition-a:has(.cq-reponses) .da-volet { display: none; }
}
/* Text at 150 % and above: compact sizes only on a phone (the card must stay in its width). Elsewhere the
   statement and the answers keep growing with the setting. The max() floors keep 150 % above 125 %. */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  html.texte-grand .fenetre .cq-enonce { font-size: max(1rem, 30px); hyphens: manual; }
  html.texte-grand .fenetre .cq-reponse { font-size: max(0.9rem, 25px); min-height: 44px; padding: 0.5rem 0.6rem; gap: 0.5rem; }
  html.texte-grand .fenetre .cq-lettre { width: 1.7rem; height: 1.7rem; font-size: 0.9rem; }
  html.texte-grand .fenetre .cq-entete { font-size: 0.8rem; }
}
/* Skip button of the presentation, inside Ijin's bubble */
.bouton-passer { min-height: 44px; min-width: 44px; padding: 0.4rem 1rem; align-self: center; font-size: 0.95rem; }
.passer-actions { display: flex; flex-wrap: wrap; justify-content: center; align-self: center; gap: 0.4rem; }
.bouton-passer:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Red crackle on a trap answer: one short red edge glow, no transform (it would move fixed children). */
#jeu.gresille { animation: gresille 0.3s steps(3) 1; }
@keyframes gresille { 0% { box-shadow: inset 0 0 90px rgba(255, 61, 61, 0.6); } 33% { box-shadow: inset 0 0 40px rgba(255, 61, 61, 0.3); } 66% { box-shadow: inset 0 0 90px rgba(255, 61, 61, 0.5); } 100% { box-shadow: none; } }
html.moins-de-mouvement #jeu.gresille { animation: none; }

/* Large text on a phone (not a tablet): the number says the energy, so the bar and the panel give way to the card;
   the verdict title stays whole, and Continuer follows the content instead of covering the title. */
@media (max-width: 720px) {
  html.texte-grand .jauge-segments, html.texte-grand .da-volet { display: none; }
  html.texte-grand .jauge-rangee { flex-wrap: nowrap; gap: 0.25rem; }
  html.texte-grand .jauge-chiffre { font-size: 1.25rem; min-width: 0; }
  html.texte-grand .jauge-point { width: 9px; height: 9px; }
  html.texte-grand .jauge-serie { gap: 0.15rem; }
  /* Compact streak at 200 % on a phone: three points beside the number, no sentence (the live text is unchanged). */
  html.texte-grand .jauge-serie { flex-basis: auto; }
  html.texte-grand .jauge-serie-texte { display: none; }
  html.texte-grand .fenetre .cv-titre { font-size: 1.25rem; hyphens: manual; }
  html.texte-grand .fenetre .cv-actions { position: static; background: none; padding-top: 0; }
}

/* Narrow screens (anything but the wide layout): Ijin's stage sits in the subtitles row, left of the bubble, under
   the three round buttons (one row). The bubble, the gauge and the windows move down by its height. */
@media not all and (min-width: 900px) and (min-height: 560px) {
  :root { --rangee-ijin: calc(max(0.7rem, env(safe-area-inset-top)) + 54px); }
  .barre { width: auto; flex-wrap: nowrap; }
  #recentrer { order: 0; }
  /* The skip button goes under the subtitles instead of squeezing them. */
  .bulle-ijin { flex-wrap: wrap; }
  .bouton-passer { flex: 1 0 100%; }
  .scene-ijin { left: 0.6rem; top: var(--rangee-ijin); }
  .bulle-ijin { top: var(--rangee-ijin); left: calc(var(--ijin-l) + 1.1rem); transform: none; width: max-content; max-width: calc(100vw - var(--ijin-l) - 1.7rem); }
  .jauge { top: max(var(--rangee-ijin), calc(var(--bulle-bas, 0px) + 6px)); left: 0.5rem; max-width: calc(100vw - 1rem); }
}
/* Large text on a narrow screen: Ijin shares the buttons' row (left of them) and the subtitles take the full width
   under both, as before. The row is as high as his stage (--ijin-l, 72 px). */
@media not all and (min-width: 900px) and (min-height: 560px) {
  html.texte-grand .scene-ijin { left: 0.5rem; top: max(0.7rem, env(safe-area-inset-top)); }
  /* End screen: the floating bubble would cover the panel, so it is clipped away (it stays the screen readers' live region)
     and the same line is shown inside the panel, under the title (.fin-ijin, aria-hidden). */
  html.texte-grand body:has(#fin:not([hidden])) .bulle-ijin { width: 1px; max-width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
  /* Fallback without :has() (a separate rule, since an unknown selector voids a whole list): jeu.js sets .ecran-fin on body. */
  html.texte-grand body.ecran-fin .bulle-ijin { width: 1px; max-width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
  html.texte-grand .fin-ijin:not(:empty) { display: block; }
  html.texte-grand .fin-ijin { text-align: left; }
  html.texte-grand .bulle-ijin { top: calc(max(0.7rem, env(safe-area-inset-top)) + var(--ijin-l) + 6px); left: 0.5rem; right: 0.5rem; width: auto; max-width: none; }
  html.texte-grand .jauge { top: max(calc(max(0.7rem, env(safe-area-inset-top)) + var(--ijin-l) + 6px), calc(var(--bulle-bas, 0px) + 6px)); }
}
/* A very short landscape screen: the buttons keep the top row, Ijin and his bubble share it. */
@media (max-height: 500px) and (min-width: 721px) and (min-aspect-ratio: 4/5) {
  :root { --rangee-ijin: max(0.7rem, env(safe-area-inset-top)); }
  .bulle-ijin { max-width: calc(100vw - var(--ijin-l) - 1.7rem - 170px); }
  .bulle-ijin { flex-wrap: nowrap; }
  .bouton-passer { flex: 0 0 auto; white-space: nowrap; }
}

/* Wide screens: Ijin stands large at the bottom left, never covered; the card opens to his right with bigger type. */
@media (min-width: 900px) and (min-height: 560px) {
  :root, html.texte-grand { --ijin-l: clamp(220px, 24vw, 360px); --ijin-h: min(58dvh, calc(var(--ijin-l) * 1.3)); }
  .scene-ijin { left: 0.5rem; bottom: max(0.75rem, env(safe-area-inset-bottom)); transform-origin: bottom left; }
  /* The window starts under the subtitles (top centre) and leaves Ijin's column free. */
  .fenetre { --haut-fenetre: max(calc(var(--bulle-bas, 0px) + 0.6rem), 5.5rem); padding-left: calc(var(--ijin-l) + 1.5rem); }
  .fenetre .carte, .fenetre .disposition-a { width: min(76rem, calc(100vw - var(--ijin-l) - 3rem)); }
  .fenetre .da-carte > .carte { width: auto; }
  /* The fork and the fall screen are centred in the space right of Ijin. */
  .zone-choix, .zone-chute { left: calc(50% + var(--ijin-l) / 2); }
  /* The end screen sits right of Ijin, under the subtitles. */
  .zone-fin { padding-left: calc(var(--ijin-l) + 1.5rem); padding-top: max(calc(var(--bulle-bas, 0px) + 0.6rem), 5.5rem); }
  .zone-choix { width: min(44rem, calc(100vw - var(--ijin-l) - 3rem)); }
  .zone-chute { width: min(480px, calc(100vw - var(--ijin-l) - 3rem)); }
  .fenetre .cq-enonce, html.texte-grand .fenetre .cq-enonce { font-size: clamp(1.8rem, 2.5vw, 2.4rem); }
  .fenetre .cq-reponse, html.texte-grand .fenetre .cq-reponse { font-size: 1.4rem; min-height: 64px; }
  .fenetre .cq-lettre, html.texte-grand .fenetre .cq-lettre { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; }
  .fenetre .cv-titre, html.texte-grand .fenetre .cv-titre { font-size: 2.4rem; }
  html.texte-grand .fenetre .cq-entete { font-size: 1rem; }
  .fenetre .cv-verdict { font-size: 1.2rem; }
  .fenetre .da-volet:has(.ve-image) { padding: 0; overflow: hidden; }
  .fenetre .da-volet .ve-image { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
}
@media (min-width: 900px) and (min-height: 560px) and (min-aspect-ratio: 1/1) {
  .fenetre .disposition-a { grid-template-columns: 34% minmax(0, 1fr); }
}
/* A shorter wide screen (a laptop): the type stays at least as big as before the redesign; when it does not fit,
   the card scrolls (its action row is sticky) instead of shrinking. */
@media (min-width: 900px) and (min-height: 560px) and (max-height: 800px) {
  .fenetre .cq-enonce, html.texte-grand .fenetre .cq-enonce { font-size: clamp(1.7rem, 2.3vw, 2.1rem); margin-bottom: 0.8rem; }
  .fenetre .cq-reponses { gap: 0.6rem; }
  .fenetre .cq-reponse, html.texte-grand .fenetre .cq-reponse { font-size: 1.3rem; min-height: 56px; padding: 0.6rem 1rem; }
  .fenetre .cq-lettre, html.texte-grand .fenetre .cq-lettre { width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
}
/* A wide but portrait screen (a tablet held upright): the gauge is as wide as the screen, so the window starts under it. */
@media (min-width: 900px) and (min-height: 560px) and (max-aspect-ratio: 4/5) {
  .fenetre { --haut-fenetre: max(calc(var(--bulle-bas, 0px) + 0.6rem), 5.5rem, var(--pile-bas, 0px)); }
}