/* =========================================================
   NAVBAR LILOBONBON — version propre
   Objectifs:
   - Pas de fond blanc (header transparent)
   - Sur la home (avec .hero) : navbar déplacée SOUS l'image (via JS)
   - Mobile : burger + menu déroulant propre, sans recouvrir le contenu
   ========================================================= */

/* Anti-flash : on affiche quand le JS a fini (optionnel mais conseillé) */
.lilo-header{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.lilo-header.is-ready{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .12s ease-out;
}

/* Header : transparent, pas de bande blanche */
.lilo-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

/* Container */
.lilo-header .nav-inner{
  max-width: 1180px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;

  padding: 0.6rem 1.1rem;

  background: transparent; /* ✅ pas de fond blanc */
}

/* Brand */
.lilo-header .brand{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: none;
  color: #111;
  white-space: nowrap;
}

/* Nav liens (boutons/pastilles) */
.lilo-header .main-nav{
  display: flex;
  gap: 1.1rem;
  flex: 1 1 auto;
  justify-content: center;
}

.lilo-header .main-nav a{
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  padding: .45rem .75rem;
  border-radius: 999px;

  text-decoration: none;
  color: #18212f;
  font-weight: 500;

  transition: background .12s ease-out, transform .12s ease-out, color .12s ease-out;
}

.lilo-header .main-nav a:hover{
  background: rgba(255, 184, 99, 0.25);
  color: #111;
  transform: translateY(-1px);
}

.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);
}

/* Droite */
.nav-right{
  display: inline-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; }

/* Panier */
.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;
}
.lilo-header .lb-cart::before{
  content: "🛒";
  position: relative;
  top: 1px;
}
.lilo-header .lb-cart:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 165, 79, .3);
}

.lb-badge{
  background: #ff6666;
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .7rem;
  margin-left: 6px;
}

/* Burger (caché desktop) */
.lilo-header .nav-toggle{
  display: none;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font-size: 20px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
}

/* =========================
   MOBILE : menu propre (grid)
========================= */
@media (max-width: 880px){

  /* Layout mobile propre : 2 lignes (pas de gros bloc blanc) */
  .lilo-header .nav-inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand toggle"
      "right right"
      "menu menu";
    gap: 10px;
    align-items: center;
  }

  .lilo-header .brand{ grid-area: brand; }
  .lilo-header .nav-toggle{
    grid-area: toggle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .lilo-header .brand .title{ display: none; }

  .nav-right{
    grid-area: right;
    width: 100%;
    justify-content: space-between;
  }

  /* Dropdown */
  .lilo-header .main-nav{
    grid-area: menu;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 0 0;
  }
  .lilo-header.is-open .main-nav{ display: flex; }

  .lilo-header .main-nav a{
    width: 100%;
    justify-content: flex-start;
    padding: 12px 12px;
  }

  /* Confort tactile */
  .lilo-header .lb-cart,
  .lilo-header .nav-auth-slot a{
    min-height: 44px;
  }

  /* Fond du dropdown UNIQUEMENT quand ouvert (pas de fond blanc permanent) */
  .lilo-header.is-open .main-nav{
    background: rgba(255,255,255,0.70);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,.06);
  }
}

@media (max-width: 880px){

  /* Ligne 1 : logo | se connecter | burger */
  .lilo-header .nav-inner{
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "brand right toggle"
      "menu  menu  menu";
    align-items: center;
  }

  /* Le bloc droit devient la zone centrale de la ligne 1 */
  .nav-right{
    grid-area: right;
    width: 100%;
    justify-content: space-between; /* se connecter à gauche, panier à droite */
    align-items: center;
  }

  /* On aligne Se connecter à gauche de la zone centrale */
  .nav-auth-slot{
    justify-self: start;
  }

  /* Burger bien calé à droite */
  .lilo-header .nav-toggle{
    justify-self: end;
  }

  /* On évite que le panier remonte trop haut */
  .lilo-header .lb-cart{
    justify-self: end;
  }
}

/* Bouton "Se connecter" (même esprit que le panier) */
.lilo-header .nav-auth-slot a{
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  background: rgba(255, 194, 109);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;

  padding: .45rem .95rem;
  font-weight: 600;
  color: #111;

  transition: transform .12s ease-out, box-shadow .12s ease-out, background .12s ease-out;
}

.lilo-header .nav-auth-slot a:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 165, 79, .25);
  background: rgba(255, 194, 109, 0.85);
}