:root {
  --fond:#f5f7f9; --surface:#ffffff; --surface-2:#eef0f3;
  --trait:#dcdee1; --trait-fort:#c1c4c9;
  --encre:#181b1f; --encre-2:#494d54; --encre-3:#656970;
  --or:#ecae30; --or-fort:#e09c1a; --or-texte:#8a5600; --or-doux:#fdefcf; --sur-or:#261a0d;
  --vert:#1d7d3e; --vert-doux:#e0f7e4; --vert-texte:#0b5d2a;
  --rouge:#c52c2a; --rouge-doux:#ffece9; --rouge-texte:#a51f1e;
  --orange-doux:#ffecd8; --orange-texte:#9b4805;
  --bleu-doux:#e8f3ff; --bleu-texte:#265b8d;
  --canal-whatsapp:#0f7a3d; --canal-gloriafood:#1668c6; --canal-borne:#b3187d; --canal-site:#a14a00;
  --canal-caisse:#4b5563;
  --ombre:0 1px 2px rgba(20,24,31,.06), 0 4px 14px rgba(20,24,31,.05);
  --ombre-haute:0 12px 32px rgba(20,24,31,.18);
  --rayon:14px; --rayon-m:10px; --rayon-s:7px;
  --t-xs:.8125rem; --t-s:.875rem; --t-m:1rem; --t-l:1.125rem; --t-xl:1.25rem;
  --police:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-chiffres:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --marge:clamp(.75rem, 2vw, 1.5rem);
  --barre:64px;
  --z-collant:10; --z-barre:20; --z-bandeau:30; --z-avis:40;
  --sortie:cubic-bezier(.25, 1, .5, 1);
  color-scheme:light;
}
[data-theme="sombre"] {
  --fond:#0e0f12; --surface:#181a1d; --surface-2:#1f2226;
  --trait:#2e3034; --trait-fort:#45484d;
  --encre:#f0f2f4; --encre-2:#bbbec2; --encre-3:#9b9fa3;
  --or:#edb333; --or-fort:#f8c655; --or-texte:#f5c25f; --or-doux:#3a270b; --sur-or:#1c140c;
  --vert-doux:#15301b; --vert-texte:#89da9b;
  --rouge-doux:#481b17; --rouge-texte:#ffa89d;
  --orange-doux:#44250c; --orange-texte:#ffb980;
  --bleu-doux:#192a3c; --bleu-texte:#a2c8f0;
  --ombre:0 1px 2px rgba(0,0,0,.5);
  --ombre-haute:0 14px 36px rgba(0,0,0,.6);
  color-scheme:dark;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--fond); color:var(--encre); font-family:var(--police);
  font-size:var(--t-m); line-height:1.45; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--or); outline-offset:2px; }
.invisible, .evitement:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
.evitement:focus { position:fixed; top:.5rem; left:.5rem; z-index:var(--z-avis); padding:.6rem 1rem;
  background:var(--surface); border-radius:var(--rayon-m); box-shadow:var(--ombre-haute); }
.icone { width:1.125em; height:1.125em; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }

/* --- Barre du haut --- */
.barre { position:sticky; top:0; z-index:var(--z-barre); display:flex; flex-wrap:wrap; align-items:center;
  gap:.6rem 1.25rem; padding:.7rem var(--marge); background:var(--surface); border-bottom:1px solid var(--trait); }
.marque { display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.marque-signe { display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--or); color:var(--sur-or); font-size:.8125rem; font-weight:800; letter-spacing:-.02em; }
.marque-texte { display:flex; flex-direction:column; line-height:1.15; }
.marque-texte strong { font-size:var(--t-m); font-weight:700; }
.marque-texte span { color:var(--encre-3); font-size:var(--t-xs); }
.vues { display:flex; gap:.25rem; padding:.25rem; border-radius:12px; background:var(--surface-2); }
.vue { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:40px; padding:0 .95rem;
  border:0; border-radius:9px; background:transparent; color:var(--encre-2); font-size:var(--t-s); font-weight:600;
  transition:background-color .18s var(--sortie), color .18s var(--sortie), box-shadow .18s var(--sortie); }
.vue:hover { color:var(--encre); }
.vue[aria-selected="true"] { background:var(--surface); color:var(--encre); box-shadow:var(--ombre); }
.compteur { min-width:1.5rem; padding:0 .4rem; border-radius:999px; background:var(--surface-2); color:var(--encre-2);
  font-size:var(--t-xs); font-weight:700; line-height:1.5rem; text-align:center; font-variant-numeric:tabular-nums; }
.compteur.presse { background:var(--or); color:var(--sur-or); }
/* Un client qui attend au bout du fil : rouge tant qu'il attend, battant tant
   que personne n'a ouvert l'onglet. */
