/* ============================================================================
   LE LABORATOIRE · interface B · ÉTAPE 4 : LA FIN
   ----------------------------------------------------------------------------
   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-fin        le couronnement (.couronnement-seul), puis le classement,
                       et son retour après le lot
     #ecran-lot        la remise du lot : la case « Je certifie avoir 18 ans ou
                       plus » (visible sans défiler, jamais couverte), le compte
                       à rebours, le verdict, les preuves du tirage
   Un vrai lot dépend de l'écran du lot : contrôle renforcé.
   Maquettes : data/maquettes-2026-10-07/B-suite/fin.html, lot.html.
   Plan : docs/interface-b/plan-de-bascule.md, partie 3. Décisions : SPECS 2.12,
   « Étape 4 ».

   SOMMAIRE
     1. La fin de partie : l'écran, le panneau du gagnant, le médaillon du
        trophée et ses rayons, le classement, le partage
     2. La fin de partie couchée, puis sur ordinateur
     3. La remise du lot : l'écran, le gagnant et le jeu du soir, la consigne,
        LA CASE et son délai, le verdict, les preuves
     4. La remise du lot couchée, puis sur ordinateur
     4 bis. La remise du lot à l'étroit (texte agrandi, très petite fenêtre) :
            la classe « a-l-etroit », posée par pupitre.js qui mesure
     5. Ce qui ne doit jamais couvrir la case
     6. Replis

   LA PAGE (public/pupitre.html) range chacun de ces deux écrans en deux blocs,
   sans texte ni identifiant de plus : .fin-gloire et .fin-tableau, .lot-tete et
   .lot-suite. Chaque bloc a sa place, sa marge et son défilement, et le nom du
   gagnant s'ajuste à la largeur du SIEN (pupitre.js, tenirSurUneLigne).

   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-fin, #ecran-lot, une
   pièce qu'ils contiennent, ou body[data-ecran="fin"], "lot",
   body[data-moment="fin"] pour ce qui est hors de l'écran) : jamais de
   sélecteur nu (« .reponse { … } ») ni de réglage posé sur :root, qui
   changeraient les écrans des autres étapes sans que rien le dise (un réglage
   se redéfinit sur ton écran : #ecran-… { --taille-titre: … }) ; le nom d'une
   animation (@keyframes) commence par « fin- » ; 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.
   Mesurer : « npm run pupitre:mesurer » (mode d'emploi en tête de
   outils/mesurer-le-pupitre.mjs), sans retoucher l'outil : les états de cette
   étape sont dans outils/parcours-du-pupitre/fin.mjs, et ce qui est voulu sur
   ses écrans (une étiquette, un décor, une pièce posée exprès sur une autre)
   se dit ici par la propriété « --mesure ». Un écran ne se centre jamais par
   justify-content (socle.css, section 13, « Un écran CENTRÉ »). Monte le
   « ?v= » de cette feuille, sur sa ligne de pupitre.html, quand tu la modifies.
   ========================================================================== */


/* ============================================================================
   1. LA FIN DE PARTIE (#ecran-fin)
   ----------------------------------------------------------------------------
   Deux temps, décidés par app.js (onTerminee) : le COURONNEMENT, le gagnant
   seul pendant quatre secondes et demie (classe .couronnement-seul), puis le
   CLASSEMENT. Après le résultat du lot, le classement revient sans fanfare.
   Ni cadrans ni étiquettes : la partie est finie, il n'y a plus rien à mesurer
   (socle, body[data-moment="fin"]). Le professeur garde sa rangée, sous l'écran :
   il ne couvre plus le bas du classement.
   ========================================================================== */

/* L'écran n'est plus un panneau : il en porte deux, puis le bouton de partage.
   Les réglages de taille de l'écran (ils changent d'un rangement à l'autre). */
#ecran-fin {
  --fin-nom: calc(30 * var(--u));                    /* le nom du gagnant */
  --fin-titre: max(16px, calc(16.5 * var(--u)));     /* « remporte la partie ! » */
  --fin-medaillon: calc(64 * var(--u));              /* diamètre du médaillon du trophée */
  --fin-ligne: calc(28 * var(--u));                  /* hauteur d'une ligne du classement */
  --fin-disque: calc(23 * var(--u));                 /* pastille du rang */
  padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  align-items: stretch; gap: var(--ecart);
}
#ecran-fin.couronnement-seul {
  --fin-nom: calc(40 * var(--u));
  --fin-titre: max(16px, calc(20 * var(--u)));
  --fin-medaillon: calc(204 * var(--u));
}
/* le couronnement n'est plus centré par les deux pièces vides du socle : le
   panneau du gagnant prend tout l'écran, et centre lui-même ce qu'il porte */
#ecran-fin.couronnement-seul::before, #ecran-fin.couronnement-seul::after { content: none; }

/* ---------- Le panneau du gagnant (.fin-gloire) ----------
   Un verre cerclé et riveté. Il prend la place que le classement lui laisse et
   ne rétrécit jamais sous son contenu : c'est la liste qui défile au besoin. */
#ecran-fin .fin-gloire {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 0 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--u));
  /* 20 u de chaque côté : un nom long ne vient jamais buter sur les rivets des coins */
  padding: calc(9 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
  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);
}
#ecran-fin.couronnement-seul .fin-gloire { gap: calc(11 * var(--u)); padding: calc(20 * var(--u)) calc(18 * var(--u)); }
/* le cerclage de métal (les deux règles du verre cerclé, socle section 5) : ici, et autour du classement */
#ecran-fin .fin-gloire::before, #ecran-fin .fin-tableau::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; 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;
}
/* quatre rivets aux coins */
#ecran-fin .fin-gloire::after {
  content: ''; position: absolute; top: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); left: calc(8 * var(--u));
  pointer-events: none; opacity: 0.9;
  --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(--rivet) left top, var(--rivet) right top, var(--rivet) left bottom, var(--rivet) right bottom;
  background-size: calc(8 * var(--u)) calc(8 * var(--u)); background-repeat: no-repeat;
}

/* ---------- Le médaillon du trophée (.fin-trophee), et ses rayons ----------
   Le trophée de laiton du jeu, serti dans un cadran : couronne de métal, face
   de verre, anneau qui luit. Le dessin du trophée est celui du socle (image en
   data:, permise par la politique de sécurité), repris ici parce qu'il partage
   la pièce avec la face et la couronne.
   Les rayons partent du médaillon lui-même, où qu'il soit dans le panneau :
   c'est son ::before, glissé derrière tout le contenu du panneau (le médaillon
   ne crée donc aucune couche à lui : ni filtre, ni transformation).
   (.fin-gloire dans le sélecteur : il pèse plus que la règle du socle qui
   réduisait le trophée au classement.) */
