/* =====================================================================
   Coacum Live Radio — feuille de style publique
   Charte : nuit sahélienne, vert COACUM, or de dune, parchemin.
   Signature : le disque-dune (pochette + sillons concentriques).
   ===================================================================== */

.clr-page,
.clr-radio,
.clr-promo,
.clr-bar,
.clr-card-live,
.clr-cta,
.clr-float {
	--clr-bg: #0b1410;
	--clr-surface: #111f19;
	--clr-accent: #229f19;
	--clr-accent-2: #f2b441;
	--clr-text: #ece6d8;
	--clr-radius: 18px;
	--clr-accent-rgb: 34, 159, 25;
	--clr-text-rgb: 236, 230, 216;
	--clr-line: rgba(var(--clr-text-rgb), 0.12);
	--clr-dim: rgba(var(--clr-text-rgb), 0.62);
	--clr-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--clr-display: "Bricolage Grotesque", "Manrope", ui-sans-serif, system-ui, sans-serif;
	--clr-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	box-sizing: border-box;
	font-family: var(--clr-font);
	color: var(--clr-text);
	-webkit-font-smoothing: antialiased;
}

.clr-page *,
.clr-radio *,
.clr-promo *,
.clr-bar *,
.clr-card-live *,
.clr-cta *,
.clr-float * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   Lecteur principal
   ------------------------------------------------------------------ */

.clr-radio {
	position: relative;
	display: block;
	background: var(--clr-bg);
	border-radius: calc(var(--clr-radius) * 1.4);
	overflow: hidden;
	isolation: isolate;
	border: 1px solid var(--clr-line);
}

.clr-radio--bare {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.clr-stage {
	position: relative;
	padding: clamp(22px, 5vw, 56px);
	overflow: hidden;
}

/* Fond : la pochette, floutée, comme une lumière de scène. */
.clr-stage__art {
	position: absolute;
	inset: -18%;
	background-size: cover;
	background-position: center;
	filter: blur(56px) saturate(1.5);
	opacity: 0.4;
	transform: scale(1.15);
	transition: background-image 0.6s ease, opacity 0.6s ease;
	z-index: 0;
}

.clr-stage__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(90% 70% at 12% 0%, rgba(var(--clr-accent-rgb), 0.28), transparent 62%),
		linear-gradient(160deg, rgba(11, 20, 16, 0.72) 0%, var(--clr-bg) 78%);
}

/* Grain léger : évite l'aplat numérique trop propre. */
.clr-stage__glow::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(255, 255, 255, 0.018) 0 1px,
		transparent 1px 3px
	);
}

.clr-stage__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(180px, 300px) 1fr;
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
}

/* --- Le disque-dune ------------------------------------------------ */

.clr-stage__disc {
	position: relative;
	aspect-ratio: 1;
	width: 100%;
}

.clr-disc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	background: #050b08;
	box-shadow:
		0 30px 70px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(var(--clr-text-rgb), 0.08),
		0 0 60px rgba(var(--clr-accent-rgb), 0.18);
	animation: clr-spin 24s linear infinite;
	animation-play-state: paused;
}

.clr-view.is-playing .clr-disc {
	animation-play-state: running;
}

.clr-disc__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.clr-disc__art[src=""],
.clr-disc__art:not([src]) {
	opacity: 0;
}

/* Sillons : rides de sable autant que gravure vinyle. */
.clr-disc__grooves {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 50%;
	pointer-events: none;
	background: repeating-radial-gradient(
		circle at 50% 50%,
		rgba(0, 0, 0, 0.34) 0 1px,
		rgba(255, 255, 255, 0.035) 1px 2px,
		transparent 2px 7px
	);
	mask-image: radial-gradient(circle at 50% 50%, transparent 26%, #000 27%, #000 100%);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 26%, #000 27%, #000 100%);
	opacity: 0.75;
}

.clr-disc__hole {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	width: 7%;
	height: 7%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--clr-bg);
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.35);
}

.clr-disc__btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 30%;
	aspect-ratio: 1;
	min-width: 64px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: var(--clr-accent);
	color: #04120a;
	display: grid;
	place-items: center;
	box-shadow: 0 12px 34px rgba(var(--clr-accent-rgb), 0.45);
	transition: transform 0.18s ease, background 0.18s ease;
}

.clr-disc__btn:hover {
	transform: translate(-50%, -50%) scale(1.06);
}

.clr-disc__btn:focus-visible,
.clr-radio :focus-visible,
.clr-bar :focus-visible,
.clr-cta:focus-visible,
.clr-float-btn:focus-visible {
	outline: 2px solid var(--clr-accent-2);
	outline-offset: 3px;
}

/* Halo qui respire pendant la diffusion. */
.clr-view.is-playing .clr-stage__disc::after {
	content: "";
	position: absolute;
	inset: -6%;
	border-radius: 50%;
	border: 1px solid rgba(var(--clr-accent-rgb), 0.45);
	animation: clr-halo 2.8s ease-out infinite;
	pointer-events: none;
}

/* --- Informations -------------------------------------------------- */

.clr-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 10px;
	font-family: var(--clr-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--clr-dim);
}

.clr-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(var(--clr-accent-rgb), 0.16);
	color: var(--clr-text);
	border: 1px solid rgba(var(--clr-accent-rgb), 0.4);
	font-size: 11px;
}

.clr-live i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--clr-accent);
	box-shadow: 0 0 0 0 rgba(var(--clr-accent-rgb), 0.7);
	animation: clr-pulse 2s infinite;
}

.clr-source:not(:empty)::before {
	content: "▸ ";
	color: var(--clr-accent-2);
}

