/* ============================================================================
   LE LABORATOIRE · interface B · ÉTAPE 1 : LA MANCHE
   ----------------------------------------------------------------------------
   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-annonce    l'annonce d'une manche, ordinaire ou spéciale. La FINALE
                       (#ecran-annonce.annonce-finale) est à l'étape 3 : toutes
                       les règles d'ici s'écrivent sous :not(.annonce-finale),
                       pour la lui laisser telle que le socle la donne.
     #ecran-jeu        la question : tous ses états, et ses trois bandeaux
                       (#bandeau-tutoriel, #bandeau-spectateur, #bandeau-mode)
     #ecran-resultats  les résultats d'une manche : le BILAN (#pupitre-bilan) et
                       les quatre RÉPONSES (.recap-ligne, fabriquées par app.js)
     la bulle du professeur sur ces écrans (le clash arrive sur les résultats)
   Maquettes : data/maquettes-2026-10-07/B-suite/annonce.html, question.html,
   resultats.html. Plan : docs/interface-b/plan-de-bascule.md, partie 3.
   Décidé à cette étape : SPECS 2.12, « Étape 1 ».

   SOMMAIRE
     1. L'annonce d'une manche
     2. La question, ses bandeaux
     3. Les résultats : le bilan, les quatre réponses
     4. Les paliers : quand le contenu est trop haut, l'écran se resserre
     5. Téléphone couché
     6. Ordinateur

   LES PALIERS (section 4). La question et les résultats tiennent toujours dans
   la scène : quand leur contenu est trop haut (réponses sur trois lignes,
   douze éliminés, trois bandeaux), pupitre.js le mesure et pose sur la page,
   l'un après l'autre et seulement tant que cela déborde, les mots de
   body[data-serre="…"] :
     serre             les marges se resserrent, le surtitre et le voyant s'effacent
     tasse             un cran de plus
     sans-lot          téléphone debout : l'étiquette « Jeu du soir » cède sa rangée
     sans-etiquettes   téléphone : l'étiquette « Manche, Difficulté » aussi
     reduit            ordinateur : le texte des réponses rétrécit
     defile            dernier recours : la liste des réponses défile, jamais la page
   Avec les textes habituels, aucun palier n'est posé.

   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-annonce, #ecran-jeu,
   #ecran-resultats, une pièce qu'ils contiennent, ou
   body[data-ecran="annonce"], "jeu", "resultats" pour ce qui est hors de
   l'écran : la bulle, une étiquette) : jamais de sélecteur nu ni de réglage
   posé sur :root ; le nom d'une animation (@keyframes) commence par
   « manche- » ; 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 » ; les états de cette étape sont
   dans outils/parcours-du-pupitre/manche.mjs. Monte le « ?v= » de cette
   feuille, sur sa ligne de pupitre.html, quand tu la modifies.
   ========================================================================== */


/* ============================================================================
   1. L'ANNONCE D'UNE MANCHE (#ecran-annonce, hors finale)
   ----------------------------------------------------------------------------
   Un carton riveté, tout y est centré : le surtitre, « MANCHE 7 » en géant
   (sur téléphone debout, « MANCHE » coiffe le numéro), la difficulté et les
   joueurs en lice, et la règle de la manche quand elle est spéciale. Le jeu du
   soir n'y est pas redit : l'étiquette « Jeu du soir » le porte déjà, juste à
   côté. Le carton ne défile pas (son contenu est court) : il peut donc porter
   le cerclage découpé et les rivets des grands panneaux, que le socle réserve
   aux pièces qui ne défilent pas.
   Centré sans « justify-content » : deux rangées vides se partagent la place
   qui reste, et se referment si le contenu est trop haut.
   ========================================================================== */
#ecran-annonce:not(.annonce-finale) {
  /* le numéro de la manche : 80 u sur un téléphone court (360 x 640 : la scène n'a que 335 u de haut), jusqu'à
     104 u quand l'écran est plus haut que large (la hauteur en plus va toute à la scène) */
  --annonce-geant: calc(80 * var(--u) + min(24 * var(--u), (var(--hauteur-utile) - 732 * var(--u)) * 0.5));
  --annonce-ecart: calc(13 * var(--u));            /* entre deux pièces du carton */
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto auto auto minmax(0, 1fr);
  justify-items: center; gap: 0;
  overflow: hidden;
  box-shadow: var(--verre-ombre);
}
/* le cerclage et les rivets du carton (les deux règles de .verre et de .rivete, recopiées) */
#ecran-annonce:not(.annonce-finale)::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-annonce:not(.annonce-finale)::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;
  --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;
  opacity: 0.9;
}
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #ecran-annonce:not(.annonce-finale)::before { background: none; padding: 0; border: max(1.5px, calc(2 * var(--u))) solid var(--metal-clair); }
}
#ecran-annonce:not(.annonce-finale) > .annonce-surtitre { grid-row: 2; }
#ecran-annonce:not(.annonce-finale) > .annonce-manche { grid-row: 3; }
#ecran-annonce:not(.annonce-finale) > .annonce-difficulte { grid-row: 4; }
#ecran-annonce:not(.annonce-finale) > .annonce-joueurs { grid-row: 5; }
#ecran-annonce:not(.annonce-finale) > .annonce-mode { grid-row: 6; }
/* le jeu du soir : dit par l'étiquette « Jeu du soir », pas une seconde fois ici */
#ecran-annonce:not(.annonce-finale) > .annonce-lot { display: none; }

