/*
 * Navigation — Le Poids des Mots
 * Bandeau d'annonce, en-tête, menu principal et menu mobile (burger).
 */

.topbar{background:var(--surface-2);font-size:13px;color:var(--sourdine);border-bottom:1px solid var(--filet)}
.topbar .wrap{display:flex;justify-content:flex-end;gap:10px;align-items:center;min-height:38px;flex-wrap:wrap}
.topbar a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--peche);padding-bottom:1px}
.topbar a:hover{border-bottom-color:var(--encre)}

header.site{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--papier) 93%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--filet)}
header.site .wrap{display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);min-height:78px;flex-wrap:wrap}
.logo{height:44px;width:auto;filter:var(--logo-filter);flex:none}
a.logo-lien{display:block;flex:none}

nav.principal{display:flex;gap:clamp(11px,1.7vw,24px);flex-wrap:wrap;margin-inline-start:auto;align-items:center}
nav.principal a{text-decoration:none;font-size:14.5px;color:var(--texte);padding-block:6px;border-bottom:2px solid transparent;white-space:nowrap}
nav.principal a:hover{color:var(--encre);border-bottom-color:var(--peche)}
nav.principal a.actif{color:var(--encre);border-bottom-color:var(--encre)}
nav.principal a.btn.actif{border-bottom-color:transparent}
nav.principal a.btn-plein{color:var(--papier)}
nav.principal a.btn-plein:hover{color:var(--papier)}

.burger{display:none;align-items:center;gap:9px;margin-inline-start:auto;background:none;border:1px solid var(--filet-fort);border-radius:2px;padding:10px 14px;font-family:var(--sans);font-size:14px;color:var(--encre);cursor:pointer}
.burger i{display:inline-block;width:16px;height:2px;background:currentColor;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.burger i::before{top:-5px}
.burger i::after{top:5px}

@media (max-width:900px){
  .topbar .wrap{justify-content:center;text-align:center}
  header.site .wrap{position:relative;min-height:66px;gap:12px;flex-wrap:nowrap}
  .logo{height:38px}
  .burger{display:inline-flex}
  nav.principal{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--papier);border-bottom:1px solid var(--filet);padding:4px var(--pad) 20px;box-shadow:0 10px 26px rgba(31,26,22,.09);margin-inline-start:0}
  header.site.ouvert nav.principal{display:flex}
  nav.principal a{padding-block:14px;border-bottom:1px solid var(--filet);font-size:16px;white-space:normal}
  nav.principal a:hover{border-bottom-color:var(--filet)}
  nav.principal a.actif{color:var(--encre);font-weight:600;border-bottom-color:var(--filet)}
  nav.principal a.btn{margin-top:16px;justify-content:center;border-bottom:none;font-size:15px;padding-block:14px}
  nav.principal a.btn.actif{border-bottom:none}
}