@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* ========== LAYOUT ========== */ --sidebar-width: 256px; --topbar-height: 56px; --panel-width: 420px; /* ========== COULEURS PRINCIPALES ========== */ --color-primary: #0284c7; --color-primary-hover: #0369a1; --color-primary-light: rgba(2, 132, 199, 0.08); /* Fond bleu très clair, auparavant codé en dur (#f0f9ff) dans de nombreux composants. */ --color-primary-bg: #f0f9ff; --color-accent: #0B156A; --color-accent-hover: #101D94; --color-accent-light: rgba(11, 21, 106, 0.08); --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-danger-light: rgba(239, 68, 68, 0.08); --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-warning-border: #fcd34d; --color-warning-text: #92400e; --color-success: #16a34a; --color-success-light: rgba(22, 163, 74, 0.08); --color-info: #3b82f6; --color-sidebar: white; --color-panel-left: #000111; /* ========== GRAPHIQUES ========== */ --color-chart-success: #22c55e; --color-chart-failure: #f43f5e; --color-chart-warning: #fbbf24; --color-chart-cancelled: #94a3b8; /* ========== OVERLAYS ========== */ --overlay-bg: rgba(15, 23, 42, 0.5); /* ========== BACKGROUNDS ========== */ --color-bg: #ffffff; --color-bg-secondary: #f8fafc; --color-bg-tertiary: #f1f5f9; /* ========== TEXTES ========== */ --color-text: #0f172a; --color-text-secondary: #1F1E1D; --color-text-muted: #94a3b8; --color-text-subtle: #64748b; /* ========== BORDURES ========== */ --color-border: #e2e8f0; --color-border-light: #f1f5f9; /* ========== SIDEBAR ========== */ --sidebar-bg: #0f172a; --sidebar-text: #f8fafc; --sidebar-text-secondary: #94a3b8; --sidebar-hover: rgba(255, 255, 255, 0.04); --sidebar-active: rgba(14, 165, 233, 0.12); --sidebar-border: rgba(255, 255, 255, 0.06); /* ========== SPACING ========== */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1rem; --space-xl: 1.5rem; --space-2xl: 2rem; /* ========== RAYONS ========== */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* ========== OMBRES ========== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12); /* ========== TRANSITIONS ========== */ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; /* ========== Z-INDEX ========== */ --z-content: 1; --z-topbar: 10; --z-dropdown: 50; --z-sidebar: 90; --z-panel-overlay: 100; --z-panel: 101; --z-modal-overlay: 200; --z-modal: 201; --z-toast: 10000; } /* ========== THÈME SOMBRE (beta) ========== Appliqué quand est posé par js/theme.js, selon le choix Système / Clair / Sombre de l'utilisateur (page Paramètres). En mode "Système", theme.js pose l'attribut d'après prefers-color-scheme et suit les bascules de l'OS. N'affecte que les surfaces qui consomment les tokens ci-dessous ; quelques couleurs encore codées en dur dans certains composants peuvent nécessiter un ajustement visuel. Le mode clair par défaut n'est pas modifié. */ :root[data-theme="dark"] { --color-primary-light: rgba(2, 132, 199, 0.22); --color-primary-bg: rgba(2, 132, 199, 0.16); /* --color-accent sert aussi de couleur de TEXTE (badge "Super Admin", statut "Réussi"). Le marine foncé du mode clair est illisible sur fond sombre → on l'éclaircit. */ --color-accent: #818cf8; --color-accent-hover: #a5b4fc; --color-accent-light: rgba(129, 140, 248, 0.20); --color-danger-light: rgba(239, 68, 68, 0.22); --color-warning-light: #3a2e0b; --color-warning-border: #5c4708; --color-warning-text: #fcd34d; /* Vert plus clair pour rester lisible sur fond sombre. */ --color-success: #22c55e; --color-success-light: rgba(34, 197, 94, 0.20); --overlay-bg: rgba(0, 0, 0, 0.6); --color-bg: #111827; --color-bg-secondary: #0b1220; --color-bg-tertiary: #1f2937; --color-text: #f1f5f9; --color-text-secondary: #e5e7eb; --color-text-muted: #94a3b8; --color-text-subtle: #cbd5e1; --color-border: #1f2937; --color-border-light: #161f2e; /* NB : --color-sidebar est la couleur du TEXTE du menu latéral (valeur "white"), pas un fond — on la laisse claire en sombre, donc aucun override ici. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.65); }