/* ============================================================================ RSKTV Player Pro — lot E « design » (05/10/2026) Harmonise les écrans anciens sur le système des Réglages v3 : - UN SEUL aplat rouge à l'écran = le focus. La catégorie ouverte se dit par la teinte du texte et un trait d'accent, jamais par un fond rouge plein ; - plus de blocs gris clair dans un thème sombre ; - contrastes AA sur les textes secondaires ; - jetons de thème uniquement (les 7 thèmes, dont le clair). Chargé EN DERNIER : fait autorité. Ni scale() ni ombre floue (perf-nav). ========================================================================== */ /* ── 1. Colonnes de catégories (Direct, Films, Séries) ────────────────── Sélecteurs d'IDENTIFIANT : une règle historique en (0,6,0) !important repeignait « Rechercher » en gris clair dès qu'il était la catégorie ouverte. */ #vod-cat-list .cat-item, #series-cat-list .cat-item, #live-cat-list .cat-item { background: transparent !important; color: var(--rsk-text-dim) !important; border: 0 !important; border-radius: 14px !important; -webkit-box-shadow: none !important; box-shadow: none !important; font-weight: 600 !important; white-space: normal !important; line-height: 1.25 !important; margin: 0 12px 4px 12px !important; padding-left: 22px !important; padding-right: 18px !important; position: relative; } /* Raccourcis de l'app (Rechercher, Favoris, Continuer, Récents) : séparés de la playlist par une surface un peu plus claire — plus de bloc gris clair. */ #vod-cat-list .cat-item.cat-search-group, #vod-cat-list .cat-item.cat-fav-group, #vod-cat-list .cat-item.cat-cw-group, #vod-cat-list .cat-item.cat-recent-group, #series-cat-list .cat-item.cat-search-group, #series-cat-list .cat-item.cat-fav-group, #series-cat-list .cat-item.cat-cw-group, #series-cat-list .cat-item.cat-recent-group, #live-cat-list .cat-item.cat-search-group, #live-cat-list .cat-item.cat-fav-group, #live-cat-list .cat-item.cat-cw-group, #live-cat-list .cat-item.cat-recent-group, #vod-cat-list .cat-item.cat-search-group.active:not(:focus):not(.focused):not(.active-focus), #vod-cat-list .cat-item.cat-fav-group.active:not(:focus):not(.focused):not(.active-focus), #vod-cat-list .cat-item.cat-cw-group.active:not(:focus):not(.focused):not(.active-focus), #vod-cat-list .cat-item.cat-recent-group.active:not(:focus):not(.focused):not(.active-focus), #series-cat-list .cat-item.cat-search-group.active:not(:focus):not(.focused):not(.active-focus), #series-cat-list .cat-item.cat-fav-group.active:not(:focus):not(.focused):not(.active-focus), #series-cat-list .cat-item.cat-cw-group.active:not(:focus):not(.focused):not(.active-focus), #series-cat-list .cat-item.cat-recent-group.active:not(:focus):not(.focused):not(.active-focus), #live-cat-list .cat-item.cat-search-group.active:not(:focus):not(.focused):not(.active-focus), #live-cat-list .cat-item.cat-fav-group.active:not(:focus):not(.focused):not(.active-focus), #live-cat-list .cat-item.cat-cw-group.active:not(:focus):not(.focused):not(.active-focus), #live-cat-list .cat-item.cat-recent-group.active:not(:focus):not(.focused):not(.active-focus) { background: var(--rsk-surface) !important; color: var(--rsk-text) !important; } /* Catégorie ouverte (non focalisée) : texte + trait d'accent, jamais d'aplat. */ #vod-cat-list .cat-item.active, #series-cat-list .cat-item.active, #live-cat-list .cat-item.active, #vod-cat-list .cat-item.active:not(:focus):not(.focused):not(.active-focus), #series-cat-list .cat-item.active:not(:focus):not(.focused):not(.active-focus), #live-cat-list .cat-item.active:not(:focus):not(.focused):not(.active-focus) { background: transparent !important; color: var(--rsk-text) !important; font-weight: 800 !important; } #vod-cat-list .cat-item.active:before, #series-cat-list .cat-item.active:before, #live-cat-list .cat-item.active:before { content: ''; position: absolute; left: 6px; top: 22%; bottom: 22%; width: 4px; border-radius: 2px; background: var(--rsk-accent); } /* Survol (télécommande-pointeur) : même famille. */ #vod-cat-list .cat-item:hover:not(:focus):not(.focused):not(.is-focused), #series-cat-list .cat-item:hover:not(:focus):not(.focused):not(.is-focused), #live-cat-list .cat-item:hover:not(:focus):not(.focused):not(.is-focused) { background: var(--rsk-surface) !important; color: var(--rsk-text) !important; } /* Focus EN DERNIER : le seul aplat rouge, il l'emporte sur tout ce qui précède. */ #vod-cat-list .cat-item:focus, #vod-cat-list .cat-item.cat-search-group.active:focus, #vod-cat-list .cat-item.cat-fav-group.active:focus, #vod-cat-list .cat-item.cat-cw-group.active:focus, #vod-cat-list .cat-item.cat-recent-group.active:focus, #vod-cat-list .cat-item.focused, #vod-cat-list .cat-item.cat-search-group.active.focused, #vod-cat-list .cat-item.cat-fav-group.active.focused, #vod-cat-list .cat-item.cat-cw-group.active.focused, #vod-cat-list .cat-item.cat-recent-group.active.focused, #vod-cat-list .cat-item.is-focused, #vod-cat-list .cat-item.cat-search-group.active.is-focused, #vod-cat-list .cat-item.cat-fav-group.active.is-focused, #vod-cat-list .cat-item.cat-cw-group.active.is-focused, #vod-cat-list .cat-item.cat-recent-group.active.is-focused, #vod-cat-list .cat-item.active-focus, #vod-cat-list .cat-item.cat-search-group.active.active-focus, #vod-cat-list .cat-item.cat-fav-group.active.active-focus, #vod-cat-list .cat-item.cat-cw-group.active.active-focus, #vod-cat-list .cat-item.cat-recent-group.active.active-focus, #series-cat-list .cat-item:focus, #series-cat-list .cat-item.cat-search-group.active:focus, #series-cat-list .cat-item.cat-fav-group.active:focus, #series-cat-list .cat-item.cat-cw-group.active:focus, #series-cat-list .cat-item.cat-recent-group.active:focus, #series-cat-list .cat-item.focused, #series-cat-list .cat-item.cat-search-group.active.focused, #series-cat-list .cat-item.cat-fav-group.active.focused, #series-cat-list .cat-item.cat-cw-group.active.focused, #series-cat-list .cat-item.cat-recent-group.active.focused, #series-cat-list .cat-item.is-focused, #series-cat-list .cat-item.cat-search-group.active.is-focused, #series-cat-list .cat-item.cat-fav-group.active.is-focused, #series-cat-list .cat-item.cat-cw-group.active.is-focused, #series-cat-list .cat-item.cat-recent-group.active.is-focused, #series-cat-list .cat-item.active-focus, #series-cat-list .cat-item.cat-search-group.active.active-focus, #series-cat-list .cat-item.cat-fav-group.active.active-focus, #series-cat-list .cat-item.cat-cw-group.active.active-focus, #series-cat-list .cat-item.cat-recent-group.active.active-focus, #live-cat-list .cat-item:focus, #live-cat-list .cat-item.cat-search-group.active:focus, #live-cat-list .cat-item.cat-fav-group.active:focus, #live-cat-list .cat-item.cat-cw-group.active:focus, #live-cat-list .cat-item.cat-recent-group.active:focus, #live-cat-list .cat-item.focused, #live-cat-list .cat-item.cat-search-group.active.focused, #live-cat-list .cat-item.cat-fav-group.active.focused, #live-cat-list .cat-item.cat-cw-group.active.focused, #live-cat-list .cat-item.cat-recent-group.active.focused, #live-cat-list .cat-item.is-focused, #live-cat-list .cat-item.cat-search-group.active.is-focused, #live-cat-list .cat-item.cat-fav-group.active.is-focused, #live-cat-list .cat-item.cat-cw-group.active.is-focused, #live-cat-list .cat-item.cat-recent-group.active.is-focused, #live-cat-list .cat-item.active-focus, #live-cat-list .cat-item.cat-search-group.active.active-focus, #live-cat-list .cat-item.cat-fav-group.active.active-focus, #live-cat-list .cat-item.cat-cw-group.active.active-focus, #live-cat-list .cat-item.cat-recent-group.active.active-focus { background: var(--rsk-accent) !important; color: #fff !important; } #vod-cat-list .cat-item:focus:before, #vod-cat-list .cat-item.cat-search-group.active:focus:before, #vod-cat-list .cat-item.cat-fav-group.active:focus:before, #vod-cat-list .cat-item.cat-cw-group.active:focus:before, #vod-cat-list .cat-item.cat-recent-group.active:focus:before, #vod-cat-list .cat-item.focused:before, #vod-cat-list .cat-item.cat-search-group.active.focused:before, #vod-cat-list .cat-item.cat-fav-group.active.focused:before, #vod-cat-list .cat-item.cat-cw-group.active.focused:before, #vod-cat-list .cat-item.cat-recent-group.active.focused:before, #vod-cat-list .cat-item.is-focused:before, #vod-cat-list .cat-item.cat-search-group.active.is-focused:before, #vod-cat-list .cat-item.cat-fav-group.active.is-focused:before, #vod-cat-list .cat-item.cat-cw-group.active.is-focused:before, #vod-cat-list .cat-item.cat-recent-group.active.is-focused:before, #vod-cat-list .cat-item.active-focus:before, #vod-cat-list .cat-item.cat-search-group.active.active-focus:before, #vod-cat-list .cat-item.cat-fav-group.active.active-focus:before, #vod-cat-list .cat-item.cat-cw-group.active.active-focus:before, #vod-cat-list .cat-item.cat-recent-group.active.active-focus:before, #series-cat-list .cat-item:focus:before, #series-cat-list .cat-item.cat-search-group.active:focus:before, #series-cat-list .cat-item.cat-fav-group.active:focus:before, #series-cat-list .cat-item.cat-cw-group.active:focus:before, #series-cat-list .cat-item.cat-recent-group.active:focus:before, #series-cat-list .cat-item.focused:before, #series-cat-list .cat-item.cat-search-group.active.focused:before, #series-cat-list .cat-item.cat-fav-group.active.focused:before, #series-cat-list .cat-item.cat-cw-group.active.focused:before, #series-cat-list .cat-item.cat-recent-group.active.focused:before, #series-cat-list .cat-item.is-focused:before, #series-cat-list .cat-item.cat-search-group.active.is-focused:before, #series-cat-list .cat-item.cat-fav-group.active.is-focused:before, #series-cat-list .cat-item.cat-cw-group.active.is-focused:before, #series-cat-list .cat-item.cat-recent-group.active.is-focused:before, #series-cat-list .cat-item.active-focus:before, #series-cat-list .cat-item.cat-search-group.active.active-focus:before, #series-cat-list .cat-item.cat-fav-group.active.active-focus:before, #series-cat-list .cat-item.cat-cw-group.active.active-focus:before, #series-cat-list .cat-item.cat-recent-group.active.active-focus:before, #live-cat-list .cat-item:focus:before, #live-cat-list .cat-item.cat-search-group.active:focus:before, #live-cat-list .cat-item.cat-fav-group.active:focus:before, #live-cat-list .cat-item.cat-cw-group.active:focus:before, #live-cat-list .cat-item.cat-recent-group.active:focus:before, #live-cat-list .cat-item.focused:before, #live-cat-list .cat-item.cat-search-group.active.focused:before, #live-cat-list .cat-item.cat-fav-group.active.focused:before, #live-cat-list .cat-item.cat-cw-group.active.focused:before, #live-cat-list .cat-item.cat-recent-group.active.focused:before, #live-cat-list .cat-item.is-focused:before, #live-cat-list .cat-item.cat-search-group.active.is-focused:before, #live-cat-list .cat-item.cat-fav-group.active.is-focused:before, #live-cat-list .cat-item.cat-cw-group.active.is-focused:before, #live-cat-list .cat-item.cat-recent-group.active.is-focused:before, #live-cat-list .cat-item.active-focus:before, #live-cat-list .cat-item.cat-search-group.active.active-focus:before, #live-cat-list .cat-item.cat-fav-group.active.active-focus:before, #live-cat-list .cat-item.cat-cw-group.active.active-focus:before, #live-cat-list .cat-item.cat-recent-group.active.active-focus:before { display: none; } /* Même largeur pour Films et Séries (la colonne Séries tronquait les libellés). */ #section-vod .vod-cats-col, #section-series .vod-cats-col { width: 380px !important; min-width: 380px !important; background: var(--rsk-bg-2, rgba(0,0,0,0.35)) !important; } /* ── 2. Direct : panneau d'aperçu lisible, pastille « EN DIRECT » sobre ── */ .live-tv-live-dot { display: inline-block !important; background: rgba(10,10,14,0.78) !important; color: #fff !important; border: 0 !important; } .live-tv-live-dot:first-letter { color: var(--rsk-accent); } .lprev-now-label { background: transparent !important; color: var(--rsk-accent) !important; padding-left: 0 !important; } .live-tv-play-hint { color: rgba(255,255,255,0.72) !important; } .lprev-guide-empty { color: var(--rsk-text-dim) !important; } .lprev-guide-hint { color: var(--rsk-text-dim) !important; } /* ── 3. Accueil ──────────────────────────────────────────────────────────── */ /* Le titre « Accès rapide » était collé sous la barre météo (132 px). */ #dv-quick-sec { margin-top: 28px !important; } /* Tuiles : une seule famille (plus d'arc-en-ciel de bordures) ; l'icône garde sa couleur d'identité, le focus reste l'unique aplat rouge. */ #section-dashboard .dv-tile { background: var(--rsk-surface) !important; border-color: transparent !important; } #section-dashboard .dv-tile.dv-focused, #section-dashboard .dv-tile:focus, #section-dashboard .dv-tile.is-focused { background: var(--rsk-accent) !important; } #section-dashboard .dv-tile.dv-focused *, #section-dashboard .dv-tile:focus * { color: #fff !important; } /* L'avertissement légal ne passe plus sous le numéro de version. */ .home-disclaimer { padding-right: 120px !important; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ── 4. Lecteur ──────────────────────────────────────────────────────────── */ /* E3 — une seule carte d'information, en bas (modèle Apple TV / Netflix) : logo · « ● EN DIRECT » · chaîne · horaires + programme · progression · suivant, puis les actions sur leur propre ligne. La barre du haut ne garde que Retour, le badge favori et l'heure ; le bandeau automatique s'efface tant que la barre est visible (le nom n'apparaît plus qu'une fois). */ .player-top-bar .pl-channel-info { display: none !important; } .player-top-bar .pl-top-right { margin-left: auto; } .player-overlay:not(.hidden) ~ #live-ticker { display: none !important; } .pl-live-mode .pl-live-strip { position: relative; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-end; align-items: flex-end; padding: 0 !important; } .pl-live-strip .pl-live-logo { width: 120px !important; height: 120px !important; border-radius: 18px !important; margin-right: 32px; -webkit-align-self: flex-start; align-self: flex-start; margin-top: 40px; background: rgba(255,255,255,0.10) !important; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 12px; } .pl-live-strip .pl-live-dot { position: absolute; left: 152px; top: 6px; width: 12px !important; height: 12px !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .pl-live-strip .pl-live-label { position: absolute; left: 176px; top: 0; font-size: 22px !important; letter-spacing: 3px !important; line-height: 24px; } .pl-live-strip .pl-live-texts { padding-top: 38px; max-width: 1180px; } .pl-live-strip .pl-live-chname { font-size: 48px !important; line-height: 58px; } .pl-live-strip .pl-live-epg-now { font-size: 32px !important; color: rgba(255,255,255,0.92) !important; font-weight: 600; margin-top: 6px; } .pl-live-epg-now .pl-epg-h { color: rgba(255,255,255,0.60); font-weight: 600; margin-right: 18px; } .pl-live-strip .pl-live-epg-bar-wrap { display: none; height: 6px !important; border-radius: 3px !important; background: rgba(255,255,255,0.20) !important; max-width: 760px; margin: 14px 0 12px !important; } .pl-live-strip.pl-a-programme .pl-live-epg-bar-wrap { display: block; } .pl-live-strip .pl-live-epg-bar-fill { border-radius: 3px !important; } .pl-live-strip .pl-live-epg-next { font-size: 26px !important; color: rgba(255,255,255,0.55) !important; } /* Actions : une ligne à part, aérée, sans cadre — le focus est le seul aplat. */ .pl-live-strip .pl-live-hints { -webkit-flex: 0 0 100%; flex: 0 0 100%; -webkit-justify-content: flex-end; justify-content: flex-end; margin-top: 28px; } .pl-live-strip .pl-hint-btn { font-size: 26px !important; font-weight: 600; background: transparent !important; border-color: transparent !important; padding: 10px 22px !important; margin-left: 12px; border-radius: 12px !important; color: rgba(255,255,255,0.78) !important; } .pl-live-strip .pl-hint-btn:focus, .pl-live-strip .pl-hint-btn.is-focused, .pl-live-strip .pl-hint-btn.focused { background: var(--rsk-accent) !important; color: #fff !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .pl-hint-btn .pl-hint-dot { margin-right: 12px !important; } .pl-fav-badge { background: rgba(10,10,14,0.72) !important; border: 2px solid rgba(255,255,255,0.18) !important; color: #fff !important; } /* Panneau des chaînes : le nom du groupe recouvrait l'aide (« C▲▼ »). */ #zap-panel .zap-panel-header { display: block !important; height: auto !important; padding: 18px 22px 14px 22px !important; } #zap-panel .zap-panel-group { display: block !important; font-size: 26px !important; font-weight: 800; color: var(--rsk-text, #fff); position: static !important; } #zap-panel .zap-panel-hint { display: block !important; font-size: 20px !important; color: rgba(255,255,255,0.62) !important; margin-top: 6px; position: static !important; white-space: normal !important; } #zap-panel .zap-item-num { display: inline-block; min-width: 44px; margin-right: 12px; color: rgba(255,255,255,0.62); font-weight: 700; } /* ── 5. Fiche film / série ──────────────────────────────────────────────── */ #modal-fav-btn svg, #modal-play-btn svg { margin-right: 12px; vertical-align: middle; } /* ── 6. Section vide (playlist sans films / sans séries) ─────────────────── */ .rsk-vide { padding: 140px 80px 0 80px; text-align: center; } .rsk-vide-titre { font-size: 40px; font-weight: 800; color: var(--rsk-text, #fff); } .rsk-vide-aide { font-size: 26px; color: var(--rsk-text-dim); margin-top: 16px; } /* ── 8. Direct : zones inactives à 55 % (étaient à 25 %, l'air « désactivé ») ; le bandeau d'infos de la chaîne sous le curseur reste PLEINEMENT lisible : c'est précisément ce qu'on lit en parcourant la liste. */ .live-tv-layout[data-zone="groups"] .live-ch-col, .live-tv-layout[data-zone="groups"] .live-info-bar, .live-tv-layout[data-zone="groups"] .live-tv-epg, .live-tv-layout[data-zone="channels"] .live-cat-col, .live-tv-layout[data-zone="epg"] .live-cat-col, .live-tv-layout[data-zone="epg"] .live-ch-col { opacity: 0.55 !important; } .live-tv-layout[data-zone="channels"] .live-info-bar, .live-tv-layout[data-zone="channels"] .live-tv-epg { opacity: 1 !important; } /* Numéros à 3-4 chiffres : ils débordaient sur le logo. */ #live-channel-list .channel-num { min-width: 92px !important; font-size: 22px !important; text-align: right; padding-right: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Les raccourcis de l'app ont déjà leur surface : pas de trait d'accent en plus (« Rechercher » restait marqué ouvert à côté de la vraie catégorie — défaut ancien). */ #vod-cat-list .cat-item.cat-search-group:before, #vod-cat-list .cat-item.cat-fav-group:before, #vod-cat-list .cat-item.cat-cw-group:before, #vod-cat-list .cat-item.cat-recent-group:before, #series-cat-list .cat-item.cat-search-group:before, #series-cat-list .cat-item.cat-fav-group:before, #series-cat-list .cat-item.cat-cw-group:before, #series-cat-list .cat-item.cat-recent-group:before { background: transparent !important; } /* pas de trait sur les raccourcis */ /* lot E2 : plus de 🔍 en ::before sur « Rechercher » — l'icône vectorielle est désormais dans le libellé (_catLibelle). */ .cat-item.cat-search-group::before { content: none !important; } #vod-cat-list .cat-item .ci, #series-cat-list .cat-item .ci, #live-cat-list .cat-item .ci { opacity: 0.9; } .pl-live-strip.pl-sans-logo .pl-live-dot { left: 0; } .pl-live-strip.pl-sans-logo .pl-live-label { left: 24px; }