/* ============================================================================ * Dark mode — overrides appliqués quand . * Ne modifie pas style.css ; utilise la spécificité du sélecteur data-theme * pour remplacer les variables et quelques couleurs hardcodées de la V4. * ============================================================================ */ /* --- Override des variables CSS racines --- */ :root[data-theme="dark"] { --color-bg: #0f0f10; --color-bg-alt: #1a1a1d; --color-text: #ececec; --color-text-light: #b0b0b0; --color-text-lighter: #808080; /* L'accent cyan reste identique pour garder la charte Yann.Art */ --color-primary: #0BCFE0; --color-secondary: #02D2ED; --color-accent: #0AB8D1; } /* --- Corps de page & transitions --- */ :root[data-theme="dark"] body { background-color: var(--color-bg); color: var(--color-text); } html[data-theme] body, html[data-theme] .nav, html[data-theme] .footer, html[data-theme] .exposition-card, html[data-theme] .hero, html[data-theme] .exposition-nav, html[data-theme] .exposition-nav-link, html[data-theme] .contact-form-container, html[data-theme] .form-input, html[data-theme] .form-textarea { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* --- Header / nav --- */ :root[data-theme="dark"] .nav { background: rgba(15, 15, 16, 0.92); border-bottom: 1px solid #2a2a2e; } :root[data-theme="dark"] .nav-logo-title { color: var(--color-text); } :root[data-theme="dark"] .nav-logo-subtitle { color: var(--color-text-light); } /* Logo : swap instantané entre version noire (light) et blanche (dark) — pas de JS, pas de flash. */ .nav-logo-icon-dark { display: none; } :root[data-theme="dark"] .nav-logo-icon-light { display: none; } :root[data-theme="dark"] .nav-logo-icon-dark { display: inline-block; } :root[data-theme="dark"] .nav-link { color: var(--color-text); } :root[data-theme="dark"] .nav-link:hover, :root[data-theme="dark"] .nav-link.active { color: var(--color-primary); } :root[data-theme="dark"] .nav-separator { color: var(--color-text-lighter); } :root[data-theme="dark"] .nav-toggle span { background: var(--color-text); } /* --- Hero --- */ :root[data-theme="dark"] .hero { background: linear-gradient(135deg, #0f0f10 0%, #1a1a1d 100%); } :root[data-theme="dark"] .hero-title { color: var(--color-text); } :root[data-theme="dark"] .hero-subtitle { color: var(--color-text-light); } :root[data-theme="dark"] .scroll-text { color: var(--color-text-lighter); } :root[data-theme="dark"] .scroll-indicator { background: linear-gradient(to bottom, transparent 0%, #666 50%, transparent 100%); } /* --- Cartes et sections --- */ :root[data-theme="dark"] .expositions, :root[data-theme="dark"] .about, :root[data-theme="dark"] .contact, :root[data-theme="dark"] .contact-form-section, :root[data-theme="dark"] .legal-content, :root[data-theme="dark"] .exposition-header, :root[data-theme="dark"] .gallery-section, :root[data-theme="dark"] .exposition-outro, :root[data-theme="dark"] .error-section { background-color: var(--color-bg); color: var(--color-text); } :root[data-theme="dark"] .section-title, :root[data-theme="dark"] .about-title, :root[data-theme="dark"] .contact-title, :root[data-theme="dark"] .outro-title, :root[data-theme="dark"] .exposition-main-title, :root[data-theme="dark"] .gallery-title, :root[data-theme="dark"] .legal-title, :root[data-theme="dark"] .legal-section h2, :root[data-theme="dark"] .legal-section h3, :root[data-theme="dark"] .exposition-title { color: var(--color-text); } :root[data-theme="dark"] .legal-section h2 { border-bottom-color: #2a2a2e; } :root[data-theme="dark"] .section-subtitle, :root[data-theme="dark"] .about-description, :root[data-theme="dark"] .contact-description, :root[data-theme="dark"] .outro-description, :root[data-theme="dark"] .exposition-main-description, :root[data-theme="dark"] .gallery-caption, :root[data-theme="dark"] .legal-subtitle, :root[data-theme="dark"] .legal-section p, :root[data-theme="dark"] li, :root[data-theme="dark"] .exposition-header-year, :root[data-theme="dark"] .exposition-header-count { color: var(--color-text-light); } /* Cards & galeries */ :root[data-theme="dark"] .exposition-card { background: var(--color-bg-alt); border: 1px solid #2a2a2e; } :root[data-theme="dark"] .exposition-card.coming-soon .exposition-image { background: #1a1a1d; } :root[data-theme="dark"] .gallery-image-frame { background: #1a1a1d; } /* Footer */ :root[data-theme="dark"] .footer { background: #0a0a0b; color: var(--color-text-light); border-top: 1px solid #2a2a2e; } :root[data-theme="dark"] .footer-brand-link, :root[data-theme="dark"] .footer-link { color: var(--color-text); } :root[data-theme="dark"] .footer-link:hover { color: var(--color-primary); } :root[data-theme="dark"] .footer-separator { color: var(--color-text-lighter); } :root[data-theme="dark"] .footer-text { color: var(--color-text-lighter); } /* Formulaires */ :root[data-theme="dark"] .form-input, :root[data-theme="dark"] .form-textarea, :root[data-theme="dark"] .captcha-display, :root[data-theme="dark"] .captcha-input { background: #1a1a1d; color: var(--color-text); border-color: #2a2a2e; } :root[data-theme="dark"] .form-input:focus, :root[data-theme="dark"] .form-textarea:focus, :root[data-theme="dark"] .captcha-input:focus { border-color: var(--color-primary); outline: none; } /* WCAG 2.4.7 — Indicateur clavier explicite (MED-02) */ :root[data-theme="dark"] .form-input:focus-visible, :root[data-theme="dark"] .form-textarea:focus-visible, :root[data-theme="dark"] .captcha-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } :root[data-theme="dark"] .form-label { color: var(--color-text); } :root[data-theme="dark"] .form-rgpd, :root[data-theme="dark"] .rgpd-text { color: var(--color-text-light); } :root[data-theme="dark"] .contact-info-title { color: var(--color-text); } :root[data-theme="dark"] .contact-info-text { color: var(--color-text-light); } /* Breadcrumbs + nav expo */ :root[data-theme="dark"] .breadcrumbs-list { color: var(--color-text-lighter); } :root[data-theme="dark"] .breadcrumbs-item a { color: var(--color-text-light); } :root[data-theme="dark"] .breadcrumbs-item a:hover { color: var(--color-primary); } :root[data-theme="dark"] .breadcrumbs-item [aria-current="page"] { color: var(--color-text); } :root[data-theme="dark"] .breadcrumbs-sep { color: #444; } :root[data-theme="dark"] .exposition-nav { background: #0a0a0b; border-top-color: #2a2a2e; } :root[data-theme="dark"] .exposition-nav-link { background: var(--color-bg-alt); border-color: #2a2a2e; color: var(--color-text); } :root[data-theme="dark"] .exposition-nav-link:hover { border-color: var(--color-primary); } :root[data-theme="dark"] .exposition-nav-title { color: var(--color-text); } :root[data-theme="dark"] .exposition-nav-label { color: var(--color-text-lighter); } /* Erreurs 404 / 500 */ :root[data-theme="dark"] .error-code { color: var(--color-text); } :root[data-theme="dark"] .error-message { color: var(--color-text-light); } :root[data-theme="dark"] .error-link { color: var(--color-primary); } /* Scroll-to-top */ :root[data-theme="dark"] .scroll-to-top { background: var(--color-primary); color: #0f0f10; } :root[data-theme="dark"] .scroll-to-top:hover { background: #02b5c5; } /* Cookie banner (quelques ajustements, laisse le design-system tel quel sinon) */ :root[data-theme="dark"] .gy-cookie-banner, :root[data-theme="dark"] .gy-cookie-settings { background: #1a1a1d; color: var(--color-text); box-shadow: 0 18px 48px rgba(0, 0, 0, .5); } :root[data-theme="dark"] .gy-cookie-title { color: var(--color-text); } :root[data-theme="dark"] .gy-cookie-desc, :root[data-theme="dark"] .gy-cookie-category-desc, :root[data-theme="dark"] .gy-cookie-legal { color: var(--color-text-light); } :root[data-theme="dark"] .gy-cookie-category { border-bottom-color: #2a2a2e; } :root[data-theme="dark"] .gy-cookie-category-name { color: var(--color-text); } :root[data-theme="dark"] .gy-cookie-category-status { color: var(--color-text-lighter); } :root[data-theme="dark"] .gy-cookie-btn-refuse { border-color: #2a2a2e; color: var(--color-text-light); } :root[data-theme="dark"] .gy-cookie-btn-refuse:hover { background: #2a2a2e; color: var(--color-text); } :root[data-theme="dark"] .gy-cookie-btn-custom { background: #2a2a2e; color: var(--color-text); border-color: #2a2a2e; } :root[data-theme="dark"] .gy-cookie-btn-custom:hover { background: #333; } /* --- Le toggle lui-même --- */ .theme-toggle { appearance: none; background: transparent; border: 1px solid transparent; width: 38px; height: 38px; border-radius: 50%; padding: 0; margin-left: 1rem; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; font-size: 16px; line-height: 1; } .theme-toggle:hover { background: rgba(0, 0, 0, 0.06); border-color: #e5e5e5; } .theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } :root[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: #2a2a2e; } /* Icônes : on affiche soleil en light, lune en dark */ .theme-toggle .theme-toggle-sun { display: none; } .theme-toggle .theme-toggle-moon { display: block; } :root[data-theme="dark"] .theme-toggle .theme-toggle-sun { display: block; } :root[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; } /* ============================================================================= Toggle thème : 2 instances — desktop (topbar, icône seule) + mobile (menu, labellé) ============================================================================= */ /* Labels cachés par défaut (protège l'instance topbar qui partage le markup SVG) */ .theme-toggle-label { display: none; } /* Sur l'instance --labeled : le label affiche toujours LA CIBLE du clic. Light actif → on affichera "Mode sombre" (cible). Dark actif → "Mode clair". */ .theme-toggle--labeled .theme-toggle-label-dark { display: inline; } .theme-toggle--labeled .theme-toggle-label-light { display: none; } :root[data-theme="dark"] .theme-toggle--labeled .theme-toggle-label-dark { display: none; } :root[data-theme="dark"] .theme-toggle--labeled .theme-toggle-label-light { display: inline; } /* Par défaut (desktop) : l'instance mobile labellée est masquée — seule celle en topbar est visible. */ .nav-item-theme { display: none; } /* En mobile : on inverse — la topbar cache son toggle, le menu burger affiche le labellé. */ @media (max-width: 768px) { .theme-toggle { margin-left: 0; } .theme-toggle--topbar { display: none; } .nav-item-theme { display: block; width: 100%; text-align: left; /* Trait fin séparateur entre la zone "réglages" et la liste de navigation */ border-bottom: 1px solid rgba(26, 26, 26, 0.1); } /* Style du toggle labellé dans le menu : icône + texte alignés GAUCHE, grand tap target */ .theme-toggle.theme-toggle--labeled { width: 100%; height: auto; border-radius: 0; padding: 1rem 0.25rem; gap: 14px; justify-content: flex-start; /* S'aligne sur la typo des autres items du menu mobile */ font-size: 1.2rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.05em; color: var(--color-text); text-transform: uppercase; } .theme-toggle.theme-toggle--labeled:hover { background: transparent; border-color: transparent; color: var(--color-primary); } /* === Menu mobile : suit le thème (sombre en dark, clair en light) === */ :root[data-theme="dark"] .nav-menu { background: var(--color-bg); border-left-color: #2a2a2e; } :root[data-theme="dark"] .nav-menu .nav-link, :root[data-theme="dark"] .nav-menu .theme-toggle.theme-toggle--labeled { color: var(--color-text); } :root[data-theme="dark"] .nav-menu .nav-link:hover, :root[data-theme="dark"] .nav-menu .nav-link.active, :root[data-theme="dark"] .nav-menu .theme-toggle.theme-toggle--labeled:hover { color: var(--color-primary); } :root[data-theme="dark"] .nav-menu .nav-item, :root[data-theme="dark"] .nav-menu .nav-item-theme { border-bottom-color: rgba(255, 255, 255, 0.12); } }