/* ============================================================ remind-r.eu -- Dark Mode Overrides Active via data-theme="dark" sur ============================================================ */ [data-theme="dark"] { /* Surfaces et fonds */ --bg: #0C1220; --surface: #151E2E; --surface-raised: #1C2738; /* Texte */ --text-primary: #F0F3F8; --text-secondary: #8C92A1; --text-tertiary: #6B7280; /* Bordures */ --border: #1F2D42; --border-subtle: #19253A; /* Ombres plus prononcees */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.18); --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 0, 0, 0.20); --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.28), 0 3px 6px rgba(0, 0, 0, 0.16); --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.20); --shadow-2xl: 0 28px 64px rgba(0, 0, 0, 0.45), 0 10px 22px rgba(0, 0, 0, 0.28); --shadow-press: inset 0 2px 5px rgba(0, 0, 0, 0.35); /* Co-branding idewe : eclaircir la feuille navy + le wordmark pour rester lisibles sur fond sombre */ --idewe-cyan: #38B6E6; --idewe-navy: #7FC4E0; --idewe-wordmark: #CFE8F4; --cobrand-sep: var(--border); } /* Neutres dark */ [data-theme="dark"] .data-table thead th { background: var(--surface-raised); } [data-theme="dark"] .data-table tbody tr:hover { background: var(--surface-raised); } /* Inputs dark */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background: var(--surface-raised); } /* KPI icon backgrounds dark */ [data-theme="dark"] .kpi-icon.navy { background: rgba(74, 106, 159, 0.15); } [data-theme="dark"] .kpi-icon.amber { background: rgba(245, 166, 35, 0.15); } [data-theme="dark"] .kpi-icon.success { background: rgba(16, 185, 129, 0.15); } [data-theme="dark"] .kpi-icon.danger { background: rgba(239, 68, 68, 0.15); } /* Topbar dark */ [data-theme="dark"] .topbar-search { background: var(--surface-raised); } /* Boutons secondaires dark */ [data-theme="dark"] .btn-secondary { border-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .btn-secondary:hover { background: var(--surface-raised); } /* Breadcrumb dark */ [data-theme="dark"] .breadcrumb-sep { color: var(--n600); } /* Quick action dark */ [data-theme="dark"] .quick-action-btn { background: var(--surface-raised); border-color: var(--border); color: var(--text-secondary); } [data-theme="dark"] .quick-action-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); } /* Modal dark */ [data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.60); } /* Empty state dark */ [data-theme="dark"] .empty-state-icon { background: var(--surface-raised); } /* Login SSO dark */ [data-theme="dark"] .btn-sso { background: var(--surface-raised); border-color: var(--border); } [data-theme="dark"] .btn-sso:hover { background: rgba(255, 255, 255, 0.06); } /* ============================================================ DARK PREMIUM -- profondeur, contraste, accents (surcharge finale) ============================================================ */ [data-theme="dark"] { --bg: #0A0F1A; /* fond plus profond, moins bleute-gris */ --surface: #121A2A; --surface-raised: #18233A; --border: #243047; --border-subtle: #1A2336; --text-primary: #EAF0F8; --text-secondary: #9FB0C7; --text-tertiary: #6E8099; --shadow-focus: 0 0 0 3px rgba(120, 160, 220, 0.30); --glow-amber: 0 0 0 4px rgba(245, 166, 35, 0.22); } /* Toggle : pastille ambre lumineuse en dark */ [data-theme="dark"] .theme-toggle { background: var(--surface-raised); color: var(--amber-300); } /* Cartes d'auth + cartes : elevation premium */ [data-theme="dark"] .login-card, [data-theme="dark"] .ent-card, [data-theme="dark"] .emp-auth-card, [data-theme="dark"] .tr-auth-card, [data-theme="dark"] .home-card, [data-theme="dark"] .card, [data-theme="dark"] .kpi-card { box-shadow: var(--shadow-2xl); } /* Champs : fond enfonce, focus net */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background: #0E1726; color: var(--text-primary); } [data-theme="dark"] .form-input::placeholder { color: #5C6E88; } /* CTA ambre : leger halo lumineux (premium) */ [data-theme="dark"] .btn-accent { box-shadow: var(--shadow-md), 0 0 20px rgba(245, 166, 35, 0.28); } /* Tableaux : lignes lisibles */ [data-theme="dark"] .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); } /* ============================================================ DARK -- ELIMINATION DES "CARTES JOURS" Les composants des 4 espaces utilisent partout les neutres FIXES (--n0..--n900) et les teintes --*-light / --navy-50 / --amber-50, qui ne s'adaptaient pas au theme. On les redefinit ici -> tout passe en nuit d'un coup. ============================================================ */ [data-theme="dark"] { /* Rampe neutre INVERSEE : bas = surfaces sombres, haut = textes clairs */ --n0: #121A2A; --n25: #141E30; --n50: #18233A; /* fonds subtils / survols (dropzone, empty-state, hovers) */ --n100: #1F2C46; /* puces / chips */ --n200: #2A3858; /* bordures */ --n300: #3C4D70; --n400: #6E8099; --n500: #8A9BB5; --n600: #B4C2D8; /* texte sur puce (etait gris fonce -> clair) */ --n700: #CCD6E8; --n800: #E2E9F3; --n900: #F2F6FB; /* Teintes navy/ambre subtiles -> versions sombres */ --navy-50: rgba(120, 150, 189, 0.16); --amber-50: rgba(245, 166, 35, 0.12); /* Navy en TEXTE/capsules/boutons : eclairci pour rester lisible sur fond sombre. (Les pills/boutons a fond navy restent bleus avec texte blanc -> gagnent meme en contraste vs l'ancien navy fonce sur fond sombre.) */ --navy-500: #5C7CB2; --navy-600: #93B0DC; /* Teintes semantiques : fonds translucides sombres + textes lisibles */ --success-light: rgba(16, 185, 129, 0.16); --success-dark: #6EE7B7; --warning-light: rgba(245, 158, 11, 0.18); --warning-dark: #FBBF24; --danger-light: rgba(239, 68, 68, 0.16); --danger-dark: #FCA5A5; --info-light: rgba(59, 130, 246, 0.16); --info-dark: #93C5FD; --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.35); } /* Lockup remind-r lisible sur cartes sombres (logins, accueil) */ [data-theme="dark"] .brand-mark-rmr { color: #9FB8E0; } [data-theme="dark"] .brand-word-rmr { color: #EAF0F8; } /* Dropzone : bordure pointillee douce en nuit */ [data-theme="dark"] .tr-dropzone, [data-theme="dark"] .emp-dropzone { background: var(--n50); box-shadow: var(--shadow-inner); }