/* Lecteur de flux persistant — barre fixe en bas de toutes les pages.
 *
 * Direction « Affiche » du thème : fond quasi noir de studio, néon
 * rouge ON AIR quand le flux joue, cyan pour les accents, or pour
 * l'attente. Les variables du thème sont utilisées avec repli, pour
 * que ce fichier reste autonome le jour de l'intégration.
 *
 * États (attribut data-etat sur .rint-lecteur, piloté par le script;
 * rendu initial côté serveur) :
 *   indisponible / erreur : point gris, message « Flux non
 *   disponible », contrôles visiblement désactivés.
 *   chargement : point or, « Vérification du flux… ».
 *   pret / pause : point cyan, contrôles actifs.
 *   lecture : point rouge néon (pulsation ON AIR), contrôles actifs.
 */

/* La barre ne masque jamais le bas des pages.
 *
 * DÉGAGEMENT RÉEL (corrigé en v1.6.3, observation terrain
 * sur /plateforme/) : la réserve doit égaler la hauteur
 * RÉELLE maximale de la barre, pas son min-height. En
 * régime bureau, les infos héritent de l'interligne 1,65
 * du thème : station 15 × 1,65 + message 13 × 1,65 +
 * serveur 11,5 × 1,65 + 2 écarts = 67,2 px, donc une barre
 * de 88,2 px dès l'état actuel — et 112,3 px au pire cas
 * (titre en cours affiché : + 14 × 1,65 + 1). L'ancienne
 * réserve de 76 px (le min-height) laissait donc les
 * ~12 derniers pixels de chaque page impossibles à
 * dégager de sous la barre (≈ 36 px au pire cas) : sur
 * /plateforme/, le bouton « Ajouter à ma station » du
 * Builder tombait dans la bande couverte. Réserve portée
 * à 113 px (112,3 arrondi au supérieur) : le bas de page
 * se dégage au complet, dans tous les états. La barre
 * elle-même ne change pas d'un pixel. */
body.rint-lecteur-present {
	padding-bottom: calc(113px + env(safe-area-inset-bottom, 0px));
}

/* Pendant bas de la marge d'en-tête : tout défilement
 * programmé (ancre, focus clavier, scrollIntoView) laisse
 * la hauteur de la barre libre en bas du viewport, pour
 * qu'un contrôle d'action ne vienne jamais se garer sous
 * la barre. Navigateurs sans « :has() » : la réserve
 * ci-dessus continue de garantir la fin de page. */
html:has(body.rint-lecteur-present) {
	scroll-padding-bottom: calc(113px + env(safe-area-inset-bottom, 0px));
}

.rint-lecteur {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 76px;
	padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--bg-elev, #070a10);
	border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.1));
	box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55);
	color: var(--text, #eef2f7);
	font-family: var(--font-body, "Barlow", "Inter", system-ui, sans-serif);
}

.rint-lecteur audio {
	display: none;
}

