/* ========================================
   BARRE DE NAVIGATION — L'as du goût
   ========================================
   La navbar est structurée en 2 rangées :

   ┌─────────────────────────────────────┐
   │ [LOGO]   [NOM DE LA MARQUE]  🌐 ☀️  │  ← Rangée 1 (.navbar-top)
   ├─────────────────────────────────────┤
   │ Accueil | Salé | Sucré | ... | Cont │  ← Rangée 2 (.navbar-nav)
   └─────────────────────────────────────┘

   La navbar est fixée en haut (position: fixed)
   → elle reste visible quand on fait défiler la page.

   ⚠️ Le bouton hamburger (visible sur mobile uniquement)
   est stylisé dans css/responsive.css → section [2].
   ======================================== */


/* ----------------------------------------
   CONTENEUR PRINCIPAL DE LA NAVBAR
   ---------------------------------------- */
.navbar {
    width: 100%;
    background-color: var(--c-noir-profond);
    display: flex;
    flex-direction: column;     /* Empile rangée 1 puis rangée 2 */
    position: fixed;            /* Reste en haut lors du scroll */
    top: 0;
    left: 0;
    z-index: 100;               /* Passe au-dessus de tout le contenu */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}


/* ----------------------------------------
   RANGÉE 1 : Logo + Nom de la marque
   ----------------------------------------
   Divisée en 3 colonnes égales :
   - Gauche  : logo emblème
   - Centre  : nom "L'as du goût" (image)
   - Droite  : vide (équilibre symétrique)
   ---------------------------------------- */
.navbar-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Pousse les côtés aux extrémités */
    position: relative; /* Référence pour le centrage absolu */
    width: 100%;
    height: 72px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.2); /* Séparateur doré discret */
}

/* Colonne gauche (logo) et droite (boutons) */
.navbar-top-left,
.navbar-top-right {
    display: flex;
    align-items: center;
    z-index: 2; /* Les boutons doivent rester cliquables au premier plan */
}

/* La colonne droite est alignée à droite */
.navbar-top-right {
    justify-content: flex-end;
}

/*
   La colonne centrale (titre en image)
   Utilise un centrage ABSOLU pour être toujours à 50% exact de l'écran,
   quelle que soit la taille des boutons à côté. 
*/
.navbar-top-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* En dessous en cas de superposition sur tout petit écran */
}

/* Logo emblème (image ronde à gauche) */
.navbar-logo-icon {
    height: 52px;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* Image du nom de la marque (au centre) */
.navbar-brand-img {
    height: 50px;
    width: auto;
    max-width: 480px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* ── Effet shimmer doré sur le logo (icône gauche) ── */
.navbar-top-left a {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.25s ease, filter 0.25s ease;
    display: inline-flex;
    align-items: center;
}

.navbar-top-left a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(212, 175, 55, 0.30) 50%,
        transparent 100%
    );
    transform: skewX(-18deg);
    transition: left 0.55s ease;
    pointer-events: none;
    z-index: 2;
}

.navbar-top-left a:hover::before {
    left: 130%;
}

.navbar-top-left a:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 14px rgba(212, 175, 55, 0.35));
}

.navbar-top-left a:active {
    transform: translateY(0) scale(0.94);
    filter: drop-shadow(0 2px 6px rgba(212, 175, 55, 0.25));
}

/* ── Effet shimmer doré sur le nom de la marque (centre) ── */
.navbar-top-center a {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    transition: transform 0.25s ease, filter 0.25s ease;
    display: inline-flex;
    align-items: center;
}

.navbar-top-center a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(212, 175, 55, 0.22) 50%,
        transparent 100%
    );
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 2;
}

.navbar-top-center a:hover::before {
    left: 140%;
}

.navbar-top-center a:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 3px 10px rgba(212, 175, 55, 0.20));
}

.navbar-top-center a:active {
    transform: translateY(0) scale(0.97);
}


/* ----------------------------------------
   RANGÉE 2 : Liens de navigation
   ----------------------------------------
   Les liens sont répartis uniformément
   sur toute la largeur grâce à space-evenly.
   ---------------------------------------- */
.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly; /* Répartit les liens équitablement */
    width: 100%;
    height: 48px;
    background-color: var(--c-noir-moyen);     /* Noir légèrement plus clair que la rangée 1 */
}

/* Chaque lien de navigation */
.nav-link {
    color: var(--c-or-doux);
    text-decoration: none;
    padding: 0 5px; /* Padding réduit pour se concentrer sur le texte */
    margin: 0 10px; /* Marges ajoutées pour séparer au lieu du padding massif */
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    height: 100%; /* S'étend sur toute la hauteur de la barre */
    
    /* Le soulignement est géré par un pseudo-élément (plus classe) */
    position: relative;
    transition: var(--transition-fluide);
    white-space: nowrap; /* Empêche le texte de se couper sur plusieurs lignes */
}

/* Ligne dorée (invisible par défaut, apparaît au survol) */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%; /* Invisible au départ */
    height: 2px;
    background-color: var(--c-or-vif);
    transition: width 0.3s ease; /* S'étire de gauche à droite */
}

/* Effet visuel quand la souris survole un lien (Fini le background lourd !) */
.nav-link:hover {
    color: var(--c-blanc);
}

.nav-link:hover::after {
    width: 100%; /* La barre s'étend sur toute la largeur du texte */
}

/* Lien de la section actuellement visible */
.nav-link.actif {
    color: var(--c-or-vif);
}

.nav-link.actif::after {
    width: 100%; /* La barre reste sous le lien actif */
}