/* ============================================================
   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 ─────────────────────────────────────── */

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

/* 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:    12px 16px 10px;
  background: linear-gradient(transparent, var(--po-ctrl-bg));
  display:    flex;
  flex-direction: column;
  gap:        8px;
  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:       4px;
  background:   rgba(255,255,255,.25);
  border-radius: 2px;
  cursor:       pointer;
  transition:   height var(--po-transition);
}

.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:         8px;
}

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

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

/* 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; }

/* ── 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;
}

/* ── 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;
  }
}