.relais-vue { margin-right:.35rem; }
.vue.urgent .compteur { background:var(--rouge); color:#fff; }
.vue.jamais-vu { background:var(--rouge-doux); color:var(--rouge-texte); }
.vue.jamais-vu[aria-selected="true"] { background:var(--surface); }
.vue.jamais-vu .compteur { animation:signal 1.6s ease-in-out infinite; }
.outils { display:flex; align-items:center; gap:.4rem; }
.etat { display:inline-flex; align-items:center; gap:.45rem; margin-right:.35rem; color:var(--encre-3);
  font-size:var(--t-xs); font-variant-numeric:tabular-nums; white-space:nowrap; }
.etat::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--vert); }
.etat.hors-ligne { color:var(--rouge-texte); font-weight:600; }
.etat.hors-ligne::before { background:var(--rouge); }
.outil { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-width:40px; min-height:40px;
  padding:0 .75rem; border:1px solid var(--trait); border-radius:var(--rayon-m); background:var(--surface);
  color:var(--encre-2); font-size:var(--t-s); font-weight:600;
  transition:background-color .18s var(--sortie), border-color .18s var(--sortie), color .18s var(--sortie); }
.outil:hover { background:var(--surface-2); color:var(--encre); }
.outil[aria-pressed="true"] { border-color:var(--or); background:var(--or-doux); color:var(--or-texte); }
.deconnexion { display:contents; }

/* --- Contenu --- */
.contenu { max-width:1680px; margin:0 auto; padding:1rem var(--marge) 3rem; }
.contenu:focus { outline:none; }
body.avec-bandeau .contenu { padding-bottom:7rem; }

/* --- La liste : une ligne par commande ----------------------------------
   Le kanban montrait trois grandes cartes de front ; en service, l'écran se
   remplissait et il fallait faire défiler chaque colonne. Une ligne tient
   l'essentiel sur une hauteur de doigt, et le détail se déplie dessous. */
.liste { display:grid; gap:1.4rem; max-width:1100px; margin:0 auto; }
/* Ce qui arrive à gauche, ce qui cuit à droite : d'un regard, on sait s'il
   faut accepter avant de retourner au wok. */
@media (min-width:1000px) {
  .liste.deux-colonnes { grid-template-columns:1fr 1fr; align-items:start; max-width:1500px; }
  .liste.deux-colonnes .resume { grid-column:1 / -1; }
  /* Une colonne fait la moitié de l'écran : le geste prend toute la largeur
     sous les informations, plutôt que de les écraser contre le bord. */
  .liste.deux-colonnes .ligne-ouvrir { flex-wrap:wrap; gap:.3rem .7rem; }
  /* Sans base courte, le nom et ses repères réclament toute la largeur et
     chassent le minuteur sur sa propre ligne. */
  .liste.deux-colonnes .ligne-principal { flex:1 1 9rem; }
  .liste.deux-colonnes .ligne-montant { justify-items:start; }
  .liste.deux-colonnes .chevron { margin-left:auto; }
  .liste.deux-colonnes .ligne-tete .zone-actions { flex:1 1 100%; max-width:none; }
}
.liste.chargement { gap:.5rem; }
.groupe { display:grid; gap:.5rem; }
.groupe[hidden] { display:none; }
.groupe-tete { display:flex; align-items:center; gap:.6rem; padding:0 .15rem; }
.groupe-tete h2 { margin:0; color:var(--encre-2); font-size:var(--t-s); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; }
.nombre { min-width:1.6rem; padding:0 .45rem; border-radius:999px; background:var(--surface-2); color:var(--encre-2);
  font-size:var(--t-xs); font-weight:700; line-height:1.6rem; text-align:center; font-variant-numeric:tabular-nums; }
.groupe.urgent .nombre { background:var(--or); color:var(--sur-or); }
.groupe.urgent .groupe-tete h2 { color:var(--or-texte); }
.groupe-corps { display:grid; gap:.45rem; }
.groupe-vide { margin:0; padding:1rem; border:1px dashed var(--trait-fort); border-radius:var(--rayon);
  color:var(--encre-3); font-size:var(--t-s); line-height:1.5; }
.resume { margin:0; color:var(--encre-2); font-size:var(--t-s); font-variant-numeric:tabular-nums; }

.ligne { border:1px solid var(--trait); border-left:9px solid var(--canal, var(--trait-fort));
  border-radius:var(--rayon); background:var(--surface);
  box-shadow:var(--ombre); transition:border-color .2s var(--sortie), box-shadow .2s var(--sortie); }
/* D'où vient la commande, avant même d'avoir lu : le liseré le dit sur toute
   la hauteur de la ligne, la pastille le nomme. */
.ligne[data-canal="whatsapp"] { --canal:var(--canal-whatsapp); }
.ligne[data-canal="gloriafood"] { --canal:var(--canal-gloriafood); }
.ligne[data-canal="qr"] { --canal:var(--canal-borne); }
.ligne[data-canal="site"] { --canal:var(--canal-site); }
.ligne[data-canal="caisse"] { --canal:var(--canal-caisse); }
/* Pleine et franche : trois fonds pâles se ressemblaient tous de loin, et
   c'est de loin qu'on lit un écran de cuisine. */
