/* ============================================================
   NAVIGATION — barre fixe en haut + menu déroulant mobile
   ============================================================ */
.navigation{
  position: fixed; top:0; left:0; right:0;
  height: var(--hauteur-nav);
  z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 clamp(20px, 5vw, 56px);
  background: linear-gradient(to bottom, rgba(20,16,14,.92), rgba(20,16,14,0));
  backdrop-filter: blur(6px);
}
.navigation-marque{
  display:flex; align-items:center; gap:10px;
  font-family: var(--police-titre);
  font-weight:700; font-size:20px; letter-spacing:.1em;
}
.navigation-renard{ width:26px; height:26px; }
.navigation-renard-trait{ fill:none; stroke: var(--braise); stroke-width:1.4; stroke-linejoin:round; }

.navigation-liens{ display:flex; gap: clamp(20px,3vw,40px); }
.navigation-liens a{
  position:relative;
  font-size: 14px; letter-spacing:.04em;
  color: var(--texte-attenue);
  padding: 6px 2px;
  transition: color .25s ease;
}
.navigation-liens a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--braise);
  transition: right .25s var(--courbe);
}
.navigation-liens a:hover, .navigation-liens a.est-actif{ color: var(--texte); }
.navigation-liens a:hover::after, .navigation-liens a.est-actif::after{ right:0; }

.navigation-bouton{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px;
  background:none; border:none; cursor:pointer;
}
.navigation-bouton span{ display:block; height:2px; background:var(--texte); border-radius:2px; }

/* menu mobile : mêmes sélecteurs, comportement différent en dessous de 640px */
@media (max-width: 640px){
  .navigation-liens{
    position: fixed; top: var(--hauteur-nav); left:0; right:0;
    flex-direction:column; gap:0;
    background: var(--fond-alt);
    border-bottom: 1px solid var(--ligne);
    max-height:0; overflow:hidden;
    transition: max-height .3s var(--courbe);
  }
  .navigation-liens.est-ouvert{ max-height: 260px; }
  .navigation-liens a{ padding: 16px 24px; border-top:1px solid var(--ligne); }
  .navigation-bouton{ display:flex; }
}