/* ============================================================================
   RSKTV Player Pro — UI v2 (sidebar verticale) — Tranche 1
   TOUT est gated par `html.ui-v2`. Flag OFF → aucune règle ne s'applique →
   l'app reste strictement identique à l'actuelle.
   Tizen 4 / Chromium 56 : flexbox préfixé, pas de CSS Grid.
   ============================================================================ */

/* Masquée par défaut (et si le flag est OFF). */
#sidebar-v2 { display: none; }

html.ui-v2 { --sb-w: 300px; }

/* Sous UI v2 : on masque le top-nav et on montre la sidebar. */
html.ui-v2 #topnav { display: none !important; }

/* ── Sidebar — visible UNIQUEMENT sur le HUB (classe v2-hub) ─────────────── */
html.ui-v2.v2-hub #sidebar-v2 {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--sb-w);
  background: var(--rsk-bg);
  border-right: 1px solid var(--rsk-border);
  padding: var(--tv-safe-px) 20px 28px 40px;   /* marge de sécurité TV en haut/gauche */
  z-index: 60;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  overflow: hidden;
}

/* Marque */
html.ui-v2 .sb-brand {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  margin-bottom: var(--rsk-gap-lg);
}
html.ui-v2 .sb-logo { margin-right: 12px; }
html.ui-v2 .sb-brand-text { display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; }
html.ui-v2 .sb-brand-name { font-size: 30px; font-weight: 800; color: var(--rsk-text); letter-spacing: 1px; line-height: 1; }
html.ui-v2 .sb-brand-accent { color: var(--rsk-accent); }
html.ui-v2 .sb-brand-sub { font-size: 12px; font-weight: 600; color: var(--rsk-text-mute); letter-spacing: 3px; margin-top: 4px; }

/* Horloge + date */
html.ui-v2 .sb-clockbox { margin-bottom: var(--rsk-gap); }
html.ui-v2 .sb-clock { font-size: var(--rsk-fs-xl); font-weight: 700; color: var(--rsk-text); line-height: 1; }
html.ui-v2 .sb-date  { font-size: var(--rsk-fs-xs); color: var(--rsk-text-dim); margin-top: 6px; text-transform: capitalize; }

