/* ============================================================================
   LE LABORATOIRE · interface B · ÉTAPE 7 : LE PARTENAIRE
   ----------------------------------------------------------------------------
   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-sponsor    la séquence d'un partenaire (SPECS 12, et 2.12 « Étape 7 ») :
                       sa vidéo d'ouverture, sa présentation par le professeur,
                       ses questions sans enjeu ou à impact, « Vos réponses »
   Maquette : data/maquettes-2026-10-07/B-suite/annonce.html (états partenaire).
   Plan : docs/interface-b/plan-de-bascule.md, partie 3.

   CE QUE LE PROGRAMME DIT À CETTE FEUILLE (app.js, showSponsorZone) : une seule
   pièce de l'écran est montrée à la fois, et deux classes disent laquelle.
     #ecran-sponsor.video-integrale   la VIDÉO (#sponsor-video-zone) ; sa classe
                                      .voile la couvre de noir tant qu'elle ne joue pas
     #ecran-sponsor (sans classe)     le CARTON : « En partenariat avec », le nom en
                                      grand. Pendant la présentation par le
                                      professeur, et quand la vidéo n'a pas pu partir
     #ecran-sponsor.sponsor-compact   une QUESTION (#sponsor-question-zone) ou
                                      « Vos réponses » (#sponsor-resultats-zone)
   #sponsor-video-zone et #sponsor-question-zone restent des enfants DIRECTS de
   #ecran-sponsor (app.js y replace la vidéo). Deux pièces de la page sont
   propres au pupitre : #pupitre-question-partenaire, le panneau de la question
   (pupitre.js y fait tenir une question longue), où « Question partenaire 1/2 »
   (#sponsor-etape) est rangée en plaquette ; pupitre.js fait aussi tenir le nom
   du partenaire sur son carton (aucun mot coupé en deux).

   SOMMAIRE
     1. Réglages de l'écran
     2. L'écran, et qui se montre autour de lui (étiquette de gauche, bulle)
     3. Le nom du partenaire, dans ses trois états
     4. Le carton de présentation
     5. La vidéo
     6. La question (bandeau d'enjeu, panneau, touches, mention)
     7. « Vos réponses »
     8. Téléphone couché
     9. Ordinateur

   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-sponsor, une pièce
   qu'il contient, ou body[data-ecran="sponsor"] 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 « partenaire- » ;
   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/partenaire.mjs, et ce qui est voulu
   sur ses écrans (une étiquette, un décor, une pièce posée exprès sur une
   autre, une fenêtre qui rogne) se dit par la propriété « --mesure » dans cette
   feuille. 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. RÉGLAGES DE L'ÉCRAN (sur l'écran lui-même, jamais sur :root)
   ========================================================================== */
#ecran-sponsor {
  --partenaire-nom: calc(46 * var(--u));            /* le nom, en grand sur le carton */
  --partenaire-nom-video: calc(27 * var(--u));      /* le nom, au-dessus de sa vidéo (téléphone debout) */
  --partenaire-nom-ligne: max(16px, calc(15 * var(--u)));  /* le nom, sur une ligne, pendant ses questions */
  --partenaire-ecart: calc(15 * var(--u));          /* entre deux pièces du carton */
  --partenaire-rayon: calc(16 * var(--u));          /* l'arrondi de ses grands panneaux */
  --partenaire-debord: calc(12 * var(--u));         /* ce qu'une zone qui peut défiler laisse aux lueurs de ses pièces */
  /* La question d'un partenaire porte deux pièces de plus que celle d'une
     manche (le bandeau d'enjeu, la mention) : ses touches et sa question sont
     un peu plus serrées, pour que tout tienne au-dessus de la bulle. */
  --hauteur-touche: max(44px, calc(50 * var(--u)));
  --taille-question: calc(23 * var(--u));
  /* (2026-10-16 : les réponses d'une manche ont grandi, 17,5 u et une médaille de 36 u ; celles d'un partenaire
     gardent leurs 16,5 u et 31 u, sinon sa question, plus serrée, passait sous 16 px à 375 x 812) */
  --taille-reponse: max(16px, calc(16.5 * var(--u)));
  --pastille-touche: calc(31 * var(--u));
}


/* ============================================================================
   2. L'ÉCRAN, ET QUI SE MONTRE AUTOUR DE LUI
   ----------------------------------------------------------------------------
   L'écran n'est plus le panneau de l'habillage de base : c'est une colonne de
   pièces, que chaque état habille (le carton est un panneau ; la vidéo, la
   question et « Vos réponses » posent leurs pièces sur la scène).
   ========================================================================== */