/* « MANCHE 7 » : sur téléphone debout, le mot passe sur sa ligne, en petit, et
   le numéro dessous, en géant (l'espace entre les deux est rendu assez large
   pour forcer le retour à la ligne ; ::first-line habille la première ligne).
   Le mot est posé au ras du numéro ; au-dessus de lui, un écart franc avec le
   surtitre (avant le 2026-10-15, une marge négative les faisait se toucher,
   voire se chevaucher, à 375 x 812 et 390 x 844 : test/pupitre-manche.test.js). */
#ecran-annonce:not(.annonce-finale) .annonce-manche {
  margin-top: calc(12 * var(--u));
  font-size: var(--annonce-geant); line-height: 0.82; letter-spacing: 0.02em;
  font-variant-numeric: lining-nums;
  white-space: normal; text-wrap: wrap; overflow-wrap: normal; word-spacing: 100vw;
  animation: manche-entree 0.5s ease both;
}
#ecran-annonce:not(.annonce-finale) .annonce-manche::first-line {
  font-size: 0.21em; line-height: 1.3; letter-spacing: 0.34em;
  color: var(--metal-vif); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
@keyframes manche-entree { from { opacity: 0; transform: scale(1.22); } }
/* la difficulté et les joueurs en lice : deux lignes sous le titre */
#ecran-annonce:not(.annonce-finale) .annonce-difficulte,
#ecran-annonce:not(.annonce-finale) .annonce-joueurs {
  font-family: var(--police-plateau); font-weight: 700; letter-spacing: 0.08em; line-height: 1.25; white-space: nowrap;
  font-size: max(16px, calc(16.5 * var(--u)));
}
#ecran-annonce:not(.annonce-finale) .annonce-difficulte { margin-top: var(--annonce-ecart); color: var(--accent); }
#ecran-annonce:not(.annonce-finale) .annonce-joueurs { margin-top: calc(5 * var(--u)); color: var(--texte); }
/* la règle d'une manche spéciale : une plaque qui s'allume, impossible à rater */
#ecran-annonce:not(.annonce-finale) .annonce-mode {
  margin-top: var(--annonce-ecart); max-width: 100%;
  padding: calc(8 * var(--u)) calc(18 * var(--u)); border-radius: calc(14 * var(--u));
  text-align: center; text-wrap: balance;
  font-family: var(--police-texte); font-weight: 700; letter-spacing: 0; line-height: 1.25;
  font-size: calc(var(--taille-texte) * 1.06); 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: manche-regle 1.8s ease-in-out infinite;
}
@keyframes manche-regle { 50% { filter: brightness(1.16); } }


/* ============================================================================
   2. LA QUESTION (#ecran-jeu)
   ----------------------------------------------------------------------------
   Le socle range déjà la question dans son panneau et les quatre touches
   dessous. Cette feuille habille les trois bandeaux qui s'écrivent AU-DESSUS de
   la question, dans la scène (ils ne prennent rien aux cadrans) :
     #bandeau-tutoriel    « TUTORIEL : partie de démonstration, rien n'est en jeu »
     #bandeau-spectateur  « Mode spectateur : pronostique le choix de la foule »
     #bandeau-mode        la règle d'une manche spéciale (bonne réponse, vitesse, finale)
   Deux peuvent s'empiler (spectateur et manche spéciale) : ils sont fins, et la
   scène se resserre si la place manque (section 4).
   ========================================================================== */
#ecran-jeu > .bandeau {
  padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u));
  text-wrap: balance;
}
/* la règle de la manche a changé : à l'accent, elle luit */
#ecran-jeu > #bandeau-mode {
  font-weight: 700;
  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(18 * var(--u)) rgba(var(--accent-rvb), 0.4),
    inset 0 0 calc(18 * var(--u)) rgba(var(--accent-rvb), 0.16);
}
/* le spectateur : au bleu de l'information (il ne joue plus, il pronostique) */
#ecran-jeu > #bandeau-spectateur {
  color: var(--moi-vif);
  box-shadow:
    inset 0 0 0 max(1.2px, calc(1.5 * var(--u))) rgba(var(--moi-rvb), 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5);
}

