/* Ground Control — styles communs des écrans (révision 2026-10-15).
   Toutes les valeurs viennent des jetons (../design/jetons.css). */

/* Espacements denses (demande d'Eric du 2026-10-31 : « moins il y en a, mieux c'est ») : l'échelle des jetons divisée
   par deux pour Ground Control, Launch Pad, Hypergol et Mission Control, qui chargent tous ce fichier. Mach 25 et les
   téléviseurs gardent l'échelle des jetons. Les cibles tactiles ne changent pas, et sur les tablettes deux boutons
   voisins gardent 8 px d'écart (norme B-13, --ecart-minimum, plus bas). */
:root {
  --espace-1: 2px; --espace-2: 4px; --espace-3: 6px; --espace-4: 8px;
  --espace-5: 12px; --espace-6: 16px; --espace-7: 24px; --espace-8: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--police);
  font-size: var(--taille-corps);
  line-height: 1.4;
  color: var(--c-texte);
  background: #0B0A09;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Démonstration (hors de l'écran de la tablette) ---------- */
.demo {
  max-width: 1280px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + var(--espace-4)) var(--espace-4) var(--espace-3);
  display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-5); align-items: center;
  color: var(--c-texte-2); font-size: var(--taille-meta);
}
.demo h1 { margin: 0 auto 0 0; font-size: var(--taille-corps-fort); color: var(--c-texte); font-weight: 600; }
.demo fieldset { min-inline-size: 0; border: 0; margin: 0; padding: 0; display: flex; gap: var(--espace-1); align-items: center; flex-wrap: wrap; }
.demo legend { float: left; margin-right: var(--espace-2); }
.demo label {
  min-height: 40px; padding: 0 var(--espace-3); display: inline-flex; align-items: center;
  border: 1px solid var(--c-filet); border-radius: var(--rayon-rond); cursor: pointer; color: var(--c-texte-2);
}
.demo input { position: absolute; opacity: 0; pointer-events: none; }
.demo input:checked + span { color: var(--c-texte); }
.demo label:has(input:checked) { background: var(--c-surface-2); border-color: var(--c-contour); color: var(--c-texte); }
.demo label:has(input:focus-visible) { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* ---------- Cadre de la tablette ---------- */
.tablette {
  width: 1280px; height: 800px; margin: 0 auto var(--espace-6);
  background: var(--c-fond); border-radius: 20px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 60px auto minmax(0, 1fr) 64px;
  grid-template-areas: "liaison" "entete" "alertes" "corps" "nav";
  box-shadow: 0 0 0 10px #000, 0 30px 80px rgba(0, 0, 0, .6);
}

/* Bandeau d'état de la liaison : hors ligne, reconnexion, Veloce en panne */
.liaison { display: flex; padding: var(--espace-1) var(--espace-4); font-size: var(--taille-corps); font-weight: 500; align-items: center; gap: var(--espace-3); }
.liaison:not([data-etat]) { padding: 0; }
.liaison[data-etat="hors-ligne"] { background: var(--c-ambre); color: var(--c-sur-accent); }
.liaison[data-etat="reconnexion"] { background: var(--c-bleu-fond); color: var(--c-texte); }
.liaison[data-etat="retour"] { background: var(--c-vert-fond); color: var(--c-texte); }
.liaison[data-etat="veloce"] { background: var(--c-rouge-fond); color: var(--c-texte); }
.liaison strong { font-weight: 700; }
.liaison .tourne { width: 18px; height: 18px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(1turn); } }

/* ---------- En-tête ---------- */
.liaison { grid-area: liaison; } .entete { grid-area: entete; } .alertes { grid-area: alertes; } .corps { grid-area: corps; } .nav { grid-area: nav; }
.entete {
  display: flex; align-items: center; gap: var(--espace-3); padding: 0 var(--espace-4);
  background: var(--c-surface); border-bottom: 1px solid var(--c-filet);
}
.entete .titre { font-size: var(--taille-titre-3); font-weight: 700; letter-spacing: -.01em; }
.entete .qui { color: var(--c-texte-2); font-size: var(--taille-corps); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete .titre, .entete .droite { flex: none; }
.entete .qui b { color: var(--c-texte); font-weight: 600; }
.entete .droite { margin-left: auto; display: flex; align-items: center; gap: var(--espace-3); }
.sante {
  min-height: 40px; padding: 0 var(--espace-4); border-radius: var(--rayon-rond);
  display: inline-flex; align-items: center; gap: var(--espace-2);
  font-size: var(--taille-meta); font-weight: 500; border: 1px solid var(--c-filet); background: none; color: var(--c-texte-2);
}
.sante::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-vert); }
.sante[data-niveau="alerte"] { color: var(--c-texte); border-color: var(--c-rouge); background: var(--c-rouge-fond); }
.sante[data-niveau="alerte"]::before { background: var(--c-rouge); }
.sante[data-niveau="attente"]::before { background: var(--c-ambre); }
.heure { font-size: var(--taille-titre-2); font-weight: 600; }