#ecran-sponsor.scene {
  align-items: stretch; justify-content: flex-start; gap: calc(6 * var(--u));
  padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Les deux pièces vides qui centrent l'habillage de base n'ont plus d'emploi :
   le carton et la vidéo se centrent par les marges de leurs pièces (plus bas),
   une question et ses réponses prennent toute la hauteur. */
#ecran-sponsor.sponsor-compact::before, #ecran-sponsor.sponsor-compact::after,
#ecran-sponsor.video-integrale::before, #ecran-sponsor.video-integrale::after { content: none; }

/* L'étiquette de gauche (le nom du partenaire à la place de la manche, écrit
   par pupitre.js) : sur téléphone debout elle se tait pendant toute la
   séquence. L'écran dit lui-même le nom, juste dessous, en entier (elle
   l'abrège dès vingt lettres), et la hauteur va à la vidéo et à la question.
   Elle revient sur téléphone couché et sur ordinateur, où elle ne coûte rien. */
body[data-ecran="sponsor"] .etiquette-gauche { display: none; }

/* La bulle du professeur : quatre lignes pendant qu'il présente le partenaire
   (le réglage du socle), deux pendant une question et ses réponses, comme
   pendant une manche : il se tait, mais l'équipe peut prendre la parole.
   SEULEMENT TANT QUE L'ÉCRAN DU PARTENAIRE EST AFFICHÉ (body[data-ecran]) :
   la séquence finie, app.js cache l'écran mais lui laisse sa classe
   .sponsor-compact (showScreen ne retire que .video-integrale). Sans cette
   garde, la bulle restait sur deux lignes sur tous les écrans suivants
   (annonce, résultats, fin de partie), jusqu'au rechargement de la page. */
body[data-ecran="sponsor"] #ecran-sponsor.sponsor-compact ~ .rampe-basse .bulle { --bulle-lignes: 2; }


/* ============================================================================
   3. LE NOM DU PARTENAIRE, DANS SES TROIS ÉTATS
   ========================================================================== */
/* sur le carton : en grand, il peut passer à la ligne (pupitre.js le rétrécit
   tant qu'un mot serait coupé en deux, ou que le carton déborderait) */
#ecran-sponsor .sponsor-nom {
  font-size: var(--partenaire-nom); line-height: 1.06; letter-spacing: 0.06em; color: var(--accent);
}
/* pendant une question et ses réponses : une ligne, entre deux filets */
#ecran-sponsor.sponsor-compact .sponsor-nom {
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  font-size: var(--partenaire-nom-ligne); line-height: 1.15; letter-spacing: 0.1em;
  color: var(--accent-vif); text-shadow: 0 1px 3px #000, 0 0 calc(12 * var(--u)) rgba(var(--accent-rvb), 0.35);
}
#ecran-sponsor.sponsor-compact .sponsor-nom::before, #ecran-sponsor.sponsor-compact .sponsor-nom::after {
  content: ''; flex: 1 1 0; min-width: 0; height: max(1px, calc(1.2 * var(--u)));
  background: linear-gradient(90deg, transparent, var(--metal-clair));
}
#ecran-sponsor.sponsor-compact .sponsor-nom::after { background: linear-gradient(270deg, transparent, var(--metal-clair)); }
/* sans nom, pas de ligne : un joueur qui arrive (ou recharge sa page) pendant
   « Vos réponses » n'a pas reçu le nom du partenaire (app.js ne l'écrit qu'avec
   la vidéo, la présentation ou une question) ; les deux filets, seuls,
   traçaient un trait au-dessus du panneau */
#ecran-sponsor.sponsor-compact .sponsor-nom:empty { display: none; }


/* ============================================================================
   4. LE CARTON DE PRÉSENTATION
   ----------------------------------------------------------------------------
   « En partenariat avec », le nom en grand, un filet : le professeur présente
   le partenaire dans sa bulle. C'est aussi ce que l'écran montre quand la
   vidéo n'a pas pu partir (app.js, replierSurLeNom).
   L'écran lui-même est le panneau : le verre cerclé et riveté du socle (.verre,
   .rivete), recopié ici sur ses deux pseudo-éléments, comme le socle le
   prévoit pour une pièce qui n'en porte pas les classes. Il ne défile pas :
   pupitre.js fait tenir le nom.
   ========================================================================== */
