/* ===================================================================== THÈMES DE VITRINE (site templates) Chaque thème s'active via une classe sur : site-template-. « classic » = design de base (aucune règle ici). Les thèmes réutilisent le DOM existant et surchargent variables + styles. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&family=Cormorant+Garamond:wght@400;500;600&family=Jost:wght@300;400;500&display=swap'); /* --------------------------------------------------------------------- CLAIR ÉDITORIAL — clair, raffiné, accent rose poudré, titres serif. Fond clair : lisibilité conservée, faible risque. --------------------------------------------------------------------- */ body.site-template-clair-editorial { --gold: #c8607a; /* accent : rose poudré */ --primary-dark: #1a1714; --border-color: #e7ddd2; --accent-blush: #faf1ef; background: #faf6f1; font-family: 'Inter', sans-serif; } body.site-template-clair-editorial h1, body.site-template-clair-editorial h2, body.site-template-clair-editorial h3, body.site-template-clair-editorial .logo-title, body.site-template-clair-editorial .product-title, body.site-template-clair-editorial .product-category { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: .01em; } body.site-template-clair-editorial .luxury-header { background: rgba(250, 246, 241, .92); backdrop-filter: blur(8px); border-bottom: 1px solid #e7ddd2; } body.site-template-clair-editorial .logo-title { font-size: 27px; } body.site-template-clair-editorial .logo-subtitle { letter-spacing: .35em; color: #b98; } body.site-template-clair-editorial .nav-links a { position: relative; text-transform: none; font-weight: 400; } body.site-template-clair-editorial .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--gold); transition: width .3s; } body.site-template-clair-editorial .nav-links a:hover::after { width: 100%; } /* Héros plein cadre, superposition douce, titre serif large */ body.site-template-clair-editorial .hero-section { min-height: 82vh; background-blend-mode: multiply; background-color: rgba(26, 23, 20, .18); } body.site-template-clair-editorial .hero-section h1 { font-size: 62px; line-height: 1.05; font-weight: 500; } body.site-template-clair-editorial .hero-section .eyebrow, body.site-template-clair-editorial .hero-section .hero-eyebrow { color: var(--gold); letter-spacing: .28em; text-transform: uppercase; } /* Boutons : noir plein, coins nets, hover rose */ body.site-template-clair-editorial .gold-btn { background: #1a1714; color: #faf6f1; border: none; border-radius: 2px; letter-spacing: .14em; text-transform: uppercase; } body.site-template-clair-editorial .gold-btn:hover { background: var(--gold); color: #fff; } body.site-template-clair-editorial .outline-btn { border-radius: 2px; } /* Cartes produit : image arrondie, titres serif, prix en accent */ body.site-template-clair-editorial .product-card .card-img-wrapper img { border-radius: 6px; } body.site-template-clair-editorial .product-title { font-size: 18px; } body.site-template-clair-editorial .product-price { color: var(--gold); font-weight: 600; } /* Pied de page sombre, contraste éditorial */ body.site-template-clair-editorial .luxury-footer { background: #1a1714; color: #cbbfb2; } body.site-template-clair-editorial .luxury-footer a { color: #e7ddd2; } /* Catalogue + fiches produit en cohérence (Clair Éditorial) */ body.site-template-clair-editorial .luxury-footer { background: #1a1714; } body.site-template-clair-editorial .product-card { border-radius: 6px; } body.site-template-clair-editorial .gold-btn, body.site-template-clair-editorial .add-to-cart-btn { background: #1a1714; color: #faf6f1; } body.site-template-clair-editorial .gold-btn:hover { background: var(--gold); } /* --------------------------------------------------------------------- NOIR & OR — thème SOMBRE de bout en bout. On redéfinit les variables : la majorité des textes/surfaces suivent. Puis quelques surcharges ciblées pour les composants clés. --------------------------------------------------------------------- */ body.site-template-noir-or { --bg-color: #0d0b0a; --card-bg: #17120d; --secondary-dark: #17120d; --accent-blush: #1b1610; --border-color: #2b241c; --text-dark: #ece4d6; /* texte courant clair */ --text-muted: #a79f8f; --primary-dark: #f2ead9; /* utilisé surtout comme couleur de TEXTE → clair */ --gold: #c9a24b; --gold-hover: #d9b661; --footer-bg: #0a0807; font-family: 'Jost', sans-serif; } body.site-template-noir-or h1, body.site-template-noir-or h2, body.site-template-noir-or h3, body.site-template-noir-or .logo-title, body.site-template-noir-or .product-title, body.site-template-noir-or .product-category { font-family: 'Cormorant Garamond', serif; color: #f4ecdb; } body.site-template-noir-or .luxury-header { background: rgba(13, 11, 10, .96); border-bottom: 1px solid rgba(201, 162, 75, .22); } body.site-template-noir-or .logo-title { color: var(--gold); font-size: 26px; } body.site-template-noir-or .logo-subtitle { color: #b7ad9c; letter-spacing: .4em; } body.site-template-noir-or .nav-links a { color: #e8e0d2; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; } body.site-template-noir-or .nav-links a:hover { color: var(--gold); } body.site-template-noir-or .icon-btn { color: #e8e0d2; } /* Cartes & panneaux sombres (couvre aussi les fonds blancs inline courants) */ body.site-template-noir-or .product-card, body.site-template-noir-or [style*="background: white"], body.site-template-noir-or [style*="background:white"], body.site-template-noir-or [style*="background: #fff"], body.site-template-noir-or [style*="background:#fff"], body.site-template-noir-or [style*="background-color: white"], body.site-template-noir-or [style*="background-color:#fff"], body.site-template-noir-or [style*="#faf9f6"], body.site-template-noir-or [style*="#faf8f5"], body.site-template-noir-or [style*="#fafafa"], body.site-template-noir-or [style*="#f9f9f9"], body.site-template-noir-or [style*="#f5f5f5"], body.site-template-noir-or [style*="#fff8f0"], body.site-template-noir-or [style*="#fffdf2"], body.site-template-noir-or [style*="#fffbf0"], body.site-template-noir-or [style*="#fafbfc"] { background: var(--card-bg) !important; border-color: var(--border-color); } body.site-template-noir-or .product-price { color: var(--gold); } body.site-template-noir-or .gold-btn, body.site-template-noir-or .add-to-cart-btn { background: var(--gold); color: #0d0b0a; } body.site-template-noir-or .gold-btn:hover { background: var(--gold-hover); } body.site-template-noir-or .outline-btn { color: var(--gold); border-color: var(--gold); background: transparent; } body.site-template-noir-or input, body.site-template-noir-or select, body.site-template-noir-or textarea { background: #17120d; color: #ece4d6; border-color: #2b241c; } body.site-template-noir-or .luxury-footer { background: #0a0807; color: #b7ad9c; } body.site-template-noir-or .luxury-footer a { color: #e2dacb; } /* Menus déroulants de l'en-tête (compte utilisateur + langue) */ body.site-template-noir-or .lang-btn { background: #17120d !important; color: #ece4d6 !important; border-color: #2b241c !important; } body.site-template-noir-or .lang-dropdown { background: #17120d; border: 1px solid #2b241c; } body.site-template-noir-or .lang-dropdown button { color: #ece4d6; } body.site-template-noir-or .lang-dropdown button:hover { background: #241d15; color: var(--gold); } /* --------------------------------------------------------------------- MODE VIF — blanc, moderne, sans-serif, accent turquoise, coins arrondis. Thème clair : lisibilité conservée. --------------------------------------------------------------------- */ body.site-template-mode-vif { --gold: #0ea5a3; /* accent : turquoise */ --gold-hover: #0c8f8d; --primary-dark: #17171b; --border-color: #ececf0; --accent-blush: #e9fbfa; --bg-color: #ffffff; font-family: 'Inter', sans-serif; } body.site-template-mode-vif h1, body.site-template-mode-vif h2, body.site-template-mode-vif h3, body.site-template-mode-vif .logo-title, body.site-template-mode-vif .product-title { font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: 0; } body.site-template-mode-vif .luxury-header { background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid #ececf0; } body.site-template-mode-vif .nav-links a { text-transform: none; font-weight: 500; } body.site-template-mode-vif .product-card { border-radius: 14px; overflow: hidden; } body.site-template-mode-vif .product-price { color: var(--gold); font-weight: 600; } body.site-template-mode-vif .gold-btn, body.site-template-mode-vif .add-to-cart-btn { background: var(--gold); color: #fff; border-radius: 8px; } body.site-template-mode-vif .gold-btn:hover { background: var(--gold-hover); } body.site-template-mode-vif .outline-btn { border-radius: 8px; } body.site-template-mode-vif .luxury-footer { background: #0f1013; }