/* =========================================================
   Menu de navigation — composant partagé (fogg.ch)
   Styles uniquement ; le comportement est dans nav.js.
   Les tokens sont consommés avec une valeur de repli
   (var(--x, #hex)) pour fonctionner aussi sur les pages
   qui ne déclarent pas le :root de la page d'accueil.
   ========================================================= */

.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s cubic-bezier(.16,1,.3,1),
             border-color .4s cubic-bezier(.16,1,.3,1),
             backdrop-filter .4s cubic-bezier(.16,1,.3,1);
}

.site-nav__inner{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;padding:0 1.5rem;
  height:52px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  transition:height .4s cubic-bezier(.16,1,.3,1);
}

.site-nav__brand{
  font-weight:500;font-size:1.05rem;letter-spacing:-.02em;
  color:#fff;text-decoration:none;white-space:nowrap;
  transition:color .4s cubic-bezier(.16,1,.3,1);
}
.site-nav__brand span{color:rgba(255,255,255,.5);transition:color .4s cubic-bezier(.16,1,.3,1)}
.site-nav__brand:hover{opacity:1}

.site-nav__links{display:flex;align-items:center;gap:1.9rem}
.site-nav__link{
  font-weight:300;font-size:.92rem;letter-spacing:-.01em;
  color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap;
  transition:color .3s ease,opacity .3s ease;
}
.site-nav__link:hover{color:#fff;opacity:1}
.site-nav__link[aria-current="page"]{color:#fff}

/* ----- État après défilement (et menu mobile ouvert) ----- */
.site-nav.is-scrolled,
.site-nav.is-open{
  background:rgba(250,250,248,.72);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom-color:#e4e2da;
}
.site-nav.is-scrolled .site-nav__inner{height:44px}
.site-nav.is-scrolled .site-nav__brand,
.site-nav.is-open .site-nav__brand{color:var(--ink,#0A1628)}
.site-nav.is-scrolled .site-nav__brand span,
.site-nav.is-open .site-nav__brand span{color:#8a92a0}
.site-nav.is-scrolled .site-nav__link,
.site-nav.is-open .site-nav__link{color:#5a6474}
.site-nav.is-scrolled .site-nav__link:hover,
.site-nav.is-scrolled .site-nav__link[aria-current="page"],
.site-nav.is-open .site-nav__link:hover,
.site-nav.is-open .site-nav__link[aria-current="page"]{color:var(--ink,#0A1628)}

/* ----- Bouton hamburger ----- */
.site-nav__burger{
  display:none;
  width:40px;height:40px;margin-right:-8px;
  background:none;border:none;padding:0;cursor:pointer;
  color:#fff;
  flex-direction:column;align-items:center;justify-content:center;gap:0;
  transition:color .4s cubic-bezier(.16,1,.3,1);
}
.site-nav.is-scrolled .site-nav__burger,
.site-nav.is-open .site-nav__burger{color:var(--ink,#0A1628)}
.site-nav__burger span{
  display:block;width:20px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.site-nav__burger span:first-child{transform:translateY(-3px)}
.site-nav__burger span:last-child{transform:translateY(3px)}
.site-nav.is-open .site-nav__burger span:first-child{transform:translateY(.75px) rotate(45deg)}
.site-nav.is-open .site-nav__burger span:last-child{transform:translateY(-.75px) rotate(-45deg)}

/* ----- Mobile : panneau déroulant ----- */
@media(max-width:760px){
  .site-nav__burger{display:flex}
  .site-nav__links{
    position:fixed;left:0;right:0;top:0;z-index:1;
    flex-direction:column;align-items:flex-start;gap:0;
    padding:calc(52px + env(safe-area-inset-top)) 1.5rem .6rem;
    background:rgba(250,250,248,.94);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-bottom:1px solid #e4e2da;
    transform:translateY(-101%);
    transition:transform .45s cubic-bezier(.16,1,.3,1);
  }
  .site-nav.is-open .site-nav__links{transform:translateY(0)}
  .site-nav__link{
    width:100%;padding:1rem 0;font-size:1.05rem;
    border-bottom:1px solid #efeee8;
  }
  .site-nav__link:last-child{border-bottom:none}
}

@media (prefers-reduced-motion:reduce){
  .site-nav,.site-nav__inner,.site-nav__links,.site-nav__burger span,
  .site-nav__brand,.site-nav__brand span,.site-nav__link{transition:none}
}