/* Soja — en-tête translucide (verre dépoli, façon Apple) : collé en haut, flou du contenu qui défile,
   resserré au défilement (classe .is-scrolled posée par main.js). */
:root{--soja-header-h:84px;--soja-header-h-scrolled:66px}

.site-header{position:sticky;top:0;z-index:40;background:rgba(246,240,230,.68);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s,box-shadow .3s}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header{background:rgba(246,240,230,.97)}}

.site-header .wrap{height:var(--soja-header-h);transition:height .3s ease}
.site-header .logo{display:flex;align-items:center}
.site-header .logo img{height:56px;width:auto;transition:height .3s ease}

.site-header.is-scrolled{background:rgba(246,240,230,.78);border-bottom-color:rgba(38,35,29,.08);box-shadow:0 10px 30px -22px rgba(38,35,29,.35)}
.site-header.is-scrolled .wrap{height:var(--soja-header-h-scrolled)}
.site-header.is-scrolled .logo img{height:44px}

/* Menu : liens en pastilles discrètes */
.main-nav>ul{gap:2px}
.main-nav>ul>li>a{padding:8px 14px;border-radius:999px;transition:background-color .2s,color .2s}
.main-nav>ul>li>a:hover,.main-nav>ul>li:focus-within>a{background:rgba(255,250,242,.75);color:var(--sage-d)}
.main-nav>ul>li>a::before{bottom:2px}
.main-nav .sub-menu{background:rgba(255,250,242,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.header-search{background:rgba(255,250,242,.7)}

/* Les éléments collés plus bas tiennent compte de l'en-tête (resserré à ce moment-là). */
.az-bar{top:var(--soja-header-h-scrolled)!important}
.admin-bar .az-bar{top:calc(var(--soja-header-h-scrolled) + 32px)!important}

@media (max-width:980px){
  :root{--soja-header-h:70px;--soja-header-h-scrolled:60px}
  .site-header .logo img{height:46px}
  .site-header.is-scrolled .logo img{height:40px}
  .site-menu{top:calc(100% + 8px)!important}
  .main-nav>ul>li>a{padding:12px 0;border-radius:0}
  .main-nav>ul>li>a:hover{background:none}
}
@media (prefers-reduced-motion:reduce){.site-header,.site-header .wrap,.site-header .logo img{transition:none}}