/* ================================================================ Petite Colline - Theme sombre (test design) Active via . N'affecte pas l'admin. Tons bruns + glassmorphism + halo beige suivant la souris. Toutes les regles sont limitees a .theme-dark : style.css intact. ================================================================ */ .theme-dark { --c-bg: #1d1007; --c-bg-soft: #271708; --c-bg-deep: #33200d; --c-wood: #d89c5c; --c-wood-dark: #f0ddbc; --c-earth: #d0a86f; --c-moss: #9aac79; --c-copper: #a56823; --c-ink: #f5ead6; --c-muted: #c0a583; --c-line: rgba(245,234,214,0.14); --halo-color: rgba(238,172,102,0.20); --halo-size: 44vmax; --glass-bg: rgba(52,36,20,0.42); --glass-bg-2: rgba(34,23,12,0.55); --glass-brd: rgba(245,234,214,0.13); --glass-shadow: 0 26px 60px -30px rgba(0,0,0,0.8); --glass-blur: blur(15px) saturate(125%); } /* ---------- Fond brun profond, fixe ---------- */ .theme-dark body { color: var(--c-ink); background: radial-gradient(120vmax 90vmax at 82% -12%, #4a2c10 0%, rgba(74,44,16,0) 55%), radial-gradient(110vmax 80vmax at -12% 112%, #34210e 0%, rgba(52,33,14,0) 52%), linear-gradient(165deg, #1a0f06 0%, #20140a 48%, #120a04 100%); background-attachment: fixed; } /* ---------- Halo lumineux qui suit la souris (derriere le contenu) ---------- */ #themeHalo { display: none; } .theme-dark #themeHalo { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient( var(--halo-size) var(--halo-size) at var(--halo-x, 50%) var(--halo-y, 28%), var(--halo-color) 0%, rgba(234,164,92,0.07) 38%, transparent 80%); } /* ---------- Sections transparentes (le fond + halo transparaissent) ---------- */ .theme-dark .hero, .theme-dark .manifesto, .theme-dark .manifesto--intro, .theme-dark .category-section, .theme-dark .category-section--alt, .theme-dark .about, .theme-dark .contact, .theme-dark .page-head, .theme-dark .related, .theme-dark .shop-section, .theme-dark .shop-section--alt, .theme-dark .legal-page, .theme-dark .breadcrumb { background: transparent; } /* Sections alternees : voile clair tres subtil pour le rythme visuel */ .theme-dark .manifesto, .theme-dark .category-section--alt, .theme-dark .shop-section--alt, .theme-dark .contact, .theme-dark .related { background: rgba(255,247,235,0.025); } /* ---------- Header en verre ---------- */ .theme-dark .site-header { background: rgba(24,17,10,0.55); border-bottom: 1px solid transparent; } .theme-dark .site-header.scrolled { background: rgba(18,12,7,0.80); border-bottom-color: var(--c-line); } .theme-dark .main-nav a { color: #ecdfc9; } .theme-dark .main-nav a:hover, .theme-dark .main-nav a.is-active { color: var(--c-copper); } .theme-dark .nav-burger span { background: var(--c-ink); } @media (max-width: 700px) { .theme-dark .main-nav { background: rgba(18,12,7,0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--c-line); } } /* ---------- Panneaux en verre depoli (contenu) ---------- */ .theme-dark .contact-form, .theme-dark .cart-panel { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.06); } .theme-dark .cart-footer { background: rgba(30,22,14,0.5); border-top-color: var(--c-line); } /* ---------- Medias : cadre verre (l'image remplit, on garde bord + ombre) ---------- */ .theme-dark .creation-carousel, .theme-dark .product-gallery-main, .theme-dark .product-img { background: var(--glass-bg-2); border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow); } /* ---------- Boutons ---------- */ .theme-dark .btn-primary { background: var(--c-ink); color: #1b120a; } .theme-dark .btn-primary:hover { background: var(--c-copper); color: #1b120a; box-shadow: 0 10px 30px -8px rgba(212,119,58,0.5); } .theme-dark .btn-ghost { color: var(--c-ink); border-color: rgba(243,232,214,0.45); } .theme-dark .btn-ghost:hover { background: rgba(243,232,214,0.95); color: #1b120a; border-color: rgba(243,232,214,0.95); } /* ---------- Boutons produits de l'accueil : glassmorphism, crème au survol ---------- */ .theme-dark .creation-foot .btn-primary { background: rgba(245,234,214,0.08); color: var(--c-ink); border: 1px solid rgba(245,234,214,0.22); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: none; } .theme-dark .creation-foot .btn-primary:hover { background: #ecdcc0; color: #1b120a; border-color: #ecdcc0; } /* ---------- Champs de formulaire ---------- */ .theme-dark .contact-form input, .theme-dark .contact-form textarea, .theme-dark .contact-form select { background: rgba(18,12,7,0.55); border: 1px solid var(--glass-brd); color: var(--c-ink); } .theme-dark .contact-form input::placeholder, .theme-dark .contact-form textarea::placeholder { color: rgba(243,232,214,0.4); } .theme-dark .contact-form input:focus, .theme-dark .contact-form textarea:focus, .theme-dark .contact-form select:focus { background: rgba(18,12,7,0.8); border-color: var(--c-copper); } /* ---------- Pastilles quantite / panier / divers ---------- */ .theme-dark .qty-selector, .theme-dark .cart-qty { background: rgba(18,12,7,0.55); border: 1px solid var(--glass-brd); } .theme-dark .qty-btn:hover, .theme-dark .cart-qty button:hover { background: rgba(243,232,214,0.12); } .theme-dark .cart-backdrop { background: rgba(8,5,3,0.62); } .theme-dark .gallery-thumb { background: rgba(18,12,7,0.5); } .theme-dark .qty-input { color: var(--c-ink); } /* ---------- Footer ---------- */ .theme-dark .site-footer { background: rgba(10,7,4,0.55); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--c-line); } /* ---------- Images : un poil plus chaleureuses sur fond sombre ---------- */ .theme-dark .creation-img, .theme-dark .product-gallery-main img { filter: brightness(0.97) saturate(1.04); } /* ---------- Logos (menu + footer) éclaircis sur fond sombre ---------- */ .theme-dark .brand-mark-img, .theme-dark .footer-logo { filter: brightness(2.0) saturate(0.50); } /* ---------- Logo du manifeste : ombre portée directement sur l'image ---------- */ .theme-dark .manifesto-img.manifesto-img--logo { background: transparent; border: none; box-shadow: none; overflow: visible; } .theme-dark .manifesto-img.manifesto-img--logo img { box-shadow: -20px 10px 40px 5px rgba(0, 0, 0, 0.932), 0px -10px 60px -5px #d89c5cab; } /* ---------- Bouton bascule de theme (outil de test) ---------- */ #themeToggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-left: .25rem; border: none; background: transparent; cursor: pointer; color: inherit; font-size: 1.2rem; line-height: 1; border-radius: 50%; transition: color .2s, transform .2s, background .2s; } #themeToggle:hover { color: var(--c-copper); transform: scale(1.12); } #themeToggle:focus-visible { outline: 2px solid var(--c-copper); outline-offset: 2px; }