/* ================================================
   MOVIENETFLIX — PLAYER CSS v7.0 ULTRA MOBILE
   ✅ Grande barre bas (44px+ touch targets)
   ✅ Progress bar 8px, thumb 20px
   ✅ Play/pause 64px centré
   ✅ Spinner centré Netflix-style
   ✅ Gestes swipe visuels
   ✅ Double-tap overlays
   ✅ Erreur arabe + retry
   ✅ Rotation iOS CSS trick
   ✅ Fullscreen natif + CSS fallback
   ================================================ */

/* ── Verrou scroll ── */
html.has-player,
html.player-open { overflow: hidden !important; height: 100% !important; }
html.has-player body,
html.player-open body { overflow: hidden !important; }

/* ════════════════════════════════════════════
   OVERLAY MODAL (backdrop)
════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0)
           env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ════════════════════════════════════════════
   MODAL CONTENT BASE
════════════════════════════════════════════ */
.modal-content {
  background: #080808;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 96dvh;
  transform: scale(0.94) translateY(16px);
  transition: transform 0.32s cubic-bezier(0.34,1.4,0.64,1);
  box-shadow: 0 40px 100px rgba(0,0,0,0.98);
}
.modal-overlay.open .modal-content {
  transform: scale(1) translateY(0);
}

/* ════════════════════════════════════════════
   PLAYER MODAL (taille de base)
════════════════════════════════════════════ */
.player-modal {
  width: min(96vw, 1200px);
  max-height: 96dvh;
}

/* ════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════ */
.player-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: #050505;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  min-height: 52px;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  z-index: 25;
}
.player-back-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7); flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.player-back-btn:hover,
.player-back-btn:active { background: rgba(255,255,255,0.12); color: #fff; }
.player-title-text {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: auto;
}
.player-topbar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.player-action-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: background 0.18s, color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.player-action-btn:hover,
.player-action-btn:active { background: rgba(255,255,255,0.12); color: #fff; }
.modal-close {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
  transition: background 0.18s, color 0.18s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.modal-close:hover,
.modal-close:active { background: rgba(229,9,20,0.85); color: #fff; }

/* ════════════════════════════════════════════
   CONTAINER VIDÉO
════════════════════════════════════════════ */
.player-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* gestion manuelle des gestes */
}
#playerIframe {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  border: none; display: block;
  pointer-events: auto;
}

/* ════════════════════════════════════════════
   LOADER CENTRÉ (Netflix-style)
════════════════════════════════════════════ */
.player-loading {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0,0,0,0.92);
  transition: opacity 0.3s;
}
.player-loading.hidden { display: none !important; }

/* Spinner centré Netflix rouge */
.pl-spinner {
  width: 56px; height: 56px;
  border: 4px solid rgba(229,9,20,0.15);
  border-top-color: #E50914;
  border-radius: 50%;
  animation: plSpin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes plSpin { to { transform: rotate(360deg); } }

.pl-loading-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  direction: rtl;
}
.pl-loading-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  direction: rtl;
}

/* Erreur */
.pl-error-icon  { font-size: 2.5rem; }
.pl-error-text  { font-size: 1rem; font-weight: 700; color: #fff; direction: rtl; }
.pl-error-sub   { font-size: 0.78rem; color: rgba(255,255,255,0.5); direction: rtl; }
.pl-retry-btn {
  padding: 12px 28px;
  background: #E50914;
  color: #fff;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s, transform 0.14s;
  -webkit-tap-highlight-color: transparent;
  margin-top: 4px;
  direction: rtl;
}
.pl-retry-btn:active { transform: scale(0.95); }
.pl-next-server-btn {
  padding: 10px 22px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s;
  direction: rtl;
}

/* ════════════════════════════════════════════
   OVERLAY CONTRÔLES FLOTTANTS
════════════════════════════════════════════ */
.player-controls-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  /* Gradient haut + bas */
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 22%),
    linear-gradient(to top,    rgba(0,0,0,0.85) 0%, transparent 28%);
}
.player-controls-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* ── Centre : prev/next nav (TV) ── */
.player-overlay-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex: 1;
}
.overlay-nav-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 2px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: all 0.18s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  font-size: 1.4rem;
}
.overlay-nav-btn:hover,
.overlay-nav-btn:active { background: rgba(229,9,20,0.75); border-color: #E50914; transform: scale(1.08); }

/* ── Barre bas overlay ── */
.player-overlay-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.overlay-server-row { display: flex; gap: 6px; }
.overlay-server-btn {
  padding: 6px 14px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7);
  font-size: 0.76rem; font-weight: 700; cursor: pointer;
  transition: all 0.16s;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}