/* CHANGER SA RÉPONSE (SPECS 2.2 bis, 2026-10-15). Tant que le chrono tourne,
   les trois autres touches restent des touches (pied de laiton, soulevées sous
   la souris : les règles du socle) ; la choisie reste enfoncée et allumée, et
   la retoucher ne fait rien : la flèche, pas la main. À la fin du chrono, app.js
   les éteint toutes (disabled), sauf la choisie qui reste allumée.
   #reponse-etat : la ligne discrète sous les touches (« Réponse reçue : tu peux
   encore changer d'avis. »). Un TEXTE, jamais une touche : ni cadre, ni relief,
   ni main. Sa hauteur d'une ligne est gardée même vide, pour que rien ne saute
   quand elle s'écrit. */
#ecran-jeu .reponse.choisie:not(:disabled) { cursor: default; }
#ecran-jeu > #reponse-etat {
  flex: none; margin: calc(2 * var(--u)) 0 0; text-align: center; text-wrap: balance;
  font-family: var(--police-texte); font-weight: 400; font-style: italic; letter-spacing: 0;
  font-size: var(--taille-note); line-height: 1.25; min-height: 1.25em;
  color: var(--texte-doux); pointer-events: none;
}


/* ============================================================================
   3. LES RÉSULTATS D'UNE MANCHE (#ecran-resultats)
   ----------------------------------------------------------------------------
   Deux parties : le BILAN (#pupitre-bilan : « Résultats », ce que la manche a
   valu au joueur et pourquoi, puis qui est éliminé) et les quatre RÉPONSES
   (#recap-reponses), dans l'ordre où le joueur les a vues. Sur téléphone elles
   s'empilent ; sur ordinateur et sur téléphone couché elles sont côte à côte.

   Une ligne de réponse est fabriquée par app.js (ligneRecap), la même pour la
   manche et pour le tutoriel :
     .recap-ligne  (.a-donner : il fallait la donner ; .mienne ; .en-retrait)
       .recap-lettre                       A, B, C, D
       .recap-texte                        le texte, puis :
         .recap-badges > .recap-badge.moi      « TA RÉPONSE »
         .recap-pied
           .recap-badge.fallait                « IL FALLAIT RÉPONDRE »
           .recap-barre > span                 la barre des votes
           .recap-mention                      « choix de la majorité », « bonne réponse »…
       .recap-pct                          « 58 % »
   Rangée 1 : le texte de la réponse, suivi de sa mention quand les deux
   tiennent sur la ligne (sinon la mention passe dessous, d'un bloc). Rangée 2 :
   la barre et le pourcentage. Les deux plaques sont posées à cheval sur le bord
   haut de la ligne, comme la plaquette du professeur sur sa bulle : jamais la
   couleur seule, un daltonien lit la plaque (SPECS 2.4 bis).
   ========================================================================== */
#ecran-resultats.scene {
  padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  align-items: stretch; text-align: left;
  --resultats-verdict: max(16px, calc(20 * var(--u)));   /* ce que la manche a valu au joueur */
  --resultats-cause: max(16px, calc(16.5 * var(--u)));   /* la raison, écrite juste avant */
  --resultats-elimines: 4;                               /* lignes que la liste des éliminés peut prendre */
}

/* ----- Le bilan ----- */
/* chaque partie a au moins la hauteur de son contenu ; la place en plus est partagée, deux parts pour le bilan, cinq pour les réponses */
#pupitre-bilan {
  flex: 2 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  min-width: 0; padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(9 * var(--u));
  text-align: center; overflow: hidden;
}
/* « Résultats » : un surtitre, entre deux traits */
#ecran-resultats .resultats-titre {
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  font-weight: 700; letter-spacing: 0.2em; line-height: 1.2;
  font-size: var(--taille-surtitre); color: var(--metal-clair); text-shadow: 0 1px 3px #000;
  --mesure: etiquette;                             /* petites capitales qui nomment le panneau, comme .surtitre */
}
#ecran-resultats .resultats-titre::before, #ecran-resultats .resultats-titre::after {
  content: ''; width: calc(18 * var(--u)); height: max(1px, calc(1.5 * var(--u)));
  background: linear-gradient(90deg, transparent, var(--metal-clair));
}
#ecran-resultats .resultats-titre::after { background: linear-gradient(270deg, transparent, var(--metal-clair)); }
/* le verdict : ce que la manche a valu au joueur ; la raison (« Juste, mais
   minoritaire : ») sur sa ligne, avant la conséquence (pupitre.js les sépare,
   sans changer un caractère du texte) */
