/* ============================================================
   Player One : Styles Frontend
   ============================================================ */

/* Variables CSS (surchargeables via l'admin) */
:root {
  --po-brand:        #E50914;
  --po-bg:           #000;
  --po-ctrl-bg:      rgba(0, 0, 0, 0.65);
  --po-text:         #fff;
  --po-radius:       8px;
  --po-transition:   .2s ease;
  --po-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Conteneur ─────────────────────────────────────────────── */

.player-one-wrap {
  position:    relative;
  background:  var(--po-bg);
  border-radius: var(--po-radius);
  overflow:    hidden;
  width:       100%;
  font-family: var(--po-font);
  color:       var(--po-text);
  -webkit-user-select: none;
  user-select: none;
}

.player-one-wrap * { box-sizing: border-box; }

.po-player-container {
  position: relative;
  width:    100%;
  height:   100%;
}

/* ── Élément vidéo natif ───────────────────────────────────── */

.po-player-container video,
.po-player-container audio {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: contain;
  background: #000;
}

/* ── Habillage YouTube ─────────────────────────────────────── */

/* L'API YouTube remplace le placeholder par une iframe portant le même id
   mais sans la classe : on cible donc toute iframe du conteneur. */
.po-yt-holder,
.po-player-container iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   0;
}

/* ── Bouclier YouTube : garde le visiteur sur le site ─────────
   Zones transparentes posées sur les liens de YouTube (titre, chaîne, logo,
   suggestions, écran de fin). Le centre reste libre avant la lecture : le
   premier clic doit atterrir dans YouTube (voir _buildBouclierYoutube). */
.po-ytg {
  position:       absolute;
  inset:          0;
  z-index:        3;
  pointer-events: none;
}
.po-ytg__zone {
  position:       absolute;
  display:        none;
  pointer-events: auto;
  background:     transparent;
}
.po-ytg__haut   { top: 0; left: 0; right: 0; height: 64px; }
.po-ytg__bas    { left: 0; right: 0; bottom: 0; height: 60px; }
.po-ytg__logo   { right: 0; bottom: 0; width: 100px; height: 50px; }
.po-ytg__milieu { top: 64px; left: 0; right: 0; bottom: 60px; cursor: pointer; }
.po-ytg__fin    {
  inset:           0;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 0, 0, .78);
}

.po-ytg--avant   .po-ytg__haut,
.po-ytg--avant   .po-ytg__bas,
.po-ytg--demarre .po-ytg__haut,
.po-ytg--demarre .po-ytg__logo,
.po-ytg--lecture .po-ytg__haut,
.po-ytg--lecture .po-ytg__logo,
.po-ytg--lecture .po-ytg__milieu { display: block; }
.po-ytg--fin     .po-ytg__fin    { display: flex; }