.clr-radio-name {
	font-family: var(--clr-display);
	font-weight: 800;
	font-size: clamp(26px, 4.2vw, 46px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
	color: var(--clr-text);
}

/* --- Le bandeau défilant, façon cadran de poste ------------------- */

.clr-ticker {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 10px 0;
	border-top: 1px solid var(--clr-line);
	border-bottom: 1px solid var(--clr-line);
	margin-bottom: 14px;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(var(--clr-text-rgb), 0.16) 0 1px,
		transparent 1px 22px
	);
	background-size: 100% 6px;
	background-position: 0 100%;
	background-repeat: repeat-x;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.clr-ticker__rail {
	display: flex;
	gap: 3rem;
	width: max-content;
	will-change: transform;
	animation: clr-marquee 22s linear infinite;
}

.clr-ticker__item {
	font-family: var(--clr-display);
	font-weight: 600;
	font-size: clamp(17px, 2.3vw, 26px);
	white-space: nowrap;
	color: var(--clr-text);
}

.clr-ticker--sm .clr-ticker__item {
	font-size: 14px;
	font-weight: 600;
	font-family: var(--clr-font);
}

.clr-ticker--sm {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
}

.clr-nowmeta {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--clr-dim);
	font-family: var(--clr-mono);
	min-height: 1em;
}

.clr-timeline {
	height: 4px;
	border-radius: 99px;
	background: rgba(var(--clr-text-rgb), 0.12);
	overflow: hidden;
	margin-bottom: 18px;
}

.clr-timeline__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2));
	transition: width 0.9s linear;
}

/* --- Commandes ----------------------------------------------------- */

.clr-controls {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.clr-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 0;
	cursor: pointer;
	font-family: var(--clr-font);
	font-weight: 700;
	font-size: 15px;
	padding: 12px 22px;
	border-radius: 999px;
	background: rgba(var(--clr-text-rgb), 0.08);
	color: var(--clr-text);
	transition: background 0.18s ease, transform 0.18s ease;
	text-decoration: none;
	line-height: 1;
}

.clr-btn:hover {
	background: rgba(var(--clr-text-rgb), 0.16);
}

.clr-btn--primary {
	background: var(--clr-accent);
	color: #04120a;
	box-shadow: 0 10px 26px rgba(var(--clr-accent-rgb), 0.32);
}

.clr-btn--primary:hover {
	background: var(--clr-accent);
	transform: translateY(-1px);
}

.clr-btn--ghost {
	background: transparent;
	border: 1px solid var(--clr-line);
}

.clr-btn--icon {
	padding: 10px;
	border-radius: 50%;
}

/* Icônes en CSS pur : aucune dépendance, aucun chargement. */
.clr-icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	position: relative;
	flex: 0 0 auto;
}

.clr-icon--play {
	border-left: 13px solid currentColor;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	width: 0;
	height: 0;
	margin-left: 2px;
}

.clr-icon--pause {
	display: none;
	width: 12px;
	height: 14px;
	border-left: 4px solid currentColor;
	border-right: 4px solid currentColor;
}

.clr-disc__btn .clr-icon--play {
	border-left-width: 20px;
	border-top-width: 13px;
	border-bottom-width: 13px;
}

.clr-disc__btn .clr-icon--pause {
	width: 18px;
	height: 22px;
	border-left-width: 6px;
	border-right-width: 6px;
}

.clr-view.is-playing .clr-icon--play {
	display: none;
}

.clr-view.is-playing .clr-icon--pause {
	display: inline-block;
}

.clr-icon--sound {
	width: 16px;
	height: 16px;
	background:
		linear-gradient(currentColor, currentColor) 0 50% / 5px 8px no-repeat,
		linear-gradient(currentColor, currentColor) 4px 50% / 6px 14px no-repeat;
	clip-path: polygon(0 30%, 30% 30%, 62% 0, 62% 100%, 30% 70%, 0 70%);
}

.is-muted .clr-icon--sound {
	opacity: 0.4;
}

.clr-volume {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.clr-volume input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 96px;
	height: 4px;
	border-radius: 99px;
	background: rgba(var(--clr-text-rgb), 0.18);
	outline: none;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.clr-volume input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--clr-accent-2);
	border: 0;
	cursor: pointer;
}

.clr-volume input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--clr-accent-2);
	border: 0;
	cursor: pointer;
}

.clr-clock {
	font-family: var(--clr-mono);
	font-size: 13px;
	color: var(--clr-dim);
	letter-spacing: 0.04em;
}

.clr-listeners {
	font-family: var(--clr-mono);
	font-size: 12px;
	color: var(--clr-dim);
}

.clr-listeners strong {
	color: var(--clr-accent-2);
}

/* Égaliseur : la seule animation qui réagit vraiment au son. */
.clr-eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 20px;
}

.clr-eq i {
	display: block;
	width: 3px;
	height: 20%;
	border-radius: 2px;
	background: var(--clr-accent);
	transition: height 0.12s ease-out;
}

.clr-offline {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(242, 180, 65, 0.12);
	border: 1px solid rgba(242, 180, 65, 0.32);
	font-size: 14px;
	color: var(--clr-text);
}

/* ---------------------------------------------------------------------
   Panneaux
   ------------------------------------------------------------------ */

.clr-panels {
	background: var(--clr-surface);
	border-top: 1px solid var(--clr-line);
	padding: clamp(16px, 3vw, 28px);
}

.clr-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	margin-bottom: 18px;
	padding-bottom: 2px;
}

.clr-tabs::-webkit-scrollbar {
	display: none;
}

