/*
 * MyTvShow — Netflix UI v3.0
 * Stratégie CSS anti-Elementor :
 *   1. Le wrapper porte l'ID #mytvshow-[uid] + data-mts="wrap" → spécificité maximale
 *   2. La grille reçoit grid-template-columns en STYLE INLINE depuis PHP → impossible à écraser
 *   3. Les sélecteurs critiques utilisent l'ID en préfixe
 *   4. all:initial sur wrap et card → aucun héritage du thème
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,600;9..40,700&display=swap');

/* ── Tokens ─────────────────────────────────── */
[data-mts="wrap"] {
  --c-bg:       #141414;
  --c-surface:  #1c1c1c;
  --c-lift:     #262626;
  --c-border:   #2a2a2a;
  --c-red:      #e50914;
  --c-white:    #ffffff;
  --c-dim:      #e5e5e5;
  --c-gray:     #888888;
  --c-green:    #46d369;
  --f-body:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-title:    'Bebas Neue', 'Arial Black', sans-serif;
  --ease:       cubic-bezier(.25,.46,.45,.94);
}

/* ── Wrapper ─────────────────────────────────── */
[data-mts="wrap"] {
  all: initial !important;
  display: block !important;
  box-sizing: border-box !important;
  background: var(--c-bg) !important;
  color: var(--c-dim) !important;
  font-family: var(--f-body) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 32px 20px 48px !important;
  -webkit-font-smoothing: antialiased !important;
  border-radius: 6px !important;
  width: 100% !important;
}

[data-mts="wrap"] *,
[data-mts="wrap"] *::before,
[data-mts="wrap"] *::after {
  box-sizing: border-box !important;
}

