/* ============================================================================
   LE LABORATOIRE · interface B · ÉTAPE 3 : L'OUVERTURE
   ----------------------------------------------------------------------------
   Feuille de la page d'essai public/pupitre.html, chargée APRÈS pupitre/socle.css.
   Elle porte la mise en page soignée, et seulement elle, de :
     #ecran-regles     le rappel des règles : trois écrans, leurs visuels (.rv-…)
     #ecran-roue       la roue du professeur : fenêtre, repère, cases aux
                       couleurs des rangs (.carte-rang-…), verdict, preuves
     #ecran-annonce.annonce-finale   l'annonce de la FINALE (rayons, titre géant)
   Maquettes : data/maquettes-2026-10-07/B-suite/regles.html, roue.html, annonce.html.
   Plan : docs/interface-b/plan-de-bascule.md, partie 3. Décisions : SPECS 2.12, étape 3.

   SOMMAIRE
     1. Le panneau des trois écrans : verre cerclé, rivets, plus rien ne défile
     2. Les étiquettes se taisent pendant le rappel des règles et la roue
     3. Le rappel des règles, et ses visuels (dont celui du lot)
     4. La roue du professeur
     5. Les preuves du tirage
     6. L'annonce de la finale
     7. Écran court, téléphone couché, ordinateur
     8. Replis, mouvements réduits

   LA GÉOMÉTRIE DE LA ROUE EST CONTRACTUELLE (socle.css, section 13) : toutes les
   cases ont la même hauteur, en pixels entiers (--roue-case), sans marge ni
   écart ; la fenêtre en montre trois ; le repère cercle celle du milieu. Cette
   feuille ne redit ni la hauteur d'une case, ni celle de la fenêtre, ni la
   place du repère : elle habille. L'écart qu'on voit entre deux cases est
   DESSINÉ dans la case (une découpe), il ne déplace rien. Sur ordinateur la
   roue est agrandie d'un bloc (transform), cases, fenêtre et repère ensemble :
   la bande se cale dans le repère d'avant l'agrandissement, où une case fait
   toujours un nombre entier de pixels.

   LISIBILITÉ DES CASES (gardée par test/pupitre-ouverture.test.js) : le titre
   et la chance d'une case gardent un contraste d'au moins 4,5 pour 1 sur le
   point le plus clair de la case (--rang-haut), sous le reflet à son plus fort
   (celui de l'or passe SUR le titre). Rien d'autre n'éclaircit le fond sous le
   texte : ni lueur, ni voile, ni filtre, case tirée comprise (son éclat est
   celui de son cadre).

   Règles (les mêmes pour toutes les feuilles, gardées par
   test/pupitre-feuilles.test.js) : ne retouche pas socle.css ; CHAQUE
   sélecteur s'accroche à une pièce de cette étape (#ecran-regles, #ecran-roue,
   #ecran-annonce pour sa finale, une pièce qu'ils contiennent, ou
   body[data-ecran="regles"], "roue" pour ce qui est hors de l'écran) : jamais
   de sélecteur nu ni de réglage posé sur :root ; le nom d'une animation
   commence par « ouverture- » ; tout en « u », couleurs du thème ; pas de
   color-mix(), pas de :has(), pas de « inset: », pas de dvh hors de @supports ;
   aucune ressource en ligne. L'annonce ORDINAIRE d'une manche est à manche.css :
   ici, tout ce qui touche #ecran-annonce est écrit sous « .annonce-finale ».
   Monte le « ?v= » de cette feuille, sur sa ligne de pupitre.html, quand tu la
   modifies.
   ========================================================================== */


/* ============================================================================
   1. LE PANNEAU DES TROIS ÉCRANS
   ----------------------------------------------------------------------------
   Le même verre cerclé et riveté que le panneau de la question. La section est
   le panneau : son cerclage et ses rivets sont ses deux pseudo-éléments, posés
   en absolu (ils ne prennent aucune place dans la mise en page). Plus rien ne
   défile dans ces écrans, sauf les preuves du tirage, dans leur carte.
   ========================================================================== */
#ecran-regles, #ecran-roue, #ecran-annonce.annonce-finale {
  position: relative; z-index: 1; isolation: isolate;
  overflow: hidden;
  border-radius: calc(16 * var(--u));
  background: var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-ombre);
  text-align: center;
}
/* le cerclage : un dégradé de métal, découpé en anneau */
#ecran-regles::before, #ecran-roue::before, #ecran-annonce.annonce-finale::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4;
  width: auto; height: auto; margin: 0; flex: none; border-radius: inherit; pointer-events: none;
  padding: max(1.5px, calc(2 * var(--u)));
  background: var(--cerclage-metal);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* les quatre rivets */
#ecran-regles::after, #ecran-roue::after, #ecran-annonce.annonce-finale::after {
  content: ''; position: absolute; z-index: 4;
  top: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); left: calc(8 * var(--u));
  width: auto; height: auto; margin: 0; flex: none; pointer-events: none;
  --ouverture-rivet: radial-gradient(circle at 38% 34%, var(--metal-vif) 0 16%, var(--metal-clair) 32%, var(--metal-creux) 60%, rgba(0, 0, 0, 0.85) 70%, transparent 74%);
  background: var(--ouverture-rivet) left top, var(--ouverture-rivet) right top, var(--ouverture-rivet) left bottom, var(--ouverture-rivet) right bottom;
  background-size: calc(8 * var(--u)) calc(8 * var(--u)); background-repeat: no-repeat;
  opacity: 0.9;
}


/* ============================================================================
   2. LES ÉTIQUETTES SE TAISENT PENDANT LE RAPPEL DES RÈGLES ET LA ROUE
   ----------------------------------------------------------------------------
   Il n'y a encore ni manche (« EN ATTENTE ») ni jeu du soir : la roue est
   montrée en grand, et ne tournera qu'à la fin, pour le gagnant (SPECS 7.1).
   Sur téléphone, la scène récupère leurs deux rangées. L'étiquette de droite
   apparaît à la première annonce de manche (« À gagner : Un jeu de la
   roue ») ; à la fin, la roue qui tourne est un écran de la FIN (le socle y
   cache cadrans et étiquettes, comme au couronnement et à la remise du lot).
   ========================================================================== */
body[data-ecran="regles"] .pupitre > .etiquette,
body[data-ecran="roue"] .pupitre > .etiquette { display: none; }
/* Les cadrans aussi, sur l'écran de la roue (sa présentation, ou une partie sans lot) : avant la première manche,
   ils n'ont rien à dire (ni vie comptée, ni chrono, ni joueur éliminé). La vitrine prend leur place : avec les
   images des jeux (section 4 ter), les noms tiennent sous les bannières sur ordinateur. */
body[data-ecran="roue"] .pupitre > .rail,
body[data-ecran="roue"] .pupitre > .instruments { display: none; }


/* ============================================================================
   3. LE RAPPEL DES RÈGLES (#ecran-regles)
   ----------------------------------------------------------------------------
   Téléphone debout : tout s'empile, le visuel prend la hauteur qui reste.
   Ordinateur et téléphone couché : le visuel à gauche, la règle à droite.
   app.js écrit le visuel (du HTML fixe : .rv-barres, .rv-chrono et .rv-jauge,
   .rv-trophee, .rv-lot), le titre, le résumé et le compteur « 1 / 3 » ; il pose la classe
   .regles-entree à chaque écran, et .regles-resume-attente sur le résumé tant
   que le professeur n'a pas fini sa réplique.
   ========================================================================== */
#ecran-regles {
  display: grid; align-items: center; justify-items: center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "sur" "visuel" "titre" "resume" "compteur";
  gap: 0; row-gap: calc(10 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));
  /* les pièces des visuels */
  --ouverture-tube: calc(46 * var(--u));           /* largeur d'une éprouvette */
  --ouverture-tube-ecart: calc(19 * var(--u));
  --ouverture-lettre: calc(32 * var(--u));         /* la pastille A, B, C, D */
  --ouverture-plaque: max(11px, calc(14 * var(--u)));
  --ouverture-nombre: calc(108 * var(--u));        /* le nombre de secondes */
  --ouverture-jauge: calc(236 * var(--u));
  --ouverture-coeurs: calc(30 * var(--u));
  --ouverture-pions: calc(24 * var(--u));
  --ouverture-visuel-max: calc(300 * var(--u));    /* hauteur d'un visuel, au plus */
  --ouverture-lot: calc(340 * var(--u));           /* l'éventail des bannières du lot */
  --ouverture-roue-dessin: calc(240 * var(--u));   /* la roue dessinée du lot */
}
#ecran-regles > .regles-surtitre { grid-area: sur; }
#regles-titre { grid-area: titre; max-width: 100%; }
#regles-resume {
  grid-area: resume; margin: 0; max-width: min(100%, 26em);
  font-size: calc(var(--taille-texte) * 1.1); line-height: 1.35; color: var(--texte);
}
/* le compteur « 1 / 3 » : un compteur ÉCRIT, rien d'autre (ni ronds : rien ne se fait défiler au doigt ;
   ni plaquette cerclée : une pastille « 1 / 3 » ressemblait à un bouton pour changer d'écran) */
#regles-points {
  grid-area: compteur;
  padding: calc(3 * var(--u)) calc(16 * var(--u));
  font-family: var(--police-plateau); font-weight: 900; font-variant-numeric: tabular-nums lining-nums;
  font-size: max(16px, calc(17 * var(--u))); line-height: 1.25; letter-spacing: 0.12em;
  color: var(--metal-clair);
}
#regles-points:empty { visibility: hidden; }

/* l'arrivée de chaque écran : le visuel, puis le titre, puis le résumé (au repos : visibles) */
#ecran-regles.regles-entree #regles-visuel,
#ecran-regles.regles-entree #regles-titre,
#ecran-regles.regles-entree #regles-resume { animation: ouverture-arrivee 0.5s ease-out both; }
#ecran-regles.regles-entree #regles-titre { animation-delay: 0.08s; }
#ecran-regles.regles-entree #regles-resume { animation-delay: 0.16s; }
@keyframes ouverture-arrivee { from { opacity: 0; transform: translateY(calc(12 * var(--u))); } }

/* ---------- La scène du visuel : il prend la place qui reste, chaque dessin s'y met seul ---------- */
#regles-visuel {
  grid-area: visuel; align-self: stretch; justify-self: stretch;
  display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; align-content: normal;
  min-height: 0; min-width: 0; padding: 0; margin: 0;
}

/* ---------- Visuel 1, « la majorité gagne » : quatre éprouvettes, celle de la foule est pleine et luit.
   app.js : .rv-barres > .rv-barre (style="--h: 26%"), avec sa lettre <b> ; la foule (.rv-foule) porte <em>. ---------- */
#regles-visuel .rv-barres {
  flex: 1 1 0; min-height: 0; max-height: var(--ouverture-visuel-max); height: auto;
  display: flex; align-items: stretch; justify-content: center; gap: var(--ouverture-tube-ecart);
  padding-top: calc(var(--ouverture-plaque) * 1.25 + 14 * var(--u));
  padding-bottom: calc(var(--ouverture-lettre) + 9 * var(--u));
}
/* une éprouvette : le verre, et son liquide (un fond, haut de --h, que le verre arrondi rogne de lui-même) */
#regles-visuel .rv-barre {
  position: relative; flex: none; width: var(--ouverture-tube); height: auto;
  border: max(1.5px, calc(2 * var(--u))) solid var(--metal-clair); border-top-color: var(--metal-vif);
  border-radius: calc(5 * var(--u)) calc(5 * var(--u)) calc(var(--ouverture-tube) / 2) calc(var(--ouverture-tube) / 2);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(180deg, rgba(var(--texte-doux-rvb), 0.95) 0, rgba(var(--texte-doux-rvb), 0.95) max(1px, calc(1.5 * var(--u))), rgba(var(--texte-doux-rvb), 0.6) max(1px, calc(1.5 * var(--u))), rgba(var(--texte-doux-rvb), 0.3) 100%) left bottom / 100% var(--h) no-repeat,
    rgba(var(--verre-bas), 0.72);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.5), inset 0 0 calc(9 * var(--u)) rgba(0, 0, 0, 0.6);
  animation: ouverture-monte 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes ouverture-monte { from { background-size: auto, 100% 4%, auto; } }