.clr-tab {
	flex: 0 0 auto;
	border: 1px solid var(--clr-line);
	background: transparent;
	color: var(--clr-dim);
	font-family: var(--clr-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 9px 15px;
	border-radius: 999px;
	cursor: pointer;
	transition: 0.18s ease;
}

.clr-tab:hover {
	color: var(--clr-text);
}

.clr-tab.is-active {
	background: rgba(var(--clr-accent-rgb), 0.18);
	border-color: rgba(var(--clr-accent-rgb), 0.5);
	color: var(--clr-text);
}

.clr-panel {
	display: none;
}

.clr-panel.is-active {
	display: block;
	animation: clr-fade 0.35s ease;
}

.clr-queue,
.clr-history,
.clr-schedule {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.clr-queue__item,
.clr-history__item,
.clr-schedule__item {
	display: grid;
	grid-template-columns: auto 44px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(var(--clr-text-rgb), 0.04);
	border: 1px solid transparent;
	transition: 0.2s ease;
}

.clr-queue__item:hover,
.clr-history__item:hover,
.clr-schedule__item:hover {
	background: rgba(var(--clr-text-rgb), 0.08);
	border-color: var(--clr-line);
}

.clr-history__item {
	grid-template-columns: auto 40px 1fr;
}

.clr-queue__rank,
.clr-history__time,
.clr-schedule__when {
	font-family: var(--clr-mono);
	font-size: 12px;
	color: var(--clr-accent-2);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.clr-queue__cover,
.clr-history__cover,
.clr-schedule__cover {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: rgba(var(--clr-text-rgb), 0.09) center/cover no-repeat;
	flex: 0 0 auto;
}

.clr-history__cover {
	width: 40px;
	height: 40px;
}

.clr-queue__meta,
.clr-history__meta,
.clr-schedule__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.clr-queue__meta strong,
.clr-history__meta strong,
.clr-schedule__meta strong {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clr-queue__meta em,
.clr-history__meta em,
.clr-schedule__meta em {
	font-style: normal;
	font-size: 12.5px;
	color: var(--clr-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clr-queue__dur,
.clr-schedule__len {
	font-family: var(--clr-mono);
	font-size: 12px;
	color: var(--clr-dim);
}

.clr-schedule__item {
	border-left: 3px solid var(--slot, var(--clr-accent));
}

.clr-empty {
	color: var(--clr-dim);
	font-size: 14px;
	margin: 6px 0;
	list-style: none;
}

/* Grille de playlists */
.clr-plgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}

.clr-plcard {
	display: block;
	border-radius: var(--clr-radius);
	overflow: hidden;
	background: rgba(var(--clr-text-rgb), 0.05);
	border: 1px solid var(--clr-line);
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.clr-plcard:hover {
	transform: translateY(-3px);
	border-color: var(--slot, var(--clr-accent));
}

.clr-plcard__art {
	display: block;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, rgba(var(--clr-accent-rgb), 0.35), rgba(0, 0, 0, 0.5)) center/cover no-repeat;
}

.clr-plcard__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px 14px;
}

.clr-plcard__body strong {
	font-family: var(--clr-display);
	font-size: 17px;
	font-weight: 700;
}

.clr-plcard__body em {
	font-style: normal;
	font-size: 12px;
	font-family: var(--clr-mono);
	color: var(--clr-dim);
}

.clr-plcard__slot {
	margin-top: 6px;
	font-size: 12px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(var(--clr-accent-rgb), 0.16);
	align-self: flex-start;
}

/* ---------------------------------------------------------------------
   Bandeau permanent
   ------------------------------------------------------------------ */

.clr-bar {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 99990;
	width: min(980px, calc(100% - 24px));
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(17, 31, 25, 0.86);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border: 1px solid var(--clr-line);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	animation: clr-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.clr-bar.is-hidden {
	display: none;
}

.clr-bar__play {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: var(--clr-accent);
	color: #04120a;
	display: grid;
	place-items: center;
}

.clr-bar__cover {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(var(--clr-text-rgb), 0.08);
}

.clr-bar__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.clr-bar__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.clr-bar__live {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--clr-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-dim);
}

.clr-bar__link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: var(--clr-text);
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(var(--clr-accent-rgb), 0.5);
	background: rgba(var(--clr-accent-rgb), 0.14);
	white-space: nowrap;
	transition: 0.2s ease;
}

.clr-bar__link:hover {
	background: var(--clr-accent);
	color: #04120a;
}

.clr-bar__close {
	flex: 0 0 auto;
	background: none;
	border: 0;
	color: var(--clr-dim);
	cursor: pointer;
	font-size: 14px;
	padding: 6px;
	line-height: 1;
}

.clr-bar__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2));
	transition: width 0.9s linear;
}

.clr-volume--bar input[type="range"] {
	width: 74px;
}

/* ---------------------------------------------------------------------
   Carte « en direct »
   ------------------------------------------------------------------ */

.clr-card-live {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px;
	border-radius: var(--clr-radius);
	background: var(--clr-surface);
	border: 1px solid var(--clr-line);
	overflow: hidden;
}

.clr-card-live__art {
	width: 96px;
	height: 96px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: rgba(var(--clr-text-rgb), 0.08) center/cover no-repeat;
}

.clr-card-live__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1;
}

.clr-card-live__body strong {
	font-family: var(--clr-display);
	font-size: 18px;
}

.clr-card-live__actions {
	display: flex;
	gap: 8px;
	margin-top: 4px;
	flex-wrap: wrap;
}

.clr-card-live__actions .clr-btn {
	padding: 9px 16px;
	font-size: 14px;
}

