/* App de commande — commun au client (téléphone) et au restaurant (tablette). Valeurs : tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--noir);
  color: var(--texte);
  font: var(--fw-texte) var(--fs-texte) / var(--lh-texte) var(--police-texte);
}
h1, h2, h3, h4 { margin: 0; color: var(--creme); font-family: var(--police-titre); font-weight: 500; }
p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Boutons --- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 3rem; padding: 0.7em 1.3em;
  border: 1px solid var(--or); border-radius: var(--rayon-doux);
  background: var(--or); color: var(--noir);
  font-weight: 700; font-size: 1.05rem; text-decoration: none; text-align: center;
  transition: background var(--duree-rapide) var(--courbe-braise), transform var(--duree-rapide) var(--courbe-braise);
}
.bouton:hover { background: var(--or-clair); }
.bouton:active { background: var(--or-sombre); transform: translateY(1px); }
.bouton:disabled { background: var(--cendre); border-color: var(--cendre); color: var(--fumee); cursor: not-allowed; }
.bouton--trait { background: transparent; color: var(--or); border-color: var(--or-sombre); }
.bouton--trait:hover { background: rgba(231, 181, 69, 0.08); }
.bouton--trait:active { background: rgba(231, 181, 69, 0.16); }
.bouton--large { width: 100%; }
.bouton--petit { min-height: 2.5rem; padding: 0.4em 0.9em; font-size: 0.95rem; }
.lien {
  padding: 0.35em 0; border: 0; background: none; color: var(--or);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.lien:hover { color: var(--or-clair); }

.filet { height: 1px; border: 0; margin: 0; background: var(--filet-or); }
.prix { color: var(--or); font-weight: var(--fw-prix); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mention { color: var(--fumee); font-size: var(--fs-mention); line-height: var(--lh-mention); }

/* Pas à pas : − 2 + */
.pas { display: inline-flex; align-items: center; border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux); }
.pas button {
  width: 2.75rem; height: 2.75rem; border: 0; background: none; color: var(--or);
  font-size: 1.4rem; line-height: 1;
}
.pas button:hover { background: rgba(231, 181, 69, 0.1); }
.pas output { min-width: 2rem; text-align: center; color: var(--creme); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Choix en boutons radio : cuisson, sauce, sorte de planche */
.choix { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.choix legend { width: 100%; margin-bottom: var(--e-2); padding: 0; color: var(--fumee); font-size: var(--fs-mention); }
.choix label { position: relative; }
.choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix span {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.35em 0.9em;
  border: 1px solid var(--cendre); border-radius: var(--rayon-doux);
  color: var(--texte); background: var(--charbon);
}
.choix input:checked + span { background: var(--or); border-color: var(--or); color: var(--noir); font-weight: 700; }
.choix input:focus-visible + span { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.choix--manquant span { border-style: dashed; border-color: var(--or-clair); }
.choix--manquant legend { color: var(--or-clair); }

/* Bandeau d'alerte (manque un plat, table fermée, erreur) */
.bandeau {
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--or-sombre); border-left: 3px solid var(--or);
  border-radius: var(--rayon-doux);
  background: var(--suie);
}
.bandeau strong { display: block; color: var(--creme); font-family: var(--police-titre); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.04em; }
.bandeau p + p, .bandeau strong + p { margin-top: var(--e-1); }
.bandeau__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }

/* Message bref en bas d'écran */
.toast {
  position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); z-index: 60;
  transform: translateX(-50%); max-width: min(90vw, 28rem);
  padding: var(--e-3) var(--e-5); border: 1px solid var(--cendre); border-radius: var(--rayon-doux);
  background: var(--suie); color: var(--creme); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* ============ CLIENT ============ */
.client { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
.client .colonne { width: min(100%, 40rem); margin: 0 auto; padding: 0 var(--e-4); }

.entete-client { padding: var(--e-4) 0 var(--e-3); }
.entete-client .colonne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.entete-client img { height: 3.2rem; width: auto; }
.entete-client__table { text-align: right; }
.entete-client__table h1 { font-size: 1.35rem; letter-spacing: 0.06em; }
.entete-client__table p { color: var(--fumee); font-size: var(--fs-mention); }
.entete-client__table .lien { font-size: var(--fs-mention); }
.badge-personnel { display: inline-block; margin-bottom: var(--e-1); padding: 0.1em 0.6em; border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux); color: var(--or); font-size: 0.8rem; }

.nav-rubriques {
  position: sticky; top: 0; z-index: 20;
  background: var(--noir); box-shadow: 0 1px 0 var(--cendre);
}
.nav-rubriques__interieur { display: flex; align-items: center; gap: var(--e-3); width: min(100%, 40rem); margin-inline: auto; padding-right: var(--e-4); }
.nav-rubriques ul { flex: 1; min-width: 0; display: flex; gap: var(--e-5); margin: 0; padding: 0 var(--e-4); list-style: none; overflow-x: auto; scrollbar-width: none; }
.nav-rubriques ul::-webkit-scrollbar { display: none; }
.bascule { flex: none; gap: var(--e-2); }
.compteur--bouton { background: var(--noir); color: var(--or); }
/* En mode carte, l'accueil porte le logo : l'en-tête de la commande s'efface. */
.mode-carte .entete-client { display: none; }
.nav-rubriques a {
  display: block; padding: 0.85rem 0; white-space: nowrap;
  color: var(--texte); text-decoration: none; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.nav-rubriques a[aria-current="true"] { color: var(--creme); border-bottom-color: var(--or); }

.etat-table { margin: var(--e-5) auto 0; }

.rubrique { padding-top: var(--e-7); scroll-margin-top: 3rem; }
.rubrique > h2 { font-size: var(--fs-sous-titre); letter-spacing: var(--ls-sous-titre); text-transform: uppercase; }
.rubrique > .filet { margin: var(--e-3) 0 var(--e-3); width: min(14rem, 60%); }
.rubrique > .intro { color: var(--fumee); margin-bottom: var(--e-3); }
.groupe { margin: var(--e-5) 0 var(--e-1); color: var(--or); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }

.produit { padding: var(--e-4) 0; border-bottom: 1px solid var(--cendre); }
.produit__ligne { display: grid; grid-template-columns: 1fr auto; gap: var(--e-1) var(--e-4); align-items: center; }
.produit__nom { color: var(--creme); font-family: var(--police-titre); font-size: 1.12rem; line-height: 1.25; }
.produit__detail { color: var(--fumee); font-size: var(--fs-mention); }
.produit__prix { grid-column: 2; grid-row: 1; justify-self: end; }
.produit__action { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.produit--epuise .produit__nom, .produit--epuise .produit__prix { color: var(--fumee); text-decoration: line-through; }
.produit__epuise { color: var(--fumee); font-size: var(--fs-mention); }
.unites { display: grid; gap: var(--e-3); margin-top: var(--e-3); }
.unite { padding: var(--e-4); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); }
.unite__titre { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-3); color: var(--creme); font-weight: 700; }
.unite .choix + .choix { margin-top: var(--e-4); }

/* --- Mode carte : l'accueil, puis un menu imprimé --- */
.bienvenue {
  display: grid; place-items: center; min-height: min(34rem, 88svh);
  margin: 0 calc(-1 * var(--e-4)); padding: var(--e-8) var(--e-5) var(--e-7);
  text-align: center;
}
.bienvenue__contenu { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--e-4); max-width: 30rem; }
.bienvenue__logo { width: min(19rem, 74vw); height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.65)); }
.bienvenue h1 {
  display: grid; gap: var(--e-2);
  font-family: var(--police-titre); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.5rem, 1.9rem + 3.6vw, 3.5rem); line-height: 1; letter-spacing: 0.07em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