/* Sélecteur de playlist */
html.ui-v2 .sb-playlistbox { margin-bottom: var(--rsk-gap-lg); }
html.ui-v2 .sb-playlist-label { font-size: 12px; font-weight: 700; color: var(--rsk-text-mute); letter-spacing: 2px; margin-bottom: 6px; }
html.ui-v2 .sb-playlist {
  font-size: var(--rsk-fs-sm); font-weight: 600; color: var(--rsk-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Items de navigation ────────────────────────────────────────────────── */
html.ui-v2 .sb-nav {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
}
html.ui-v2 .sb-item {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  height: 64px; padding: 0 18px; margin-bottom: 6px;
  border-radius: var(--rsk-radius);
  border: 2px solid transparent;
  color: var(--rsk-text-dim);
  font-size: var(--rsk-fs-md); font-weight: 600;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  -webkit-transition: background .12s, color .12s, -webkit-transform .12s;
  transition: background .12s, color .12s, transform .12s;
}
html.ui-v2 .sb-ico { 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;
  width: 30px; height: 30px; margin-right: 14px; color: var(--rsk-text-mute); }
html.ui-v2 .sb-ico svg { display: block; width: 22px; height: 22px; }
html.ui-v2 .sb-txt { overflow: hidden; text-overflow: ellipsis; }

/* Section active (où l'on se trouve) — texte rouge seul, AUCUN fond.
   Le SEUL élément à fond rouge est le focus (.is-focused) : un seul rouge à l'écran. */
html.ui-v2 .sb-item.sb-active {
  background: transparent;
  color: var(--rsk-accent);
}
html.ui-v2 .sb-item.sb-active .sb-txt { font-weight: 700; }
html.ui-v2 .sb-item.sb-active .sb-ico { color: var(--rsk-accent); }

/* Focus (curseur télécommande) — très contrasté, état de focus TV */
html.ui-v2 .sb-item.is-focused,
html.ui-v2 .sb-item:focus {
  background: var(--rsk-accent);
  border-color: var(--rsk-accent);
  color: #fff;
  outline: none;
  -webkit-transform: scale(var(--rsk-focus-scale));
  transform: scale(var(--rsk-focus-scale));
}
html.ui-v2 .sb-item.is-focused .sb-ico,
html.ui-v2 .sb-item:focus .sb-ico { color: #fff; }

/* ── Décalage du contenu : la zone principale glisse à droite de la sidebar ─ */
/* .home-main devient le conteneur positionné des sections (qui sont en
   position:absolute left:0 width:100% → elles remplissent .home-main décalé). */
/* Décalage du contenu UNIQUEMENT sur le hub ; en catégorie .home-main reste plein écran. */
html.ui-v2.v2-hub .home-main {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;        /* plein écran ; le décalage se fait en TRANSFORM (GPU, zéro reflow) */
  overflow: hidden;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  -webkit-transform: translateX(var(--sb-w)); transform: translateX(var(--sb-w));
  -webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease;
  will-change: transform;
}

/* ── Sidebar auto-masquée : quand le focus passe dans le contenu (classe sb-hidden
   posée par _syncHubSidebar), la sidebar glisse à gauche et le contenu prend toute
   la largeur. Tout en TRANSFORM → animation GPU fluide, pas de recalcul de layout. */
html.ui-v2.v2-hub #sidebar-v2 {
  -webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease;
  will-change: transform;
}
html.ui-v2.v2-hub.sb-hidden #sidebar-v2 {
  -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
html.ui-v2.v2-hub.sb-hidden .home-main {
  -webkit-transform: translateX(0); transform: translateX(0);
}

/* ── Dashboard (Tranche 3) : atterrissage premium + marge overscan + scroll ── */
html.ui-v2 #section-dashboard.active {
  display: block;
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  overflow-y: auto; overflow-x: hidden;
  /* Overscan complet : marge de sûreté TV sur les 4 côtés pour que la dernière
     tuile (droite) et les affiches (bas) ne soient jamais rognées par la dalle. */
  /* top / right / bottom / left — +haut (titre non coupé) +gauche (badge non mordu par la sidebar) */
  padding: calc(var(--tv-safe-px) + 20px) var(--tv-safe-px) calc(var(--tv-safe-px) + 12px) calc(var(--tv-safe-px) + 12px);
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
html.ui-v2 #section-dashboard.active::-webkit-scrollbar { display: none; }
/* Titres de rangées harmonisés avec les tokens */
html.ui-v2 #section-dashboard .home-shelf-title { color: var(--rsk-text); letter-spacing: 1px; }

/* ===========================================================================
   HUB UI v2 (#dash-v2) — hero + reprendre + accès rapide + pour vous
   Sous ui-v2 : on masque l'ancien dashboard (util-bar + étagères) et on affiche
   le hub premium. Peuplé par RSKTV.DashV2 (js/ui/dashboard.js).
   =========================================================================== */
#dash-v2 { display: none; }
html.ui-v2 #section-dashboard .home-util-bar,
html.ui-v2 #section-dashboard .home-shelf { display: none !important; }
html.ui-v2 #dash-v2 { display: block; }

html.ui-v2 #dash-v2 .dv-sec { margin-bottom: 34px; }
html.ui-v2 #dash-v2 .dv-st { display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 0 0 14px; }
html.ui-v2 #dash-v2 .dv-st i { width: 4px; height: 22px; background: var(--rsk-accent); border-radius: 2px; margin-right: 12px; }
html.ui-v2 #dash-v2 .dv-st span { font-size: var(--rsk-fs-md); font-weight: 700; letter-spacing: 1.5px; color: var(--rsk-text); }

/* ── Hero « En ce moment » ─────────────────────────────────────────────────── */
html.ui-v2 #dash-v2 .dv-hero {
  display: -webkit-box; display: -webkit-flex; display: flex;
  height: 300px; border-radius: var(--rsk-radius); overflow: hidden;
  border: 2px solid transparent; background: var(--rsk-surface);
}
html.ui-v2 #dash-v2 .dv-hero.dv-focused,
html.ui-v2 #dash-v2 .dv-hero.is-focused { border-color: var(--rsk-accent); -webkit-box-shadow: inset 0 0 0 3px var(--rsk-accent); box-shadow: inset 0 0 0 3px var(--rsk-accent); }
html.ui-v2 #dash-v2 .dv-hv { position: relative; width: 540px; -webkit-flex: 0 0 540px; flex: 0 0 540px; background: var(--rsk-surface-2); overflow: hidden; }
/* Carte sombre premium (plus le bleu vif saturé). */
html.ui-v2 #dash-v2 .dv-hv-bg { position: absolute; inset: 0;
  background: -webkit-linear-gradient(315deg, #1b2436 0%, #0b0f17 100%);
  background: linear-gradient(135deg, #1b2436 0%, #0b0f17 100%); }
html.ui-v2 #dash-v2 .dv-live { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--rsk-accent); color: #fff; font-size: 18px; font-weight: 700; padding: 4px 14px; border-radius: 6px; letter-spacing: .5px; white-space: nowrap; }
html.ui-v2 #dash-v2 .dv-hv-ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px; display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center; font-size: 26px; font-weight: 700; color: #fff;
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); }
html.ui-v2 #dash-v2 .dv-hv-ov span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 #dash-v2 .dv-hv-ov img { width: 56px; height: 56px; object-fit: contain; margin-right: 14px; border-radius: 8px; background: rgba(0,0,0,.3); }
html.ui-v2 #dash-v2 .dv-hi { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; padding: 30px 36px; display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
html.ui-v2 #dash-v2 .dv-hn { font-size: var(--rsk-fs-md); font-weight: 700; color: var(--rsk-text); }
html.ui-v2 #dash-v2 .dv-hsub { font-size: var(--rsk-fs-xs); color: var(--rsk-text-mute); margin-bottom: 14px; }
html.ui-v2 #dash-v2 .dv-hp { font-size: 42px; font-weight: 700; color: var(--rsk-text); margin-bottom: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 #dash-v2 .dv-bar { height: 7px; background: var(--rsk-surface-2); border-radius: 4px; overflow: hidden; }
html.ui-v2 #dash-v2 .dv-bar i { display: block; height: 100%; background: var(--rsk-accent); border-radius: 4px; }
html.ui-v2 #dash-v2 .dv-mt { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; font-size: var(--rsk-fs-xs); color: var(--rsk-text-mute); margin: 9px 0 20px; }
html.ui-v2 #dash-v2 .dv-cta { -webkit-align-self: flex-start; align-self: flex-start; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  background: var(--rsk-surface-2); color: var(--rsk-text); font-size: var(--rsk-fs-sm); font-weight: 700; padding: 12px 28px; border-radius: 10px; border: 2px solid transparent; }
html.ui-v2 #dash-v2 .dv-cta .dv-cta-ic { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center; color: var(--rsk-accent); margin-right: 10px; }
html.ui-v2 #dash-v2 .dv-cta .dv-cta-ic svg { display: block; }
html.ui-v2 #dash-v2 .dv-hero.dv-focused .dv-cta,
html.ui-v2 #dash-v2 .dv-hero.is-focused .dv-cta { background: var(--rsk-accent); color: #fff; }
html.ui-v2 #dash-v2 .dv-hero.dv-focused .dv-cta .dv-cta-ic,
html.ui-v2 #dash-v2 .dv-hero.is-focused .dv-cta .dv-cta-ic { color: #fff; }

/* ── Mini-preview live du hero : transparence du chemin DOM pour laisser passer
   le plan vidéo matériel AVPlay. Activé par body.hub-preview-on (géré en JS).
   Isolé du preview de l'écran Live (classe distincte). ──────────────────────── */
body.hub-preview-on #app-bg,
body.hub-preview-on #app-ui,
body.hub-preview-on .home-main,
body.hub-preview-on #section-dashboard,
body.hub-preview-on #dash-v2,
body.hub-preview-on #dash-v2 .dv-hero,
body.hub-preview-on #dash-v2 .dv-hv { background: transparent !important; }
body.hub-preview-on #section-dashboard { overflow: visible !important; }
body.hub-preview-on #dash-v2 .dv-hero,
body.hub-preview-on #dash-v2 .dv-hv { overflow: visible !important; border-radius: 0 !important;
  -webkit-transform: none !important; transform: none !important; }
