/* biboo radio – page d'écoute. Tout est rangé sous .bbr pour ne pas toucher au thème. */
.bbr {
	--bbr-bg: #f2f3f7;
	--bbr-surface: #ffffff;
	--bbr-fg: #16151d;
	--bbr-muted: #5d5b6b;
	--bbr-line: #dcdce6;
	--bbr-band: #16151d;
	--bbr-band-fg: #f4f3f8;
	--bbr-band-muted: #a9a7b8;
	--bbr-band-surface: #23222d;
	--bbr-band-line: #33323f;
	--bbr-red: #e21b2d;
	--bbr-red-bright: #ff3b4b;
	--bbr-on-red: #ffffff;
	--bbr-display: "Unbounded", "Arial Black", system-ui, sans-serif;
	--bbr-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bbr-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--bbr-radius: 14px;

	/* pleine largeur, même dans un conteneur étroit du thème (--bbr-sb = largeur de la barre de défilement, calculée en JS) */
	width: calc(100vw - var(--bbr-sb, 0px)) !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw + var(--bbr-sb, 0px) / 2) !important;
	margin-right: calc(50% - 50vw + var(--bbr-sb, 0px) / 2) !important;
	margin-top: 0 !important;
	background: var(--bbr-bg);
	color: var(--bbr-fg);
	font-family: var(--bbr-body);
	font-size: 16px;
	line-height: 1.55;
	overflow-x: clip;
}
.bbr *, .bbr *::before, .bbr *::after { box-sizing: border-box; }
.bbr a { color: inherit; text-decoration: none; }
.bbr h1, .bbr h2, .bbr h3 { font-family: var(--bbr-display); line-height: 1.12; text-wrap: balance; margin: 0; padding: 0; color: inherit; letter-spacing: normal; text-transform: none; }
.bbr p { margin: 0; }
.bbr [hidden] { display: none !important; }
.bbr :focus-visible { outline: 3px solid var(--bbr-red); outline-offset: 3px; border-radius: 6px; }
.bbr-wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bbr-eyebrow { font-family: var(--bbr-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.bbr-accent { color: var(--bbr-red); }
.bbr-muted { color: var(--bbr-band-muted); }
.bbr-h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; margin-top: 8px !important; }

/* Bande antenne */
.bbr-antenna { background: var(--bbr-band); color: var(--bbr-band-fg); padding-block: 56px 64px; position: relative; overflow: hidden; }
.bbr-antenna::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 18px, rgba(226, 27, 45, .14) 18px 20px); pointer-events: none; }
.bbr-antenna-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 860px) { .bbr-antenna-grid { grid-template-columns: 1fr; gap: 28px; } .bbr-antenna { padding-block: 32px 40px; } }
.bbr-live { display: inline-flex; align-items: center; gap: 8px; color: var(--bbr-red); }
.bbr-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--bbr-red); animation: bbr-pulse 1.8s infinite; }
@keyframes bbr-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 75, .6); } 70% { box-shadow: 0 0 0 10px rgba(255, 59, 75, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 75, 0); } }
.bbr-h1 { font-size: clamp(2rem, 5vw, 3.4rem) !important; font-weight: 800 !important; letter-spacing: -.03em !important; margin-top: 14px !important; color: var(--bbr-band-fg) !important; }
.bbr-h1 em { font-style: normal; color: var(--bbr-red); }
.bbr-lead { font-size: 1.12rem; color: var(--bbr-band-muted); max-width: 34em; margin: 18px 0 28px !important; }
.bbr-lead strong { color: var(--bbr-band-fg); font-weight: 600; }
.bbr-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bbr-play { display: inline-flex; align-items: center; gap: 14px; background: var(--bbr-red); color: var(--bbr-on-red); border: 0; border-radius: 999px;
	padding: 10px 26px 10px 10px; font: 700 1.05rem var(--bbr-body); cursor: pointer; transition: transform .15s; line-height: 1.2; }