/* les graduations gravées sur le verre */
#regles-visuel .rv-barre::after {
  content: ''; position: absolute; right: 0; top: 9%; bottom: 24%; width: 34%; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(var(--metal-clair-rvb), 0.6) 0, rgba(var(--metal-clair-rvb), 0.6) max(1px, calc(1 * var(--u))), transparent max(1px, calc(1 * var(--u))), transparent calc(11 * var(--u)));
}
/* la lettre, sous l'éprouvette : une pastille de laiton */
#regles-visuel .rv-barre b {
  position: absolute; top: calc(100% + 9 * var(--u)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
  display: grid; place-items: center; width: var(--ouverture-lettre); height: var(--ouverture-lettre); border-radius: 50%;
  font-family: var(--police-plateau); font-weight: 900; font-size: calc(var(--ouverture-lettre) * 0.5); line-height: 1;
  color: var(--sur-metal);
  background: linear-gradient(160deg, var(--metal-vif), var(--metal-clair) 38%, var(--metal-sombre) 78%, var(--metal-creux));
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.8);
  filter: saturate(0.7) brightness(0.8);
}
/* l'éprouvette de la foule : pleine, à l'accent du thème */
#regles-visuel .rv-barre.rv-foule {
  border-color: var(--accent); border-top-color: var(--accent-vif);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(180deg, var(--accent-vif) 0%, var(--accent) 16%, var(--accent-sombre) 100%) left bottom / 100% var(--h) no-repeat,
    rgba(var(--verre-bas), 0.72);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 calc(26 * var(--u)) rgba(var(--accent-rvb), 0.5), inset 0 0 calc(9 * var(--u)) rgba(0, 0, 0, 0.5);
}
/* ses bulles */
#regles-visuel .rv-barre.rv-foule::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    radial-gradient(circle at 30% 82%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0.75) calc(2.6 * var(--u)), transparent calc(3.2 * var(--u))),
    radial-gradient(circle at 62% 58%, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0.6) calc(2 * var(--u)), transparent calc(2.6 * var(--u))),
    radial-gradient(circle at 42% 30%, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.55) calc(1.6 * var(--u)), transparent calc(2.2 * var(--u))),
    radial-gradient(circle at 70% 14%, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) calc(1.3 * var(--u)), transparent calc(1.9 * var(--u)));
}
#regles-visuel .rv-barre.rv-foule b {
  color: var(--sur-accent); filter: none;
  background: radial-gradient(circle at 40% 32%, #fff 0%, var(--accent-vif) 22%, var(--accent) 62%, var(--accent-sombre) 100%);
  box-shadow: 0 0 calc(10 * var(--u)) var(--accent), 0 0 0 1px rgba(0, 0, 0, 0.8);
}
/* la plaquette « La foule », au-dessus de l'éprouvette pleine */
#regles-visuel .rv-barre.rv-foule em {
  position: absolute; top: auto; bottom: calc(100% + 8 * var(--u)); left: 50%; transform: translateX(-50%);
  padding: calc(2 * var(--u)) calc(9 * var(--u)); border-radius: calc(4 * var(--u)); white-space: nowrap; font-style: normal;
  font-family: var(--police-plateau); font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--ouverture-plaque); line-height: 1.25;
  color: var(--sur-accent);
  background: linear-gradient(180deg, var(--accent-vif), var(--accent));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 calc(12 * var(--u)) rgba(var(--accent-rvb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- Visuel 2, le temps par question : le nombre en grand, une jauge qui se vide, une vie qui s'éteint.
   app.js : .rv-chrono (le nombre), .rv-jauge > span. Les deux cœurs sont dessinés ici. ---------- */
#regles-visuel > .rv-chrono {
  flex: none; align-self: center;
  font-family: var(--police-plateau); font-weight: 900; font-size: var(--ouverture-nombre); line-height: 0.84; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--accent-vif);
  text-shadow:
    0 0 calc(26 * var(--u)) rgba(var(--accent-rvb), 0.6),
    0 0 calc(6 * var(--u)) rgba(var(--accent-rvb), 0.7),
    0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.7);
}
#regles-visuel > .rv-jauge {
  position: relative; flex: none; align-self: center;
  width: min(100%, var(--ouverture-jauge)); max-width: none; height: calc(14 * var(--u));
  margin-top: calc(16 * var(--u)); margin-bottom: calc(var(--ouverture-coeurs) + 14 * var(--u));
  border-radius: 999px; overflow: visible;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 0 max(1.5px, calc(2 * var(--u))) var(--metal-sombre);
}
#regles-visuel > .rv-jauge span {
  display: block; height: 100%; width: 62%; border-radius: inherit;
  background: linear-gradient(90deg, var(--metal-sombre), var(--accent));
  box-shadow: 0 0 calc(9 * var(--u)) rgba(var(--accent-rvb), 0.6);
  animation: ouverture-vide 4s linear infinite;
}
@keyframes ouverture-vide { from { width: 100%; } to { width: 0; } }
/* une vie pleine, une vie perdue (un dessin, découpé dans la couleur des cœurs) */
#regles-visuel > .rv-jauge::after {
  content: ''; position: absolute; left: 50%; top: calc(100% + 14 * var(--u)); transform: translateX(-50%);
  width: calc(var(--ouverture-coeurs) * 56 / 24); height: var(--ouverture-coeurs);
  background: linear-gradient(90deg, var(--vie) 0, var(--vie) 50%, var(--vie-eteinte) 50%, var(--vie-eteinte) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath d='M12 20.6s-7.6-4.7-7.6-10.4A4.35 4.35 0 0 1 12 7.5a4.35 4.35 0 0 1 7.6 2.7c0 5.7-7.6 10.4-7.6 10.4z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M44 20.6s-7.6-4.7-7.6-10.4A4.35 4.35 0 0 1 44 7.5a4.35 4.35 0 0 1 7.6 2.7c0 5.7-7.6 10.4-7.6 10.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24'%3E%3Cpath d='M12 20.6s-7.6-4.7-7.6-10.4A4.35 4.35 0 0 1 12 7.5a4.35 4.35 0 0 1 7.6 2.7c0 5.7-7.6 10.4-7.6 10.4z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' d='M44 20.6s-7.6-4.7-7.6-10.4A4.35 4.35 0 0 1 44 7.5a4.35 4.35 0 0 1 7.6 2.7c0 5.7-7.6 10.4-7.6 10.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Visuel 3, le dernier en lice : le trophée, et les joueurs éteints autour du dernier.
   app.js : .rv-trophee, vide. Le trophée et les joueurs sont deux dessins découpés dans le métal du thème. ---------- */
#regles-visuel .rv-trophee {
  flex: 1 1 0; min-height: 0; max-height: var(--ouverture-visuel-max); width: 100%; height: auto; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  background: none;
  filter: drop-shadow(0 0 calc(18 * var(--u)) rgba(var(--accent-rvb), 0.5)) drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.6));
}
#regles-visuel .rv-trophee::before {
  content: ''; flex: 1 1 0; min-height: 0; width: 100%;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.5) 43%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, var(--metal-vif) 0%, var(--metal-clair) 45%, var(--metal-sombre) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 4 46 55'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M20 13h-7c0 8 3 12 8 13M44 13h7c0 8-3 12-8 13'/%3E%3Cpath d='M19 7h26v14c0 10-5 16-13 17-8-1-13-7-13-17z'/%3E%3Crect x='29' y='37' width='6' height='9'/%3E%3Cpath d='M23 46h18l2 6H21z'/%3E%3Crect x='18' y='52' width='28' height='5' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9 4 46 55'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M20 13h-7c0 8 3 12 8 13M44 13h7c0 8-3 12-8 13'/%3E%3Cpath d='M19 7h26v14c0 10-5 16-13 17-8-1-13-7-13-17z'/%3E%3Crect x='29' y='37' width='6' height='9'/%3E%3Cpath d='M23 46h18l2 6H21z'/%3E%3Crect x='18' y='52' width='28' height='5' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: ouverture-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes ouverture-pop { from { opacity: 0; transform: scale(0.6); } }
/* sept joueurs : il n'en reste qu'un, au milieu, allumé */
#regles-visuel .rv-trophee::after {
  content: ''; flex: none; width: calc(var(--ouverture-pions) * 178 / 30); height: calc(var(--ouverture-pions) * 1.25);
  background: linear-gradient(90deg, rgba(var(--metal-clair-rvb), 0.42) 0, rgba(var(--metal-clair-rvb), 0.42) 40%, var(--accent-vif) 40%, var(--accent-vif) 59%, rgba(var(--metal-clair-rvb), 0.42) 59%, rgba(var(--metal-clair-rvb), 0.42) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 178 30'%3E%3Cdefs%3E%3Cg id='p'%3E%3Ccircle cx='12' cy='7.4' r='4.3'/%3E%3Cpath d='M4.4 21.4c1.3-4.9 4.5-7 7.6-7s6.3 2.1 7.6 7z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(0 7)'/%3E%3Cuse href='%23p' transform='translate(24 7)'/%3E%3Cuse href='%23p' transform='translate(48 7)'/%3E%3Cuse href='%23p' transform='translate(74 1) scale(1.25)'/%3E%3Cuse href='%23p' transform='translate(106 7)'/%3E%3Cuse href='%23p' transform='translate(130 7)'/%3E%3Cuse href='%23p' transform='translate(154 7)'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 178 30'%3E%3Cdefs%3E%3Cg id='p'%3E%3Ccircle cx='12' cy='7.4' r='4.3'/%3E%3Cpath d='M4.4 21.4c1.3-4.9 4.5-7 7.6-7s6.3 2.1 7.6 7z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(0 7)'/%3E%3Cuse href='%23p' transform='translate(24 7)'/%3E%3Cuse href='%23p' transform='translate(48 7)'/%3E%3Cuse href='%23p' transform='translate(74 1) scale(1.25)'/%3E%3Cuse href='%23p' transform='translate(106 7)'/%3E%3Cuse href='%23p' transform='translate(130 7)'/%3E%3Cuse href='%23p' transform='translate(154 7)'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---------- Visuel 4, le lot (demande de Gautier du 2026-10-16 : le lot en avant, SPECS 2.9) : la roue du
   professeur, et devant elle les bannières des jeux de la roue, en éventail, chacune dans le métal de son rang.
   app.js : .rv-lot > .rv-roue (vide) et .rv-bannieres ; .avec-bannieres quand au moins une bannière est posée ;
   chaque bannière : .rv-banniere (.rv-banniere-milieu, -gauche, -droite ; « rang rang-or »… pour son métal),
   et son image .rv-banniere-image. Sans bannière (jeux sans image, démonstration sans stock) : la roue seule,
   en grand. Rien n'y est à toucher : ni relief de bouton, ni curseur. ---------- */
#regles-visuel .rv-lot {
  flex: 1 1 0; min-height: 0; max-height: var(--ouverture-visuel-max); width: 100%; margin: 0;
  display: grid; align-items: center; justify-items: center;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
#regles-visuel .rv-lot > * { grid-area: 1 / 1; }
/* la roue : un cerclage de laiton, des secteurs aux couleurs du thème qui tournent lentement, un moyeu, un repère fixe */
#regles-visuel .rv-roue {
  position: relative; z-index: 1;
  width: var(--ouverture-roue-dessin); max-width: 100%; height: auto; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--metal-creux) 0 62%, var(--metal-sombre) 66%, var(--metal-vif) 69%, var(--metal-clair) 72%, var(--metal-creux) 100%);
  box-shadow: 0 0 calc(30 * var(--u)) rgba(var(--accent-rvb), 0.45), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.6);
}
#regles-visuel .rv-roue::after {
  content: ''; position: absolute; z-index: 1;
  top: 7%; right: 7%; bottom: 7%; left: 7%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--metal-vif) 0 9%, var(--metal-clair) 11%, var(--metal-creux) 13%, rgba(0, 0, 0, 0) 14%),
    repeating-conic-gradient(from 0deg, var(--accent) 0deg 21.5deg, var(--metal-vif) 21.5deg 22.5deg, var(--metal-creux) 22.5deg 44deg, var(--metal-vif) 44deg 45deg);
  animation: ouverture-roue-tourne 16s linear infinite;
}
@keyframes ouverture-roue-tourne { to { transform: rotate(360deg); } }
/* le repère, fixe, en haut de la roue : la case qu'il montre est le jeu du gagnant */
#regles-visuel .rv-roue::before {
  content: ''; position: absolute; z-index: 2;
  top: calc(-6 * var(--u)); left: 50%; width: 15%; height: 17%; margin-left: -7.5%;
  background: linear-gradient(180deg, var(--metal-vif), var(--metal-clair) 55%, var(--metal-sombre));
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.6));
}
/* avec des bannières : la roue recule derrière elles, plus petite, et elles prennent la scène */
#regles-visuel .rv-lot.avec-bannieres .rv-roue { width: calc(var(--ouverture-roue-dessin) * 0.95); box-shadow: 0 0 calc(40 * var(--u)) rgba(var(--accent-rvb), 0.35); }
#regles-visuel .rv-bannieres {
  position: relative; z-index: 2;
  width: var(--ouverture-lot); max-width: 100%; height: auto; aspect-ratio: 330 / 190;
}
#regles-visuel .rv-lot:not(.avec-bannieres) .rv-bannieres { display: none; }
#regles-visuel .rv-banniere {
  position: absolute; top: 4%; width: 50%; margin: 0;
  border-radius: calc(8 * var(--u)); overflow: hidden;
  border: max(1.5px, calc(2.5 * var(--u))) solid var(--rang-clair);
  background: var(--rang-bas);
  box-shadow: 0 0 calc(18 * var(--u)) var(--rang-lueur), 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