body.hub-preview-on #dash-v2 .dv-hv-bg,
body.hub-preview-on #dash-v2 .dv-hv-ov,
body.hub-preview-on #dash-v2 .dv-live { display: none !important; }
body.hub-preview-on #dash-v2 .dv-hi { background: var(--rsk-surface) !important; }

/* ── Rangées de contenu (Reprendre / Films / Séries / Pour vous) ───────────────
   Défilent gauche/droite façon Netflix : le focus qui sort à droite fait défiler
   la rangée (SN → scrollIntoView). La barre « Accès rapide » reste fixe (flex). */
html.ui-v2 #dash-v2 .dv-row { display: block; white-space: nowrap;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
html.ui-v2 #dash-v2 .dv-row::-webkit-scrollbar { display: none; }
/* Transitions de focus douces (transform/GPU) — le focus « glisse », sensation premium.
   Court (.14s) pour rester réactif au D-pad sur webview Tizen. */
html.ui-v2 #dash-v2 .dv-card,
html.ui-v2 #dash-v2 .dv-tile,
html.ui-v2 #dash-v2 .dv-poster,
html.ui-v2 #dash-v2 .dv-hero {
  -webkit-transition: -webkit-transform .14s ease, border-color .14s ease;
  transition: transform .14s ease, border-color .14s ease;
}
html.ui-v2 #dash-v2 .dv-card {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; vertical-align: top;
  width: 430px; height: 150px; margin-right: 20px; padding: 12px;
  background: var(--rsk-surface); border: 2px solid var(--rsk-border); border-radius: var(--rsk-radius);
  -webkit-box-sizing: border-box; box-sizing: border-box; white-space: normal;
}
html.ui-v2 #dash-v2 .dv-card.dv-focused,
html.ui-v2 #dash-v2 .dv-card.is-focused { border-color: var(--rsk-accent); -webkit-transform: scale(1.03); transform: scale(1.03); }
html.ui-v2 #dash-v2 .dv-card-th { width: 220px; -webkit-flex: 0 0 220px; flex: 0 0 220px; height: 100%; border-radius: 10px; background: var(--rsk-surface-2); position: relative; overflow: hidden; }
html.ui-v2 #dash-v2 .dv-card-th img { width: 100%; height: 100%; object-fit: cover; }
html.ui-v2 #dash-v2 .dv-card-pb { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.4); }
html.ui-v2 #dash-v2 .dv-card-pb i { display: block; height: 100%; background: var(--rsk-accent); }
/* Bouton lecture en surimpression sur la vignette (style maquette). */
html.ui-v2 #dash-v2 .dv-card-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px;
  margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(0,0,0,.55);
  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; color: #fff; }