/* ---------- Alertes ---------- */
.alertes { display: flex; gap: var(--espace-2); padding: var(--espace-2) var(--espace-4) 0; }
.alertes:empty { padding: 0; }
.alerte {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--espace-3);
  padding: var(--espace-2) var(--espace-3) var(--espace-2) var(--espace-4);
  background: var(--c-surface); border-radius: var(--rayon-panneau);
  border: 2px solid var(--c-accent);
}
.alerte[data-vue] { border-color: var(--c-contour); }
.alerte[data-type="echec"] { border-color: var(--c-rouge); }
.alerte .quoi { flex: 1; min-width: 0; }
.alerte .genre { font-size: var(--taille-meta); font-weight: 600; color: var(--c-accent); line-height: 1.3; }
.alerte[data-type="echec"] .genre { color: var(--c-rouge); }
.alerte .cible { font-size: var(--taille-corps-fort); font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alerte .detail { font-size: var(--taille-meta); color: var(--c-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alerte .actions { display: flex; gap: var(--espace-2); }
.alerte-plus {
  flex: none; min-width: var(--cible-service); padding: 0 var(--espace-4); border-radius: var(--rayon-panneau);
  border: 1px solid var(--c-contour); background: var(--c-surface); font-weight: 600; color: var(--c-texte);
}

/* ---------- Boutons ---------- */
.btn {
  min-height: var(--cible-service); min-width: var(--cible-service); padding: 0 var(--espace-5);
  border-radius: var(--rayon-bouton); border: 0; font-size: var(--taille-bouton, var(--taille-corps)); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  transition: transform var(--mouvement-rapide) var(--mouvement-courbe);
}
.btn:active { transform: scale(.97); }
.btn-principal { background: var(--c-accent); color: var(--c-sur-accent); }
.btn-second { background: transparent; color: var(--c-texte); box-shadow: inset 0 0 0 1px var(--c-contour); }
.btn-danger { background: transparent; color: var(--c-rouge); box-shadow: inset 0 0 0 1px var(--c-rouge); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
/* Un bouton principal désactivé devient neutre : l'orange à demi-opacité vire au brun */
.btn-principal[disabled] { opacity: 1; background: var(--c-surface-2); color: var(--c-texte-3); box-shadow: inset 0 0 0 1px var(--c-filet); }
/* Geste en vol : le bouton touché garde son apparence, atténuée, avec le curseur d'attente. Redite voulue de la règle
   de jetons.css : il faut la spécificité de .btn[…] pour primer sur .btn[disabled] ci-dessus */
.btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.btn-principal[aria-busy="true"] { background: var(--c-accent); color: var(--c-sur-accent); box-shadow: none; }

/* ---------- Corps ---------- */
.corps { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--espace-3); padding: var(--espace-2) var(--espace-4); min-height: 0; }
.panneau { background: var(--c-surface); border-radius: var(--rayon-panneau); min-height: 0; display: flex; flex-direction: column; }
.panneau > header { flex: none; display: flex; align-items: center; gap: var(--espace-3); padding: var(--espace-1) var(--espace-2) 0 var(--espace-3); min-height: var(--cible-minimum); }
.panneau h2 { margin: 0; font-size: var(--taille-titre-3); font-weight: 700; }
.panneau .aide { color: var(--c-texte-3); font-size: var(--taille-meta); }
.panneau .lien {
  margin-left: auto; min-height: var(--cible-minimum); padding: 0 var(--espace-3); display: inline-flex; align-items: center;
  border-radius: var(--rayon-bouton); color: var(--c-accent); font-weight: 600; text-decoration: none; font-size: var(--taille-corps);
}

/* ---------- Liste des tables ---------- */
.tables { display: grid; grid-template-columns: 76px 64px 60px 64px 88px 192px 116px minmax(0, 1fr); align-content: start; overflow-y: auto; min-height: 0; padding: 0 var(--espace-2) var(--espace-2); }
.tables[data-serveur] { grid-template-columns: 76px 88px 60px 80px 60px 88px 176px 104px minmax(0, 1fr); }
/* Largeurs mesurées dans les deux langues (U12, 2026-10-21) : « Arrival ▲ » et « Ordre ▲ » avec leur flèche de tri (76 px),
   la pastille d'étape (60 px), « Guests » (60 px), « 5:52 p.m. » sur une ligne (88 px), « ✓ 5:55 p.m. (3 min) » (176 et 192 px). */
/* Tablette de 1 180 px (mode appareil) : la colonne de droite cède 132 px, pour que « Alerte en cours » garde 100 px */
@media (max-width: 1279px) and (min-width: 761px) { .corps { grid-template-columns: minmax(0, 1fr) 268px; } }
/* Ma section : le détail de la table à droite (27 vw à 1 180 px, pour que les colonnes des tables gardent leur place) */
.corps-detail { grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 420px); }
.tables .ent, .tables .ligne { display: contents; }
.tables .ent > * { padding: var(--espace-1) var(--espace-2) var(--espace-2); font-size: var(--taille-meta); color: var(--c-texte-3); font-weight: 500; }
.tables .ent > [role="columnheader"]:has(.tri-colonne) { padding: 0; display: flex; align-items: end; }

/* En-tête de colonne triable (Tri, socle.js) : toute la cellule se touche ; ▲ croissant, ▼ décroissant */
.tri-colonne {
  min-height: var(--cible-minimum); width: 100%; display: inline-flex; align-items: center; gap: 4px; padding: var(--espace-1) var(--espace-2);
  background: none; border: 0; border-radius: var(--rayon-puce); font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.tri-colonne:hover { color: var(--c-texte-2); }
.tri-colonne[data-actif] { color: var(--c-texte); font-weight: 700; }
.tri-colonne .fleche { color: var(--c-accent); font-size: 1em; }
.tables .ligne > * {
  min-height: 54px; display: flex; align-items: center; padding: 0 var(--espace-2);
  border-top: 1px solid var(--c-filet); font-size: var(--taille-corps);
}
.tables .ligne > :first-child { border-top-left-radius: var(--rayon-bouton); border-bottom-left-radius: var(--rayon-bouton); }
.tables .ligne[aria-selected="true"] > * { background: var(--c-surface-active); border-top-color: transparent; }
.tables .ligne[aria-selected="true"] + .ligne > * { border-top-color: transparent; }
/* Ma section : une table libre de la section, en sourdine et sans geste (A-003) */
.tables .ligne[data-libre] > * { color: var(--c-texte-3); cursor: default; }
.tables .ligne[data-libre] .num { font-weight: 600; min-height: 0; display: inline-flex; align-items: center; }
/* Choix du quart : Début de quart (quart à préparer) et Ma section (filtre), mise à jour 193 */
.filtre-quart select, .choix-quart select {
  min-height: var(--cible-minimum); max-width: 100%; padding: 0 var(--espace-3); border-radius: var(--rayon-bouton);
  border: 1px solid var(--c-contour); background: var(--c-surface-2); color: var(--c-texte); font: inherit;
}
.filtre-quart select[disabled] { opacity: .6; }
/* Ma section : toute la rangée choisit la table (tables.js) */
.corps-detail .tables .ligne > * { cursor: pointer; }
.tables .ordre { color: var(--c-texte-3); font-weight: 600; }
.tables .num {
  font-size: var(--taille-chiffre); font-weight: 700; letter-spacing: -.02em; line-height: 1;
  background: none; border: 0; text-align: left; white-space: nowrap;
  min-height: var(--cible-minimum); min-width: var(--cible-minimum); padding: 0; /* cible de 48 × 48 (A-29), dessin inchangé */
}
.tables .num small { display: block; font-size: var(--taille-meta); font-weight: 600; color: var(--c-texte-2); letter-spacing: 0; line-height: 1.1; }
.tables .num[data-long] { font-size: var(--taille-titre-3); }
.tables .num[data-tres-long] { white-space: normal; } /* tables jointes de la mezzanine : « 204 + 205 » passe à la ligne */
.tables .assise, .tables .clients, .tables .serveur { color: var(--c-texte-2); }

/* Étape du service lue dans Veloce : B, E, P, $. Une pastille ronde, lisible d'un coup d'œil ; le $ (addition
   demandée) est en aplat orange, parce qu'il demande un geste du serveur */
.tables .etape-c { position: relative; overflow: visible; }
.etape {
  width: var(--cible-minimum); height: var(--cible-minimum); flex: none; border-radius: var(--rayon-rond);
  display: inline-grid; place-items: center; padding: 0; font-size: var(--taille-titre-3); font-weight: 700; line-height: 1;
  background: var(--c-surface-2); border: 2px solid var(--c-contour); color: var(--c-texte);
}
.etape[data-vide] { background: none; border-color: transparent; color: var(--c-texte-3); font-weight: 500; }
.etape[data-addition] {
  background: var(--c-accent); border-color: var(--c-accent); color: var(--c-sur-accent); font-weight: 800;
  box-shadow: 0 0 0 4px var(--c-accent-fond);
}
.etape[data-nouvelle] { animation: addition 1.6s var(--mouvement-courbe) 3; }
@keyframes addition { 50% { box-shadow: 0 0 0 8px var(--c-accent-fond); } }
.etape[aria-expanded="true"] { outline: 3px solid var(--c-texte); outline-offset: 2px; }

/* Bulle des étapes (Main) : sous la pastille, au-dessus des rangées suivantes ; placée par placerBulle (tables.js) */
.bulle-etapes {
  position: fixed; z-index: 15; top: 0; left: 0; width: 340px; display: grid; gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-4); background: var(--c-surface); border: 1px solid var(--c-contour);
  border-radius: var(--rayon-bouton); box-shadow: 0 12px 32px rgb(0 0 0 / .45);
}
.bulle-etapes > b { font-size: var(--taille-corps-fort); }

/* Ligne de temps des étapes : B, puis E, puis P, puis $, avec l'heure de chacune */
.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.frise li { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.frise li + li::before { /* trait vers l'étape précédente */
  content: ""; position: absolute; top: 19px; right: 50%; width: 100%; height: 3px; background: var(--c-contour); z-index: 0;
}
.frise li:is([data-etat="vue"], [data-etat="courante"], [data-etat="sautee"])::before { background: var(--c-texte-3); }
.frise .rond {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: var(--rayon-rond); display: grid; place-items: center;
  font-size: var(--taille-corps-fort); font-weight: 700; background: var(--c-surface-2); border: 2px dashed var(--c-contour); color: var(--c-texte-3);
}
.frise .lib { font-size: var(--taille-meta); color: var(--c-texte-3); font-weight: 500; }
.frise .h { font-size: var(--taille-meta); color: var(--c-texte-2); font-weight: 600; min-height: 1.3em; }
.frise [data-etat="vue"] .rond { border-style: solid; border-color: var(--c-texte-3); background: var(--c-surface-active); color: var(--c-texte); }
.frise [data-etat="courante"] .rond { border-style: solid; border-color: var(--c-texte); background: var(--c-texte); color: var(--c-fond); }
.frise [data-etat="courante"] :is(.lib, .h) { color: var(--c-texte); font-weight: 700; }
.frise [data-etat="courante"][data-addition] .rond { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-sur-accent); }
.frise [data-etat="sautee"] .h { color: var(--c-texte-3); font-weight: 500; }
.resume-etape { margin: 0; color: var(--c-texte-2); }
.resume-etape .pas-a-jour { color: var(--c-rouge); }
.etapes-table { display: grid; gap: var(--espace-3); padding: var(--espace-3) var(--espace-4); background: var(--c-surface-2); border-radius: var(--rayon-bouton); }
.etapes-table h3 { margin: 0; font-size: var(--taille-corps-fort); display: flex; align-items: baseline; gap: var(--espace-2); }
.etapes-table h3 .aide { font-size: var(--taille-meta); font-weight: 500; color: var(--c-texte-3); }
.etapes-table .frise .rond { background: var(--c-surface); }
.etapes-table .frise [data-etat="vue"] .rond { background: var(--c-surface-active); }
.etapes-table .frise [data-etat="courante"] .rond { background: var(--c-texte); }
.etapes-table .frise [data-etat="courante"][data-addition] .rond { background: var(--c-accent); }

/* Premier contact : une vraie cible tactile, pas une petite case */
.contact {
  min-height: var(--cible-minimum); width: 100%; padding: 0 var(--espace-3); border-radius: var(--rayon-bouton);
  display: inline-flex; align-items: center; gap: var(--espace-2); text-align: left;
  background: var(--c-surface-2); border: 2px solid var(--c-contour); font-weight: 600; color: var(--c-texte);
}
.contact { white-space: nowrap; }
.contact .case { width: 22px; height: 22px; flex: none; border: 2px solid currentColor; border-radius: 6px; }
.contact[data-retard] { border-color: var(--c-rouge); color: var(--c-rouge); background: var(--c-rouge-fond); }
.contact[data-fait] { white-space: nowrap; background: none; border-color: transparent; padding-left: 0; color: var(--c-texte-2); font-weight: 500; cursor: default; }
.contact[data-fait] .coche { color: var(--c-vert); font-weight: 700; }

/* Chrono : le temps écoulé est l'information principale de la ligne */
.chrono { flex-direction: column; align-items: stretch !important; justify-content: center; gap: 5px; }
.chrono .duree { font-size: var(--taille-chiffre); font-weight: 700; line-height: 1; letter-spacing: -.02em; } /* chiffre clé (B-13) */
.chrono[data-niveau="ambre"] .duree { color: var(--c-ambre); }
.chrono[data-niveau="rouge"] .duree { color: var(--c-rouge); }
.sejour { position: relative; height: 6px; border-radius: 3px; background: var(--c-surface-2); }
.sejour i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--c-texte-3); }
.chrono[data-niveau="ambre"] .sejour i { background: var(--c-ambre); }
.chrono[data-niveau="rouge"] .sejour i { background: var(--c-rouge); }
.sejour b { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--c-fond); }

