/* ═══════════════════════════════════════════════════════════════════════════
   NECOzik, le blindtest : rendu du composant d'écran partagé (CHANTIER 58, lot 2B ; spécification §8.5)
   Chargé par l'overlay OBS (/blindtest/overlay.html) ET par la page Écran du panel. Exigence de l'administrateur du
   26/10/2026 après-midi (E3) : « Neco peut avoir un overlay ou visualiser directement depuis le site. ».
   SEULS les jetons de /theme/tokens.css (--color-*, --space-*, --font-*, --fs-*, --radius-*…) : le panel ne charge ni
   /theme/overlay.css ni overlays/overlays.css, donc aucune variable --overlay-* ni --ov-* ici ; variables propres --bt-*
   posées sur .bt-ecran (jamais sur la racine du document) ; aucune couleur écrite en dur.
   Deux présentations : incrustation (fond transparent : la carte de l'overlay garde son propre fond) et plein-ecran (fond
   opaque « à la Léo », grand décompte centré, révélation plein cadre). Tailles lisibles en 1080p : grand décompte de
   160 px au moins (320 px en plein écran, E1), réponse de 40 px, réduite jusqu'à 32 px puis points de suspension sur
   2 lignes (C51). Animations coupées sous .bt-reduit, .ov-reduced-motion et prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

.bt-ecran {
  --bt-gap: var(--space-4);
  --bt-grand: 160px;
  --bt-compte: 120px;
  --bt-reponse: 40px;
  --bt-reponse-longue: 32px;
  --bt-texte: 28px;
  --bt-petit: 22px;
  --bt-trait: 2px;
  --bt-attenue: 0.45;
  display: flex;
  flex-direction: column;
  gap: var(--bt-gap);
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--bt-texte);
  line-height: var(--lh-snug);
}
/* L'attribut hidden l'emporte toujours sur les dispositions ci-dessous */
.bt-ecran [hidden],
.bt-son-bloque[hidden] { display: none !important; }

/* Ordre d'affichage (les blocs créés par le composant sont ajoutés en fin de carte) */
.bt-ecran > .ov-header { order: 0; }
.bt-ecran > .bt-barre { order: 1; }
.bt-ecran > .bt-message { order: 2; }
.bt-ecran > .bt-compte,
.bt-ecran > .bt-grand-compte { order: 3; }
.bt-ecran > .bt-ecoute,
.bt-ecran > .bt-revelation,
.bt-ecran > .bt-classement,
.bt-ecran > .bt-fin { order: 4; }
.bt-ecran > .bt-pause { order: 5; }
.bt-ecran > .bt-son-bloque { order: 6; }

.bt-ecran .ov-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bt-gap);
  margin: 0;
}
.bt-ecran .ov-label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.bt-manche { font-variant-numeric: tabular-nums; opacity: 0.85; }
.bt-manche:empty,
.bt-temps:empty,
.bt-message:empty,
.bt-aide:empty,
.bt-famille:empty,
.bt-compte-liste:empty,
.bt-compte-attente:empty { display: none; }
.bt-temps { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* Barre du temps restant : largeur posée par le script (--pct, style.setProperty) */
.bt-barre {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 var(--bt-trait) currentColor;
}
.bt-barre-plein {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width 0.2s linear;
}
.bt-ecran:not([data-phase="ecoute"]) .bt-barre { visibility: hidden; }

.bt-message {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--bt-reponse);
  font-weight: var(--fw-bold);
  text-align: center;
}

