/* ═══════════════════════════════════════════════════════════════════════════
   DIRECT v3 — 05/10/2026 — « la télé est déjà allumée pendant qu'on choisit »
   Chargé EN DERNIER. Tout est préfixé par html.direct-v3 : sans la classe,
   l'écran Direct historique est rendu à l'identique (repli :
   localStorage rstv_direct_v3 = '0', ou DIRECT_V3_DEFAUT = false dans app.js).

   Composition (1920×1080, la section occupe tout l'écran) :
   · la mini-preview AVPlay devient plein écran (#live-video-box = l'écran) ;
   · un voile sombre FIXE (pas un jeton de thème : ce qui est posé sur une
     vidéo reste sombre, cf. v525) assombrit la gauche et le bas ;
   · liste des chaînes à gauche, carte éditoriale à droite ;
   · les groupes sont un tiroir : visibles seulement quand la zone « groups »
     est active (data-zone posé par _setLiveZone + écouteur focusin) ;
   · le guide détaillé (zone « epg ») remplace la carte quand on y entre.

   Règles Tizen tenues : aucune opacity ni transform ajoutés sur le chemin de
   la vidéo (une couche GPU opaque masque le plan AVPlay), pas de gap, pas de
   grid, pas d'ombre floue sur le focus ; un seul aplat rouge = le focus.
   ═══════════════════════════════════════════════════════════════════════════ */

.dv3-carte { display: none; }

html.direct-v3 #section-live .live-tv-layout {
  display: block !important; position: relative;
  width: 1920px; height: 1080px; overflow: visible;
}

/* ── 1. La vidéo, tout l'écran ─────────────────────────────────────────── */
html.direct-v3 #live-preview-panel {
  position: absolute !important; left: 0; top: 0;
  width: 1920px !important; height: 1080px !important;
  z-index: 1; background: transparent !important; overflow: visible !important;
  display: block !important;
}
html.direct-v3 #live-video-box {
  position: absolute !important; left: 0; top: 0;
  width: 1920px !important; height: 1080px !important; min-height: 0 !important;
  border: 0 !important; background: transparent !important;
}
html.direct-v3 #live-video-box .live-video-badges,
html.direct-v3 #live-mini-fallback,
html.direct-v3 #live-mini-poster { display: none !important; }

/* Voile : un seul pseudo-élément, sous la carte (premier enfant peint). */
html.direct-v3 #live-preview-panel:before {
  content: ''; position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  pointer-events: none;
  background:
    -webkit-linear-gradient(left, rgba(7,7,9,0.97) 0%, rgba(7,7,9,0.93) 36%, rgba(7,7,9,0.55) 52%, rgba(7,7,9,0.05) 70%),
    -webkit-linear-gradient(bottom, rgba(7,7,9,0.97) 0%, rgba(7,7,9,0.86) 30%, rgba(7,7,9,0.35) 50%, rgba(7,7,9,0) 62%),
    -webkit-linear-gradient(top, rgba(7,7,9,0.85) 0%, rgba(7,7,9,0) 16%);
  background:
    linear-gradient(90deg, rgba(7,7,9,0.97) 0%, rgba(7,7,9,0.93) 36%, rgba(7,7,9,0.55) 52%, rgba(7,7,9,0.05) 70%),
    linear-gradient(0deg, rgba(7,7,9,0.97) 0%, rgba(7,7,9,0.86) 30%, rgba(7,7,9,0.35) 50%, rgba(7,7,9,0) 62%),
    linear-gradient(180deg, rgba(7,7,9,0.85) 0%, rgba(7,7,9,0) 16%);
}
/* Sans vidéo, l'écran reste noir et profond (pas un fond de thème clair). */
html.direct-v3 body:not(.mini-preview-on) #section-live { background: #070709 !important; }

/* L'ancien bandeau d'infos est remplacé par la carte. */
html.direct-v3 #live-preview-panel .live-info-bar { display: none !important; }

/* Aucune atténuation par opacity sur cet écran (couche GPU sur la vidéo). */
html.direct-v3 .live-tv-layout .live-cat-col,
html.direct-v3 .live-tv-layout .live-ch-col,
html.direct-v3 .live-tv-layout .live-tv-epg { opacity: 1 !important; }

