/* En-tête et menu plein écran.

   L'en-tête est collant, translucide, et s'efface quand on descend pour
   revenir dès qu'on remonte (classe is-hidden posée par site.js). Le menu est
   un panneau brun qui glisse depuis la droite ; sans script, il s'ouvre par
   l'ancre #menu (:target) et se ferme par le lien vers #. */

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gutter);
  background: rgba(247, 242, 235, 0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translateY(0);
  transition: transform 0.5s var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header--dark { background: rgba(139, 79, 39, 0.86); color: var(--color-on-primary); }

.brand { display: flex; align-items: center; gap: 10px; color: var(--color-primary); }
.site-header--dark .brand { color: var(--color-on-primary); }
.brand img { height: 40px; width: auto; }
.brand__name { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.1em; }

.site-header__tools { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); }

.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  width: 48px; height: 48px; padding: 0 10px;
  background: none; border: 0; cursor: pointer; color: var(--color-text);
}
.site-header--dark .burger { color: var(--color-on-primary); }
.burger span { display: block; height: 1px; background: currentColor; }
.burger span:nth-child(2) { width: 70%; }

/* ── Menu ─────────────────────────────────────────────────────────────── */

.menu {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  padding: 12px var(--gutter) clamp(24px, 5vh, 48px);
  background: var(--color-primary); color: var(--color-on-primary);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.85s var(--ease-menu), visibility 0s linear 0.85s;
}
.menu:target, .menu.is-open {
  transform: translateX(0); visibility: visible;
  transition: transform 0.85s var(--ease-menu), visibility 0s linear 0s;
}
.menu__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.menu__brand { display: flex; align-items: center; gap: 10px; color: var(--color-on-primary); }
.menu__brand img { height: 40px; width: auto; }
.menu__close {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--color-on-primary);
  font-size: 26px; font-weight: 300; line-height: 1;
}
.menu__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 2vh, 18px); }
.menu__nav a {
  color: var(--color-on-primary); font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 96px); line-height: 1;
}
.menu__nav a:hover, .menu__nav a[aria-current="page"] { color: var(--color-highlight); }
.menu__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  border-top: 1px solid var(--line-on-primary); padding-top: 18px;
  font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase;
}
.menu__foot a { color: var(--color-on-primary); }
.menu__foot .label--plain { text-transform: none; }
.menu__social { display: flex; gap: 18px; }
.lang [aria-current="true"] { color: inherit; }
.lang a { color: var(--color-highlight); }