#ecran-sponsor:not(.sponsor-compact):not(.video-integrale) {
  gap: var(--partenaire-ecart);
  padding: var(--marge-panneau);
  overflow: hidden;
  border-radius: var(--partenaire-rayon);
  background: var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-ombre);
}
/* le cerclage : un dégradé de métal, découpé en anneau */
#ecran-sponsor:not(.sponsor-compact):not(.video-integrale)::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;
}
/* quatre rivets aux coins */
#ecran-sponsor:not(.sponsor-compact):not(.video-integrale)::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;
}
/* sans découpe en anneau, le cerclage couvrirait le carton : un simple filet (le repli du socle) */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #ecran-sponsor:not(.sponsor-compact):not(.video-integrale)::before { background: none; padding: 0; border: max(1.5px, calc(2 * var(--u))) solid var(--metal-clair); }
}
/* le surtitre et le nom se tiennent au milieu du carton : des marges
   automatiques, jamais « justify-content » (une marge automatique ne devient
   pas négative : si le nom débordait, son début resterait à l'écran) */
#ecran-sponsor > .annonce-surtitre { margin-top: auto; }
#ecran-sponsor:not(.sponsor-compact):not(.video-integrale) > .sponsor-nom { margin-bottom: auto; }
/* le filet sous le nom : deux traits de laiton, un losange d'accent (décor) */
#ecran-sponsor:not(.sponsor-compact):not(.video-integrale) > .sponsor-nom::after {
  --losange: calc(5 * var(--u));
  content: ''; display: block; width: min(100%, calc(176 * var(--u))); height: calc(2 * var(--losange));
  margin: var(--partenaire-ecart) auto 0;
  background:
    linear-gradient(to bottom right, transparent 50%, var(--accent) 51%) calc(50% - var(--losange) / 2) 0 / var(--losange) var(--losange) no-repeat,
    linear-gradient(to bottom left, transparent 50%, var(--accent) 51%) calc(50% + var(--losange) / 2) 0 / var(--losange) var(--losange) no-repeat,
    linear-gradient(to top right, transparent 50%, var(--accent) 51%) calc(50% - var(--losange) / 2) 100% / var(--losange) var(--losange) no-repeat,
    linear-gradient(to top left, transparent 50%, var(--accent) 51%) calc(50% + var(--losange) / 2) 100% / var(--losange) var(--losange) no-repeat,
    linear-gradient(90deg, transparent, var(--metal-clair)) 0 50% / calc(50% - 2.2 * var(--losange)) max(1px, calc(1.5 * var(--u))) no-repeat,
    linear-gradient(270deg, transparent, var(--metal-clair)) 100% 50% / calc(50% - 2.2 * var(--losange)) max(1px, calc(1.5 * var(--u))) no-repeat;
  filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(var(--accent-rvb), 0.8));
}


/* ============================================================================
   5. LA VIDÉO
   ----------------------------------------------------------------------------
   Plus de tube où la poser : elle prend la scène. Elle n'est JAMAIS rognée ni
   déformée : elle tient en entier dans son cadre (object-fit: contain).
   Téléphone debout (la base) : le cadre épouse la vidéo. Une vidéo large y
   occupe toute la largeur de la scène, sous « En partenariat avec » et le nom
   du partenaire ; au-dessus et au-dessous, les bandes ne sont pas des bandes
   noires : c'est le laboratoire, et le nom. Une vidéo plus haute que large
   s'arrête à la hauteur de la scène, ses côtés restent noirs dans le cadre.
   Téléphone couché et ordinateur (plus bas) : le cadre est toute la scène.
   Tant qu'elle ne joue pas, app.js la couvre de noir (.voile, levé après
   800 ms de lecture ininterrompue) : ni vignette ni bouton de lecteur.
   ========================================================================== */
#ecran-sponsor.video-integrale { gap: calc(9 * var(--u)); overflow: visible; }
/* (le socle cache tout sauf la vidéo par une règle qui pèse deux identifiants : celles-ci pèsent autant)
   Le surtitre est ici écrit sur le décor, sans panneau derrière lui : une ombre
   le garde lisible quel que soit le fond (la peinture changera, les thèmes aussi) */
#ecran-sponsor.video-integrale > .annonce-surtitre:not(#sponsor-video-zone) {
  display: flex; text-shadow: 0 1px 3px #000, 0 0 calc(10 * var(--u)) rgba(0, 0, 0, 0.85);
}
#ecran-sponsor.video-integrale > #sponsor-nom { display: block; font-size: var(--partenaire-nom-video); }
/* le cadre : un écran noir cerclé de laiton. Un mince bord noir sépare la
   vidéo du cerclage : les coins arrondis n'entament pas l'image. */
