/* ==========================================================================
   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 ambre pleine ancrée à son coin, et l'onde audio court sur
   toute la largeur du bloc texte jusqu'au bord de la carte.
   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 {
  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: 300px minmax(0, 1fr);
  gap: clamp(36px, 4.5vw, 60px); align-items: center;
  padding: 38px 48px; overflow: hidden;
  background:
    radial-gradient(560px 320px at 88% 0%, rgba(232, 169, 59, .07), transparent 60%),
    linear-gradient(125deg, #17171b, #0d0d10 58%, #15100a);
  border: 1px solid rgba(232, 169, 59, .2);
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(245, 243, 238, .06);
  transition: border-color .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 restent lisibles grâce au
   défilement activé uniquement lorsqu'ils dépassent réellement. */
@media (min-width: 1025px) {
  .radio-card {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: clamp(48px, 5.5vw, 82px);
    padding: 44px 56px;
  }
  .radio-stage { width: 320px; height: 320px; }
  .radio-body { padding: 6px 0; }
  .radio-live { gap: 12px; }
  .radio-title { margin-top: 20px; font-size: clamp(38px, 4.5vw, 62px); }
  .radio-wave { height: 52px; margin-top: 28px; margin-right: -56px; }
  .radio-foot { margin-top: 26px; padding-top: 20px; }
}
/* Halo diffus repris de la pochette en cours (ambiance « salle d'écoute »). */
.radio-card:before {
  content: ""; position: absolute; inset: -90px; z-index: -1; opacity: .12;
  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 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: 300px; height: 300px; }
/* 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 22px 42px rgba(0, 0, 0, .5);
  animation: spin 6s 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: 18px; overflow: hidden; cursor: pointer;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--cover-accent, 232, 169, 59), .45);
  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); }
}
/* Survol desktop : voile discret qui signale que la pochette est cliquable. */
@media (hover: hover) and (pointer: fine) {
  .radio-cover:after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: rgba(8, 8, 10, .22); opacity: 0; transition: opacity .2s ease;
  }
  .radio-cover:hover:after { opacity: 1; }
}
/* 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; }

/* Bouton lecture/pause : pastille ambre PLEINE ancrée au coin inférieur droit.
   Toute la pochette reste la commande (handler JS sur le conteneur) — la
   pastille est le point d'ancrage visuel, focusable et clavier. */
.cover-play {
  position: absolute; z-index: 3; right: 16px; bottom: 16px;
  width: 58px; height: 58px; border-radius: 50%; padding: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; font: inherit; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: #0d0b06;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(232, 169, 59, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .3s var(--ease-out), opacity .3s var(--ease-out);
}
.cover-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 2px; }
/* En lecture : icône pause (posée par le JS), recentrée. */
.radio-card.playing .cover-play svg { margin-left: 0; }
.cover-play:active { transform: scale(.92); }
.cover-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .radio-cover:hover .cover-play {
    transform: scale(1.08);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 169, 59, .7), 0 0 26px -4px rgba(232, 169, 59, .5);
  }
}