#recap-verdict { font-size: var(--resultats-verdict); max-width: 100%; }
#recap-verdict .verdict-cause {
  display: block; margin-bottom: calc(3 * var(--u));
  font-weight: 700; font-size: var(--resultats-cause); letter-spacing: 0.03em;
  color: var(--texte); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
/* le voyant du verdict : sur ordinateur seulement (section 6) */
#pupitre-voyant { display: none; }
/* la liste des éliminés, sous un filet : leur nombre d'abord, puis leurs
   pseudos ; au-delà de quelques lignes, elle est abrégée (le professeur les nomme) */
#recap-elimines {
  align-self: stretch; min-width: 0; margin-top: calc(1 * var(--u)); padding-top: calc(6 * var(--u));
  border-top: max(1px, calc(1 * var(--u))) solid rgba(var(--metal-clair-rvb), 0.28);
  line-height: 1.32; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: var(--resultats-elimines); -webkit-box-orient: vertical; overflow: hidden;
}

/* ----- Les quatre réponses ----- */
/* quand la place ne manque pas, les quatre lignes ont la même hauteur ; aucune ne descend sous celle de son contenu */
#recap-reponses { flex: 5 0 auto; min-height: 0; }
#ecran-resultats .recap-ligne {
  flex: 1 1 0; min-width: 0; align-content: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  --taille-part: max(16px, calc(var(--taille-reponse) * 1.1));   /* le pourcentage */
  --place-part: calc(var(--taille-part) * 3.3);                  /* la largeur de « 100 % », la même sur les quatre lignes */
}
/* une ligne qui porte une plaque lui laisse la place, au-dessus et en dedans */
#ecran-resultats .recap-ligne.a-donner, #ecran-resultats .recap-ligne.mienne { margin-top: calc(8 * var(--u)); padding-top: calc(13 * var(--u)); }
#ecran-resultats .recap-lettre { grid-column: 1; grid-row: 1; }
#ecran-resultats .recap-texte {
  grid-column: 2 / 4; grid-row: 1;
  align-items: baseline; column-gap: calc(8 * var(--u)); row-gap: calc(1 * var(--u));
  text-wrap: balance;
}
/* le pied n'est plus une boîte : la barre et la mention se rangent avec le texte */
#ecran-resultats .recap-pied { display: contents; }
#ecran-resultats .recap-mention { order: 1; flex: 0 1 auto; min-width: 0; text-wrap: pretty; }
/* la barre a la même largeur dans les quatre lignes : elles se comparent ; elle s'arrête avant le pourcentage */
#ecran-resultats .recap-barre {
  order: 2; flex: 1 1 100%; align-self: center;
  margin: calc((var(--taille-part) - 9 * var(--u)) / 2 + 4 * var(--u)) calc(var(--place-part) + 6 * var(--u)) calc((var(--taille-part) - 9 * var(--u)) / 2) 0;
}
#ecran-resultats .recap-pct {
  grid-column: 3; grid-row: 1; align-self: end;
  min-width: var(--place-part); text-align: right; line-height: 1; font-size: var(--taille-part);
}
/* les deux plaques, à cheval sur le bord haut de la ligne */
#ecran-resultats .recap-badge { letter-spacing: 0.08em; padding: calc(4 * var(--u)) calc(10 * var(--u)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.45); }
#ecran-resultats .recap-badge.fallait { position: absolute; z-index: 2; top: 0; left: calc(8 * var(--u)); transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
#ecran-resultats .recap-badges { position: absolute; z-index: 2; top: 0; right: calc(8 * var(--u)); transform: translateY(-50%); }
/* « TA RÉPONSE » : un voyant bleu sur verre sombre (posée sur le bord, elle ne peut pas être translucide) */
#ecran-resultats .recap-badge.moi {
  gap: calc(7 * var(--u)); padding-left: calc(9 * var(--u));
  color: var(--moi-vif);
  background: linear-gradient(180deg, rgb(var(--verre-haut)), rgb(var(--verre-bas)));
  box-shadow: inset 0 0 0 max(1px, calc(1.3 * var(--u))) rgba(var(--moi-rvb), 0.85), 0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.45);
}
#ecran-resultats .recap-badge.moi::before {
  content: ''; flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%;
  background: var(--moi); box-shadow: 0 0 calc(6 * var(--u)) var(--moi);
}


/* ============================================================================
   4. LES PALIERS (voir l'en-tête) : téléphone debout
   ========================================================================== */

