/* ==========================================================================
   AutoGo — navbar.css
   Navbar 3 zones (logo / nav centré / CTA) + menu mobile hamburger séparé
   (pattern La Pierre Noble : le menu mobile n'est pas un simple display:none
   du même <ul>, c'est un panneau distinct pour éviter les bugs de spécificité CSS).
   ========================================================================== */

#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);display:flex;align-items:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:var(--t);
}
#nav.scrolled{border-bottom-color:var(--border);box-shadow:0 2px 20px rgba(16,24,38,.05)}
#nav .container{display:flex;align-items:center;width:100%;justify-content:space-between}

.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-img{height:44px;width:auto;display:block}
.logo-badge{
  width:40px;height:40px;border-radius:11px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--heading);font-weight:700;color:var(--white);font-size:1.05rem;
}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text .logo-name{font-family:var(--heading);font-weight:700;font-size:1.15rem;color:var(--dark)}
.logo-text .logo-baseline{font-size:.68rem;color:var(--mid);letter-spacing:.03em}

#nav nav{flex:1;display:flex;justify-content:center}
#nav nav ul{display:flex;gap:36px}
#nav nav a{
  font-family:var(--heading);font-weight:600;font-size:.92rem;color:var(--dark);
  position:relative;padding:6px 0;transition:var(--t);
}
#nav nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);
  transition:var(--t);
}
#nav nav a:hover{color:var(--accent)}
#nav nav a:hover::after{right:0}

.nav-cta{flex:none;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;
  background:var(--accent);color:var(--white);font-family:var(--heading);font-weight:600;font-size:.88rem;
  box-shadow:0 8px 20px rgba(234,108,47,.25);transition:var(--t);white-space:nowrap;
}
.nav-cta:hover{background:var(--accent-dk);transform:translateY(-2px)}

.hamburger{
  display:none;flex-direction:column;gap:5px;padding:8px;margin-left:16px;
  background:none;border:none;flex:none;
}
.hamburger span{display:block;width:24px;height:2px;background:var(--dark);transition:var(--t)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mob-nav{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:190;
  background:var(--white);padding:28px 24px;overflow-y:auto;
}
.mob-nav.open{display:block}
.mob-nav ul{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}
.mob-nav a.ml{
  display:block;padding:16px 4px;font-family:var(--heading);font-weight:600;font-size:1.1rem;
  border-bottom:1px solid var(--border);color:var(--dark);
}
.mob-nav-ctas{display:flex;flex-direction:column;gap:12px}

@media (max-width:900px){
  #nav nav{display:none}
  .nav-cta{display:none}
  .hamburger{display:flex}
}