/* ── 2. Liste des chaînes ─────────────────────────────────────────────── */
html.direct-v3 #live-ch-col {
  position: absolute !important; left: 150px; top: 0;
  width: 780px !important; height: 1004px !important;
  padding: 0 !important; z-index: 3;
  background: transparent !important; border: 0 !important;
  display: -webkit-flex !important; display: flex !important;
  -webkit-flex-direction: column; flex-direction: column;
}
html.direct-v3 #live-cat-name {
  -webkit-flex: 0 0 auto; flex: 0 0 auto;
  height: 124px; padding: 44px 16px 0 16px !important;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  font-size: 32px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: #fff !important;
  background: transparent !important; border: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.direct-v3 #live-cat-name .ci { margin-right: 14px; }

/* Une ligne = 100 px visibles + 6 px d'air, portés par des bordures
   transparentes (pas de margin : _liveNavCacheItemH lit offsetHeight). */
html.direct-v3 #live-channel-list .channel-item {
  height: 106px !important; min-height: 0 !important;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  padding: 0 22px 0 4px !important;
  border: 0 !important; border-top: 3px solid transparent !important; border-bottom: 3px solid transparent !important;
  -webkit-background-clip: padding-box; background-clip: padding-box;
  border-radius: 18px !important;
  background-color: transparent !important;
  -webkit-box-shadow: none !important; box-shadow: none !important;
  display: -webkit-flex !important; display: flex !important;
  -webkit-align-items: center; align-items: center;
}
html.direct-v3 #live-channel-list .channel-num {
  -webkit-order: -1; order: -1;
  min-width: 72px !important; max-width: 72px !important;
  padding: 0 0 0 14px !important; text-align: left !important;
  font-size: 22px !important; font-weight: 600 !important;
  color: rgba(255,255,255,0.45) !important;
}
html.direct-v3 #live-channel-list .channel-logo {
  width: 68px !important; height: 68px !important;
  -webkit-flex: 0 0 68px; flex: 0 0 68px;
  -webkit-box-sizing: border-box; box-sizing: border-box; padding: 8px;
  border-radius: 14px !important; border: 0 !important;
  background: rgba(255,255,255,0.09) !important;
  margin-right: 22px; object-fit: contain;
}
html.direct-v3 #live-channel-list .channel-info { -webkit-flex: 1; flex: 1; min-width: 0; }
html.direct-v3 #live-channel-list .channel-name {
  font-size: 28px !important; font-weight: 600 !important; line-height: 36px;
  color: #fff !important; letter-spacing: 0 !important; text-transform: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.direct-v3 #live-channel-list .ch-fav-mark { color: var(--rsk-accent); margin-left: 10px; font-size: 22px; }
html.direct-v3 #live-channel-list .channel-epg {
  font-size: 22px !important; line-height: 30px; margin-top: 2px !important;
  color: rgba(255,255,255,0.66) !important;
}
html.direct-v3 #live-channel-list .ch-epg-now {
  display: block; color: rgba(255,255,255,0.66) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.direct-v3 #live-channel-list .ch-epg-bar {
  display: block !important; width: 100% !important; height: 3px !important;
  margin: 8px 0 0 0 !important; border-radius: 2px;
  background: rgba(255,255,255,0.16) !important;
}
html.direct-v3 #live-channel-list .ch-epg-bar > i {
  display: block; height: 100%; border-radius: 2px;
  background: rgba(255,255,255,0.75) !important;
}
html.direct-v3 #live-channel-list .ch-epg-next { display: none !important; }

/* Étiquettes : pays et qualité, en filet discret (plus d'aplats colorés). */
html.direct-v3 #live-channel-list .ch-pays,
html.direct-v3 #live-channel-list .ch-quality {
  -webkit-order: 5; order: 5; -webkit-flex: 0 0 auto; flex: 0 0 auto;
  font-size: 16px !important; font-weight: 700 !important; letter-spacing: 1px;
  line-height: 20px; padding: 3px 8px !important; margin-left: 10px;
  color: rgba(255,255,255,0.72) !important;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important; border-radius: 6px !important;
}