/* ----- serre : les marges se resserrent, le surtitre s'efface ----- */
body[data-serre~="serre"] #ecran-jeu {
  row-gap: calc(6 * var(--u));
  --marge-panneau: calc(9 * var(--u)) calc(18 * var(--u));
  --hauteur-touche: max(44px, calc(48 * var(--u))); --ecart-touches: calc(6 * var(--u));
}
body[data-serre~="serre"] #pupitre-question::after { display: none; }   /* les rivets toucheraient le texte */
body[data-serre~="serre"] #ecran-jeu > .bandeau { padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); line-height: 1.2; }
body[data-serre~="serre"] #ecran-jeu .reponse { padding-top: calc(4 * var(--u)); padding-bottom: calc(4 * var(--u)); }
body[data-serre~="serre"] #ecran-resultats.scene { row-gap: calc(6 * var(--u)); }
body[data-serre~="serre"] #ecran-resultats .resultats-titre { display: none; }
body[data-serre~="serre"] #pupitre-bilan { gap: calc(4 * var(--u)); padding-top: calc(7 * var(--u)); padding-bottom: calc(7 * var(--u)); }
body[data-serre~="serre"] #pupitre-bilan::after { display: none; }
body[data-serre~="serre"] #recap-elimines { padding-top: calc(4 * var(--u)); }
body[data-serre~="serre"] #recap-reponses { gap: calc(6 * var(--u)); }
body[data-serre~="serre"] #ecran-resultats .recap-ligne { padding: calc(6 * var(--u)) calc(11 * var(--u)); column-gap: calc(10 * var(--u)); }
body[data-serre~="serre"] #ecran-resultats .recap-ligne.a-donner, body[data-serre~="serre"] #ecran-resultats .recap-ligne.mienne { margin-top: calc(7 * var(--u)); padding-top: calc(12 * var(--u)); }
body[data-serre~="serre"] #ecran-resultats .recap-barre { margin-top: calc((var(--taille-part) - 9 * var(--u)) / 2 + 2 * var(--u)); }

/* ----- tasse : un cran de plus, avant de toucher au reste de la page ----- */
body[data-serre~="tasse"] #ecran-jeu {
  row-gap: calc(5 * var(--u));
  --marge-panneau: calc(5 * var(--u)) calc(14 * var(--u));
  --hauteur-touche: max(44px, calc(44 * var(--u))); --ecart-touches: calc(5 * var(--u));
}
body[data-serre~="tasse"] #ecran-jeu .reponse { padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); }
body[data-serre~="tasse"] #ecran-jeu .reponse-texte { line-height: 1.1; }
body[data-serre~="tasse"] #ecran-resultats.scene { --resultats-elimines: 3; }
body[data-serre~="tasse"] #pupitre-bilan { gap: calc(3 * var(--u)); padding-top: calc(6 * var(--u)); padding-bottom: calc(5 * var(--u)); }
body[data-serre~="tasse"] #recap-elimines { padding-top: calc(3 * var(--u)); line-height: 1.25; }
body[data-serre~="tasse"] #recap-reponses { gap: calc(5 * var(--u)); }
body[data-serre~="tasse"] #ecran-resultats .recap-ligne { padding-top: calc(4 * var(--u)); padding-bottom: calc(4 * var(--u)); }
body[data-serre~="tasse"] #ecran-resultats .recap-ligne.a-donner, body[data-serre~="tasse"] #ecran-resultats .recap-ligne.mienne { margin-top: calc(6 * var(--u)); padding-top: calc(11.5 * var(--u)); }
body[data-serre~="tasse"] #ecran-resultats .recap-texte { line-height: 1.1; }
body[data-serre~="tasse"] #ecran-resultats .recap-barre { margin-top: calc((var(--taille-part) - 9 * var(--u)) / 2); }

/* ----- sans-lot, sans-etiquettes : les étiquettes cèdent leur rangée à la scène (téléphone seulement) ----- */
body[data-ecran="jeu"][data-serre~="sans-lot"] .etiquette-droite,
body[data-ecran="resultats"][data-serre~="sans-lot"] .etiquette-droite,
body[data-ecran="jeu"][data-serre~="sans-etiquettes"] .pupitre > .etiquette,
body[data-ecran="resultats"][data-serre~="sans-etiquettes"] .pupitre > .etiquette { display: none; }

/* ----- defile : dernier recours, la liste des réponses défile (jamais la page) ----- */
body[data-serre~="defile"] #ecran-resultats.scene { --resultats-elimines: 2; }
body[data-serre~="defile"] #pupitre-bilan { flex: none; }
body[data-serre~="defile"] #recap-reponses {
  flex: 1 1 0; overflow-y: auto; padding: calc(9 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent; overscroll-behavior: contain;
}
body[data-serre~="defile"] #ecran-resultats .recap-ligne { flex: none; }


