/* Lecteur RNC — barre VOD (audio + vidéo) partout sur le site.
   Ordre L→R : play/pause · volume · temps/total · seek. Responsive.
   SCÈNE (.rnc-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
   (.rnc-has-stage), sinon ouverte seulement pendant une pub vidéo (.is-ad-video).

   Personnalisation par site (le plugin peut injecter --rnc-accent via sa config,
   ou le thème via son propre CSS) :
     --rnc-accent           couleur d'accent (play, sliders, cercle de la scène)
     --rnc-accent-contrast  couleur des pictos posés sur l'accent */
:root {
  --rnc-accent: #ffd400;
  --rnc-accent-contrast: #000;
}

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

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

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

/* Contenu vidéo */
.rnc-stage .rnc-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* Filigrane PLAY (cercle accent) 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). */
.rnc-stage .rnc-stage-play {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: 148px; height: 148px; border-radius: 50%;
  border: 5px solid var(--rnc-accent); background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 1; transition: opacity .2s ease;
}
.rnc-stage .rnc-stage-play svg { width: 66px; height: 66px; fill: var(--rnc-accent); margin-left: 8px; }
/* Mobile : scène plus petite → cercle ramené à ~90px */
@media (max-width: 480px) {
  .rnc-stage .rnc-stage-play { width: 90px; height: 90px; border-width: 4px; }
  .rnc-stage .rnc-stage-play svg { width: 40px; height: 40px; margin-left: 5px; }
}
.rnc-player-wrap.is-playing .rnc-stage-play,
.rnc-player-wrap.is-ad .rnc-stage-play { opacity: 0; }

/* Indicateur de chargement (.is-buffering sur le wrapper) : anneau accent au
   centre de la scène pendant que le flux/la vidéo se met en route ou décroche.
   Remplace le filigrane play le temps du chargement. Jamais pendant la pub. */
.rnc-stage .rnc-spinner {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .25); border-top-color: var(--rnc-accent);
  opacity: 0; pointer-events: none;
}
.rnc-player-wrap.is-buffering:not(.is-ad) .rnc-stage .rnc-spinner { opacity: 1; animation: rnc-spin .8s linear infinite; }
.rnc-player-wrap.is-buffering .rnc-stage-play { opacity: 0; }
@keyframes rnc-spin { to { transform: rotate(360deg); } }
/* Sans scène visible (audio barre seule) : l'icône play/pause de la barre pulse. */
.rnc-player-wrap.is-buffering:not(.is-ad) .rnc-play svg { animation: rnc-live-pulse 1s ease-in-out infinite; }

/* Sous-titres (rendu maison des cues WebVTT — .rnc-captions dans la scène).
   Posés au-dessus de la barre en overlay quand elle est visible, redescendent
   près du bas quand elle s'efface (.rnc-controls-hidden). Jamais pendant la pub.
   Taille du texte proportionnelle à la scène (container query) avec repli fixe. */
.rnc-stage .rnc-captions {
  position: absolute; left: 4%; right: 4%; bottom: 66px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; pointer-events: none;
  transition: bottom .25s ease;
  font-size: 1rem;
}
.rnc-controls-hidden .rnc-stage .rnc-captions { bottom: 4%; }
.rnc-player-wrap.is-ad .rnc-stage .rnc-captions { display: none; }
.rnc-captions .rnc-cue {
  background: rgba(0, 0, 0, .75); color: #fff;
  padding: .12em .4em; border-radius: 3px;
  font: 500 1em/1.4 system-ui, sans-serif;
  white-space: pre-line;
}
@supports (font-size: 1cqw) {
  .rnc-stage { container-type: inline-size; }
  .rnc-stage .rnc-captions { font-size: clamp(13px, 2.6cqw, 42px); }
}

/* Bouton sous-titres (CC) — même famille que mute/plein écran ; trait accent
   sous l'icône quand actif. */