.statut { font-size: var(--taille-corps); font-weight: 600; gap: var(--espace-2); min-width: 0; }
.statut span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statut::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: transparent; }
.statut[data-ton="accent"] { color: var(--c-accent); }
.statut[data-ton="accent"]::before { background: var(--c-accent); }
.statut[data-ton="rouge"] { color: var(--c-rouge); }
.statut[data-ton="rouge"]::before { background: var(--c-rouge); }
.statut[data-ton="calme"] { color: var(--c-texte-3); font-weight: 500; }

/* Squelette de chargement */
.squelette > * { color: transparent !important; }
.squelette > *::after { content: ""; display: block; height: 16px; width: 70%; border-radius: 4px; background: var(--c-surface-2); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* Message plein panneau : vide, erreur */
.message { margin: auto; max-width: 440px; text-align: center; padding: var(--espace-5) var(--espace-4); }
.message h3 { margin: 0 0 var(--espace-2); font-size: var(--taille-titre-3); }
.message p { margin: 0 0 var(--espace-4); color: var(--c-texte-2); }

/* ---------- Colonne de droite : Cuisine ---------- */
.droite-col { display: flex; flex-direction: column; gap: var(--espace-3); min-height: 0; }
.confirmer { display: flex; flex-direction: column; gap: var(--espace-2); }
.confirmer:empty { display: none; }
.a-confirmer {
  min-height: var(--cible-ligne); width: 100%; padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-panneau);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--espace-3); text-align: left; border: 2px solid;
}
.a-confirmer[data-sens="86"] { background: var(--c-rouge-fond); border-color: var(--c-rouge); }
.a-confirmer[data-sens="dispo"] { background: var(--c-vert-fond); border-color: var(--c-vert); }
.a-confirmer .genre { font-size: var(--taille-corps); font-weight: 700; } /* « Nouveau 86 », « De retour » : état critique, jamais en taille meta (A-30) */
.a-confirmer[data-sens="86"] .genre { color: var(--c-rouge); }
.a-confirmer[data-sens="dispo"] .genre { color: var(--c-vert); }
.a-confirmer .item { font-size: var(--taille-corps-fort); font-weight: 700; grid-column: 1; }
.a-confirmer .geste { grid-row: 1 / span 2; grid-column: 2; font-size: var(--taille-meta); font-weight: 600; color: var(--c-texte-2); }

