/* REM Lecteur — carte flottante, dans l'esprit des cartes blanches du site.
   Ombres teintées du bleu nuit du bandeau d'accueil plutôt que du gris neutre. */

/* L'ancien lecteur du thème reste dans la page mais n'est plus montré.
   On masque tout son conteneur : vide, il restait posé en bas d'écran
   et captait les clics (au-dessus de notre barre quand la barre d'administration est là). */
#proradio-playercontainer,
#qtmplayer-container { display: none !important; }

#rem-lecteur {
	--rl-bleu: #1e73be;
	--rl-vert: #6abd44;
	--rl-encre: #353535;
	--rl-gris: rgba(53, 53, 53, .78); /* contraste 5,4:1 sur blanc */
	--rl-filet: rgba(53, 53, 53, .10);
	--rl-nuit: 13, 42, 69; /* bleu nuit du bandeau, pour les ombres */
	--rl-marge: 12px;

	position: fixed; z-index: 99990;
	left: var(--rl-marge); right: var(--rl-marge);
	bottom: calc(var(--rl-marge) + env(safe-area-inset-bottom, 0px));
	max-width: 1120px; margin: 0 auto;
	display: flex; align-items: center; gap: 14px;
	padding: 10px 10px 10px 10px;
	background: #fff; color: var(--rl-encre);
	border: 1px solid var(--rl-filet);
	border-radius: 18px;
	box-shadow:
		0 18px 40px -14px rgba(var(--rl-nuit), .38),
		0 4px 12px -4px rgba(var(--rl-nuit), .14);
	font: 14px/1.3 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
	animation: rl-arrive .35s cubic-bezier(.2, .8, .2, 1) both;
}
#rem-lecteur * { box-sizing: border-box; }
#rem-lecteur [hidden] { display: none !important; }

body.rem-lecteur-on { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }

@keyframes rl-arrive {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

/* Pochette : posée sur la carte, avec sa propre ombre */
#rem-lecteur .rl-poch {
	flex: 0 0 52px; width: 52px; height: 52px;
	border-radius: 12px; object-fit: cover;
	background: #497cbf;
	box-shadow: 0 8px 16px -6px rgba(var(--rl-nuit), .45);
}

/* Textes */
#rem-lecteur .rl-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#rem-lecteur .rl-label,
#rem-lecteur .rl-titre,
#rem-lecteur .rl-artiste { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Même traitement que les rubriques des cartes (« SORTIR », « VIE LOCALE ») */
#rem-lecteur .rl-label {
	display: flex; align-items: center; gap: 7px;
	font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--rl-bleu);
}
#rem-lecteur .rl-titre { font-size: 15px; font-weight: 600; color: var(--rl-encre); }
#rem-lecteur .rl-artiste { font-size: 13px; color: var(--rl-gris); }

/* Témoin du direct : un point vert au repos, trois barres qui dansent pendant l'écoute */
#rem-lecteur .rl-eq { display: none; align-items: flex-end; gap: 2px; width: 12px; height: 10px; flex: 0 0 auto; }
#rem-lecteur.rl-est-direct .rl-eq { display: inline-flex; }
#rem-lecteur .rl-eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--rl-vert); transform-origin: bottom; transform: scaleY(.35); }
#rem-lecteur.rl-est-direct:not(.rl-joue) .rl-eq i:not(:first-child) { display: none; }
#rem-lecteur.rl-est-direct:not(.rl-joue) .rl-eq i:first-child { width: 8px; height: 8px; border-radius: 50%; transform: none; margin: 0 2px 1px 0; }
#rem-lecteur.rl-est-direct.rl-joue .rl-eq i { animation: rl-danse 1s ease-in-out infinite; }
#rem-lecteur.rl-est-direct.rl-joue .rl-eq i:nth-child(2) { animation-delay: -.45s; }
#rem-lecteur.rl-est-direct.rl-joue .rl-eq i:nth-child(3) { animation-delay: -.2s; }
@keyframes rl-danse {
	0%, 100% { transform: scaleY(.35); }
	50% { transform: scaleY(1); }
}