html.ui-v2 #dash-v2 .dv-card-play svg { display: block; margin-left: 2px; }
html.ui-v2 #dash-v2 .dv-card.dv-focused .dv-card-play,
html.ui-v2 #dash-v2 .dv-card.is-focused .dv-card-play { background: var(--rsk-accent); }
html.ui-v2 #dash-v2 .dv-card-i { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; padding: 8px 6px 8px 16px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
html.ui-v2 #dash-v2 .dv-card-t { font-size: var(--rsk-fs-sm); font-weight: 700; color: var(--rsk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 #dash-v2 .dv-card-s { font-size: var(--rsk-fs-xs); color: var(--rsk-text-mute); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Tuiles accès rapide ──────────────────────────────────────────────────── */
/* Rangée unique : les 5 tuiles se partagent la largeur et tiennent sur UNE page
   (navigation haut/bas uniquement, pas de scroll horizontal). */
html.ui-v2 #dash-v2 .dv-tiles { display: -webkit-box; display: -webkit-flex; display: flex; }
html.ui-v2 #dash-v2 .dv-tile { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; margin-right: 16px; height: 130px;
  background: var(--rsk-surface); border: 2px solid var(--rsk-border); border-radius: var(--rsk-radius); padding: 18px 18px;
  -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; }
html.ui-v2 #dash-v2 .dv-tile:last-child { margin-right: 0; }
html.ui-v2 #dash-v2 .dv-tile b,
html.ui-v2 #dash-v2 .dv-tile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Couleur par catégorie (au repos) : Direct=rouge, Catch-up=violet, Films=bleu,
   Séries=teal. Le focus reprend la main en aplat rouge plein (un seul rouge actif). */