.listes { padding: 0 var(--espace-3) var(--espace-2); display: flex; flex-direction: column; gap: var(--espace-3); overflow-y: auto; min-height: 0; }
.listes h3 { margin: 0 0 var(--espace-1); font-size: var(--taille-corps); font-weight: 600; color: var(--c-texte-2); display: flex; justify-content: space-between; }
.listes h3[data-ton="accent"] { color: var(--c-accent); }
.listes ul { list-style: none; margin: 0; padding: 0; }
.listes li { display: flex; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-2) 0; border-top: 1px solid var(--c-filet); }
.listes li .h { color: var(--c-texte-3); font-size: var(--taille-meta); white-space: nowrap; }
.listes li .consigne { display: block; color: var(--c-texte-3); font-size: var(--taille-meta); }
.listes .nondispo li > span:first-child { text-decoration: line-through; text-decoration-color: var(--c-rouge); text-decoration-thickness: 2px; }
.listes .vide { color: var(--c-texte-3); font-size: var(--taille-meta); padding: var(--espace-2) 0; border-top: 1px solid var(--c-filet); }
.portion { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 4px var(--espace-3); padding: var(--espace-2) 0; border-top: 1px solid var(--c-filet); align-items: center; }
.portion .reste { text-align: right; font-weight: 700; }
.portion[data-bas] .reste { color: var(--c-ambre); }
.portion .jauge { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--c-surface-2); overflow: hidden; }
.portion .jauge i { display: block; height: 100%; background: var(--c-texte-3); }
.portion[data-bas] .jauge i { background: var(--c-ambre); }