#regles-visuel .rv-banniere-image { display: block; width: 100%; height: auto; aspect-ratio: 460 / 215; object-fit: cover; }
#regles-visuel .rv-banniere-gauche { left: 0; z-index: 1; transform: rotate(-8deg); filter: brightness(0.78); animation: ouverture-eventail 0.6s ease-out 0.15s both; }
#regles-visuel .rv-banniere-droite { right: 0; z-index: 1; transform: rotate(8deg); filter: brightness(0.78); animation: ouverture-eventail 0.6s ease-out 0.25s both; }
#regles-visuel .rv-banniere-milieu {
  top: 26%; left: 16%; width: 68%; z-index: 3;
  border-width: max(2px, calc(3.5 * var(--u)));
  box-shadow: 0 0 calc(30 * var(--u)) rgba(var(--accent-rvb), 0.5), 0 calc(10 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.7);
  animation: ouverture-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes ouverture-eventail { from { opacity: 0; transform: rotate(0deg) translateY(calc(16 * var(--u))); } }
/* l'écran du lot : son titre prend l'éclat de l'or */
#ecran-regles.regles-lot #regles-titre { text-shadow: 0 0 calc(24 * var(--u)) rgba(var(--accent-rvb), 0.55), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.6); }


/* ============================================================================
   4. LA ROUE DU PROFESSEUR (#ecran-roue)
   ----------------------------------------------------------------------------
   app.js écrit, dans cet ordre dans la page : le surtitre, le titre (« Les
   jeux de ce soir » au début, « Le jeu du soir » à la fin, « Roue de
   démonstration », « Pas de lot ce soir »), la consigne, la vitrine (au début
   seulement, section 4 bis), la roue (à la fin seulement : elle tourne pour le
   gagnant), le verdict (vide tant que la roue n'a pas tourné), la ligne de
   l'engagement (cachée à l'arrêt), les preuves (montrées à l'arrêt).

   Téléphone debout : une colonne. LA ROUE NE BOUGE JAMAIS d'un état à l'autre :
   elle tient au haut du panneau, sous le titre, et ce qui change est dessous.
   Sous elle, le verdict (au-dessus) et la ligne du bas (engagement ou preuves)
   grandissent autant l'un que l'autre : le verdict, la consigne et la ligne du
   bas se tiennent ensemble au milieu de la place qui reste. Sans lot, ni roue
   ni verdict ni ligne du bas : rien ne grandit, et les marges automatiques du
   surtitre et de la consigne rassemblent les trois lignes au milieu du panneau.
   ========================================================================== */
#ecran-roue.scene {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0; padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u));
  --taille-titre: calc(27 * var(--u));
  --ouverture-verdict: calc(25 * var(--u));        /* le jeu du soir, sous la roue */
  --ouverture-verdict-place: 730;                  /* ce qu'il peut occuper : largeur x lignes, en « u », pour une lettre d'un cadratin */
  --ouverture-titre-case: max(16px, calc(16 * var(--u)));
  --ouverture-part-case: max(16px, calc(16 * var(--u)));
}
#ecran-roue > .annonce-surtitre { order: 1; margin-top: auto; }
#roue-titre { order: 2; margin-top: calc(2 * var(--u)); max-width: 100%; white-space: nowrap; }
/* « Roue de démonstration » : vingt et une lettres, sur une ligne aussi */
body.demonstration #roue-titre { font-size: max(16px, calc(var(--taille-titre) * 0.72)); line-height: 1.45; }
/* (isolation : le repère et l'ombre du tambour restent dans la roue, sous la carte des preuves) */
#roue-rouleau { order: 3; flex: none; width: 100%; max-width: calc(400 * var(--u)); margin-top: calc(9 * var(--u)); isolation: isolate; }
#roue-verdict {
  order: 4; flex: 1 1 auto; align-self: stretch; margin: 0; padding-top: calc(8 * var(--u));
  display: flex; align-items: flex-end; justify-content: center;
  text-transform: uppercase; line-height: 1.08;
  /* un titre long rétrécit pour tenir sous la roue : app.js tient son nombre de lettres dans --car */
  font-size: clamp(max(16px, calc(16 * var(--u))), calc(var(--ouverture-verdict-place) * var(--u) / var(--car, 20)), var(--ouverture-verdict));
}
/* vide (la roue n'a pas tourné) : il garde sa place de pièce qui grandit, pour que la consigne reste au milieu */
#ecran-roue #roue-verdict:empty { display: block; padding-top: 0; }
/* pas de lot ce soir (la roue est cachée) : pas de verdict du tout */
#ecran-roue #roue-rouleau[hidden] ~ #roue-verdict { display: none; }
#roue-consigne {
  order: 5; margin-top: calc(5 * var(--u)); margin-bottom: auto; max-width: 100%;
  font-size: var(--taille-texte); line-height: 1.28; color: var(--texte);
}
/* (ni le verdict ni la ligne du bas ne se tassent sous leur texte : si la place venait à manquer, rien ne
   remonterait sur la roue) */
#roue-engagement, #roue-preuve { order: 6; flex: 1 1 auto; align-self: stretch; margin-top: calc(4 * var(--u)); }
#roue-engagement { font-size: var(--taille-note); line-height: 1.28; font-variant-numeric: tabular-nums; }

/* ---------- La roue : un rouleau vertical ---------- */
/* la fenêtre : trois cases (socle), dans un cadre de métal */
#ecran-roue .rouleau-fenetre {
  position: relative; border-radius: calc(14 * var(--u));
  background: rgb(var(--verre-bas));
  box-shadow:
    0 0 0 max(1.5px, calc(2 * var(--u))) var(--metal-sombre),
    0 0 0 max(2.5px, calc(3.2 * var(--u))) rgba(0, 0, 0, 0.75),
    0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.5);
}
/* l'ombre du tambour : un filet d'ombre en haut et en bas de la fenêtre, par-dessus la bande. Elle ne
   descend pas jusqu'au texte des cases : elle s'efface à 6 u du bord au plus, et le texte d'une case
   commence à 7 u du bord au moins. */
#ecran-roue .rouleau-fenetre::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 calc(5 * var(--u)) calc(6 * var(--u)) calc(-2 * var(--u)) rgba(0, 0, 0, 0.9), inset 0 calc(-5 * var(--u)) calc(6 * var(--u)) calc(-2 * var(--u)) rgba(0, 0, 0, 0.9);
}

/* Une case. Elle garde la hauteur que le socle lui donne (--roue-case) : la carte qu'on voit est
   DÉCOUPÉE dedans (clip-path), avec ses coins ronds et son écart. Verre noir sans rang, métal teinté
   avec (la palette --rang-… du socle). Rien ne s'ajoute au fond sous le texte, hors le reflet. */
#ecran-roue .rouleau-carte {
  --ouverture-retrait-v: calc(2 * var(--u)); --ouverture-retrait-h: calc(6 * var(--u)); --ouverture-coin: calc(10 * var(--u));
  gap: 0; padding: 0 calc(17 * var(--u));
  border: 0;
  background: linear-gradient(180deg, var(--rang-haut), var(--rang-coeur) 46%, var(--rang-bas));
  box-shadow: none;
  -webkit-clip-path: inset(var(--ouverture-retrait-v) var(--ouverture-retrait-h) round var(--ouverture-coin));
  clip-path: inset(var(--ouverture-retrait-v) var(--ouverture-retrait-h) round var(--ouverture-coin));
}
/* le reflet : fixe, au premier tiers de la case ; seul l'or le voit passer (c'est son seul mouvement) */
#ecran-roue .rouleau-carte::before {
  content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 22%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, var(--rang-reflet) 50%, transparent 100%);
  transform: translateX(70%);
}
#ecran-roue .rouleau-carte.carte-rang-or::before { animation: ouverture-reflet 5s ease-in-out infinite; }
@keyframes ouverture-reflet { 0% { transform: translateX(-130%); } 42%, 100% { transform: translateX(480%); } }
/* le cadre, du métal de la case */
#ecran-roue .rouleau-carte::after {
  content: ''; position: absolute; pointer-events: none;
  top: var(--ouverture-retrait-v); bottom: var(--ouverture-retrait-v); left: var(--ouverture-retrait-h); right: var(--ouverture-retrait-h);
  border-radius: var(--ouverture-coin);
  padding: max(1.2px, calc(1.6 * var(--u)));
  background: linear-gradient(168deg, var(--rang-vif) 0%, var(--rang-clair) 22%, var(--rang-creux) 55%, var(--rang-sombre) 80%, var(--rang-vif) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
#ecran-roue .rouleau-carte:not(.carte-rang)::after { opacity: 0.55; }
/* le titre du jeu : deux lignes au plus (un titre de cinquante lettres y tient presque toujours ; il se lit en entier à l'arrêt) */
#ecran-roue .carte-label {
  position: relative; z-index: 1; max-width: 100%;
  white-space: normal; text-wrap: balance; overflow: hidden; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: var(--ouverture-titre-case); line-height: 1; letter-spacing: 0.02em;
  color: var(--rang-titre);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
#ecran-roue .carte-pourcent {
  position: relative; z-index: 1; white-space: nowrap;
  margin-top: calc(1 * var(--u));
  font-size: var(--ouverture-part-case); line-height: 1; font-weight: 500; letter-spacing: 0.02em;
  color: var(--rang-part);
}
/* la case tirée, une fois la roue arrêtée : elle garde son métal, son cadre s'épaissit, s'éclaire et bat trois
   fois. Le fond et le texte ne changent pas (l'animation du socle les éclaircissait ensemble : elle est retirée). */
