/**
 * ECOMIXX PREMIUM - FULL MASTER STYLESHEET
 * Architecture : Senior Web Architect
 * Version : 3.1.0 (Luxe, Performance & Zero Bloat)
 */

/* ==========================================================
   1. VARIABLES & CORE SYSTEM
   ========================================================== */
:root {
    --noir: #121212;
    --sage: #899382;
    --stone-50: #F9F8F6;
    --stone-100: #F3F2EF;
    --stone-200: #E5E2DD;
    --stone-300: #D1CDC7;
    --white: #FFFFFF;
    --alert: #D9534F;
    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* RESET GLOBAL WORDPRESS */
html { scroll-behavior: smooth; }
body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--white); 
    color: var(--noir); 
    -webkit-font-smoothing: antialiased; 
    margin: 0; padding: 0; 
    overflow-x: hidden;
}

/* Force look minimaliste : aucun arrondi sur le site */
* { border-radius: 0px !important; box-sizing: border-box; }

/* Typographie de Luxe */
h1, h2, h3, h4 { font-weight: 200; letter-spacing: -0.04em; margin: 0; }
.font-serif { font-family: 'Playfair Display', serif; }
.tracking-luxe { letter-spacing: 0.4em; }

/* ==========================================================
   2. COMPOSANTS DE STRUCTURE (NAV, PROGRESS, REVEAL)
   ========================================================== */

/* Barre de progression haut de page */
#ec-progress-bar { 
    position: fixed; top: 0; left: 0; width: 0%; height: 2px; 
    background: var(--noir); z-index: 9999; transition: width 0.1s linear; 
}

/* Système de Révélation au Scroll */
.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: var(--transition-slow); 
}
.reveal.active { 
    opacity: 1 !important; 
    transform: translateY(0) !important; 
}

/* Navigation Sticky */
nav { transition: all 0.4s ease; }
.nav-compact { padding-top: 0.5rem; padding-bottom: 0.5rem; background: rgba(255,255,255,0.95); box-shadow: 0 4px 30px rgba(0,0,0,0.03); }

/* Menu Mobile Side Drawer */
#mobile-menu {
    position: fixed; inset: 0; background: var(--white); z-index: 9500;
    transform: translateX(-100%); transition: var(--transition-smooth);
}
#mobile-menu.mobile-menu-active { transform: translateX(0) !important; }

/* ==========================================================
   3. NOTIFICATION SYSTEM (LA CLOCHE)
   ========================================================== */
#ec-notif-panel { 
    display: none; position: absolute; top: 100%; right: 0; 
    margin-top: 15px; width: 300px; background: var(--white); 
    border: 1px solid var(--stone-200); box-shadow: 0 25px 50px rgba(0,0,0,0.1); 
    padding: 25px; z-index: 5000; 
}
#ec-notif-panel.is-active { display: block; animation: ecFadeIn 0.4s ease; }

@keyframes ecFadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(10deg); }
    30% { transform: rotate(-10deg); }
}
.bell-shake { animation: bellRing 3s infinite ease-in-out; }

/* ==========================================================
   4. PANIER LATÉRAL (SIDE CART)
   ========================================================== */
#ec-cart-overlay { 
    position: fixed; inset: 0; background: rgba(18, 18, 18, 0.4); 
    backdrop-filter: blur(5px); z-index: 8000; 
    opacity: 0; visibility: hidden; transition: var(--transition-smooth);
}
#ec-cart-panel { 
    position: fixed; top: 0; right: 0; height: 100%; width: 100%; 
    max-width: 420px; background: white; z-index: 9000; 
    transform: translateX(100%); transition: var(--transition-smooth);
    display: flex; flex-direction: column; box-shadow: -10px 0 50px rgba(0,0,0,0.1);
}

/* États Body quand panier ouvert */
body.ec-cart-open { overflow: hidden; }
body.ec-cart-open #ec-cart-overlay { opacity: 1; visibility: visible; }
body.ec-cart-open #ec-cart-panel { transform: translateX(0); }

/* Scrollbar invisible dans le panier */
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ==========================================================
   5. BOUTONS & ÉLÉMENTS INTERACTIFS
   ========================================================== */
.btn-master { 
    background: var(--noir); color: var(--white); padding: 24px 50px; 
    font-size: 11px; font-weight: 700; letter-spacing: 0.3em; 
    text-transform: uppercase; border: 1px solid var(--noir); 
    cursor: pointer; transition: var(--transition-smooth);
    display: inline-flex; justify-content: center; align-items: center;
    text-decoration: none;
}
.btn-master:hover { background: var(--sage); border-color: var(--sage); }

.swatch-active { outline: 1px solid var(--noir); outline-offset: 3px; }

/* ==========================================================
   6. SECTIONS SPÉCIFIQUES
   ========================================================== */

/* Hero */
header img { transition: transform 3s ease-out; }

/* Technologie & Shop (Multiply blend mode pour détourage propre) */
#main-product-img, .mix-blend { mix-blend-mode: multiply; transition: opacity 0.4s ease; }

/* Design (Effet de boîte décalée) */
.design-offset-box { position: relative; }
.design-offset-box::before {
    content: ''; position: absolute; top: 2rem; left: -2rem; right: 2rem; bottom: -2rem;
    background: var(--white); border: 1px solid var(--stone-200); z-index: -1;
}

/* FAQ Accordéon */
.faq-item .faq-content {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.faq-item.active .faq-content { max-height: 500px; opacity: 1; padding-bottom: 2rem; }
.faq-icon { transition: transform 0.4s ease; }
.faq-item.active .faq-icon { transform: rotate(45deg); }

/* Journal */
.journal-card img { transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.journal-card:hover img { transform: scale(1.05); }

/* ==========================================================
   7. FORMULAIRES & WordPress FIX
   ========================================================== */
.wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7-email { 
    background: transparent !important; border: none !important; 
    color: var(--white) !important; font-size: 11px; padding: 10px 0; outline: none;
}

/* Autofill Fix (Chrome/Safari) */
input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--noir) inset !important;
}

/* Masquage barre admin WP */
#wpadminbar { display: none !important; }
html { margin-top: 0px !important; }

/* ==========================================================
   8. RESPONSIVE OPTIMIZATIONS
   ========================================================== */
@media (max-width: 768px) {
    .btn-master { padding: 20px 30px; width: 100%; }
    .design-offset-box::before { display: none; }
    #ec-cart-panel { max-width: 100%; }
}