.bienvenue__sous-titre { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.3rem); font-weight: 500; letter-spacing: 0.14em; }
.bienvenue .filet { width: min(14rem, 60%); }
.bienvenue__texte { font-size: var(--fs-chapo); line-height: var(--lh-chapo); color: var(--creme); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }
.bienvenue__signature { font-style: italic; font-size: 1.15rem; color: var(--texte); }

.mode-carte .rubrique { padding-top: var(--e-8); text-align: center; }
.mode-carte .bienvenue + .rubrique { padding-top: var(--e-5); }
.mode-carte .rubrique > h2 { font-weight: 600; font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.15rem); letter-spacing: 0.1em; }
.mode-carte .rubrique > .filet { margin: var(--e-3) auto var(--e-4); }
.mode-carte .rubrique > .intro { font-style: italic; }
.mode-carte .groupe { display: flex; align-items: center; gap: var(--e-4); margin: var(--e-6) 0 var(--e-2); font-size: 0.95rem; }
.mode-carte .groupe::before, .mode-carte .groupe::after { content: ''; flex: 1; height: 1px; background: var(--cendre); }
.plat { padding: var(--e-3) 0; text-align: left; }
.plat__ligne { display: flex; align-items: baseline; gap: var(--e-2); }
.plat__nom { color: var(--creme); font-family: var(--police-titre); font-size: 1.1rem; line-height: 1.3; }
.plat__points { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--cendre); transform: translateY(-0.28em); }
.plat__detail { color: var(--fumee); font-size: var(--fs-mention); }
.plat__note { margin-top: 2px; font-style: italic; color: var(--texte); font-size: 0.98rem; line-height: 1.45; }
.plat--epuise .plat__nom { color: var(--fumee); text-decoration: line-through; }
.plat--epuise .prix { color: var(--fumee); }
.pied { margin-top: var(--e-4); color: var(--fumee); font-style: italic; text-align: center; }
.cadre-photo { position: relative; isolation: isolate; margin: var(--e-5) 6px var(--e-5) 0; }
.cadre-photo::after { content: ''; position: absolute; inset: 6px -6px -6px 6px; z-index: -1; border: 1px solid var(--cendre); }
.cadre-photo img { display: block; width: 100%; height: auto; max-height: 17rem; object-fit: cover; }

