/** * Lotus Mixta — thème sombre (classe .dark sur ) */ html.dark { color-scheme: dark; } /* Tokens sombres (priorité sur body.mixta-gastro) */ html.dark, html.dark body { --bg: #0e0d0b; --surface: #161412; --surface-2: #1e1c19; --border: #2a2722; --text: #f0ece6; --text-muted: #857e74; --accent: #2eb85a; --accent-light: #152818; --accent-dark: #5ecf9a; --wood: #d4c4b8; --green: #5ecf9a; --green-bg: #0f2215; --red: #e06060; --red-bg: #2a1010; --orange: #e0a030; --orange-bg: #2a1c08; --blue: #5ecf9a; --blue-bg: #0f2418; --gold: #d4b06a; --gold-light: #2a2418; --gold-muted: #9a7d45; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.4); } html.dark body.mixta-gastro { --accent: #2eb85a; --accent-light: #152818; --accent-dark: #5ecf9a; --gold-muted: #c4a574; } /* Fond */ html.dark body { background: radial-gradient(ellipse 100% 70% at 100% -15%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%), radial-gradient(ellipse 70% 50% at -5% 105%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 50%), var(--bg) !important; color: var(--text); } /* Priorité sur le body inline (fond clair) */ html.dark { background-color: var(--bg); } /* Titres dégradé → couleur lisible */ html.dark .page-header h1 .accent { background: none; -webkit-text-fill-color: currentColor; color: var(--accent-dark); } html.dark .accent-bar { background: linear-gradient(90deg, var(--accent), var(--gold-muted)); } /* Sidebar & topbar */ html.dark .sidebar { background: linear-gradient( 180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 80%, #000) 100% ); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35); } html.dark .sidebar-logo { background: linear-gradient( 135deg, color-mix(in srgb, var(--accent-light) 80%, var(--surface)) 0%, var(--surface) 100% ); } html.dark .topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom-color: var(--border); } html.dark .module-tabs-bar { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); border-bottom-color: var(--border); } html.dark .module-tab:hover { background: color-mix(in srgb, var(--accent-light) 60%, var(--surface-2)); } html.dark .module-tab.active { background: var(--surface-2); border-color: var(--border); color: var(--accent-dark); } html.dark .module-tab-icon { background: color-mix(in srgb, var(--surface-2) 90%, var(--border)); } html.dark .module-tab.active .module-tab-icon { background: linear-gradient(145deg, var(--accent) 0%, color-mix(in srgb, var(--accent-dark) 70%, #000) 100%); color: #fff; } /* Sidebar : icônes via .nav-item-icon (mixta-sidebar.css) */ html.dark .nav-item.active { background: linear-gradient( 90deg, color-mix(in srgb, var(--accent-light) 95%, var(--surface-2)) 0%, color-mix(in srgb, var(--accent-light) 50%, var(--surface-2)) 100% ); } html.dark .sidebar .nav-item.active { background: var(--sidebar-active-bg); } /* Cartes & KPI */ html.dark .card, html.dark .kpi-card { background: var(--surface); border-color: var(--border); } html.dark .card:hover, html.dark .kpi-card:hover { box-shadow: var(--shadow-hover); } html.dark thead th { background: color-mix(in srgb, var(--accent-light) 70%, var(--surface-2)); } html.dark tbody tr:hover td { background: color-mix(in srgb, var(--accent-light) 40%, var(--surface)); } /* Champs */ html.dark input, html.dark select, html.dark textarea { background: var(--surface-2); border-color: var(--border); color: var(--text); } html.dark .user-chip, html.dark .icon-btn { background: var(--surface-2); border-color: var(--border); } html.dark .dropdown-menu { background: var(--surface); border-color: var(--border); } /* Plan de salle */ html.dark .salle-statut-libre { background: linear-gradient( 180deg, color-mix(in srgb, var(--green-bg) 90%, var(--surface)) 0%, var(--surface) 30% ) !important; } html.dark .salle-statut-occupe { background: linear-gradient( 180deg, color-mix(in srgb, var(--orange-bg) 85%, var(--surface)) 0%, var(--surface) 30% ) !important; } html.dark .salle-statut-addition { background: linear-gradient( 180deg, color-mix(in srgb, var(--blue-bg) 85%, var(--surface)) 0%, var(--surface) 30% ) !important; } /* Auth */ html.dark .auth-card, html.dark body.dark .auth-card { background: var(--surface); border-color: var(--border); } html.dark .auth-container { background: var(--bg); } /* Compat : .dark sur body (page login legacy) */ body.dark { color-scheme: dark; }