* { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-primary: #000000; --bg-secondary: #141414; --bg-card: #1a1a1a; --bg-hover: #2a2a2a; --text-primary: #ffffff; --text-secondary: #b3b3b3; --text-muted: #6d6d6d; --accent: #e50914; --accent-rgb: 229, 9, 20; --accent-hover: #ff3d3d; --border: #333333; --radius: 4px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* ---- Échelle d'interface (menu Paramètres → Taille) ---- */ --ui-scale: 1; /* 0.9 = petite | 1 = moyenne | 1.15 = grande */ --card-scale: 1; /* largeur des cartes de carrousel */ --radius-scale: 1; /* arrondi global */ } /* ============================================================ THÈMES — appliqués via Chaque thème ne redéfinit que les fonds/textes/bordures ; la couleur d'accentuation reste pilotée séparément par l'utilisateur (--accent / --accent-rgb). ============================================================ */ /* Sombre (défaut ZenFlix) : voir :root ci-dessus */ /* OLED — noir absolu, économie de batterie sur écrans OLED */ [data-theme="oled"] { --bg-primary: #000000; --bg-secondary: #060606; --bg-card: #0b0b0b; --bg-hover: #171717; --text-primary: #ffffff; --text-secondary: #a8a8a8; --text-muted: #5c5c5c; --border: #1f1f1f; } /* Gris anthracite — contraste doux, moins agressif que le noir pur */ [data-theme="anthracite"] { --bg-primary: #1c1f24; --bg-secondary: #23272e; --bg-card: #2a2f37; --bg-hover: #343a44; --text-primary: #f2f4f7; --text-secondary: #b9c0cb; --text-muted: #7d8694; --border: #3c434e; } /* Aurore / Néon — fonds bleu nuit profonds, ambiance cyber */ [data-theme="aurora"] { --bg-primary: #070b1a; --bg-secondary: #0d1430; --bg-card: #141d43; --bg-hover: #1e2a5c; --text-primary: #eaf2ff; --text-secondary: #a5b8e8; --text-muted: #6b7cad; --border: #263566; } [data-theme="aurora"] body { background-image: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(var(--accent-rgb), 0.18), transparent 60%), radial-gradient(ellipse 60% 45% at 85% 5%, rgba(80, 200, 255, 0.10), transparent 65%); background-attachment: fixed; } /* Clair — pour la lecture de jour */ [data-theme="light"] { --bg-primary: #f6f7f9; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-hover: #eceef2; --text-primary: #14171c; --text-secondary: #4a5260; --text-muted: #838c9b; --border: #dde1e7; } [data-theme="light"] .navbar { background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.85) 50%, transparent 100%); } [data-theme="light"] .navbar.scrolled { background: #ffffff; box-shadow: 0 1px 12px rgba(0,0,0,0.08); } [data-theme="light"] .search-toggle { color: var(--text-primary); } [data-theme="light"] .film-card { border-color: rgba(0,0,0,0.10); } [data-theme="light"] .modal { background: rgba(20, 23, 28, 0.55); } /* ============================================================ ÉCHELLE D'INTERFACE html.font-scaled agit sur la base rem : toutes les tailles exprimées en rem (858 occurrences) suivent automatiquement. ============================================================ */ html { font-size: calc(100% * var(--ui-scale)); } /* Les largeurs de cartes sont pilotées directement dans leurs règles d'origine (voir .carousel-item / .films-results) pour éviter tout conflit de cascade avec les media queries mobiles. */ /* ============================================================ ACCESSIBILITÉ / CONFORT ============================================================ */ /* Animations réduites — respecte aussi le réglage système */ [data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Contraste élevé — bordures et textes renforcés */ [data-contrast="high"] { --text-secondary: #e8e8e8; --text-muted: #c0c0c0; --border: #8a8a8a; } [data-contrast="high"] .film-card, [data-contrast="high"] .modal-content, [data-contrast="high"] .zf-settings-panel { border-width: 2px; } [data-contrast="high"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* Coins arrondis pilotés par l'utilisateur */ [data-corners="square"] { --radius: 0px; } [data-corners="round"] { --radius: 12px; } [data-corners="square"] .film-card, [data-corners="square"] .modal-content, [data-corners="square"] .zf-settings-panel { border-radius: 0; } [data-corners="round"] .film-card { border-radius: 18px; } [data-corners="round"] .modal-content { border-radius: 20px; } /* Mode compact — densifie l'affichage */ [data-density="compact"] .carousel-track { gap: 0.8rem; padding-bottom: 1.4rem; } [data-density="compact"] .films-results { gap: 1rem; margin-top: 1.6rem; } [data-density="compact"] .content-section { margin-bottom: 1.5rem; } /* Masquer les jaquettes cassées / posters manquants proprement */ [data-posters="hidden"] .film-card img[src=""], [data-posters="hidden"] .film-card img:not([src]) { visibility: hidden; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } .navbar { background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 50%, transparent 100%); padding: 1rem 0; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background-color 0.3s ease; } .navbar.scrolled { background: #000000; } .nav-container { max-width: 1800px; margin: 0 auto; padding: 0 4rem; display: flex; align-items: center; justify-content: space-between; } .nav-logo h1 { font-size: 1.8rem; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; cursor: pointer; transition: var(--transition); } .nav-logo h1:hover { color: var(--accent-hover); } .nav-links { display: flex; gap: 2rem; margin-left: 3rem; } .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; transition: var(--transition); font-weight: 500; } .nav-link:hover, .nav-link.active { color: var(--text-primary); } .nav-actions { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; } .search-toggle { background: none; border: none; color: white; cursor: pointer; padding: 0.5rem; display: flex; align-items: center; transition: var(--transition); } .search-toggle:hover { color: var(--accent); } .btn-auth { background: transparent; border: 1px solid var(--text-secondary); color: var(--text-primary); padding: 0.5rem 1.2rem; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; transition: var(--transition); font-weight: 500; font-family: inherit; } .btn-auth:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--text-primary); } .user-profile { display: flex; align-items: center; gap: 0.8rem; } .username-display { font-weight: 700; color: var(--accent); font-size: 0.95rem; text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3); cursor: pointer; padding: 0.3rem 0.8rem; border: 1px solid transparent; border-radius: 4px; transition: var(--transition); } .username-display:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); } .logout-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: var(--transition); font-family: inherit; } .logout-btn:hover { color: var(--accent); } /* MODALS */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: none; align-items: center; justify-content: center; z-index: 3000; } .modal.active { display: flex; } .modal { padding: 1rem; overflow-y: auto; } .modal-content { background: var(--bg-secondary); width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; padding: 2.5rem; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8); margin: auto; } .modal-content::-webkit-scrollbar { width: 6px; } .modal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; } .modal-large { max-width: 700px; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .modal-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); } .close-modal { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; transition: var(--transition); padding: 0.3rem 0.6rem; } .close-modal:hover { color: var(--accent); } .auth-tabs { display: flex; gap: 1rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); } .tab-btn { background: none; border: none; color: var(--text-muted); padding: 0.6rem 0.5rem; cursor: pointer; border-bottom: 2px solid transparent; font-size: 0.95rem; font-weight: 600; transition: var(--transition); font-family: inherit; } .tab-btn:hover { color: var(--text-secondary); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .auth-submit-btn { margin-top: 0.5rem; } /* Account Modal */ .account-info { display: flex; flex-direction: column; gap: 0.5rem; } .account-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; } .account-field label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; } .account-field input { background: var(--bg-card); border: 1px solid var(--border); color: white; padding: 0.8rem 1rem; border-radius: 4px; font-size: 0.95rem; outline: none; transition: var(--transition); font-family: inherit; } .account-field input:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),0.2); } .account-role-display { background: rgba(var(--accent-rgb),0.15); border: 1px solid rgba(var(--accent-rgb),0.3); padding: 0.6rem 1rem; border-radius: 4px; font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-bottom: 1rem; text-align: center; } .danger-btn { background: transparent !important; border: 1px solid #ff4444 !important; color: #ff4444 !important; } .danger-btn:hover { background: rgba(255,68,68,0.1) !important; box-shadow: 0 5px 20px rgba(255,68,68,0.2) !important; } /* SEARCH OVERLAY */ .search-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.95); display: flex; align-items: flex-start; justify-content: center; padding-top: 10rem; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 2000; } .search-overlay.active { opacity: 1; visibility: visible; } .search-overlay-content { display: flex; align-items: center; gap: 1rem; max-width: 800px; width: 100%; padding: 0 2rem; } .search-overlay-input { flex: 1; background: transparent; border: none; border-bottom: 2px solid white; color: white; font-size: 2rem; padding: 1rem 0; outline: none; font-weight: 300; } .search-overlay-input::placeholder { color: rgba(255, 255, 255, 0.5); } .search-close { background: none; border: none; color: white; font-size: 2rem; cursor: pointer; padding: 0.5rem; transition: var(--transition); } .search-close:hover { color: var(--accent); } /* HOME PAGE */ .empty-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); position: relative; overflow: hidden; } .empty-page::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.1) 0%, transparent 70%); pointer-events: none; } .empty-content { text-align: center; z-index: 1; padding: 2rem; } .hero-logo { font-size: 4rem; font-weight: 900; color: var(--accent); margin-bottom: 2rem; letter-spacing: 2px; text-shadow: 0 0 50px rgba(var(--accent-rgb), 0.5); } .soon-title { font-size: 8rem; font-weight: 900; color: var(--text-primary); letter-spacing: 10px; text-shadow: 0 0 100px rgba(var(--accent-rgb), 0.5), 0 0 200px rgba(var(--accent-rgb), 0.3), 0 0 300px rgba(var(--accent-rgb), 0.1); animation: glow 2s ease-in-out infinite alternate; margin-bottom: 2rem; } @keyframes glow { from { text-shadow: 0 0 100px rgba(var(--accent-rgb),0.5), 0 0 200px rgba(var(--accent-rgb),0.3), 0 0 300px rgba(var(--accent-rgb),0.1); } to { text-shadow: 0 0 150px rgba(var(--accent-rgb),0.8), 0 0 250px rgba(var(--accent-rgb),0.5), 0 0 350px rgba(var(--accent-rgb),0.3); } } .soon-text { font-size: 1.5rem; color: var(--text-secondary); margin-bottom: 1rem; font-weight: 300; } .soon-subtext { font-size: 1rem; color: var(--text-muted); margin-bottom: 3rem; font-weight: 300; } .loading-animation { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-bottom: 3rem; } .loading-dot { width: 12px; height: 12px; background: var(--accent); border-radius: 50%; animation: bounce 1.4s ease-in-out infinite; } .loading-dot:nth-child(1) { animation-delay: -0.32s; } .loading-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } .home-actions { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .home-btn { padding: 1rem 2.5rem; font-size: 1rem; font-weight: 700; border-radius: 4px; cursor: pointer; transition: var(--transition); text-transform: uppercase; letter-spacing: 1px; border: none; font-family: inherit; } .home-btn.primary { background: var(--accent); color: white; } .home-btn.primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.4); } .home-btn.secondary { background: transparent; color: var(--text-primary); border: 2px solid var(--text-secondary); } .home-btn.secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--text-primary); transform: translateY(-2px); } /* ========================================= ZENFLIX HOME HERO & CAROUSEL STYLES ========================================= */ .home-hero { position: relative; width: 100%; min-height: 80vh; display: flex; align-items: flex-end; padding: 9rem 4rem 4.5rem; overflow: hidden; background: #000; } .hero-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: brightness(0.95) contrast(1.05); transform: scale(1.03); transition: transform 10s ease; } .home-hero:hover .hero-bg-img { transform: scale(1); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 35%, transparent 70%, var(--bg-primary) 100%), linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 48%, transparent 85%); } .hero-content { position: relative; z-index: 2; max-width: 780px; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(var(--accent-rgb), 0.22); color: var(--accent); border: 1px solid var(--accent); padding: 0.45rem 1.1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.2rem; backdrop-filter: blur(8px); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35); } .hero-title { font-size: 4.8rem; font-weight: 900; line-height: 1.08; margin-bottom: 1.2rem; letter-spacing: -1.5px; text-shadow: 0 4px 25px rgba(0,0,0,0.9); } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; font-size: 0.95rem; font-weight: 600; } .meta-tag.match { color: #46d369; font-weight: 800; } .meta-tag.year { color: var(--text-secondary); } .meta-tag.quality { border: 1px solid rgba(255,255,255,0.4); padding: 0.15rem 0.6rem; border-radius: 4px; font-size: 0.75rem; color: var(--text-primary); background: rgba(255,255,255,0.08); } .meta-tag.duration { color: var(--text-secondary); } .hero-synopsis { font-size: 1.12rem; line-height: 1.65; color: rgba(255, 255, 255, 0.88); margin-bottom: 1.6rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 5px rgba(0,0,0,0.85); } .hero-genres { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.2rem; } .hero-genre { background: rgba(255, 255, 255, 0.14); color: #fff; padding: 0.38rem 0.95rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.08); } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.95rem 2.4rem; font-size: 1.05rem; font-weight: 800; border-radius: 6px; cursor: pointer; transition: var(--transition); border: none; font-family: inherit; } .hero-btn.primary { background: #ffffff; color: #000000; } .hero-btn.primary:hover { background: rgba(255, 255, 255, 0.85); transform: scale(1.03); box-shadow: 0 8px 25px rgba(255,255,255,0.2); } .hero-btn.secondary { background: rgba(109, 109, 110, 0.75); color: #ffffff; backdrop-filter: blur(10px); } .hero-btn.secondary:hover { background: rgba(109, 109, 110, 0.45); transform: scale(1.03); } /* CAROUSEL CATEGORIES SECTION */ .home-categories { padding: 2rem 4rem 6rem; position: relative; z-index: 5; margin-top: -3.5rem; } .category-row { margin-bottom: 3.5rem; position: relative; } .category-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; } .category-title { font-size: 1.55rem; font-weight: 800; color: #ffffff; display: flex; align-items: center; gap: 0.65rem; letter-spacing: -0.5px; } .category-icon { color: var(--accent); font-size: 1.35rem; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.45)); } .category-count { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; background: var(--bg-secondary); padding: 0.25rem 0.8rem; border-radius: 20px; border: 1px solid var(--border); } .carousel-wrapper { position: relative; display: flex; align-items: center; } .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 140px; background: rgba(0, 0, 0, 0.82); border: 1px solid rgba(255,255,255,0.18); color: #ffffff; font-size: 1.4rem; cursor: pointer; z-index: 15; display: flex; align-items: center; justify-content: center; transition: var(--transition); opacity: 0; border-radius: 6px; backdrop-filter: blur(6px); } .carousel-wrapper:hover .carousel-nav { opacity: 1; } .carousel-nav:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.08); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.5); } .carousel-nav.prev { left: -24px; } .carousel-nav.next { right: -24px; } .carousel-track { display: flex; gap: 1.4rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 1rem 0.5rem 2.5rem; width: 100%; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; user-select: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-track.active-drag { cursor: grabbing; scroll-behavior: auto !important; } .carousel-item { flex: 0 0 calc(230px * var(--card-scale)); scroll-snap-align: start; position: relative; } /* TOP 10 RANK BADGE */ .top10-badge { position: absolute; top: -12px; right: -10px; width: 46px; height: 46px; background: linear-gradient(135deg, var(--accent), #990000); color: #fff; font-size: 1.25rem; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.7); border: 2px solid #fff; z-index: 15; } /* CONTENT TYPE BADGE */ .content-type-badge { position: absolute; top: 10px; right: 10px; background: rgba(var(--accent-rgb), 0.9); color: white; font-size: 0.68rem; font-weight: 800; padding: 0.22rem 0.55rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 12; box-shadow: 0 2px 8px rgba(0,0,0,0.6); } .content-type-badge.serie { background: rgba(67, 97, 238, 0.9); } /* ========================================= SERIES SEASONS ACCORDION INTERFACE ========================================= */ .seasons-container { margin-top: 2.5rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 1.8rem; } .seasons-header-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 1.5rem; color: white; display: flex; align-items: center; gap: 0.7rem; } .seasons-list { display: flex; flex-direction: column; gap: 1rem; } .season-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; overflow: hidden; transition: var(--transition); cursor: pointer; } .season-card:hover { border-color: rgba(var(--accent-rgb), 0.5); } .season-card.expanded { border-color: var(--accent); box-shadow: 0 5px 20px rgba(0,0,0,0.5); } .season-card-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.5rem; } .season-card-title-wrap { display: flex; align-items: center; gap: 1.2rem; } .season-number-badge { width: 40px; height: 40px; background: rgba(var(--accent-rgb), 0.15); color: var(--accent); font-weight: 900; font-size: 1.15rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .season-name { font-size: 1.15rem; font-weight: 800; color: white; margin-bottom: 0.2rem; } .season-short-meta { font-size: 0.85rem; color: var(--text-secondary); } .season-toggle-icon { color: var(--text-muted); transition: transform 0.3s ease; font-size: 1.1rem; } .season-card.expanded .season-toggle-icon { transform: rotate(180deg); color: var(--accent); } .season-card-body { padding: 1.5rem; border-top: 1px solid var(--border); background: #121212; } .season-tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--text-secondary); } .season-tech-grid strong { color: white; } .season-download-full { width: 100%; margin-top: 0 !important; } /* ========================================= CUSTOM TOAST NOTIFICATIONS (NO ALERTS) ========================================= */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 380px; pointer-events: none; } .toast-item { background: #181818; color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); border-left: 4px solid var(--accent); padding: 14px 18px; border-radius: 8px; font-size: 0.92rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75); display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: auto; backdrop-filter: blur(10px); } .toast-item.show { opacity: 1; transform: translateY(0); } .toast-item.toast-error { border-left-color: #ff4444; } .toast-item.toast-error i { color: #ff4444; font-size: 1.1rem; } .toast-item.toast-success { border-left-color: #46d369; } .toast-item.toast-success i { color: #46d369; font-size: 1.1rem; } .toast-item.toast-info { border-left-color: var(--accent); } .toast-item.toast-info i { color: var(--accent); font-size: 1.1rem; } @media (max-width: 768px) { .toast-container { top: 20px; bottom: auto; left: 16px; right: 16px; max-width: none; } } /* FILMS PAGE */ .section-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .search-section { margin-bottom: 3rem; } .section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; } .search-box-large { display: flex; gap: 1rem; margin-bottom: 2rem; } .search-input-large { flex: 1; background: var(--bg-card); border: 2px solid var(--border); color: var(--text-primary); padding: 1rem 1.5rem; border-radius: 4px; font-size: 1.1rem; outline: none; transition: var(--transition); } .search-input-large:focus { border-color: var(--accent); box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3); } .search-btn-large { background: var(--accent); color: white; border: none; padding: 1rem 3rem; border-radius: 4px; font-weight: 700; cursor: pointer; text-transform: uppercase; font-family: inherit; } .search-btn-large:hover { background: var(--accent-hover); } .filters-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .filter-label { color: var(--text-muted); font-size: 0.9rem; font-weight: 500; } .filter-btn { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); padding: 0.5rem 1.2rem; border-radius: 20px; cursor: pointer; transition: var(--transition); font-size: 0.85rem; font-weight: 500; font-family: inherit; } .filter-btn:hover { border-color: var(--accent); color: var(--text-primary); } .filter-btn.active { background: var(--accent); color: white; border-color: var(--accent); } /* Add Film Button */ .add-film-btn { background: var(--accent); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 4px; font-weight: 700; cursor: pointer; font-size: 0.95rem; transition: var(--transition); font-family: inherit; display: flex; align-items: center; gap: 0.6rem; } .add-film-btn:hover { background: var(--accent-hover); box-shadow: 0 5px 20px rgba(var(--accent-rgb),0.4); } /* FILMS GRID */ .films-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(240px * var(--card-scale)), 1fr)); gap: 2rem; margin-top: 3rem; align-items: stretch; } .film-card { background: var(--bg-card); border-radius: 10px; overflow: hidden; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.08); position: relative; display: flex; flex-direction: column; height: 100%; } .film-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); } /* Poster : ratio fixe 2:3, cadrage identique quelle que soit la taille source */ .film-card-poster-wrap { position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; background: #0d0d0d; flex-shrink: 0; } .film-card-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.4s ease; } .film-card:hover .film-card-poster { transform: scale(1.05); } .film-card-year-badge { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); color: var(--text-primary); font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 20px; letter-spacing: 0.3px; z-index: 5; } /* Corps de la carte : hauteur uniforme via flex + line-clamp sur le titre */ .film-card-info { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; } .film-card-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.7rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.3em * 2); } .film-card-meta { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.9rem; min-height: 1.2rem; } .film-card-meta span { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .film-card-meta i { color: var(--accent); flex-shrink: 0; } .film-card-genres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; min-height: 1.8rem; } .film-card-genre { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); padding: 0.28rem 0.7rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; } .film-card-btn { width: 100%; background: var(--accent); color: white; border: none; padding: 0.75rem; border-radius: 4px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px; font-size: 0.85rem; transition: var(--transition); font-family: inherit; margin-top: auto; } .film-card-btn:hover { background: var(--accent-hover); box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35); } /* ========================================= STREAM PAGE - FULLSCREEN VIDEO PLAYER ========================================= */ .stream-page { position: fixed; inset: 0; z-index: 9999; background: #000; display: none; overflow: hidden; } .stream-page.active { display: flex; flex-direction: column; } .stream-bg { position: absolute; inset: 0; background: #000; } /* IFRAME - plein écran */ .stream-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: #000; z-index: 10; } /* TOP BAR - overlaid on iframe */ .stream-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 100%); z-index: 100; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .stream-page.show-ui .stream-top { opacity: 1; pointer-events: auto; } .stream-top-left { display: flex; align-items: center; gap: 0.8rem; } .stream-btn-back { background: rgba(255,255,255,0.1); border: none; color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; pointer-events: auto; } .stream-btn-back:hover { background: var(--accent); } .stream-top-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.2); } .stream-top-title { font-size: 1rem; font-weight: 600; color: white; max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stream-top-right { display: flex; align-items: center; gap: 0.5rem; } .stream-btn-icon { background: rgba(255,255,255,0.1); border: none; color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; pointer-events: auto; } .stream-btn-icon:hover { background: rgba(255,255,255,0.2); } /* LOADING OVERLAY */ .stream-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; z-index: 50; background: #000; } .stream-loading.active { display: flex; } .stream-spinner { width: 50px; height: 50px; border: 3px solid rgba(255,255,255,0.15); border-top-color: var(--accent); border-radius: 50%; animation: spinAnim 0.7s linear infinite; } @keyframes spinAnim { to { transform: rotate(360deg); } } .stream-loading-text { color: rgba(255,255,255,0.6); font-size: 0.95rem; font-weight: 500; } /* Floating show-controls button */ .stream-show-btn { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 90; transition: all 0.3s ease; backdrop-filter: blur(8px); color: white; font-size: 1.1rem; } .stream-show-btn.active { display: flex; } .stream-show-btn:hover { background: rgba(255,255,255,0.2); transform: translateX(-50%) scale(1.1); } /* Mobile */ @media (max-width: 768px) { .stream-top { padding: 0.7rem 0.8rem; } .stream-top-title { font-size: 0.85rem; max-width: 150px; } .stream-btn-back, .stream-btn-icon { width: 32px; height: 32px; font-size: 0.85rem; } } /* Streaming badge on card */ .streaming-badge { position: absolute; top: 10px; right: 10px; background: #1a6dd4; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; z-index: 12; box-shadow: 0 2px 8px rgba(26, 109, 212, 0.6); border: 2px solid rgba(255, 255, 255, 0.5); animation: pulse-stream 2s ease-in-out infinite; } @keyframes pulse-stream { 0%, 100% { box-shadow: 0 0 0 0 rgba(26, 109, 212, 0.6); } 50% { box-shadow: 0 0 0 8px rgba(26, 109, 212, 0); } } /* Stream button in detail page */ .stream-btn:hover { background: #2180e8 !important; box-shadow: 0 10px 30px rgba(26, 109, 212, 0.4) !important; transform: translateY(-2px); } /* Streaming filter button active state */ .filter-btn i.fa-play { margin-right: 0.3rem; font-size: 0.75rem; } /* Delete film button on card */ .film-delete-btn { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.75); color: #ff4444; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); z-index: 10; } .film-card:hover .film-delete-btn { opacity: 1; } .film-delete-btn:hover { background: #ff4444; color: white; } /* FILM DETAIL */ .film-detail-container { padding: 8rem 0 4rem; } .back-btn { background: transparent; border: 1px solid var(--text-secondary); color: white; padding: 0.8rem 1.5rem; border-radius: 4px; cursor: pointer; margin-bottom: 2rem; transition: var(--transition); font-family: inherit; } .back-btn:hover { border-color: var(--accent); color: var(--accent); } .film-detail-content { display: grid; grid-template-columns: 350px 1fr; gap: 4rem; } .film-poster-large { width: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); } .film-title-large { font-size: 3rem; font-weight: 900; margin-bottom: 1rem; } .film-meta-large { display: flex; gap: 2rem; margin-bottom: 2rem; color: var(--text-secondary); flex-wrap: wrap; } .film-meta-large span { display: flex; align-items: center; gap: 0.5rem; } .film-meta-large i { color: var(--accent); } .film-description { font-size: 1.1rem; line-height: 1.8; color: var(--text-secondary); margin-bottom: 2rem; } .film-technical-info { background: var(--bg-secondary); padding: 2rem; border-radius: 8px; margin-bottom: 2rem; border: 1px solid var(--border); } .film-technical-info h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } .tech-info-item { display: flex; justify-content: space-between; padding: 0.8rem 0; border-bottom: 1px solid var(--border); } .tech-label i { color: var(--accent); margin-right: 10px; } .reveal-btn { background: var(--accent); color: white; border: none; padding: 1.2rem; border-radius: 4px; font-weight: 800; cursor: pointer; text-transform: uppercase; width: 100%; font-size: 1rem; transition: var(--transition); font-family: inherit; } .reveal-btn:hover { background: var(--accent-hover); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.4); } /* SUGGESTIONS */ .suggestions-container { padding: 8rem 0 4rem; background: var(--bg-primary); } .suggestions-header { text-align: center; margin-bottom: 4rem; } .suggestions-title { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; } .suggestions-subtitle { font-size: 1.1rem; color: var(--text-secondary); } /* ======================== SUGGESTIONS - EQUAL HEIGHT + SCROLL ======================== */ .suggestions-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: stretch; } /* Both containers - responsive, no cutoff, button always visible */ .suggestion-form-container, .suggestions-list-container { background: var(--bg-secondary); padding: 2.2rem 2rem; border-radius: 16px; border: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; max-height: 90vh; min-height: 520px; } /* Suggestions list: scrollable independently */ .suggestions-list-container { overflow-y: auto !important; } .suggestion-form-container { overflow-y: auto; padding-bottom: 1.5rem; } /* Form styling - clean & premium when container is taller */ .suggestion-form-container form { flex: 1; display: flex; flex-direction: column; gap: 1.4rem; } .suggestion-form-container .form-group { margin-bottom: 0; } .suggestion-form-container .form-group:last-child { flex: 1; display: flex; flex-direction: column; } .suggestion-form-container label { font-size: 0.95rem; margin-bottom: 0.4rem; color: var(--text-secondary); } .suggestion-form-container input, .suggestion-form-container select, .suggestion-form-container textarea { padding: 1rem 1.2rem; font-size: 1rem; border-radius: 10px; } .suggestion-form-container textarea { flex: 1; min-height: 160px; resize: vertical; } .suggestions-list-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; } .auth-notice { text-align: center; padding: 3rem 2rem; background: var(--bg-card); border-radius: 8px; border: 1px dashed var(--border); } .auth-notice p { color: var(--text-secondary); font-size: 1rem; margin-bottom: 1.5rem; } .auth-notice button { background: var(--accent); color: white; border: none; padding: 0.8rem 2rem; border-radius: 4px; cursor: pointer; font-weight: 700; text-transform: uppercase; transition: var(--transition); font-family: inherit; } .auth-notice button:hover { background: var(--accent-hover); box-shadow: 0 5px 20px rgba(var(--accent-rgb), 0.4); } /* FORMS */ .form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group label { font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); } .form-group input, .form-group select, .form-group textarea { background: var(--bg-card); border: 1px solid var(--border); color: white; padding: 1rem; border-radius: 4px; outline: none; transition: var(--transition); font-size: 0.95rem; font-family: inherit; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2); } .form-group textarea { resize: vertical; min-height: 100px; } .form-group input[type="checkbox"] { width: auto; } .submit-btn { background: var(--accent); color: white; border: none; padding: 1rem; border-radius: 4px; font-weight: 700; cursor: pointer; text-transform: uppercase; width: 100%; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 0.8rem; font-family: inherit; font-size: 0.95rem; } .submit-btn:hover { background: var(--accent-hover); box-shadow: 0 5px 20px rgba(var(--accent-rgb), 0.4); } /* Suggestion Items */ .suggestion-item { background: var(--bg-card); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 1.2rem; transition: var(--transition); } .suggestion-item:hover { border-color: rgba(var(--accent-rgb), 0.4); } .suggestion-author { font-size: 0.8rem; color: var(--accent); font-weight: 700; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; } .suggestion-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .suggestion-item-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); } .suggestion-item-type { background: rgba(var(--accent-rgb), 0.2); color: var(--accent); padding: 0.2rem 0.7rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; white-space: nowrap; } .suggestion-item-comment { color: var(--text-secondary); font-size: 0.9rem; margin-top: 1rem; padding: 0.8rem; background: rgba(0, 0, 0, 0.2); border-radius: 4px; line-height: 1.6; } .suggestion-item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); } .suggestion-item-date { font-size: 0.8rem; color: var(--text-muted); } .like-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; font-size: 0.85rem; transition: var(--transition); display: flex; align-items: center; gap: 0.4rem; font-family: inherit; } .like-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .like-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); } .like-btn:disabled { opacity: 0.5; cursor: not-allowed; } .delete-btn { background: none; border: none; color: #ff4444; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: var(--transition); display: flex; align-items: center; gap: 0.4rem; font-family: inherit; } .delete-btn:hover:not(:disabled) { color: #ff6666; } .delete-btn:disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.4; } /* FOOTER */ .footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 3rem 4rem; margin-top: 4rem; text-align: center; } .footer-disclaimer, .footer-author { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.5rem; } /* PAGES */ .page { display: none; animation: fadeIn 0.3s ease; } .page.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .no-films, .no-suggestions { text-align: center; color: var(--text-muted); padding: 3rem; font-size: 1.1rem; } /* ========================================= MOBILE HAMBURGER MENU & DRAWER ========================================= */ .nav-left { display: flex; align-items: center; gap: 1rem; } .mobile-menu-btn { display: none; background: transparent; border: none; color: #ffffff; font-size: 1.4rem; cursor: pointer; padding: 0.4rem 0.6rem; border-radius: 4px; transition: var(--transition); } .mobile-menu-btn:hover { color: var(--accent); background: rgba(255, 255, 255, 0.08); } .mobile-nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .mobile-nav-backdrop.active { opacity: 1; pointer-events: auto; } .mobile-nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 275px; background: #111111; border-right: 1px solid rgba(255, 255, 255, 0.12); z-index: 2001; transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; padding: 1.5rem; box-shadow: 25px 0 60px rgba(0,0,0,0.9); } .mobile-nav-drawer.active { transform: translateX(0); } .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .mobile-drawer-logo { display: inline-flex; align-items: center; line-height: 0; } .mobile-drawer-logo img { display: block; height: 34px; width: auto; border-radius: 8px; box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35); } .mobile-drawer-close { background: rgba(255,255,255,0.1); border: none; color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .mobile-drawer-close:hover { background: var(--accent); } .mobile-drawer-links { display: flex; flex-direction: column; gap: 0.6rem; } .mobile-nav-link { display: flex; align-items: center; gap: 1.1rem; color: var(--text-secondary); text-decoration: none; font-size: 1.12rem; font-weight: 600; padding: 0.85rem 1.2rem; border-radius: 8px; transition: var(--transition); } .mobile-nav-link i { width: 24px; text-align: center; color: var(--text-muted); font-size: 1.1rem; transition: var(--transition); } .mobile-nav-link:hover, .mobile-nav-link.active { background: rgba(var(--accent-rgb), 0.15); color: white; } .mobile-nav-link:hover i, .mobile-nav-link.active i { color: var(--accent); } .mobile-drawer-footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.82rem; text-align: center; } /* RESPONSIVE */ @media (max-width: 1024px) { .hero-title { font-size: 3.5rem; } .home-categories { padding: 2rem 2rem 4rem; } .carousel-nav { display: none; } } @media (max-width: 768px) { .film-detail-content, .suggestions-content { grid-template-columns: 1fr; gap: 2rem; } .nav-links { display: none !important; } .mobile-menu-btn { display: flex !important; } .nav-container { padding: 0 1rem; } .nav-logo h1 { font-size: 1.5rem; } .btn-auth { padding: 0.45rem 0.9rem; font-size: 0.8rem; } /* Hero mobile parfait */ .home-hero { padding: 5.5rem 1.2rem 2.5rem; min-height: 65vh; } .hero-title { font-size: 2.4rem; margin-bottom: 0.8rem; } .hero-badge { font-size: 0.75rem; padding: 0.35rem 0.85rem; } .hero-meta { gap: 0.8rem; font-size: 0.85rem; } .hero-synopsis { font-size: 0.95rem; line-height: 1.55; -webkit-line-clamp: 3; } .hero-actions { flex-direction: column; width: 100%; gap: 0.7rem; } .hero-btn { width: 100%; padding: 0.85rem 1.5rem; font-size: 0.95rem; } /* Carrousels et cartes mobile */ .home-categories { padding: 1.5rem 1rem 4rem; margin-top: -1.5rem; } .category-title { font-size: 1.3rem; } .category-row { margin-bottom: 2.5rem; } .carousel-item { flex: 0 0 calc(155px * var(--card-scale)); } .carousel-track { gap: 0.85rem; padding: 0.5rem 0.2rem 1.5rem; -webkit-overflow-scrolling: touch; } /* Grilles Films & Séries 2 colonnes sur téléphone */ .films-results { grid-template-columns: repeat(2, 1fr) !important; gap: 0.85rem !important; margin-top: 1.5rem; } .film-card-info { padding: 0.85rem; } .film-card-title { font-size: 0.95rem; margin-bottom: 0.4rem; } .film-card-meta { font-size: 0.72rem; gap: 0.5rem; margin-bottom: 0.6rem; } .film-card-btn { padding: 0.6rem; font-size: 0.78rem; } /* Recherches et Filtres mobiles */ .search-box-large { flex-direction: column; gap: 0.7rem; } .search-input-large, .search-btn-large { width: 100%; padding: 0.85rem 1rem; font-size: 0.95rem; } .filters-bar { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.8rem; gap: 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filters-bar::-webkit-scrollbar { display: none; } .filter-btn { flex: 0 0 auto; padding: 0.45rem 0.9rem; font-size: 0.8rem; } .soon-title { font-size: 3.5rem; } .suggestion-form-container, .suggestions-list-container { padding: 1.2rem; } .film-title-large { font-size: 1.8rem; } .form-row { grid-template-columns: 1fr; } .modal-large { padding: 1.2rem; } /* Saisons mobile */ .seasons-container { padding: 1.2rem; margin-top: 1.5rem; } .season-card-header { padding: 1rem; } .season-card-title-wrap { gap: 0.8rem; } .season-tech-grid { grid-template-columns: 1fr; gap: 0.6rem; } } @media (max-width: 400px) { .films-results { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem !important; } .carousel-item { flex: 0 0 calc(140px * var(--card-scale)); } .hero-title { font-size: 2rem; } } /* === EPISODES & STREAMING BUTTONS === */ .episodes-section { margin-top: 1rem; } .episodes-grid { display: flex; flex-direction: column; gap: 0.6rem; } .episode-card { background: #181818; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; transition: all 0.2s; } .episode-card:hover { border-color: rgba(var(--accent-rgb),0.4); } .episode-card.expanded { border-color: var(--accent); box-shadow: 0 4px 15px rgba(var(--accent-rgb),0.2); } .episode-header { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; cursor: pointer; } .episode-num-badge { background: rgba(var(--accent-rgb),0.15); color: var(--accent); font-weight: 800; font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; } .episode-label { font-weight: 600; font-size: 0.9rem; } .episode-icon { color: var(--text-secondary); transition: transform 0.2s; } .episode-card.expanded .episode-icon { transform: rotate(180deg); color: var(--accent); } .episode-body { padding: 0.8rem 1rem; border-top: 1px solid rgba(255,255,255,0.06); background: #0f0f0f; } .episode-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; } .episode-actions button { flex: 1; min-width: 120px; } /* === BOUTONS ÉPISODE : TÉLÉCHARGER (ROUGE) / STREAMING (BLEU) === */ .ep-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border: none; color: #fff; padding: 0.7rem 1.2rem; border-radius: 6px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; font-family: inherit; } .ep-btn-download { background: var(--accent); /* ROUGE */ box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3); } .ep-btn-download:hover { background: #c11119; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.45); } .ep-btn-stream { background: #1a6dd4; /* BLEU */ box-shadow: 0 4px 12px rgba(26, 109, 212, 0.3); } .ep-btn-stream:hover { background: #2180e8; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26, 109, 212, 0.45); } .ep-btn:active { transform: translateY(0); } /* Badge "Streaming" sur les épisodes qui ont un lien de streaming */ .episode-stream-tag { margin-left: auto; margin-right: 0.6rem; background: rgba(26, 109, 212, 0.15); color: #5aa6f5; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 10px; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; flex-shrink: 0; } /* ========================================= DOWNLOAD SOURCES PAGE Interface inspirée de la table de référence, intégrée à l'identité visuelle ZenFlix. ========================================= */ .download-page-container { width: min(1500px, calc(100% - 3rem)); min-height: 100vh; margin: 0 auto; padding: 7.5rem 0 5rem; } .download-page-heading { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 2rem; padding: 2rem 2.2rem; margin-bottom: 1.25rem; background: radial-gradient(circle at 85% 15%, rgba(var(--accent-rgb), 0.2), transparent 35%), linear-gradient(135deg, #171717, #090909); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35); } .download-page-heading::after { content: ''; position: absolute; right: -70px; bottom: -120px; width: 300px; height: 300px; border: 1px solid rgba(var(--accent-rgb), 0.18); border-radius: 50%; box-shadow: 0 0 0 35px rgba(var(--accent-rgb), 0.035), 0 0 0 75px rgba(var(--accent-rgb), 0.02); pointer-events: none; } .download-back-btn { position: relative; z-index: 1; margin: 0; white-space: nowrap; } .download-back-btn i { margin-right: 0.45rem; } .download-heading-copy { position: relative; z-index: 1; min-width: 0; } .download-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; color: var(--accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .download-heading-copy h1 { margin: 0 0 0.35rem; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.035em; } .download-heading-copy p { color: var(--text-secondary); font-size: 0.95rem; } .download-browser { overflow: hidden; background: #080808; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45); } .download-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem; background: #050505; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .download-toolbar-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .download-toolbar select, .download-kind-btn, .download-compact-btn { min-height: 34px; background: #080808; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: #d7d7d7; padding: 0.35rem 0.7rem; font-family: inherit; font-size: 0.82rem; line-height: 1; outline: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .download-toolbar select { cursor: pointer; color-scheme: dark; } .download-toolbar select:hover, .download-toolbar select:focus, .download-kind-btn:hover, .download-compact-btn:hover, .download-kind-btn.active, .download-compact-btn.active { border-color: rgba(var(--accent-rgb), 0.75); color: #fff; background: rgba(var(--accent-rgb), 0.1); } .download-kind-btn, .download-compact-btn { cursor: pointer; } .download-kind-btn.active { box-shadow: inset 0 -2px 0 var(--accent); } .download-compact-btn { display: inline-flex; align-items: center; gap: 0.45rem; } .download-global-search { flex: 0 1 270px; min-width: 210px; height: 34px; display: flex; align-items: center; gap: 0.55rem; padding: 0 0.75rem; background: #080808; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; color: var(--text-muted); transition: border-color 0.2s ease; } .download-global-search:focus-within { border-color: var(--accent); } .download-global-search input { width: 100%; min-width: 0; background: none; border: none; outline: none; color: #fff; font: inherit; font-size: 0.82rem; } .download-global-search input::placeholder { color: #777; } .download-table-wrap { width: 100%; overflow-x: auto; background: #080808; } .download-table { width: 100%; min-width: 1120px; border-collapse: collapse; table-layout: fixed; color: #e6e6e6; font-size: 0.88rem; } .download-table th, .download-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.12); text-align: left; vertical-align: middle; } .download-table th { padding: 0.75rem 0.8rem; background: #1a1a1a; color: #aaa; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .download-table td { height: 68px; padding: 0.7rem 0.8rem; background: #090909; transition: background 0.2s ease; } .download-table tbody tr:hover td { background: #101010; } .download-table tbody tr:last-child td { border-bottom: 0; } .download-table th:nth-child(1), .download-table td:nth-child(1) { width: 44px; } .download-table th:nth-child(2), .download-table td:nth-child(2) { width: 38%; } .download-table th:nth-child(3), .download-table td:nth-child(3) { width: 12%; } .download-table th:nth-child(4), .download-table td:nth-child(4) { width: 12%; } .download-table th:nth-child(5), .download-table td:nth-child(5) { width: 15%; } .download-table th:nth-child(6), .download-table td:nth-child(6) { width: 10%; } .download-table th:nth-child(7), .download-table td:nth-child(7) { width: 92px; } .download-check-cell { text-align: center !important; } .download-check-cell input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; } .download-provider-line { min-width: 0; display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; } .download-provider-icon { flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; color: #ff9d28; font-size: 0.8rem; } .download-provider-line strong { flex: 0 0 auto; color: #fff; font-weight: 700; } .download-release { min-width: 0; overflow: hidden; color: #9da1a8; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.82rem; text-overflow: ellipsis; } .download-quality-badge { display: inline-block; max-width: 100%; overflow: hidden; padding: 0.22rem 0.55rem; border: 1px solid transparent; border-radius: 999px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.76rem; font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .download-quality-bluray { background: rgba(32, 93, 210, 0.2); border-color: rgba(55, 124, 255, 0.25); color: #58a0ff; } .download-quality-hdlight { background: rgba(0, 174, 145, 0.16); border-color: rgba(28, 214, 183, 0.2); color: #22d3b5; } .download-quality-ultra { background: rgba(0, 187, 161, 0.14); border-color: rgba(0, 226, 195, 0.2); color: #1dd8bc; } .download-quality-brrip { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.22); color: #f5b942; } .download-quality-cam { background: rgba(var(--accent-rgb), 0.17); border-color: rgba(var(--accent-rgb), 0.25); color: #ff5d65; } .download-quality-default { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: #c4c4c4; } .download-language-badge { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; overflow: hidden; padding: 0.22rem 0.5rem; background: #171717; border-radius: 999px; color: #e7e7e7; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .download-audio { color: #bcbcbc; } .download-uploader { display: flex; flex-direction: column; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .download-uploader strong { overflow: hidden; color: #ddd; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; } .download-uploader span { overflow: hidden; color: #727272; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; } .download-size { color: #f3f3f3; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .download-action-cell { text-align: right !important; } .download-reveal-btn { min-width: 78px; padding: 0.48rem 0.7rem; background: var(--accent); border: none; border-radius: 5px; color: #fff; cursor: pointer; font-family: inherit; font-size: 0.8rem; font-weight: 800; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .download-reveal-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.28); } .download-reveal-btn.unavailable { min-width: 94px; background: #272727; color: #777; cursor: not-allowed; box-shadow: none; transform: none; } .download-empty { min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; color: var(--text-muted); } .download-empty i { color: var(--accent); font-size: 1.4rem; } .download-browser-footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.85rem; background: #0c0c0c; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #777; font-size: 0.78rem; } .download-selected-count { margin-left: 0.8rem; color: var(--accent); font-weight: 700; } .download-pagination { display: flex; align-items: center; gap: 0.7rem; } .download-pagination button { width: 30px; height: 30px; background: #171717; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 5px; color: #fff; cursor: pointer; } .download-pagination button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .download-pagination button:disabled { opacity: 0.35; cursor: not-allowed; } .download-browser.compact .download-table td { height: 48px; padding-top: 0.4rem; padding-bottom: 0.4rem; } .download-browser.compact .download-uploader span { display: none; } @media (max-width: 1100px) { .download-page-container { width: min(100% - 2rem, 1500px); } .download-toolbar { align-items: stretch; flex-direction: column; } .download-global-search { flex-basis: 38px; width: 100%; } } @media (max-width: 768px) { .download-page-container { width: calc(100% - 1.25rem); padding-top: 5.8rem; } .download-page-heading { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; padding: 1.4rem; } .download-back-btn { width: fit-content; } .download-heading-copy h1 { font-size: 2rem; } .download-heading-copy p { font-size: 0.86rem; } .download-toolbar { padding: 0.6rem; } .download-toolbar-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .download-toolbar select, .download-kind-btn, .download-compact-btn { width: 100%; } .download-browser-footer { align-items: flex-start; flex-direction: column; } } @media (max-width: 420px) { .download-toolbar-group { grid-template-columns: 1fr; } } /* ========================================= STREAMING WATCH PAGE & SOURCE SELECTOR ========================================= */ .watch-page-container { width: min(1500px, calc(100% - 3rem)); min-height: 100vh; margin: 0 auto; padding: 7.5rem 0 5rem; } .watch-sources-panel, .watch-player-shell { overflow: hidden; background: #090909; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 12px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.42); } .watch-source-card { --source-accent: #e50914; width: 100%; min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.7rem; background: #111; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9px; color: #fff; cursor: pointer; text-align: left; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .watch-source-card:hover { background: #171717; border-color: color-mix(in srgb, var(--source-accent) 55%, transparent); transform: translateY(-1px); } .watch-source-card.active { background: color-mix(in srgb, var(--source-accent) 12%, #101010); border-color: var(--source-accent); box-shadow: inset 3px 0 0 var(--source-accent), 0 8px 22px color-mix(in srgb, var(--source-accent) 16%, transparent); } .watch-source-logo { --source-accent: #e50914; position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; overflow: hidden; background: #050505; border: 1px solid color-mix(in srgb, var(--source-accent) 45%, rgba(255,255,255,0.08)); border-radius: 9px; } .watch-source-logo.large { width: 48px; height: 48px; } .watch-source-logo.small { width: 34px; height: 34px; border-radius: 7px; } .watch-source-logo-fallback { color: var(--source-accent); font-size: 1.05rem; font-weight: 900; } .watch-source-logo img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4px; background: #050505; object-fit: contain; } .watch-source-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .watch-source-copy strong { overflow: hidden; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; } .watch-source-copy small { display: flex; align-items: center; gap: 0.4rem; color: #777; font-size: 0.7rem; } .watch-source-dot { width: 6px; height: 6px; background: #3bd16f; border-radius: 50%; box-shadow: 0 0 8px rgba(59, 209, 111, 0.75); } .watch-source-chevron { color: #555; font-size: 0.72rem; transition: color 0.2s ease, transform 0.2s ease; } .watch-source-card.active .watch-source-chevron { color: var(--source-accent); transform: translateX(2px); } .watch-player-shell { min-width: 0; background: #000; } .watch-player-actions { display: flex; align-items: center; gap: 0.45rem; } .watch-player-actions button { width: 34px; height: 34px; display: grid; place-items: center; background: #202020; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 7px; color: #ddd; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .watch-player-actions button:hover { background: rgba(var(--accent-rgb), 0.15); border-color: var(--accent); color: #fff; } .watch-player-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 360px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.1), transparent 38%), #000; } .watch-stream-iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; background: #000; border: 0; object-fit: contain; } .watch-player-loading { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; background: #000; color: #888; font-size: 0.82rem; } .watch-player-loading.active { display: flex; } .watch-player-loading > i { color: var(--accent); font-size: 1.5rem; } .watch-player-message { max-width: 500px; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem; color: #858585; text-align: center; } .watch-player-message > i { width: 58px; height: 58px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.13); border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 50%; color: var(--accent); font-size: 1.3rem; } .watch-player-message h2 { color: #fff; font-size: 1.35rem; } .watch-player-message p { font-size: 0.85rem; } .watch-player-message code { padding: 0.12rem 0.35rem; background: #181818; border-radius: 4px; color: #ddd; } .watch-player-message button { margin-top: 0.35rem; padding: 0.75rem 1.4rem; background: var(--accent); border: 0; border-radius: 6px; color: #fff; cursor: pointer; font-family: inherit; font-weight: 800; } .watch-player-shell:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; background: #000; } .watch-player-shell:fullscreen .watch-player-stage { height: calc(100vh - 56px); min-height: 0; aspect-ratio: auto; } @media (max-width: 1050px) { .watch-page-container { width: min(100% - 2rem, 1500px); } .watch-player-shell { grid-row: 1; } .watch-sources-panel { grid-row: 2; } } @media (max-width: 768px) { .watch-page-container { width: calc(100% - 1.25rem); padding-top: 5.8rem; } .watch-player-stage { min-height: 0; } } @media (max-width: 480px) { .watch-player-actions button { width: 31px; height: 31px; } } /* ========================================= LIVE TV PAGE ========================================= */ .tv-page-container { width: min(1500px, calc(100% - 3rem)); min-height: 100vh; margin: 0 auto; padding: 7.5rem 0 5rem; } .tv-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; padding: 1.7rem 1.9rem; background: radial-gradient(circle at 88% 20%, rgba(var(--accent-rgb), 0.18), transparent 34%), linear-gradient(135deg, #171717, #090909); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; } .tv-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; color: var(--accent); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .tv-page-heading h1 { margin: 0 0 0.25rem; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; } .tv-page-heading p { color: var(--text-secondary); font-size: 0.9rem; } .tv-legal-note { max-width: 330px; display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.85rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; color: #888; font-size: 0.72rem; line-height: 1.4; } .tv-legal-note i { flex: 0 0 auto; color: var(--accent); } .tv-page-toolbar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; padding: 0.7rem; background: #0c0c0c; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px; } .tv-search { min-width: 240px; flex: 1; height: 38px; display: flex; align-items: center; gap: 0.55rem; padding: 0 0.8rem; background: #121212; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 7px; color: #666; } .tv-search:focus-within { border-color: var(--accent); } .tv-search input { width: 100%; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; font-size: 0.84rem; } .tv-page-toolbar select { height: 38px; min-width: 180px; padding: 0 0.7rem; background: #121212; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 7px; color: #ddd; font: inherit; font-size: 0.8rem; outline: 0; color-scheme: dark; } .tv-result-count { color: #777; font-size: 0.75rem; white-space: nowrap; } .tv-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); align-items: start; gap: 1rem; } .tv-channel-list-panel { overflow: hidden; background: #090909; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 11px; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.4); } .tv-channel-list { max-height: 680px; display: flex; flex-direction: column; gap: 0.55rem; overflow-y: auto; padding: 0.7rem; } .tv-channel-card { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.65rem; background: #111; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 9px; color: #fff; cursor: pointer; text-align: left; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .tv-channel-card:hover { background: #171717; border-color: rgba(var(--accent-rgb), 0.45); transform: translateY(-1px); } .tv-channel-card.active { background: rgba(var(--accent-rgb), 0.11); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } .tv-channel-logo { position: relative; display: inline-grid; place-items: center; overflow: hidden; flex: 0 0 auto; background: #050505; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px; } .tv-channel-logo.card { width: 48px; height: 48px; } .tv-channel-logo.player { width: 40px; height: 40px; border-radius: 8px; } .tv-channel-logo-fallback { color: var(--accent); font-size: 1.05rem; font-weight: 900; } .tv-channel-logo img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4px; background: #050505; object-fit: contain; } .tv-channel-card-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; } .tv-channel-card-copy strong, .tv-channel-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tv-channel-card-copy strong { font-size: 0.85rem; } .tv-channel-card-copy small { color: #747474; font-size: 0.69rem; } .tv-live-pill, .tv-direct-badge { display: inline-flex; align-items: center; gap: 0.35rem; color: #ff4b55; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.05em; } .tv-live-pill i, .tv-direct-badge i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8); animation: tvLivePulse 1.6s ease-in-out infinite; } @keyframes tvLivePulse { 50% { opacity: 0.35; } } .tv-channel-empty { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.4rem; color: #777; text-align: center; } .tv-channel-empty i { color: var(--accent); font-size: 1.7rem; } .tv-channel-empty strong { color: #ddd; } .tv-channel-empty span { font-size: 0.75rem; } .tv-player-area { min-width: 0; } .tv-player-welcome { min-height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; background: #090909; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 11px; color: #777; text-align: center; } .tv-player-welcome i { color: var(--accent); font-size: 2rem; } .tv-player-welcome h2 { color: #fff; } .tv-player-shell { overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 11px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .tv-player-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.8rem; background: linear-gradient(180deg, #171717, #0d0d0d); border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .tv-player-channel-identity { min-width: 0; display: flex; align-items: center; gap: 0.7rem; } .tv-player-channel-identity > div { min-width: 0; display: flex; flex-direction: column; } .tv-player-channel-identity strong, .tv-player-channel-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tv-player-channel-identity strong { color: #fff; font-size: 0.86rem; } .tv-player-channel-identity span { color: #777; font-size: 0.7rem; } .tv-player-header-actions { display: flex; gap: 0.45rem; } .tv-player-header-actions button, .tv-player-controls button { width: 34px; height: 34px; display: grid; place-items: center; background: #202020; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 7px; color: #ddd; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .tv-player-header-actions button:hover, .tv-player-controls button:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); color: #fff; } .tv-source-tabs { min-height: 42px; display: flex; gap: 0.45rem; overflow-x: auto; padding: 0.45rem 0.65rem; background: #090909; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tv-source-tab { flex: 0 0 auto; padding: 0.45rem 0.8rem; background: #161616; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 999px; color: #8b8b8b; cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 700; } .tv-source-tab:hover, .tv-source-tab.active { background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); color: #fff; } .tv-player-stage { position: relative; width: 100%; min-height: 420px; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.08), transparent 40%), #000; } .tv-stream-iframe, .tv-video-element { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; } .tv-player-loading { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; background: #000; color: #888; font-size: 0.82rem; } .tv-player-loading > i { color: var(--accent); font-size: 1.5rem; } .tv-player-message { max-width: 500px; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem; color: #858585; text-align: center; } .tv-player-message > i { width: 58px; height: 58px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.13); border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 50%; color: var(--accent); font-size: 1.25rem; } .tv-player-message h2 { color: #fff; font-size: 1.3rem; } .tv-player-message p { font-size: 0.84rem; } .tv-player-message code { padding: 0.12rem 0.35rem; background: #181818; border-radius: 4px; color: #ddd; } .tv-player-message button { padding: 0.72rem 1.35rem; background: var(--accent); border: 0; border-radius: 6px; color: #fff; cursor: pointer; font: inherit; font-weight: 800; } .tv-player-controls { min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.6rem 0.75rem; background: linear-gradient(180deg, #101010, #080808); border-top: 1px solid rgba(255, 255, 255, 0.08); } .tv-controls-left { display: flex; align-items: center; gap: 0.45rem; } .tv-controls-left input[type="range"] { width: 82px; accent-color: var(--accent); } .tv-controls-program { min-width: 0; display: flex; flex-direction: column; text-align: left; } .tv-controls-program strong, .tv-controls-program span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tv-controls-program strong { color: #eee; font-size: 0.78rem; } .tv-controls-program span { color: #666; font-size: 0.68rem; } .tv-player-controls button:disabled, .tv-player-controls input:disabled { opacity: 0.28; cursor: not-allowed; } .tv-player-controls.iframe-mode::after { content: 'Les contrôles de lecture sont gérés par le lecteur intégré.'; position: absolute; left: 50%; transform: translateX(-50%); color: #666; font-size: 0.65rem; pointer-events: none; } .tv-player-controls { position: relative; } .tv-player-shell:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; background: #000; } .tv-player-shell:fullscreen .tv-player-stage { height: calc(100vh - 158px); min-height: 0; aspect-ratio: auto; } @media (max-width: 1050px) { .tv-page-container { width: min(100% - 2rem, 1500px); } .tv-layout { grid-template-columns: 1fr; } .tv-player-area { grid-row: 1; } .tv-channel-list-panel { grid-row: 2; } .tv-channel-list { max-height: 420px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .tv-page-container { width: calc(100% - 1.25rem); padding-top: 5.8rem; } .tv-page-heading { align-items: flex-start; flex-direction: column; gap: 1rem; padding: 1.3rem; } .tv-legal-note { max-width: none; } .tv-page-toolbar { align-items: stretch; flex-direction: column; } .tv-search, .tv-page-toolbar select { width: 100%; min-width: 0; } .tv-channel-list { grid-template-columns: 1fr; } .tv-player-stage { min-height: 0; } .tv-player-controls { grid-template-columns: 1fr auto; } .tv-controls-program { grid-column: 1 / -1; grid-row: 1; } .tv-controls-left { grid-column: 1; grid-row: 2; } .tv-player-controls > button { grid-column: 2; grid-row: 2; } .tv-player-controls.iframe-mode::after { display: none; } } @media (max-width: 480px) { .tv-controls-left input[type="range"] { width: 60px; } .tv-channel-card { grid-template-columns: 44px minmax(0, 1fr); } .tv-channel-logo.card { width: 44px; height: 44px; } .tv-live-pill { display: none; } } /* ============================================================ ZenFlix - Watch Party & Playlists (boutons d'action rapide, page playlists, page watch party, salle watch party synchronisée) ============================================================ */ /* ---------- Modal "Ajouter à une playlist" ---------- */ .playlist-modal-media { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem; margin-bottom: 1.2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; } .playlist-modal-media img { width: 56px; height: 80px; object-fit: cover; border-radius: 4px; background: #1a1a1a; } .playlist-modal-media div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .playlist-modal-media strong { font-size: 0.95rem; color: var(--text-primary); } .playlist-modal-media span { font-size: 0.78rem; color: var(--text-secondary); } .playlist-modal-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 260px; overflow-y: auto; margin-bottom: 1.2rem; } .playlist-modal-row { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.8rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-align: left; } .playlist-modal-row i:first-child { color: var(--accent); } .playlist-modal-row i:last-child { margin-left: auto; color: var(--text-muted); font-size: 0.8rem; } .playlist-modal-row:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); } .playlist-modal-row:hover i:last-child { color: var(--accent); } .playlist-modal-empty { color: var(--text-secondary); font-size: 0.85rem; padding: 0.5rem 0; } .playlist-modal-create { display: flex; gap: 0.6rem; border-top: 1px solid var(--border); padding-top: 1.2rem; } .playlist-modal-create input { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 0.7rem 0.9rem; border-radius: 6px; font-size: 0.9rem; font-family: inherit; outline: none; transition: var(--transition); } .playlist-modal-create input:focus { border-color: var(--accent); } /* ---------- Page Playlists ---------- */ .playlists-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.5rem; } .playlists-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); font-size: 0.8rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.5rem; } .playlists-header h1 { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.5px; } .playlists-header p { color: var(--text-secondary); margin-top: 0.3rem; font-size: 0.95rem; } .new-playlist-form { display: flex; gap: 0.7rem; min-width: min(100%, 420px); } .new-playlist-form input { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.92rem; font-family: inherit; outline: none; transition: var(--transition); } .new-playlist-form input:focus { border-color: var(--accent); } .playlists-grid { display: grid; grid-template-columns: 1fr; gap: 1.8rem; } .playlist-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: var(--transition); } .playlist-card:hover { border-color: rgba(var(--accent-rgb), 0.4); } .playlist-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.2rem; } .playlist-card-title { display: flex; align-items: center; gap: 0.9rem; } .playlist-card-title > i { font-size: 1.4rem; color: var(--accent); } .playlist-card-title h3 { font-size: 1.25rem; font-weight: 800; } .playlist-card-title span { font-size: 0.78rem; color: var(--text-secondary); } .playlist-card-actions { display: flex; gap: 0.5rem; } .playlist-mini-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; transition: var(--transition); } .playlist-mini-btn:hover { color: #6fb3ff; border-color: #4a90e2; } .playlist-mini-btn.danger:hover { color: #ff4444; border-color: #ff4444; } .playlist-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; } .playlist-item-card { position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem; background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; cursor: pointer; transition: var(--transition); overflow: hidden; } .playlist-item-card:hover { border-color: var(--accent); transform: translateY(-2px); } .playlist-item-card img { width: 46px; height: 66px; object-fit: cover; border-radius: 4px; background: #1a1a1a; flex-shrink: 0; } .playlist-item-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .playlist-item-info strong { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .playlist-item-info span { font-size: 0.75rem; color: var(--text-secondary); } .playlist-item-remove { margin-left: auto; width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); font-size: 0.8rem; cursor: pointer; border-radius: 50%; transition: var(--transition); } .playlist-item-remove:hover { color: #ff4444; background: rgba(255, 68, 68, 0.12); } .playlist-no-items { color: var(--text-muted); font-size: 0.85rem; grid-column: 1 / -1; } .playlists-empty, .playlists-auth { text-align: center; padding: 5rem 1rem; color: var(--text-secondary); } .playlists-empty i, .playlists-auth i { font-size: 3rem; color: var(--text-muted); margin-bottom: 1.2rem; display: block; } .playlists-empty h3, .playlists-auth h2 { color: var(--text-primary); font-size: 1.4rem; margin-bottom: 0.6rem; } .playlists-auth .submit-btn { margin-top: 1.2rem; } /* ---------- Page Watch Party (hub) ---------- */ .watchparty-page-container { width: min(100% - 3rem, 1300px); margin: 0 auto; padding-top: 8.5rem; padding-bottom: 4rem; } .wp-hub-hero { text-align: center; margin-bottom: 3rem; } .wp-hub-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); font-size: 0.8rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; } .wp-hub-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); font-weight: 900; letter-spacing: -1px; line-height: 1.1; margin-bottom: 1rem; } .wp-hub-hero p { color: var(--text-secondary); max-width: 620px; margin: 0 auto; font-size: 1rem; } .wp-hub-cards { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; } .wp-hub-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; gap: 0.9rem; } .wp-hub-card.create { border-top: 3px solid var(--accent); } .wp-hub-card.join { border-top: 3px solid #4a90e2; } .wp-hub-card-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.3rem; background: rgba(255, 255, 255, 0.06); color: var(--accent); margin-bottom: 0.4rem; } .wp-hub-card.join .wp-hub-card-icon { color: #6fb3ff; } .wp-hub-card h2 { font-size: 1.35rem; font-weight: 800; } .wp-hub-card p { color: var(--text-secondary); font-size: 0.9rem; } .wp-hub-label { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin-top: 0.4rem; } .wp-hub-card select, .wp-hub-card input[type="text"] { width: 100%; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 0.75rem 0.9rem; border-radius: 6px; font-size: 0.92rem; font-family: inherit; outline: none; transition: var(--transition); } .wp-hub-card select:focus, .wp-hub-card input[type="text"]:focus { border-color: var(--accent); } .wp-hub-card .submit-btn { margin-top: 0.4rem; } .wp-hub-divider { display: flex; flex-direction: column; align-items: center; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .wp-hub-divider::before, .wp-hub-divider::after { content: ''; width: 1px; height: 48px; background: var(--border); } .wp-hub-note { margin-top: 2.5rem; display: flex; align-items: flex-start; gap: 0.7rem; padding: 1rem 1.2rem; background: rgba(74, 144, 226, 0.08); border: 1px solid rgba(74, 144, 226, 0.25); border-radius: 10px; color: var(--text-secondary); font-size: 0.85rem; max-width: 760px; margin-left: auto; margin-right: auto; } .wp-hub-note i { color: #6fb3ff; margin-top: 0.15rem; } @media (max-width: 900px) { .wp-hub-cards { grid-template-columns: 1fr; } .wp-hub-divider { flex-direction: row; } .wp-hub-divider::before, .wp-hub-divider::after { width: 48px; height: 1px; } } /* ---------- Salle Watch Party ---------- */ .watchparty-room-container { width: min(100% - 2.5rem, 1600px); margin: 0 auto; padding-top: 7.5rem; padding-bottom: 3.5rem; } .wpr-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.2rem; } .wpr-code { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; } .wpr-code-label { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .wpr-code strong { font-size: 1.3rem; letter-spacing: 3px; color: var(--accent); } .wpr-copy-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; transition: var(--transition); font-size: 0.8rem; } .wpr-copy-btn:hover { color: var(--accent); border-color: var(--accent); } .wpr-members-head { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; } .wpr-members-head i { color: var(--accent); } .wpr-host-controls { background: rgba(255, 215, 0, 0.06); border: 1px solid rgba(255, 215, 0, 0.25); border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 1.2rem; } .wpr-host-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; } .wpr-host-label { display: inline-flex; align-items: center; gap: 0.4rem; color: gold; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-right: 0.4rem; } .wpr-host-row select { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 0.55rem 0.7rem; border-radius: 6px; font-size: 0.85rem; font-family: inherit; outline: none; max-width: 240px; transition: var(--transition); } .wpr-host-row select:focus { border-color: gold; } @media (max-width: 768px) { .wpr-host-row select { max-width: 100%; flex: 1 1 45%; } } .wpr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.2rem; align-items: start; } .wpr-player-shell { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .wpr-player-stage { aspect-ratio: 16 / 9; background: #000; position: relative; } .wpr-iframe { width: 100%; height: 100%; border: none; display: block; background: #000; } .wpr-sync-banner { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; background: rgba(74, 144, 226, 0.1); border-top: 1px solid rgba(74, 144, 226, 0.3); color: var(--text-secondary); font-size: 0.8rem; } .wpr-sync-banner i { color: #6fb3ff; } .wpr-message { height: 100%; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 2rem; color: var(--text-secondary); } .wpr-message i { font-size: 2.4rem; color: var(--text-muted); } .wpr-message h3 { color: var(--text-primary); } .wpr-sidebar { display: flex; flex-direction: column; gap: 1rem; } .wpr-panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; } .wpr-panel-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.9rem; } .wpr-panel-title i { color: var(--accent); } .wpr-members-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 220px; overflow-y: auto; } .wpr-members-empty { color: var(--text-muted); font-size: 0.82rem; } .wpr-member { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem; background: var(--bg-card); border-radius: 8px; } .wpr-avatar { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #ff6b6b); color: #fff; font-weight: 800; font-size: 0.85rem; } .wpr-member-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wpr-member-name em { color: var(--text-muted); font-style: normal; font-size: 0.75rem; } .wpr-host-badge { margin-left: auto; color: gold; font-size: 0.8rem; } .wpr-chat { display: flex; flex-direction: column; } .wpr-chat-messages { display: flex; flex-direction: column; gap: 0.5rem; min-height: 120px; max-height: 260px; overflow-y: auto; margin-bottom: 0.8rem; } .wpr-chat-msg { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.65rem; background: var(--bg-card); border-radius: 8px; } .wpr-chat-msg strong { font-size: 0.75rem; color: var(--accent); } .wpr-chat-msg span { font-size: 0.85rem; color: var(--text-primary); word-break: break-word; } .wpr-chat-input { display: flex; gap: 0.5rem; } .wpr-chat-input input { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.85rem; font-family: inherit; outline: none; transition: var(--transition); } .wpr-chat-input input:focus { border-color: var(--accent); } .wpr-chat-input button { width: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); border: none; border-radius: 6px; color: #fff; cursor: pointer; font-size: 0.85rem; transition: var(--transition); } .wpr-chat-input button:hover { background: var(--accent-hover); } .wpr-player-shell:fullscreen .wpr-player-stage { aspect-ratio: auto; height: 100vh; } @media (max-width: 1050px) { .watchparty-room-container { width: min(100% - 2rem, 1500px); } .wpr-layout { grid-template-columns: 1fr; } .wpr-sidebar { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .watchparty-room-container { width: calc(100% - 1.25rem); padding-top: 6rem; } .wpr-topbar { gap: 0.7rem; } .wpr-sidebar { grid-template-columns: 1fr; } .wpr-player-stage { min-height: 0; } } /* ============================================================ Boutons d'action de la FICHE média (Watch Party + Playlist) Affichés uniquement sur la fiche, à côté de "Télécharger" et "Regarder en streaming". ============================================================ */ .detail-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } .detail-action-grid .reveal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; } .reveal-btn.wp-btn { background: #6d28d9; /* VIOLET - Watch Party */ box-shadow: 0 6px 18px rgba(109, 40, 217, 0.35); } .reveal-btn.wp-btn:hover { background: #7c3aed; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(109, 40, 217, 0.5); } .reveal-btn.pl-btn { background: #059669; /* VERT - Playlist */ box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35); } .reveal-btn.pl-btn:hover { background: #10b981; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(5, 150, 105, 0.5); } /* Bouton Watch Party par épisode */ .ep-btn-wp { background: #6d28d9; /* VIOLET - Watch Party */ box-shadow: 0 4px 12px rgba(109, 40, 217, 0.3); } .ep-btn-wp:hover { background: #7c3aed; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(109, 40, 217, 0.45); } /* ============================================================ CORRECTION : bouton "Créer" dans les conteneurs flex playlist .submit-btn a width:100% par défaut → il écrasait l'input de saisie du nom (invisible / inutilisable). On repasse le bouton en largeur auto dans les lignes flex. ============================================================ */ .playlist-modal-create .submit-btn, .new-playlist-form .submit-btn { width: auto; flex: 0 0 auto; padding: 0.7rem 1.2rem; white-space: nowrap; } /* ============================================================ Watch Party - Lecteur personnalisé uniforme (fix rouge) Ajustement minimal : barre et contrôles en rouge ZenFlix ============================================================ */ .wpr-player-shell-inner{ position:relative; background:#000; display:flex; flex-direction:column; overflow:hidden; border-radius:10px; } /* ============================================================ PLEIN ÉCRAN — Lecteur unifié (bureau + mobile) Le CONTENEUR passe en fullscreen : la coque occupe 100vw × 100vh (100dvh sur mobile = hauteur réelle visible, sans la barre d'adresse du navigateur). La vidéo est positionnée en ABSOLU pour remplir exactement la coque avec object-fit:contain (letterbox noir, JAMAIS déformée, ni coupée, ni étirée) — indépendamment du flex. La barre de contrôles est collée TOUT EN BAS et le bouton Play central reste centré, tous deux au-dessus de la vidéo. Variantes standard (:fullscreen) + WebKit (:-webkit-full-screen). ============================================================ */ .player-container:fullscreen, .wpr-player-shell-inner:fullscreen, #wprCustomShell:fullscreen, .wpr-player-shell:fullscreen, .player-container:-webkit-full-screen, .wpr-player-shell-inner:-webkit-full-screen, #wprCustomShell:-webkit-full-screen, .wpr-player-shell:-webkit-full-screen{ position:relative !important; width:100vw !important; height:100vh !important; height:100dvh !important; max-width:100vw !important; max-height:100vh !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:#000 !important; overflow:hidden !important; display:block !important; }/* Vidéo : remplit EXACTEMENT l'écran en absolu{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; background:#000; flex:none !important; margin:0 !important; }/* Barre de contrôles : collée TOUT EN BAS{ position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:2147483647; opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important; background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 70%, transparent 100%); backdrop-filter:blur(6px); border-top:none !important; }/* Bouton Play central : centré{ z-index:2147483646; } /* ---- Mobile : plein écran optimisé (barre compacte, 100dvh, safe-area) ---- */ @media (max-width: 768px){ .player-container:fullscreen, .wpr-player-shell-inner:fullscreen, #wprCustomShell:fullscreen, .wpr-player-shell:fullscreen, .player-container:-webkit-full-screen, .wpr-player-shell-inner:-webkit-full-screen, #wprCustomShell:-webkit-full-screen, .wpr-player-shell:-webkit-full-screen{ height:100dvh !important; /* hauteur réelle visible (barre d'adresse masquée) */ } /* Barre compacte : moins d'espace, boutons tactiles confortables */ .player-container:fullscreen .wpr-controls, .wpr-player-shell-inner:fullscreen .wpr-controls, #wprCustomShell:fullscreen .wpr-controls, .wpr-player-shell:fullscreen .wpr-controls, .player-container:-webkit-full-screen .wpr-controls, .wpr-player-shell-inner:-webkit-full-screen .wpr-controls, #wprCustomShell:-webkit-full-screen .wpr-controls, .wpr-player-shell:-webkit-full-screen .wpr-controls{ padding:0.5rem 0.6rem max(0.5rem, env(safe-area-inset-bottom)); gap:0.45rem; } .player-container:fullscreen .wpr-controls button, .wpr-player-shell-inner:fullscreen .wpr-controls button, #wprCustomShell:fullscreen .wpr-controls button, .wpr-player-shell:fullscreen .wpr-controls button, .player-container:-webkit-full-screen .wpr-controls button, .wpr-player-shell-inner:-webkit-full-screen .wpr-controls button, #wprCustomShell:-webkit-full-screen .wpr-controls button, .wpr-player-shell:-webkit-full-screen .wpr-controls button{ width:40px; height:40px; } /* Le volume se règle avec les boutons physiques du mobile → on gagne de la place */ .player-container:fullscreen .wpr-volume, .wpr-player-shell-inner:fullscreen .wpr-volume, #wprCustomShell:fullscreen .wpr-volume, .wpr-player-shell:fullscreen .wpr-volume, .player-container:-webkit-full-screen .wpr-volume, .wpr-player-shell-inner:-webkit-full-screen .wpr-volume, #wprCustomShell:-webkit-full-screen .wpr-volume, .wpr-player-shell:-webkit-full-screen .wpr-volume{ display:none !important; } .player-container:fullscreen .wpr-center-btn, .wpr-player-shell-inner:fullscreen .wpr-center-btn, #wprCustomShell:fullscreen .wpr-center-btn, .wpr-player-shell:fullscreen .wpr-center-btn, .player-container:-webkit-full-screen .wpr-center-btn, .wpr-player-shell-inner:-webkit-full-screen .wpr-center-btn, #wprCustomShell:-webkit-full-screen .wpr-center-btn, .wpr-player-shell:-webkit-full-screen .wpr-center-btn{ width:70px; height:70px; font-size:1.7rem; } } /* ============================================================ PLEIN ÉCRAN — Page Streaming (shell .watch-player-shell) et Page TV (shell .tv-player-shell) Mêmes corrections : dvh, variantes WebKit, object-fit contain. ============================================================ */ .watch-player-shell:fullscreen, .watch-player-shell:-webkit-full-screen, .tv-player-shell:fullscreen, .tv-player-shell:-webkit-full-screen{ width:100vw !important; height:100vh !important; height:100dvh !important; max-width:100vw !important; max-height:100vh !important; border:0 !important; border-radius:0 !important; background:#000 !important; overflow:hidden !important; } /* Zone vidéo : occupe tout l'espace restant, la vidéo en contain */ .watch-player-shell:fullscreen .watch-player-stage, .watch-player-shell:-webkit-full-screen .watch-player-stage, .tv-player-shell:fullscreen .tv-player-stage, .tv-player-shell:-webkit-full-screen .tv-player-stage{ height:auto !important; min-height:0 !important; aspect-ratio:auto !important; flex:1 1 auto !important; }.watch-player-shell:fullscreen .watch-stream-iframe, .watch-player-shell:-webkit-full-screen .watch-stream-iframe, .tv-player-shell:fullscreen .tv-stream-iframe, .tv-player-shell:fullscreen .tv-video-element, .tv-player-shell:-webkit-full-screen .tv-stream-iframe, .tv-player-shell:-webkit-full-screen .tv-video-element{ width:100% !important; height:100% !important; object-fit:contain !important; } @media (max-width: 768px){ .watch-player-shell:fullscreen, .watch-player-shell:-webkit-full-screen, .tv-player-shell:fullscreen, .tv-player-shell:-webkit-full-screen{ height:100dvh !important; } .watch-player-shell:fullscreen .watch-player-stage, .watch-player-shell:-webkit-full-screen .watch-player-stage{ height:calc(100dvh - 52px) !important; } } #wprProgress{flex:1;accent-color:var(--accent);} #wprProgress{--fill:0%; background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill), #333 var(--fill), #333 100%);} .wpr-seeking{opacity:0.7;pointer-events:none} /* Contrôles hôte - propre, ne chevauche pas le lecteur */ .wpr-host-controls{ background:rgba(20,20,20,0.96) !important; border:1px solid rgba(255,215,0,0.18) !important; border-radius:8px !important; padding:0.55rem 0.8rem !important; margin-bottom:0.7rem !important; } .wpr-host-controls .wpr-host-label{ background:rgba(255,215,0,0.12); padding:0.25rem 0.5rem; border-radius:4px; } /* Fix bouton envoi toujours visible */ .suggestion-form-container .submit-btn { position: sticky; bottom: 0; margin-top: 1rem; z-index: 2; } .suggestion-form-container form { padding-bottom: 0.5rem; } /* Badge Recommandé - qualité HDLight 1080p */ .download-recommended-badge{ display:inline-flex; align-items:center; gap:0.3rem; color:#10B981; background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.25); padding:0.18rem 0.55rem; border-radius:20px; font-size:0.68rem; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; white-space:nowrap; } .download-recommended-badge i{ font-size:0.6rem; } /* Modal streaming warning fine-tune */ #streamWarningModal .modal-content{ border-top:3px solid #22C55E; } #streamWarningModal code{ font-family:ui-monospace, monospace; } /* Modal avertissement Chaînes TV (Adblock / DNS / iOS-Safari) */ #tvWarningModal .modal-content{ border-top:3px solid var(--accent); } #tvWarningModal code{ font-family:ui-monospace, monospace; } #tvWarningModal .tv-warning-note{ line-height:1.55; } /* === Continuer de regarder - barre progression rouge === */ .continue-progress{ position:absolute; bottom:0; left:0; right:0; height:4px; background:rgba(255,255,255,0.25); z-index:3; } .continue-progress-fill{ height:100%; background:var(--accent); transition:width 0.3s linear; box-shadow:0 0 6px rgba(var(--accent-rgb),0.6); } .film-card .continue-badge{ position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.75); color:#fff; font-size:0.68rem; font-weight:700; padding:0.2rem 0.45rem; border-radius:4px; z-index:3; } /* Bouton suppression discret (au survol) pour Continuer de regarder */ .continue-delete-btn{ position:absolute; top:6px; right:6px; width:26px; height:26px; display:grid; place-items:center; background:rgba(0,0,0,0.68); color:#fff; border:1px solid rgba(255,255,255,0.15); border-radius:50%; font-size:0.85rem; line-height:1; opacity:0; pointer-events:none; transition:opacity 0.18s ease, background 0.18s, color 0.18s, transform 0.18s; z-index:4; } /* Uniquement dans Continuer de regarder - pas sur Top10/Films/Séries */ .continue-row .film-card:hover .continue-delete-btn{ opacity:1; pointer-events:auto; } .continue-row .continue-delete-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.06) } .continue-row .continue-delete-btn:active{ transform:scale(0.96) } /* Sécurité : si jamais le bouton se retrouve hors continue-row, on le cache */ .category-row:not(.continue-row) .continue-delete-btn{ display:none !important; } /* Badge qualité max en téléchargement - page streaming */ .quality-hint-badge{ display:inline-flex; align-items:center; gap:0.35rem; background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.28); color:#FBBF24; padding:0.22rem 0.55rem; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.2px; white-space:nowrap; } .quality-hint-badge i{ font-size:0.65rem; } /* ============================================================ LECTEUR UNIFIÉ ZENFLIX (streaming solo + Watch Party) Bouton central Play/Pause rond rouge + auto-masquage 2 s ============================================================ */ /* La coque du lecteur occupe toute la scène (solo ET Watch Party) */ .watch-player-stage > .wpr-player-shell-inner, .wpr-player-stage > .wpr-player-shell-inner { width: 100%; height: 100%; border-radius: 0; } /* Bouton central Play/Pause (rond rouge{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; width: 84px; height: 84px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.92); color: #fff; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; font-size: 2rem; cursor: pointer; box-shadow: 0 10px 34px rgba(var(--accent-rgb), 0.55), 0 0 0 8px rgba(var(--accent-rgb), 0.15); transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, box-shadow 0.2s ease; opacity: 0.92; } /* ============================================================ PLAYLISTS — Réorganisation (Drag & Drop + flèches) ============================================================ */ .playlist-item-card{ cursor: grab; } .playlist-item-card:active{ cursor: grabbing; } .playlist-item-card.dragging{ opacity: 0.45; border: 1px dashed var(--accent); transform: scale(0.98); } .playlist-item-card.drag-over{ border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35); } .playlist-drag-handle{ flex: 0 0 auto; width: 22px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.95rem; cursor: grab; border-radius: 4px; transition: color 0.2s ease; } .playlist-item-card:hover .playlist-drag-handle{ color: #ddd; } .playlist-drag-handle:active{ cursor: grabbing; } .playlist-item-moves{ margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; } .playlist-item-card .playlist-item-remove{ margin-left: 0; } .playlist-move-btn{ width: 24px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 4px; color: var(--text-muted); font-size: 0.7rem; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .playlist-move-btn:hover{ color: #6fb3ff; background: rgba(74, 144, 226, 0.14); } .playlist-move-btn:disabled{ opacity: 0.25; cursor: default; background: transparent; color: var(--text-muted); } /* Info : laisse la place aux actions (repli correct en 1 colonne) */ .playlist-item-info{ flex: 1 1 auto; } @media (max-width: 480px){ .playlist-drag-handle{ width: 18px; } } /* ============================================================ DIAGNOSTIC VISIBLE (sans console) — badge synchro + bouton footer ============================================================ */ .sync-badge{ display:inline-flex; align-items:center; gap:0.4rem; padding:0.22rem 0.6rem; border-radius:20px; font-size:0.7rem; font-weight:800; letter-spacing:0.3px; white-space:nowrap; } .sync-badge.sync-ok{ color:#4ade80; background:rgba(74,222,128,0.12); border:1px solid rgba(74,222,128,0.3); } .sync-badge.sync-local{ color:#fbbf24; background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.3); } .diag-footer-btn{ display:inline-flex; align-items:center; gap:0.45rem; margin-top:0.7rem; padding:0.45rem 0.9rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:8px; color:var(--text-secondary); font-size:0.78rem; font-weight:700; cursor:pointer; font-family:inherit; transition:var(--transition); } .diag-footer-btn:hover{ color:#fff; border-color:var(--accent); background:rgba(var(--accent-rgb),0.12); } /* ============================================================ MULTI-PROFILS (style Netflix) — écran "Qui regarde ?" ============================================================ */ .profile-select-modal .modal-content{ max-width:640px; } .profile-select-modal{ background:rgba(0,0,0,0.82); } .profile-select-content{ width:min(100% - 2rem, 720px); margin:auto; text-align:center; padding:3rem 1.5rem 2.5rem; position:relative; } .profile-select-close{ position:absolute; top:1rem; right:1rem; } .profile-select-title{ font-size:2.4rem; font-weight:900; letter-spacing:-0.5px; margin-bottom:0.4rem; } .profile-select-subtitle{ color:var(--text-secondary); font-size:0.95rem; margin-bottom:2.2rem; } .profile-select-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; margin-bottom:1.6rem; } .profile-card{ display:flex; flex-direction:column; align-items:center; gap:0.7rem; background:transparent; border:none; cursor:pointer; padding:0.4rem; transition:transform 0.2s ease; } .profile-card:hover{ transform:translateY(-4px); } .profile-card-name{ color:var(--text-secondary); font-size:0.9rem; font-weight:600; transition:color 0.2s ease; } .profile-card:hover .profile-card-name{ color:#fff; } .profile-add-card{ display:inline-flex; flex-direction:column; align-items:center; gap:0.7rem; background:transparent; border:none; cursor:pointer; padding:0.4rem; } .profile-avatar{ --profile-color:var(--accent); width:110px; height:110px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(145deg, color-mix(in srgb, var(--profile-color) 70%, #000), var(--profile-color)); color:#fff; font-size:2.6rem; font-weight:900; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.45); border:3px solid rgba(255,255,255,0.08); transition:border-color 0.2s ease, box-shadow 0.2s ease; } .profile-card:hover .profile-avatar, .profile-add-card:hover .profile-avatar{ border-color:var(--accent); box-shadow:0 10px 34px rgba(var(--accent-rgb),0.35); } .profile-avatar.mini{ width:30px; height:30px; font-size:0.85rem; border-radius:7px; border-width:2px; } .profile-avatar.add{ background:rgba(255,255,255,0.06); border:2px dashed rgba(255,255,255,0.35); color:#aaa; font-size:2rem; } .profile-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; } .profile-avatar-letter{ display:block; } .profile-manage-btn{ margin-top:0.6rem; padding:0.6rem 1.4rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.18); border-radius:8px; color:var(--text-secondary); font-size:0.85rem; font-weight:700; cursor:pointer; font-family:inherit; transition:var(--transition); } .profile-manage-btn:hover{ color:#fff; border-color:var(--accent); background:rgba(var(--accent-rgb),0.12); } /* Formulaire profil (création / édition) */ .profile-form{ text-align:center; } .profile-preview{ width:110px; height:110px; margin:0 auto 1rem; display:grid; place-items:center; border-radius:12px; background:linear-gradient(145deg,#3a3a3a,#222); color:#ccc; font-size:2.4rem; font-weight:900; overflow:hidden; border:3px solid rgba(255,255,255,0.1); } .profile-preview-img{ width:100%; height:100%; object-fit:cover; display:block; } .profile-upload-btn{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 1.2rem; background:rgba(var(--accent-rgb),0.14); border:1px solid rgba(var(--accent-rgb),0.4); border-radius:8px; color:#fff; font-size:0.85rem; font-weight:700; cursor:pointer; transition:var(--transition); } .profile-upload-btn:hover{ background:rgba(var(--accent-rgb),0.25); } /* Gestion des profils */ .profile-manager-list{ display:flex; flex-direction:column; gap:0.6rem; } .profile-manager-row{ display:flex; align-items:center; gap:0.8rem; padding:0.55rem 0.7rem; background:var(--bg-card); border:1px solid rgba(255,255,255,0.08); border-radius:8px; } .profile-manager-name{ flex:1; font-weight:600; font-size:0.9rem; } .profile-empty{ color:var(--text-muted); text-align:center; padding:1rem; } /* Bouton profil dans la navbar */ .nav-profile-btn{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.25rem 0.5rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:8px; cursor:pointer; transition:var(--transition); margin-right:0.3rem; } .nav-profile-btn:hover{ border-color:var(--accent); background:rgba(var(--accent-rgb),0.12); } .nav-profile-name{ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.78rem; font-weight:700; color:#ddd; } /* ============================================================ MULTI-PROFILS — Écran "Qui regarde ?" STYLE NETFLIX Plein écran, fond sombre flouté, animations échelonnées ============================================================ */ /* Fond plein écran avec flou artistique + halo rouge/bleu */ #profileSelectModal.profile-select-modal{ background: radial-gradient(1100px 700px at 18% 8%, rgba(var(--accent-rgb),0.18), transparent 55%), radial-gradient(900px 650px at 85% 88%, rgba(79,124,255,0.15), transparent 55%), radial-gradient(700px 500px at 55% 50%, rgba(255,255,255,0.03), transparent 60%), linear-gradient(165deg, #0b0b11 0%, #050508 55%, #0a0a12 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 4000; } /* Conteneur : apparition en fondu + zoom léger à l'ouverture */ #profileSelectModal.profile-select-modal .profile-select-content{ width: min(100% - 2rem, 780px); max-height: 92vh; overflow-y: auto; margin: auto; text-align: center; padding: 2.2rem 1rem 2.6rem; position: relative; animation: profileScreenIn .5s cubic-bezier(.22,.9,.3,1.15) both; } @keyframes profileScreenIn{ from{ opacity:0; transform: translateY(16px) scale(.98); } to{ opacity:1; transform: none; } } /* Transition de SORTIE (clic sur un profil) : fondu + zoom arrière */ #profileSelectModal.profile-select-modal.leaving .profile-select-content{ animation: none; opacity: 0; transform: scale(.96); transition: opacity .3s ease, transform .3s ease; } /* Cartes : apparition échelonnée (fade + montée) */ #profileSelectModal.profile-select-modal .profile-card{ opacity: 0; animation: profileCardIn .55s cubic-bezier(.2,.85,.3,1.15) forwards; } @keyframes profileCardIn{ from{ opacity:0; transform: translateY(22px) scale(.9); } to{ opacity:1; transform: none; } } /* Avatar : zoom léger + bordure lumineuse au survol */ #profileSelectModal.profile-select-modal .profile-avatar{ transition: transform .3s cubic-bezier(.2,.8,.3,1.25), border-color .25s ease, box-shadow .3s ease; } #profileSelectModal.profile-select-modal .profile-card:hover .profile-avatar{ transform: scale(1.1) rotate(-2deg); border-color: rgba(255,255,255,.95); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.5), 0 0 28px rgba(var(--accent-rgb),.55), 0 18px 44px rgba(0,0,0,.65); } #profileSelectModal.profile-select-modal .profile-card:hover .profile-card-name{ color:#fff; text-shadow: 0 0 14px rgba(var(--accent-rgb),.85); } /* Bouton "+ Ajouter" : apparition en dernier, même animation */ #profileSelectModal.profile-select-modal .profile-add-card{ opacity: 0; animation: profileCardIn .55s cubic-bezier(.2,.85,.3,1.15) forwards; } #profileSelectModal.profile-select-modal .profile-add-card .profile-avatar:hover{ transform: scale(1.1); border-color: var(--accent); box-shadow: 0 0 22px rgba(var(--accent-rgb),.4); } /* ============================================================ SLIDER DE COULEUR (avatar) — barre arc-en-ciel ============================================================ */ .profile-color-slider-wrap{ display: flex; align-items: center; gap: 0.9rem; margin-top: 0.5rem; } .profile-color-slider{ -webkit-appearance: none; appearance: none; flex: 1; height: 12px; border-radius: 999px; background: linear-gradient(to right, #e50914, #ff5e00, #ffb300, #ffe600, #4ade80, #22d3ee, #4f7cff, #8b5cf6, #e50914); background-size: 100% 100%; outline: none; cursor: pointer; border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); } .profile-color-slider::-webkit-slider-thumb{ -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid #111; box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 3px 10px rgba(0,0,0,.55); cursor: grab; transition: transform .15s ease; } .profile-color-slider::-webkit-slider-thumb:hover{ transform: scale(1.18); } .profile-color-slider::-webkit-slider-thumb:active{ cursor: grabbing; transform: scale(1.05); } .profile-color-slider::-moz-range-thumb{ width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid #111; box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 3px 10px rgba(0,0,0,.55); cursor: grab; } .profile-color-swatch{ width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; border: 2px solid rgba(255,255,255,.28); box-shadow: 0 0 16px rgba(0,0,0,.55); transition: background .1s linear; } /* L'aperçu de l'avatar reflète la couleur du slider en temps réel */ .profile-preview{ background: linear-gradient(145deg, color-mix(in srgb, var(--profile-color, #e50914) 78%, #000), var(--profile-color, #e50914)); } .profile-preview .profile-avatar-letter{ color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,.45); } /* ============================================================ CALQUES (z-index) — Modales de profils ------------------------------------------------------------ Structure des niveaux demandée : • Niveau 1 (base) : site / catalogue principal • Niveau 2 : écran "Qui regarde ?" + "Gérer les profils" • Niveau 3 (absolu) : popups d'action "Ajouter un profil" et "Modifier un profil" ------------------------------------------------------------ `.modal` de base est à z-index:3000. L'écran "Qui regarde ?" était à 4000, donc les popups (3000) passaient DERRIÈRE lui. Correction : on monte "Gérer les profils" au niveau 2 (4000) et les popups de création/édition au niveau 3 (5000), toujours au premier plan. (Le fond sombre de chaque modale suit sa modale.) ============================================================ */ #profileSelectModal.profile-select-modal, #profileManagerModal{ z-index: 4000; /* Niveau 2 — écrans de sélection et de gestion */ } #createProfileModal{ z-index: 5000; /* Niveau 3 — premier plan absolu (Ajouter / Modifier) */ } /* ============================================================ PROFILS — Palette de couleurs ÉTENDUE (blanc, gris, noir + couleurs) ============================================================ */ /* Le dégradé du slider doit correspondre aux stops de PROFILE_COLOR_STOPS */ .profile-color-slider{ background: linear-gradient(to right, #e50914, #ff5e00, #ffb300, #ffe600, #86ef3f, #22c55e, #22d3ee, #4f7cff, #8b5cf6, #d946ef, #ff2d95, #ffffff, #d4d4d8, #a1a1aa, #71717a, #3f3f46, #000000) !important; } /* Photo importée → slider désactivé et grisé */ .profile-color-slider:disabled{ opacity: 0.5 !important; cursor: not-allowed !important; } .profile-color-slider:disabled::-webkit-slider-thumb{ cursor: not-allowed !important; } .profile-color-slider:disabled::-moz-range-thumb{ cursor: not-allowed !important; } /* Bordure/contour de couleur masquée autour de la photo importée */ .profile-preview.has-photo{ background: #000 !important; border: 3px solid rgba(255,255,255,0.12) !important; box-shadow: none !important; } /* ============================================================ AVATAR PARFAITEMENT ROND (header / navigation) ============================================================ */ .profile-avatar.round{ border-radius: 50% !important; } .profile-avatar.round .profile-avatar-img, .profile-avatar.round img{ border-radius: 50%; object-fit: cover; } /* ============================================================ CROPPER — Rognage / recadrage de la photo de profil ============================================================ */ .crop-stage{ position: relative; width: 100%; aspect-ratio: 1 / 1; flex: 1; overflow: hidden; border-radius: 12px; background: #000; border: 1px solid rgba(255,255,255,0.15); cursor: grab; touch-action: none; /* drag tactile natif désactivé (géré par pointer events) */ box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .crop-stage img{ position: absolute; left: 0; top: 0; max-width: none; max-height: none; user-select: none; -webkit-user-drag: none; pointer-events: none; /* le drag est géré par le stage */ will-change: transform; } .crop-preview-side{ display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .crop-preview-label{ font-size: 0.72rem; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); } .crop-preview-canvas{ width: 112px; height: 112px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.22); background: #000; box-shadow: 0 0 22px rgba(var(--accent-rgb),0.25); } .crop-zoom-row{ display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; } .crop-zoom-btn{ width: 40px; height: 40px; display: grid; place-items: center; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; color: #ddd; font-size: 0.9rem; cursor: pointer; transition: var(--transition); } .crop-zoom-btn:hover{ color: #fff; border-color: var(--accent); background: rgba(var(--accent-rgb),0.14); } /* ============================================================ CALQUES — Modale "Ajuster la photo" (rognage) Premier plan ABSOLU : au-dessus de TOUTES les modales de profils (sélection 4000, gestion 4000, création/édition 5000). ============================================================ */ #cropModal{ z-index: 10000 !important; /* au-dessus de tout */ } /* Layout du cadre : largeur stable dans la ligne (flex), jamais écrasée */ #cropModal .crop-main-row{ display: flex; align-items: center; gap: 1rem; } #cropModal .crop-stage{ flex: 1 1 auto; width: auto; min-width: 0; } /* ============================================================ CROPPER — Cadre de sélection interactif (style Cropper.js) Bordure et lignes aux couleurs du site (rouge / violet), fond sombre ============================================================ */ .crop-box{ position: absolute; z-index: 5; border: 2px solid var(--accent); /* rouge ZenFlix */ box-shadow: 0 0 0 9999px rgba(0,0,0,0.55); /* assombrir l'extérieur du cadre */ box-sizing: border-box; touch-action: none; cursor: move; } /* Lignes de guidage : tiers (grille) + diagonales facultatives */ .crop-grid{ position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } .crop-grid i{ border: 1px solid rgba(var(--accent-rgb),0.55); margin: -1px; /* fusionne les bordures */ } /* Poignées aux coins : carrés blancs avec bordure rouge/violette */ .crop-handle{ position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--accent); border-radius: 3px; z-index: 6; touch-action: none; } .crop-handle[data-dir="nw"]{ top:-8px; left:-8px; cursor:nwse-resize; } .crop-handle[data-dir="ne"]{ top:-8px; right:-8px; cursor:nesw-resize; } .crop-handle[data-dir="sw"]{ bottom:-8px; left:-8px; cursor:nesw-resize; } .crop-handle[data-dir="se"]{ bottom:-8px; right:-8px; cursor:nwse-resize; } .crop-handle[data-dir="n"]{ top:-8px; left:50%; transform:translateX(-50%); cursor:ns-resize; } .crop-handle[data-dir="s"]{ bottom:-8px; left:50%; transform:translateX(-50%); cursor:ns-resize; } .crop-handle[data-dir="w"]{ left:-8px; top:50%; transform:translateY(-50%); cursor:ew-resize; } .crop-handle[data-dir="e"]{ right:-8px; top:50%; transform:translateY(-50%); cursor:ew-resize; } .crop-handle:hover{ background:var(--accent); } /* ============================================================ PROFILS — Filtre Noir & Blanc (photo de profil) ============================================================ */ /* Filtre appliqué sur l'aperçu ET les avatars affichés */ .profile-preview-img.bw, .profile-avatar-img.bw{ filter: grayscale(1) !important; } /* Toggle Noir & Blanc (interrupteur) */ .profile-bw-toggle{ display: flex; align-items: center; gap: 0.7rem; cursor: pointer; user-select: none; } .profile-bw-toggle input{ position: absolute; opacity: 0; width: 0; height: 0; } .profile-bw-slider{ position: relative; width: 44px; height: 24px; flex: 0 0 auto; background: #333; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); transition: background 0.25s ease, border-color 0.25s ease; } .profile-bw-slider::after{ content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.25s cubic-bezier(.2,.8,.3,1.2); box-shadow: 0 2px 5px rgba(0,0,0,0.5); } .profile-bw-toggle input:checked + .profile-bw-slider{ background: var(--accent); border-color: var(--accent); } .profile-bw-toggle input:checked + .profile-bw-slider::after{ transform: translateX(20px); } .profile-bw-label{ color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; } /* ============================================================ CALQUES — Pop-up "Souhaitez-vous recadrer ?" (cropAskModal) Premier plan ABSOLU (999999) : au-dessus de TOUT (formulaire profil 5000, crop 10000, etc.). Sinon elle passait derrière la fenêtre de création/édition de profil et devenait inaccessible. ============================================================ */ #cropAskModal{ z-index: 999999 !important; } /* ============================================================ CROPPER — Poignées PLUS LARGES et plus fiables (mobile inclus) ============================================================ */ .crop-handle{ width: 20px; height: 20px; border-radius: 5px; } /* Ajustements de position pour la nouvelle taille */ .crop-handle[data-dir="nw"]{ top:-11px; left:-11px; } .crop-handle[data-dir="ne"]{ top:-11px; right:-11px; } .crop-handle[data-dir="sw"]{ bottom:-11px; left:-11px; } .crop-handle[data-dir="se"]{ bottom:-11px; right:-11px; } .crop-handle[data-dir="n"]{ top:-11px; } .crop-handle[data-dir="s"]{ bottom:-11px; } .crop-handle[data-dir="w"]{ left:-11px; } .crop-handle[data-dir="e"]{ right:-11px; } /* Zone tactile étendue autour de chaque poignée (facilite l'attrape) */ .crop-handle::after{ content: ''; position: absolute; inset: -8px; /* zone d'attrape 36px de côté */ border-radius: 6px; } /* ============================================================ ZENFLIX — MENU PARAMÈTRES (slide-over) Ajouté en v2.7.0. Tout est préfixé .zf-settings / .zf-set pour ne jamais entrer en collision avec les styles existants. ============================================================ */ /* --- Bouton engrenage dans la navbar --- */ .zf-gear-btn { background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--transition); line-height: 0; } .zf-gear-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); } .zf-gear-btn:hover svg { transform: rotate(60deg); } .zf-gear-btn svg { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .zf-gear-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- Voile derrière le panneau --- */ .zf-settings-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 5500; } .zf-settings-backdrop.open { opacity: 1; visibility: visible; } /* --- Panneau latéral --- */ .zf-settings-panel { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100vw); background: var(--bg-secondary); border-left: 1px solid var(--border); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 5600; display: flex; flex-direction: column; overflow: hidden; } .zf-settings-panel.open { transform: translateX(0); } .zf-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--border); background: var(--bg-primary); flex-shrink: 0; } .zf-settings-header h2 { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 0.6rem; margin: 0; } .zf-settings-header h2 i { color: var(--accent); } .zf-settings-close { background: none; border: none; color: var(--text-secondary); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.35rem 0.6rem; border-radius: var(--radius); transition: var(--transition); } .zf-settings-close:hover { color: var(--text-primary); background: var(--bg-hover); } .zf-settings-body { padding: 1.2rem 1.6rem 2rem; overflow-y: auto; flex: 1; scrollbar-width: thin; } .zf-settings-body::-webkit-scrollbar { width: 8px; } .zf-settings-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .zf-set-group { margin-bottom: 1.9rem; } .zf-set-group > label, .zf-set-title { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 0.8rem; } .zf-set-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.5rem; line-height: 1.45; } /* --- Grille de thèmes (aperçus visuels) --- */ .zf-theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; } .zf-theme-card { position: relative; border: 2px solid var(--border); border-radius: 10px; padding: 0; cursor: pointer; overflow: hidden; background: none; transition: var(--transition); text-align: left; font-family: inherit; } .zf-theme-card:hover { border-color: var(--text-secondary); transform: translateY(-2px); } .zf-theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22); } .zf-theme-swatch { height: 54px; display: flex; align-items: flex-end; padding: 0.45rem; gap: 0.3rem; } .zf-theme-swatch span { display: block; height: 8px; border-radius: 3px; } .zf-theme-swatch .s1 { width: 42%; background: currentColor; opacity: 0.95; } .zf-theme-swatch .s2 { width: 26%; background: #ffffff; opacity: 0.55; } .zf-theme-swatch .s3 { width: 16%; background: #ffffff; opacity: 0.25; } .zf-theme-name { display: block; padding: 0.5rem 0.6rem 0.6rem; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); background: var(--bg-card); } .zf-theme-card.active .zf-theme-name { color: var(--accent); } /* --- Palette de couleurs d'accentuation --- */ .zf-accent-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .zf-accent-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); } .zf-accent-dot:hover { transform: scale(1.14); } .zf-accent-dot.active { border-color: var(--text-primary); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); } .zf-accent-dot.active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,0.7); } .zf-accent-custom { width: 34px; height: 34px; padding: 0; border: 2px dashed var(--border); border-radius: 50%; background: var(--bg-card); cursor: pointer; overflow: hidden; } .zf-accent-custom::-webkit-color-swatch-wrapper { padding: 2px; } .zf-accent-custom::-webkit-color-swatch { border: none; border-radius: 50%; } .zf-accent-custom::-moz-color-swatch { border: none; border-radius: 50%; } /* --- Segments (petite / moyenne / grande, etc.) --- */ .zf-seg { display: flex; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 3px; } .zf-seg button { flex: 1; background: none; border: none; color: var(--text-secondary); padding: 0.5rem 0.4rem; font-size: 0.82rem; font-weight: 600; font-family: inherit; border-radius: 6px; cursor: pointer; transition: var(--transition); white-space: nowrap; } .zf-seg button:hover { color: var(--text-primary); background: var(--bg-hover); } .zf-seg button.active { background: var(--accent); color: #fff; } /* --- Interrupteurs --- */ .zf-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); } .zf-switch-row:last-child { border-bottom: none; } .zf-switch-text { flex: 1; min-width: 0; } .zf-switch-text strong { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.15rem; } .zf-switch-text span { display: block; font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; } .zf-switch { position: relative; width: 44px; height: 25px; flex-shrink: 0; cursor: pointer; } .zf-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .zf-switch .zf-slider { position: absolute; inset: 0; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 25px; transition: var(--transition); } .zf-switch .zf-slider::before { content: ''; position: absolute; height: 17px; width: 17px; left: 3px; top: 3px; background: var(--text-secondary); border-radius: 50%; transition: var(--transition); } .zf-switch input:checked + .zf-slider { background: var(--accent); border-color: var(--accent); } .zf-switch input:checked + .zf-slider::before { transform: translateX(19px); background: #fff; } .zf-switch input:focus-visible + .zf-slider { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- Pied du panneau --- */ .zf-settings-footer { padding: 1rem 1.6rem 1.3rem; border-top: 1px solid var(--border); background: var(--bg-primary); flex-shrink: 0; display: flex; flex-direction: column; gap: 0.6rem; } .zf-set-reset { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: 0.65rem 1rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: var(--transition); } .zf-set-reset:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.08); } .zf-set-scope { font-size: 0.72rem; color: var(--text-muted); text-align: center; line-height: 1.45; } .zf-set-scope b { color: var(--text-secondary); font-weight: 600; } /* --- Petit retour visuel “enregistré” --- */ .zf-set-saved { position: fixed; bottom: 24px; right: 24px; background: var(--bg-card); border: 1px solid var(--accent); color: var(--text-primary); padding: 0.7rem 1.1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 5700; } .zf-set-saved.show { opacity: 1; transform: translateY(0); } /* --- Mobile --- */ @media (max-width: 600px) { .zf-settings-panel { width: 100vw; } .zf-theme-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { /* L'engrenage reste visible même quand les liens de nav passent en drawer */ .zf-gear-btn { display: flex; } } /* ============================================================ THÈME CLAIR — CORRECTIONS DE LISIBILITÉ Le CSS d'origine a été écrit pour un fond noir : ~69 règles fixent « color: white » et de nombreux fonds translucides sont en rgba(255,255,255,α), invisibles sur clair. Ce bloc, placé en fin de fichier, les rétablit. ============================================================ */ /* --- Textes qui étaient blancs sur fond sombre --- */ [data-theme="light"] .category-title, [data-theme="light"] .seasons-header-title, [data-theme="light"] .season-name, [data-theme="light"] .season-tech-grid strong, [data-theme="light"] .stream-top-title, [data-theme="light"] .download-provider-line strong, [data-theme="light"] .watch-player-message h2, [data-theme="light"] .tv-player-welcome h2, [data-theme="light"] .tv-player-channel-identity strong, [data-theme="light"] .tv-player-message h2, [data-theme="light"] .profile-preview .profile-avatar-letter, [data-theme="light"] .ep-btn { color: var(--text-primary); } [data-theme="light"] .profile-card:hover .profile-card-name, [data-theme="light"] #profileSelectModal.profile-select-modal .profile-card:hover .profile-card-name { color: var(--text-primary); } /* --- Champs de saisie --- */ [data-theme="light"] .account-field input, [data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .form-group textarea, [data-theme="light"] .search-overlay-input, [data-theme="light"] .tv-search input, [data-theme="light"] .download-global-search input { color: var(--text-primary); background: var(--bg-secondary); border-color: var(--border); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text-muted); } /* --- Boutons « fantômes » (fond transparent, texte blanc) --- */ [data-theme="light"] .search-toggle, [data-theme="light"] .search-close, [data-theme="light"] .back-btn, [data-theme="light"] .mobile-menu-btn, [data-theme="light"] .btn-auth { color: var(--text-primary); } [data-theme="light"] .btn-auth:hover, [data-theme="light"] .mobile-menu-btn:hover, [data-theme="light"] .home-btn.secondary:hover { background: rgba(0, 0, 0, 0.06); } /* --- Surfaces translucides blanches → translucides noires --- */ [data-theme="light"] .meta-tag.quality, [data-theme="light"] .download-quality-default, [data-theme="light"] .tv-legal-note, [data-theme="light"] .wp-hub-card-icon, [data-theme="light"] .diag-footer-btn, [data-theme="light"] .profile-avatar.add, [data-theme="light"] .profile-manage-btn, [data-theme="light"] .nav-profile-btn { background: rgba(0, 0, 0, 0.05); color: var(--text-primary); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.25); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); } [data-theme="light"] .modal-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); } /* --- Cartes, modales, listes --- */ [data-theme="light"] .film-card, [data-theme="light"] .watch-source-card, [data-theme="light"] .tv-channel-card, [data-theme="light"] .toast-item, [data-theme="light"] .download-pagination button{ background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); } [data-theme="light"] .film-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); } [data-theme="light"] .film-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); } /* --- Héros : le dégradé sombre reste nécessaire au-dessus de l'image --- */ [data-theme="light"] .hero-genre { background: rgba(0, 0, 0, 0.35); color: #fff; } [data-theme="light"] .hero-btn.primary:hover { background: rgba(255, 255, 255, 0.9); } /* --- Le lecteur vidéo et les overlays restent volontairement sombres --- */ [data-theme="light"] .stream-btn-back, [data-theme="light"] .stream-btn-icon, [data-theme="light"] .stream-show-btn, [data-theme="light"] .carousel-nav, [data-theme="light"] .film-card .continue-badge, [data-theme="light"] .continue-row .continue-delete-btn { color: #fff; } /* --- Contraste élevé en thème clair (les valeurs par défaut sont pour le sombre) --- */ [data-theme="light"][data-contrast="high"] { --text-secondary: #23282f; --text-muted: #3d444d; --border: #6a717b; } /* --- Panneau Paramètres en thème clair --- */ [data-theme="light"] .zf-settings-backdrop { background: rgba(20, 23, 28, 0.45); } [data-theme="light"] .zf-theme-card { background: var(--bg-secondary); } [data-theme="light"] .zf-seg { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .zf-slider { background: rgba(0, 0, 0, 0.12); } /* ============================================================ AGRANDISSEMENT AU SURVOL (menu Paramètres → Lecture & contenu) ============================================================ */ [data-hover-zoom="off"] .film-card:hover { transform: none; } [data-hover-zoom="off"] .film-card:hover .film-card-poster { transform: none; } /* ============================================ PAGE DE LECTURE — interface streaming (restaurée v2.8.2) Bandeau titre + colonne "Sources disponibles" + barre du lecteur. Le lecteur lui-même reste le lecteur ZenFlix (.zfp-*) ci-dessous. ============================================ */ .watch-page-heading { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 2rem; margin-bottom: 1.25rem; padding: 1.6rem 1.8rem; background: radial-gradient(circle at 90% 0%, rgba(var(--accent-rgb), 0.18), transparent 32%), linear-gradient(135deg, #171717, #090909); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; } .watch-back-btn { margin: 0; white-space: nowrap; } .watch-back-btn i { margin-right: 0.45rem; } .watch-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.45rem; color: var(--accent); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .watch-page-heading h1 { margin: 0 0 0.3rem; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05; letter-spacing: -0.035em; } .watch-page-heading p { color: var(--text-secondary); font-size: 0.92rem; } .watch-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 1.2rem; } .watch-panel-heading { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; background: #141414; border-bottom: 1px solid rgba(255, 255, 255, 0.09); color: #f3f3f3; font-size: 0.86rem; font-weight: 800; } .watch-source-count { min-width: 25px; height: 25px; display: inline-grid; place-items: center; padding: 0 0.4rem; background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 999px; color: var(--accent); font-size: 0.73rem; } .watch-source-list { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.75rem; } .watch-source-help { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0.75rem 0.75rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.035); border-radius: 7px; color: #777; font-size: 0.7rem; line-height: 1.45; } .watch-source-help i { flex: 0 0 auto; color: var(--accent); margin-top: 0.1rem; } .watch-no-sources { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: 1rem; color: #777; text-align: center; } .watch-no-sources i { color: var(--accent); font-size: 1.5rem; } .watch-no-sources strong { color: #ddd; font-size: 0.9rem; } .watch-no-sources span { font-size: 0.72rem; line-height: 1.45; } .watch-player-bar { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.8rem; background: linear-gradient(180deg, #161616, #0d0d0d); border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .watch-player-identity { min-width: 0; display: flex; align-items: center; gap: 0.7rem; } .watch-player-identity > div { min-width: 0; display: flex; flex-direction: column; } .watch-player-identity strong { overflow: hidden; color: #fff; font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; } .watch-identity-brand { display: inline-flex; align-items: center; line-height: 0; } .watch-identity-brand img { display: block; height: 18px; width: auto; border-radius: 4px; } .watch-player-identity span { overflow: hidden; color: #707070; font-size: 0.69rem; text-overflow: ellipsis; white-space: nowrap; } .watch-hint-row{ display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; } @media (max-width: 1050px) { .watch-layout { grid-template-columns: 1fr; } .watch-sources-panel { grid-row: 2; } .watch-source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .watch-page-heading { grid-template-columns: 1fr; align-items: start; gap: 1.1rem; padding: 1.3rem; } .watch-back-btn { width: fit-content; } .watch-page-heading h1 { font-size: 2rem; } .watch-source-list { grid-template-columns: 1fr; } } @media (max-width: 480px) { .watch-player-bar { min-height: 52px; } .watch-player-identity span { max-width: 160px; } } /* ============================================================ LECTEUR ZENFLIX — habillage immersif (.zfp-*) ------------------------------------------------------------ Refonte complète de l'interface du lecteur vidéo, partagée par la page de lecture streaming ET la Watch Party. Barre haute : logo + titre + état + fermeture. Barre basse : progression pleine largeur puis contrôles. Aucun sélecteur de piste audio ni de qualité (volontaire). ============================================================ */ /* ---- Page de lecture : scène plein cadre ---- */ .watch-stage-wrap { width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 32px); } body.zf-watching #watchPage .watch-stage-wrap { padding: 0; max-width: none; } #watchPage .watch-player-stage, .watch-stage-wrap .watch-player-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 0; max-height: calc(100dvh - 70px); background: #000; border: none; border-radius: 0; overflow: hidden; } /* ---- Coque du lecteur ---- */ .zfp-shell { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; outline: none; font-family: inherit; -webkit-tap-highlight-color: transparent; } .watch-player-stage > .zfp-shell, .wpr-player-stage > .zfp-shell { border-radius: 0; } /* La scène est une grille centrée (place-items:center) : tout enfant occupant le cadre entier doit s'étirer, sinon il flotte au milieu (cas des sources externes en iframe). */ .watch-player-stage > .zfp-shell, .watch-player-stage > .watch-stream-iframe, .watch-player-stage > .watch-player-loading { grid-area: 1 / 1; align-self: stretch; justify-self: stretch; width: 100%; height: 100%; } .zfp-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; } /* ============ BARRE SUPÉRIEURE ============ */ .zfp-top { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 18px 22px 44px; background: linear-gradient(to bottom, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.45) 45%, transparent 100%); transition: opacity 0.28s ease, transform 0.28s ease; pointer-events: none; } .zfp-top > * { pointer-events: auto; } .zfp-top-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .zfp-brand { display: inline-flex; align-items: center; line-height: 0; white-space: nowrap; } .zfp-brand img { display: block; height: 26px; width: auto; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 16px rgba(var(--accent-rgb), 0.35); } .zfp-titles { min-width: 0; } .zfp-title { margin: 0; font-size: 1.02rem; font-weight: 700; color: #fff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(52vw, 640px); text-shadow: 0 2px 10px rgba(0,0,0,0.7); } .zfp-subtitle { margin: 2px 0 0; font-size: 0.7rem; font-weight: 500; color: rgba(255,255,255,0.62); letter-spacing: 0.2px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zfp-sep { color: rgba(255,255,255,0.32); } .zfp-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 229,9,20), 0.6); animation: zfpPulse 2s infinite; flex: 0 0 6px; } @keyframes zfpPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 229,9,20), 0.55); } 70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb, 229,9,20), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 229,9,20), 0); } } .zfp-top-actions { display: flex; align-items: center; gap: 10px; } .zfp-close { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; background: rgba(255,255,255,0.10); color: #fff; font-size: 1rem; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .zfp-close:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.06); } /* ============ BOUTON CENTRAL ============ */ .zfp-shell .zfp-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 25; width: 78px; height: 78px; border-radius: 50%; border: none; background: rgba(0,0,0,0.42); color: #fff; font-size: 1.7rem; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 8px 30px rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease; pointer-events: none; } .zfp-shell.zfp-paused .zfp-center, .zfp-shell:hover .zfp-center { opacity: 1; pointer-events: auto; } .zfp-shell .zfp-center:hover { background: var(--accent); transform: translate(-50%, -50%) scale(1.07); } .zfp-shell .zfp-center i { margin-left: 3px; } .zfp-shell.zfp-paused .zfp-center i.fa-pause { margin-left: 0; } /* ============ INDICATEUR ±10 s ============ */ .zfp-seek-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); z-index: 26; padding: 10px 18px; border-radius: 999px; background: rgba(0,0,0,0.62); color: #fff; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.3px; backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .zfp-seek-hint.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } .zfp-seek-hint i { margin-right: 6px; } /* ============ BARRE INFÉRIEURE ============ */ .zfp-shell .zfp-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: block; gap: 0; /* 20 px de marge latérale : la barre de progression ne colle plus aux bords du lecteur. La rangée de contrôles s'aligne dessus. */ padding: 0 20px; margin: 0; border: none; background: linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.94) 62%, rgba(0,0,0,0.45) 88%, transparent 100%); backdrop-filter: none; transition: opacity 0.28s ease, transform 0.28s ease; } /* ---- Barre de progression ---- */ .zfp-progress-wrap { position: relative; width: 100%; height: 14px; display: flex; align-items: flex-end; cursor: pointer; /* Indispensable : sans cela le navigateur mobile interprète le glissement vertical comme un scroll et annule le pointermove du scrub. */ touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .zfp-progress-track { position: relative; width: 100%; height: 4px; border-radius: 0; background: rgba(255,255,255,0.22); transition: height 0.15s ease; } .zfp-progress-wrap.is-hovering .zfp-progress-track, .zfp-progress-wrap.is-scrubbing .zfp-progress-track { height: 6px; } .zfp-progress-buffer { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,255,255,0.32); } .zfp-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); border-radius: 0; } .zfp-progress-knob { position: absolute; right: -6px; top: 50%; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transform: translateY(-50%) scale(0); transition: transform 0.15s ease; box-shadow: 0 0 0 4px rgba(var(--accent-rgb, 229,9,20), 0.22); } .zfp-progress-wrap:hover .zfp-progress-knob, .zfp-progress-wrap.is-hovering .zfp-progress-knob, .zfp-progress-wrap.is-scrubbing .zfp-progress-knob { transform: translateY(-50%) scale(1); } /* Pendant le glissement, le curseur grossit pour rester visible sous le doigt */ .zfp-progress-wrap.is-scrubbing .zfp-progress-knob { transform: translateY(-50%) scale(1.35); } /* L'input range réel : invisible mais cliquable/glissable au-dessus */ /* v2.9.0 : le seek est calculé sur le rectangle de .zfp-progress-wrap. L'input range reste dans le DOM pour l'accessibilité (clavier, lecteurs d'écran) mais ne doit plus intercepter le pointeur, sinon il réimpose son mapping « course du thumb » qui décalait le clic de plusieurs secondes. */ .zfp-shell .zfp-progress-input, .zfp-shell input[type="range"].zfp-progress-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent !important; border: none; -webkit-appearance: none; appearance: none; opacity: 0; cursor: pointer; pointer-events: none; } /* Anneau de focus clavier sur la barre */ .zfp-shell .zfp-progress-input:focus-visible + .zfp-progress-track, .zfp-progress-wrap:focus-within .zfp-progress-track { box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 229,9,20), 0.65); } .zfp-shell .zfp-progress-input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: transparent; } .zfp-shell .zfp-progress-input::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: transparent; } .zfp-tooltip { position: absolute; bottom: 16px; transform: translateX(-50%); padding: 3px 8px; border-radius: 5px; background: rgba(0,0,0,0.85); color: #fff; font-size: 0.7rem; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .zfp-progress-wrap.is-hovering .zfp-tooltip, .zfp-progress-wrap.is-scrubbing .zfp-tooltip { opacity: 1; } /* Pendant un scrub tactile, l'aperçu remonte pour ne pas être masqué par le doigt */ .zfp-progress-wrap.is-scrubbing .zfp-tooltip { bottom: 24px; font-size: 0.78rem; padding: 5px 10px; font-weight: 700; } /* ---- Rangée des contrôles ---- */ .zfp-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0; padding: 6px 0 12px; } .zfp-controls-left, .zfp-controls-right { display: flex; align-items: center; gap: 6px; min-width: 0; } .zfp-controls-right { gap: 8px; } .zfp-shell .zfp-btn, .zfp-top .zfp-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 8px; background: transparent; color: rgba(255,255,255,0.92); font-size: 1rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .zfp-shell .zfp-btn:hover, .zfp-top .zfp-btn:hover { background: rgba(255,255,255,0.12); color: #fff; transform: scale(1.05); } .zfp-shell .zfp-btn:active { transform: scale(0.95); } .zfp-shell .zfp-btn-play { font-size: 1.18rem; } /* ---- Volume ---- */ .zfp-volume-group { display: flex; align-items: center; gap: 2px; margin-left: 2px; } .zfp-shell input[type="range"].zfp-volume { --vol-fill: 100%; width: 78px; height: 4px; margin: 0 6px 0 2px; padding: 0; border: none; border-radius: 999px; -webkit-appearance: none; appearance: none; cursor: pointer; background: linear-gradient(to right, #fff 0%, #fff var(--vol-fill), rgba(255,255,255,0.26) var(--vol-fill), rgba(255,255,255,0.26) 100%); transition: width 0.2s ease; } .zfp-shell input[type="range"].zfp-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5); } .zfp-shell input[type="range"].zfp-volume::-moz-range-thumb { width: 11px; height: 11px; border: none; border-radius: 50%; background: #fff; } /* ---- Temps ---- */ .zfp-shell .zfp-time { margin-left: 8px; font-size: 0.76rem; font-weight: 500; color: rgba(255,255,255,0.68); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: auto; text-align: left; } /* ---- Bouton « Sources » ---- */ .zfp-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.88); font-size: 0.76rem; font-weight: 600; font-family: inherit; cursor: pointer; max-width: 190px; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .zfp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zfp-chip i { font-size: 0.8rem; opacity: 0.8; } .zfp-chip:hover, .zfp-chip[aria-expanded="true"] { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.32); color: #fff; } /* ---- Menu des sources ---- */ .zfp-sources-menu { position: absolute; right: 20px; bottom: 62px; z-index: 40; width: 252px; max-height: 288px; overflow-y: auto; padding: 8px; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; background: rgba(16,16,16,0.96); box-shadow: 0 18px 42px rgba(0,0,0,0.6); backdrop-filter: blur(14px); opacity: 0; transform: translateY(8px) scale(0.98); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .zfp-sources-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .zfp-sources-title { margin: 2px 4px 8px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.42); } .zfp-source-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; border-radius: 8px; background: transparent; color: rgba(255,255,255,0.86); font-size: 0.8rem; font-family: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .zfp-source-item:hover { background: rgba(255,255,255,0.09); color: #fff; } .zfp-source-item.is-active { background: rgba(var(--accent-rgb, 229,9,20), 0.16); color: #fff; } .zfp-source-item.is-active i { color: var(--accent); margin-left: auto; } .zfp-source-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zfp-source-meta { font-size: 0.68rem; color: rgba(255,255,255,0.45); margin-left: auto; } .zfp-sources-empty { margin: 0; padding: 10px; font-size: 0.76rem; color: rgba(255,255,255,0.5); text-align: center; } /* ============ AUTO-MASQUAGE ============ */ .zfp-shell.wpr-ui-hidden .zfp-top { opacity: 0; transform: translateY(-14px); pointer-events: none; } .zfp-shell.wpr-ui-hidden .zfp-bottom { opacity: 0; transform: translateY(14px); pointer-events: none; } .zfp-shell.wpr-ui-hidden .zfp-center { opacity: 0; pointer-events: none; } .zfp-shell.wpr-ui-hidden .zfp-video { cursor: none; } /* ============ PLEIN ÉCRAN ============ */ .zfp-shell:fullscreen, .zfp-shell:-webkit-full-screen { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; background: #000; } .zfp-shell:fullscreen .zfp-video, .zfp-shell:-webkit-full-screen .zfp-video { width: 100%; height: 100%; object-fit: contain; } .zfp-shell:fullscreen .zfp-bottom, .zfp-shell:-webkit-full-screen .zfp-bottom { padding: 0 30px; } .zfp-shell:fullscreen .zfp-controls-row, .zfp-shell:-webkit-full-screen .zfp-controls-row { padding: 10px 0 20px; } .zfp-shell:fullscreen .zfp-top, .zfp-shell:-webkit-full-screen .zfp-top { padding: 26px 34px 52px; } .zfp-shell:fullscreen .zfp-title, .zfp-shell:-webkit-full-screen .zfp-title { font-size: 1.2rem; } /* ============ RESPONSIVE ============ */ @media (max-width: 900px) { .zfp-top { padding: 14px 14px 36px; } .zfp-shell .zfp-bottom { padding: 0 12px; } .zfp-controls-row { padding: 4px 0 10px; } .zfp-title { font-size: 0.9rem; max-width: 46vw; } .zfp-subtitle { font-size: 0.65rem; } .zfp-shell .zfp-center { width: 62px; height: 62px; font-size: 1.4rem; } .zfp-shell input[type="range"].zfp-volume { width: 56px; } .zfp-sources-menu { right: 12px; width: min(252px, calc(100vw - 32px)); } } @media (max-width: 620px) { .zfp-brand img { height: 22px; } .zfp-close { width: 34px; height: 34px; font-size: 0.9rem; } .zfp-shell .zfp-btn, .zfp-top .zfp-btn { width: 34px; height: 34px; font-size: 0.94rem; } /* Le curseur de volume est masqué : le bouton muet suffit */ .zfp-shell input[type="range"].zfp-volume { display: none; } .zfp-shell .zfp-time { font-size: 0.68rem; margin-left: 4px; } .zfp-chip { max-width: 120px; padding: 0 9px; } .zfp-controls-left, .zfp-controls-right { gap: 2px; } } /* ============================================================ v2.9.0 — LECTEUR TACTILE / MOBILE Objectif : contrôles confortables au doigt (cibles ≥ 44 px, recommandation WCAG 2.5.5 / HIG) et barre de contrôles qui ne déborde jamais, en portrait comme en paysage. ============================================================ */ @media (max-width: 768px) { /* --- Barre de progression : zone de contact élargie --- */ /* La piste reste fine visuellement, mais le conteneur offre une surface de 22 px, bien plus facile à attraper au doigt. */ .zfp-progress-wrap { height: 22px; align-items: center; padding: 8px 0 6px; box-sizing: content-box; } .zfp-progress-track { height: 5px; } .zfp-progress-wrap.is-hovering .zfp-progress-track, .zfp-progress-wrap.is-scrubbing .zfp-progress-track { height: 7px; } /* Curseur toujours visible sur mobile : pas d'état :hover au doigt */ .zfp-progress-knob { width: 14px; height: 14px; right: -7px; transform: translateY(-50%) scale(1); } .zfp-progress-wrap.is-scrubbing .zfp-progress-knob { transform: translateY(-50%) scale(1.4); } .zfp-tooltip { bottom: 26px; font-size: 0.75rem; } /* --- Barre inférieure : ne doit jamais déborder --- */ .zfp-shell .zfp-bottom { padding: 0 10px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); box-sizing: border-box; } .zfp-controls-row { gap: 0.35rem; padding: 2px 0 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); flex-wrap: nowrap; } .zfp-controls-left, .zfp-controls-right { gap: 2px; flex: 0 1 auto; min-width: 0; } /* --- Cibles tactiles : 44x44 px minimum --- */ .zfp-shell .zfp-btn, .zfp-top .zfp-btn, .zfp-close { width: 44px; height: 44px; font-size: 1.02rem; border-radius: 10px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .zfp-shell .zfp-btn-play { font-size: 1.22rem; } .zfp-shell .zfp-btn:active, .zfp-close:active { transform: scale(0.92); background: rgba(255,255,255,0.22); } /* --- Temps : compact mais lisible, jamais coupé --- */ .zfp-shell .zfp-time { font-size: 0.72rem; margin-left: 4px; flex-shrink: 0; } /* --- Bouton Sources --- */ .zfp-chip { height: 40px; max-width: 44px; padding: 0 12px; border-radius: 10px; flex-shrink: 0; } /* En dessous de 768 px on ne garde que l'icône : le libellé « Sources » est ce qui faisait déborder la rangée. */ .zfp-chip span { display: none; } .zfp-chip i { font-size: 0.95rem; opacity: 1; } .zfp-sources-menu { right: 10px; left: 10px; width: auto; max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* --- Volume : le slider disparaît, le bouton muet reste --- */ .zfp-shell input[type="range"].zfp-volume { display: none; } .zfp-volume-group { margin-left: 0; gap: 0; } /* --- Bandeau supérieur --- */ .zfp-top { padding: 10px 10px 34px; } .zfp-title { font-size: 0.88rem; max-width: 52vw; } .zfp-subtitle { font-size: 0.64rem; } .zfp-brand { font-size: 0.82rem; } /* --- Bouton central --- */ .zfp-shell .zfp-center { width: 64px; height: 64px; font-size: 1.4rem; } } /* --- Très petits écrans (portrait ≤ 480 px) --- */ @media (max-width: 480px) { /* Les sauts ±10 s sont accessibles par double-tap : on les retire de la rangée pour laisser respirer lecture / muet / temps. */ .zfp-shell #zfpBack10, .zfp-shell #zfpFwd10 { display: none; } .zfp-shell .zfp-btn, .zfp-top .zfp-btn, .zfp-close { width: 42px; height: 42px; } .zfp-shell .zfp-time { font-size: 0.68rem; } .zfp-title { max-width: 44vw; } .zfp-controls-row { gap: 0.25rem; } } /* --- Paysage sur téléphone : hauteur utile très réduite --- */ /* On compacte verticalement sans jamais rogner les cibles tactiles, et on respecte l'encoche latérale (safe-area) des iPhone. */ @media (max-height: 500px) and (orientation: landscape) { .zfp-top { padding: 8px 14px 28px; } .zfp-top, .zfp-shell .zfp-bottom { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } .zfp-controls-row { padding: 0 0 6px; gap: 0.4rem; } .zfp-progress-wrap { height: 18px; padding: 5px 0 4px; } .zfp-shell .zfp-btn, .zfp-top .zfp-btn, .zfp-close { width: 40px; height: 40px; font-size: 0.95rem; } .zfp-shell .zfp-center { width: 54px; height: 54px; font-size: 1.2rem; } .zfp-title { font-size: 0.85rem; } .zfp-subtitle { display: none; } /* En paysage la largeur ne manque pas : on réaffiche volume et libellé */ .zfp-shell input[type="range"].zfp-volume { display: block; width: 64px; } .zfp-chip { max-width: 150px; } .zfp-chip span { display: inline; } .zfp-sources-menu { max-height: 60vh; overflow-y: auto; } } /* --- Appareils sans survol : pas d'état :hover collant --- */ @media (hover: none) { .zfp-shell .zfp-btn:hover, .zfp-top .zfp-btn:hover { background: rgba(255,255,255,0.12); } .zfp-progress-knob { transform: translateY(-50%) scale(1); } } /* ============ THÈME CLAIR ============ */ /* Le lecteur reste volontairement sombre quel que soit le thème : c'est la convention des lecteurs vidéo (confort visuel). */ [data-theme="light"] .zfp-shell, [data-theme="light"] .zfp-video { background: #000; } [data-theme="light"] .zfp-title, [data-theme="light"] .zfp-shell .zfp-btn, [data-theme="light"] .zfp-close { color: #fff; } [data-theme="light"] .zfp-source-item { color: rgba(255,255,255,0.86); } /* Respect de la préférence « animations réduites » */ [data-motion="reduced"] .zfp-live-dot { animation: none; } [data-motion="reduced"] .zfp-top, [data-motion="reduced"] .zfp-bottom, [data-motion="reduced"] .zfp-center, [data-motion="reduced"] .zfp-sources-menu { transition: opacity 0.12s linear; } /* Masquage TOTAL des contrôles natifs sur la nouvelle coque */ .zfp-video::-webkit-media-controls, .zfp-video::-webkit-media-controls-enclosure, .zfp-video::-webkit-media-controls-panel, .zfp-video::-webkit-media-controls-play-button, .zfp-video::-webkit-media-controls-start-playback-button, .zfp-video::-webkit-media-controls-timeline, .zfp-video::-webkit-media-controls-current-time-display, .zfp-video::-webkit-media-controls-time-remaining-display, .zfp-video::-webkit-media-controls-mute-button, .zfp-video::-webkit-media-controls-volume-slider, .zfp-video::-webkit-media-controls-fullscreen-button { display: none !important; -webkit-appearance: none !important; } .zfp-video { outline: none; } .zfp-video:focus { outline: none; } /* Plein écran : les barres du nouveau lecteur passent au-dessus de tout (les règles héritées ciblent les anciennes classes .wpr-*). */ #wprCustomShell:fullscreen .zfp-top, #wprCustomShell:fullscreen .zfp-bottom, #wprCustomShell:-webkit-full-screen .zfp-top, #wprCustomShell:-webkit-full-screen .zfp-bottom { position: absolute; left: 0; right: 0; z-index: 2147483647; } #wprCustomShell:fullscreen .zfp-top, #wprCustomShell:-webkit-full-screen .zfp-top { top: 0; } #wprCustomShell:fullscreen .zfp-bottom, #wprCustomShell:-webkit-full-screen .zfp-bottom { bottom: 0; } #wprCustomShell:fullscreen .zfp-center, #wprCustomShell:-webkit-full-screen .zfp-center { z-index: 2147483646; } #wprCustomShell:fullscreen .zfp-video, #wprCustomShell:-webkit-full-screen .zfp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* Auto-masquage prioritaire, y compris en plein écran */ #wprCustomShell.wpr-ui-hidden .zfp-top { opacity: 0 !important; transform: translateY(-14px) !important; pointer-events: none !important; } #wprCustomShell.wpr-ui-hidden .zfp-bottom { opacity: 0 !important; transform: translateY(14px) !important; pointer-events: none !important; } #wprCustomShell.wpr-ui-hidden .zfp-center { opacity: 0 !important; pointer-events: none !important; } /* Safe-area iOS en plein écran */ @media (max-width: 768px) { #wprCustomShell:fullscreen .zfp-controls-row, #wprCustomShell:-webkit-full-screen .zfp-controls-row { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } #wprCustomShell:fullscreen .zfp-top, #wprCustomShell:-webkit-full-screen .zfp-top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); } } /* ---- Mode lecture immersif : le lecteur occupe tout le cadre ---- */ body.zf-watching .watch-page-container { width: 100%; max-width: none; min-height: 0; margin: 0; padding: 70px 0 0; /* juste sous la barre de navigation */ } body.zf-watching .footer { display: none; } body.zf-watching #watchPage .watch-player-stage { height: calc(100dvh - 70px); max-height: calc(100dvh - 70px); aspect-ratio: auto; } @media (max-width: 768px) { body.zf-watching .watch-page-container { padding-top: 60px; } body.zf-watching #watchPage .watch-player-stage { height: auto; aspect-ratio: 16 / 9; max-height: calc(100dvh - 60px); } } /* Watch Party : la coque du lecteur remplit la scène, coins arrondis conservés (le lecteur cohabite avec le chat, il n'est pas immersif). */ .wpr-player-stage > .zfp-shell { border-radius: 0; } .wpr-player-stage { overflow: hidden; } /* ============================================================ v2.9.1 — REFONTE MOBILE-FIRST La majorité du trafic ZenFlix vient du smartphone. Ce bloc est volontairement placé en fin de feuille pour primer sur les media queries historiques sans avoir à les réécrire. Sommaire : A. Confort tactile global (cibles 44px, tap-highlight, scroll) B. En-tête / navbar : pseudo lisible, jamais tronqué C. Bloc profil du tiroir mobile D. Modales & formulaires plein écran mobile E. Suggestions, playlists, listes F. Divers : footer, safe-area, paysage ============================================================ */ /* ---------- A. Confort tactile global ---------- */ @media (max-width: 768px) { /* Supprime le flash bleu iOS/Android au tap : géré par nos :active */ a, button, .film-card, .carousel-item, .nav-profile-btn, .username-display, .mobile-nav-link, .filter-btn, .like-btn { -webkit-tap-highlight-color: transparent; } /* Retour visuel immédiat au doigt (remplace :hover inopérant) */ button:active, .film-card:active, .mobile-nav-link:active, .filter-btn:active, .nav-profile-btn:active, .username-display:active { transform: scale(0.97); transition: transform 0.08s ease; } /* Cibles tactiles : 44px recommandés (WCAG 2.5.5 / HIG Apple) */ .search-toggle, .mobile-menu-btn, .close-modal, .mobile-drawer-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Inertie de scroll + pas de débordement horizontal parasite */ html, body { overflow-x: hidden; } body { -webkit-text-size-adjust: 100%; } /* Empêche le zoom automatique iOS à la mise au point d'un champ : il se déclenche sous 16px de font-size. */ input, select, textarea { font-size: 16px !important; } } /* ---------- B. En-tête / navbar ---------- */ @media (max-width: 768px) { .navbar { padding: 0.55rem 0; } .nav-container { padding: 0 0.75rem; gap: 0.5rem; flex-wrap: nowrap; min-height: 52px; } .nav-left { display: flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; } .nav-logo h1 { font-size: 1.35rem; } /* La zone actions ne doit jamais pousser le logo hors écran */ .nav-actions { gap: 0.4rem; min-width: 0; /* autorise le rétrécissement du flex item */ flex: 1 1 auto; justify-content: flex-end; } #authSection { min-width: 0; display: flex; justify-content: flex-end; } /* --- LE CORRECTIF CLÉ --- Avant : .user-profile était une rangée figée (avatar + pseudo + bouton Déconnexion) qui débordait de la navbar ; le pseudo se retrouvait tronqué, chevauché par le bouton, illisible. Après : sur téléphone on ne garde dans la barre QUE l'identité (avatar + pseudo). La déconnexion et le changement de profil migrent dans le tiroir latéral, qui a la place de les afficher. */ .user-profile { gap: 0.4rem; min-width: 0; max-width: 62vw; } .user-profile .logout-btn { display: none; } /* Le bouton profil se réduit à son avatar : le nom du profil est redondant avec le pseudo et volait la place disponible. */ .nav-profile-btn { padding: 0.2rem; margin-right: 0; flex: 0 0 auto; border-radius: 50%; } .nav-profile-name { display: none; } /* Pseudo : une seule ligne propre, ellipse maîtrisée, plus aucun chevauchement. La taille reste lisible (0.9rem mini). */ .username-display { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; padding: 0.35rem 0.55rem; font-size: 0.9rem; line-height: 1.2; border: 1px solid rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.08); border-radius: 999px; } .username-display .username-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; } /* Le badge ADMIN passe en pastille couronne : le mot « ADMIN » consommait à lui seul un tiers de la barre. */ .username-display > span[style] { display: none !important; } .username-display .fa-crown { margin-right: 0.3rem; flex: 0 0 auto; } /* Encoche / barre d'état iOS */ .navbar { padding-top: calc(0.55rem + env(safe-area-inset-top, 0px)); } .nav-container { padding-left: max(0.75rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); } } @media (max-width: 400px) { .nav-logo h1 { font-size: 1.2rem; } .username-display { font-size: 0.85rem; padding: 0.3rem 0.5rem; } .user-profile { max-width: 55vw; } } /* ---------- C. Bloc profil du tiroir mobile ---------- */ /* C'est ici que le pseudo est affiché EN ENTIER : le tiroir fait 275px de large et autorise le retour à la ligne. */ .mobile-drawer-profile { margin-bottom: 1.2rem; } .mobile-drawer-profile:empty { display: none; } .mdp-card { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.9rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; } .mdp-identity { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; min-width: 0; } .mdp-avatar { flex: 0 0 auto; display: inline-flex; } .mdp-avatar .profile-avatar.mini { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 50%; } .mdp-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; } /* Pseudo complet : on autorise la coupure de mot plutôt que l'ellipse, pour qu'un pseudo long reste intégralement lisible. */ .mdp-name { font-size: 1.02rem; font-weight: 800; color: var(--text-primary); line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; white-space: normal; } .mdp-role { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.3rem; } .mdp-role .fa-crown { color: gold; } .mdp-action { display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 42px; padding: 0.55rem 0.7rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px; color: var(--text-secondary); font-family: inherit; font-size: 0.85rem; font-weight: 600; text-align: left; cursor: pointer; transition: var(--transition); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mdp-action:active { background: rgba(var(--accent-rgb), 0.18); } .mdp-action i { flex: 0 0 auto; width: 16px; text-align: center; } .mdp-logout { color: #ff8a8a; border-color: rgba(255, 90, 90, 0.28); } .mobile-drawer-login { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 46px; background: var(--accent); border: none; border-radius: 10px; color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; } /* Tiroir : scrollable si le contenu dépasse, safe-area respectée */ .mobile-nav-drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: max(1.5rem, env(safe-area-inset-top, 0px)); padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); width: min(300px, 86vw); } .mobile-nav-link { min-height: 48px; } /* cible tactile confortable */ /* ---------- D. Modales & formulaires ---------- */ @media (max-width: 768px) { .modal { padding: 0; align-items: flex-end; } .modal-content { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; /* feuille glissante type natif */ padding: 1.5rem 1.15rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); margin: 0; } .modal-large { max-width: 100%; } .modal-header h2 { font-size: 1.2rem; } .form-group { margin-bottom: 1.1rem; } .form-group input, .form-group select, .form-group textarea, .account-field input { min-height: 46px; padding: 0.7rem 0.85rem; } .form-group textarea { min-height: 96px; } .submit-btn { width: 100%; min-height: 48px; } } /* ---------- E. Suggestions & listes ---------- */ @media (max-width: 768px) { .suggestion-item { padding: 1rem; } .suggestion-item-header { flex-direction: column; align-items: flex-start; gap: 0.4rem; } .suggestion-item-title { font-size: 1rem; overflow-wrap: anywhere; } .suggestion-author { overflow-wrap: anywhere; } .suggestion-item-footer { flex-wrap: wrap; gap: 0.5rem; row-gap: 0.6rem; } .like-btn, .delete-btn { min-height: 40px; } .suggestion-item-date { width: 100%; order: 3; } } /* ---------- F. Divers ---------- */ @media (max-width: 768px) { .footer { padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px)); } .toast-container { top: calc(20px + env(safe-area-inset-top, 0px)); } } /* Téléphone en paysage : la navbar mange trop de hauteur utile */ @media (max-height: 480px) and (orientation: landscape) { .navbar { padding: 0.3rem 0; } .nav-container { min-height: 42px; } .nav-logo h1 { font-size: 1.15rem; } .modal { align-items: center; } .modal-content { max-height: 96vh; border-radius: 12px; } } /* ================================================================ v2.9.2 — SOUS-TITRES (bouton CC + menu de sélection) ---------------------------------------------------------------- Le bouton reste masqué (attribut [hidden]) tant qu'aucune piste n'est détectée dans le flux. Menu = popover sur PC, bottom-sheet sur mobile (même modèle que les modales v2.9.1). ================================================================ */ .zfp-cc-btn { position: relative; } .zfp-cc-btn[hidden] { display: none !important; } .zfp-cc-btn.is-active { color: var(--accent); } .zfp-cc-btn.is-active i { color: var(--accent); } /* Pastille de rappel « sous-titres actifs » */ .zfp-cc-dot { position: absolute; right: 4px; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0.5); transition: opacity 0.18s ease, transform 0.18s ease; } .zfp-cc-btn.is-active .zfp-cc-dot { opacity: 1; transform: scale(1); } .zfp-cc-btn[aria-expanded="true"] { background: rgba(255,255,255,0.14); } .zfp-cc-menu { position: absolute; right: 20px; bottom: 62px; z-index: 41; width: 236px; max-height: 288px; overflow-y: auto; padding: 8px; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; background: rgba(16,16,16,0.96); box-shadow: 0 18px 42px rgba(0,0,0,0.6); backdrop-filter: blur(14px); opacity: 0; transform: translateY(8px) scale(0.98); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .zfp-cc-menu[hidden] { display: none !important; } .zfp-cc-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .zfp-cc-title { margin: 2px 4px 8px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.42); } .zfp-cc-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; border-radius: 8px; background: transparent; color: rgba(255,255,255,0.86); font-size: 0.8rem; font-family: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .zfp-cc-item:hover { background: rgba(255,255,255,0.09); color: #fff; } .zfp-cc-item.is-active { background: rgba(var(--accent-rgb, 229,9,20), 0.16); color: #fff; } .zfp-cc-item.is-active i { color: var(--accent); margin-left: auto; } .zfp-cc-item.is-off { color: rgba(255,255,255,0.62); } .zfp-cc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zfp-cc-empty, .zfp-cc-hint { margin: 6px 0 0; padding: 6px 10px 2px; font-size: 0.66rem; line-height: 1.35; color: rgba(255,255,255,0.42); text-align: center; } .zfp-cc-empty { padding: 10px; font-size: 0.76rem; color: rgba(255,255,255,0.5); } /* --- Mobile : le menu devient un bottom-sheet plein largeur --- */ @media (max-width: 768px) { .zfp-cc-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 62vh; padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px)); border: none; border-top: 1px solid rgba(255,255,255,0.10); border-radius: 16px 16px 0 0; background: rgba(12,12,12,0.98); box-shadow: 0 -18px 42px rgba(0,0,0,0.7); transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.22,0.61,0.36,1), opacity 0.2s ease; } .zfp-cc-menu.is-open { transform: translateY(0); } /* Poignée de préhension */ .zfp-cc-menu::before { content: ""; display: block; width: 38px; height: 4px; margin: 2px auto 10px; border-radius: 99px; background: rgba(255,255,255,0.24); } .zfp-cc-title { text-align: center; font-size: 0.7rem; margin-bottom: 10px; } /* Cibles tactiles confortables (>= 44 px) */ .zfp-cc-item { padding: 13px 12px; font-size: 0.92rem; border-radius: 10px; } .zfp-cc-item:active { transform: scale(0.98); } .zfp-cc-hint { font-size: 0.68rem; padding-top: 8px; } .zfp-cc-btn { min-width: 40px; } } /* Le lecteur en plein écran garde le menu au-dessus de tout */ .zfp-shell:fullscreen .zfp-cc-menu, .zfp-shell:-webkit-full-screen .zfp-cc-menu { z-index: 2147483647; } /* Rendu des sous-titres natifs : lisibilité sur fond clair */ .zfp-video::cue { background: rgba(0,0,0,0.72); color: #fff; font-size: 0.92em; line-height: 1.35; text-shadow: 0 1px 2px rgba(0,0,0,0.9); } /* ============================================================ v2.10.4 — NAVIGATION ENTRE ÉPISODES (sous le lecteur) Mobile-first : la barre passe en colonne sous 640px et la grille d'épisodes réduit ses pastilles. ============================================================ */ .zf-episode-nav { margin-top: 1rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.03); overflow: hidden; } .zf-ep-nav-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.07); } .zf-ep-nav-meta { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; gap: 0.15rem; } .zf-ep-nav-meta strong { font-size: 0.95rem; color: var(--text-primary, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zf-ep-nav-meta span { font-size: 0.78rem; color: var(--text-secondary, #b3b3b3); } .zf-ep-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--text-primary, #fff); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease; /* Cible tactile confortable (recommandation mobile) */ min-height: 44px; } .zf-ep-btn:hover:not(:disabled) { background: rgba(255,255,255,0.12); } .zf-ep-btn:active:not(:disabled) { transform: scale(0.97); } .zf-ep-btn:disabled { opacity: 0.35; cursor: not-allowed; } .zf-ep-btn.primary { background: var(--accent, #e50914); border-color: transparent; } .zf-ep-btn.primary:hover:not(:disabled) { background: #f6121d; } .zf-ep-btn.primary span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zf-ep-picker { padding: 0.9rem 1rem 1.1rem; } .zf-ep-season-select { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; } .zf-ep-season-select > span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary, #b3b3b3); } .zf-ep-season-select select { padding: 0.5rem 0.75rem; min-height: 40px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.16); background: rgba(20,20,20,0.95); color: var(--text-primary, #fff); font-size: 0.85rem; font-weight: 600; cursor: pointer; } .zf-ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 0.5rem; } .zf-ep-chip { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--text-primary, #fff); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .zf-ep-chip:hover:not(:disabled) { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); } .zf-ep-chip:active:not(:disabled) { transform: scale(0.94); } .zf-ep-chip.current { background: var(--accent, #e50914); border-color: transparent; box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.28); } .zf-ep-chip.unavailable, .zf-ep-chip:disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; } .zf-ep-chip-tag { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--accent, #e50914); font-size: 0.55rem; display: flex; align-items: center; justify-content: center; } /* Thème clair */ body.light-theme .zf-episode-nav { border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.02); } body.light-theme .zf-ep-btn, body.light-theme .zf-ep-chip { border-color: rgba(0,0,0,0.14); background: rgba(0,0,0,0.04); color: #141414; } body.light-theme .zf-ep-btn.primary, body.light-theme .zf-ep-chip.current { color: #fff; } body.light-theme .zf-ep-season-select select { background: #fff; color: #141414; border-color: rgba(0,0,0,0.16); } @media (max-width: 640px) { .zf-ep-nav-bar { flex-wrap: wrap; padding: 0.75rem; gap: 0.5rem; } /* Le libellé du média passe en pleine largeur au-dessus des boutons */ .zf-ep-nav-meta { order: -1; flex-basis: 100%; text-align: left; } .zf-ep-prev { flex: 0 0 auto; } .zf-ep-next { flex: 1; justify-content: center; } .zf-ep-prev span { display: none; } .zf-ep-btn { padding: 0.6rem 0.8rem; } .zf-ep-btn.primary span { max-width: 150px; } .zf-ep-picker { padding: 0.75rem; } .zf-ep-season-select { width: 100%; } .zf-ep-season-select select { flex: 1; } .zf-ep-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 0.4rem; } .zf-ep-chip { min-height: 42px; font-size: 0.82rem; } } /* ============================================================ v2.11.0 — MODE STANDALONE (PWA installée sur l'écran d'accueil) ------------------------------------------------------------ Quand ZenFlix est lancé depuis l'écran d'accueil iOS/Android, il n'y a plus de barre d'adresse : le contenu occupe TOUT l'écran, encoche (notch) et barre gestuelle comprises. `viewport-fit=cover` (déjà dans le viewport) active les variables env(safe-area-inset-*) qu'on applique ici. ============================================================ */ /* Décale la navbar sous l'encoche / la barre d'état */ html.zf-standalone .navbar { padding-top: env(safe-area-inset-top, 0px); } /* Évite que le contenu passe sous la barre gestuelle du bas */ html.zf-standalone body { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Respecte les bords arrondis en paysage (iPhone couché) */ html.zf-standalone .navbar, html.zf-standalone .main-content, html.zf-standalone .footer { padding-left: max(env(safe-area-inset-left, 0px), 0px); padding-right: max(env(safe-area-inset-right, 0px), 0px); } /* Le lecteur reste en vrai plein écran : aucune marge de sécurité, sinon des bandes noires apparaîtraient autour de la vidéo. */ html.zf-standalone .zfp-root:fullscreen, html.zf-standalone .zfp-root:-webkit-full-screen { padding: 0 !important; } /* En standalone, un tap ne doit pas déclencher le surlignage bleu ni le zoom accidentel : l'app doit se comporter comme du natif. */ html.zf-standalone { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } /* Empêche le « rubber band » vertical d'iOS sur la coquille, tout en gardant le défilement interne des listes. */ html.zf-standalone body { overscroll-behavior-y: none; }