#ecran-roue .rouleau-carte.carte-gagnante { animation: none; }
#ecran-roue .rouleau-carte.carte-gagnante::after {
  opacity: 1; padding: max(2px, calc(2.6 * var(--u)));
  background: linear-gradient(168deg, var(--rang-vif) 0%, var(--rang-vif) 40%, var(--rang-clair) 70%, var(--rang-vif) 100%);
  animation: ouverture-tiree 0.9s ease-in-out 3;
}
@keyframes ouverture-tiree { 50% { opacity: 0.35; } }

/* Le repère : deux filets et deux pointes de métal, autour de la case du milieu (sa place est celle du socle) */
#ecran-roue .rouleau-repere {
  left: calc(-7 * var(--u)); right: calc(-7 * var(--u)); z-index: 3;
  border-radius: 0; box-shadow: none;
  background:
    linear-gradient(90deg, transparent, var(--metal-vif) 9%, var(--accent) 50%, var(--metal-vif) 91%, transparent) left top / 100% max(1.5px, calc(2 * var(--u))) no-repeat,
    linear-gradient(90deg, transparent, var(--metal-vif) 9%, var(--accent) 50%, var(--metal-vif) 91%, transparent) left bottom / 100% max(1.5px, calc(2 * var(--u))) no-repeat;
  filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(var(--accent-rvb), 0.6));
}
#ecran-roue .rouleau-repere::before, #ecran-roue .rouleau-repere::after {
  content: ''; position: absolute; top: 50%; width: calc(11 * var(--u)); height: calc(18 * var(--u));
  background: linear-gradient(180deg, var(--metal-vif), var(--metal-clair) 40%, var(--metal-creux));
  transform: translateY(-50%);
}
#ecran-roue .rouleau-repere::before { left: 0; -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
#ecran-roue .rouleau-repere::after { right: 0; -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%); clip-path: polygon(100% 0, 0 50%, 100% 100%); }

/* La roue arrêtée, à la fin : « Tu remportes ce jeu ! » est la phrase du moment (app.js pose .roue-arretee) */
#ecran-roue.roue-arretee #roue-consigne { font-weight: 700; color: var(--texte); font-size: calc(var(--taille-texte) * 1.15); }
/* Le jeu du soir : à la teinte de son rang (socle : .lot-gagne, .verdict-rang-…), il luit */
#ecran-roue #roue-verdict.lot-gagne {
  text-shadow:
    0 0 calc(18 * var(--u)) var(--rang-teinte),
    0 0 calc(46 * var(--u)) var(--rang-teinte),
    0 2px 0 rgba(0, 0, 0, 0.6);
  animation: ouverture-eclat-doux 1.5s ease-in-out infinite;
}
@keyframes ouverture-eclat-doux { 50% { filter: brightness(1.18); } }


/* ============================================================================
   4 bis. LA PRÉSENTATION : TOUS LES JEUX DE LA ROUE (#roue-vitrine)
   ----------------------------------------------------------------------------
   Depuis le 2026-10-14 (SPECS 7.1), la roue ne tourne qu'à la FIN, pour le
   gagnant. Au début de la partie, elle est seulement montrée, immobile, avec
   TOUS ses jeux : le programme pose #ecran-roue[data-roue="presentation"],
   cache la roue et écrit la vitrine (app.js, construireVitrine) :
     .vitrine-rang.vitrine-heros       le rang le plus précieux, en premier :
       .vitrine-plaques > .rouleau-carte  ses jeux (trois au plus) posés comme les
                                          cases de la roue, dans leur métal ;
       sinon .vitrine-chance + .vitrine-jeu  sa chance, puis ses titres, en grand
     .vitrine-rang                     chaque autre rang, une ligne, en petit :
                                       sa chance (« 6,7 % chacun »), ses titres ;
                                       replié (.vitrine-replie) : « 8 jeux »
   La teinte d'un rang (.rang .rang-or…, socle) colore sa pastille et ses
   titres. Rien n'y est à toucher : ni pied, ni relief, ni curseur. Ce qui ne
   tient pas se replie (le programme le mesure : la vitrine ne doit rien
   rogner) : la vitrine se resserre (.vitrine-serree), puis les titres du
   héros passent à la taille du texte (.vitrine-compacte), puis les rangs les
   moins précieux se replient, puis le héros s'abrège (« et 5 autres »).
   ========================================================================== */
/* Pendant la présentation : ni verdict, ni place réservée à lui ; la ligne du bas ne grandit plus, la vitrine
   et ses deux lignes se tiennent au milieu du panneau (marges automatiques du surtitre et de la consigne) */
#ecran-roue[data-roue="presentation"] #roue-verdict { display: none; }
#ecran-roue[data-roue="presentation"] #roue-engagement { flex: none; }
#roue-vitrine {
  order: 3; flex: 0 1 auto; min-height: 0; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: calc(10 * var(--u));
  margin-top: calc(12 * var(--u)); overflow: hidden;
}
#roue-vitrine.vitrine-serree { gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
#roue-vitrine .vitrine-rang {
  margin: 0; text-align: center; text-wrap: balance;
  font-size: var(--taille-texte); line-height: 1.4; color: var(--texte-doux);
}
#roue-vitrine.vitrine-serree .vitrine-rang { line-height: 1.28; }
/* la chance du rang, et sa pastille : une bille de la teinte du rang (un dessin, rien à toucher) */
#roue-vitrine .vitrine-chance {
  margin-right: calc(7 * var(--u)); white-space: nowrap;
  font-weight: 700; font-variant-numeric: tabular-nums lining-nums;
  color: var(--rang-teinte-vive, var(--texte));
}
#roue-vitrine .vitrine-chance::before {
  content: ''; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.4em; border-radius: 50%; vertical-align: 0.02em;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), var(--rang-teinte, var(--metal-clair)) 45%, rgba(0, 0, 0, 0.55) 100%);
}
/* un titre, à la teinte de son rang ; un point médian les sépare */
#roue-vitrine .vitrine-jeu {
  display: inline-block; max-width: 100%; margin-right: 0.45em;
  font-family: var(--police-plateau); font-weight: 700; letter-spacing: 0.02em; overflow-wrap: anywhere;
  color: var(--rang-teinte-vive, var(--texte));
}
/* (un titre ne se coupe pas d'une ligne à l'autre, sauf s'il est plus long qu'une ligne ; le point le suit) */
#roue-vitrine .vitrine-jeu:not(:last-child)::after {
  content: ''; display: inline-block; width: 0.22em; height: 0.22em; margin-left: 0.45em; border-radius: 50%; vertical-align: 0.24em;
  background: var(--texte-doux);
}
#roue-vitrine .vitrine-autres { font-family: var(--police-texte); font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--texte-doux); }
/* le reste, discret : ses titres dans l'écriture du texte */
#roue-vitrine .vitrine-rang:not(.vitrine-heros) .vitrine-jeu { font-family: var(--police-texte); font-weight: 600; letter-spacing: 0; }
/* le héros en titres : sa chance sur sa ligne, ses titres en grand, dans l'écriture du plateau */
#roue-vitrine .vitrine-heros:not(.vitrine-plaques) { font-size: calc(var(--taille-texte) * 1.3); line-height: 1.3; }
#roue-vitrine .vitrine-heros:not(.vitrine-plaques) .vitrine-chance { display: block; margin: 0 0 calc(3 * var(--u)); font-size: var(--taille-note); letter-spacing: 0.06em; }
#roue-vitrine.vitrine-serree .vitrine-heros:not(.vitrine-plaques) { font-size: calc(var(--taille-texte) * 1.16); }
/* compacte (le dernier palier avant de replier un rang) : ses titres à la taille du texte, ils se suivent sur une ligne */
#roue-vitrine.vitrine-compacte .vitrine-heros:not(.vitrine-plaques) { font-size: var(--taille-texte); }
/* le héros en plaques : les cases de la roue, côte à côte. Leur hauteur est celle d'une case de la roue (le
   socle) et leur habit celui des cases (section 4) : seule leur largeur se règle ici. */
#roue-vitrine .vitrine-plaques { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)); }
#roue-vitrine .vitrine-plaques .rouleau-carte { flex: 1 1 calc(150 * var(--u)); min-width: 0; max-width: calc(330 * var(--u)); }


/* ============================================================================
   4 ter. LES IMAGES DES JEUX (SPECS 7.1 bis, allure « Bannière »)
   ----------------------------------------------------------------------------
   Dès qu'un jeu de la roue a son image (la bannière de sa page Steam, copiée
   sur notre serveur), la présentation devient une MOSAÏQUE et la roue de fin
   une roue À IMAGES. Le programme pose (app.js, construireMosaique et
   construireBande) :
     #roue-vitrine.vitrine-images           la mosaïque (.vitrine-noms : les noms
                                            sous les images, .vitrine-serree)
       .vitrine-rang.rang[.rang-or…]        un rang : .vitrine-tete (sa chance, son
                                            nombre de jeux), .vitrine-mosaique (ses
                                            jeux) ; .vitrine-bande : une rangée de
                                            petites images ; .vitrine-en-titres : la
                                            ligne de la vitrine d'avant (section 4 bis) ;
                                            faute de place, la vitrine d'avant entière
         .vitrine-tuile[.avec-image]        un jeu : img.image-jeu, et son nom
                                            (figcaption.vitrine-tuile-nom) ; sans
                                            image, sa case avec son nom
       .vitrine-a-vedette > .vitrine-vedette    le seul jeu du rang le plus précieux
     #roue-rouleau.roue-images              la roue de fin : chaque case a la
                                            hauteur d'une bannière (--roue-case-image,
                                            pixels entiers, pupitre.js) ; la fenêtre
                                            en montre une entière et deux moitiés
       .rouleau-carte.carte-image > img.carte-image-jeu
   Une image n'est jamais un bouton : à plat, cerclée du métal de son rang, ni
   pied, ni relief, ni survol, ni curseur. Rien n'est écrit sur une image.
   Sur téléphone les images seules ; sur ordinateur, les noms dessous quand ils
   tiennent (le programme mesure). Sans image, rien ne change (sections 4, 4 bis).
   ========================================================================== */
/* ---------- La mosaïque de la présentation ---------- */
/* (une marge intérieure de la largeur du cadre des bannières : sans elle, le cadre de la dernière rangée,
   dessiné hors de la bannière, était rogné par le bord de la vitrine ; vu le 2026-10-15 avec les seize jeux du
   stock et le gros lot, à 390 x 844) */