.po-ytg__revoir {
  display:       inline-flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 22px;
  border:        0;
  border-radius: 999px;
  background:    #FFD941;
  color:         #0A0A0A;
  font:          600 15px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  cursor:        pointer;
}
.po-ytg__revoir:hover { background: #ffffff; }
.po-ytg__revoir svg   { width: 20px; height: 20px; fill: currentColor; }

/* Plein écran : les contrôles de YouTube grossissent, les zones aussi. */
.player-one-wrap:fullscreen .po-ytg__haut         { height: 96px; }
.player-one-wrap:fullscreen .po-ytg__milieu       { top: 96px; bottom: 80px; }
.player-one-wrap:fullscreen .po-ytg__bas          { height: 80px; }
.player-one-wrap:fullscreen .po-ytg__logo         { width: 140px; height: 72px; }

/* Couche transparente qui capte les clics jouer/pause au-dessus de l'iframe */
.po-yt-click {
  position: absolute;
  inset:    0;
  z-index:  1;
  cursor:   pointer;
}

/* ── Barre de contrôle ─────────────────────────────────────── */

.po-controls {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    0 0 4px;
  background: linear-gradient(transparent, var(--po-ctrl-bg));
  display:    flex;
  flex-direction: column;
  gap:        0;
  opacity:    1;
  transition: opacity var(--po-transition);
  pointer-events: none;
  z-index:    3;
}

.po-controls > * { pointer-events: auto; }

.player-one-wrap.po-idle .po-controls { opacity: 0; }
.player-one-wrap:hover .po-controls,
.player-one-wrap:focus-within .po-controls { opacity: 1; }

/* Barre de progression */
.po-progress {
  position:     relative;
  height:       3px;
  margin:       0 12px 4px;
  background:   rgba(255,255,255,.28);
  border-radius: 2px;
  cursor:       pointer;
  transition:   height var(--po-transition);
}

/* Zone de clic généreuse : la barre fait 3 px mais on l'attrape sur 16 */
.po-progress::after {
  content:  '';
  position: absolute;
  left:     0;
  right:    0;
  top:      -7px;
  bottom:   -7px;
}

.player-one-wrap:hover .po-progress { height: 6px; }

.po-progress__fill {
  height:        100%;
  background:    var(--po-brand);
  border-radius: inherit;
  pointer-events: none;
  max-width:     100%;
}

.po-progress__buffer {
  position:      absolute;
  top:           0;
  left:          0;
  height:        100%;
  background:    rgba(255,255,255,.15);
  border-radius: inherit;
  pointer-events: none;
  max-width:     100%;
}

.po-progress__thumb {
  position:      absolute;
  top:           50%;
  transform:     translate(-50%, -50%);
  width:         12px;
  height:        12px;
  background:    var(--po-brand);
  border-radius: 50%;
  pointer-events: none;
  opacity:       0;
  transition:    opacity var(--po-transition);
}

.player-one-wrap:hover .po-progress__thumb { opacity: 1; }

/* Rangée de boutons */
.po-btn-row {
  display:     flex;
  align-items: center;
  gap:         2px;
  padding:     0 6px;
}

.po-btn {
  background:  transparent;
  border:      none;
  padding:     0;
  width:       40px;
  height:      40px;
  flex-shrink: 0;
  cursor:      pointer;
  color:       var(--po-text);
  display:     flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:  background var(--po-transition), transform var(--po-transition);
  line-height: 1;
}

.po-btn:hover  { background: rgba(255,255,255,.15); }
.po-btn:active { transform: scale(.92); }
.po-btn svg    { width: 24px; height: 24px; fill: currentColor; }

/* Le bouton de lecture est le plus important : il est un cran plus gros */
.po-btn--play svg { width: 28px; height: 28px; }

/* Temps */
.po-time {
  font-size:   12px;
  font-variant-numeric: tabular-nums;
  opacity:     .9;
  white-space: nowrap;
  margin:      0 4px;
}

/* Volume */
.po-volume-wrap {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.po-volume-slider {
  -webkit-appearance: none;
  appearance:  none;
  width:       70px;
  height:      4px;
  border-radius: 2px;
  background:  rgba(255,255,255,.3);
  cursor:      pointer;
  outline:     none;
}

.po-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:  none;
  width:       12px;
  height:      12px;
  border-radius: 50%;
  background:  var(--po-text);
  cursor:      pointer;
}

/* Vitesse */
.po-speed-btn {
  font-size:   12px;
  font-weight: 600;
  padding:     4px 6px;
  min-width:   36px;
  text-align:  center;
}

/* Spacer */
.po-spacer { flex: 1; }

/* ── Overlay play/pause central ────────────────────────────── */

.po-play-overlay {
  position:         absolute;
  inset:            0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  pointer-events:   none;
  opacity:          0;
  transition:       opacity var(--po-transition);
}

.po-play-overlay.po-flash {
  opacity: 1;
  animation: po-flash .4s ease forwards;
}

@keyframes po-flash {
  0%   { opacity: 1; transform: scale(1);    }
  70%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.3);  }
}

.po-play-overlay__icon {
  width:      56px;
  height:     56px;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  display:    flex;
  align-items: center;
  justify-content: center;
}

.po-play-overlay__icon svg { width: 32px; height: 32px; fill: #fff; }

/* ── Spinner de chargement ─────────────────────────────────── */

.po-spinner {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity:    0;
  transition: opacity var(--po-transition);
}

.player-one-wrap.po-loading .po-spinner { opacity: 1; }

.po-spinner__ring {
  width:        40px;
  height:       40px;
  border:       3px solid rgba(255,255,255,.2);
  border-top-color: var(--po-brand);
  border-radius: 50%;
  animation:    po-spin .8s linear infinite;
}

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

/* ── Email gate ────────────────────────────────────────────── */

.po-email-gate {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.88);
  display:    flex;
  align-items: center;
  justify-content: center;
  z-index:    10;
  backdrop-filter: blur(4px);
}