#ecran-fin .fin-gloire .fin-trophee {
  position: relative; flex: none; margin: 0; filter: none;
  width: var(--fin-medaillon); height: var(--fin-medaillon); border-radius: 50%;
  border: calc(var(--fin-medaillon) * 0.075) solid transparent;
  background: var(--laiton);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff2c4'/%3E%3Cstop offset='.45' stop-color='%23e6b964'/%3E%3Cstop offset='1' stop-color='%239a6a28'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' stroke='url(%23g)' stroke-width='4' stroke-linecap='round' d='M20 13h-7c0 8 3 12 8 13M44 13h7c0 8-3 12-8 13'/%3E%3Cpath fill='url(%23g)' d='M19 7h26v14c0 10-5 16-13 17-8-1-13-7-13-17z'/%3E%3Crect fill='url(%23g)' x='29' y='37' width='6' height='9'/%3E%3Cpath fill='url(%23g)' d='M23 46h18l2 6H21z'/%3E%3Crect fill='url(%23g)' x='18' y='52' width='28' height='5' rx='1.5'/%3E%3Cpath fill='%23fff8e0' opacity='.45' d='M24 10h4v12c0 4 1 7 3 9-4-1-7-5-7-11z'/%3E%3C/svg%3E") center / 50% 50% no-repeat padding-box,
    radial-gradient(circle closest-side, rgba(var(--accent-rvb), 0) 80%, var(--accent) 82%, var(--accent) 90%, rgba(var(--accent-rvb), 0) 92%) padding-box,
    radial-gradient(circle at 50% 30%, rgb(var(--verre-haut)) 0%, rgb(var(--verre-bas)) 72%) padding-box,
    conic-gradient(from 205deg, var(--metal-pied), var(--metal-vif) 13%, var(--metal-clair) 24%, var(--metal-creux) 42%,
      var(--metal-pied) 54%, var(--metal-clair) 69%, var(--metal-vif) 77%, var(--metal-sombre) 90%, var(--metal-pied)) border-box;
  box-shadow:
    0 0 0 max(1px, calc(1.5 * var(--u))) rgba(0, 0, 0, 0.92),
    0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, 0.6),
    0 0 calc(var(--fin-medaillon) * 0.42) rgba(var(--accent-rvb), 0.48),
    inset 0 0 0 max(1px, calc(1.5 * var(--u))) rgba(10, 6, 2, 0.95),
    inset 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.85);
}
#ecran-fin .fin-trophee::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; pointer-events: none;
  width: calc(2800 * var(--u)); height: calc(2800 * var(--u)); margin: calc(-1400 * var(--u)) 0 0 calc(-1400 * var(--u));
  background: repeating-conic-gradient(from 0deg, rgba(var(--accent-rvb), 0.21) 0deg 8.5deg, rgba(var(--accent-rvb), 0) 8.5deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) calc(227 * var(--u)), transparent calc(540 * var(--u)));
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) calc(227 * var(--u)), transparent calc(540 * var(--u)));
  animation: fin-rayons 45s linear infinite;
}
@keyframes fin-rayons { to { transform: rotate(360deg); } }
/* Les rayons du socle (.rayons-plein, centrés à la main) ne servent que là où
   le médaillon n'est pas montré : au classement, sur téléphone, ils partent du
   nom, discrets, le classement passe devant. */
#ecran-fin .rayons-plein { display: none; }
#ecran-fin:not(.couronnement-seul) .rayons-plein { display: block; opacity: 0.6; --rayons-y: 36%; --rayons-force: 0.2; --rayons-halo: 0.12; --rayons-portee: calc(440 * var(--u)); }
/* sur téléphone, au classement, le trophée a été vu au couronnement : la place va au classement */
#ecran-fin:not(.couronnement-seul) .fin-trophee { display: none; }

/* ---------- « Grand gagnant », le nom, « remporte la partie ! », le jeu du soir, le détail ---------- */
#ecran-fin .fin-surtitre { flex: none; margin-bottom: calc(2 * var(--u)); }
/* Le nom en gloire, sur UNE ligne : long, sa police rétrécit jusqu'à tenir dans
   la largeur du panneau (pupitre.js, tenirSurUneLigne, qui ne descend pas sous
   45 % de la taille). Un pseudo de vingt lettres très larges n'y tiendrait pas
   encore : il passe alors sur deux lignes, plutôt que d'être coupé par le bord.
   (Les deux marges négatives : la boîte du nom est un peu plus large que la
   place sur laquelle il est ajusté, un arrondi ne renvoie pas sa dernière
   lettre à la ligne.) */
#ecran-fin #fin-gagnant { flex: none; align-self: stretch; margin-left: calc(-5 * var(--u)); margin-right: calc(-5 * var(--u)); font-size: var(--fin-nom); }
#ecran-fin #fin-titre {
  flex: none; margin: 0; text-align: center; text-wrap: balance;
  font-family: var(--police-texte); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.3;
  font-size: var(--fin-titre); color: var(--accent-vif); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* « Le jeu du soir : … » : une phrase, en police courante (Cinzel coûterait une ligne de plus) */
#ecran-fin #fin-lot {
  flex: none; text-wrap: balance; overflow-wrap: anywhere;
  font-family: var(--police-texte); font-weight: 700; letter-spacing: 0; line-height: 1.3;
  font-size: var(--taille-texte); color: var(--accent);
}
/* (PAS de lignes équilibrées pour une phrase dont le « : » est au milieu : les phrases du jeu
   portent une espace ordinaire devant ce signe, et l'équilibrage coupe une phrase de deux lignes
   en son milieu, donc juste devant lui. « Ceci était une démonstration » / « : aucun lot n'est
   remis. » se lisait ainsi à toutes les tailles de téléphone. Le retour à la ligne ordinaire ne
   coupe là que si la ligne se remplit exactement à cet endroit. Les phrases dont le « : » est
   au début ou à la fin (« Le jeu du soir : … », « … Ton classement : 7ᵉ ») gardent l'équilibrage.) */
#ecran-fin #fin-lot.fin-sans-lot { font-weight: 400; color: var(--texte-doux); text-wrap: wrap; }
#ecran-fin #fin-detail { flex: none; margin-top: calc(2 * var(--u)); font-size: var(--taille-note); line-height: 1.36; color: var(--texte-doux); text-wrap: balance; }

/* ---------- Le classement (.fin-tableau) ----------
   Un verre cerclé ; dedans la plaque « Classement » à cheval sur son bord, la
   liste, et ce qui suit (ce qu'est devenu le lot, ou la fermeture du salon).
   Trop longue, la liste défile À L'INTÉRIEUR du verre : la page jamais, ni
   l'écran. C'est le tableau qui cède la place quand elle manque. */