/* ---------- Détail d'une table (Ma section) ---------- */
.panneau.detail { padding: var(--espace-3); gap: var(--espace-2); overflow-y: auto; }
.panneau.detail .tete { display: flex; align-items: baseline; gap: var(--espace-3); }
.panneau.detail .tete h2 { font-size: var(--taille-titre-1); }
.panneau.detail .tete .chrono-t { margin-left: auto; font-size: var(--taille-titre-2); font-weight: 700; }
.panneau.detail .faits { color: var(--c-texte-2); margin: 0; }
.pivot { background: var(--c-surface-2); border-radius: var(--rayon-bouton); padding: var(--espace-3) var(--espace-4); }
.pivot .haut { display: flex; justify-content: space-between; align-items: center; gap: var(--espace-3); margin-bottom: var(--espace-1); }
.pivot .haut b { font-size: var(--taille-corps-fort); }
.pivot .nom-pivot { display: flex; align-items: center; gap: var(--espace-2); }
.langue-client { font-size: var(--taille-meta); font-weight: 700; letter-spacing: 0.04em; padding: 1px var(--espace-2); border: 1.5px solid var(--c-texte-3); border-radius: var(--rayon-puce); color: var(--c-texte-2); }
.langue-client[data-langue="en"] { border-color: var(--c-accent); color: var(--c-accent); }
.puce { font-size: var(--taille-meta); font-weight: 600; padding: 3px var(--espace-2); border-radius: var(--rayon-puce); background: var(--c-surface-active); color: var(--c-texte-2); }
.puce[data-ton="accent"] { background: var(--c-accent); color: var(--c-sur-accent); }
.puce[data-ton="rouge"] { background: var(--c-rouge-fond); color: var(--c-rouge); }
.pivot .alcool-place { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--espace-2); margin-bottom: var(--espace-2); }
.pivot .alcool-place .btn { width: auto; }
.pivot ul { list-style: none; margin: 0; padding: 0; }
.pivot li { display: flex; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-1) 0; }
.pivot li .etat { color: var(--c-texte-3); font-size: var(--taille-meta); white-space: nowrap; }
.pivot li .etat[data-ton="accent"] { color: var(--c-accent); font-weight: 600; }
.geste-requis { border: 2px solid var(--c-accent); border-radius: var(--rayon-bouton); padding: var(--espace-3) var(--espace-4); display: grid; gap: var(--espace-3); }
.geste-requis p { margin: 0; }
.geste-requis .boutons { display: grid; grid-template-columns: 2fr 1fr; gap: var(--espace-2); }
.geste-requis .boutons > :only-child { grid-column: 1 / -1; }
.panneau.detail .autres { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-2); }
.panneau.detail .autres > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* un bouton seul sur sa rangée : toute la largeur */
.panneau.detail .note { margin: 0; color: var(--c-texte-3); font-size: var(--taille-meta); }

/* Onglets des serveurs */
.onglets { display: flex; gap: var(--espace-2); margin-left: var(--espace-3); }
.onglets button {
  min-height: var(--cible-minimum); padding: 0 var(--espace-4); border-radius: var(--rayon-rond);
  border: 1px solid var(--c-contour); background: none; font-weight: 600; color: var(--c-texte-2);
}
.onglets button[aria-selected="true"] { background: var(--c-texte); color: var(--c-fond); border-color: var(--c-texte); }

/* ---------- Barre de navigation ---------- */
.nav { display: flex; align-items: center; gap: var(--espace-1); padding: 0 var(--espace-3); background: var(--c-surface); border-top: 1px solid var(--c-filet); }
.nav a {
  flex: 1 1 0; min-height: var(--cible-service); padding: 0 var(--espace-3); display: flex; align-items: center; justify-content: center; gap: var(--espace-2);
  border-radius: var(--rayon-bouton); color: var(--c-texte-2); font-weight: 600; text-decoration: none; font-size: var(--taille-corps); white-space: nowrap;
}
.nav a[aria-current="page"] { background: var(--c-accent); color: var(--c-sur-accent); }
/* Ground Control et Apollo : des onglets de classeur plutôt que des boutons. L'onglet actif prolonge l'écran (même
   fond, sans filet au-dessus), marqué d'une barre orange ; les autres restent sur la bande, séparés par un filet.
   Mission Control garde sa navigation de côté (.poste .nav, gestion.css). */
