/* * Système de thème clair/sombre — variables CSS globales. * Piloté par l'attribut [data-theme] posé sur (voir partials/theme-init.blade.php). * Chargé APRÈS admin-theme.css dans le layout admin : les variables --admin-* * sont redéfinies ici pour gagner la cascade et suivre le thème actif, sans * avoir à toucher aux règles qui consomment déjà var(--admin-*). */ :root, [data-theme="light"] { --color-bg: #f5f7fa; --color-surface: #ffffff; --color-surface-alt: #f9fafb; --color-surface-2: #eef1f5; --color-text: #1f2937; --color-text-muted: #6b7280; --color-border: #e5e7eb; --color-primary: #003580; --color-primary-hover: #002a66; --color-link: #003580; --color-accent: #ad9c05; --color-danger: #dc2626; --color-success: #16a34a; --color-warning: #d97706; --color-info: #0891b2; --color-shadow: rgba(0, 0, 0, 0.08); /* Bleu Booking.com — sidebar admin, fixe dans les deux thèmes */ --sidebar-bg-start: #003580; --sidebar-bg-end: #002a66; --sidebar-text: rgba(255, 255, 255, 0.78); --sidebar-text-strong: #ffffff; --sidebar-text-faint: rgba(255, 255, 255, 0.5); --sidebar-hover-bg: rgba(255, 255, 255, 0.08); --sidebar-active-bg: rgba(255, 255, 255, 0.16); --sidebar-active-accent: #ad9c05; --sidebar-border: rgba(255, 255, 255, 0.1); /* Pont vers les variables déjà consommées par admin-theme.css */ --admin-bg: var(--color-bg); --admin-surface: var(--color-surface); --admin-surface-2: var(--color-surface-2); --admin-text: var(--color-text); --admin-text-muted: var(--color-text-muted); --admin-text-faint: #9ca3af; --admin-border: var(--color-border); --admin-primary: var(--color-primary); --admin-primary-dark: #002654; --admin-primary-light: #e8f1fc; --admin-primary-hover: var(--color-primary-hover); --admin-accent: var(--color-accent); --admin-accent-light: #faf6dc; --admin-dark-soft: #16213e; --admin-success-light: #dcfce7; --admin-danger-light: #fee2e2; --admin-warning-light: #fef3c7; --admin-info-light: #cffafe; --admin-success-text: #14532d; --admin-danger-text: #7f1d1d; --admin-info-text: #164e63; --admin-focus-ring: rgba(0, 53, 128, 0.12); --admin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --admin-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); --admin-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12); } [data-theme="dark"] { /* Gris neutres — pas de noir pur, pas de teinte bleu marine */ --color-bg: #16171a; --color-surface: #1f2023; --color-surface-alt: #26272b; --color-surface-2: #2d2e33; --color-text: #edeef0; --color-text-muted: #a3a4a9; --color-border: #35363b; --color-primary: #0d47a1; --color-primary-hover: #1a5fc4; --color-link: #6fa4ee; --color-accent: #e0cc2a; --color-danger: #f87171; --color-success: #4ade80; --color-warning: #fbbf24; --color-info: #22d3ee; --color-shadow: rgba(0, 0, 0, 0.45); /* Bleu Booking.com calibré pour rester premium sur fond sombre */ --sidebar-bg-start: #003d94; --sidebar-bg-end: #001c40; --sidebar-text: rgba(255, 255, 255, 0.75); --sidebar-text-strong: #ffffff; --sidebar-text-faint: rgba(255, 255, 255, 0.48); --sidebar-hover-bg: rgba(255, 255, 255, 0.09); --sidebar-active-bg: rgba(255, 255, 255, 0.18); --sidebar-active-accent: #e0cc2a; --sidebar-border: rgba(255, 255, 255, 0.08); --admin-bg: var(--color-bg); --admin-surface: var(--color-surface); --admin-surface-2: var(--color-surface-2); --admin-text: var(--color-text); --admin-text-muted: var(--color-text-muted); --admin-text-faint: #75767c; --admin-border: var(--color-border); --admin-primary: var(--color-primary); --admin-primary-dark: var(--color-primary-hover); --admin-primary-light: rgba(13, 71, 161, 0.18); --admin-primary-hover: var(--color-primary-hover); --admin-accent: var(--color-accent); --admin-accent-light: rgba(224, 204, 42, 0.15); --admin-dark-soft: #f5f6f7; --admin-success-light: rgba(74, 222, 128, 0.15); --admin-danger-light: rgba(248, 113, 113, 0.15); --admin-warning-light: rgba(251, 191, 36, 0.15); --admin-info-light: rgba(34, 211, 238, 0.15); --admin-success-text: #86efac; --admin-danger-text: #fca5a5; --admin-info-text: #67e8f9; --admin-focus-ring: rgba(13, 71, 161, 0.35); --admin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --admin-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); --admin-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4); } /* Transition douce lors du basculement de thème, sans l'appliquer au premier rendu (évite un flash de transition sur le chargement de page). */ [data-theme].theme-ready, [data-theme].theme-ready * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }