/* ===========================================================================
   RSKTV Player Pro — Styles SECTION CATCH-UP (Replay / Timeshift v2)
   Fichier dédié, URL neuve : immunisé contre le cache webview de la TV qui
   ressert un css/style.css périmé. Contrôleur : js/ui/catchup.js (RSKTV.CatchUp).
   Tizen 4.0+ / Chromium 56 : flexbox préfixé -webkit-, pas de CSS Grid.
   MARQUEUR DE FRAÎCHEUR : cu-chan-item (vérifié par deploy_fix.bat [5b/7]).
   =========================================================================== */

/* La règle globale .content-section.active{display:flex} casserait le layout
   absolu : on force block (specificité #id.active > .content-section.active). */
#section-catchup.active {
  display: block !important;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
#cu-topbar {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 72px;
  background: #0c0c22; border-bottom: 2px solid #1c1c3c;
  overflow: hidden; padding: 0 80px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: horizontal; -webkit-box-align: center;
  -webkit-align-items: center; align-items: center;
}
.cu-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;
}
.cu-tb-context { -webkit-flex-shrink: 0; flex-shrink: 0; font-size: 22px; color: #c0c0e0; white-space: nowrap; }
.cu-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 ─────────────────────────────────────────────── */
#cu-guide {
  position: absolute; top: 74px; left: 0;
  width: 100%; height: calc(100% - 148px);
  overflow: hidden;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.cu-panel {
  position: absolute; top: 0; bottom: 0;
  overflow: hidden; background: #0b0b1c;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
#cu-panel-cats { left: 0; width: 23%; border-right: 2px solid #18183a; }
#cu-panel-chans,
#cu-panel-progs { left: 23%; right: 0; width: auto; border: 0; }

/* Bascule grille de chaînes <-> liste de programmes */
#cu-panel-progs { display: none; }
#cu-guide.cu-view-progs #cu-panel-chans { display: none; }
#cu-guide.cu-view-progs #cu-panel-progs { display: block; }

/* ── En-têtes de panneaux ─────────────────────────────────────────────────── */
.cu-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;
}
.cu-panel-hdr.cu-panel-active { color: #fff; border-bottom-color: #e50914; background: #120820; }
.cu-hdr-sub { font-size: 18px; font-weight: 400; color: #666; margin-left: 8px; }
.cu-panel-hdr.cu-panel-active .cu-hdr-sub { color: #e50914; }
.cu-progs-chan { font-size: 24px; font-weight: 700; color: #fff; }

/* ── Zones scrollables ────────────────────────────────────────────────────── */
.cu-scroll {
  display: block; width: 100%; height: calc(100% - 63px);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.cu-scroll::-webkit-scrollbar { display: none; }
/* Panneau programmes : la barre d'onglets jours (52px) ampute la liste */
#cu-panel-progs .cu-scroll { height: calc(100% - 63px - 52px); }

.cu-hint { padding: 50px 20px; font-size: 24px; color: #33335a; text-align: center; line-height: 1.5; }
.cu-loading { padding: 50px 20px; color: #66668a; font-size: 26px; text-align: center; }
.cu-empty   { padding: 50px 20px; color: #44446a; font-size: 22px; text-align: center; line-height: 1.6; }

/* ── Items groupe (sidebar) ───────────────────────────────────────────────── */
.cu-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;
}
.cu-cat-item.cu-focused             { background: rgba(229,9,20,0.22); border-left-color: #e50914; color: #fff; font-weight: 700; }
.cu-cat-item.cu-selected            { border-left-color: #e50914; color: #e50914; font-weight: 600; }
.cu-cat-item.cu-focused.cu-selected { background: rgba(229,9,20,0.28); color: #ff3344; }

/* ── Grille de chaînes (cartes logo + nom + badge archive) ────────────────── */
#cu-chan-list { display: block; padding: 20px; font-size: 0; }
.cu-chan-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;
}
.cu-chan-logo { display: block; margin: 22px auto 10px auto; width: 92px; height: 64px; object-fit: contain; background: transparent; }
.cu-chan-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; }
.cu-arch-badge { position: absolute; right: 10px; bottom: 10px; background: #e50914; color: #fff; font-size: 18px; font-weight: 700; padding: 2px 10px; border-radius: 8px; }
.cu-chan-item.cu-focused { border-color: #e50914; background: rgba(229,9,20,0.18); -webkit-transform: scale(1.04); transform: scale(1.04); }
.cu-chan-item.cu-focused .cu-chan-name { color: #fff; font-weight: 700; }

/* ── Onglets de jours ─────────────────────────────────────────────────────── */
.cu-day-tabs {
  display: block; width: 100%; height: 52px; padding: 8px 20px;
  white-space: nowrap; overflow-x: auto; overflow-y: hidden; background: #0c0c20;
  border-bottom: 1px solid #1c1c42;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.cu-day-tabs::-webkit-scrollbar { display: none; }
.cu-day-pill {
  display: inline-block; background: #16162a; border: 2px solid #2a2a50;
  color: #888; font-size: 20px; font-weight: 600; padding: 3px 16px;
  border-radius: 18px; cursor: pointer; white-space: nowrap; margin-right: 8px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.cu-day-pill.cu-day-active { background: #e50914; border-color: #e50914; color: #fff; font-weight: 700; }

/* ── Items programme ──────────────────────────────────────────────────────── */
.cu-prog-item {
  display: block; width: 100%; padding: 14px 18px 12px 18px;
  border-bottom: 1px solid #14142c; border-left: 5px solid transparent;
  cursor: pointer; position: relative;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.cu-prog-time  { display: block; font-size: 32px; font-weight: 700; color: #e50914; line-height: 1.1; letter-spacing: 1px; }
.cu-prog-title { display: block; font-size: 26px; font-weight: 500; color: #dcdcf0; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-prog-dur   { display: block; font-size: 20px; color: #55557a; margin-top: 3px; }
.cu-prog-bar   { height: 4px; background: #1e1e3a; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.cu-prog-bar-fill { height: 4px; background: #e50914; border-radius: 2px; }
.cu-prog-flag  { position: absolute; right: 18px; top: 16px; font-size: 18px; color: #55557a; font-style: italic; }
.cu-prog-item.cu-focused                { background: rgba(229,9,20,0.20); border-left-color: #e50914; }
.cu-prog-item.cu-focused .cu-prog-title { color: #fff; font-weight: 700; }
.cu-prog-item.cu-focused .cu-prog-time  { color: #ff4455; }
.cu-prog-item.cu-past                   { opacity: 0.5; }
.cu-prog-item.cu-live .cu-prog-time     { color: #22cc66; }
.cu-prog-item.cu-live .cu-prog-bar-fill { background: #22cc66; }

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