/* Boutons */
#rem-lecteur button {
	font: inherit; cursor: pointer; border: 0; margin: 0;
	-webkit-tap-highlight-color: transparent;
}

/* « Direct » : même pastille que les filtres de rubriques de l'accueil */
#rem-lecteur .rl-direct {
	flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 999px;
	background: #fff; color: var(--rl-encre);
	border: 1px solid rgba(53, 53, 53, .16);
	font-size: 13px; font-weight: 500;
	box-shadow: 0 2px 6px -2px rgba(var(--rl-nuit), .18);
	transition: border-color .15s, color .15s, box-shadow .15s;
}
#rem-lecteur .rl-direct:hover { border-color: var(--rl-bleu); color: var(--rl-bleu); box-shadow: 0 4px 10px -3px rgba(30, 115, 190, .35); }

/* Lecture : l'élément fort de la carte */
#rem-lecteur .rl-lire {
	position: relative;
	flex: 0 0 52px; width: 52px; height: 52px; padding: 0;
	border-radius: 50%;
	background: var(--rl-bleu); color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow:
		0 10px 20px -8px rgba(30, 115, 190, .75),
		inset 0 1px 0 rgba(255, 255, 255, .22);
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#rem-lecteur .rl-lire:hover { filter: brightness(1.06); box-shadow: 0 14px 26px -10px rgba(30, 115, 190, .85), inset 0 1px 0 rgba(255, 255, 255, .22); }
#rem-lecteur .rl-lire:active { transform: scale(.95); box-shadow: 0 4px 10px -4px rgba(30, 115, 190, .7); }
#rem-lecteur .rl-lire svg { width: 26px; height: 26px; fill: currentColor; position: relative; }

#rem-lecteur button:focus-visible,
#rem-lecteur .rl-pos:focus-visible { outline: 3px solid #f5c451; outline-offset: 2px; }

/* Chargement : anneau doré autour du bouton */
#rem-lecteur.rl-charge .rl-lire::after {
	content: ""; position: absolute; inset: -5px; border-radius: 50%;
	border: 3px solid transparent; border-top-color: #f5c451;
	animation: rl-tourne .9s linear infinite;
}
@keyframes rl-tourne { to { transform: rotate(360deg); } }

/* Podcast : fine piste en haut de la carte, remplie en vert comme les soulignés du site */
#rem-lecteur .rl-piste {
	position: absolute; left: 18px; right: 18px; top: 0;
	height: 3px; border-radius: 3px;
	background: var(--rl-filet);
}
#rem-lecteur .rl-rempli {
	position: absolute; left: 0; top: 0; bottom: 0; width: 0;
	border-radius: 3px; background: var(--rl-vert);
	transition: width .25s linear;
}
/* Zone de saisie invisible, plus haute que la piste pour le doigt */
#rem-lecteur .rl-pos {
	position: absolute; left: 0; right: 0; top: -11px;
	width: 100%; height: 24px; margin: 0; padding: 0;
	opacity: 0; cursor: pointer;
}

/* Téléphone */
@media (max-width: 560px) {
	#rem-lecteur { --rl-marge: 8px; gap: 12px; border-radius: 16px; padding: 8px; }
	#rem-lecteur .rl-poch { flex-basis: 48px; width: 48px; height: 48px; border-radius: 10px; }
	#rem-lecteur .rl-lire { flex-basis: 48px; width: 48px; height: 48px; }
	#rem-lecteur .rl-direct { padding: 0 12px; }
	body.rem-lecteur-on { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (prefers-reduced-motion: reduce) {
	#rem-lecteur { animation: none; }
	#rem-lecteur.rl-est-direct.rl-joue .rl-eq i { animation: none; transform: scaleY(.7); }
	#rem-lecteur.rl-charge .rl-lire::after { animation-duration: 3s; }
	#rem-lecteur .rl-rempli { transition: none; }
}