.rnc-player .rnc-cc { flex: 0 0 auto; background: none; border: 0; padding: 0 0 3px; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 3px solid transparent; }
.rnc-player .rnc-cc svg { width: 20px; height: 20px; fill: #ccc; }
.rnc-player .rnc-cc:hover svg { fill: #fff; }
.rnc-player .rnc-cc.is-on { border-bottom-color: var(--rnc-accent); }
.rnc-player .rnc-cc.is-on svg { fill: #fff; }
.rnc-player-wrap.is-ad .rnc-cc { opacity: .4; pointer-events: none; }

/* 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). */
.rnc-stage .rnc-ad-container { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rnc-player-wrap.is-ad .rnc-stage .rnc-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). */
.rnc-player-wrap.is-ad:not(.is-ad-video) .rnc-stage .rnc-ad-container { visibility: hidden; }

.rnc-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 */
.rnc-player .rnc-play {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--rnc-accent); color: var(--rnc-accent-contrast);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s ease, background .15s ease;
}
.rnc-player .rnc-play:hover { transform: scale(1.06); }
.rnc-player .rnc-play svg { width: 18px; height: 18px; fill: currentColor; }

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

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

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

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

/* Plein écran (vidéo) — même famille de boutons que le mute */
.rnc-player .rnc-fs { flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rnc-player .rnc-fs svg { width: 20px; height: 20px; fill: #ccc; }
.rnc-player .rnc-fs:hover svg { fill: #fff; }

/* Contrôles en OVERLAY (.rnc-overlay — toute vidéo) : barre posée sur le bas
   de la scène (fondu noir), auto-masquée en lecture après ~3 s d'inactivité
   (.rnc-controls-hidden, posée/retirée par JS). */
.rnc-overlay .rnc-stage { border-radius: 8px; }
.rnc-overlay .rnc-player {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .82));
  border: 0;
  transition: opacity .25s ease;
}
.rnc-overlay.rnc-controls-hidden .rnc-player { opacity: 0; pointer-events: none; }
.rnc-overlay.rnc-controls-hidden .rnc-stage { cursor: none; }
/* Pub VIDÉO : la barre s'efface entièrement — l'UI IMA (compte à rebours,
   clickthrough) est dessous. Pub audio : barre visible (libellé Publicité). */
.rnc-overlay.is-ad-video .rnc-player { opacity: 0; pointer-events: none; }

/* Plein écran actif : la scène remplit l'écran (le ratio inline est libéré),
   coins droits, letterbox noir géré par le <video> lui-même. */
.rnc-player-wrap.is-fullscreen { background: #000; margin: 0; }
.rnc-player-wrap.is-fullscreen .rnc-stage { height: 100%; aspect-ratio: auto !important; border-radius: 0; }
.rnc-player-wrap.is-fullscreen .rnc-player { border-radius: 0; }

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

/* Mode LIVE (.rnc-live sur le wrapper) : un direct ne se navigue pas →
   temps/total et seek masqués, remplacés par le badge EN DIRECT (point rouge
   pulsé pendant la lecture). Le volume garde l'espace restant. */
.rnc-player .rnc-live-badge {
  display: none; flex: 0 0 auto; align-items: center; gap: .4rem;
  color: #cfcfcf; font-weight: 700; font-size: .8rem; letter-spacing: .05em;
  margin-left: auto;
}
.rnc-player .rnc-live-badge::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e33;
}
.rnc-live .rnc-time,
.rnc-live .rnc-seek { display: none; }
.rnc-live .rnc-live-badge { display: inline-flex; }
.rnc-live.is-playing .rnc-live-badge { color: #fff; }
.rnc-live.is-playing .rnc-live-badge::before { animation: rnc-live-pulse 1.6s ease-in-out infinite; }
@keyframes rnc-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* Classe utilitaire du module live (hiddenClass par défaut) */
.rnc-hidden { display: none !important; }

/* 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) {
  .rnc-player { gap: .5rem; padding: .5rem .6rem; }
  .rnc-player .rnc-vol input[type="range"] { display: none; }
  .rnc-player .rnc-vol { order: 9; }
  .rnc-player .rnc-mute { width: 44px; height: 44px; }
  .rnc-player .rnc-vol svg { width: 24px; height: 24px; }
  .rnc-player .rnc-fs { order: 10; width: 44px; height: 44px; }
  .rnc-player .rnc-fs svg { width: 24px; height: 24px; }
  .rnc-player .rnc-cc { order: 8; width: 44px; height: 44px; box-sizing: border-box; }
  .rnc-player .rnc-cc svg { width: 24px; height: 24px; }
  .rnc-stage .rnc-captions { bottom: 62px; }
}