.canal { padding:.15rem .55rem; border-radius:999px; background:var(--canal, var(--encre-3));
  color:#fff; font-weight:700; letter-spacing:.01em; }
/* La livraison est l'exception : un livreur à trouver, une adresse à lire.
   Elle est la seule à porter une pastille pleine. */
.mode { padding:.1rem .45rem; border-radius:999px; background:var(--surface-2); color:var(--encre); font-weight:700; }
.mode.livraison { background:var(--encre); color:var(--surface); }
.ligne.arrivee { animation:apparition .24s var(--sortie) both; }
.ligne.nouvelle { border-color:var(--or); box-shadow:0 0 0 3px var(--or-doux), var(--ombre); }
/* Les gestes s'alignent en haut : quand le menu « Autres actions » se
   déroule, il pousse vers le bas sans décaler la commande qu'on lit. */
.ligne-tete { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem .75rem; padding:.55rem .75rem; }
.ligne-ouvrir { display:flex; flex:1 1 17rem; align-items:center; gap:.7rem; min-width:min(100%, 17rem); min-height:52px;
  padding:.3rem .4rem; border:0; border-radius:var(--rayon-m); background:transparent; text-align:left; }
.ligne-ouvrir:hover { background:var(--surface-2); }
/* Le nom du client garde une largeur plancher : plutôt voir les gestes passer
   à la ligne que lire « Nadia » et « Belkacem » l'un sous l'autre. */
.ligne-principal { display:grid; flex:1 1 auto; gap:.1rem; min-width:10rem; overflow:hidden; }
.ligne-client { font-size:var(--t-l); font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.ligne-sous { display:flex; flex-wrap:wrap; gap:.15rem .6rem; min-width:0; color:var(--encre-2); font-size:var(--t-s); }
.ligne-sous > span { display:inline-flex; flex:none; align-items:center; gap:.3rem; min-width:0; }
/* Le seul élément qui cède : la liste des plats se coupe, et c'est pourquoi
   elle peut rétrécir sous sa largeur naturelle. Sans cela elle poussait le
   montant hors de la ligne, qui venait recouvrir les pastilles. */
.ligne-plats { flex:0 1 auto; color:var(--encre-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.marque-note { flex:none; color:var(--or-texte); font-weight:700; }
.marque-motif { flex:none; color:var(--rouge-texte); font-weight:700; }
.ligne-date { flex:none; color:var(--encre-2); font-size:var(--t-s); font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ligne-montant { display:grid; flex:none; justify-items:end; gap:.1rem; }
.ligne-montant strong { font-size:var(--t-l); font-variant-numeric:tabular-nums; }
.chevron { flex:none; color:var(--encre-3); transition:transform .2s var(--sortie); }
.ligne.ouverte .chevron { transform:rotate(180deg); }
.ligne .note { margin:0 .75rem .55rem; }
.ligne-detail { display:grid; gap:.7rem; padding:.8rem 1rem 1rem; border-top:1px solid var(--trait); }
.ligne-detail[hidden] { display:none; }
.ligne-detail .articles { padding-top:0; border-top:0; }
.ligne-detail .reference { margin:0; }
.ligne-detail .remise { margin:0; font-weight:600; }
.ligne-tete .zone-actions { flex:1 1 11rem; max-width:22rem; }
.reference { color:var(--encre-3); font-family:var(--police-chiffres); font-size:var(--t-xs); }
.contact { display:grid; gap:.2rem; color:var(--encre-2); font-size:var(--t-s); }
.contact a { display:inline-flex; align-items:center; gap:.4rem; width:max-content; min-height:34px;
  color:var(--encre); font-weight:600; text-decoration:none; font-variant-numeric:tabular-nums; }
.contact a:hover { text-decoration:underline; }
.adresse { display:flex; align-items:flex-start; gap:.4rem; }
.adresse .icone { margin-top:.15em; }

.signal { display:inline-block; width:9px; height:9px; margin:0 .45rem .12em 0; border-radius:50%;
  background:var(--or); vertical-align:middle; animation:signal 1.6s ease-in-out infinite; }
.minuteur { display:inline-flex; flex:none; align-items:center; gap:.35rem; min-height:30px; padding:0 .6rem;
  border-radius:999px; background:var(--surface-2); color:var(--encre-2); font-size:var(--t-s); font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.minuteur.attention { background:var(--orange-doux); color:var(--orange-texte); }
.minuteur.retard { background:var(--rouge-doux); color:var(--rouge-texte); }
.minuteur.prevue { background:var(--bleu-doux); color:var(--bleu-texte); }
.pastille { display:inline-flex; flex:none; align-items:center; min-height:26px; padding:0 .55rem; border-radius:999px;
  background:var(--surface-2); color:var(--encre-2); font-size:var(--t-xs); font-weight:700; white-space:nowrap; }
.pastille.attente { background:var(--or-doux); color:var(--or-texte); }
.pastille.en-cours { background:var(--bleu-doux); color:var(--bleu-texte); }
.pastille.completed { background:var(--vert-doux); color:var(--vert-texte); }
.pastille.not_honoured { background:var(--rouge-doux); color:var(--rouge-texte); }
.paiement { display:inline-flex; align-items:center; min-height:24px; padding:0 .5rem; border-radius:999px;
  background:var(--surface-2); color:var(--encre-2); font-size:var(--t-xs); font-weight:700; white-space:nowrap; }
.paiement.payee { background:var(--vert-doux); color:var(--vert-texte); }
.note { display:flex; align-items:flex-start; gap:.5rem; margin:0; padding:.55rem .7rem; border-radius:var(--rayon-m);
  background:var(--or-doux); color:var(--encre); font-size:var(--t-s); font-weight:600; line-height:1.4; }
.note .icone { margin-top:.12em; color:var(--or-texte); }
.suivi { display:flex; align-items:center; gap:.45rem; margin:0; color:var(--bleu-texte); font-size:var(--t-s); font-weight:600; }

.articles { display:grid; gap:.55rem; margin:0; padding:.7rem 0 0; border-top:1px solid var(--trait); list-style:none; }
.article { display:grid; grid-template-columns:2.4rem minmax(0, 1fr); align-items:start; gap:.6rem; }
.qte { display:grid; place-items:center; min-height:1.9rem; border-radius:var(--rayon-s); background:var(--surface-2);
  font-weight:800; font-variant-numeric:tabular-nums; }
.article-nom { padding-top:.2rem; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.article-options { margin-top:.1rem; color:var(--encre-2); font-size:var(--t-s); }
.article-note { display:inline-flex; align-items:center; gap:.35rem; margin-top:.3rem; padding:.1rem .45rem;
  border-radius:var(--rayon-s); background:var(--or-doux); color:var(--or-texte); font-size:var(--t-s); font-weight:700; }
.zone-actions { display:grid; gap:.5rem; }

/* --- Boutons --- */
.actions { display:flex; gap:.5rem; }
/* Sans geste à faire ici : la ligne dit où il se fait. */
.actions-consigne { align-self:center; font-weight:600; color:var(--encre-2); }
.bouton { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:48px; padding:0 1rem;
  border:1px solid transparent; border-radius:var(--rayon-m); font-size:var(--t-m); font-weight:700; line-height:1.2;
  text-align:center; transition:background-color .16s var(--sortie), border-color .16s var(--sortie), transform .12s var(--sortie); }
.bouton:active { transform:scale(.98); }
.bouton:disabled { cursor:progress; opacity:.6; }
.bouton.principal { flex:1; background:var(--or); color:var(--sur-or); }
.bouton.principal:hover { background:var(--or-fort); }
.bouton.neutre { flex:1; border-color:var(--trait); background:var(--surface-2); color:var(--encre); }
.bouton.neutre:hover { border-color:var(--trait-fort); }
.bouton.plus { flex:none; width:48px; padding:0; border-color:var(--trait); background:var(--surface); color:var(--encre-2); }
.bouton.plus[aria-expanded="true"] { background:var(--surface-2); color:var(--encre); }
.bouton.option { justify-content:flex-start; border-color:var(--trait); background:var(--surface); color:var(--encre); }
.bouton.option.risque { color:var(--rouge-texte); }
.bouton.danger { flex:1; background:var(--rouge); color:#fff; }
.bouton.retour { flex:1; border-color:var(--trait); background:var(--surface); color:var(--encre); }
.plus-options, .confirmation { display:grid; gap:.5rem; padding:.7rem; border-radius:var(--rayon-m);
  background:var(--surface-2); animation:deploiement .18s var(--sortie) both; }
.confirmation p { margin:0; font-size:var(--t-s); font-weight:600; }
.motifs { display:flex; flex-wrap:wrap; gap:.4rem; }
.motif { min-height:40px; padding:0 .8rem; border:1px solid var(--trait); border-radius:999px; background:var(--surface);
  color:var(--encre); font-size:var(--t-s); font-weight:600; }
.motif[aria-pressed="true"] { border-color:var(--rouge); background:var(--rouge-doux); color:var(--rouge-texte); }
.champ { width:100%; min-height:44px; padding:0 .8rem; border:1px solid var(--trait-fort); border-radius:var(--rayon-s);
  background:var(--surface); color:var(--encre); }
.champ::placeholder { color:var(--encre-3); }
.confirmation-actions { display:flex; gap:.5rem; }
/* Page Ruptures : un plat épuisé reste à sa place, grisé. */
.ruptures { display:grid; gap:1rem; max-width:48rem; margin:0 auto; padding:1.25rem var(--marge) 5rem; }
.ruptures h1 { margin:0; font-size:var(--t-xl); }
.ruptures-aide { margin:0; color:var(--encre-2); }
/* Le retour d'un geste reste à l'écran, en bas : il se voit même après un geste en fin de liste. */
.ruptures-message { position:fixed; z-index:5; right:var(--marge); bottom:1rem; left:var(--marge); max-width:40rem;
  margin:0 auto; padding:.7rem 1rem; border-radius:var(--rayon-m); background:var(--encre); color:var(--surface);
  font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.ruptures-message:empty { display:none; }

/* Page Carte : plats, prix, options. */
.carte { display:grid; gap:1rem; max-width:52rem; margin:0 auto; padding:1.25rem var(--marge) 6rem; }
.carte h1 { margin:0; font-size:var(--t-xl); }
.carte-aide { margin:0; color:var(--encre-2); font-size:var(--t-s); }
.carte-avertissement { display:grid; gap:.3rem; padding:.7rem .9rem; border-radius:var(--rayon-m); background:var(--or-doux);
  color:var(--or-texte); font-size:var(--t-s); font-weight:600; }
.carte-avertissement[hidden] { display:none; }
.carte-avertissement p { margin:0; }
.carte-case input:disabled + span { color:var(--encre-2); }
.carte-onglets { display:flex; gap:.4rem; }
.carte-onglet { min-height:44px; padding:0 1.1rem; border:1px solid var(--trait); border-radius:999px; background:var(--surface);
  color:var(--encre); font-weight:700; }
.carte-onglet[aria-selected="true"] { border-color:var(--encre); background:var(--encre); color:var(--surface); }
.carte-contenu { display:grid; gap:1.25rem; }
.carte-rubrique { display:grid; gap:.5rem; }
.carte-rubrique.masquee .carte-plats { opacity:.55; }
.carte-tete { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; }
.carte-tete h2 { margin:0; color:var(--encre-2); font-size:var(--t-s); letter-spacing:.04em; text-transform:uppercase; }
.carte-badge { padding:.1rem .5rem; border-radius:999px; background:var(--surface-2); color:var(--encre-2); font-size:var(--t-xs); font-weight:700; }
.carte-plats { display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.carte-plat { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem;
  padding:.6rem .75rem; border:1px solid var(--trait); border-radius:var(--rayon-m); background:var(--surface); }
.carte-plat.masque { background:var(--surface-2); }
.carte-plat.masque .carte-nom { color:var(--encre-2); }
.carte-texte { display:grid; flex:1 1 14rem; gap:.1rem; min-width:0; }
.carte-nom { font-weight:700; overflow-wrap:anywhere; }
.carte-details, .carte-description { color:var(--encre-2); font-size:var(--t-s); }
.carte-gestes { display:flex; flex-wrap:wrap; gap:.4rem; }
.carte-gestes .bouton, .carte-tete .bouton, .carte-rubrique > .bouton { flex:none; }
.bouton.petit { min-height:40px; padding:0 .8rem; font-size:var(--t-s); }
.carte-rubrique > .bouton, .carte-contenu > .bouton { justify-self:start; }
.carte-formulaire { display:grid; flex:1 1 100%; gap:.75rem; padding:.9rem; border-radius:var(--rayon-m); background:var(--surface-2); }
.carte-grille { display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:.75rem; }
.carte-formulaire textarea.champ { min-height:4rem; padding:.6rem .8rem; resize:vertical; }
.carte-case { display:flex; align-items:center; gap:.5rem; font-size:var(--t-s); font-weight:600; }
.carte-case input { width:1.2rem; height:1.2rem; }
.carte-groupes { display:grid; gap:.4rem; margin:0; padding:.6rem .8rem; border:1px solid var(--trait); border-radius:var(--rayon-s); }
.carte-groupes legend { padding:0 .3rem; color:var(--encre-2); font-size:var(--t-s); font-weight:700; }
.carte-allergenes-grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(7rem, 1fr)); gap:.35rem .75rem; }
.carte-photo-apercu { display:block; width:100%; max-width:22rem; height:auto; aspect-ratio:4 / 3; object-fit:cover;
  border-radius:var(--rayon-s); background:var(--surface); }
/* Le champ fichier couvre son bouton : un toucher ouvre l'appareil photo ou la galerie. */
.carte-photo-choix { position:relative; overflow:hidden; cursor:pointer; }
.carte-photo-choix:focus-within { outline:2px solid var(--encre); outline-offset:2px; }
.carte-photo-fichier { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.carte-photo [hidden] { display:none; }
.carte-pied { display:flex; flex-wrap:wrap; gap:.5rem; }
.carte-pied .bouton { flex:none; min-width:8rem; }
.carte-message { position:fixed; z-index:5; right:var(--marge); bottom:1rem; left:var(--marge); max-width:40rem;
  margin:0 auto; padding:.7rem 1rem; border-radius:var(--rayon-m); background:var(--encre); color:var(--surface);
  font-weight:600; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.carte-message:empty { display:none; }
.ruptures-liste { display:grid; gap:1.25rem; }
.ruptures-pour { margin:-.3rem 0 .5rem; color:var(--encre-2); font-size:var(--t-s); }
.ruptures-section h2 { margin:0 0 .5rem; color:var(--encre-2); font-size:var(--t-s); letter-spacing:.04em; text-transform:uppercase; }
.ruptures-plats { display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.rupture-plat { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem;
  padding:.6rem .75rem; border:1px solid var(--trait); border-radius:var(--rayon-m); background:var(--surface); }
.rupture-plat.epuise { background:var(--surface-2); }
.rupture-texte { display:grid; flex:1 1 12rem; gap:.1rem; min-width:0; }
.rupture-nom { font-weight:700; overflow-wrap:anywhere; }
.rupture-plat.epuise .rupture-nom { color:var(--encre-2); text-decoration:line-through; }
.rupture-etat { color:var(--encre-2); font-size:var(--t-s); }
.rupture-plat.epuise .rupture-etat { color:var(--rouge-texte); font-weight:700; }
.rupture-gestes { display:flex; flex-wrap:wrap; gap:.4rem; }
.rupture-gestes .bouton { flex:none; }
.ruptures-vide { margin:0; color:var(--encre-2); }

/* Accepter une commande WhatsApp : un délai, un toucher. */
.actions.avec-delais { align-items:flex-end; }
.acceptation { flex:1; display:grid; gap:.3rem; min-width:0; }
.acceptation-titre { color:var(--encre-2); font-size:var(--t-s); font-weight:700; }
.delais { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.4rem; }
.bouton.delai { padding:0 .3rem; white-space:nowrap; }

/* --- Chargement, calme, bandeau, avis --- */
.squelette { height:4.75rem; border:1px solid var(--trait); border-radius:var(--rayon);
  background:linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%;
  animation:reflet 1.4s ease-in-out infinite; }
.calme { display:grid; justify-items:center; gap:.75rem; max-width:34rem; margin:10vh auto 0; padding:2rem 1.5rem; text-align:center; }
.calme .icone { width:2.5rem; height:2.5rem; color:var(--or-texte); stroke-width:1.5; }
.calme h2 { margin:0; font-size:var(--t-xl); }
.calme p { margin:0; color:var(--encre-2); line-height:1.55; text-wrap:pretty; }
.calme .bouton { flex:none; }
.bandeau { position:fixed; right:0; bottom:0; left:0; z-index:var(--z-bandeau); display:flex; flex-wrap:wrap;
  align-items:center; gap:.5rem .75rem; padding:.8rem var(--marge) calc(.8rem + env(safe-area-inset-bottom));
  font-size:var(--t-s); font-weight:600; box-shadow:0 -1px 0 var(--trait), var(--ombre-haute); }
.bandeau.erreur { background:var(--rouge-doux); color:var(--rouge-texte); }
.bandeau.info { background:var(--or-doux); color:var(--or-texte); }
.bandeau button { margin-left:auto; min-height:38px; padding:0 .85rem; border:1px solid currentColor;
  border-radius:var(--rayon-s); background:transparent; color:inherit; font-weight:700; }
.avis-zone { position:fixed; bottom:calc(1rem + env(safe-area-inset-bottom)); left:50%; z-index:var(--z-avis);
  display:grid; gap:.5rem; width:min(34rem, calc(100vw - 2rem)); transform:translateX(-50%); pointer-events:none; }
body.avec-bandeau .avis-zone { bottom:calc(5rem + env(safe-area-inset-bottom)); }

/* Son bloqué par le navigateur : tout l'écran le dit, un bandeau s'oubliait. */
.voile-son { position:fixed; inset:0; z-index:calc(var(--z-avis) + 10); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; padding:2rem; border:0; background:var(--or);
  color:var(--sur-or); font:inherit; text-align:center; cursor:pointer; }
.voile-son-titre { font-size:clamp(1.75rem, 5vw, 3rem); font-weight:800; line-height:1.15; text-wrap:balance; }
.voile-son-detail { max-width:32rem; font-size:var(--t-l); font-weight:600; }
.avis { display:flex; align-items:flex-start; gap:.6rem; padding:.8rem 1rem; border-radius:var(--rayon-m);
  box-shadow:var(--ombre-haute); font-weight:600; line-height:1.4; pointer-events:auto;
  animation:apparition .22s var(--sortie) both; }
.avis .icone { margin-top:.12em; }
.avis.ok { background:var(--encre); color:var(--surface); }
.avis.alerte { background:var(--rouge); color:#fff; }
.avis a { color:inherit; }
.avis button { flex:none; margin-left:auto; min-height:34px; padding:0 .7rem; border:1px solid currentColor;
  border-radius:var(--rayon-s); background:transparent; color:inherit; font-weight:700; }

/* --- Page de connexion --- */
body.connexion { display:grid; place-items:center; min-height:100vh; min-height:100dvh; padding:1.5rem; }
.connexion-panneau { display:grid; gap:1.1rem; width:min(24rem, 100%); padding:2rem 1.75rem; border:1px solid var(--trait);
  border-radius:18px; background:var(--surface); box-shadow:var(--ombre-haute); }
.connexion-panneau .marque { margin:0; }
.connexion-panneau h1 { margin:0; font-size:var(--t-xl); line-height:1.25; }
.connexion-panneau > p { margin:0; color:var(--encre-2); font-size:var(--t-s); }
.connexion-panneau label { display:grid; gap:.4rem; font-size:var(--t-s); font-weight:600; }
.connexion-panneau .bouton { width:100%; }
.connexion-panneau .erreur { margin:0; padding:.6rem .75rem; border-radius:var(--rayon-s); background:var(--rouge-doux);
  color:var(--rouge-texte); font-size:var(--t-s); font-weight:600; }

/* --- Petits écrans : l'essentiel, sans rien perdre --- */
/* Cinq onglets tiennent la largeur : les outils se réduisent à leur icône
   plus tôt qu'avant, pour que la barre reste sur une seule ligne. */
@media (max-width:1399px) {
  .outil { width:40px; padding:0; }
  .outil-texte { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (max-width:1099px) {
  .barre { gap:.6rem; }
  .vues { order:3; width:100%; overflow-x:auto; scrollbar-width:none; }
  .vue { flex:1 0 auto; padding:0 .7rem; }
}
@media (max-width:640px) {
  .etat { display:none; }
  .ligne-ouvrir { flex-wrap:wrap; gap:.4rem .6rem; }
  .ligne-montant { justify-items:start; }
  .ligne-tete .zone-actions { max-width:none; }
}

@keyframes apparition { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes deploiement { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes signal { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.75); } }
@keyframes reflet { from { background-position:100% 0; } to { background-position:0 0; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
}
/* --- Clients qui attendent quelqu'un -------------------------------------
   Une bande orange en haut de l'écran, qui n'existe que s'il y a un cas.
   Elle passe devant les commandes : un client bloqué se traite avant de
   ranger une carte de plus. */
.relais{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:stretch;
  max-width:1100px; margin:0 auto;
}
.relais-titre{
  flex:1 0 100%; margin:0; font-size:var(--t-l); color:var(--rouge-texte);
}
.relais-carte{
  flex:1 1 300px; display:flex; flex-direction:column; gap:.5rem;
  padding:1rem; background:var(--surface); border:2px solid var(--rouge);
  border-radius:var(--rayon); box-shadow:var(--ombre);
}
.relais-tete{display:flex; flex-direction:column; gap:.15rem}
.relais-nom{font-size:var(--t-l)}
.relais-motif{font-size:var(--t-s); color:var(--rouge-texte); font-weight:600}
.relais-detail{margin:0; font-size:var(--t-s); color:var(--encre-2)}
.relais-numero{
  margin:0; font-family:var(--police-chiffres); font-size:var(--t-l);
  color:var(--encre);
}
/* Les gestes tiennent la largeur : on les touche debout, sans viser. */
.relais-gestes{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:auto}
.relais-gestes .bouton{width:100%; min-height:52px}
.relais-ecarter{
  align-self:flex-end; padding:.35rem .6rem; font:inherit; font-size:var(--t-xs);
  color:var(--encre-3); background:none; border:0; cursor:pointer;
  text-decoration:underline;
}
@media (max-width:600px){
  .relais-gestes{grid-template-columns:1fr}
}

/* --- Pause et mode rush (équipe) --- */
/* Le bandeau reste sous la barre tant qu'une pause ou un rush court : la
   cuisine doit voir d'un coup d'œil que les clients ne peuvent plus commander. */
.service-bandeau { position:sticky; top:var(--barre); z-index:var(--z-collant); display:grid; gap:.4rem;
  padding:.6rem var(--marge); border-bottom:1px solid var(--trait); background:var(--orange-doux);
  color:var(--orange-texte); font-weight:600; }
.service-bandeau[hidden], .service-panneau[hidden] { display:none; }
.service-ligne { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; width:100%; max-width:1680px; margin:0 auto; }
.service-ligne .bouton { flex:none; min-height:40px; margin-left:auto; }
.service-panneau { position:fixed; top:calc(var(--barre) + .5rem); right:var(--marge); z-index:var(--z-bandeau);
  display:grid; gap:.6rem; width:min(24rem, calc(100% - 2 * var(--marge))); padding:1rem 1.1rem;
  border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface); box-shadow:var(--ombre-haute); }
.service-panneau h2 { margin:.25rem 0 0; font-size:var(--t-m); }
.service-aide { margin:0; color:var(--encre-3); font-size:var(--t-s); }
.service-choix { display:flex; flex-wrap:wrap; gap:.5rem; }
.service-choix .bouton { flex:1 1 auto; min-height:48px; }
.service-choix .bouton[aria-pressed="true"] { border-color:var(--or); background:var(--or-doux); color:var(--or-texte); }

/* --- Administration : l'accueil et ses rubriques --- */
.admin { display:grid; gap:1rem; max-width:44rem; margin:0 auto; padding:1.5rem var(--marge) 4rem; }
.admin h1 { margin:0; font-size:var(--t-xl); }
.admin-aide { margin:0; color:var(--encre-3); font-size:var(--t-s); }
.admin-rubriques { display:grid; gap:.75rem; margin:0; padding:0; list-style:none; }
.admin-rubrique { display:grid; gap:.25rem; padding:1.1rem 1.25rem; border:1px solid var(--trait);
  border-radius:var(--rayon); background:var(--surface); color:inherit; text-decoration:none; }
.admin-rubrique:hover { border-color:var(--trait-fort); }
.admin-rubrique strong { font-size:var(--t-l); }
.admin-rubrique span { color:var(--encre-2); font-size:var(--t-s); }

/* --- Promotions (administration) --- */
.promos { display:grid; gap:1rem; max-width:52rem; margin:0 auto; padding:1.25rem var(--marge) 6rem; }
.promos:focus { outline:none; }
.promos h1 { margin:0; font-size:var(--t-xl); }
/* Le titre reçoit la main après chaque dessin (lecteurs d'écran) : ce n'est pas un bouton, pas de cadre. */
.promos h1:focus { outline:none; }
.promos h3 { margin:.25rem 0 0; font-size:var(--t-s); color:var(--encre-2); }
.promos > .bouton { justify-self:start; }
/* Sans message, la zone ne creuse pas d'écart sous le bouton. */
.promos > .reglages-etat:empty { display:none; }
.promos-liste { display:grid; gap:.6rem; margin:0; padding:0; list-style:none; }
.promo { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem .75rem;
  padding:.8rem .9rem; border:1px solid var(--trait); border-radius:var(--rayon-m); background:var(--surface); }
.promo.eteinte { background:var(--surface-2); }
.promo-texte { display:grid; flex:1 1 16rem; gap:.3rem; min-width:0; }
.promo-tete { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; }
.promo-nom { font-weight:700; overflow-wrap:anywhere; }
.promo-resume { color:var(--encre-2); font-size:var(--t-s); }
.promo-gestes { display:flex; flex-wrap:wrap; gap:.4rem; }
.promo-gestes .bouton { flex:none; }
.promo-choix { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.promo-choix .carte-case { min-height:36px; }
.pastille.vigueur { background:var(--vert-doux); color:var(--vert-texte); }
.pastille.prevue { background:var(--bleu-doux); color:var(--bleu-texte); }
.pastille.code { background:var(--encre); color:var(--surface); letter-spacing:.04em; }

/* --- Page Réglages (administrateur) --- */
/* Un formulaire à lire de haut en bas, sur ordinateur comme sur téléphone :
   une colonne, des sections nettes, le bouton Enregistrer toujours visible. */
/* Seul outil de sa barre : son texte reste lisible à toute largeur. */
a.outil { text-decoration:none; }
.outil.outil-libelle { width:auto; padding:0 .85rem; }
.outil-libelle .outil-texte { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
.reglages { max-width:56rem; margin:0 auto; padding:1.25rem var(--marge) 7rem; }
.reglages:focus { outline:none; }
.reglages-chargement { color:var(--encre-3); }
.reglages-code { display:grid; gap:1rem; width:min(24rem, 100%); margin:3rem auto; padding:2rem 1.75rem;
  border:1px solid var(--trait); border-radius:var(--rayon); background:var(--surface); box-shadow:var(--ombre); }
.reglages-code h1 { margin:0; font-size:var(--t-xl); }
.reglages-code > p { margin:0; color:var(--encre-2); font-size:var(--t-s); }
.reglages-code .bouton { width:100%; }
.reglages-formulaire { display:grid; gap:1.25rem; }
.reglages-section { display:grid; gap:.9rem; padding:1.25rem; border:1px solid var(--trait);
  border-radius:var(--rayon); background:var(--surface); }
.reglages-section h2 { margin:0; font-size:var(--t-l); }
.reglages-aide { margin:0; color:var(--encre-3); font-size:var(--t-s); }
.reglages-etiquette { display:grid; gap:.35rem; font-size:var(--t-s); font-weight:600; color:var(--encre-2); }
.reglages-ligne { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:.75rem; }
.reglages-defilement { overflow-x:auto; }
.reglages-villes { width:100%; border-collapse:collapse; min-width:34rem; }
.reglages-villes th { padding:.35rem .4rem; text-align:left; font-size:var(--t-xs); color:var(--encre-3); font-weight:600; }
.reglages-villes td { padding:.3rem .4rem; vertical-align:middle; }
.reglages-villes td:nth-child(2) { width:7rem; }
.reglages-villes td:nth-child(3), .reglages-villes td:nth-child(4) { width:8rem; }
.reglages-section > .bouton, .reglages-jour > .bouton { justify-self:start; flex:none; }
.reglages-villes .bouton { min-height:44px; flex:none; }
.reglages-jour { display:grid; gap:.5rem; margin:0; padding:.9rem 1rem; border:1px solid var(--trait);
  border-radius:var(--rayon-m); }
.reglages-jour legend { padding:0 .35rem; font-weight:700; }
.reglages-creneaux { display:grid; gap:.5rem; }
.reglages-creneau { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.reglages-creneau .champ[type="time"] { width:8.5rem; }
.reglages-creneau .bouton { min-height:44px; flex:none; }
.reglages-a { color:var(--encre-3); }
.reglages-livraison { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; font-size:var(--t-s); }
.reglages-case { width:20px; height:20px; min-height:0; accent-color:var(--or-fort); }
.reglages-ferme { margin:0; color:var(--encre-3); font-size:var(--t-s); }
.reglages-fermetures { display:grid; gap:.75rem; }
.reglages-fermeture { display:grid; grid-template-columns:repeat(auto-fit, minmax(9.5rem, 1fr)); align-items:end; gap:.6rem;
  padding:.85rem; border:1px solid var(--trait); border-radius:var(--rayon-m); }
.reglages-fermeture .bouton { flex:none; min-height:44px; }
select.champ { appearance:auto; }
.reglages-pied { position:sticky; bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  padding:.9rem 0 1rem; border-top:1px solid var(--trait); background:var(--fond); }
.reglages-pied .bouton.principal { flex:none; min-width:11rem; }
.reglages-pied .bouton.neutre { flex:none; }
.reglages-etat { flex:1 1 100%; }
.reglages-succes { margin:0; padding:.6rem .75rem; border-radius:var(--rayon-s); background:var(--vert-doux);
  color:var(--vert-texte); font-weight:600; }
.reglages-refus { margin:0; padding:.6rem .75rem; border-radius:var(--rayon-s); background:var(--rouge-doux);
  color:var(--rouge-texte); font-weight:600; }
.reglages-erreurs { margin:.5rem 0 0; padding-left:1.2rem; color:var(--rouge-texte); font-size:var(--t-s); }
/* Sur téléphone, le tableau des villes devient une fiche par ville : le nom
   sur toute la largeur, code postal et montants côte à côte, chacun titré. */
@media (max-width:640px) {
  .reglages-section { padding:1rem; }
  .reglages-villes { min-width:0; }
  .reglages-villes thead { display:none; }
  .reglages-villes tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.5rem; padding:.75rem 0;
    border-bottom:1px solid var(--trait); }
  .reglages-villes td, .reglages-villes td:nth-child(n) { display:grid; gap:.25rem; width:auto; padding:0; }
  .reglages-villes td:first-child, .reglages-villes td:last-child { grid-column:1 / -1; }
  .reglages-villes td[data-titre]::before { content:attr(data-titre); font-size:var(--t-xs); font-weight:600;
    color:var(--encre-3); }
  .reglages-villes td:last-child .bouton { justify-self:start; }
  .reglages-pied .bouton.principal, .reglages-pied .bouton.neutre { flex:1 1 100%; }
}