#ecran-sponsor #sponsor-video-zone {
  flex: 0 1 auto; align-self: stretch; min-height: 0; margin-bottom: auto;
  padding: calc(4 * var(--u));
  border-radius: calc(13 * var(--u));
  background: #000;
  box-shadow:
    0 0 0 max(1.5px, calc(2 * var(--u))) var(--metal-sombre),
    0 0 0 max(2.5px, calc(3 * var(--u))) rgba(0, 0, 0, 0.7),
    0 calc(12 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, 0.55);
}
/* un fichier vidéo : à la largeur du cadre, sa hauteur suit ses proportions */
#ecran-sponsor #sponsor-video-zone > video {
  position: static; display: block; width: 100%; height: auto; max-height: 100%;
  object-fit: contain;
}
/* le lecteur d'une vidéo en ligne n'a pas de proportions à lui : 16/9 (d'abord
   une hauteur calculée sur la largeur de la page, pour qui ne connaît pas « aspect-ratio ») */
#ecran-sponsor #sponsor-video-zone > div, #ecran-sponsor #sponsor-video-zone iframe {
  position: static; display: block; width: 100%;
  height: calc((min(100vw, 430 * var(--u)) - 2 * var(--marge-page) - 8 * var(--u)) * 0.5625); max-height: 100%;
}
@supports (aspect-ratio: 16 / 9) {
  #ecran-sponsor #sponsor-video-zone > div, #ecran-sponsor #sponsor-video-zone iframe { height: auto; aspect-ratio: 16 / 9; }
}
/* le voile de démarrage suit l'arrondi du cadre */
#ecran-sponsor #sponsor-video-zone::after { border-radius: inherit; }


/* ============================================================================
   6. LA QUESTION D'UN PARTENAIRE
   ----------------------------------------------------------------------------
   De haut en bas : le nom du partenaire (une ligne), le bandeau d'enjeu, le
   panneau de la question (il prend la hauteur qui reste) avec sa plaquette
   « Question partenaire 1/2 », les quatre touches, la mention. Le chrono de la
   question est le cadran du centre (app.js l'y écrit) : l'ancienne barre
   (#sponsor-chrono) n'est plus montrée.
   Rien ne défile : la question rétrécit pour tenir dans son panneau
   (pupitre.js), et la mention s'efface quand la hauteur manque (plus bas). La
   zone ne défile à l'intérieur qu'en dernier recours (des réponses de
   plusieurs lignes sur un petit écran) : jamais la page.
   ========================================================================== */
#ecran-sponsor #sponsor-question-zone, #ecran-sponsor #sponsor-resultats-zone { flex: 1 1 0; min-height: 0; }
#ecran-sponsor #sponsor-question-zone {
  /* 1em = 10 u : l'unité des seuils de hauteur de la zone (voir « la mention ») */
  font-size: calc(10 * var(--u));
  gap: var(--ecart);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent; overscroll-behavior: contain;
  /* une zone qui peut défiler rogne ce qui dépasse d'elle : elle s'élargit de
     quoi laisser passer la lueur de la touche choisie et l'épaisseur des touches */
  max-width: none;
  margin: calc(-0.5 * var(--partenaire-debord)) calc(-1 * var(--partenaire-debord));
  padding: calc(0.5 * var(--partenaire-debord)) var(--partenaire-debord);
}
#ecran-sponsor #sponsor-question-zone > * { flex: none; }
#ecran-sponsor #sponsor-chrono { display: none; }

/* ---------- le bandeau d'enjeu ----------
   « QUESTION SANS ENJEU » au vert de ce qui est sans danger, « QUESTION À
   IMPACT » au rouge de l'alerte : un verre sombre cerclé et éclairé de sa
   couleur, impossible à rater, et jamais la couleur seule (le texte le dit).
   app.js réécrit sa classe à chaque question (bandeau-sans-enjeu ou
   bandeau-avec-impact). */
#ecran-sponsor #sponsor-bandeau {
  --partenaire-enjeu: var(--ok); --partenaire-enjeu-rvb: var(--ok-rvb); --partenaire-enjeu-texte: var(--ok-vif);
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  font-weight: 700; text-wrap: balance; color: var(--partenaire-enjeu-texte);
  background: linear-gradient(180deg, rgba(var(--verre-haut), 0.95), rgba(var(--verre-bas), 0.97));
  box-shadow:
    inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--partenaire-enjeu),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 calc(16 * var(--u)) rgba(var(--partenaire-enjeu-rvb), 0.38),
    inset 0 0 calc(18 * var(--u)) rgba(var(--partenaire-enjeu-rvb), 0.16);
  animation: partenaire-enjeu 1.8s ease-in-out infinite;
}
#ecran-sponsor #sponsor-bandeau.bandeau-avec-impact {
  --partenaire-enjeu: var(--alerte); --partenaire-enjeu-rvb: var(--alerte-rvb); --partenaire-enjeu-texte: var(--alerte-claire);
}
@keyframes partenaire-enjeu { 50% { filter: brightness(1.16); } }