#roue-vitrine.vitrine-images { gap: calc(10 * var(--u)); padding: max(2px, calc(3 * var(--u))); }
#roue-vitrine.vitrine-images.vitrine-serree { gap: calc(6 * var(--u)); }
/* la tête d'un rang : sa bille et sa chance (section 4 bis), puis son nombre de jeux, plus doux */
#roue-vitrine .vitrine-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0;
  margin: 0 0 calc(5 * var(--u)); font-size: var(--taille-note); line-height: 1.25;
}
#roue-vitrine.vitrine-serree .vitrine-tete { margin-bottom: calc(3 * var(--u)); }
#roue-vitrine .vitrine-tete .vitrine-chance { margin-right: 0; }
#roue-vitrine .vitrine-compte { color: var(--texte-doux); font-variant-numeric: tabular-nums lining-nums; }
/* (le point qui sépare la chance du nombre de jeux : une forme, pas un texte) */
#roue-vitrine .vitrine-compte::before {
  content: ''; display: inline-block; width: 0.22em; height: 0.22em; margin: 0 0.5em; border-radius: 50%; vertical-align: 0.24em;
  background: var(--texte-doux);
}
/* les jeux d'un rang : trois par rangée sur téléphone, la dernière rangée centrée */
#roue-vitrine .vitrine-mosaique {
  display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--u));
  --ouverture-tuile: calc((100% - 2 * 6 * var(--u)) / 3);
}
#roue-vitrine.vitrine-serree .vitrine-mosaique { gap: calc(4 * var(--u)); --ouverture-tuile: calc((100% - 2 * 4 * var(--u)) / 3); }
/* le héros (le rang le plus précieux) : deux jeux, deux grandes bannières ; un seul (sans autre rang), une seule */
#roue-vitrine .vitrine-heros .vitrine-mosaique[data-jeux="2"] { --ouverture-tuile: calc((100% - 6 * var(--u)) / 2); }
#roue-vitrine .vitrine-heros .vitrine-mosaique[data-jeux="1"] { --ouverture-tuile: calc(260 * var(--u)); }
/* un jeu : sa bannière, entière (460 x 215), cerclée du métal de son rang ; à plat */
#roue-vitrine .vitrine-tuile {
  flex: 0 0 var(--ouverture-tuile); min-width: 0; max-width: 100%; margin: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: calc(3 * var(--u));
}
#roue-vitrine .vitrine-tuile .image-jeu {
  display: block; width: 100%; height: auto; aspect-ratio: 460 / 215; object-fit: cover;
  border-radius: calc(6 * var(--u));
  box-shadow: 0 0 0 max(1px, calc(1.4 * var(--u))) var(--rang-clair), 0 0 0 max(2px, calc(2.6 * var(--u))) rgba(0, 0, 0, 0.6);
}
/* son nom, sous l'image : seulement quand il y a la place (ordinateur, section 7) ; sur téléphone, le titre
   est dans le texte de remplacement de l'image */
#roue-vitrine .vitrine-tuile.avec-image > .vitrine-tuile-nom { display: none; }
/* un jeu sans image : la case d'aujourd'hui, à la taille d'une bannière, le verre de son rang et son nom */
#roue-vitrine .vitrine-tuile:not(.avec-image) {
  aspect-ratio: 460 / 215; justify-content: center; align-items: center; overflow: hidden;
  padding: 0 calc(5 * var(--u)); border-radius: calc(6 * var(--u));
  background: linear-gradient(180deg, var(--rang-haut), var(--rang-coeur) 46%, var(--rang-bas));
  box-shadow: inset 0 0 0 max(1px, calc(1.4 * var(--u))) var(--rang-clair), inset 0 0 calc(14 * var(--u)) var(--rang-lueur);
}
#roue-vitrine .vitrine-tuile-nom {
  min-width: 0; max-width: 100%; overflow: hidden; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-family: var(--police-texte); font-weight: 700; font-size: var(--taille-note); line-height: 1.12; letter-spacing: 0;
  color: var(--rang-titre);
}
/* une rangée de petites images (un rang peu précieux, six jeux au plus, quand la place manque) : sans les noms */
#roue-vitrine .vitrine-bande .vitrine-mosaique { flex-wrap: nowrap; }
#roue-vitrine .vitrine-bande .vitrine-tuile { flex: 1 1 0; max-width: calc(96 * var(--u)); }
#roue-vitrine .vitrine-bande .vitrine-tuile-nom { display: none; }

/* ---------- Le gros lot : le seul jeu du rang le plus précieux, mis en avant ---------- */
#roue-vitrine .vitrine-vedette {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  margin: 0 auto; max-width: 100%; padding: calc(7 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u));
  border-radius: calc(12 * var(--u)); text-align: left;
  background: linear-gradient(180deg, var(--rang-haut), var(--rang-coeur) 46%, var(--rang-bas));
  box-shadow: inset 0 0 calc(22 * var(--u)) var(--rang-lueur), 0 0 calc(18 * var(--u)) var(--rang-lueur);
}
/* son cadre : le métal de son rang, découpé en anneau (comme une case de la roue) */
#roue-vitrine .vitrine-vedette::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  padding: max(1.5px, calc(2 * var(--u)));
  background: linear-gradient(168deg, var(--rang-vif) 0%, var(--rang-clair) 22%, var(--rang-creux) 55%, var(--rang-sombre) 80%, var(--rang-vif) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
#roue-vitrine .vitrine-vedette-image {
  flex: none; display: block; width: calc(150 * var(--u)); height: auto; aspect-ratio: 460 / 215; object-fit: cover;
  border-radius: calc(7 * var(--u)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
#roue-vitrine .vitrine-vedette:not(.avec-image) { text-align: center; }
#roue-vitrine .vitrine-vedette-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
/* « Le gros lot » : un texte qu'on lit, jamais sous 16 px (il était à 10,9 px sur téléphone avant le 2026-10-15) */
#roue-vitrine .vitrine-vedette-etiquette {
  font-family: var(--police-plateau); font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: max(16px, calc(14 * var(--u))); line-height: 1.2; color: var(--rang-titre);
}
#roue-vitrine .vitrine-vedette-titre {
  font-family: var(--police-plateau); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.08;
  font-size: max(16px, calc(16 * var(--u))); color: var(--rang-titre); text-wrap: balance; overflow-wrap: normal;
  text-shadow: 0 0 calc(12 * var(--u)) var(--rang-lueur), 0 1px 0 rgba(0, 0, 0, 0.6);
}
#roue-vitrine .vitrine-vedette-chance { font-size: var(--taille-note); line-height: 1.25; font-weight: 700; color: var(--rang-part); }
/* un mot du titre ne tient pas à côté de la bannière (le programme le mesure : app.js, empilerLaVedetteSiBesoin) :
   la bannière se fait plus petite ; s'il ne tient toujours pas, elle passe au-dessus du titre, plutôt qu'un mot
   coupé en plein milieu */
#roue-vitrine .vitrine-vedette.vitrine-vedette-etroite .vitrine-vedette-image { width: calc(104 * var(--u)); }
#roue-vitrine .vitrine-vedette.vitrine-vedette-empilee {
  flex-direction: column; text-align: center; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u));
}
#roue-vitrine .vitrine-vedette.vitrine-vedette-empilee .vitrine-vedette-image { width: min(100%, calc(220 * var(--u))); }
#roue-vitrine .vitrine-vedette.vitrine-vedette-empilee .vitrine-vedette-texte { align-self: stretch; }
#roue-vitrine .vitrine-vedette.vitrine-vedette-empilee .vitrine-vedette-titre { overflow-wrap: anywhere; }

/* la présentation à images : la consigne et l'engagement se suivent sous la mosaïque, et l'écran se rassemble au
   milieu du panneau (la place qui reste n'est plus coupée en deux, entre la consigne et l'engagement) */
:where(#ecran-roue.scene.roue-images[data-roue="presentation"]) #roue-consigne { margin-bottom: 0; }
:where(#ecran-roue.scene.roue-images[data-roue="presentation"]) #roue-engagement { margin-bottom: auto; }

/* ---------- La roue de fin, à images ----------
   Toutes les cases ont la hauteur d'une bannière et de son cadre, en pixels ENTIERS (--roue-case-image, que
   pupitre.js tient comme --roue-case) ; la fenêtre en montre DEUX hauteurs : la case tirée, entière, au milieu,
   et une moitié de chaque côté ; le repère cercle le milieu. La roue prend la largeur d'une bannière à cette
   hauteur. Le programme pose la case au milieu de la fenêtre, quelle que soit sa hauteur (app.js, placerBande). */
#roue-rouleau.roue-images {
  --ouverture-image-v: calc(2 * var(--u)); --ouverture-image-h: calc(6 * var(--u));
  --ouverture-roue-large: calc((var(--roue-case-image) - 2 * var(--ouverture-image-v)) * 460 / 215 + 2 * var(--ouverture-image-h));
  width: var(--ouverture-roue-large);
}
#roue-rouleau.roue-images .rouleau-fenetre { height: calc(2 * var(--roue-case-image)); }
#roue-rouleau.roue-images .rouleau-carte {
  height: var(--roue-case-image);
  --ouverture-retrait-v: var(--ouverture-image-v); --ouverture-retrait-h: var(--ouverture-image-h); --ouverture-coin: calc(8 * var(--u));
}
#roue-rouleau.roue-images .rouleau-repere { top: calc(0.5 * var(--roue-case-image)); height: var(--roue-case-image); }
/* la bannière remplit la carte découpée dans la case ; le cadre de métal (::after) passe par-dessus son bord */
#roue-rouleau .carte-image-jeu {
  position: absolute; top: var(--ouverture-retrait-v); left: var(--ouverture-retrait-h);
  width: calc(100% - 2 * var(--ouverture-retrait-h)); height: calc(100% - 2 * var(--ouverture-retrait-v));
  object-fit: cover; border-radius: var(--ouverture-coin);
}
/* rien n'est écrit sur une image : le nom et la chance du jeu restent dans la case, cachés (ils reviennent si
   l'image ne vient pas : le programme retire alors .carte-image) */
#roue-rouleau .carte-image > .carte-label, #roue-rouleau .carte-image > .carte-pourcent { visibility: hidden; }
/* le rang doré garde son reflet qui passe : sur la bannière, par-dessus l'image (aucun texte dessous) */
#roue-rouleau .carte-rang-or.carte-image::before { z-index: 1; }
/* à l'arrêt : la case tirée s'allume (son cadre, section 4), les bannières de ses voisines s'éteignent ; un seul
   héros. (L'image seule : le nom d'une case sans image garde sa couleur, rien n'assombrit un texte.) */
#ecran-roue.roue-arretee #roue-rouleau.roue-images .rouleau-carte:not(.carte-gagnante) > .carte-image-jeu { opacity: 0.3; }

/* ---------- La fin, sur téléphone debout : pas de grand vide entre la roue et le jeu annoncé ----------
   Le jeu annoncé, la phrase et la ligne du bas se tiennent SOUS la roue, et tout l'écran se rassemble au milieu
   du panneau. Pour que la roue ne bouge pas quand elle s'arrête, ces trois pièces gardent la même place avant
   et après : le jeu annoncé, deux lignes (vide tant que la roue tourne) ; la phrase, une ligne de la phrase forte
   (« Tu remportes ce jeu ! ») ; la ligne du bas, une touche de 44 px (l'engagement y tient en deux lignes).
   (:where : ces règles pèsent comme celles qu'elles remplacent ; ordinateur et téléphone couché, écrits plus
   bas, gardent les leurs.) */
