/* ============================================================
   Radio Good News — lecteur intégré (« RGN Player »)

   L'écoute se fait sur thisisradiogoodnews.com : le flux RadioKing
   est joué par une balise Audio créée en JavaScript, jamais par le
   lecteur graphique de RadioKing ni par un <audio controls> visible.

   Ce fichier contient :
     - la remise à plat des CTA convertis en <button> ;
     - le badge « ON AIR » du héros ;
     - le mini-lecteur persistant (desktop + mobile) ;
     - le panneau d'options et le panneau d'erreur.

   Identité reprise du site : nuit #081319, orange #ff8a00,
   crème #fff7eb. Aucune dépendance, aucune police externe.
   ============================================================ */

:root{
  --rgn-player-h:66px;
  --rgn-player-night:#081319;
  --rgn-player-orange:#ff8a00;
  --rgn-player-amber:#ffd36d;
  --rgn-player-cream:#fff7eb;
  --rgn-player-dim:rgba(255,247,235,.62);
  --rgn-player-hair:rgba(255,247,235,.14);
}

/* ---------- CTA convertis en <button> ----------------------------------
   Les boutons « écouter » ne changent plus de page : ce sont des actions,
   donc des <button>. Les classes visuelles du site restent inchangées,
   on neutralise seulement le style natif du navigateur. */
/* Un lien promu en commande perd le curseur « main » du navigateur :
   on le remet, sur tous les déclencheurs. */
[data-rgn-listen]{cursor:pointer}

button.btn,
button.floating-radio,
button.phone-card{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

button.floating-radio{
  color:#1a1103;
  background:linear-gradient(135deg,var(--rgn-player-orange),var(--rgn-player-amber));
  font-weight:950;
  line-height:1.2;
}

button.phone-card{
  display:block;
  padding:14px;
  text-align:left;
  width:min(100%,390px);
}

/* Le lecteur ouvert remplace la pastille flottante : deux appels à
   l'écoute superposés n'ont plus de sens. */
html.rgn-radio-open .floating-radio{display:none !important}

/* Focus clavier visible sur tous les contrôles ajoutés. */
button.floating-radio:focus-visible,
button.phone-card:focus-visible,
.rgn-player :focus-visible{
  outline:2px solid var(--rgn-player-orange);
  outline-offset:3px;
  border-radius:12px;
}

/* ---------- Badge « ON AIR » du héros ---------------------------------
   §4 : le héros signale que la radio est allumée, sans devenir un
   tableau de bord. */
.rgn-onair{
  display:none;
  align-items:center;
  gap:.5rem;
  margin:14px 0 0;
  font-size:.74rem;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rgn-player-cream);
}

html.rgn-radio-playing .rgn-onair{display:inline-flex}

.rgn-onair .rgn-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff5f4d;
  box-shadow:0 0 0 4px rgba(255,95,77,.18);
  animation:rgn-breathe 2.6s ease-in-out infinite;
}

@keyframes rgn-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.82)}
}

/* ---------- Mini-lecteur persistant ---------------------------------- */
.rgn-player{
  position:fixed;
  left:0;
  right:0;
  /* Le bandeau de consentement pose --rgn-consent-lift tant qu'il occupe
     le bas de l'écran : le lecteur se place juste au-dessus. */
  bottom:var(--rgn-consent-lift,0px);
  /* Sous le bandeau de consentement (120) et son voile (130). */
  z-index:110;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:var(--rgn-player-h);
  padding:0 18px calc(0px + env(safe-area-inset-bottom));
  color:var(--rgn-player-cream);
  background:rgba(8,19,25,.94);
  border-top:1px solid var(--rgn-player-hair);
  box-shadow:0 -18px 50px rgba(4,10,14,.42);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  transform:translateY(115%);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
  font-size:.9rem;
}

html.rgn-radio-open .rgn-player{transform:none}

/* Un dernier bloc de contenu ne doit jamais finir sous le lecteur. */
html.rgn-radio-open body{
  padding-bottom:calc(var(--rgn-player-h) + 16px + var(--rgn-consent-lift,0px) + env(safe-area-inset-bottom)) !important;
}