.bbr-play:hover { transform: translateY(-2px); }
.bbr-disc { width: 48px; height: 48px; border-radius: 50%; background: var(--bbr-on-red); color: var(--bbr-red); display: grid; place-items: center; }
.bbr-play svg, .bbr-mini svg { width: 20px; height: 20px; }
.bbr-ghost { color: var(--bbr-band-fg) !important; border: 1px solid #3a3946; border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: .95rem; }
.bbr-ghost:hover { border-color: var(--bbr-band-muted); }
.bbr-small { font-size: .82rem; color: var(--bbr-band-muted); margin-top: 14px !important; }
.bbr-loading .bbr-disc svg { animation: bbr-spin 1s linear infinite; }
@keyframes bbr-spin { to { transform: rotate(360deg); } }

/* Carte à l'antenne */
.bbr-onair { background: var(--bbr-band-surface); border: 1px solid var(--bbr-band-line); border-radius: 20px; padding: 22px; display: grid; gap: 18px; min-width: 0; }
.bbr-onair-show { display: flex; gap: 16px; align-items: center; }
.bbr-show-art { width: 76px; height: 76px; border-radius: 12px; flex: none; display: grid; place-items: center; font: 800 .72rem/1.1 var(--bbr-display); text-align: center; padding: 6px;
	color: var(--bbr-on-red); background: var(--bbr-red) center / cover no-repeat; text-transform: uppercase; overflow: hidden; }
.bbr-show-art.bbr-has-img { color: transparent; }
.bbr-onair-show h3 { font-size: 1.15rem; color: var(--bbr-band-fg); }
.bbr-onair-show p { margin-top: 4px; color: var(--bbr-band-muted); font-size: .92rem; }
.bbr-time { font-family: var(--bbr-mono); font-size: .8rem; color: var(--bbr-red); }
.bbr-nowtrack { border-top: 1px solid var(--bbr-band-line); padding-top: 16px; display: flex; gap: 14px; align-items: center; min-width: 0; }
.bbr-cover-sm { width: 52px; height: 52px; border-radius: 10px; flex: none; background: #2e2d3a center / cover no-repeat; display: grid; place-items: center; position: relative; }
.bbr-cover-sm[style] .bbr-eq { background: rgba(0, 0, 0, .45); border-radius: 6px; padding: 4px; height: 28px; }
.bbr-eq { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.bbr-eq b { width: 4px; background: var(--bbr-red); border-radius: 2px; height: 30%; }
.bbr-playing .bbr-eq b { animation: bbr-eq 1s ease-in-out infinite alternate; }
.bbr-eq b:nth-child(2) { animation-delay: -.3s; } .bbr-eq b:nth-child(3) { animation-delay: -.6s; } .bbr-eq b:nth-child(4) { animation-delay: -.15s; }
@keyframes bbr-eq { from { height: 20%; } to { height: 100%; } }
.bbr-t { min-width: 0; flex: 1; }
.bbr-t > div, .bbr-t > b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbr-t > span { display: block; color: var(--bbr-band-muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbr-next { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--bbr-band-muted); border-top: 1px solid var(--bbr-band-line); padding-top: 14px; }
.bbr-next strong { color: var(--bbr-band-fg); }

/* Sections */
.bbr-section { padding-block: 56px; }
.bbr-section + .bbr-section { border-top: 1px solid var(--bbr-line); }
.bbr-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.bbr-head p { margin-top: 6px; color: var(--bbr-muted); max-width: 40em; }
.bbr-more { font-weight: 600; font-size: .95rem; color: var(--bbr-red) !important; }
.bbr-more:hover { text-decoration: underline; }

/* Promesse : Les 90's et tellement + */
.bbr-promise { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 820px) { .bbr-promise { grid-template-columns: 1fr; gap: 28px; } }
.bbr-promise-title { font: 800 clamp(2.2rem, 4.4vw, 3.6rem)/1.02 var(--bbr-display); letter-spacing: -.035em; color: var(--bbr-red) !important; margin: 0 !important; }
.bbr-promise-title span { color: var(--bbr-fg); }
.bbr-pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bbr-pillars li { padding: 18px 0; border-top: 1px solid var(--bbr-line); margin: 0; }
.bbr-pillars li:last-child { border-bottom: 1px solid var(--bbr-line); }
.bbr-pillars li::before { content: none; }
.bbr-pillars h3 { font-size: 1.15rem; font-weight: 700; }
.bbr-pillars p { margin-top: 4px; color: var(--bbr-muted); }

/* Derniers titres */
.bbr-tracks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 720px) { .bbr-tracks { grid-template-columns: 1fr; } }
.bbr-tracks li { display: grid; grid-template-columns: 50px 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bbr-line); margin: 0; }
.bbr-tracks li::before { content: none; }
.bbr-hr { font-family: var(--bbr-mono); font-size: .85rem; color: var(--bbr-muted); font-variant-numeric: tabular-nums; }
.bbr-cover { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; font: 800 .75rem var(--bbr-display); color: #fff; background: #2e2d3a center / cover no-repeat; }
.bbr-who { min-width: 0; display: block; }
.bbr-who-t { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbr-who-a { display: block; color: var(--bbr-muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbr-year { font-family: var(--bbr-mono); font-size: .78rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--bbr-line); color: var(--bbr-muted); }
.bbr-onair .bbr-year { border-color: var(--bbr-band-line); color: var(--bbr-band-muted); }
.bbr .bbr-n90 { background: var(--bbr-red); border-color: var(--bbr-red); color: var(--bbr-on-red); font-weight: 700; }

/* Grille */
.bbr-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; }
.bbr-days button { font: 600 .9rem var(--bbr-body); border: 1px solid var(--bbr-line); background: var(--bbr-surface); color: var(--bbr-fg); border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap; line-height: 1.3; }
.bbr-days button[aria-selected="true"] { background: var(--bbr-fg); color: var(--bbr-bg); border-color: var(--bbr-fg); }
.bbr-schedule { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bbr-schedule li { display: grid; grid-template-columns: 120px 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--bbr-surface); border: 1px solid var(--bbr-line); border-radius: var(--bbr-radius); padding: 12px 18px; margin: 0; }
.bbr-schedule li::before { content: none; }
@media (max-width: 560px) { .bbr-schedule li { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; } .bbr-schedule .bbr-slot { grid-column: 1 / -1; } .bbr-schedule .bbr-badge { grid-column: 2; justify-self: start; } }
.bbr-slot { font-family: var(--bbr-mono); font-size: .88rem; color: var(--bbr-muted); font-variant-numeric: tabular-nums; }
.bbr-thumb { width: 56px; height: 56px; border-radius: 10px; background: var(--bbr-bg) center / cover no-repeat; }
.bbr-schedule h3 { font-size: 1rem; font-weight: 700; }
.bbr-schedule p { margin-top: 2px; color: var(--bbr-muted); font-size: .92rem; }
.bbr-schedule li.bbr-now { border-color: var(--bbr-red); box-shadow: inset 4px 0 0 var(--bbr-red); }
.bbr-badge { font: 700 .72rem var(--bbr-mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.bbr-badge-now { background: var(--bbr-red); color: #fff; }
.bbr-badge-90 { background: var(--bbr-red); color: var(--bbr-on-red); }

/* Écouter partout */
.bbr-anywhere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .bbr-anywhere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .bbr-anywhere { grid-template-columns: 1fr; } }
.bbr-store { display: flex; gap: 14px; align-items: center; background: var(--bbr-surface); border: 1px solid var(--bbr-line); border-radius: var(--bbr-radius); padding: 16px; }
.bbr-store:hover { border-color: var(--bbr-fg); }
.bbr-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--bbr-fg); color: var(--bbr-bg); display: grid; place-items: center; flex: none; }
.bbr-ic svg { width: 22px; height: 22px; }
.bbr-store small { display: block; color: var(--bbr-muted); font-size: .8rem; }
.bbr-store strong { font-size: 1rem; }

/* Podcasts et articles */
.bbr-pods { display: flex; flex-wrap: wrap; gap: 10px; }
.bbr-pod { border: 1px solid var(--bbr-line); background: var(--bbr-surface); border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: .95rem; }
.bbr-pod:hover { border-color: var(--bbr-red); color: var(--bbr-red) !important; }
.bbr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .bbr-cards { grid-template-columns: 1fr; } }
.bbr-card { display: grid; gap: 10px; }
.bbr-img { display: grid; place-items: end start; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--bbr-radius); padding: 12px; background: linear-gradient(135deg, var(--bbr-red), #ff8a3d) center / cover no-repeat; }
.bbr-tag { font: 700 .7rem var(--bbr-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bbr-fg); background: var(--bbr-red); border-radius: 999px; padding: 4px 10px; }
.bbr-card-t { font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.bbr-card:hover .bbr-card-t { text-decoration: underline; }

/* Mini-lecteur mobile */
.bbr-mini { display: none; }
@media (max-width: 720px) {
	.bbr-mini { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; align-items: center; gap: 12px; background: var(--bbr-band); color: var(--bbr-band-fg);
		border-top: 1px solid var(--bbr-band-line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
	.bbr-mini .bbr-t { font-size: .88rem; }
	.bbr-mini button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bbr-red); color: var(--bbr-on-red); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
	.bbr { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .bbr *, .bbr *::before, .bbr *::after { animation: none !important; transition: none !important; } }

/* Rouge plus lumineux sur fond sombre, pour la lisibilité */
.bbr-h1 em, .bbr-live, .bbr-time, .bbr-tagline span { color: var(--bbr-red-bright); }
.bbr-eq b { background: var(--bbr-red-bright); }
.bbr-tagline { font: 700 clamp(1.15rem, 2.2vw, 1.5rem)/1.2 var(--bbr-display); color: var(--bbr-band-fg); margin-top: 10px !important; letter-spacing: -.01em; }
.bbr-show-art { color: var(--bbr-on-red); }