:not(.poste) > .nav { align-items: stretch; gap: 0; padding: 0 var(--espace-2) var(--espace-2); }
:not(.poste) > .nav a {
  position: relative; border-radius: 0 0 var(--rayon-bouton) var(--rayon-bouton);
  border: 1px solid transparent; border-top: 0; color: var(--c-texte-2); font-weight: 500;
}
:not(.poste) > .nav a + a::before {
  content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--c-filet);
}
/* L'onglet actif se repère d'un coup d'œil : fond teinté d'orange, contour orange, barre de 6 px, texte plus gros */
:not(.poste) > .nav a[aria-current="page"] {
  margin-top: -1px; color: var(--c-texte); font-weight: 700; font-size: var(--taille-corps-fort);
  background: var(--c-surface-active); background: color-mix(in srgb, var(--c-accent) 20%, var(--c-fond));
  border-color: var(--c-accent); box-shadow: inset 0 6px 0 var(--c-accent);
}
:not(.poste) > .nav a[aria-current="page"]::before,
:not(.poste) > .nav a[aria-current="page"] + a::before { display: none; }
:not(.poste) > .nav a:not([aria-current]):hover { color: var(--c-texte); }
:not(.poste) > .nav a:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.nav .pastille { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 12px; background: var(--c-rouge); color: var(--c-sur-rouge); font-size: var(--taille-meta); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nav a[hidden] { display: none; }

/* ---------- Composants partagés par tous les écrans ---------- */
.demo .note { color: var(--c-texte-3); font-weight: 400; }

/* Avis : confirmation d'un geste, avec Annuler au besoin */
.avis {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: var(--espace-4); padding: var(--espace-2) var(--espace-2) var(--espace-2) var(--espace-5);
  background: var(--c-texte); color: var(--c-fond); border-radius: var(--rayon-bouton); font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px);
}
.avis[hidden] { display: none; }
.avis .btn { background: var(--c-fond); color: var(--c-texte); }
/* Refus d'un geste (A-33) : reste jusqu'à « Fermer », framboise, un signe en plus de la couleur ; distinct d'un succès */
.avis[data-refus] { bottom: 110px; background: var(--c-rouge-fond); color: var(--c-texte); border: 2px solid var(--c-rouge); max-width: min(720px, calc(100vw - 32px)); }
.avis[data-refus] .signe {
  flex: none; width: 32px; height: 32px; border-radius: var(--rayon-rond); display: grid; place-items: center;
  background: var(--c-rouge); color: var(--c-sur-rouge); font-weight: 800;
}
.avis[data-refus] .btn { background: transparent; color: var(--c-texte); box-shadow: inset 0 0 0 1px var(--c-contour); min-height: var(--cible-minimum); }
/* Avertissement avant le verrouillage d'inactivité (A-32) */
.avis[data-verrou] { top: 50%; bottom: auto; transform: translate(-50%, -50%); padding: var(--espace-5) var(--espace-6); background: var(--c-surface); color: var(--c-texte); border: 2px solid var(--c-accent); font-size: var(--taille-corps-fort); }

/* Boîte de dialogue (boiteDialogue, socle.js) : Libérer la table (Accueil) ; Réattribuer et Retirer la table (Ma section) */
.dlg {
  width: min(520px, calc(100vw - 32px)); padding: var(--espace-5); border: 1px solid var(--c-contour); border-radius: var(--rayon-panneau);
  background: var(--c-surface); color: var(--c-texte);
}
.dlg::backdrop { background: color-mix(in srgb, var(--c-fond) 80%, transparent); }
.dialogue-gc h2 { margin: 0 0 var(--espace-2); font-size: var(--taille-titre-3); }
.dialogue-gc .aide { margin: 0 0 var(--espace-4); color: var(--c-texte-2); }
.dialogue-gc .champ { display: flex; flex-direction: column; gap: var(--espace-1); margin-bottom: var(--espace-5); font-weight: 600; color: var(--c-texte-2); }
.dialogue-gc .champ input {
  min-height: var(--cible-service); padding: 0 var(--espace-3); border-radius: var(--rayon-bouton); border: 1px solid var(--c-contour);
  background: var(--c-surface-2); color: var(--c-texte); font: inherit; font-weight: 400;
}
.dialogue-gc .boutons { display: grid; grid-template-columns: 1fr 2fr; gap: var(--espace-2); }
.dialogue-gc .boutons > :only-child { grid-column: 1 / -1; }
.dialogue-gc .choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-2); margin-bottom: var(--espace-5); }
.dialogue-gc .choix .btn { min-height: var(--cible-service); flex-direction: column; line-height: 1.2; }
.dialogue-gc .choix small { font-weight: 400; color: var(--c-texte-2); }

/* Bandeau réel de la liaison en mode branché (A-31) : connexion coupée (ambre) ou lecture refusée (rouge) */
.liaison[data-etat="coupure"] { background: var(--c-ambre); color: var(--c-sur-accent); }
.liaison[data-etat="refus"] { background: var(--c-rouge-fond); color: var(--c-texte); }
.liaison .btn-liaison { flex: none; margin-left: auto; min-height: var(--cible-minimum); background: var(--c-sur-accent); color: var(--c-texte); }

/* « Changer de personne » (A-32) : un vrai bouton dans l'en-tête, 56 px sur les tablettes */
.changer-personne, .changer-langue { min-height: var(--cible-service); white-space: nowrap; }
.changer-langue { min-width: var(--cible-service); font-weight: 700; } /* FR / EN (mise à jour 85) */

/* ---------- Mode appareil (A-32, C-22) ----------
   Vraie tablette ou Mac de la cuisine : tout l'écran, sans cadre ni bandeau de démonstration (socle.js, Mode). */