.deja { padding-top: var(--e-8); }
.deja h2 { font-size: var(--fs-sous-titre); letter-spacing: var(--ls-sous-titre); text-transform: uppercase; }
.deja ol { margin: var(--e-4) 0 0; padding: 0; list-style: none; }
.deja li { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-2) 0; border-bottom: 1px solid var(--cendre); }
.deja .statut { color: var(--fumee); font-size: var(--fs-mention); white-space: nowrap; }
.deja .statut--fait { color: var(--or); }
.deja h3 { margin-top: var(--e-5); color: var(--fumee); font-family: var(--police-texte); font-size: var(--fs-mention); font-weight: 400; }

.barre-panier {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--noir) 70%, rgba(10, 8, 7, 0));
}
.barre-panier .bouton { display: flex; width: min(100%, 38rem); margin: 0 auto; justify-content: space-between; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }

/* Feuilles plein écran : couverts, panier, confirmation */
.feuille {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  background: var(--noir);
  padding: var(--e-5) 0 calc(var(--e-7) + env(safe-area-inset-bottom));
}
.feuille .colonne { display: grid; gap: var(--e-5); }
.feuille h2 { font-size: var(--fs-sous-titre); letter-spacing: var(--ls-sous-titre); text-transform: uppercase; }
.feuille__haut { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); }

.accueil-couverts { text-align: center; padding-top: var(--e-6); }
.accueil-couverts img { width: min(16rem, 70vw); height: auto; margin: 0 auto; }
.accueil-couverts h2 { margin-top: var(--e-4); }
.grille-couverts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); }
.grille-couverts button {
  min-height: 3.6rem; border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux);
  background: var(--charbon); color: var(--creme); font-size: 1.4rem; font-weight: 700;
}
.grille-couverts button:hover, .grille-couverts button[aria-pressed="true"] { background: var(--or); color: var(--noir); }
.couverts-plus { display: flex; justify-content: center; align-items: center; gap: var(--e-4); }

.panier-liste { margin: 0; padding: 0; list-style: none; }
.panier-liste li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--e-1) var(--e-3); align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--cendre); }
.panier-liste .nom { color: var(--creme); }
.panier-liste .detail { grid-column: 1; color: var(--fumee); font-size: var(--fs-mention); }
.panier-liste .manquant { grid-column: 1; color: var(--or-clair); font-size: var(--fs-mention); }
.panier-liste .retirer { grid-column: 3; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: none; color: var(--fumee); font-size: 1.2rem; }
.champ label { display: block; margin-bottom: var(--e-2); color: var(--creme); }
.champ textarea {
  width: 100%; min-height: 5rem; padding: var(--e-3);
  border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); color: var(--creme); resize: vertical;
}
.envoye { text-align: center; padding-top: var(--e-8); }
.envoye .coche { width: 4.5rem; height: 4.5rem; margin: 0 auto var(--e-5); border: 2px solid var(--or); border-radius: 50%; display: grid; place-items: center; color: var(--or); font-size: 2.2rem; }