html.ui-v2 #dash-v2 .dv-tile[data-screen="live"]    { background: rgba(229,9,20,.12);   border-color: rgba(229,9,20,.5); }
html.ui-v2 #dash-v2 .dv-tile[data-screen="live"]    .dv-tic { color: #ff4d52; }
html.ui-v2 #dash-v2 .dv-tile[data-screen="catchup"] { background: rgba(139,99,224,.14);  border-color: rgba(139,99,224,.5); }
html.ui-v2 #dash-v2 .dv-tile[data-screen="catchup"] .dv-tic { color: #a98bff; }
html.ui-v2 #dash-v2 .dv-tile[data-screen="vod"]     { background: rgba(40,110,200,.14);  border-color: rgba(60,130,210,.5); }
html.ui-v2 #dash-v2 .dv-tile[data-screen="vod"]     .dv-tic { color: #5ea0e6; }
html.ui-v2 #dash-v2 .dv-tile[data-screen="series"]  { background: rgba(20,160,120,.14);  border-color: rgba(30,180,140,.5); }
html.ui-v2 #dash-v2 .dv-tile[data-screen="series"]  .dv-tic { color: #2fd6a6; }
html.ui-v2 #dash-v2 .dv-tile[data-screen="radio"]   { background: rgba(230,160,40,.13);  border-color: rgba(230,160,40,.5); }
html.ui-v2 #dash-v2 .dv-tile[data-screen="radio"]   .dv-tic { color: #e6a637; }
html.ui-v2 #dash-v2 .dv-tile .dv-tic { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center; width: 30px; height: 30px; color: var(--rsk-accent); }
html.ui-v2 #dash-v2 .dv-tile .dv-tic svg { display: block; width: 30px; height: 30px; }
html.ui-v2 #dash-v2 .dv-tile b { display: block; font-size: var(--rsk-fs-sm); font-weight: 700; color: var(--rsk-text); margin-top: 12px; letter-spacing: .5px; }
html.ui-v2 #dash-v2 .dv-tile small { display: block; font-size: var(--rsk-fs-xs); color: var(--rsk-text-mute); margin-top: 4px; }
html.ui-v2 #dash-v2 .dv-tile.dv-focused,
html.ui-v2 #dash-v2 .dv-tile.is-focused { border-color: var(--rsk-accent); background: var(--rsk-accent); -webkit-transform: scale(1.03); transform: scale(1.03); }
html.ui-v2 #dash-v2 .dv-tile.dv-focused b, html.ui-v2 #dash-v2 .dv-tile.dv-focused small, html.ui-v2 #dash-v2 .dv-tile.dv-focused .dv-tic,
html.ui-v2 #dash-v2 .dv-tile.is-focused b, html.ui-v2 #dash-v2 .dv-tile.is-focused small, html.ui-v2 #dash-v2 .dv-tile.is-focused .dv-tic { color: #fff; }

/* ── Affiches « Pour vous » ───────────────────────────────────────────────── */
html.ui-v2 #dash-v2 .dv-posters .dv-poster {
  display: -webkit-inline-box; display: inline-block; vertical-align: top;
  width: 200px; height: 300px; margin-right: 18px; border-radius: var(--rsk-radius);
  background: var(--rsk-surface-2); border: 2px solid var(--rsk-border); position: relative; overflow: hidden;
}
html.ui-v2 #dash-v2 .dv-posters .dv-poster img { width: 100%; height: 100%; object-fit: cover; }
html.ui-v2 #dash-v2 .dv-posters .dv-poster .dv-pl { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 10px; font-size: var(--rsk-fs-xs); font-weight: 700; color: #fff; background: rgba(0,0,0,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 #dash-v2 .dv-posters .dv-poster.is-focused { border-color: var(--rsk-accent); -webkit-transform: scale(1.05); transform: scale(1.05); }

/* ── Skeleton shimmer : placeholder animé pendant le lazy-load. Retiré à l'onload
   de l'image (classe .dv-loaded posée en JS) → l'affiche apparaît en fondu.
   Onde en translateX = GPU. Pair parfait avec le lazy-load. ─────────────────── */
