/* Tête d'affiche · feuille unique.
   ──────────────────────────────────────────────────────────────────────────
   Une affiche de théâtre : du papier crème, de l'encre, et l'or des ampoules
   qui encadrent le nom de la vedette. Les menus suivent le thème clair ou
   sombre ; la SCÈNE (la manche elle-même) est toujours sombre, parce qu'on la
   lit de loin, sur le front de quelqu'un, et qu'un mot clair sur fond noir se
   lit mieux à trois mètres qu'un mot noir sur papier.

   Deux couleurs de réponse, jamais utilisées pour autre chose : le vert de
   « Trouvé » et l'orange de « Passé ».

   Règles de la maison tenues ici, chacune payée ailleurs dans le dépôt :
   · aucun champ sous 16 px (au-dessous, iOS zoome au premier tap) ;
   · cibles tactiles de 44 px au moins ;
   · la rangée d'actions ancrée en bas réserve la zone sûre des iPhone ;
   · un seul bloc sombre, accroché à [data-theme="dark"] (theme-init.js le
     pose toujours) ;
   · un élément masqué par `hidden` le reste, même quand une règle lui pose
     un `display` (piège [hidden] du dépôt). */

:root {
  --paper: #f5f0e4;
  --paper-2: #ece5d3;
  --card: #fffdf7;
  --ink: #1c1812;
  --muted: #5d5647;
  --line: #d8cdb6;
  --accent: #8f5100;
  --on-accent: #ffffff;
  --accent-soft: rgba(143, 81, 0, 0.1);
  --bulb: #f5b700;
  --trouve: #17703d;
  --trouve-soft: rgba(23, 112, 61, 0.1);
  --passe: #a8400a;
  --passe-soft: rgba(168, 64, 10, 0.1);
  --shadow: 0 1px 0 rgba(28, 24, 18, 0.06), 0 10px 30px -18px rgba(28, 24, 18, 0.35);
  --radius: 14px;
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* La scène : identique dans les deux thèmes. */
  --scene-bg: #0f0d0a;
  --scene-ink: #fbf6e9;
  --scene-muted: #b9ae98;
  --scene-line: #3a3326;
  --flash-trouve: #13703b;
  --flash-trouve-ink: #ffffff;
  --flash-passe: #f08a24;
  --flash-passe-ink: #1c1812;
  --flash-fin: #ffc233;
  --flash-fin-ink: #1c1812;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #15120e;
  --paper-2: #1d1914;
  --card: #25201a;
  --ink: #f4eee0;
  --muted: #b3a994;
  --line: #3b3428;
  --accent: #ffc233;
  --on-accent: #1c1812;
  --accent-soft: rgba(255, 194, 51, 0.12);
  --bulb: #ffc233;
  --trouve: #62d391;
  --trouve-soft: rgba(98, 211, 145, 0.12);
  --passe: #ffa062;
  --passe-soft: rgba(255, 160, 98, 0.12);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 34px -20px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.12; }
p { margin: 0; }

.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 16px; height: 16px; }

