/* ========================================== MODE SOMBRE - ZAMANIA ========================================== Ce fichier définit les styles pour le mode sombre du site. Il surcharge les variables CSS définies dans styles.css. Le mode sombre est activé en ajoutant l'attribut data-theme="dark" sur la balise . ========================================== */ /* ========================================== VARIABLES DU MODE SOMBRE ========================================== Redéfinition des couleurs pour le thème sombre. Les variables sont inversées par rapport au mode clair pour créer un contraste approprié. ========================================== */ [data-theme="dark"] { /* Couleurs inversées pour le mode sombre */ --primary: #e8d4b0; /* Beige clair pour le texte principal */ --accent: #c9a05f; /* Or/beige conservé pour les accents */ --accent-light: #d4b589; /* Version légèrement plus claire de l'accent */ --background: #0f1419; /* Fond très sombre (presque noir) */ --surface: #1a1f2e; /* Fond des cartes (gris-bleu foncé) */ --text-primary: #e4e6eb; /* Texte principal (blanc cassé) */ --text-secondary: #a8b3c1; /* Texte secondaire (gris-bleu clair) */ --border: #2d3748; /* Bordures (gris foncé) */ } /* ========================================== AJUSTEMENTS SPÉCIFIQUES AU MODE SOMBRE ========================================== Modifications de styles qui nécessitent des changements au-delà des variables CSS. ========================================== */ /* Fond du Hero en mode sombre */ [data-theme="dark"] .hero { /* Dégradé du fond très sombre (#0f1419) vers la couleur surface (#1a1f2e) */ background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%); } /* En-tête - fond sombre semi-transparent */ [data-theme="dark"] header { background: rgba(26, 31, 46, 0.95); } /* Ombre portée de l'en-tête plus prononcée */ [data-theme="dark"] header.scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } /* Cercle visuel du hero - ombre plus prononcée */ [data-theme="dark"] .visual-circle { box-shadow: 0 20px 60px rgba(201, 160, 95, 0.4); } /* Cartes de service - ombre plus forte au survol */ [data-theme="dark"] .service-card:hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } /* Effet de dégradé plus visible sur les cartes */ [data-theme="dark"] .service-card:hover::before { opacity: 0.08; } /* Étapes - ombre au survol */ [data-theme="dark"] .step:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } /* Effet de fond plus visible sur les étapes */ [data-theme="dark"] .step:hover::before { opacity: 0.15; } /* Items d'avantages - ombre au survol */ [data-theme="dark"] .benefit-item:hover { box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); } /* Bouton CTA principal - couleur inversée au survol */ [data-theme="dark"] .btn-primary:hover { background: #e8d4b0; color: #1a2332; } /* Bouton CTA navigation - couleur inversée au survol */ [data-theme="dark"] .cta-nav:hover { background: #e8d4b0; color: #1a2332 !important; } /* Section cas d'usage - fond légèrement différent */ [data-theme="dark"] .cas-usage-section { background: #1a1f2e; } /* Section CTA - dégradé ajusté */ [data-theme="dark"] .cta-section { background: linear-gradient(135deg, #2d3748, #1a2332); } /* Footer - fond très sombre */ [data-theme="dark"] footer { background: #0f1419; } /* Texte du footer en mode sombre */ [data-theme="dark"] footer, [data-theme="dark"] .footer-about p, [data-theme="dark"] .footer-links a, [data-theme="dark"] .footer-bottom { color: rgba(255, 255, 255, 0.9); } /* Titres du footer en mode sombre */ [data-theme="dark"] .footer-about h3, [data-theme="dark"] .footer-section h4 { color: #e8d4b0; } /* Bannière de cookies - fond adapté */ [data-theme="dark"] .cookie-banner { background: #1a1f2e; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); } /* Bouton accepter cookies - couleur inversée au survol */ [data-theme="dark"] .cookie-btn-accept:hover { background: #e8d4b0; color: #1a2332; } /* ========================================== BOUTON DE BASCULE DE THÈME ========================================== Styles spécifiques au bouton toggle. ========================================== */ /* Bouton de bascule du thème */ .theme-toggle { position: relative; top: 4px; /* pousse le bouton vers le bas. Augmentez à 6px ou 8px si besoin */ width: 60px; height: 30px; background: var(--border); border-radius: 30px; cursor: pointer; transition: background-color 0.3s ease; border: none; padding: 0; overflow: hidden; } .theme-toggle:hover { background: var(--accent); } /* Slider du bouton (cercle qui se déplace) */ .theme-toggle-slider { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: var(--surface); border-radius: 50%; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Position du slider en mode sombre */ [data-theme="dark"] .theme-toggle-slider { transform: translateX(30px); } /* Icône à l'intérieur du slider */ .theme-toggle-icon { transition: opacity 0.3s ease; } /* ========================================== NOTES SUR L'ACCESSIBILITÉ ========================================== Le mode sombre respecte les contrastes minimum recommandés par le WCAG : - Ratio de contraste minimum 4.5:1 pour le texte normal - Ratio de contraste minimum 3:1 pour le texte de grande taille Les animations respectent également les préférences utilisateur (prefers-reduced-motion) définies dans le fichier animations.js. ========================================== */ /* ========================================== FAQ - MODE SOMBRE ========================================== */ [data-theme="dark"] .faq-item { background: rgba(255, 255, 255, 0.02); border-color: rgba(201, 160, 95, 0.3); } [data-theme="dark"] .faq-item:hover { border-color: rgba(201, 160, 95, 0.5); box-shadow: 0 4px 20px rgba(201, 160, 95, 0.15); } [data-theme="dark"] .faq-question:hover { background: rgba(201, 160, 95, 0.08); } /* Texte des questions en mode sombre - TRÈS LISIBLE */ [data-theme="dark"] .faq-question-text { color: #e4e6eb; /* Gris très clair pour excellente lisibilité */ } /* Réponses en mode sombre */ [data-theme="dark"] .faq-answer p { color: #b8bbc4; } /* Icône en mode sombre */ [data-theme="dark"] .faq-icon { color: var(--accent); } /* ========================================== COULEURS PARTICULES (MODE SOMBRE) ========================================== */ /* En mode sombre, le Hero devient foncé, donc on repasse les particules en BLANC */ [data-theme="dark"] .hero { --particle-rgb: 255, 255, 255; } /* Le CTA reste sur fond coloré, on garde le blanc */ [data-theme="dark"] .cta-section { --particle-rgb: 255, 255, 255; }