/* ============================================ DARK MODE - Refactorisé et commenté Remplace entièrement l'ancien dark-mode.css - Conserver la feuille principale (style.css) chargée AVANT ce fichier - Les sections "EXCEPTIONS" contiennent les règles pour préserver l'apparence d'éléments spécifiques (tes sélecteurs listés) - Les commentaires expliquent où et pourquoi intervenir ============================================ */ /* ---------- Variables centrales ---------- Définir ici les couleurs et durées de transition pour faciliter les ajustements ultérieurs. Ne pas redéfinir ces variables dans la feuille principale si tu veux qu'elles s'appliquent globalement. */ :root { --dm-bg: #1a1a1a; --dm-panel: #2a2a2a; --dm-panel-2: #222222; --dm-text: #e0e0e0; --dm-muted: #999999; --dm-link: #4da3ff; --dm-link-hover: #80c1ff; --dm-accent: #4da3ff; --dm-border: #444444; --dm-card: #333333; --dm-highlight: #dadada; --transition-fast: 0.25s; } /* ===================================================== IMPORTANT : Ordre de chargement - style.css (ta feuille principale) doit être chargé AVANT dark-mode.css pour que les exceptions ci‑dessous puissent "hériter" des styles d'origine. - Si tu utilises un loader JS pour activer le dark-mode, assure-toi que la classe `dark-mode` est ajoutée au . ===================================================== */ /* ---------- Entrée unique pour activer le dark mode ---------- Toutes les règles ciblent body.dark-mode pour éviter d'impacter l'apparence par défaut lorsque le dark-mode n'est pas actif. */ body.dark-mode { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================= EXCEPTIONS — éléments à préserver Placez ce bloc EN TETE du fichier (juste après body.dark-mode) pour qu'il annule les règles générales du dark mode. Utilise `inherit` pour restaurer la couleur définie dans la feuille principale. `!important` est utilisé uniquement ici pour garantir l'annulation des overrides larges. ========================= */ /* 1) H3 dans .footer_column : conserver la couleur définie dans style.css */ body.dark-mode .footer_column h3 { /* conserve la couleur/fond du CSS principal */ color: var(--footer_primary) !important; background-color: transparent !important; } /* 2) a dans #myTopnav et .topnav : liens de navigation en haut */ body.dark-mode #myTopnav a, body.dark-mode .topnav a { color: inherit !important; background-color: transparent !important; text-decoration: inherit !important; } /* 3) a dans .titrepavecactupays : liens spécifiques à ce bloc */ body.dark-mode .titrepavecactupays a { color: inherit !important; background-color: transparent !important; } /* 4) h2 dans .titreloginbleu : titre de la zone login bleu */ body.dark-mode .titreloginbleu h2, body.dark-mode .titreloginquiz h2, body.dark-mode .titreloginMarron h2 { color: inherit !important; background-color: transparent !important; } /* 5) h3 et h4 dans .TBBlocservices : titres des blocs services */ body.dark-mode .TBBlocservices h3, body.dark-mode .TBBlocservices h4 { color: inherit !important; background-color: transparent !important; } /* 6) h3.servicestitre3 : sélecteur de classe spécifique */ body.dark-mode h3.servicestitre3 { color: inherit !important; background-color: transparent !important; } /* 7) h4 dans .servicesSoustitre : sous-titres des services */ body.dark-mode .servicesSoustitre h4 { color: inherit !important; background-color: transparent !important; } /* 8) autres */ body.dark-mode .padding20p, body.dark-mode .padding10p, body.dark-mode .titrepavecactupays, body.dark-mode .ecartetexte { color: #929191 !important; background-color: transparent !important; } .testimonial .Tem_content p { color: #929191 !important; } /* NOTE : - Si certaines de ces classes sont appliquées directement sur les (ex: ), les règles ci‑dessus couvrent aussi ce cas via la spécificité. - Si tu préfères marquer manuellement les éléments à préserver, ajoute la classe `.preserve-dark` dans le HTML et remplace `color: inherit !important;` par `body.dark-mode .preserve-dark { color: inherit !important; }` */ /* ---------- Conteneurs principaux ---------- Règles générales pour les zones structurelles. Ces règles s'appliquent après les exceptions ci‑dessus. */ body.dark-mode header, body.dark-mode nav, body.dark-mode footer, body.dark-mode aside, body.dark-mode .header, body.dark-mode .navbar, body.dark-mode .sidebar, body.dark-mode .footer { background-color: var(--dm-panel) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* ---------- Zones de contenu (groupées) ---------- */ body.dark-mode main, body.dark-mode article, body.dark-mode section, body.dark-mode .content, body.dark-mode .container, body.dark-mode .wrapper, body.dark-mode .card, body.dark-mode .box, body.dark-mode .panel { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* ---------- Liens (règle générale) ---------- Les exceptions pour certains conteneurs sont déjà définies plus haut. */ body.dark-mode a { color: var(--dm-link) !important; text-decoration: none; } body.dark-mode a:hover, body.dark-mode a:focus { color: var(--dm-link-hover) !important; text-decoration: underline; } body.dark-mode a:visited { color: var(--dm-link-hover) !important; } /* MES EXCLUSIONS : Si tu veux exclure d'autres conteneurs à l'avenir, ajoute-les dans la règle :is() ci‑dessous (ex: .monBlocSpecial) */ body.dark-mode :is(.carousel, .pavecactupays, .divnormalHP, .divnormalHP2Div) a { color: inherit !important; } body.dark-mode :is(.TBBlocunique h3, .TBBlocunique h2, .titrelogin) { color: #2085C9 !important; } body.dark-mode :is(.membre) { background: #333333; } body.dark-mode :is(.compte-modal-content) { color: #333333 !important; background-color: transparent !important; } body.dark-mode :is(fieldset) { color: #DADADA !important; background-color: #333333; } body.dark-mode :is(.separator) { background-color: transparent !important; } body.dark-mode :is(.blanc, .blanc h2) { background-color: #FFFFFF !important; color: #000000 !important; } body.dark-mode :is(#modal-text) { background-color: #333333 !important; color: #2085C9 !important; } body.dark-mode :is( h4.servicesSoustitre) { color: #935a15 !important; } body.dark-mode :is(.TBdivHautformules h1, .TBdivHautformules h2) { color: #656565!important; } body.dark-mode :is(#divContainer, #div1, .modal-content) { background-color: #333333 !important; color: #2085C9 !important; } body.dark-mode a[id^="link"] .optionspacks { background-color: #444444 !important; } body.dark-mode .checkmark { color: #00ff00 !important; } body.dark-mode .crossmark { color: #ff6b6b !important; } body.dark-mode .infomark { color: #5dade2 !important; cursor: pointer; } /* ---------- Formulaires et champs ---------- */ body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode input[type="search"], body.dark-mode input[type="tel"], body.dark-mode input[type="url"], body.dark-mode input[type="number"], body.dark-mode textarea, body.dark-mode select { background-color: var(--dm-panel) !important; color: var(--dm-text) !important; border: 1px solid var(--dm-border) !important; caret-color: var(--dm-text) !important; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #888888 !important; } body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus { outline: none; box-shadow: 0 0 0 3px rgba(77,163,255,0.5); /* 50% au lieu de 12% */ border-color: var(--dm-link) !important; background-color: var(--dm-card) !important; } /* ---------- Boutons ---------- */ body.dark-mode button, body.dark-mode .button, body.dark-mode .btn { background-color: #3a3a3a !important; color: var(--dm-text) !important; border: 1px solid #555555 !important; } body.dark-mode button:hover, body.dark-mode .button:hover, body.dark-mode .btn:hover { background-color: #4a4a4a !important; } body.dark-mode button.primary, body.dark-mode .btn-primary, body.dark-mode button[type="submit"] { background-color: var(--dm-accent) !important; color: #ffffff !important; border-color: var(--dm-accent) !important; } /* ---------- Tableaux ---------- */ body.dark-mode table { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; border-collapse: collapse; } body.dark-mode th { background-color: var(--dm-panel) !important; color: #ffffff !important; border: 1px solid var(--dm-border) !important; } body.dark-mode td { border: 1px solid var(--dm-border) !important; } body.dark-mode tr:nth-child(even) { background-color: var(--dm-panel-2) !important; } body.dark-mode tr:hover { background-color: var(--dm-panel) !important; } /* ---------- Bordures et séparateurs ---------- */ body.dark-mode hr, body.dark-mode .divider { border-color: var(--dm-border) !important; background-color: var(--dm-border) !important; } /* ---------- Images et médias ---------- Eviter les transformations globales ; cibler uniquement si nécessaire. */ body.dark-mode img { opacity: 0.95; transition: opacity var(--transition-fast) ease; } body.dark-mode img:hover { opacity: 1; } /* ---------- Alertes, messages, modals ---------- */ body.dark-mode .alert, body.dark-mode .message, body.dark-mode .notification, body.dark-mode .modal, body.dark-mode .popup, body.dark-mode .dialog, body.dark-mode .search-content { background-color: var(--dm-panel) !important; color: var(--dm-text) !important; border: 1px solid var(--dm-border) !important; } /* ---------- Titres et textes ---------- Les exceptions de titres spécifiques (ex: .titreloginbleu) sont gérées dans le bloc "EXCEPTIONS" en tête du fichier. */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #ffffff !important; } /* Texte secondaire */ body.dark-mode .text-muted, body.dark-mode .text-secondary, body.dark-mode small, body.dark-mode .small { color: var(--dm-muted) !important; } /* Code blocks */ body.dark-mode code, body.dark-mode pre { background-color: var(--dm-panel) !important; color: var(--dm-text) !important; border: 1px solid var(--dm-border) !important; } /* ---------- Transitions (performances) ---------- Limiter la portée des transitions pour réduire les repaint. */ body.dark-mode, body.dark-mode .content, body.dark-mode header, body.dark-mode footer, body.dark-mode .card { transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease; } @media (prefers-reduced-motion: reduce) { body.dark-mode, body.dark-mode * { transition: none !important; animation: none !important; } } /* ---------- Surcharges spécifiques et composants ---------- */ body.dark-mode #search-form input[type="text"] { background-color: #333333 !important; color: #ffffff !important; } body.dark-mode .btn_recherche_site { background-color: var(--dm-accent) !important; color: #ffffff !important; } /* Footer styles (les h3 de footer sont préservés via l'exception en tête) */ body.dark-mode .footer_prefooter { background: linear-gradient(135deg, #2a5a8f 0%, #1e4771 100%) !important; } body.dark-mode .footer_prefooter_title { color: #ffffff !important; } body.dark-mode .footer_column a { color: #b0b0b0 !important; } body.dark-mode .footer_column a:hover { color: var(--dm-accent) !important; } /* Scroll arrow */ body.dark-mode .scroll-arrow { background: var(--dm-accent) !important; color: #ffffff !important; } /* ---------- Carousel : forçage minimal ---------- On évite d'utiliser .carousel * globalement ; cibler uniquement les propriétés nécessaires pour préserver l'affichage. */ body.dark-mode .carousel, body.dark-mode .carousel-item, body.dark-mode .carousel-inner { background-color: transparent !important; color: inherit !important; } body.dark-mode .carousel-item { opacity: 1 !important; /*display: block !important;*/ visibility: visible !important; min-height: 284px !important; } body.dark-mode .carousel-indicators { z-index: 1 !important; } body.dark-mode .carousel-indicators span { background-color: var(--dm-highlight) !important; opacity: 0.3 !important; width: 10px !important; height: 8px !important; margin: 3px !important; } body.dark-mode .carousel-indicators span.active { background-color: #ffffff !important; opacity: 1 !important; width: 40px !important; } body.dark-mode .carousel-item[style] { background-color: transparent !important; } /* ---------- Composants visuels spécifiques ---------- */ body.dark-mode .mainarticle, body.dark-mode .titre2 { color: var(--dm-highlight) !important; } body.dark-mode .boutonMarron { color: #e9e9e9 !important; } body.dark-mode .ongfonce h1 { color: #f4e394 !important; } /* Inversion ciblée d'icônes/éléments d'interface */ body.dark-mode .aide, body.dark-mode .moncompte, body.dark-mode .moncompteconnecte, body.dark-mode .parametres, body.dark-mode .recherche, body.dark-mode .webmail { filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg); } /* Cacher certains dégradés non souhaités en dark mode */ body.dark-mode #degradeblanc { display: none !important; visibility: hidden !important; } /* ---------- Pages légales (styles spécifiques) ---------- */ body.dark-mode.page-legale { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } body.dark-mode.page-legale h1 { color: #ffffff !important; border-bottom-color: var(--dm-accent) !important; } body.dark-mode.page-legale .intro { background-color: var(--dm-panel) !important; border-left-color: var(--dm-accent) !important; color: var(--dm-text) !important; } body.dark-mode.page-legale .summary-box { background-color: #2a4a6f !important; border-left-color: var(--dm-accent) !important; color: var(--dm-text) !important; } body.dark-mode.page-legale .important { background-color: #3a3520 !important; border-color: #ffcc00 !important; color: var(--dm-text) !important; } body.dark-mode.page-legale .info-block { background-color: var(--dm-panel) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode.page-legale .contact-box { background-color: #243a2a !important; border-color: var(--dm-accent) !important; color: var(--dm-text) !important; } body.dark-mode.page-legale .data-table th { background-color: var(--dm-accent) !important; color: #ffffff !important; } body.dark-mode.page-legale .data-table td { background-color: var(--dm-panel) !important; color: var(--dm-text) !important; } /* ---------- Accessibilité : focus visible ---------- */ body.dark-mode :focus { outline: 3px solid rgba(77,163,255,0.18); outline-offset: 2px; } /* ---------- Notes de maintenance ---------- - Pour ajouter d'autres éléments à préserver : ajouter une règle dans la section "EXCEPTIONS" en tête du fichier. - Préfère `inherit` plutôt que `initial` ou `revert` si tu veux explicitement récupérer la valeur définie dans la feuille principale. - Limite l'usage de !important : ici il est utilisé uniquement pour les exceptions et pour overrides nécessaires. - Teste sur mobile et desktop, et vérifie le contraste (WCAG). ----------------------------------------- */