/* ---------- le panneau de la question ----------
   Le panneau riveté du socle (.verre.rivete.panneau.question, posé dans la
   page). Sa hauteur de départ (106 u) est celle qu'il faut à une question de
   trois lignes écrite à sa taille ; il s'étire au-delà, et descend jusqu'à
   56 u quand la place manque (la question rétrécit alors). */
#ecran-sponsor #pupitre-question-partenaire {
  flex: 1 1 calc(106 * var(--u)); min-height: calc(56 * var(--u));
  overflow: visible;                              /* la plaquette est posée à cheval sur son bord */
  padding: calc(15 * var(--u)) calc(18 * var(--u)) calc(11 * var(--u));
}
#ecran-sponsor #sponsor-question-texte {
  max-height: 100%; overflow: hidden;
  font-family: var(--police-plateau); font-weight: 700; letter-spacing: 0.01em; line-height: 1.22;
  font-size: var(--taille-question);
}
/* « Question partenaire 1/2 » : une plaquette de laiton à cheval sur le bord
   du panneau, comme celle qui nomme le professeur sur sa bulle */
#ecran-sponsor #sponsor-etape {
  position: absolute; z-index: 1; left: 50%; top: 0; transform: translate(-50%, -38%);
  padding: calc(2.5 * var(--u)) calc(10 * var(--u));
  border-radius: calc(4 * var(--u));
  font-family: var(--police-plateau); font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: max(9px, calc(9.5 * 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-sponsor #sponsor-etape:empty { display: none; }

/* ---------- la mention, et la zone qui se serre ----------
   « Question offerte par le partenaire, elle ne compte pas dans le
   classement » : sous les touches. La question passe avant elle : la mention
   S'EFFACE quand la zone est trop basse pour laisser sa hauteur de départ au
   panneau de la question (un petit téléphone, un bandeau apparu en haut de la
   page, le jeu du soir affiché) ; le bandeau d'enjeu et la plaquette disent
   déjà de quelle question il s'agit. Plus basse encore, la zone SE SERRE :
   touches à leur hauteur minimale, panneau moins rembourré.
   Les deux seuils se lisent sur la hauteur de la zone (@container) ; ils
   comptent ce que chaque pièce y prend, en « em » de la zone (1em = 10 u) et
   avec les planchers du téléphone (16 px pour ce qui se lit, 44 px pour ce qui
   se touche) : sur un petit écran, où un « u » vaut moins d'un pixel, ces
   pièces pèsent plus lourd. Un navigateur qui ne connaît pas @container garde
   la mention et ne serre rien : sur un petit écran, la zone défile alors à
   l'intérieur. */
#ecran-sponsor .sponsor-note { text-align: center; text-wrap: balance; }
/* Changer sa réponse (SPECS 2.2 bis) : la ligne d'état, un texte discret comme
   la mention, jamais une touche ; la touche choisie ne se retouche pas (la
   flèche). Vide, elle ne prend aucune place (la question du partenaire a déjà
   ses deux seuils de hauteur, plus haut et plus bas). */
#ecran-sponsor .sponsor-reponse.choisie:not(:disabled) { cursor: default; }
#ecran-sponsor #sponsor-reponse-etat {
  margin: 0; text-align: center; text-wrap: balance; pointer-events: none;
  font-family: var(--police-texte); font-style: italic; font-size: var(--taille-note); line-height: 1.25; color: var(--texte-doux);
}
#ecran-sponsor #sponsor-reponse-etat:empty { display: none; }
@supports (container-type: size) {
  #ecran-sponsor #sponsor-question-zone { container-type: size; container-name: partenaire-question; }
}
/* Téléphone debout seulement : ni couché ni ordinateur (les deux conditions du
   socle, niées l'une dans l'autre) ; chacun a ses seuils, plus bas. */
@media not all and (orientation: landscape) and (max-height: 560px) {
  @media not all and (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) {
    @supports (container-type: size) {
      /* la mention s'efface : le bandeau et la mention, deux lignes chacun (16 px au moins) ; quatre touches
         (44 px au moins) ; puis, en u : la marge du bandeau (10), les écarts (27 et 24), la hauteur de départ du panneau (106) */
      @container partenaire-question (max-height: calc(max(84.8px, 8.48em) + max(176px, 20em) + 16.7em)) {
        #ecran-sponsor .sponsor-note { display: none; }
      }
      /* la zone se serre : la même somme sans la mention ni son écart, et 30 u de marge (des réponses sur deux lignes) */
      @container partenaire-question (max-height: calc(max(40px, 4em) + max(176px, 20em) + 18.9em)) {
        #ecran-sponsor .sponsor-reponse { min-height: max(44px, calc(44 * var(--u))); padding-top: calc(3 * var(--u)); padding-bottom: calc(3 * var(--u)); }
        #ecran-sponsor #pupitre-question-partenaire { padding-top: calc(11 * var(--u)); padding-bottom: calc(6 * var(--u)); }
      }
    }
  }
}


/* ============================================================================
   7. « VOS RÉPONSES »
   ----------------------------------------------------------------------------
   Les réponses du salon à la question du partenaire, sans gagnant ni perdant :
   un panneau riveté, la plaque « Vos réponses », et les quatre lignes
   fabriquées par app.js (window.QuizRecap, ligneRecap : lettre, texte, barre
   des votes, pourcentage). Ces lignes sont dessinées ICI pour cet écran, sans
   rien devoir à la feuille de la manche : des logements creusés dans le verre.
   ========================================================================== */
#ecran-sponsor #sponsor-resultats-zone {
  position: relative; align-items: stretch; gap: calc(12 * var(--u));
  padding: calc(18 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border-radius: var(--partenaire-rayon);
  background: var(--verre-fond);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-ombre);
}
#ecran-sponsor #sponsor-resultats-zone::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;
}
#ecran-sponsor #sponsor-resultats-zone::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;
  --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-sponsor #sponsor-resultats-zone::before { background: none; padding: 0; border: max(1.5px, calc(2 * var(--u))) solid var(--metal-clair); }
}
/* « Vos réponses » : une plaque gravée, celle qui titre une section
   (la .plaque-section du socle : pour la mesure, une étiquette, pas un texte courant) */