/* ============ RESTAURANT ============ */
.resto { --entete: 4rem; }
.resto-entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5);
  padding: var(--e-2) var(--e-5);
  background: var(--noir); box-shadow: 0 1px 0 var(--cendre);
}
.resto-entete img { width: 2.6rem; height: 2.6rem; }
.resto-jour { display: flex; align-items: center; gap: var(--e-2); }
.resto-jour h1 { font-size: 1.25rem; letter-spacing: 0.04em; min-width: 12ch; text-align: center; }
.resto-jour button { width: 2.6rem; height: 2.6rem; border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: none; color: var(--or); font-size: 1.2rem; }
.resto-etat { display: flex; align-items: center; gap: var(--e-2); color: var(--fumee); font-size: var(--fs-mention); }
.resto-etat::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cendre); }
.resto-etat[data-etat="direct"]::before { background: var(--or); }
.resto-etat[data-etat="coupe"]::before { background: var(--braise); box-shadow: 0 0 0 4px rgba(232, 100, 30, 0.25); }
.resto-etat[data-etat="coupe"] { color: var(--creme); }
.resto-outils { margin-left: auto; display: flex; gap: var(--e-3); align-items: center; }

.onglets { display: flex; gap: var(--e-2); padding: var(--e-3) var(--e-5) 0; overflow-x: auto; border-bottom: 1px solid var(--cendre); }
.onglets button {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: 3rem; padding: 0 var(--e-3);
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--rayon-doux) var(--rayon-doux) 0 0;
  background: none; color: var(--texte); font-family: var(--police-titre); font-size: 1rem; letter-spacing: 0.03em; white-space: nowrap;
}
.onglets button[aria-selected="true"] { border-color: var(--cendre); background: var(--charbon); color: var(--creme); margin-bottom: -1px; }
.compteur { min-width: 1.7rem; padding: 0 0.4em; border-radius: var(--rayon-doux); background: var(--or); color: var(--noir); font-family: var(--police-texte); font-weight: 700; font-size: 0.95rem; text-align: center; }
.compteur:empty { display: none; }

.resto-contenu { padding: var(--e-5); }
.vide { padding: var(--e-8) 0; text-align: center; color: var(--fumee); }

.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: var(--e-4); align-items: start; }
.ticket { border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); }
.ticket--nouveau { animation: arrivee 1.6s var(--courbe-braise); }
@keyframes arrivee { 0%, 40% { border-color: var(--or); box-shadow: 0 0 0 3px rgba(231, 181, 69, 0.35); } 100% { border-color: var(--cendre); box-shadow: none; } }
.ticket__haut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--cendre); }
.ticket__table { color: var(--creme); font-family: var(--police-titre); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.04em; }
.ticket__infos { text-align: right; color: var(--fumee); font-size: var(--fs-mention); line-height: 1.35; }
.ticket__infos .attente { color: var(--creme); font-weight: 700; }
.ticket__infos .attente--longue { color: var(--or-clair); }
.ticket__remarque { margin: var(--e-3) var(--e-4) 0; padding: var(--e-2) var(--e-3); border-left: 3px solid var(--or); background: var(--suie); color: var(--creme); }
.ticket__lignes { margin: 0; padding: var(--e-2) 0; list-style: none; }
.ticket__ligne {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-2) var(--e-3); align-items: center;
  padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) - 4px);
  border-left: 4px solid transparent; border-bottom: 1px solid var(--suie);
}
.ticket__ligne:last-child { border-bottom: 0; }
/* Case à cocher : un geste par ligne. Cochée, la ligne passe en vert olive (les rameaux du logo) : couleur de statut, propre à l'écran de production. */
.resto { --fait: #9BB565; --fait-fond: rgba(155, 181, 101, 0.16); }
.coche {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0;
  border: 2px solid var(--or-sombre); border-radius: var(--rayon-doux); background: var(--noir);
  color: var(--noir); font-size: 1.6rem; font-weight: 700; line-height: 1;
}
.coche:hover { border-color: var(--or-clair); }
.coche[aria-pressed="true"] { background: var(--fait); border-color: var(--fait); }
.coche--vide { border-color: var(--cendre); background: transparent; }
.ticket__ligne--fait { background: var(--fait-fond); border-left-color: var(--fait); }
.ticket__ligne--fait .ticket__nom { color: var(--fait); }
.ticket__ligne--fait .ticket__detail span { color: var(--fait); border-color: var(--fait); }
.ticket__etat { color: var(--fait); font-size: var(--fs-mention); font-weight: 700; }
.ticket__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-1); }
.ticket__bas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4) var(--e-4); border-top: 1px solid var(--suie); }
.ticket__bas .retirer-ligne { margin-left: auto; }
.ticket--termine .ticket__haut { border-bottom-color: var(--fait); }

