/* ═══════════════════════════════════════════════════════════════════ SAVANNA SELECT V135 — dark-mode.css Mode sombre complet : variables CSS + surcharges composants Activation : [data-theme="dark"] sur Détection auto : @media (prefers-color-scheme: dark) au 1er chargement ═══════════════════════════════════════════════════════════════════ */ /* ── Variables dark mode ─────────────────────────────────────────── */ [data-theme="dark"] { /* Backgrounds */ --bg: #0D1F17; /* Page principale */ --bg-alt: #061A0D; /* Fond alternatif */ --surface: #1A3320; /* Cards, modals, panneaux */ --surface-alt: #223D2A; /* Hover states, inputs */ /* Bordures */ --border: #2E5038; --line: #2E5038; /* Texte */ --text: #E8F5E9; /* Texte principal */ --text-muted: #A5C9A8; /* Texte secondaire */ --text-faint: #6B9970; /* Texte discret */ /* Couleurs de marque — inchangées pour cohérence identitaire */ --green-dark: #1A4D2E; --green-med: #2E7D4F; --gold: #D9A441; --gold-light: #3A2E0A; /* Fond or assombri */ --cream: #1A2E1F; /* Crème → fond vert nuit */ /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 20px 60px rgba(0,0,0,.6); color-scheme: dark; } /* ── Transitions smooth (uniquement si activé manuellement) ───────── */ [data-theme="dark"], [data-theme="dark"] *, [data-theme="dark"] *::before, [data-theme="dark"] *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* Pas de transition sur les images, SVG, transforms (performance) */ [data-theme="dark"] img, [data-theme="dark"] svg, [data-theme="dark"] [style*="transform"] { transition: none !important; } /* ── Page / Body ─────────────────────────────────────────────────── */ [data-theme="dark"] body { background: #0D1F17; color: #E8F5E9; } [data-theme="dark"] #app-root, [data-theme="dark"] main, [data-theme="dark"] .panel, [data-theme="dark"] .panel.active { background: #0D1F17; color: #E8F5E9; } /* ── Header ──────────────────────────────────────────────────────── */ /* Le header reste vert foncé — identité forte conservée */ [data-theme="dark"] .site-header, [data-theme="dark"] .header { background: #0A2B16; border-bottom: 1px solid #2E5038; } [data-theme="dark"] .topbar { background: #061A0D; color: #A5C9A8; } [data-theme="dark"] .reassurance-bar { background: linear-gradient(90deg, #061A0D, #0D2818, #061A0D); } /* ── Navigation ──────────────────────────────────────────────────── */ [data-theme="dark"] .main-nav { background: #0A2B16; } [data-theme="dark"] .nav-link { color: #A5C9A8; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: #D9A441; background: rgba(217,164,65,.12); } [data-theme="dark"] .mega-menu { background: #1A3320; border-color: #2E5038; box-shadow: 0 8px 32px rgba(0,0,0,.5); } [data-theme="dark"] .mega-item { color: #E8F5E9; } [data-theme="dark"] .mega-item:hover, [data-theme="dark"] .mega-item:focus { background: #223D2A; border-color: #2E5038; } /* ── Cards produit ───────────────────────────────────────────────── */ [data-theme="dark"] .product-card, [data-theme="dark"] .card, [data-theme="dark"] .sidebar, [data-theme="dark"] .checkout-sidebar { background: #1A3320; border-color: #2E5038; box-shadow: 0 2px 12px rgba(0,0,0,.4); } [data-theme="dark"] .product-title { color: #E8F5E9; } [data-theme="dark"] .product-meta, [data-theme="dark"] .product-desc { color: #A5C9A8; } [data-theme="dark"] .price { color: #D9A441; } /* ── Formulaires ─────────────────────────────────────────────────── */ [data-theme="dark"] .form-input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="password"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: #223D2A; color: #E8F5E9; border-color: #2E5038; } [data-theme="dark"] .form-input:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: #D9A441; background: #2A4A33; } [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6B9970; } /* ── Boutons ─────────────────────────────────────────────────────── */ /* btn-primary reste vert — identité de marque */ [data-theme="dark"] .btn-primary { background: #1A4D2E; color: #fff; } [data-theme="dark"] .btn-primary:hover { background: #2E7D4F; } [data-theme="dark"] .btn-light, [data-theme="dark"] .btn-outline { background: #223D2A; color: #E8F5E9; border-color: #2E5038; } [data-theme="dark"] .btn-light:hover { background: #2E5038; color: #E8F5E9; } [data-theme="dark"] .hbtn { color: #A5C9A8; } [data-theme="dark"] .hbtn:hover { color: #D9A441; background: rgba(217,164,65,.1); } /* ── Sections et backgrounds ─────────────────────────────────────── */ [data-theme="dark"] section, [data-theme="dark"] .section { background: #0D1F17; } [data-theme="dark"] .section-alt, [data-theme="dark"] .bg-cream, [data-theme="dark"] [style*="background:#FFF8EF"], [data-theme="dark"] [style*="background:#F9F4EC"], [data-theme="dark"] [style*="background:#f9f4ec"], [data-theme="dark"] [style*="background:#f9fbf8"] { background: #1A3320 !important; } [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background: white"] { background: #1A3320 !important; color: #E8F5E9 !important; } [data-theme="dark"] [style*="background:#f0f7f2"], [data-theme="dark"] [style*="background:#E8F5E9"], [data-theme="dark"] [style*="background:#e8f5e9"] { background: #223D2A !important; } /* ── Textes & titres ─────────────────────────────────────────────── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #E8F5E9; } [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span:not(.badge):not(.stock-badge):not(.product-badge) { color: inherit; } [data-theme="dark"] .text-muted, [data-theme="dark"] small { color: #A5C9A8 !important; } [data-theme="dark"] a:not(.btn):not(.nav-link) { color: #7EC8A0; } [data-theme="dark"] a:not(.btn):not(.nav-link):hover { color: #D9A441; } /* ── Avis clients ────────────────────────────────────────────────── */ [data-theme="dark"] .review-item, [data-theme="dark"] .product-reviews-section { background: #1A3320; border-color: #2E5038; } [data-theme="dark"] .review-body { color: #A5C9A8; } [data-theme="dark"] .review-author { color: #7EC8A0; } /* ── Checkout / Panier ───────────────────────────────────────────── */ [data-theme="dark"] .checkout-mini, [data-theme="dark"] .checkout-mini-line { background: #1A3320; border-color: #2E5038; } [data-theme="dark"] .checkout-mini-line.total { background: #223D2A; } [data-theme="dark"] #free-shipping-progress .free-shipping-wrap { background: #223D2A; border-color: #2E5038; } /* ── Admin ───────────────────────────────────────────────────────── */ [data-theme="dark"] .adm-table-wrap, [data-theme="dark"] table { background: #1A3320; color: #E8F5E9; } [data-theme="dark"] table th { background: #223D2A; color: #D9A441; border-color: #2E5038; } [data-theme="dark"] table td { border-color: #2E5038; color: #E8F5E9; } [data-theme="dark"] table tr:nth-child(even) td { background: #1E3A25; } /* ── Toast ───────────────────────────────────────────────────────── */ [data-theme="dark"] #toast { background: #2E5038; color: #E8F5E9; box-shadow: 0 4px 20px rgba(0,0,0,.5); } /* ── Réassurance / badges ────────────────────────────────────────── */ [data-theme="dark"] .review-verified { background: #1A4D2E; color: #7EC8A0; } [data-theme="dark"] .adm-tab.active { background: #1A3320; border-bottom-color: #D9A441; color: #D9A441; } /* ── Scrollbar (Webkit) ──────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { background: #0D1F17; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2E5038; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #1A4D2E; } /* ── Icône theme toggle ──────────────────────────────────────────── */ #theme-toggle-btn { background: transparent; border: 1.5px solid transparent; border-radius: 8px; padding: 5px 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; transition: background .2s, border-color .2s; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; } #theme-toggle-btn:hover { background: rgba(217,164,65,.15); border-color: #D9A441; } #theme-toggle-btn:focus-visible { outline: 3px solid #D9A441; outline-offset: 3px; } [data-theme="dark"] #theme-toggle-btn { border-color: #2E5038; } [data-theme="dark"] #theme-toggle-btn:hover { background: rgba(217,164,65,.2); border-color: #D9A441; } /* ── prefers-color-scheme : auto détection initiale ─────────────── */ /* Utilisé uniquement au 1er chargement avant que theme.js lise le localStorage */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #0D1F17; --bg-alt: #061A0D; --surface: #1A3320; --surface-alt: #223D2A; --border: #2E5038; --line: #2E5038; --text: #E8F5E9; --text-muted: #A5C9A8; color-scheme: dark; } html:not([data-theme="light"]):not([data-theme="dark"]) body { background: #0D1F17; color: #E8F5E9; } } /* ── reduced-motion : pas de transition ──────────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-theme="dark"], [data-theme="dark"] * { transition: none !important; } }