/* Le focus : le seul aplat rouge de l'écran. */
html.direct-v3 #live-channel-list .channel-item.ch-cursor {
  background-color: var(--rsk-accent) !important;
  -webkit-box-shadow: none !important; box-shadow: none !important;
}
html.direct-v3 #live-channel-list .channel-item.ch-cursor .channel-num,
html.direct-v3 #live-channel-list .channel-item.ch-cursor .channel-epg,
html.direct-v3 #live-channel-list .channel-item.ch-cursor .ch-epg-now,
html.direct-v3 #live-channel-list .channel-item.ch-cursor .ch-fav-mark { color: #fff !important; }
html.direct-v3 #live-channel-list .channel-item.ch-cursor .ch-pays,
html.direct-v3 #live-channel-list .channel-item.ch-cursor .ch-quality { color: #fff !important; border-color: rgba(255,255,255,0.6) !important; }
html.direct-v3 #live-channel-list .channel-item.ch-cursor .ch-epg-bar { background: rgba(255,255,255,0.3) !important; }
html.direct-v3 #live-channel-list .channel-item.ch-cursor .ch-epg-bar > i { background: #fff !important; }
/* Hors de la liste (groupes, guide), le curseur n'est plus qu'un repère neutre. */
html.direct-v3 .live-tv-layout[data-zone="groups"] #live-channel-list .channel-item.ch-cursor,
html.direct-v3 .live-tv-layout[data-zone="epg"] #live-channel-list .channel-item.ch-cursor {
  background-color: rgba(255,255,255,0.10) !important;
}
/* La chaîne en cours de lecture : numéro à l'accent. */
html.direct-v3 #live-channel-list .channel-item.active:not(.ch-cursor) .channel-num { color: var(--rsk-accent) !important; }

/* ── 3. Groupes : un tiroir ───────────────────────────────────────────── */
html.direct-v3 #live-cat-col {
  position: absolute !important; left: -760px; top: 0;
  width: 620px !important; height: 1080px !important; z-index: 5;
  padding: 0 0 76px 150px !important;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  background: #0b0b0f !important;
  border-right: 1px solid rgba(255,255,255,0.08);
}
html.direct-v3 .live-tv-layout[data-zone="groups"] #live-cat-col,
html.direct-v3 .live-tv-layout:not([data-zone]) #live-cat-col { left: 0; }
html.direct-v3 #live-cat-col .live-col-hdr {
  height: 124px; padding: 50px 16px 0 22px !important;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  font-size: 22px !important; letter-spacing: 5px !important; color: rgba(255,255,255,0.48) !important;
  background: transparent !important; border: 0 !important;
}