/* ── La barre ─────────────────────────────────────────────────────────── */
.barre {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.marque {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 6px 0 0; min-width: 0;
  background: none; border: 0; cursor: pointer;
}
/* Le logo de l'app, découpé par tools/app_logo.py : une image de fond, la
   variante claire ou sombre selon le thème. Le rapport d'aspect est celui du
   PNG (1106 × 256) : faux, le dessin flotterait dans une case trop large ou
   trop étroite. Le nom accessible est porté par role="img" dans la page. */
.marque-logo {
  display: block; height: 32px; aspect-ratio: 1106 / 256;
  background: url("brand/logo.png") left center / contain no-repeat;
}
:root[data-theme="dark"] .marque-logo { background-image: url("brand/logo-dark.png"); }
.barre-actions { display: flex; gap: 6px; }
.ico-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: none; border: 1px solid transparent; cursor: pointer; color: var(--ink);
}
.ico-btn:focus-visible, .btn:focus-visible, .marque:focus-visible, .retour:focus-visible,
.puce:focus-visible, .segment:focus-visible, .theme-carte:focus-visible, .lien-btn:focus-visible,
.reponse:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── La page ──────────────────────────────────────────────────────────── */
.page {
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.ecran { display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
.ecran-tete { display: flex; flex-direction: column; gap: 8px; }
.ecran-titre { font-size: 30px; outline: none; }
.ecran-sous { color: var(--muted); }
.retour {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; margin-left: -8px; padding: 0 10px 0 4px;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
  color: var(--muted); font-weight: 600;
}
.surtitre {
  font: 600 12px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}

/* ── Boutons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--radius); border: 1px solid transparent;
  font: 600 17px/1.2 var(--font-text); cursor: pointer; text-decoration: none;
  transition: transform 0.12s var(--ease), background-color 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn-large { min-height: 56px; font-size: 18px; width: 100%; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.lien-btn {
  align-self: flex-start;
  min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer;
  color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.rangee .btn { flex: 1 1 160px; }

/* La rangée d'actions de chaque écran : collée en bas, au-dessus de la barre
   gestuelle des iPhone. */
.actions {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: 10px;
  margin: 8px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 72%, transparent);
}
.actions .btn { flex: 1 1 0; min-width: 0; }

/* ── Messages ─────────────────────────────────────────────────────────── */
.msg { padding: 12px 14px; border-radius: 12px; font-size: 16px; }
.msg.is-err { background: var(--passe-soft); color: var(--ink); border: 1px solid var(--passe); }
.msg.is-info { background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); }
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 80;
  transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 12px;
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: 16px;
  box-shadow: var(--shadow);
}

/* ── Accueil ──────────────────────────────────────────────────────────── */
.hero { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.hero-titre { font-size: clamp(36px, 10vw, 54px); letter-spacing: -0.03em; }
.hero-texte { font-size: 18px; color: var(--muted); }
.atouts {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin: 0; padding: 0; list-style: none; font-weight: 600; font-size: 15px;
}
.atouts li { display: inline-flex; align-items: center; gap: 6px; }
.atouts .ico { color: var(--accent); }
.hero-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* L'affiche : un vrai cadre de marquise, ses ampoules allumées, le mot au
   milieu (tools/soiree_images.py). L'image reçue porte dix-sept ampoules par
   rangée (rapport 4:1) : sur un téléphone, le panneau ferait 72 px de haut et
   le mot n'y tiendrait pas. L'outil en tire deux versions raccourcies AU PAS
   DES AMPOULES, neuf ampoules (téléphone) et treize (écran large), et la case
   prend exactement le rapport de son image : une ampoule reste ronde. Le
   rembourrage, en pourcentage de la largeur, garde le texte dans le noir du
   cadre. */
.affiche {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 900 / 389; padding: 7% 11%;
  background: var(--scene-bg) url("img/enseigne-etroite.webp") center / 100% 100% no-repeat;
  color: var(--scene-ink); text-align: center;
  box-shadow: var(--shadow);
}
@media (min-width: 520px) {
  .affiche {
    aspect-ratio: 1216 / 384; padding: 5% 9%;
    background-image: url("img/enseigne.webp");
  }
}
.affiche-lib {
  font: 600 12px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--scene-muted);
}
.affiche-mot {
  font: 700 clamp(30px, 9vw, 44px)/1.05 var(--font-display); letter-spacing: -0.02em;
  overflow-wrap: anywhere; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.affiche-mot.is-sortant { opacity: 0; transform: translateY(-6px); }
/* Sur le cadre large, le mot grandit moins vite : à 520 px, deux lignes de
   44 px déborderaient du noir du cadre (le plus long mot de l'accueil fait
   seize lettres). */
@media (min-width: 520px) {
  .affiche-mot { font-size: clamp(30px, 6.8vw, 44px); }
}

.section-titre { font-size: 24px; }
.regles { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.etapes { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.etapes li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.etape-num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font: 700 16px/1 var(--font-display);
}
.etapes h3 { font-size: 18px; margin-bottom: 4px; }
.etapes p { color: var(--muted); font-size: 16px; }
.encart {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--line); font-size: 16px;
}
.encart .ico { color: var(--accent); width: 22px; height: 22px; margin-top: 2px; }
.signature {
  display: flex; flex-direction: column; gap: 6px;
  margin: 12px 0 calc(24px + env(safe-area-inset-bottom)); padding-top: 16px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 15px;
}
.signature a { color: var(--ink); font-weight: 600; }

/* ── Thèmes et réglages ───────────────────────────────────────────────── */
.bloc {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line);
}
.bloc-titre { font: 700 19px/1.2 var(--font-display); letter-spacing: -0.015em; }
.bloc-aide { color: var(--muted); font-size: 15px; }
.champ {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink);
  font: 500 17px/1.3 var(--font-text);
}
.champ::placeholder { color: var(--muted); opacity: 0.85; }
.champ:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  font-weight: 600; font-size: 15px; color: var(--ink);
}
.puce[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.reglage { display: flex; flex-direction: column; gap: 8px; }
.reglage-nom { font-weight: 700; font-size: 16px; }
.segments {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  padding: 4px; border-radius: 14px; background: var(--paper-2);
}
.segment {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 8px; border-radius: 10px; border: 0;
  background: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--muted);
  text-align: center;
}
.segment[aria-checked="true"] { background: var(--ink); color: var(--paper); }

