/* ==========================================================================
   FunkyBreslev — LECTEUR RADIO (refonte 2026) — feuille dédiée, partagée FR+EN
   --------------------------------------------------------------------------
   Parti pris : « console de broadcast ». La pochette est la scène (vinyle qui
   dépasse à droite, croissant de lumière ambre à gauche), le bouton lecture
   est une pastille translucide centrée sur la pochette, et les informations
   du morceau restent compactes pour préserver la hauteur mobile.
   Réutilise les tokens globaux (--bg/--ink/--muted/--gold/--line/--ease-out)
   définis dans home-fr.css / home-en.css (à charger AVANT cette feuille).
   Logique inchangée : toute la mécanique vit dans js/radio-player.js, qui
   pilote les classes .playing / .loading / .error / .activated / .is-changing
   et les IDs #radioCard #coverPlay #playIcon #playLabel #track #radioStatus
   #radioNext #miniPlayer — tous conservés.
   ========================================================================== */

/* --- En-tête de section --------------------------------------------------- */
.radio { padding: 34px 0 64px; }
.radio-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin-bottom: 16px; padding: 0 8px;
}
.radio-eyebrow {
  margin: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
.radio-eyebrow b { color: var(--gold); font-weight: 800; }
.radio-catalogue {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.radio-catalogue strong { color: var(--gold); font-weight: 800; }

/* --- Coque ----------------------------------------------------------------- */
.radio-card {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: minmax(310px, .8fr) minmax(0, 1.55fr);
  gap: clamp(42px, 6vw, 110px); align-items: center;
  min-height: 448px; padding: clamp(38px, 5vw, 76px) clamp(30px, 5.5vw, 82px); overflow: hidden;
  background:
    radial-gradient(680px 460px at 83% 4%, rgba(232, 169, 59, .16), transparent 58%),
    radial-gradient(520px 520px at 5% 115%, rgba(232, 169, 59, .08), transparent 68%),
    linear-gradient(112deg, #111114, #09090b 52%, #130d06);
  border-top: 1px solid rgba(232, 169, 59, .48);
  border-bottom: 1px solid rgba(245, 243, 238, .12);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .5);
  transition: border-color .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
/* Desktop : plus de respiration entre la scène et les informations, avec une
   pochette légèrement amplifiée. Les titres longs composent naturellement sur
   deux lignes : le morceau reste une information immédiatement lisible. */
@media (min-width: 1025px) {
  .radio-card {
    grid-template-columns: minmax(360px, .82fr) minmax(0, 1.45fr);
    gap: clamp(70px, 8vw, 150px);
    min-height: 530px;
    padding: 66px clamp(52px, 6.5vw, 106px) 74px;
  }
  .radio-stage { width: min(100%, 430px); height: auto; aspect-ratio: 1; }
  .radio-body { padding: 2px 0 0; }
  .radio-live { gap: 12px; }
  .radio-title { margin-top: 22px; font-size: clamp(52px, 4.8vw, 78px); }
  .radio-foot { margin-top: 28px; padding-top: 17px; }
}
/* Halo diffus repris de la pochette en cours (ambiance « salle d'écoute »). */
.radio-card:before {
  content: ""; position: absolute; inset: -90px; z-index: -1; opacity: .16;
  background-image:
    radial-gradient(circle at 78% 16%, rgba(232, 169, 59, .8), transparent 32%),
    var(--art, none);
  background-position: center; background-size: cover; filter: blur(26px);
}
.radio-card:after {
  content: "24 / 7"; position: absolute; right: clamp(24px, 4vw, 72px); bottom: -15px;
  z-index: -1; color: rgba(232, 169, 59, .075); font: 900 clamp(90px, 15vw, 230px)/.72 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.055em; pointer-events: none;
}
.radio-card audio { display: none; }
/* En lecture : liseré plus présent + lueur externe douce qui respire (lente). */
.radio-card.playing {
  border-color: rgba(232, 169, 59, .45);
  animation: card-glow 6s ease-in-out infinite 1s;
}
@keyframes card-glow {
  0%, 100% { box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(245, 243, 238, .06); }
  50%      { box-shadow: 0 30px 74px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(245, 243, 238, .06), 0 0 54px -10px rgba(232, 169, 59, .4); }
}

/* --- Scène : vinyle + pochette + LE ROND JAUNE ----------------------------- */
.radio-stage { position: relative; width: 100%; height: auto; aspect-ratio: 1; }
/* Vinyle : glissé derrière la pochette, ne dépasse que par la DROITE (~11 %).
   Ne tourne qu'en lecture (clin d'œil funk). */
.radio-disc {
  position: absolute; top: 0; left: auto; right: -11%; width: 100%; height: 100%; z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, #241a0b 0 12.5%, #0c0c0e 12.5% 13.5%, transparent 14%),
    repeating-radial-gradient(circle, #050506 0 3px, #101014 3px 5px);
  box-shadow: inset 0 0 0 1px rgba(232, 169, 59, .16), 0 32px 60px rgba(0, 0, 0, .58);
  animation: spin 13s linear infinite; animation-play-state: paused;
}
.radio-card.playing .radio-disc { animation-play-state: running; }

/* LE ROND JAUNE — signature identitaire, version raffinée. Disque de lumière
   compact qui ENTRE en glissant depuis la gauche (le vinyle répond à droite)
   + anneau hairline concentrique qui s'allume. Apparition 800 ms, respiration
   lente 6 s. Derrière pochette et vinyle (z-index 0) : seule la périphérie
   affleure — un détail graphique, pas un décor. */
.radio-stage::before {
  content: ""; position: absolute; z-index: 0; inset: -8%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    rgba(232, 169, 59, .32) 0%,
    rgba(232, 169, 59, .21) 44%,
    rgba(232, 169, 59, .08) 72%,
    rgba(232, 169, 59, 0) 100%);
  opacity: 0; transform: translate(-6%, 0) scale(.9);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.radio-stage::after {
  content: ""; position: absolute; z-index: 0; inset: -2.5%;
  border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(232, 169, 59, .38);
  box-shadow: 0 0 22px -4px rgba(232, 169, 59, .35), inset 0 0 14px -6px rgba(232, 169, 59, .3);
  opacity: 0; transform: scale(.96);
  transition: opacity .8s var(--ease-out) .1s, transform .8s var(--ease-out) .1s;
}
.radio-card.playing .radio-stage::before {
  opacity: 1; transform: translate(0, 0) scale(1);
  animation: halo-breathe 6s ease-in-out infinite 1s;
}
.radio-card.playing .radio-stage::after { opacity: 1; transform: scale(1); }
@keyframes halo-breathe {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}
/* --- Pochette --------------------------------------------------------------- */
.radio-cover {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 30px 58px rgba(0, 0, 0, .58), 0 0 0 1px rgba(var(--cover-accent, 232, 169, 59), .48);
  transition: transform .5s var(--ease-out), filter .45s var(--ease-out), box-shadow .5s var(--ease-out);
}
.radio-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .4s ease; }
/* En lecture : liseré accent + très léger halo, même tempo que le rond jaune. */
.radio-card.playing .radio-cover { animation: cover-breathe 6s ease-in-out infinite 1s; }
@keyframes cover-breathe {
  0%, 100% { box-shadow: 0 22px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--cover-accent, 232, 169, 59), .5); }
  50%      { box-shadow: 0 24px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--cover-accent, 232, 169, 59), .95), 0 0 30px -6px rgba(var(--cover-accent, 232, 169, 59), .35); }
}
/* Changement de morceau : flou + zoom qui masquent le remplacement d'image. */
.radio-cover.is-changing { filter: blur(7px); transform: scale(.97); }
.radio-cover.is-changing img { opacity: .55; }

