/* ============================================================ OPTIMUSCLE — Theme System (Dark / Light / Auto) ============================================================ Contrôlé par data-theme sur : - data-theme="dark" → mode sombre forcé - data-theme="light" → mode clair forcé - data-theme="auto" → suit prefers-color-scheme ============================================================ */ /* ===== LIGHT MODE OVERRIDES ===== */ html[data-theme="light"] { --bg: #f5f5f7; --bg-elev-1: #ffffff; --bg-elev-2: #fafafa; --bg-elev-3: #f0f0f3; --card: #ffffff; --card-2: #fafafa; --bg-2: #ffffff; --text: #0a0a0a; --text-soft: #1a1a1f; --text-dim: #6b6b73; --text-dimmer: #9a9aa3; --border: rgba(0, 0, 0, 0.08); --border-light: rgba(0, 0, 0, 0.12); --border-accent: rgba(255, 87, 34, 0.35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.15); --grad-card: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.005) 100%); --grad-bg-radial: radial-gradient(ellipse at top, rgba(255,87,34,0.06) 0%, transparent 50%); } /* ===== AUTO MODE : suit prefers-color-scheme ===== */ @media (prefers-color-scheme: light) { html[data-theme="auto"] { --bg: #f5f5f7; --bg-elev-1: #ffffff; --bg-elev-2: #fafafa; --bg-elev-3: #f0f0f3; --card: #ffffff; --card-2: #fafafa; --bg-2: #ffffff; --text: #0a0a0a; --text-soft: #1a1a1f; --text-dim: #6b6b73; --text-dimmer: #9a9aa3; --border: rgba(0, 0, 0, 0.08); --border-light: rgba(0, 0, 0, 0.12); --border-accent: rgba(255, 87, 34, 0.35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.15); --grad-card: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.005) 100%); --grad-bg-radial: radial-gradient(ellipse at top, rgba(255,87,34,0.06) 0%, transparent 50%); } } /* ===== Ajustements spécifiques light mode ===== */ html[data-theme="light"] body, html[data-theme="auto"] body { background: var(--bg) !important; } @media (prefers-color-scheme: light) { html[data-theme="auto"] body { background: var(--bg) !important; } } /* Header glass effect adapté light */ html[data-theme="light"] header { background: rgba(255, 255, 255, 0.85) !important; } @media (prefers-color-scheme: light) { html[data-theme="auto"] header { background: rgba(255, 255, 255, 0.85) !important; } } /* Hero overlay plus léger en light */ html[data-theme="light"] .hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 60%, var(--bg) 100%) !important; } /* Login background en light */ html[data-theme="light"] .login-hero-bg { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255,87,34,0.15) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 20% 40%, rgba(139,92,246,0.06) 0%, transparent 60%) !important; } /* Login text plus lisible en light */ html[data-theme="light"] .login-logo-text, html[data-theme="light"] .login-hero-text h1 { color: #0a0a0a; } /* Bottom nav adapté light */ html[data-theme="light"] nav.tabs { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08); } /* Hero quote en light */ html[data-theme="light"] .hero-quote { text-shadow: 0 2px 8px rgba(0,0,0,0.4); }