#ecran-sponsor #sponsor-resultats-zone .resultats-titre {
  --mesure: etiquette;
  flex: none; align-self: center;
  padding: calc(5 * var(--u)) calc(20 * var(--u));
  border-radius: calc(5 * var(--u));
  font-size: var(--taille-plaque); line-height: 1.2; letter-spacing: 0.16em; white-space: nowrap;
  color: var(--plaque-encre); 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);
}
/* les quatre lignes : elles se partagent la hauteur du panneau, sans dépasser
   78 u chacune ; trop hautes (des réponses de plusieurs lignes), elles défilent
   dans le panneau, qui lui ne bouge pas */
#ecran-sponsor #sponsor-recap {
  flex: 1 1 0; min-height: 0; align-self: stretch;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(min-content, calc(78 * var(--u)));
  align-content: space-evenly; gap: calc(8 * var(--u));
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent; overscroll-behavior: contain;
}
#ecran-sponsor .recap-ligne {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: calc(12 * var(--u)); min-width: 0;
  padding: calc(7 * var(--u)) calc(13 * var(--u));
  border-radius: calc(13 * var(--u)); text-align: left;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.46), rgba(var(--verre-bas), 0.55));
  box-shadow:
    inset 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.75),
    inset 0 0 0 max(1px, calc(1.3 * var(--u))) rgba(var(--metal-clair-rvb), 0.6);
}
#ecran-sponsor .recap-lettre {
  display: grid; place-items: center;
  width: var(--pastille-touche); height: var(--pastille-touche); border-radius: 50%;
  font-family: var(--police-plateau); font-weight: 900; font-size: calc(var(--pastille-touche) * 0.5);
  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);
}
#ecran-sponsor .recap-texte {
  min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: calc(5 * var(--u)) calc(8 * var(--u));
  font-family: var(--police-plateau); font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; overflow-wrap: anywhere;
  font-size: var(--taille-reponse); color: var(--texte);
}
#ecran-sponsor .recap-badges { display: none; }       /* ni « ta réponse » ni « il fallait répondre » : personne ne gagne ni ne perd ici */
#ecran-sponsor .recap-pied { flex: 1 1 100%; display: flex; align-items: center; min-width: 0; }
#ecran-sponsor .recap-barre {
  position: relative; display: block; flex: 1 1 auto; min-width: calc(40 * var(--u));
  height: calc(9 * var(--u)); border-radius: 999px; overflow: hidden;
  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);
}
#ecran-sponsor .recap-barre > span {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--metal-sombre), var(--accent));
  box-shadow: 0 0 calc(8 * var(--u)) rgba(var(--accent-rvb), 0.6);
}
#ecran-sponsor .recap-pct {
  font-family: var(--police-plateau); font-weight: 900; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
  font-size: max(16px, calc(var(--taille-reponse) * 1.2)); color: var(--texte);
}