/* --- État « Connexion… » : la pastille devient anneau de chargement --------- */
.radio-card.loading .radio-cover { filter: brightness(.8); }
.radio-card.loading .cover-play {
  background: rgba(12, 11, 14, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(232, 169, 59, .4);
}
.radio-card.loading .cover-play svg { opacity: 0; }
/* Anneau conique masqué en anneau fin → rotation parfaitement lisse. */
.radio-card.loading .cover-play::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(232, 169, 59, 0) 0deg, rgba(232, 169, 59, .15) 90deg, var(--gold) 320deg, var(--gold) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  animation: radio-spin .9s linear infinite;
}
/* Point de tête lumineux qui suit l'anneau. */
.radio-card.loading .cover-play::before {
  content: ""; position: absolute; top: 6px; left: 50%; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px 1px rgba(232, 169, 59, .8);
  transform-origin: 50% 23px; animation: radio-spin .9s linear infinite;
}
/* 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-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: 14px; }
.live {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 6px 12px 6px 10px; border-radius: 99px;
  border: 1px solid rgba(232, 169, 59, .32);
  background: rgba(232, 169, 59, .06);
  font-size: 10px; font-weight: 800; letter-spacing: .16em; 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-kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.radio-title {
  position: relative; margin-top: 16px;
  font: 400 clamp(34px, 4.6vw, 58px)/1.0 'DINCond', Impact, sans-serif;
  letter-spacing: .01em;
  overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.radio-title-text { display: inline-block; }
.radio-title::after {
  content: ""; position: absolute; top: 0; right: 0; width: 42px; height: 100%;
  background: linear-gradient(90deg, transparent, #0e0e11);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.radio-title.is-overflowing::after { opacity: 1; }
.radio-title.is-overflowing .radio-title-text {
  padding-right: 30px;
  animation: radio-title-marquee 8s ease-in-out infinite alternate;
}
@keyframes radio-title-marquee {
  0%, 17% { transform: translateX(0); }
  83%, 100% { transform: translateX(calc(-1 * var(--title-shift))); }
}
.radio-meta {
  margin-top: 8px; color: var(--muted); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- ONDE AUDIO — la bande de fréquences du lecteur -------------------------
   Onde symétrique (axe central) façon waveform studio : silhouette douce au
   repos, danse organique désynchronisée en lecture, vague de connexion pendant
   le buffering. File jusqu'au bord droit de la carte (marge négative = padding
   de la carte) et s'évanouit en masque → « signal » qui sort de la console.
   100 % transform/opacity → fluide, y compris sur mobile. */
.radio-wave {
  display: flex; align-items: center; justify-content: space-between;
  gap: 3px; height: 48px; margin-top: 24px;
  margin-right: -48px;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 99%);
          mask-image: linear-gradient(90deg, #000 86%, transparent 99%);
}
.radio-wave i {
  flex: 0 0 3px; height: 100%; border-radius: 99px;
  transform: scaleY(var(--rest, .3)); transform-origin: center;
  background: linear-gradient(180deg, rgba(232, 169, 59, .18), rgba(232, 169, 59, .9) 50%, rgba(232, 169, 59, .18));
  opacity: .45;
  transition: opacity .6s var(--ease-out);
}
/* Silhouette d'onde au repos : motif doux répété tous les 8 barreaux. */
.radio-wave i:nth-child(8n+1) { --rest: .24; }
.radio-wave i:nth-child(8n+2) { --rest: .44; }
.radio-wave i:nth-child(8n+3) { --rest: .32; }
.radio-wave i:nth-child(8n+4) { --rest: .62; }
.radio-wave i:nth-child(8n+5) { --rest: .46; }
.radio-wave i:nth-child(8n+6) { --rest: .78; }
.radio-wave i:nth-child(8n+7) { --rest: .52; }
.radio-wave i:nth-child(8n+8) { --rest: .34; }
/* Cibles de danse (variées par groupe de 4). */
.radio-wave i:nth-child(4n)   { --peak: .68; }
.radio-wave i:nth-child(4n+1) { --peak: 1;   }
.radio-wave i:nth-child(4n+2) { --peak: .52; }
.radio-wave i:nth-child(4n+3) { --peak: .84; }
/* Lecture : durées/délais désynchronisés (groupes de 5) → jamais mécanique. */
.radio-card.playing .radio-wave i { opacity: .95; animation: wave-bar 940ms var(--ease-out) infinite alternate; }
.radio-card.playing .radio-wave i:nth-child(5n)   { animation-duration: 760ms;  animation-delay: -140ms; }
.radio-card.playing .radio-wave i:nth-child(5n+1) { animation-duration: 1120ms; animation-delay: -420ms; }
.radio-card.playing .radio-wave i:nth-child(5n+2) { animation-duration: 860ms;  animation-delay: -60ms;  }
@keyframes wave-bar { from { transform: scaleY(.14); } to { transform: scaleY(var(--peak, 1)); } }
/* Connexion : vague ambre qui traverse l'onde, gauche → droite. */
.radio-card.loading .radio-wave i { opacity: .85; animation: wave-load 1.15s ease-in-out infinite; }
.radio-card.loading .radio-wave i:nth-child(8n+1) { animation-delay: -.00s; }
.radio-card.loading .radio-wave i:nth-child(8n+2) { animation-delay: -.08s; }
.radio-card.loading .radio-wave i:nth-child(8n+3) { animation-delay: -.16s; }
.radio-card.loading .radio-wave i:nth-child(8n+4) { animation-delay: -.24s; }
.radio-card.loading .radio-wave i:nth-child(8n+5) { animation-delay: -.32s; }
.radio-card.loading .radio-wave i:nth-child(8n+6) { animation-delay: -.40s; }
.radio-card.loading .radio-wave i:nth-child(8n+7) { animation-delay: -.48s; }
.radio-card.loading .radio-wave i:nth-child(8n+8) { animation-delay: -.56s; }
@keyframes wave-load { 0%, 100% { transform: scaleY(.14); } 45% { transform: scaleY(.88); } }
/* --- Pied de carte : UNE seule ligne d'infos secondaires ---------------------
   État de lecture à gauche, « up next » à droite, séparés par une hairline.
   La pochette reste l'UNIQUE commande lecture/pause (couper = pause). */