/* --- Pastille LIVE + wordmark --- */
.rgn-player-live{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  flex:none;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

.rgn-player-live .rgn-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff5f4d;
  animation:rgn-breathe 2.6s ease-in-out infinite;
}

.rgn-player[data-state="idle"] .rgn-player-live .rgn-dot,
.rgn-player[data-state="error"] .rgn-player-live .rgn-dot{
  background:var(--rgn-player-dim);
  animation:none;
}

/* Micro-indicateur audio : trois barres fines, lentes et discrètes. */
.rgn-bars{
  display:none;
  align-items:flex-end;
  gap:2px;
  height:12px;
  flex:none;
}

.rgn-player[data-state="playing"] .rgn-bars{display:inline-flex}

.rgn-bars span{
  width:2px;
  height:100%;
  border-radius:2px;
  background:linear-gradient(var(--rgn-player-amber),var(--rgn-player-orange));
  transform-origin:bottom;
  animation:rgn-bar 1.9s ease-in-out infinite;
}

.rgn-bars span:nth-child(2){animation-delay:.32s}
.rgn-bars span:nth-child(3){animation-delay:.64s}

@keyframes rgn-bar{
  0%,100%{transform:scaleY(.32)}
  50%{transform:scaleY(1)}
}

/* --- Pochette --- */
.rgn-player-cover{
  width:44px;
  height:44px;
  flex:none;
  border-radius:10px;
  object-fit:cover;
  background:rgba(255,247,235,.08);
}

.rgn-player-cover[hidden]{display:none}

/* Repli identité RGN quand aucune pochette fiable n'est disponible :
   jamais d'image cassée. */
.rgn-player-mark{
  width:44px;
  height:44px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:1.1rem;
  background:linear-gradient(135deg,rgba(255,138,0,.24),rgba(119,212,199,.18));
  border:1px solid var(--rgn-player-hair);
}

.rgn-player-mark[hidden]{display:none}

/* --- Texte --- */
.rgn-player-text{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.25;
}

.rgn-player-station{
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rgn-player-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rgn-player-track{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* --- Contrôles --- */
.rgn-player-controls{
  display:flex;
  align-items:center;
  gap:6px;
  flex:none;
}

.rgn-btn{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  color:var(--rgn-player-cream);
  background:transparent;
  font:inherit;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}

.rgn-btn:hover{background:rgba(255,247,235,.1)}
.rgn-btn svg{width:19px;height:19px;fill:currentColor}

.rgn-btn-toggle{
  width:46px;
  height:46px;
  color:#1a1103;
  background:linear-gradient(135deg,var(--rgn-player-orange),var(--rgn-player-amber));
}

.rgn-btn-toggle:hover{background:linear-gradient(135deg,#ff9d24,var(--rgn-player-amber))}

/* Le chevron de chargement remplace l'icône pendant la connexion. */
.rgn-spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(26,17,3,.28);
  border-top-color:#1a1103;
  animation:rgn-spin .8s linear infinite;
}

@keyframes rgn-spin{to{transform:rotate(360deg)}}

.rgn-player:not([data-state="connecting"]) .rgn-spinner{display:none}
.rgn-player[data-state="connecting"] .rgn-icon-play,
.rgn-player[data-state="connecting"] .rgn-icon-pause{display:none}
.rgn-player[data-state="playing"] .rgn-icon-play{display:none}
.rgn-player:not([data-state="playing"]) .rgn-icon-pause{display:none}

/* Volume : discret, desktop seulement (§20). */
.rgn-volume{
  display:flex;
  align-items:center;
  gap:4px;
  flex:none;
}

.rgn-volume input[type="range"]{
  width:78px;
  height:22px;
  margin:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
}

.rgn-volume input[type="range"]::-webkit-slider-runnable-track{
  height:3px;
  border-radius:3px;
  background:rgba(255,247,235,.26);
}

.rgn-volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  margin-top:-4.5px;
  border-radius:50%;
  background:var(--rgn-player-cream);
}

.rgn-volume input[type="range"]::-moz-range-track{
  height:3px;
  border-radius:3px;
  background:rgba(255,247,235,.26);
}

.rgn-volume input[type="range"]::-moz-range-thumb{
  width:12px;
  height:12px;
  border:0;
  border-radius:50%;
  background:var(--rgn-player-cream);
}

/* ---------- Panneau d'options « … » ---------------------------------- */
.rgn-menu{
  position:absolute;
  right:12px;
  bottom:calc(100% + 10px);
  width:min(288px,calc(100vw - 24px));
  padding:14px 16px 12px;
  border-radius:16px;
  color:var(--rgn-player-cream);
  background:rgba(10,22,29,.985);
  border:1px solid var(--rgn-player-hair);
  box-shadow:0 22px 60px rgba(3,8,11,.55);
  text-align:left;
}

.rgn-menu[hidden]{display:none}

.rgn-menu h3{
  margin:0 0 8px;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rgn-player-dim);
}

.rgn-menu [role="radiogroup"] + h3{margin-top:16px}

.rgn-menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:40px;
  padding:0 10px;
  margin:0 -10px;
  border:0;
  border-radius:10px;
  color:inherit;
  background:none;
  font:inherit;
  font-weight:750;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}

