/* En-tête du domaine : identité à gauche, navigation centrale, outils à droite.
   Work Sans accompagne les menus ; les outils partagent un tracé fin et arrondi. */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/herbier/work-sans-v18-latin-regular.woff2') format('woff2');
}
.header {
  --font-nav: 'Work Sans', Arial, sans-serif;
  --hdr-h: 100px;
  --header-ink: #171612;
  --t-header: 220ms;
  --t-base: .3s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  isolation: isolate;
  padding-top: 20px;
  color: var(--header-ink);
  background: transparent;
  transition: transform var(--t-header) ease, background-color var(--t-header) ease, padding var(--t-header) ease;
}
.header::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 170px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(243, 241, 235, .82), rgba(243, 241, 235, .34) 58%, transparent);
  transition: opacity var(--t-header) ease;
}
.header.dark::before { opacity: 0; }
body.sticky .header { padding-top: 0; background: var(--c-paper, #F3F1EB); }
body.sticky .header::before,
.header.showmenu::before { opacity: 0; }
.header.header--hidden { transform: translateY(-100%); }
.header.showmenu { transform: none; }
.header__bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 220px;
  align-items: center;
  gap: 20px;
  height: var(--hdr-h);
  padding-inline: 50px;
}
.header a { color: inherit; text-decoration: none; }
.header a:focus-visible,
.header button:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.header .custom-logo-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  gap: 12px;
  min-height: 60px;
  color: var(--header-ink);
}
/* Les deux éléments reprennent les tracés du logo client, sans police externe. */
.header__emblem,
.header__wordmark {
  display: block;
  height: auto;
  object-fit: contain;
  filter: brightness(0);
}
.header__emblem {
  flex: 0 0 auto;
  width: 56px;
  aspect-ratio: 245.8 / 170.4395;
}
.header__wordmark {
  flex: 0 1 auto;
  min-width: 0;
  width: 210px;
  aspect-ratio: 315.5 / 45.4018;
}
.header__nav-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header__nav-item { position: relative; }
.header__nav-trigger {
  display: block;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 400 17px/1.3 var(--font-nav);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
}
.header__nav-trigger > span,
.header .header__submenu-link > span { position: relative; display: inline-block; }
.header__nav-trigger > span::after,
.header .header__submenu-link > span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}
.header__nav-item.is-open .header__nav-trigger > span::after,
.header__nav-trigger:focus-visible > span::after,
.header .header__submenu-link:hover > span::after,
.header .header__submenu-link:focus-visible > span::after,
.header .header__submenu-link[aria-current] > span::after { transform: scaleX(1); }
.header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 240px;
  max-width: calc(100vw - 48px);
  padding: 22px 28px 26px;
  color: var(--header-ink);
  /* Verre dépoli : le paysage reste visible derrière les liens nets. */
  background: rgba(243, 241, 235, .18);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow: 0 12px 30px rgba(48, 42, 37, .06), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.header__nav-item:last-child .header__dropdown { left: auto; right: 0; }