/* ---------------------------------------------------------------------
   Bouton d'accès à la radio
   ------------------------------------------------------------------ */

.clr-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 26px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	background: var(--clr-accent);
	color: #04120a;
	box-shadow: 0 12px 30px rgba(var(--clr-accent-rgb), 0.34);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	overflow: hidden;
}

.clr-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 38px rgba(var(--clr-accent-rgb), 0.42);
	color: #04120a;
}

.clr-cta--ghost {
	background: transparent;
	color: var(--clr-text);
	border: 1px solid rgba(var(--clr-accent-rgb), 0.55);
	box-shadow: none;
}

.clr-cta--ghost:hover {
	color: var(--clr-text);
	background: rgba(var(--clr-accent-rgb), 0.12);
}

.clr-cta__pulse {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	animation: clr-pulse 2s infinite;
	flex: 0 0 auto;
}

.clr-cta__wave,
.clr-float-btn__wave {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 16px;
}

.clr-cta__wave i,
.clr-float-btn__wave i {
	width: 3px;
	border-radius: 2px;
	background: currentColor;
	animation: clr-bounce 1s ease-in-out infinite;
}

.clr-cta__wave i:nth-child(1),
.clr-float-btn__wave i:nth-child(1) { height: 40%; animation-delay: 0s; }
.clr-cta__wave i:nth-child(2),
.clr-float-btn__wave i:nth-child(2) { height: 80%; animation-delay: 0.15s; }
.clr-cta__wave i:nth-child(3),
.clr-float-btn__wave i:nth-child(3) { height: 55%; animation-delay: 0.3s; }
.clr-cta__wave i:nth-child(4),
.clr-float-btn__wave i:nth-child(4) { height: 95%; animation-delay: 0.45s; }

/* Bouton flottant */
.clr-float-btn {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 99989;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	border-radius: 999px;
	background: var(--clr-accent);
	color: #04120a;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease;
}

.clr-float-btn:hover {
	transform: translateY(-2px);
	color: #04120a;
}

.clr-float-btn--raised {
	bottom: 88px;
}

/* ---------------------------------------------------------------------
   Animations
   ------------------------------------------------------------------ */

@keyframes clr-spin {
	to { transform: rotate(360deg); }
}

@keyframes clr-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - 1.5rem)); }
}

@keyframes clr-pulse {
	0% { box-shadow: 0 0 0 0 rgba(var(--clr-accent-rgb), 0.55); }
	70% { box-shadow: 0 0 0 10px rgba(var(--clr-accent-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--clr-accent-rgb), 0); }
}

@keyframes clr-halo {
	0% { transform: scale(0.94); opacity: 0.6; }
	100% { transform: scale(1.1); opacity: 0; }
}

@keyframes clr-bounce {
	0%, 100% { transform: scaleY(0.5); }
	50% { transform: scaleY(1.15); }
}

@keyframes clr-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@keyframes clr-rise {
	from { opacity: 0; transform: translate(-50%, 24px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------ */

@media (max-width: 860px) {
	.clr-stage__inner {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	.clr-stage__disc {
		width: min(260px, 68vw);
	}

	.clr-eyebrow,
	.clr-controls {
		justify-content: center;
	}

	.clr-radio-name {
		font-size: clamp(24px, 7vw, 34px);
	}

	.clr-queue__item,
	.clr-schedule__item {
		grid-template-columns: auto 40px 1fr;
	}

	.clr-queue__dur,
	.clr-schedule__len {
		display: none;
	}
}

@media (max-width: 640px) {
	.clr-bar {
		bottom: 10px;
		width: calc(100% - 16px);
		border-radius: 20px;
		padding: 9px 10px;
		gap: 10px;
	}

	.clr-bar__cover,
	.clr-volume--bar,
	.clr-eq--sm {
		display: none;
	}

	.clr-bar__link {
		padding: 8px 11px;
		font-size: 12px;
	}

	.clr-bar__link span {
		display: none;
	}

	.clr-float-btn__label {
		display: none;
	}

	.clr-float-btn {
		padding: 15px;
		border-radius: 50%;
	}

	.clr-float-btn--raised {
		bottom: 82px;
	}

	.clr-controls {
		gap: 10px;
	}

	.clr-volume input[type="range"] {
		width: 78px;
	}

	.clr-card-live {
		flex-direction: column;
		align-items: flex-start;
	}

	.clr-card-live__art {
		width: 100%;
		height: 150px;
	}
}

/* Confort : on coupe le mouvement si la personne le demande. */
@media (prefers-reduced-motion: reduce) {
	.clr-disc,
	.clr-ticker__rail,
	.clr-live i,
	.clr-cta__pulse,
	.clr-cta__wave i,
	.clr-float-btn__wave i,
	.clr-view.is-playing .clr-stage__disc::after {
		animation: none !important;
	}

	.clr-ticker__rail {
		transform: none;
	}

	.clr-panel.is-active {
		animation: none;
	}
}

/* Support RTL (arabe) */
[dir="rtl"] .clr-ticker__rail {
	direction: ltr;
}

[dir="rtl"] .clr-schedule__item {
	border-left: 0;
	border-right: 3px solid var(--slot, var(--clr-accent));
}


/* ---------------------------------------------------------------------
   Gabarit de page dédiée
   ------------------------------------------------------------------ */

.clr-page {
	display: block;
	width: 100%;
	background: var(--clr-bg);
	padding: clamp(36px, 7vw, 88px) clamp(16px, 5vw, 56px) clamp(48px, 8vw, 100px);
	background-image:
		radial-gradient(70% 50% at 80% -10%, rgba(242, 180, 65, 0.12), transparent 60%),
		radial-gradient(60% 45% at 0% 0%, rgba(var(--clr-accent-rgb), 0.16), transparent 62%);
}

.clr-page__intro {
	max-width: 1180px;
	margin: 0 auto clamp(24px, 4vw, 48px);
}

.clr-page__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-family: var(--clr-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--clr-accent-2);
}

.clr-page__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--clr-accent);
	animation: clr-pulse 2s infinite;
}

.clr-page__title {
	font-family: var(--clr-display);
	font-weight: 800;
	font-size: clamp(38px, 8vw, 92px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 0 0 18px;
	color: var(--clr-text);
	text-wrap: balance;
}

.clr-page__lede {
	max-width: 46ch;
	margin: 0 0 28px;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.6;
	color: var(--clr-dim);
}

.clr-page__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 5vw, 56px);
	list-style: none;
	margin: 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--clr-line);
}

