/* =========================================================
   HEADER — barre de navigation principale
   ========================================================= */

.site-header{
  background:var(--primary);
  position:sticky;
  top:0;
  max-height: 90px;
  /*z-index:1000;*/
width: 100%;
  /*left:50%;*/
  /*right:50%;*/
  /*margin-left:-50vw;*/
  /*margin-right:-50vw;*/
}
.site-header {
  @media (min-width: 75rem) {
    min-height: 90px;
    border-block-end: solid 1px transparent;
  }
}
.navbar{
  padding-top:.5rem;
  padding-bottom:.5rem;
}

/* Desktop (≥992px) : logo, menu et langue sur une seule ligne,
   logo à gauche, reste à droite. */
@media (min-width:992px){
  .navbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:1.5rem;
  }
}

/* Mobile (<992px) : empilé, comportement standard Bootstrap
   (le panneau .collapse s'ouvre sous le logo). */

/* Logo / nom du site */
.navbar-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:#fff !important;
  text-decoration:none;
  font-weight:600;
  font-size:1.6rem;
  white-space:nowrap;
  line-height:1;
}
.navbar-brand img{
  height:60px;
  width:auto;
  display:block;
}

/* À l'intérieur du panneau (desktop : menu+langue groupés ;
   mobile : tout empilé verticalement, géré par Bootstrap). */
.navbar-collapse{
  gap:1rem;
}
@media (min-width:992px){
  .navbar-collapse{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:1.5rem;
  }
}

/* Liens du menu — couleur uniquement, jamais la direction */
.navbar-nav .nav-link{
  color:rgba(255,255,255,.9) !important;
  font-weight:600;
  white-space:nowrap;
  padding:.5rem 0;
  text-decoration:none;
}
@media (min-width:992px){
  .navbar-nav .nav-link{
    padding:.4rem 0;
  }
}@media (max-width:425px){
  .navbar-brand {
    font-size: 1rem;
  }
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active{
  color:#fff !important;
}
.navbar-nav .nav-link.active{
  color:#fff !important;
  /*text-decoration:underline;*/
  /*text-underline-offset:4px;*/
}

/* Sous-menu déroulant (Projets) — texte sombre, fond blanc */
.dropdown-menu .dropdown-item{
  color:var(--text) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background-color:var(--info-bg);
  color:var(--primary) !important;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active{
  background-color:var(--primary);
  color:#fff !important;
}

/* Bouton hamburger (mobile uniquement, Bootstrap le cache déjà
   nativement à partir de 992px via navbar-expand-lg) */
.navbar-toggler{
  border-color:rgba(255,255,255,.5);
}
.navbar-toggler-icon{
  filter:brightness(0) invert(1);
}

/* Sélecteur de langue (FR | NL) */
.language-switcher-compact{
  font-size:.85rem;
}
@media (max-width: 991.98px){
  .navbar-collapse.show,
  .navbar-collapse.collapsing{
    background: var(--primary);
    padding: 1rem;
    border-radius: var(--radius-sm);
  }
}
/* Header bleu institutionnel UNIQUEMENT sur l'accueil (cohérent
   avec le bandeau Hero) — clair partout ailleurs, comme le montre
   le prototype (fond blanc, liens en texte foncé). */
body:not(.path-frontpage) .site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
body:not(.path-frontpage) .navbar-brand,
body:not(.path-frontpage) .navbar-nav .nav-link{
  color: var(--text) !important;
}
body:not(.path-frontpage) .navbar-nav .nav-link:hover,
body:not(.path-frontpage) .navbar-nav .nav-link:focus,
body:not(.path-frontpage) .navbar-nav .nav-link:active,
body:not(.path-frontpage) .navbar-nav .nav-link.active{
  color: var(--primary) !important;
}
body:not(.path-frontpage) .navbar-toggler{
  border-color: var(--border);
}
body:not(.path-frontpage) .navbar-toggler-icon{
  filter: none;
}

body:not(.path-frontpage) .language-switcher-compact a,
body:not(.path-frontpage) .language-switcher-compact span{
  color: var(--text) !important;
}
body:not(.path-frontpage) .language-switcher-compact a.fw-bold{
  color: var(--primary) !important;
}

.navbar-nav .nav-link{
  position:relative;
  display:inline-block;
}

.navbar-nav .nav-link.active::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-.3rem;
  width:100%;
  height:.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8 Q50 2 100 7 T198 6' fill='none' stroke='%23FFC93C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% 100%;
}
@media (max-width:991.98px){
  .navbar-nav .nav-link.active::before{
    bottom:auto;
    top:100%;
    margin-top:.1rem;
  }
}
@media (max-width: 991.98px){
  .navbar-collapse.show,
  .navbar-collapse.collapsing{
    padding: 1rem;
    border-radius: var(--radius-sm);
  }
  .path-frontpage .navbar-collapse.show,
  .path-frontpage .navbar-collapse.collapsing{
    background: var(--primary);
  }
  body:not(.path-frontpage) .navbar-collapse.show,
  body:not(.path-frontpage) .navbar-collapse.collapsing{
    background: var(--surface);
    border: 1px solid var(--border);
  }
}