/* ============================================================
   Radio du Repère (30 septembre) — voir public/radio.js
   Bouton du bandeau, panneau déroulant, page /radio et fenêtre détachée.
   ============================================================ */
.lr-invisible-radio { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Bouton du bandeau ---- */
.radio-bandeau { position: relative; flex: none; }
.radio-bouton {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 34px; padding: 0 9px; border-radius: 999px; cursor: pointer;
  color: var(--texte); border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .2s ease, box-shadow .2s ease, background .3s ease, padding .25s ease;
}
.radio-bouton:hover, .radio-bandeau.ouvert .radio-bouton { border-color: rgba(var(--violet-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), .12); }
.radio-bouton:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.radio-bouton-icone { display: inline-flex; }
.radio-bouton-icone svg { width: 17px; height: 17px; }
.radio-bouton .radio-egaliseur, .radio-bouton-nom:empty { display: none; }
.radio-bouton-nom { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; }
.radio-bouton-actif { padding: 0 12px 0 9px; color: #fff; border-color: transparent; background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 8px 20px -10px rgba(217, 70, 239, .9); }
.radio-bouton-actif .radio-bouton-icone { display: none; }
.radio-bouton-actif .radio-egaliseur { display: inline-flex; }
.radio-bouton-reprendre { border-color: rgba(var(--violet-rgb), .7); animation: radio-pulse 1.6s ease-in-out infinite; }
@keyframes radio-pulse { 50% { box-shadow: 0 0 0 5px rgba(var(--violet-rgb), .22); } }

/* Égaliseur animé */
.radio-egaliseur { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 14px; flex: none; }
.radio-egaliseur i { flex: 1; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: radio-barre .9s ease-in-out infinite; }
.radio-egaliseur i:nth-child(2) { animation-delay: -.3s; }
.radio-egaliseur i:nth-child(3) { animation-delay: -.6s; }
@keyframes radio-barre { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ---- Panneau ---- */
.radio-panneau {
  position: absolute; z-index: 1300; top: calc(100% + 10px); right: 0; width: 400px; max-height: min(78vh, 720px); display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden; color: var(--texte); background: rgba(var(--surface-rgb), .97); border: 1px solid var(--bordure);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(var(--violet-rgb), .08);
  transform-origin: top right; animation: radio-entree .2s cubic-bezier(.2, .8, .2, 1) both;
}
.radio-panneau[hidden] { display: none; }
@keyframes radio-entree { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.radio-tete { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 16px; }
.radio-tete-icone { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 8px 18px -8px rgba(217, 70, 239, .9); }
.radio-tete-textes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.radio-tete-textes strong { font-size: 16px; font-weight: 900; }
.radio-tete-textes span { font-size: 12px; color: var(--texte-doux); }
.radio-icone-bouton { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 0; cursor: pointer; color: var(--texte-doux); background: transparent; transition: background .15s, color .15s; }
.radio-icone-bouton:hover, .radio-icone-bouton:focus-visible { color: var(--texte); background: rgba(var(--violet-rgb), .12); }

/* Scène « en cours » */
.radio-scene {
  --h: 270; position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  margin: 0 12px 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--bordure);
  background: linear-gradient(135deg, hsl(var(--h) 70% 50% / .22), transparent 70%), rgba(var(--fond-rgb), .55);
}
.radio-scene-fond { position: absolute; inset: -40%; z-index: -1; background: radial-gradient(circle at 20% 30%, hsl(var(--h) 85% 60% / .35), transparent 55%); filter: blur(20px); opacity: .6; transition: opacity .4s; }
.radio-scene-active .radio-scene-fond { opacity: 1; animation: radio-halo 6s ease-in-out infinite; }
@keyframes radio-halo { 50% { transform: translate(8%, 6%) scale(1.1); } }
.radio-scene-erreur { border-color: rgba(239, 68, 68, .45); }
.radio-scene-attente { display: block; }
.radio-scene-vide { display: flex; align-items: center; gap: 12px; color: var(--texte-doux); font-size: 13.5px; }
.radio-scene-vide svg { flex: none; color: var(--violet); }
.radio-scene-vide p { margin: 0; }
.radio-scene-vide strong { color: var(--texte); }
.radio-scene-infos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.radio-scene-nom { font-size: 16px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-scene-infos small { font-size: 12px; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-etat:empty { display: none; }
.radio-scene-erreur .radio-etat { color: #f87171; white-space: normal; }
.radio-direct { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.radio-direct i { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-doux); }
.radio-direct.actif { color: #ff3b5c; }
.radio-direct.actif i { background: #ff3b5c; box-shadow: 0 0 0 0 rgba(255, 59, 92, .6); animation: radio-point 1.6s ease-out infinite; }
@keyframes radio-point { 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 59, 92, 0); } }
.radio-lecture {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 12px 26px -10px rgba(217, 70, 239, .95), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s ease, filter .2s ease;
}
.radio-lecture:hover { transform: scale(1.06); filter: brightness(1.08); }
.radio-lecture:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.radio-pulse { animation: radio-pulse 1.4s ease-in-out infinite; }
.radio-controles { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.radio-controles input[type="range"] {
  flex: 1; min-width: 60px; height: 5px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 99px; cursor: pointer; border: 0; padding: 0;
  background: linear-gradient(90deg, #a78bfa var(--p, 80%), rgba(var(--violet-rgb), .2) var(--p, 80%));
}
.radio-controles input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.radio-controles input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.radio-qualite { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: var(--texte-doux); background: rgba(var(--violet-rgb), .1); }
.radio-favori.actif, .radio-ligne-favori.actif { color: #fbbf24; }

/* Pochettes (logo relayé par le serveur, sinon monogramme coloré) */
.radio-pochette { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; background: rgba(var(--fond-rgb), .6); }
.radio-pochette-grande { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); }
.radio-pochette-petite { width: 38px; height: 38px; border-radius: 11px; }
.radio-pochette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.radio-mono { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 900; font-size: 14px; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 55%), hsl(calc(var(--h) + 40) 75% 38%)); }
.radio-pochette-grande .radio-mono { font-size: 20px; }

/* Recherche, onglets, genres */
.radio-recherche { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 0 12px; height: 40px; border-radius: 12px; color: var(--texte-doux); background: rgba(var(--fond-rgb), .6); border: 1px solid var(--bordure); }
.radio-recherche:focus-within { border-color: rgba(var(--violet-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), .15); }
.radio-recherche input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; outline: none; background: transparent !important; color: var(--texte); font: inherit; font-size: 14px; box-shadow: none !important; }
.radio-onglets { display: flex; gap: 4px; margin: 0 12px 8px; padding: 4px; border-radius: 12px; background: rgba(var(--fond-rgb), .5); border: 1px solid var(--bordure); }
.radio-onglets button { flex: 1; padding: 7px 6px; border: 0; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; color: var(--texte-doux); background: transparent; transition: background .2s, color .2s; }
.radio-onglets button[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 6px 14px -8px rgba(217, 70, 239, .9); }
.radio-familles { display: flex; gap: 6px; margin: 0 12px 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.radio-familles::-webkit-scrollbar { display: none; }
.radio-familles:empty { display: none; }
.radio-puce { flex: none; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--texte-doux); background: rgba(var(--surface-rgb), .8); border: 1px solid var(--bordure); transition: all .15s; }
.radio-puce:hover { color: var(--texte); border-color: rgba(var(--violet-rgb), .5); }
.radio-puce.actif { color: var(--texte); background: rgba(var(--violet-rgb), .18); border-color: rgba(var(--violet-rgb), .6); }

/* Liste */
.radio-liste { flex: 1; min-height: 120px; margin: 0; padding: 4px 8px 8px; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.radio-ligne {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 12px; cursor: pointer; text-align: left;
  font: inherit; color: var(--texte); background: transparent; transition: background .15s;
}
.radio-ligne:hover, .radio-ligne:focus-visible { background: rgba(var(--violet-rgb), .1); outline: none; }
.radio-ligne.courante { background: rgba(var(--violet-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--violet-rgb), .35); }
.radio-ligne-textes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.radio-ligne-textes strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-ligne-textes small { font-size: 11.5px; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-ligne .radio-egaliseur { color: #d946ef; }
.radio-ligne-favori { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--texte-doux); opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.radio-ligne:hover .radio-ligne-favori, .radio-ligne-favori.actif, .radio-ligne:focus-visible .radio-ligne-favori { opacity: 1; }
.radio-ligne-favori:hover { background: rgba(var(--violet-rgb), .16); color: #fbbf24; }
.radio-ligne-jouer { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(var(--violet-rgb), .5); opacity: 0; transition: opacity .15s; }
.radio-ligne:hover .radio-ligne-jouer, .radio-ligne.courante .radio-ligne-jouer { opacity: 1; }
.radio-ligne.courante .radio-ligne-jouer { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.radio-vide { display: flex; align-items: center; gap: 8px; padding: 18px 10px; font-size: 13px; color: var(--texte-doux); }
.radio-plus, .radio-lien { width: 100%; margin-top: 6px; padding: 9px; border-radius: 10px; border: 1px dashed rgba(var(--violet-rgb), .4); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--texte); background: rgba(var(--violet-rgb), .06); }
.radio-lien { width: auto; margin: 0; padding: 4px 10px; }
.radio-note { margin: 0; padding: 8px 14px 12px; font-size: 11px; color: var(--texte-doux); border-top: 1px solid var(--bordure); }
.radio-note a { color: var(--texte-doux); }
.radio-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: radio-tourne .8s linear infinite; }
.radio-vide .radio-spinner { width: 16px; height: 16px; border-color: rgba(var(--violet-rgb), .3); border-top-color: var(--violet); }
@keyframes radio-tourne { to { transform: rotate(360deg); } }

/* Mobile : panneau en feuille du bas, pleine largeur */
@media (max-width: 640px) {
  .radio-panneau { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 86vh; border-radius: 22px 22px 0 0; transform-origin: bottom center; padding-bottom: env(safe-area-inset-bottom); }
  .radio-seulement-large { display: none; }
  .radio-bouton-nom { max-width: 90px; }
  .radio-ligne-favori { opacity: 1; }
}

/* ---- Page /radio et fenêtre détachée ---- */
.radio-page {
  position: relative; display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--bordure); background: rgba(var(--surface-rgb), .9); box-shadow: 0 30px 70px -40px rgba(var(--violet-rgb), .7);
}
.radio-page .radio-liste { max-height: none; }
.radio-page .radio-scene { margin: 0 16px 12px; padding: 20px; }
.radio-page .radio-pochette-grande { width: 88px; height: 88px; border-radius: 22px; }
.radio-page .radio-scene-nom { font-size: 20px; }
.radio-page .radio-lecture { width: 62px; height: 62px; }
body.radio-detache { margin: 0; min-height: 100vh; background: var(--fond); }
body.radio-detache .radio-page { max-width: none; height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
body.radio-detache .radio-liste { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .radio-egaliseur i, .radio-scene-active .radio-scene-fond, .radio-direct.actif i, .radio-pulse, .radio-bouton-reprendre, .radio-panneau { animation: none !important; }
  .radio-egaliseur i { transform: scaleY(.7); }
}

/* Les blocs du haut gardent leur taille ; seule la liste défile. */
.radio-panneau > :not(.radio-liste), .radio-page > :not(.radio-liste) { flex-shrink: 0; }
.radio-panneau .radio-liste { min-height: 0; }
/* Place du bouton Radio dans le bandeau : recherche un peu plus étroite dès 1301 px (au-dessous, elle est
   déjà repliée en loupe, voir style.css) ; le bandeau plafonne à 1 400 px : même contrainte sur les grands écrans. */
@media (min-width: 1301px) {
  .recherche-bandeau { flex: 0 1 190px; }
  .recherche-bandeau-raccourci { display: none; } /* Ctrl K reste actif (palette de commandes) */
  .bandeau-tabs { flex-wrap: nowrap; min-width: 0; }
}

/* ---- Coquille d'écoute (1er octobre) : la fenêtre ne garde que le cadre où s'ouvrent les pages (voir radio.js) ---- */
html.lr-coquille, html.lr-coquille body { height: 100%; margin: 0; padding: 0; overflow: hidden; background: var(--fond); }
html.lr-coquille body::before, html.lr-coquille body::after { display: none !important; }
.lr-coquille-cadre { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--fond); }