/* =========================================================
   WeatherNCo — HEADER LEGACY (ADN “ancien joli”)
   Fichier: css/wnco-header-legacy.css
   Objectif: navbar + dropdown + breadcrumb + social links (style fort)
   ========================================================= */

/* 1) Navbar (sticky, centrée, haute, typée “media/corporate”) */
.navbar{
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  height: 85px;
  z-index: 1000;
  background-color: #222;
 background: #ffffff !important;
  border-bottom: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.nav-wrapper{ margin: 0; padding: 0; }

.navbar .navbar-brand img{
  width: 150px;
  height: auto;
}

.navbar .navbar-nav > li{ margin-right: 20px; }

.navbar .navbar-nav > li > a,
.nav-link, .dropdown-item{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .6px;
}

.navbar .navbar-nav > li > a{
  color: #fff;
  padding: 15px 20px;
  text-transform: uppercase;
  font-weight: 500;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.navbar .nav-link{
    color: #0b1020 !important;
  padding: 15px 20px;
  text-transform: uppercase;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.navbar .navbar-nav > li > a:hover{
  background-color: var(--wnco-orange);
  color: #fff;
}

/* Active (simple + clean) */
.nav-link.active{
  font-weight: 800;
  border-bottom: 2px solid rgba(255,255,255,.7);
}
/* Burger (mobile) visible sur fond blanc */
.navbar .navbar-toggler{
  border-color: rgba(15,23,42,.18);
}
.navbar .navbar-toggler-icon{
  filter: invert(1); /* si l'icône était pensée pour fond dark */
}

/* 2) Dropdown (sombre, carré, propre) */
.dropdown-menu{
  border-radius: 0;
  background-color: #222;
  border: 2px solid #444;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  padding: 0;
}

.dropdown-item{
  box-sizing: border-box;
  color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
  border-bottom: 1px solid #444;
  background-color: transparent;
  margin: 0;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.dropdown-item:hover{
  background-color: var(--wnco-orange);
  color: #fff;
}


.dropdown-item:last-child{ border-bottom: none; }

.dropdown-divider{ border-color: #444; }

/* Social links — même hover que About + icône blanche */
.social-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 0; /* rectangle net */
  background: transparent;
  transition: background-color .2s ease-in-out;
}

.social-links a img{
  width: 22px;
  height: 22px;
  transition: filter .2s ease-in-out;
}

/* Hover = fond orange + icône blanche */
.social-links a:hover{
  background-color: var(--wnco-orange);
}

.social-links a:hover img{
  filter: brightness(0) invert(1);
}



/* 4) Breadcrumb (barre grise sous nav) */
.breadcrumb{
  background-color: #f0f0f0;
  margin-bottom: 0;
  padding: 10px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,.10);
}

.breadcrumb .breadcrumb-item{
  color: #333;
  font-size: 14px;
  margin-bottom: 0;
}

.breadcrumb .breadcrumb-item.active{ font-weight: 800; }

/* petit espace entre navbar et breadcrumb */
.navbar + .breadcrumb{ margin-top: 10px; }

/* 5) Mobile (menu) */
@media (max-width: 767px){
  .navbar-collapse{
    width: 100%;
    display: block;
    padding: 10px 0;
    background-color: rgba(0,0,0,.85);
    transition: height .2s ease-in-out;
  }

  .navbar-nav{ text-align: center; }
  .navbar-nav > li{ padding: 10px 0; }
}

/* 6) (Optionnel) si tu as un hamburger custom, on évite de “casser” Bootstrap.
   Laisse Bootstrap gérer .navbar-toggler-icon sauf si tu as un SVG custom. */