/* Sites des restaurants {slug}.tablae.com : feuille servie par le worker du site, mêmes jetons que le site principal
   (styles/global.css). Téléphone d'abord : gouttières de 16 px, aucun défilement horizontal, cibles de 44 px, texte 16 px. */
:root {
  --cream: #faf7f2;
  --paper: #ffffff;
  --ink: #1f2a2e;
  --muted: #5b6b70;
  --line: #e4ddd2;
  --brand: #c8553d;
  --brand-dark: #a8432e;
  --focus: #1f6feb;
  /* Le doigt d'abord : un bouton fait 52 px de haut, un coin 16 px, une carte porte une ombre légère plutôt qu'un filet. */
  --tap: 52px;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(31, 42, 46, 0.06), 0 8px 24px rgba(31, 42, 46, 0.08);
  --header-h: 64px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--cream); color: var(--ink); font: 16px/1.6 system-ui, "Segoe UI", Roboto, Arial, sans-serif; overflow-wrap: anywhere; }
a { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: 12px; top: -48px; padding: 8px 12px; background: var(--ink); color: var(--cream); border-radius: 8px; z-index: 20; }
.skip:focus { top: 12px; }
.inner { max-width: 760px; margin: 0 auto; padding: 0 16px; }

.site-header { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
/* Jusqu'à sept liens dans cet en-tête (accueil, carte, commander, livraison, réserver, offrir, site d'origine). Aucun ne
   se cache jamais au bord : au bureau, ils passent à la ligne s'il le faut ; au téléphone, ils sont derrière le bouton
   de navigation (`worker/site.ts`, panneau `popover` natif, sans script). Une ligne qui défilait sans barre les coupait
   au bord sans rien qui le dise (vitrine, 20/10/2026) ; passés à la ligne au téléphone, ils faisaient un en-tête de
   trois rangées (recette du 12/10/2026). */
.site-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 0 12px; min-height: var(--header-h); }
.site-name { flex: none; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
/* Un logo à la place du nom : borné en hauteur, jamais étiré, et jamais plus large que la place laissée au menu. */
.site-logo { display: block; height: auto; width: auto; max-height: 44px; max-width: min(220px, 60vw); object-fit: contain; }
.site-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; }
.site-header nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.site-header nav a[aria-current="page"] { background: var(--ink); color: var(--cream); }
/* Le lien vers le site que le restaurant avait déjà : il sort de Tablae, il se distingue d'un soulignement. */
.site-header nav a.site-external { text-decoration: underline; text-underline-offset: 4px; }
.site-menu-btn, .site-menu-close { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.site-menu-head { display: none; }
/* À droite de l'en-tête : les gestes d'une page (la cloche d'une table), puis le bouton du menu. */
.site-tools { flex: none; display: flex; align-items: center; gap: 8px; }
.site-tool { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.site-tool svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .site-tool:hover { border-color: var(--ink); }
}
@media (min-width: 768px) {
  /* Le panneau n'en est pas un au bureau : la barre de liens, en ligne, sans les styles que le navigateur prête à un `popover`. */
  .site-header nav[popover] { position: static; inset: auto; width: auto; height: auto; margin: 0 0 0 auto; padding: 0; border: 0; overflow: visible; background: none; color: inherit; }
}
/* Au téléphone, le nom et le bouton sur une ligne ; le nom passe à la ligne plutôt que d'être coupé. L'en-tête défile
   avec la page : ce sont les catégories de la carte qui restent sous le doigt. */
@media (max-width: 767px) {
  .site-header { position: static; }
  /* À table, l'en-tête reste : la cloche doit être sous le pouce à tout moment du repas. Il ne porte que le nom, la
     cloche et le menu — une ligne. */
  .site-header--table { position: sticky; }
  .site-header .inner { padding-top: 6px; padding-bottom: 6px; }
  .site-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .site-menu-btn { display: inline-flex; }
  /* Le panneau descend du haut : sa première ligne reprend la barre (le nom, et la croix à la place exacte du ☰), sa
     hauteur suit son contenu — jamais étirée à l'écran, quel que soit le navigateur. */
  .site-header nav[popover] { position: fixed; inset: 0 0 auto 0; width: 100%; height: auto; max-width: none; max-height: 100dvh; margin: 0; padding: 6px 16px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0 0 20px 20px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22); }
  .site-header nav[popover]:not(:popover-open) { display: none; }
  .site-header nav[popover]:popover-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .site-header nav[popover]::backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); }
  .site-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 8px; }
  .site-menu-head .site-name { min-width: 0; }
  .site-menu-close { display: inline-flex; }
  .site-header nav a { justify-content: space-between; min-height: 56px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 19px; }
  .site-header nav a[aria-current="page"] { background: none; color: var(--ink); }
  .site-header nav a[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
  @media (prefers-reduced-motion: no-preference) {
    .site-header nav[popover] { transition: translate 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s, display 0.22s allow-discrete, overlay 0.22s allow-discrete; }
    .site-header nav[popover]:not(:popover-open) { translate: 0 -16px; opacity: 0; }
    @starting-style { .site-header nav[popover]:popover-open { translate: 0 -16px; opacity: 0; } }
  }
}