#ecran-fin .fin-tableau {
  position: relative; flex: 0 1 auto; min-height: calc(112 * var(--u)); min-width: 0;
  display: flex; flex-direction: column;
  margin-top: calc(6.5 * var(--u));               /* la plaque dépasse du verre */
  border-radius: calc(14 * var(--u));
  background: var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-ombre);
}
#ecran-fin .fin-tableau::before { padding: max(1.2px, calc(1.5 * var(--u))); }
/* la plaque gravée, rivée à cheval sur le bord du verre (voulu : --mesure) */
#ecran-fin h3 {
  --mesure: etiquette chevauche;
  position: absolute; z-index: 2; left: 50%; top: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; margin: 0;
  padding: calc(5 * var(--u)) calc(20 * var(--u)); border-radius: calc(5 * var(--u));
  font-family: var(--police-plateau); font-weight: 900; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: var(--taille-plaque); line-height: 1.2;
  color: var(--plaque-encre); white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  /* (gravée en creux, lettres de laiton : une information, pas une touche ; socle, section 5 bis) */
  background: var(--plaque-rivets), var(--plaque-fond);
  box-shadow: var(--plaque-ombre);
}
/* la liste : le verre est celui du tableau. La marge du haut (et non un
   remplissage) : si la liste défile, ses lignes ne passent jamais sous la plaque. */
#ecran-fin #fin-classement {
  flex: 0 1 auto; min-height: 0; max-height: none; align-self: stretch;
  list-style: none; margin: calc(13.5 * var(--u)) 0 0; padding: 0 calc(6 * var(--u)) calc(2 * var(--u));
  border-radius: 0; background: none; box-shadow: none;
}
/* une ligne : la pastille du rang (l'attribut value posé par app.js), puis le
   pseudo. Les lignes se serrent un peu avant que la liste ne défile. */
#ecran-fin #fin-classement > li {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  flex: 0 1 var(--fin-ligne); min-height: max(23px, calc(24 * var(--u))); padding: calc(1 * var(--u)) calc(10 * var(--u));
  font-family: var(--police-plateau); font-weight: 700; letter-spacing: 0.02em; text-align: left;
  font-size: var(--taille-texte); line-height: 1.12; overflow-wrap: anywhere;
}
#ecran-fin #fin-classement > li::before {
  content: attr(value); flex: none; box-sizing: border-box; display: grid; place-items: center;
  min-width: var(--fin-disque); height: var(--fin-disque); padding: 0 calc(var(--fin-disque) * 0.26); border-radius: 999px;
  font-weight: 900; font-size: calc(var(--fin-disque) * 0.5); line-height: 1; letter-spacing: 0; font-variant-numeric: lining-nums;
  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(14, 8, 2, 0.8);
}
/* La ligne du joueur reste EN VUE quand la liste défile : épinglée au bord de
   la liste (en bas tant qu'elle est plus loin, en haut une fois dépassée). Son
   fond est opaque, les autres lignes passent derrière (voulu : --mesure ; une
   ligne passée derrière s'atteint en faisant défiler la liste). */
#ecran-fin #fin-classement > li.moi {
  --mesure: chevauche;
  position: sticky; top: 0; bottom: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(var(--accent-rvb), 0.26), rgba(var(--accent-rvb), 0.07)), rgb(var(--verre-milieu));
}
/* ce qui suit, au pied du tableau (retour à la ligne ordinaire, pas équilibré : presque toutes
   ses phrases portent un « : » en leur milieu, voir le jeu du soir plus haut) */
#ecran-fin #fin-prochaine {
  flex: none; margin: 0 calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(6.5 * var(--u));
  border-top: 1px solid rgba(var(--metal-clair-rvb), 0.26);
  font-size: var(--taille-note); line-height: 1.36; color: var(--texte-doux); text-align: center; text-wrap: wrap; overflow-wrap: anywhere;
}

/* ---------- Le partage ----------
   Le seul geste de l'écran : une touche de laiton (dans la page du jeu, c'est un
   bouton secondaire). La marge du bas laisse voir l'épaisseur de la touche. */
#ecran-fin #btn-partager {
  flex: none; align-self: stretch; margin-bottom: calc(4 * var(--u));
  font-weight: 900; color: var(--sur-metal); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  background: var(--laiton-touche);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  /* (le pied de laiton commun, qui s'écrase sous le doigt, et la lumière d'une touche : socle, section 5 bis) */
  box-shadow: var(--ombre-laiton);
}

/* le couronnement : le gagnant seul, le classement et le partage attendent */
#ecran-fin.couronnement-seul .fin-tableau { display: none; }


/* ============================================================================
   2. LA FIN DE PARTIE, COUCHÉE PUIS SUR ORDINATEUR
   ========================================================================== */

/* ---------- téléphone couché : le gagnant à gauche, le classement à droite, le partage à côté du professeur ----------
   La scène est basse (239 u). Sous elle, la rangée du professeur ne sert qu'à
   gauche (les liens légaux, à droite, ne sont pas montrés à la fin) : l'écran
   descend jusqu'au bas de la page, et le partage prend la case libre, à droite
   du professeur. Le gagnant et le classement gardent ainsi toute la hauteur de
   la scène. --fin-rampe est la hauteur de la rangée du professeur, calculée
   avec les réglages mêmes du socle (la bulle, sa marge du bas, la marge et le
   remplissage du haut de la rangée : 8 + 5 + 6 u). */
@media (orientation: landscape) and (max-height: 560px) {
  #ecran-fin {
    --fin-rampe: calc(var(--bulle-lignes) * var(--interligne-bulle) * var(--taille-bulle) + var(--bulle-haut) + var(--bulle-bas) + 19 * var(--u));
    --fin-nom: calc(24 * var(--u)); --fin-ligne: calc(26 * var(--u));
    grid-row: scene-start / bas-end;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--fin-rampe);
    column-gap: var(--ecart-colonnes); row-gap: 0;
  }
  #ecran-fin .fin-gloire { grid-column: 1; grid-row: 1; padding: calc(6 * var(--u)) calc(18 * var(--u)) calc(7 * var(--u)); gap: calc(2 * var(--u)); }
  /* « Grand gagnant » a été lu au couronnement : au classement, la hauteur va au nom et à ce qui suit */
  #ecran-fin:not(.couronnement-seul) .fin-surtitre { display: none; }
  #ecran-fin:not(.couronnement-seul) .rayons-plein { --rayons-y: 24%; }
  /* Le tableau est ici au ras du haut de l'écran : sa plaque, à cheval sur son bord, dépassait
     de l'écran (6 u) et allait toucher le bandeau du dessus (« Signal perdu », démonstration).
     Un peu moins haute, et le tableau descendu de la moitié de sa hauteur (21,6 u) : elle
     s'aligne sur le haut du panneau voisin, comme sur ordinateur. */
  #ecran-fin .fin-tableau { grid-column: 2; grid-row: 1; min-height: 0; margin-top: calc(11 * var(--u)); }
  #ecran-fin h3 { padding-top: calc(3 * var(--u)); padding-bottom: calc(3 * var(--u)); }
  #ecran-fin #fin-classement { flex: 1 1 auto; margin-top: calc(12 * var(--u)); }
  #ecran-fin #btn-partager { grid-column: 2; grid-row: 2; align-self: center; margin-top: calc(6 * var(--u)); margin-bottom: calc(8 * var(--u)); }
  /* le couronnement prend les deux colonnes : le trophée à gauche, le nom à droite.
     Le médaillon est posé dans la marge du panneau : la largeur qui reste est
     celle du nom, c'est sur elle qu'il s'ajuste. */
  #ecran-fin.couronnement-seul { --fin-nom: calc(42 * var(--u)); --fin-medaillon: calc(150 * var(--u)); }
  #ecran-fin.couronnement-seul .fin-gloire {
    grid-column: 1 / -1; gap: calc(6 * var(--u));
    padding: calc(10 * var(--u)) calc(40 * var(--u)) calc(10 * var(--u)) calc(40 * var(--u) + var(--fin-medaillon) + 30 * var(--u));
  }
  #ecran-fin.couronnement-seul .fin-gloire .fin-trophee { position: absolute; left: calc(40 * var(--u)); top: 50%; margin-top: calc(var(--fin-medaillon) / -2); }
}

