/* ============================================================ SYRA AFRICA — MODE NUIT EXPERT "Océan de Minuit" Remplace la palette gris/noir standard de Tailwind par une palette de marque bleu nuit profond + orange lumineux. Déclenché par la classe `.dark` sur (darkMode:'class'). Toutes les règles critiques portent `!important` pour garantir la priorité sur le CSS injecté dynamiquement par Tailwind CDN. Palette : Fond page : #070d1a (Abysse) Surface carte : #0d182c (Minuit) Surface active : #14213d (Minuit clair) Surface hover : #1a2946 (Minuit éclairci) Bordure : #1d2f51 Bordure forte : #294067 Texte principal : #e9f0fc (Blanc cassé bleuté) Texte secondaire : #aebfd9 Tertiaire : #8ea2c3 Estompé : #6c82a6 Accent bleu : #8cb4ff Accent orange : #ffb37c ============================================================ */ /* ── Base document ─────────────────────────────────────────── */ html.dark { color-scheme: dark; background-color: #070d1a !important; } html.dark body { background-color: #070d1a !important; color: #e9f0fc !important; } html.dark ::selection { background: rgba(59, 130, 246, 0.35); color: #ffffff; } html.dark input, html.dark select, html.dark textarea { color-scheme: dark; } html.dark input::placeholder, html.dark textarea::placeholder { color: #5a7194 !important; opacity: 1; } /* Scrollbar bleu nuit */ html.dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.dark ::-webkit-scrollbar-track { background: #0d182c; } html.dark ::-webkit-scrollbar-thumb { background: #1d2f51; border-radius: 8px; border: 2px solid #0d182c; } html.dark ::-webkit-scrollbar-thumb:hover { background: #294067; } /* ============================================================ FONDS — surfaces bleu nuit ============================================================ */ /* Fond page global (slate-950) */ .dark .dark\:bg-slate-950 { background-color: #070d1a !important; } .dark .dark\:bg-slate-950\/30 { background-color: rgba(7, 13, 26, 0.30) !important; } .dark .dark\:bg-slate-950\/40 { background-color: rgba(7, 13, 26, 0.40) !important; } .dark .dark\:bg-slate-950\/50 { background-color: rgba(7, 13, 26, 0.50) !important; } .dark .dark\:bg-slate-950\/60 { background-color: rgba(7, 13, 26, 0.60) !important; } .dark .dark\:bg-slate-950\/80 { background-color: rgba(7, 13, 26, 0.80) !important; } .dark .dark\:bg-slate-950\/90 { background-color: rgba(7, 13, 26, 0.90) !important; } .dark .dark\:bg-slate-950\/95 { background-color: rgba(7, 13, 26, 0.95) !important; } /* Cartes / surfaces (slate-900) */ .dark .dark\:bg-slate-900 { background-color: #0d182c !important; } .dark .dark\:bg-slate-900\/20 { background-color: rgba(13, 24, 44, 0.20) !important; } .dark .dark\:bg-slate-900\/40 { background-color: rgba(13, 24, 44, 0.40) !important; } .dark .dark\:bg-slate-900\/50 { background-color: rgba(13, 24, 44, 0.50) !important; } .dark .dark\:bg-slate-900\/60 { background-color: rgba(13, 24, 44, 0.60) !important; } .dark .dark\:bg-slate-900\/80 { background-color: rgba(13, 24, 44, 0.80) !important; } .dark .dark\:bg-slate-900\/95 { background-color: rgba(13, 24, 44, 0.95) !important; } /* Surfaces actives / inputs (slate-800) */ .dark .dark\:bg-slate-800 { background-color: #14213d !important; } .dark .dark\:bg-slate-800\/40 { background-color: rgba(20, 33, 61, 0.40) !important; } .dark .dark\:bg-slate-800\/50 { background-color: rgba(20, 33, 61, 0.50) !important; } .dark .dark\:bg-slate-800\/55 { background-color: rgba(20, 33, 61, 0.55) !important; } .dark .dark\:bg-slate-800\/60 { background-color: rgba(20, 33, 61, 0.60) !important; } .dark .dark\:bg-slate-800\/80 { background-color: rgba(20, 33, 61, 0.80) !important; } .dark .dark\:bg-slate-700 { background-color: #1a2946 !important; } .dark .dark\:bg-slate-700\/40 { background-color: rgba(26, 41, 70, 0.40) !important; } .dark .dark\:bg-slate-700\/50 { background-color: rgba(26, 41, 70, 0.50) !important; } .dark .dark\:bg-slate-600\/30 { background-color: rgba(48, 71, 110, 0.30) !important; } /* Fonds de marque (badges, encarts, icônes) */ .dark .dark\:bg-blue-900\/20 { background-color: rgba(37, 78, 158, 0.20) !important; } .dark .dark\:bg-blue-900\/30 { background-color: rgba(37, 78, 158, 0.30) !important; } .dark .dark\:bg-blue-900\/40 { background-color: rgba(37, 78, 158, 0.40) !important; } .dark .dark\:bg-blue-800 { background-color: #1e3f7d !important; } .dark .dark\:bg-orange-900\/20 { background-color: rgba(170, 74, 10, 0.20) !important; } .dark .dark\:bg-orange-900\/30 { background-color: rgba(170, 74, 10, 0.30) !important; } .dark .dark\:bg-orange-900\/40 { background-color: rgba(170, 74, 10, 0.40) !important; } .dark .dark\:bg-orange-800 { background-color: #7c3d17 !important; } .dark .dark\:bg-green-900\/30 { background-color: rgba(16, 110, 74, 0.30) !important; } .dark .dark\:bg-green-900\/50 { background-color: rgba(16, 110, 74, 0.50) !important; } /* ============================================================ TEXTE — blanc cassé bleuté / niveaux de gris adaptés ============================================================ */ .dark .dark\:text-white { color: #e9f0fc !important; } .dark .dark\:text-slate-50 { color: #f4f8fe !important; } .dark .dark\:text-slate-100 { color: #dce6f5 !important; } .dark .dark\:text-slate-200 { color: #c7d5ec !important; } .dark .dark\:text-slate-300 { color: #aebfd9 !important; } .dark .dark\:text-slate-400 { color: #8ea2c3 !important; } .dark .dark\:text-slate-500 { color: #6c82a6 !important; } .dark .dark\:text-slate-600 { color: #566f94 !important; } .dark .dark\:text-slate-700 { color: #44597c !important; } .dark .dark\:text-slate-800 { color: #2c3f5e !important; } .dark .dark\:text-gray-100 { color: #dce6f5 !important; } .dark .dark\:text-gray-200 { color: #c7d5ec !important; } .dark .dark\:text-gray-300 { color: #aebfd9 !important; } .dark .dark\:text-gray-400 { color: #8ea2c3 !important; } .dark .dark\:text-gray-500 { color: #6c82a6 !important; } .dark .dark\:text-gray-600 { color: #566f94 !important; } .dark .dark\:text-gray-700 { color: #aebfd9 !important; } .dark .dark\:text-gray-800 { color: #e9f0fc !important; } .dark .dark\:text-gray-900 { color: #e9f0fc !important; } /* Accents de marque lumineux */ .dark .dark\:text-blue-200 { color: #c3dbff !important; } .dark .dark\:text-blue-300 { color: #8cb4ff !important; } .dark .dark\:text-blue-400 { color: #6fa1ff !important; } .dark .dark\:text-blue-500 { color: #5b95f5 !important; } .dark .dark\:text-blue-600 { color: #4b7fdf !important; } .dark .dark\:text-blue-700 { color: #5b95f5 !important; } .dark .dark\:text-orange-200 { color: #ffd3b0 !important; } .dark .dark\:text-orange-300 { color: #ffb37c !important; } .dark .dark\:text-orange-400 { color: #fb923c !important; } .dark .dark\:text-orange-500 { color: #fb923c !important; } .dark .dark\:text-orange-600 { color: #fb923c !important; } .dark .dark\:text-green-300 { color: #86efac !important; } .dark .dark\:text-green-400 { color: #4ade80 !important; } .dark .dark\:text-green-600 { color: #4ade80 !important; } /* ============================================================ BORDURES & SÉPARATEURS ============================================================ */ .dark .dark\:border-slate-500 { border-color: #44597c !important; } .dark .dark\:border-slate-600 { border-color: #3b5178 !important; } .dark .dark\:border-slate-700 { border-color: #294067 !important; } .dark .dark\:border-slate-800 { border-color: #1d2f51 !important; } .dark .dark\:border-slate-800\/60 { border-color: rgba(29, 47, 81, 0.60) !important; } .dark .dark\:border-slate-900 { border-color: #101c31 !important; } .dark .dark\:border-slate-900\/60 { border-color: rgba(16, 28, 49, 0.60) !important; } .dark .dark\:border-slate-950 { border-color: #0d182c !important; } .dark .dark\:border-gray-300 { border-color: #294067 !important; } .dark .dark\:border-gray-700 { border-color: #294067 !important; } .dark .dark\:border-gray-800 { border-color: #1d2f51 !important; } .dark .dark\:border-gray-900 { border-color: #101c31 !important; } .dark .dark\:border-blue-700 { border-color: #274b9c !important; } .dark .dark\:border-blue-800 { border-color: #1f3f8f !important; } .dark .dark\:border-blue-900 { border-color: #19336f !important; } .dark .dark\:border-orange-500 { border-color: #fb923c !important; } .dark .dark\:border-orange-700 { border-color: #93410f !important; } .dark .dark\:border-orange-800 { border-color: #7c3d17 !important; } .dark .dark\:border-orange-900 { border-color: #5a2b0d !important; } .dark .dark\:border-green-700 { border-color: #166534 !important; } .dark .dark\:border-green-800 { border-color: #14532d !important; } /* Séparateurs */ .dark .dark\:divide-slate-700 { border-color: #294067 !important; } .dark .dark\:divide-slate-800 { border-color: #1d2f51 !important; } .dark .dark\:divide-gray-700 { border-color: #294067 !important; } .dark .dark\:divide-gray-800 { border-color: #1d2f51 !important; } /* ============================================================ RING / OUTLINE (avatars, éléments flottants) ============================================================ */ .dark .dark\:ring-slate-800 { --tw-ring-color: #1d2f51 !important; } .dark .dark\:ring-slate-900 { --tw-ring-color: #0d182c !important; } .dark .dark\:ring-slate-950 { --tw-ring-color: #0d182c !important; } .dark .dark\:ring-blue-900\/30 { --tw-ring-color: rgba(37, 78, 158, 0.30) !important; } .dark .dark\:outline-slate-800 { --tw-outline-color: #1d2f51 !important; } .dark .dark\:outline-slate-900 { --tw-outline-color: #0d182c !important; } .dark .dark\:outline-slate-950 { --tw-outline-color: #0d182c !important; } .dark .dark\:outline-gray-900 { --tw-outline-color: #0d182c !important; } /* ============================================================ HOVER — fonds, bordures, texte ============================================================ */ .dark .dark\:hover\:bg-slate-700:hover { background-color: #24374f !important; } .dark .dark\:hover\:bg-slate-800:hover { background-color: #1a2946 !important; } .dark .dark\:hover\:bg-slate-800\/40:hover { background-color: rgba(26, 41, 70, 0.40) !important; } .dark .dark\:hover\:bg-slate-800\/50:hover { background-color: rgba(26, 41, 70, 0.50) !important; } .dark .dark\:hover\:bg-slate-800\/55:hover { background-color: rgba(26, 41, 70, 0.55) !important; } .dark .dark\:hover\:bg-slate-900:hover { background-color: #101c31 !important; } .dark .dark\:hover\:bg-slate-900\/70:hover { background-color: rgba(16, 28, 49, 0.70) !important; } .dark .dark\:hover\:bg-blue-700:hover { background-color: #24539c !important; } .dark .dark\:hover\:bg-blue-800:hover { background-color: #1e3f7d !important; } .dark .dark\:hover\:bg-blue-900\/20:hover { background-color: rgba(37, 78, 158, 0.20) !important; } .dark .dark\:hover\:bg-blue-900\/30:hover { background-color: rgba(37, 78, 158, 0.30) !important; } .dark .dark\:hover\:bg-blue-900\/50:hover { background-color: rgba(37, 78, 158, 0.50) !important; } .dark .dark\:hover\:bg-orange-500:hover { background-color: #fb923c !important; } .dark .dark\:hover\:bg-orange-600:hover { background-color: #f97316 !important; } .dark .dark\:hover\:bg-orange-700:hover { background-color: #c2410c !important; } .dark .dark\:hover\:bg-orange-800\/50:hover { background-color: rgba(154, 71, 16, 0.50) !important; } .dark .dark\:hover\:bg-orange-900\/20:hover { background-color: rgba(170, 74, 10, 0.20) !important; } .dark .dark\:hover\:bg-orange-950\/20:hover { background-color: rgba(124, 45, 8, 0.20) !important; } .dark .dark\:hover\:border-slate-600:hover { border-color: #3b5178 !important; } .dark .dark\:hover\:border-slate-700:hover { border-color: #294067 !important; } .dark .dark\:hover\:border-slate-800:hover { border-color: #1d2f51 !important; } .dark .dark\:hover\:border-blue-800:hover { border-color: #1f3f8f !important; } .dark .dark\:hover\:border-blue-900:hover { border-color: #19336f !important; } .dark .dark\:hover\:border-orange-600:hover { border-color: #f97316 !important; } .dark .dark\:hover\:border-orange-700:hover { border-color: #c2410c !important; } .dark .dark\:hover\:text-white:hover { color: #e9f0fc !important; } .dark .dark\:hover\:text-slate-100:hover { color: #dce6f5 !important; } .dark .dark\:hover\:text-slate-200:hover { color: #c7d5ec !important; } .dark .dark\:hover\:text-slate-300:hover { color: #aebfd9 !important; } .dark .dark\:hover\:text-gray-100:hover { color: #dce6f5 !important; } .dark .dark\:hover\:text-gray-200:hover { color: #c7d5ec !important; } .dark .dark\:hover\:text-gray-300:hover { color: #aebfd9 !important; } .dark .dark\:hover\:text-green-400:hover { color: #4ade80 !important; } .dark .dark\:hover\:text-orange-400:hover { color: #fb923c !important; } /* ============================================================ GROUP-HOVER (groupes Tailwind nommés ou anonymes) ============================================================ */ .dark .group:hover .dark\:group-hover\:text-white { color: #e9f0fc !important; } .dark .group:hover .dark\:group-hover\:text-blue-300 { color: #8cb4ff !important; } .dark .group:hover .dark\:group-hover\:text-blue-400 { color: #6fa1ff !important; } .dark .group:hover .dark\:group-hover\:text-gray-200 { color: #c7d5ec !important; } .dark .group:hover .dark\:group-hover\:text-gray-300 { color: #aebfd9 !important; } .dark .group:hover .dark\:group-hover\:text-gray-400 { color: #8ea2c3 !important; } .dark .group:hover .dark\:group-hover\:text-gray-900 { color: #e9f0fc !important; } .dark .group:hover .dark\:group-hover\:bg-blue-700 { background-color: #24539c !important; } .dark .group:hover .dark\:group-hover\:bg-slate-700 { background-color: #24374f !important; } .dark .group:hover .dark\:group-hover\:bg-slate-800 { background-color: #14213d !important; } .dark .group:hover .dark\:group-hover\:border-blue-800 { border-color: #1f3f8f !important; } .dark .group:hover .dark\:group-hover\:border-blue-900 { border-color: #19336f !important; } .dark .group:hover .dark\:group-hover\:border-slate-700 { border-color: #294067 !important; } /* Groupes nommés (/item) */ .dark .group\/item:hover .dark\:group-hover\/item\:text-blue-400 { color: #6fa1ff !important; } .dark .group\/item:hover .dark\:group-hover\/item\:bg-blue-600 { background-color: #2c53a8 !important; } .dark .group\/item:hover .dark\:group-hover\/item\:bg-blue-700 { background-color: #24539c !important; } .dark .group\/item:hover .dark\:group-hover\/item\:border-blue-800 { border-color: #1f3f8f !important; } .dark .group\/item:hover .dark\:group-hover\/item\:border-blue-900 { border-color: #19336f !important; } /* ============================================================ OMBRES — renforcées pour le mode nuit (profondeur) ============================================================ */ html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25) !important; } html.dark .shadow-md { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.30) !important; } html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.40) !important; } html.dark .shadow-float { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.50) !important; } html.dark .shadow-modal { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.55) !important; } /* ============================================================ MARQUE — primary (bleu) / secondary (orange) en mode nuit La config Tailwind (primary:#1d4ed8, secondary:#ea580c) est trop sombre pour un fond bleu nuit. On la remplace par des teintes lumineuses et contrastées. ============================================================ */ /* BLEU (primary) */ html.dark .text-primary { color: #8cb4ff !important; } html.dark .hover\:text-primary:hover { color: #8cb4ff !important; } html.dark .focus\:text-primary:focus { color: #8cb4ff !important; } html.dark .group:hover .group-hover\:text-primary { color: #8cb4ff !important; } html.dark .bg-primary { background-color: #2563eb !important; } html.dark .hover\:bg-primary:hover { background-color: #3b76f6 !important; } html.dark .focus\:bg-primary:focus { background-color: #2563eb !important; } html.dark .border-primary { border-color: #3b6dc9 !important; } html.dark .hover\:border-primary:hover { border-color: #5b8df0 !important; } html.dark .bg-primary\/5 { background-color: rgba(37, 99, 235, 0.08) !important; } html.dark .bg-primary\/8 { background-color: rgba(37, 99, 235, 0.12) !important; } html.dark .bg-primary\/10 { background-color: rgba(37, 99, 235, 0.16) !important; } html.dark .bg-primary\/15 { background-color: rgba(37, 99, 235, 0.22) !important; } html.dark .bg-primary\/20 { background-color: rgba(37, 99, 235, 0.26) !important; } html.dark .bg-primary\/30 { background-color: rgba(37, 99, 235, 0.38) !important; } html.dark .bg-primary\/40 { background-color: rgba(37, 99, 235, 0.48) !important; } html.dark .bg-primary\/50 { background-color: rgba(37, 99, 235, 0.58) !important; } html.dark .focus\:ring-primary:focus { --tw-ring-color: #60a5fa !important; } html.dark .shadow-primary\/20 { --tw-shadow-color: rgba(59, 118, 246, 0.35) !important; } html.dark .group:hover .group-hover\:bg-primary { background-color: #2563eb !important; } /* ORANGE (secondary) */ html.dark .text-secondary { color: #fb923c !important; } html.dark .hover\:text-secondary:hover { color: #fb923c !important; } html.dark .group:hover .group-hover\:text-secondary { color: #fb923c !important; } html.dark .bg-secondary { background-color: #f97316 !important; } html.dark .hover\:bg-secondary:hover { background-color: #fb923c !important; } html.dark .border-secondary { border-color: #f97316 !important; } html.dark .hover\:border-secondary:hover { border-color: #fb923c !important; } html.dark .bg-secondary\/5 { background-color: rgba(249, 115, 22, 0.08) !important; } html.dark .bg-secondary\/10 { background-color: rgba(249, 115, 22, 0.14) !important; } html.dark .bg-secondary\/15 { background-color: rgba(249, 115, 22, 0.20) !important; } html.dark .bg-secondary\/20 { background-color: rgba(249, 115, 22, 0.24) !important; } html.dark .bg-secondary\/30 { background-color: rgba(249, 115, 22, 0.36) !important; } html.dark .bg-secondary\/40 { background-color: rgba(249, 115, 22, 0.46) !important; } html.dark .bg-secondary\/50 { background-color: rgba(249, 115, 22, 0.56) !important; } html.dark .group:hover .group-hover\:bg-secondary { background-color: #f97316 !important; } /* Si le body ou des enfants en drapeau clair, on colore en douceur */ html.dark .bg-blue-50 { background-color: rgba(37, 78, 158, 0.20) !important; } html.dark .bg-orange-50 { background-color: rgba(170, 74, 10, 0.20) !important; } html.dark .bg-blue-100 { background-color: rgba(37, 78, 158, 0.30) !important; } html.dark .bg-orange-100 { background-color: rgba(170, 74, 10, 0.30) !important; } html.dark .text-blue-700 { color: #8cb4ff !important; } html.dark .text-blue-800 { color: #8cb4ff !important; } html.dark .text-orange-700 { color: #ffb37c !important; } html.dark .text-orange-800 { color: #ffb37c !important; } /* ============================================================ COMPOSANTS SPÉCIFIQUES — filet de sécurité ============================================================ */ /* Icônes FA passives en mode nuit */ html.dark .fa-regular.fa-star.text-gray-300 { color: #294067 !important; } /* Focus ring dans la marque */ html.dark .focus\:ring-blue-500:focus, html.dark .focus\:ring-blue-600:focus { --tw-ring-color: #5b95f5 !important; }