/**
 * Bandeau Direct (zone L) — bulletins en direct / compte à rebours.
 * Bande pleine largeur entre l'en-tête et la Une. Deux états (live / attente)
 * et deux dispositions par état, pilotées par les attributs data- (ACF).
 */

.noovo-direct {
	--deep: #082E93;
	--bright: #343BFF;
	--noir: #0b1020;
	--live: #E4002B;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #fff;
}
.noovo-direct [hidden] { display: none; }

/* Pastille « en direct » (pulsante) et sa variante d'attente (bleue, calme). */
.direct-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--live);
	flex: 0 0 auto;
}
.direct-dot--idle { background: #9fb0ff; }
@media (prefers-reduced-motion: no-preference) {
	.direct-dot { animation: noovoPulse 1.5s infinite; }
}
@keyframes noovoPulse {
	0%   { box-shadow: 0 0 0 0 rgba(228,0,43,.55); }
	70%  { box-shadow: 0 0 0 8px rgba(228,0,43,0); }
	100% { box-shadow: 0 0 0 0 rgba(228,0,43,0); }
}

/* ---------------- État EN DIRECT ---------------- */
.direct-live { background: var(--noir); }
.direct-live .direct-inner {
	max-width: 1120px;
	margin-inline: auto;
	padding: 14px 16px 20px;
}
.direct-eyebrow {
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
/* Le player-rnc construit .rnc-player-wrap > .rnc-stage (déjà en 16:9, barre de
   contrôle en overlay) à l'intérieur de #rnc-live-video. On le laisse gérer sa
   propre hauteur : on ne force NI ratio NI overflow ici, on neutralise juste la
   marge par défaut du wrapper pour qu'il colle au conteneur. */
.direct-video { width: 100%; }
#rnc-live-video .rnc-player-wrap { margin: 0; }
#rnc-live-video .rnc-stage { border-radius: 10px; }

/* Disposition « pleine largeur » : la scène déborde jusqu'aux bords, hauteur
   plafonnée pour ne pas dépasser l'écran (letterbox si besoin). */
.noovo-direct[data-video="pleine"] .direct-live .direct-inner {
	max-width: none;
	padding: 14px 0 0;
}
.noovo-direct[data-video="pleine"] .direct-eyebrow { padding-inline: 16px; }
.noovo-direct[data-video="pleine"] #rnc-live-video .rnc-stage {
	border-radius: 0;
	aspect-ratio: auto;
	height: min(56.25vw, 78vh);
}
.noovo-direct[data-video="pleine"] #rnc-live-video .rnc-stage .rnc-video { object-fit: contain; }

/* ---------------- État HORS DIFFUSION (compte à rebours) ----------------
   Barre mince et grand bloc partagent le MÊME fond : dégradé radial bleu de la
   charte (foncé au centre haut-gauche, pâle vers la droite/le bas). */
.direct-attente {
	background: radial-gradient(125% 125% at 0% 0%, #082E93 0%, #1c3ad6 58%, #343BFF 100%);
}
.direct-attente .direct-inner {
	max-width: 1120px;
	margin-inline: auto;
	padding: 11px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.direct-label {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
	font-weight: 600;
}
.direct-at { opacity: .92; }
.direct-count {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: .06em;
	background: rgba(255,255,255,.10);
	padding: 4px 10px;
	border-radius: 7px;
}

/* Disposition « grand bloc » : gros décompte centré, plus de hauteur. */
.noovo-direct[data-decompte="bloc"] .direct-attente .direct-inner {
	flex-direction: column;
	gap: 14px;
	max-width: none;
	padding: 40px 16px 44px;
	text-align: center;
}
.noovo-direct[data-decompte="bloc"] .direct-label {
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .95;
}
.noovo-direct[data-decompte="bloc"] .direct-count {
	background: none;
	padding: 0;
	line-height: 1;
	font-size: clamp(2.4rem, 7vw, 4rem);
	letter-spacing: .04em;
}