/* Carte, commande et écran du personnel — 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(--accent); border-radius: var(--rayon-doux);
  background: var(--accent); color: var(--accent-texte);
  font-weight: 700; font-size: 1.05rem; text-decoration: none; text-align: center;
  transition: background var(--duree-rapide) var(--courbe-douce), transform var(--duree-rapide) var(--courbe-douce);
}
.bouton:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
.bouton:active { background: var(--accent-fort); transform: translateY(1px); }
.bouton:disabled { background: var(--cendre); border-color: var(--cendre); color: var(--fumee); cursor: not-allowed; }
.bouton--trait { background: transparent; color: var(--accent-lisible); border-color: var(--accent-trait); }
.bouton--trait:hover { border-color: var(--accent); }
.bouton--trait:hover { background: var(--accent-doux); }
.bouton--trait:active { background: var(--accent-trait); }
.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); }
.mention--alerte { color: var(--braise); }

/* 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: var(--accent-doux); }
.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(--accent); border-color: var(--accent); color: var(--accent-texte); 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(20, 20, 18, 0.16);
}

/* ============ 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; max-width: 12rem; object-fit: contain; }
.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(--accent-texte); color: var(--accent); }
/* 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); }
/* Allergènes : sur la carte et en commande, avant l'ajout au panier. */
.allergenes { color: var(--fumee); font-size: var(--fs-mention); line-height: var(--lh-mention); }
.allergenes strong { color: var(--texte); font-weight: 600; }
.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é --- */
/* Accueil : sur la photo du restaurant sous un voile sombre, ou sur sa couleur quand il n'a pas mis de photo. */
.bienvenue {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; min-height: min(26rem, 70svh);
  margin: 0 calc(-1 * var(--e-4)); padding: var(--e-8) var(--e-5) var(--e-7);
  text-align: center; background: var(--charbon); color: var(--creme);
  border-top: 6px solid var(--accent); box-shadow: inset 0 -1px 0 var(--cendre);
}
.bienvenue h1, .bienvenue__texte, .bienvenue__signature, .bienvenue__nom { color: inherit; }
.bienvenue .filet { width: min(14rem, 60%); }
.bienvenue--photo { min-height: min(34rem, 88svh); background: #151513; color: #FFFFFF; border-top: 0; box-shadow: none; }
.bienvenue--photo .filet { background: rgba(255, 255, 255, .55); }
.bienvenue__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bienvenue__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10, 10, 9, .55) 0%, rgba(10, 10, 9, .25) 35%, rgba(10, 10, 9, .45) 70%, rgba(10, 10, 9, .85) 100%); }
.bienvenue--photo h1, .bienvenue--photo .bienvenue__texte { text-shadow: 0 2px 16px rgba(0, 0, 0, .65); }
.bienvenue__contenu { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--e-4); max-width: 30rem; }
.bienvenue__logo { max-width: min(16rem, 66vw); max-height: 9rem; width: auto; height: auto; object-fit: contain; }
/* Sur une photo, le logo est posé sur un cartouche blanc : un logo sombre ou aux couleurs de la marque reste lisible. */
.bienvenue--photo .bienvenue__logo { padding: var(--e-3) var(--e-4); border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.bienvenue__nom { font-family: var(--police-titre); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); letter-spacing: .01em; }
.bienvenue h1 {
  display: grid; gap: var(--e-2);
  font-family: var(--police-titre); font-weight: 800;
  font-size: clamp(2.2rem, 1.7rem + 3vw, 3.2rem); line-height: 1.05; letter-spacing: -.01em;
}
.bienvenue__sous-titre { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.3rem); font-weight: 500; letter-spacing: .02em; }
.bienvenue__texte { font-size: var(--fs-chapo); line-height: var(--lh-chapo); }
.bienvenue__signature { font-style: italic; font-size: 1.1rem; opacity: .9; }

.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(246, 245, 242, 0));
}
.barre-panier .bouton { display: flex; width: min(100%, 38rem); margin: 0 auto; justify-content: space-between; box-shadow: 0 10px 30px rgba(20, 20, 18, 0.16); }