/* ---------- Point d'état ---------- */
.rint-lecteur-point {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #5a6675;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.rint-lecteur-point[data-etat="chargement"] {
	background: var(--gold, #eec25e);
}
.rint-lecteur-point[data-etat="pret"],
.rint-lecteur-point[data-etat="pause"] {
	background: var(--cyan, #35e0ff);
}
.rint-lecteur-point[data-etat="lecture"] {
	background: var(--neon, #ff2233);
	animation: rint-lecteur-pouls 1.6s ease-in-out infinite;
}
@keyframes rint-lecteur-pouls {
	0%, 100% { box-shadow: 0 0 0 3px rgba(255, 34, 51, 0.18); }
	50% { box-shadow: 0 0 0 7px rgba(255, 34, 51, 0.05); }
}
@media (prefers-reduced-motion: reduce) {
	.rint-lecteur-point[data-etat="lecture"] { animation: none; }
}

/* ---------- Informations ---------- */
.rint-lecteur-infos {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
}
.rint-lecteur-station {
	font-family: var(--font-title, "Anton", "Archivo Black", system-ui, sans-serif);
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rint-lecteur-titre {
	font-size: 14px;
	color: var(--cyan, #35e0ff);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rint-lecteur-message {
	font-size: 13px;
	color: var(--text, #eef2f7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rint-lecteur-serveur {
	font-size: 11.5px;
	color: var(--muted, #9aa7b5);
	letter-spacing: 0.03em;
}

/* ---------- Sélecteur de source (v1.7.3) ----------
 * Deux positions honnêtes — « RADIO EN CONTINU » et
 * « FLUX 24/7 » — rendues seulement quand les deux sources
 * existent (voir inc/lecteur-persistant.php). La position
 * active est celle que l'auditeur entend réellement :
 * aria-pressed la porte, le style la montre (fond plein,
 * texte blanc; l'autre reste une étiquette discrète).
 * Hauteur contenue : la rangée fait au plus la hauteur des
 * boutons de lecture (46 px) — les réserves de bas de page
 * (113 px bureau / 74 px mobile) ne changent pas. */
.rint-lecteur-sources {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}
.rint-lecteur-source {
	font-family: var(--font-title, "Anton", "Archivo Black", system-ui, sans-serif);
	font-size: 11.5px;
	letter-spacing: 0.05em;
	line-height: 1.15;
	padding: 7px 10px;
	border-radius: 999px;
	border: 1px solid var(--card-border, rgba(255, 255, 255, 0.16));
	background: transparent;
	color: var(--muted, #9aa7b5);
	cursor: pointer;
	white-space: nowrap;
}
.rint-lecteur-source:hover {
	color: var(--text, #eef2f7);
}
.rint-lecteur-source:focus-visible {
	outline: 2px solid var(--cyan, #35e0ff);
	outline-offset: 2px;
}
.rint-lecteur-source[aria-pressed="true"] {
	background: linear-gradient(120deg, var(--neon, #ff2233), var(--blue, #2e7bff) 60%, var(--cyan, #35e0ff));
	border-color: transparent;
	color: #fff;
}

/* ---------- Contrôles ---------- */
.rint-lecteur-controles {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}
.rint-lecteur-btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--card-border, rgba(255, 255, 255, 0.16));
	background: linear-gradient(120deg, var(--neon, #ff2233), var(--blue, #2e7bff) 60%, var(--cyan, #35e0ff));
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.rint-lecteur-btn:hover:not(:disabled) {
	filter: brightness(1.12);
}
.rint-lecteur-btn:focus-visible {
	outline: 2px solid var(--cyan, #35e0ff);
	outline-offset: 2px;
}
/* Contrôles désactivés : visiblement inactifs, jamais décoratifs.
   Ils restent dans la barre parce que leur état FAIT partie de
   l'information (« aucun flux »), mais aucun clic n'y répond. */
.rint-lecteur-btn:disabled {
	background: #131a24;
	color: #5a6675;
	cursor: not-allowed;
	filter: none;
}
.rint-lecteur-volume {
	display: inline-flex;
	align-items: center;
}
.rint-lecteur-volume input[type="range"] {
	width: 104px;
	accent-color: var(--cyan, #35e0ff);
	cursor: pointer;
}
.rint-lecteur-volume input[type="range"]:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

/* ---------- Petit écran (v1.6.3) ----------
 * Régime mobile aligné sur les points de rupture du thème
 * (720 px, comme main.css). Correctif du 2026-10-07 : sur
 * l'iPhone du propriétaire, la barre devenait un énorme
 * panneau (≈ 234 px mesurés sur sa capture, ~34 % de
 * l'écran) au lieu d'une bande mince ancrée en bas.
 * Causes, dans l'ancien régime (bloc 640 px) :
 *   - .rint-lecteur-serveur n'était tronquée dans AUCUN
 *     régime (ni nowrap, ni ellipsis) : ses 81 caractères
 *     se repliaient mot à mot dès que la colonne rétrécit;
 *   - le bloc mobile faisait EN PLUS passer le message en
 *     « white-space: normal » + clamp de 2 lignes;
 *   - le curseur de volume restait dans la rangée et, avec
 *     les deux boutons, écrasait la colonne d'infos
 *     (≈ 86 px à 320 px de viewport) — d'où l'empilement;
 *   - le min-height fixe de 96 px ne suivait pas la
 *     hauteur réelle une fois le texte replié : la barre
 *     grandissait bien au-delà de l'espace réservé.
 * Ici : UNE rangée compacte — pastille, infos en lignes
 * UNIQUES tronquées (ellipsis), boutons gardés à 46 px
 * (≥ 44 px tactiles) — et une hauteur connue d'avance :
 *   station 15 px × 1,3 + écart 1 + titre 14 px × 1,3
 *   + écart 1 + message 13 px × 1,3 = 56,6 px d'infos au
 *   pire cas (titre en cours affiché);
 *   barre = bordure 1 + 8 + 56,6 + 8 = 73,6 px (+ zone
 *   sûre système), donc ≤ 84 px. Dans l'état actuel (aucun
 *   flux, aucun titre), les infos font 37,4 px et ce sont
 *   les boutons (46 px) qui fixent la hauteur : 63,0 px.
 *   La réserve du bas de page (74 px, arrondie au
 *   supérieur depuis 73,6) couvre le pire cas du régime :
 *   le pied de page n'est jamais masqué. */
@media (max-width: 720px) {
	body.rint-lecteur-present {
		padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
	}
	/* Même dégagement pour les défilements programmés,
	   à la hauteur du régime mobile (voir la règle de
	   base « html:has(...) »). */
	html:has(body.rint-lecteur-present) {
		scroll-padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
	}
	.rint-lecteur {
		gap: 10px;
		min-height: 0;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
	}
	/* Lignes d'info resserrées, chacune sur UNE ligne :
	   le « nowrap + ellipsis » vient des règles de base;
	   l'ancien clamp de 2 lignes du message disparaît. */
	.rint-lecteur-station,
	.rint-lecteur-titre,
	.rint-lecteur-message {
		line-height: 1.3;
	}
	/* La ligne serveur détaillée sort de la rangée : elle
	   reste dans le document (lue par les lecteurs
	   d'écran, aucune place visuelle) — l'état court est
	   porté par la ligne message (« Flux non
	   disponible. »). Le texte complet reste affiché sur
	   bureau et dans /ecouter/. */
	.rint-lecteur-serveur {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
	/* Le curseur de volume quitte la rangée : sur iPhone,
	   le volume de sortie se règle aux boutons matériels
	   et au centre de contrôle; c'est lui qui écrasait la
	   colonne d'infos. L'élément reste dans le document
	   (état et persistance inchangés) et le bureau garde
	   son curseur exactement comme en 1.6.2. */
	.rint-lecteur-volume {
		display: none;
	}
	/* Le sélecteur de source passe en colonne compacte :
	   deux étiquettes empilées (≈ 40 px au total) tiennent
	   dans la hauteur des boutons (46 px) sans épaissir la
	   barre; la colonne d'infos garde ses lignes tronquées. */
	.rint-lecteur-sources {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}
	.rint-lecteur-source {
		font-size: 9.5px;
		padding: 4px 7px;
		text-align: center;
	}
}