/* ---------- ordinateur : le gagnant à gauche sur toute la hauteur, le classement à droite ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) {
  #ecran-fin {
    display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    column-gap: var(--ecart-colonnes); row-gap: 0;
    --fin-nom: calc(46 * var(--u));
    --fin-titre: calc(23 * var(--u));
    --fin-medaillon: calc(190 * var(--u));
    --fin-ligne: calc(33 * var(--u));
    --fin-disque: calc(27 * var(--u));
  }
  #ecran-fin.couronnement-seul {
    --fin-nom: calc(88 * var(--u));
    --fin-titre: calc(31 * var(--u));
    --fin-medaillon: calc(214 * var(--u));
  }
  #ecran-fin .fin-gloire { grid-column: 1; grid-row: 1 / 3; gap: calc(8 * var(--u)); padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u)); border-radius: calc(20 * var(--u)); }
  #ecran-fin.couronnement-seul .fin-gloire { grid-column: 1 / -1; gap: calc(11 * var(--u)); padding: calc(22 * var(--u)) calc(44 * var(--u)) calc(26 * var(--u)); }
  /* la place ne manque plus : le trophée reste au classement, et ses rayons avec lui */
  #ecran-fin:not(.couronnement-seul) .fin-gloire .fin-trophee { display: block; }
  #ecran-fin:not(.couronnement-seul) .rayons-plein { display: none; }
  #ecran-fin #fin-lot { font-size: calc(18 * var(--u)); }
  #ecran-fin.couronnement-seul #fin-lot { font-size: calc(22 * var(--u)); }
  #ecran-fin #fin-detail { margin-top: calc(4 * var(--u)); font-size: max(13px, calc(16.5 * var(--u))); }
  /* la plaque dépasse du verre : le tableau descend d'autant, pour qu'elle s'aligne sur le haut du panneau voisin */
  #ecran-fin .fin-tableau { grid-column: 2; grid-row: 1; margin-top: calc(14 * var(--u)); border-radius: calc(16 * var(--u)); }
  #ecran-fin #fin-classement { flex: 1 1 auto; margin-top: calc(19 * var(--u)); padding-bottom: calc(5 * var(--u)); }
  /* les lignes se partagent la hauteur du tableau, sans dépasser celle d'une ligne ordinaire */
  #ecran-fin #fin-classement > li { flex: 1 1 var(--fin-ligne); max-height: calc(46 * var(--u)); }
  /* (4 u de chaque côté, pas 10 : sur ordinateur tout grandit avec la fenêtre, les lignes se
     coupent donc au même endroit à toutes les tailles, et avec 10 u « Lot du soir (…) » suivi
     d'un titre de 45 caractères remplissait la première ligne au mot près : le « : » passait
     seul en tête de la seconde. Avec 4 u, plus aucun des 40 titres essayés, jusqu'à 45 caractères.) */
  #ecran-fin #fin-prochaine { padding: calc(8 * var(--u)) calc(4 * var(--u)) calc(11 * var(--u)); }
  #ecran-fin #btn-partager { grid-column: 2; grid-row: 2; margin-top: var(--ecart); }
}


/* ============================================================================
   3. LA REMISE DU LOT (#ecran-lot)
   ----------------------------------------------------------------------------
   Un seul grand panneau : le gagnant et le jeu du soir (.lot-tete), puis ce
   qui se passe (.lot-suite). Trois temps, décidés par app.js :
     - la CERTIFICATION : le gagnant a la case « Je certifie avoir 18 ans ou
       plus » et son délai (25 secondes avec le réglage livré) ; cocher suffit,
       il n'y a pas d'autre bouton. Le salon, lui, lit « … réclame son lot… »
       et le même délai ;
     - le VERDICT : « GAGNÉ : … », « LOT NON RÉCLAMÉ », « AUCUN JEU TIRÉ », « LOT NON ATTRIBUÉ », et
       ce que le gagnant doit en savoir ;
     - puis le classement revient (section 1).
   UN VRAI LOT DÉPEND DE LA CASE. Ce que cette feuille garantit :
     - l'écran lui-même ne défile jamais. Si la place manquait (très petit
       écran, pile de bandeaux), c'est .lot-suite qui défilerait à l'intérieur,
       la case et son délai ÉPINGLÉS au bas de ce qui se voit : ils ne quittent
       jamais l'écran ;
     - le délai est le pied de la plaque de la case : il se lit en même temps
       qu'elle, à toutes les tailles ;
     - rien ne se pose sur la case (section 5).
   Ces garanties valent tant que la zone a la hauteur de la plaque et de son
   pied. Le haut de l'écran (le gagnant, le jeu du soir) ne cède pas la place :
   quand elles ne tiennent plus (texte agrandi, très petite fenêtre, titre de
   jeu très long), le décor le mesure et une autre mise en page prend le relais
   (section 4 bis), où plus rien n'est épinglé.
   ========================================================================== */
#ecran-lot {
  --taille-titre: calc(30 * var(--u));
  --lot-pied: max(32px, calc(34 * var(--u)));        /* hauteur du pied de la plaque : le délai */
  --lot-bas: calc(4 * var(--u));                     /* place gardée sous la plaque quand elle est épinglée */
  --lot-ecart: calc(10 * var(--u));
  overflow: hidden;                                 /* l'écran ne défile pas (voir ci-dessus) */
  align-items: stretch; gap: 0;
  padding: calc(16 * var(--u)) calc(12 * var(--u));
  box-shadow: var(--verre-ombre);
}
/* Les deux pièces vides qui centraient l'écran (socle) deviennent son cerclage
   et ses rivets ; le centrage passe aux marges automatiques de ses deux blocs
   (une marge automatique ne devient jamais négative : trop haut, l'écran part
   du haut). */
#ecran-lot::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; 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;
}
#ecran-lot::after {
  content: ''; position: absolute; top: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); left: calc(8 * var(--u));
  margin: 0; pointer-events: none; opacity: 0.9;
  --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(--rivet) left top, var(--rivet) right top, var(--rivet) left bottom, var(--rivet) right bottom;
  background-size: calc(8 * var(--u)) calc(8 * var(--u)); background-repeat: no-repeat;
}

