/* =========================================================
   NAVBAR LILOBONBON — posée par-dessus le hero (transparente)
   Idée : le header lui-même ne crée PAS de bande blanche.
   On laisse le hero prendre tout l’espace, et on vient
   juste poser le contenu (.nav-inner) PAR-DESSUS l’image.
   ========================================================= */
.lilo-header {
  position: relative;     /* pour que le z-index s’applique */
  z-index: 40;            /* au-dessus du hero et de ses dégradés */
  height: 0;              /* ✅ le header ne pousse pas la page vers le bas */
  background: transparent;
  border: 0;
}

/* =========================================================
   BARRE DE CONTENU DE LA NAV
   - centrée
   - sans fond
   - décalée vers le bas pour "entrer" dans le hero
   ========================================================= */
.lilo-header .nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.6rem 1.4rem;

  /* 👇 ajoute ça selon ton besoin */

  /* 1) pour le placer par rapport au hero */
  position: relative;      /* ou absolute si tu veux le sortir du flux */
  top: 80px;               /* décale vers le bas */
  /* ou bien */
  /* transform: translateY(52px); */
  transform: translateY(50px);
  /* 2) pour l’alignement horizontal */
  justify-content: space-between;  /* logo à gauche, liens au centre, panier à droite */
  /* justify-content: center;      // si tu veux tout centrer */
  /* justify-content: flex-start;  // tout à gauche */

  /* 3) pour le faire passer au-dessus de l’image */
  z-index: 50;



  /* 👉 c’est ÇA qui la met sur l’image : */


  background: transparent;  /* ✅ pas de rectangle blanc */
  /* box-shadow: none;      pas d’ombre non plus */
}

/* =========================================================
   LOGO / NOM DU SITE
   ========================================================= */
.lilo-header .brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: none;
  color: #111;
  white-space: nowrap;    /* évite le retour à la ligne sur petit écran */
}

/* =========================================================
   BLOC DES LIENS (Accueil, Tous les bonbons, Vrac…)
   ========================================================= */
.lilo-header .main-nav {
  display: flex;
  gap: 1.2rem;
  flex: 1 1 auto;         /* prend la place dispo entre logo et panier */
  justify-content: center;
}

/* lien "de base" : petit pill léger */
.lilo-header .main-nav a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .75rem;
  border-radius: 999px;   /* forme pastille */
  text-decoration: none;
  color: #18212f;
  font-weight: 500;
  transition:
    background .12s ease-out,
    transform .12s ease-out,
    color .12s ease-out;
}

/* au survol on montre que c’est cliquable */
.lilo-header .main-nav a:hover {
  background: rgba(255, 184, 99, 0.25); /* petit fond orangé */
  color: #111;
  transform: translateY(-1px);
}

/* lien actif = la page où on est
   → on le met plus lisible */
.lilo-header .main-nav a.active {
  background: rgba(255, 227, 181, 0.9);
  color: #111;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255, 179, 99, 0.25);
}

/* on supprime l’ancien soulignement que tu avais dans d’autres versions */
.lilo-header .main-nav a.active::after {
  display: none;
}

/* =========================================================
   BOUTON PANIER (même look que les liens, mais un peu plus fort)
   ========================================================= */
.lilo-header .lb-cart {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgb(255, 194, 109);
  border: none;
  border-radius: 999px;
  padding: .45rem 1rem .45rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}

/* petite icône panier au début */
.lilo-header .lb-cart::before {
  content: "🛒";
  position: relative;
  top: 1px;
}

/* hover panier */
.lilo-header .lb-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 165, 79, .3);
}

/* badge rouge avec le nombre d’articles */
.lb-badge {
  background: #ff6666;
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .7rem;
  margin-left: 6px;
}

/* =========================================================
   VERSION MOBILE
   - on autorise le scroll horizontal de la barre
   - on peut cacher le brand pour gagner de la place
   ========================================================= */
@media (max-width: 880px) {
  .lilo-header .nav-inner {
    overflow-x: auto;     /* on peut scroller la nav horizontalement */
    scrollbar-width: none;
  }
  .lilo-header .nav-inner::-webkit-scrollbar {
    display: none;
  }
  .lilo-header .brand {
    display: none;        /* on garde que les liens si c’est trop serré */
  }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-auth-slot a {
  text-decoration: none;
  font-weight: 500;
  color: #1f2937;
  font-size: .9rem;
}
.nav-auth-slot a.nav-login {
  opacity: .75;
}
.nav-auth-slot a.nav-login:hover {
  opacity: 1;
}