.rgn-menu-item:hover{background:rgba(255,247,235,.08)}

.rgn-menu-item[aria-checked="true"]{color:var(--rgn-player-amber)}

.rgn-menu-item[aria-checked="true"]::after{
  content:"✓";
  font-weight:900;
}

.rgn-menu-note{
  margin:10px 0 0;
  font-size:.72rem;
  line-height:1.45;
  color:var(--rgn-player-dim);
}

/* Le bouton de coupure du son vit dans la barre sur desktop, dans le
   panneau sur mobile : jamais les deux à la fois. */
@media (min-width:768px){
  .rgn-menu-mute{display:none}
}

/* ---------- Panneau d'erreur ----------------------------------------- */
.rgn-error{
  position:absolute;
  left:12px;
  right:12px;
  bottom:calc(100% + 10px);
  padding:14px 16px;
  border-radius:16px;
  color:var(--rgn-player-cream);
  background:rgba(10,22,29,.985);
  border:1px solid rgba(255,95,77,.4);
  box-shadow:0 22px 60px rgba(3,8,11,.55);
  text-align:left;
}

.rgn-error[hidden]{display:none}

.rgn-error p{
  margin:0 0 12px;
  font-size:.88rem;
  line-height:1.45;
}

.rgn-error-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.rgn-error-retry{
  min-height:40px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  color:#1a1103;
  background:linear-gradient(135deg,var(--rgn-player-orange),var(--rgn-player-amber));
  font:inherit;
  font-weight:950;
  letter-spacing:.06em;
  cursor:pointer;
}

.rgn-error-alt{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 6px;
  border:0;
  background:none;
  color:var(--rgn-player-dim);
  font:inherit;
  font-weight:750;
  text-decoration:underline;
  cursor:pointer;
}

/* Message hors du lecteur (héros) tant que le lecteur n'est pas ouvert. */
.rgn-player[data-state="error"]{border-top-color:rgba(255,95,77,.45)}

/* ---------- Mobile (§6, §7, §15) ------------------------------------- */
@media (max-width:767px){
  :root{--rgn-player-h:64px}

  .rgn-player{
    gap:10px;
    padding:0 10px 0 12px;
    padding-bottom:env(safe-area-inset-bottom);
    font-size:.86rem;
  }

  /* Sur mobile la pochette reste optionnelle : la priorité va au titre
     et à un bouton Play/Pause largement cliquable. */
  .rgn-player-cover,
  .rgn-player-mark{width:40px;height:40px}

  .rgn-volume{display:none}

  .rgn-player-station{font-size:.62rem}
  .rgn-player-track{font-size:.85rem}

  .rgn-btn{width:46px;height:46px}
  .rgn-btn-toggle{width:48px;height:48px}
}

@media (max-width:400px){
  .rgn-player-cover,
  .rgn-player-mark{display:none}
  .rgn-player{gap:8px}
}

/* ---------- Mouvement réduit (§19) ----------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rgn-player{transition:none}
  .rgn-onair .rgn-dot,
  .rgn-player-live .rgn-dot,
  .rgn-bars span,
  .rgn-spinner{animation:none}
  .rgn-bars span{transform:scaleY(.7)}
}