/* ---------- Le gagnant et le jeu du soir (.lot-tete) ---------- */
#ecran-lot .lot-tete {
  flex: none; min-width: 0; margin-top: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: calc(5 * var(--u));
  padding: 0 calc(6 * var(--u)); text-align: center;
}
/* le pseudo du gagnant, sur UNE ligne : long, sa police rétrécit (pupitre.js,
   tenirSurUneLigne) ; s'il ne tenait pas encore, deux lignes, jamais coupé
   (les deux marges négatives : voir le nom du gagnant, section 1) */
#ecran-lot #lot-titre { flex: none; margin-left: calc(-5 * var(--u)); margin-right: calc(-5 * var(--u)); }
/* Le jeu du soir : une case de la roue, et sa plaquette à cheval sur le bord.
   La palette est celle des rangs (socle, section 12) : sans couleur de rang,
   le verre noir et le métal du thème. app.js ne dit pas le rang ici : le jour
   où il posera .carte-rang-or sur cette case, elle en prendra la couleur
   (:where ne pèse rien, la classe du rang l'emporte). */
:where(#lot-jeu) {
  --rang-vif: var(--metal-clair); --rang-clair: var(--metal-sombre); --rang-creux: var(--metal-pied); --rang-sombre: var(--metal-creux);
  --rang-haut: rgb(var(--verre-haut)); --rang-bas: rgb(var(--verre-bas)); --rang-coeur: rgb(var(--verre-milieu));
  --rang-lueur: rgba(255, 255, 255, 0.03); --rang-reflet: rgba(255, 255, 255, 0.05);
  --rang-titre: var(--texte);
}
#ecran-lot #lot-jeu {
  position: relative; align-self: stretch; min-width: 0; margin-top: calc(9 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: calc(62 * var(--u)); padding: calc(15 * var(--u)) calc(14 * var(--u)) calc(11 * var(--u));
  border-radius: calc(12 * var(--u));
  background: linear-gradient(180deg, var(--rang-haut), var(--rang-coeur) 46%, var(--rang-bas));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 calc(24 * var(--u)) var(--rang-lueur),
    0 0 0 1px rgba(0, 0, 0, 0.8), 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.5);
}
/* le cadre de la case, du même métal qu'elle */
#ecran-lot #lot-jeu::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; 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;
}
/* la plaquette « Le jeu du soir », à cheval sur le bord de la case (voulu : --mesure) */
#ecran-lot #lot-jeu .salon-lot-label {
  --mesure: etiquette chevauche;
  position: absolute; z-index: 1; left: 50%; top: 0; transform: translate(-50%, -52%);
  padding: calc(2.5 * var(--u)) calc(10 * var(--u)); border-radius: calc(4 * var(--u));
  font-weight: 900; letter-spacing: 0.14em; font-size: max(9.5px, calc(10 * var(--u))); line-height: 1.25;
  color: var(--sur-metal); white-space: nowrap;
  background: linear-gradient(180deg, var(--metal-vif), var(--metal-clair) 40%, var(--metal-sombre));
  box-shadow: 0 0 0 1px rgba(14, 8, 2, 0.85), 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
#ecran-lot #lot-jeu-titre {
  position: relative; max-width: 100%; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.16;
  font-size: max(16px, calc(18 * var(--u))); color: var(--rang-titre);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 calc(12 * var(--u)) var(--rang-lueur);
}
/* la bannière du jeu du soir (SPECS 7.1 bis), au-dessus de son nom : entière, à plat, un filet sombre autour.
   Elle ne pousse jamais la case hors de l'écran : quand la place manque, le décor le mesure et la remise passe
   « à l'étroit » (section 4 bis), où le haut de l'écran ne garde que le pseudo du gagnant. */
#ecran-lot #lot-jeu-image {
  display: block; flex: none; width: min(100%, calc(210 * var(--u))); height: auto; aspect-ratio: 460 / 215; object-fit: cover;
  margin: calc(2 * var(--u)) 0 calc(8 * var(--u)); border-radius: calc(7 * var(--u));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
#ecran-lot #lot-jeu.avec-image { padding-top: calc(17 * var(--u)); }

/* ---------- Ce qui se passe (.lot-suite) ----------
   La consigne, la case et son délai, le verdict, les preuves du tirage. C'est
   la SEULE zone de l'écran qui peut défiler, et seulement si la place manque. */
#ecran-lot .lot-suite {
  flex: 0 1 auto; min-width: 0; min-height: 0; margin-bottom: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--lot-ecart);
  /* (la marge du dedans laisse aux lueurs la place de s'éteindre avant le bord de la zone, qui les rogne) */
  padding: calc(12 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u));
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent; overscroll-behavior: contain;
}
#ecran-lot .lot-suite > * { flex: none; max-width: 100%; }
/* (pas de lignes équilibrées ici : la phrase du jeu porte une espace ordinaire
   devant « : », et l'équilibrage renvoyait volontiers le signe seul en tête de
   la ligne suivante) */
#ecran-lot #lot-consigne {
  max-width: calc(560 * var(--u)); margin: 0; text-align: center; text-wrap: wrap;
  font-size: var(--taille-texte); line-height: 1.36; color: var(--texte);
}

/* ---------- LA CASE (#lot-majeur) et son délai (#lot-rebours) ----------
   Une plaque de verre allumée : la case et sa phrase, puis, en pied, le temps
   qui reste. La plaque est dessinée par le ::before de la case, qui descend
   derrière le pied : les deux pièces n'en font qu'une.
   Épinglées au bas de .lot-suite (position: sticky) : si cette zone devait
   défiler, la case et son délai resteraient en vue, la case posée sur son pied
   (--lot-bas : le filet de place gardé sous le pied, la plaque reste fermée).
   Le fond de la plaque est opaque : rien ne se lit au travers. */