.radio-foot {
  display: flex; align-items: baseline; gap: 18px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(245, 243, 238, .08);
}
.radio-state {
  display: inline-flex; align-items: baseline; gap: 8px; flex: 0 0 auto;
  color: var(--muted);
  font: 700 11px 'MonVar', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  transition: color .2s ease;
}
/* Avant la 1re écoute, en connexion et en lecture : libellé ambre (il pointe
   vers la pastille). Erreur : tinté rouge doux (texte posé par le JS). */
.radio-card:not(.activated) .radio-state,
.radio-card.loading .radio-state,
.radio-card.playing .radio-state { color: var(--gold); }
.radio-card.error .radio-state { color: #e5a9a0; }
.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: 250px minmax(0, 1fr); gap: 34px; padding: 32px 38px; }
  .radio-stage { width: 250px; height: 250px; }
  .radio-title { font-size: clamp(30px, 4.4vw, 44px); }
  .radio-wave { height: 42px; margin-right: -38px; }
  .radio-catalogue { display: none; }
  .cover-play { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .radio-card.loading .cover-play::before { transform-origin: 50% 21px; }
}

@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 garde toute la largeur sous l'image ; s'il dépasse, le JS active
     un défilement doux du texte plutôt que de le couper. */
  .radio { padding: 22px 0 26px; }
  .radio-head { margin-bottom: 12px; padding: 0 4px; }
  .radio-catalogue { display: none; }


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

  .radio-stage {
    width: min(100%, 320px); height: auto; aspect-ratio: 1;
    margin: 0 auto;
  }
  .radio-stage::before { inset: -8%; }
  .radio-disc { right: -11%; }
  .radio-cover { border-radius: 18px; }
  .cover-play { right: 14px; bottom: 14px; width: 58px; height: 58px; }
  .cover-play svg { width: 24px; height: 24px; }
  .radio-card.loading .cover-play::before { transform-origin: 50% 23px; }

  .radio-live { margin-top: 22px; gap: 10px; }
  .radio-title {
    width: 100%; margin-top: 16px;
    overflow: hidden; white-space: nowrap;
    font-size: clamp(32px, 9vw, 42px); line-height: 1;
  }
  .radio-title::after { width: 34px; }
  .radio-title.is-overflowing .radio-title-text { padding-right: 26px; animation-duration: 7s; }
  .radio-meta { margin-top: 8px; font-size: 12px; }

  .radio-wave { height: 38px; margin-top: 22px; margin-right: -18px; gap: 2.5px; }
  .radio-wave i { flex-basis: 2.5px; }

  .radio-foot {
    display: flex; align-items: baseline;
    margin-top: 18px; padding-top: 16px;
  }
  .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-wave i { animation: none !important; transform: scaleY(.5); opacity: .9; }
  .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); }
  .cover-play { transition: opacity .2s ease, background .2s ease; }
  .cover-play:active { transform: none; }
  .radio-cover, .mini-player { transition: opacity .2s ease; }
  .radio-cover.is-changing { filter: none; transform: none; }
  .radio-card.loading .cover-play::after { animation: none; }
  .radio-card.loading .cover-play::before { animation: none; display: none; }
  .radio-card.loading .radio-cover::before { animation: none; opacity: 0; }
  .radio-card.loading .radio-wave i { animation: none !important; transform: scaleY(var(--rest, .3)); }
  .radio-title.is-overflowing .radio-title-text { animation: none; transform: none; }
}