/* ============================================================ MAGRILEC — THÈME SOMBRE BRANDÉ (piloté par la classe .dark) ------------------------------------------------------------ Chargé EN DERNIER (après tailwind.css) → gagne la cascade. Activé UNIQUEMENT quand (bouton + localStorage). Le site est donc CLAIR par défaut, quel que soit le réglage du device/navigateur → règle aussi le sombre forcé de Samsung. Mécanique : 1) on surcharge les CANAUX RGB --c-* → tous les utilitaires Tailwind (+ variants hover:/lg:/opacité /N) basculent d'un coup ; 2) on surcharge les --color-* → .mag-*, body, loader, scrollbars ; 3) on corrige les surfaces "double rôle" (bg-earth-dark = surface sombre qui doit RESTER sombre) + littéraux blancs (navbar/toast/glass). Identité préservée : sombre CHAUD terreux, TERRACOTTA héros, texte crème. ============================================================ */ :root.dark { color-scheme: dark; /* ---- Canaux RGB → utilitaires Tailwind ---- */ --c-sand-base: 24 22 17; /* fond page #181611 */ --c-sand-light: 31 28 22; /* bandes alt. #1F1C16 */ --c-sand-lighter: 36 33 26; /* cartes #24211A */ --c-sand-warm: 48 44 35; /* chips/bord. #302C23 */ --c-earth-dark: 242 237 225; /* ENCRE → crème #F2EDE1 */ --c-earth-medium: 189 183 168; /* atténué #BDB7A8 */ --c-earth-light: 154 148 134; /* subtil #9A9486 */ --c-terracotta: 236 126 80; /* héros éclairci #EC7E50 */ --c-terracotta-dark: 184 80 46; /* CTA (blanc 4.8:1) inchangé */ --c-terracotta-soft: 240 147 106; /* #F0936A */ --c-water-blue: 70 178 226; /* #46B2E2 */ --c-water-blue-dark: 60 152 198; /* #3C98C6 */ --c-nature-green: 147 193 62; /* #93C13E */ --c-nature-green-dark: 130 175 50; /* #82AF32 */ --c-solar-amber: 245 167 30; /* gardé (pop naturel) */ --c-solar-amber-dark: 210 140 40; /* #D28C28 */ --c-solar-warm: 240 160 48; /* #F0A030 */ --c-whatsapp: 37 211 102; /* marque, gardé */ /* ---- Primitifs sémantiques (.mag-*, body, loader, scrollbars) ---- Les tokens dérivés (--color-text = var(--color-earth-dark), etc.) suivent. */ --color-sand-base: #181611; --color-sand-light: #1F1C16; --color-sand-lighter: #24211A; --color-sand-warm: #302C23; --color-earth-dark: #F2EDE1; --color-earth-medium: #BDB7A8; --color-earth-light: #9A9486; --color-earth-light-original: #6B6A5E; --color-terracotta: #EC7E50; --color-terracotta-dark: #B8502E; --color-terracotta-cta-hover: #C85A33; --color-terracotta-soft: #F0936A; --color-water-blue: #46B2E2; --color-water-blue-dark: #3C98C6; --color-nature-green: #93C13E; --color-nature-green-dark: #82AF32; --color-solar-amber: #F5A71E; --color-solar-amber-dark: #D28C28; --color-solar-warm: #F0A030; /* ---- Sémantiques à RÔLE FIXE (ne suivent pas l'inversion) ---- */ --color-surface-raised: #2B2820; /* était #FFFFFF littéral */ --color-surface-dark: #0F0E0A; /* reste sombre */ --color-text-on-dark: #F2EDE1; /* texte sur surface sombre → reste clair */ --color-border: #34302A; /* bordure visible sur sombre */ --color-border-strong: #4A4538; --color-focus: #46B2E2; /* anneau focus visible sur sombre */ } /* Ombres encre invisibles sur sombre → fond + texte garantis sur body. */ .dark body { background-color: var(--color-sand-base); color: var(--color-earth-dark); } /* ---- DOUBLE RÔLE : bg-earth-dark = surface SOMBRE (boutons/bandes/sections) qui doit RESTER sombre (sinon texte blanc sur fond crème). Les washes bg-earth-dark/5, /8… restent des classes distinctes → basculent en clair. ---- */ .dark .bg-earth-dark, .dark .hover\:bg-earth-dark:hover { background-color: #2E2A22; } .dark .hover\:bg-earth-medium:hover { background-color: #3A362C; } /* ---- Navbar pilule (littéraux blancs de styles.css) ---- */ .dark #main-nav > .section-container { background: rgba(36, 33, 26, 0.85); border-color: rgba(242, 237, 225, 0.08); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); } .dark #main-nav[data-scrolled="true"] > .section-container { background: rgba(36, 33, 26, 0.92); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55); } /* ---- Menus de navigation : élévation PROPRE en sombre ---- Problème en clair→sombre : le dropdown prenait le fond des cartes (≈ fond de page) + une ombre encre qui vire au halo noir terne. On rétablit une vraie hiérarchie : surface élevée distincte + bordure claire + ombre douce. */ .dark #solutions-menu { background-color: #2B2820; /* élevé, distinct du fond #181611 */ border-color: rgba(242, 237, 225, 0.10); /* hairline clair visible */ box-shadow: 0 18px 44px -8px rgba(0, 0, 0, 0.55); } /* Menu mobile plein écran : panneau légèrement chaud (distinct) + voile SOMBRE (bg-earth-dark/40 deviendrait un voile CLAIR une fois earth-dark inversé). */ .dark #menu-panel { background-color: #1C1A14; } .dark #menu-backdrop { background-color: rgba(10, 9, 6, 0.6) !important; } .dark #menu-close-btn { background-color: rgba(242, 237, 225, 0.06); } /* ---- Toast + glassmorphism clair (littéraux blancs) ---- */ .dark .toast { background-color: #24211A; border-color: rgba(242, 237, 225, 0.10); } .dark .glass-pro-light { background: rgba(36, 33, 26, 0.72); border-color: rgba(242, 237, 225, 0.08); } /* ---- Tints clairs arbitraires (fonds de pastilles d'icônes) → sombres ---- */ .dark .bg-\[\#F5F9E8\] { background-color: rgba(147, 193, 62, 0.13) !important; } /* vert */ .dark .bg-\[\#FDF5E3\] { background-color: rgba(245, 167, 30, 0.13) !important; } /* amber */ .dark .bg-\[\#EAF6FC\] { background-color: rgba(70, 178, 226, 0.13) !important; } /* bleu */