/* ============================ ÉCLAT — Système de thèmes visuels 5 thèmes : Éclat (défaut), Nuit, Rosé, Nature, Auto Appliqué via [data-theme] sur ============================ */ /* Éclat (défaut) — pas besoin de surcharge, c'est le :root */ /* ── Nuit ── */ [data-theme="nuit"] { --color-primary: #e5e5e5; --color-secondary: #c9a87c; --color-accent: #e8c8a0; --color-bg: #121212; --color-bg-alt: #1e1e1e; --color-white: #1a1a1a; --color-text: #e5e5e5; --color-text-light: #9a9590; --color-border: #333330; --shadow-sm: 0 2px 8px rgba(0,0,0,0.2); --shadow-md: 0 4px 20px rgba(0,0,0,0.3); --shadow-lg: 0 8px 40px rgba(0,0,0,0.4); } [data-theme="nuit"] .navbar { background: rgba(18,18,18,0.95); border-bottom-color: #2a2a28; } [data-theme="nuit"] .hero { background: linear-gradient(135deg, #1a1520 0%, #2d1f3d 50%, #1a1520 100%); } [data-theme="nuit"] .btn-primary { background: var(--color-secondary); color: #121212; } [data-theme="nuit"] .btn-secondary { border-color: var(--color-secondary); color: var(--color-secondary); } [data-theme="nuit"] .footer { background: #0a0a0a; } [data-theme="nuit"] .product-card { background: #1a1a1a; border-color: #2a2a28; } [data-theme="nuit"] .product-card:hover { border-color: var(--color-secondary); } [data-theme="nuit"] .cart-drawer { background: #1a1a1a; border-left-color: #2a2a28; } [data-theme="nuit"] img { filter: brightness(0.92); } /* ── Rosé ── */ [data-theme="rose"] { --color-primary: #4a2040; --color-secondary: #d4648a; --color-accent: #f5b8cb; --color-bg: #fff5f8; --color-bg-alt: #fce8ef; --color-white: #ffffff; --color-text: #4a2040; --color-text-light: #8a6070; --color-border: #f0d0dc; } [data-theme="rose"] .hero { background: linear-gradient(135deg, #fce8ef 0%, #f8d0dc 50%, #fff5f8 100%); } [data-theme="rose"] .navbar { background: rgba(255,245,248,0.95); } [data-theme="rose"] .btn-primary { background: linear-gradient(135deg, #d4648a, #e88aab); } [data-theme="rose"] .footer { background: #4a2040; } [data-theme="rose"] .top-banner { background: linear-gradient(90deg, #d4648a, #e88aab); } [data-theme="rose"] .product-card { border-color: #f0d0dc; } [data-theme="rose"] .product-card:hover { border-color: #d4648a; box-shadow: 0 4px 20px rgba(212, 100, 138, .12); } [data-theme="rose"] .cart-drawer { border-left-color: #f0d0dc; } [data-theme="rose"] .btn-outline { border-color: #d4648a; color: #d4648a; } [data-theme="rose"] .section-tag { color: #d4648a; } /* ── Nature ── */ [data-theme="nature"] { --color-primary: #2d3b2d; --color-secondary: #6b8f5e; --color-accent: #a8c99b; --color-bg: #f5f8f2; --color-bg-alt: #e8f0e4; --color-white: #ffffff; --color-text: #2d3b2d; --color-text-light: #5a6e55; --color-border: #d0deca; } [data-theme="nature"] .hero { background: linear-gradient(135deg, #e8f0e4 0%, #d0deca 50%, #f5f8f2 100%); } [data-theme="nature"] .navbar { background: rgba(245,248,242,0.95); } [data-theme="nature"] .btn-primary { background: linear-gradient(135deg, #6b8f5e, #8aad7d); } [data-theme="nature"] .footer { background: #2d3b2d; } /* ── Auto (système) ── */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --color-primary: #e5e5e5; --color-secondary: #c9a87c; --color-accent: #e8c8a0; --color-bg: #121212; --color-bg-alt: #1e1e1e; --color-white: #1a1a1a; --color-text: #e5e5e5; --color-text-light: #9a9590; --color-border: #333330; --shadow-sm: 0 2px 8px rgba(0,0,0,0.2); --shadow-md: 0 4px 20px rgba(0,0,0,0.3); --shadow-lg: 0 8px 40px rgba(0,0,0,0.4); } [data-theme="auto"] .navbar { background: rgba(18,18,18,0.95); border-bottom-color: #2a2a28; } [data-theme="auto"] .hero { background: linear-gradient(135deg, #1a1520 0%, #2d1f3d 50%, #1a1520 100%); } [data-theme="auto"] .btn-primary { background: var(--color-secondary); color: #121212; } [data-theme="auto"] .footer { background: #0a0a0a; } [data-theme="auto"] .product-card { background: #1a1a1a; border-color: #2a2a28; } [data-theme="auto"] .cart-drawer { background: #1a1a1a; border-left-color: #2a2a28; } [data-theme="auto"] img { filter: brightness(0.92); } } /* ── Theme Switcher UI ── */ .theme-switcher { display: flex; align-items: center; gap: 6px; } .theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border); cursor: pointer; transition: all 0.2s; position: relative; } .theme-dot:hover { transform: scale(1.15); } .theme-dot.active { border-color: var(--color-secondary); box-shadow: 0 0 0 2px var(--color-secondary); } .theme-dot[data-theme-val="eclat"] { background: linear-gradient(135deg, #faf8f5, #c9a87c); } .theme-dot[data-theme-val="nuit"] { background: linear-gradient(135deg, #121212, #2d1f3d); } .theme-dot[data-theme-val="rose"] { background: linear-gradient(135deg, #fff5f8, #d4648a); } .theme-dot[data-theme-val="nature"] { background: linear-gradient(135deg, #f5f8f2, #6b8f5e); } .theme-dot[data-theme-val="auto"] { background: linear-gradient(135deg, #faf8f5 50%, #121212 50%); } /* ── Smooth transition between themes ── */ html[data-theme] body, html[data-theme] .navbar, html[data-theme] .hero, html[data-theme] .product-card, html[data-theme] .footer, html[data-theme] .cart-drawer { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; }