.po-email-gate__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  padding:        32px 24px;
  max-width:      360px;
  width:          100%;
  text-align:     center;
}

.po-email-gate__title {
  font-size:   1.1rem;
  font-weight: 600;
  margin:      0;
  color:       #fff;
}

.po-email-gate__email,
.po-email-gate__name {
  width:        100%;
  padding:      10px 14px;
  border:       1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background:   rgba(255,255,255,.08);
  color:        #fff;
  font-size:    .95rem;
  outline:      none;
  transition:   border-color var(--po-transition);
}

.po-email-gate__email:focus,
.po-email-gate__name:focus { border-color: var(--po-brand); }

.po-email-gate__email::placeholder,
.po-email-gate__name::placeholder { color: rgba(255,255,255,.4); }

.po-email-gate__btn {
  width:         100%;
  padding:       11px;
  background:    var(--po-brand);
  color:         #fff;
  border:        none;
  border-radius: 6px;
  font-size:     .95rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    filter var(--po-transition), transform var(--po-transition);
}

.po-email-gate__btn:hover  { filter: brightness(1.1); }
.po-email-gate__btn:active { transform: scale(.98); }

.po-email-gate__btn.po-loading {
  opacity: .7;
  cursor:  not-allowed;
}

.po-email-gate__error {
  color:     #ff6b6b;
  font-size: .85rem;
  margin:    0;
}

/* ── Notification de statut (éditeurs) ─────────────────────── */

.player-one-notice {
  padding:       8px 12px;
  background:    #fff3cd;
  color:         #7a5800;
  border-left:   3px solid #e6a817;
  font-size:     .85rem;
  margin-bottom: 8px;
  border-radius: 4px;
}

/* ── Filigrane / logo ──────────────────────────────────────── */

.po-watermark {
  position:       absolute;
  z-index:        5;
  pointer-events: none;
  max-width:      40%;
}

.po-watermark a { pointer-events: auto; }

.po-watermark img {
  display:    block;
  max-height: 44px;
  max-width:  100%;
  width:      auto;
  height:     auto;
}

.po-watermark__text {
  font-size:   13px;
  font-weight: 600;
  color:       #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  white-space: nowrap;
}

.po-watermark--top-left     { top: 12px;    left:  12px; }
.po-watermark--top-right    { top: 12px;    right: 12px; }
.po-watermark--bottom-left  { bottom: 64px; left:  12px; }
.po-watermark--bottom-right { bottom: 64px; right: 12px; }

/* ── Bouton plein écran flottant (sources en iframe : YouTube, Twitch) ──
   Le bouton natif de la plateforme tierce est coupé ; celui-ci met tout le
   cadre en plein écran pour que le logo reste visible. Apparaît au survol. */
.po-fs-flottant {
  position:        absolute;
  right:           8px;
  bottom:          8px;
  z-index:         6;
  width:           40px;
  height:          40px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          0;
  border-radius:   8px;
  background:      rgba(0, 0, 0, .55);
  color:           #fff;
  cursor:          pointer;
  opacity:         0;
  transition:      opacity .16s ease, background .16s ease;
  pointer-events:  auto;
}
.player-one-wrap:hover .po-fs-flottant,
.player-one-wrap:focus-within .po-fs-flottant { opacity: 1; }
.po-fs-flottant:hover { background: rgba(0, 0, 0, .82); }
.po-fs-flottant svg   { width: 24px; height: 24px; fill: currentColor; }

/* ── Marqueurs de chapitres ────────────────────────────────── */

.po-chapter-marker {
  position:       absolute;
  top:            50%;
  transform:      translate(-50%, -50%);
  width:          3px;
  height:         10px;
  background:     #fff;
  border-radius:  1px;
  pointer-events: none;
  z-index:        2;
  box-shadow:     0 0 2px rgba(0,0,0,.6);
}

/* ── Bouton sous-titres ────────────────────────────────────── */

.po-cc-btn.po-active,
.po-cc-btn.po-active svg { fill: var(--po-brand); color: var(--po-brand); }