.clr-page__facts li {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.clr-page__facts strong {
	font-family: var(--clr-display);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1;
	color: var(--clr-text);
}

.clr-page__facts span {
	font-family: var(--clr-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-dim);
}

.clr-page__player,
.clr-page__editorial {
	max-width: 1180px;
	margin: 0 auto;
}

.clr-page__editorial {
	margin-top: clamp(28px, 5vw, 56px);
	color: var(--clr-dim);
	line-height: 1.7;
}

.clr-page__editorial a { color: var(--clr-accent-2); }

.clr-page__editorial h2,
.clr-page__editorial h3 {
	font-family: var(--clr-display);
	color: var(--clr-text);
}

/* La page radio du site : on laisse le lecteur respirer bord à bord. */
.clr-radio-page .clr-radio {
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}

/* =====================================================================
   1.1 — Reprise de l'affichage mobile
   Objectif : rien qui déborde, rien qui se touche, cibles tactiles
   d'au moins 44 px, et un lecteur lisible sur un écran de 360 px.
   ===================================================================== */

.clr-radio,
.clr-page,
.clr-card-live {
	max-width: 100%;
}

.clr-radio,
.clr-page {
	overflow-x: hidden;
}

/* Le disque et le bouton d'écoute sont les deux cibles principales :
   on les garde généreux au doigt. */
.clr-disc__btn,
.clr-bar__play,
.clr-btn--icon,
.clr-bar__close {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Attente de chargement : le bouton dit ce qui se passe. */
.clr-view.is-loading .clr-disc__btn,
.clr-view.is-loading .clr-bar__play {
	opacity: 0.75;
}

.clr-view.is-loading .clr-disc__btn::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 2px solid rgba(0, 0, 0, 0.25);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: clr-spin 0.8s linear infinite;
}

.clr-view.is-loading .clr-disc__btn .clr-icon {
	opacity: 0;
}

.clr-view.is-loading .clr-btn--primary {
	opacity: 0.8;
}

/* Un morceau sans pochette ne doit pas laisser un trou noir. */
.clr-disc {
	background:
		radial-gradient(circle at 34% 28%, rgba(var(--clr-accent-rgb), 0.35), transparent 55%),
		radial-gradient(circle at 70% 76%, rgba(242, 180, 65, 0.22), transparent 52%),
		#0a1611;
}

@media (max-width: 860px) {
	.clr-stage {
		padding: 24px 18px 28px;
	}

	.clr-stage__inner {
		gap: 22px;
	}

	.clr-stage__disc {
		width: min(230px, 60vw);
	}

	.clr-ticker__item {
		font-size: 18px;
	}

	.clr-nowmeta {
		font-size: 13px;
	}
}

@media (max-width: 600px) {
	.clr-radio {
		border-radius: 20px;
	}

	.clr-stage {
		padding: 22px 16px 26px;
	}

	.clr-stage__disc {
		width: min(190px, 54vw);
	}

	.clr-disc__btn {
		width: 74px;
		height: 74px;
	}

	.clr-radio-name {
		font-size: 24px;
		margin-bottom: 12px;
	}

	.clr-eyebrow {
		font-size: 11px;
		gap: 8px;
		row-gap: 6px;
	}

	.clr-ticker {
		padding: 8px 0;
		margin-bottom: 12px;
	}

	.clr-ticker__item {
		font-size: 16px;
	}

	.clr-ticker__rail {
		gap: 2.5rem;
	}

	/* Le volume disparaît : sur téléphone, on règle avec les boutons
	   physiques. Reste la coupure du son, plus utile. */
	.clr-volume input[type="range"] {
		display: none;
	}

	.clr-controls {
		gap: 12px;
		row-gap: 14px;
		justify-content: center;
	}

	/* Le bouton d'écoute prend toute la largeur, le reste passe dessous. */
	.clr-controls .clr-btn--primary {
		flex: 1 0 100%;
		justify-content: center;
		min-height: 52px;
		font-size: 16px;
	}

	.clr-btn--icon {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}

	.clr-clock,
	.clr-listeners {
		font-size: 12px;
	}

	.clr-panels {
		padding: 16px 14px 20px;
	}

	/* Les onglets glissent bord à bord, sans être coupés net. */
	.clr-tabs {
		margin: 0 -14px 16px;
		padding: 0 14px 4px;
	}

	.clr-tab {
		padding: 10px 14px;
	}

	.clr-queue__item,
	.clr-history__item,
	.clr-schedule__item {
		padding: 9px 10px;
		gap: 10px;
	}

	.clr-queue__meta strong,
	.clr-history__meta strong,
	.clr-schedule__meta strong {
		font-size: 14px;
	}

	.clr-plgrid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 10px;
	}

	.clr-plcard__body strong {
		font-size: 15px;
	}
}

