/* =====================================================================
   RIZ FLEXE — Moulinex x Jasmine Rice
   Feuille de style unique. Couleurs relevées directement dans les
   maquettes fournies (pipette sur les PNG).
   ===================================================================== */

/* --------------------------------------------------------------- polices */
@font-face {
  font-family: 'Riz Flexe Display';
  src: url('../assets/fonts/JAPANESE_2020.ttf') format('truetype');
  font-weight: 400;
  font-display: block;   /* police de marque : on préfère attendre 100 ms */
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- jetons */
:root {
  --wine: #a2193d;
  --wine-deep: #7d0f2d;
  --yellow: #f8db16;
  --yellow-deep: #e0c000;
  --bg-hot: #6d0616;
  --bg-cold: #2c0206;
  --timer: #ce1f48;
  --ink: #14060a;

  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Riz Flexe Display', var(--sans);

  --radius: 22px;
  --shadow: 0 18px 44px rgba(0, 0, 0, .38);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sans);
  color: #fff;
  background: var(--bg-cold);
  /* Calé sur le dégradé du visuel « Fond landing page.png » pour que les
     découpes du sachet et du cuiseur s'y fondent sans laisser de rectangle. */
  background-image:
    radial-gradient(135% 100% at 30% 86%, var(--bg-hot) 0%, #520310 40%, var(--bg-cold) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

/* `height: auto` est indispensable : sans lui, l'attribut height="…" du HTML
   reste appliqué et l'image est étirée dès qu'on fixe sa largeur en CSS. */
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- page
   La colonne de contenu est l'unité de référence de toute la landing :
   sur la maquette, le cadre de jeu mesure 1017 px pour un canvas de 1320,
   et tous les blocs se positionnent en pourcentage de cette largeur.

   ⚠ `container-type` n'est PAS posé sur .page : il impliquerait
   `contain: layout`, qui ferait de .page le bloc conteneur des descendants
   en `position: fixed` — et casserait le plein écran de substitution iPhone.
   Les unités cqw sont donc déclarées sur .hero et .share-section, et les
   marges du module s'expriment en % (qui se résolvent déjà sur .page). */
.page {
  position: relative;
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
  padding-block: clamp(1.75rem, 4vw, 3.25rem) 0;
  z-index: 1;
}

/* Le sachet et le cuiseur sont découpés dans « Fond landing page.png ».
   Le fondu de leurs bords est cuit dans l'alpha des images (voir README) :
   pas de mask-image, donc aucun risque de rendu différent d'un navigateur
   à l'autre, et le sujet lui-même n'est jamais assombri. */
.decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
/* Sur la maquette, le sachet touche le bord droit du canvas et son sommet
   s'aligne sur celui du logo. `right: calc(50% - 50vw)` amène son bord droit
   au bord de la fenêtre, quelle que soit la largeur de la colonne. */
.decor--sachet {
  top: -2.3cqw;
  right: calc(50% - 50vw);
  width: 43.4cqw;
  min-width: 210px;
}
.decor--cuiseur {
  right: calc(50% - 50vw);
  bottom: 0;
  width: 44cqw;
  min-width: 220px;
}

/* --------------------------------------------------------------- héro
   Cotes relevées sur « simulation-Landing page.png » (canvas 1320, colonne
   1017) et exprimées en % de colonne :
     logo (encre)                66,6 %   → cadre 70,1 % (le PNG a 4,95 % de marge)
     logo → « Prêt »              4,6 %
     « Prêt » → bas du texte     16,5 %
     texte → « Les 10 »           2,9 %
     « Les 10 » → cadre de jeu    5,4 %
     interligne du corps          3,3 %                                        */
.hero { position: relative; container-type: inline-size; }

.hero__logo {
  width: 70.1cqw;
  margin-bottom: 2.8cqw;
}

.hero__copy {
  max-width: 78cqw;
  font-size: clamp(15px, 2.45cqw, 30px);
  font-weight: 600;
  line-height: 1.35;
}
/* Sur la maquette « Prêt, Coupez, Cuisinez ! » enchaîne directement sur le
   corps du texte, sans interligne supplémentaire ; seul le lot est détaché. */
.hero__copy p { margin: 0; }
.hero__copy .hero__prize { margin-top: .85em; }
.hero__baseline,
.hero__prize { color: var(--yellow); }
.hero__prize { font-weight: 800; }

/* --------------------------------------------------------------- module de jeu */
.module {
  container-type: inline-size;
  position: relative;
  margin-block: 5.4% 6%;   /* % = largeur de .page, sans containment */
  border-radius: var(--radius);
  overflow: hidden;
  background: #221109 url('../assets/img/fond-jeu.webp') center / cover no-repeat;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
  isolation: isolate;
  /* Marge respectée quand le module est ramené en haut de la fenêtre
     à chaque changement d'écran (scrollIntoView dans main.js). */
  scroll-margin-top: clamp(.75rem, 2vw, 1.5rem);
}

/* Logo posé sur le plan de travail — uniquement pendant la partie,
   comme sur la maquette « partie.png ». */
.module__counterLogo {
  position: absolute;
  left: 50%;
  bottom: 2.5cqw;
  width: 28cqw;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .96;
  z-index: 0;
}
.module:not([data-screen="3"]) .module__counterLogo { display: none; }

/* Écrans 1, 2, 4 et 5 s'adaptent en hauteur sur petit écran :
   le CDC §5.3bis recommande de ne pas imposer le paysage pour la saisie. */
@media (max-width: 860px) {
  .module:not([data-screen="3"]) {
    aspect-ratio: auto;
    min-height: 30rem;
  }
}

/* Téléphone tenu à l'horizontale sans plein écran : le cadre de jeu reste
   entièrement visible plutôt que de déborder sous la ligne de flottaison. */
@media (orientation: landscape) and (max-height: 600px) {
  .module[data-screen="3"] { max-height: 100dvh; margin-block: 0; }
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2cqw;
  z-index: 1;
}
.screen.is-active { display: block; }
.screen--game { padding: 0; overflow: hidden; }

@media (max-width: 860px) {
  .module:not([data-screen="3"]) .screen { position: relative; padding: 1.25rem; }
}

/* --------------------------------------------------------------- panneau givré
   Proportions relevées sur les maquettes 1920 × 1063 : panneau à 59 % de la
   largeur du cadre, sommet à 16 % de la hauteur, pastille à 31 % de large.
   Tout est exprimé en cqw pour rester identique à toute taille de cadre. */
.panel {
  position: relative;
  max-width: 60cqw;
  margin: 5.5cqw auto 0;
  padding: 4.4cqw 3.4cqw 2.2cqw;
  border-radius: clamp(14px, 1.8cqw, 30px);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  color: var(--ink);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

.panel__badge {
  position: absolute;
  top: 0;
  left: 50%;
  width: 31cqw;
  min-width: 170px;
  transform: translate(-50%, -52%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}

.panel__title {
  margin: 0 0 2cqw;
  font-size: clamp(1.05rem, 2.6cqw, 2.4rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .module:not([data-screen="3"]) .panel {
    max-width: 100%;
    margin-top: 3.5rem;
    padding: 3.25rem 1.25rem 1.5rem;
  }
  .module:not([data-screen="3"]) .panel__badge { width: 66%; }
  .module:not([data-screen="3"]) .panel__title { font-size: 1.35rem; margin-bottom: 1.25rem; }
}

/* --------------------------------------------------------------- boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: .45em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: #000;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2cqw, 2.1rem);
  line-height: 1.4;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .32);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: #ffe63a; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .38); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: 0 5px 14px rgba(0, 0, 0, .3); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--block { display: flex; width: max-content; margin: 1.2cqw auto 0; }

.btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid var(--yellow);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(248, 219, 22, .14); color: #fff; }

/* --------------------------------------------------------------- écran 1 : formulaire */
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9cqw 3cqw;
}
.field--wide { grid-column: 1 / -1; max-width: 32cqw; margin-inline: auto; width: 100%; }

.field label {
  display: block;
  margin-bottom: .35em;
  font-size: clamp(.68rem, .95cqw, .9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.field input {
  width: 100%;
  height: max(38px, 3.2cqw);
  padding: 0 .8em;
  border: 2px solid var(--yellow);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: max(16px, 1.05cqw);   /* 16 px mini : évite le zoom auto iOS */
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
.field input:focus { outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(248, 219, 22, .55); }
.field input[aria-invalid="true"] { border-color: #c0121f; background: #fff5f5; }

.field__hint {
  margin: .3em 0 0;
  font-size: max(12px, .92cqw);
  line-height: 1.3;
  color: #4a3b3f;
}
/* Les messages d'erreur ne réservent pas de place tant qu'ils sont vides :
   le formulaire tient ainsi dans le cadre 16/9 de la maquette. */
.field__error {
  margin: 0;
  font-size: max(12px, 1.05cqw);
  font-weight: 600;
  color: #b3101d;
}
.field__error:not(:empty) { margin-top: .35em; }

.consents { margin-top: 1.2cqw; display: grid; gap: .7cqw; }
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7em;
  align-items: start;
  /* Mentions opposables : 12 px minimum et contraste AA (CDC §5.3). */
  font-size: max(12px, .92cqw);
  line-height: 1.4;
  color: #241016;
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--wine);
  flex: none;
  cursor: pointer;
}
.consent a { color: var(--wine-deep); font-weight: 600; }

.form__required {
  margin: .9cqw 0 0;
  font-size: max(12px, 1.02cqw);
  color: #3a2228;
}
.form__feedback {
  margin: 0;
  font-size: max(12px, 1.1cqw);
  font-weight: 600;
  color: #b3101d;
  text-align: center;
}
.form__feedback:not(:empty) { margin-top: 1.2cqw; }

@media (max-width: 860px) {
  .module:not([data-screen="3"]) .form__grid { grid-template-columns: 1fr; gap: 1rem; }
  .module:not([data-screen="3"]) .field--wide { max-width: 100%; }
  .module:not([data-screen="3"]) .field label { font-size: .8rem; }
  .module:not([data-screen="3"]) .consents { margin-top: 1.25rem; gap: .9rem; }
  .module:not([data-screen="3"]) .btn--block { margin-top: 1.5rem; width: 100%; }
}

/* --------------------------------------------------------------- écran 2 : barème */
.bareme { display: grid; gap: 1cqw; }
.bareme__group h3 {
  margin: 0 0 .5cqw;
  font-size: max(10px, .85cqw);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #3a2228;
}
.bareme__row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr));
  gap: .8cqw;
}
.bareme__split {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .8cqw;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  padding: .5cqw .4cqw .45cqw;
  border-radius: clamp(7px, .8cqw, 14px);
  background: #fff;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .16);
  text-align: center;
}
.tile img { width: max(34px, 3.9cqw); height: max(34px, 3.9cqw); object-fit: contain; }
.tile b {
  font-size: max(8px, .78cqw);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.15;
}
.tile span { font-size: max(8px, .78cqw); font-weight: 800; line-height: 1.15; }
.tile--malus span { color: #b3101d; }
.tile--bonus span { color: #9a7500; }

.bareme__footer { display: flex; justify-content: flex-end; margin-top: .8cqw; }

@media (max-width: 860px) {
  .module:not([data-screen="3"]) .bareme { gap: 1.15rem; }
  .module:not([data-screen="3"]) .bareme__split { grid-template-columns: 1fr; gap: 1.15rem; }
  .module:not([data-screen="3"]) .bareme__row { grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: .5rem; }
  .module:not([data-screen="3"]) .tile { padding: .5rem .25rem .4rem; }
  .module:not([data-screen="3"]) .tile b,
  .module:not([data-screen="3"]) .tile span { font-size: 10px; }
  .module:not([data-screen="3"]) .bareme__footer { justify-content: center; }
}

/* --------------------------------------------------------------- écran 3 : jeu */
.screen--game canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  z-index: 2;
}

.hud {
  position: absolute;
  inset: 0;
  padding: 2.2cqw 2.6cqw;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
  z-index: 3;
}

.hud__score { display: flex; align-items: center; gap: 1.2cqw; }
.hud__cooker { width: 7cqw; min-width: 42px; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)); }
.hud__points {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5cqw, 4rem);
  line-height: 1;
  color: var(--yellow);
  text-shadow: 0 3px 10px rgba(0, 0, 0, .65);
  font-variant-numeric: tabular-nums;
}

.hud__timer { display: flex; align-items: center; gap: 1cqw; width: 42cqw; }
.hud__heart { width: 4.2cqw; min-width: 26px; flex: none; }
.hud__bar {
  position: relative;
  flex: 1;
  height: 2.4cqw;
  min-height: 15px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.hud__fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8365d, var(--timer));
  transform-origin: left center;
  will-change: transform;
}
.hud__bar.is-low .hud__fill { background: linear-gradient(180deg, #ff8a3d, #e03a12); }

.hud__combo {
  position: absolute;
  left: 50%;
  top: 13cqw;
  z-index: 3;
  pointer-events: none;   /* ne doit jamais intercepter un geste de coupe */
  transform: translate(-50%, -6px);
  font-family: var(--display);
  font-size: clamp(1.1rem, 3.4cqw, 2.6rem);
  color: var(--yellow);
  text-shadow: 0 3px 12px rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.hud__combo.is-on { opacity: 1; transform: translate(-50%, 0); }

.game__hint {
  position: absolute;
  left: 50%;
  bottom: 12cqw;
  transform: translateX(-50%);
  padding: .5em 1.2em;
  border-radius: 999px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: max(12px, 1.3cqw);
  font-weight: 600;
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
  transition: opacity .4s ease;
}

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 5;
  background: rgba(0, 0, 0, .35);
  font-family: var(--display);
  font-size: clamp(4rem, 18cqw, 14rem);
  color: var(--yellow);
  text-shadow: 0 8px 28px rgba(0, 0, 0, .7);
}
.countdown span { animation: pop .8s ease-out; }
@keyframes pop {
  0% { transform: scale(.4); opacity: 0; }
  35% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --------------------------------------------------------------- écran 4 : score */
.score__label {
  margin: 0 0 1.4cqw;
  font-size: clamp(1rem, 2.2cqw, 1.9rem);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}
.score__value {
  margin: 0 auto 1.6cqw;
  padding: 1.1cqw 2.4cqw;
  max-width: 92%;
  border-radius: clamp(10px, 1.2cqw, 18px);
  background: var(--wine);
  color: var(--yellow);
  font-family: var(--display);
  font-size: clamp(1.7rem, 5.4cqw, 4.4rem);
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.score__best {
  margin: 0 0 1.4cqw;
  text-align: center;
  font-size: max(12px, 1.1cqw);
  font-weight: 700;
  color: #7a5c00;
  min-height: 1.3em;
}
/* Confirmation de participation : discrète mais toujours présente. */
.score__status {
  margin: -.6cqw auto 1.4cqw;
  max-width: 46cqw;
  text-align: center;
  font-size: max(11px, .95cqw);
  line-height: 1.35;
  color: #3a2228;
}
.score__status[hidden] { display: none; }
.score__status b { color: var(--wine-deep); }

.score__warn {
  margin: 0 0 1.4cqw;
  text-align: center;
  font-size: max(12px, 1.05cqw);
  font-weight: 600;
  color: #b3101d;
}
.score__share { text-align: center; }
.score__share p {
  margin: 0 0 .9cqw;
  font-size: max(12px, 1.2cqw);
  font-weight: 700;
  text-transform: uppercase;
}
.share-row { display: flex; justify-content: center; gap: 1cqw; }
.share-btn {
  display: grid;
  place-items: center;
  width: clamp(34px, 3.4cqw, 48px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: #000;
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.share-btn:hover { transform: translateY(-2px); background: var(--wine); }
.share-btn svg { width: 55%; height: 55%; fill: currentColor; }

/* --------------------------------------------------------------- écran 5 : classement */
.board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7cqw 2.4cqw;
}
.board__head {
  display: grid;
  grid-template-columns: 3.4em 1fr auto;
  gap: .8em;
  padding-inline: .7em;
  margin-bottom: .25em;
  font-size: max(9px, .9cqw);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #3a2228;
}
.board__col { display: grid; gap: .7cqw; align-content: start; }

.row {
  display: grid;
  grid-template-columns: 3.4em 1fr auto;
  align-items: center;
  gap: .8em;
  padding: .3em .7em;
  border: 2px solid var(--yellow);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: max(11px, 1.15cqw);
}
.row--out { border-color: #000; background: #000; color: #fff; }
.row--me { box-shadow: 0 0 0 3px rgba(162, 25, 61, .55); }
.row__rank {
  font-family: var(--display);
  font-size: max(13px, 1.7cqw);
  color: var(--wine);
  line-height: 1;
}
.row--out .row__rank { color: #fff; }
.row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__score { font-variant-numeric: tabular-nums; }
.row--empty { border-style: dashed; opacity: .5; }

.board__note {
  grid-column: 1 / -1;
  margin: .8cqw 0 0;
  text-align: center;
  font-size: max(11px, .95cqw);
  color: #3a2228;
}

@media (max-width: 860px) {
  .module:not([data-screen="3"]) .board { grid-template-columns: 1fr; }
  .module:not([data-screen="3"]) .board__head:nth-of-type(2) { display: none; }
}

/* --------------------------------------------------------------- outils du module */
.module__tools {
  position: absolute;
  right: 1.4cqw;
  bottom: 1.4cqw;
  display: flex;
  gap: .6cqw;
  z-index: 6;
}
.tool {
  display: grid;
  place-items: center;
  width: clamp(38px, 3.4cqw, 52px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color .12s ease, transform .12s ease;
}
.tool:hover { background: rgba(0, 0, 0, .75); transform: translateY(-2px); }
.tool img, .tool svg { width: 56%; height: 56%; }
/* L'icône fournie est déjà blanche sur fond transparent : aucun filtre,
   juste une ombre portée pour la détacher d'un décor clair. */
.tool img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }

/* Plein écran de substitution (iPhone : l'API Fullscreen est indisponible
   sur un élément HTML, cf. CDC §5.3bis).

   ⚠ .page porte `z-index: 1` et crée donc un contexte d'empilement : le
   `z-index: 9999` du module ne vaut qu'À L'INTÉRIEUR de .page. Le footer,
   frère de .page et lui aussi à `z-index: 1`, passerait au-dessus du jeu
   (départage par l'ordre du document). On élève donc .page elle-même le
   temps du plein écran. Sans ça, le jeu est injouable sur iPhone. */
body.is-locked .page { z-index: 9999; }

.module.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Invitation à la rotation — écran de jeu uniquement (CDC §5.3bis). */
.rotate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background: rgba(20, 4, 8, .94);
  color: #fff;
}
.rotate p { margin: 1.2rem 0 0; font-size: 1.05rem; font-weight: 600; }
.rotate svg { width: 88px; height: 88px; animation: tilt 2s ease-in-out infinite; }
@keyframes tilt {
  0%, 45% { transform: rotate(0deg); }
  70%, 100% { transform: rotate(-90deg); }
}
@media (orientation: portrait) and (pointer: coarse) {
  .module[data-screen="3"] .rotate { display: grid; }
}

/* --------------------------------------------------------------- chargement */
.loader {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  gap: 1rem;
  background: rgba(20, 4, 8, .9);
  color: #fff;
}
/* `display:grid` l'emporterait sur la règle [hidden] du navigateur. */
.loader[hidden] { display: none; }
.loader__inner { display: grid; justify-items: center; gap: 1rem; width: min(280px, 70%); }
.loader__track { width: 100%; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.loader__fill { height: 100%; width: 0; background: var(--yellow); transition: width .2s ease; }
.loader p { margin: 0; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }

/* --------------------------------------------------------------- partage / footer */
.share-section {
  position: relative;
  container-type: inline-size;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 8vw, 6rem);
  min-height: clamp(300px, 34vw, 460px);
}
.share-section__copy { max-width: 38rem; }
.share-section h2 {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: .02em;
  text-wrap: balance;
}
.share-section p {
  margin: 0 0 1.75rem;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
}
.share-list { display: grid; gap: .75rem; max-width: 22rem; }
.share-list .btn--ghost { width: 100%; }

.site-footer {
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 5vw, 3rem);
  background: rgba(0, 0, 0, .28);
  text-align: center;
}
.site-footer__logo { width: min(320px, 60%); margin: 0 auto 1.5rem; }
.site-footer p {
  margin: 0 auto .75rem;
  max-width: 60ch;
  font-size: max(12px, .875rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; margin-top: 1rem; }
.site-footer a { color: rgba(255, 255, 255, .92); font-size: max(12px, .875rem); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.site-footer a:hover { color: var(--yellow); border-color: var(--yellow); }

/* --------------------------------------------------------------- notifications */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 140%);
  z-index: 10000;
  padding: .8em 1.4em;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.toast.is-on { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}