.header__dropdown[hidden], .menu__sublist[hidden] { display: none; }
.header__dropdown:not([hidden]), .menu__sublist:not([hidden]) {
  animation: hb-submenu-in .18s ease both;
}
.header__dropdown ul, .menu__sublist { list-style: none; margin: 0; padding: 0; }
.header .header__submenu-link,
.header .header__submenu-link[aria-current] {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 11px 0;
  color: inherit;
  font: 400 15.5px/1.5 var(--font-nav);
  letter-spacing: .005em;
  text-decoration: none;
}
.header.header--dropdown-open { transform: none; }
@keyframes hb-submenu-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Les liens de sous-menu arrivent sous la barre fixe, au début du contenu. */
.site-main section[id], .site-main #reservation, .site-main #agriculture-respectueuse { scroll-margin-top: 116px; }
/* Cette ancre est un titre animé : sa position reste stable lorsqu’il est ciblé. */
.site-main #agriculture-respectueuse:target { opacity: 1 !important; translate: none !important; }
.header__actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.header__language {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
  font: 400 15px/1.5 var(--font-nav);
}
.header__actions .header__language { width: 44px; height: 44px; }
.header__icon { display: grid; place-items: center; width: 44px; height: 44px; }
.header__icon svg, .header__language svg {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.hamburger { position: absolute; inset: 10px; }
.hamburger span {
  position: absolute;
  right: 0;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}
.hamburger span:nth-child(1) { top: 4px; width: 17px; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { top: 18px; width: 17px; }
.menu-toggle.open .hamburger span:nth-child(1) { width: 24px; transform: translateY(7px) rotate(45deg); }
.menu-toggle.open .hamburger span:nth-child(2) { opacity: 0; }
.menu-toggle.open .hamburger span:nth-child(3) { width: 24px; transform: translateY(-7px) rotate(-45deg); }
nav.menu {
  display: none;
  position: fixed;
  z-index: 1;
  inset: 0;
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-paper, #F3F1EB);
}
.menu__inner { padding: 76px 25px max(36px, env(safe-area-inset-bottom)); }
.menu__label { margin: 0 0 24px; font: 400 12px/1.4 var(--font-nav); letter-spacing: .12em; text-transform: uppercase; }
.menu__main { list-style: none; margin: 0; padding: 0; }
.menu__main li { margin: 0; padding: 0; }
.menu__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  color: inherit;
  background: none;
  text-align: left;
  font: 400 clamp(27px, 7.6vw, 34px)/1.2 Baskerville, Georgia, 'Times New Roman', serif;
  letter-spacing: -.025em;
  cursor: pointer;
}
.menu__group-caret {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin: -5px 5px 0 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.menu__group-toggle[aria-expanded="true"] .menu__group-caret { transform: rotate(225deg); }
.menu__main .menu__sublist {
  margin: 5px 0 16px;
  padding: 4px 0 12px;
  background: transparent;
}
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.menu__secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
  margin-top: 35px;
  padding-top: 28px;
  border-top: 1px solid currentColor;
  font-size: 16px;
  line-height: 1.5;
}
.menu__wines { display: flex; gap: 25px; }
.menu__secondary .header__language { margin-top: 7px; }
@media (max-width: 1300px) and (min-width: 1101px) {
  .header__bar { grid-template-columns: 280px minmax(0, 1fr) 144px; gap: 16px; padding-inline: 32px; }
  .header__nav-trigger { padding-inline: 11px; font-size: 16px; }
}
@media (max-width: 1100px) {
  .header { --hdr-h: 80px; }
  .site-main section[id], .site-main #reservation, .site-main #agriculture-respectueuse { scroll-margin-top: 96px; }
  .header__bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0; padding-inline: 20px; }
  .header__inline-menu,
  .header__actions .header__account,
  .header__actions .header__language { display: none; }
  .header .custom-logo-link { gap: 9px; }
  .header__emblem { width: 46px; }
  .header__wordmark { width: 180px; }
  .menu-toggle { display: block; }
  .header.showmenu .custom-logo-link,
  .header.showmenu .header__actions { visibility: hidden; }
  .header.showmenu .header__bar { pointer-events: none; }
  .header.showmenu .menu-toggle { pointer-events: auto; }
}
@media (max-width: 359px) {
  .header__bar { padding-inline: 16px; }
  .header__wordmark { width: 150px; }
  .header__emblem { width: 36px; }
  .header .custom-logo-link { gap: 7px; }
  .menu__inner { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .header, .header::before, .hamburger span,
  .header__nav-trigger > span::after, .header .header__submenu-link > span::after,
  .menu__group-caret { transition: none; }
  .header__dropdown:not([hidden]), .menu__sublist:not([hidden]) { animation: none; }
}

/* ---------- l. Age gate (#poppush) ------------------------------------------ */
.poppush {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 11;
  display: flex;                 /* inline display:none dans le HTML ; header.js → flex */
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .6);
  transition: opacity var(--t-base, .4s) ease;
}
.poppush__content {
  position: relative;
  width: 90vw;
  max-width: 800px;
  padding: 80px 4vw;
  background-color: var(--c-night, #2E2923);
  color: var(--c-white);
}
.poppush__content--inner { max-width: 456px; margin: 0 auto; }
.poppush .texte { text-align: center; }
.poppush .btn__main { color: var(--c-white); }
.poppush .btn__main::after { background-color: var(--c-white); }
.poppush .sub-title {
  font: 400 16px/1.6 var(--font-main);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 48px;
  color: var(--c-white);
}
.poppush .sub-title p { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.poppush .btn__main {
  display: inline-block !important;
  width: auto !important;
}

/* Mouvement réduit : couvert globalement par base.css (durées et délais annulés
   sur *, ::before, ::after) ; header.js lit la même media query pour ses fondus. */