/* Au19 — page « carte » ouverte depuis les QR codes des tables.
   Pensée pour le téléphone, en terrasse : fond clair, gros texte, rien à charger d'inutile. */

.carte-page {
  --paper: oklch(0.975 0.004 30);
  --paper-deep: oklch(0.925 0.005 30);
  --card: oklch(0.975 0.004 30);
  --ink: oklch(0.155 0.004 30);
  --ink-soft: oklch(0.4 0.006 30);
  --flag: oklch(0.52 0.21 28);
  --rule: 1.5px solid var(--ink);
  padding-bottom: 0;
}

html:has(.carte-page) { scroll-padding-top: 4.25rem; }

.c-top { display: flex; align-items: center; gap: 1rem; padding: 0.75rem var(--gutter); background: var(--ink); color: var(--paper); }
.c-top .logo img { width: 3rem; height: 3rem; border-color: var(--paper); }
.c-top h1 { font-size: 2.5rem; line-height: 0.9; }

.c-tabs { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border-bottom: var(--rule); }
.c-tabs a { padding: 1rem 0.5rem 0.85rem; text-align: center; text-decoration: none; font: 800 1.4rem/1 var(--f-cond); letter-spacing: 0.04em; text-transform: uppercase; }
.c-tabs a + a { border-left: 1px solid var(--ink); }
.c-tabs a.is-active { background: var(--ink); color: var(--paper); }

.c-section { max-width: 46rem; margin-inline: auto; padding: 2.75rem var(--gutter) 1rem; }
.c-head h2 { font-size: clamp(2.8rem, 10vw, 4.25rem); max-width: none; }
.c-head .menu-date { margin-top: 0.6rem; }

.c-formules { display: grid; grid-template-columns: 1fr 1fr; border: var(--rule); margin-top: 1.75rem; }
.c-formules > div { padding: 0.9rem 1rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; }
.c-formules > div + div { border-left: 1px solid var(--ink); }
.c-formules dt { font-size: 0.875rem; line-height: 1.35; color: var(--ink-soft); }
.c-formules dt strong { display: block; font: 900 1.45rem/1 var(--f-cond); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.25rem; }
.c-formules dd { font: 900 2.6rem/0.9 var(--f-cond); }

.c-courses { border: var(--rule); border-top: 0; }
.c-courses .course + .course { border-left: 0; }
.c-courses .course h3 { background: var(--paper-deep); border-top: 1px solid var(--ink); }
.c-courses .course:first-child h3 { border-top: 0; }
.c-courses .course li:last-child { border-bottom: 0; }
.c-courses .course li p { font-size: 1rem; }
.c-courses .course li strong { font-size: 1.125rem; }

.c-group { margin-top: 2rem; }
.c-group-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; border-bottom: var(--rule); padding-bottom: 0.45rem; }
.c-group-head h3 { font: 900 1.7rem/1 var(--f-cond); letter-spacing: 0.04em; text-transform: uppercase; }
.c-group ul { margin: 0; padding: 0; list-style: none; }
.c-group li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid oklch(0.155 0.004 30 / 0.22); }
.c-item { min-width: 0; }
.c-item strong { display: block; font-size: 1.125rem; line-height: 1.3; font-weight: 800; }
.c-item span { display: block; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft); }
.c-prices, .c-price-labels { display: flex; flex: none; }
.c-prices span, .c-price-labels span { min-width: 4.9rem; text-align: right; white-space: nowrap; }
.c-prices span { font: 800 1.45rem/1 var(--f-cond); letter-spacing: 0.02em; }
.c-price-labels { align-items: end; }
.c-price-labels span { font: 800 0.65rem/1.25 var(--f-body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }

/* Rubriques à plus de deux prix (bières pression) : les prix passent sous le nom, chacun avec sa contenance */
.c-group li.is-wide { flex-direction: column; align-items: stretch; gap: 0.55rem; }
.c-group li.is-wide .c-item { display: flex; align-items: baseline; gap: 0.6rem; }
.c-group li.is-wide .c-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.c-group li.is-wide .c-prices span { min-width: 0; text-align: left; background: var(--paper-deep); padding: 0.45rem 0.6rem 0.4rem; }
.c-prices small { display: block; font: 800 0.6875rem/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.3rem; }

.c-empty { margin-top: 1.5rem; color: var(--ink-soft); max-width: 40ch; }

.c-foot { max-width: 46rem; margin: 3rem auto 0; padding: 1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: var(--rule); font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); display: grid; gap: 0.35rem; }
.c-foot-links { margin-top: 0.75rem; color: var(--ink); font-weight: 600; }

/* Menu en cours de chargement, ou impossible à charger */
.c-status { margin-top: 1.5rem; padding: 1rem 1.1rem; background: var(--paper-deep); color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.c-status.is-error { background: oklch(0.94 0.04 28); color: var(--ink); }
.c-status a { font-weight: 800; }