/* 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(--accent); color: var(--accent-texte); }
.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 { height: 2.6rem; width: auto; max-width: 8rem; object-fit: contain; }
.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(194, 65, 12, 0.2); }
.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(--accent); color: var(--accent-texte); 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-douce); }
@keyframes arrivee { 0%, 40% { border-color: var(--or); box-shadow: 0 0 0 3px var(--accent-trait); } 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 : couleur de statut, propre à l'écran de production, indépendante de la couleur du restaurant. */
.resto { --fait: #2E7D32; --fait-fond: rgba(46, 125, 50, 0.1); }
.coche {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0;
  border: 2px solid var(--accent-trait); border-radius: var(--rayon-doux); background: var(--charbon);
  color: #FFFFFF; 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(20, 20, 18, 0.45); }
.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: auto; height: auto; max-width: 12rem; max-height: 7rem; margin: 0 auto; object-fit: contain; }
.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(--accent); color: var(--accent-texte); }
.erreur { color: var(--braise); 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 { max-width: 9rem; max-height: 5rem; width: auto; height: auto; object-fit: contain; }
.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 .cases--allergenes { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.dialogue .cases--allergenes legend, .dialogue .cases--allergenes > .mention, .dialogue .cases--allergenes > .case { grid-column: 1 / -1; }
.dialogue .case { display: block; margin-top: var(--e-4); }
.dialogue { max-height: 90svh; overflow-y: auto; }

/* ============ RÉCAPITULATIF DE LA TABLE (document non fiscal) ============ */
.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 { max-width: 8rem; max-height: 4.5rem; width: auto; height: auto; object-fit: contain; }
.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); }
.note__non-fiscal { margin-top: var(--e-3); text-align: center; color: var(--fumee); font-size: var(--fs-mention); }
.note-envoi { width: min(100%, 36rem); margin: var(--e-5) auto 0; padding: var(--e-5); border: 1px solid var(--cendre); background: var(--charbon); }
.note-envoi h2 { font-size: 1.15rem; letter-spacing: 0.04em; }
.note-envoi .champ { margin-top: var(--e-4); }
.note-envoi input { width: 100%; padding: var(--e-3); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--noir); color: var(--creme); font-size: 1.15rem; }
.note-envoi__boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: var(--e-4) 0 var(--e-3); }
@media print {
  .note-page { padding: 0; background: #fff; }
  .note-outils, .note-envoi, .note-clients { 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, .note__non-fiscal { color: #444; }
  .note__table th, .note__table td { border-color: #bbb; }
  .note__table tfoot th, .note__table tfoot td { border-top-color: #000; }
}

/* ============ STOCK EN DIRECT ============ */
.bandeau-stock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-bottom: var(--e-4); padding: var(--e-3) var(--e-4); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); }
.bandeau-stock__titre { color: var(--fumee); font-size: var(--fs-mention); margin-right: var(--e-2); }
.jeton-stock { display: inline-flex; align-items: center; gap: var(--e-2); padding: 0.15em 0.2em 0.15em 0.7em; border: 1px solid var(--cendre); border-radius: var(--rayon-doux); color: var(--creme); font-weight: 700; font-variant-numeric: tabular-nums; }
.jeton-stock button { width: 2rem; height: 2rem; border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux); background: none; color: var(--or); font-size: 1.1rem; line-height: 1; }
.jeton-stock--bas { border-color: var(--or); }
.jeton-stock--vide { border-style: dashed; color: var(--fumee); }
.stock { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3); margin-top: var(--e-1); font-size: var(--fs-mention); }
.stock__nombre { color: var(--creme); font-weight: 700; }
.stock__nombre--vide { color: var(--or-clair); }

/* ============ STATISTIQUES ============ */
.stats-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.stats-filtre label { color: var(--texte); }
.stats-filtre input[type="date"] { padding: var(--e-2); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); color: var(--creme); color-scheme: dark; }
.stats-rapides { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.stats-titre { margin-top: var(--e-6); font-size: 1.4rem; letter-spacing: 0.04em; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e-3); margin: var(--e-4) 0 var(--e-2); }
.tuile { padding: var(--e-4); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); }
.tuile__libelle { color: var(--fumee); font-size: var(--fs-mention); }
.tuile__valeur { margin-top: var(--e-1); color: var(--creme); font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tuile--principale { border-color: var(--or-sombre); }
.tuile--principale .tuile__valeur { font-size: 2.4rem; }
.stats-bloc { margin-top: var(--e-7); }
.stats-bloc h3 { color: var(--creme); font-size: 1.15rem; letter-spacing: 0.04em; }
.stats-bloc__haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.stats-tri { color: var(--fumee); font-size: var(--fs-mention); }
.stats-tri .lien[aria-pressed="true"] { color: var(--creme); text-decoration: none; font-weight: 700; }
.graph { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); margin-top: var(--e-4); }
.graph__axe { display: flex; flex-direction: column; justify-content: space-between; height: 12rem; color: var(--fumee); font-size: 0.8rem; text-align: right; font-variant-numeric: tabular-nums; }
.graph__zone {
  position: relative; display: flex; align-items: flex-end; gap: 2px; height: 12rem; padding-bottom: 1.4rem; box-sizing: content-box;
  background: linear-gradient(var(--cendre), var(--cendre)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--cendre), var(--cendre)) 0 6rem / 100% 1px no-repeat;
  border-bottom: 1px solid var(--cendre);
}
.graph__colonne { position: relative; flex: 1 1 0; max-width: 3rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline-offset: 2px; }
.graph__barre { display: block; width: min(24px, 80%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--or); }
.graph__colonne:hover .graph__barre, .graph__colonne:focus .graph__barre { background: var(--or-clair); }
.graph__date { position: absolute; bottom: -1.4rem; color: var(--fumee); font-size: 0.75rem; white-space: nowrap; }
.graph__info { position: absolute; top: -0.5rem; z-index: 2; max-width: 16rem; padding: var(--e-2) var(--e-3); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--suie); color: var(--creme); font-size: var(--fs-mention); pointer-events: none; }
.stats-table { width: 100%; margin-top: var(--e-3); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: var(--e-2) var(--e-2); border-bottom: 1px solid var(--cendre); text-align: left; vertical-align: middle; }
.stats-table thead th { color: var(--fumee); font-weight: 500; font-size: var(--fs-mention); }
.stats-table td { color: var(--creme); }
.stats-table .nombre { text-align: right; white-space: nowrap; }
.stats-table .part { width: 30%; }
.stats-table__rubrique { display: block; color: var(--fumee); font-size: 0.8rem; }
.barre-part { display: block; height: 10px; }
.barre-part span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--or); }
.consigne { margin: var(--e-3) 0; padding: var(--e-3) var(--e-4); border-left: 3px solid var(--or-sombre); background: var(--charbon); color: var(--texte); font-style: italic; }
.stats-actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ============ RÉSERVATIONS ============ */
.resa-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.resa-entete h2 { font-size: 1.25rem; letter-spacing: 0.04em; min-width: 12ch; text-align: center; }
.resa-entete input[type="date"] { padding: var(--e-2); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); color: var(--creme); color-scheme: dark; }
.resa-entete .bouton { margin-left: auto; }
.resa-total { margin: var(--e-4) 0; color: var(--creme); font-weight: 700; }
.resas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: var(--e-3); align-items: start; }
.resa { display: grid; gap: var(--e-2); padding: var(--e-4); border: 1px solid var(--cendre); border-left: 4px solid var(--or-sombre); border-radius: var(--rayon-doux); background: var(--charbon); }
.resa__haut { display: flex; align-items: baseline; gap: var(--e-3); }
.resa__heure { color: var(--or); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resa__nom { flex: 1; color: var(--creme); font-family: var(--police-titre); font-size: 1.2rem; letter-spacing: 0.03em; }
.resa__personnes { color: var(--creme); font-weight: 700; white-space: nowrap; }
.resa__infos { color: var(--fumee); font-size: var(--fs-mention); }
.resa__remarque { padding: var(--e-1) var(--e-3); border-left: 2px solid var(--or-sombre); background: var(--suie); color: var(--texte); font-size: 0.95rem; }
.resa__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-top: var(--e-1); }
.resa--arrivee { border-left-color: var(--fait, #2E7D32); }
.resa--absent, .resa--annulee { border-left-color: var(--cendre); opacity: 0.75; }
.resa--annulee .resa__nom { text-decoration: line-through; }
.resa-a-venir { margin-top: var(--e-7); }
.resa-a-venir h3 { color: var(--creme); font-size: 1.1rem; letter-spacing: 0.04em; }
.resa-a-venir ul { margin: var(--e-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); }
.lien--actif { color: var(--creme); font-weight: 700; text-decoration: none; }
.carte-table__resa { padding: var(--e-1) var(--e-2); border-left: 2px solid var(--or); color: var(--creme); font-size: var(--fs-mention); }
.dialogue .champ select { 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 input[type="date"], .dialogue .champ input[type="time"] { color-scheme: dark; }

/* Carnet / fichier clients */
.segments { display: inline-flex; margin-bottom: var(--e-5); border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux); overflow: hidden; }
.segment { padding: var(--e-2) var(--e-4); border: 0; background: transparent; color: var(--fumee); font: inherit; cursor: pointer; }
.segment + .segment { border-left: 1px solid var(--or-sombre); }
.segment[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); font-weight: 700; }
.resa-entete input[type="search"] { flex: 1 1 14rem; padding: var(--e-2) var(--e-3); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); color: var(--creme); font: inherit; }
.resa-entete .resa-total { margin: 0; }
.client .resa__personnes { color: var(--fumee); font-weight: 500; }
.client-connu:empty { display: none; }
.client-connu { color: var(--or-clair); }
.suggestions { display: grid; gap: var(--e-1); margin-top: var(--e-2); }
.suggestions:empty { display: none; }
.suggestion { padding: var(--e-2) var(--e-3); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--suie); color: var(--texte); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; }
.suggestion:hover, .suggestion:focus-visible { border-color: var(--or); }
.suggestion strong { color: var(--creme); }
.apercu-sms { margin: var(--e-3) 0 0; padding: var(--e-3) var(--e-4); border-left: 3px solid var(--or-sombre); background: var(--suie); color: var(--texte); font: inherit; font-size: 0.95rem; white-space: pre-wrap; }