/* ============================================================================
   5. TÉLÉPHONE COUCHÉ
   ----------------------------------------------------------------------------
   Très peu de hauteur. L'annonce tient sur une ligne ; les bandeaux de la
   question se rangent au-dessus d'elle, dans la colonne de gauche (les réponses
   gardent toute la hauteur) ; le bilan passe à gauche des réponses, rangées sur
   deux colonnes.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  #ecran-annonce:not(.annonce-finale) {
    --annonce-geant: calc(44 * var(--u)); --annonce-ecart: calc(6 * var(--u));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: calc(8 * var(--u)); padding-bottom: calc(8 * var(--u));
  }
  #ecran-annonce:not(.annonce-finale) > .annonce-surtitre { display: none; }
  #ecran-annonce:not(.annonce-finale) > .annonce-manche, #ecran-annonce:not(.annonce-finale) > .annonce-mode { grid-column: 1 / -1; }
  #ecran-annonce:not(.annonce-finale) .annonce-manche { margin-top: 0; line-height: 1; white-space: nowrap; word-spacing: normal; }
  #ecran-annonce:not(.annonce-finale) .annonce-manche::first-line { font-size: 1em; line-height: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit; }
  #ecran-annonce:not(.annonce-finale) > .annonce-difficulte { grid-row: 4; grid-column: 1; justify-self: end; padding-right: calc(14 * var(--u)); }
  #ecran-annonce:not(.annonce-finale) > .annonce-joueurs {
    grid-row: 4; grid-column: 2; justify-self: start; margin-top: var(--annonce-ecart); padding-left: calc(14 * var(--u));
    border-left: 1px solid rgba(var(--metal-clair-rvb), 0.4);
  }
  #ecran-annonce:not(.annonce-finale) .annonce-mode { padding-top: calc(3 * var(--u)); padding-bottom: calc(3 * var(--u)); }

  /* la question : les bandeaux dans la colonne de gauche, une rangée chacun */
  #ecran-jeu.scene { grid-template-rows: auto auto auto minmax(0, 1fr); row-gap: 0; }
  #ecran-jeu.scene > .bandeau { grid-column: 1; margin-bottom: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(10 * var(--u)); line-height: 1.15; }
  #ecran-jeu.scene > #bandeau-tutoriel { grid-row: 1; }
  #ecran-jeu.scene > #bandeau-spectateur { grid-row: 2; }
  #ecran-jeu.scene > #bandeau-mode { grid-row: 3; }
  #ecran-jeu.scene > .scene-a { grid-row: 4; }
  #ecran-jeu.scene > .scene-b { grid-row: 1 / 6; }
  /* la ligne d'état de la réponse : sous la question, dans la colonne de gauche */
  #ecran-jeu.scene { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  #ecran-jeu.scene > #reponse-etat { grid-column: 1; grid-row: 5; }
  /* ici aussi les réponses se lisent : 16 px au moins */
  #ecran-jeu.scene, #ecran-resultats.scene { --taille-reponse: max(16px, calc(14.5 * var(--u))); }
  /* paliers de la question : des réponses longues ne tiennent pas sur deux colonnes (elles se coupaient au milieu
     des mots et montaient sur les cadrans). Elles passent sur une colonne, puis leur texte reprend la taille du
     socle ; en dernier recours la colonne des réponses défile, jamais la page. */
  body[data-serre~="serre"] #ecran-jeu.scene > .scene-b { grid-template-columns: minmax(0, 1fr); }
  body[data-serre~="serre"] #ecran-jeu.scene { --hauteur-touche: max(44px, calc(40 * var(--u))); }
  body[data-serre~="tasse"] #ecran-jeu.scene { --taille-reponse: calc(14.5 * var(--u)); --hauteur-touche: max(44px, calc(40 * var(--u))); }
  body[data-serre~="defile"] #ecran-jeu.scene > .scene-b {
    align-self: stretch; grid-auto-rows: auto; align-content: start; overflow-y: auto;
    padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(6 * var(--u));
    scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent; overscroll-behavior: contain;
  }

  /* les résultats : le bilan à gauche, les réponses sur deux colonnes à droite */
  #ecran-resultats.scene {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 11fr); grid-template-rows: minmax(0, 1fr); gap: var(--ecart-colonnes);
    --resultats-verdict: max(16px, calc(17 * var(--u))); --resultats-cause: max(16px, calc(14 * var(--u)));
    --resultats-elimines: 3;
  }
  #pupitre-bilan { padding: calc(6 * var(--u)) calc(14 * var(--u)); gap: calc(3 * var(--u)); min-height: 0; }
  #ecran-resultats .resultats-titre { display: none; }
  #recap-reponses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(min-content, 1fr); gap: calc(6 * var(--u)) calc(8 * var(--u)); }
  #ecran-resultats .recap-ligne { padding: calc(5 * var(--u)) calc(10 * var(--u)); column-gap: calc(8 * var(--u)); }
  #ecran-resultats .recap-ligne.a-donner, #ecran-resultats .recap-ligne.mienne { margin-top: calc(5 * var(--u)); padding-top: calc(13 * var(--u)); }
  /* deux plaques sur le bord d'une demi-largeur : un peu plus petites */
  #ecran-resultats .recap-badge { letter-spacing: 0.02em; font-size: max(9.5px, calc(10 * var(--u))); padding-left: calc(6 * var(--u)); padding-right: calc(6 * var(--u)); }
  #ecran-resultats .recap-badge.fallait { left: calc(5 * var(--u)); }
  #ecran-resultats .recap-badges { right: calc(5 * var(--u)); }
  #ecran-resultats .recap-badge.moi { gap: calc(4 * var(--u)); }
}