@media (max-width: 380px) {
	.clr-stage__disc {
		width: 168px;
	}

	.clr-radio-name {
		font-size: 21px;
	}

	.clr-ticker__item {
		font-size: 15px;
	}
}

/* --- Bandeau : deux lignes, cibles confortables, encoche respectée --- */

@media (max-width: 640px) {
	.clr-bar {
		bottom: 8px;
		width: calc(100% - 12px);
		padding: 9px 10px;
		padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
		gap: 10px;
		border-radius: 18px;
	}

	.clr-bar__play {
		width: 46px;
		height: 46px;
	}

	.clr-bar__body {
		gap: 1px;
	}

	.clr-bar__live {
		font-size: 10px;
	}

	.clr-ticker--sm .clr-ticker__item {
		font-size: 13px;
	}

	.clr-bar__link {
		padding: 10px 12px;
		min-height: 40px;
	}

	.clr-bar__close {
		padding: 10px 4px;
	}

	.clr-float-btn {
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		width: 56px;
		height: 56px;
		justify-content: center;
		padding: 0;
	}

	.clr-float-btn--raised {
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}
}

/* --- Page dédiée --------------------------------------------------- */

@media (max-width: 780px) {
	.clr-page {
		padding: 32px 16px 56px;
	}

	.clr-page__title {
		font-size: clamp(30px, 10vw, 46px);
		margin-bottom: 14px;
	}

	.clr-page__lede {
		font-size: 15px;
		margin-bottom: 22px;
	}

	.clr-page__facts {
		gap: 18px 26px;
		padding-top: 18px;
	}

	.clr-page__facts strong {
		font-size: 26px;
	}

	.clr-page__facts span {
		font-size: 10.5px;
	}

	.clr-page__kicker {
		font-size: 11px;
		line-height: 1.5;
	}
}

/* Le bandeau flottant ne doit jamais recouvrir la fin de page. */
body.clr-radio-page {
	padding-bottom: 0;
}

.clr-page::after {
	content: "";
	display: block;
	height: env(safe-area-inset-bottom, 0px);
}

/* Correction : « justify-items: center » empêchait le bloc d'informations
   de prendre toute la largeur, ce qui écrasait le bandeau défilant et la
   barre de progression sur téléphone. On centre par le texte, pas par la
   grille. */
@media (max-width: 860px) {
	.clr-stage__inner {
		justify-items: stretch;
		text-align: center;
	}

	.clr-stage__disc {
		margin-left: auto;
		margin-right: auto;
	}

	.clr-stage__info {
		width: 100%;
		min-width: 0;
	}

	.clr-timeline,
	.clr-ticker {
		width: 100%;
	}
}

/* =====================================================================
   Section d'accueil — la bande « la radio de la coalition »
   Pensée pour être posée au milieu d'un site clair : elle apporte son
   propre fond de nuit et se referme proprement.
   ===================================================================== */

.clr-promo {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: calc(var(--clr-radius) * 1.4);
	background: var(--clr-bg);
	padding: clamp(28px, 5vw, 60px) clamp(20px, 4vw, 56px);
	isolation: isolate;
	color: var(--clr-text);
}

.clr-promo__art {
	position: absolute;
	inset: -20%;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(64px) saturate(1.6);
	opacity: 0.42;
	transform: scale(1.2);
	transition: background-image 0.6s ease;
}

.clr-promo__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(80% 60% at 6% 0%, rgba(var(--clr-accent-rgb), 0.3), transparent 60%),
		radial-gradient(60% 50% at 100% 100%, rgba(242, 180, 65, 0.16), transparent 58%),
		linear-gradient(150deg, rgba(11, 20, 16, 0.7), var(--clr-bg) 76%);
}

.clr-promo__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr minmax(160px, 250px);
	gap: clamp(24px, 5vw, 56px);
	align-items: center;
}

.clr-promo--center .clr-promo__inner {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

.clr-promo--center .clr-promo__disc {
	order: -1;
}

.clr-promo__body {
	min-width: 0;
}

.clr-promo__title {
	font-family: var(--clr-display);
	font-weight: 800;
	font-size: clamp(28px, 4vw, 52px);
	line-height: 1;
	letter-spacing: -0.025em;
	margin: 0 0 14px;
	color: var(--clr-text);
	text-wrap: balance;
}

.clr-promo__lede {
	max-width: 48ch;
	margin: 0 0 22px;
	font-size: clamp(14.5px, 1.5vw, 17px);
	line-height: 1.6;
	color: var(--clr-dim);
}

/* Le titre en cours, présenté comme une ligne de cadran. */
.clr-promo__now {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	margin-bottom: 22px;
	border-radius: 999px;
	background: rgba(var(--clr-text-rgb), 0.06);
	border: 1px solid var(--clr-line);
	overflow: hidden;
}

.clr-promo__label {
	flex: 0 0 auto;
	font-family: var(--clr-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--clr-accent-2);
}

.clr-promo__now .clr-ticker {
	flex: 1 1 auto;
	min-width: 0;
}

.clr-promo__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.clr-promo__stats {
	display: flex;
	gap: clamp(20px, 4vw, 40px);
	list-style: none;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--clr-line);
}

.clr-promo--center .clr-promo__stats {
	justify-content: center;
}

.clr-promo__stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.clr-promo__stats strong {
	font-family: var(--clr-display);
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1;
	color: var(--clr-text);
}

.clr-promo__stats span {
	font-family: var(--clr-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-dim);
}

.clr-promo__disc {
	position: relative;
	aspect-ratio: 1;
	width: 100%;
	max-width: 250px;
}

