/* ============================================================================ Bespoke — Charte « Lavender Air » pour Scouter (clair + sombre) ---------------------------------------------------------------------------- Ce fichier est chargé EN DERNIER sur chaque page : il surcharge les tokens CSS de Scouter (définis dans style.css :root) sans toucher au reste du code. Source de la charte : geo_ai_position_tracker_v2/docs/design-system.md Le thème sombre s'active via (voir theme-toggle.js). ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); /* ---------------------------------------------------------------- MODE CLAIR */ :root { --primary-color: #705ef2; /* violet primaire Bespoke */ --primary-dark: #5a48d0; /* violet foncé (hovers) */ --secondary-color: #352e6c; /* violet profond */ --background: #f5f3fa; --card-bg: #ffffff; --text-primary: #0d0b1e; --text-secondary: #6b6880; --border-color: #ece9f6; --sidebar-bg: #352e6c; /* fallback solide (utilisé pour bordures) */ --sidebar-hover: #463c82; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #6366f1; /* extras utilisés ailleurs avec valeurs de repli */ --bg-hover: #efecfb; --bg-secondary: #f7f6fc; --active: rgba(112, 94, 242, 0.12); /* dégradé de marque (sidebar + header) */ --sidebar-gradient: linear-gradient(160deg, #705ef2 0%, #352e6c 100%); --accent-gold: #d4a843; /* or — réservé aux concurrents/graphs */ } /* ---------------------------------------------------------------- MODE SOMBRE */ [data-theme="dark"] { --primary-color: #705ef2; --primary-dark: #6a59e8; --secondary-color: #bea2ff; /* lavande clair, visible sur fond sombre */ --background: #161519; --card-bg: #1f1d26; --text-primary: #f5f4f8; --text-secondary: #a5a2b3; --border-color: #322f3c; --sidebar-bg: #1b1930; --sidebar-hover: #2a2647; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #6366f1; --bg-hover: #2a2733; --bg-secondary: #211f2a; --active: rgba(112, 94, 242, 0.24); --sidebar-gradient: linear-gradient(160deg, #2a2550 0%, #14121f 100%); color-scheme: dark; } /* ------------------------------------------------------------- TYPOGRAPHIE */ body, button, input, select, textarea, .header, .sidebar { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ------------------------------------------------- DÉGRADÉ SIDEBAR + HEADER */ .sidebar, .header { background: var(--sidebar-gradient) !important; } /* --------------------------------------- CORRECTIFS CIBLÉS POUR LE MODE SOMBRE Surfaces dont le fond blanc/clair est codé en dur hors du système de tokens (styles inline de composants). On les rebascule sur les tokens en sombre. */ [data-theme="dark"] body { background: var(--background); color: var(--text-primary); } [data-theme="dark"] .notif-dropdown, [data-theme="dark"] .user-dropdown-menu, [data-theme="dark"] .notif-icon-pending, [data-theme="dark"] .modal, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .card, [data-theme="dark"] .popover { background: var(--card-bg); color: var(--text-primary); border-color: var(--border-color); } /* Champs de saisie en sombre */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } /* Atténue les ombres très marquées sur fond sombre */ [data-theme="dark"] .notif-dropdown, [data-theme="dark"] .user-dropdown-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } /* ------------------------------------------------- BOUTON BASCULE CLAIR/SOMBRE Posé dans le header (.header-actions), même style que les cloches. */ .theme-toggle-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); color: #fff; } .theme-toggle-btn .material-symbols-outlined { font-size: 21px; } /* ------------------------------------------------------- WORDMARK DE MARQUE */ .header-brand-text { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; color: #fff; } .login-brand-text { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; background: var(--sidebar-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Affiche la lune en clair, le soleil en sombre */ .theme-toggle-btn .icon-dark { display: inline-flex; } .theme-toggle-btn .icon-light { display: none; } [data-theme="dark"] .theme-toggle-btn .icon-dark { display: none; } [data-theme="dark"] .theme-toggle-btn .icon-light { display: inline-flex; }