/* =======================================================
   GARCIA ELIXIR - LUXURY COMMERCE SYSTEM v14.0
   Propriété : SASU Garcia | Montpellier
   Design : Minimalisme Immersif & Architecture Aérée
   ======================================================= */

/* --- 1. RESET CRITIQUE (Le secret anti-blanc) --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

:root {
    --c-bg: #fdfcfb;           /* Crème Lin */
    --c-stone: #1c1917;       /* Anthracite */
    --c-gold: #92400e;        /* Or Ambré */
    --c-border: rgba(28, 25, 23, 0.08);
    --f-serif: 'Cormorant Garamond', serif;
    --f-sans: 'Montserrat', sans-serif;
    --nav-height: 110px;      /* Hauteur précise de ta barre de menu */
    --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1);
}

html, body {
    width: 100%;
    min-height: 100vh;
    background-color: var(--c-bg);
    color: var(--c-stone);
    font-family: var(--f-sans);
    line-height: 1.8;
    overflow-x: hidden;
}

/* --- 2. NAVIGATION CRISTAL (ANTI-COLLISION) --- */
.nav-glass {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 9999;
    background: rgba(253, 252, 251, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
}

.nav-link {
    position: relative;
    transition: color 0.4s ease;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--c-gold);
    transition: all 0.5s var(--ease-luxe);
    transform: translateX(-50%);
}

.nav-link:hover { color: var(--c-stone); }
.nav-link:hover::after { width: 30px; }

/* --- 3. STRUCTURE DES PAGES (LE FIX DU BLANC) --- */
main {
    width: 100%;
    margin-top: 0 !important; /* Force la suppression du blanc haut */
}

/* Accueil : L'image glisse SOUS la navigation */
#page-home {
    height: 100vh;
    width: 100%;
    padding: 0 !important;
}

/* TOUS les autres onglets : On les décale de la hauteur exacte de la nav */
.page-content:not(#page-home) {
    padding-top: var(--nav-height) !important;
    min-height: 100vh;
}

/* Animation d'apparition des pages */
.page-content {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--ease-luxe), transform 1s var(--ease-luxe);
}

.page-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* --- 4. ACCUEIL : ANIMATIONS D'IMMERSION --- */
.scale-anim {
    animation: slowZoom 30s infinite alternate linear;
}

@keyframes slowZoom {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    animation: textReveal 1.5s var(--ease-luxe) forwards;
}

.reveal-text:nth-child(1) { animation-delay: 0.2s; }
.reveal-text:nth-child(2) { animation-delay: 0.4s; }
.reveal-text:nth-child(3) { animation-delay: 0.6s; }
.reveal-text:nth-child(4) { animation-delay: 0.8s; }

@keyframes textReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* --- 5. BOUTIQUE : RENDU GALERIE --- */
#product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px 40px;
    width: 100%;
}

.product-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.8s var(--ease-luxe);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.05);
    border-color: var(--c-gold);
}

.product-image-container {
    padding: 3rem 2rem;
    background: #fcfbf9;
    position: relative;
    display: flex;
    justify-content: center;
}

.product-card img {
    max-height: 380px;
    width: auto;
    transition: transform 1.5s var(--ease-luxe);
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.05));
}

.product-card:hover img { transform: scale(1.08) rotate(1deg); }

.product-info { padding: 2.5rem 1.5rem; text-align: center; }

/* --- 6. ÉLÉMENTS DE FORMULAIRE & BOUTONS --- */
.input-luxe {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--c-border);
    padding: 1.5rem 0;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    outline: none;
    transition: 0.4s;
}

.input-luxe:focus { border-bottom-color: var(--c-gold); padding-left: 10px; }

.btn-add-cart {
    width: 100%;
    background: var(--c-stone);
    color: white;
    padding: 1.2rem 0;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4em;
    transition: 0.5s;
}

.product-card:hover .btn-add-cart { background: var(--c-gold); }

/* --- 7. PANIER (DRAWER) --- */
.drawer-anim {
    box-shadow: -40px 0 100px rgba(0,0,0,0.1);
    transition: transform 0.8s var(--ease-luxe);
}

/* --- 8. BARRIÈRE D'ÂGE --- */
#age-gate {
    background: radial-gradient(circle at center, #1c1917 0%, #0c0a09 100%);
}

/* --- 9. TYPOGRAPHIE & SCROLLBAR --- */
.font-serif { font-family: var(--f-serif); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: #d6d3d1; }
::-webkit-scrollbar-thumb:hover { background: var(--c-gold); }

/* --- 10. RESPONSIVE --- */
@media (max-width: 1200px) {
    #product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --nav-height: 85px; }
    #product-grid { grid-template-columns: 1fr; }
    .text-8xl { font-size: 4.5rem; }
}