/* Une action lisible, séparée de la pochette : on sait quoi faire avant même
   de comprendre le visuel. Le bouton reste stable, seuls son libellé et son
   icône changent suivant l'état réel du flux. */
.radio-action {
  width: 100%; min-height: 78px; margin-top: 34px; padding: 0;
  border: 1px solid rgba(232, 169, 59, .82); border-radius: 0;
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: stretch;
  background: var(--gold); color: #0d0b06; cursor: pointer;
  font: 900 13px 'Plus Jakarta Sans', sans-serif; letter-spacing: .13em; text-transform: uppercase; text-align: left;
  box-shadow: 0 20px 38px rgba(0, 0, 0, .36), 0 0 34px -12px rgba(232, 169, 59, .62);
  transition: transform .25s var(--ease-out), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.radio-action-icon { position: relative; display: grid; place-items: center; border-right: 1px solid rgba(13, 11, 6, .34); }
.radio-action svg { width: 23px; height: 23px; fill: currentColor; margin-left: 2px; }
.radio-action-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 20px; }
.radio-action #playLabel { font-size: 13px; line-height: 1.1; }
.radio-action-copy small { color: rgba(13, 11, 6, .66); font: 700 9px/1.1 'Plus Jakarta Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.radio-action-air { align-self: stretch; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-left: 1px solid rgba(13, 11, 6, .34); font-size: 9px; letter-spacing: .17em; }
.radio-action-air i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(13, 11, 6, .45); }
.radio-action:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.radio-action:active:not(:disabled) { transform: translateY(2px); }
.radio-action:hover:not(:disabled) { background: #f3c15f; border-color: #f3c15f; box-shadow: 0 24px 42px rgba(0, 0, 0, .42), 0 0 46px -10px rgba(232, 169, 59, .74); }
.radio-card.playing .radio-action { background: #12100c; color: var(--gold); border-color: var(--gold); }
.radio-card.playing .radio-action-icon, .radio-card.playing .radio-action-air { border-color: rgba(232, 169, 59, .34); }
.radio-card.playing .radio-action-copy small { color: rgba(232, 169, 59, .72); }
.radio-card.playing .radio-action-air i { animation: on-air-pulse 1.8s ease-out infinite; }
.radio-action:disabled { cursor: wait; opacity: .72; }
.radio-card.loading .radio-action svg { opacity: 0; }
.radio-card.loading .radio-action::before { content: none; }
.radio-card.loading .radio-action-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(232, 169, 59, .22);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: radio-control-spin .8s linear infinite;
}
@keyframes on-air-pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 169, 59, .6); } 70%,100% { box-shadow: 0 0 0 8px rgba(232, 169, 59, 0); } }