html[data-mode="appareil"] .demo { display: none; }
html[data-mode="appareil"] body { background: var(--c-fond); }
/* Barre d'état de l'iPad (heure, pile), floutée par-dessus la page depuis iPadOS 26 : l'écran commence dessous.
   viewport-fit=cover dans chaque page ; la marge vaut 0 là où il n'y a pas de barre (Mac, navigateur). */
html[data-mode="appareil"] body > .tablette, html[data-mode="appareil"] body > .poste { padding-top: env(safe-area-inset-top, 0px); }
@media (min-width: 761px) {
  html[data-mode="appareil"] body .tablette { width: auto; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
}
@media (min-width: 901px) {
  html[data-mode="appareil"] body .poste { width: auto; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
}

/* Squelettes de chargement d'un panneau */
.squelettes { display: flex; flex-direction: column; gap: var(--espace-2); padding: var(--espace-2) var(--espace-3); }
.squelette-ligne { height: 40px; border-radius: var(--rayon-bouton); background: var(--c-surface-2); animation: pulse 1.4s ease-in-out infinite; }

/* Sous-onglets d'un écran (Vue Manager, mode du Menu) : une barre segmentée sous l'en-tête */
.sous-onglets { display: flex; gap: var(--espace-1); padding: var(--espace-1); background: var(--c-surface-2); border-radius: var(--rayon-bouton); }
.sous-onglets a, .sous-onglets button {
  min-height: var(--cible-minimum); padding: 0 var(--espace-4); display: inline-flex; align-items: center; gap: var(--espace-2);
  border: 0; border-radius: 9px; background: none; color: var(--c-texte-2); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.sous-onglets [aria-current="page"], .sous-onglets [aria-selected="true"], .sous-onglets [aria-pressed="true"] { background: var(--c-texte); color: var(--c-fond); }

/* Filtres en pastilles (Ma section / Tous, À traiter / En cours / Toutes) : même code que les onglets de serveurs */
.filtres { display: flex; gap: var(--espace-2); flex-wrap: wrap; }
.filtres button {
  min-height: var(--cible-minimum); padding: 0 var(--espace-4); border-radius: var(--rayon-rond);
  border: 1px solid var(--c-contour); background: none; font-weight: 600; color: var(--c-texte-2);
}
.filtres button[aria-pressed="true"] { background: var(--c-texte); color: var(--c-fond); border-color: var(--c-texte); }
/* Case « Afficher les éléments retirés et désactivés » (Inactifs, design/socle.js) : sous les filtres, cochée par la personne */
.case-inactifs { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: var(--cible-minimum); color: var(--c-texte-2); font-weight: 500; cursor: pointer; }
.case-inactifs input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--c-accent); cursor: pointer; }

/* Puces d'état génériques : data-ton = accent | rouge | ambre | vert | bleu | calme */
.puce[data-ton="ambre"] { background: var(--c-ambre-fond); color: var(--c-ambre); }
.puce[data-ton="vert"] { background: var(--c-vert-fond); color: var(--c-vert); }
.puce[data-ton="bleu"] { background: var(--c-bleu-fond); color: var(--c-bleu); }

/* Allergènes en quatre états (décision menus du 2026-10-15) : le mot et la forme, jamais la couleur seule */
.allergenes { display: flex; flex-wrap: wrap; gap: var(--espace-2); list-style: none; margin: 0; padding: 0; }
.allergene {
  min-height: 36px; padding: var(--espace-1) var(--espace-3); border-radius: var(--rayon-puce);
  display: inline-flex; align-items: center; gap: var(--espace-2); font-size: var(--taille-corps); font-weight: 600; border: 2px solid;
}
.allergene .etat { font-size: var(--taille-corps); font-weight: 600; } /* mot d'état d'un allergène : jamais en taille meta (A-30) */
.allergene[data-etat="present"] { background: var(--c-rouge); color: var(--c-sur-rouge); border-color: var(--c-rouge); }
.allergene[data-etat="present"]::before { content: "■"; }
.allergene[data-etat="traces"] { background: var(--c-ambre-fond); color: var(--c-ambre); border-color: var(--c-ambre); }
.allergene[data-etat="traces"]::before { content: "▲"; }
.allergene[data-etat="a-confirmer"] { background: none; color: var(--c-texte); border-color: var(--c-contour); border-style: dashed; }
.allergene[data-etat="a-confirmer"]::before { content: "?"; font-weight: 800; color: var(--c-ambre); }
.allergene[data-etat="non-verifie"] { background: none; color: var(--c-texte-2); border-color: var(--c-contour); border-style: dotted; }
.allergene[data-etat="non-verifie"]::before { content: "?"; font-weight: 800; }
.bandeau-allergie { padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-bouton); background: var(--c-rouge-fond); border: 2px solid var(--c-rouge); }
.bandeau-allergie strong { color: var(--c-rouge); }

/* Grille de données générique : lignes de 56 px, en-têtes en casse de phrase */
.grille { display: grid; grid-auto-rows: max-content; align-content: start; overflow-y: auto; min-height: 0; padding: 0 var(--espace-2) var(--espace-2); }
.grille .ent, .grille .ligne { display: contents; }
.grille .ent > * { padding: var(--espace-1) var(--espace-2) var(--espace-2); font-size: var(--taille-meta); color: var(--c-texte-3); font-weight: 500; }
.grille .ligne > * { min-height: var(--cible-service); display: flex; align-items: center; gap: var(--espace-2); padding: 0 var(--espace-2); border-top: 1px solid var(--c-filet); }