:where(#ecran-roue.scene[data-roue="fin"]) #roue-verdict {
  flex: none; min-height: calc(2 * 1.08 * var(--ouverture-verdict) + 8 * var(--u));
}
:where(#ecran-roue.scene[data-roue="fin"]) #roue-consigne { margin-bottom: 0; min-height: calc(var(--taille-texte) * 1.15 * 1.28); }
:where(#ecran-roue.scene[data-roue="fin"]) #roue-engagement,
:where(#ecran-roue.scene[data-roue="fin"]) #roue-preuve { flex: none; min-height: max(44px, calc(44 * var(--u))); margin-bottom: auto; }


/* ============================================================================
   5. LES PREUVES DU TIRAGE (#roue-preuve)
   ----------------------------------------------------------------------------
   Repliées : une ligne à toucher, sous la consigne. Dépliées : une carte qui
   couvre le panneau de la roue (posée exprès dessus : --mesure) ; ses valeurs
   défilent à l'intérieur, et c'est la seule zone de cet écran qui défile. La
   même ligne, en tête de la carte, la referme. Ni la ligne ni la zone qui
   défile ne dépendent de la façon dont le navigateur range un <details> : la
   zone est posée en absolu dans la carte.
   Laissée dépliée, la carte couvrirait la roue SUIVANTE à l'instant où elle
   s'arrête (le programme cache les preuves à chaque nouvelle roue, puis les
   remontre) : le décor les replie dès qu'elles sont cachées (pupitre.js,
   replierLesPreuvesDeLaRoue ; gardé par test/pupitre-ouverture.test.js).
   ========================================================================== */
#roue-preuve { text-align: center; }
#roue-preuve > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  min-height: max(44px, calc(44 * var(--u))); padding: 0 calc(10 * var(--u)); list-style: none;
  font-size: var(--taille-texte); line-height: 1.2;
}
#roue-preuve > summary::-webkit-details-marker { display: none; }
#roue-preuve > summary:focus-visible { outline: var(--anneau-clavier); outline-offset: 2px; border-radius: calc(6 * var(--u)); }
/* le chevron : il pointe vers le bas, replié ; vers le haut, déplié (un dessin, pas un texte) */
#roue-preuve > summary::after {
  content: ''; flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(-4 * var(--u));
  border: solid var(--accent-vif); border-width: 0 max(1.5px, calc(2 * var(--u))) max(1.5px, calc(2 * var(--u))) 0;
  transform: rotate(45deg);
}
#roue-preuve[open] {
  --mesure: chevauche;
  /* (grid-area: auto, et étirée : là où l'écran est une grille, la carte se pose sur le panneau entier, pas dans sa
     case ; alignée « au début » comme la ligne repliée, elle ne prendrait que la hauteur de sa première ligne) */
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; margin: 0;
  grid-area: auto; align-self: stretch; justify-self: stretch; width: auto; height: auto; min-height: 0;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, rgb(var(--verre-haut)), rgb(var(--verre-bas)));
  --ouverture-tete: calc(max(44px, calc(44 * var(--u))) + 14 * var(--u));
}
#roue-preuve[open] > summary { display: flex; min-height: 0; height: var(--ouverture-tete); padding-top: calc(8 * var(--u)); }
#roue-preuve[open] > summary::after { margin-top: calc(4 * var(--u)); transform: rotate(-135deg); }
#roue-preuve[open] > div {
  position: absolute; top: var(--ouverture-tete); right: calc(14 * var(--u)); bottom: calc(14 * var(--u)); left: calc(14 * var(--u));
  max-height: none; padding: calc(10 * var(--u)) calc(12 * var(--u)); gap: calc(8 * var(--u));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent;
  text-align: left;
}
/* le verdict du recalcul d'abord (app.js l'écrit en dernier) : vert, vérifié ; rouge, une anomalie ; ambre, une réserve */
#roue-preuve .preuve-verdict {
  order: -1; margin: 0; padding: calc(8 * var(--u)) calc(11 * var(--u)); border-radius: calc(9 * var(--u));
  font-size: var(--taille-texte); line-height: 1.35;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset max(2.5px, calc(3 * var(--u))) 0 0 var(--metal-clair);
}
#roue-preuve .preuve-verdict.preuve-ok { box-shadow: inset max(2.5px, calc(3 * var(--u))) 0 0 var(--ok); }
#roue-preuve .preuve-verdict.preuve-ko { box-shadow: inset max(2.5px, calc(3 * var(--u))) 0 0 var(--alerte); }
#roue-preuve .preuve-verdict.preuve-reserve { box-shadow: inset max(2.5px, calc(3 * var(--u))) 0 0 var(--accent); }
#roue-preuve .preuve-ligne { flex: none; gap: calc(2 * var(--u)); padding-top: calc(6 * var(--u)); border-top: 1px solid rgba(var(--metal-clair-rvb), 0.18); }
#roue-preuve .preuve-cle { font-size: var(--taille-note); line-height: 1.3; }
#roue-preuve .preuve-valeur { font-size: var(--taille-texte); line-height: 1.35; font-variant-numeric: tabular-nums; }
#roue-preuve .preuve-copier { flex: none; align-self: center; text-align: center; line-height: 1.25; }


/* ============================================================================
   6. L'ANNONCE DE LA FINALE (#ecran-annonce.annonce-finale)
   ----------------------------------------------------------------------------
   app.js pose .annonce-finale sur l'écran de l'annonce et y écrit : le surtitre
   (« — Manche 16 — »), « LA FINALE », la devise (« La vérité seule compte. »),
   la phrase des deux survivants (ou, pour qui regarde sans jouer, la mention du
   serveur : « Tu regardes cette finale : … »), la règle (« FINALE : la bonne
   réponse l'emporte ! ») et le rappel du jeu du soir.
   L'annonce ordinaire d'une manche est à manche.css : chaque règle d'ici est
   écrite sous .annonce-finale, et dit tout ce dont elle a besoin (elle ne
   compte pas sur ce que l'autre feuille aura posé sur le même écran).
   ========================================================================== */
#ecran-annonce.annonce-finale {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u));
  /* le carton de la finale : une lueur d'accent autour du cerclage */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.75),
    0 0 calc(40 * var(--u)) rgba(var(--accent-rvb), 0.45),
    0 calc(12 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, 0.55),
    inset 0 0 calc(46 * var(--u)) rgba(var(--accent-rvb), 0.16);
  --ouverture-finale: calc(60 * var(--u));         /* « FINALE » */
  --ouverture-duel: calc(30 * var(--u));           /* les deux survivants, face à face */
}
/* les rayons : étalés sur toute la scène, derrière le texte, ils partent du titre */
#ecran-annonce.annonce-finale .rayons-plein {
  display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: 0;
  --rayons-y: 34%; --rayons-force: 0.21; --rayons-portee: calc(560 * var(--u)); --rayons-halo: 0.26;
}
#ecran-annonce.annonce-finale > :not(.rayons-plein) { position: relative; order: 0; grid-area: auto; flex: none; max-width: 100%; margin: 0; }
/* le contenu se tient au milieu du panneau quand il tient, et part du haut s'il déborde (marges automatiques) */
#ecran-annonce.annonce-finale #annonce-surtitre { margin-top: auto; }
#ecran-annonce.annonce-finale #annonce-mode { margin-bottom: auto; }
/* le titre géant. Téléphone debout : « LA » coiffe « FINALE » (un espace si large que le second mot passe
   à la ligne ; la première ligne s'écrit petit). Ailleurs, sur une ligne (section 7). */
#ecran-annonce.annonce-finale #annonce-manche {
  display: block; white-space: normal; word-spacing: 100vw;
  font-size: var(--ouverture-finale); line-height: 1; letter-spacing: 0.08em; color: var(--accent-vif);
  text-shadow:
    0 0 calc(26 * var(--u)) rgba(var(--accent-rvb), 0.85),
    0 0 calc(70 * var(--u)) rgba(var(--accent-rvb), 0.5),
    0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.7);
  animation: ouverture-entree 0.5s ease both, ouverture-eclat 1.2s ease-in-out 0.5s infinite;
}
#ecran-annonce.annonce-finale #annonce-manche::first-line {
  font-size: 0.42em; letter-spacing: 0.3em; color: var(--metal-vif); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
@keyframes ouverture-entree { from { opacity: 0; transform: scale(1.22); } }
@keyframes ouverture-eclat { 50% { transform: scale(1.035); filter: brightness(1.14); } }
/* la devise */
#ecran-annonce.annonce-finale #annonce-difficulte {
  font-family: var(--police-texte); font-style: italic; font-weight: 400; letter-spacing: 0;
  font-size: calc(var(--taille-texte) * 1.1); line-height: 1.3; color: var(--metal-vif); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* « Deux survivants : … », ou la mention de qui regarde : deux joueurs face à face (un dessin), puis la phrase du jeu */
#ecran-annonce.annonce-finale #annonce-joueurs {
  display: flex; flex-direction: column; align-items: center; gap: calc(7 * var(--u));
  /* si la place manque (deux bandeaux empilés au-dessus, sur téléphone), c'est le dessin des deux joueurs qui
     rétrécit, jamais un texte : cette pièce est la seule de la finale qui cède, et dedans le dessin seul */
  flex: 0 1 auto; min-height: 0;
  max-width: min(100%, 24em);
  font-family: var(--police-texte); font-weight: 600; letter-spacing: 0; text-wrap: balance;
  font-size: var(--taille-texte); line-height: 1.3; color: var(--texte); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
#ecran-annonce.annonce-finale #annonce-joueurs::before {
  content: ''; flex: 0 1 var(--ouverture-duel); min-height: 0; width: calc(var(--ouverture-duel) * 84 / 30);
  background: linear-gradient(90deg, var(--accent-vif) 0, var(--accent-vif) 38%, var(--metal-clair) 38%, var(--metal-clair) 62%, var(--accent-vif) 62%, var(--accent-vif) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 30'%3E%3Cdefs%3E%3Cg id='p'%3E%3Ccircle cx='12' cy='7.4' r='4.3'/%3E%3Cpath d='M4.4 21.4c1.3-4.9 4.5-7 7.6-7s6.3 2.1 7.6 7z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(0 1) scale(1.25)'/%3E%3Cuse href='%23p' transform='translate(54 1) scale(1.25)'/%3E%3Cpath d='M42 12.5l5 5-5 5-5-5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 30'%3E%3Cdefs%3E%3Cg id='p'%3E%3Ccircle cx='12' cy='7.4' r='4.3'/%3E%3Cpath d='M4.4 21.4c1.3-4.9 4.5-7 7.6-7s6.3 2.1 7.6 7z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23p' transform='translate(0 1) scale(1.25)'/%3E%3Cuse href='%23p' transform='translate(54 1) scale(1.25)'/%3E%3Cpath d='M42 12.5l5 5-5 5-5-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* la règle de la finale : une plaque allumée, sa coupe dans une pastille d'accent (un dessin, découpé dans la pastille) */
#ecran-annonce.annonce-finale #annonce-mode {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u)) calc(9 * var(--u));
  border-radius: calc(14 * var(--u)); text-align: left;
  font-family: var(--police-texte); font-weight: 700; letter-spacing: 0; text-wrap: balance;
  font-size: calc(var(--taille-texte) * 1.08); line-height: 1.25; color: var(--texte);
  background:
    linear-gradient(180deg, rgba(var(--accent-rvb), 0.24), rgba(var(--accent-rvb), 0.1)),
    linear-gradient(180deg, rgb(var(--verre-haut)), rgb(var(--verre-bas)));
  box-shadow:
    0 0 0 max(1.5px, calc(2 * var(--u))) var(--accent),
    0 0 calc(24 * var(--u)) rgba(var(--accent-rvb), 0.45),
    inset 0 0 calc(20 * var(--u)) rgba(var(--accent-rvb), 0.18);
  animation: ouverture-regle 1.8s ease-in-out infinite;
}
@keyframes ouverture-regle { 50% { filter: brightness(1.16); } }
#ecran-annonce.annonce-finale #annonce-mode::before {
  content: ''; flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u));
  background: radial-gradient(circle at 40% 32%, #fff 0%, var(--accent-vif) 22%, var(--accent) 62%, var(--accent-sombre) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cmask id='m'%3E%3Crect width='64' height='64' fill='%23fff'/%3E%3Cg transform='translate(12.2 12.5) scale(.62)'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M20 13h-7c0 8 3 12 8 13M44 13h7c0 8-3 12-8 13'/%3E%3Cpath d='M19 7h26v14c0 10-5 16-13 17-8-1-13-7-13-17z'/%3E%3Crect x='29' y='37' width='6' height='9'/%3E%3Cpath d='M23 46h18l2 6H21z'/%3E%3Crect x='18' y='52' width='28' height='5' rx='1.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='32' cy='32' r='32' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cmask id='m'%3E%3Crect width='64' height='64' fill='%23fff'/%3E%3Cg transform='translate(12.2 12.5) scale(.62)'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M20 13h-7c0 8 3 12 8 13M44 13h7c0 8-3 12-8 13'/%3E%3Cpath d='M19 7h26v14c0 10-5 16-13 17-8-1-13-7-13-17z'/%3E%3Crect x='29' y='37' width='6' height='9'/%3E%3Cpath d='M23 46h18l2 6H21z'/%3E%3Crect x='18' y='52' width='28' height='5' rx='1.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='32' cy='32' r='32' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 calc(5 * var(--u)) var(--accent));
}
/* le jeu du soir est dans son étiquette, juste à côté : l'annonce de la finale ne le redit pas */
#ecran-annonce.annonce-finale #annonce-lot { display: none; }