/* --- État « Connexion… » : la pastille devient anneau de chargement --------- */
.radio-card.loading .radio-cover { filter: brightness(.8); }
/* Balayage lumineux qui traverse la pochette pendant la connexion. */
.radio-card.loading .radio-cover::before {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(232, 169, 59, .3) 50%, transparent 68%);
  transform: translateX(-100%);
  animation: radio-shimmer 1.35s ease-in-out infinite;
}
@keyframes radio-spin { to { transform: rotate(360deg); } }
@keyframes radio-control-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes radio-shimmer { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
/* --- Corps : 4 zones, hiérarchie descendante --------------------------------
   ① identité (pilule En direct + nom de la radio)
   ② titre du morceau (héro typographique)
   ③ méta (album/single + statuts)
   ④ onde audio pleine largeur + pied (état · up next) ---------------------- */
.radio-body { min-width: 0; display: flex; flex-direction: column; }
.radio-live { display: flex; align-items: center; gap: 15px; }
.live {
  display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0;
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
}
.dot {
  width: 6px; height: 6px; margin-right: 8px; border-radius: 50%;
  background: var(--gold); animation: pulse-dot 2s ease-out infinite;
}
.radio-title {
  position: relative; margin-top: 20px;
  padding-top: .06em;
  font: 400 clamp(46px, 5.2vw, 78px)/1.02 'Plus Jakarta Sans', Impact, sans-serif;
  letter-spacing: -.025em;
  display: -webkit-box; overflow: hidden;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal;
}
.radio-title-text { display: inline; }
.radio-meta {
  min-width: 0; padding: 0 0 0 15px; border-left: 1px solid rgba(232, 169, 59, .38);
  color: rgba(245, 243, 238, .62); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* --- Pied de carte : informations secondaires ------------------------------- */
.radio-foot {
  display: flex; align-items: center; gap: 22px;
  margin-top: 27px; padding-top: 16px;
  border-top: 1px solid rgba(245, 243, 238, .16);
}
.radio-next {
  flex: 1; min-width: 0; text-align: right;
  color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.radio-next b { color: var(--gold); font-weight: 700; }

/* État erreur : pochette désaturée, message tinté (textes gérés en JS). */
.radio-card.error .radio-cover { filter: grayscale(.7) brightness(.72); }
.radio-card.error .radio-meta { color: #e5a9a0; }

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(232, 169, 59, .5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(232, 169, 59, 0); }
}

/* --- Mini-player collant ----------------------------------------------------- */
.mini-player {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 18px;
  background: rgba(16, 15, 18, .82); backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(232, 169, 59, .25);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .52);
  transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none;
  transition: transform .42s var(--ease-out), opacity .3s ease;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.mini-player.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mini-cover {
  width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(232, 169, 59, .35);
}
.mini-eq { display: none; align-items: center; gap: 2.5px; height: 14px; flex: 0 0 auto; }
.mini-player.playing .mini-eq { display: flex; }
.mini-eq i {
  width: 2.5px; height: 100%; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(232, 169, 59, .4));
  opacity: .9; transform: scaleY(.3); transform-origin: center;
  animation: chip-wave 820ms var(--ease-out) infinite alternate;
}
.mini-eq i:nth-child(2) { animation-duration: 1120ms; animation-delay: -160ms; }
.mini-eq i:nth-child(3) { animation-duration: 700ms;  animation-delay: -90ms; }
.mini-player.playing .mini-cover { animation: mini-breathe 3.4s ease-in-out infinite; }
@keyframes mini-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232, 169, 59, .35); }
  50%      { box-shadow: 0 0 0 1px rgba(232, 169, 59, .6), 0 0 16px 1px rgba(232, 169, 59, .3); }
}
@keyframes chip-wave { from { transform: scaleY(.28); } to { transform: scaleY(1); } }
.mini-info { min-width: 0; flex: 1; }
.mini-title { font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-sub { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.mini-play {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #0d0b06; cursor: pointer;
  transition: transform .16s var(--ease-out);
}
.mini-play svg { width: 18px; height: 18px; fill: currentColor; }
.mini-play:active { transform: scale(.94); }
/* Desktop/tablette : le mini-player devient une capsule compacte en bas à droite. */
@media (min-width: 761px) { .mini-player { left: auto; right: 24px; bottom: 24px; width: 370px; } }
/* --- Responsive ---------------------------------------------------------------
   Desktop (>1024) : composition riche. Tablette (761–1024) : même composition
   resserrée. Mobile (≤760) : pile centrée dédiée, infos secondaires retirées. */
@media (max-width: 1024px) and (min-width: 761px) {
  .radio-card { grid-template-columns: 260px minmax(0, 1fr); gap: 42px; padding: 40px 44px; }
  .radio-stage { width: 260px; height: 260px; }
  .radio-title { font-size: clamp(30px, 4.4vw, 44px); }
  .radio-catalogue { display: none; }
  .radio-action { min-height: 64px; margin-top: 24px; grid-template-columns: 64px minmax(0, 1fr) auto; }
}

@media (max-width: 760px) {
  /* --- Composition mobile : « pochette héro » -------------------------------
     La jaquette reste entière, carrée et devient le point focal du lecteur.
     Le titre compose librement sur deux lignes afin de ne jamais devenir un
     effet défilant ou une information tronquée. */
  /* Bas resserré : le disque tournant (home-*.css) vient occuper une partie de
     cet espace entre la radio et le Premium, pas s'ajouter par-dessus. Marge
     symétrique avec le haut du Premium (12px de chaque côté du disque, 53px). */
  .radio { padding: 22px 0 12px; }
  .radio > .wrap { width: 100%; }
  .radio-head { margin-bottom: 12px; padding: 0 18px; }
  .radio-catalogue { display: none; }


  .radio-card {
    display: block;
    min-height: 0; padding: 28px 18px 24px;
    text-align: left;
  }
  .radio-body { display: flex; min-width: 0; }

  .radio-stage {
    width: min(100%, 352px); height: auto; aspect-ratio: 1;
    margin: 0 auto;
  }
  .radio-stage::before { inset: -8%; }
  .radio-disc { right: -11%; }
  .radio-cover { border-radius: 2px; }
  .radio-action { width: 100%; min-width: 0; min-height: 70px; margin-top: 25px; grid-template-columns: 62px minmax(0, 1fr) auto; font-size: 10px; }
  .radio-action-copy { padding: 0 14px; }
  .radio-action #playLabel { font-size: 11px; }
  .radio-action-air { padding: 0 12px; font-size: 0; }
  .radio-action-air i { width: 8px; height: 8px; }

  .radio-live { margin-top: 25px; gap: 10px; }
  .radio-title {
    width: 100%; margin-top: 13px;
    font-size: clamp(38px, 11vw, 48px); line-height: 1.02;
  }
  .radio-meta { font-size: 9.5px; padding: 5px 8px; letter-spacing: .06em; }

  .radio-foot {
    display: flex; align-items: center;
    margin-top: 22px; padding-top: 15px;
  }
  .radio-next {
    display: block; text-align: right;
    margin-top: 0; white-space: nowrap;
  }
}

/* --- Mouvement réduit : tout indicateur reste LISIBLE, figé ------------------ */
@media (prefers-reduced-motion: reduce) {
  .radio-disc, .mini-eq i, .dot { animation: none !important; }
  .radio-card.playing,
  .radio-card.playing .radio-cover,
  .mini-player.playing .mini-cover,
  .radio-card.playing .radio-stage::before,
  .radio-card.playing .radio-stage::after { animation: none; }
  .radio-card.playing {
    border-color: rgba(232, 169, 59, .45);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 50px -10px rgba(232, 169, 59, .4), inset 0 1px 0 rgba(245, 243, 238, .06);
  }
  .radio-card.playing .radio-cover {
    box-shadow: 0 22px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--cover-accent, 232, 169, 59), .9), 0 0 26px -6px rgba(var(--cover-accent, 232, 169, 59), .3);
  }
  .radio-card.playing .radio-stage::before { opacity: .9; transform: translate(0, 0) scale(1); }
  .radio-card.playing .radio-stage::after { opacity: 1; transform: scale(1); }
  .radio-action { transition: opacity .2s ease, background .2s ease; }
  .radio-action:active:not(:disabled) { transform: none; }
  .radio-cover, .mini-player { transition: opacity .2s ease; }
  .radio-cover.is-changing { filter: none; transform: none; }
  .radio-card.loading .radio-action::before { animation: none; }
  .radio-card.playing .radio-action-air i { animation: none; box-shadow: 0 0 0 3px rgba(232, 169, 59, .24); }
  .radio-card.loading .radio-cover::before { animation: none; opacity: 0; }
}