/* `main` porte aussi `.inner` : sans la classe dans le sélecteur, `.inner { padding: 0 16px }` l'emporte et le titre colle à l'en-tête. */
main, main.inner { padding: 24px 16px 64px; }
.hero h1 { font-size: clamp(30px, 7vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 12px; }
.lead { font-size: 19px; color: var(--muted); margin: 0 0 16px; }
.prose p { margin: 0 0 12px; }
/* Un bouton se touche du pouce : 52 px de haut, texte de 17 px. Le fond est le rouge profond, pas le rouge vif :
   le blanc y tient 6:1, là où le vif plafonnait à 4,4:1 sous le seuil d'un texte courant. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 0 24px; border-radius: var(--radius); border: 1px solid var(--brand-dark); background: var(--brand-dark); color: #fff; font: inherit; font-size: 17px; font-weight: 700; text-decoration: none; }
@media (hover: hover) {
  .btn:hover { background: #8f3826; border-color: #8f3826; }
}
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
@media (hover: hover) {
  .btn-secondary:hover { background: var(--cream); border-color: var(--ink); }
}
.btn svg { flex: none; width: 24px; height: 24px; }
/* Au téléphone, une action occupe la largeur : deux boutons côte à côte se partagent la ligne, un seul la prend. */
@media (max-width: 480px) {
  .actions > .btn, .actions > form, .actions > form > .btn { flex: 1 1 100%; }
  .hero > p > .btn, .block > p > .btn { display: flex; }
}

.block { margin: 24px 0 0; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.block h2 { margin: 0 0 12px; font-size: 22px; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 8px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.hours th { width: 40%; font-weight: 600; }
.address { margin: 0 0 8px; }
.phone { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.muted { color: var(--muted); }

/* --- La carte --- */
/* Les catégories derrière un bouton qui reste sous le doigt pendant qu'on descend la carte ; la liste s'ouvre en
   panneau. Une rangée qui défilait de côté se coupait au bord (« Pokeb… ») et ne montrait jamais la carte entière. */
.cats-bar { position: sticky; top: 0; z-index: 5; margin: 16px -16px 0; padding: 10px 16px; background: var(--cream); border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .cats-bar { top: var(--header-h); } }
.site-header--table ~ main .cats-bar { top: var(--header-h); }
.cats-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
@media (hover: hover) {
  .cats-btn:hover { border-color: var(--ink); }
}

/* Un panneau qui monte du bas au téléphone, sous le pouce ; centré au bureau. Natif (`popover`), sans script. */
.sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; height: auto; max-height: 85dvh; margin: 0; padding: 8px 16px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 20px 20px 0 0; background: var(--paper); color: var(--ink); box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.22); }
.sheet::backdrop { background: rgba(0, 0, 0, 0.4); }
@media (min-width: 768px) {
  .sheet { inset: 0; width: min(440px, calc(100% - 32px)); max-height: 80dvh; margin: auto; padding-bottom: 20px; border-radius: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet { transition: translate 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s, display 0.22s allow-discrete, overlay 0.22s allow-discrete; }
  .sheet:not(:popover-open) { translate: 0 24px; opacity: 0; }
  @starting-style { .sheet:popover-open { translate: 0 24px; opacity: 0; } }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; font-size: 19px; font-weight: 800; }
.sheet-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.cats-links { list-style: none; margin: 0; padding: 0; }
.cats-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 19px; font-weight: 600; text-decoration: none; }
.cats-count { flex: none; min-width: 32px; padding: 2px 10px; border-radius: 999px; background: var(--cream); color: var(--muted); font-size: 14px; font-weight: 700; text-align: center; }
.sheet form { margin: 0 0 10px; }
.sheet-action { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-size: 18px; font-weight: 700; text-align: left; cursor: pointer; }
.sheet-action svg { flex: none; width: 24px; height: 24px; color: var(--brand-dark); }
@media (hover: hover) {
  .sheet-action:hover { border-color: var(--ink); }
}
/* Une ancre atteinte ne se cache ni sous les pastilles ni sous l'en-tête. */
.menu-cat { margin: 28px 0 0; scroll-margin-top: 76px; }
@media (min-width: 768px) { .menu-cat { scroll-margin-top: calc(var(--header-h) + 76px); } }
.menu-cat h2 { margin: 0 0 12px; font-size: 24px; letter-spacing: -0.01em; }

/* Un plat est une carte. Sa photo, quand il en a une, en tient toute la largeur au-dessus du texte : c'est elle que le
   client regarde. Deux colonnes dès que l'écran les porte. */
.dishes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .dishes { grid-template-columns: 1fr 1fr; } main.inner:has(.dishes) { max-width: 1040px; } }
.dish { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
/* Un plat sans photo garde toute la largeur pour son texte : ni cadre gris, ni dessin, ni trou à la place de l'image. */
.dish--photo { overflow: hidden; }
.dish-photo-btn { display: block; width: calc(100% + 32px); margin: -16px -16px 0; padding: 0; border: 0; background: var(--line); cursor: zoom-in; }
.dish-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dish-body { min-width: 0; display: flex; flex-direction: column; }

/* La photo agrandie : l'image entière, puis le nom, le prix et la description ; la croix en haut à droite. */
.lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 0; background: var(--paper); color: var(--ink); }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }
.lightbox > img { display: block; width: 100%; height: auto; max-height: 75dvh; object-fit: contain; background: #111; }
.lightbox > .sheet-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 1; box-shadow: var(--shadow); }
.lightbox-text { padding: 16px 16px max(24px, env(safe-area-inset-bottom)); }
.lightbox-head { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.lightbox-text .dish-desc { font-size: 16px; }
@media (min-width: 900px) {
  .lightbox { inset: 0; width: min(860px, calc(100% - 48px)); height: auto; max-height: calc(100dvh - 48px); margin: auto; border-radius: 20px; }
}
/* L'ordre de lecture à l'écran : le nom, ce qu'il y a dedans, puis le prix juste au-dessus du geste. L'ordre du
   document ne change pas — nom, prix, description — pour qui écoute la page. */
.dish-head { display: contents; }
.dish-name { order: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.dish-soldout { order: 1; }
.dish-diets { order: 1; }
.dish-desc { order: 2; margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.allergens { order: 3; }
.dish-price { order: 4; margin-top: 8px; font-size: 18px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dish-custom, .dish-body > .dish-options { order: 5; }
.dish-qty { order: 6; }
/* Épuisé (docs/01-structure.md §8) : le plat reste sur la carte et le dit. Le retirer laisserait chercher un plat
   qu'on a vu la semaine dernière ; le laisser commander ferait refuser la commande à l'envoi. */
.dish--soldout .dish-name, .dish--soldout .dish-price, .dish--soldout .dish-desc { color: var(--muted); }
.dish--soldout .dish-photo-btn .dish-photo { filter: grayscale(1); opacity: 0.7; }
.dish-soldout { align-self: flex-start; margin-top: 6px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.allergens { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
/* Les mentions du plat (halal, végétarien, végan) : des pastilles qui se lisent d'un coup d'œil, sans couleur à apprendre. */
.dish-diets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.diet { padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
/* Les filtres de la carte, dans la barre collante à côté des catégories. Un seul appuyé à la fois. */
.cats-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.menu-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-filter { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.menu-filter[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.menu-filter:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) {
  .menu-filter:hover { border-color: var(--ink); }
}
/* Au téléphone, la barre tient sur une ligne : catégories et filtres compacts, qui défilent de côté plutôt que
   d'empiler des rangées au-dessus de la carte (06/11/2026). */
@media (max-width: 767px) {
  .cats-bar:not(.cats-bar--pills) { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px 16px; }
  .cats-bar:not(.cats-bar--pills)::-webkit-scrollbar { display: none; }
  .cats-bar .menu-filters { flex: none; flex-wrap: nowrap; }
  .cats-bar .cats-btn, .cats-bar .menu-filter { flex: none; min-height: 40px; padding: 0 14px; font-size: 15px; white-space: nowrap; }
}

.site-footer { border-top: 1px solid var(--line); padding: 20px 0; color: var(--muted); font-size: 14px; }
.site-footer p { margin: 0 0 4px; }
.legal-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; padding: 0; }
.legal-links a { color: inherit; }
.legal-links [aria-current="page"] { font-weight: 600; text-decoration: none; }

/* Pages juridiques : un texte long doit rester lisible sur un téléphone, d'où la mesure bornée et l'interligne ample. */
.prose.legal { max-width: 68ch; margin: 24px 0 0; line-height: 1.7; }
.prose.legal h2 { margin: 32px 0 8px; font-size: 20px; }
.prose.legal h3 { margin: 24px 0 4px; font-size: 17px; }
.prose.legal p, .prose.legal ul { margin: 0 0 12px; }
.prose.legal li { margin: 0 0 4px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.legal-table th, .legal-table td { padding: 8px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
/* Au téléphone, deux colonnes serreraient chaque valeur sur trois lignes : l'intitulé passe au-dessus. */
.legal-table th { width: 42%; font-weight: 600; color: var(--muted); }
@media (max-width: 480px) {
  .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table td { padding-top: 0; border-top: 0; }
}

/* Réservation (/reserver) : le formulaire marche sans JavaScript, il doit donc être lisible du premier coup d'œil.
   Champs pleine largeur et hauts de 48 px, créneaux en pastilles de 44 px minimum, erreur visible avant les champs. */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form-error { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--brand); border-left-width: 4px; background: var(--paper); color: var(--brand-dark); font-weight: 600; }
.small { font-size: 14px; }
[hidden] { display: none !important; }
/* « Être prévenu » (public/notifications.js) : la section naît cachée et ne s'affiche que si le navigateur sait recevoir. */
button.btn { cursor: pointer; }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.push-note { margin: 12px 0 0; color: var(--muted); }
.push-note.is-error { color: var(--brand-dark); font-weight: 600; }
.field { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; }
.field .hint { color: var(--muted); font-size: 14px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }
.field textarea { min-height: 88px; resize: vertical; }
.field label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; min-height: 44px; }
.field label.check input { width: 22px; height: 22px; min-height: 22px; flex: none; margin: 2px 0 0; padding: 0; }
fieldset { margin: 0 0 20px; padding: 0; border: 0; }
/* La réservation tient en un écran de téléphone : titre serré, nombre de personnes et jour sur une ligne, créneaux
   juste dessous, nom et téléphone côte à côte dès 520 px, la précision repliée. Avec public/reserve.js, le bouton
   « Voir les créneaux » s'efface : changer un des deux champs recharge la page. */
.hero--reserve h1 { margin-bottom: 4px; }
.hero--reserve .lead { margin-bottom: 8px; }
.reserve-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: end; margin: 16px 0 0; }
.reserve-when .field { margin: 0; }
.reserve-when .when-go { grid-column: 1 / -1; margin: 0; }
.reserve-when.is-live .when-go { display: none; }
.reserve-book { margin-top: 16px; padding: 16px; }
.reserve-book .field { margin-bottom: 12px; }
.reserve-book .btn[type="submit"] { width: 100%; }
.reserve-book .small { margin: 8px 0 0; }
.field-pair { display: grid; gap: 0 12px; }
@media (min-width: 520px) { .field-pair { grid-template-columns: 1fr 1fr; } }
.field-more { margin: 0 0 16px; }
.field-more summary { min-height: 44px; padding: 10px 0; font-weight: 600; cursor: pointer; }
.field-more summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.field-more .field { margin-top: 4px; }
.remember { margin-bottom: 8px; }

legend { padding: 0; margin: 0 0 12px; font-weight: 700; font-size: 18px; }
.slot-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* La pastille EST l'étiquette : la case reste dans le flux pour le clavier et les lecteurs d'écran, mais invisible. */
.slot input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.slot label { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 72px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-variant-numeric: tabular-nums; font-weight: 600; cursor: pointer; }
.slot input:checked + label { background: var(--brand); border-color: var(--brand); color: #fff; }
.slot input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Le tambour (public/slots.js) : avec le script, les pastilles se replient en une seule — le jour, l'heure, les minutes
   tournent sous le doigt et s'aimantent sur la pastille du milieu. Trois lignes de 44 px : celle du choix, et une de
   chaque côté pour voir qu'il y a une suite. Sans le script, rien de ceci ne s'applique et les pastilles restent. */
.slot-picker.is-wheel fieldset.slots { display: none; }
.wheel { --row: 44px; position: relative; display: flex; align-items: stretch; justify-content: center; gap: 4px; width: 100%; max-width: 360px; height: calc(var(--row) * 3); margin: 0 0 8px; isolation: isolate; }
.wheel::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--row); height: var(--row); border: 2px solid var(--brand); border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); }
.wheel-col { flex: 0 0 64px; height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; border-radius: var(--radius-sm); touch-action: pan-y; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent); }
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-col:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.wheel-col--day { flex: 1 1 auto; min-width: 0; }
.wheel-pad, .wheel-item { height: var(--row); }
.wheel-item { scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: 0 8px; color: var(--muted); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; user-select: none; }
.wheel-col--day .wheel-item { font-size: 17px; }
.wheel-item[aria-selected="true"] { color: var(--ink); font-weight: 800; }
.wheel-item.is-full { text-decoration: line-through; }
.wheel-sep { display: flex; align-items: center; font-size: 20px; font-weight: 800; }
.wheel-sum { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.wheel-sum.is-full { color: var(--brand-dark); font-size: 16px; font-weight: 700; }
.wheel-sum:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }

@media print {
  .site-header, .site-footer, .btn, .skip { display: none; }
  .prose.legal { max-width: none; }
  .block { border: 0; padding: 0; margin-top: 20px; }
}

/* --- Commande depuis la table (/t/{code}) --- */
.dish-qty { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.dish-qty label { color: var(--muted); font-size: 14px; }
.dish-qty input { width: 84px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; text-align: center; }
/* Avec le script (public/order.js), le champ devient un compteur : « Ajouter », puis − 2 +. Sans lui, le champ reste
   un champ, et la commande part pareil — le script n'ajoute que le confort. */
.qty-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font: inherit; font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; }
@media (hover: hover) {
  .qty-btn:hover { border-color: var(--ink); }
}
.qty-btn--add { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
@media (hover: hover) {
  .qty-btn--add:hover { background: #8f3826; border-color: #8f3826; }
}
.dish-qty.is-stepper label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dish-qty.is-stepper input { width: 48px; min-height: 48px; padding: 0; border: 0; background: none; font-size: 20px; font-weight: 800; -moz-appearance: textfield; appearance: textfield; }
.dish-qty.is-stepper input::-webkit-outer-spin-button, .dish-qty.is-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* À zéro, un seul geste à l'écran : « Ajouter ». Le compteur n'apparaît qu'une fois le plat choisi. */
.dish-qty.is-empty input, .dish-qty.is-empty .qty-btn--less { display: none; }
.dish-qty.is-empty .qty-btn--add { width: auto; padding: 0 22px; border-radius: 999px; font-size: 17px; }
/* Le plat choisi se voit sans chercher son compteur. */
.dish.is-picked { border-color: var(--brand-dark); box-shadow: 0 0 0 1px var(--brand-dark), var(--shadow); }

/* La barre de commande : collée en bas, pleine largeur, le total à gauche et le geste à droite. */
.order-bar { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 24px -16px 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 -8px 24px rgba(31, 42, 46, 0.1); }
.order-sum { flex: 1 1 120px; min-width: 0; margin: 0; color: var(--muted); font-size: 14px; }
.order-sum.is-filled { color: var(--ink); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.order-actions { flex: 1 1 auto; display: flex; gap: 10px; justify-content: flex-end; }
.order-actions .btn { flex: 1 1 auto; min-height: 56px; }
/* Deux gestes sur 390 px (« Régler l'addition », « Voir ma commande ») se partagent la ligne sans la déborder. */
@media (max-width: 480px) {
  .order-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 16px; line-height: 1.15; }
  /* Panier vide : la consigne prend sa ligne, le geste la sienne. Cinq lignes de texte serrées contre un bouton ne se lisent pas. */
  .order-sum:not(.is-filled) { flex-basis: 100%; }
}
.order-sum:empty { display: none; }
.recap { list-style: none; margin: 0 0 12px; padding: 0; }
.recap li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.recap li:first-child { border-top: 0; }
.recap-total { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding-top: 12px; border-top: 2px solid var(--ink); font-weight: 700; }

/* --- Click & Collect (/commander, /suivi/{code}) --- */
/* Un créneau complet reste lisible : il est grisé et barré d'un mot, jamais effacé — un trou dans la journée
   inquiéterait plus qu'un « complet » assumé. Contraste conservé au-dessus de 4.5:1, il se lit encore. */
.slot input:disabled + label { border-style: dashed; background: var(--cream); color: var(--muted); cursor: not-allowed; }
.slot-note { margin-left: 8px; font-size: 13px; font-weight: 500; text-transform: lowercase; }
/* Le code se dicte à voix haute au comptoir : il est gros, espacé, et se sélectionne d'un geste. */
.pickup-code { margin: 4px 0 16px; font-size: clamp(36px, 12vw, 56px); font-weight: 700; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; color: var(--brand-dark); user-select: all; }

/* Le feu du service, sur le site du restaurant (page de table, Click & Collect). Mêmes états et mêmes mots que la
   borne et la tablette : un client qui scanne puis passe au comptoir ne doit pas lire deux versions du même service.
   La pastille est décorative, le mot porte l'état : la couleur ne dit jamais rien toute seule. */
.tempo { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.tempo-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: middle; }
.tempo-busy { background: #fbf0dd; }
.tempo-busy .tempo-dot { background: #8a5a12; }
.tempo-held { background: #fbeae8; }
.tempo-held .tempo-dot { background: #a3231c; }

/* --- Carte cadeau (/carte-cadeau) --- */
/* Le montant se tape en euros entiers : un champ court et l'unité à côté, pour qu'on ne cherche pas où mettre le
   signe. Un champ pleine largeur laisserait croire qu'on peut y écrire des centimes, ce que le serveur refuse. */
.amount { display: flex; align-items: center; gap: 10px; }
.amount input { width: 140px; }
.amount .unit { font-size: 20px; font-weight: 700; }
/* Ce que vaut la carte, dit avant de payer : une liste à puces ordinaire, lisible d'un coup d'œil au téléphone. */
.terms { margin: 0; padding-left: 20px; }
.terms li { margin: 0 0 8px; }
.terms li:last-child { margin-bottom: 0; }

/* Les options d'un plat (cuisson, garniture, supplément) : un bloc par groupe, sous la description. Les entrées sont
   celles du navigateur, visibles : un bouton radio dit « un seul », une case dit « plusieurs », sans une ligne de script. */
/* Un groupe facultatif se replie sous « Personnaliser » : la carte reste courte, le choix reste à un geste. Un groupe
   obligatoire, lui, est toujours déplié — on ne cache pas ce que le serveur va réclamer. */
.dish-custom { margin: 10px 0 0; }
.dish-custom summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; cursor: pointer; }
.dish-custom[open] summary { margin-bottom: 4px; }
/* La table scannée : son nom en pastille, pour qu'un QR mal collé se voie avant la commande. */
.hero--table { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero--table h1 { display: inline-flex; align-items: center; min-height: 48px; margin: 0; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 24px; letter-spacing: 0; }
.hero--table .lead { flex: 1; min-width: 0; margin: 0; font-size: 18px; color: var(--muted); }
.hero--table .hero-note { flex-basis: 100%; margin: 0; color: var(--muted); }
/* Les deux appels : de grandes touches, l'icône au-dessus du mot. */
/* L'accueil d'une table : le compteur de couverts en pastille en haut à gauche, puis tout de suite la carte. */
.welcome { padding: 4px 0 0; }
.welcome .hero-note { margin: 10px 0 0; color: var(--muted); }
/* Le rideau d'arrivée, au scan seulement. Sans cette media query il n'existe pas ; il se lève seul, sans script. */
.arrival { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .arrival { display: flex; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; padding: 24px; overflow: hidden; background: var(--cream); cursor: pointer; text-align: center; animation: arrival-lift 0.6s cubic-bezier(0.7, 0, 0.3, 1) var(--lift-at) forwards; }
  /* Le rideau reste le temps de lire le mot : son dernier mot paraît vers 0,55 s + 0,1 s par mot, puis on compte
     ≈ 0,35 s de lecture par mot. Un tap le lève à tout moment (`menu.js`). Sans mot, le logo seul. */
  .arrival { --lift-at: 4s; }
  .arrival:has(.arrival-word span:nth-child(5)) { --lift-at: 5s; }
  .arrival:has(.arrival-word span:nth-child(9)) { --lift-at: 6s; }
  .arrival:has(.arrival-word span:nth-child(13)) { --lift-at: 7s; }
  .arrival--short { --lift-at: 2.5s; }
  .arrival-stage { position: relative; max-width: min(30rem, 100%); }
  .arrival-logo { display: block; width: auto; height: auto; max-width: min(280px, 72vw); max-height: 120px; margin: 0 auto; object-fit: contain; animation: arrival-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  .arrival-name { margin: 0; font-size: clamp(30px, 9vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; animation: arrival-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  .arrival-word { margin: 22px 0 0; color: var(--brand-dark); font: italic 500 clamp(23px, 6.6vw, 32px)/1.3 Georgia, "Times New Roman", serif; }
  .arrival-word span { display: inline-block; animation: arrival-rise 0.5s ease-out var(--at, 1.9s) both; }
  .arrival-burst { position: absolute; inset: 0; pointer-events: none; }
  .arrival-burst::before, .arrival-burst::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; border-radius: 50%; background: rgba(200, 85, 61, 0.14); animation: arrival-ring 1s ease-out 0.05s both; }
  .arrival-burst::after { background: rgba(224, 168, 58, 0.18); animation-delay: 0.2s; }
  .arrival-burst i { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5px 0 0 -5px; border-radius: 3px; background: var(--c, var(--brand)); animation: arrival-fly 1.2s cubic-bezier(0.12, 0.7, 0.3, 1) 0.1s both; }
  .arrival-burst i:nth-child(1) { --x: 0vmin; --y: -46vmin; --r: 200deg; }
  .arrival-burst i:nth-child(2) { --x: 20vmin; --y: -42vmin; --r: -160deg; --c: #e0a83a; }
  .arrival-burst i:nth-child(3) { --x: 36vmin; --y: -30vmin; --r: 240deg; --c: var(--ink); }
  .arrival-burst i:nth-child(4) { --x: 45vmin; --y: -12vmin; --r: -120deg; }
  .arrival-burst i:nth-child(5) { --x: 44vmin; --y: 12vmin; --r: 180deg; --c: #e0a83a; }
  .arrival-burst i:nth-child(6) { --x: 34vmin; --y: 32vmin; --r: -220deg; --c: var(--brand-dark); }
  .arrival-burst i:nth-child(7) { --x: 18vmin; --y: 44vmin; --r: 150deg; }
  .arrival-burst i:nth-child(8) { --x: 2vmin; --y: 48vmin; --r: -200deg; --c: var(--ink); }
  .arrival-burst i:nth-child(9) { --x: -20vmin; --y: 42vmin; --r: 260deg; --c: #e0a83a; }
  .arrival-burst i:nth-child(10) { --x: -35vmin; --y: 30vmin; --r: -140deg; }
  .arrival-burst i:nth-child(11) { --x: -45vmin; --y: 10vmin; --r: 170deg; --c: var(--brand-dark); }
  .arrival-burst i:nth-child(12) { --x: -44vmin; --y: -14vmin; --r: -250deg; --c: #e0a83a; }
  .arrival-burst i:nth-child(13) { --x: -33vmin; --y: -32vmin; --r: 210deg; }
  .arrival-burst i:nth-child(14) { --x: -17vmin; --y: -44vmin; --r: -180deg; --c: var(--ink); }
  .arrival-burst i:nth-child(15) { --x: 12vmin; --y: -24vmin; --r: 300deg; --c: #e0a83a; }
  .arrival-burst i:nth-child(16) { --x: -12vmin; --y: 24vmin; --r: -300deg; }
  .arrival-word span:nth-child(1) { --at: 0.55s; }
  .arrival-word span:nth-child(2) { --at: 0.65s; }
  .arrival-word span:nth-child(3) { --at: 0.75s; }
  .arrival-word span:nth-child(4) { --at: 0.85s; }
  .arrival-word span:nth-child(5) { --at: 0.95s; }
  .arrival-word span:nth-child(6) { --at: 1.05s; }
  .arrival-word span:nth-child(7) { --at: 1.15s; }
  .arrival-word span:nth-child(8) { --at: 1.25s; }
  .arrival-word span:nth-child(9) { --at: 1.35s; }
  .arrival-word span:nth-child(10) { --at: 1.45s; }
  .arrival-word span:nth-child(11) { --at: 1.55s; }
  .arrival-word span:nth-child(12) { --at: 1.65s; }
  .arrival-word span:nth-child(13) { --at: 1.75s; }
  .arrival-word span:nth-child(14) { --at: 1.85s; }
}
@keyframes arrival-lift { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes arrival-pop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes arrival-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes arrival-ring { from { opacity: 1; transform: scale(0); } to { opacity: 0; transform: scale(1); } }
@keyframes arrival-fly {
  from { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.4); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
.table-progress:empty { display: none; }
.progress-finish { margin-top: 12px; width: 100%; }
.table-progress { margin: 16px 0 0; }
.table-progress h2 { margin: 0 0 8px; font-size: 18px; }
.progress-lines { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.progress-lines li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
/* La commande entière en quatre étapes : un point par étape, un segment plein jusqu'à l'étape en cours. Quatre colonnes
   égales à 390 px ; un libellé long passe à la ligne sous son point, jamais hors de sa colonne. */
.progress-order { margin: 0 0 14px; padding: 14px 12px 12px; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.progress-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.progress-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; font-size: 13px; line-height: 1.3; color: var(--muted); overflow-wrap: normal; hyphens: auto; }
.progress-steps li + li::before { content: ""; position: absolute; top: 7px; right: 50%; width: 100%; height: 4px; border-radius: 2px; background: var(--line); }
.progress-steps li.is-done::before, .progress-steps li.is-current::before { background: var(--brand-dark); }
.progress-dot { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); }
.is-done .progress-dot, .is-current .progress-dot { border-color: var(--brand-dark); background: var(--brand-dark); }
.is-done .progress-dot::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.is-current .progress-dot { box-shadow: 0 0 0 4px rgba(168, 67, 46, 0.2); }
.progress-steps li[aria-current="step"] { color: var(--ink); font-weight: 700; }
.progress-count { margin: 10px 0 0; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .is-current .progress-dot { animation: progress-pulse 1.8s ease-in-out infinite; }
  @keyframes progress-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(168, 67, 46, 0.28); }
    50% { box-shadow: 0 0 0 9px rgba(168, 67, 46, 0); }
  }
}
/* L'état de chaque plat, en pastille sous la barre. */
.progress-state { flex: none; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream); color: var(--muted); font-size: 14px; }
.progress-state--preparing { color: var(--ink); }
.progress-state--ready { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; font-weight: 600; }
/* « Vous êtes combien ? » : une pastille, deux silhouettes puis − 2 +, chaque touche un envoi. Tant que personne n'a
   touché, le chiffre est en gris : 2 n'est qu'un point de départ (règle 10). */
.welcome-covers { display: inline-flex; align-items: center; margin: 0; padding: 0 2px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.welcome-covers--set { border-color: var(--ink); }
.covers-icon { flex: none; margin-right: 2px; }
.covers-stepper { display: inline-flex; align-items: center; margin: 0; }
.covers-step, .covers-count { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.covers-step { width: 44px; font-size: 24px; line-height: 1; }
.covers-step:disabled { opacity: 0.4; cursor: default; }
.covers-count { min-width: 30px; color: var(--muted); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.covers-count.is-set { color: var(--ink); }
@media (hover: hover) {
  .covers-step:not(:disabled):hover, .covers-count:hover { background: var(--cream); }
}

/* Le Wi-Fi et le jeu : deux cartes courtes, une icône et l'essentiel. */
.quick { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.quick > svg { flex: none; width: 28px; height: 28px; color: var(--brand-dark); }
.quick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.quick h2 { margin: 0 0 4px; font-size: 17px; }
.quick--game strong { font-size: 17px; }
.quick > .game-wheel { width: 40px; height: 40px; }
@media (prefers-reduced-motion: no-preference) {
  .game-wheel { animation: game-wheel-turn 6s linear infinite; }
}
@keyframes game-wheel-turn { to { transform: rotate(360deg); } }
.quick--game .quick-body > span { color: var(--muted); font-size: 15px; }
@media (hover: hover) {
  .quick--game:hover { border-color: var(--ink); }
}
.wifi { margin: 0; display: grid; gap: 6px; }
.wifi div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.wifi dt { min-width: 92px; color: var(--muted); font-size: 14px; }
.wifi dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.wifi code { padding: 2px 8px; border-radius: 8px; background: var(--cream); font: 600 16px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; user-select: all; }
.wifi-ask { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.wifi-form { display: flex; flex-direction: column; gap: 8px; }
.wifi-form label { font-weight: 600; }
.wifi-form label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; min-height: 44px; }
.wifi-form label.check input { width: 22px; height: 22px; min-height: 22px; flex: none; margin: 2px 0 0; padding: 0; }
.wifi-form .btn { align-self: flex-start; }
.chip-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }

/* La carte en tuiles, dès l'accueil : une photo d'un plat de la rubrique, son nom par-dessus. */
.tiles-block { margin: 28px 0 0; }
.tiles-block h2 { margin: 0 0 12px; font-size: 22px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; align-items: flex-end; min-height: 88px; height: 100%; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.tile--photo { aspect-ratio: 4 / 3; border-color: transparent; color: #fff; }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72)); }
.tile span { position: relative; z-index: 1; }
.tile--photo span { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
@media (hover: hover) {
  .tile:not(.tile--photo):hover { border-color: var(--ink); }
}
.dish-options { margin: 12px 0 0; }
.dish-options legend { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.dish-options legend .hint { margin-left: 6px; color: var(--muted); font-size: 14px; font-weight: 400; }
.option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; cursor: pointer; }
.option input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--brand); }
.option input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.option-name { flex: 1; }
.option-note { color: var(--muted); font-size: 14px; white-space: nowrap; }
.option--off { cursor: not-allowed; }
.option--off .option-name { color: var(--muted); text-decoration: line-through; }
.recap-options { display: block; color: var(--muted); font-size: 14px; font-weight: 400; }
/* « Vous êtes combien ? » : huit touches en rangée, 44 px, la cochée en encre ; le bouton radio reste accessible, caché au doigt. */
.covers h2 { margin: 0 0 8px; font-size: 18px; }
.covers-row { display: flex; flex-wrap: wrap; gap: 8px; }
.option--chip { position: relative; min-width: 48px; min-height: 44px; padding: 0 14px; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-weight: 600; }
.option--chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option--chip .option-name { flex: none; }
.option--chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.option--chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Le reçu numérique (/recu/{jeton}) : un tableau à deux colonnes, montants alignés à droite. */
.recu { width: 100%; border-collapse: collapse; margin: 16px 0; }
.recu caption { text-align: left; color: var(--muted); font-size: 14px; padding-bottom: 6px; }
.recu th { text-align: left; font-weight: 400; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.recu td { text-align: right; white-space: nowrap; padding: 8px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* Ce qui est traduit par un logiciel se dit : un bandeau sobre au-dessus de la carte. */
.notice { margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper); }
.suggest { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.suggest h3 { margin: 0 0 4px; font-size: 18px; }
.suggest-list li { align-items: center; flex-wrap: wrap; }
.suggest-list .dish-name { flex: 1 1 auto; }
.suggest-list .dish-price { order: 0; margin: 0; }
.suggest-list .btn { min-height: var(--tap); padding: 0 18px; font-size: 16px; }

/* Liste déroulante : la même sur iOS, Android et bureau. Sans `appearance: none`, Safari dessine son bouton gris
   dégradé, étranger à la page ; le chevron est une image pour survivre au raccourci `background` des contextes, et
   la règle vient en dernier pour l'emporter à spécificité égale. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  /* `text-overflow` ne coupe rien sans `overflow` : sous WebKit, une option plus large que la liste pousse
     alors la **page** entière — 432 px pour 390 sur /direction/materiel, le 01/11/2026, et la faute se lisait
     sur le parent, jamais sur la liste. Avec `overflow: hidden`, le texte reste dans la liste, partout. */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* `/jeu` : la roue est un dessin, le tirage a lieu sur le serveur. Les parts alternent trois teintes ; le numéro
   reste lisible sur chacune (blanc sur le rouge profond, encre sur le crème). L'animation tourne quatre tours et
   s'arrête là où la rotation fixe du groupe intérieur a déjà placé la part gagnée : sans mouvement, la roue est
   simplement posée sur le lot. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.prize-wheel-block { text-align: center; }
.prize-wheel { display: block; margin: 8px auto 16px; max-width: 100%; height: auto; }
.prize-wheel-rim { fill: var(--ink); }
.prize-wheel-hub { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.prize-wheel-pointer { fill: var(--ink); }
.slice { stroke: var(--paper); stroke-width: 1.5; }
.slice-0 { fill: var(--brand-dark); }
.slice-1 { fill: var(--cream); }
.slice-2 { fill: #f1d9c9; }
.slice-number { font: 700 18px/1 system-ui, sans-serif; }
.slice-number-0 { fill: #ffffff; }
.slice-number-1, .slice-number-2 { fill: var(--ink); }
.prize-wheel-spin { transform-box: fill-box; transform-origin: 50% 50%; }
.prize-wheel-legend { text-align: left; margin: 0 auto; max-width: 28rem; padding-left: 1.5em; }
.prize-wheel-legend li { padding: 4px 0; }
@media (prefers-reduced-motion: no-preference) {
  .prize-wheel-spun .prize-wheel-spin { animation: prize-wheel-spin 4s cubic-bezier(0.15, 0.85, 0.25, 1) both; }
}
@keyframes prize-wheel-spin { from { transform: rotate(-1440deg); } to { transform: rotate(0deg); } }

/* Recrutement : la liste des annonces et les trois faits d'un poste (contrat, salaire, début). */
.job-list { list-style: none; margin: 0; padding: 0; }
.job-card h2 { margin: 0 0 8px; }
.job-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); }
.hero .job-facts { margin-top: 8px; }

/* « Retour à la table » : le client sorti de sa carte la retrouve d'un geste, à côté du logo. Cible de 44 px. */
.site-back { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-right: auto; padding: 0 14px 0 8px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-back svg { flex: none; width: 20px; height: 20px; }
/* Le logo ne prend plus toute la place restante : le retour se colle à lui, les outils restent à droite. */
.site-header .inner:has(.site-back) .site-name { flex: 0 1 auto; }
.site-back:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* Au plus étroit, la flèche seule : le texte reste au lecteur d'écran. */
@media (max-width: 359px) { .site-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-back { padding: 0 12px; } }
/* L'accueil d'une table : le compteur de couverts à gauche, le logo à droite, sur une ligne. */
.welcome-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.welcome-logo { display: block; flex: none; margin-left: auto; width: auto; height: auto; max-height: 52px; max-width: 40%; object-fit: contain; }
/* La page d'une table — en-tête : la pastille du numéro à gauche, le drapeau de la langue à droite. */
.site-table-badge { flex: none; display: inline-flex; align-items: center; min-height: 30px; margin-right: auto; padding: 0 12px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 14px; font-weight: 700; white-space: nowrap; }
/* Le téléphone reconnu : l'icône et le prénom, dans la même pastille que la cloche. */
.site-tool--guest { width: auto; padding: 0 12px 0 10px; gap: 6px; }
.site-tool-name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.guest-points { margin: 4px 0 12px; font-size: 26px; font-weight: 800; }
.sheet-action--quiet { font-weight: 600; color: var(--muted); }
.sheet-action--quiet svg { color: var(--muted); }
.recap-total--reward { color: var(--brand-dark); }
.site-tool--flag .flag { width: 26px; height: auto; aspect-ratio: 3 / 2; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
/* Les langues dans leur panneau natif : drapeau et nom, la langue courante marquée. */
.lang-link { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0 0 8px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 18px; font-weight: 700; text-decoration: none; }
.lang-link .flag { flex: none; width: 28px; height: auto; aspect-ratio: 3 / 2; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.lang-link[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--cream); }
@media (hover: hover) { .lang-link:hover { border-color: var(--ink); } }
/* Les trois pastilles d'accueil, en colonne : une rubrique chacune, droit à la bonne section. */
.tiles--groups { grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .tiles--groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile--group { min-height: 100px; font-size: 20px; }
.tile--group.tile--photo { aspect-ratio: auto; min-height: 120px; }
/* L'en-tête d'ancre d'une rubrique groupée ; les catégories passent en sous-titres (h3). */
.menu-group { margin: 34px 0 4px; font-size: 26px; letter-spacing: -0.01em; scroll-margin-top: 76px; }
@media (min-width: 768px) { .menu-group { scroll-margin-top: calc(var(--header-h) + 76px); } }

/* La carte d'une table, page par page comme l'imprimé (worker/site.ts, `menuSections` avec `groups`). La barre
   collante porte les rubriques, puis les catégories de la page ouverte, qui défilent de côté et suivent la lecture.
   Sans script, toutes les pages restent l'une sous l'autre. */
.cats-bar--pills { display: block; padding: 8px 0; }
.pills { position: relative; display: flex; gap: 8px; margin: 0; padding: 0 16px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pills > li { flex: none; }
.pills--pages + .pills--cats { margin-top: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pill[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pill--cat { min-height: 40px; padding: 0 14px; font-size: 15px; font-weight: 600; }
.pill--cat[aria-current="true"] { border-color: var(--brand-dark); background: var(--paper); color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand-dark); }
@media (hover: hover) {
  .pill:hover { border-color: var(--ink); }
}
.cats-bar--pills ~ .menu-cat, .cats-bar--pills ~ .menu-group { scroll-margin-top: calc(var(--header-h) + 124px); }
[data-page].is-off { display: none; }
.menu-next { margin: 20px 0 0; text-align: center; }

/* Les plats d'une table : la photo en grand, toute la largeur — au téléphone, c'est elle qui fait choisir. Dessous, le
   nom et le prix à gauche, le « + » rond à droite ; choisi, il devient − 1 +. La description tient sur une ligne,
   finie par « … », et se déplie juste en dessous. Un plat sans photo garde la même ligne, sans image. */
.dishes--rows { gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 900px) { .dishes--rows { grid-template-columns: minmax(0, 1fr); } main.inner:has(.dishes--rows) { max-width: 760px; } }
.dishes--rows > .dish { gap: 12px; padding: 16px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.dishes--rows > .dish + .dish { border-top: 1px solid var(--line); }
.dishes--rows > .dish:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.dishes--rows > .dish:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.dishes--rows > .dish:first-child .dish-photo-btn { overflow: hidden; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.dishes--rows .dish-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.dishes--rows .dish-body > * { grid-column: 1 / -1; }
.dishes--rows .dish-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; grid-column: 1; grid-row: 1; min-width: 0; }
.dishes--rows .dish-name { font-size: 18px; }
.dishes--rows .dish-price { margin: 0; font-size: 17px; }
.dishes--rows .dish-qty { grid-column: 2; grid-row: 1; justify-content: flex-end; margin: 0; }
.dishes--rows .dish-qty.is-stepper { gap: 4px; }
.dishes--rows .dish-qty.is-stepper input { width: 34px; }
.dishes--rows .dish-qty .qty-btn { width: 44px; height: 44px; }
.dishes--rows .dish-qty.is-empty .qty-btn--add { width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 26px; }
.dishes--rows > .dish.is-picked { border-color: var(--line); box-shadow: inset 4px 0 0 var(--brand-dark); }
.dish-more { order: 2; margin: 6px 0 0; }
.dish-more summary { display: block; list-style: none; cursor: pointer; border-radius: 4px; }
.dish-more summary::-webkit-details-marker { display: none; }
.dish-more .dish-desc { display: block; margin: 0; font-size: 15px; }
.dish-more:not([open]) .dish-desc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.menu-cat h3 { margin: 0 0 12px; font-size: 20px; letter-spacing: -0.01em; }