/* En-tête et navigation communs à toutes les pages */
:root {
  --hdr-h: 64px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hdr-cream: #FAF8F5;
  --hdr-sand: #E8E0D5;
  --hdr-stone: #9A8C7C;
  --hdr-earth: #6B5E50;
  --hdr-deep: #3A332B;
  --hdr-accent: #8B7355;
}

.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--hdr-h);
  font-family: 'Inter', -apple-system, sans-serif;
  transition: background-color 200ms ease, border-color 200ms ease;
  border-bottom: 1px solid transparent;
}
.hdr.is-solid {
  background: rgba(250, 248, 245, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hdr-sand);
}

.hdr-inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 2rem);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.hdr-brand { display: flex; align-items: center; margin-right: auto; transition: opacity 200ms ease; }
.hdr-brand img { width: 44px; height: 44px; display: block; }
.hdr[data-transparent]:not(.is-solid) .hdr-brand { opacity: 0; pointer-events: none; }

.hdr-nav { display: flex; align-items: center; gap: 0.25rem; }

.hdr-link {
  font: inherit;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hdr-earth);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.hdr-link[aria-current="page"] { color: var(--hdr-deep); }
.hdr-link svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 1.6; fill: none; transition: transform 200ms var(--ease-out); }
.hdr-item.is-open .hdr-link svg { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .hdr-link:hover { color: var(--hdr-accent); }
}

/* Menu déroulant Restaurants */
.hdr-item { position: relative; }
.hdr-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: var(--hdr-cream);
  border: 1px solid var(--hdr-sand);
  box-shadow: 0 12px 40px rgba(58, 51, 43, 0.08);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
}
.hdr-item.is-open .hdr-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s;
}
.hdr-menu a {
  display: block;
  padding: 0.85rem 1rem;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.hdr-menu a:focus-visible, .hdr-menu a[aria-current="page"] { background: #F5F1EC; }
@media (hover: hover) and (pointer: fine) {
  .hdr-menu a:hover { background: #F5F1EC; }
}
.hdr-menu-name {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  color: var(--hdr-deep);
}
.hdr-menu-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--hdr-stone);
}

/* Sélecteur de langue */
.hdr-lang {
  display: flex;
  gap: 0.15rem;
  border: 1px solid var(--hdr-sand);
  border-radius: 2rem;
  padding: 0.25rem;
}
.hdr-lang a {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hdr-stone);
  padding: 0.35rem 0.7rem;
  border-radius: 1.5rem;
  transition: color 150ms ease, background-color 150ms ease;
}
.hdr-lang a.active { background: var(--hdr-deep); color: var(--hdr-cream); }
@media (hover: hover) and (pointer: fine) {
  .hdr-lang a:not(.active):hover { color: var(--hdr-accent); }
}

/* Bouton menu mobile */
.hdr-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.hdr-toggle span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: var(--hdr-deep);
  transition: transform 220ms var(--ease-out);
}
.hdr-toggle span:first-child { top: 18px; }
.hdr-toggle span:last-child { top: 25px; }
.hdr.is-menu-open .hdr-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.hdr.is-menu-open .hdr-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Panneau mobile */
.hdr-panel {
  position: fixed;
  top: var(--hdr-h); left: 0; right: 0; bottom: 0;
  background: var(--hdr-cream);
  padding: 1.5rem 16px calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.hdr.is-menu-open .hdr-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s;
}
.hdr-panel-label {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #C4B5A4;
  margin: 1.25rem 0 0.25rem;
}
.hdr-panel a {
  display: block;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hdr-sand);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--hdr-deep);
  text-decoration: none;
}
.hdr-panel a small {
  display: block;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--hdr-stone);
}
.hdr-panel .hdr-lang { display: inline-flex; margin-top: 2rem; }
.hdr-panel .hdr-lang a { border: 0; font-family: 'Inter', -apple-system, sans-serif; font-size: 0.7rem; padding: 0.5rem 1rem; }

@media (max-width: 820px) {
  .hdr-nav, .hdr-inner > .hdr-lang { display: none; }
  .hdr-toggle { display: block; }
  /* le flou crée un bloc conteneur qui piégerait le panneau fixe : on le retire à l'ouverture */
  .hdr.is-menu-open { background: var(--hdr-cream); border-bottom-color: var(--hdr-sand); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hdr.is-menu-open .hdr-brand { opacity: 1; pointer-events: auto; }
}
@media (min-width: 821px) {
  .hdr-panel { display: none; }
}

body.hdr-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hdr-menu, .hdr-panel, .hdr-toggle span, .hdr-link svg { transition-property: opacity, visibility; transform: none !important; }
}