/* ============================================================================
   7. ÉCRAN COURT, TÉLÉPHONE COUCHÉ, ORDINATEUR
   ========================================================================== */

/* ---------- Écran court ----------
   Dès qu'une fenêtre debout est plus large que 375 pour 750 (un téléphone de
   360 x 640, une tablette), la page ne fait plus que 732 à 750 u de haut
   (l'unité « u » suit sa hauteur dès 375 pour 732) : soixante à quatre-vingts
   de moins qu'un téléphone élancé de 375 x 812. Les
   surtitres se taisent (le titre dit déjà où l'on est) et les marges se
   serrent. Les deux rangements qui suivent remettent ce qu'ils veulent. */
@media (min-aspect-ratio: 1/2) {
  #ecran-regles { row-gap: calc(7 * var(--u)); padding-top: calc(12 * var(--u)); padding-bottom: calc(10 * var(--u)); --ouverture-nombre: calc(92 * var(--u)); --ouverture-coeurs: calc(26 * var(--u)); }
  #ecran-regles > .regles-surtitre { display: none; }
  #ecran-roue.scene { padding-top: calc(9 * var(--u)); padding-bottom: calc(5 * var(--u)); --taille-titre: calc(25 * var(--u)); }
  #ecran-roue > .annonce-surtitre { display: none; }
  #roue-titre { margin-top: auto; }
  #roue-rouleau { margin-top: calc(7 * var(--u)); }
  #roue-consigne { margin-top: calc(3 * var(--u)); }
  #roue-engagement, #roue-preuve { margin-top: calc(2 * var(--u)); }
  /* une case est plus basse (56 px sur un téléphone de 360 x 640) : le titre du jeu y tient sur une ligne, abrégé
     s'il est long (il se lit en entier à l'arrêt) ; deux lignes de 16 px y toucheraient le cadre */
  #ecran-roue .carte-label { display: block; white-space: nowrap; text-overflow: ellipsis; }
  #ecran-annonce.annonce-finale { gap: calc(5 * var(--u)); padding-top: calc(8 * var(--u)); padding-bottom: calc(8 * var(--u)); --ouverture-finale: calc(46 * var(--u)); }
  #ecran-annonce.annonce-finale #annonce-surtitre { display: none; }
  #ecran-annonce.annonce-finale #annonce-manche { margin-top: auto; }
  #ecran-annonce.annonce-finale #annonce-joueurs { flex: none; }
  #ecran-annonce.annonce-finale #annonce-joueurs::before { display: none; }
  #ecran-annonce.annonce-finale #annonce-mode { padding-top: calc(5 * var(--u)); padding-bottom: calc(5 * var(--u)); }
  #ecran-annonce.annonce-finale #annonce-mode::before { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
}

/* ---------- Téléphone couché : le visuel ou la roue à gauche, le texte à droite ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  #ecran-regles {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas: "visuel ." "visuel titre" "visuel resume" "visuel compteur" "visuel .";
    column-gap: calc(18 * var(--u)); row-gap: calc(5 * var(--u));
    padding: calc(8 * var(--u)) calc(18 * var(--u));
    --taille-titre: calc(22 * var(--u));
    --ouverture-tube: calc(30 * var(--u)); --ouverture-tube-ecart: calc(14 * var(--u)); --ouverture-lettre: calc(22 * var(--u));
    --ouverture-plaque: max(9px, calc(10.5 * var(--u))); --ouverture-nombre: calc(64 * var(--u)); --ouverture-jauge: calc(170 * var(--u));
    --ouverture-coeurs: calc(18 * var(--u)); --ouverture-pions: calc(15 * var(--u));
    --ouverture-lot: calc(250 * var(--u)); --ouverture-roue-dessin: calc(170 * var(--u));
  }
  #ecran-regles > .regles-surtitre { display: none; }
  #regles-visuel > .rv-jauge { height: calc(9 * var(--u)); margin-top: calc(8 * var(--u)); margin-bottom: calc(var(--ouverture-coeurs) + 8 * var(--u)); }
  #regles-visuel > .rv-jauge::after { top: calc(100% + 8 * var(--u)); }
  #regles-visuel .rv-trophee { gap: calc(6 * var(--u)); }

  #ecran-roue.scene {
    display: grid; align-items: center; justify-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
    padding: calc(6 * var(--u)) calc(16 * var(--u));
    --taille-titre: calc(22 * var(--u)); --ouverture-verdict: calc(19 * var(--u)); --ouverture-verdict-place: 640;
    --ouverture-agrandie: 0.82;                    /* la roue, réduite d'un bloc : trois cases dans très peu de hauteur */
    --ouverture-roue-large: calc(330 * var(--u));
    --ouverture-titre-case: calc(17 * var(--u)); --ouverture-part-case: calc(15 * var(--u));
  }
  #ecran-roue > .annonce-surtitre { display: none; }
  #roue-titre { grid-column: 2; grid-row: 2; margin: 0; }
  /* la présentation (section 4 bis) : la vitrine à la place du verdict, la roue cachée (sa colonne se referme) */
  #ecran-roue #roue-vitrine { grid-column: 2; grid-row: 3; margin-top: calc(6 * var(--u)); }
  #roue-verdict { grid-column: 2; grid-row: 3; display: block; padding-top: calc(3 * var(--u)); }
  #ecran-roue #roue-verdict:empty { display: none; }
  #roue-consigne { grid-column: 2; grid-row: 4; margin: calc(3 * var(--u)) 0 0; }
  #roue-engagement, #roue-preuve { grid-column: 2; grid-row: 5; margin-top: calc(2 * var(--u)); }
  #roue-rouleau {
    grid-column: 1; grid-row: 1 / -1; align-self: center;
    width: var(--ouverture-roue-large); max-width: none;
    transform: scale(var(--ouverture-agrandie));
    margin: calc((var(--ouverture-agrandie) - 1) * 1.5 * var(--roue-case))
      calc((var(--ouverture-agrandie) - 1) * 0.5 * var(--ouverture-roue-large) + 18 * var(--u))
      calc((var(--ouverture-agrandie) - 1) * 1.5 * var(--roue-case))
      calc((var(--ouverture-agrandie) - 1) * 0.5 * var(--ouverture-roue-large) + 4 * var(--u));
  }
  /* la roue à images (section 4 ter) : réduite du même bloc ; sa fenêtre fait deux hauteurs de case */
  #roue-rouleau.roue-images {
    margin: calc((var(--ouverture-agrandie) - 1) * var(--roue-case-image))
      calc((var(--ouverture-agrandie) - 1) * 0.5 * var(--ouverture-roue-large) + 18 * var(--u))
      calc((var(--ouverture-agrandie) - 1) * var(--roue-case-image))
      calc((var(--ouverture-agrandie) - 1) * 0.5 * var(--ouverture-roue-large) + 4 * var(--u));
  }

  /* très peu de hauteur : le titre sur une ligne, la phrase, la règle ; le surtitre, la devise et le dessin se taisent */
  #ecran-annonce.annonce-finale { gap: calc(5 * var(--u)); padding: calc(7 * var(--u)) calc(16 * var(--u)); --ouverture-finale: calc(40 * var(--u)); }
  #ecran-annonce.annonce-finale #annonce-surtitre, #ecran-annonce.annonce-finale #annonce-difficulte { display: none; }
  #ecran-annonce.annonce-finale #annonce-manche { margin-top: auto; word-spacing: normal; white-space: nowrap; }
  #ecran-annonce.annonce-finale #annonce-manche::first-line { font-size: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit; }
  #ecran-annonce.annonce-finale #annonce-joueurs { max-width: 100%; }
  #ecran-annonce.annonce-finale #annonce-joueurs::before { display: none; }
  #ecran-annonce.annonce-finale #annonce-mode { padding-top: calc(4 * var(--u)); padding-bottom: calc(4 * var(--u)); }
  #ecran-annonce.annonce-finale #annonce-mode::before { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
}

