/* ============================================================ MOVIEFINDER — THÈMES ALTERNATIFS Se posent PAR-DESSUS le noir de base en surchargeant les variables de palette communes à toutes les pages + un voile de couleur sur le décor (cityscape / vignette, qui sont sous le contenu, donc sans nuire à la lisibilité). Activé par theme.js : Les sélecteurs [data-theme=...] ont une spécificité supérieure à :root / .cityscape, donc l'ordre d'inclusion n'importe pas. ============================================================ */ /* ============================================================ SÉPIA — vieux film, papier jauni, lumière ambrée ============================================================ */ :root[data-theme="sepia"] { --ink: #1d1206; --ink-2: #251907; --ash: #33240f; --smoke: #4a3619; --silver: #e2cda0; --paper: #fbeccb; --glow: #fff6dd; --dim: #a88f63; --blood: #c85a1a; --gold: #f0b03f; --on: #9bb14e; --glass-bg: rgba(58, 42, 20, 0.46); --glass-bg-strong: rgba(37, 25, 9, 0.86); --glass-border: rgba(245, 226, 180, 0.20); } :root[data-theme="sepia"] body { background: #1d1206; } [data-theme="sepia"] .cityscape { background: radial-gradient(140% 100% at 24% 0%, #5a3f18 0%, #38260e 42%, #1d1206 100%) !important; } [data-theme="sepia"] .skyline-far path { fill: #2a1d0c !important; } [data-theme="sepia"] .skyline-near path:not(.bridge-cable) { fill: #170f05 !important; } [data-theme="sepia"] .skyline-near .bridge-deck { fill: #170f05 !important; } [data-theme="sepia"] .bridge-cable { stroke: #4a3619 !important; } [data-theme="sepia"] .city-haze { background: linear-gradient(180deg, rgba(29,18,6,0) 30%, rgba(40,26,10,0.6) 70%, #1d1206 100%) !important; } [data-theme="sepia"] .moon { background: radial-gradient(circle at 38% 38%, #fff6dd, #f0d49a 52%, #c9974f 100%) !important; box-shadow: 0 0 80px 24px rgba(240,180,90,0.22), 0 0 180px 60px rgba(240,180,90,0.10) !important; } /* Voile ambré "vieux film" sur tout le décor (sous le contenu) */ [data-theme="sepia"] .vignette { background: radial-gradient(120% 120% at 50% 30%, rgba(120,80,28,0.22) 0%, rgba(70,44,14,0.32) 45%, rgba(15,9,3,0.72) 100%) !important; } [data-theme="sepia"] .lightning { background: radial-gradient(120% 80% at 60% -10%, rgba(255,238,200,0.9), rgba(255,238,200,0.2) 30%, transparent 60%) !important; } [data-theme="sepia"] .background-grid { background: radial-gradient(circle at 22% 18%, rgba(240,176,63,0.10), transparent 45%), linear-gradient(180deg, #2a1d0c 0%, #1d1206 60%) !important; } /* ============================================================ TECHNICOLOR — saturé, cinéma classique (teal + or + rouge vif) ============================================================ */ :root[data-theme="technicolor"] { --ink: #04131a; --ink-2: #07212b; --ash: #0d2f3a; --smoke: #134050; --silver: #b6d6df; --paper: #f6f3ec; --glow: #fffaf0; --dim: #6f9aa6; --blood: #ff3b52; --gold: #ffd24a; --on: #3ce08a; --glass-bg: rgba(13, 47, 58, 0.46); --glass-bg-strong: rgba(5, 22, 28, 0.86); --glass-border: rgba(200, 235, 240, 0.20); } :root[data-theme="technicolor"] body { background: #04131a; } [data-theme="technicolor"] .cityscape { background: radial-gradient(140% 100% at 24% 0%, #0e5663 0%, #0a2c39 42%, #04131a 100%) !important; } [data-theme="technicolor"] .skyline-far path { fill: #0a2630 !important; } [data-theme="technicolor"] .skyline-near path:not(.bridge-cable) { fill: #030e13 !important; } [data-theme="technicolor"] .skyline-near .bridge-deck { fill: #030e13 !important; } [data-theme="technicolor"] .bridge-cable { stroke: #134050 !important; } [data-theme="technicolor"] .city-haze { background: linear-gradient(180deg, rgba(4,19,26,0) 30%, rgba(7,33,43,0.6) 70%, #04131a 100%) !important; } [data-theme="technicolor"] .moon { background: radial-gradient(circle at 38% 38%, #fffaf0, #ffd9a0 50%, #ff7a55 100%) !important; box-shadow: 0 0 80px 24px rgba(255,200,120,0.2), 0 0 180px 60px rgba(255,59,82,0.12) !important; } [data-theme="technicolor"] .vignette { background: radial-gradient(120% 120% at 50% 30%, rgba(20,120,140,0.20) 0%, rgba(10,50,70,0.30) 45%, rgba(0,4,8,0.7) 100%) !important; } [data-theme="technicolor"] .lightning { background: radial-gradient(120% 80% at 60% -10%, rgba(120,240,255,0.9), rgba(120,240,255,0.2) 30%, transparent 60%) !important; } [data-theme="technicolor"] .background-grid { background: radial-gradient(circle at 22% 18%, rgba(255,210,74,0.09), transparent 45%), radial-gradient(circle at 82% 0%, rgba(255,59,82,0.08), transparent 40%), linear-gradient(180deg, #0a2c39 0%, #04131a 60%) !important; } /* ============================================================ SALLE 35 MM — grain, perforations, halo projection (débloqué via easter egg Konami ou cycle thème) ============================================================ */ :root[data-theme="35mm"] { --ink: #090809; --ink-2: #0e0b0d; --ash: #171318; --smoke: #2a2328; --silver: #c8c0b8; --paper: #ece6dc; --glow: #fff8ee; --dim: #7d7570; --blood: #a82835; --gold: #c9a24d; --on: #8faa72; --glass-bg: rgba(18, 14, 16, 0.52); --glass-bg-strong: rgba(10, 8, 9, 0.9); --glass-border: rgba(236, 230, 220, 0.16); } :root[data-theme="35mm"] body { background: #090809; } [data-theme="35mm"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0.22; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 2px); mix-blend-mode: overlay; animation: mf35Grain 0.45s steps(2) infinite; } [data-theme="35mm"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3; box-shadow: inset 0 18px 0 rgba(0,0,0,0.55), inset 0 -18px 0 rgba(0,0,0,0.55), inset 0 0 120px rgba(0,0,0,0.65); background: linear-gradient(180deg, rgba(0,0,0,0.45) 0, transparent 28px, transparent calc(100% - 28px), rgba(0,0,0,0.45) 100%); } @keyframes mf35Grain { 0% { transform: translate(0, 0); } 50% { transform: translate(-1px, 1px); } 100% { transform: translate(1px, -1px); } } [data-theme="35mm"] .cityscape { background: radial-gradient(140% 100% at 24% 0%, #2a2228 0%, #151015 42%, #090809 100%) !important; } [data-theme="35mm"] .skyline-far path { fill: #120e11 !important; } [data-theme="35mm"] .skyline-near path:not(.bridge-cable) { fill: #080608 !important; } [data-theme="35mm"] .skyline-near .bridge-deck { fill: #080608 !important; } [data-theme="35mm"] .bridge-cable { stroke: #3a3036 !important; } [data-theme="35mm"] .city-haze { background: linear-gradient(180deg, rgba(9,8,9,0) 30%, rgba(20,16,18,0.55) 70%, #090809 100%) !important; } [data-theme="35mm"] .moon { background: radial-gradient(circle at 38% 38%, #fff8ee, #e8dcc8 50%, #9a8878 100%) !important; box-shadow: 0 0 70px 18px rgba(255,240,210,0.12), 0 0 140px 40px rgba(255,240,210,0.06) !important; } [data-theme="35mm"] .vignette { background: radial-gradient(120% 120% at 50% 30%, rgba(80,60,40,0.12) 0%, rgba(20,14,10,0.35) 45%, rgba(0,0,0,0.82) 100%) !important; } [data-theme="35mm"] .lightning { background: radial-gradient(120% 80% at 60% -10%, rgba(255,236,210,0.75), rgba(255,236,210,0.15) 30%, transparent 60%) !important; } [data-theme="35mm"] .background-grid { background: radial-gradient(circle at 22% 18%, rgba(201,162,77,0.08), transparent 45%), linear-gradient(180deg, #151015 0%, #090809 60%) !important; } [data-theme="35mm"] .grain { opacity: 0.35 !important; } /* Préchargeur : ne bloque jamais les clics une fois masqué */ .preloader.done { pointer-events: none !important; } /* Pages protégées : masquées tant que /api/me n'a pas validé la session */ html.auth-gate body { visibility: hidden; } /* ============================================================ CONTRÔLES FLOTTANTS (theme.js) — toutes les pages ============================================================ */ .floating-controls { position: fixed; right: 20px; bottom: 20px; z-index: 10050 !important; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; } .floating-control-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--glass-border, rgba(233, 231, 224, 0.14)); background: var(--glass-bg, rgba(16, 18, 23, 0.72)); color: var(--paper, #e9e7e0); font-size: 18px; line-height: 1; display: grid; place-items: center; cursor: pointer; pointer-events: auto; backdrop-filter: blur(12px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.85); transition: transform 0.25s ease, border-color 0.25s ease; } .floating-control-btn:hover { transform: translateY(-2px); border-color: rgba(233, 231, 224, 0.32); } .language-toggle { font-family: "Oswald", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; } @media (max-width: 720px) { .floating-controls { right: 14px; bottom: 14px; } .floating-control-btn { width: 42px; height: 42px; font-size: 16px; } } /* Index + pages avec cityscape : renfort des thèmes alternatifs */ [data-theme="sepia"] .preloader-word, [data-theme="technicolor"] .preloader-word, [data-theme="35mm"] .preloader-word { color: var(--glow); }