.po-player-container video::cue {
  background: rgba(0,0,0,.75);
  color:      #fff;
}

/* ── Menu de réglages (vitesse) ────────────────────────────── */

.po-settings-wrap { position: relative; display: inline-flex; }

.po-settings-menu {
  position:       absolute;
  bottom:         calc(100% + 10px);
  right:          0;
  min-width:      130px;
  background:     rgba(20,20,24,.96);
  border-radius:  8px;
  padding:        6px;
  display:        none;
  flex-direction: column;
  box-shadow:     0 6px 24px rgba(0,0,0,.45);
  z-index:        4;
}

.po-settings-menu.po-open { display: flex; }

.po-settings-menu__title {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          rgba(255,255,255,.5);
  padding:        4px 10px 6px;
}

.po-settings-item {
  background:    transparent;
  border:        0;
  color:         #fff;
  text-align:    left;
  padding:       7px 10px;
  border-radius: 6px;
  font-size:     13px;
  cursor:        pointer;
  font-family:   inherit;
}

.po-settings-item:hover     { background: rgba(255,255,255,.1); }
.po-settings-item.po-active { color: var(--po-brand); font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 480px) {
  .po-volume-wrap { display: none; }
  .po-speed-btn   { display: none; }
  .po-controls    { padding: 8px 10px 8px; }
}

/* ── Accessibilité (focus visible) ─────────────────────────── */