/* ---------- Ordinateur ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) {
  #ecran-regles, #ecran-roue, #ecran-annonce.annonce-finale { border-radius: calc(20 * var(--u)); }
  /* sans étiquettes, le rail s'arrête un peu après les cadrans, des deux côtés */
  body[data-ecran="regles"] .pupitre > .rail,
  body[data-ecran="roue"] .pupitre > .rail { margin-left: calc(206 * var(--u)); margin-right: calc(206 * var(--u)); }

  #ecran-regles {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "visuel ." "visuel sur" "visuel titre" "visuel resume" "visuel compteur" "visuel .";
    column-gap: calc(30 * var(--u)); row-gap: calc(15 * var(--u));
    padding: calc(22 * var(--u)) calc(30 * var(--u));
    --taille-titre: calc(44 * var(--u));
    --ouverture-tube: calc(58 * var(--u)); --ouverture-tube-ecart: calc(26 * var(--u)); --ouverture-lettre: calc(44 * var(--u));
    --ouverture-plaque: calc(19 * var(--u)); --ouverture-nombre: calc(156 * var(--u)); --ouverture-jauge: calc(320 * var(--u));
    --ouverture-coeurs: calc(46 * var(--u)); --ouverture-pions: calc(34 * var(--u)); --ouverture-visuel-max: calc(360 * var(--u));
    --ouverture-lot: calc(450 * var(--u)); --ouverture-roue-dessin: calc(300 * var(--u));
  }
  #ecran-regles > .regles-surtitre { display: flex; }
  #regles-points { margin-top: calc(6 * var(--u)); }
  #regles-visuel > .rv-jauge { height: calc(20 * var(--u)); margin-top: calc(22 * var(--u)); margin-bottom: calc(var(--ouverture-coeurs) + 20 * var(--u)); }
  #regles-visuel > .rv-jauge::after { top: calc(100% + 20 * var(--u)); }
  #regles-visuel .rv-trophee { gap: calc(16 * var(--u)); }

  /* la roue à gauche, agrandie d'un bloc ; à droite le titre, puis ce qui se passe. Rien ne bouge d'un état à
     l'autre : la place du verdict revient à la ligne de l'engagement tant que la roue n'a pas tourné. Sans
     lot, la colonne de la roue se referme d'elle-même : les trois lignes se tiennent au milieu du panneau. */
  #ecran-roue.scene {
    display: grid; align-items: center; justify-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto auto minmax(0, 1fr);
    padding: calc(20 * var(--u)) calc(30 * var(--u));
    /* le titre tient sur une ligne DANS sa colonne (380 u, à droite de la roue) : « LE JEU DU SOIR » fait 9,1 fois
       la taille de ses lettres. À 44 u (400 u de large) il dépassait de sa colonne vers la droite, jusqu'au ras
       des rivets, et n'était plus à l'aplomb des lignes du dessous. (35 u depuis le 2026-10-16, et le jeu annoncé
       33 u au lieu de 36 : la rampe des cadrans resserrée laisse au panneau 48 u de large de moins, et 40 u
       dépassaient de 2,5 px à 1280 x 800.) */
    --taille-titre: calc(35 * var(--u)); --ouverture-verdict: calc(33 * var(--u)); --ouverture-verdict-place: 1010;
    --ouverture-agrandie: 1.6; --ouverture-roue-large: calc(250 * var(--u));
    --ouverture-titre-case: calc(12.2 * var(--u)); --ouverture-part-case: calc(9.4 * var(--u));
    --ouverture-place-verdict: calc(84 * var(--u)); --ouverture-place-consigne: calc(50 * var(--u)); --ouverture-place-bas: calc(54 * var(--u));
  }
  #ecran-roue > .annonce-surtitre { display: flex; grid-column: 2; grid-row: 2; margin: 0; }
  #roue-titre { grid-column: 2; grid-row: 3; margin: calc(8 * var(--u)) 0 0; }
  /* « Roue de démonstration » : sur deux lignes dans sa demi-colonne (toute la démonstration le porte : rien ne bouge) */
  body.demonstration #roue-titre { white-space: normal; font-size: calc(var(--taille-titre) * 0.82); line-height: 1.04; }
  #roue-verdict {
    grid-column: 2; grid-row: 4; align-self: center; align-items: center;
    min-height: var(--ouverture-place-verdict); margin-top: calc(8 * var(--u)); padding-top: 0;
  }
  #ecran-roue #roue-verdict:empty { display: none; }
  #roue-consigne { grid-column: 2; grid-row: 5; align-self: start; min-height: var(--ouverture-place-consigne); margin: calc(8 * var(--u)) 0 0; }
  #roue-engagement, #roue-preuve { grid-column: 2; grid-row: 6; align-self: start; min-height: var(--ouverture-place-bas); margin-top: calc(6 * var(--u)); }
  #ecran-roue #roue-verdict:empty ~ #roue-engagement { min-height: calc(var(--ouverture-place-bas) + var(--ouverture-place-verdict) + 8 * var(--u)); }
  #roue-preuve > summary { min-height: var(--ouverture-place-bas); }
  /* la présentation (section 4 bis) : la roue cachée, sa colonne se referme ; la vitrine prend la place du
     verdict, sur toute la largeur, et rien ne garde de place pour ce qui n'est pas là */
  #ecran-roue #roue-vitrine {
    grid-column: 2; grid-row: 4; width: 100%; max-width: calc(820 * var(--u)); margin-top: calc(14 * var(--u));
    /* les plaques du héros ne sont pas agrandies d'un bloc comme la roue : leur écriture est posée à sa taille */
    --ouverture-titre-case: calc(19 * var(--u)); --ouverture-part-case: calc(14 * var(--u));
  }
  /* la mosaïque (section 4 ter) : des bannières à taille fixe, les rangées centrées ; le héros plus grand ;
     les noms sous les images quand ils tiennent (le programme mesure : .vitrine-noms) */
  #roue-vitrine.vitrine-images { gap: calc(14 * var(--u)); }
  #roue-vitrine.vitrine-images.vitrine-serree { gap: calc(8 * var(--u)); }
  #roue-vitrine .vitrine-mosaique { gap: calc(10 * var(--u)) calc(12 * var(--u)); margin: 0 auto; max-width: calc(6 * 120 * var(--u) + 5 * 12 * var(--u)); --ouverture-tuile: calc(120 * var(--u)); }
  #roue-vitrine .vitrine-heros .vitrine-mosaique { max-width: calc(5 * 150 * var(--u) + 4 * 12 * var(--u)); --ouverture-tuile: calc(150 * var(--u)); }
  #roue-vitrine .vitrine-heros .vitrine-mosaique[data-jeux="2"], #roue-vitrine .vitrine-heros .vitrine-mosaique[data-jeux="1"] { --ouverture-tuile: calc(240 * var(--u)); }
  #roue-vitrine.vitrine-serree .vitrine-mosaique { gap: calc(6 * var(--u)) calc(10 * var(--u)); max-width: calc(7 * 104 * var(--u) + 6 * 10 * var(--u)); --ouverture-tuile: calc(104 * var(--u)); }
  #roue-vitrine.vitrine-serree .vitrine-heros .vitrine-mosaique { max-width: calc(6 * 120 * var(--u) + 5 * 10 * var(--u)); --ouverture-tuile: calc(120 * var(--u)); }
  #roue-vitrine.vitrine-noms .vitrine-tuile.avec-image > .vitrine-tuile-nom { display: -webkit-box; }
  #roue-vitrine .vitrine-tuile-nom { font-size: max(13px, calc(13 * var(--u))); line-height: 1.15; }
  #roue-vitrine .vitrine-tuile.avec-image > .vitrine-tuile-nom { color: var(--rang-teinte-vive); font-weight: 600; }
  #roue-vitrine .vitrine-bande .vitrine-tuile { max-width: calc(124 * var(--u)); }
  #roue-vitrine .vitrine-vedette { width: calc(560 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); gap: calc(18 * var(--u)); }
  #roue-vitrine .vitrine-vedette-image { width: calc(220 * var(--u)); }
  #roue-vitrine .vitrine-vedette-titre { font-size: calc(24 * var(--u)); }
  #ecran-roue.scene[data-roue="presentation"] #roue-consigne { min-height: 0; margin-top: calc(12 * var(--u)); }
  #ecran-roue.scene[data-roue="presentation"] #roue-verdict ~ #roue-engagement { min-height: 0; margin-top: calc(8 * var(--u)); }
  #roue-rouleau {
    grid-column: 1; grid-row: 1 / -1; align-self: center;
    width: var(--ouverture-roue-large); max-width: none;
    transform: scale(var(--ouverture-agrandie));
    margin: calc((var(--ouverture-agrandie) - 1) * 1.5 * var(--roue-case))
      calc((var(--ouverture-agrandie) - 1) * 0.5 * var(--ouverture-roue-large) + 44 * var(--u))
      calc((var(--ouverture-agrandie) - 1) * 1.5 * var(--roue-case))
      calc((var(--ouverture-agrandie) - 1) * 0.5 * var(--ouverture-roue-large) + 14 * var(--u));
  }
  /* la roue à images (section 4 ter) : agrandie du même bloc ; sa fenêtre fait deux hauteurs de case */
  #roue-rouleau.roue-images {
    margin: calc((var(--ouverture-agrandie) - 1) * var(--roue-case-image))
      calc((var(--ouverture-agrandie) - 1) * 0.5 * var(--ouverture-roue-large) + 44 * var(--u))
      calc((var(--ouverture-agrandie) - 1) * var(--roue-case-image))
      calc((var(--ouverture-agrandie) - 1) * 0.5 * var(--ouverture-roue-large) + 14 * var(--u));
  }
  #ecran-roue .rouleau-carte { padding: 0 calc(15 * var(--u)); --ouverture-retrait-v: calc(2.4 * var(--u)); --ouverture-retrait-h: calc(5.5 * var(--u)); --ouverture-coin: calc(8 * var(--u)); }
  #ecran-roue .carte-label { display: -webkit-box; white-space: normal; text-overflow: clip; line-height: 1.06; }
  #ecran-roue .carte-pourcent { margin-top: calc(1.5 * var(--u)); }
  #ecran-roue .rouleau-fenetre { border-radius: calc(11 * var(--u)); }
  /* les preuves : la clé à gauche, la valeur à droite */
  #roue-preuve[open] > div { right: calc(22 * var(--u)); bottom: calc(20 * var(--u)); left: calc(22 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)); }
  #roue-preuve .preuve-ligne { flex-direction: row; align-items: baseline; gap: calc(16 * var(--u)); }
  #roue-preuve .preuve-cle { flex: none; width: calc(250 * var(--u)); }
  #roue-preuve .preuve-valeur { flex: 1; min-width: 0; font-size: var(--taille-note); }

  #ecran-annonce.annonce-finale {
    gap: calc(17 * var(--u)); padding: calc(22 * var(--u)) calc(56 * var(--u));
    --ouverture-finale: calc(116 * var(--u)); --ouverture-duel: calc(36 * var(--u));
  }
  #ecran-annonce.annonce-finale #annonce-surtitre { display: flex; margin-top: auto; }
  #ecran-annonce.annonce-finale #annonce-manche { margin-top: 0; word-spacing: normal; white-space: nowrap; }
  #ecran-annonce.annonce-finale #annonce-manche::first-line { font-size: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit; }
  #ecran-annonce.annonce-finale #annonce-joueurs { flex: none; flex-direction: row; gap: calc(18 * var(--u)); max-width: 100%; text-align: left; }
  #ecran-annonce.annonce-finale #annonce-joueurs::before { display: block; flex: none; height: var(--ouverture-duel); }
  #ecran-annonce.annonce-finale #annonce-mode { padding: calc(10 * var(--u)) calc(26 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u)); gap: calc(16 * var(--u)); border-radius: calc(16 * var(--u)); }
  #ecran-annonce.annonce-finale #annonce-mode::before { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
}


/* ============================================================================
   8. REPLIS, MOUVEMENTS RÉDUITS
   ----------------------------------------------------------------------------
   Sans découpe en anneau : un simple filet remplace le cerclage du panneau et
   le cadre des cases (comme dans le socle). Sans clip-path : les cases se
   touchent, pleines, et le cadre suit leur bord. Sans masque : les dessins
   découpés (cœurs, trophée, joueurs, coupe) ne se montrent pas, le reste se lit.
   Mouvements réduits : le socle arrête toute animation de la page ; l'état de
   repos de chaque pièce est son état visible (éprouvettes pleines, jauge aux
   deux tiers, reflet de l'or posé comme celui des autres métaux).
   ========================================================================== */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #ecran-regles::before, #ecran-roue::before, #ecran-annonce.annonce-finale::before { background: none; padding: 0; border: max(1.5px, calc(2 * var(--u))) solid var(--metal-clair); }
  #ecran-roue .rouleau-carte::after { background: none; padding: 0; border: max(1.2px, calc(1.6 * var(--u))) solid var(--rang-clair); }
}
@supports not ((clip-path: inset(1px round 1px)) or (-webkit-clip-path: inset(1px round 1px))) {
  #ecran-roue .rouleau-carte::after { top: 0; right: 0; bottom: 0; left: 0; border-radius: 0; }
  #regles-visuel .rv-roue::before { display: none; }
}
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  #regles-visuel > .rv-jauge::after, #regles-visuel .rv-trophee::before, #regles-visuel .rv-trophee::after,
  #ecran-annonce.annonce-finale #annonce-joueurs::before, #ecran-annonce.annonce-finale #annonce-mode::before { display: none; }
}