/* Compte à rebours : grand chiffre 3, 2, 1, nom de la liste, attente du son */
.bt-compte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.bt-compte-chiffre {
  font-family: var(--font-display);
  font-size: var(--bt-compte);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bt-compte-liste { font-size: var(--bt-texte); opacity: 0.85; }
.bt-compte-attente { font-size: var(--bt-petit); font-style: italic; }

/* GRAND décompte de l'écoute (10, 9… 1) et grand 0 de « Temps écoulé ! » (E1) */
.bt-grand-compte {
  font-family: var(--font-display);
  font-size: var(--bt-grand);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

/* Écoute : égaliseur animé, éléments à trouver avec leur compteur, masques de l'indice, derniers noms */
.bt-ecoute { display: flex; flex-direction: column; gap: var(--space-3); }
.bt-egaliseur {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  height: 40px;
}
.bt-egaliseur span {
  width: 10px;
  height: 100%;
  border-radius: var(--radius-xs);
  background: currentColor;
  transform-origin: bottom;
  animation: bt-egaliseur 0.9s var(--ease) infinite alternate;
}
.bt-egaliseur span:nth-child(2) { animation-delay: -0.3s; }
.bt-egaliseur span:nth-child(3) { animation-delay: -0.6s; }
.bt-egaliseur span:nth-child(4) { animation-delay: -0.15s; }
.bt-egaliseur span:nth-child(5) { animation-delay: -0.45s; }
@keyframes bt-egaliseur {
  from { transform: scaleY(0.2); }
  to { transform: scaleY(1); }
}
.bt-ecran[data-phase="revelation"] .bt-egaliseur { display: none; }
.bt-elements,
.bt-indices,
.bt-trouves,
.bt-reponses,
.bt-premiers,
.bt-top,
.bt-podium {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bt-elements { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
.bt-element {
  padding: var(--space-1) var(--space-3);
  border: var(--bt-trait) solid currentColor;
  border-radius: var(--radius-full);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.bt-element.is-trouve { opacity: 1; }
.bt-indices { font-family: var(--font-mono); font-size: var(--bt-texte); letter-spacing: 0.08em; text-align: center; }
.bt-trouves { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--bt-petit); }
.bt-trouve { display: flex; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }

/* Badge de plateforme : toujours un texte (jamais la couleur seule, règle de la marque) */
.bt-pf {
  display: inline-block;
  padding: 0 var(--space-2);
  border: var(--bt-trait) solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--bt-petit);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.bt-pf[data-pf="discord"] { border-style: dashed; }

.bt-pause {
  font-family: var(--font-display);
  font-size: var(--bt-reponse);
  font-weight: var(--fw-bold);
  text-align: center;
}
.bt-ecran[data-phase="pause"] > :not(.bt-pause):not(.ov-header) { opacity: var(--bt-attenue); }
.bt-ecran[data-lien="reconnexion"] > :not(.bt-message):not(.ov-header) { opacity: var(--bt-attenue); }

/* Révélation : vignette 16:9, famille, D'ABORD les réponses, puis l'aide, puis les premiers */
.bt-revelation { display: flex; flex-direction: column; gap: var(--space-3); }
.bt-vignette {
  order: 0;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.bt-famille { order: 1; margin: 0; font-size: var(--bt-petit); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: 0.85; }
.bt-reponses { order: 2; display: flex; flex-direction: column; gap: var(--space-2); }
.bt-aide { order: 3; }
.bt-premiers { order: 4; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--bt-petit); }
.bt-reponse {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-family: var(--font-display);
  font-size: var(--bt-reponse);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.bt-reponse.bt-long { font-size: var(--bt-reponse-longue); }
.bt-aide {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-style: italic;
}
.bt-premier { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bt-premier > span:first-child { font-weight: var(--fw-semibold); }
.bt-premier-nom,
.bt-trouve-par { overflow-wrap: anywhere; }

/* Intermède (top 5, « Manche suivante dans… ») et fin (podium à 3 marches, top 10) */
.bt-classement,
.bt-fin { display: flex; flex-direction: column; gap: var(--space-3); }
.bt-top { display: flex; flex-direction: column; gap: var(--space-1); }
.bt-rang {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.bt-rang > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-suite { margin: 0; text-align: right; }
.bt-podium { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-4); }
.bt-podium .bt-rang {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: var(--space-3);
  border: var(--bt-trait) solid currentColor;
  border-radius: var(--radius-md);
  text-align: center;
}
.bt-podium .bt-rang[data-rang="1"] { order: 2; min-height: 200px; font-size: var(--bt-reponse); }
.bt-podium .bt-rang[data-rang="2"] { order: 1; min-height: 160px; }
.bt-podium .bt-rang[data-rang="3"] { order: 3; min-height: 130px; }

.bt-son-bloque {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: var(--bt-trait) solid currentColor;
  border-radius: var(--radius-full);
  font-size: var(--bt-petit);
  text-align: center;
  cursor: pointer;
}

/* ── Plein écran « à la Léo » : fond opaque, grand décompte centré, révélation plein cadre ── */
.bt-ecran[data-presentation="plein-ecran"] {
  --bt-grand: 320px;
  --bt-compte: 220px;
  --bt-reponse: 56px;
  --bt-reponse-longue: 40px;
  box-sizing: border-box;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-8);
  background: var(--color-bg);
  color: var(--color-text);
}
.bt-ecran[data-presentation="plein-ecran"] .bt-revelation { flex: 1 1 auto; justify-content: center; }
.bt-ecran[data-presentation="plein-ecran"] .bt-vignette { max-height: 45vh; width: auto; margin: 0 auto; }
.bt-ecran[data-presentation="plein-ecran"] .bt-reponses { text-align: center; }
.bt-ecran[data-presentation="plein-ecran"] .bt-pf { color: var(--color-text-muted); }

/* ── Animations réduites : réglage de l'overlay, du système ou ?mouvement=reduit ── */
.bt-reduit .bt-egaliseur span,
.ov-reduced-motion .bt-egaliseur span { animation: none; transform: scaleY(0.6); }
.bt-reduit .bt-barre-plein,
.ov-reduced-motion .bt-barre-plein { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .bt-egaliseur span { animation: none; transform: scaleY(0.6); }
  .bt-barre-plein { transition: none; }
}