/* menu.css — Carte (Notre Carte) */

.menu-hero {
  border-bottom: 1px solid var(--ink);
  padding: 56px var(--gutter-m) 32px;
}
.menu-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
}
.menu-hero__title {
  font-family: var(--ff-display);
  font-size: clamp(56px, 8vw, 110px);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin-top: 14px;
}
.menu-hero__title em {
  font-style: italic;
  font-family: var(--ff-italic);
  color: var(--rouge);
  font-weight: 400;
}
.menu-hero__intro {
  font-family: var(--ff-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 540px;
}
.menu-hero__meta { text-align: right; flex: 0 0 auto; }
.menu-hero__meta-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gris-chaud);
  text-transform: uppercase;
}
.menu-hero__meta-date {
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--ink);
  margin-top: 4px;
}
@media (min-width: 900px) {
  .menu-hero { padding: 64px var(--gutter-d) 40px; }
}

/* ════════ Onglets mobile ═════════════════════════════════════ */
.menu-tabs {
  display: flex;
  gap: 18px;
  padding: 14px var(--gutter-m);
  border-bottom: 1px solid var(--hl);
  overflow-x: auto;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-overflow-scrolling: touch;
}
.menu-tabs a {
  color: var(--ink-soft);
  padding-bottom: 6px;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.menu-tabs a.is-active { color: var(--rouge); border-bottom-color: var(--rouge); }

/* ════════ Layout 2 colonnes desktop ═════════════════════════ */
.menu-body {
  padding: 32px var(--gutter-m) 56px;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (min-width: 900px) {
  .menu-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    padding: 64px var(--gutter-d) 96px;
    gap: 64px;
  }
  .menu-tabs { display: none; }
}

/* ════════ Side-nav sticky ═══════════════════════════════════ */
.menu-sidenav {
  position: sticky;
  top: 24px;
  align-self: start;
  display: none;
}
@media (min-width: 900px) { .menu-sidenav { display: block; } }
.menu-sidenav__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gris-chaud);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.menu-sidenav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--hl);
}
.menu-sidenav__list a {
  display: flex;
  gap: 10px;
  padding: 8px 14px;
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--ink);
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.menu-sidenav__list a:hover { color: var(--rouge); }
.menu-sidenav__list a.is-active {
  color: var(--rouge);
  border-left-color: var(--rouge);
}
.menu-sidenav__list a span:first-child {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--gris-chaud);
}
.menu-sidenav__list a.is-active span:first-child { color: var(--rouge); }
.menu-sidenav__note {
  margin-top: 32px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--hl);
}
.menu-sidenav__note-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--or-sourd);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.menu-sidenav__note-text {
  font-family: var(--ff-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

/* ════════ Sections de la carte ══════════════════════════════ */
.menu-section { margin-bottom: 48px; }
@media (min-width: 900px) { .menu-section { margin-bottom: 72px; } }
.menu-cave__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.menu-twocol { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) {
  .menu-cave__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .menu-twocol     { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.menu-cave__title-rouge {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--rouge);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.menu-cave__title-or {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--or-sourd);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.menu-cave__note {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--surface-2);
  font-family: var(--ff-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  border-left: 2px solid var(--or-sourd);
}

/* ════════ Allergies CTA ═════════════════════════════════════ */
.menu-allergies {
  background: var(--surface-2);
  border-top: 1px solid var(--hl);
  padding: 48px var(--gutter-m);
}
.menu-allergies__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.menu-allergies__text {
  font-family: var(--ff-italic);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin-top: 10px;
  max-width: 600px;
  line-height: 1.55;
}
@media (min-width: 900px) { .menu-allergies { padding: 64px var(--gutter-d); } }