/* ============================================================================
   8. TÉLÉPHONE COUCHÉ
   ----------------------------------------------------------------------------
   Très peu de hauteur : la vidéo prend toute la scène ; la question se range
   sur deux colonnes, comme celle d'une manche (le bandeau d'enjeu et la
   question à gauche, les touches à droite) ; le nom du partenaire est dans
   l'étiquette de gauche, qui revient.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  #ecran-sponsor {
    --partenaire-nom: calc(34 * var(--u)); --partenaire-ecart: calc(7 * var(--u));
    --hauteur-touche: max(44px, calc(44 * var(--u))); --taille-question: calc(19 * var(--u));
    --taille-reponse: max(16px, calc(14.5 * var(--u)));    /* ce qui se lit : 16 px au moins, ici aussi */
  }
  /* l'étiquette de gauche revient : le nom du partenaire, abrégé s'il est long
     (un bloc, pour que les points de suspension se posent), et « PARTENAIRE »,
     qui garde sa largeur (un nom long le poussait hors de l'étiquette) */
  body[data-ecran="sponsor"] .etiquette-gauche { display: flex; }
  body[data-ecran="sponsor"] .etiquette-libelle { display: block; flex: 0 1 auto; min-width: 0; }
  body[data-ecran="sponsor"] .etiquette-libelle:empty { display: none; }
  body[data-ecran="sponsor"] .etiquette-mode { flex: none; }
  #ecran-sponsor:not(.sponsor-compact):not(.video-integrale) { padding-top: calc(9 * var(--u)); padding-bottom: calc(9 * var(--u)); }
  #ecran-sponsor.sponsor-compact .sponsor-nom { display: none; }

  /* la vidéo : toute la scène, sans le nom (il est dans l'étiquette) */
  #ecran-sponsor.video-integrale > .annonce-surtitre:not(#sponsor-video-zone), #ecran-sponsor.video-integrale > #sponsor-nom { display: none; }
  #ecran-sponsor #sponsor-video-zone { position: relative; flex: 1 1 0; margin-bottom: 0; padding: 0; overflow: hidden; }
  #ecran-sponsor #sponsor-video-zone > video, #ecran-sponsor #sponsor-video-zone > div, #ecran-sponsor #sponsor-video-zone iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: none; border-radius: 0;
  }

  /* la question : deux colonnes, le bandeau d'enjeu et la question à gauche,
     les touches à droite, sur toute la hauteur (la colonne des touches est la
     plus large : deux touches de front, des réponses de quatre lignes y
     tiennent). Les touches se tiennent au milieu de leur colonne par des
     marges automatiques : trop hautes, elles partent du haut, et la zone
     défile à l'intérieur. */
  #ecran-sponsor #sponsor-question-zone {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--ecart-colonnes); row-gap: var(--ecart);
  }
  #ecran-sponsor #sponsor-bandeau { grid-column: 1; grid-row: 1; padding-top: calc(3 * var(--u)); padding-bottom: calc(3 * var(--u)); }
  #ecran-sponsor #pupitre-question-partenaire { grid-column: 1; grid-row: 2; min-height: 0; padding: calc(11 * var(--u)) calc(14 * var(--u)) calc(7 * var(--u)); }
  #ecran-sponsor #sponsor-reponses { grid-column: 2; grid-row: 1 / span 2; margin-top: auto; margin-bottom: auto; }
  /* la mention n'a pas sa place : le bandeau et la plaquette disent de quelle question il s'agit */
  #ecran-sponsor .sponsor-note { display: none; }

  /* « Vos réponses » : la plaque au-dessus de quatre lignes sur deux colonnes.
     Tout est serré (plaque plus mince, écarts réduits) : deux rangées de
     réponses de deux lignes y tiennent sans que le panneau défile (avant ce
     serrage, la rangée du bas était rognée de 5 px à 812 x 375). */
  #ecran-sponsor #sponsor-resultats-zone { gap: calc(4 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)); }
  #ecran-sponsor #sponsor-resultats-zone .resultats-titre { padding-top: calc(3 * var(--u)); padding-bottom: calc(3 * var(--u)); }
  #ecran-sponsor #sponsor-recap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6 * var(--u)) calc(8 * var(--u)); }
  #ecran-sponsor .recap-ligne { padding-top: calc(4 * var(--u)); padding-bottom: calc(4 * var(--u)); column-gap: calc(9 * var(--u)); }
  #ecran-sponsor .recap-texte { row-gap: calc(3 * var(--u)); }
}