/* Volume réel du flux : l'onde reste un indicateur d'activité, cette commande
   agit réellement sur le niveau sonore de l'élément audio. */
.radio-foot { align-items: center; }
.radio-volume { --volume: 82%; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 132px; color: var(--muted); }
.radio-volume svg { width: 17px; height: 17px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.radio-volume input { width: 100%; height: 28px; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background: transparent; }
.radio-volume input::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--gold) 0 var(--volume), rgba(245, 243, 238, .18) var(--volume) 100%); }
.radio-volume input::-moz-range-track { height: 3px; border-radius: 99px; background: rgba(245, 243, 238, .18); }
.radio-volume input::-moz-range-progress { height: 3px; border-radius: 99px; background: var(--gold); }
.radio-volume input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 2px solid #0e0e11; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px rgba(232, 169, 59, .35); }
.radio-volume input::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #0e0e11; border-radius: 50%; background: var(--gold); }
.radio-volume input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 99px; }

@media (max-width: 760px) {
  .radio-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
  .radio-next { grid-column: 2; }
  .radio-volume { grid-column: 1 / -1; width: 100%; flex-basis: auto; }
  .radio-volume input { flex: 1; }
}

/* Desktop : la commande doit être reconnue comme un contrôle média avant
   d'être lue comme une ligne d'information. La pastille sombre isole l'action
   de lecture, tandis que le libellé garde le contexte de la radio. */
@media (min-width: 1024px) {
  .radio-action {
    min-height: 94px;
    grid-template-columns: 92px minmax(0, 1fr);
    border-radius: 0;
  }
  .radio-action-icon {
    margin: 12px;
    border-right: 0;
    border-radius: 50%;
    background: #0d0b06;
    color: var(--gold);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
  }
  .radio-action svg { width: 28px; height: 28px; }
  .radio-action-copy { padding: 0 8px; gap: 7px; }
  .radio-action #playLabel { font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
  .radio-action-copy small { font-size: 10px; }
  .radio-action-air { display: none; }
  .radio-card.playing .radio-action-icon {
    background: var(--gold);
    color: #0d0b06;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .32);
  }
}