/* ============================================================================
   6. ORDINATEUR
   ========================================================================== */
@media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) {
  /* ----- l'annonce : « MANCHE 7 » sur une ligne, la difficulté et les joueurs côte à côte ----- */
  #ecran-annonce:not(.annonce-finale) {
    --annonce-geant: calc(100 * var(--u)); --annonce-ecart: calc(17 * var(--u));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #ecran-annonce:not(.annonce-finale) > .annonce-surtitre,
  #ecran-annonce:not(.annonce-finale) > .annonce-manche,
  #ecran-annonce:not(.annonce-finale) > .annonce-mode { grid-column: 1 / -1; }
  #ecran-annonce:not(.annonce-finale) .annonce-manche { margin-top: calc(var(--annonce-ecart) * 0.6); line-height: 1; white-space: nowrap; word-spacing: normal; }
  #ecran-annonce:not(.annonce-finale) .annonce-manche::first-line { font-size: 1em; line-height: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit; }
  #ecran-annonce:not(.annonce-finale) .annonce-difficulte,
  #ecran-annonce:not(.annonce-finale) .annonce-joueurs { font-size: calc(24 * var(--u)); }
  #ecran-annonce:not(.annonce-finale) > .annonce-difficulte { grid-row: 4; grid-column: 1; justify-self: end; padding: calc(4 * var(--u)) calc(24 * var(--u)) calc(4 * var(--u)) 0; }
  #ecran-annonce:not(.annonce-finale) > .annonce-joueurs {
    grid-row: 4; grid-column: 2; justify-self: start; margin-top: var(--annonce-ecart); padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(24 * var(--u));
    border-left: 1px solid rgba(var(--metal-clair-rvb), 0.4);
  }
  #ecran-annonce:not(.annonce-finale) .annonce-mode { padding: calc(10 * var(--u)) calc(26 * var(--u)); }

  /* ----- la question : les bandeaux, en tête de la scène ----- */
  #ecran-jeu > .bandeau { padding: calc(5 * var(--u)) calc(20 * var(--u)); }

  /* ----- les résultats : le bilan à gauche, les quatre réponses en colonne à droite ----- */
  #ecran-resultats.scene {
    display: grid; grid-template-columns: minmax(0, 14fr) minmax(0, 25fr); grid-template-rows: minmax(0, 1fr); gap: var(--ecart-colonnes);
    --resultats-verdict: calc(31 * var(--u)); --resultats-cause: calc(20 * var(--u));
    --resultats-elimines: 5;
  }
  #pupitre-bilan { --rayon: calc(20 * var(--u)); gap: calc(14 * var(--u)); padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)); min-height: 0; }
  #ecran-resultats .resultats-titre { flex: none; }
  /* le voyant du verdict : une coche (qualifié), un cœur éteint (vie perdue, éliminé), un œil (spectateur). Décor. */
  #pupitre-voyant { display: block; flex: none; order: 1; margin-top: auto; --diametre: calc(76 * var(--u)); --voyant: var(--accent-vif); }
  #pupitre-voyant svg {
    display: none; width: 52%; height: 52%;
    fill: none; stroke: var(--voyant); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 calc(5 * var(--u)) var(--voyant));
  }
  #recap-verdict.ok ~ #pupitre-voyant { --voyant: var(--ok); }
  #recap-verdict.perte ~ #pupitre-voyant { --voyant: var(--alerte); }
  #recap-verdict.ok ~ #pupitre-voyant .voyant-ok,
  #recap-verdict.perte ~ #pupitre-voyant .voyant-perte,
  #recap-verdict:not(.ok):not(.perte) ~ #pupitre-voyant .voyant-neutre { display: block; }
  #recap-verdict { order: 2; margin-bottom: auto; }
  #recap-verdict .verdict-cause { margin-bottom: calc(7 * var(--u)); }
  #recap-elimines { order: 3; padding-top: calc(14 * var(--u)); }
  #recap-reponses { gap: calc(10 * var(--u)); }
  #ecran-resultats .recap-ligne { border-radius: calc(15 * var(--u)); padding: calc(9 * var(--u)) calc(20 * var(--u)); column-gap: calc(16 * var(--u)); --taille-part: calc(var(--taille-reponse) * 1.2); }
  #ecran-resultats .recap-ligne.a-donner, #ecran-resultats .recap-ligne.mienne { margin-top: calc(3 * var(--u)); padding-top: calc(15 * var(--u)); }
  #ecran-resultats .recap-texte { column-gap: calc(12 * var(--u)); }
  #ecran-resultats .recap-barre { margin-top: calc((var(--taille-part) - 9 * var(--u)) / 2 + 6 * var(--u)); }
  #ecran-resultats .recap-badge.fallait { left: calc(18 * var(--u)); }
  #ecran-resultats .recap-badges { right: calc(18 * var(--u)); }

  /* ----- les paliers, sur ordinateur ----- */
  body[data-serre~="serre"] #ecran-jeu { row-gap: calc(10 * var(--u)); --marge-panneau: calc(12 * var(--u)) calc(48 * var(--u)); --hauteur-touche: calc(68 * var(--u)); --ecart-touches: calc(10 * var(--u)); }
  body[data-serre~="serre"] #ecran-jeu > .bandeau { padding-top: calc(3 * var(--u)); padding-bottom: calc(3 * var(--u)); }
  body[data-serre~="serre"] #ecran-jeu .reponse { padding-top: calc(6 * var(--u)); padding-bottom: calc(6 * var(--u)); }
  body[data-serre~="serre"] #pupitre-voyant { display: none; }
  body[data-serre~="serre"] #recap-verdict { margin-top: auto; }
  body[data-serre~="serre"] #pupitre-bilan { gap: calc(10 * var(--u)); padding-top: calc(18 * var(--u)); padding-bottom: calc(14 * var(--u)); }
  body[data-serre~="serre"] #recap-elimines { padding-top: calc(10 * var(--u)); }
  body[data-serre~="serre"] #recap-reponses { gap: calc(8 * var(--u)); }
  body[data-serre~="serre"] #ecran-resultats .recap-ligne { padding: calc(7 * var(--u)) calc(18 * var(--u)); column-gap: calc(14 * var(--u)); }
  body[data-serre~="serre"] #ecran-resultats .recap-ligne.a-donner, body[data-serre~="serre"] #ecran-resultats .recap-ligne.mienne { margin-top: calc(3 * var(--u)); padding-top: calc(14 * var(--u)); }
  body[data-serre~="serre"] #ecran-resultats .recap-barre { margin-top: calc((var(--taille-part) - 9 * var(--u)) / 2 + 4 * var(--u)); }
  body[data-serre~="tasse"] #ecran-jeu { row-gap: calc(8 * var(--u)); --marge-panneau: calc(8 * var(--u)) calc(40 * var(--u)); --hauteur-touche: calc(60 * var(--u)); --ecart-touches: calc(8 * var(--u)); }
  body[data-serre~="tasse"] #ecran-jeu .reponse { padding-top: calc(4 * var(--u)); padding-bottom: calc(4 * var(--u)); }
  body[data-serre~="tasse"] #ecran-resultats.scene { --resultats-elimines: 4; }
  body[data-serre~="tasse"] #pupitre-bilan { gap: calc(8 * var(--u)); padding-top: calc(14 * var(--u)); padding-bottom: calc(10 * var(--u)); }
  body[data-serre~="tasse"] #recap-elimines { padding-top: calc(8 * var(--u)); }
  body[data-serre~="tasse"] #recap-reponses { gap: calc(7 * var(--u)); }
  body[data-serre~="tasse"] #ecran-resultats .recap-ligne { padding-top: calc(5 * var(--u)); padding-bottom: calc(5 * var(--u)); }
  body[data-serre~="tasse"] #ecran-resultats .recap-ligne.a-donner, body[data-serre~="tasse"] #ecran-resultats .recap-ligne.mienne { margin-top: calc(4 * var(--u)); padding-top: calc(13 * var(--u)); }
  body[data-serre~="tasse"] #ecran-resultats .recap-barre { margin-top: calc((var(--taille-part) - 9 * var(--u)) / 2 + 2 * var(--u)); }
  /* reduit : le texte des réponses rétrécit (ordinateur : la place ne manque pas pour le lire) */
  body[data-serre~="reduit"] #ecran-jeu { --taille-reponse: calc(18 * var(--u)); --pastille-touche: calc(34 * var(--u)); }
  body[data-serre~="reduit"] #ecran-resultats.scene { --taille-reponse: calc(17.5 * var(--u)); --pastille-touche: calc(34 * var(--u)); --resultats-verdict: calc(26 * var(--u)); }
}