.overlay-server-btn:active { background: rgba(255,255,255,0.2); }
.overlay-server-btn.active {
  background: rgba(229,9,20,0.85); color: #fff;
  border-color: rgba(229,9,20,0.6);
}
.overlay-ep-info { flex: 1; text-align: center; min-width: 0; }
.ol-ep-label { font-size: 0.84rem; font-weight: 700; color: #fff; }
.ol-ep-name  { font-size: 0.7rem; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overlay-action-row { display: flex; gap: 6px; }
.overlay-action-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.8); cursor: pointer;
  transition: all 0.16s;
  -webkit-tap-highlight-color: transparent;
}
.overlay-action-btn:active { background: rgba(229,9,20,0.75); color: #fff; border-color: #E50914; }

/* ════════════════════════════════════════════
   BARRE CONTRÔLES (mode normal, sous l'iframe)
════════════════════════════════════════════ */
.player-controls-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: #070707;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.server-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.server-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
  font-size: 0.8rem; font-weight: 700; font-family: var(--font);
  cursor: pointer; transition: all 0.16s;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.server-btn:active { background: rgba(255,255,255,0.14); color: #fff; }
.server-btn.active {
  background: rgba(229,9,20,0.85); color: #fff;
  border-color: rgba(229,9,20,0.5);
}
.server-hint { font-size: 0.68rem; color: rgba(255,255,255,0.35); white-space: nowrap; }
.controls-bar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* ════════════════════════════════════════════
   NAVIGATEUR ÉPISODES
════════════════════════════════════════════ */
.episode-navigator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: #070707;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.ep-nav-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.07); color: #fff;
  font-size: 0.82rem; font-weight: 700; font-family: var(--font);
  cursor: pointer; transition: all 0.16s; flex-shrink: 0;
  white-space: nowrap; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.ep-nav-btn:active    { transform: scale(0.95); background: rgba(255,255,255,0.12); }
.ep-nav-btn:disabled  { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.ep-nav-info          { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
#currentEpLabel       { font-size: 0.9rem; font-weight: 700; color: #fff; }
.ep-title-label       { font-size: 0.7rem; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; text-align: center; }

/* ════════════════════════════════════════════
   FULLSCREEN / LANDSCAPE — Modes
   Classes: pfs, pls, pfs-css
════════════════════════════════════════════ */
.player-modal.pfs,
.player-modal.pfs-css,
.player-modal.player-fullscreen-mode {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: 100dvw !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  margin: 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
}
.player-modal.pfs .player-container,
.player-modal.pfs-css .player-container,
.player-modal.player-fullscreen-mode .player-container {
  flex: 1 !important;
  aspect-ratio: unset !important;
  height: 0 !important; /* flex child */
}

/* En fullscreen, les barres du bas sont compactées */
.player-modal.pfs .player-controls-bar,
.player-modal.pfs-css .player-controls-bar {
  padding: 8px 12px;
}
.player-modal.pfs .episode-navigator,
.player-modal.pfs-css .episode-navigator {
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* Natif :fullscreen */
.player-modal:fullscreen,
.player-modal:-webkit-full-screen,
.player-modal:-moz-full-screen {
  width: 100vw !important; height: 100vh !important;
  max-width: 100vw !important; max-height: 100vh !important;
  border-radius: 0 !important; background: #000 !important;
  display: flex !important; flex-direction: column !important;
}
.player-modal:fullscreen .player-container,
.player-modal:-webkit-full-screen .player-container {
  flex: 1 !important; aspect-ratio: unset !important;
}

/* ── Landscape mode ── */
.player-modal.pls,
.player-modal.player-landscape-mode {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
}
.player-modal.pls .player-container,
.player-modal.player-landscape-mode .player-container {
  flex: 1 !important; aspect-ratio: unset !important;
}

/* iOS portrait → CSS rotate trick */
@media (max-width: 768px) and (orientation: portrait) {
  .player-modal.pls:not(:fullscreen):not(:-webkit-full-screen) {
    width: 100dvh !important;
    height: 100dvw !important;
    transform: rotate(90deg) translateY(-100%) !important;
    transform-origin: top left !important;
    left: 0 !important; top: 0 !important;
    position: fixed !important;
  }
}

/* ════════════════════════════════════════════
   HINT ROTATION
════════════════════════════════════════════ */
.rotate-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.78);
  color: #fff;
  padding: 14px 24px;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  z-index: 30;
  pointer-events: none;
  animation: hintFade 2.5s ease forwards;
  direction: rtl;
}
.rotate-hint-icon { font-size: 2rem; margin-bottom: 6px; }
@keyframes hintFade {
  0%   { opacity: 0; transform: translate(-50%, -60%); }
  15%  { opacity: 1; transform: translate(-50%, -50%); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ════════════════════════════════════════════
   GESTES — OVERLAYS VISUELS
════════════════════════════════════════════ */

/* Swipe seek */
.swipe-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.72);
  color: #fff;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 35;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.swipe-seek-ov  { background: rgba(229,9,20,0.82); }
.swipe-bright-ov { left: 25%; background: rgba(255,200,0,0.82); }
.swipe-vol-ov   { left: 75%; background: rgba(50,150,255,0.82); }
.swipe-icon { font-size: 1.2rem; }
.swipe-bar  { font-size: 0.7rem; letter-spacing: 1px; opacity: 0.85; }
.swipe-seek-icon { font-size: 1.4rem; }

/* Double-tap overlay */
.dt-overlay {
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
  z-index: 36;
  border-radius: 0;
  opacity: 0;
}
.dt-left  { left: 0; border-radius: 0 0 0 0; }
.dt-right { right: 0; }
.dt-pulse { animation: dtPulse 0.55s ease forwards; }
@keyframes dtPulse {
  0%   { opacity: 0; }
  30%  { opacity: 1; background: rgba(255,255,255,0.2); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ════════════════════════════════════════════
   TRAILER MODAL
════════════════════════════════════════════ */
.trailer-modal {
  width: min(92vw, 960px);
  background: #000;
  position: relative;
}
.trailer-close {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  background: rgba(0,0,0,0.75) !important;
}
.trailer-close:hover,
.trailer-close:active { background: rgba(229,9,20,0.85) !important; }
.trailer-container { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.trailer-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ════════════════════════════════════════════
   RESPONSIVE PLAYER
════════════════════════════════════════════ */

/* ── Mobile ≤ 600px ── */
@media (max-width: 600px) {
  .player-modal {
    width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-overlay { padding: 0; align-items: flex-start; }
  .player-topbar { padding: 8px 10px; min-height: 48px; }
  .player-title-text { font-size: 0.8rem; }
  .player-controls-bar { padding: 8px 10px; gap: 6px; }
  .server-btn { padding: 7px 12px; font-size: 0.74rem; min-height: 40px; }
  .server-hint { display: none; }
  .episode-navigator { padding: 8px 10px; gap: 8px; }
  .ep-nav-btn { padding: 8px 14px; font-size: 0.76rem; min-height: 42px; }
  .ep-title-label { max-width: 110px; }
  #rotateBtn { display: none; }
  .overlay-nav-btn { width: 54px; height: 54px; }
  .player-action-btn { width: 40px; height: 40px; }
  .modal-close { width: 38px; height: 38px; }
}

/* ── Paysage mobile (height ≤ 500px) ── */
@media (max-height: 500px) and (orientation: landscape) {
  .player-modal {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .modal-overlay { padding: 0; align-items: flex-start; }
  .player-topbar { min-height: 40px; padding: 5px 12px; }
  .player-container { flex: 1 !important; aspect-ratio: unset !important; }
  .player-controls-bar,
  .episode-navigator { padding: 5px 12px; }
  .ep-title-label, .server-hint { display: none; }
  .overlay-nav-btn { width: 46px; height: 46px; }
}

/* ── Tablette 601–1024px ── */
@media (min-width: 601px) and (max-width: 1024px) {
  .player-modal { width: min(97vw, 860px); }
}

/* ── Desktop > 1200px ── */
@media (min-width: 1201px) {
  .player-modal { width: min(90vw, 1200px); }
}

/* ── 4K / grands écrans ── */
@media (min-width: 1800px) {
  .pl-spinner { width: 70px; height: 70px; border-width: 5px; }
  .overlay-nav-btn { width: 80px; height: 80px; font-size: 1.8rem; }
}

/* ════════════════════════════════════════════
   CINEMA MODE — masque les éléments de page
   pendant la lecture (FIX 1)
════════════════════════════════════════════ */
body.cinema-mode .navbar,
body.cinema-mode nav:not(#bottomNav),
body.cinema-mode header,
body.cinema-mode footer,
body.cinema-mode aside,
body.cinema-mode .sidebar,
body.cinema-mode [class*="navbar"],
body.cinema-mode [class*="header"],
body.cinema-mode [class*="footer"],
body.cinema-mode [class*="sidebar"],
body.cinema-mode .ads-container,
body.cinema-mode [data-zone],
body.cinema-mode [data-ad],
body.cinema-mode .back-to-top,
body.cinema-mode .pwa-banner { display: none !important; }

/* En cinema-mode : body sans overflow, fond noir */
body.cinema-mode {
  overflow: hidden !important;
  background: #000 !important;
}

/* ════════════════════════════════════════════
   BACK TO BROWSING HINT (FIX 1 — exit FS)
════════════════════════════════════════════ */
.back-browsing-hint {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  background: rgba(0,0,0,0.82);
  color: #fff;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 0.88rem;
  font-weight: 600;
  direction: rtl;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  animation: backHintIn 0.3s ease forwards;
  transition: opacity 0.4s ease;
  border: 1px solid rgba(255,255,255,0.12);
}
.back-browsing-hint.fading { opacity: 0; }
@keyframes backHintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ════════════════════════════════════════════
   FIX 2 — SERVER 2 WRAPPER FULLSCREEN
════════════════════════════════════════════ */
/* Le wrapper iframe a déjà les classes pfs/pfs-css gérées en JS.
   On s'assure que les boutons ne sont jamais bloqués par l'overlay */
.player-controls-overlay {
  pointer-events: none; /* bloquer clics fond transparent */
}
.player-controls-overlay.visible {
  pointer-events: none; /* fond transparent = non cliquable */
}
/* Seuls les ENFANTS cliquables reçoivent pointer-events */
.player-controls-overlay.visible button,
.player-controls-overlay.visible [role="button"],
.player-controls-overlay.visible .overlay-server-btn,
.player-controls-overlay.visible .overlay-nav-btn,
.player-controls-overlay.visible .overlay-action-btn,
.player-controls-overlay.visible .player-overlay-bottom {
  pointer-events: all;
}

/* Barre de contrôles normaux : z-index élevé, jamais masquée */
.player-controls-bar {
  position: relative;
  z-index: 30;
}
.player-controls-bar button,
.player-controls-bar .server-btn,
.player-controls-bar .player-action-btn {
  position: relative;
  z-index: 31;
  pointer-events: all !important;
  cursor: pointer;
}

/* Topbar : toujours au-dessus */
.player-topbar {
  position: relative;
  z-index: 32;
}
.player-topbar button {
  pointer-events: all !important;
  cursor: pointer;
}

/* ════════════════════════════════════════════
   FIX 4 — UNIVERSAL 44px TOUCH TARGETS
════════════════════════════════════════════ */
/* Tous les boutons du player wrapper */
#playerWrapper button,
#playerWrapper [role="button"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Player container : anti-callout + touch manuel */
.player-wrapper,
#playerWrapper,
.player-container,
#playerContainer {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none; /* gestion JS manuelle des gestes */
}

/* Iframe : pointer-events auto pour les iframes de lecture */
#playerIframe {
  pointer-events: auto !important;
  touch-action: auto !important; /* l'iframe gère ses propres events */
}