.clr-promo__next {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: clamp(22px, 3vw, 32px) 0 0;
	padding: clamp(18px, 3vw, 26px) 0 0;
	border-top: 1px solid var(--clr-line);
}

.clr-promo__next li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 15px;
	border-radius: 999px;
	background: rgba(var(--clr-text-rgb), 0.05);
	border: 1px solid var(--clr-line);
	border-left: 3px solid var(--slot, var(--clr-accent));
}

.clr-promo__when {
	font-family: var(--clr-mono);
	font-size: 11.5px;
	color: var(--clr-accent-2);
	white-space: nowrap;
}

.clr-promo__show {
	font-size: 14px;
	font-weight: 700;
}

@media (max-width: 860px) {
	.clr-promo__inner {
		grid-template-columns: 1fr;
		justify-items: stretch;
		text-align: center;
	}

	.clr-promo__disc {
		order: -1;
		width: min(190px, 52vw);
		margin: 0 auto;
	}

	.clr-promo__lede {
		margin-left: auto;
		margin-right: auto;
	}

	.clr-promo .clr-eyebrow,
	.clr-promo__actions,
	.clr-promo__stats,
	.clr-promo__next {
		justify-content: center;
	}
}

@media (max-width: 600px) {
	.clr-promo {
		padding: 26px 16px 28px;
		border-radius: 20px;
	}

	.clr-promo__title {
		font-size: 26px;
	}

	.clr-promo__now {
		padding: 10px 14px;
		gap: 10px;
	}

	.clr-promo__label {
		display: none;
	}

	.clr-promo__actions .clr-btn--primary {
		flex: 1 0 100%;
		justify-content: center;
		min-height: 52px;
	}

	.clr-promo__actions .clr-btn--ghost {
		flex: 1 0 auto;
		justify-content: center;
	}

	.clr-promo .clr-eq {
		display: none;
	}

	.clr-promo__stats {
		gap: 18px;
		padding-top: 16px;
	}
}

/* =====================================================================
   Bouton d'accès à la radio — version 1.2.1
   Il ne dit plus seulement « écoutez » : il montre ce qui passe.
   La pochette du morceau en cours tourne dedans, un anneau vert respire
   autour. C'est l'invitation la plus directe qu'on puisse faire.
   ===================================================================== */

.clr-float {
	position: fixed;
	bottom: 18px;
	z-index: 99989;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 20px 8px 8px;
	border-radius: 999px;
	text-decoration: none;
	color: var(--clr-text);
	background: rgba(17, 31, 25, 0.9);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid rgba(var(--clr-accent-rgb), 0.45);
	box-shadow:
		0 18px 44px rgba(0, 0, 0, 0.45),
		0 0 0 0 rgba(var(--clr-accent-rgb), 0.5);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
	animation: clr-float-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.clr-float--right { right: 18px; }
.clr-float--left { left: 18px; }
.clr-float--raised { bottom: 92px; }

.clr-float:hover,
.clr-float:focus-visible {
	transform: translateY(-3px);
	color: var(--clr-text);
	border-color: var(--clr-accent);
	box-shadow:
		0 24px 54px rgba(0, 0, 0, 0.5),
		0 0 34px rgba(var(--clr-accent-rgb), 0.35);
}

/* L'anneau qui respire : discret à l'arrêt, plus présent en lecture. */
.clr-float__halo {
	position: absolute;
	left: 8px;
	top: 50%;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	border-radius: 50%;
	border: 1.5px solid rgba(var(--clr-accent-rgb), 0.6);
	animation: clr-halo 3.2s ease-out infinite;
	pointer-events: none;
}

/* La pochette, en disque. */
.clr-float__disc {
	position: relative;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	background:
		radial-gradient(circle at 34% 28%, rgba(var(--clr-accent-rgb), 0.55), transparent 58%),
		radial-gradient(circle at 72% 74%, rgba(242, 180, 65, 0.35), transparent 55%),
		#0a1611;
	box-shadow: inset 0 0 0 1px rgba(var(--clr-text-rgb), 0.12);
	animation: clr-spin 18s linear infinite;
	animation-play-state: paused;
}

.clr-float.is-playing .clr-float__disc {
	animation-play-state: running;
}

.clr-float__disc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.clr-float__disc img[src=""],
.clr-float__disc img:not([src]) {
	opacity: 0;
}

.clr-float__grooves {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: repeating-radial-gradient(
		circle at 50% 50%,
		rgba(0, 0, 0, 0.3) 0 1px,
		rgba(255, 255, 255, 0.05) 1px 2px,
		transparent 2px 5px
	);
	opacity: 0.7;
}

.clr-float__hole {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--clr-bg);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}

.clr-float__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.clr-float__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--clr-mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--clr-accent-2);
}

.clr-float__live i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--clr-accent);
	animation: clr-pulse 2s infinite;
}

.clr-float__label {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	color: var(--clr-text);
}

.clr-float__wave {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 15px;
	flex: 0 0 auto;
}

.clr-float__wave i {
	width: 3px;
	border-radius: 2px;
	background: var(--clr-accent);
	animation: clr-bounce 1.1s ease-in-out infinite;
}

.clr-float__wave i:nth-child(1) { height: 40%; animation-delay: 0s; }
.clr-float__wave i:nth-child(2) { height: 85%; animation-delay: 0.15s; }
.clr-float__wave i:nth-child(3) { height: 55%; animation-delay: 0.3s; }
.clr-float__wave i:nth-child(4) { height: 100%; animation-delay: 0.45s; }

@keyframes clr-float-in {
	from { opacity: 0; transform: translateY(22px) scale(0.92); }
	to { opacity: 1; transform: none; }
}