#ecran-lot #lot-majeur {
  position: sticky; bottom: calc(var(--lot-pied) + var(--lot-bas)); z-index: 3;
  align-self: stretch; margin-top: calc(2 * var(--u));
  gap: calc(13 * var(--u)); min-height: max(44px, calc(60 * var(--u)));
  padding: calc(13 * var(--u)) calc(14 * var(--u)) calc(11 * var(--u));
  border-radius: calc(13 * var(--u)) calc(13 * var(--u)) 0 0;
  background: none; box-shadow: none;
  font-size: var(--taille-texte); line-height: 1.34; color: var(--texte);
  -webkit-tap-highlight-color: transparent;
}
#ecran-lot #lot-majeur::before {
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; left: 0; bottom: calc(-1 * var(--lot-pied));
  border-radius: calc(13 * var(--u)); pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, rgba(var(--accent-rvb), 0.2), rgba(var(--accent-rvb), 0.08)),
    linear-gradient(180deg, rgb(var(--verre-haut)), rgb(var(--verre-bas)));
  box-shadow:
    inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--accent),
    inset 0 0 calc(22 * var(--u)) rgba(var(--accent-rvb), 0.16),
    0 0 calc(5 * var(--u)) rgba(var(--accent-rvb), 0.5);
}
/* la case elle-même : grosse, facile à toucher (toute la plaque la coche) */
#ecran-lot #lot-majeur-case { width: max(32px, calc(36 * var(--u))); height: max(32px, calc(36 * var(--u))); border-radius: calc(8 * var(--u)); }
#ecran-lot #lot-majeur strong { color: var(--accent-vif); }
/* le délai, pied de la plaque (il suit la case : app.js les montre ensemble au gagnant) */
#ecran-lot #lot-majeur:not([hidden]) + #lot-rebours {
  position: sticky; bottom: var(--lot-bas); z-index: 4;
  align-self: stretch; box-sizing: border-box; height: var(--lot-pied); margin-top: calc(-1 * var(--lot-ecart));
  display: flex; align-items: center; justify-content: center;
  margin-left: max(1.5px, calc(2 * var(--u))); margin-right: max(1.5px, calc(2 * var(--u)));
  border-top: 1px solid rgba(var(--accent-rvb), 0.45);
  border-radius: 0 0 calc(11 * var(--u)) calc(11 * var(--u));
  /* UNE INFORMATION, pas un bouton : en capitales de plateau dans son bandeau, « 25 S POUR CERTIFIER » se lisait
     comme la touche à presser, alors que seule la case certifie (contrôle du 2026-10-08). Le délai s'écrit donc
     comme une phrase, en lettres courantes, derrière un petit sablier dessiné ; son bandeau est en creux. */
  gap: calc(8 * var(--u));
  font-family: var(--police-texte); font-weight: 700; letter-spacing: 0.01em; text-transform: none; line-height: 1;
  font-size: max(16px, calc(16.5 * var(--u)));
  color: var(--accent-vif);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.2));
  box-shadow: inset 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* le sablier : deux triangles de la couleur du délai (un dessin, aucun texte) */
#ecran-lot #lot-majeur:not([hidden]) + #lot-rebours::before {
  content: ''; flex: none; width: calc(10 * var(--u)); height: calc(14 * var(--u));
  background: currentColor;
  -webkit-clip-path: polygon(0 0, 100% 0, 58% 50%, 100% 100%, 0 100%, 42% 50%);
  clip-path: polygon(0 0, 100% 0, 58% 50%, 100% 100%, 0 100%, 42% 50%);
}
/* moins de cinq secondes : le pied rougit et bat (app.js pose .urgence) */
#ecran-lot #lot-majeur:not([hidden]) + #lot-rebours.urgence {
  color: var(--alerte-claire);
  border-top-color: rgba(var(--alerte-rvb), 0.6);
  background: linear-gradient(180deg, rgba(var(--alerte-rvb), 0.26), rgba(var(--alerte-rvb), 0.1));
  animation: fin-urgence 1s ease-in-out infinite;
}
@keyframes fin-urgence { 50% { opacity: 0.72; } }

/* ---------- Le délai vu du salon (la case est cachée) : un compte à rebours, sous « … réclame son lot… » ---------- */
/* (interligne de 1,2 : à 1, les chiffres dépassaient leur ligne de deux pixels, et la zone se mettait à défiler d'autant) */
#ecran-lot #lot-rebours {
  font-family: var(--police-plateau); font-weight: 900; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
  font-size: calc(var(--taille-titre) * 1.1); line-height: 1.2; color: var(--accent-vif);
  text-shadow: 0 0 calc(18 * var(--u)) rgba(var(--accent-rvb), 0.55), 0 2px 0 rgba(0, 0, 0, 0.6);
}
#ecran-lot #lot-rebours.urgence { color: var(--alerte); text-shadow: 0 0 calc(18 * var(--u)) rgba(var(--alerte-rvb), 0.6), 0 2px 0 rgba(0, 0, 0, 0.6); }

/* ---------- Le verdict ----------
   « GAGNÉ : … », « LOT NON RÉCLAMÉ », « AUCUN JEU TIRÉ ». Il passe devant la
   consigne. Sa taille suit sa longueur (--car, tenu à jour par app.js) : un
   titre de jeu très long tient en trois lignes sur téléphone, deux ailleurs. */
#ecran-lot #lot-verdict {
  order: -1; margin: 0; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
  text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1;
  /* (26 u au plus : « LOT NON RÉCLAMÉ » tient sur une ligne de téléphone) */
  font-size: clamp(max(16px, calc(20 * var(--u))), calc(780 * var(--u) / var(--car, 24)), calc(26 * var(--u)));
  color: var(--metal-vif); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
#ecran-lot #lot-verdict.lot-gagne {
  color: var(--rang-teinte-vive);
  text-shadow: 0 0 calc(10 * var(--u)) var(--rang-teinte), 0 2px 0 rgba(0, 0, 0, 0.6);
  animation: fin-eclat 1.5s ease-in-out infinite;
}
@keyframes fin-eclat { 50% { filter: brightness(1.18); } }
/* un incident : rien n'est promis, rien ne brille */
#ecran-lot #lot-verdict.lot-perdu { color: var(--texte-doux); }

/* ---------- Les preuves du tirage ----------
   Repliées : un lien. Dépliées : elles défilent DANS LEUR CADRE, et c'est ce
   cadre qui cède la place quand elle manque (jusqu'à ne garder que son lien) :
   déplier les preuves pendant le délai ne pousse jamais la case hors de vue,
   et la zone autour ne se met pas à défiler pour elles. */
#ecran-lot #lot-preuve {
  flex: 0 1 auto; min-height: max(44px, calc(44 * var(--u))); max-height: calc(max(44px, 44 * var(--u)) + var(--lot-preuves));
  align-self: stretch; text-align: left;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent; overscroll-behavior: contain;
  --lot-preuves: calc(132 * var(--u));              /* hauteur montrée des preuves dépliées */
}
#ecran-lot #lot-preuve > summary { min-height: max(44px, calc(44 * var(--u))); list-style: none; text-align: center; }
/* (la carte ne défile plus elle-même : un seul cadre défile, celui des preuves) */
#ecran-lot #lot-preuve-contenu { max-height: none; overflow: visible; margin: 0 max(1.5px, calc(2 * var(--u))) calc(3 * var(--u)); font-size: var(--taille-note); }