.po-btn:focus-visible {
  outline:        2px solid var(--po-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .player-one-wrap *,
  .po-spinner__ring {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ── Infobulle de temps sur la barre ───────────────────────── */

.po-seek-tip {
  position:      absolute;
  bottom:        16px;
  transform:     translateX(-50%);
  background:    rgba(15,16,20,.92);
  color:         #fff;
  font-size:     12px;
  font-weight:   600;
  padding:       4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity:       0;
  transition:    opacity .12s ease;
  white-space:   nowrap;
  z-index:       5;
}

.po-progress:hover .po-seek-tip { opacity: 1; }

/* ── Gros bouton de lecture central ────────────────────────── */

.po-bigplay {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%) scale(1);
  width:           74px;
  height:          74px;
  border-radius:   50%;
  border:          0;
  background:      var(--po-brand, #E50914);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  box-shadow:      0 8px 30px rgba(0,0,0,.4);
  transition:      transform .16s ease, opacity .16s ease;
  z-index:         3;
}

.po-bigplay svg { width: 30px; height: 30px; fill: #fff; margin-left: 3px; }

.po-bigplay:hover { transform: translate(-50%, -50%) scale(1.07); }

.po-playing .po-bigplay { opacity: 0; pointer-events: none; }

/* ── Écran de fin (appel à l'action) ───────────────────────── */

.po-endscreen {
  position:        absolute;
  inset:           0;
  background:      rgba(10,11,14,.88);
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity .25s ease;
  z-index:         6;
}

.po-endscreen.po-visible { opacity: 1; pointer-events: auto; }

.po-endscreen__inner {
  text-align: center;
  padding:    24px;
  max-width:  85%;
}

.po-endscreen__img {
  max-width:     260px;
  max-height:    38%;
  width:         auto;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow:    0 10px 34px rgba(0,0,0,.5);
}

.po-endscreen__title {
  color:         #fff;
  font-size:     20px;
  font-weight:   700;
  margin-bottom: 18px;
  line-height:   1.3;
}

.po-endscreen__actions {
  display:         flex;
  gap:             12px;
  justify-content: center;
  flex-wrap:       wrap;
}

.po-endscreen__cta {
  display:         inline-flex;
  align-items:     center;
  padding:         11px 24px;
  background:      var(--po-brand, #E50914);
  color:           #fff;
  font-size:       14px;
  font-weight:     700;
  border-radius:   999px;
  text-decoration: none;
  transition:      filter .15s ease, transform .15s ease;
}

.po-endscreen__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.po-endscreen__replay {
  padding:       11px 24px;
  background:    rgba(255,255,255,.12);
  color:         #fff;
  font-size:     14px;
  font-weight:   600;
  border:        1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  cursor:        pointer;
  font-family:   inherit;
  transition:    background .15s ease;
}

.po-endscreen__replay:hover { background: rgba(255,255,255,.2); }

/* ── Vimeo ─────────────────────────────────────────────────── */

.po-vimeo-frame {
  width:  100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* ── Twitch (iframe injectée par le SDK, comme YouTube) ───────── */

.po-twitch-holder,
.po-twitch-holder iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   0;
}

/* ── Badge EN DIRECT (Twitch, ou flux HLS sans durée finie) ───── */

.po-live-badge {
  position: absolute;
  top:      12px;
  left:     12px;
  z-index:  4;
  display:  inline-flex;
  align-items: center;
  gap:      6px;
  padding:  4px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .65);
  color:    #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  pointer-events: none;
}

.po-live-dot {
  width:  8px;
  height: 8px;
  border-radius: 50%;
  background: var(--po-brand, #E50914);
  box-shadow: 0 0 0 0 rgba(229, 9, 20, .7);
  animation: po-live-pulse 1.6s infinite;
}

@keyframes po-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 9, 20, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(229, 9, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0); }
}

/* ── Liste de lecture ──────────────────────────────────────── */

.po-playlist {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}

.po-playlist__stage { position: relative; min-width: 0; }

.po-playlist__slot { display: none; }
.po-playlist__slot.po-active { display: block; }

.po-playlist__panel {
  background: #14161b;
  border-radius: 12px;
  padding: 8px;
  max-height: 520px;
  overflow-y: auto;
}

.po-playlist__head {
  color: rgba(255,255,255,.55);
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 12px;
}

.po-playlist__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
  font-family: inherit;
}

.po-playlist__item:hover { background: rgba(255,255,255,.07); }
.po-playlist__item.po-active { background: rgba(229,9,20,.16); }

.po-playlist__thumb {
  position: relative;
  width: 92px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  border-radius: 7px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.po-playlist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.po-playlist__thumb svg { width: 24px; height: 24px; fill: rgba(255,255,255,.5); }

.po-playlist__meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

.po-playlist__num {
  color: rgba(255,255,255,.4);
  font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  flex-shrink: 0;
}

.po-playlist__title {
  color: #fff;
  font: 600 13.5px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.po-playlist__item.po-active .po-playlist__title { color: var(--po-brand, #E50914); }

@media (max-width: 820px) {
  .po-playlist { grid-template-columns: 1fr; }
  .po-playlist__panel { max-height: 300px; }
}

/* ── Intégration dans le champ vidéo du thème ──────────────────
   Le thème dimensionne ses vidéos avec la technique du ratio :
   le conteneur est en hauteur nulle avec un remplissage bas de
   56.25%, et seules les iframes sont repositionnées en absolu.
   Notre lecteur étant une div, il serait masqué par le
   overflow:hidden. On reproduit donc exactement le comportement
   que le thème attend d'une iframe.
   ────────────────────────────────────────────────────────────── */

.mvp-video-embed > .player-one-wrap,
#mvp-video-embed > .player-one-wrap,
span.embed-youtube > .player-one-wrap,
.wp-block-embed-youtube > .player-one-wrap {
  position:      absolute;
  top:           0;
  left:          0;
  width:         100%;
  height:        100%;
  border-radius: 0;
}

/* ── Respiration de la barre, façon grande plateforme ───────── */

.po-time {
  margin:      0 12px 0 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Le volume ne prend sa largeur qu'au survol, comme sur YouTube */
.po-volume-wrap { display: flex; align-items: center; }

.po-volume-wrap input[type="range"] {
  width:      0;
  opacity:    0;
  margin-left: 0;
  transition: width .2s ease, opacity .2s ease, margin-left .2s ease;
}

.po-volume-wrap:hover input[type="range"],
.po-volume-wrap:focus-within input[type="range"] {
  width:       72px;
  opacity:     1;
  margin-left: 4px;
}

.po-spacer { flex: 1; min-width: 12px; }

@media (max-width: 640px) {
  .po-btn { width: 36px; height: 36px; }
  .po-btn svg { width: 21px; height: 21px; }
  .po-time { margin: 0 6px; font-size: 11px; }
  .po-volume-wrap input[type="range"] { display: none; }
}

/* ── Vidéo non intégrable (interdite hors YouTube ou introuvable) ── */

.po-indispo {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  padding:         24px;
  background:      #0d0d0d;
  text-align:      center;
}

.po-indispo__t {
  margin:    0;
  color:     #f1f1f1;
  font-size: 15px;
  max-width: 420px;
  line-height: 1.5;
}

.po-indispo__btn {
  display:         inline-block;
  padding:         10px 22px;
  border-radius:   999px;
  background:      var(--po-brand, #E50914);
  color:           #fff !important;
  font-weight:     700;
  font-size:       14px;
  text-decoration: none;
}

.po-indispo__btn:hover { filter: brightness(1.1); }

/* ── Mini-lecteur (coin de la page) + barre détacher/fermer ──── */

.player-one-wrap.po-mini {
  position:      fixed !important;
  right:         16px;
  bottom:        16px;
  width:         384px;
  max-width:     92vw;
  margin:        0 !important;
  z-index:       99998;
  border-radius: 10px;
  overflow:      hidden;
  box-shadow:    0 14px 44px rgba(0, 0, 0, .45);
  cursor:        pointer;
  background:    #000;
}

@media (max-width: 480px) {
  .player-one-wrap.po-mini { width: 62vw; right: 10px; bottom: 10px; }
}

.po-mini-barre {
  position:        absolute;
  top: 0; left: 0; right: 0;
  display:         none;
  justify-content: flex-end;
  gap:             6px;
  padding:         6px;
  z-index:         6;
  background:      linear-gradient(rgba(0, 0, 0, .55), transparent);
}

.player-one-wrap.po-mini .po-mini-barre { display: flex; }

.po-mini-btn {
  width: 28px; height: 28px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.po-mini-btn svg { width: 16px; height: 16px; fill: #fff; }
.po-mini-btn:hover { background: rgba(0, 0, 0, .85); }

/* ── Menu d'options avancées (tune) ─────────────────────────── */
.po-tune-wrap { position: relative; display: inline-flex; }
.po-tune-menu {
  position:       absolute;
  bottom:         calc(100% + 10px);
  right:          0;
  min-width:      230px;
  max-width:      86vw;
  background:     rgba(20,20,24,.97);
  border-radius:  10px;
  padding:        8px;
  display:        none;
  flex-direction: column;
  gap:            4px;
  box-shadow:     0 6px 24px rgba(0,0,0,.5);
  z-index:        5;
}
.po-tune-menu.po-open { display: flex; }
.po-tune-sec { padding: 4px 4px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.po-tune-sec:last-child { border-bottom: 0; }
.po-tune-titre {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.5); padding: 2px 4px 6px;
}
.po-tune-rangee { display: flex; flex-wrap: wrap; gap: 6px; }
.po-tune-mini {
  background: rgba(255,255,255,.08); border: 0; color: #fff;
  padding: 6px 10px; border-radius: 999px; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.po-tune-mini:hover { background: rgba(255,255,255,.18); }
.po-tune-mini.po-active { background: var(--po-brand); color: #fff; font-weight: 600; }
.po-tune-ligne {
  width: 100%; text-align: left; background: transparent; border: 0; color: #fff;
  padding: 7px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.po-tune-ligne:hover { background: rgba(255,255,255,.1); }
.po-tune-ligne.po-active { color: var(--po-brand); font-weight: 600; }
.po-tune-etat { font-size: 12px; color: rgba(255,255,255,.6); padding: 6px 4px 0; }

.po-stats {
  position: absolute; left: 10px; top: 10px; z-index: 6;
  background: rgba(0,0,0,.72); color: #fff;
  font-size: 11px; line-height: 1.5; padding: 8px 10px; border-radius: 8px;
  max-width: 90%; pointer-events: none; display: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* Attente du consentement MHH Cookie (Loi 25) : standard MHH, fond blanc, texte noir, bouton bleu. */
.po-consent{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;background:#ffffff;color:#0a0a0a;text-align:center}
.po-consent__msg{margin:0;font-size:15px;line-height:1.4;color:#0a0a0a;max-width:520px}
.po-consent__btn{background:#1d5c8f;color:#ffffff;border:1px solid #1d5c8f;border-radius:8px;padding:10px 18px;font-weight:600;cursor:pointer}
.po-consent__btn:hover{background:#ffffff;color:#0a0a0a}
.po-consent__btn:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}