/* ── 4. La carte éditoriale ───────────────────────────────────────────── */
html.direct-v3 .dv3-carte {
  display: block; position: absolute;
  left: 1010px; right: 96px; bottom: 150px;
  color: #fff;
}
html.direct-v3 .live-tv-layout[data-zone="epg"] .dv3-carte { display: none; }
.dv3-kick {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.dv3-pill {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  background: var(--rsk-accent); color: #fff; border-radius: 8px;
  padding: 6px 14px 6px 12px;
  font-size: 18px; font-weight: 800; letter-spacing: 3px;
}
.dv3-pill i { width: 10px; height: 10px; border-radius: 50%; background: #fff; margin-right: 10px; display: block; }
.dv3-ch {
  font-size: 24px; font-weight: 600; color: #fff; margin-left: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dv3-titre {
  font-size: 64px; font-weight: 800; line-height: 1.08; letter-spacing: -1px;
  margin-top: 16px; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dv3-meta { font-size: 24px; color: rgba(255,255,255,0.72); margin-top: 16px; }
.dv3-meta b { color: #fff; font-weight: 600; }
.dv3-sep { margin: 0 14px; }
.dv3-pbar { height: 6px; width: 560px; border-radius: 3px; background: rgba(255,255,255,0.22); margin-top: 20px; }
.dv3-pbar b { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--rsk-accent); }
.dv3-desc {
  font-size: 24px; line-height: 1.45; color: rgba(255,255,255,0.74);
  margin-top: 20px; max-width: 780px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dv3-desc:empty { display: none; }
.dv3-suite { display: -webkit-flex; display: flex; margin-top: 32px; }
.dv3-suite:empty { display: none; }
.dv3-sc {
  width: 250px; margin-right: 16px; padding: 16px 20px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  border-radius: 14px; background: rgba(20,20,26,0.78);
  border: 1px solid rgba(255,255,255,0.10);
}
.dv3-sc-h { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.5); }
.dv3-sc-t { font-size: 22px; font-weight: 600; margin-top: 6px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sans programme connu : le nom de la chaîne tient le rôle du titre. */
.dv3-carte.dv3-sans-prog .dv3-meta,
.dv3-carte.dv3-sans-prog .dv3-pbar { display: none; }

/* ── 5. Guide détaillé (zone « epg ») : panneau à droite ─────────────── */
html.direct-v3 #live-preview-panel .live-tv-epg {
  position: absolute !important; left: -4000px; top: 124px;
  width: 814px; height: 820px; z-index: 2;
  background: rgba(12,12,16,0.94) !important; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
}
html.direct-v3 .live-tv-layout[data-zone="epg"] #live-preview-panel .live-tv-epg { left: 1010px; }

/* ── 6. Aide des touches : discrète, en bas à droite ─────────────────── */
html.direct-v3 #live-actbar {
  background: transparent !important; border: 0 !important; z-index: 4;
  -webkit-justify-content: flex-end; justify-content: flex-end;
  padding-right: 66px; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html.direct-v3 #live-actbar .lab-item { color: rgba(255,255,255,0.72); font-size: 22px; }

/* ── 7. Retouches après revue au banc ─────────────────────────────────── */
/* Groupes ouverts : le tiroir COUVRE la liste (plus de mots coupés dessous).
   ⚠️ Jamais visibility/display sur la liste : un élément masqué ne peut pas
   recevoir le focus, et le retour du tiroir vers la liste échouait en silence
   (constaté sur TV : focus resté dans les groupes, liste réaffichée). */
html.direct-v3 .live-tv-layout[data-zone="groups"] #live-cat-col,
html.direct-v3 .live-tv-layout:not([data-zone]) #live-cat-col { width: 980px !important; }
/* Catégories du tiroir : lisibles, sans déborder du tiroir. */
html.direct-v3 #live-cat-list .cat-item {
  font-size: 26px !important; line-height: 1.25 !important;
  margin: 0 24px 4px 12px !important;
  padding-top: 18px !important; padding-bottom: 18px !important;
}
/* Chaîne en aperçu (la vidéo de fond) : un simple pictogramme, pas un 2e rouge. */
html.direct-v3 #live-channel-list .ch-preview-badge {
  -webkit-order: 4; order: 4; font-size: 0 !important; line-height: 0;
  background: transparent !important; border: 0 !important; padding: 0 !important; margin-left: 10px;
  color: rgba(255,255,255,0.8);
}
html.direct-v3 #live-channel-list .ch-preview-badge .ci { width: 22px; height: 22px; }
html.direct-v3 #live-channel-list .channel-item.ch-in-preview { -webkit-box-shadow: none !important; box-shadow: none !important; }
/* Fondu en bas de liste : la dernière ligne ne s'arrête plus net. */
html.direct-v3 #live-ch-col:after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
  background: -webkit-linear-gradient(bottom, rgba(7,7,9,1), rgba(7,7,9,0));
  background: linear-gradient(0deg, rgba(7,7,9,1), rgba(7,7,9,0));
}
html.direct-v3 #live-cat-list {
  width: 470px !important; max-width: 470px !important;
  padding-right: 28px !important; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html.direct-v3 #live-cat-list .cat-item { width: auto !important; }

/* ── Correctif GLOBAL (pas seulement v3) ──────────────────────────────────
   La règle qui masquait l'ancien guide plein écran a été avalée par un
   commentaire non fermé de style.css (~l.8558 « Fix #epg-full »). L'élément
   restait affiché SOUS l'accueil : invisible tant que tout était opaque, il
   apparaît en fantôme dès que la vidéo passe en fond (body.mini-preview-on). */
#epg-full.hidden { display: none !important; }