/* ============ RÉSERVATION EN LIGNE (page publique) ============ */
.reserver .entete-client img { height: 3.2rem; width: auto; max-width: 12rem; object-fit: contain; }
.reserver__titre { margin-top: var(--e-4); font-size: var(--fs-sous-titre, 1.6rem); letter-spacing: 0.06em; text-transform: uppercase; }
.reserver__chapo { margin-top: var(--e-2); color: var(--creme); }
.reserver__formulaire { display: grid; gap: var(--e-5); margin-top: var(--e-6); }
.reserver .champ input, .reserver .champ select {
  width: 100%; min-height: 3rem; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); color: var(--creme);
}
.reserver .champ select { color-scheme: dark; }
.reserver .champ .mention { margin-top: var(--e-1); }
.reserver .case { display: flex; gap: var(--e-2); align-items: flex-start; color: var(--texte); }
.reserver .case input { width: 1.2rem; height: 1.2rem; margin-top: 0.2em; accent-color: var(--or); flex: 0 0 auto; }
.reserver .envoye p + p { margin-top: var(--e-3); }
.reserver__retour { justify-content: center; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.resa-demandes { margin-bottom: var(--e-6); padding: var(--e-4); border: 1px solid var(--or-sombre); border-radius: var(--rayon-doux); background: var(--suie); }
.resa-demandes h3 { margin-bottom: var(--e-3); color: var(--or-clair); font-size: 1.1rem; letter-spacing: 0.04em; }
.resa--demande { border-left-color: var(--or-clair); }
.resa--demande .resa__nom { font-size: 1.15rem; }
.resa--demande .resa__heure { white-space: normal; }
.reserver .choix legend { color: var(--creme); font-size: inherit; }
.insecable, .reserver .lien[href^="tel:"] { white-space: nowrap; }
.historique-tables { margin-top: var(--e-7); }
.historique-tables h2 { font-size: 1.25rem; letter-spacing: 0.04em; }
.historique-tables > .mention { margin: var(--e-2) 0 var(--e-4); }
.historique .resa__personnes { font-variant-numeric: tabular-nums; }
.reserver__personnes { display: grid; gap: var(--e-3); }
.reserver__groupe { color: var(--or-clair); }
.registre-defile { overflow-x: auto; }
.registre td, .registre th { white-space: nowrap; }

/* ============ CLIENTS D'UNE NOTE ET FICHE CLIENT ============ */
.dialogue--large { width: min(94vw, 46rem); }
.attribution__liste { display: grid; gap: var(--e-2); margin: var(--e-4) 0; }
.attribution__client { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--suie); }
.attribution__nom { display: grid; color: var(--creme); }
.attribution__nom .mention { font-size: 0.85rem; }
.attribution__client .pas output { min-width: 4.5rem; font-size: 0.95rem; }
.attribution__nouveau { margin-top: var(--e-3); padding: var(--e-3); border: 1px dashed var(--or-sombre); border-radius: var(--rayon-doux); }
.suggestion--nouveau { color: var(--or); border-style: dashed; }
@media (max-width: 560px) {
  .attribution__client { grid-template-columns: 1fr auto; }
  .attribution__client .pas { grid-column: 1; }
}
.note-clients { width: min(100%, 36rem); margin: var(--e-5) auto 0; padding: var(--e-5); border: 1px solid var(--cendre); background: var(--charbon); display: grid; gap: var(--e-3); justify-items: start; }
.note-clients h2 { font-size: 1.15rem; letter-spacing: 0.04em; }
.note-clients__liste { margin: 0; padding-left: 1.2em; color: var(--texte); }
.fiche-coordonnees { display: grid; gap: var(--e-1); margin-top: var(--e-3); color: var(--texte); }
.fiche-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--e-2); margin: var(--e-4) 0; }
.fiche-tuiles .tuile { padding: var(--e-3); }
.fiche-tuiles .tuile__valeur { font-size: 1.3rem; }
.fiche-client h3 { margin-top: var(--e-5); font-size: 1.05rem; letter-spacing: 0.04em; }
.client__nom-bouton { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.client__nom-bouton:hover { color: var(--or-clair); }
.registre__actions { display: flex; gap: var(--e-3); align-items: center; }
.fiche-resas { margin: var(--e-2) 0 0; padding-left: 1.2em; color: var(--texte); font-size: 0.95rem; }
.regle--suspendue { opacity: 0.6; }
.apercu-regle { margin-top: var(--e-4); padding: var(--e-3); border-left: 3px solid var(--or-sombre); background: var(--suie); color: var(--creme); font-size: 0.95rem; }
.fiche-fidelite { margin: var(--e-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--e-2); color: var(--texte); font-size: 0.95rem; }
.fiche-fidelite--pret strong { color: var(--or-clair); }
.note-avantage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-2); padding: var(--e-2) var(--e-3); border-left: 3px solid var(--or); background: var(--suie); color: var(--creme); font-size: 0.95rem; }
.note-avantage--applique { border-left-color: var(--fait); }
.note__avantage th { font-weight: 500; }
.note__sous-total th, .note__sous-total td { font-weight: 500; }
.note__table tfoot .note__avantage th, .note__table tfoot .note__avantage td { border-top: 0; padding-top: var(--e-1); font-size: 1rem; font-weight: 500; }
.note__table tfoot .note__sous-total th, .note__table tfoot .note__sous-total td { font-size: 1.05rem; font-weight: 500; }
.attribution__avantage { grid-column: 1 / -1; color: var(--or-clair); }

