/* /privatisation-menu/ — the pre-order card for privatisation bookings.
   The whole visual identity comes from ../menu/style.css, loaded first:
   this file adds ONLY what that page has no equivalent for. Everything
   here reuses the --menu-* custom properties defined there, so the two
   pages can never drift apart on color or type. */

/* ---------- Footer pinned to the bottom ---------- */
/* Body as a full-height flex column so the footer hugs the bottom of the
   viewport even when the content above is short (content still flows
   normally once it exceeds the viewport). */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

/* ---------- Hero actions ---------- */
.menu-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
}
.menu-btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: var(--menu-radius);
  font-family: var(--menu-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.menu-btn:active { transform: scale(0.97); }
.menu-btn-primary {
  background: var(--menu-gold);
  color: var(--menu-maroon-deep);
  box-shadow: 0 10px 24px -14px rgb(217 164 65 / 0.9);
}
.menu-btn-primary:hover { background: var(--menu-tan); }
.menu-btn-ghost {
  padding: 0.85rem 1.1rem;
  border: 1px solid rgb(244 232 210 / 0.28);
  color: var(--menu-cream-soft);
  font-weight: 500;
}
.menu-btn-ghost:hover { border-color: var(--menu-gold); color: var(--menu-cream); }

/* ---------- Item lists ---------- */
/* .menu-list-detailed is used WITHOUT .menu-list here (same as the wine
   lists on /menu/): .menu-list makes each <li> a flex row, which collapses
   .menu-item-head to its content width and parks the price right next to
   the name instead of at the right edge. Every item on this page is
   priced, so every row needs the full-width head. */
.menu-list-detailed { display: block; }

/* No .menu-price-stamp anywhere on this page (no section has a single
   shared price), so titles don't need to reserve room for one. */
.menu-title { max-width: none; }

/* ---------- Links inside item notes ---------- */
/* ../menu/style.css sets `a { color: inherit }` — fine there (its only
   links are the brand and the footer), but a link buried in a note needs
   to read as one. */
.menu-item-note a { color: var(--menu-gold); text-decoration: underline; }
.menu-panel-light .menu-item-note a { color: var(--menu-gold-deep); }
.menu-panel-light .menu-tagline a { color: var(--menu-gold-deep); text-decoration: underline; }

/* ---------- Planches traiteur ---------- */
/* The grignotage formulas are the visual centerpiece of this page, so unlike
   the other categories (plain list rows) each one is a photo card: image,
   name, prominent price badge, description and composition. */
.menu-planches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 720px) {
  .menu-planches { grid-template-columns: 1fr; }
}

.menu-planche-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(184 129 42 / 0.35);
  border-radius: var(--menu-radius);
  background: #fff;
  box-shadow: 0 18px 40px -28px rgb(31 16 9 / 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .menu-planche-card { transition: transform 0.18s ease, box-shadow 0.25s ease; }
  .menu-planche-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 46px -24px rgb(31 16 9 / 0.6);
  }
}

.menu-planche-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--menu-maroon);
  overflow: hidden;
}
/* Both photos share the same 3:2 ratio, so the two cards line up. The img is
   absolutely positioned so its own intrinsic ratio (Grignotage++ is square)
   can't override the container's aspect-ratio; object-fit crops it to fill. */
.menu-planche-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu-planche-price {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
  padding: 0.5rem 0.95rem;
  border-radius: calc(var(--menu-radius) * 0.6);
  background: var(--menu-gold);
  color: var(--menu-maroon-deep);
  font-family: var(--menu-font-body);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgb(31 16 9 / 0.6);
}
.menu-planche-price small {
  font-size: 0.72em;
  font-weight: 600;
}

.menu-planche-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.15rem 1.2rem 1.3rem;
}
.menu-planche-name {
  font-size: 1.2rem;
  color: var(--menu-maroon);
  margin: 0;
}
.menu-planche-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--menu-ink-soft);
}

/* Buffet note under the planche tagline */
.menu-planche-servi {
  margin: 0.7rem 0 1.4rem;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--menu-gold-deep);
  background: rgb(184 129 42 / 0.08);
  color: var(--menu-ink);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.45;
}

.menu-planche-ingredients {
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.menu-planche-ingredients li {
  position: relative;
  border: none;
  margin: 0;
  padding: 0 0 0 1.1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--menu-ink-soft);
}
.menu-planche-ingredients li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--menu-gold-deep);
}
.menu-planche-plus { color: var(--menu-gold-deep); }

@media (prefers-reduced-motion: reduce) {
  .menu-btn { transition: none !important; }
}

/* ---------- Planche cards: selectable ---------- */
.menu-planche-card { position: relative; cursor: pointer; }
.menu-planche-card.is-selected {
  border-color: var(--menu-gold);
  box-shadow: 0 20px 44px -24px rgb(217 164 65 / 0.75);
  outline: 2px solid var(--menu-gold);
  outline-offset: -2px;
}
.menu-planche-card:focus-visible { outline: 3px solid var(--menu-gold); outline-offset: 2px; }
.menu-planche-check {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--menu-gold);
  color: var(--menu-maroon-deep);
  font-family: var(--menu-font-body);
  font-weight: 700;
  font-size: 0.75rem;
  box-shadow: 0 6px 16px -8px rgb(31 16 9 / 0.6);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.menu-planche-card.is-selected .menu-planche-check { opacity: 1; transform: none; }

/* ---------- Planche simulator ---------- */
[hidden] { display: none !important; }
.menu-sim {
  margin-top: 1.8rem;
  padding: 1.4rem;
  border: 1px solid rgb(184 129 42 / 0.35);
  border-radius: var(--menu-radius);
  background: #fff;
}
.menu-sim-title { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); color: var(--menu-gold-deep); }
.menu-sim-sub { margin-top: 0.4rem; color: var(--menu-ink-soft); font-size: 0.9rem; }
.menu-sim-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.3rem;
}
.menu-sim-slider { flex: 1; min-width: 12rem; accent-color: var(--menu-gold-deep); }
.menu-sim-count { font-family: var(--menu-font-body); font-weight: 700; color: var(--menu-maroon); min-width: 8rem; }
.menu-sim-total {
  margin-top: 1.4rem;
  padding: 1.05rem 1.2rem;
  border-radius: calc(var(--menu-radius) * 0.6);
  background: var(--menu-maroon);
  color: var(--menu-cream);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.menu-sim-total-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.menu-sim-total-label { font-weight: 600; }
.menu-sim-total-price { font-family: var(--menu-font-display); font-size: 1.5rem; color: var(--menu-gold); letter-spacing: 0.02em; }
.menu-sim-total-note { margin: 0; font-size: 0.8rem; color: var(--menu-cream-soft); font-weight: 500; }
.menu-sim-compo { margin-top: 1.4rem; }
.menu-sim-compo-title {
  font-family: var(--menu-font-body);
  font-weight: 700;
  color: var(--menu-maroon);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.menu-sim-compo-group {
  font-family: var(--menu-font-body);
  font-weight: 700;
  color: var(--menu-gold-deep);
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  margin: 1rem 0 0.3rem;
}
.menu-sim-compo-list { margin: 0; padding: 0; list-style: none; border-top: 1px dashed rgb(58 33 20 / 0.18); }
.menu-sim-compo-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgb(58 33 20 / 0.18);
  font-size: 0.88rem;
}
.menu-sim-compo-name { color: var(--menu-ink); }
.menu-sim-compo-qty { flex: none; font-weight: 700; color: var(--menu-gold-deep); white-space: nowrap; }
@media (max-width: 520px) {
  .menu-sim-total-main { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-planche-check { transition: none !important; }
}