.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-carte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px;
  min-height: 118px; padding: 16px 14px 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); cursor: pointer; text-align: left;
  transition: transform 0.12s var(--ease), border-color 0.15s;
}
/* Le liseré de tête : une teinte par thème, posée par le script (--h). */
.theme-carte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: oklch(0.72 0.14 var(--h, 80));
}
.theme-carte:active { transform: scale(0.98); }
.theme-nom { font: 700 18px/1.15 var(--font-display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.theme-aide { color: var(--muted); font-size: 14px; line-height: 1.35; }
.theme-nb { font: 600 12px/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--muted); }
.theme-carte.is-melange { grid-column: 1 / -1; min-height: 96px; background: var(--scene-bg); color: var(--scene-ink); border-color: var(--scene-line); }
.theme-carte.is-melange .theme-aide, .theme-carte.is-melange .theme-nb { color: var(--scene-muted); }
.theme-carte.is-melange::before { height: 100%; width: 6px; right: auto; background: var(--bulb); }
.theme-ico { width: 26px; height: 26px; color: var(--bulb); margin-bottom: 2px; }

/* ── Résultats ────────────────────────────────────────────────────────── */
.fin-tete { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-top: 8px; }
.fin-score {
  font: 700 clamp(84px, 26vw, 120px)/0.95 var(--font-display); letter-spacing: -0.05em;
  color: var(--accent);
}
.fin-titre { font-size: clamp(26px, 8vw, 36px); outline: none; }
.fin-sous { color: var(--muted); }
.reponses { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.reponse {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); cursor: pointer; text-align: left;
  font-size: 17px; color: var(--ink);
}
.reponse-ico { width: 22px; height: 22px; }
.reponse-mot { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.reponse-etat { font: 600 12px/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.reponse.is-trouve { border-color: var(--trouve); background: var(--trouve-soft); }
.reponse.is-trouve .reponse-ico, .reponse.is-trouve .reponse-etat { color: var(--trouve); }
.reponse.is-passe .reponse-ico, .reponse.is-passe .reponse-etat { color: var(--passe); }
.reponse.is-passe .reponse-mot { color: var(--muted); }
.reponses-vide { color: var(--muted); }

.scores-bloc { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.scores-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.scores-tete .lien-btn { white-space: nowrap; }
.scores { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.score {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 48px; padding: 6px 12px; border-radius: 12px; background: var(--paper-2);
}
.score-rang { font: 700 15px/1 var(--font-mono); color: var(--muted); }
.score-nom { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.score-nom small { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
.score-pts { font: 700 18px/1 var(--font-display); }
.score:first-child .score-rang { color: var(--accent); }
.partage { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.partage .rangee { width: 100%; }
.partage .rangee .btn { flex-basis: 220px; }
.partage-apercu {
  width: min(56vw, 220px); aspect-ratio: 4 / 5; border-radius: 12px;
  border: 1px solid var(--line); box-shadow: var(--shadow); object-fit: cover;
}

/* ── La scène ─────────────────────────────────────────────────────────── */
/* Par-dessus tout, plein écran, sans défilement ni zoom : pendant la manche,
   le téléphone est sur un front et chaque doigt qui le tient touche l'écran. */
.scene {
  position: fixed; inset: 0; z-index: 70;
  background: var(--scene-bg); color: var(--scene-ink);
  overflow: hidden; overscroll-behavior: none; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body.en-scene { overflow: hidden; }
body.en-scene #mn-admin-pill, body.has-modal #mn-admin-pill { display: none; }
.scene-etat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(16px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
           calc(16px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  text-align: center;
}
.pret-ico { width: 64px; height: 64px; color: var(--bulb); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pret-titre { font-size: clamp(26px, 6vw, 40px); outline: none; }
.pret-texte { color: var(--scene-muted); font-size: 18px; max-width: 34ch; }
.pret-paysage {
  display: none; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--scene-line); color: var(--bulb); font-weight: 600; font-size: 16px;
}
.pret-statut { min-height: 1.5em; max-width: 40ch; color: var(--scene-ink); font-weight: 600; font-size: 17px; }
.pret-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.btn-scene { background: transparent; color: var(--scene-ink); border-color: var(--scene-line); }
.scene .btn-primary { background: var(--bulb); color: var(--flash-fin-ink); }
.scene .btn:focus-visible, .jeu-stop:focus-visible, .zone:focus-visible { outline: 2px solid var(--bulb); outline-offset: 2px; }

.decompte-lib { color: var(--scene-muted); font: 600 14px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.decompte { font: 700 min(40vh, 38vw)/1 var(--font-display); letter-spacing: -0.05em; color: var(--bulb); }

.scene-jeu { justify-content: flex-start; gap: 0; padding-top: calc(8px + env(safe-area-inset-top)); }
.jeu-haut {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%;
}
.jeu-stop {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--scene-line); cursor: pointer; color: var(--scene-ink);
}
.jeu-theme {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
  color: var(--scene-muted); font: 600 13px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.jeu-chrono { font: 700 clamp(26px, 6vw, 40px)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.jeu-chrono.is-urgent { color: var(--flash-passe); }
.jeu-barre { position: relative; z-index: 2; width: 100%; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--scene-line); overflow: hidden; }
.jeu-barre span { display: block; height: 100%; width: 100%; background: var(--bulb); transform-origin: left center; }
.jeu-centre {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; padding: 8px 0;
}
/* La taille exacte est posée par le script (le mot le plus grand qui tienne) :
   celle-ci n'est qu'un départ raisonnable. */
.jeu-mot {
  max-width: 100%; margin: 0;
  font: 700 64px/1.02 var(--font-display); letter-spacing: -0.025em; text-align: center;
  /* Jamais couper un mot en deux : c'est le script qui réduit la taille
     jusqu'à ce que le plus long tienne. */
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.jeu-score { color: var(--scene-muted); font: 600 14px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Mode tactile : la moitié gauche passe, la droite valide. */
.zone {
  position: absolute; top: 0; bottom: 0; z-index: 1; width: 50%;
  display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  padding: 0 12px calc(18px + env(safe-area-inset-bottom));
  background: transparent; border: 0; cursor: pointer; color: var(--scene-muted);
  font: 600 15px/1.2 var(--font-text);
}
/* Pas de trait entre les deux moitiés : il traverserait le mot, qui est
   la seule chose à lire. Les deux libellés du bas suffisent. */
.zone-passe { left: 0; }
.zone-trouve { right: 0; }
.zone-passe .ico { color: var(--flash-passe); }
.zone-trouve .ico { color: #62d391; }
.scene-jeu.is-tactile .jeu-haut, .scene-jeu.is-tactile .jeu-barre { z-index: 3; }
.scene-jeu.is-tactile .jeu-centre, .scene-jeu.is-tactile .jeu-score { pointer-events: none; }

.scene-flash {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center;
  animation: flash-entre 0.18s var(--ease);
}
.scene-flash.is-trouve { background: var(--flash-trouve); color: var(--flash-trouve-ink); }
.scene-flash.is-passe { background: var(--flash-passe); color: var(--flash-passe-ink); }
.scene-flash.is-fin { background: var(--flash-fin); color: var(--flash-fin-ink); }
.flash-lib { font: 700 clamp(48px, 14vw, 110px)/1 var(--font-display); letter-spacing: -0.04em; }
.flash-mot { font: 600 clamp(20px, 5vw, 32px)/1.2 var(--font-text); opacity: 0.85; overflow-wrap: anywhere; }
@keyframes flash-entre { from { opacity: 0.4; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* En portrait, on rappelle de tourner le téléphone (le jeu marche quand même). */
@media (orientation: portrait) and (pointer: coarse) {
  .pret-paysage { display: block; }
}
/* Paysage bas de plafond (un téléphone couché) : tout se resserre. */
@media (max-height: 460px) {
  .pret-ico { width: 44px; height: 44px; }
  .pret-titre { font-size: 26px; }
  .pret-texte { font-size: 16px; }
  .scene-etat { gap: 8px; }
  .jeu-chrono { font-size: 28px; }
}

/* ── Modale ───────────────────────────────────────────────────────────── */
.modale { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modale-fond { position: absolute; inset: 0; background: rgba(12, 10, 8, 0.6); }
.modale-carte {
  position: relative; width: min(100%, 440px); max-height: calc(100dvh - 32px); overflow: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 20px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
.modale-titre { font-size: 22px; }
.modale-corps { color: var(--muted); display: flex; flex-direction: column; gap: 10px; }
.modale-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.modale-actions .btn { flex: 1 1 140px; }

@media (max-width: 560px) {
  .modale { align-items: flex-end; padding: 0; }
  .modale-carte { width: 100%; border-radius: 20px 20px 0 0; max-height: 92dvh; }
}

@media (max-width: 359px) {
  .themes { grid-template-columns: minmax(0, 1fr); }
  .theme-carte { min-height: 96px; }
  .segment { font-size: 14px; padding: 0 4px; }
  .segment .ico { display: none; }
}

@media (min-width: 720px) {
  .page { padding-top: 32px; }
  .hero-actions { flex-direction: row; }
  .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .theme-carte, .affiche-mot { transition: none; }
  .btn:active, .theme-carte:active { transform: none; }
  .scene-flash { animation: none; }
}

/* En fin de fichier : une media query n'ajoute aucune priorité, seul l'ordre
   tranche. Sur un appareil sans souris, :hover colle après le tap. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-secondary:hover, .puce:hover, .theme-carte:hover, .reponse:hover { border-color: var(--ink); }
  .btn-scene:hover { border-color: var(--scene-ink); }
  .ico-btn:hover { border-color: var(--line); }
  .segment:not([aria-checked="true"]):hover { color: var(--ink); }
  .zone:hover { background: rgba(255, 255, 255, 0.03); }
}