/* ============================================================
   Écran du couloir de départ — templates/ecran.php
   Reprise de maquettes/maquette-ecran-depart-byu-france.html (sans la démonstration).
   Tailles en vh/vw : lisible à 3-5 m sur une télévision, quelle que soit sa définition.
   Tokens et police : assets/css/byu.css.
   ============================================================ */

.ecran-depart{--pale:#9FB4E8;--ligne:rgba(159,180,232,.18);
  background:var(--nuit);color:var(--papier);overflow:hidden;cursor:none}
.ecran-depart p{max-width:none}
/* Une seule colonne bornée à l'écran : la ligne des messages, très longue, ne l'élargit pas. */
.ecran{height:100vh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;line-height:1.2}

/* ---------- Bandeau : boucle, prochain départ, heure ---------- */
.bandeau{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:1.6vh 2.6vw;border-bottom:1px solid var(--ligne);transition:background .4s}
.bandeau .boucle b,.bandeau .heure b{display:block;font-weight:900;font-style:italic;font-stretch:118%;
  font-size:6.2vh;line-height:1}
.bandeau i{display:block;font-style:normal;font-weight:700;font-size:1.9vh;color:var(--pale);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6vh}
.bandeau .heure{text-align:right}
.depart{text-align:center}
.depart b{display:block;font-weight:900;font-style:italic;font-stretch:125%;font-size:12vh;line-height:.95}
.depart i{color:var(--papier)}
/* Trois dernières minutes : tout le bandeau passe au rouge */
.bandeau.alerte{background:var(--rouge)}
.bandeau.alerte i{color:#fff}
.bandeau.alerte .depart b{animation:pouls 1s ease-in-out infinite}
@keyframes pouls{50%{opacity:.55}}

/* ---------- Corps : classement + encouragements ---------- */
.corps{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-height:0}
.corps.seul{grid-template-columns:minmax(0,1fr)}
.bloc{padding:2.4vh 2.6vw;min-height:0;display:flex;flex-direction:column}
.bloc + .bloc{border-left:1px solid var(--ligne)}
.ecran h2{font-weight:900;font-stretch:112%;font-size:3vh;letter-spacing:.02em;text-transform:uppercase;color:var(--papier);
  display:flex;justify-content:space-between;align-items:baseline;gap:2vw;line-height:1.2}
.ecran h2 small{font-weight:700;font-size:1.7vh;color:var(--pale);letter-spacing:.06em}

/* ---------- Classement mondial ---------- */
.classement{width:100%;border-collapse:collapse;margin-top:1.4vh}
.classement th{font-size:1.6vh;font-weight:700;color:var(--pale);text-transform:uppercase;letter-spacing:.08em;
  text-align:right;padding:0 1vw .8vh}
.classement th:nth-child(2){text-align:left}
.classement td{font-size:3.1vh;font-weight:700;padding:.6vh 1vw;border-top:1px solid var(--ligne);text-align:right}
.classement td.rang{width:4.5vw;font-weight:900;font-style:italic;font-stretch:115%;color:var(--pale)}
.classement td.nation{text-align:left;white-space:nowrap}
.classement td.nation span{display:inline-block;min-width:4.6vh;margin-right:1vw;padding:.2vh .5vw;border:1px solid var(--ligne);
  font-size:1.7vh;font-weight:800;letter-spacing:.06em;text-align:center;color:var(--pale);vertical-align:middle}
.classement td.boucles{font-weight:900;font-style:italic;font-stretch:115%;font-size:3.5vh}
.classement td.ecart{color:var(--pale);font-size:2.4vh;width:8vw}
/* Team France : la ligne qu'on cherche des yeux */
.classement tr.fra td{background:var(--rouge);color:#fff;border-top-color:var(--rouge)}
.classement tr.fra td.rang,.classement tr.fra td.ecart{color:#fff}
.classement tr.fra td.nation span{border-color:#fff;color:#fff}
.classement tr.saut td{border-top:2px dashed var(--ligne)}

.ecran .vide{margin-top:3vh;font-size:2.6vh;color:var(--pale)}
.cible{margin-top:auto;padding-top:1.8vh;font-size:2.6vh;font-weight:700;color:var(--pale)}
.cible b{color:#fff;font-weight:900;font-style:italic;font-stretch:112%}
.source{font-size:1.4vh;color:rgba(159,180,232,.6);margin-top:.8vh}
/* Liaison perdue : petit repère, les dernières données restent affichées */
.hors-ligne .source::after{content:" · connexion perdue, nouvel essai en cours";color:#FFD1CE}

/* ---------- Encouragements ---------- */
.total{display:flex;align-items:baseline;gap:1.2vw;margin-top:1.2vh}
.total b{font-weight:900;font-style:italic;font-stretch:125%;font-size:11vh;line-height:1;color:#fff}
.total i{font-style:normal;font-weight:700;font-size:2.4vh;color:var(--pale);line-height:1.2;max-width:14vw}
.total b.saut{animation:saut .45s ease-out}
@keyframes saut{40%{transform:scale(1.08);color:#FFD1CE}}
.emojis{display:grid;grid-template-columns:repeat(4,1fr);gap:1vw;margin-top:1.6vh}
.emoji{position:relative;background:rgba(244,243,239,.06);border:1px solid var(--ligne);padding:1.4vh 0 1.2vh;text-align:center;
  transition:border-color .3s}
.emoji .e{display:block;font-size:5.2vh;line-height:1.1}
.emoji .n{display:block;font-weight:900;font-style:italic;font-stretch:112%;font-size:2.8vh;margin-top:.6vh}
.emoji.recu{border-color:#fff}

.coureurs{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6vw;margin-top:2vh;min-height:0}
.coureur{display:flex;justify-content:space-between;align-items:center;gap:1vw;padding:.55vh 0;border-top:1px solid var(--ligne);
  font-size:2.1vh;font-weight:700;transition:color .3s}
.coureur em{font-style:normal;font-weight:900;font-stretch:112%;white-space:nowrap}
.coureur.arrete{color:rgba(159,180,232,.5)}
.coureur.recu{color:#FFD1CE}

/* ---------- Bilan : le dernier Français s'est arrêté ----------
   Demande de Ronan (07/10/2026), pas de maquette : chiffres de la Team France à gauche,
   classement mondial (qui continue) à droite. */
.corps.fin{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
/* Classement plus étroit : cellules resserrées pour que la colonne « Écart » tienne */
.corps.fin .classement th,.corps.fin .classement td{padding-left:.5vw;padding-right:.5vw}
.corps.fin .classement td.rang{width:3vw}
.bilan .apercu{align-self:flex-start;background:#FFD1CE;color:var(--rouge-sombre);font-weight:800;font-size:1.5vh;
  letter-spacing:.08em;text-transform:uppercase;padding:.3vh .8vw;margin-bottom:1vh}
.bilan .surtitre{font-weight:800;font-size:2vh;letter-spacing:.12em;text-transform:uppercase;color:var(--pale)}
.ecran .bilan h2{font-size:5.4vh;font-style:italic;font-stretch:118%;text-transform:none;letter-spacing:0;margin-top:.6vh}
.chiffres{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1.6vw;margin-top:2.4vh;align-items:end}
.chiffres b{display:block;font-weight:900;font-style:italic;font-stretch:118%;font-size:7vh;line-height:1;color:#fff}
.chiffres .grand b{font-size:13vh;color:var(--rouge)}
.chiffres i{display:block;font-style:normal;font-weight:700;font-size:2.1vh;color:var(--pale);margin-top:.6vh;line-height:1.25}
.chiffres sup{font-size:.45em;vertical-align:super}
.chiffres .provisoire{font-size:1.6vh;color:rgba(159,180,232,.7)}
.bilan .mot{margin-top:2vh;font-size:2.4vh;font-weight:700}
.boucles-coureurs{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 1.6vw;margin-top:2.4vh}
.boucles-coureurs li{display:flex;justify-content:space-between;gap:1vw;padding:.55vh 0;border-top:1px solid var(--ligne);
  font-size:2.1vh;font-weight:700}
.boucles-coureurs b{font-weight:900;font-style:italic;font-stretch:115%}
.boucles-coureurs li.premier{color:#fff}
.boucles-coureurs li.premier b{color:var(--rouge)}
.note-feuille{margin-top:.8vh;font-size:1.4vh;color:rgba(159,180,232,.7)}
.merci-enc{margin-top:auto;padding-top:1.6vh;font-size:2.2vh;color:var(--pale)}
.merci-enc b{color:#fff;font-weight:900;font-style:italic;font-stretch:112%}

/* Émoji qui s'envole (même effet que sur /direct/, en plus grand) */
.envol{position:fixed;z-index:9;pointer-events:none;font-size:6vh;animation:envol 1.8s ease-out forwards}
@keyframes envol{0%{opacity:1;transform:translate(-50%,-50%) scale(.7)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-34vh) scale(1.5)}}

/* ---------- Messages du public qui défilent (durée réglée par ecran.js selon la longueur) ---------- */
.messages{border-top:1px solid var(--ligne);background:rgba(0,0,0,.25);display:flex;align-items:stretch;height:7.5vh}
.messages[hidden]{display:none}
.messages .etiq{position:relative;z-index:1;flex:none;display:flex;align-items:center;padding:0 1.6vw;background:var(--bleu);
  font-weight:900;font-size:1.9vh;letter-spacing:.1em;text-transform:uppercase}
.messages .fenetre{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;white-space:nowrap}
.defile{display:inline-block;padding-left:100%;animation:defile var(--duree,60s) linear infinite;font-size:3vh;font-weight:700}
.defile span{margin-right:5vw}
.defile b{color:var(--pale);font-weight:800}
@keyframes defile{to{transform:translateX(-100%)}}

@media (prefers-reduced-motion:reduce){
  .defile{padding-left:2vw}
  .ecran-depart *,.ecran-depart *::before,.ecran-depart *::after{animation:none!important;transition:none!important}
}