/* ═══════════════════════════════════════════════════════════════════
   RSKTV Player Pro  ·  Samsung Tizen 6  ·  1920 × 1080
   Netflix / Apple TV Premium Edition  —  Full CSS rewrite
═══════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  /* Brand */
  --red:             #E50914;
  --red-deep:        #A8060F;
  --red-glow:        rgba(229,9,20,0.40);

  /* ── Palette Netflix Premium — OLED-optimised ──────────────────── */
  --bg-void:         #080808;     /* noir pur OLED            */
  --bg-base:         #141414;     /* Netflix exact            */
  --bg-panel:        #1a1a1a;     /* sidebar & panels         */
  --bg-surface:      #1f1f1f;     /* list rows at rest        */
  --bg-elevated:     #262626;     /* elevated cards           */
  --bg-input:        #1a1a1a;     /* input fields             */
  --bg-glass:        rgba(20,20,20,0.82);  /* glassmorphism panels  */

  /* Text — Netflix white scale */
  --t1:              #FFFFFF;     /* primary — blanc pur      */
  --t2:              #B3B3B3;     /* secondary — gris Netflix */
  --t3:              #6B6B6B;     /* muted / inactive         */

  /* Nouveaux tokens Netflix */
  --nfx-red:         #E50914;     /* Netflix red exact        */
  --nfx-red-hover:   #F40612;     /* Rouge hover (plus vif)   */
  --nfx-card-grad:   linear-gradient(to top, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.45) 45%, transparent 100%);
  --nfx-overlay:     linear-gradient(to bottom, rgba(0,0,0,0.80) 0%, transparent 30%, transparent 65%, rgba(0,0,0,0.95) 100%);

  /* Accents */
  --gold:            #F5A623;
  --green:           #3ECF6B;
  --blue:            #4A9EF5;

  /* Borders */
  --b1:              rgba(255,255,255,0.05);
  --b2:              rgba(255,255,255,0.09);
  --b3:              rgba(255,255,255,0.16);
  --bred:            rgba(229,9,20,0.35);

  /* Layout — valeurs relatives au viewport pour compatibilité toutes tailles Samsung */
  --sidebar-w:       25vw;    /* 25 % du viewport (= 480px sur 1920px, 320px sur 1280px) */
  --sidebar-w-icon:  70px;    /* sidebar icônes seules — fixe intentionnel */
  --safe:            7.81vw;  /* Samsung TV safe zone : 7.81% ≈ 150px sur 1920, ≈100px sur 1280 */
  --safe-v:          8.33vh;  /* Safe zone verticale : 8.33% ≈ 90px sur 1080, ≈60px sur 720 */
  --topnav-h:        150px;   /* Hauteur topnav = 110px barre + 40px inset haut (overscan TV). 07/06/2026 */
  --radius:          14px;
  --radius-lg:       22px;
  --radius-xl:       30px;

  /* ═══════════════════════════════════════════════════════════════
     CHARTE TYPOGRAPHIQUE TV 55"  —  aucune valeur < 32 px
  ═══════════════════════════════════════════════════════════════ */
  --font-hero-title:     88px;   /* titres héros dashboard          */
  --font-category-title: 80px;   /* titres de catégorie (col-header) */
  --font-card-title:     45px;   /* noms chaînes / titres de cartes  */
  --font-body:           36px;   /* texte courant                    */
  --font-title:          48px;   /* titres de section                */
  --font-card:           36px;   /* texte des cartes                 */
  --font-main:           38px;   /* navigation, menus                */
  --font-small:          32px;   /* minimum absolu — rien en dessous */
  --font-epg:            35px;   /* guide TV interactif              */

  /* Backward-compat aliases */
  --black:           var(--bg-void);
  --black2:          var(--bg-base);
  --surface:         var(--bg-surface);
  --surface2:        var(--bg-elevated);
  --card:            var(--bg-elevated);
  --card2:           var(--bg-elevated);
  --text:            var(--t1);
  --text2:           var(--t2);
  --text3:           var(--t3);
  --primary-color:   #E50914;
  --focus:           2px solid rgba(255,255,255,0.9);
  --focus-red:       2px solid var(--red);
  --transition:      all 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ──────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
:focus { outline: none; }

/* ── Curseur souris invisible — Samsung TV télécommande uniquement ── */
/* Tizen peut afficher le pointeur système même sans souris connectée.
   cursor:none CSS seul est insuffisant sur Tizen 4/5 car le pointeur
   Samsung est rendu au niveau OS. Solution : curseur transparent 1×1 px
   (data URI GIF) + none en fallback. Quadruple blindage. */
html, body { cursor: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') 0 0, none !important; }
*, *::before, *::after { cursor: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') 0 0, none !important; }
#app-ui, #screen-player, #app-bg, #avplay-wrap { cursor: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') 0 0, none !important; }

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* ── TRANSPARENT : laisse passer la couche vidéo matérielle AVPlay ── */
  background: transparent !important;
  color: var(--t1);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 24px;  /* Samsung TV minimum : 24px */
  -webkit-font-smoothing: antialiased;
}

/* ── Fond opaque picker — bloque fond Samsung (body est transparent pour AVPlay) ── */
body.picker-active {
  background: #000 !important;
}

/* ── Conteneur UI principal ─────────────────────────────────────────
   Regroupe tous les écrans de l'appli.
   Fond noir opaque quand l'UI est visible ;
   caché (display:none) dès que le player démarre → le body transparent
   laisse apparaître la vidéo AVPlay dans la couche matérielle.          */
#app-ui {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0C0C18;
  background: var(--bg-base);
  overflow: hidden;
  z-index: 100;
}

/* Fond permanent — rendu TOUJOURS, indépendamment des CSS var() et des
   transitions display:none→flex. C'est la couche sombre de base de toute
   l'UI. Le body est transparent (AVPlay), #app-ui peut l'être aussi si var()
   échoue sur Tizen 4 → #app-bg garantit la visibilité en dernier recours. */
#app-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0C0C18;
  z-index: 0;
  pointer-events: none;
}

/* ── Écran player — totalement transparent ──────────────────────────
   La vidéo AVPlay est rendue en dessous par le compositor Tizen.
   Cet écran ne doit PAS avoir de fond sinon il masque la vidéo.         */
#screen-player {
  background: transparent !important;
  /* z-index > #app-ui (100) → l'overlay player est toujours au-dessus de la couche UI */
  z-index: 200;
}
#screen-player.active {
  z-index: 200;
}

/* ── Wrapper objet AVPlay ───────────────────────────────────────────
   Enfant direct de <body> — toujours dans l'arbre de rendu (jamais
   caché par un parent display:none). position:fixed → couvre le
   viewport entier. z-index:-1 → derrière tout le HTML.
   setDisplayRect() contrôle le rect vidéo visible dans le compositor. */
#avplay-wrap {
  position: fixed;
  top: 0; left: 0;
  /* Masqué par défaut — rendu visible uniquement par _positionAvplayWrap() au moment du play */
  width: 0; height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: transparent !important;
  z-index: -1;
  pointer-events: none;
}
#av-player {
  /* 100% : suit la taille de #avplay-wrap.
     Mini-preview → wrap réduit à la box ; fullscreen → wrap = 1920×1080. */
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0;
  /* Fix point blanc Tizen 4 : AVPlay force le focus natif sur <object>
     quand av.play() est appelé. Le WebKit Tizen 4 dessine son propre
     indicateur de focus (point/anneau blanc) qui échappe à outline:none.
     outline, -webkit-tap-highlight-color et user-select bloquent les 3
     mécanismes de rendu de focus connus sur Tizen 4/5/6/7. */
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* ── Universal focusable — transition base ──────────────────────── */
.focusable {
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.22s cubic-bezier(0.4,0,0.2,1),
              background  0.18s ease,
              border-color 0.18s ease;
  position: relative;
}

/* ── Focus Engine 2.0 v158 ── GPU-promotion UNIQUEMENT sur l'élément focalisé ──
   AVANT : will-change sur TOUS les .focusable → N couches GPU (ex: 200 chaînes = 200 layers)
           → épuisement mémoire GPU Tizen → navigation saccadée
   APRÈS : will-change: auto sur .focusable (pas de couche GPU préallouée)
           will-change: transform, box-shadow UNIQUEMENT sur .focused (1 seule couche active)
   Gain estimé : -60 à -80% de charge GPU pendant la navigation ────────────── */
.focusable {
  will-change: auto;  /* v158 — pas de pré-promotion GPU sur les éléments non-focalisés */
  -webkit-transition: -webkit-transform 0.12s ease-out, box-shadow 0.12s ease-out;
  transition:         transform         0.12s ease-out, box-shadow 0.12s ease-out;
}
.focusable.focused {
  outline: none !important;
  will-change: transform, box-shadow; /* GPU uniquement pour l'élément actif */
  /* Halo rouge + halo de profondeur — visible sur dalles OLED (fort contraste) */
  box-shadow: 0 0 0 3px rgba(229,9,20,0.95),
              0 0 0 8px rgba(229,9,20,0.18),
              0 0 32px 4px rgba(229,9,20,0.12),
              0 16px 56px rgba(0,0,0,0.85);
  -webkit-transform: scale(1.07) translateZ(0);
  transform:         scale(1.07) translateZ(0);
  z-index: 20;
}

/* Classic UI buttons keep their own look */
.modal-btn:focus,
.pl-ctrl-btn:focus,
.pl-back-btn:focus,
.act-btn:focus,
.search-key:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.75),
              0 4px 20px rgba(0,0,0,0.5) !important;
  transform: none !important;
}

/* ── Screens ────────────────────────────────────────────────────── */
.screen {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  background: #0C0C18;          /* Tizen 4 fallback */
  background: var(--bg-base);
}
.screen.active { display: flex; }


/* ═══════════════════════════════════════════════════════════════════
   SPLASH SCREEN — Cinematic full-screen landing
=================================================================== */

#screen-splash {
  background: #000;
  overflow: hidden;
}
#screen-splash.spl-fadeout { opacity: 0; pointer-events: none; }