/* ============================================================================
   4. LA REMISE DU LOT, COUCHÉE PUIS SUR ORDINATEUR
   ----------------------------------------------------------------------------
   Le gagnant et son lot à gauche, ce qui se passe à droite, sur toute la
   hauteur du panneau. .lot-suite se centre par deux pièces vides aux marges
   automatiques (jamais par justify-content : son début resterait hors
   d'atteinte si elle défilait).
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  #ecran-lot {
    --taille-titre: calc(22 * var(--u)); --lot-pied: max(28px, calc(28 * var(--u))); --lot-ecart: calc(6 * var(--u));
    /* (0,8 pour 1,2 : un pseudo de vingt lettres garde 16 px au moins dans la colonne de gauche) */
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr);
    column-gap: calc(12 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u));
  }
  #ecran-lot .lot-tete { align-self: center; margin-top: 0; gap: calc(3 * var(--u)); }
  /* la colonne est étroite : le surtitre se resserre pour tenir sur sa ligne */
  #ecran-lot .annonce-surtitre { letter-spacing: 0.08em; gap: calc(5 * var(--u)); }
  /* (10 u au-dessus de la case, pas 8 : sa plaquette, à cheval sur son bord, venait mordre d'un
     pixel sur la ligne du pseudo ; la colonne a de la hauteur à revendre) */
  #ecran-lot #lot-jeu { min-height: calc(44 * var(--u)); padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)); margin-top: calc(10 * var(--u)); }
  #ecran-lot #lot-jeu-titre { font-size: max(16px, calc(16 * var(--u))); }
  #ecran-lot #lot-jeu-image { width: min(100%, calc(150 * var(--u))); margin-bottom: calc(5 * var(--u)); }
  #ecran-lot .lot-suite { align-self: stretch; margin-bottom: 0; padding-top: calc(6 * var(--u)); padding-bottom: calc(2 * var(--u)); }
  #ecran-lot .lot-suite::before { content: ''; order: -2; margin-top: auto; }
  #ecran-lot .lot-suite::after { content: ''; order: 9; margin-bottom: auto; }
  #ecran-lot #lot-majeur { min-height: max(44px, calc(44 * var(--u))); padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u)); margin-top: 0; }
  #ecran-lot #lot-majeur-case { width: max(30px, calc(30 * var(--u))); height: max(30px, calc(30 * var(--u))); }
  #ecran-lot #lot-verdict { font-size: clamp(max(16px, calc(18 * var(--u))), calc(1150 * var(--u) / var(--car, 24)), calc(27 * var(--u))); }
  #ecran-lot #lot-preuve { --lot-preuves: calc(84 * var(--u)); }
}
@media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) {
  /* Sans cadrans au-dessus de lui, le panneau est grand : ce qu'il porte grandit avec lui */
  #ecran-lot {
    /* (48 u, pas plus : le nom ne rétrécit pas sous 45 % de sa taille, et un pseudo de vingt
       lettres doit encore tenir sur une ligne dans la colonne de gauche) */
    --taille-titre: calc(48 * var(--u)); --taille-texte: calc(20 * var(--u)); --taille-note: calc(16.5 * var(--u));
    --lot-pied: calc(46 * var(--u)); --lot-ecart: calc(16 * var(--u));
    display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.02fr); grid-template-rows: minmax(0, 1fr);
    column-gap: calc(28 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u));
  }
  #ecran-lot .lot-tete { align-self: center; margin-top: 0; gap: calc(9 * var(--u)); }
  #ecran-lot #lot-jeu { min-height: calc(104 * var(--u)); margin-top: calc(28 * var(--u)); padding: calc(24 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)); border-radius: calc(15 * var(--u)); }
  #ecran-lot #lot-jeu .salon-lot-label { font-size: max(10px, calc(13 * var(--u))); padding: calc(4 * var(--u)) calc(15 * var(--u)); }
  #ecran-lot #lot-jeu-titre { font-size: calc(25 * var(--u)); }
  #ecran-lot #lot-jeu-image { width: min(100%, calc(330 * var(--u))); margin-bottom: calc(12 * var(--u)); }
  #ecran-lot #lot-jeu.avec-image { padding-top: calc(26 * var(--u)); }
  #ecran-lot .lot-suite {
    align-self: stretch; margin-bottom: 0;
    padding: calc(12 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(28 * var(--u));
    border-left: 1px solid rgba(var(--metal-clair-rvb), 0.28);
  }
  #ecran-lot .lot-suite::before { content: ''; order: -2; margin-top: auto; }
  #ecran-lot .lot-suite::after { content: ''; order: 9; margin-bottom: auto; }
  #ecran-lot #lot-majeur { padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u)); gap: calc(18 * var(--u)); }
  #ecran-lot #lot-majeur-case { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
  #ecran-lot #lot-majeur:not([hidden]) + #lot-rebours { font-size: calc(20 * var(--u)); }
  #ecran-lot #lot-verdict { font-size: clamp(calc(24 * var(--u)), calc(1400 * var(--u) / var(--car, 24)), calc(34 * var(--u))); }
  #ecran-lot #lot-preuve { --lot-preuves: calc(200 * var(--u)); }
}


/* ============================================================================
   4 bis. LA REMISE DU LOT, À L'ÉTROIT (#ecran-lot.a-l-etroit)
   ----------------------------------------------------------------------------
   Les garanties de la section 3 tiennent tant que la zone a la hauteur de la
   plaque de la case et de son pied. Elle ne l'a plus quand le texte prend plus
   de place que prévu :
     - le texte du téléphone est agrandi par le ZOOM DE PAGE (à 200 %, un écran
       de 375 sur 812 devient une fenêtre de 188 sur 406, où ce qui se lit
       garde 16 px quand tout le reste rétrécit avec la fenêtre) ;
     - le TEXTE SEUL est agrandi, la fenêtre ne change pas (zoom du texte seul
       de Firefox, taille de police minimale du navigateur, taille du texte du
       système sur certains téléphones) ;
     - très petite fenêtre, écran partagé, titre de jeu de 120 caractères.
   Contrôle du 2026-10-08, sur un vrai serveur, par de vrais clics : dans ces
   cas la case passait sous son délai, puis hors de l'écran, qui ne défile pas.
   Le gagnant ne pouvait plus la cocher, le lot était « non réclamé », quand la
   page du jeu d'aujourd'hui, qui défile, l'attribuait.
   Aucune condition @media ne voit que le texte seul a grandi : c'est le décor
   qui MESURE (pupitre/pupitre.js, mesurerLeLot). Dans la mise en page
   ordinaire, la plaque et son pied tiennent-ils dans leur zone ? Sinon il
   pose la classe « a-l-etroit » sur l'écran, et la zone change d'ordre :
   PLUS RIEN N'EST ÉPINGLÉ, d'abord le délai, puis LA CASE, en haut de sa
   plaque, puis sa phrase et la consigne. Le haut de l'écran ne garde que le
   pseudo du gagnant (le jeu du soir se lit au couronnement et dans le verdict)
   et la bulle du professeur se réduit. Si la place manque encore, la zone
   défile À PARTIR DE LA CASE : elle et son délai sont sous les yeux sans rien
   faire défiler, le reste se lit en faisant défiler.
   (Rien ici ne change la taille du pseudo ni la largeur de son bloc : la mesure
   se fait dans la mise en page ordinaire, elle ne doit pas dépendre de celle-ci.)
   ========================================================================== */