/* ── Section header ──────────────────────────── */
[data-mts="wrap"] [data-mts="header"] {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

[data-mts="wrap"] [data-mts="section-title"] {
  all: unset !important;
  display: block !important;
  font-family: var(--f-title) !important;
  font-size: clamp(20px, 2.5vw, 30px) !important;
  letter-spacing: 2px !important;
  color: var(--c-white) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Grid
     IMPORTANT : grid-template-columns est aussi injecté
     en style inline depuis PHP → double sécurité
─────────────────────────────────────────────── */
[data-mts="wrap"] [data-mts="grid"] {
  display: grid !important;
  /* fallback si le style inline échoue */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  /* CRITIQUE : overflow visible pour que scale() des cartes soit visible */
  overflow: visible !important;
}

/* Responsive — overrides explicites sans min() ni variables */
@media (max-width: 1024px) {
  [data-mts="wrap"] [data-mts="grid"][data-cols="6"],
  [data-mts="wrap"] [data-mts="grid"][data-cols="5"],
  [data-mts="wrap"] [data-mts="grid"][data-cols="4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  [data-mts="wrap"] [data-mts="grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
}
@media (max-width: 400px) {
  [data-mts="wrap"] [data-mts="grid"][data-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [data-mts="wrap"] [data-mts="grid"]:not([data-cols="2"]) {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* ── Card ─────────────────────────────────────── */
[data-mts="wrap"] [data-mts="card"] {
  all: unset !important;
  display: block !important;
  position: relative !important;
  background: var(--c-surface) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  /* will-change déclenche un nouveau stacking context
     → le scale ne déborde plus du grid */
  will-change: transform !important;
  transition:
    transform 300ms var(--ease),
    box-shadow 300ms var(--ease) !important;
  /* z-index de base */
  z-index: 1 !important;
  isolation: isolate !important;
}

[data-mts="wrap"] [data-mts="card"]:hover {
  transform: scale(1.07) translateY(-4px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.9) !important;
  z-index: 100 !important;
  overflow: visible !important;
}

/* Siblings dimming via parent class ajoutée par JS */
[data-mts="wrap"] [data-mts="grid"].mts-active [data-mts="card"]:not(:hover) {
  opacity: 0.45 !important;
  transition:
    opacity 200ms ease,
    transform 300ms var(--ease),
    box-shadow 300ms var(--ease) !important;
}

/* ── Card link ────────────────────────────────── */
[data-mts="wrap"] [data-mts="card"] a[data-mts="card-link"] {
  all: unset !important;
  display: block !important;
  cursor: pointer !important;
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
}

/* ── Thumbnail — aspect-ratio 16/9 ───────────── */
[data-mts="wrap"] [data-mts="thumb"] {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: var(--c-lift) !important;
  overflow: hidden !important;
  /* on re-clamp overflow ici pour clipper l'image
     mais pas la carte entière */
}

[data-mts="wrap"] [data-mts="thumb-img"] {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 400ms var(--ease) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

[data-mts="wrap"] [data-mts="card"]:hover [data-mts="thumb-img"] {
  transform: scale(1.06) !important;
}

/* ── Duration badge ───────────────────────────── */
[data-mts="wrap"] [data-mts="duration"] {
  position: absolute !important;
  bottom: 6px !important;
  right: 6px !important;
  background: rgba(0,0,0,.88) !important;
  color: #fff !important;
  font-family: var(--f-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  padding: 2px 5px !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  line-height: 1.5 !important;
}

/* ── Hover overlay + play circle centré ──────────
   Tout est en inline style dans le PHP.
   Le CSS ici gère UNIQUEMENT les transitions hover
   via JS (.mts-hovered sur la carte).
─────────────────────────────────────────────── */

/* Play circle — centré au milieu de la vignette */
[data-mts="wrap"] [data-mts="play-circle"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  background: rgba(255,255,255,.92) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transform: scale(.85) !important;
  transition: transform .25s ease !important;
}

[data-mts="wrap"] [data-mts="card"]:hover [data-mts="play-circle"] {
  transform: scale(1) !important;
}

[data-mts="wrap"] [data-mts="play-circle"] svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  fill: #000 !important;
  margin-left: 3px !important;
  flex-shrink: 0 !important;
}

/* Overlay opacité : géré par JS + inline style
   mais on double-lock via :hover aussi */
[data-mts="wrap"] [data-mts="overlay"] {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 220ms ease !important;
  pointer-events: none !important;
}

[data-mts="wrap"] [data-mts="card"]:hover [data-mts="overlay"] {
  opacity: 1 !important;
}

/* Titre bas de vignette au hover */
[data-mts="wrap"] [data-mts="thumb-title"] {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  opacity: 0 !important;
  transition: opacity 220ms ease !important;
  pointer-events: none !important;
}

[data-mts="wrap"] [data-mts="card"]:hover [data-mts="thumb-title"] {
  opacity: 1 !important;
}

[data-mts="wrap"] [data-mts="thumb-title"] p {
  all: unset !important;
  display: block !important;
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Card body ────────────────────────────────── */
[data-mts="wrap"] [data-mts="body"] {
  display: block !important;
  padding: 8px 9px 10px !important;
  background: var(--c-surface) !important;
}

[data-mts="wrap"] [data-mts="card-title"] {
  all: unset !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--c-dim) !important;
  line-height: 1.35 !important;
  margin-bottom: 3px !important;
}

[data-mts="wrap"] [data-mts="meta"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--f-body) !important;
  font-size: 10px !important;
  color: var(--c-gray) !important;
  margin: 0 !important;
  padding: 0 !important;
}

[data-mts="wrap"] [data-mts="year"]  { color: var(--c-green) !important; font-weight: 700 !important; }
[data-mts="wrap"] [data-mts="views"] { color: var(--c-gray)  !important; display: flex !important; align-items: center !important; gap: 3px !important; }
[data-mts="wrap"] [data-mts="views"] svg { display: block !important; }

/* ── Empty state ──────────────────────────────── */
[data-mts="wrap"] [data-mts="empty"] {
  text-align: center !important;
  padding: 60px 20px !important;
  color: var(--c-gray) !important;
}

[data-mts="wrap"] [data-mts="empty"] .mts-icon {
  font-size: 48px !important;
  display: block !important;
  margin-bottom: 16px !important;
  opacity: .3 !important;
}

[data-mts="wrap"] [data-mts="empty"] p {
  all: unset !important;
  display: block !important;
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--c-gray) !important;
}

/* ═══════════════════════════════════════════════
   SINGLE VIDEO PAGE
   Utilise data-mts="single-wrap" comme root
════════════════════════════════════════════════ */
[data-mts="single-wrap"] {
  all: initial !important;
  display: block !important;
  box-sizing: border-box !important;
  background: #141414 !important;
  color: #e5e5e5 !important;
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  min-height: 100vh !important;
  padding-bottom: 60px !important;
  -webkit-font-smoothing: antialiased !important;
}
[data-mts="single-wrap"] *,
[data-mts="single-wrap"] *::before,
[data-mts="single-wrap"] *::after { box-sizing: border-box !important; }

[data-mts="single-wrap"] [data-mts="hero"] {
  position: relative !important;
  width: 100% !important;
  background: #000 !important;
}

[data-mts="single-wrap"] [data-mts="player-ratio"] {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
}

[data-mts="single-wrap"] [data-mts="player-ratio"] iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

[data-mts="single-wrap"] [data-mts="hero-fade"] {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 130px !important;
  background: linear-gradient(to bottom, transparent, #141414) !important;
  pointer-events: none !important;
}

[data-mts="single-wrap"] [data-mts="single-info"] {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 24px 24px 0 !important;
}

[data-mts="single-wrap"] [data-mts="single-title"] {
  all: unset !important;
  display: block !important;
  font-family: 'Bebas Neue', 'Arial Black', sans-serif !important;
  font-size: clamp(28px, 5vw, 54px) !important;
  letter-spacing: 2px !important;
  color: #fff !important;
  text-transform: uppercase !important;
  line-height: .95 !important;
  margin-bottom: 18px !important;
}

[data-mts="single-wrap"] [data-mts="actions"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

[data-mts="single-wrap"] [data-mts="btn"] {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 3px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity .2s !important;
  white-space: nowrap !important;
}
[data-mts="single-wrap"] [data-mts="btn"]:hover { opacity: .8 !important; }
[data-mts="single-wrap"] [data-mts="btn"][data-variant="yt"] {
  background: #e50914 !important;
  color: #fff !important;
}
[data-mts="single-wrap"] [data-mts="btn"] svg {
  width: 16px !important; height: 16px !important; fill: currentColor !important;
}

[data-mts="single-wrap"] [data-mts="chips"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
[data-mts="single-wrap"] [data-mts="chip"] {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid #2a2a2a !important;
  color: #888 !important;
  border-radius: 3px !important;
  padding: 4px 11px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
a[data-mts="chip"]:hover { border-color: #fff !important; color: #fff !important; cursor: pointer !important; }

[data-mts="single-wrap"] [data-mts="desc"] {
  all: unset !important;
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #888 !important;
  max-height: 76px !important;
  overflow: hidden !important;
  transition: max-height .4s ease !important;
  white-space: pre-wrap !important;
}
[data-mts="single-wrap"] [data-mts="desc"].is-open { max-height: 1400px !important; }

[data-mts="single-wrap"] [data-mts="read-more"] {
  all: unset !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #888 !important;
  margin-top: 6px !important;
  transition: color .2s !important;
}
[data-mts="single-wrap"] [data-mts="read-more"]:hover { color: #fff !important; }
[data-mts="single-wrap"] [data-mts="read-more"] svg {
  width: 14px !important; height: 14px !important; fill: currentColor !important;
  transition: transform .3s !important;
}
[data-mts="single-wrap"] [data-mts="read-more"].open svg { transform: rotate(180deg) !important; }

[data-mts="single-wrap"] [data-mts="tags"] {
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 18px !important;
}
[data-mts="single-wrap"] [data-mts="tag"] {
  all: unset !important;
  display: inline-block !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  color: #888 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 2px !important;
  padding: 3px 10px !important;
  text-decoration: none !important;
  transition: border-color .2s, color .2s !important;
}
[data-mts="single-wrap"] [data-mts="tag"]:hover { border-color: #fff !important; color: #fff !important; }

[data-mts="single-wrap"] [data-mts="related-wrap"] {
  max-width: 860px !important;
  margin: 48px auto 0 !important;
  padding: 0 24px !important;
}

/* ═══════════════════════════════════════════════
   ADMIN
════════════════════════════════════════════════ */
.mytvshow-admin { max-width: 1040px; }
.mytvshow-admin h1 {
  font-size: 21px; font-weight: 800; margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px; color: #1d2327;
}
.mytvshow-admin h1::before {
  content: ''; width: 4px; height: 22px; background: #e50914;
  border-radius: 2px; display: inline-block;
}
.mytvshow-card {
  background: #fff; border: 1px solid #e2e4e7; border-radius: 6px;
  padding: 22px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.mytvshow-card h2 {
  font-size: 14px; font-weight: 700; margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 2px solid #e50914; color: #1d2327;
}
.mytvshow-stats-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px;
}
@media (max-width: 768px) { .mytvshow-stats-row { grid-template-columns: repeat(2,1fr); } }
.mytvshow-stat-card {
  background: #fff; border: 1px solid #e2e4e7; border-radius: 6px;
  padding: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.mytvshow-stat-card__value {
  display: block; font-size: 26px; font-weight: 800; color: #1d2327;
  line-height: 1; margin-bottom: 5px;
}
.mytvshow-stat-card__label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .6px; }
.mytvshow-dashboard-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .mytvshow-dashboard-cols { grid-template-columns: 1fr; } }
.mytvshow-channel-info { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.mytvshow-channel-info__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.mytvshow-steps { padding-left: 20px; line-height: 2.2; margin: 0 0 14px; }
.mytvshow-steps li.done { color: #46a147; }
.mytvshow-steps li.done a { color: #46a147; }
.mytvshow-shortcode-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mytvshow-shortcode-table td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; }
.mytvshow-shortcode-table td:first-child { width: 210px; }
.mytvshow-stats-table { width: 100%; border-collapse: collapse; }
.mytvshow-stats-table th { text-align: left; padding: 8px 12px 8px 0; width: 200px; font-weight: 600; color: #555; font-size: 13px; }
.mytvshow-stats-table td { padding: 8px 0; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
.mytvshow-notice {
  padding: 10px 14px; border-radius: 4px; font-size: 13px; margin-top: 10px;
  border-left: 4px solid #46a147; background: #f0fff0; color: #1d6b21;
}
.mytvshow-notice--error   { border-color: #d63638; background: #fff5f5; color: #8b0000; }
.mytvshow-notice--warning { border-color: #dba617; background: #fefbe3; color: #7a5c00; margin-bottom: 16px; }
.mytvshow-notice--info    { border-color: #2271b1; background: #f0f6fc; color: #1d4289; }
.mytvshow-dashboard-videos { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .mytvshow-dashboard-videos { grid-template-columns: repeat(3,1fr); } }
.mytvshow-dashboard-video a { text-decoration: none; color: inherit; display: block; }
.mytvshow-dashboard-video__thumb {
  position: relative; aspect-ratio: 16/9; background: #e0e0e0;
  border-radius: 4px; overflow: hidden; margin-bottom: 5px;
}
.mytvshow-dashboard-video__thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.mytvshow-dashboard-video__title {
  font-size: 11px; margin: 0; line-height: 1.4; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #333;
}
.mytvshow-card--pro-cta { background: linear-gradient(135deg,#141414,#1f1f1f); border-color: #e50914; color: #fff; }
.mytvshow-card--pro-cta h2 { border-color: #e50914; color: #e50914; }
.mytvshow-card--pro-cta p { color: #aaa; margin-bottom: 12px; }
.mytvshow-pro-features-inline { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; font-size: 12px; color: #ccc; }
.mytvshow-upgrade-hero {
  background: linear-gradient(135deg,#141414,#2a0a0a); border: 1px solid #e50914;
  border-radius: 6px; padding: 40px; text-align: center; margin-bottom: 28px;
}
.mytvshow-upgrade-hero h2 { font-size: 26px; color: #fff; margin-bottom: 10px; }
.mytvshow-upgrade-hero p  { font-size: 15px; color: #999; margin-bottom: 22px; }
.mytvshow-upgrade-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 768px) { .mytvshow-upgrade-features { grid-template-columns: 1fr 1fr; } }
.mytvshow-upgrade-feature { background: #fff; border: 1px solid #e2e4e7; border-radius: 6px; padding: 18px; text-align: center; }
.mytvshow-upgrade-feature__icon { font-size: 28px; display: block; margin-bottom: 8px; }
.mytvshow-upgrade-feature h3 { font-size: 13px; margin: 0 0 5px; }
.mytvshow-upgrade-feature p  { font-size: 12px; color: #666; margin: 0; }
.mytvshow-card--trial { background: linear-gradient(135deg,#0d1f3c,#1a3a5c); border-color: #f0b429; color: #fff; }
.mytvshow-card--trial h2 { border-color: #f0b429; color: #f0b429; }
.mytvshow-card--trial p { color: #b8cfe0; font-size: 13px; margin: 6px 0 10px; }
.mytvshow-trial-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mytvshow-trial-badge { background: #f0b429; color: #111; font-weight: 800; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.mytvshow-trial-days { color: #f0b429; font-size: 14px; font-weight: 700; }
.mytvshow-trial-bar { width: 100%; height: 5px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.mytvshow-trial-bar__fill { height: 100%; background: linear-gradient(90deg,#f0b429,#ff6b35); border-radius: 3px; }
.mytvshow-trial-notice { border-left-color: #f0b429 !important; background: #fffbeb !important; }