/* ── Grille cinéma en fond ───────────────────────────────────────────────── */
.spl-grid-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: -webkit-flex; display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px;
  -webkit-transform: rotate(-4deg) scale(1.12) translateZ(0);
  transform: rotate(-4deg) scale(1.12) translateZ(0);
  filter: brightness(0.30) saturate(1.3);
  opacity: 0;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
  will-change: transform;
}
.spl-grid-bg.spl-bg-show {
  opacity: 1;
  -webkit-animation: spl-drift 18s linear infinite alternate;
  animation: spl-drift 18s linear infinite alternate;
}
@-webkit-keyframes spl-drift {
  from { -webkit-transform: rotate(-4deg) scale(1.12) translate(0,0) translateZ(0); }
  to   { -webkit-transform: rotate(-3deg) scale(1.12) translate(-30px,-20px) translateZ(0); }
}
@keyframes spl-drift {
  from { transform: rotate(-4deg) scale(1.12) translate(0,0) translateZ(0); }
  to   { transform: rotate(-3deg) scale(1.12) translate(-30px,-20px) translateZ(0); }
}
.spl-grid-row { display: -webkit-flex; display: flex; gap: 16px; -webkit-flex: 1; flex: 1; }
.spl-grid-row-2 { margin-left: 60px; }
.spl-grid-row-3 { margin-left: -30px; }
.spl-card { -webkit-flex: 1; flex: 1; border-radius: 14px; background-size: cover; background-position: center; }
.spl-card.sc1 { background: linear-gradient(145deg,#0d1b4b,#1e3a8a,#0a0d1a); }
.spl-card.sc2 { background: linear-gradient(145deg,#3d0808,#991b1b,#1a0303); }
.spl-card.sc3 { background: linear-gradient(145deg,#064e3b,#065f46,#022c22); }
.spl-card.sc4 { background: linear-gradient(145deg,#1e1b4b,#4338ca,#0f0d2e); }
.spl-card.sc5 { background: linear-gradient(145deg,#451a03,#92400e,#1c0802); }
.spl-card.sc6 { background: linear-gradient(145deg,#0c1a26,#164e63,#051018); }

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.spl-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.70) 40%, rgba(0,0,0,0.40) 70%, rgba(0,0,0,0.60) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}

/* ── BURST — explosion de lumière rouge ──────────────────────────────────── */
.spl-burst {
  position: absolute;
  top: 50%; left: 38%;
  width: 10px; height: 10px;
  margin-top: -5px; margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229,9,20,0.95) 0%, rgba(229,9,20,0.3) 50%, rgba(229,9,20,0) 100%);
  z-index: 2;
  opacity: 0;
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
  will-change: transform, opacity;
  pointer-events: none;
}
.spl-burst.spl-burst-fire {
  -webkit-animation: spl-burst-anim 1.0s cubic-bezier(0.12,0,0.39,0) forwards;
  animation: spl-burst-anim 1.0s cubic-bezier(0.12,0,0.39,0) forwards;
}
@-webkit-keyframes spl-burst-anim {
  0%   { opacity: 0;   -webkit-transform: scale(0) translateZ(0); }
  18%  { opacity: 1;   -webkit-transform: scale(80) translateZ(0); }
  60%  { opacity: 0.6; -webkit-transform: scale(160) translateZ(0); }
  100% { opacity: 0;   -webkit-transform: scale(240) translateZ(0); }
}
@keyframes spl-burst-anim {
  0%   { opacity: 0;   transform: scale(0) translateZ(0); }
  18%  { opacity: 1;   transform: scale(80) translateZ(0); }
  60%  { opacity: 0.6; transform: scale(160) translateZ(0); }
  100% { opacity: 0;   transform: scale(240) translateZ(0); }
}

/* ── SCAN LINE ────────────────────────────────────────────────────────────── */
.spl-scan-line {
  position: absolute;
  top: 0; left: -100%; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom,
    rgba(229,9,20,0) 0%, rgba(229,9,20,0.8) 45%,
    rgba(255,255,255,1) 50%, rgba(229,9,20,0.8) 55%,
    rgba(229,9,20,0) 100%);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.spl-scan-line.spl-scan-go {
  opacity: 1;
  -webkit-animation: spl-scan-anim 0.9s cubic-bezier(0.4,0,0.6,1) forwards;
  animation: spl-scan-anim 0.9s cubic-bezier(0.4,0,0.6,1) forwards;
}
@-webkit-keyframes spl-scan-anim {
  from { -webkit-transform: translateX(0) translateZ(0); opacity: 1; }
  90%  { -webkit-transform: translateX(2100px) translateZ(0); opacity: 1; }
  to   { -webkit-transform: translateX(2100px) translateZ(0); opacity: 0; }
}
@keyframes spl-scan-anim {
  from { transform: translateX(0) translateZ(0); opacity: 1; }
  90%  { transform: translateX(2100px) translateZ(0); opacity: 1; }
  to   { transform: translateX(2100px) translateZ(0); opacity: 0; }
}

/* ── BLOC CENTRAL — logo + texte ─────────────────────────────────────────── */
.spl-center-block {
  position: absolute;
  top: 50%; left: var(--safe, 120px);
  -webkit-transform: translateY(-50%) translateZ(0);
  transform: translateY(-50%) translateZ(0);
  display: -webkit-flex; display: flex;
  align-items: center;
  gap: 36px;
  z-index: 5;
}
.spl-icon-wrap {
  position: relative;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  opacity: 0;
  -webkit-transform: scale(0.5) translateZ(0);
  transform: scale(0.5) translateZ(0);
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  will-change: transform, opacity;
}
.spl-icon-wrap.spl-icon-show {
  opacity: 1;
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
}
.spl-icon-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229,9,20,0.6) 0%, rgba(229,9,20,0) 70%);
  pointer-events: none;
  -webkit-animation: spl-icon-pulse 2.5s ease-in-out infinite;
  animation: spl-icon-pulse 2.5s ease-in-out infinite;
}
@-webkit-keyframes spl-icon-pulse {
  0%,100% { opacity: 0.5; -webkit-transform: scale(1); }
  50%     { opacity: 1;   -webkit-transform: scale(1.25); }
}
@keyframes spl-icon-pulse {
  0%,100% { opacity: 0.5; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.25); }
}
.spl-wordmark-wrap {
  display: -webkit-flex; display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 8px;
  overflow: hidden;
}
.spl-wm-rsktv {
  font-size: 96px; font-weight: 900; color: #F0F0FF;
  letter-spacing: 8px;
  opacity: 0;
  -webkit-transform: translateX(-40px) translateZ(0);
  transform: translateX(-40px) translateZ(0);
  -webkit-transition: opacity 0.55s ease, -webkit-transform 0.55s cubic-bezier(0.4,0,0.2,1);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
}
.spl-wm-rsktv.spl-text-show  { opacity: 1; -webkit-transform: translateX(0) translateZ(0); transform: translateX(0) translateZ(0); }
.spl-wm-player {
  font-size: 36px; font-weight: 300; color: rgba(255,255,255,0.55);
  letter-spacing: 22px; text-transform: uppercase;
  opacity: 0;
  -webkit-transform: translateX(-30px) translateZ(0);
  transform: translateX(-30px) translateZ(0);
  -webkit-transition: opacity 0.55s ease 0.18s, -webkit-transform 0.55s cubic-bezier(0.4,0,0.2,1) 0.18s;
  transition: opacity 0.55s ease 0.18s, transform 0.55s cubic-bezier(0.4,0,0.2,1) 0.18s;
  will-change: transform, opacity;
}
.spl-wm-player.spl-text-show { opacity: 1; -webkit-transform: translateX(0) translateZ(0); transform: translateX(0) translateZ(0); }

/* Tagline bas gauche */
.spl-tagline-bot {
  position: absolute;
  bottom: var(--safe-v, 80px);
  left: var(--safe, 120px);
  font-size: 26px; font-weight: 300; color: rgba(255,255,255,0.35);
  letter-spacing: 5px; text-transform: uppercase;
  z-index: 5;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease 0.3s;
  transition: opacity 0.6s ease 0.3s;
}
.spl-tagline-bot.spl-tagline-show { opacity: 1; }

/* ── PANEL DROITE — tendances ─────────────────────────────────────────────── */
.spl-right-panel {
  position: absolute;
  top: var(--safe-v, 80px); right: var(--safe, 120px);
  width: 600px;
  z-index: 5;
  opacity: 0;
  -webkit-transform: translateX(50px) translateZ(0);
  transform: translateX(50px) translateZ(0);
  -webkit-transition: opacity 0.7s ease, -webkit-transform 0.7s cubic-bezier(0.4,0,0.2,1);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
}
.spl-right-panel.spl-right-show { opacity: 1; -webkit-transform: translateX(0) translateZ(0); transform: translateX(0) translateZ(0); }
.spl-trending-label {
  font-size: 22px; font-weight: 700; color: rgba(255,255,255,0.6);
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 20px;
  border-left: 3px solid #E50914;
  padding-left: 14px;
}
.spl-trending-row { display: -webkit-flex; display: flex; gap: 14px; }
.spl-thumb {
  -webkit-flex: 1; flex: 1; border-radius: 12px; overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.spl-thumb::before { content: ''; display: block; padding-bottom: 150%; }
.spl-thumb-inner {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: -webkit-flex; display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
}
.spl-thumb.st1 { background: linear-gradient(160deg,#0d1b4b,#1e3a8a); }
.spl-thumb.st2 { background: linear-gradient(160deg,#3d0808,#991b1b); }
.spl-thumb.st3 { background: linear-gradient(160deg,#1e1b4b,#4338ca); }
.spl-thumb.st4 { background: linear-gradient(160deg,#064e3b,#065f46); }
.spl-thumb.spl-thumb-focus { border: 2px solid rgba(229,9,20,0.80); box-shadow: 0 0 20px rgba(229,9,20,0.30); }
.spl-thumb-num  { font-size: 32px; font-weight: 900; color: rgba(255,255,255,0.85); }
.spl-thumb-live { font-size: 16px; font-weight: 700; color: #fff; background: #E50914; border-radius: 4px; padding: 2px 8px; margin-top: 4px; letter-spacing: 1px; }


.spl-loading {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  background: rgba(0,0,0,0.92);
  z-index: 30;
}
.spl-loading.spl-visible {
  display: -webkit-flex;
  display: flex;
  -webkit-animation: spl-load-in 0.5s ease forwards;
  animation: spl-load-in 0.5s ease forwards;
}
@-webkit-keyframes spl-load-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes spl-load-in {
  from { opacity: 0; } to { opacity: 1; }
}
/* compat ancienne structure spl-load-logo-wrap */
.spl-load-logo-wrap {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 16px;
}
/* structure spl-load-center/logo-row/icon (backup) */
.spl-load-center { margin-bottom: 32px; }
.spl-load-logo-row {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 18px;
}
.spl-load-icon { display: -webkit-flex; display: flex; align-items: center; }
.spl-load-brand {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #FFFFFF;
  text-indent: 8px;
}
.spl-load-brand span {
  font-weight: 200;
  letter-spacing: 16px;
  color: rgba(255,255,255,0.40);
  font-size: 28px;
  margin-left: 10px;
}
.spl-load-msg {
  font-size: 24px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 40px;
  margin-bottom: 20px;
}
.spl-load-bar-wrap {
  width: 440px;
  height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  overflow: hidden;
}
.spl-load-bar {
  height: 3px;
  background: linear-gradient(90deg, #C00, #E50914, #FF4444);
  border-radius: 2px;
  width: 0%;
  -webkit-transition: width 0.5s ease;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(229,9,20,0.6);
}

/* ── Disclaimer légal bilingue ──────────────────────────────────────────── */
.spl-disclaimer {
  position: absolute;
  bottom: 36px;
  left: 100px; right: 100px;
  font-size: 24px;
  line-height: 1.7;
  color: #E50914;
  text-align: center;
  letter-spacing: 0.3px;
}
.spl-disclaimer-fr { font-weight: 400; }
.spl-disclaimer-sep { color: rgba(229,9,20,0.40); margin: 0 8px; }
.spl-disclaimer-en { font-weight: 300; color: rgba(229,9,20,0.75); font-style: italic; }

/* ── Identifiant appareil (masqué) ─────────────────────────────────────── */
.spl-device-id { display: none; }

#screen-activation {
  display: none;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}
#screen-activation.active {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

/* ═══ ACTIVATION — 10-foot premium UI (Tizen 4 safe, px only) ═══ */

/* Fond */
.act-bg {
  position: absolute; top:0; left:0; right:0; bottom:0; z-index:0;
  background: linear-gradient(135deg, #0d0d0f 0%, #090909 55%, #0e0004 100%);
}

/* Conteneur principal */
.act-hub {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  padding: 48px 80px 40px 140px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  overflow: hidden;
}

/* ─ Header : logo + titre ─────────────────────────────────────────────────── */
.act-hub-header {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: flex-start; align-items: flex-start;
  margin-bottom: 20px;
}
/* Badge promo 7 jours */
.act-hub-badge {
  display: inline-block;
  background: -webkit-linear-gradient(left, rgba(229,9,20,0.9), rgba(180,0,10,0.7));
  background: linear-gradient(90deg, rgba(229,9,20,0.9), rgba(180,0,10,0.7));
  border-radius: 40px;
  padding: 10px 28px;
  font-size: 20px; font-weight: 900;
  color: #fff; letter-spacing: 2px;
  text-transform: uppercase;
}
.act-badge-icon {
  color: #FFD700; margin-right: 10px; font-size: 18px;
}

.act-hub-brand.act-brand { -webkit-flex: 0 0 auto; flex: 0 0 auto; }

.act-brand {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 22px;
}
.act-brand-logo {
  width: 56px; height: 56px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.act-brand-name {
  font-size: 32px; font-weight: 900;
  color: rgba(255,255,255,0.92); letter-spacing: 2px;
}
.act-brand-name span { color: #E50914; }
.act-brand-name em {
  font-style: normal; font-weight: 400; font-size: 19px;
  color: rgba(255,255,255,0.35); display: block;
  letter-spacing: 4px; text-transform: uppercase; margin-top: 3px;
}

.act-hub-heading { -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.act-hub-title {
  margin: 0; font-size: 80px; font-weight: 900;
  color: #fff; letter-spacing: -1.5px; line-height: 1.0;
  text-transform: none;
}
.act-hub-tagline {
  margin: 4px 0 0; font-size: 26px;
  color: rgba(255,255,255,0.5); font-weight: 400;
  font-style: italic;
}

/* Instructions — 3 étapes numérotées, compactes */
.act-hub-instructions {
  margin-bottom: 24px;
}
.act-hub-steps {
  list-style: none; margin: 0; padding: 0;
}
.act-hub-steps li {
  font-size: 26px; color: rgba(255,255,255,0.65);
  line-height: 1.4;
  margin-bottom: 12px;
}
.act-hub-steps li:last-child { margin-bottom: 0; }
.act-step-n {
  display: inline-block;
  font-size: 15px; font-weight: 900;
  color: #E50914;
  background: rgba(229,9,20,0.15);
  border: 2px solid rgba(229,9,20,0.4);
  border-radius: 50%;
  width: 32px; height: 32px; line-height: 28px;
  text-align: center;
  letter-spacing: 0;
  margin-right: 14px;
  vertical-align: middle;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.act-hub-steps strong { color: rgba(255,255,255,0.75); font-weight: 700; }
.act-hub-url { color: #7ecbff; font-weight: 700; }

/* ─ Bloc contact — mode expiré ───────────────────────────────────────────── */
.act-contact-block {
  display: none;
  margin-bottom: 24px;
}
.act-contact-msg {
  font-size: 26px; color: rgba(255,255,255,0.7);
  margin: 0 0 18px; line-height: 1.45;
}
.act-contact-opts {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
.act-contact-opt {
  font-size: 24px; color: rgba(255,255,255,0.55);
  margin-bottom: 10px; line-height: 1.4;
}
.act-contact-ico { font-size: 22px; }
.act-contact-opt strong { color: rgba(255,255,255,0.85); }

/* ─ Mode TRIAL : badge vert/bleu ─────────────────────────────────────────── */
#screen-activation.act-mode-trial .act-hub-badge {
  background: -webkit-linear-gradient(left, rgba(20,160,80,0.9), rgba(10,120,60,0.7));
  background: linear-gradient(90deg, rgba(20,160,80,0.9), rgba(10,120,60,0.7));
}

/* ─ Mode EXPIRÉ ──────────────────────────────────────────────────────────── */
#screen-activation.act-mode-expired .act-hub-badge {
  background: -webkit-linear-gradient(left, rgba(180,100,0,0.9), rgba(140,70,0,0.7));
  background: linear-gradient(90deg, rgba(180,100,0,0.9), rgba(140,70,0,0.7));
}
#screen-activation.act-mode-expired .act-hub-instructions { display: none; }
#screen-activation.act-mode-expired .act-contact-block    { display: block; }

/* ─ Colonnes ─────────────────────────────────────────────────────────────── */
.act-hub-panels {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-align-items: stretch; align-items: stretch;
  gap: 0;
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  min-height: 0;
}

.act-hub-panel {
  -webkit-box-sizing: border-box; box-sizing: border-box;
  min-width: 0;
}

/* Colonne gauche — infos device */
.act-hub-panel--device {
  -webkit-flex: 0 0 54%; flex: 0 0 54%;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: center; justify-content: center;
  gap: 28px;
  padding-right: 60px;
}

/* Colonne droite — QR + action */
.act-hub-panel--action {
  -webkit-flex: 1 1 auto; flex: 1 1 auto;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap: 24px;
  border-left: 1px solid rgba(255,255,255,0.07);
  padding-left: 60px;
  background: rgba(255,255,255,0.02);
  border-radius: 0 16px 16px 0;
}

/* Champs MAC / Clé */
.act-hub-field { }
.act-hub-field-lbl {
  display: block; font-size: 18px; font-weight: 800;
  color: rgba(255,255,255,0.3); letter-spacing: 5px;
  text-transform: uppercase; margin-bottom: 12px;
}
.act-hub-field-bar {
  padding: 16px 22px; border-radius: 10px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Clé d'activation — héros de la page */
.act-hub-key-bar {
  padding: 24px 32px;
  background: rgba(229,9,20,0.06);
  border: 1px solid rgba(229,9,20,0.28);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(229,9,20,0.08);
  text-align: center;
}

/* MAC — secondaire */
.act-info-mac {
  font-family: 'Courier New', Courier, monospace;
  font-size: 44px; font-weight: 600;
  color: rgba(0,229,255,0.75); letter-spacing: 4px;
  word-break: break-all; max-width: 100%;
}

/* KEY — héros, très grand */
.act-info-key {
  font-family: 'Courier New', Courier, monospace;
  font-size: 80px; font-weight: 900;
  color: #ffffff; letter-spacing: 18px;
  text-shadow: 0 0 40px rgba(229,9,20,0.4);
  word-break: break-all; max-width: 100%;
  text-align: center;
}

/* Hints télécommande */
.act-hub-remote {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 12px 28px; margin-top: 4px;
}
.act-hub-remote-item {
  font-size: 20px; color: rgba(255,255,255,0.3); letter-spacing: 0.03em;
}
.act-hub-remote-k {
  display: inline-block; margin-right: 8px;
  color: rgba(255,255,255,0.55); font-weight: 700;
}

/* Carte statut — compact pill */
.act-hub-status-card {
  background: rgba(12,12,14,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 40px; padding: 14px 28px;
  -webkit-align-self: center; align-self: center;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.act-hub-status-line {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 10px; font-size: 22px; color: rgba(255,255,255,0.8);
  white-space: nowrap;
}
.act-hub-status-line--sub {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 18px; color: rgba(255,255,255,0.55);
}
.act-hub-status-label { color: rgba(255,255,255,0.35); font-weight: 600; }
.act-hub-status-value {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 10px; min-width: 0;
}
.act-hub-status-exp {
  font-size: 18px; color: rgba(255,255,255,0.55); font-style: italic;
}

/* Point statut + animation */
.act-status-dot {
  display: inline-block; width: 16px; height: 16px;
  border-radius: 50%; background: #F5A623;
  box-shadow: 0 0 12px rgba(245,166,35,0.9);
  -webkit-flex-shrink: 0; flex-shrink: 0;
  -webkit-animation: act-pulse 1.4s ease-in-out infinite;
  animation: act-pulse 1.4s ease-in-out infinite;
}
.act-status-dot.checking {
  background: #F5A623;
  -webkit-animation: act-pulse 0.8s ease-in-out infinite;
  animation: act-pulse 0.8s ease-in-out infinite;
}
.act-status-dot.ok {
  background: #3ecf6b;
  box-shadow: 0 0 12px rgba(62,207,107,1);
  -webkit-animation: none; animation: none;
}
.act-status-dot.error {
  background: #E50914;
  box-shadow: 0 0 12px rgba(229,9,20,1);
  -webkit-animation: none; animation: none;
}
@-webkit-keyframes act-pulse { 0%,100%{opacity:1}50%{opacity:0.15} }
@keyframes act-pulse { 0%,100%{opacity:1}50%{opacity:0.15} }

.act-status-text { font-size: 26px; color: rgba(255,255,255,0.82); min-width: 0; }

/* ─ Bouton principal ──────────────────────────────────────────────────────── */
.act-btn {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap: 14px;
  background: rgba(20,20,24,0.88);
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px; padding: 22px 44px;
  font-size: 26px; font-weight: 900;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: default;
  -webkit-align-self: stretch; align-self: stretch;
  max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;
  min-height: 64px;
}
.act-btn--hero {
  background: -webkit-linear-gradient(top, #e50914 0%, #b0000c 100%);
  background: linear-gradient(180deg, #e50914 0%, #b0000c 100%);
  color: #fff; border: none;
  box-shadow: 0 4px 0 #6a0008, 0 6px 24px rgba(229,9,20,0.35);
  padding: 22px 40px; font-size: 22px;
  letter-spacing: 1.5px;
}
.act-btn--hero #act-btn-icon { color: #fff; }
.act-btn:focus, .act-btn.focused {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}
.act-btn--hero:focus, .act-btn--hero.focused {
  box-shadow: 0 4px 0 #6a0008, 0 0 0 3px rgba(255,255,255,0.5), 0 6px 24px rgba(229,9,20,0.5);
}
.act-btn:disabled { opacity: 0.4; }

/* ── Bouton "Démarrer essai" — visible uniquement en mode trial ── */
#btn-start-trial {
  display: none;
}
.act-mode-trial #btn-start-trial {
  display: -webkit-inline-flex; display: inline-flex;
  background: -webkit-linear-gradient(top, #00b86b 0%, #00884e 100%);
  background: linear-gradient(180deg, #00b86b 0%, #00884e 100%);
  color: #fff; border: none;
  box-shadow: 0 4px 0 #005c34, 0 6px 24px rgba(0,184,107,0.35);
  font-size: 24px; font-weight: 900;
  padding: 26px 48px; letter-spacing: 1.5px;
  margin-top: 16px;
}
.act-mode-trial #btn-start-trial:focus,
.act-mode-trial #btn-start-trial.focused,
.act-mode-trial #btn-start-trial.is-focused {
  box-shadow: 0 4px 0 #005c34, 0 0 0 4px rgba(255,255,255,0.6), 0 6px 24px rgba(0,184,107,0.5);
  -webkit-transform: scale(1.03); transform: scale(1.03);
}
.act-btn-start-icon { font-size: 28px; margin-right: 10px; }

/* En mode trial, cacher le bouton "Vérifier" (inutile pour nouveau client) */
.act-mode-trial #btn-check-activation { display: none; }

/* Erreur */
.act-error {
  display: none; width: 100%; padding: 18px 22px;
  background: rgba(229,9,20,0.1); border: 1px solid rgba(229,9,20,0.3);
  border-radius: 10px; color: #ff6666; font-size: 22px; text-align: center;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}

/* ─ Bloc QR — hero côté droit ─────────────────────────────────────────────── */
.act-hub-qr-block {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  gap: 16px;
}
.act-qr-label {
  font-size: 18px; font-weight: 700;
  color: rgba(255,255,255,0.32); letter-spacing: 4px;
  text-transform: uppercase; text-align: center;
}
.act-qr-frame {
  position: relative; padding: 6px;
  line-height: 0; -webkit-align-self: center; align-self: center;
}
.act-qr-c {
  position: absolute; width: 28px; height: 28px;
  border-color: #E50914; border-style: solid;
}
.act-qr-c.tl { top:-4px; left:-4px; border-width:5px 0 0 5px; }
.act-qr-c.tr { top:-4px; right:-4px; border-width:5px 5px 0 0; }
.act-qr-c.bl { bottom:-4px; left:-4px; border-width:0 0 5px 5px; }
.act-qr-c.br { bottom:-4px; right:-4px; border-width:0 5px 5px 0; }

#qr-canvas:empty {
  display: block; min-width: 300px; min-height: 300px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 10px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.act-qr-canvas {
  background: #fff; border-radius: 6px;
  line-height: 0; font-size: 0; display: block;
}
.act-qr-url {
  font-size: 26px; font-weight: 700;
  color: rgba(255,255,255,0.65); text-align: center;
  letter-spacing: 1px;
}
.act-qr-hint {
  font-size: 17px; color: rgba(255,255,255,0.22);
  text-align: center; line-height: 1.4;
}

/* ─ Footer ───────────────────────────────────────────────────────────────── */
.act-hub-footer { margin-top: auto; padding-top: 14px; }
.act-version {
  font-size: 18px; color: rgba(255,255,255,0.18);
  font-family: 'Courier New', Courier, monospace; letter-spacing: 1px;
}

/* Masquer éléments JS uniquement */
#act-mac, #act-mac-splash, .act-trial-btn { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   HOME SCREEN
═══════════════════════════════════════════════════════════════════ */
#screen-home { display: none; }
#screen-home.active {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}


/* ════════════════════════════════════════════════════════════════════
   TOPNAV — barre horizontale haut
════════════════════════════════════════════════════════════════════ */
.topnav {
  width: 100%;
  /* Hauteur = 110px de barre + 40px d'inset haut (zone d'overscan TV).
     Le contenu (logo/nav/horloge) reste centré dans les 110px du bas grâce à
     align-items:center + padding-top (box-sizing:border-box) → il est repoussé
     sous le bord haut. Valeur concrète, pas de calc(var) (fragile Tizen 4). 07/06/2026 */
  height: 150px;
  flex-shrink: 0;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 0;
  padding: 40px 120px 0; padding: 40px var(--safe) 0;
  /* Netflix : gradient transparent-to-black — pas de border, fondu propre */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.82) 60%,
    rgba(0,0,0,0.55) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative;
  z-index: 9999;
}

/* Logo gauche */
.tn-logo {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  flex-shrink: 0;
  margin-right: 28px;
}
.tn-logo-icon {
  width: 60px; height: 60px;
  flex-shrink: 0;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  margin-right: 14px;
}
.tn-logo-icon img { display: block; }
.tn-logo-text {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  line-height: 1;
}
.tn-rsktv {
  font-size: 38px; font-weight: 900; color: #fff;
  letter-spacing: 6px; text-transform: uppercase;
}
.tn-player {
  font-size: 20px; font-weight: 700; color: #E50914;
  letter-spacing: 5px; text-transform: uppercase;
  margin-top: 5px;
  /* Sous-titre rouge — reflet Netflix "Player" */
}

/* Navigation centrale */
.tn-nav {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.tn-item {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  padding: 10px 22px;
  font-size: 24px; font-weight: 700; color: var(--t2);
  letter-spacing: 1px; text-transform: uppercase;
  border-radius: 8px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
  /* !! PAS de transform ici — la règle .focusable scale(1.14) est annulée ci-dessous */
}
.tn-item:hover {
  color: var(--t1);
  background: rgba(255,255,255,0.06);
}
/* ── Item actif : badge 3D rouge arrondi style bouton power ──────── */
.tn-item.active {
  color: #fff !important;
  background: -webkit-linear-gradient(top, #ff3d3d 0%, #cc0000 55%, #990000 100%);
  background: linear-gradient(180deg, #ff3d3d 0%, #cc0000 55%, #990000 100%);
  border-color: transparent;
  border-radius: 14px;
  -webkit-box-shadow: 0 5px 0 #6a0000, 0 7px 20px rgba(200,0,0,0.50),
                      inset 0 1px 0 rgba(255,255,255,0.28);
  box-shadow: 0 5px 0 #6a0000, 0 7px 20px rgba(200,0,0,0.50),
              inset 0 1px 0 rgba(255,255,255,0.28);
  position: relative;
  -webkit-transform: none !important;
  transform: none !important;
}
/* Pas de barre underline sur le badge 3D */
.tn-item.active::after { display: none !important; }
/* Annule le scale(1.14) du .focusable global — sinon les items se chevauchent */
.tn-item.focusable:focus,
.tn-item.focusable.focused,
.tn-item.focusable.is-focused,
.tn-item.is-focused,
.tn-item:focus,
.tn-item.focused {
  color: #fff !important;
  border-color: transparent;
  background: -webkit-linear-gradient(top, rgba(255,80,80,0.88) 0%, rgba(180,0,0,0.88) 100%);
  background: linear-gradient(180deg, rgba(255,80,80,0.88) 0%, rgba(180,0,0,0.88) 100%);
  border-radius: 14px;
  outline: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-box-shadow: 0 4px 0 rgba(100,0,0,0.55), 0 6px 18px rgba(229,9,20,0.38);
  box-shadow: 0 4px 0 rgba(100,0,0,0.55), 0 6px 18px rgba(229,9,20,0.38);
  z-index: 2;
}
/* Item actif + focus : badge plein + halo blanc */
.tn-item.active.is-focused,
.tn-item.active:focus,
.tn-item.active.focused {
  background: -webkit-linear-gradient(top, #ff3d3d 0%, #cc0000 55%, #990000 100%);
  background: linear-gradient(180deg, #ff3d3d 0%, #cc0000 55%, #990000 100%);
  border-color: transparent;
  -webkit-box-shadow: 0 5px 0 #6a0000, 0 7px 20px rgba(200,0,0,0.50),
                      inset 0 1px 0 rgba(255,255,255,0.28),
                      0 0 0 2px rgba(255,255,255,0.45);
  box-shadow: 0 5px 0 #6a0000, 0 7px 20px rgba(200,0,0,0.50),
              inset 0 1px 0 rgba(255,255,255,0.28),
              0 0 0 2px rgba(255,255,255,0.45);
  -webkit-transform: none !important;
  transform: none !important;
}

/* Droite : horloge + statut */
/* Bouton quitter dans la topnav */
.tn-exit-btn {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  width: 56px; height: 56px;
  background: rgba(229,9,20,0.07);
  border: 1px solid rgba(229,9,20,0.20);
  border-radius: 14px;
  color: rgba(229,9,20,0.65);
  cursor: pointer;
  margin-left: 20px;
  flex-shrink: 0;
  -webkit-transition: background 0.22s ease, border-color 0.22s ease, -webkit-box-shadow 0.22s ease, color 0.22s ease;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.tn-exit-btn:focus,
.tn-exit-btn.focused,
.tn-exit-btn.is-focused {
  background: rgba(229,9,20,0.20) !important;
  border-color: rgba(229,9,20,0.70) !important;
  color: #fff !important;
  -webkit-box-shadow: 0 0 0 2px rgba(229,9,20,0.30), 0 4px 18px rgba(229,9,20,0.22) !important;
  box-shadow: 0 0 0 2px rgba(229,9,20,0.30), 0 4px 18px rgba(229,9,20,0.22) !important;
  outline: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* Panel exit dans settings */
.sett-btn-exit { color: rgba(229,9,20,0.90); }
.sett-btn-exit .sett-btn-ico { color: rgba(229,9,20,0.90); }
.sett-btn-exit.focused,
.sett-btn-exit.is-focused {
  border-color: rgba(229,9,20,0.70) !important;
  background: rgba(229,9,20,0.10) !important;
}

.tn-right {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: flex-end; align-items: flex-end;
  gap: 6px; margin-left: 32px; flex-shrink: 0;
}

/* ── Ligne 1 : JJ/MM/AA  HH:MM ─────────────────────────────────── */
.tn-compact-clock {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: flex-end; justify-content: flex-end;
  gap: 10px;
}
#tn-date {
  font-size: 24px; font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.03em; line-height: 1;
}
#sidebar-clock {
  font-size: 30px; font-weight: 800;
  color: #fff; letter-spacing: -0.5px; line-height: 1;
}
.tn-cc-sep {
  width: 1px; height: 18px;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
}

/* ── Status pill premium ─────────────────────────────────────────── */
.tn-status-pill {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 9px;
  padding: 7px 18px 7px 13px;
  background: rgba(62,207,107,0.06);
  border: 1px solid rgba(62,207,107,0.18);
  border-radius: 100px;
  white-space: nowrap;
  -webkit-box-shadow: 0 0 16px rgba(62,207,107,0.06);
  box-shadow: 0 0 16px rgba(62,207,107,0.06);
  -webkit-transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
/* Rouge si expiré */
.tn-status-pill.expired {
  background: rgba(229,9,20,0.06);
  border-color: rgba(229,9,20,0.22);
  -webkit-box-shadow: 0 0 16px rgba(229,9,20,0.06);
  box-shadow: 0 0 16px rgba(229,9,20,0.06);
}
/* Orange si trial */
.tn-status-pill.trial {
  background: rgba(245,166,35,0.06);
  border-color: rgba(245,166,35,0.22);
  -webkit-box-shadow: 0 0 16px rgba(245,166,35,0.06);
  box-shadow: 0 0 16px rgba(245,166,35,0.06);
}
.tn-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3ECF6B; flex-shrink: 0;
  -webkit-box-shadow: 0 0 6px rgba(62,207,107,0.7);
  box-shadow: 0 0 6px rgba(62,207,107,0.7);
  -webkit-animation: tnDotPulse 2.4s ease-in-out infinite;
  animation: tnDotPulse 2.4s ease-in-out infinite;
}
@-webkit-keyframes tnDotPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@keyframes tnDotPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.tn-status-dot.expired {
  background: #E50914;
  -webkit-box-shadow: 0 0 6px rgba(229,9,20,0.7);
  box-shadow: 0 0 6px rgba(229,9,20,0.7);
}
.tn-status-dot.trial {
  background: #F5A623;
  -webkit-box-shadow: 0 0 6px rgba(245,166,35,0.7);
  box-shadow: 0 0 6px rgba(245,166,35,0.7);
}
.tn-status-playlist { display: none; } /* remplacé par tn-pl-name */
.tn-pl-name {
  font-size: 20px; font-weight: 700;
  color: #fff; letter-spacing: 0.02em;
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tn-status-sep {
  width: 1px; height: 12px;
  background: rgba(255,255,255,0.14);
  flex-shrink: 0;
}
.tn-status-days {
  font-size: 18px; font-weight: 800;
  color: #3ECF6B; letter-spacing: 0.03em;
}
.tn-status-days.expired { color: #E50914; }
.tn-status-days.trial   { color: #F5A623; }
.tn-status-days.warn    { color: #F5A623; }
/* ── Ancien .tn-date-time désactivé (remplacé par .tn-compact-clock) ── */
.tn-date-time { display: none; }
.tn-date { /* géré par #tn-date ci-dessus */ }
.tn-pl-expiry-clock { display: none; }



/* ════════════════════════════════════════════════════════════════════
   MAIN + SECTIONS
════════════════════════════════════════════════════════════════════ */
/* ─ Bandeau countdown trial ──────────────────────────────────────────────── */
.trial-banner {
  position: absolute;
  top: 150px; left: 0; right: 0;   /* suit la nouvelle hauteur de topnav (150px) */
  height: 54px; z-index: 9990;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  padding: 0 120px; padding: 0 var(--safe);
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, transform 0.4s;
}
.trial-banner--hidden {
  opacity: 0;
  -webkit-transform: translateY(-54px); transform: translateY(-54px);
  pointer-events: none;
}
/* Niveau 1 : info (7-4 jours) — bleu discret */
.trial-banner--info {
  background: -webkit-linear-gradient(left, rgba(0,80,180,0.88), rgba(0,40,110,0.7));
  background: linear-gradient(90deg, rgba(0,80,180,0.88), rgba(0,40,110,0.7));
}
/* Niveau 2 : warning (3-2 jours) — orange */
.trial-banner--warn {
  background: -webkit-linear-gradient(left, rgba(190,95,0,0.92), rgba(140,60,0,0.75));
  background: linear-gradient(90deg, rgba(190,95,0,0.92), rgba(140,60,0,0.75));
}
/* Niveau 3 : critique (1 jour) — rouge pulsant */
.trial-banner--crit {
  background: -webkit-linear-gradient(left, rgba(210,10,10,0.95), rgba(150,0,0,0.78));
  background: linear-gradient(90deg, rgba(210,10,10,0.95), rgba(150,0,0,0.78));
  -webkit-animation: trial-pulse 1.8s ease-in-out infinite;
  animation: trial-pulse 1.8s ease-in-out infinite;
}
@-webkit-keyframes trial-pulse { 0%,100%{opacity:1} 50%{opacity:0.65} }
@keyframes         trial-pulse { 0%,100%{opacity:1} 50%{opacity:0.65} }

.trial-banner-icon { font-size: 24px; margin-right: 16px; }
.trial-banner-msg  { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
.trial-banner-cta  { font-size: 20px; color: rgba(255,255,255,0.6); margin-left: 20px; }

.home-main {
  /* Hauteur EXPLICITE via calc() : viewport - topnav.
     Tizen 4 WebKit : flex:1 seul ne propage pas height aux enfants absolus.
     calc() donne une valeur px explicite sans hardcoder 970px/1920px.
     ⚠ var(--topnav-h) non utilisé ici car calc(100% - var()) peut échouer
     sur certains Tizen 4 WebKit — on garde la hauteur en dur dans le calc.
     150px = nouvelle hauteur topnav (110px barre + 40px inset overscan). 07/06/2026 */
  width: 100%; height: 100%;   /* v278 : topnav retiree (v267) -> plus de reservation 150px ; home-main remplit l'ecran (fin du bandeau noir mort en bas) */
  -webkit-flex-shrink: 0; flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: #0C0C18;
}

/* Fond hardcodé — garantit un fond sombre même si var() échoue (Tizen 4).
   POSITION ABSOLUE obligatoire : si les sections sont position:relative dans
   un flex colonne, elles s'EMPILENT et apparaissent toutes visibles en même
   temps (bug DIRECT/RADIO "reste sur l'accueil avec contenu en bas"). */
.content-section {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0C0C18;
  z-index: 1;
}
/* Sur Tizen 4, quand display passe de none à flex, le background n'est
   pas toujours repeint. On le redéclare AUSSI dans la règle .active. */

/* ── Entrée de section — animation premium style Apple TV / Netflix ──────
   Utilise uniquement transform + opacity = couches GPU composites = 0 reflow.
   La transition se déclenche au moment où .active est appliquée (display:flex).
   Courbe easeOut élastique très subtile → sensation de "snap" naturel. */
@-webkit-keyframes sectionEnter {
  from { opacity: 0; -webkit-transform: translateX(16px); transform: translateX(16px); }
  to   { opacity: 1; -webkit-transform: translateX(0);    transform: translateX(0); }
}
@keyframes sectionEnter {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.content-section.active {
  display: -webkit-flex;    /* préfixe Tizen 4 WebKit obligatoire */
  display: flex;
  background: #0C0C18;
  -webkit-animation: sectionEnter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation:         sectionEnter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ════════════════════════════════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════════════════════════════════ */
/* NE PAS mettre display:flex ici — .content-section { display:none } doit s'appliquer
   quand la section n'est pas active. display:flex est géré par .content-section.active.
   Un sélecteur ID (plus spécifique) écraserait la règle display:none de la class → dashboard
   toujours visible même sur les autres écrans. */
#section-dashboard {
  flex-direction: column;
  overflow: hidden !important;
  scrollbar-width: none;
  padding: 0 !important;
  background: #000;
}
#section-dashboard::-webkit-scrollbar { display: none; }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — HERO PLEIN ÉCRAN
════════════════════════════════════════════════════════════════════ */
.dash-hero {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* Backdrop image */
.dash-hero-bg {
  position: absolute; top:0; right:0; bottom:0; left:0
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* transition: background-image removed — non-composited, coûteux sur GPU TV */
  transition: opacity 0.3s ease;
}

/* Gradient gauche → texte lisible */
.dash-hero-grad-left {
  position: absolute; top:0; right:0; bottom:0; left:0
  background: linear-gradient(
    90deg,
    rgba(5,5,12,0.97) 0%,
    rgba(5,5,12,0.82) 28%,
    rgba(5,5,12,0.40) 55%,
    transparent 75%
  );
}

/* Gradient bas → transition vers les tuiles */
.dash-hero-grad-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(to top, rgba(5,5,12,1) 0%, transparent 100%);
}

/* Boutons haut-droite */
.dash-top-bar {
  position: absolute; top: 36px; right: 40px;
  display: flex; gap: 14px; z-index: 10;
}
.dash-action-btn {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: var(--t2); font-size: 18px; font-weight: 700; letter-spacing: 1px;
  padding: 14px 28px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px); /* Tizen 5: ignored, background fallback above */
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.dash-action-btn:focus,
.dash-action-btn:hover {
  background: rgba(255,255,255,0.17);
  color: var(--t1); border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18) !important;
  outline: none !important; transform: none !important;
}

/* Contenu héro (gauche) */
.dash-hero-content {
  position: absolute; bottom: 80px; left: 44px;
  max-width: 750px; z-index: 5;
}

/* Eyebrow "continuer à regarder" */
.dash-hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.dash-hero-eyebrow-line {
  width: 4px; height: 20px;
  background: #E50914;
}
.dash-hero-eyebrow-text {
  font-size: 22px; font-weight: 900;
  color: rgba(229,9,20,0.9);
  letter-spacing: 4px; text-transform: uppercase;
}

.dash-hero-badge {
  display: inline-flex; align-items: center;
  font-size: 22px; font-weight: 900; letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(229,9,20,0.9);
  border-radius: 4px; padding: 5px 14px;
  margin-bottom: 14px;
}
.dash-hero-title {
  font-size: 68px; font-weight: 900;
  color: #fff; line-height: 0.95;
  margin: 0 0 14px 0;
  letter-spacing: -1px;
}

/* Metadata row (tags + dots + infos) */
.dash-hero-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.dash-hero-meta-tag {
  font-size: 20px; font-weight: 900; letter-spacing: 1.5px;
  padding: 3px 12px; border-radius: 3px; white-space: nowrap;
}
.dash-hero-meta-tag--live {
  background: #E50914; color: #fff;
}
.dash-hero-meta-tag--outline {
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.65);
}
.dash-hero-meta-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.3); flex-shrink: 0;
}
.dash-hero-meta-text {
  font-size: 22px; color: rgba(255,255,255,0.38); letter-spacing: 0.5px;
}

.dash-hero-desc {
  font-size: 22px; font-weight: 400; color: rgba(240,240,255,0.6);
  line-height: 1.55; margin: 0 0 28px 0;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.dash-hero-actions {
  display: flex; align-items: center; gap: 16px;
}

/* Bouton principal — blanc sur noir */
.dash-hero-btn-watch {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: none;
  border-radius: 6px;
  color: #0a0a0f; font-size: 22px; font-weight: 900; letter-spacing: 2px;
  padding: 18px 48px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.dash-hero-btn-watch:focus,
.dash-hero-btn-watch:hover,
.dash-hero-btn-watch.focused {
  background: rgba(255,255,255,0.88);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.5) !important;
  outline: none !important;
  transform: scale(1.04) !important;
}

/* Bouton secondaire — transparent */
.dash-hero-btn-fav {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 2px;
  padding: 18px 36px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Barre progression hero */
.dash-hero-progress {
  display: flex; align-items: center; gap: 16px;
  margin-top: 18px;
}
.dash-hero-progress-bar {
  width: 260px; height: 2px;
  background: rgba(255,255,255,0.15);
}
.dash-hero-progress-fill {
  height: 100%; background: #E50914;
}
.dash-hero-progress-pct {
  font-size: 20px; color: rgba(255,255,255,0.35); letter-spacing: 1px;
}
.dash-hero-btn-fav:focus,
.dash-hero-btn-fav:hover {
  background: rgba(229,9,20,0.4);
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(229,9,20,0.5) !important;
  outline: none !important; transform: scale(1.1) !important;
}
.dash-hero-btn-fav.is-fav svg { fill: var(--red); stroke: var(--red); }

/* Continue à regarder (intégré dans le hero) */
.dash-continue-wrap {
  position: absolute; top: 36px; left: 44px; z-index: 5;
  max-width: 500px;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — TUILES CATÉGORIES COLORÉES
════════════════════════════════════════════════════════════════════ */
.dash-tiles-row {
  display: flex; align-items: stretch; gap: 16px;
  padding: 0 40px 32px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, rgba(5,5,12,1) 0%, #07070E 100%);
}

.dash-tile {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 24px 16px 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease, border-color 0.2s ease;
  position: relative; overflow: hidden;
}
.dash-tile::after {
  content: '';
  position: absolute; top:0; right:0; bottom:0; left:0
  border-radius: 18px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dash-tile:focus,
.dash-tile:hover,
.dash-tile.focused {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
  outline: none !important;
}
.dash-tile:focus::after,
.dash-tile:hover::after,
.dash-tile.focused::after {
  opacity: 1;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
}

/* Icône colorée dans un cercle */
.dash-tile-icon {
  width: 80px; height: 80px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.dash-tile:focus .dash-tile-icon,
.dash-tile:hover .dash-tile-icon,
.dash-tile.focused .dash-tile-icon {
  transform: scale(1.12);
}

/* Couleurs par section */
.dash-tile-icon--red    { background: rgba(229,57,53,0.20);  color: #FF5252; }
.dash-tile-icon--blue   { background: rgba(30,136,229,0.20); color: #42A5F5; }
.dash-tile-icon--green  { background: rgba(67,160,71,0.20);  color: #66BB6A; }
.dash-tile-icon--purple { background: rgba(142,36,170,0.20); color: #CE93D8; }
.dash-tile-icon--gold   { background: rgba(249,168,37,0.20); color: #FFD54F; }

/* Effet glow au focus */
.dash-tile:focus .dash-tile-icon--red,
.dash-tile:hover .dash-tile-icon--red,
.dash-tile.focused .dash-tile-icon--red    { background: rgba(229,57,53,0.38);  box-shadow: 0 0 22px rgba(229,57,53,0.4);  }
.dash-tile:focus .dash-tile-icon--blue,
.dash-tile:hover .dash-tile-icon--blue,
.dash-tile.focused .dash-tile-icon--blue   { background: rgba(30,136,229,0.38); box-shadow: 0 0 22px rgba(30,136,229,0.4); }
.dash-tile:focus .dash-tile-icon--green,
.dash-tile:hover .dash-tile-icon--green,
.dash-tile.focused .dash-tile-icon--green  { background: rgba(67,160,71,0.38);  box-shadow: 0 0 22px rgba(67,160,71,0.4);  }
.dash-tile:focus .dash-tile-icon--purple,
.dash-tile:hover .dash-tile-icon--purple,
.dash-tile.focused .dash-tile-icon--purple { background: rgba(142,36,170,0.38); box-shadow: 0 0 22px rgba(142,36,170,0.4); }
.dash-tile:focus .dash-tile-icon--gold,
.dash-tile:hover .dash-tile-icon--gold,
.dash-tile.focused .dash-tile-icon--gold   { background: rgba(249,168,37,0.38); box-shadow: 0 0 22px rgba(249,168,37,0.4); }

.dash-tile-label {
  font-size: 18px; font-weight: 800; color: var(--t1);
  letter-spacing: 2px; text-align: center; text-transform: uppercase;
}

/* ── Rows (conservé pour rétrocompatibilité) ────────────────────── */
.dash-row { flex-shrink: 0; margin-bottom: 50px; }
.dash-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.dash-row-title { display: flex; align-items: center; gap: 16px; font-size: var(--font-category-title); font-weight: 800; color: var(--t1); }
.dash-row-accent { display: block; width: 4px; height: 32px; background: #E50914; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.dash-row-more { font-size: 19px; font-weight: 700; color: var(--red); background: none; border: none; cursor: pointer; }
.dash-row-scroll { display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-bottom: 12px; }
.dash-row-scroll::-webkit-scrollbar { display: none; }
.dash-card { width: 155px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: #161626; background: var(--bg-surface); cursor: pointer; border: 1px solid var(--b1); }
.dash-card-img { width: 155px; height: 233px; object-fit: cover; display: block; }
.dash-card-title { padding: 10px 12px 4px; font-size: 18px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-card-meta { padding: 0 12px 10px; font-size: 19px; color: var(--t3); }


/* ════════════════════════════════════════════════════════════════════
   THREE-COLUMN LAYOUT  (Live TV / Radio)
════════════════════════════════════════════════════════════════════ */
.section-layout { display: flex; width: 100%; height: 100%; }
.three-col-layout { display: flex; width: 100%; height: 100%; }

.col-cats {
  width: 360px; min-width: 360px; height: 100%;
  border-right: 1px solid var(--b1);
  background: #10101E; background: var(--bg-panel);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: opacity 0.22s ease;
}
.col-channels {
  flex: 1; height: 100%;
  border-right: 1px solid var(--b1);
  background: #0C0C18; background: var(--bg-base);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: flex 0.20s ease, width 0.20s ease, opacity 0.22s ease;
  will-change: width, flex;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.col-preview {
  width: 500px; min-width: 500px; height: 100%;
  background: linear-gradient(180deg,
    rgba(12,12,28,0.98) 0%,
    var(--bg-panel) 100%);
  display: flex; flex-direction: column;
  transition: border-color 0.20s ease, opacity 0.22s ease;
  align-items: stretch; justify-content: flex-start;
  padding: 0; gap: 0;
  overflow: hidden;
  border-left: 1px solid var(--b1);
}
.col-header {
  padding: 28px 32px 22px;
  font-size: 27px; font-weight: 800; color: var(--t3);
  letter-spacing: 3px; text-transform: uppercase;
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
.col-cats .cat-list    { flex: 1; height: auto; overflow-y: auto; scrollbar-width: none; }
.col-channels .channel-list { flex: 1; height: auto; overflow-y: auto; scrollbar-width: none; }

/* ── EPG-focus mode : Droite sur une chaîne ouvre le panneau guide ── */
/* col-channels se rétrécit (480px fixe) pour laisser place à l'EPG  */
.three-col-layout.epg-focused .col-channels {
  flex: 0 0 480px;
  min-width: 0;
}
/* Bordure rouge subtile indique que le panneau EPG est actif         */
.three-col-layout.epg-focused .col-preview {
  border-left: 2px solid rgba(229,9,20,0.50);
}
/* Surbrillance de la carte focalisée dans l'EPG en mode actif        */
.three-col-layout.epg-focused .epg-card.focused,
.three-col-layout.epg-focused .epg-card:focus {
  background: rgba(255,255,255,0.10);
  border-left-color: rgba(255,255,255,0.55);
}
.three-col-layout.epg-focused .epg-card.current.focused,
.three-col-layout.epg-focused .epg-card.current:focus {
  background: rgba(229,9,20,0.16);
  border-left-color: var(--red);
}
/* Replay hint toujours visible sur les programmes passés             */
.three-col-layout.epg-focused .epg-card.past .epg-card-replay-hint {
  display: block;
}
/* Hint de navigation dans le header du guide quand actif             */
.three-col-layout.epg-focused .lprev-guide-hint {
  color: rgba(229,9,20,0.80);
}

/* ═══════════════════════════════════════════════════════════════════
   LIVE TV — Nouveau layout 2 colonnes (sidebar + main)
   Noir / Blanc / Rouge — Tizen 4 : no gap, no CSS var() critique
   Gauche : catégories + liste chaînes numérotées
   Droite : card aperçu (logo + infos) + guide EPG en bas
═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   LIVE TV — Layout 3 colonnes : cats | channels | preview vidéo
   Style HotPlayer / iboPlayer
═══════════════════════════════════════════════════════════════════ */

.live-tv-layout {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  width: 100%; height: 100%;
  overflow: hidden;
}

/* ── COL 1 : Catégories ──────────────────────────────────────────── */
.live-cat-col {
  width: 480px; min-width: 480px;
  height: 100%;
  background: #0A0A0A;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  overflow: hidden;
  padding-left: 120px; padding-left: var(--safe);
  -webkit-box-sizing: border-box; box-sizing: border-box;
  /* v163 — transition opacity compositor-only (pas de reflow) */
  -webkit-transition: opacity 0.22s ease;
  transition:         opacity 0.22s ease;
  will-change: opacity;
}

/* ── COL 2 : Chaînes ─────────────────────────────────────────────── */
.live-ch-col {
  width: 520px; min-width: 520px;
  height: 100%;
  background: #0D0D12;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  overflow: hidden;
  /* v163 — transition opacity compositor-only */
  -webkit-transition: opacity 0.22s ease;
  transition:         opacity 0.22s ease;
  will-change: opacity;
}

/* En-tête commun colonnes 1 et 2 */
.live-col-hdr {
  padding: 24px 20px 18px;
  font-size: 26px; font-weight: 800; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.50); text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

/* Cat list dans col 1 */
.live-tv-cat-list {
  -webkit-flex: 1; flex: 1;
  overflow-y: auto; overflow-x: hidden;
  list-style: none; margin: 0; padding: 8px 0 12px;
  scrollbar-width: none;
}
.live-tv-cat-list::-webkit-scrollbar { display: none; }
.live-tv-cat-list .cat-item {
  padding: 20px 24px;
  font-size: 30px;
  border-left: 3px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; -webkit-box-sizing: border-box; box-sizing: border-box;
  width: 100%;
}
.live-tv-cat-list .cat-item.active {
  border-left-color: #FF9500;
  color: #fff;
  background: rgba(255,149,0,0.10);
}

/* Channel list dans col 2 */
.live-tv-ch-list {
  -webkit-flex: 1; flex: 1;
  overflow-y: auto; overflow-x: hidden;
  list-style: none; margin: 0; padding: 6px 0 12px;
  scrollbar-width: none;
}
.live-tv-ch-list::-webkit-scrollbar { display: none; }

/* Barre de raccourcis couleur — pied de page pleine largeur du Direct.
   Position absolue (frere de .live-tv-layout, HORS du chemin video AVPlay) :
   aucun transform/opacity/overflow -> n'affecte pas la couche video hardware. */
.live-actbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  height: 76px;
  display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
  -webkit-align-items: center; align-items: center;
  background: #0A0A0E;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.live-actbar .lab-item {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  margin: 0 30px;
  color: #aeb6c2; font-size: 24px; font-weight: 500; white-space: nowrap;
}
.live-actbar .lab-dot {
  width: 14px; height: 14px; border-radius: 50%; margin-right: 11px;
  -webkit-flex: 0 0 auto; flex: 0 0 auto;
}
.live-actbar .lab-red    { background: #E5484D; }
.live-actbar .lab-green  { background: #46A758; }
.live-actbar .lab-yellow { background: #F5D90A; }
.live-actbar .lab-blue   { background: #3E63DD; }
/* Reserver la hauteur de la barre en bas des colonnes : le curseur centre reste
   exact (clientHeight correct) et rien n'est masque derriere la barre. */
.live-ch-col, .live-cat-col {
  padding-bottom: 76px; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#live-epg-guide { padding-bottom: 80px; }

/* Override channel-item pour la liste Live TV */
.live-tv-ch-list .channel-item {
  -webkit-contain: layout style; /* limite le recalcul CSS au sous-arbre de l'item */
  /* Transitions désactivées — créent/détruisent un GPU layer sur chaque navigation */
  -webkit-transition: none !important;
  transition:         none !important;
  padding: 14px 18px 14px 16px;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.live-tv-ch-list .channel-item:last-child { border-bottom: none; }

/* Bouton "Afficher plus de chaînes" */
.channel-item.ch-load-more {
  justify-content: center; gap: 14px;
  color: var(--t3); font-size: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.channel-item.ch-load-more:focus,
.channel-item.ch-load-more.active-focus {
  background: rgba(229,9,20,0.12) !important;
  color: #fff;
}
.ch-more-icon { font-size: 20px; opacity: 0.6; }
.ch-more-label { font-weight: 600; }

.live-tv-ch-list .channel-num {
  -webkit-order: -1; order: -1;
  min-width: 42px; max-width: 42px;
  text-align: center;
  font-size: 24px; font-weight: 600;
  color: rgba(255,255,255,0.28);
  font-variant-numeric: tabular-nums;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.live-tv-ch-list .channel-item.active .channel-num,
.live-tv-ch-list .channel-item.active-focus .channel-num {
  color: #E50914;
}
.live-tv-ch-list .channel-logo {
  width: 58px; height: 58px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.live-tv-ch-list .channel-name {
  font-size: 30px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-tv-ch-list .channel-epg {
  font-size: 23px;
  color: rgba(255,255,255,0.38);
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── COL 3 : Preview (grande fenêtre vidéo + EPG) ──────────────── */
.live-tv-main {
  -webkit-flex: 1; flex: 1;
  height: 100%;
  background: transparent; /* REQUIS : transparent pour laisser AVPlay visible dans .live-video-box */
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Grande fenêtre vidéo — AVPlay se positionne dedans */
.live-video-box {
  width: 100%;
  height: 490px; min-height: 490px;
  background: transparent; /* REQUIS : AVPlay se rend derrière le HTML — fond opaque = image cachée */
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #1C1C1C;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.live-video-poster {
  width: 100%; height: 100%;
  object-fit: contain;
  position: absolute; top: 0; left: 0;
  display: block;
}
.live-video-fallback {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  gap: 16px; opacity: 0.35;
}
.live-video-tv-icon { font-size: 72px; }
.live-video-hint-text { font-size: 22px; color: #888; }
/* Badges overlay sur la vidéo */
.live-video-badges {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px 20px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  pointer-events: none;
}
.live-tv-live-dot {
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
  color: #FFF; background: #E50914;
  padding: 5px 12px; border-radius: 4px;
}

/* Barre d'info sous la vidéo */
.live-info-bar {
  padding: 18px 24px 16px;
  border-bottom: 1px solid #1C1C1C;
  background: #161616;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.live-info-left { min-width: 0; -webkit-flex: 1; flex: 1; }
.live-tv-ch-name {
  font-size: 32px; font-weight: 900;
  color: #FFFFFF; line-height: 1.1;
  margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-tv-prog-row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  margin-bottom: 6px;
}
.live-tv-prog-row .lprev-now-label {
  margin-right: 12px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.live-tv-prog-title {
  font-size: 20px; font-weight: 500;
  color: rgba(255,255,255,0.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-tv-play-hint {
  font-size: 18px; font-weight: 600;
  color: rgba(255,255,255,0.25); letter-spacing: 1px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  margin-left: 20px;
}

/* Bloc EPG guide */
.live-tv-epg {
  -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  overflow: hidden;
  background: #0D0D0D;
}

/* ── Focus dimming ─────────────────────────────────────────────── */
/* ── Mini-preview AVPlay — masque box-shadow ─────────────────────────────────
   Stratégie Tizen 4 :
   1. #avplay-wrap est repositionné physiquement aux coordonnées de #live-video-box
      (via _positionAvplayWrap dans _startMiniPreview).
   2. setDisplayRect est appelé avec les mêmes coordonnées absolues dans playMini.
   3. #av-player étant en 100% du wrap réduit, le compositor Tizen clippe la vidéo
      exactement dans la fenêtre de prévisualisation.
   4. #mini-video-frame (enfant direct de body, z-index:1) recouvre tout l'écran
      SAUF la zone vidéo via box-shadow — filet de sécurité contre tout débordement.
   La classe .mini-preview-on est gérée par _startMiniPreview() / _stopMiniPreview(). */

/* Masque box-shadow : position + taille définies par JS dans _startMiniPreview */
#mini-video-frame {
  display: none;
  position: fixed;
  z-index: 1; /* au-dessus de la couche vidéo (z:-1) mais sous l'UI (z:100) */
  pointer-events: none;
  background: transparent;
  /* box-shadow colossale : remplit tout l'écran AUTOUR de cette div */
  box-shadow: 0 0 0 3000px #0C0C18;
  border-radius: 4px;
}

body.mini-preview-on #app-bg,
body.mini-preview-on #app-ui,
body.mini-preview-on #screen-home,
body.mini-preview-on #section-live {
  background: transparent !important;
}
/* Tizen 4 : NE PAS utiliser translateZ(0) sur les éléments du chemin vidéo.
   Les couches GPU (compositing layers) créées par translateZ(0) bloquent
   la couche vidéo hardware d'AVPlay — la zone vidéo reste noire même avec
   background:transparent. On désactive aussi le translateZ(0) de .col-channels
   (qui est une sibling dans le même flex) pour éviter le "squashing" de layer
   qui produirait le même effet. */
body.mini-preview-on #live-preview-panel {
  background: transparent !important;
  -webkit-transform: none !important;
  transform: none !important;
}
body.mini-preview-on #live-video-box {
  overflow: visible !important;
  background: transparent !important;
  -webkit-transform: none !important;
  transform: none !important;
}
body.mini-preview-on .col-channels {
  -webkit-transform: none !important;
  transform: none !important;
}
/* Tizen 4 : cacher le fallback (TV icon + texte) quand la vidéo tourne.
   .live-video-fallback a opacity:0.35 → couche GPU composite qui peut bloquer
   la couche vidéo hardware même si son background est transparent.
   Le CSS !important surcharge l'inline style que _updateLiveInfo peut poser. */
body.mini-preview-on #live-mini-fallback {
  display: none !important;
}
/* Idem pour le poster (image logo chaîne) — on laisse la vidéo parler. */
body.mini-preview-on #live-mini-poster {
  display: none !important;
}
/* Fix point blanc + couche GPU opaque : .live-video-badges a un gradient
   rgba(0,0,0,0.75) qui crée une texture composite bloquant la vidéo hardware.
   On le masque pendant la mini-preview. */
body.mini-preview-on .live-video-badges {
  display: none !important;
}
/* Fix mini-preview noire : .live-tv-main { overflow:hidden } force une couche
   de composition GPU sur l'ensemble du panneau preview — cela bloque le plan
   vidéo hardware AVPlay même si tous les backgrounds sont transparents. */
body.mini-preview-on .live-tv-main {
  overflow: visible !important;
}

/* ── Tizen 4 : Fix compositing GPU — cause principale de la prévisualisation noire ────────────
   Quand .live-tv-layout[data-zone="channels"] active opacity:0.38 sur .live-cat-col,
   le WebKit Tizen 4 peut promouvoir TOUTE la .live-tv-layout en une seule couche GPU
   opaque. Cette texture composite masque le flux vidéo hardware d'AVPlay même si
   .live-tv-main est transparent. Pendant la mini-preview, on force opacity:1 sur TOUS
   les éléments qui utilisent opacity, supprime les transitions GPU et overflow:hidden. */
body.mini-preview-on .live-tv-layout {
  overflow: visible !important;
  -webkit-transform: none !important;
  transform: none !important;
  will-change: auto !important;
}
body.mini-preview-on .live-cat-col,
body.mini-preview-on .live-ch-col {
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
  will-change: auto !important;
  -webkit-transition: none !important;
  transition: none !important;
}
body.mini-preview-on .live-info-bar,
body.mini-preview-on .live-tv-epg {
  opacity: 1 !important;
}
/* Assurer que tous les wrappers intermédiaires sont transparents */
body.mini-preview-on .home-main,
body.mini-preview-on .content-section,
body.mini-preview-on .content-main,
body.mini-preview-on .live-tv-layout {
  background: transparent !important;
}

/* ── Tizen 4 : #app-ui crée une stacking context GPU via z-index:100 + overflow:hidden.
   Cette texture composite opaque bloque la couche vidéo hardware d'AVPlay même si
   son background est transparent. Pendant la mini-preview on l'annule totalement. */
body.mini-preview-on #app-ui {
  z-index: auto !important;
  overflow: visible !important;
  -webkit-transform: none !important;
  transform: none !important;
  will-change: auto !important;
}
/* .content-section.active a également z-index:1 + background + overflow qui peut
   créer une couche GPU opaque par-dessus AVPlay. */
body.mini-preview-on .content-section,
body.mini-preview-on .content-section.active {
  z-index: auto !important;
  overflow: visible !important;
  -webkit-transform: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* ── CRITIQUE Tizen 4 : .focusable a will-change:transform + translateZ(0) sur TOUS les
   éléments focusables (nav, cat-item, channel-item...). Chacun crée une couche GPU
   composite — même avec background:transparent, ces couches restent opaques et masquent
   la couche vidéo hardware AVPlay. Solution : désactiver la promotion GPU pendant la
   mini-preview sur l'ensemble de la section Direct TV. */
body.mini-preview-on .focusable {
  will-change: auto !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

/* IMPORTANT : on n'applique PAS opacity à .live-tv-main pour éviter de créer
   une stacking context qui cacherait AVPlay derrière la zone vidéo.
   On dim uniquement les éléments fils qui ont leur propre background. */
/* v163 — dim colonne inactive : 0.25 = contraste dramatique sans perdre le contexte */
.live-tv-layout[data-zone="groups"]   .live-ch-col                          { opacity: 0.25; }
.live-tv-layout[data-zone="groups"]   .live-info-bar,
.live-tv-layout[data-zone="groups"]   .live-tv-epg                          { opacity: 0.25; }
.live-tv-layout[data-zone="channels"] .live-cat-col                         { opacity: 0.25; }
.live-tv-layout[data-zone="channels"] .live-info-bar,
.live-tv-layout[data-zone="channels"] .live-tv-epg                          { opacity: 0.25; }
.live-tv-layout[data-zone="epg"]      .live-cat-col                         { opacity: 0.25; }
.live-tv-layout[data-zone="epg"]      .live-ch-col                          { opacity: 0.25; }

/* EPG focused mode */
.live-tv-layout.epg-focused .live-tv-epg {
  border-top: 2px solid rgba(229,9,20,0.45);
}
.live-tv-layout.epg-focused .lprev-guide-hint {
  color: rgba(229,9,20,0.80);
}

/* ═══════════════════════════════════════════════════════════════════
   ZONE NAVIGATION — opacité différentielle selon la zone active
   data-zone="groups" | "channels" | "epg" | "sidebar"
   Zones inactives → opacity 0.45 pour concentrer le regard (Hotplayer)
═══════════════════════════════════════════════════════════════════ */
.three-col-layout[data-zone="groups"] .col-channels,
.three-col-layout[data-zone="groups"] .col-preview   { opacity: 0.45; }

.three-col-layout[data-zone="channels"] .col-cats    { opacity: 0.45; }
.three-col-layout[data-zone="channels"] .col-preview { opacity: 0.45; }

.three-col-layout[data-zone="epg"] .col-cats         { opacity: 0.45; }
.three-col-layout[data-zone="epg"] .col-channels     { opacity: 0.45; }

/* Sidebar collapse : fondu léger du contenu quand sidebar active */
.three-col-layout[data-zone="sidebar"] .col-cats,
.three-col-layout[data-zone="sidebar"] .col-channels,
.three-col-layout[data-zone="sidebar"] .col-preview  { opacity: 0.35; }

/* ─── updateFocus() — bague rouge 4px (API Premium Navigation) ─────── */
.active-focus {
  outline: 4px solid rgba(229,9,20,0.95);
  box-shadow: 0 0 0 4px #E50914,
              0 0 22px rgba(229,9,20,0.30),
              inset 0 0 0 1px rgba(229,9,20,0.12) !important;
}
/* Cas spécial : channel-item conserve son bg rouge + bague */
.channel-item.active-focus {
  background: rgba(229,9,20,0.18) !important;
  border-left-color: var(--red) !important;
}

/* ════════════════════════════════════════════════════════════════════
   OVERRIDE : .focusable.focused scale(1.07) est incorrect sur les items
   de liste (cat-item, channel-item). Ces éléments ont leur propre règle
   de focus sans scale pour éviter les décalages de layout.
   Priorité max car la règle .focusable.focused est déclarée avant.
════════════════════════════════════════════════════════════════════ */
.cat-item.focusable.focused,
.cat-item.focusable:focus,
.cat-item:focus {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  background: #FF9500 !important;
  border-left: none !important;
  color: #111 !important;
  font-weight: 800 !important;
  box-shadow: inset 6px 0 0 rgba(0,0,0,0.20),
              0 2px 16px rgba(255,149,0,0.35) !important;
  outline: none !important;
}
.channel-item.focusable.focused,
.channel-item.focusable:focus,
.channel-item:focus {
  -webkit-transform: translateX(4px) translateZ(0) !important;
  transform: translateX(4px) translateZ(0) !important;
  box-shadow: none !important;
  background: rgba(229,9,20,0.15) !important;
  border-left-color: #E50914 !important;
  border-left-width: 5px !important;
  outline: none !important;
}
/* Cas spécial : cat-item */
.cat-item.active-focus {
  background: #FF9500 !important;
  border-left: none !important;
  color: #111 !important;
  font-weight: 800 !important;
}

/* ── Category list ─────────────────────────────────────────────── */
.cat-list-wrap { width: 380px; min-width: 380px; height: 100%; border-right: 1px solid var(--b1); overflow: hidden; background: #10101E; background: var(--bg-panel); }
.cat-list-title { padding: 28px 32px 22px; font-size: 27px; font-weight: 800; color: var(--t3); letter-spacing: 3px; text-transform: uppercase; border-bottom: 1px solid var(--b1); }
.cat-list {
  list-style: none;
  height: calc(100% - 80px);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  /* Isolation layout — le browser ne repainte que la liste, pas le reste du layout */
  contain: strict;
}
.cat-list::-webkit-scrollbar { display: none; }

.cat-item {
  padding: 26px 32px;
  font-size: var(--font-body); font-weight: 500; color: var(--t3);
  cursor: pointer;
  border-left: 4px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* GPU-only properties — évite tout reflow lors du focus */
  -webkit-transition: background 0.14s ease, border-color 0.14s ease, color 0.12s ease;
  transition:         background 0.14s ease, border-color 0.14s ease, color 0.12s ease;
  /* Pré-promotion GPU pour que la transition soit sub-frame */
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.cat-item:hover {
  color: var(--t2);
  background: rgba(255,255,255,0.04);
  border-left-color: rgba(255,255,255,0.18);
}
.cat-item.active {
  color: #fff; font-weight: 700;
  background: rgba(255,149,0,0.10);
  border-left-color: #FF9500;
}
/* ── Focus premium cat-item : BLOC PLEIN amber (v163) — impossible à rater ── */
.cat-item:focus,
.cat-item.focused {
  outline: none !important;
  color: #111 !important;              /* texte sombre sur fond clair = max contraste */
  background: #FF9500 !important;      /* amber 100% solide */
  border-left: none !important;        /* remplacé par fond plein */
  font-weight: 800 !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  box-shadow: inset 6px 0 0 rgba(0,0,0,0.20),
              0 2px 16px rgba(255,149,0,0.35) !important;
}

/* ── Channel list ──────────────────────────────────────────────── */
.channel-list-wrap { flex: 1; height: 100%; overflow: hidden; }
/* will-change: transform → pré-promu en couche GPU = scrollTop instantané */
.col-channels .channel-list {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.channel-list-title {
  padding: 28px 36px 22px;
  font-size: var(--font-category-title); font-weight: 900; color: var(--t1);
  border-bottom: 1px solid var(--b1);
}
.channel-list {
  list-style: none;
  height: calc(100% - 74px);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; padding: 6px 0;
  /* Isolation layout — évite que le scroll/focus déclenche des repaints globaux */
  contain: strict;
}
.channel-list::-webkit-scrollbar { display: none; }

.channel-item {
  display: flex; align-items: center; gap: 26px;
  padding: 20px 32px 20px 26px;
  cursor: pointer;
  /* v164 FIX perf Tizen : AUCUNE pré-promotion GPU par item.
     translateZ(0) + will-change:transform sur CHAQUE .channel-item créait
     N couches compositor (50-300 items × logo 190×107) → saturation GPU
     Tizen 4 = freeze multi-secondes à chaque déplacement du curseur.
     La couche GPU unique vit déjà sur .channel-list (translateZ + contain:strict).
     Le curseur .ch-cursor n'utilise que background + box-shadow (0 layer). */
  -webkit-transition: background 0.13s ease, border-color 0.13s ease;
  transition:         background 0.13s ease, border-color 0.13s ease;
  border-left: 4px solid transparent;
  will-change: auto;
}
.channel-item:hover {
  background: rgba(255,255,255,0.04);
  border-left-color: rgba(255,255,255,0.16);
}
.channel-item.active {
  background: rgba(229,9,20,0.09);
  border-left-color: var(--red);
}
/* ── Focus premium channel-item : micro-slide latéral style Apple TV ─── */
.channel-item:focus,
.channel-item.focused {
  /* Focus natif désactivé — navigation gérée par _LiveNav (.ch-cursor) */
  outline: none !important;
}
/* ── ch-cursor : indicateur visuel du curseur Live TV (pure compositor) ──
   Utilise box-shadow inset (pas de border-width = pas de reflow layout)
   et pas de transform (pas de GPU layer créé/détruit à chaque touche).    */
.channel-item.ch-cursor {
  background: rgba(229,9,20,0.15) !important;
  -webkit-box-shadow: inset 4px 0 0 #e50914 !important;
  box-shadow:         inset 4px 0 0 #e50914 !important;
  outline: none !important;
}
.channel-item.ch-cursor .channel-name { color: #fff !important; }
.channel-item.ch-cursor .channel-num  { color: #e50914 !important; }

.channel-logo {
  width: 190px; height: 107px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  border: 1px solid var(--b2);
}
.channel-info { flex: 1; overflow: hidden; }
.channel-name {
  font-size: 29px; font-weight: 700; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.channel-epg {
  font-size: 21px; color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 8px;
}
.channel-num { font-size: 21px; color: var(--t3); min-width: 56px; text-align: right; font-family: monospace; }
.ch-fav-mark { color: var(--red); font-size: 20px; margin-left: 8px; vertical-align: middle; line-height: 1; }
.ch-arc-dot  { color: #e50914; font-size: 18px; margin-left: 6px; vertical-align: middle; line-height: 1; }

/* ════════════════════════════════════════════════════════════════════
   LIVE PREVIEW PANEL  (mini poster + Guide TV Interactif)
════════════════════════════════════════════════════════════════════ */

/* ── Mini poster (zone vidéo AVPlay) ────────────────────────────── */
.lprev-poster-wrap {
  position: relative; width: 100%; height: 280px;
  background: #07070E; background: var(--bg-void); flex-shrink: 0;
  overflow: hidden;
}
.lprev-poster-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.lprev-poster-fallback {
  position: absolute; top:0; right:0; bottom:0; left:0
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0a0a18 0%, #14142a 100%);
}
.lprev-tv-icon { font-size: 51px; opacity: 0.35; }
.lprev-poster-overlay {
  position: absolute; top:0; right:0; bottom:0; left:0
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 55%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.lprev-poster-wrap:hover .lprev-poster-overlay { opacity: 1; }
.lprev-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(229,9,20,0.88);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: #fff;
  box-shadow: 0 0 24px rgba(229,9,20,0.55);
}
.lprev-quality-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 18px; font-weight: 800; padding: 5px 12px;
  border-radius: 5px; letter-spacing: 1px;
}
.lprev-quality-badge.b4k  { background: #F5A623; background: var(--gold);   color: #000; }
.lprev-quality-badge.bfhd { background: #4A9EF5; background: var(--blue);   color: #000; }
.lprev-quality-badge.bhd  { background: #3ECF6B; background: var(--green);  color: #000; }

/* ── Channel info bar ───────────────────────────────────────────── */
.lprev-ch-info {
  padding: 18px 22px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--b1);
}
.lprev-ch-name {
  font-size: 29px; font-weight: 800;
  color: var(--t1); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lprev-now-bar {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
}
.lprev-now-label {
  font-size: 24px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--red); background: rgba(229,9,20,0.15);
  border: 1px solid rgba(229,9,20,0.35);
  border-radius: 6px; padding: 5px 14px; flex-shrink: 0;
}
.lprev-now-title {
  font-size: 21px; color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.lprev-progress-wrap {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
}
.lprev-progress-track {
  flex: 1; height: 5px; background: rgba(255,255,255,0.1);
  border-radius: 3px; overflow: hidden;
}
.lprev-progress-fill {
  height: 100%; background: #E50914; background: var(--red); border-radius: 3px;
  transition: width 1s linear;
  will-change: width;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.lprev-time-remain {
  font-size: 24px; color: var(--t3); flex-shrink: 0;
}

/* ── Guide header ───────────────────────────────────────────────── */
.lprev-guide-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 12px; flex-shrink: 0;
}
.lprev-guide-title {
  font-size: 28px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--t3);
}
.lprev-guide-hint {
  font-size: 24px; color: var(--t3);
}

/* ── Guide scroll list ──────────────────────────────────────────── */
.lprev-guide-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(229,9,20,0.4) transparent;
}
.lprev-guide-scroll::-webkit-scrollbar { width: 3px; }
.lprev-guide-scroll::-webkit-scrollbar-thumb { background: rgba(229,9,20,0.4); }

.lprev-guide-empty {
  padding: 40px 22px; font-size: 21px; color: var(--t3); text-align: center;
}

/* ── Program card ───────────────────────────────────────────────── */
.epg-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 22px;
  border-left: 4px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.14s ease;
  position: relative;
}
.epg-card:focus { outline: none !important; }
.epg-card:hover,
.epg-card:focus,
.epg-card.focused {
  background: rgba(255,255,255,0.07);
  border-left-color: rgba(255,255,255,0.3);
}

/* Past program */
.epg-card.past {
  opacity: 0.55;
}
.epg-card.past:hover,
.epg-card.past.focused {
  opacity: 1;
  background: rgba(62,207,107,0.08);
  border-left-color: var(--green);
}

/* Current program */
.epg-card.current {
  background: rgba(229,9,20,0.08);
  border-left-color: var(--red);
}
.epg-card.current .epg-card-time {
  font-size: 24px;
  color: var(--red);
}

/* Future program */
.epg-card.future {
  opacity: 0.72;
}

.epg-card-row {
  display: flex; align-items: center; gap: 14px;
}
.epg-card-time {
  font-size: 19px; font-weight: 700; color: var(--t2);
  min-width: 80px; flex-shrink: 0;
}
.epg-card-icon {
  font-size: 18px; flex-shrink: 0; width: 32px; text-align: center;
}
.epg-card-title {
  font-size: 18px; font-weight: 600; color: var(--t1);
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epg-card-duration {
  font-size: 18px; color: var(--t3); flex-shrink: 0;
}
.epg-card-progress-wrap {
  height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden; margin-top: 4px;
}
.epg-card-progress-fill {
  height: 100%; background: #E50914; background: var(--red); border-radius: 2px;
}
.epg-card-replay-hint {
  font-size: 19px; color: var(--green);
  display: none;
}
.epg-card.past:hover .epg-card-replay-hint,
.epg-card.past:focus .epg-card-replay-hint,
.epg-card.past.focused .epg-card-replay-hint {
  display: block;
}

/* ════════════════════════════════════════════════════════════════════
   AUTO-NEXT OVERLAY  (Netflix-style countdown)
════════════════════════════════════════════════════════════════════ */
.autonext-overlay {
  position: absolute; top:0; right:0; bottom:0; left:0;
  z-index: 8000;
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-end; align-items: flex-end;
  -webkit-justify-content: flex-end; justify-content: flex-end;
  padding: 0 80px 80px 0;
  pointer-events: none;
}
.autonext-overlay.hidden { display: none; }
.autonext-overlay.visible { pointer-events: all; }

.autonext-card {
  background: rgba(14,14,26,0.96);
  border: 1px solid rgba(229,9,20,0.3);
  border-radius: 18px;
  padding: 28px 32px 24px;
  width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(229,9,20,0.1);
  animation: autonext-slide-in 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes autonext-slide-in {
  from { transform: translateX(120px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.autonext-label {
  font-size: 19px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: var(--t3);
}
.autonext-countdown {
  font-size: 38px; font-weight: 900;
  color: var(--t1); line-height: 1;
}
.autonext-progress-ring {
  position: absolute; margin-top: -72px; margin-left: 0;
  /* ring is inline with countdown */
}
/* SVG ring */
.anr-bg   { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.anr-fill {
  fill: none; stroke: var(--red); stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear;
}
.autonext-next-title {
  font-size: 28px; font-weight: 700; color: var(--t1);
  text-align: center; line-height: 1.3;
  max-width: 320px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.autonext-btns {
  display: flex; gap: 16px; margin-top: 8px;
}
.autonext-btn-play,
.autonext-btn-cancel {
  padding: 14px 28px; border-radius: 10px;
  font-size: 21px; font-weight: 700;
  border: none; cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.autonext-btn-play   { background: #E50914; background: var(--red); color: #fff; }
.autonext-btn-cancel { background: rgba(255,255,255,0.1); color: var(--t2); }
.autonext-btn-play.focused,
.autonext-btn-play:hover   { transform: scale(1.04); box-shadow: 0 0 18px rgba(229,9,20,0.5); }
.autonext-btn-cancel.focused,
.autonext-btn-cancel:hover { background: rgba(255,255,255,0.18); color: var(--t1); }


/* ════════════════════════════════════════════════════════════════════
   SKIP INTRO  (séries — touche jaune)
════════════════════════════════════════════════════════════════════ */
.skip-intro-btn {
  position: fixed; bottom: 230px; right: 72px;
  background: rgba(14,14,26,0.92); border: 2px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 24px; font-weight: 700;
  padding: 16px 36px; border-radius: 10px;
  z-index: 3200; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  letter-spacing: 0.5px;
}
.skip-intro-btn.hidden { display: none; }
.skip-intro-btn:focus,
.skip-intro-btn.focused {
  border-color: var(--red); background: rgba(229,9,20,0.22); outline: none;
  box-shadow: 0 0 18px rgba(229,9,20,0.35);
}

/* ════════════════════════════════════════════════════════════════════
   RESUME DIALOG  (Continue Watching)
════════════════════════════════════════════════════════════════════ */
.resume-dialog {
  position: fixed; inset: 0; z-index: 8500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
}
.resume-dialog.hidden { display: none; }
.resume-card {
  background: rgba(14,14,26,0.97); border: 1px solid rgba(229,9,20,0.25);
  border-radius: 18px; padding: 48px 56px;
  /* FIX Tizen4 07/2026 : gap colonne ignoré sur M56 → contenu tassé */
  display: flex; flex-direction: column; align-items: center;
  min-width: 520px; box-shadow: 0 24px 80px rgba(0,0,0,0.85);
  animation: resume-pop-in 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes resume-pop-in {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.resume-icon { font-size: 42px; color: var(--red); line-height: 1; }
.resume-stream-title { font-size: 30px; font-weight: 700; color: var(--t1); text-align: center; max-width: 480px; }
.resume-msg { font-size: 26px; color: var(--t2); text-align: center; }
.resume-pos { color: var(--t1); font-weight: 700; }
.resume-card > * { margin-bottom: 18px; }
.resume-card > *:last-child { margin-bottom: 0; }
/* FIX Tizen4 07/2026 : gap ignoré M56 → boutons Reprendre/Recommencer collés */
.resume-btns { display: flex; margin-top: 8px; }
.resume-btns > .resume-btn { margin: 0 9px; }
.resume-btn {
  padding: 16px 36px; border-radius: 10px; font-size: 22px; font-weight: 700;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.resume-btn-yes    { background: var(--red); color: #fff; }
.resume-btn-restart { background: rgba(255,255,255,0.1); color: var(--t2); }
.resume-btn.focused,
.resume-btn:focus  {
  transform: scale(1.05); outline: none;
  box-shadow: 0 0 20px rgba(229,9,20,0.45); border-color: var(--red);
}

/* ════════════════════════════════════════════════════════════════════
   GROUPS FILTER OVERLAY  (Paramètres → Groupes visibles)
════════════════════════════════════════════════════════════════════ */
.groups-filter-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.75);
}
.groups-filter-overlay.hidden { display: none; }
.gfo-panel {
  background: rgba(14,14,26,0.98); border: 1px solid rgba(229,9,20,0.2);
  border-radius: 18px; padding: 0;
  width: 640px; max-height: 780px;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 90px rgba(0,0,0,0.9);
  overflow: hidden;
}
.gfo-header {
  padding: 32px 40px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.gfo-title { display: block; font-size: 30px; font-weight: 800; color: var(--t1); margin-bottom: 6px; }
.gfo-hint  { display: block; font-size: 18px; color: var(--t3); }
.gfo-list {
  list-style: none; flex: 1; overflow-y: auto; padding: 10px 0;
  scrollbar-width: thin; scrollbar-color: rgba(229,9,20,0.4) transparent;
}
.gfo-item {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 40px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s;
}
.gfo-item:focus,
.gfo-item.focused {
  background: rgba(229,9,20,0.12); border-left-color: var(--red); outline: none;
}
.gfo-check {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
}
.gfo-item.visible .gfo-check { background: var(--red); border-color: var(--red); }
.gfo-item.hidden-cat .gfo-check { background: transparent; }
.gfo-item-name { font-size: 26px; color: var(--t2); flex: 1; }
.gfo-item.visible .gfo-item-name { color: var(--t1); }
.gfo-item.hidden-cat { opacity: 0.45; }
.gfo-item.hidden-cat .gfo-item-name { text-decoration: line-through; }
/* Barre d'actions au-dessus de la liste (3 boutons statiques) */
.gfo-actions {
  display: flex; gap: 14px; flex-shrink: 0;
  padding: 18px 40px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gfo-action-btn {
  flex: 1; border: none; border-radius: 10px;
  padding: 14px 20px; font-size: 21px; font-weight: 700;
  cursor: pointer; color: #fff;
  background: rgba(255,255,255,0.10);
  transition: background 0.15s, transform 0.1s;
}
.gfo-action-btn:focus,
.gfo-action-btn.focused {
  outline: none; transform: scale(1.03);
  box-shadow: 0 0 18px rgba(229,9,20,0.45);
  background: rgba(229,9,20,0.22);
}
.gfo-close-btn { background: var(--red); }
.gfo-close-btn:focus,
.gfo-close-btn.focused { background: #c00; box-shadow: 0 0 18px rgba(229,9,20,0.6); }

/* Indicateur ★ groupe favori dans les listes de catégories */
.cat-item.fav-cat::before {
  content: '★ '; color: var(--red); font-size: 0.9em;
}

/* Groupe synthétique ♥ MES FAVORIS — toujours en tête de liste */
.cat-item.cat-fav-group {
  color: var(--red);
  font-weight: 800;
  border-bottom: 1px solid rgba(229,9,20,0.25);
  margin-bottom: 4px;
  padding-bottom: 8px;
  letter-spacing: 0.5px;
}
.cat-item.cat-fav-group.active,
.cat-item.cat-fav-group:focus { color: #fff; background: var(--red); }

/* Item RECHERCHER en tete de colonne (Films/Series/Direct) */
.cat-item.cat-search-group {
  color: #4fc3f7;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(79,195,247,0.25);
  margin-bottom: 4px;
  padding-bottom: 8px;
}
.cat-item.cat-search-group::before { content: '\1F50D'; margin-right: 8px; }
.cat-item.cat-search-group.active,
.cat-item.cat-search-group.focused,
.cat-item.cat-search-group:focus { color: #fff; background: #0e6aa8; }

/* ════════════════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT  (VOD / Series / Favoris)
════════════════════════════════════════════════════════════════════ */
.two-col-layout { display: flex; width: 100%; height: 100%; }
.col-vod-content { flex: 1; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.col-vod-content .col-header { flex-shrink: 0; }
.col-vod-content .vod-grid-wrap { flex: 1; overflow-y: auto; scrollbar-width: none; }
.col-vod-content .vod-grid-wrap::-webkit-scrollbar { display: none; }

/* ════════════════════════════════════════════════════════════════════
   LAYOUT FILMS & SÉRIES  (colonne gauche Genres + grille droite)
════════════════════════════════════════════════════════════════════ */
.vod-left-layout {
  display: flex; width: 100%; height: 100%; overflow: hidden;
}

/* ── Colonne gauche : liste des genres ─────────────────────────── */
.vod-cats-col {
  width: 340px; min-width: 340px; flex-shrink: 0; height: 100%;
  border-right: 1px solid var(--b1);
  background: var(--bg-panel);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.vod-cats-col .col-header {
  padding: 24px 28px 18px;
  font-size: 22px; font-weight: 800;
  color: var(--t3); letter-spacing: 2px; text-transform: uppercase;
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
.vod-cats-col .cat-list {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(229,9,20,0.35) transparent;
  padding: 8px 0;
}
.vod-cats-col .cat-list::-webkit-scrollbar { width: 4px; }
.vod-cats-col .cat-list::-webkit-scrollbar-thumb { background: rgba(229,9,20,0.35); border-radius: 2px; }
.vod-cats-col .cat-item {
  padding: 16px 24px;
  font-size: 25px; font-weight: 500;
  color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  cursor: pointer;
}
.vod-cats-col .cat-item:focus,
.vod-cats-col .cat-item.focused,
.vod-cats-col .cat-item.active-focus {
  background: rgba(229,9,20,0.10);
  color: var(--t1); font-weight: 600;
  border-left-color: var(--red);
  outline: none;
}
.vod-cats-col .cat-item.active {
  color: var(--t1); font-weight: 700;
  background: rgba(229,9,20,0.13);
  border-left-color: var(--red);
}

/* ── Zone droite : hero + header + grille ──────────────────────── */
.vod-content-area {
  flex: 1; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
}
.vod-section-hdr {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 40px 18px;
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
.vod-section-hdr-line {
  width: 4px; height: 28px; border-radius: 2px;
  background: var(--red); flex-shrink: 0;
}
.vod-section-hdr-text {
  font-size: 28px; font-weight: 800; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vod-content-area .vod-grid-wrap { flex: 1; overflow-y: auto; scrollbar-width: none; }
.vod-content-area .vod-grid-wrap::-webkit-scrollbar { display: none; }

/* Hero banner */
.media-hero {
  display: flex; gap: 28px;
  padding: 22px 32px;
  background: linear-gradient(135deg, rgba(229,9,20,0.09) 0%, rgba(9,9,18,0.75) 100%);
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0; height: 216px; overflow: hidden;
  transition: opacity 0.25s ease;
}
.media-hero.hidden { display: none; }
.hero-poster { width: 125px; height: 175px; object-fit: cover; border-radius: 12px; flex-shrink: 0; background: #1C1C30; background: var(--bg-elevated); box-shadow: 0 12px 36px rgba(0,0,0,0.65); }
.hero-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.hero-title { font-size: var(--font-title); font-weight: 800; color: var(--t1); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-meta { font-size: var(--font-epg); color: var(--t3); }
.hero-plot { font-size: var(--font-epg); color: var(--t2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* VOD grid */
.vod-grid-wrap { flex: 1; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.vod-section-header { display: flex; align-items: center; justify-content: space-between; padding: 30px 44px 22px; border-bottom: 1px solid var(--b1); }
.vod-section-title { font-size: var(--font-title); font-weight: 900; color: var(--t1); }
.vod-grid {
  display: flex; flex-wrap: wrap; gap: 40px;
  padding: 36px 44px;
  overflow-y: auto; overflow-x: hidden;
  flex: 1; align-content: flex-start; scrollbar-width: none;
}
.vod-grid::-webkit-scrollbar { display: none; }

.vod-card {
  width: 240px; cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1f1f1f; background: var(--bg-surface);
  -webkit-transition: -webkit-transform 0.22s cubic-bezier(0.34,1.36,0.64,1),
                      box-shadow 0.22s ease;
  transition:         transform 0.22s cubic-bezier(0.34,1.36,0.64,1),
                      box-shadow 0.22s ease;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  will-change: transform, box-shadow;
  /* Entrée Netflix : apparaître depuis légèrement en dessous */
  -webkit-animation: nfx-card-enter 0.35s cubic-bezier(0.4,0,0.2,1) both;
  animation:         nfx-card-enter 0.35s cubic-bezier(0.4,0,0.2,1) both;
}
@-webkit-keyframes nfx-card-enter {
  from { opacity: 0; -webkit-transform: translateY(18px) scale(0.96) translateZ(0); }
  to   { opacity: 1; -webkit-transform: translateY(0)    scale(1)    translateZ(0); }
}
@keyframes nfx-card-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.96) translateZ(0); }
  to   { opacity: 1; transform: translateY(0)    scale(1)    translateZ(0); }
}

/* Overlay gradient Netflix sur l'image — titre qui émerge du bas */
.vod-card-img-wrap {
  position: relative;
  width: 240px; height: 360px;
  overflow: hidden;
}
.vod-card-img {
  width: 240px; height: 360px;
  object-fit: cover; display: block;
  background: #262626; background: var(--bg-elevated);
  -webkit-transition: -webkit-transform 0.30s cubic-bezier(0.4,0,0.2,1);
  transition:         transform         0.30s cubic-bezier(0.4,0,0.2,1);
}
/* Gradient de bas vers haut — titre lisible Netflix */
.vod-card-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.55) 45%,
    transparent 100%);
  pointer-events: none;
}
.vod-card-title {
  padding: 14px 16px 6px;
  font-size: 30px; font-weight: 700;
  color: #FFFFFF; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.3px;
}
.vod-card-meta {
  padding: 0 16px 16px;
  font-size: 26px; color: #B3B3B3; color: var(--t2);
}


/* ════════════════════════════════════════════════════════════════════
   SEARCH
════════════════════════════════════════════════════════════════════ */
.search-wrap,
/* ── RECHERCHE — design premium Apple TV (Tizen 76 safe : pas de gap, marges) ── */
.search-layout {
  width: 100%; height: 100%;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  padding: 52px 80px; overflow: hidden;
  background: #0a0a12;
}
.search-bar-row {
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; padding: 22px 34px;
  margin-bottom: 38px;
}
.search-icon, .search-icon-big { font-size: 30px; margin-right: 22px; opacity: 0.65; }
.search-input-display, .search-display-text {
  -webkit-flex: 1; flex: 1; font-size: 34px; font-weight: 600; color: #fff;
  min-height: 1.2em; letter-spacing: 0.5px;
}
.search-input-display.placeholder, .search-display-text.placeholder { color: rgba(255,255,255,0.32); font-weight: 500; }
.search-clear-btn { background: none; border: none; color: rgba(255,255,255,0.4); font-size: 26px; cursor: pointer; padding: 6px 12px; }

.keyboard-wrap, .creds-keyboard-wrap {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
}
.keyboard-row {
  display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
  margin-bottom: 14px;
}
.search-key {
  min-width: 76px; height: 76px; margin: 0 7px;
  background: rgba(255,255,255,0.07);
  border: none; border-radius: 16px; color: #fff;
  font-size: 30px; font-weight: 600; cursor: pointer; outline: none;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  -webkit-transition: -webkit-transform 0.12s ease-out, background 0.12s ease-out;
  transition: transform 0.12s ease-out, background 0.12s ease-out;
}
.search-key.focused,
.search-key:focus {
  background: #fff; color: #0a0a12;
  -webkit-transform: scale(1.18); transform: scale(1.18);
  -webkit-box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 0 4px rgba(255,255,255,0.16);
  box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 0 4px rgba(255,255,255,0.16);
}
.search-key.xl { min-width: 200px; font-size: 24px; font-weight: 700; }


/* ════════════════════════════════════════════════════════════════════
   SETTINGS PREMIUM — Layout 2 colonnes Apple TV / Netflix style
════════════════════════════════════════════════════════════════════ */

#section-settings {
  background: #07070F !important;
}

.sett-layout {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  width: 100%; height: 100%;
  background: #07070F;
}

/* ── Sidebar gauche ─────────────────────────────────────────────── */
.sett-left {
  width: 420px; min-width: 420px;
  padding: 0 0 0 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  background: #0B0B18;
  border-right: 1px solid rgba(255,255,255,0.06);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

/* Header sidebar — logo + titre */
.sett-left-title {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 14px;
  font-size: 24px; font-weight: 900; color: rgba(255,255,255,0.45);
  letter-spacing: 3px; text-transform: uppercase;
  padding: 42px var(--safe) 36px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}

/* Chaque item de navigation */
.sett-cat-item {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  padding: 0 28px 0 var(--safe);
  height: 88px;
  cursor: pointer;
  border-left: 3px solid transparent;
  -webkit-transition: background 0.14s, border-color 0.14s;
  transition: background 0.14s, border-color 0.14s;
  position: relative;
}

/* Icône dans un carré coloré */
.sett-cat-icon {
  width: 52px; height: 52px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  font-size: 26px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  margin-right: 20px;
  flex-shrink: 0;
  -webkit-transition: background 0.14s; transition: background 0.14s;
}

.sett-cat-label {
  -webkit-flex: 1; flex: 1;
  font-size: 27px; font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
  -webkit-transition: color 0.14s; transition: color 0.14s;
}

.sett-cat-arr {
  font-size: 22px;
  color: rgba(255,255,255,0.18);
  -webkit-transition: color 0.14s, -webkit-transform 0.14s;
  transition: color 0.14s, transform 0.14s;
}

/* État actif (catégorie sélectionnée) */
/* UI/UX 07/2026 : catégorie OUVERTE — accent rouge plein + dégradé lisible
   (avant : 8% rouge, quasi invisible sur TV et confondu avec le focus). */
.sett-cat-item.sett-cat-active {
  border-left-color: #E50914;
  background: -webkit-linear-gradient(left, rgba(229,9,20,0.16), rgba(229,9,20,0.015));
  background: linear-gradient(90deg, rgba(229,9,20,0.16), rgba(229,9,20,0.015));
  -webkit-box-shadow: inset 3px 0 0 rgba(229,9,20,0.55);
  box-shadow: inset 3px 0 0 rgba(229,9,20,0.55);
}
.sett-cat-item.sett-cat-active .sett-cat-icon {
  background: rgba(229,9,20,0.32); color: #fff;
}
.sett-cat-item.sett-cat-active .sett-cat-label { color: #fff; font-weight: 700; }
.sett-cat-item.sett-cat-active .sett-cat-arr   { color: rgba(229,9,20,0.85); }

/* État focus (navigation télécommande) — annule le scale(1.14) global */
/* UI/UX 07/2026 : focus télécommande — le plus VIF (bg 0.24 + anneau), pour se
   distinguer nettement de la catégorie active (dégradé plus doux). */
.sett-cat-item:focus,
.sett-cat-item.is-focused,
.sett-cat-item.focused {
  border-left-color: #E50914;
  background: rgba(229,9,20,0.24);
  -webkit-box-shadow: inset 0 0 0 1px rgba(229,9,20,0.4);
  box-shadow: inset 0 0 0 1px rgba(229,9,20,0.4);
  outline: none;
  -webkit-transform: none !important;
  transform: none !important;
}
.sett-cat-item.is-focused .sett-cat-label,
.sett-cat-item.focused .sett-cat-label { color: #fff; font-weight: 700; }
.sett-cat-item.is-focused .sett-cat-icon,
.sett-cat-item.focused .sett-cat-icon { background: rgba(229,9,20,0.38); color: #fff; }
.sett-cat-item:focus .sett-cat-icon,
.sett-cat-item.is-focused .sett-cat-icon,
.sett-cat-item.focused .sett-cat-icon {
  background: rgba(229,9,20,0.25);
}
.sett-cat-item:focus .sett-cat-label,
.sett-cat-item.is-focused .sett-cat-label,
.sett-cat-item.focused .sett-cat-label  { color: #fff; font-weight: 700; }
.sett-cat-item:focus .sett-cat-arr,
.sett-cat-item.is-focused .sett-cat-arr,
.sett-cat-item.focused .sett-cat-arr    { color: rgba(255,255,255,0.6); }

/* Badge version en bas de la sidebar */
.sett-left-version {
  margin-top: auto;
  padding: 20px var(--safe);
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 20px; color: rgba(255,255,255,0.25);
  letter-spacing: 1px;
}

/* ── Panneau droit ──────────────────────────────────────────────── */
.sett-right {
  width: calc(100% - 420px); height: 100%;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  overflow: hidden; position: relative;
  background: #07070F;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}

.sett-panel {
  display: none;
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow-y: auto; scrollbar-width: none;
  padding: 44px 80px 60px 60px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  -webkit-flex-direction: column; flex-direction: column;
  background: #07070F;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.sett-panel::-webkit-scrollbar { display: none; }
.sett-panel.sett-panel-active {
  display: -webkit-flex; display: flex;
}

/* Titre du panneau */
.sett-panel-title {
  font-size: 38px; font-weight: 900; color: #fff;
  margin-bottom: 36px;
  letter-spacing: 1px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 16px;
}
.sett-panel-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 34px;
  background: #E50914;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Séparateur de groupe */
.sett-group-lbl {
  font-size: 20px; font-weight: 800;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 2px;
  padding: 18px 0 8px 0;
  border-bottom: 2px solid rgba(229,9,20,0.35);
  margin-bottom: 6px;
}
.sett-group-lbl::after {
  content: '';
  -webkit-flex: 1; flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
}
.sett-group-lbl:first-child { margin-top: 0; }

/* Carte option — ligne d'option */
.sett-opt-row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  padding: 0 24px;
  border-radius: 14px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  min-height: 76px;
  -webkit-transition: background 0.13s, border-color 0.13s;
  transition: background 0.13s, border-color 0.13s;
}
.sett-opt-row.focusable { cursor: pointer; }

/* Focus state — UI/UX 07/2026 : barre d'accent rouge à gauche + fond plus franc
   (avant : 10% rouge, trop discret pour repérer la ligne pointée sur TV). */
.sett-opt-row.focusable:focus,
.sett-opt-row.focusable.is-focused,
.sett-opt-row.focusable.focused {
  background: rgba(229,9,20,0.17);
  border-color: rgba(229,9,20,0.6);
  box-shadow: inset 4px 0 0 #E50914,
              0 6px 26px rgba(229,9,20,0.18);
  outline: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}
.sett-opt-row.focusable.is-focused .sett-opt-lbl,
.sett-opt-row.focusable.focused .sett-opt-lbl { color: #fff; }

/* Ligne lecture seule */
.sett-opt-row.sett-readonly {
  -webkit-justify-content: space-between; justify-content: space-between;
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.05);
}

/* Bouton action (refresh, etc.) */
.sett-opt-row.sett-btn {
  border-color: rgba(255,255,255,0.09);
}
.sett-opt-row.sett-btn.focusable:focus,
.sett-opt-row.sett-btn.focusable.is-focused,
.sett-opt-row.sett-btn.focusable.focused {
  background: rgba(229,9,20,0.13);
  border-color: rgba(229,9,20,0.5);
}

/* Conteneur infos textuelles */
.sett-opt-info {
  -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 4px;
}
.sett-opt-lbl {
  font-size: 28px; font-weight: 600; color: #fff;
}
.sett-opt-hint {
  font-size: 21px; color: rgba(255,255,255,0.38); line-height: 1.35;
}
.sett-opt-value {
  font-size: 25px; color: rgba(255,255,255,0.50);
}
.sett-opt-status {
  font-size: 22px; margin-left: 20px; min-width: 110px;
  text-align: right; color: rgba(255,255,255,0.45);
}

/* Icône à gauche d'un bouton */
.sett-btn-ico {
  font-size: 28px; margin-right: 22px; width: 44px;
  height: 44px; border-radius: 11px;
  background: rgba(255,255,255,0.07);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  flex-shrink: 0;
}
.sett-opt-row.focusable:focus .sett-btn-ico,
.sett-opt-row.focusable.is-focused .sett-btn-ico,
.sett-opt-row.focusable.focused .sett-btn-ico {
  background: rgba(229,9,20,0.22);
}

/* ── Radio button premium ───────────────────────────────────────── */
.sett-radio {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.25);
  margin-right: 22px; flex-shrink: 0;
  display: inline-block; position: relative;
  -webkit-transition: border-color 0.15s;
  transition: border-color 0.15s;
}
.sett-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%) scale(0);
  transform: translate(-50%,-50%) scale(0);
  width: 14px; height: 14px; border-radius: 50%;
  background: #E50914;
  -webkit-transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
}
.sett-radio.sett-radio-on {
  border-color: #E50914;
  box-shadow: 0 0 0 4px rgba(229,9,20,0.18);
}
.sett-radio.sett-radio-on::after {
  -webkit-transform: translate(-50%,-50%) scale(1);
  transform: translate(-50%,-50%) scale(1);
}

/* ── Toggle switch premium ──────────────────────────────────────── */
.sett-toggle {
  width: 80px; height: 42px; border-radius: 21px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  position: relative; margin-left: 24px;
  -webkit-transition: background 0.22s, border-color 0.22s;
  transition: background 0.22s, border-color 0.22s;
}
.sett-toggle::after {
  content: ''; position: absolute;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  top: 4px; left: 4px;
  -webkit-transition: left 0.22s cubic-bezier(0.34,1.56,0.64,1), background 0.22s;
  transition: left 0.22s cubic-bezier(0.34,1.56,0.64,1), background 0.22s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.sett-toggle.sett-toggle-on {
  background: #E50914;
  border-color: #E50914;
  box-shadow: 0 0 12px rgba(229,9,20,0.35);
}
.sett-toggle.sett-toggle-on::after {
  left: 44px;
  background: #fff;
}
/* Libellé ON/OFF à côté du toggle */
.toggle-value, .toggle-indicator {
  font-size: 22px; font-weight: 700;
  color: rgba(255,255,255,0.35);
  min-width: 44px; text-align: right;
  margin-left: 12px;
  letter-spacing: 1px;
}
.sett-toggle.sett-toggle-on + .toggle-value,
.sett-toggle.sett-toggle-on ~ .toggle-indicator { color: #E50914; }

/* ── Texte monospace ────────────────────────────────────────────── */
.sett-mono {
  font-family: 'Courier New', monospace;
  font-size: 23px; color: rgba(255,255,255,0.55);
  letter-spacing: 2.5px;
}

/* ── Tronquage ─────────────────────────────────────────────────── */
.set-truncate {
  max-width: 480px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Anciens sélecteurs conservés pour updateSettingsInfo() */
.settings-label  { font-size: var(--font-body); color: var(--t1); }
.settings-value  { font-size: var(--font-body); color: var(--t2); }
.settings-arrow  { font-size: 27px; color: var(--t3); }


/* ════════════════════════════════════════════════════════════════════
   PLAYER
════════════════════════════════════════════════════════════════════ */
/* #screen-player et #avplay-wrap définis plus haut (transparent !important) */
/* #avplay-wrap est désormais enfant direct de <body>, pas de #screen-player */

/* ── Player Overlay — Netflix cinématique ─────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
   PLAYER OVERLAY — Apple TV / Netflix Premium Style
   ES5 + Tizen 2.4+ compatible (no backdrop-filter, no position:fixed)
════════════════════════════════════════════════════════════════ */
.player-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  /* Gradient: dégradé haut léger + bas fort pour lisibilité contrôles */
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.80) 0%,
      rgba(0,0,0,0.45) 10%,
      transparent      26%,
      transparent      55%,
      rgba(0,0,0,0.60) 74%,
      rgba(0,0,0,0.94) 100%);
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-justify-content: space-between; justify-content: space-between;
  padding: var(--safe-v) var(--safe);
  -webkit-transition: opacity 0.28s ease;
  transition:         opacity 0.28s ease;
  z-index: 20;
}
.player-overlay.hidden { opacity: 0; pointer-events: none; visibility: hidden;
  -webkit-transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  transition:         opacity 0.28s ease, visibility 0s linear 0.28s; }
.player-overlay:not(.hidden) {
  -webkit-animation: nfx-overlay-in 0.25s ease both;
  animation:         nfx-overlay-in 0.25s ease both;
}
@-webkit-keyframes nfx-overlay-in {
  from { opacity: 0; -webkit-transform: translateY(10px); }
  to   { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes nfx-overlay-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.player-top-bar {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 28px;
}
/* Back button — pill ghost */
.pl-back-btn {
  background: rgba(0,0,0,0.40);
  border: 1.5px solid rgba(255,255,255,0.28);
  color: white; border-radius: 50px;
  padding: 14px 30px; font-size: 26px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.5px;
  -webkit-transition: background 0.18s, border-color 0.18s;
  transition:         background 0.18s, border-color 0.18s;
}
.pl-back-btn.is-focused,
.pl-back-btn:focus {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.90) !important;
  outline: none !important;
}
.pl-channel-info { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 20px; -webkit-flex: 1; flex: 1; }
.pl-channel-logo { width: 64px; height: 64px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,0.08); }
.pl-ch-text { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.pl-channel-name { font-size: var(--font-title); font-weight: 800; color: white; }
.pl-epg-now  { font-size: var(--font-small); color: rgba(255,255,255,0.55); margin-top: 3px; }
.pl-epg-bar-wrap { height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; margin: 6px 0; max-width: 280px; }
.pl-epg-bar-fill { height: 100%; background: #E50914; border-radius: 2px; }
.pl-epg-next { font-size: var(--font-tiny); color: rgba(255,255,255,0.32); }
.pl-top-right { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 20px; }
.pl-clock { font-size: 28px; font-weight: 700; color: rgba(255,255,255,0.80); font-family: monospace; letter-spacing: 2px; }
.pl-fav-badge {
  background: rgba(229,9,20,0.80); border-radius: 50px;
  padding: 8px 22px; font-size: 20px; font-weight: 700; color: white;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 8px;
}

/* Badge débit bitrate */
.pl-bitrate {
  display: none;
  font-size: 18px; font-weight: 700;
  color: rgba(255,255,255,0.70);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; padding: 6px 14px;
  font-family: monospace; letter-spacing: 1px;
}
.pl-bitrate.pl-bitrate-active { display: block; }

/* ── Bottom bar ──────────────────────────────────────────────────────────── */
.player-bottom-bar { padding: 0; }

/* ── Live strip ─────────────────────────────────────────────────────────── */
.pl-live-strip {
  display: none;
  -webkit-align-items: center; align-items: center;
  gap: 24px; padding: 20px 0 0;
}
.pl-live-mode .pl-live-strip  { display: -webkit-flex; display: flex; }
.pl-live-mode .pl-vod-bar     { display: none; }
.pl-vod-mode  .pl-live-strip  { display: none; }
.pl-vod-mode  .pl-vod-bar     { display: block; }

.pl-live-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #E50914;
  -webkit-box-shadow: 0 0 10px rgba(229,9,20,0.9);
  box-shadow: 0 0 10px rgba(229,9,20,0.9);
  -webkit-flex-shrink: 0; flex-shrink: 0;
  -webkit-animation: pulse 1.4s ease infinite;
  animation: pulse 1.4s ease infinite;
}
@-webkit-keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.pl-live-label {
  font-size: 26px; font-weight: 900; letter-spacing: 3px;
  color: #E50914; text-transform: uppercase; -webkit-flex-shrink: 0; flex-shrink: 0;
}
.pl-live-logo { width: 72px; height: 72px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,0.08); -webkit-flex-shrink: 0; flex-shrink: 0; }
.pl-live-texts { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 4px; -webkit-flex: 1; flex: 1; min-width: 0; }
.pl-live-chname  { font-size: 44px; font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-live-epg-now { font-size: 30px; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-live-epg-bar-wrap { height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; margin: 4px 0; }
.pl-live-epg-bar-fill { height: 100%; background: #E50914; border-radius: 2px; }
.pl-live-epg-next { font-size: 26px; color: rgba(255,255,255,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-live-hints { display: -webkit-flex; display: flex; gap: 24px; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-align-self: flex-end; align-self: flex-end; }

/* ── VOD bar ─────────────────────────────────────────────────────────────── */
.pl-vod-bar { display: none; padding-top: 6px; }

/* Titre film/série — Apple TV: propre, net, léger */
.pl-vod-title {
  font-size: 36px; font-weight: 700; color: rgba(255,255,255,0.88);
  margin-bottom: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

/* Barre de progression — Netflix: rouge + scrubber blanc */
.pl-progress-wrap {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 20px; margin-bottom: 22px;
}
.pl-time-cur, .pl-time-tot {
  font-size: 28px; font-weight: 600; color: rgba(255,255,255,0.75);
  min-width: 96px; font-family: monospace; letter-spacing: 1px; -webkit-flex-shrink: 0; flex-shrink: 0;
}
.pl-progress-bar {
  -webkit-flex: 1; flex: 1; height: 7px;
  background: rgba(255,255,255,0.22);
  border-radius: 4px; overflow: visible; position: relative;
  cursor: pointer;
  -webkit-transition: height 0.2s ease;
  transition:         height 0.2s ease;
  outline: none;
}
/* Focus sur la barre — style Netflix scrubber */
.pl-progress-bar.is-focused {
  height: 12px;
  background: rgba(255,255,255,0.30);
  -webkit-box-shadow: 0 0 0 3px rgba(229,9,20,0.45);
  box-shadow: 0 0 0 3px rgba(229,9,20,0.45);
}
/* Ghost position (seek preview) */
.pl-progress-ghost {
  position: absolute; top: 0; left: 0; height: 100%;
  background: rgba(255,255,255,0.35);
  border-radius: 4px;
  pointer-events: none;
  display: none;
}
.pl-progress-bar.is-focused .pl-progress-ghost { display: block; }
/* Bulle de temps au-dessus du scrubber */
.pl-seek-time-bubble {
  position: absolute; top: -54px;
  background: rgba(10,10,20,0.92);
  border: 1.5px solid rgba(229,9,20,0.55);
  border-radius: 10px;
  color: #fff; font-size: 26px; font-weight: 700;
  padding: 6px 18px;
  white-space: nowrap;
  pointer-events: none;
  display: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.70);
  box-shadow: 0 4px 20px rgba(0,0,0,0.70);
}
.pl-progress-bar.is-focused .pl-seek-time-bubble { display: block; }
.pl-progress-fill {
  height: 100%; background: #E50914; border-radius: 4px;
  -webkit-transition: width 0.45s linear;
  transition:         width 0.45s linear;
  position: relative;
  -webkit-box-shadow: 0 0 10px rgba(229,9,20,0.60);
  box-shadow: 0 0 10px rgba(229,9,20,0.60);
}
/* Scrubber (bullet Netflix) */
.pl-progress-fill::after {
  content: '';
  position: absolute; right: -9px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  background: #fff; border-radius: 50%;
  -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.55);
  box-shadow: 0 1px 6px rgba(0,0,0,0.55);
  opacity: 0;
  -webkit-transition: opacity 0.2s, width 0.15s, height 0.15s, margin-top 0.15s, right 0.15s;
  transition:         opacity 0.2s, width 0.15s, height 0.15s, margin-top 0.15s, right 0.15s;
}
.player-overlay:not(.hidden) .pl-progress-fill::after { opacity: 1; }
/* Scrubber agrandi quand barre focusée */
.pl-progress-bar.is-focused .pl-progress-fill::after {
  width: 26px; height: 26px; margin-top: -13px; right: -13px;
  -webkit-box-shadow: 0 0 0 4px rgba(229,9,20,0.40), 0 2px 10px rgba(0,0,0,0.70);
  box-shadow: 0 0 0 4px rgba(229,9,20,0.40), 0 2px 10px rgba(0,0,0,0.70);
}

/* ── Contrôles — Apple TV: boutons pill, minimal, focus blanc ─────────── */
.pl-controls-row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap: 18px;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
}

.pl-ctrl-btn {
  background: rgba(255,255,255,0.09);
  border: 1.5px solid rgba(255,255,255,0.14);
  color: white; border-radius: 50px;
  min-width: 76px; height: 76px; padding: 0 20px;
  font-size: 26px; font-weight: 700; cursor: pointer;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap: 3px;
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition:         background 0.15s, border-color 0.15s;
}
.pl-ctrl-label {
  font-size: 19px; font-weight: 700; letter-spacing: 0.5px; opacity: 0.80;
}
.pl-ctrl-btn.is-focused,
.pl-ctrl-btn:focus {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.88) !important;
  outline: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* Play / Pause — Apple TV: grand cercle blanc, icône sombre */
.pl-play-btn {
  width: 112px; height: 112px; border-radius: 50%;
  background: rgba(255,255,255,0.94);
  border: none;
  color: #111; padding: 0;
  -webkit-transition: background 0.15s, -webkit-transform 0.15s;
  transition:         background 0.15s, transform 0.15s;
  -webkit-box-shadow: 0 4px 24px rgba(0,0,0,0.40);
  box-shadow: 0 4px 24px rgba(0,0,0,0.40);
}
.pl-play-btn svg { fill: #111; }
.pl-play-btn.is-focused,
.pl-play-btn:focus {
  background: #ffffff !important;
  border: none !important;
  -webkit-transform: scale(1.08) !important;
  transform: scale(1.08) !important;
  -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.32), 0 4px 24px rgba(0,0,0,0.40) !important;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.32), 0 4px 24px rgba(0,0,0,0.40) !important;
  outline: none !important;
}

/* Piste audio / sous-titres */
.pl-track-btn { min-width: 190px; border-radius: 50px; }
.pl-track-btn.pl-track-active {
  background: rgba(229,9,20,0.22);
  border-color: #E50914;
}

/* ── Color hints (Live + VOD) ──────────────────────────────────────────── */
/* FIX Tizen4 07/2026 : gap ignoré M56 (l'espacement vient des marges enfants) */
.pl-color-hints { display: -webkit-flex; display: flex; margin-top: 18px; }

/* ── Panel sélection de piste ─────────────────────────────────────────── */
.pl-track-panel {
  position: absolute;
  bottom: 200px; right: 150px;
  background: rgba(8,8,20,0.96);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 28px 32px;
  min-width: 360px; max-width: 520px;
  z-index: 30;
}
.pl-track-panel.hidden { display: none; }
.pl-track-panel-title {
  font-size: 26px; font-weight: 900; letter-spacing: 3px;
  color: rgba(255,255,255,0.42); text-transform: uppercase;
  margin-bottom: 16px;
}
.pl-track-list { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 8px; }
.pl-track-item {
  padding: 16px 22px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  font-size: 30px; font-weight: 600; color: #fff;
  cursor: pointer;
}
.pl-track-item.active  { background: rgba(229,9,20,0.22); border-color: #E50914; color: #fff; }
.pl-track-item.is-focused,
.pl-track-item:focus {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.85) !important;
  outline: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* ── Bouton Options (déclencheur) ─────────────────────────────────────────── */
.pl-options-trigger {
  background: rgba(229,9,20,0.12) !important;
  border-color: rgba(229,9,20,0.40) !important;
}
.pl-options-trigger.is-focused,
.pl-options-trigger:focus {
  background: rgba(229,9,20,0.30) !important;
  border-color: #E50914 !important;
}

/* ── Panel Options Premium ────────────────────────────────────────────────── */
.pl-options-panel {
  position: absolute;
  bottom: 190px; right: 60px;
  width: 580px;
  background: rgba(5,5,18,0.97);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  padding: 32px 36px 28px;
  z-index: 35;
  -webkit-box-shadow: 0 8px 60px rgba(0,0,0,0.85), 0 0 0 1px rgba(229,9,20,0.12);
  box-shadow: 0 8px 60px rgba(0,0,0,0.85), 0 0 0 1px rgba(229,9,20,0.12);
}
.pl-options-panel.hidden { display: none; }

.pl-opt-header {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 16px;
  font-size: 28px; font-weight: 900; letter-spacing: 4px;
  color: rgba(255,255,255,0.40); text-transform: uppercase;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pl-opt-sections {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 20px;
}

.pl-opt-section-title {
  font-size: 22px; font-weight: 800; letter-spacing: 2px;
  color: rgba(255,255,255,0.35); text-transform: uppercase;
  margin-bottom: 12px;
}

.pl-opt-btn-row {
  display: -webkit-flex; display: flex;
  gap: 14px; -webkit-flex-wrap: wrap; flex-wrap: wrap;
}

.pl-opt-btn {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 16px 24px;
  font-size: 26px; font-weight: 600; color: #fff;
  cursor: pointer;
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition:         background 0.15s, border-color 0.15s;
  -webkit-flex: 1; flex: 1; min-width: 220px;
}
.pl-opt-btn.is-focused,
.pl-opt-btn:focus {
  background: rgba(229,9,20,0.22) !important;
  border-color: #E50914 !important;
  outline: none !important;
}

.pl-opt-live-only { display: none; }
.pl-live-mode .pl-opt-live-only { display: block; }

/* Spinner buffering */
.buf-spinner { width: 72px; height: 72px; border: 4px solid rgba(255,255,255,0.14); border-top-color: #E50914; border-radius: 50%; -webkit-animation: spin 0.85s linear infinite; animation: spin 0.85s linear infinite; }

.player-ch-selector {
  position: absolute; right: 72px; top: 50%;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  background: rgba(8,8,20,0.93); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg); padding: 24px 36px;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center; gap: 16px;
  min-width: 320px; z-index: 30;
}
.ch-sel-prev, .ch-sel-next { font-size: 18px; color: rgba(255,255,255,0.45); text-align: center; }
.ch-sel-cur { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.ch-sel-logo { width: 52px; height: 52px; border-radius: 8px; object-fit: contain; }
#ch-sel-name { font-size: 27px; font-weight: 700; color: white; }

/* ════════════════════════════════════════════════════════════════════
   NETFLIX SEEK INDICATOR — overlay seek visuel premium
   Apparaît sur chaque seek ← ou → (VOD/Série uniquement)
   ES5 + Tizen 2.4+ : pas de backdrop-filter, pas de position:fixed
════════════════════════════════════════════════════════════════════ */
.pl-seek-indicator {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 24;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  pointer-events: none;
}
.pl-seek-indicator.hidden { display: none; }

/* Demi-écran (rewind = gauche, ff = droite) */
.pl-seek-half {
  width: 40%; height: 100%;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap: 10px;
  position: relative;
  /* dégradé Netflix : sombre sur le bord, transparent vers le centre */
  -webkit-animation: seek-half-in 0.18s ease both;
  animation: seek-half-in 0.18s ease both;
}
.pl-seek-half--rw {
  background: -webkit-radial-gradient(ellipse at left center, rgba(0,0,0,0.72) 0%, transparent 70%);
  background:         radial-gradient(ellipse at left center, rgba(0,0,0,0.72) 0%, transparent 70%);
}
.pl-seek-half--ff {
  margin-left: auto;
  background: -webkit-radial-gradient(ellipse at right center, rgba(0,0,0,0.72) 0%, transparent 70%);
  background:         radial-gradient(ellipse at right center, rgba(0,0,0,0.72) 0%, transparent 70%);
}
.pl-seek-half.hidden { display: none; }

@-webkit-keyframes seek-half-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes seek-half-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ondulations (ripple) */
.pl-seek-ripple {
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  -webkit-animation: seek-ripple 1.1s ease-out infinite;
  animation: seek-ripple 1.1s ease-out infinite;
}
.pl-seek-ripple--2 {
  width: 220px; height: 220px;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
@-webkit-keyframes seek-ripple {
  0%   { -webkit-transform: scale(0.7); opacity: 0.7; }
  100% { -webkit-transform: scale(1.3); opacity: 0; }
}
@keyframes seek-ripple {
  0%   { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Flèches SVG */
.pl-seek-arrows { position: relative; z-index: 2; }

/* Compteur de secondes */
.pl-seek-secs {
  font-size: 88px; font-weight: 900; color: #fff;
  line-height: 1; position: relative; z-index: 2;
  letter-spacing: -2px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.pl-seek-unit {
  font-size: 28px; font-weight: 600; color: rgba(255,255,255,0.80);
  letter-spacing: 1px; text-transform: lowercase;
  position: relative; z-index: 2;
}

/* Zone centrale — position cible */
.pl-seek-center {
  -webkit-flex: 1; flex: 1; height: 100%;
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-end; align-items: flex-end;
  -webkit-justify-content: center; justify-content: center;
  padding-bottom: 180px;
  pointer-events: none;
}
.pl-seek-newpos {
  font-size: 40px; font-weight: 700; color: rgba(255,255,255,0.90);
  font-family: monospace; letter-spacing: 2px;
  background: rgba(0,0,0,0.55);
  padding: 12px 32px; border-radius: 50px;
  -webkit-box-shadow: 0 2px 16px rgba(0,0,0,0.5);
  box-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

/* ════════════════════════════════════════════════════════════════════
   LIVE TICKER — barre info-programme bas écran (style photo référence)
════════════════════════════════════════════════════════════════════ */
.live-ticker {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 250; /* au-dessus de screen-player (200) */
  pointer-events: none;
  -webkit-animation: ltk-slide-in 0.28s cubic-bezier(0.22,1,0.36,1) both;
  animation:         ltk-slide-in 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
.live-ticker.hidden { display: none; }

/* Ligne de progression colorée tout en bas */
.ltk-progress-line {
  height: 3px;
  background: rgba(255,255,255,0.10);
  width: 100%;
}
.ltk-progress-fill {
  height: 100%;
  background: #E50914;
  background: var(--red);
  width: 0%;
  -webkit-transition: width 0.6s linear;
  transition:         width 0.6s linear;
}

/* Bande principale */
.ltk-body {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  padding: 18px 80px 20px;
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.88) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.88) 100%);
}

.ltk-left {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 20px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

/* Pastille rouge "● EN DIRECT" */
.ltk-live-dot {
  display: inline-block;
  width: 14px; height: 14px;
  background: #E50914;
  background: var(--red);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(229,9,20,0.22);
  -webkit-animation: ltk-dot-pulse 2s ease-in-out infinite;
  animation:         ltk-dot-pulse 2s ease-in-out infinite;
}
@-webkit-keyframes ltk-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(229,9,20,0.20); }
  50%       { box-shadow: 0 0 0 7px rgba(229,9,20,0.0);  }
}
@keyframes ltk-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(229,9,20,0.20); }
  50%       { box-shadow: 0 0 0 7px rgba(229,9,20,0.0);  }
}

.ltk-ch-name {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

.ltk-sep {
  font-size: 26px;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

.ltk-prog-title {
  font-size: 30px;
  font-weight: 400;
  color: rgba(255,255,255,0.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ltk-right {
  flex-shrink: 0;
  margin-left: 40px;
}

.ltk-remain {
  font-size: 30px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.5px;
}

@-webkit-keyframes ltk-slide-in {
  from { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; }
  to   { -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }
}
@keyframes ltk-slide-in {
  from { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; }
  to   { -webkit-transform: translateY(0);    transform: translateY(0);    opacity: 1; }
}

/* Tizen 4 : pas de transform sur les couches GPU sensibles → utiliser opacity seule */
.live-ticker.ltk-fade-out {
  -webkit-animation: ltk-fade 0.40s ease both;
  animation:         ltk-fade 0.40s ease both;
}
@-webkit-keyframes ltk-fade { to { opacity: 0; } }
@keyframes ltk-fade         { to { opacity: 0; } }

/* FIX Tizen4 07/2026 : gap colonne ignoré M56 → icône/message/boutons tassés */
.player-error {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92); z-index: 40;
}
.player-error > * { margin-bottom: 28px; }
.player-error > *:last-child { margin-bottom: 0; }
.pl-err-actions > .modal-btn { margin: 0 10px; }
.player-error.hidden { display: none; }
.pl-err-icon { font-size: 51px; }
.pl-err-msg { font-size: 18px; color: var(--t2); text-align: center; }

/* FIX Tizen4 07/2026 : gap ignoré M56 → pastilles couleur collées */
.pl-color-hints { position: absolute; bottom: 180px; right: 72px; display: -webkit-flex; display: flex; }
.pl-color-hints > * { margin-left: 20px; }
.pl-color-hints > *:first-child { margin-left: 0; }
/* .pl-hint kept for backward compat — .pl-hint-btn replaces in HTML */

.ch-num-overlay {
  position: absolute; right: 80px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.93); border: 1px solid var(--red);
  border-radius: var(--radius-lg); padding: 28px 48px;
  text-align: center; z-index: 50;
  box-shadow: 0 0 40px rgba(229,9,20,0.25);
}
.ch-num-overlay.hidden { display: none; }
.ch-num-display { font-size: 70px; font-weight: 900; font-family: monospace; color: white; letter-spacing: 6px; line-height: 1; }
.ch-num-hint { font-size: 18px; color: var(--t3); margin-top: 12px; }

/* ════════════════════════════════════════════════════════════════════
   PLAYER EPG SIDE PANEL  (ArrowRight depuis le player live)
════════════════════════════════════════════════════════════════════ */
.player-epg-panel {
  position: absolute;
  top: 0; right: 0;
  width: 520px; height: 100%;
  background: rgba(6,6,14,0.96);
  border-left: 2px solid rgba(229,9,20,0.45);
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  z-index: 35;
  -webkit-transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease;
  -webkit-transform: translateX(0); transform: translateX(0);
}
.player-epg-panel.hidden {
  -webkit-transform: translateX(520px); transform: translateX(520px);
  pointer-events: none;
  /* Tizen 4 : display:none interrompt la transition ; utiliser transform */
}

.pep-header {
  padding: 90px 36px 24px; /* 90px top = safe zone */
  border-bottom: 1px solid rgba(255,255,255,0.10);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.pep-ch-name {
  font-size: 30px; font-weight: 800; color: #FFF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px;
}
.pep-date { font-size: 18px; color: rgba(255,255,255,0.45); font-weight: 600; }

.pep-list {
  -webkit-flex: 1; flex: 1;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  padding: 8px 0;
}
.pep-list::-webkit-scrollbar { display: none; }

.pep-loading { padding: 40px 36px; font-size: 22px; color: rgba(255,255,255,0.40); text-align: center; }

.pep-item {
  padding: 18px 36px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  position: relative;
  -webkit-transition: background 0.12s; transition: background 0.12s;
}
.pep-item.pep-now   { background: rgba(229,9,20,0.12); }
.pep-item.pep-past  { opacity: 0.60; }
.pep-item.pep-focused {
  background: rgba(229,9,20,0.22);
  border-left: 4px solid #E50914;
  padding-left: 32px;
}
.pep-item.pep-focused.pep-past { opacity: 1.0; }

.pep-time {
  font-size: 19px; font-weight: 700; font-family: monospace;
  color: rgba(255,255,255,0.55);
  margin-bottom: 5px;
}
.pep-item.pep-now .pep-time  { color: #E50914; }
.pep-title {
  font-size: 22px; font-weight: 600; color: #FFF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pep-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 4px;
  background: rgba(229,9,20,0.85); color: #FFF;
}
.pep-badge-replay {
  background: rgba(60,130,220,0.85);
  cursor: pointer;
}
.pep-item.pep-past:hover .pep-badge-replay,
.pep-item.pep-focused .pep-badge-replay { background: rgba(60,130,220,1.0); }
.pep-now-indicator {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 4px;
  background: #E50914; color: #FFF;
}

.pep-hint {
  padding: 20px 36px 80px; /* 80px bottom = safe zone */
  font-size: 18px; color: rgba(255,255,255,0.35);
  text-align: center; font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.08);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   MODAL — VOD / Series
════════════════════════════════════════════════════════════════════ */
.modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.84); }
.modal-content {
  position: relative; z-index: 1;
  display: flex; gap: 56px;
  max-width: 1340px; max-height: 880px;
  padding: 60px;
  background: linear-gradient(145deg, #1A1A2E 0%, #0E0E1C 100%);
  border-radius: var(--radius-xl);
  border: 1px solid var(--b3);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.85);
}
.modal-poster { width: 290px; height: 435px; object-fit: cover; border-radius: var(--radius-lg); flex-shrink: 0; background: #1C1C30; background: var(--bg-elevated); box-shadow: 0 20px 60px rgba(0,0,0,0.65); }
/* FIX Tizen4 07/2026 : gap colonne ignoré M56 → titre/synopsis/boutons tassés */
.modal-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.modal-info > * { margin-bottom: 20px; }
.modal-info > *:last-child { margin-bottom: 0; }
.modal-title { font-size: 37px; font-weight: 900; color: var(--t1); line-height: 1.1; }
.modal-meta { font-size: 19px; color: var(--t2); }
.modal-plot { font-size: 19px; color: var(--t2); line-height: 1.65; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
/* FIX Tizen4 07/2026 : gap ignoré M56 → boutons Lecture/Ma liste/Fermer collés */
.modal-actions { display: flex; margin-top: 8px; }
.modal-actions > .modal-btn { margin-right: 20px; }
.modal-actions > .modal-btn:last-child { margin-right: 0; }
.modal-btn { padding: 18px 36px; border-radius: var(--radius); font-size: 19px; font-weight: 800; cursor: pointer; border: 1px solid var(--b3); background: rgba(255,255,255,0.08); color: white; transition: var(--transition); }
.modal-btn.primary { background: #E50914; background: var(--red); border-color: transparent; box-shadow: 0 8px 28px rgba(229,9,20,0.42); }
.modal-btn:hover, .modal-btn:focus { filter: brightness(1.2); }

.modal-seasons-title { font-size: 36px; font-weight: 800; color: rgba(255,255,255,0.50); letter-spacing: 2px; text-transform: uppercase; margin-top: 8px; }
.modal-seasons-list { display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.modal-episodes-list {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 6px; max-height: 530px;
  overflow-y: auto; overflow-x: hidden;
  margin-top: 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative; /* fix offsetTop = relatif à ce conteneur */
}
.modal-episodes-list::-webkit-scrollbar { display: none; }

/* Wrapper pour positionner le slicer à droite */
.modal-ep-wrap {
  position: relative;
  margin-top: 10px;
}
/* Slicer (scroll indicator) Netflix style */
.ep-slicer {
  position: absolute;
  right: 4px; top: 0;
  width: 4px;
  /* height set dynamically by _updateEpSlicer JS */
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: visible;
  z-index: 2;
}
.ep-slicer-thumb {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: rgba(255,255,255,0.65);
  border-radius: 2px;
  -webkit-transition: top 0.18s ease, height 0.18s ease;
  transition:         top 0.18s ease, height 0.18s ease;
  min-height: 30px;
}
/* .episode-item — défini dans le bloc "SÉRIES premium" plus bas */

/* Credentials modal */
.modal-creds-content {
  position: relative; z-index: 1;
  background: linear-gradient(145deg, #1A1A2E 0%, #0E0E1C 100%);
  border: 1px solid var(--b3); border-radius: var(--radius-xl);
  padding: 56px 64px; width: 1100px;
  max-height: 920px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 28px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.85);
}
.modal-creds-title { font-size: 32px; font-weight: 900; color: var(--t1); }
.modal-creds-hint  { font-size: 18px; color: var(--t3); }
.creds-field-group { display: flex; flex-direction: column; gap: 8px; }
.creds-label { font-size: 19px; color: var(--t3); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }
.creds-input-wrap {
  background: #161626; background: var(--bg-surface); border: 1px solid var(--b2);
  border-radius: var(--radius); padding: 18px 24px;
  min-height: 62px; cursor: pointer; transition: var(--transition);
}
.creds-input-wrap.active, .creds-input-wrap:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(229,9,20,0.22); outline: none; }
.creds-input-val { font-size: 32px; color: var(--t1); font-family: monospace; word-break: break-all; letter-spacing: 3px; }
.creds-actions { display: flex; gap: 20px; margin-top: 8px; }

/* ── Clé device visible en grand dans Paramètres ─────────────────── */
.sett-device-key-row { background: rgba(229,9,20,0.06); border: 1px solid rgba(229,9,20,0.18) !important; border-radius: 12px; }
.sett-key-big { font-size: 36px !important; font-family: monospace; letter-spacing: 4px; color: var(--t1) !important; font-weight: 700; }

/* ── Mon Compte — panneau identité + playlist + actions ────────────── */
.sett-account-row {
  -webkit-justify-content: space-between; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sett-account-val {
  font-size: 26px;
  color: var(--t2);
  text-align: right;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sett-account-badge {
  display: inline-block;
  padding: 4px 18px;
  border-radius: 20px;
  font-size: 24px; font-weight: 700;
  background: rgba(229,9,20,0.12);
  color: #E50914;
  border: 1px solid rgba(229,9,20,0.3);
  letter-spacing: 1px;
}
.sett-account-badge.badge-wifi  { background: rgba(0,180,100,0.12); color: #00C86E; border-color: rgba(0,180,100,0.3); }
.sett-account-badge.badge-cable { background: rgba(0,140,255,0.12); color: #2196F3; border-color: rgba(0,140,255,0.3); }
.sett-account-badge.badge-xtream { background: rgba(229,9,20,0.12); color: #E50914; border-color: rgba(229,9,20,0.3); }
.sett-account-badge.badge-m3u   { background: rgba(255,160,0,0.12); color: #FFA000; border-color: rgba(255,160,0,0.3); }
.sett-password-dots { letter-spacing: 6px; font-size: 28px; color: var(--t3) !important; }

/* ── Boutons Sauvegarder / Quitter ─────────────────────────────────── */
.sett-account-actions {
  display: -webkit-flex; display: flex;
  gap: 24px;
  margin-top: 30px;
  padding: 0 20px 40px;
}
.sett-account-btn {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap: 14px;
  flex: 1;
  height: 84px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition: background 0.15s, border-color 0.15s;
}
.sett-account-btn-ico { font-size: 34px; }
.sett-account-btn-lbl { font-size: 28px; font-weight: 700; color: var(--t1); letter-spacing: 1px; }

.sett-btn-save { border-color: rgba(0,180,100,0.25); }
.sett-btn-save:focus,
.sett-btn-save.is-focused,
.sett-btn-save.focused {
  background: rgba(0,180,100,0.16);
  border-color: #00C86E;
  box-shadow: 0 0 0 2px rgba(0,180,100,0.25), 0 4px 20px rgba(0,180,100,0.18);
  outline: none;
  -webkit-transform: none !important;
  transform: none !important;
}
.sett-btn-save:focus .sett-account-btn-lbl,
.sett-btn-save.is-focused .sett-account-btn-lbl,
.sett-btn-save.focused   .sett-account-btn-lbl { color: #00C86E; }

.sett-btn-quit { border-color: rgba(229,9,20,0.25); }
.sett-btn-quit:focus,
.sett-btn-quit.is-focused,
.sett-btn-quit.focused {
  background: rgba(229,9,20,0.16);
  border-color: #E50914;
  box-shadow: 0 0 0 2px rgba(229,9,20,0.25), 0 4px 20px rgba(229,9,20,0.18);
  outline: none;
  -webkit-transform: none !important;
  transform: none !important;
}
.sett-btn-quit:focus .sett-account-btn-lbl,
.sett-btn-quit.is-focused .sett-account-btn-lbl,
.sett-btn-quit.focused   .sett-account-btn-lbl { color: #E50914; }

/* ── Bouton "Modifier la clé" — action row ────────────────────────── */
.sett-opt-action {
  font-size: 32px; font-weight: 600;
  color: var(--red); opacity: 0.85;
}
#sopt-edit-key-btn:focus,
#sopt-edit-key-btn.is-focused,
#sopt-edit-key-btn.focused {
  background: rgba(229,9,20,0.10);
  border-color: rgba(229,9,20,0.35);
  outline: none;
}
#sopt-edit-key-btn:focus .sett-opt-action,
#sopt-edit-key-btn.is-focused .sett-opt-action,
#sopt-edit-key-btn.focused .sett-opt-action {
  color: #fff; opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════
   MODAL CLAVIER HEX — Clé d'activation
════════════════════════════════════════════════════════════════════ */
#modal-actkey {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  z-index: 9500;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: rgba(0,0,0,0.75);
}
#modal-actkey.hidden { display: none !important; }

.actkey-modal-box {
  width: 820px;
  background: rgba(12,12,22,0.98);
  border: 1px solid rgba(229,9,20,0.30);
  border-radius: 24px;
  padding: 52px 56px 48px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(229,9,20,0.12);
}

.actkey-modal-hdr {
  font-size: 36px; font-weight: 700;
  color: var(--t1); text-align: center;
  margin-bottom: 20px;
}

.actkey-modal-hint {
  font-size: 28px; color: var(--t2);
  text-align: center; line-height: 1.5;
  margin-bottom: 36px;
}

.actkey-display-row {
  display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
  margin-bottom: 36px;
}

.actkey-display {
  display: -webkit-flex; display: flex;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 18px 28px;
  min-width: 380px;
  -webkit-justify-content: center; justify-content: center;
}

.actkey-char {
  display: inline-block;
  width: 52px; height: 64px;
  line-height: 64px; text-align: center;
  font-family: monospace; font-size: 44px; font-weight: 700;
  color: var(--t1);
  border-bottom: 3px solid rgba(255,255,255,0.25);
}

.actkey-char.actkey-cursor {
  border-bottom-color: var(--red);
  color: var(--red);
  -webkit-animation: actkey-blink 1s step-end infinite;
  animation: actkey-blink 1s step-end infinite;
}

@-webkit-keyframes actkey-blink {
  0%, 100% { border-bottom-color: var(--red); }
  50%       { border-bottom-color: transparent; }
}
@keyframes actkey-blink {
  0%, 100% { border-bottom-color: var(--red); }
  50%       { border-bottom-color: transparent; }
}

/* Grille 9 colonnes (1-9, 0, A-F, ⌫) = 17 boutons */
.actkey-hex-grid {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 14px;
  -webkit-justify-content: center; justify-content: center;
  margin-bottom: 36px;
}

.hex-key-btn {
  width: 96px; height: 80px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  font-size: 36px; font-weight: 700;
  color: var(--t1);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  cursor: pointer;
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition: background 0.15s, border-color 0.15s;
}

.hex-key-btn:focus,
.hex-key-btn.is-focused,
.hex-key-btn.focused {
  background: rgba(229,9,20,0.20);
  border-color: var(--red);
  color: #fff;
  -webkit-transform: none !important; transform: none !important;
  box-shadow: 0 0 0 2px var(--red-glow);
  outline: none;
}

.hex-key-del {
  background: rgba(255,255,255,0.03);
  color: var(--t2);
  font-size: 32px;
}
.hex-key-del:focus, .hex-key-del.is-focused, .hex-key-del.focused {
  background: rgba(255,200,0,0.15);
  border-color: rgba(255,200,0,0.50);
  color: #ffd700;
  box-shadow: 0 0 0 2px rgba(255,200,0,0.25);
}

.actkey-modal-footer {
  display: -webkit-flex; display: flex;
  gap: 24px;
  -webkit-justify-content: center; justify-content: center;
}

.actkey-btn-cancel,
.actkey-btn-confirm {
  height: 72px; padding: 0 48px;
  border-radius: 14px;
  font-size: 32px; font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition: background 0.15s, border-color 0.15s;
}

.actkey-btn-cancel {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: var(--t2);
}
.actkey-btn-cancel:focus,
.actkey-btn-cancel.is-focused,
.actkey-btn-cancel.focused {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.45);
  color: var(--t1);
  -webkit-transform: none !important; transform: none !important;
  outline: none;
}

.actkey-btn-confirm {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.actkey-btn-confirm:focus,
.actkey-btn-confirm.is-focused,
.actkey-btn-confirm.focused {
  background: #ff1a2a;
  border-color: #ff5060;
  -webkit-transform: none !important; transform: none !important;
  box-shadow: 0 0 0 3px var(--red-glow);
  outline: none;
}



/* ════════════════════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%);
  background: rgba(18,18,30,0.97);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 22px; padding: 24px 52px;
  font-size: 21px; font-weight: 600; color: #F0F0FF;
  z-index: 10000; max-width: 1100px; text-align: center;
  box-shadow: 0 16px 60px rgba(0,0,0,0.80);
  transition: opacity 0.3s;
}
.toast.hidden   { display: none; }
.toast.ok       { border-color: var(--green); color: var(--green); }
.toast.warn     { border-color: var(--gold);  color: var(--gold); }
.toast.info     { border-color: var(--blue);  color: var(--blue); }


/* ════════════════════════════════════════════════════════════════════
   MISC
════════════════════════════════════════════════════════════════════ */
.ch-fav-icon { font-size: 19px; color: var(--red); min-width: 36px; text-align: center; margin-right: 8px; }
.channel-item.fav .ch-fav-icon { visibility: visible !important; }
.list-loading, .list-empty { padding: 60px; text-align: center; color: var(--t3); font-size: 27px; line-height: 1.7; }
/* Bouton ↺ Réessayer affiché dans les états d'erreur catégories */
.retry-btn {
  display: inline-block; margin-left: 16px; padding: 10px 22px;
  background: rgba(229,9,20,0.18); border: 1.5px solid #E50914;
  border-radius: 8px; color: #fff; font-size: 26px; cursor: pointer;
  -webkit-transition: background 0.15s; transition: background 0.15s;
  vertical-align: middle;
}
.retry-btn:focus { background: rgba(229,9,20,0.42); outline: none; box-shadow: 0 0 0 2px #E50914; }

/* ── Badge détection Xtream automatique dans le modal M3U ─────────── */
.mpl-xtream-badge {
  margin-top: 12px;
  padding: 14px 20px;
  background: rgba(18, 80, 38, 0.85);
  border: 1.5px solid #2ecc6e;
  border-radius: 10px;
  color: #6effa0;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  -webkit-transition: opacity 0.2s; transition: opacity 0.2s;
}
.mpl-xtream-badge.hidden { display: none; }

/* ── Long-press favori — barre rouge progressive (reproduit Android 1.5s hold) */
.ch-hold-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 0%;
  background: #E50914; background: var(--red);
  pointer-events: none;
  z-index: 10;
}

/* ── Overlay zapping (reproduit Android PreviewPlayerView overlayAlpha 250ms) */
#zap-overlay {
  position: absolute;
  top:0; right:0; bottom:0; left:0
  background: #0A0A0A;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 20;
}

/* ── Focus channel-item : bg sombre (align Android Color(0xFF2A2A2A)) ─────── */
/* L'Android n'utilise pas de bague rouge sur les items de liste → bg dark subtil */
.channel-item.active-focus {
  background: #2A2A2A !important;
  border-left-color: var(--red) !important;
  box-shadow: none !important;
}
.channel-item.active-focus .channel-name { color: #fff !important; }

/* ════════════════════════════════════════════════════════════════════
   .is-focused — nouvelle classe injectée par spatial-nav.js
   Synonyme exact de .focused pour garantir la rétrocompatibilité CSS.
   Les deux classes sont appliquées simultanément par SpatialNav.focus().
════════════════════════════════════════════════════════════════════ */

/* Même règle de base que .focusable.focused */
.focusable.is-focused {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(229,9,20,0.95),
              0 0 0 7px rgba(229,9,20,0.20),
              0 12px 48px rgba(0,0,0,0.80);
  transform: scale(1.14);
  z-index: 20;
}

/* ── Annulation scale pour les éléments qui ne doivent PAS grossir ──
   Ces règles arrivent APRÈS .focusable.is-focused → elles gagnent
   la cascade même sans !important, mais on met !important par sécurité.
   Concerne : topnav, dialog exit, boutons saison, modal-btn, act-btn.   */
.tn-item.is-focused,
.tn-item.focusable.is-focused,
.exit-btn-confirm.is-focused,
.exit-btn-confirm.focusable.is-focused,
.exit-btn-cancel.is-focused,
.exit-btn-cancel.focusable.is-focused,
.season-btn.is-focused,
.season-btn.focusable.is-focused,
.modal-btn.is-focused,
.modal-btn.focusable.is-focused,
.act-btn.is-focused,
.act-btn.focusable.is-focused {
  -webkit-transform: none !important;
  transform: none !important;
}

/* Halo « Vérifier l'activation » — après .focusable.is-focused pour gagner la cascade */
.act-btn.focusable.focused,
.act-btn.focusable.is-focused,
.act-btn.is-focused {
  outline: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  box-shadow: 0 6px 0 #7a0008,
              0 0 0 4px #fff,
              0 12px 50px rgba(229,9,20,0.6) !important;
  z-index: 20;
}
.act-btn--hero.focusable.focused,
.act-btn--hero.focusable.is-focused,
.act-btn--hero.is-focused {
  box-shadow: 0 0 0 4px #fff,
              0 0 40px rgba(229,9,20,0.5) !important;
}

/* ── nav-item.is-focused ──────────────────────────────────────────── */
.nav-item.is-focused {
  color:             #fff                     !important;
  background:        rgba(229,9,20,0.55)      !important;
  border-left-color: transparent              !important;
  border-radius:     0 14px 14px 0            !important;
  margin-right:      12px                     !important;
  transform:         none                     !important;
  outline:           none                     !important;
  box-shadow:        none                     !important;
}
.nav-item.is-focused .nav-icon { color: #fff !important; }

/* ── cat-item.is-focused ──────────────────────────────────────────── */
.cat-item.is-focused {
  color:             var(--t1)                !important;
  background:        rgba(229,9,20,0.13)      !important;
  border-left-color: var(--red)               !important;
  transform:         none                     !important;
  outline:           none                     !important;
  box-shadow:        none                     !important;
}

/* ── channel-item.is-focused ─────────────────────────────────────── */
.channel-item.is-focused {
  background:        rgba(229,9,20,0.14)      !important;
  border-left-color: var(--red)               !important;
  transform:         none                     !important;
  outline:           none                     !important;
  box-shadow:        none                     !important;
}
.channel-item.is-focused .channel-name { color: var(--t1) !important; }

/* ── vod-card.is-focused ─────────────────────────────────────────── */
.vod-card.is-focused {
  transform:    scale(1.13)                   !important;
  outline:      none                          !important;
  border-color: var(--red)                    !important;
  box-shadow:   0 0 0 3px rgba(229,9,20,0.92),
                0 0 0 7px rgba(229,9,20,0.20),
                0 0 55px rgba(229,9,20,0.28),
                0 22px 65px rgba(0,0,0,0.90)  !important;
  z-index: 20; position: relative;
}

/* ── dash-cat-card.is-focused ────────────────────────────────────── */
.dash-cat-card.is-focused {
  transform:    scale(1.07) translateY(-5px)  !important;
  border-color: rgba(255,255,255,0.28)        !important;
  box-shadow:   0 0 0 2px rgba(255,255,255,0.55),
                0 28px 68px rgba(0,0,0,0.70)  !important;
  outline:      none                          !important;
  background:   var(--bg-elevated)            !important;
}

/* ── dash-card.is-focused ────────────────────────────────────────── */
.dash-card.is-focused {
  transform:    scale(1.11)                   !important;
  border-color: rgba(255,255,255,0.22)        !important;
  box-shadow:   0 0 0 2px rgba(255,255,255,0.82),
                0 14px 44px rgba(0,0,0,0.80)  !important;
  outline:      none                          !important;
  z-index: 5;
}

/* ════════════════════════════════════════════════════════════════════
   SPATIAL NAVIGATION — per-element focus overrides (.focused = compat)
   Rule: list items = NO scale · grid cards = scale + glow ring
════════════════════════════════════════════════════════════════════ */

/* ── nav-item: left accent brightens, no scale ─────────────────── */
.nav-item:focus,
.nav-item.focused {
  color:            var(--t1)                     !important;
  background:       rgba(255,255,255,0.07)        !important;
  border-left-color: var(--red)                   !important;
  transform:        none                          !important;
  outline:          none                          !important;
  box-shadow:       none                          !important;
}
.nav-item:focus .nav-icon,
.nav-item.focused .nav-icon { color: var(--red) !important; }

/* ── cat-item: highlight row, no scale ─────────────────────────── */
.cat-item:focus,
.cat-item.focused {
  color:            var(--t1)                     !important;
  background:       rgba(229,9,20,0.13)           !important;
  border-left-color: var(--red)                   !important;
  transform:        none                          !important;
  outline:          none                          !important;
  box-shadow:       none                          !important;
}

/* ── channel-item: premium row highlight (Focus Engine 2.0) ──────── */
.channel-item:focus,
.channel-item.focused {
  background:        linear-gradient(90deg, rgba(229,9,20,0.18) 0%, rgba(229,9,20,0.06) 100%) !important;
  border-left-color: var(--red)                    !important;
  border-left-width: 4px                           !important;
  transform:         none                          !important;
  outline:           none                          !important;
  /* Lueur discrète sur le bord gauche — indique le focus sans scale (liste dense) */
  box-shadow:        inset 3px 0 0 var(--red),
                     0 0 24px rgba(229,9,20,0.08)  !important;
}
.channel-item:focus .channel-name,
.channel-item.focused .channel-name {
  color:       var(--t1) !important;
  font-weight: 600       !important;
}
.channel-item:focus .channel-num,
.channel-item.focused .channel-num {
  color: var(--red) !important;
}

/* ── vod-card: scale + luminous red ring ───────────────────────── */
.vod-card:focus,
.vod-card.focused {
  transform:     scale(1.13)                      !important;
  outline:       none                             !important;
  border-color:  var(--red)                       !important;
  box-shadow:    0 0 0 3px rgba(229,9,20,0.92),
                 0 0 0 7px rgba(229,9,20,0.20),
                 0 0 55px rgba(229,9,20,0.28),
                 0 22px 65px rgba(0,0,0,0.90)     !important;
  z-index:       20;
  position:      relative;
}

/* ════════════════════════════════════════════════════════════════════
   AMÉLIORATIONS v2 — transitions, EPG, badges HD, continue watching,
   écran de veille
════════════════════════════════════════════════════════════════════ */

/* ── Transition fondu entre écrans ───────────────────────────────── */
@keyframes screen-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.screen--in {
  animation: screen-fade-in 0.20s ease both;
}

/* ── EPG — barre progression + programme suivant ─────────────────── */
.pl-epg-bar-wrap {
  width: 100%; height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 1px; overflow: hidden;
  margin: 5px 0 3px;
}
.pl-epg-bar-fill {
  height: 100%;
  background: #E50914; background: var(--red);
  border-radius: 1px;
  transition: width 1s linear;
  will-change: width;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  box-shadow: 0 0 6px rgba(229,9,20,0.70);
}
.pl-epg-next {
  font-size: 18px;
  color: rgba(168,168,200,0.45);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 640px;
}

/* ── Badges qualité HD / FHD / 4K ────────────────────────────────── */
.ch-quality-badge {
  display: inline-block;
  font-size: 18px; font-weight: 800;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-left: 8px; vertical-align: middle;
  line-height: 1.4;
}
.ch-quality-badge.badge-4k  { background: #7B1FA2; color: #fff; }
.ch-quality-badge.badge-fhd { background: #1565C0; color: #fff; }
.ch-quality-badge.badge-hd  { background: #2E7D32; color: #fff; }

/* ── Continue à regarder ──────────────────────────────────────────── */
#dash-continue-wrap {
  padding: 0 40px 32px;
}
.dash-section-title {
  font-size: 28px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--t2); margin-bottom: 18px;
}
.dash-continue-list {
  display: flex; gap: 18px;
  flex-wrap: nowrap; overflow: hidden;
}
.cw-item {
  width: 200px; flex-shrink: 0;
  background: #1C1C30; background: var(--bg-elevated);
  border-radius: 8px; overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid rgba(255,255,255,0.06);
}
.cw-item:focus, .cw-item.focused, .cw-item.is-focused {
  outline: none;
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--red), 0 12px 30px rgba(0,0,0,0.60);
}
.cw-thumb {
  width: 100%; height: 112px;
  object-fit: cover; display: block;
  background: #10101E; background: var(--bg-panel);
}
.cw-progress {
  height: 3px; background: rgba(255,255,255,0.08);
}
.cw-progress-fill {
  height: 100%; background: #E50914; background: var(--red);
  transition: width 0.3s ease;
}
.cw-title {
  font-size: 21px; padding: 8px 10px;
  color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Écran de veille ──────────────────────────────────────────────── */
.screensaver {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9998;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
}
.screensaver.hidden { display: none; }
.ss-bg {
  position: absolute; top:0; right:0; bottom:0; left:0
  background: radial-gradient(ellipse at 30% 60%,
    rgba(229,9,20,0.08) 0%, rgba(0,0,0,0.98) 55%);
}
@keyframes ss-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.screensaver.ss--in {
  animation: ss-fade-in 1.2s ease both;
}
.ss-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.ss-clock {
  font-size: 144px; font-weight: 100;
  color: rgba(255,255,255,0.88);
  letter-spacing: -8px; line-height: 1;
  text-shadow: 0 0 80px rgba(229,9,20,0.12);
}
.ss-date {
  font-size: 27px; font-weight: 300;
  letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  margin-bottom: 30px;
}
.ss-brand {
  font-size: 19px; font-weight: 600;
  letter-spacing: 8px; text-transform: uppercase;
  color: rgba(229,9,20,0.40);
}
.ss-hint {
  font-size: 21px; font-weight: 300;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.12);
  margin-top: 6px;
}

/* ── dash-cat-card: lift + white ring ──────────────────────────── */
.dash-cat-card:focus,
.dash-cat-card.focused {
  transform:     scale(1.07) translateY(-5px)     !important;
  border-color:  rgba(255,255,255,0.28)           !important;
  box-shadow:    0 0 0 2px rgba(255,255,255,0.55),
                 0 28px 68px rgba(0,0,0,0.70)     !important;
  outline:       none                             !important;
  background:    var(--bg-elevated)               !important;
}

/* ── dash-card: scale + crisp white ring ───────────────────────── */
.dash-card:focus,
.dash-card.focused {
  transform:     scale(1.11)                      !important;
  border-color:  rgba(255,255,255,0.22)           !important;
  box-shadow:    0 0 0 2px rgba(255,255,255,0.82),
                 0 14px 44px rgba(0,0,0,0.80)     !important;
  outline:       none                             !important;
  z-index:       5;
}


/* ════════════════════════════════════════════════════════════════════
   MODAL NETFLIX — VOD / Séries
════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   MODAL DÉTAIL SÉRIE / VOD  (style référence photo)
════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   MODAL DETAIL — Layout Netflix authentique
   ══════════════════════════════════════════════════════════════════════════ */

.sd-modal {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10000;
  background: #000;
  overflow: hidden;
}
.sd-modal.hidden { display: none; }

/* ── Backdrop plein écran — net en mode VOD ──────────── */
.sd-backdrop {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
}
.sd-backdrop-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  -webkit-filter: brightness(0.45);
  filter: brightness(0.45);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* VOD : backdrop net (pas de blur) — le film DOIT être reconnaissable */
.sd-backdrop-img.vod-mode {
  -webkit-filter: brightness(0.60);
  filter: brightness(0.60);
}
/* Overlay gradient Netflix : assombrit la gauche et le bas */
.sd-backdrop-overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    -webkit-linear-gradient(right,
      rgba(0,0,0,0.94) 0%,
      rgba(0,0,0,0.75) 38%,
      rgba(0,0,0,0.25) 65%,
      rgba(0,0,0,0.00) 100%),
    -webkit-linear-gradient(top,
      rgba(0,0,0,0.00) 30%,
      rgba(0,0,0,0.90) 100%);
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.94) 0%,
      rgba(0,0,0,0.75) 38%,
      rgba(0,0,0,0.25) 65%,
      rgba(0,0,0,0.00) 100%),
    linear-gradient(to top,
      rgba(0,0,0,0.90) 0%,
      rgba(0,0,0,0.00) 30%);
}

/* ── Bouton fermer top-right ─────────────── */
.sd-close-btn {
  position: absolute; top: 40px; right: 56px;
  z-index: 20;
  width: 60px; height: 60px; border-radius: 50%;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: rgba(18,18,24,0.62);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.70);
  cursor: pointer; padding: 0;
  -webkit-transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.sd-close-btn svg { width: 26px; height: 26px; display: block; }
.sd-close-btn:focus,
.sd-close-btn.focused,
.sd-close-btn.is-focused {
  background: #e50914;
  border-color: #e50914; color: #fff;
  outline: none !important;
  -webkit-box-shadow: 0 0 0 4px rgba(229,9,20,0.28), 0 8px 22px rgba(0,0,0,0.45);
  box-shadow: 0 0 0 4px rgba(229,9,20,0.28), 0 8px 22px rgba(0,0,0,0.45);
  -webkit-transform: none !important; transform: none !important;
}

/* ── Contenu Netflix — bas-gauche ─────────── */
.sd-content {
  position: absolute;
  bottom: 64px; left: 0;
  width: 60%; max-width: 1060px;
  z-index: 5;
  padding: 0 0 0 96px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* ── Fil d'Ariane ────────────────────────── */
.sd-breadcrumb {
  font-size: 22px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: #e50914; margin-bottom: 10px;
}
.sd-breadcrumb:empty { display: none; }

/* ── Titre ───────────────────────────────── */
.sd-title {
  font-size: 60px; font-weight: 900;
  color: #ffffff; line-height: 1.06;
  letter-spacing: -0.5px;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.65);
}

/* ── Ligne méta : ★ note | année | durée | genre ── */
.sd-meta-row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 20px;
}
/* Score étoiles TMDB */
.sd-meta-score {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 5px;
  font-size: 25px; font-weight: 800; color: #F5C518;
}
.sd-meta-score-stars { font-size: 20px; letter-spacing: -2px; }
.sd-meta-dot { color: rgba(255,255,255,0.30); font-size: 18px; margin: 0 2px; }
/* Badges */
.sd-badge {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  font-size: 22px; font-weight: 600;
  color: rgba(255,255,255,0.80);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 4px 14px;
}
.sd-badge-star { color: #F5C518; background: rgba(245,197,24,0.12); border-color: rgba(245,197,24,0.30); font-weight: 800; }
.sd-badge-hd   { background: rgba(255,255,255,0.18); color: #fff; font-weight: 800; border-color: rgba(255,255,255,0.30); }
.sd-badge-genre { color: rgba(255,255,255,0.65); }
.sd-badge-director { color: rgba(200,200,255,0.75); }

/* ── Synopsis — 4 lignes max ─────────────── */
.sd-plot {
  font-size: 24px; color: rgba(230,230,255,0.82);
  line-height: 1.62;
  margin: 0 0 28px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-shadow: 0 1px 5px rgba(0,0,0,0.50);
}

/* ── Boutons ─────────────────────────────── */
.sd-actions {
  display: -webkit-flex; display: flex;
  gap: 18px;
  -webkit-align-items: center; align-items: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  margin-bottom: 28px;
}
/* LECTURE — blanc plein */
.sd-btn-primary {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 14px; padding: 20px 52px;
  background: #ffffff;
  border: none; border-radius: 10px;
  font-size: 32px; font-weight: 900; color: #0a0a0f;
  cursor: pointer; white-space: nowrap;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}
.sd-btn-primary:focus,
.sd-btn-primary.focused,
.sd-btn-primary.is-focused,
.sd-btn-primary.focusable:focus,
.sd-btn-primary.focusable.is-focused {
  background: #d8d8d8;
  outline: none !important;
  -webkit-box-shadow: 0 0 0 4px rgba(255,255,255,0.55);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.55);
  -webkit-transform: none !important; transform: none !important;
}
/* MA LISTE / BANDE-ANNONCE — verre gris */
.sd-btn-secondary {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 12px; padding: 20px 44px;
  background: rgba(109,109,110,0.65);
  border: none; border-radius: 10px;
  font-size: 30px; font-weight: 700; color: #fff;
  cursor: pointer; white-space: nowrap;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}
.sd-btn-secondary:focus,
.sd-btn-secondary.focused,
.sd-btn-secondary.is-focused,
.sd-btn-secondary.focusable:focus,
.sd-btn-secondary.focusable.is-focused {
  background: rgba(109,109,110,0.95);
  outline: none !important;
  -webkit-box-shadow: 0 0 0 3px rgba(255,255,255,0.65);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.65);
  -webkit-transform: none !important; transform: none !important;
}
/* Favoris actif */
.sd-btn-secondary.is-fav svg { fill: #e50914; stroke: #e50914; }

/* Garder compatibilité anciens noms */
.sd-btn-watch { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; gap: 12px; padding: 20px 44px; background: rgba(109,109,110,0.65); border: none; border-radius: 10px; font-size: 30px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; }
.sd-btn-watch:focus, .sd-btn-watch.focused, .sd-btn-watch.is-focused, .sd-btn-watch.focusable:focus, .sd-btn-watch.focusable.is-focused { background: rgba(109,109,110,0.95); outline: none !important; -webkit-box-shadow: 0 0 0 3px rgba(255,255,255,0.65); box-shadow: 0 0 0 3px rgba(255,255,255,0.65); -webkit-transform: none !important; transform: none !important; }
.sd-btn-fav  { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; gap: 12px; padding: 20px 44px; background: rgba(109,109,110,0.65); border: none; border-radius: 10px; font-size: 30px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; }
.sd-btn-fav:focus, .sd-btn-fav.focused, .sd-btn-fav.is-focused, .sd-btn-fav.focusable:focus, .sd-btn-fav.focusable.is-focused { background: rgba(109,109,110,0.95); outline: none !important; -webkit-box-shadow: 0 0 0 3px rgba(255,255,255,0.65); box-shadow: 0 0 0 3px rgba(255,255,255,0.65); -webkit-transform: none !important; transform: none !important; }
.sd-btn-fav.is-fav svg { fill: #e50914; stroke: #e50914; }

/* Variante rouge — épisode suivant */
.sd-btn-next {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 12px; padding: 20px 44px;
  background: rgba(229,9,20,0.85);
  border: none; border-radius: 10px;
  font-size: 30px; font-weight: 700; color: #fff;
  cursor: pointer; white-space: nowrap;
  -webkit-transition: background 0.15s; transition: background 0.15s;
}
.sd-btn-next:focus, .sd-btn-next.focused, .sd-btn-next.is-focused,
.sd-btn-next.focusable:focus, .sd-btn-next.focusable.is-focused {
  background: #E50914;
  -webkit-box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 6px 24px rgba(229,9,20,0.50);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 6px 24px rgba(229,9,20,0.50);
  outline: none !important; -webkit-transform: none !important; transform: none !important;
}

/* ── Section casting / réal ──────────────── */
.sd-crew {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 7px; margin-bottom: 10px;
}
.sd-crew-line {
  font-size: 21px; color: rgba(255,255,255,0.62);
  line-height: 1.5;
}
.sd-crew-label { font-weight: 700; color: rgba(255,255,255,0.42); margin-right: 6px; }
.sd-crew-val   { color: rgba(255,255,255,0.78); }

/* ── Synopsis secondaire (méta-cast inline) ─ */
.sd-meta-cast { font-size: 21px; color: rgba(255,255,255,0.60); margin-top: 4px; width: 100%; }

/* ── Poster miniature coin bas-droit ─────── */
.sd-poster-thumb {
  position: absolute;
  bottom: 64px; right: 80px;
  width: 190px; height: 285px;
  object-fit: cover; border-radius: 10px;
  -webkit-box-shadow: 0 16px 50px rgba(0,0,0,0.80);
  box-shadow: 0 16px 50px rgba(0,0,0,0.80);
  border: 2px solid rgba(255,255,255,0.10);
  z-index: 5;
}

/* ── Section label ──────────────────────── */
.sd-section-label {
  font-size: 27px; font-weight: 800; color: #fff;
  margin-bottom: 18px;
}

/* ── Saisons pills ──────────────────────── */
.sd-seasons-row {
  display: flex; gap: 40px; flex-wrap: wrap;
  margin-bottom: 0;
}
/* ═══════════════════════════════════════════════════════════════════
   SÉRIES — Saisons + Épisodes  (TV 55" premium — min 32px)
═══════════════════════════════════════════════════════════════════ */

/* ── Label de section ("Seasons", "Episodes") ───────────────────── */
.sd-section-label,
.modal-seasons-title,
.modal-episodes-title {
  font-size: 36px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 32px; margin-bottom: 18px;
  display: block;
}

/* ── Rangée de boutons saison — flex HORIZONTAL sans chevauchement ── */
.sd-seasons-row,
.modal-seasons-list {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 40px;
  /* Pas de transform sur le conteneur */
}

/* ── Bouton saison individuel ───────────────────────────────────── */
.season-btn {
  padding: 18px 44px;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  font-size: 32px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--t2);
  transition: background 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  /* PAS de transform — évite le chevauchement visuel */
  position: relative; z-index: 1;
}
.season-btn.active {
  background: #E50914; background: var(--red);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 28px rgba(229,9,20,0.55);
  z-index: 2;
}
.season-btn:focus,
.season-btn.focused,
.season-btn.is-focused {
  background: rgba(229,9,20,0.22);
  border-color: #E50914; border-color: var(--red);
  color: #fff;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(229,9,20,0.40);
  z-index: 3;
  /* Pas de scale ici — sinon chevauchement */
}

/* ── Liste épisodes — hauteur max + scroll interne ──────────────── */
.sd-episodes-list {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding-bottom: 30px;
  max-height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative; /* offsetTop relatif à ce conteneur */
}
.sd-episodes-list::-webkit-scrollbar { display: none; }

.episode-item {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 28px;
  padding: 22px 24px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.episode-item:focus,
.episode-item:hover,
.episode-item.focused,
.episode-item.is-focused,
.episode-item.active-focus {
  background: rgba(255,255,255,0.09);
  border-color: rgba(229,9,20,0.50);
  outline: none !important;
  -webkit-transform: translateX(8px) translateZ(0);
  transform: translateX(8px) translateZ(0);
  box-shadow: 0 4px 24px rgba(229,9,20,0.18);
}

/* Miniature 16:9 */
.ep-thumb {
  width: 260px; height: 146px;
  object-fit: cover;
  border-radius: 10px;
  background: #1C1C30; background: var(--bg-elevated);
  -webkit-flex-shrink: 0; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}
.ep-thumb-placeholder {
  width: 260px; height: 146px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.ep-play-icon {
  font-size: 42px; color: rgba(255,255,255,0.22);
}

/* Colonne infos */
.ep-info {
  -webkit-flex: 1; flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ep-num-title {
  display: -webkit-flex; display: flex;
  -webkit-align-items: baseline; align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.ep-num {
  font-size: 28px; font-weight: 800;
  color: #E50914; color: var(--red);
  letter-spacing: 1px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: inline-block !important;
}
.ep-title {
  font-size: 34px; font-weight: 700; color: #F0F0FF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-flex: 1; flex: 1;
}
.ep-dur {
  font-size: 28px; color: rgba(255,255,255,0.40);
  -webkit-flex-shrink: 0; flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
.ep-plot {
  font-size: 28px; color: rgba(240,240,255,0.55);
  line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}

.ep-label { display: none; } /* plus utilisé */

/* ── Compatibilité ancien .nfx-modal (au cas où) ─ */
.nfx-modal { display: none !important; }
.nfx-badge-row, .nfx-badge, .nfx-title, .nfx-plot,
.nfx-actions, .nfx-btn, .nfx-poster, .nfx-panel,
.nfx-bg, .nfx-bg-img, .nfx-bg-gradient { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   AMÉLIORATIONS v2 — transitions, EPG, badges HD, continue watching,
   écran de veille
════════════════════════════════════════════════════════════════════ */

/* ── Transition fondu entre écrans ───────────────────────────────── */
@keyframes screen-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.screen--in {
  animation: screen-fade-in 0.20s ease both;
}

/* ── EPG — barre progression + programme suivant ─────────────────── */
.pl-epg-bar-wrap {
  width: 100%; height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 1px; overflow: hidden;
  margin: 5px 0 3px;
}
.pl-epg-bar-fill {
  height: 100%;
  background: #E50914; background: var(--red);
  border-radius: 1px;
  transition: width 1s linear;
  will-change: width;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  box-shadow: 0 0 6px rgba(229,9,20,0.70);
}
.pl-epg-next {
  font-size: 18px;
  color: rgba(168,168,200,0.45);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 640px;
}

/* ── Badges qualité HD / FHD / 4K ────────────────────────────────── */
.ch-quality-badge {
  display: inline-block;
  font-size: 18px; font-weight: 800;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-left: 8px; vertical-align: middle;
  line-height: 1.4;
}
.ch-quality-badge.badge-4k  { background: #7B1FA2; color: #fff; }
.ch-quality-badge.badge-fhd { background: #1565C0; color: #fff; }
.ch-quality-badge.badge-hd  { background: #2E7D32; color: #fff; }

/* ── Continue à regarder ──────────────────────────────────────────── */
#dash-continue-wrap {
  padding: 0 40px 32px;
}
.dash-section-title {
  font-size: 28px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--t2); margin-bottom: 18px;
}
.dash-continue-list {
  display: flex; gap: 18px;
  flex-wrap: nowrap; overflow: hidden;
}
.cw-item {
  width: 200px; flex-shrink: 0;
  background: #1C1C30; background: var(--bg-elevated);
  border-radius: 8px; overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid rgba(255,255,255,0.06);
}
.cw-item:focus, .cw-item.focused, .cw-item.is-focused {
  outline: none;
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--red), 0 12px 30px rgba(0,0,0,0.60);
}
.cw-thumb {
  width: 100%; height: 112px;
  object-fit: cover; display: block;
  background: #10101E; background: var(--bg-panel);
}
.cw-progress {
  height: 3px; background: rgba(255,255,255,0.08);
}
.cw-progress-fill {
  height: 100%; background: #E50914; background: var(--red);
  transition: width 0.3s ease;
}
.cw-title {
  font-size: 21px; padding: 8px 10px;
  color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Écran de veille ──────────────────────────────────────────────── */
.screensaver {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9998;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
}
.screensaver.hidden { display: none; }
.ss-bg {
  position: absolute; top:0; right:0; bottom:0; left:0
  background: radial-gradient(ellipse at 30% 60%,
    rgba(229,9,20,0.08) 0%, rgba(0,0,0,0.98) 55%);
}
@keyframes ss-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.screensaver.ss--in {
  animation: ss-fade-in 1.2s ease both;
}
.ss-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.ss-clock {
  font-size: 144px; font-weight: 100;
  color: rgba(255,255,255,0.88);
  letter-spacing: -8px;
  line-height: 1;
  text-shadow: 0 0 80px rgba(229,9,20,0.12);
}
.ss-date {
  font-size: 27px; font-weight: 300;
  letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  margin-bottom: 30px;
}
.ss-brand {
  font-size: 19px; font-weight: 600;
  letter-spacing: 8px; text-transform: uppercase;
  color: rgba(229,9,20,0.40);
}
.ss-hint {
  font-size: 21px; font-weight: 300;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.12);
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   DIALOG — CONFIRMATION QUITTER
════════════════════════════════════════════════════════════════════ */
.exit-dialog {
  position: absolute; top:0; left:0;
  width: 100%; height: 100%;
  z-index: 10001;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  background: rgba(0,0,0,0.80);
  /* backdrop-filter supprimé — non supporté Tizen 4 */
}
.exit-dialog.hidden { display: none; }
.exit-dialog-card {
  background: linear-gradient(145deg, rgba(22,22,32,0.98), rgba(14,14,22,0.98));
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 52px 64px 48px;
  text-align: center;
  min-width: 540px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
}
.exit-dialog-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(229,9,20,0.15);
  border: 1.5px solid rgba(229,9,20,0.30);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  color: rgba(229,9,20,0.85);
}
.exit-dialog-title {
  font-size: 40px; font-weight: 900; color: #fff;
  margin: 0 0 14px; letter-spacing: -0.3px;
}
.exit-dialog-sub {
  font-size: 32px; color: rgba(255,255,255,0.50);
  margin: 0 0 44px; line-height: 1.5;
}
/* FIX Tizen4 07/2026 : `gap` flex = Chromium 84+, IGNORÉ sur la cible M56
   → boutons Rester/Quitter collés sur TV (dialog testé par Samsung !).
   Remplacé par des marges sur les enfants (pas de gap = pas de double
   espacement sur les TV récentes). */
.exit-dialog-btns {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 8px;
}
.exit-dialog-btns > button { margin: 0 24px; }
/* ── Boutons exit : hiérarchie premium (primaire accent / secondaire ghost) ── */
.exit-btn-confirm {
  min-width: 230px;
  padding: 22px 60px;
  background: #E50914; background: var(--red); border: 2px solid transparent; border-radius: 16px;
  font-size: 33px; font-weight: 800; color: #fff; letter-spacing: 0.3px; cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.22s ease;
  box-shadow: 0 10px 30px rgba(229,9,20,0.28);
}
.exit-btn-confirm:focus,
.exit-btn-confirm:hover,
.exit-btn-confirm.focused,
.exit-btn-confirm.focusable:focus,
.exit-btn-confirm.focusable.focused,
.exit-btn-confirm.focusable.is-focused,
.exit-btn-confirm.is-focused {
  background: #ff1a2e;
  box-shadow: 0 0 0 3px #fff, 0 14px 40px rgba(229,9,20,0.55) !important;
  outline: none !important;
  -webkit-transform: none !important;
  transform: none !important;   /* annule scale(1.14) du .focusable global */
}
/* Secondaire : ghost discret — texte clair, fond transparent, contour fin */
.exit-btn-cancel {
  min-width: 230px;
  padding: 22px 60px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.16); border-radius: 16px;
  font-size: 33px; font-weight: 600; color: rgba(255,255,255,0.62); letter-spacing: 0.3px; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.22s ease;
}
.exit-btn-cancel:focus,
.exit-btn-cancel:hover,
.exit-btn-cancel.focused,
.exit-btn-cancel.focusable:focus,
.exit-btn-cancel.focusable.focused,
.exit-btn-cancel.focusable.is-focused,
.exit-btn-cancel.is-focused {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.85);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.28) !important;
  outline: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPLAY / CATCHUP — panneau programmes
══════════════════════════════════════════════════════════════════════════ */

/* Entête panneau replay (colonne 3) */
.rprev-header {
  padding: 28px 24px 18px;
  border-bottom: 2px solid rgba(229,9,20,0.20);
  flex-shrink: 0;
  background: rgba(229,9,20,0.05);
}
.rprev-ch-name {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.rprev-hint {
  font-size: 26px;
  color: rgba(255,255,255,0.40);
  letter-spacing: 0.3px;
}

/* Conteneur programmes scrollable */
.rprev-prog-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.rprev-prog-list::-webkit-scrollbar      { width: 4px; }
.rprev-prog-list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Item programme */
.rprev-prog-item {
  padding: 18px 18px 15px;
  border-radius: 10px;
  margin-bottom: 8px;
  border-left: 4px solid transparent;
  transition: background 0.14s ease, border-color 0.14s ease;
  cursor: default;
}
.rprev-prog-item.past {
  border-left-color: var(--accent, #3D7ECC);
  background: rgba(61,126,204,0.06);
}
.rprev-prog-item.current {
  border-left-color: var(--red, #e50914);
  background: rgba(229,9,20,0.07);
}
.rprev-prog-item.future {
  border-left-color: rgba(255,255,255,0.12);
}
.rprev-prog-item.rprev-slot {
  border-left-color: #3D7ECC;
  background: rgba(61,126,204,0.07);
}
.rprev-prog-item:focus,
.rprev-prog-item.focused,
.rprev-prog-item.active-focus {
  background: rgba(255,255,255,0.11) !important;
  border-left-color: #fff !important;
  outline: 4px solid rgba(229,9,20,0.95);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.25) !important;
}

/* Méta (date + heure + badge) */
.rprev-prog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.rprev-prog-date {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rprev-prog-time {
  font-size: 28px;
  font-weight: 700;
  color: rgba(255,255,255,0.80);
  font-variant-numeric: tabular-nums;
}

/* Badges */
.rprev-prog-badge {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent, #3D7ECC);
  background: rgba(61,126,204,0.15);
  border: 1px solid rgba(61,126,204,0.30);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.3px;
  margin-left: auto;
}
.rprev-prog-badge.rprev-badge-live {
  color: var(--red, #e50914);
  background: rgba(229,9,20,0.12);
  border-color: rgba(229,9,20,0.30);
}

/* Titre programme */
.rprev-prog-title {
  font-size: 30px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Description courte */
.rprev-prog-desc {
  font-size: 24px;
  color: rgba(255,255,255,0.42);
  line-height: 1.5;
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rprev-prog-empty,
.rprev-prog-loading {
  padding: 48px 24px;
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 28px;
  line-height: 1.6;
}
.rprev-prog-loading {
  color: rgba(255,255,255,0.50);
}

/* Adapter le col-preview pour Replay (flex column) */
#replay-programs-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UX/DESIGN UPGRADE — Samsung TV Premium Polish
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. FOCUS SCALE — Apple TV style ────────────────────────────────────── */
.vod-card.active-focus,
.vod-card:focus {
  -webkit-transform: scale(1.07) translateZ(0) !important;
  transform: scale(1.07) translateZ(0) !important;
  outline: 3px solid #E50914 !important;
  box-shadow: 0 0 0 3px #E50914,
              0 12px 40px rgba(0,0,0,0.7),
              0 0 28px rgba(229,9,20,0.25) !important;
  z-index: 5;
}
.channel-item.active-focus,
.channel-item:focus {
  background: rgba(229,9,20,0.10) !important;
  border-left-color: #E50914 !important;
  -webkit-transform: translateX(6px) translateZ(0) !important;
  transform: translateX(6px) translateZ(0) !important;
}
.dash-tile.active-focus,
.dash-tile:focus {
  -webkit-transform: scale(1.06) translateZ(0) !important;
  transform: scale(1.06) translateZ(0) !important;
  outline: 3px solid #E50914 !important;
  box-shadow: 0 0 0 3px #E50914, 0 8px 32px rgba(229,9,20,0.20) !important;
}

/* ── 2. TOPNAV — indicateur sous l'item actif ──────────────────── */
.tn-item {
  position: relative;
}
/* doublon supprimé — badge 3D rouge défini plus haut */
.tn-item.active {
  color: #fff !important;
}

/* ── 3. VISIBILITÉ SECTIONS — Tizen 4 compatible ────────────────────────── */
/* NOTE: opacity/transform transitions retirés — sur Tizen 4, void offsetWidth  */
/* sur un élément display:none est un no-op, la transition ne démarre jamais    */
/* et la section reste invisible (écran noir). On conserve display:none ↔ flex. */
.content-section {
  pointer-events: none;
}
.content-section.active {
  pointer-events: auto;
  display: -webkit-flex !important;
  display: flex !important;
}

/* ── 4. SKELETON SHIMMER ────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}
.skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 800px 100%;
  -webkit-animation: shimmer 1.4s infinite linear;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-card {
  width: 240px; height: 360px;
  border-radius: 10px;
  flex-shrink: 0;
}
.skeleton-card-wide {
  width: 300px; height: 170px;
  border-radius: 10px;
  flex-shrink: 0;
}
.skeleton-channel {
  height: 72px; border-radius: 8px;
  margin-bottom: 4px;
}
/* ── Skeleton catégorie — loading premium avec shimmer style Netflix ───
   Chaque item a une largeur légèrement différente pour simuler des noms
   de longueurs variables → beaucoup plus naturel que des barres identiques. */
@-webkit-keyframes skeletonSweep {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes skeletonSweep {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.cat-item.skeleton-cat {
  height: 68px;
  border-radius: 0;           /* Items liste = pas de radius */
  pointer-events: none;
  color: transparent !important;
  border-left-color: rgba(229,9,20,0.08) !important;
  /* Barre de contenu factice — 40-75% de largeur via pseudo-element */
  position: relative;
  overflow: hidden;
  background: transparent !important;
  -webkit-animation: none !important;
  animation: none !important;
}
/* Barre de texte factice centrée verticalement */
.cat-item.skeleton-cat::before {
  content: '';
  position: absolute;
  top: 50%; left: 32px;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  width: 65%; height: 18px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 400px 100%;
  -webkit-animation: skeletonSweep 1.6s ease-in-out infinite;
  animation:         skeletonSweep 1.6s ease-in-out infinite;
}
/* Décaler les délais pour un effet cascade naturel */
.cat-item.skeleton-cat:nth-child(2)::before { width: 78%; -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.cat-item.skeleton-cat:nth-child(3)::before { width: 55%; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.cat-item.skeleton-cat:nth-child(4)::before { width: 70%; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.cat-item.skeleton-cat:nth-child(5)::before { width: 48%; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.cat-item.skeleton-cat:nth-child(6)::before { width: 82%; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.cat-item.skeleton-cat:nth-child(7)::before { width: 60%; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.skeleton-row {
  display: flex; gap: 20px;
  padding: 0 120px; padding: 0 var(--safe);
  overflow: hidden;
}

/* ── 5. ON-AIR INDICATOR — chaîne en cours ──────────────────────────────── */
@keyframes onair-pulse {
  0%, 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
  50%       { opacity: 0.4; -webkit-transform: scale(0.85); transform: scale(0.85); }
}
.onair-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #E50914;
  -webkit-animation: onair-pulse 1.2s ease-in-out infinite;
  animation: onair-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.channel-item.is-playing {
  background: rgba(229,9,20,0.08) !important;
  border-left-color: #E50914 !important;
}

/* ── 6. TOAST — slide depuis le bas + types ─────────────────────────────── */
.toast {
  position: fixed;
  bottom: 80px; left: 50%;
  -webkit-transform: translateX(-50%) translateY(80px);
  transform: translateX(-50%) translateY(80px);
  -webkit-transition: -webkit-transform 0.30s cubic-bezier(0.34,1.56,0.64,1), opacity 0.30s ease;
  transition: transform 0.30s cubic-bezier(0.34,1.56,0.64,1), opacity 0.30s ease;
  opacity: 0;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 14px;
  padding: 18px 36px;
  border-radius: 12px;
  background: rgba(22,22,38,0.97);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 28px; font-weight: 600; color: #F0F0FF;
  white-space: nowrap;
  min-width: 320px;
  will-change: transform;
  pointer-events: none;
  z-index: 10000;
}
.toast.show {
  -webkit-transform: translateX(-50%) translateY(0) translateZ(0);
  transform: translateX(-50%) translateY(0) translateZ(0);
  opacity: 1;
}
.toast.hidden {
  display: flex !important;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(80px) translateZ(0);
  transform: translateX(-50%) translateY(80px) translateZ(0);
  pointer-events: none;
}
.toast-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.toast-icon.success { background: rgba(62,207,107,0.20); color: #3ECF6B; }
.toast-icon.error   { background: rgba(229,9,20,0.20);   color: #E50914; }
.toast-icon.info    { background: rgba(74,158,245,0.20);  color: #4A9EF5; }
.toast-icon.warning { background: rgba(245,166,35,0.20);  color: #F5A623; }

/* ── 7. BUFFERING — glassmorphism avec logo ─────────────────────────────── */
.player-buffering {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* IMPORTANT: reset le transform: translate(-50%,-50%) de l'ancienne règle */
  -webkit-transform: none; transform: none;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap: 28px;
  background: rgba(7,7,14,0.82);
  z-index: 20;
}
.buf-logo-wrap {
  width: 120px; height: 120px;
  border-radius: 20px;
  background: rgba(22,22,38,0.85);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.buf-channel-logo {
  width: 96px; height: 96px;
  object-fit: contain;
}
.buf-channel-name {
  font-size: 28px; font-weight: 600; color: #F0F0FF;
  text-align: center; max-width: 600px;
}
.buf-spinner {
  width: 52px; height: 52px;
  border: 4px solid rgba(255,255,255,0.12);
  border-top-color: #E50914;
  border-radius: 50%;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.buf-label {
  font-size: 24px; color: rgba(255,255,255,0.55); font-weight: 400;
}

/* ── 8. CONTINUE WATCHING — barre progression overlay ───────────────────── */
.cw-card {
  position: relative;
  width: 280px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  background: #161626; background: var(--bg-surface);
  cursor: pointer;
  border: 2px solid transparent;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform 0.22s ease, border-color 0.18s ease;
  transition: transform 0.22s ease, border-color 0.18s ease;
}
.cw-card.active-focus { border-color: #E50914 !important; -webkit-transform: scale(1.05) translateZ(0) !important; transform: scale(1.05) translateZ(0) !important; }
.cw-thumb { width: 100%; height: 158px; object-fit: cover; display: block; background: #1C1C30; background: var(--bg-elevated); }
.cw-progress-track {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 5px;
  background: rgba(255,255,255,0.15);
}
.cw-progress-fill {
  height: 100%;
  background: #E50914;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}
.cw-meta {
  padding: 10px 14px 12px;
}
.cw-title { font-size: 24px; font-weight: 600; color: #F0F0FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-sub   { font-size: 20px; color: rgba(255,255,255,0.50); margin-top: 2px; }
.cw-pct   {
  position: absolute; top: 10px; right: 10px;
  background: rgba(7,7,14,0.82);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  font-size: 20px; font-weight: 600; color: #F0F0FF;
  padding: 2px 8px;
}

/* pl-ctrl-btn / pl-play-btn définis dans le bloc player-overlay ci-dessus */
.pl-hint {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 8px;
  font-size: 22px; color: rgba(255,255,255,0.60);
}
.pl-hint-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0;
}
/* Hint buttons — navigables au D-pad */
.pl-hint-btn {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 10px;
  font-size: 32px; font-weight: 600;
  color: rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.45);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
  -webkit-transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pl-hint-btn:focus,
.pl-hint-btn.is-focused,
.pl-hint-btn.focused {
  color: #fff;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.55);
  outline: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SPLASH SCREEN — PREMIUM REDESIGN
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Conteneur principal ─────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   NETFLIX EXPERIENCE — Films & Séries (ajouts v2)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Media Hero (hover preview au-dessus de la grille) ──────────────────── */
/* Structure HTML: .media-hero > img.hero-poster + .hero-info             */
/* Le backdrop est défini via hero.style.backgroundImage dans updateMediaHero */
.media-hero {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-end; align-items: flex-end;
  padding: 32px 120px 40px; padding: 32px var(--safe) 40px;
  overflow: hidden;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  background-size: cover;
  background-position: center top;
  background-color: #0C0C18;
}
.media-hero.hidden { display: none !important; }

/* Overlay dégradé par-dessus le background-image */
.media-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    linear-gradient(to right, rgba(12,12,24,0.97) 0%, rgba(12,12,24,0.75) 50%, rgba(12,12,24,0.50) 100%),
    linear-gradient(to top, rgba(12,12,24,1) 0%, rgba(12,12,24,0) 60%);
  z-index: 0;
}

.hero-poster {
  position: relative; z-index: 1;
  width: 120px; height: 180px;
  object-fit: cover;
  border-radius: 10px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
  border: 2px solid rgba(255,255,255,0.10);
  background: #1C1C30;
  margin-right: 32px;
}
.hero-info {
  position: relative; z-index: 1;
  flex: 1;
}
.hero-title {
  font-size: 48px; font-weight: 900; color: #F0F0FF;
  line-height: 1.05; margin-bottom: 10px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 740px;
}
.hero-meta {
  font-size: 21px; color: rgba(255,255,255,0.58);
  margin-bottom: 14px; letter-spacing: 0.5px;
}
.hero-plot {
  font-size: 21px; color: rgba(240,240,255,0.68);
  line-height: 1.55; max-width: 680px;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Badges méta dans le modal ──────────────────────────────────────────── */
.sd-badge {
  display: inline-block;
  font-size: 19px; font-weight: 700;
  padding: 6px 14px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.sd-badge-star {
  background: rgba(245,166,35,0.15);
  border-color: rgba(245,166,35,0.30);
  color: #F5A623;
}
.sd-badge-genre {
  background: rgba(229,9,20,0.12);
  border-color: rgba(229,9,20,0.25);
  color: rgba(255,255,255,0.75);
  text-transform: capitalize;
}

/* ── Conteneur badges méta (remplace .sd-meta-row dans _buildMetaHTML) ── */
.sd-meta-badges {
  display: -webkit-flex; display: flex;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 22px;
  -webkit-align-items: center; align-items: center;
}

/* ── Éléments épisodes — layout Netflix ─────────────────────────────────── */
/* ep-left : wrapper miniature (taille définie dans .ep-thumb / .ep-thumb-placeholder) */
.ep-left {
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

/* ── Overlay play sur les vod-cards ─────────────────────────────────────── */
/* NOTE: .vod-card déjà défini à la ligne ~1691 avec width:240px/height implicite */
/* On ajoute ici la hauteur fixe pour couvrir l'image poster */
.vod-card {
  height: 360px; /* forcer hauteur = image seule, sans texte en dessous */
  position: relative;
}
/* .vod-card-thumb = div conteneur de l'image (PAS une image elle-même) */
.vod-card-thumb {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  border-radius: 10px;
}
/* .vod-card-img = l'image réelle dans le div .vod-card-thumb */
.vod-card-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #1C1C30;
}
.vod-card-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0) translateZ(0);
  transform: translate(-50%, -50%) scale(0) translateZ(0);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(229,9,20,0.88);
  border: 2px solid rgba(255,255,255,0.60);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  color: #fff; font-size: 22px;
  -webkit-transition: -webkit-transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  z-index: 3;
}
.vod-card.active-focus .vod-card-play-icon,
.vod-card:focus .vod-card-play-icon {
  -webkit-transform: translate(-50%, -50%) scale(1) translateZ(0);
  transform: translate(-50%, -50%) scale(1) translateZ(0);
}

/* Overlay dégradé bas de carte */
.vod-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  border-radius: 0 0 10px 10px;
  z-index: 2;
  -webkit-transition: opacity 0.18s ease;
  transition: opacity 0.18s ease;
}
.vod-card-title {
  font-size: 18px; font-weight: 700; color: #F0F0FF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vod-card-year {
  font-size: 16px; color: rgba(255,255,255,0.50);
}

/* ── États chargement / vide dans le modal ──────────────────────────────── */
.sd-loading {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 16px;
  padding: 32px 0;
  color: rgba(255,255,255,0.45);
  font-size: 21px;
}
.sd-loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: #E50914;
  border-radius: 50%;
  -webkit-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.sd-empty {
  padding: 40px 0;
  text-align: center;
  color: rgba(255,255,255,0.30);
  font-size: 21px;
  line-height: 1.6;
}
.sd-empty-icon {
  font-size: 42px;
  display: block;
  margin-bottom: 14px;
  opacity: 0.5;
}

/* sd-backdrop-img défini dans la section sd-modal plus haut — pas de doublon */

/* ── Poster modal — position absolue côté gauche ───────────────────────── */
.sd-poster-wrap {
  position: relative; z-index: 1;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.sd-poster {
  width: 220px; height: 330px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.85);
  border: 2px solid rgba(255,255,255,0.10);
  display: block;
  background: #1C1C30;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD — Chaînes favorites + Continue watching
   ══════════════════════════════════════════════════════════════════════════ */

.dash-fav-channels-wrap,
.dash-continue-wrap {
  position: relative; z-index: 3;
  padding: 0 120px 0; padding: 0 var(--safe) 0;
  margin-bottom: 32px;
}

/* Section title avec barre accent rouge */
.dash-section-title {
  font-size: 28px; font-weight: 900;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: #fff; margin-bottom: 20px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 12px;
}
.dash-section-title::before {
  content: '';
  width: 4px; height: 20px;
  background: #E50914;
  flex-shrink: 0;
}

.dash-fav-channels-list {
  display: -webkit-flex; display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 4px 0 8px;
}

/* Cartes chaînes 16:9 — style thumbnail cinématique */
.dash-fav-ch {
  display: -webkit-flex; display: flex;
  flex-direction: column;
  width: 240px; flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  cursor: pointer; outline: none;
  -webkit-transition: border-color 0.18s ease, -webkit-transform 0.18s ease;
  transition: border-color 0.18s ease, transform 0.18s ease;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.dash-fav-ch-logo-wrap {
  position: relative;
  width: 100%; padding-top: 56.25%;
  background: rgba(20,10,10,0.8);
  overflow: hidden;
}
.dash-fav-ch-logo-inner {
  position: absolute; inset: 0;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.dash-fav-ch-logo {
  max-width: 75%; max-height: 65%;
  object-fit: contain;
  display: block;
}
.dash-fav-ch-live-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #E50914;
}
.dash-fav-ch-play {
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0) translateZ(0);
  transform: translate(-50%, -50%) scale(0) translateZ(0);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(229,9,20,0.9);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  color: #fff; font-size: 18px;
  -webkit-transition: -webkit-transform 0.16s ease;
  transition: transform 0.16s ease;
  pointer-events: none;
}
.dash-fav-ch-info {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.dash-fav-ch-name {
  font-size: 22px; font-weight: 900; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-fav-ch-sub {
  font-size: 18px; color: rgba(255,255,255,0.38);
  margin-top: 3px; white-space: nowrap;
}
/* Focus card */
.dash-fav-ch:focus,
.dash-fav-ch.active-focus {
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(229,9,20,0.4);
  outline: none;
  -webkit-transform: scale(1.05) translateZ(0);
  transform: scale(1.05) translateZ(0);
}
.dash-fav-ch:focus .dash-fav-ch-play,
.dash-fav-ch.active-focus .dash-fav-ch-play {
  -webkit-transform: translate(-50%, -50%) scale(1) translateZ(0);
  transform: translate(-50%, -50%) scale(1) translateZ(0);
}
.dash-fav-ch:focus .dash-fav-ch-info,
.dash-fav-ch.active-focus .dash-fav-ch-info {
  border-top-color: #E50914;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIVE PREVIEW — Guide TV (items dans #live-epg-guide)
   ══════════════════════════════════════════════════════════════════════════ */
.lprev-guide-item {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  margin-bottom: 4px;
  -webkit-transition: background 0.12s ease;
  transition: background 0.12s ease;
}
.lprev-guide-item--past {
  opacity: 0.45;
  border-left-color: rgba(255,255,255,0.15);
}
.lprev-guide-item--now {
  background: rgba(229,9,20,0.10);
  border-left-color: #E50914;
}
/* Focus clavier sur un item EPG */
.lprev-guide-item:focus,
.lprev-guide-item.focused {
  outline: none;
  background: rgba(255,255,255,0.12);
  border-left-color: #fff;
  -webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}
.lprev-guide-item--now:focus,
.lprev-guide-item--now.focused {
  background: rgba(229,9,20,0.25);
  border-left-color: #E50914;
  -webkit-box-shadow: 0 0 0 2px rgba(229,9,20,0.5);
  box-shadow: 0 0 0 2px rgba(229,9,20,0.5);
}
.lprev-guide-time {
  font-size: 20px; font-weight: 700;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  min-width: 52px;
}
.lprev-guide-title {
  font-size: 21px; font-weight: 500; color: rgba(255,255,255,0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.lprev-guide-live-dot {
  font-size: 14px; color: #E50914;
  -webkit-animation: onair-pulse 1.2s ease-in-out infinite;
  animation: onair-pulse 1.2s ease-in-out infinite;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.lprev-guide-empty {
  padding: 28px 18px;
  text-align: center;
  color: rgba(255,255,255,0.30);
  font-size: 21px;
}

/* ═══════════════════════════════════════════════════════════════════
   ACTIVATION — QR code img + bouton essai gratuit
════════════════════════════════════════════════════════════════════ */
.act-qr-img {
  display: block;
  width: 280px;
  height: 280px;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

/* Bouton "Essayer 7 jours" */
.act-trial-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 22px 32px;
  background: linear-gradient(135deg, #1a6b2e 0%, #228b3b 100%);
  border: 2px solid rgba(62,207,107,0.35);
  border-radius: 10px;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  -webkit-transition: background 0.15s, border-color 0.15s, -webkit-transform 0.1s;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  outline: none;
}
.act-trial-btn:focus,
.act-trial-btn.focused {
  background: linear-gradient(135deg, #24913e 0%, #2db850 100%);
  border-color: #3ECF6B;
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(62,207,107,0.45);
}

/* ═══════════════════════════════════════════════════════════════════
   HOME — Badge abonnement dans la topnav
════════════════════════════════════════════════════════════════════ */
.tn-sub-info {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin-right: 18px;
}
.tn-sub-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
/* Essai */
.tn-sub-badge.sub-trial {
  background: rgba(62,207,107,0.18);
  border: 1.5px solid rgba(62,207,107,0.55);
  color: #3ECF6B;
}
/* Actif (> 14j) */
.tn-sub-badge.sub-active {
  background: rgba(74,158,245,0.15);
  border: 1.5px solid rgba(74,158,245,0.40);
  color: #4A9EF5;
}
/* Expire bientôt (≤ 14j) */
.tn-sub-badge.sub-warn {
  background: rgba(245,166,35,0.18);
  border: 1.5px solid rgba(245,166,35,0.55);
  color: #F5A623;
}
/* Lifetime */
.tn-sub-badge.sub-lifetime {
  background: linear-gradient(90deg, rgba(229,9,20,0.20), rgba(245,166,35,0.20));
  border: 1.5px solid rgba(245,166,35,0.55);
  color: #F5A623;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPERT UI/UX — VOD / SÉRIES — Barre de genres horizontale
═══════════════════════════════════════════════════════════════════════════ */
/* ── VOD / SÉRIES — layout 2 colonnes (gauche: genres, droite: grille) ── */
.vod-left-layout {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  width: 100%; height: 100%;
}
.vod-cats-col {
  width: 320px; min-width: 320px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
}
.vod-cats-col .col-header {
  padding: 28px 32px 22px;
  font-size: 27px; font-weight: 800; color: rgba(255,255,255,0.45);
  letter-spacing: 3px; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.vod-cats-col .cat-list {
  -webkit-flex: 1; flex: 1;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  padding: 10px 0;
}
.vod-cats-col .cat-list::-webkit-scrollbar { display: none; }
/* Films/VOD : groupes plus lisibles — colonne élargie + police réduite + retour à la ligne */
#section-vod .vod-cats-col {
  width: 370px;
  min-width: 370px;
}
#section-vod .vod-cats-col .cat-item {
  font-size: 28px;
  padding: 22px 24px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}
.vod-content-area {
  -webkit-flex: 1; flex: 1;
  overflow: hidden;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
.vod-section-hdr {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 16px;
  padding: 18px var(--safe) 10px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.vod-section-hdr-line {
  width: 5px; height: 30px;
  background: var(--red); border-radius: 3px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.vod-section-hdr-text {
  font-size: 30px; font-weight: 900; letter-spacing: 2px;
  color: rgba(255,255,255,0.50); text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPERT UI/UX — RADIO — Barre "En écoute" + grille carrée
═══════════════════════════════════════════════════════════════════════════ */
.radio-layout-new {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  width: 100%; height: 100%;
}
.radio-now-bar {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 30px;
  padding: 18px var(--safe);
  background: rgba(0,0,0,0.75);
  border-bottom: 1px solid rgba(229,9,20,0.25);
  min-height: 106px;
}
.radio-now-art {
  width: 70px; height: 70px;
  border-radius: 10px;
  background: rgba(229,9,20,0.12);
  border: 2px solid var(--red);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  overflow: hidden; -webkit-flex-shrink: 0; flex-shrink: 0;
}
.radio-now-art img { width: 100%; height: 100%; object-fit: contain; }
.radio-now-initials {
  font-size: 24px; font-weight: 900; color: var(--red);
}
.radio-now-info { -webkit-flex: 1; flex: 1; }
.radio-now-label {
  font-size: 20px; font-weight: 700; color: var(--red);
  letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 7px;
}
.radio-now-name {
  font-size: 34px; font-weight: 900; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.radio-eq-wrap {
  display: -webkit-flex; display: flex;
  gap: 5px; -webkit-align-items: flex-end; align-items: flex-end;
  height: 38px; -webkit-flex-shrink: 0; flex-shrink: 0;
}
.radio-eq-bar {
  width: 5px; border-radius: 3px; background: var(--red);
  -webkit-animation: radio-eq 0.7s ease-in-out infinite alternate;
  animation: radio-eq 0.7s ease-in-out infinite alternate;
  -webkit-transform-origin: bottom; transform-origin: bottom;
}
.radio-eq-bar:nth-child(1) { height: 12px; -webkit-animation-delay:0s;    animation-delay:0s; }
.radio-eq-bar:nth-child(2) { height: 22px; -webkit-animation-delay:0.12s; animation-delay:0.12s; }
.radio-eq-bar:nth-child(3) { height: 32px; -webkit-animation-delay:0.24s; animation-delay:0.24s; }
.radio-eq-bar:nth-child(4) { height: 18px; -webkit-animation-delay:0.18s; animation-delay:0.18s; }
.radio-eq-bar:nth-child(5) { height: 26px; -webkit-animation-delay:0.08s; animation-delay:0.08s; }
@-webkit-keyframes radio-eq {
  from { -webkit-transform: scaleY(0.35); transform: scaleY(0.35); }
  to   { -webkit-transform: scaleY(1);    transform: scaleY(1); }
}
@keyframes radio-eq {
  from { -webkit-transform: scaleY(0.35); transform: scaleY(0.35); }
  to   { -webkit-transform: scaleY(1);    transform: scaleY(1); }
}
.radio-body-row {
  -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  overflow: hidden;
}
.radio-grid-col {
  -webkit-flex: 1; flex: 1;
  overflow: hidden;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
/* Grille radio : override channel-list → grille de cartes */
.radio-card-grid {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 22px;
  padding: 22px var(--safe);
  overflow-y: auto; overflow-x: hidden;
  -webkit-flex: 1; flex: 1;
  -webkit-align-content: flex-start; align-content: flex-start;
  list-style: none; scrollbar-width: none;
}
.radio-card-grid::-webkit-scrollbar { display: none; }
.radio-card-grid {
  display: -webkit-flex !important; display: flex !important;
  -webkit-flex-wrap: wrap !important; flex-wrap: wrap !important;
  -webkit-flex-direction: row !important; flex-direction: row !important;
  -webkit-align-content: flex-start; align-content: flex-start;
  gap: 20px !important;
  padding: 24px 28px !important;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  list-style: none; margin: 0;
}
.radio-card-grid::-webkit-scrollbar { display: none; }
.radio-card-grid .channel-item {
  -webkit-flex-direction: column !important; flex-direction: column !important;
  -webkit-align-items: center !important;    align-items: center !important;
  -webkit-justify-content: flex-end !important; justify-content: flex-end !important;
  width: 200px !important; height: 200px !important;
  border-radius: 16px !important;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,0.08) !important;
  border-left: 2px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(160deg, #1e1e2e 0%, #12121a 100%) !important;
  gap: 0 !important;
  text-align: center;
  overflow: hidden;
  -webkit-transition: border-color 0.18s, -webkit-transform 0.18s, box-shadow 0.18s;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  position: relative;
}
.radio-card-grid .channel-logo {
  width: 200px !important; height: 130px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: rgba(255,255,255,0.04) !important;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  padding: 18px !important;
  box-sizing: border-box;
}
.radio-card-grid .channel-info {
  width: 100% !important;
  background: rgba(0,0,0,0.55) !important;
  padding: 10px 12px 12px !important;
  -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.radio-card-grid .channel-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  color: #fff !important;
  letter-spacing: 0.3px;
}
.radio-card-grid .channel-epg,
.radio-card-grid .channel-num { display: none !important; }
.radio-card-grid .channel-item:focus,
.radio-card-grid .channel-item.active-focus,
.radio-card-grid .channel-item.focused,
.radio-card-grid .channel-item.is-focused {
  border: 2px solid #e50914 !important;
  border-left: 2px solid #e50914 !important;
  box-shadow: 0 0 0 3px rgba(229,9,20,0.28), 0 8px 32px rgba(229,9,20,0.18) !important;
  background: linear-gradient(160deg, #2a0a0e 0%, #1a0508 100%) !important;
  -webkit-transform: scale(1.05) !important;
  transform: scale(1.05) !important;
  z-index: 2;
}
.radio-card-grid .channel-item:focus .channel-name,
.radio-card-grid .channel-item.active-focus .channel-name,
.radio-card-grid .channel-item.focused .channel-name,
.radio-card-grid .channel-item.is-focused .channel-name {
  color: #fff !important;
}
.radio-card-grid .channel-item.radio-playing {
  border: 2px solid rgba(229,9,20,0.5) !important;
  border-left: 2px solid rgba(229,9,20,0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPERT UI/UX — FAVORIS — Onglets horizontaux + grille de cartes
═══════════════════════════════════════════════════════════════════════════ */
.fav-layout-new {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  width: 100%; height: 100%;
}
.fav-tab-bar {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  padding: 0 var(--safe);
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fav-tab-list {
  display: -webkit-flex; display: flex;
  gap: 0; list-style: none;
  -webkit-align-items: stretch; align-items: stretch;
}
.fav-tab-list .cat-item {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  padding: 24px 44px;
  font-size: 28px; font-weight: 700; letter-spacing: 2px;
  cursor: pointer; white-space: nowrap;
  color: var(--t3);
  border-bottom: 3px solid transparent;
  background: transparent !important;
  border-radius: 0 !important;
  -webkit-transition: color 0.18s ease, border-color 0.18s ease;
  transition: color 0.18s ease, border-color 0.18s ease;
  min-width: auto;
}
.fav-tab-list .cat-item.active {
  color: var(--t1) !important;
  border-bottom-color: var(--red) !important;
}
.fav-tab-list .cat-item:focus,
.fav-tab-list .cat-item.active-focus,
.fav-tab-list .cat-item.focused {
  color: #fff !important;
  border-bottom-color: #fff !important;
  outline: none !important;
}
.fav-content {
  -webkit-flex: 1; flex: 1;
  overflow: hidden;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
.fav-card-grid {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 30px;
  padding: 30px var(--safe);
  overflow-y: auto; overflow-x: hidden;
  -webkit-flex: 1; flex: 1;
  -webkit-align-content: flex-start; align-content: flex-start;
  list-style: none; scrollbar-width: none;
}
.fav-card-grid::-webkit-scrollbar { display: none; }
.fav-card-grid .channel-item {
  -webkit-flex-direction: column !important; flex-direction: column !important;
  -webkit-align-items: flex-start !important; align-items: flex-start !important;
  width: 270px;
  padding: 0 !important;
  border-left: none !important;
  border: 1px solid var(--b2) !important;
  border-radius: 10px !important;
  background: var(--bg-surface) !important;
  gap: 0 !important;
  overflow: hidden;
}
.fav-card-grid .channel-logo {
  width: 270px; height: 152px;
  border-radius: 0 !important;
  object-fit: contain;
  background: rgba(255,255,255,0.04);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.fav-card-grid .channel-info {
  width: 100%; padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.fav-card-grid .channel-name {
  font-size: 26px !important; font-weight: 700;
}
.fav-card-grid .channel-num { display: none !important; }
.fav-card-grid .channel-item:focus,
.fav-card-grid .channel-item.active-focus,
.fav-card-grid .channel-item.focused,
.fav-card-grid .channel-item.is-focused {
  border: 2.5px solid #fff !important;
  border-left: 2.5px solid #fff !important;
  box-shadow: 0 0 0 2px rgba(229,9,20,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPERT UI/UX — DIRECT TV — Badge qualité sur les items chaîne
═══════════════════════════════════════════════════════════════════════════ */
.live-tv-ch-list .ch-quality {
  font-size: 18px; font-weight: 800; letter-spacing: 0.5px;
  padding: 4px 11px; border-radius: 4px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  margin-left: 8px;
}
.live-tv-ch-list .ch-quality.q4k  { background: var(--gold);  color: #000; }
.live-tv-ch-list .ch-quality.qfhd { background: var(--blue);  color: #000; }
.live-tv-ch-list .ch-quality.qhd  { background: var(--green); color: #000; }

/* FIX CSS 07/2026 : fragment corrompu (sélecteur tronqué « dth: » = fin de
   width, perdu par un ancien patch scripté). Au parsing CSS, ce fragment
   AVALAIT la règle suivante → `#section-radio` était MORTE (layout Radio
   sans flex). Reconstruit en règle valide et inerte. */
.list-loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--red);
  border-radius: 50%;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION RADIO — Layout complet
   ═══════════════════════════════════════════════════════════════════════════ */

/* FIX 07/2026 : NE PAS déclarer `display:flex` ici. Ce sélecteur ID écrase le
   `display:none` de .content-section (spécificité ID > classe) → la section
   Radio restait affichée PAR-DESSUS tous les écrans (l'app semblait "démarrer
   sur Radio" et RETOUR ouvrait Quitter car l'écran réel dessous = accueil).
   Même piège que #section-dashboard, cf. commentaire ligne ~1436.
   flex-direction/overflow sont inoffensifs quand la section est cachée ; le
   display:flex n'est appliqué que par .content-section.active. */
#section-radio {
  -webkit-flex-direction: column; flex-direction: column;
  overflow: hidden;
}

.radio-layout-new {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-base);
}

/* ── Barre "En écoute" (top) ─────────────────────────────────────────────── */
.radio-now-bar {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-align-items: center; align-items: center;
  gap: 28px;
  padding: 18px 48px 18px 40px;
  background: linear-gradient(90deg, rgba(229,9,20,0.14) 0%, rgba(12,12,28,0.92) 100%);
  border-bottom: 1px solid rgba(229,9,20,0.25);
  -webkit-flex-shrink: 0; flex-shrink: 0;
  min-height: 90px;
}

.radio-now-art {
  width: 64px; height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(229,9,20,0.18);
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.radio-now-art img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.radio-now-initials {
  font-size: 24px; font-weight: 800; color: var(--red);
  letter-spacing: -1px;
}

.radio-now-info {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 4px;
  -webkit-flex: 1; flex: 1;
  min-width: 0;
  overflow: hidden;
}
.radio-now-label {
  font-size: 18px; font-weight: 700;
  color: var(--red);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.radio-now-name {
  font-size: 30px; font-weight: 700;
  color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Égaliseur animé ─────────────────────────────────────────────────────── */
.radio-eq-wrap {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-align-items: flex-end; align-items: flex-end;
  gap: 5px;
  height: 36px;
  padding-bottom: 2px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.radio-eq-bar {
  width: 6px;
  background: var(--red);
  border-radius: 3px 3px 0 0;
  min-height: 6px;
  -webkit-animation: eqAnim 0.7s ease-in-out infinite alternate;
  animation: eqAnim 0.7s ease-in-out infinite alternate;
}
.radio-eq-bar:nth-child(1) { height: 18px; -webkit-animation-delay: 0s;    animation-delay: 0s; }
.radio-eq-bar:nth-child(2) { height: 32px; -webkit-animation-delay: 0.12s; animation-delay: 0.12s; }
.radio-eq-bar:nth-child(3) { height: 24px; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.radio-eq-bar:nth-child(4) { height: 36px; -webkit-animation-delay: 0.08s; animation-delay: 0.08s; }
.radio-eq-bar:nth-child(5) { height: 14px; -webkit-animation-delay: 0.18s; animation-delay: 0.18s; }

@-webkit-keyframes eqAnim {
  0%   { -webkit-transform: scaleY(0.3); transform: scaleY(0.3); opacity: 0.6; }
  100% { -webkit-transform: scaleY(1.0); transform: scaleY(1.0); opacity: 1.0; }
}
@keyframes eqAnim {
  0%   { -webkit-transform: scaleY(0.3); transform: scaleY(0.3); opacity: 0.6; }
  100% { -webkit-transform: scaleY(1.0); transform: scaleY(1.0); opacity: 1.0; }
}

/* ── Corps : catégories + grille de chaînes ──────────────────────────────── */
.radio-body-row {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-flex: 1; flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Colonne catégories radio — reprend le style .col-cats mais scope radio */
#section-radio .col-cats {
  width: 320px; min-width: 320px;
  height: 100%;
  border-right: 1px solid var(--b1);
  background: var(--bg-panel);
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  overflow: hidden;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
#section-radio .col-header {
  padding: 22px 28px 16px;
  font-size: 20px; font-weight: 800;
  color: var(--t3);
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--b1);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
#section-radio .cat-list {
  -webkit-flex: 1; flex: 1;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  list-style: none;
  padding: 0; margin: 0;
}
#section-radio .cat-list::-webkit-scrollbar { display: none; }
#section-radio .cat-item {
  padding: 16px 24px;
  font-size: 24px; font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  border-left: 3px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-transition: background 0.14s ease, color 0.14s ease;
  transition: background 0.14s ease, color 0.14s ease;
}
#section-radio .cat-item:focus,
#section-radio .cat-item.focused,
#section-radio .cat-item.active-focus {
  outline: none;
  background: rgba(229,9,20,0.12);
  border-left-color: var(--red);
  color: #fff;
}
#section-radio .cat-item.active {
  color: var(--t1);
  border-left-color: rgba(229,9,20,0.5);
  background: rgba(255,255,255,0.04);
}

/* Grille des radios ─────────────────────────────────────────────────────── */
.radio-grid-col {
  -webkit-flex: 1; flex: 1;
  height: 100%;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  overflow: hidden;
  background: var(--bg-base);
}

.radio-card-grid {
  -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  list-style: none;
  padding: 8px 0; margin: 0;
}
.radio-card-grid::-webkit-scrollbar { display: none; }

/* Items radio — style liste verticale (même base que .channel-item) */
.radio-item {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-align-items: center; align-items: center;
  gap: 20px;
  padding: 16px 28px;
  border-left: 3px solid transparent;
  cursor: pointer;
  -webkit-transition: background 0.14s ease, border-color 0.14s ease;
  transition: background 0.14s ease, border-color 0.14s ease;
  min-height: 80px;
}
.radio-item:focus,
.radio-item.focused,
.radio-item.active-focus {
  outline: none;
  background: rgba(229,9,20,0.10);
  border-left-color: var(--red);
}
.radio-item.is-playing {
  background: rgba(229,9,20,0.07);
  border-left-color: rgba(229,9,20,0.60);
}
.radio-item-logo {
  width: 54px; height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.radio-item-logo img { width: 100%; height: 100%; object-fit: cover; }
.radio-item-initials {
  font-size: 20px; font-weight: 800;
  color: var(--red);
}
.radio-item-info {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-flex: 1; flex: 1;
  min-width: 0;
  gap: 4px;
}
.radio-item-name {
  font-size: 28px; font-weight: 600;
  color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.radio-item-genre {
  font-size: 22px; color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════
   NETFLIX PREMIUM LAYER v1.4 — Finishing Block
   Couche visuelle luxe : focus VOD, col-headers, vignette, badges,
   shimmer amélioré, transitions écrans, splash premium
════════════════════════════════════════════════════════════════════ */

/* ── 1. VOD CARD — état focalisé Netflix (zoom + révélation titre) ─────── */
.vod-card:focus,
.vod-card.focused,
.vod-card.active-focus {
  outline: none;
  -webkit-transform: scale(1.10) translateZ(0);
  transform:         scale(1.10) translateZ(0);
  z-index: 30;
  box-shadow:
    0 0 0 3px rgba(229,9,20,0.90),
    0 0 0 7px rgba(229,9,20,0.18),
    0 24px 64px rgba(0,0,0,0.90),
    0 8px 24px rgba(229,9,20,0.14);
}
/* Zoom image à l'intérieur de la carte au focus */
.vod-card:focus .vod-card-img,
.vod-card.focused .vod-card-img,
.vod-card.active-focus .vod-card-img {
  -webkit-transform: scale(1.06) translateZ(0);
  transform:         scale(1.06) translateZ(0);
}
/* Le titre devient blanc pur + légèrement plus visible au focus */
.vod-card:focus .vod-card-title,
.vod-card.focused .vod-card-title,
.vod-card.active-focus .vod-card-title {
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
/* Icône de lecture flottante — apparaît au focus */
.vod-card-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%) scale(0) translateZ(0);
  transform:         translate(-50%,-50%) scale(0) translateZ(0);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(229,9,20,0.88);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  font-size: 28px; color: #fff;
  -webkit-transition: -webkit-transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
  transition:         transform         0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 4px 20px rgba(229,9,20,0.50);
}
.vod-card:focus .vod-card-play-icon,
.vod-card.focused .vod-card-play-icon,
.vod-card.active-focus .vod-card-play-icon {
  -webkit-transform: translate(-50%,-50%) scale(1) translateZ(0);
  transform:         translate(-50%,-50%) scale(1) translateZ(0);
  opacity: 1;
}

/* ── 2. COL-HEADER — typographie Netflix avec soulignement rouge animé ── */
.col-header {
  position: relative;
  overflow: visible;
}
/* Ligne rouge décorative sous le titre de section */
.col-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--nfx-red) 0%,
    rgba(229,9,20,0.30) 60%,
    transparent 100%);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.34,1.36,0.64,1);
  transition: transform 0.45s cubic-bezier(0.34,1.36,0.64,1);
}
/* La ligne s'étend quand la colonne est active */
.col-cats .col-header::after,
.col-channels .col-header::after,
.col-vod-content .col-header::after,
.vod-cats-col .col-header::after,
#section-radio .col-header::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* ── 3. VIGNETTE DE FOND — profondeur cinématographique ────────────────── */
/* Vignette subtile sur tous les écrans principaux pour un look premium */
#screen-home::before,
#screen-live::before,
#screen-vod::before,
#screen-series::before,
#screen-replay::before,
#screen-radio::before,
#screen-favorites::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0,0,0,0.25) 75%,
    rgba(0,0,0,0.50) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── 4. BADGES QUALITÉ — style chips Netflix ───────────────────────────── */
/* Remplacement des badges colorés par des chips monochromes style Netflix */
.ch-quality-badge,
.lprev-quality-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 20px; font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
/* 4K — or premium Netflix */
.ch-quality-badge.badge-4k,
.lprev-quality-badge.b4k {
  background: transparent;
  color: #F5A623;
  border: 1.5px solid rgba(245,166,35,0.70);
  box-shadow: 0 0 8px rgba(245,166,35,0.18);
}
/* FHD — bleu subtil */
.ch-quality-badge.badge-fhd,
.lprev-quality-badge.bfhd {
  background: transparent;
  color: #4A9EF5;
  border: 1.5px solid rgba(74,158,245,0.60);
  box-shadow: 0 0 8px rgba(74,158,245,0.15);
}
/* HD — vert discret */
.ch-quality-badge.badge-hd,
.lprev-quality-badge.bhd {
  background: transparent;
  color: #3ECF6B;
  border: 1.5px solid rgba(62,207,107,0.60);
  box-shadow: 0 0 8px rgba(62,207,107,0.12);
}

/* ── 5. SHIMMER AMÉLIORÉ — pulse plus lumineux style Netflix ───────────── */
@-webkit-keyframes nfx-shimmer {
  0%   { background-position: -1200px 0; }
  100% { background-position:  1200px 0; }
}
@keyframes nfx-shimmer {
  0%   { background-position: -1200px 0; }
  100% { background-position:  1200px 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.08) 75%,
    rgba(255,255,255,0.03) 100%);
  background-size: 1200px 100%;
  -webkit-animation: nfx-shimmer 1.8s ease-in-out infinite;
  animation:         nfx-shimmer 1.8s ease-in-out infinite;
}

/* ── 6. TRANSITIONS ÉCRANS — fondu enchaîné cinématographique ─────────── */
/* Toutes les sections sont invisibles par défaut avec transition */
.screen {
  opacity: 1;
}
.screen.active {
  opacity: 1;
}
/* L'écran sortant : fondu vers 0 + légère descente */
.screen.screen-leave {
  opacity: 0;
  -webkit-transform: translateY(8px) translateZ(0);
  transform:         translateY(8px) translateZ(0);
  pointer-events: none;
}
/* L'écran entrant : monte depuis légèrement en dessous */
.screen.screen-enter {
  -webkit-animation: screen-fade-in 0.30s cubic-bezier(0.4,0,0.2,1) both;
  animation:         screen-fade-in 0.30s cubic-bezier(0.4,0,0.2,1) both;
}
@-webkit-keyframes screen-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(12px) translateZ(0);
    transform: translateY(12px) translateZ(0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
  }
}
@keyframes screen-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(12px) translateZ(0);
    transform: translateY(12px) translateZ(0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
  }
}

/* ── 7. SPLASH — améliorations premium ─────────────────────────────────── */
/* Logo RSKTV PLAYER : animation d'apparition en deux temps */
.spl-logo-wrap {
  position: relative;
  z-index: 3;
}
@-webkit-keyframes spl-logo-appear {
  0%   { opacity: 0; -webkit-transform: scale(0.80) translateY(20px) translateZ(0); transform: scale(0.80) translateY(20px) translateZ(0); }
  65%  { opacity: 1; -webkit-transform: scale(1.04) translateY(-4px) translateZ(0); transform: scale(1.04) translateY(-4px) translateZ(0); }
  100% { opacity: 1; -webkit-transform: scale(1.00) translateY(0)    translateZ(0); transform: scale(1.00) translateY(0)    translateZ(0); }
}
@keyframes spl-logo-appear {
  0%   { opacity: 0; transform: scale(0.80) translateY(20px) translateZ(0); }
  65%  { opacity: 1; transform: scale(1.04) translateY(-4px) translateZ(0); }
  100% { opacity: 1; transform: scale(1.00) translateY(0)    translateZ(0); }
}
.spl-logo-wrap.spl-logo-fire {
  -webkit-animation: spl-logo-appear 0.75s cubic-bezier(0.34,1.36,0.64,1) both;
  animation:         spl-logo-appear 0.75s cubic-bezier(0.34,1.36,0.64,1) both;
}

/* Tagline sous le logo — glisse depuis la gauche */
@-webkit-keyframes spl-tagline-slide {
  from { opacity: 0; -webkit-transform: translateX(-28px) translateZ(0); transform: translateX(-28px) translateZ(0); }
  to   { opacity: 1; -webkit-transform: translateX(0)     translateZ(0); transform: translateX(0)     translateZ(0); }
}
@keyframes spl-tagline-slide {
  from { opacity: 0; transform: translateX(-28px) translateZ(0); }
  to   { opacity: 1; transform: translateX(0)     translateZ(0); }
}
.spl-tagline,
.spl-sub {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
.spl-tagline.spl-tagline-show,
.spl-sub.spl-tagline-show {
  -webkit-animation: spl-tagline-slide 0.55s 0.15s cubic-bezier(0.4,0,0.2,1) both;
  animation:         spl-tagline-slide 0.55s 0.15s cubic-bezier(0.4,0,0.2,1) both;
  opacity: 1;
}

/* Barre de chargement splash — progression Netflix (rouge, pas de pulse) */
.spl-progress-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  position: relative;
}
.spl-progress-fill {
  height: 100%;
  background: var(--nfx-red);
  border-radius: 2px;
  -webkit-transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  transition:         width 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px rgba(229,9,20,0.60);
}

/* ── 8. TOPNAV — highlight badge playlist actif ────────────────────────── */
.tn-playlist-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 10px;
  border-radius: 20px;
  background: rgba(229,9,20,0.16);
  border: 1px solid rgba(229,9,20,0.30);
  font-size: 22px; font-weight: 600; color: var(--nfx-red);
  letter-spacing: 0.5px;
  -webkit-transition: background 0.18s ease, border-color 0.18s ease;
  transition:         background 0.18s ease, border-color 0.18s ease;
  max-width: 280px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tn-playlist-badge::before {
  content: '▶';
  font-size: 16px;
  flex-shrink: 0;
}

/* ── 9. ON-AIR BADGE — redesign premium ────────────────────────────────── */
.onair-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(229,9,20,0.18);
  border: 1px solid rgba(229,9,20,0.40);
  font-size: 20px; font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nfx-red);
  flex-shrink: 0;
}
.onair-badge .onair-dot {
  width: 8px; height: 8px;
  background: var(--nfx-red);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(229,9,20,0.80);
}

/* ── 10. MULTI-PLAYLIST SWITCHER — hover premium ────────────────────────── */
.pl-row:focus,
.pl-row.focused,
.pl-row.active-focus {
  background: rgba(229,9,20,0.10) !important;
  border-left: 3px solid var(--nfx-red) !important;
}
.pl-row.pl-active {
  background: rgba(229,9,20,0.06);
  border-left: 3px solid rgba(229,9,20,0.45);
}

/* ── 11. DIALOG EXIT — style Netflix glassmorphism ──────────────────────── */
#dialog-exit .dialog-box,
.dialog-box {
  background: rgba(14,14,14,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(229,9,20,0.10),
    0 40px 120px rgba(0,0,0,0.90),
    0 16px 40px rgba(0,0,0,0.60);
}

/* ── 12. SECTION TITLES — typographie grandes lignes Netflix ─────────────── */
/* Titres des rangées VOD sur l'écran home (ex : "Continue Watching") */
.home-row-title,
.section-label {
  font-size: 36px; font-weight: 800;
  color: var(--t1);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding-left: 4px;
  position: relative;
  display: inline-block;
}
/* Accent rouge mini sous le titre de rangée */
.home-row-title::after,
.section-label::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 32px; height: 3px;
  background: var(--nfx-red);
  border-radius: 2px;
}

/* ── 13. FOCUS RING GLOBAL — cohérence sur tous les éléments actifs ────── */
/* Pour tous les éléments qui ne sont pas .vod-card (ceux-là ont leur propre) */
.focusable.focused:not(.vod-card) {
  outline: none !important;
}

/* ── 14. CATÉGORIES — accent rouge animé (sidebar Live TV) ──────────────── */
.cat-item.active {
  border-left: 3px solid var(--nfx-red) !important;
  color: var(--t1) !important;
}
.cat-item:focus,
.cat-item.focused,
.cat-item.active-focus {
  background: rgba(229,9,20,0.10) !important;
  border-left: 3px solid var(--nfx-red) !important;
  color: #fff !important;
}

/* ── FIN Netflix Premium Layer v1.4 ───────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   MODAL — Nouvelle Playlist / Éditer Playlist
   z-index 10500 : au-dessus de tout (topnav 9999, exit-dialog 10001)
══════════════════════════════════════════════════════════════════════════ */
.modal-pl-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10500;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: rgba(0,0,0,0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal-pl-overlay.hidden { display: none !important; }

.modal-pl-box {
  background: linear-gradient(145deg, rgba(22,22,32,0.99), rgba(10,10,20,0.99));
  border: 1.5px solid rgba(255,255,255,0.13);
  border-radius: 20px;
  padding: 52px 64px 48px;
  min-width: 640px;
  max-width: 860px;
  width: 50vw;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}

.modal-pl-title {
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 36px;
  letter-spacing: 0.02em;
}

.modal-pl-field {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  margin-bottom: 22px;
  gap: 20px;
}

.modal-pl-label {
  font-size: 26px;
  color: rgba(255,255,255,0.60);
  min-width: 160px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}

.modal-pl-input {
  -webkit-flex: 1; flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 26px;
  color: #fff;
  outline: none;
  font-family: inherit;
  -webkit-appearance: none;
}
.modal-pl-input:focus,
.modal-pl-input.focused {
  border-color: #e50914;
  background: rgba(229,9,20,0.10);
  box-shadow: 0 0 0 3px rgba(229,9,20,0.25);
}

.modal-pl-type-row {
  display: -webkit-flex; display: flex;
  gap: 16px;
}

.modal-pl-type-btn {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 24px;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  font-family: inherit;
  outline: none;
}
.modal-pl-type-btn.active,
.modal-pl-type-btn:focus,
.modal-pl-type-btn.focused {
  background: #e50914;
  border-color: #e50914;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(229,9,20,0.35);
}

.modal-pl-actions {
  display: -webkit-flex; display: flex;
  gap: 24px;
  -webkit-justify-content: flex-end; justify-content: flex-end;
  margin-top: 36px;
}

.modal-pl-btn {
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 16px 40px;
  font-size: 26px;
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  cursor: pointer;
  font-family: inherit;
  outline: none;
}
.modal-pl-btn:focus,
.modal-pl-btn.focused {
  border-color: rgba(255,255,255,0.60);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.20);
}
.modal-pl-btn-save {
  background: #e50914;
  border-color: #e50914;
  color: #fff;
}
.modal-pl-btn-save:focus,
.modal-pl-btn-save.focused {
  background: #ff1a27;
  border-color: #ff1a27;
  box-shadow: 0 0 0 3px rgba(229,9,20,0.45);
}

/* == FIN Modal Playlist == */
/* FIX CSS 07/2026 : fragment orphelin `font-family` supprimé — il avalait la
   règle `#radio-screensaver` au parsing (protection anti burn-in OLED morte). */

/* === SCREENSAVER OLED RADIO ===
   Protege les dalles OLED/QLED contre le burn-in pendant l ecoute.
   Le logo de la station se deplace lentement (style DVD) sur fond noir.
*/
#radio-screensaver {
  position: absolute; /* Tizen 4 : pas de position:fixed */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  z-index: 9000;
  display: none;
  overflow: hidden;
}
.rsaver-bg {
  position: absolute;
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  background-size: cover;
  background-position: center;
  -webkit-filter: blur(40px) brightness(0.18);
  filter: blur(40px) brightness(0.18);
}
.rsaver-bg-color {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, #1a0a2e 0%, #000 70%);
}
.rsaver-logo {
  position: absolute;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  width: 220px; height: 220px;
  border-radius: 24px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  -webkit-box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.rsaver-logo img {
  width: 140px; height: 140px;
  object-fit: contain;
  border-radius: 12px;
}
.rsaver-initials {
  font-size: 56px; font-weight: 900;
  color: #fff; letter-spacing: 2px;
}
.rsaver-name {
  margin-top: 10px;
  font-size: 22px; color: rgba(255,255,255,0.7);
  text-align: center;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Égaliseur CSS dans le screensaver */
.rsaver-eq {
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-end; align-items: flex-end;
  gap: 5px;
  margin-top: 14px;
  height: 36px;
}
.rsaver-eq-bar {
  width: 6px;
  background: #e50914;
  border-radius: 3px;
  -webkit-animation: rsaverEq 0.8s ease-in-out infinite alternate;
  animation: rsaverEq 0.8s ease-in-out infinite alternate;
}
.rsaver-eq-bar:nth-child(1) { height: 12px; -webkit-animation-delay:0s;    animation-delay:0s; }
.rsaver-eq-bar:nth-child(2) { height: 28px; -webkit-animation-delay:0.15s; animation-delay:0.15s; }
.rsaver-eq-bar:nth-child(3) { height: 36px; -webkit-animation-delay:0.05s; animation-delay:0.05s; }
.rsaver-eq-bar:nth-child(4) { height: 20px; -webkit-animation-delay:0.22s; animation-delay:0.22s; }
.rsaver-eq-bar:nth-child(5) { height: 30px; -webkit-animation-delay:0.10s; animation-delay:0.10s; }
@-webkit-keyframes rsaverEq {
  from { -webkit-transform: scaleY(0.25); transform: scaleY(0.25); opacity: 0.5; }
  to   { -webkit-transform: scaleY(1);    transform: scaleY(1);    opacity: 1;   }
}
@keyframes rsaverEq {
  from { -webkit-transform: scaleY(0.25); transform: scaleY(0.25); opacity: 0.5; }
  to   { -webkit-transform: scaleY(1);    transform: scaleY(1);    opacity: 1;   }
}
/* ── PLAYLIST CARDS PREMIUM ──────────────────────────────────────────────── */
#pl-list-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 18px;
  padding: 8px 4px;
}
.pl-card {
  display: block;
  position: relative;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition: background 0.15s, border-color 0.15s;
  outline: none; min-height: 100px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.pl-card.focused, .pl-card:focus {
  background: rgba(229,9,20,0.10);
  border-color: rgba(229,9,20,0.60);
  -webkit-box-shadow: 0 0 0 2px rgba(229,9,20,0.22), 0 8px 32px rgba(229,9,20,0.14);
  box-shadow: 0 0 0 2px rgba(229,9,20,0.22), 0 8px 32px rgba(229,9,20,0.14);
}
.pl-card.pl-card-active {
  background: rgba(62,207,107,0.06);
  border-color: rgba(62,207,107,0.25);
}
.pl-card.pl-card-active.focused, .pl-card.pl-card-active:focus {
  background: rgba(62,207,107,0.10);
  border-color: rgba(62,207,107,0.50);
  -webkit-box-shadow: 0 0 0 2px rgba(62,207,107,0.18), 0 8px 32px rgba(62,207,107,0.10);
  box-shadow: 0 0 0 2px rgba(62,207,107,0.18), 0 8px 32px rgba(62,207,107,0.10);
}
.pl-card-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  font-size: 32px; font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: 0;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.40);
  box-shadow: 0 4px 16px rgba(0,0,0,0.40);
}
.pl-card-avatar.av-red    { background: linear-gradient(145deg,#991b1b,#e50914); }
.pl-card-avatar.av-blue   { background: linear-gradient(145deg,#1e3a8a,#3b82f6); }
.pl-card-avatar.av-green  { background: linear-gradient(145deg,#065f46,#10b981); }
.pl-card-avatar.av-purple { background: linear-gradient(145deg,#4338ca,#8b5cf6); }
.pl-card-avatar.av-orange { background: linear-gradient(145deg,#92400e,#f59e0b); }
.pl-card-avatar.av-teal   { background: linear-gradient(145deg,#164e63,#06b6d4); }
.pl-card-body {
  -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 10px; min-width: 0;
}
.pl-card-name {
  font-size: 38px; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-card-meta {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-align-items: center; align-items: center;
  gap: 14px;
}
.pl-card-type-badge {
  font-size: 22px; font-weight: 700; padding: 3px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.70);
  text-transform: uppercase; letter-spacing: 1px;
}
.pl-card-status-badge { font-size: 24px; font-weight: 600; color: rgba(255,255,255,0.50); }
.pl-card-status-badge.st-done    { color: #4ade80; }
.pl-card-status-badge.st-pending { color: #fbbf24; }
.pl-card-status-badge.st-error   { color: #f87171; }
.pl-card-status-badge.st-parsing { color: #60a5fa; }
.pl-card-right {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.pl-card-active-badge {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 8px; padding: 8px 22px; border-radius: 100px;
  background: rgba(62,207,107,0.15);
  border: 1.5px solid rgba(62,207,107,0.45);
  color: #4ade80; font-size: 24px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
}
.pl-card-hint {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 8px; padding: 8px 22px; border-radius: 100px;
  background: rgba(229,9,20,0.10);
  border: 1.5px solid rgba(229,9,20,0.30);
  color: rgba(229,9,20,0.80); font-size: 24px; font-weight: 700;
  opacity: 0;
  -webkit-transition: opacity 0.15s; transition: opacity 0.15s;
}
.pl-card.focused .pl-card-hint, .pl-card:focus .pl-card-hint { opacity: 1; }
.pl-empty-state {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  gap: 18px; padding: 60px 40px; text-align: center;
}
.pl-empty-icon { font-size: 64px; opacity: 0.30; }
.pl-empty-title { font-size: 36px; font-weight: 700; color: rgba(255,255,255,0.60); }
.pl-empty-sub   { font-size: 26px; color: rgba(255,255,255,0.35); max-width: 600px; }

/* ── CONTEXT-SWITCH OVERLAY — spinner ───────────────────────────────────── */
@-webkit-keyframes ctxSpin {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes ctxSpin {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
#ctx-switch-overlay {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

/* ── Carte playlist active — dashboard Apple TV style ────────────────────── */
.dash-pl-card {
  position: relative;
  margin: 0 var(--safe) 20px var(--safe);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  -webkit-box-shadow: 0 4px 32px rgba(0,0,0,0.35);
  box-shadow: 0 4px 32px rgba(0,0,0,0.35);
}
.dash-pl-card-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #3ECF6B;
  border-radius: 4px 0 0 4px;
}
.dash-pl-card-body {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  padding: 18px 32px 18px 24px;
}
.dash-pl-left {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 18px;
}
.dash-pl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #3ECF6B;
  -webkit-box-shadow: 0 0 8px rgba(62,207,107,0.6);
  box-shadow: 0 0 8px rgba(62,207,107,0.6);
  -webkit-animation: tnDotPulse 2.4s ease-in-out infinite;
  animation: tnDotPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.dash-pl-info { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 4px; }
.dash-pl-name {
  font-size: 30px; font-weight: 800; color: #fff;
  letter-spacing: 0.01em;
}
.dash-pl-meta {
  font-size: 22px; font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
}
.dash-pl-right {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: flex-end; align-items: flex-end;
  gap: 4px;
}
.dash-pl-days {
  font-size: 28px; font-weight: 800;
  color: #3ECF6B;
}
.dash-pl-expdate {
  font-size: 20px; font-weight: 500;
  color: rgba(255,255,255,0.40);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STARTUP PLAYLIST PICKER — sélecteur de playlist au démarrage
   Tizen 4 : position:absolute, pas de backdrop-filter, pas de position:fixed
   ═══════════════════════════════════════════════════════════════════════════ */
#startup-pl-picker {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9500;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease;
}
#startup-pl-picker.visible { opacity: 1; }

.spp-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Fond cinématique avec glow rouge (cohérent splash / icône store). */
  background: -webkit-radial-gradient(50% 42%, circle, #20121a 0%, #120a10 44%, #07060a 82%);
  background: radial-gradient(circle at 50% 42%, #20121a 0%, #120a10 44%, #07060a 82%);
}

/* ── Contenu centré ─────────────────────────────────────────────────────── */
.spp-content {
  position: relative;
  z-index: 1;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  width: 100%;
  max-width: 1600px;
  padding: 0 80px;
  gap: 48px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.spp-header {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  gap: 16px;
}

.spp-brand {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  text-transform: uppercase;
}
.spp-brand-r { color: #e50914; }

.spp-subtitle {
  font-size: 36px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}

/* ── Grille de cartes ───────────────────────────────────────────────────── */
.spp-cards {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-justify-content: center; justify-content: center;
  gap: 24px;
  width: 100%;
}

/* ── Carte individuelle ─────────────────────────────────────────────────── */
.spp-card {
  position: relative;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  gap: 20px;
  padding: 40px 36px 32px;
  min-width: 280px;
  max-width: 340px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  -webkit-transition: border-color 0.2s, background 0.2s, -webkit-transform 0.18s;
  transition: border-color 0.2s, background 0.2s, transform 0.18s;
}

.spp-card.spp-last {
  border-color: rgba(229,9,20,0.45);
  background: rgba(229,9,20,0.07);
}

.spp-card.spp-focused {
  border-color: #e50914;
  background: rgba(229,9,20,0.15);
  -webkit-transform: scale(1.07); transform: scale(1.07);
  box-shadow: 0 10px 50px rgba(229,9,20,0.40),
              0 0 0 3px rgba(229,9,20,0.30);
}

/* Avatar coloré avec initiales */
.spp-card-avatar {
  position: relative; overflow: hidden;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.40);
}
/* Reflet « sphère » premium : profondeur sur l'aplat de couleur. */
.spp-card-avatar::before {
  content: ""; position: absolute; top: -28%; left: -8%; width: 88%; height: 88%; border-radius: 50%;
  background: -webkit-radial-gradient(center, circle, rgba(255,255,255,0.40), rgba(255,255,255,0) 60%);
  background: radial-gradient(circle, rgba(255,255,255,0.40), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
/* Anneau rouge + halo sur l'avatar focalisé. */
.spp-card.spp-focused .spp-card-avatar {
  box-shadow: 0 8px 30px rgba(0,0,0,0.45), 0 0 0 4px rgba(229,9,20,0.9), 0 0 32px rgba(229,9,20,0.5);
}

.spp-card-letters {
  position: relative; z-index: 1;
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}

/* Infos texte */
.spp-card-info {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  gap: 8px;
}

.spp-card-name {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  word-break: break-word;
  max-width: 280px;
  line-height: 1.2;
}

.spp-card-type {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.40);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

/* Badge "Dernière utilisée" */
.spp-card-badge {
  font-size: 18px;
  font-weight: 700;
  color: #e50914;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border: 1px solid rgba(229,9,20,0.50);
  border-radius: 20px;
}

/* Bouton OK — coin bas droit, caché sauf au focus */
.spp-card-check {
  position: absolute;
  bottom: -14px;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(0.7);
  transform: translateX(-50%) scale(0.7);
  opacity: 0;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  padding: 6px 22px;
  border-radius: 20px;
  letter-spacing: 0.08em;
  -webkit-transition: opacity 0.18s, -webkit-transform 0.18s;
  transition: opacity 0.18s, transform 0.18s;
}
.spp-card.spp-focused .spp-card-check {
  opacity: 1;
  -webkit-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
}

/* ── Footer : barre + texte ─────────────────────────────────────────────── */
.spp-footer {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 920px;   /* barre large = pied de page sous TOUTES les cartes (ne « coupe » plus le profil du milieu) */
  margin-top: 30px;   /* séparation nette des cartes */
}

.spp-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
}

.spp-bar-fill {
  height: 100%;
  width: 100%;
  background: -webkit-linear-gradient(left, #ff3344, #e50914);
  background: linear-gradient(90deg, #ff3344, #e50914);
  border-radius: 2px;
  -webkit-transition: width 0.9s linear; transition: width 0.9s linear;
}

.spp-auto {
  font-size: 24px;
  color: rgba(255,255,255,0.40);
}

#spp-ctr {
  color: #fff;
  font-weight: 700;
}

/* Alerte playlist par défaut indisponible — spp-alert */
.spp-alert {
  margin: 0 0 28px 0;
  padding: 18px 28px;
  background: rgba(229,9,20,0.18);
  border: 2px solid rgba(229,9,20,0.60);
  border-radius: 12px;
  font-size: 26px;
  color: #ff6b6b;
  text-align: center;
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════
   EPG GRID — REPLAY  (v70)
   Full-screen guide TV inspiré des apps Tizen open-source
   Tizen 2.4+ : ES5, pas de CSS Grid, pas de backdrop-filter
   ═══════════════════════════════════════════════════════════════════ */

#epg-screen {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #0a0a12;
  overflow: hidden;
}

/* ── Barre supérieure ──────────────────────────────────────────── */
#epg-topbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 48px;
  height: 76px;
  background: rgba(229,9,20,0.10);
  border-bottom: 2px solid rgba(229,9,20,0.30);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.epg-tb-brand {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 14px;
}
.epg-tb-dot {
  font-size: 28px;
  color: #e50914;
}
.epg-tb-title {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.epg-tb-date-nav,
.epg-tb-time-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 12px;
}

.epg-date-lbl {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  min-width: 200px;
  text-align: center;
}

.epg-nav-btn {
  font-size: 24px;
  font-weight: 600;
  color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 20px;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.epg-nav-btn:focus,
.epg-nav-btn.focused,
.epg-nav-btn.active-focus {
  background: rgba(229,9,20,0.25) !important;
  border-color: #e50914 !important;
  color: #fff !important;
  outline: 3px solid rgba(229,9,20,0.70);
}
.epg-btn-live {
  color: #e50914;
  border-color: rgba(229,9,20,0.35);
  background: rgba(229,9,20,0.10);
  font-weight: 800;
}

/* ── Wrapper grille ─────────────────────────────────────────────── */
#epg-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Sidebar chaînes (fixe) ─────────────────────────────────────── */
#epg-sidebar {
  width: 220px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  background: #0e0e1a;
  border-right: 2px solid rgba(255,255,255,0.08);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}
#epg-sidebar-hdr {
  height: 50px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.30);
}
#epg-ch-list {
  -webkit-flex: 1;
  flex: 1;
  overflow-y: hidden; /* synchronisé avec epg-scroll */
  overflow-x: hidden;
}
.epg-ch-cell {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  -webkit-transition: background 0.12s ease;
  transition: background 0.12s ease;
}
.epg-ch-cell.epg-ch-active {
  background: rgba(229,9,20,0.12);
  border-left: 3px solid #e50914;
}
.epg-ch-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  border-radius: 4px;
}
.epg-ch-abbr {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,0.60);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.epg-ch-name {
  font-size: 24px;
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-flex: 1;
  flex: 1;
}
/* Badge ◉ = chaîne avec catchup (tv_archive=1) */
.epg-ch-arc {
  font-size: 18px;
  color: #e50914;
  margin-left: 6px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  line-height: 1;
  -webkit-align-self: center;
  align-self: center;
}

/* ── Zone scrollable (timeline + lignes) ────────────────────────── */
#epg-scroll {
  -webkit-flex: 1;
  flex: 1;
  overflow: auto;
  position: relative;
  background: #0a0a12;
  /* scrollbar fine */
  scrollbar-width: thin;
  scrollbar-color: rgba(229,9,20,0.40) transparent;
}
#epg-scroll::-webkit-scrollbar       { width: 5px; height: 5px; }
#epg-scroll::-webkit-scrollbar-thumb { background: rgba(229,9,20,0.40); border-radius: 3px; }

/* Timeline des heures */
#epg-rows-wrap {
  padding-top: 50px; /* v167: réserve l'espace pour la timeline absolue */
}
#epg-timeline {
  height: 50px;
  /* v167 FIX B5: position:sticky non supporté Tizen 2.4-4 → absolute + JS scroll sync */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: #0e0e1a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  -webkit-transition: left 0s;
  transition: left 0s;
}
.epg-tl-mark {
  position: absolute;
  top: 14px;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* Wrapper lignes + indicateur NOW — padding-top géré ci-dessus */
#epg-rows-wrap {
  position: relative;
}

/* Ligne verticale "Maintenant" */
#epg-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #e50914;
  z-index: 20;
  -webkit-box-shadow: 0 0 12px rgba(229,9,20,0.80);
  box-shadow: 0 0 12px rgba(229,9,20,0.80);
  display: none;
}

/* Ligne chaîne */
.epg-prog-row {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.epg-prog-row:nth-child(even) {
  background: rgba(255,255,255,0.015);
}

/* Bloc programme */
.epg-prog {
  position: absolute;
  top: 6px;
  border-radius: 7px;
  padding: 6px 10px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  -webkit-transition: background 0.10s ease, border-color 0.10s ease;
  transition: background 0.10s ease, border-color 0.10s ease;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.epg-prog-past {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}
.epg-prog-focused {
  outline: 3px solid #e50914 !important;
  outline-offset: -3px;
  background: rgba(229,9,20,0.18) !important;
  -webkit-transform: scaleY(1.06);
  transform: scaleY(1.06);
  z-index: 2;
}
.epg-prog-live {
  background: rgba(229,9,20,0.18);
  border-color: rgba(229,9,20,0.45);
}
.epg-prog:focus,
.epg-prog.focused,
.epg-prog.active-focus {
  background: rgba(229,9,20,0.35) !important;
  border-color: #e50914 !important;
  outline: 3px solid rgba(229,9,20,0.80);
  z-index: 5;
}
.epg-prog-narrow {
  padding: 6px 4px;
}
.epg-prog-time {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.60);
  white-space: nowrap;
  line-height: 1.1;
}
.epg-prog-name {
  font-size: 24px;
  font-weight: 600;
  color: rgba(255,255,255,0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  line-height: 1.2;
}

/* Chargement */
.epg-loading-msg {
  padding: 60px 40px;
  font-size: 30px;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
.epg-err { color: #e50914; }

/* ── Barre info programme ───────────────────────────────────────── */
#epg-infobar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 48px;
  height: 72px;
  background: rgba(0,0,0,0.55);
  border-top: 2px solid rgba(255,255,255,0.07);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.epg-info-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 20px;
  min-width: 0;
  -webkit-flex: 1;
  flex: 1;
}
.epg-info-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 28px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.epg-info-ch {
  font-size: 26px;
  font-weight: 800;
  color: #e50914;
  white-space: nowrap;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.epg-info-name {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.epg-info-time {
  font-size: 26px;
  font-weight: 600;
  color: rgba(255,255,255,0.60);
  white-space: nowrap;
}
.epg-info-hint {
  font-size: 22px;
  color: rgba(255,255,255,0.30);
  white-space: nowrap;
}

/* ── EPG — Sélecteur catégories ────────────────────────────────────────── */
#epg-cat-panel {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #0a0a0a;
  z-index: 10;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 0;
}

.epg-cat-hdr {
  background: rgba(229,9,20,0.12);
  border-bottom: 2px solid rgba(229,9,20,0.40);
  padding: 28px 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 24px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.epg-cat-hdr-icon {
  color: #e50914;
  font-size: 36px;
}

.epg-cat-hdr-title {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#epg-cat-list {
  -webkit-flex: 1;
  flex: 1;
  overflow-y: auto;
  padding: 30px 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 12px;
}

.epg-cat-item {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 22px 40px;
  color: #ddd;
  font-size: 28px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  -webkit-transition: background 0.15s, border-color 0.15s, color 0.15s;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.epg-cat-item:focus,
.epg-cat-item.focused {
  background: rgba(229,9,20,0.28);
  border-color: #e50914;
  color: #fff;
  outline: 3px solid #e50914;
  outline-offset: 0;
}

.epg-cat-item:hover {
  background: rgba(255,255,255,0.10);
}

.epg-cat-empty {
  color: #888;
  font-size: 28px;
  text-align: center;
  padding: 60px;
}

/* ── Profils — panel settings ───────────────────────────────────────────── */
.prof-row { outline: none; }
.prof-row.focused,
.prof-row:focus {
  border-color: #e50914 !important;
  background: rgba(229,9,20,0.25) !important;
  outline: 3px solid #e50914;
  outline-offset: 0;
}
.prof-row-active {
  border-color: #e50914 !important;
}

/* ── TMDB — casting + directeur ─────────────────────────────────────────── */
.sd-badge-director {
  background: rgba(229,9,20,0.15);
  border-color: rgba(229,9,20,0.40);
}
.sd-meta-cast {
  margin-top: 10px;
  font-size: 24px;
  color: #bbb;
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Profils — button.sett-btn (element <button>) — v168 ───────────────── */
button.sett-btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 18px 40px;
  font-size: 28px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  letter-spacing: 0.4px;
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition: background 0.15s, border-color 0.15s;
}
button.sett-btn:focus,
button.sett-btn.focused,
button.sett-btn.is-focused {
  background: rgba(229,9,20,0.22);
  border-color: #e50914;
  outline: 3px solid #e50914;
  outline-offset: 0;
  color: #fff;
}
button.sett-btn-danger {
  background: rgba(160,0,0,0.28) !important;
  border-color: rgba(200,0,0,0.55) !important;
  color: #ff9999 !important;
}
button.sett-btn-danger:focus,
button.sett-btn-danger.focused,
button.sett-btn-danger.is-focused {
  background: rgba(229,9,20,0.45) !important;
  border-color: #e50914 !important;
  color: #fff !important;
}

/* ── Settings input ─────────────────────────────────────────────────────── */
.sett-input {
  outline: none;
  -webkit-appearance: none;
}
.sett-input:focus {
  border-color: #e50914 !important;
  outline: 3px solid #e50914;
}
.sett-btn-danger {
  background: rgba(180,0,0,0.30) !important;
  border-color: #c00 !important;
  color: #ff8888 !important;
}
.sett-btn-danger:focus,
.sett-btn-danger.focused {
  background: rgba(229,9,20,0.50) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AMBIENT MODE — glow coloré derrière la liste de chaînes
   ═══════════════════════════════════════════════════════════════════ */
#live-ambient-glow {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  -webkit-transition: background 0.7s ease;
  transition: background 0.7s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   ZAP PREVIEW — overlay chaîne suivante/précédente
   ═══════════════════════════════════════════════════════════════════ */
#zap-preview-overlay {
  position: absolute;
  bottom: 160px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(0,0,0,0.82);
  border: 2px solid rgba(229,9,20,0.6);
  border-radius: 16px;
  padding: 18px 56px;
  color: #fff;
  text-align: center;
  z-index: 9999;
  pointer-events: none;
  min-width: 480px;
  -webkit-box-shadow: 0 8px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(229,9,20,0.2);
  box-shadow: 0 8px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(229,9,20,0.2);
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   SLEEP TIMER BADGE
   ═══════════════════════════════════════════════════════════════════ */
#sleep-badge {
  position: absolute;
  top: 32px;
  right: 220px;
  background: rgba(229,9,20,0.88);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  padding: 8px 22px;
  border-radius: 24px;
  letter-spacing: 1px;
  z-index: 9999;
  pointer-events: none;
  display: none;
  -webkit-box-shadow: 0 4px 20px rgba(229,9,20,0.4);
  box-shadow: 0 4px 20px rgba(229,9,20,0.4);
}/* ═══════════════════════════════════════════════════════════════════════════════
   PROFILE PICKER — Netflix "Qui regarde ?"
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─ Fond opaque total — couvre tout y compris fond Samsung ──────────────── */
#screen-profile-picker {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #141414 !important;
  z-index: 9000;
}
#screen-profile-picker.active {
  z-index: 9000 !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* ─ Logo RSKTV ───────────────────────────────────────────────────────────── */
/* ── Logo animé (écran profil) — remplace l'ancien logo texte ─────────────── */
#screen-profile-picker #picker-logo-anim {
  position: relative;
  width: 140px; height: 140px;
  margin: 0 auto 6px;
  opacity: 0;
  -webkit-transform: scale(0.8) translateY(18px); transform: scale(0.8) translateY(18px);
  -webkit-animation: pk-logo-in 0.8s cubic-bezier(0.34,1.36,0.64,1) 0.1s both;
  animation:         pk-logo-in 0.8s cubic-bezier(0.34,1.36,0.64,1) 0.1s both;
}
#picker-logo-halo {
  position: absolute; left: -20px; top: -20px; right: -20px; bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229,9,20,0.30) 0%, rgba(229,9,20,0) 70%);
  -webkit-animation: pk-halo 2.4s ease-in-out infinite; animation: pk-halo 2.4s ease-in-out infinite;
}
#picker-logo-svg { position: relative; display: block; }
#picker-logo-svg .pk-r1 { -webkit-animation: pk-spin 9s linear infinite;  animation: pk-spin 9s linear infinite;  -webkit-transform-origin: 50px 50px; transform-origin: 50px 50px; }
#picker-logo-svg .pk-r2 { -webkit-animation: pk-spinR 6s linear infinite; animation: pk-spinR 6s linear infinite; -webkit-transform-origin: 50px 50px; transform-origin: 50px 50px; }
#picker-logo-svg .pk-r3 { -webkit-animation: pk-spin 3.5s linear infinite; animation: pk-spin 3.5s linear infinite; -webkit-transform-origin: 50px 50px; transform-origin: 50px 50px; }
#picker-logo-svg .pk-gl { -webkit-animation: pk-glow 2.2s ease-in-out infinite; animation: pk-glow 2.2s ease-in-out infinite; }
@-webkit-keyframes pk-logo-in { to { opacity: 1; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } }
@keyframes pk-logo-in        { to { opacity: 1; transform: scale(1) translateY(0); } }
@-webkit-keyframes pk-halo { 0%,100%{opacity:.5; -webkit-transform:scale(0.95)} 50%{opacity:1; -webkit-transform:scale(1.08)} }
@keyframes pk-halo        { 0%,100%{opacity:.5; transform:scale(0.95)} 50%{opacity:1; transform:scale(1.08)} }
@-webkit-keyframes pk-spin  { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes pk-spin         { to { transform: rotate(360deg); } }
@-webkit-keyframes pk-spinR { to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
@keyframes pk-spinR        { to { transform: rotate(-360deg); } }
@-webkit-keyframes pk-glow  { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes pk-glow         { 0%,100%{opacity:.4} 50%{opacity:1} }
#screen-profile-picker #picker-logo-bar {
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #e50914, transparent);
  border-radius: 2px;
  margin: 16px auto 40px;
  display: block;
  opacity: 0;
  -webkit-animation: pk-fade 0.6s ease 0.65s both; animation: pk-fade 0.6s ease 0.65s both;
}
@-webkit-keyframes pk-fade { to { opacity: 1; } }
@keyframes pk-fade        { to { opacity: 1; } }

/* ─ Conteneur centré ─────────────────────────────────────────────────────── */
#picker-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
}

/* ─ Titre principal ──────────────────────────────────────────────────────── */
#picker-title {
  font-size: 52px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0;
  margin-bottom: 72px;
  text-align: center;
  text-transform: none;
}

/* ─ Rangée de cercles ────────────────────────────────────────────────────── */
#picker-profiles-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

/* ─ Carte = conteneur invisible ─────────────────────────────────────────── */
.picker-card {
  outline: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-transition: -webkit-transform 0.18s ease;
  transition: transform 0.18s ease;
}

/* ─ Focus premium : anneau + halo pulsé + élévation douce (v230) ────────── */
.picker-card.focused .pk-avatar {
  border: 5px solid #e50914 !important;
  -webkit-transform: scale(1.08) translateY(-6px) !important;
  transform: scale(1.08) translateY(-6px) !important;
  -webkit-animation: pkGlow 2.2s ease-in-out infinite;
  animation: pkGlow 2.2s ease-in-out infinite;
}
@-webkit-keyframes pkGlow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(229,9,20,0.25), 0 0 44px rgba(229,9,20,0.55), 0 26px 60px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(229,9,20,0.40), 0 0 70px rgba(229,9,20,0.80), 0 26px 60px rgba(0,0,0,0.6); }
}
@keyframes pkGlow {
  0%, 100% { box-shadow: 0 0 0 6px rgba(229,9,20,0.25), 0 0 44px rgba(229,9,20,0.55), 0 26px 60px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(229,9,20,0.40), 0 0 70px rgba(229,9,20,0.80), 0 26px 60px rgba(0,0,0,0.6); }
}
.picker-card.focused .pk-name {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(229,9,20,0.45);
}
.picker-card.focused .pk-pl { color: #ff8a90 !important; }

/* ─ Hint télécommande (réactivé, discret) ────────────────────────────────── */
#picker-hint {
  display: block !important;
  margin-top: 64px;
  font-size: 19px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 1px;
  -webkit-animation: pkFadeIn 0.8s ease 0.7s both;
  animation: pkFadeIn 0.8s ease 0.7s both;
}

/* ══ PREMIUM v230 — fond aurora vivant, profondeur, reflets, scénographie ══ */
#screen-profile-picker {
  background: -webkit-radial-gradient(50% 38%, circle, #1d1016 0%, #100a10 46%, #060509 84%);
  background: radial-gradient(circle at 50% 38%, #1d1016 0%, #100a10 46%, #060509 84%);
  overflow: hidden;
}
/* Nappes aurora animées (pseudo-éléments — zéro DOM, pré-floutées par gradient) */
#screen-profile-picker::before,
#screen-profile-picker::after {
  content: ""; position: absolute; width: 1100px; height: 1100px; border-radius: 50%;
  pointer-events: none; z-index: 1;
}
#screen-profile-picker::before {
  top: -420px; left: -260px;
  background: -webkit-radial-gradient(center, circle, rgba(229,9,20,0.16), rgba(229,9,20,0) 62%);
  background: radial-gradient(circle, rgba(229,9,20,0.16), rgba(229,9,20,0) 62%);
  -webkit-animation: pkAurora1 16s ease-in-out infinite;
  animation: pkAurora1 16s ease-in-out infinite;
}
#screen-profile-picker::after {
  bottom: -480px; right: -300px;
  background: -webkit-radial-gradient(center, circle, rgba(64,84,255,0.10), rgba(64,84,255,0) 60%);
  background: radial-gradient(circle, rgba(64,84,255,0.10), rgba(64,84,255,0) 60%);
  -webkit-animation: pkAurora2 19s ease-in-out infinite;
  animation: pkAurora2 19s ease-in-out infinite;
}
@-webkit-keyframes pkAurora1 {
  0%, 100% { -webkit-transform: translate(0,0); opacity: 0.9; }
  50%      { -webkit-transform: translate(140px,80px); opacity: 0.55; }
}
@keyframes pkAurora1 {
  0%, 100% { transform: translate(0,0); opacity: 0.9; }
  50%      { transform: translate(140px,80px); opacity: 0.55; }
}
@-webkit-keyframes pkAurora2 {
  0%, 100% { -webkit-transform: translate(0,0); opacity: 0.8; }
  50%      { -webkit-transform: translate(-160px,-90px); opacity: 0.45; }
}
@keyframes pkAurora2 {
  0%, 100% { transform: translate(0,0); opacity: 0.8; }
  50%      { transform: translate(-160px,-90px); opacity: 0.45; }
}
#picker-inner { position: relative; z-index: 2; }

/* ── Mosaïque cinéma dérivante (fond v230b) ──────────────────────────────── */
#picker-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden; z-index: 0; pointer-events: none;
}
.pkg-row {
  position: absolute; left: -12%; width: 150%; height: 31%;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: horizontal; -webkit-flex-direction: row; flex-direction: row;
}
.pkg-row .spl-card {
  margin: 12px; opacity: 0.7;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.pkg-r1 { top: -2%;
  -webkit-animation: pkgDrift1 70s ease-in-out infinite; animation: pkgDrift1 70s ease-in-out infinite; }
.pkg-r2 { top: 32%;
  -webkit-animation: pkgDrift2 85s ease-in-out infinite; animation: pkgDrift2 85s ease-in-out infinite; }
.pkg-r3 { top: 66%;
  -webkit-animation: pkgDrift1 95s ease-in-out infinite; animation: pkgDrift1 95s ease-in-out infinite; }
@-webkit-keyframes pkgDrift1 {
  0%, 100% { -webkit-transform: translateX(0); }
  50%      { -webkit-transform: translateX(-90px); }
}
@keyframes pkgDrift1 {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-90px); }
}
@-webkit-keyframes pkgDrift2 {
  0%, 100% { -webkit-transform: translateX(-90px); }
  50%      { -webkit-transform: translateX(0); }
}
@keyframes pkgDrift2 {
  0%, 100% { transform: translateX(-90px); }
  50%      { transform: translateX(0); }
}
/* Voile sombre : profils lisibles (règle 10-foot), mosaïque en présence subtile */
#picker-bg-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: -webkit-radial-gradient(50% 42%, ellipse, rgba(8,6,9,0.50) 0%, rgba(8,6,9,0.68) 52%, rgba(5,4,8,0.90) 100%);
  background: radial-gradient(ellipse at 50% 42%, rgba(8,6,9,0.50) 0%, rgba(8,6,9,0.68) 52%, rgba(5,4,8,0.90) 100%);
}

/* Titre : apparition en fondu + interlettrage qui se resserre */
#picker-title {
  -webkit-animation: pkTitle 0.9s ease 0.05s both;
  animation: pkTitle 0.9s ease 0.05s both;
}
@-webkit-keyframes pkTitle {
  from { opacity: 0; letter-spacing: 14px; -webkit-transform: translateY(14px); }
  to   { opacity: 1; letter-spacing: 0;    -webkit-transform: translateY(0); }
}
@keyframes pkTitle {
  from { opacity: 0; letter-spacing: 14px; transform: translateY(14px); }
  to   { opacity: 1; letter-spacing: 0;    transform: translateY(0); }
}

/* Entrée scénographiée des cartes (delay par carte injecté en JS) */
.pk-enter {
  -webkit-animation: pkFadeIn 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation: pkFadeIn 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@-webkit-keyframes pkFadeIn {
  from { opacity: 0; -webkit-transform: translateY(34px) scale(0.92); }
  to   { opacity: 1; -webkit-transform: translateY(0) scale(1); }
}
@keyframes pkFadeIn {
  from { opacity: 0; transform: translateY(34px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Avatar : gloss haut + voile de profondeur bas (relief sur couleur plate) */
#picker-profiles-row .pk-avatar { position: relative; overflow: hidden; }
#picker-profiles-row .pk-avatar::before {
  content: ""; position: absolute; top: -26%; left: -8%; width: 86%; height: 86%; border-radius: 50%;
  background: -webkit-radial-gradient(center, circle, rgba(255,255,255,0.34), rgba(255,255,255,0) 60%);
  background: radial-gradient(circle, rgba(255,255,255,0.34), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
#picker-profiles-row .pk-avatar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
  background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.30));
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.30));
  pointer-events: none;
}

/* Badge playlist sous le nom */
.pk-pl {
  margin-top: 8px;
  font-size: 17px;
  color: rgba(255,255,255,0.34);
  letter-spacing: 0.5px;
  max-width: 230px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-transition: color 0.18s ease; transition: color 0.18s ease;
}

/* Pastille profil actif (en bas du cercle) */
.pk-active-dot {
  position: absolute; left: 50%; bottom: 10px;
  width: 34px; height: 34px; margin-left: -17px;
  border-radius: 50%;
  background: #e50914;
  color: #fff; font-size: 19px; font-weight: 700;
  line-height: 34px; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}



/* ── Fix #epg-full — overlay plein écran Guide TV ───────────────────────────
   #epg-full est en dehors 

/* ═══════════════════════════════════════════════════════════════════════════
   ZAP PANEL — Liste chaînes groupe (RIGHT en plein écran)
   Style TiviMate : slide depuis la droite, semi-transparent, EPG inline
   ═══════════════════════════════════════════════════════════════════════════ */

.zap-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  width: 520px;
  height: 100%;
  background: rgba(10, 10, 15, 0.92);
  border-right: 2px solid rgba(229, 9, 20, 0.6);
  z-index: 350;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.22s ease;
  transition: transform 0.22s ease;
}
.zap-panel.zap-open {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.zap-panel.hidden {
  display: none !important;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.zap-panel-header {
  padding: 22px 24px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.zap-panel-group {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.zap-panel-hint {
  font-size: 20px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}

/* ── Liste ──────────────────────────────────────────────────────────────── */
.zap-panel-list {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── Item chaîne ────────────────────────────────────────────────────────── */
.zap-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 18px;
  height: 76px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  -webkit-transition: background 0.12s;
  transition: background 0.12s;
  position: relative;
  overflow: hidden;
}
.zap-item:last-child { border-bottom: none; }

/* Chaîne en cours de lecture */
.zap-item.zap-current {
  background: rgba(229, 9, 20, 0.15);
  border-left: 4px solid #e50914;
}
/* Item sélectionné (focus télécommande) */
.zap-item.zap-focused {
  background: rgba(255, 255, 255, 0.14);
  border-left: 4px solid #fff;
}
.zap-item.zap-current.zap-focused {
  background: rgba(229, 9, 20, 0.28);
  border-left: 4px solid #e50914;
}

/* Logo */
.zap-item-logo {
  width: 60px;
  height: 60px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  border-radius: 6px;
  margin-right: 14px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;   /* FIX 07/2026 : borne l'image logo au conteneur */
}
/* FIX 07/2026 : le logo est un <img> DANS ce div. Sans contrainte de taille,
   il s'affichait à sa taille naturelle (logo géant par-dessus le panneau de
   zapping avant le plein écran). object-fit sur le div ne fait rien ; il faut
   le poser sur l'IMG. */
.zap-item-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.zap-item-abbr {
  width: 60px;
  height: 60px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  border-radius: 6px;
  margin-right: 14px;
  background: rgba(255,255,255,0.12);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}

/* Texte */
.zap-item-info {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}
.zap-item-name {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.zap-item.zap-current .zap-item-name { color: #ff6060; }
.zap-item.zap-focused .zap-item-name  { color: #fff; }

.zap-item-epg {
  font-size: 20px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barre progression EPG */
.zap-item-prog {
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.zap-item-prog-fill {
  height: 100%;
  background: #e50914;
  border-radius: 2px;
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
}

/* Numéro / badge */
.zap-item-num {
  font-size: 18px;
  color: rgba(255,255,255,0.28);
  margin-left: 8px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}
/* FIX CSS 07/2026 : fragment orphelin supprimé — il avalait la règle
   `.zap-item-inner` au parsing (layout des rangées du panneau zapping mort). */

/* Inner row (logo + info side by side) */
.zap-item-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* Placeholder quand pas de logo */
.zap-no-logo {
  width: 60px;
  height: 60px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  border-radius: 6px;
  margin-right: 14px;
  background: rgba(255,255,255,0.08);
}

/* Barre EPG conteneur (utilisé avec prog-fill) */
/* FIX CSS 07/2026 : règle tronquée (« backgr ») et JAMAIS FERMÉE — tout le
   CSS après cette ligne était avalé par le bloc ouvert. Reconstruite. */
.zap-item-prog-bar {
  height: 3px;
  background: rgba(255,255,255,0.14);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}

/* Replay — focus catégorie robuste Tizen (state-class instead of :focus) */
.epg-cat-item.epg-cat-focused {
  background: rgba(229, 9, 20, 0.35);
  border-left: 4px solid #e50914;
  color: #fff;
  -webkit-transform: translateX(6px);
  transform: translateX(6px);
}


/* ==========================================================================
   REPLAY — Layout unifié 2 zones (catégories | chaînes / programmes)
   Modèle : sidebar catégories (gauche 23%) + zone principale (droite).
   La zone principale affiche la grille de chaînes, bascule sur les programmes
   (.rpl-view-progs). position:absolute partout — parent #section-replay en block.
   ========================================================================== */

/* ── Section : juste fond + overflow ────────────────────────────────────── */
/* display/position/size herites de .content-section(.active) */
#section-replay {
  background: #070710;
  color: #f0f0fa;
  overflow: hidden;
}

/* CORRECTIF AFFICHAGE — la règle globale `.content-section.active { display:flex }`
   transforme cette section en conteneur flex (row). Or le Replay est bâti
   entièrement en position:absolute + calc() (topbar / guide 3 panneaux / infobar) :
   un parent flex aligne ses enfants en ligne au lieu de les superposer.
   On force donc le mode block ici (specificité #id.active > .content-section.active). */
#section-replay.active {
  display: block !important;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ── Topbar ── position:absolute + width:100% ─────────────────────────────*/
#rpl-topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background: #0c0c22;
  border-bottom: 2px solid #1c1c3c;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 80px;
  /* flex row interne — OK ici car topbar est position:absolute donc
     son parent flex ne l'affecte pas; sa propre largeur est 100% */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.rpl-tb-brand {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  font-size: 28px; font-weight: 700; color: #e50914;
  letter-spacing: 3px; text-transform: uppercase;
  white-space: nowrap; margin-right: 24px;
}

.rpl-tb-days {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: horizontal; -webkit-box-align: center;
  -webkit-align-items: center; align-items: center;
}

.rpl-day-pill {
  display: inline-block;
  background: #16162a; border: 2px solid #2a2a50;
  color: #888; font-size: 20px; font-weight: 600;
  padding: 5px 14px; border-radius: 20px;
  cursor: pointer; white-space: nowrap; margin-right: 6px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.rpl-day-pill.rpl-day-today  { border-color: #3a3a60; color: #bbb; }
.rpl-day-pill.rpl-day-active { background: #e50914; border-color: #e50914; color: #fff; font-weight: 700; }

.rpl-tb-daylabel {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  font-size: 24px; color: #e50914; font-weight: 700;
  white-space: nowrap; margin-left: 16px;
}

.rpl-tb-hint {
  -webkit-flex: 1; flex: 1;
  font-size: 18px; color: #44446a;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-align: right; margin-left: 20px;
}

/* ── Guide : 2 zones absolues ─────────────────────────────────────────────── */
#rpl-guide {
  position: absolute;
  top: 74px;
  left: 0;
  width: 100%;
  height: calc(100% - 148px);
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.rpl-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: #0b0b1c;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#rpl-panel-cats {
  left: 0;
  width: 23%;
  border-right: 2px solid #18183a;
}

#rpl-panel-chans,
#rpl-panel-progs {
  left: 23%;
  right: 0;
  width: auto;
  border: 0;
}

#rpl-panel-progs { display: none; }
#rpl-guide.rpl-view-progs #rpl-panel-chans { display: none; }
#rpl-guide.rpl-view-progs #rpl-panel-progs { display: block; }

/* ── En-tetes panneaux ───────────────────────────────────────────────────── */
.rpl-panel-hdr {
  display: block;
  width: 100%; height: 60px; line-height: 60px;
  padding: 0 20px; font-size: 24px; font-weight: 700;
  letter-spacing: 1px; color: #4a4a7a; background: #0f0f28;
  border-bottom: 3px solid #1c1c42; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.rpl-panel-hdr.rpl-panel-active { color: #fff; border-bottom-color: #e50914; background: #120820; }
.rpl-hdr-sub { font-size: 18px; font-weight: 400; color: #666; margin-left: 8px; }
.rpl-panel-hdr.rpl-panel-active .rpl-hdr-sub { color: #e50914; }

/* ── Zones scrollables ────────────────────────────────────────────────────── */
.rpl-panel-scroll {
  display: block;
  width: 100%;
  height: calc(100% - 63px); /* 100% panel - 60px hdr - 3px border */
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.rpl-panel-scroll::-webkit-scrollbar { display: none; }

.rpl-hint-msg {
  padding: 50px 20px; font-size: 24px; color: #33335a;
  text-align: center; line-height: 1.5;
}

/* ── Items categorie (72px) ──────────────────────────────────────────────── */
.rpl-cat-item {
  display: block; width: 100%; height: 72px;
  padding: 0 20px; line-height: 72px;
  border-bottom: 1px solid #14142c; border-left: 5px solid transparent;
  font-size: 28px; font-weight: 500; color: #a0a0cc;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.rpl-cat-item.rpl-focused        { background: rgba(229,9,20,0.22); border-left-color: #e50914; color: #fff; font-weight: 700; }
.rpl-cat-item.rpl-selected       { border-left-color: #e50914; color: #e50914; font-weight: 600; }
.rpl-cat-item.rpl-focused.rpl-selected { background: rgba(229,9,20,0.28); color: #ff3344; }

/* ── Grille de chaînes (cartes logo + nom + badge archive) ──────────────── */
#rpl-ch-list { display: block; padding: 20px; font-size: 0; }

.rpl-ch-item {
  display: inline-block;
  vertical-align: top;
  width: 22%;
  height: 158px;
  margin: 0 1.4% 22px 1.4%;
  padding: 0;
  border: 2px solid #1c1c3c;
  border-radius: 14px;
  background: #0e0e22;
  position: relative;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.rpl-ch-logo {
  display: block;
  margin: 22px auto 10px auto;
  width: 92px;
  height: 64px;
  object-fit: contain;
  background: transparent;
}

.rpl-ch-name {
  display: block;
  max-width: 100%;
  padding: 0 12px;
  font-size: 22px;
  font-weight: 500;
  color: #c8c8e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rpl-arch-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: #e50914;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 8px;
}

.rpl-ch-item.rpl-focused {
  border-color: #e50914;
  background: rgba(229,9,20,0.18);
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

.rpl-ch-item.rpl-focused .rpl-ch-name { color: #fff; font-weight: 700; }

/* ── Items programme ─────────────────────────────────────────────────────── */
.rpl-prog-item {
  display: block; width: 100%;
  padding: 14px 18px 12px 18px;
  border-bottom: 1px solid #14142c; border-left: 5px solid transparent;
  cursor: pointer;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.rpl-prog-time  { display: block; font-size: 32px; font-weight: 700; color: #e50914; line-height: 1.1; letter-spacing: 1px; }
.rpl-prog-title { display: block; font-size: 26px; font-weight: 500; color: #dcdcf0; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpl-prog-dur   { display: block; font-size: 20px; color: #55557a; margin-top: 3px; }
.rpl-prog-bar-wrap { height: 4px; background: #1e1e3a; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.rpl-prog-bar-fill { height: 4px; background: #e50914; border-radius: 2px; }

.rpl-prog-item.rpl-focused                  { background: rgba(229,9,20,0.20); border-left-color: #e50914; }
.rpl-prog-item.rpl-focused .rpl-prog-title { color: #fff; font-weight: 700; }
.rpl-prog-item.rpl-focused .rpl-prog-time  { color: #ff4455; }
.rpl-prog-item.rpl-past                     { opacity: 0.45; }
.rpl-prog-item.rpl-live .rpl-prog-time     { color: #22cc66; }
.rpl-prog-item.rpl-live .rpl-prog-bar-fill { background: #22cc66; }

/* ── Infobar ── position:absolute + width:100% ───────────────────────────── */
#rpl-infobar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background: #0c0c22;
  border-top: 2px solid #1c1c3c;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 80px;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: horizontal; -webkit-box-align: center;
  -webkit-align-items: center; align-items: center;
}
.rpl-ib-ch    { -webkit-flex-shrink:0; flex-shrink:0; font-size:26px; font-weight:700; color:#e50914; margin-right:14px; white-space:nowrap; }
.rpl-ib-sep   { -webkit-flex-shrink:0; flex-shrink:0; color:#333355; margin-right:12px; }
.rpl-ib-title { -webkit-flex:1; flex:1; font-size:24px; color:#c0c0e0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpl-ib-hint  { -webkit-flex-shrink:0; flex-shrink:0; font-size:18px; color:#33335a; white-space:nowrap; margin-left:20px; }

/* ── Etats ───────────────────────────────────────────────────────────────── */
.rpl-loading { padding:50px 20px; color:#66668a; font-size:26px; text-align:center; }
.rpl-empty   { padding:50px 20px; color:#44446a; font-size:22px; text-align:center; line-height:1.6; }

/* ── Legacy ──────────────────────────────────────────────────────────────── */
#rpl-cats-view,
#rpl-main-view { display: none; }

/* Styles CATCH-UP (cu-) : déplacés dans css/catchup.css (source unique)
 — source unique, voir catchup.css */

/* ─────────────────────────────────────────────────────────────────────────
   FIX panneaux Réglages : le panneau est un flex colonne en height:100%.
   Sans ceci, un contenu plus haut que le panneau COMPRESSE les enfants
   (flex-shrink:1) au lieu de défiler → superposition (ex. formulaire profil
   par-dessus les boutons). On fige la hauteur des enfants → overflow-y défile.
   ───────────────────────────────────────────────────────────────────────── */
.sett-panel > * { -webkit-flex-shrink: 0; flex-shrink: 0; }