/* ============ MARQUE BLANCHE : nom à la place du logo, à emporter, suivi, éditeur, réglages ============ */
.entete-client__nom, .qr-carte__nom { color: var(--creme); font-family: var(--police-titre); font-weight: 800; font-size: 1.3rem; }
.entete-client a { text-decoration: none; }
.resto-entete__logo--nom { color: var(--creme); font-weight: 800; font-size: 1.1rem; }
.connexion__logo { max-width: 12rem; max-height: 7rem; width: auto; height: auto; object-fit: contain; }
.connexion__logo--nom { display: block; justify-self: center; color: var(--creme); font-weight: 800; font-size: 1.6rem; text-align: center; }
.connexion .champ { text-align: left; }
.connexion .champ input { padding: var(--e-3); font-size: 1rem; letter-spacing: normal; text-align: left; }

/* Client : choix sur place / à emporter, coordonnées, suivi de la commande */
.choix-service { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.choix-service button { display: grid; gap: var(--e-1); padding: var(--e-4) var(--e-5); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); text-align: left; }
.choix-service button:hover, .choix-service button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-doux); }
.choix-service strong { color: var(--creme); font-size: 1.15rem; }
.champs-emporter { display: grid; gap: var(--e-3); margin: var(--e-4) 0; }
.champ input, .champ select, .champ textarea { width: 100%; padding: var(--e-3); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); color: var(--creme); }
.champ label { display: block; margin-bottom: var(--e-1); color: var(--texte); font-weight: 600; }
.suivi { margin: var(--e-5) 0 0; padding: var(--e-4) var(--e-5); border: 1px solid var(--cendre); border-left: 4px solid var(--accent); border-radius: var(--rayon-doux); background: var(--charbon); }
.suivi--prete { border-left-color: #2E7D32; background: rgba(46, 125, 50, 0.08); }
.suivi__numero { color: var(--creme); font-size: 1.6rem; font-weight: 800; }
.suivi__statut { margin-top: var(--e-1); font-size: 1.15rem; font-weight: 700; color: var(--accent-lisible); }
.suivi--prete .suivi__statut { color: #2E7D32; }
.suivi ol { margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.suivi li { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-1) 0; border-bottom: 1px solid var(--suie); }
.suivi .statut--fait { color: #2E7D32; }
.mode-lecture .bascule { display: none; }

/* Écran du personnel : à emporter */
.emporter-haut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); margin-bottom: var(--e-5); }
.resto-contenu > h2 { margin: var(--e-6) 0 var(--e-3); font-size: 1.2rem; }
.resto-contenu > h2:first-of-type { margin-top: 0; }
.carte-emporter--prete { border-color: #2E7D32; box-shadow: inset 4px 0 0 #2E7D32; }

/* Éditeur : structure de la carte */
.structure { margin: var(--e-4) 0 var(--e-5); padding: var(--e-3) var(--e-4); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); }
.structure summary { cursor: pointer; color: var(--creme); font-weight: 700; }
.structure__bloc { padding: var(--e-4) 0; border-top: 1px solid var(--suie); }
.structure__bloc:first-of-type { margin-top: var(--e-3); }
.structure__bloc h3 { font-size: 1.05rem; margin-bottom: var(--e-1); }
.structure__liste { margin: var(--e-3) 0; padding: 0; list-style: none; }
.structure__liste li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px solid var(--suie); }
.structure__ajout { margin-bottom: var(--e-5); }
.outils-rubrique { display: inline-flex; gap: var(--e-2); margin-left: var(--e-3); font-size: 0.95rem; font-weight: 400; }
.outils-rubrique .lien:disabled { opacity: .35; cursor: default; }
.choix-lignes { display: grid; gap: var(--e-2); margin: var(--e-2) 0; }
.choix-ligne { display: grid; grid-template-columns: 1fr 5.5rem auto; gap: var(--e-2); align-items: center; }
.choix-ligne input { padding: var(--e-2) var(--e-3); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); }
.dialogue .case { display: block; margin: var(--e-3) 0; }