@-webkit-keyframes dv-shine { 0%{-webkit-transform:translateX(-130%)} 100%{-webkit-transform:translateX(240%)} }
@keyframes dv-shine         { 0%{transform:translateX(-130%)}          100%{transform:translateX(240%)} }
html.ui-v2 #dash-v2 .dv-posters .dv-poster::after,
html.ui-v2 #dash-v2 .dv-card-th::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none; z-index: 1;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0));
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0));
  -webkit-transform: translateX(-130%); transform: translateX(-130%);
  -webkit-animation: dv-shine 1.5s ease-in-out infinite; animation: dv-shine 1.5s ease-in-out infinite;
}
html.ui-v2 #dash-v2 .dv-posters .dv-poster.dv-loaded::after,
html.ui-v2 #dash-v2 .dv-card.dv-loaded .dv-card-th::after { display: none; }
html.ui-v2 #dash-v2 .dv-posters .dv-poster img,
html.ui-v2 #dash-v2 .dv-card-th img { opacity: 0; -webkit-transition: opacity .35s ease; transition: opacity .35s ease; }
html.ui-v2 #dash-v2 .dv-posters .dv-poster.dv-loaded img,
html.ui-v2 #dash-v2 .dv-card.dv-loaded .dv-card-th img { opacity: 1; }

html.ui-v2 #dash-v2 .dv-empty { padding: 30px; color: var(--rsk-text-mute); font-size: var(--rsk-fs-sm); }

/* L'état de focus est porté par SN (.is-focused) : anneau accent + scale.
   Pas d'atténuation de zone — le focus ring suffit et SN garde l'état cohérent. */

/* ── Recherche : bandeau compteurs + historique (v229) ─────────────────── */
.search-count-bar {
  width: 100%; padding: 10px 16px; margin-bottom: 12px;
  font-size: 17px; color: #9fb0c8;
  background: rgba(255,255,255,0.04); border-radius: 8px;
}
.search-count-bar b { color: #fff; }
.search-hist-chip {
  display: inline-block; padding: 12px 22px; margin: 0 12px 12px 0;
  font-size: 17px; color: #c9d4e3;
  background: #161d29; border: 1px solid #232d3c; border-radius: 22px;
}
.search-hist-chip:focus {
  background: #e50914; color: #fff; border-color: #ff5560; outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCUEIL+ : ACTUALITÉS / MATCHS / CINÉMA (bas du hub v2) — cartes focalisables
   ═══════════════════════════════════════════════════════════════════════════ */
/* Surlignage focus : le JS pose .dv-focused ; on couvre aussi .is-focused/:focus */
html.ui-v2 #dash-v2 .dv-poster.dv-focused { border-color: var(--rsk-accent); -webkit-transform: scale(1.05); transform: scale(1.05); }

/* ── Actualités ── */
html.ui-v2 #dash-v2 .dv-news-row { display: block; white-space: nowrap; overflow: hidden; }
html.ui-v2 #dash-v2 .dv-news {
  display: inline-block; vertical-align: top; white-space: normal;
  width: 300px; margin-right: 18px;
  background: var(--rsk-surface); border: 2px solid transparent;
  border-radius: var(--rsk-radius); overflow: hidden;
}
html.ui-v2 #dash-v2 .dv-news-th { height: 152px; background: var(--rsk-surface-2); overflow: hidden; }
html.ui-v2 #dash-v2 .dv-news-th img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
html.ui-v2 #dash-v2 .dv-news-i { padding: 13px 15px 17px; }
html.ui-v2 #dash-v2 .dv-news-src { color: var(--rsk-accent); font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
html.ui-v2 #dash-v2 .dv-news-t {
  color: var(--rsk-text); font-size: 18px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 72px;
}
html.ui-v2 #dash-v2 .dv-news.dv-focused,
html.ui-v2 #dash-v2 .dv-news.is-focused,
html.ui-v2 #dash-v2 .dv-news:focus { border-color: var(--rsk-accent); }