.dialogue { width: min(92vw, 30rem); padding: var(--e-5); border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux); background: var(--charbon); color: var(--texte); }
.dialogue::backdrop { background: rgba(10, 8, 7, 0.8); }
.dialogue h2 { font-size: 1.3rem; letter-spacing: 0.04em; }
.dialogue .choix { margin-top: var(--e-4); }
.dialogue__boutons { display: flex; justify-content: flex-end; gap: var(--e-3); margin-top: var(--e-5); }
.ticket__nom { color: var(--creme); font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.ticket__qte { color: var(--or); margin-right: 0.3em; }
.ticket__detail { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); margin-top: var(--e-1); }
.ticket__detail span { padding: 0.05em 0.5em; border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux); color: var(--or-clair); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ticket__ligne--annule .ticket__nom { color: var(--fumee); text-decoration: line-through; }
.ticket__ligne--annule .ticket__detail span { color: var(--fumee); border-color: var(--cendre); }
.retirer-ligne { border: 0; background: none; color: var(--fumee); font-size: var(--fs-mention); text-decoration: underline; }
.terminees { margin-top: var(--e-7); }
.terminees summary { cursor: pointer; color: var(--fumee); padding: var(--e-3) 0; }
.terminees .tickets { margin-top: var(--e-3); opacity: 0.75; }

.grille-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--e-4); align-items: start; }
.carte-table { display: grid; align-content: start; gap: var(--e-3); padding: var(--e-4); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); }
.carte-table__actions .bouton { flex: 0 0 auto; }
.carte-table--ouverte { border-color: var(--or-sombre); }
.carte-table h2 { font-size: 1.35rem; letter-spacing: 0.04em; }
.carte-table .etat { color: var(--fumee); font-size: var(--fs-mention); }
.carte-table .manque { color: var(--or-clair); }
.carte-table__ligne { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }
.carte-table__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.lien-qr { display: inline-block; margin-bottom: var(--e-5); }

.resto-contenu > .mention { margin-bottom: var(--e-6); }
.dispo-rubrique { margin-bottom: var(--e-7); }
.dispo-rubrique h2 { font-size: var(--fs-sous-titre); letter-spacing: var(--ls-sous-titre); text-transform: uppercase; margin-bottom: var(--e-3); }
.dispo-produit { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); padding: var(--e-3) 0; border-bottom: 1px solid var(--cendre); }
.dispo-produit .nom { color: var(--creme); }
.interrupteur[aria-pressed="false"] { background: transparent; color: var(--fumee); border-color: var(--cendre); }

.connexion { display: grid; place-items: center; min-height: 100svh; padding: var(--e-5); }
.connexion form { display: grid; gap: var(--e-5); width: min(100%, 22rem); text-align: center; }
.connexion img { width: 6rem; height: 6rem; margin: 0 auto; }
.connexion input {
  width: 100%; padding: var(--e-3); text-align: center; letter-spacing: 0.5em; font-size: 1.8rem;
  border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux); background: var(--charbon); color: var(--creme);
}
.clavier { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }
.clavier button { min-height: 3.8rem; border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); color: var(--creme); font-size: 1.5rem; font-weight: 700; }
.clavier button:active { background: var(--or); color: var(--noir); }
.erreur { color: var(--or-clair); min-height: 1.5em; }