/* Réglages */
.reglages-bloc { max-width: 44rem; margin-bottom: var(--e-6); padding: var(--e-5); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); }
.reglages-bloc h2 { margin-bottom: var(--e-4); font-size: 1.2rem; }
.reglages-bloc .champ { margin-bottom: var(--e-4); }
.reglages-bloc .case { display: block; margin: var(--e-3) 0; }
.reglages-bloc > .bouton { margin-top: var(--e-3); }
.champ--ligne { display: flex; align-items: center; gap: var(--e-4); }
.champ--ligne label { margin: 0; }
.champ input[type="color"] { width: 4rem; height: 2.6rem; padding: 2px; }
.reglages-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--e-5); }
.reglage-image { display: grid; gap: var(--e-2); align-content: start; }
.reglage-image__actions { display: flex; gap: var(--e-3); align-items: center; }
.apercu { max-width: 100%; max-height: 8rem; width: auto; object-fit: contain; border: 1px solid var(--suie); background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.apercu--accueil { max-height: 10rem; object-fit: cover; }
.creneaux { border: 0; padding: 0; margin: var(--e-4) 0; }
.creneaux legend { margin-bottom: var(--e-2); color: var(--texte); font-weight: 600; }
.creneau { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: var(--e-3); align-items: center; padding: var(--e-1) 0; }
.creneau input { padding: var(--e-2) var(--e-3); border: 1px solid var(--cendre); border-radius: var(--rayon-doux); background: var(--charbon); }
.creneau label input { width: 4.5rem; }
.appareils { margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.appareils li { display: grid; grid-template-columns: 1fr auto; gap: var(--e-1) var(--e-3); align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--suie); }
.appareils li .mention { grid-column: 1; }
.appareils li .retirer-ligne { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 34rem) { .creneau { grid-template-columns: 1fr; } }