/* ============================================================================
   9. ORDINATEUR
   ========================================================================== */
@media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) {
  #ecran-sponsor {
    --partenaire-nom: calc(84 * var(--u)); --partenaire-nom-ligne: max(13px, calc(17 * var(--u)));
    --partenaire-ecart: calc(17 * var(--u)); --partenaire-rayon: calc(20 * var(--u)); --partenaire-debord: calc(16 * var(--u));
    --hauteur-touche: calc(60 * var(--u)); --taille-question: calc(36 * var(--u));
  }
  #ecran-sponsor.scene { gap: calc(8 * var(--u)); }
  /* l'étiquette de gauche revient dans la rampe : le nom du partenaire, et
     « PARTENAIRE ». Un nom n'a pas de longueur maximale : il s'y écrit un peu
     plus petit que le libellé du socle (un mot de dix-sept lettres y tient),
     sur trois lignes au plus, abrégé au-delà (l'écran le dit en entier). */
  body[data-ecran="sponsor"] .etiquette-gauche { display: flex; }
  body[data-ecran="sponsor"] .etiquette-libelle {
    font-size: calc(14 * var(--u)); letter-spacing: 0.08em; line-height: 1.16; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  body[data-ecran="sponsor"] .etiquette-libelle:empty { display: none; }
  #ecran-sponsor:not(.sponsor-compact):not(.video-integrale) > .sponsor-nom::after { width: min(100%, calc(330 * var(--u))); }

  /* la vidéo : toute la scène, un écran noir cerclé de laiton ; le nom du
     partenaire est dans l'étiquette de gauche */
  #ecran-sponsor.video-integrale > .annonce-surtitre:not(#sponsor-video-zone), #ecran-sponsor.video-integrale > #sponsor-nom { display: none; }
  #ecran-sponsor #sponsor-video-zone { position: relative; flex: 1 1 0; margin-bottom: 0; padding: 0; overflow: hidden; border-radius: var(--partenaire-rayon); }
  #ecran-sponsor #sponsor-video-zone > video, #ecran-sponsor #sponsor-video-zone > div, #ecran-sponsor #sponsor-video-zone iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: none; border-radius: 0;
  }

  /* la question */
  #ecran-sponsor #sponsor-question-zone { gap: calc(12 * var(--u)); }
  #ecran-sponsor #sponsor-bandeau { padding: calc(6 * var(--u)) calc(22 * var(--u)); }
  #ecran-sponsor #pupitre-question-partenaire { flex-basis: calc(110 * var(--u)); min-height: calc(72 * var(--u)); padding: calc(18 * var(--u)) calc(48 * var(--u)) calc(12 * var(--u)); }
  #ecran-sponsor #sponsor-etape { font-size: max(9.5px, calc(11 * var(--u))); padding: calc(3 * var(--u)) calc(13 * var(--u)); }
  @supports (container-type: size) {
    /* la mention s'efface sous : bandeau sur une ligne (3,5), panneau (11), deux rangées de touches (13,4),
       mention sur une ligne (2,1), trois écarts (3,6) */
    @container partenaire-question (max-height: 33.6em) {
      #ecran-sponsor .sponsor-note { display: none; }
    }
  }

  /* « Vos réponses » : quatre lignes sur deux colonnes, comme les touches ; plus
     hautes (132 u au plus), pour que l'écart entre les deux rangées reste voisin
     de celui des colonnes */
  #ecran-sponsor #sponsor-resultats-zone { gap: calc(16 * var(--u)); padding: calc(24 * var(--u)) calc(34 * var(--u)) calc(22 * var(--u)); }
  #ecran-sponsor #sponsor-recap {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(min-content, calc(132 * var(--u)));
    gap: calc(14 * var(--u)) calc(16 * var(--u));
  }
  #ecran-sponsor .recap-ligne { padding: calc(10 * var(--u)) calc(20 * var(--u)); column-gap: calc(16 * var(--u)); border-radius: calc(15 * var(--u)); }
  #ecran-sponsor .recap-barre { height: calc(11 * var(--u)); }
}