:root {
	--rlba-bg: var(--wp--preset--color--nuit, #140930);
	--rlba-panel: var(--wp--preset--color--tertiary, #221060);
	--rlba-border: var(--wp--preset--color--border-light, #36228A);
	--rlba-accent: var(--wp--preset--color--primary-alt, #F83D08);
	--rlba-accent-hover: var(--wp--preset--color--primary-alt-accent, #C93006);
	--rlba-sky: var(--wp--preset--color--primary, #76BFEA);
	--rlba-pink: var(--wp--preset--color--rose, #F443CE);
	--rlba-text: #fff;
	--rlba-muted: var(--wp--preset--color--secondary, #B9B1DE);
	--rlba-bar-h: 76px;
}
body { padding-bottom: calc(var(--rlba-bar-h) + env(safe-area-inset-bottom, 0px)); }
body.rlba-popup-page { padding-bottom: 0; }

.rlba-ico { width: 24px; height: 24px; fill: currentColor; display: block; }
.rlba-player .rlba-ico--pause, .rlba-hero-player .rlba-ico--pause { display: none; }
.rlba-playing .rlba-ico--play, .rlba-loading .rlba-ico--play { display: none; }
.rlba-playing .rlba-ico--pause { display: block; }
.rlba-spinner { display: none; width: 26px; height: 26px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: rlba-spin .8s linear infinite; }
.rlba-loading .rlba-spinner { display: block; }
@keyframes rlba-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rlba-spinner { animation-duration: 2s; } }

/* Barre fixe */
.rlba-player--bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
	background: var(--rlba-bg); color: var(--rlba-text);
	border-top: 1px solid var(--rlba-border);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	font-family: var(--wp--preset--font-family--primary, sans-serif);
	box-shadow: 0 -6px 24px rgba(10, 4, 30, .45);
}
.rlba-player__inner {
	max-width: 1260px; margin: 0 auto; height: var(--rlba-bar-h);
	display: flex; align-items: center; gap: 14px; padding: 0 16px;
}
.rlba-player__play, .rlba-hero-player__play {
	flex: none; display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 50%;
	background: var(--rlba-accent); color: #fff; transition: background .2s, transform .1s;
}
.rlba-player__play { width: 52px; height: 52px; }
.rlba-player__play:hover, .rlba-hero-player__play:hover { background: var(--rlba-accent-hover); }
.rlba-player__play:active, .rlba-hero-player__play:active { transform: scale(.96); }
.rlba-player__play:focus-visible, .rlba-hero-player__play:focus-visible,
.rlba-player button:focus-visible, .rlba-player summary:focus-visible, .rlba-player input:focus-visible { outline: 2px solid var(--rlba-pink); outline-offset: 2px; }
.rlba-player__art { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; background: var(--rlba-panel); }
.rlba-player__meta { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.rlba-player__live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rlba-pink); }
.rlba-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rlba-pink); }
.rlba-playing .rlba-dot { animation: rlba-pulse 1.6s ease-in-out infinite; }
@keyframes rlba-pulse { 50% { opacity: .3; } }
.rlba-player__title { font-family: var(--wp--preset--font-family--heading, cursive); color: var(--rlba-sky); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlba-player__artist { font-size: .9rem; color: var(--rlba-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlba-player__tools { display: flex; align-items: center; gap: 10px; flex: none; }
.rlba-player__tools button, .rlba-player__history summary {
	background: transparent; color: var(--rlba-text); border: 1px solid var(--rlba-border); border-radius: 50px;
	min-height: 40px; min-width: 40px; padding: 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .85rem; font-weight: 700;
}
.rlba-player__tools button:hover, .rlba-player__history summary:hover { border-color: var(--rlba-sky); color: var(--rlba-sky); }
.rlba-player__history { position: relative; }
.rlba-player__history summary { list-style: none; }
.rlba-player__history summary::-webkit-details-marker { display: none; }
.rlba-player__history-panel {
	position: absolute; right: 0; bottom: calc(100% + 12px); width: min(360px, 90vw);
	background: var(--rlba-panel); border: 1px solid var(--rlba-border); border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.rlba-player__history-panel ol { margin: 0 0 10px; padding: 0; list-style: none; font-size: .88rem; }
.rlba-player__history-panel li, .rlba-hero-player__history li { padding: 6px 0; border-bottom: 1px solid var(--rlba-border); }
.rlba-player__history-panel a { color: var(--rlba-sky); font-size: .85rem; }
.rlba-h-time { color: var(--rlba-muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.rlba-player__volume input { width: 96px; accent-color: var(--rlba-accent); }
.rlba-nav-loading body { cursor: progress; }
.rlba-nav-loading main { opacity: .6; transition: opacity .2s; }

@media (max-width: 781px) {
	:root { --rlba-bar-h: 68px; }
	.rlba-hide-sm { display: none !important; }
	.rlba-player__inner { gap: 10px; padding: 0 10px; }
	.rlba-player__art { width: 44px; height: 44px; }
	.rlba-player__play { width: 48px; height: 48px; }
	.rlba-player__history summary { padding: 0 10px; }
}

/* Carte d'écoute (page d'accueil, lecteur déporté) */
.rlba-hero-player {
	display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "play art meta" "hist hist hist";
	align-items: center; gap: 20px 24px; padding: clamp(20px, 4vw, 36px);
	background: var(--rlba-panel); border: 1px solid var(--rlba-border); border-radius: 24px; color: var(--rlba-text);
}
.rlba-hero-player__play { grid-area: play; width: 88px; height: 88px; }
.rlba-hero-player__play .rlba-ico { width: 40px; height: 40px; }
.rlba-hero-player__play .rlba-spinner { width: 36px; height: 36px; }
.rlba-hero-player__art { grid-area: art; width: 120px; height: 120px; border-radius: 14px; object-fit: cover; background: var(--rlba-bg); }
.rlba-hero-player__meta { grid-area: meta; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rlba-hero-player__title { font-family: var(--wp--preset--font-family--heading, cursive); color: var(--rlba-sky); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; }
.rlba-hero-player__artist { font-size: 1.1rem; }
.rlba-hero-player__history { grid-area: hist; border-top: 1px solid var(--rlba-border); padding-top: 16px; }
.rlba-hero-player__label { margin: 0 0 6px; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rlba-pink); }
.rlba-hero-player__history ol { margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.rlba-hero-player__history li:last-child { border-bottom: 0; }
@media (max-width: 600px) {
	.rlba-hero-player { grid-template-columns: auto 1fr; grid-template-areas: "art art" "play meta" "hist hist"; justify-items: start; }
	.rlba-hero-player__art { width: 100%; height: auto; aspect-ratio: 1; max-width: 220px; justify-self: center; }
}

/* Lecteur déporté */
.rlba-popup { max-width: 520px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.rlba-popup__logo { width: 240px; height: auto; }
.rlba-popup .rlba-hero-player { width: 100%; grid-template-columns: auto 1fr; grid-template-areas: "art art" "play meta" "hist hist"; }
.rlba-popup .rlba-hero-player__art { width: 100%; height: auto; aspect-ratio: 1; max-width: 260px; justify-self: center; }
.rlba-popup__back a { color: var(--rlba-sky); }