/* ── Matchs ── */
html.ui-v2 #dash-v2 .dv-match-row { display: block; white-space: nowrap; overflow: hidden; }
html.ui-v2 #dash-v2 .dv-match {
  display: inline-block; vertical-align: top; white-space: normal;
  width: 300px; margin-right: 18px; padding: 16px 18px;
  background: var(--rsk-surface); border: 2px solid transparent; border-radius: var(--rsk-radius);
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
html.ui-v2 #dash-v2 .dv-mt-hdr { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; margin-bottom: 14px; }
html.ui-v2 #dash-v2 .dv-mt-lg { color: var(--rsk-text-mute); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 #dash-v2 .dv-mt-time { color: var(--rsk-text); font-size: 15px; font-weight: 700; }
html.ui-v2 #dash-v2 .dv-mt-live { color: var(--rsk-accent); font-size: 14px; font-weight: 800; }
html.ui-v2 #dash-v2 .dv-mt-ft { color: var(--rsk-text-mute); font-size: 13px; font-weight: 700; }
html.ui-v2 #dash-v2 .dv-mt-side { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; padding: 7px 0; }
html.ui-v2 #dash-v2 .dv-mt-team { color: var(--rsk-text); font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 #dash-v2 .dv-mt-sc { color: var(--rsk-text); font-size: 20px; font-weight: 800; margin-left: 10px; }
html.ui-v2 #dash-v2 .dv-match.dv-focused,
html.ui-v2 #dash-v2 .dv-match.is-focused,
html.ui-v2 #dash-v2 .dv-match:focus { border-color: var(--rsk-accent); }
html.ui-v2 #dash-v2 .dv-mt-on { margin-top: 10px; color: var(--rsk-accent); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Cinéma : réutilise .dv-posters .dv-poster + badge note ── */
html.ui-v2 #dash-v2 .dv-poster.dv-cine .dv-cine-rt {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(0,0,0,.78); color: #ffd34d; font-size: 13px; font-weight: 800;
  padding: 3px 8px; border-radius: 6px;
}

/* ── Météo (en-tête "EN CE MOMENT", à droite) ── */
html.ui-v2 #dash-v2 .dv-weather {
  margin-left: auto;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  font-size: 18px; font-weight: 700; color: var(--rsk-text);
}
html.ui-v2 #dash-v2 .dv-weather .dv-wi { font-size: 24px; margin-right: 8px; }
html.ui-v2 #dash-v2 .dv-weather .dv-wc { color: var(--rsk-text-mute); font-weight: 600; margin-left: 8px; }

/* ── Météo : ligne 1 (actuel + 7 jours) ── */
html.ui-v2 #dash-v2 .dv-weather-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: stretch; -webkit-align-items: stretch; align-items: stretch; }
html.ui-v2 #dash-v2 .dv-wx-now {
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-flex: none; flex: none; padding: 12px 28px 12px 0; margin-right: 26px;
  border-right: 1px solid rgba(255,255,255,.10);
}
html.ui-v2 #dash-v2 .dv-wx-ic { font-size: 56px; margin-right: 18px; line-height: 1; }
html.ui-v2 #dash-v2 .dv-wx-tp { font-size: 54px; font-weight: 800; color: var(--rsk-text); margin-right: 20px; line-height: 1; }
html.ui-v2 #dash-v2 .dv-wx-meta { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
html.ui-v2 #dash-v2 .dv-wx-meta b { font-size: 22px; color: var(--rsk-text); font-weight: 700; }
html.ui-v2 #dash-v2 .dv-wx-meta span { font-size: 16px; color: var(--rsk-text-mute); margin-top: 2px; }
html.ui-v2 #dash-v2 .dv-wx-days { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
html.ui-v2 #dash-v2 .dv-wx-day { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; text-align: center; padding: 6px 4px; }
html.ui-v2 #dash-v2 .dv-wx-dow { font-size: 15px; font-weight: 700; color: var(--rsk-text-mute); text-transform: uppercase; margin-bottom: 6px; }
html.ui-v2 #dash-v2 .dv-wx-di { font-size: 30px; margin-bottom: 6px; line-height: 1; }
html.ui-v2 #dash-v2 .dv-wx-mm { font-size: 16px; color: var(--rsk-text); }
html.ui-v2 #dash-v2 .dv-wx-mm b { font-weight: 800; }

/* v308 : météo en haut du hub (défile normalement — le sticky créait des
   superpositions avec les matchs au scrollIntoView sur Tizen). */
html.ui-v2 #dash-v2 #dv-weather-sec {
  background: #0C0C18;
  margin-bottom: 18px; padding-bottom: 10px;
}
/* Zone météo + accès rapide groupées en haut, SANS sticky (stabilité Tizen). */
html.ui-v2 #dash-v2 .dv-frozen {
  background: #0C0C18; margin-bottom: 18px; padding-bottom: 8px;
}
html.ui-v2 #dash-v2 .dv-frozen #dv-weather-sec { position: static; z-index: auto; margin-bottom: 14px; padding-bottom: 0; }
html.ui-v2 #dash-v2 .dv-frozen #dv-quick-sec { margin-bottom: 0; }