/* dark-mode.css - mode sombre Fairmi v1 */ /* Appliqué sur par JS au chargement (anti-FOUC) et au clic */ html.dark-mode { color-scheme: dark; background-color: #0f172a; } /* ======================== GLOBAL ======================== */ html.dark-mode body { background-color: #0f172a; color: #e2e8f0; } html.dark-mode a:not([class*="btn"]):not([class*="xp2"]) { color: #93c5fd; } html.dark-mode a:not([class*="btn"]):not([class*="xp2"]):hover { color: #bfdbfe; } /* ======================== NAVBAR ======================== */ html.dark-mode .accueil_fairmi .navbar, html.dark-mode .annexes .navbar, html.dark-mode .pageAuthentification .navbar, html.dark-mode .decouverte .navbar, html.dark-mode .navbar { background-color: #1e293b !important; } html.dark-mode .menuCentral ul li a, html.dark-mode .menuCentral ul li span { color: #e2e8f0; } html.dark-mode .menuCentral ul li a:hover, html.dark-mode .menuCentral ul li span:hover { color: #93c5fd; } html.dark-mode .btnConnexionBanniere { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } html.dark-mode .btnConnexionBanniere:hover { background: #334155 !important; } html.dark-mode .btnConnexionBanniere--connecte { background: #1d4ed8 !important; color: #fff !important; border-color: #1d4ed8 !important; } html.dark-mode .btnConnexionBanniere--connecte:hover { background: #2563eb !important; } html.dark-mode .btnInscriptionBanniere { background: #1d4ed8; color: #fff; } html.dark-mode .btnInscriptionBanniere:hover { background: #2563eb; color: #fff; } /* ======================== MENU MOBILE ======================== */ html.dark-mode .sidenavMenuMobile { background-color: #1e293b !important; color: #e2e8f0; } html.dark-mode .sidenavMenuMobile a, html.dark-mode .sidenavMenuMobile div { color: #e2e8f0; } html.dark-mode .sidenavMenuMobile a:hover { color: #93c5fd; } /* ======================== CONTENU PRINCIPAL - ACCUEIL ======================== */ html.dark-mode body.accueil_fairmi, html.dark-mode main { background-color: #0f172a !important; color: #e2e8f0 !important; } html.dark-mode .section-hero { background-color: #0f172a; color: #e2e8f0; } html.dark-mode .section-hero article p, html.dark-mode .hero-compteur { color: #94a3b8; } html.dark-mode .hero-compteur-nombre { color: #cbd5e1; } html.dark-mode .section-hero h1 { color: #f1f5f9; } html.dark-mode .accueil-section { background-color: #0f172a; } html.dark-mode .accueil-section h2 { color: #f1f5f9; } html.dark-mode .section-top5 { background-color: #1e293b; } /* Blocs fond blanc / gris clair */ html.dark-mode section[class], html.dark-mode .bg-white, html.dark-mode .bg-light { background-color: #0f172a; color: #e2e8f0; } /* ======================== FOOTER ======================== */ html.dark-mode footer, html.dark-mode .footer { background-color: #1e293b; color: #94a3b8; } html.dark-mode footer a, html.dark-mode .footer a { color: #93c5fd; } /* ======================== BOUTON TOGGLE CLAIR/SOMBRE ======================== */ .btn-dark-toggle { background: none; border: none; cursor: pointer; font-size: 1.1em; padding: 5px 7px; border-radius: 6px; line-height: 1; color: inherit; transition: background 0.15s; display: inline-flex; align-items: center; vertical-align: middle; } .btn-dark-toggle:hover { background: rgba(0, 0, 0, 0.08); } html.dark-mode .btn-dark-toggle:hover { background: rgba(255, 255, 255, 0.1); } /* Icones : lune visible en mode clair, soleil en mode sombre */ .btn-dark-toggle .icon-sun { display: none; } .btn-dark-toggle .icon-moon { display: inline; } html.dark-mode .btn-dark-toggle .icon-sun { display: inline; } html.dark-mode .btn-dark-toggle .icon-moon { display: none; }