/* ============ QR CODES (impression) ============ */
.qr-page { padding: var(--e-5); }
.qr-page__outils { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; margin-bottom: var(--e-5); }
.qr-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--e-5); }
.qr-carte { display: grid; justify-items: center; gap: var(--e-3); padding: var(--e-5); border: 1px solid var(--or-sombre); background: var(--noir); text-align: center; break-inside: avoid; }
.qr-carte img { width: 9rem; height: auto; }
.qr-carte h2 { font-size: 1.6rem; letter-spacing: 0.08em; }
.qr-carte svg { width: 11rem; height: 11rem; background: #fff; padding: 0.6rem; }
.qr-carte p { color: var(--texte); font-size: 0.95rem; }
/* Par défaut, le seul QR commun, en grand ; la case « QR par table » ajoute les autres. */
body:not(.qr-avec-tables) .qr-carte--table { display: none; }
body:not(.qr-avec-tables) .qr-grille { grid-template-columns: minmax(0, 26rem); justify-content: center; }
body:not(.qr-avec-tables) .qr-carte--commun img { width: 14rem; }
body:not(.qr-avec-tables) .qr-carte--commun svg { width: 16rem; height: 16rem; }
@media print {
  @page { size: A4; margin: 10mm; }
  body:not(.qr-avec-tables) .qr-grille { grid-template-columns: 140mm; }
  body:not(.qr-avec-tables) .qr-carte--commun { height: auto; padding: 14mm; }
  body:not(.qr-avec-tables) .qr-carte--commun svg { width: 95mm; height: 95mm; }
  body { background: var(--noir); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qr-page__outils { display: none; }
  .qr-page { padding: 0; }
  .qr-grille { grid-template-columns: repeat(2, 1fr); gap: 8mm; }
  .qr-carte { height: 88mm; }
}

@media (prefers-reduced-motion: reduce) { .ticket--nouveau { animation: none; } }

/* ============ ÉDITEUR DE CARTE (restaurant) ============ */
.dispo-rubrique__haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.dispo-rubrique__haut h2 { margin: 0; }
.dispo-produit__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e-3); }
.etiquette { margin-left: var(--e-2); padding: 0 0.45em; border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux); color: var(--or); font-size: 0.78rem; vertical-align: middle; }
.retires { margin-top: var(--e-3); }
.retires summary { cursor: pointer; color: var(--fumee); padding: var(--e-2) 0; }
.dialogue .champ { margin-top: var(--e-4); }
.dialogue .champ input, .dialogue .champ textarea {
  width: 100%; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--noir); color: var(--creme);
}
.dialogue .champ .mention { margin-top: var(--e-1); }
.dialogue .cases { margin: var(--e-4) 0 0; padding: 0; border: 0; display: grid; gap: var(--e-2); }
.dialogue .cases legend { margin-bottom: var(--e-2); color: var(--creme); }
.dialogue .cases label, .dialogue .case { color: var(--texte); font-size: 0.95rem; }
.dialogue .case { display: block; margin-top: var(--e-4); }
.dialogue { max-height: 90svh; overflow-y: auto; }

/* ============ NOTE DE LA TABLE ============ */
.note-page { padding: var(--e-5); }
.note-outils { display: flex; gap: var(--e-4); align-items: center; justify-content: space-between; width: min(100%, 36rem); margin: 0 auto var(--e-5); }
.note { width: min(100%, 36rem); margin: 0 auto; padding: var(--e-6) var(--e-5); border: 1px solid var(--cendre); background: var(--charbon); }
.note__entete { text-align: center; }
.note__entete img { width: 4.5rem; height: 4.5rem; }
.note__restaurant { margin-top: var(--e-2); color: var(--creme); font-family: var(--police-titre); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.06em; }
.note__coordonnees { color: var(--fumee); font-size: var(--fs-mention); }
.note h1 { margin-top: var(--e-5); text-align: center; font-size: 1.5rem; letter-spacing: 0.06em; }
.note__infos { text-align: center; color: var(--fumee); font-size: var(--fs-mention); }
.note__table { width: 100%; margin-top: var(--e-5); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.note__table th, .note__table td { padding: var(--e-2) var(--e-1); border-bottom: 1px solid var(--cendre); text-align: left; vertical-align: top; }
.note__table thead th { color: var(--fumee); font-weight: 500; font-size: var(--fs-mention); }
.note__table .qte { width: 3rem; }
.note__table .montant { text-align: right; white-space: nowrap; }
.note__table tbody td { color: var(--creme); }
.note__detail { display: block; color: var(--fumee); font-size: var(--fs-mention); }
.note__table tfoot th, .note__table tfoot td { border-bottom: 0; border-top: 2px solid var(--or-sombre); padding-top: var(--e-3); color: var(--creme); font-size: 1.2rem; font-weight: 700; }
.note__merci { margin-top: var(--e-6); text-align: center; font-style: italic; color: var(--texte); }
@media print {
  .note-page { padding: 0; background: #fff; }
  .note-outils { display: none; }
  .note { border: 0; background: #fff; color: #000; width: 100%; padding: 0; }
  .note__restaurant, .note h1, .note__table tbody td, .note__table tfoot th, .note__table tfoot td, .note__merci { color: #000; }
  .note__coordonnees, .note__infos, .note__detail, .note__table thead th { color: #444; }
  .note__table th, .note__table td { border-color: #bbb; }
  .note__table tfoot th, .note__table tfoot td { border-top-color: #000; }
}