/* État 86 d'un plat (Menu, Ingrédients) : « Non dispo (86) », jamais en taille meta (A-30, A-34) */
.tablette :is(.plat, .resultat) .nd { font-size: var(--taille-corps); }

/* Cibles de 48 px (A-29) sur les écrans branchés qui partagent ecran-manager.css (Début de quart, Signes vitaux) */
.tablette a.tuile { min-height: var(--cible-minimum); }
@media (max-width: 1279px) and (min-width: 761px) {
  .tablette .plan .tables-plan { grid-template-columns: repeat(auto-fill, minmax(var(--cible-minimum), 1fr)); gap: var(--ecart-minimum); }
}

/* Accès réservé (écran Manager vu par un serveur) */
.reserve { margin: auto; text-align: center; max-width: 460px; }

/* ---------- Téléphone en portrait (Devis 09) ---------- */
@media (max-width: 1300px) {
  .tablette { width: auto; margin: 0 var(--espace-4) var(--espace-6); }
}
@media (max-width: 760px) {
  .tablette { height: auto; min-height: 100vh; margin: 0; border-radius: 0; box-shadow: none; grid-template-rows: none; grid-template-areas: none; display: flex; flex-direction: column; }
  .entete { flex-wrap: wrap; padding: var(--espace-3) var(--espace-4); gap: var(--espace-2) var(--espace-4); }
  .entete .droite { margin-left: 0; width: 100%; justify-content: space-between; }
  .onglets { margin: 0; overflow-x: auto; width: 100%; }
  .alertes { flex-direction: column; padding: var(--espace-3) var(--espace-4) 0; }
  .alerte .detail { white-space: normal; }
  .corps { grid-template-columns: 1fr; padding: var(--espace-3) var(--espace-4); }
  .panneau > header { flex-wrap: wrap; }
  .alerte { flex-wrap: wrap; }
  .alerte .quoi { flex-basis: 100%; }
  .alerte .cible { white-space: normal; }
  .alerte .genre { display: block; margin: 0; }
  .alerte .actions { width: 100%; }
  .alerte .actions .btn { flex: 1; }
  .alerte-plus { min-height: var(--cible-minimum); }
  .tables, .tables[data-serveur] { display: flex; flex-direction: column; }
  .tables .ent { display: none; }
  .tables .ligne {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: var(--espace-3); row-gap: var(--espace-2);
    grid-template-areas: "num contact chrono" "etape statut statut"; padding: var(--espace-3) var(--espace-2); border-top: 1px solid var(--c-filet);
  }
  .tables .ligne > * { border-top: 0; min-height: 0; padding: 0; }
  .tables .ordre, .tables .assise, .tables .serveur, .tables .clients { display: none !important; }
  .tables .ligne > div:has(.num) { grid-area: num; }
  .tables .contact-c { grid-area: contact; }
  .tables .etape-c { grid-area: etape; }
  .bulle-etapes { width: min(340px, calc(100vw - 72px)); }
  .tables .chrono { grid-area: chrono; min-width: 80px; }
  .tables .contact .delai { display: none; }
  .tables .contact { white-space: normal; line-height: 1.2; }
  .a-confirmer { grid-template-columns: 1fr; }
  .a-confirmer .geste { grid-row: auto; grid-column: 1; }
  .tables .statut { grid-area: statut; padding-top: var(--espace-2); }
  .tables .statut[data-ton="calme"]:has(span:empty) { display: none; }
  .tables .ligne[aria-selected="true"] { background: var(--c-surface-active); border-radius: var(--rayon-bouton); }
  .nav { position: sticky; bottom: 0; overflow-x: auto; padding: var(--espace-2); }
  .nav a { flex: none; padding: 0 var(--espace-4); }
  .demo { padding: var(--espace-3) var(--espace-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Bouton « ? » des feuilles d'aide (design/socle.js, poserBoutonAide) ; le mode aide lui-même est dans design/aide.css */
.entete [data-aide] {
  flex: none; width: var(--cible-minimum); height: var(--cible-minimum); padding: 0; display: inline-grid; place-items: center;
  border: 2px solid var(--c-accent); border-radius: var(--rayon-rond); background: transparent; color: var(--c-texte);
  font: var(--graisse-gras) var(--taille-titre-3)/1 var(--police); cursor: pointer;
}

/* Messages tout prêts (mise à jour 192) : détail d'une table et onglet Messages ; le canal nommé quand ce n'est pas #service */
.prets-table h3 { margin: 0 0 var(--espace-2); font-size: var(--taille-corps-fort); }
.prets-table h3 .aide { font-weight: 400; font-size: var(--taille-meta); color: var(--c-texte-3); }
.prets-table .prets { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
button.pret {
  flex: none; min-height: var(--cible-minimum); padding: 0 var(--espace-4); border-radius: var(--rayon-rond);
  border: 1px solid var(--c-contour); background: var(--c-surface-2); color: var(--c-texte); font-weight: 600; max-width: 100%;
}
button.pret[disabled] { opacity: .45; cursor: not-allowed; }
button.pret .canal-pret { font-weight: 400; font-size: var(--taille-meta); color: var(--c-accent); }

/* Norme B-13 avec les espacements denses : sur les tablettes, deux cibles voisines gardent 8 px d'écart */
.tablette :is(.filtres, .onglets, .boutons, .actions, .choix, .confirmer, .autres, .prets, .alerte .actions, .ligne-actions) { gap: var(--ecart-minimum); }