#ecran-lot.a-l-etroit { --lot-ecart: calc(8 * var(--u)); }
/* la bulle du professeur garde sa rangée, en plus basse : la hauteur va à la case */
#ecran-lot.a-l-etroit ~ .rampe-basse .bulle { --bulle-lignes: 2; }
/* le haut de l'écran : le pseudo du gagnant, seul */
#ecran-lot.a-l-etroit .annonce-surtitre, #ecran-lot.a-l-etroit #lot-jeu { display: none; }
#ecran-lot.a-l-etroit .lot-suite { padding-top: calc(5 * var(--u)); }
/* (couchée et sur ordinateur, la pièce vide qui centre la zone reste devant tout : elle ne sépare pas le délai de la case) */
#ecran-lot.a-l-etroit .lot-suite::before { order: -9; }
/* le délai, en tête : une ligne de texte courant, qui passe à la ligne si elle est trop longue */
#ecran-lot.a-l-etroit #lot-majeur:not([hidden]) + #lot-rebours {
  position: static; order: -3;
  height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  white-space: normal; text-align: center;
  font-family: var(--police-texte); font-weight: 800; letter-spacing: 0.01em; text-transform: none; line-height: 1.2;
}
#ecran-lot.a-l-etroit #lot-majeur:not([hidden]) + #lot-rebours.urgence { background: none; }
/* (pas de sablier à l'étroit : le délai est une ligne de texte, qui peut passer à la ligne) */
#ecran-lot.a-l-etroit #lot-majeur:not([hidden]) + #lot-rebours::before { content: none; }
/* LA CASE, juste dessous, EN HAUT de sa plaque : elle se voit avant sa phrase, qui peut être longue */
#ecran-lot.a-l-etroit #lot-majeur {
  position: relative; bottom: auto; order: -2; align-items: flex-start;
  margin-top: 0; gap: max(8px, calc(10 * var(--u))); padding: max(7px, calc(9 * var(--u))) max(8px, calc(10 * var(--u)));
  border-radius: max(7px, calc(13 * var(--u)));
}
#ecran-lot.a-l-etroit #lot-majeur::before { bottom: 0; }
/* couchée et très basse : une ligne de bulle, et plus aucune marge perdue au-dessus de la case */
@media (orientation: landscape) and (max-height: 279px) {
  #ecran-lot.a-l-etroit ~ .rampe-basse .bulle { --bulle-lignes: 1; }
  #ecran-lot.a-l-etroit .lot-suite { padding-top: 0; }
}
/* très étroit, vu du salon : le compte à rebours passe à la ligne plutôt que d'être coupé (« Temps écoulé… ») */
@media (max-width: 279px) {
  #ecran-lot #lot-majeur[hidden] + #lot-rebours { white-space: normal; text-align: center; }
}


/* ============================================================================
   5. CE QUI NE DOIT JAMAIS COUVRIR LA CASE
   ----------------------------------------------------------------------------
   - Le professeur et sa bulle ont leur rangée, sous l'écran (socle) : même
     pleine, la bulle ne touche pas à l'écran du lot.
   - Les bandeaux (« Signal perdu », nouvelle version) ont la leur, au-dessus :
     ils prennent de la hauteur à l'écran, jamais de la place SUR lui.
   - Le message bref se pose au bas de la fenêtre, dans la rangée du professeur.
   - Le voile de pause : le serveur ne met en pause qu'une partie EN COURS, et
     app.js le lève au couronnement (onTerminee). S'il restait pourtant posé au
     moment de la certification, il couvrirait la case pendant que le délai
     court : sur ces deux écrans, il n'est jamais montré.
   ========================================================================== */
body[data-moment="fin"] #bandeau-pause { display: none; }
/* - Le bandeau « Nouvelle version du jeu : recharge la page » attend la fin de la remise du lot
     (une trentaine de secondes au plus : il revient avec le classement). Empilé sous « Signal
     perdu », il prenait à l'écran du lot la hauteur dont la case a besoin : sur un très petit
     téléphone (320 sur 460), le gagnant ne pouvait plus la cocher. Et ce n'est pas le moment
     d'inviter le gagnant à recharger sa page. Un seul bandeau peut donc se trouver au-dessus
     de l'écran du lot (une démonstration n'a pas de lot). */
body[data-ecran="lot"] #bandeau-version { display: none; }
/* - La fenêtre du règlement, ouverte par le lien de la case PENDANT le délai : « Fermer » doit se
     voir et se toucher quoi qu'il arrive, sinon le gagnant ne revient plus à la case (un téléphone
     n'a pas de touche Échap). Dans une fenêtre très basse (téléphone couché dont le texte est
     agrandi à 200 % : 406 sur 188), les onglets et le titre prenaient toute la hauteur de la
     fenêtre, qui rogne ce qui dépasse : « Fermer » passait sous son bord, hors d'atteinte (contrôle
     du 2026-10-08). Sur l'écran du lot, la fenêtre défile donc quand ses pièces fixes ne tiennent
     pas, son texte garde quelques lignes, et « Fermer » reste épinglé à son bas. Rien ne change
     quand tout tient. (Les fenêtres sont à l'étape 2, qui réglera le cas général : ce filet ne
     vaut qu'ici, où un lot en dépend.) */
body[data-ecran="lot"] #dialogue-legal { overflow-y: auto; }
body[data-ecran="lot"] #dialogue-legal .legal-contenu { min-height: calc(4 * 1.5em); }
body[data-ecran="lot"] #dialogue-legal #btn-fermer-legal { position: sticky; bottom: 0; z-index: 1; }


/* ============================================================================
   6. REPLIS
   ========================================================================== */
/* sans découpe en anneau, un cerclage couvrirait son panneau : un simple filet le remplace (comme dans le socle) */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #ecran-fin .fin-gloire::before, #ecran-fin .fin-tableau::before, #ecran-lot::before, #ecran-lot #lot-jeu::after {
    background: none; padding: 0; border: max(1.5px, calc(2 * var(--u))) solid var(--metal-clair);
  }
}
/* Couleurs forcées (les thèmes « Contraste élevé » de Windows) : le navigateur retire les fonds, les
   images et les ombres. Or la case est dessinée par eux (socle) : elle ne se voyait plus DU TOUT, il
   ne restait que sa phrase (contrôle du 2026-10-08, capture à l'appui ; un clic à sa place la cochait
   encore). Sur l'écran du lot elle redevient donc la case du système, que ce mode sait montrer, et sa
   plaque, qui a perdu son fond, reçoit un filet. */
@media (forced-colors: active) {
  #ecran-lot #lot-majeur-case { -webkit-appearance: checkbox; appearance: auto; }
  #ecran-lot #lot-majeur-case::after { content: none; }
  #ecran-lot #lot-majeur { outline: 2px solid CanvasText; outline-offset: -2px; }
}
/* l'étoile du gagnant, au bout de la première ligne du classement : seulement si le navigateur sait la découper */
@supports ((mask: linear-gradient(#000 0 0)) or (-webkit-mask: linear-gradient(#000 0 0))) {
  #ecran-fin #fin-classement > li[value="1"]::after {
    content: ''; flex: none; margin-left: auto; width: calc(var(--fin-disque) * 0.82); height: calc(var(--fin-disque) * 0.82);
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.9l2.75 5.8 6.35.8-4.7 4.35 1.25 6.25L12 17l-5.65 3.1 1.25-6.25L2.9 9.5l6.35-.8z'/%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 24 24'%3E%3Cpath d='M12 2.9l2.75 5.8 6.35.8-4.7 4.35 1.25 6.25L12 17l-5.65 3.1 1.25-6.25L2.9 9.5l6.35-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}