/* Sur téléphone : la pastille se réduit au disque. La pochette suffit,
   elle est plus parlante qu'un libellé, et le pouce l'atteint sans gêner
   les autres boutons flottants du site. */
@media (max-width: 700px) {
	.clr-float {
		gap: 0;
		padding: 6px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}

	.clr-float--right { right: 14px; }
	.clr-float--left { left: 14px; }
	.clr-float--raised { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

	.clr-float__text,
	.clr-float__wave {
		display: none;
	}

	.clr-float__disc {
		width: 52px;
		height: 52px;
	}

	.clr-float__halo {
		left: 6px;
		width: 52px;
		height: 52px;
		margin-top: -26px;
	}

	/* Une pastille « direct » posée sur le disque, pour dire d'un coup
	   d'œil que c'est en cours. */
	.clr-float::after {
		content: "";
		position: absolute;
		top: 4px;
		right: 4px;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: var(--clr-accent);
		border: 2px solid var(--clr-bg);
		animation: clr-pulse 2s infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.clr-float,
	.clr-float__disc,
	.clr-float__halo,
	.clr-float__live i,
	.clr-float__wave i,
	.clr-float::after {
		animation: none !important;
	}
}

/* L'ancienne classe reste stylée au cas où elle traînerait dans un cache. */
.clr-float-btn {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 99989;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	border-radius: 999px;
	background: var(--clr-accent);
	color: #04120a;
	text-decoration: none;
	font-weight: 700;
}

/* =====================================================================
   1.3 — Trois chaînes, bouton déplaçable, lecteur détaché
   ===================================================================== */

/* --- Sélecteur de chaînes ------------------------------------------- */

.clr-channels {
	position: relative;
	z-index: 3;
	display: flex;
	gap: 8px;
	padding: 14px clamp(20px, 4vw, 56px) 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.clr-channels::-webkit-scrollbar { display: none; }

.clr-channel {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--clr-line);
	background: rgba(var(--clr-text-rgb), 0.04);
	color: var(--clr-dim);
	font-family: var(--clr-font);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.clr-channel:hover { color: var(--clr-text); }

.clr-channel__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--chan, var(--clr-accent));
	opacity: 0.55;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.clr-channel__count {
	font-family: var(--clr-mono);
	font-size: 11px;
	opacity: 0.6;
}

.clr-channel.is-active {
	color: var(--clr-text);
	background: color-mix(in srgb, var(--chan, var(--clr-accent)) 18%, transparent);
	border-color: var(--chan, var(--clr-accent));
}

.clr-channel.is-active .clr-channel__dot {
	opacity: 1;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--chan, var(--clr-accent)) 25%, transparent);
}

/* Repli si color-mix n'est pas géré : le contour suffit à distinguer. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.clr-channel.is-active {
		background: rgba(var(--clr-accent-rgb), 0.18);
	}
}

/* --- Icône « détacher » --------------------------------------------- */

.clr-icon--detach {
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-radius: 3px;
	position: relative;
}

.clr-icon--detach::after {
	content: "";
	position: absolute;
	right: -5px;
	top: -5px;
	width: 9px;
	height: 9px;
	border: 2px solid currentColor;
	border-radius: 2px;
	background: var(--clr-surface);
}

/* --- Bouton déplaçable ---------------------------------------------- */

.clr-float {
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.clr-float.is-dragging {
	cursor: grabbing;
	transition: none;
	transform: scale(1.06);
	box-shadow:
		0 30px 60px rgba(0, 0, 0, 0.55),
		0 0 40px rgba(var(--clr-accent-rgb), 0.4);
}

.clr-float.is-dragging .clr-float__halo {
	animation: none;
	opacity: 0.35;
}

/* --- Lecteur détaché ------------------------------------------------ */

.clr-popup-body {
	margin: 0;
	padding: 0;
	background: var(--clr-bg, #0b1410);
	min-height: 100vh;
}

.clr-popup {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
}

.clr-popup__art {
	position: absolute;
	inset: -20%;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(58px) saturate(1.6);
	opacity: 0.45;
	transform: scale(1.2);
}

.clr-popup__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(80% 60% at 50% 0%, rgba(var(--clr-accent-rgb), 0.26), transparent 62%),
		linear-gradient(170deg, rgba(11, 20, 16, 0.7), var(--clr-bg) 78%);
}

.clr-popup__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 360px;
	padding: 26px 22px 22px;
	text-align: center;
}

.clr-popup .clr-eyebrow { justify-content: center; }

.clr-popup__disc {
	position: relative;
	width: min(190px, 60vw);
	aspect-ratio: 1;
	margin: 6px auto 18px;
}

.clr-popup .clr-disc {
	position: absolute;
	inset: 0;
}

.clr-popup .clr-ticker { margin-bottom: 14px; }

.clr-popup__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.clr-popup__controls .clr-btn--primary { min-height: 48px; }
.clr-popup__controls input[type="range"] { width: 90px; }

.clr-channels--popup {
	padding: 18px 0 0;
	justify-content: center;
	border-top: 1px solid var(--clr-line);
	margin-top: 18px;
}

.clr-channels--popup .clr-channel {
	padding: 8px 14px;
	font-size: 12.5px;
}

.clr-popup__hint {
	margin: 16px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--clr-dim);
	font-family: var(--clr-mono);
}

@media (max-width: 600px) {
	.clr-channels {
		padding: 12px 14px 0;
		gap: 6px;
	}

	.clr-channel {
		padding: 9px 14px;
		font-size: 13px;
	}

	.clr-channel__count { display: none; }
}