/* --- CONFIGURATION GLOBALE --- */
header {
    width: 100%;
    height: 80px;
    z-index: 2000;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

nav {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0 50px;
    height: 100%;
}

.nav-left, .logo, .nav-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.nav-left { justify-content: flex-start; gap: 40px; }
.logo { justify-content: center; }
.nav-right { justify-content: flex-end; }

.logo img { width: 130px; height: auto; transition: 0.3s; }
.icons { display: flex; gap: 30px; }
.icons img { width: 30px; height: auto; }

nav a {
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #000;
}

/* --- VARIANTE TRANSPARENTE (INDEX) --- */
header.header-transparent {
    position: absolute;
    top: 0;
    background: transparent;
}
header.header-transparent nav a { color: #fff !important; }
header.header-transparent .icons img { filter: invert(1); }
header.header-transparent .menu-burger span { background-color: #fff !important; }

/* --- VARIANTE BLANCHE (SHOP, PRODUIT, ETC) --- */
header.header-white {
    position: fixed; /* Reste en haut au scroll */
    top: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}
header.header-white .menu-burger span { background-color: #000 !important; }

/* --- ELEMENTS MOBILES --- */
.menu-burger {
    display: none; /* Caché sur PC */
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 3001;
}
.menu-burger span { width: 28px; height: 2px; transition: 0.3s; }

.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 35px;
    transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 3000;
}
.mobile-menu.active { left: 0; }
.mobile-menu a { color: #fff !important; font-size: 1.8rem; font-weight: 900; }
.close-menu { position: absolute; top: 30px; right: 30px; font-size: 50px; color: #fff; cursor: pointer; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    nav { padding: 0 20px; }
    .nav-left { display: none !important; } /* Cache le menu texte */

    .menu-burger { display: flex !important; flex: 1; }
    .logo { flex: 1; justify-content: center; }
    .logo img { width: 90px; }
    .nav-right { flex: 1; justify-content: flex-end; }

    /* On cache l'icône profil sur mobile (dispo dans le burger) pour gagner de la place */
    .icons a:first-child { display: none; }
}