/* Lecteur maison Radio X — barre VOD (audio + vidéo) partout sur le site.
   Ordre L→R : play/pause · volume · temps/total · seek. Responsive.
   SCÈNE (.rx-stage) : zone 16:9 au-dessus de la barre — poster de l'article,
   contenu vidéo, et pubs VIDÉO IMA. Visible en permanence si poster/vidéo
   (.rx-has-stage), sinon ouverte seulement pendant une pub vidéo (.is-ad-video). */

.rx-player-wrap { position: relative; width: 100%; margin: 1rem 0; }

/* Scène : poster + vidéo + annonces */
.rx-stage { position: relative; display: none; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px 8px 0 0; overflow: hidden; cursor: pointer; }
.rx-player-wrap.rx-has-stage .rx-stage,
.rx-player-wrap.is-ad-video .rx-stage { display: block; }
.rx-player-wrap.rx-has-stage .rx-player,
.rx-player-wrap.is-ad-video .rx-player { border-radius: 0 0 8px 8px; }

/* Poster (image mise de l'avant de l'article) */
.rx-stage .rx-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Contenu vidéo (xcam, etc.) */
.rx-stage .rx-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* Filigrane PLAY (cercle jaune) au centre de la scène : visible à l'arrêt,
   disparaît pendant la lecture et la pub — jamais de pictogramme pause.
   pointer-events:none → le clic passe à la scène (play/pause). */
.rx-stage .rx-stage-play {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: 148px; height: 148px; border-radius: 50%;
  border: 5px solid #FEDA25; background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 1; transition: opacity .2s ease;
}
.rx-stage .rx-stage-play svg { width: 66px; height: 66px; fill: #FEDA25; margin-left: 8px; }
/* Mobile : scène plus petite → cercle ramené à ~90px */
@media (max-width: 480px) {
  .rx-stage .rx-stage-play { width: 90px; height: 90px; border-width: 4px; }
  .rx-stage .rx-stage-play svg { width: 40px; height: 40px; margin-left: 5px; }
}
.rx-player-wrap.is-playing .rx-stage-play,
.rx-player-wrap.is-ad .rx-stage-play { opacity: 0; }

/* Conteneur d'annonce IMA : recouvre la scène pendant la pub (clickthrough),
   transparent aux clics hors pub (le poster/la vidéo reprennent la main). */
.rx-stage .rx-ad-container { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rx-player-wrap.is-ad .rx-stage .rx-ad-container { pointer-events: auto; }
/* Pub audio seulement : la scène reste sur le poster, on masque le conteneur
   (IMA peut y placer un élément vide/noir). */
.rx-player-wrap.is-ad:not(.is-ad-video) .rx-stage .rx-ad-container { visibility: hidden; }

.rx-player {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #000;
  border: 1px solid #222;
  border-radius: 8px;
  padding: .6rem .8rem;
  color: #fff;
  font: 500 .9rem/1 system-ui, sans-serif;
  width: 100%;
  box-sizing: border-box;
}

/* Play / Pause */
.rx-player .rx-play {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: #ffd400; color: #000;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s ease, background .15s ease;
}
.rx-player .rx-play:hover { transform: scale(1.06); }
.rx-player .rx-play svg { width: 18px; height: 18px; fill: currentColor; }

/* Volume */
.rx-player .rx-vol { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; }
.rx-player .rx-mute { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rx-player .rx-vol svg { width: 20px; height: 20px; fill: #ccc; flex: 0 0 auto; }
.rx-player .rx-vol input[type="range"] { width: 84px; }

/* Temps / total */
.rx-player .rx-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #cfcfcf; white-space: nowrap; }

/* Seek : prend l'espace restant */
.rx-player .rx-seek { flex: 1 1 auto; min-width: 60px; display: flex; }
.rx-player .rx-seek input[type="range"] { width: 100%; }

/* Sliders (seek + volume) — accent jaune */
.rx-player input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px;
  background: #333; accent-color: #ffd400;
  cursor: pointer; margin: 0;
}
.rx-player input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #ffd400; border: 0; cursor: pointer; }
.rx-player input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #ffd400; border: 0; cursor: pointer; }

/* État pub : contrôles neutralisés + libellé (la classe .is-ad est sur le wrapper) */
.rx-player-wrap.is-ad .rx-play,
.rx-player-wrap.is-ad .rx-seek,
.rx-player-wrap.is-ad .rx-vol { opacity: .4; pointer-events: none; }
.rx-player .rx-ad-label {
  display: none; flex: 0 0 auto;
  background: #ffd400; color: #000; font-weight: 700;
  padding: .2rem .5rem; border-radius: 4px; font-size: .8rem;
}
.rx-player-wrap.is-ad .rx-ad-label { display: inline-block; }

/* Responsive : sous 480px, masque le slider de volume (sur mobile le volume =
   boutons physiques ; iOS ignore de toute façon le volume JS — seul le mute agit).
   Le bouton mute part à l'EXTRÉMITÉ DROITE (loin du play, qu'on accrochait en
   le visant) avec une zone tactile de 44px (standard tactile). */
@media (max-width: 480px) {
  .rx-player { gap: .5rem; padding: .5rem .6rem; }
  .rx-player .rx-vol input[type="range"] { display: none; }
  .rx-player .rx-vol { order: 9; }
  .rx-player .rx-mute { width: 44px; height: 44px; }
  .rx-player .rx-vol svg { width: 24px; height: 24px; }
}