/* ==========================================================================
   ÉCRAN — SERVICE EN SALLE (bar à vin)

   Sa propre feuille, comme le veut la charte : un écran qui s'ajoute à la
   queue de modele-erp.css entre en conflit avec tous les autres sur la
   dernière ligne du fichier et sur la clé de cache, jamais sur le fond.

   UN SEUL ÉCRAN, DÉSORMAIS
     Cette feuille ne sert plus que LE PLAN DE SALLE TACTILE (/caisse/salle).

     Elle en servait trois : le paramétrage du bar (/app/pos/bar) et la file des
     commandes de l'application (/app/pos/commandes) lui empruntaient ses
     modales. C'était exactement ce que la règle interdit — deux écrans de
     back-office dépendant de la feuille d'un écran tactile pour s'afficher, et
     une modale de plein écran héritée par des dialogues qui n'en demandaient
     pas tant.

     Le portage de ces deux écrans sur le gabarit (bascule du 2026-08-20) a
     coupé le lien : ils utilisent maintenant la modale du gabarit, qui n'existait
     pas encore quand cette feuille a été écrite. Les classes .salle-* qui restent
     ici ne servent qu'au plein écran du plan de salle et n'ont pas d'équivalent
     gabarit : elles sont taillées pour le doigt, pas pour la souris.

     Le jour où l'une d'elles est reprise par un écran d'un AUTRE domaine, elle
     monte dans le gabarit (modele-erp.css §11) — jamais l'inverse.

   LES DEUX ÉTAGES DE MODALE RESTENT, ET C'EST VOULU
     Le corps garde la base neutre du §7 et l'habillage POS du §8, qui ne
     s'applique qu'à l'intérieur de `.salle-plein-ecran`. Le §7 n'a plus qu'un
     consommateur, mais l'étage sépare toujours ce qui est structure de ce qui
     est habillage sombre : les fondre reviendrait à recoller le doigt et la
     souris dans la même règle.

   LE PLAN DE SALLE EST DU MÊME MÉTIER QUE LE COMPTOIR
     Il emprunte à caisse.css le rail de navigation, le bandeau et les toasts
     (`.caisse-rail`, `.rail-*`, `.bandeau-*`, `.caisse-toast*`) : un serveur qui
     passe de /caisse à /caisse/salle ne doit pas changer d'univers. Les jetons
     --cai-* sont déclarés là-bas pour les deux plein-écrans — une seule source
     de vérité pour la charte du POS.

   AUCUNE COULEUR EN DUR hors des voiles de modale et des teintes d'état
   dérivées de l'accent (rgba de l'orange de charte), qui n'ont pas de jeton.

   LA CONTRAINTE N'EST PAS L'ÉCRAN, C'EST LE DOIGT
     Les tuiles de table font 128 px de côté et les boutons d'action 56 px de
     haut : en dessous, un serveur qui traverse la salle tape à côté. Ces deux
     valeurs suivent la densité du poste, comme au comptoir.

   AUCUN :hover, AUCUNE TRANSITION SUR LES BOUTONS
     Règle d'origine du POS (caisse.css) : pas de souris, et un retour qui doit
     être instantané. On utilise :active, qui correspond au doigt posé.
   ========================================================================== */

/* ==========================================================================
   §1 — PLEIN ÉCRAN, JETONS PROPRES À LA SALLE
   ========================================================================== */

.salle-plein-ecran {
    /* Cibles tactiles propres au plan de salle. Les jetons --cai-* (couleurs,
       hauteurs du comptoir) viennent de caisse.css. */
    --sal-tuile: 132px;
    --sal-addition-l: 420px;

    position: fixed;
    inset: 0;
    display: flex;              /* rail | zone principale, comme le comptoir */
    flex-direction: row;
    background: var(--cai-fond);
    color: var(--cai-texte);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Un double appui rapide ne doit pas zoomer : c'est le geste du serveur pressé. */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}

.salle-plein-ecran[data-densite="compact"] { --sal-tuile: 112px; --sal-addition-l: 380px; }
.salle-plein-ecran[data-densite="large"]   { --sal-tuile: 156px; --sal-addition-l: 460px; }

.salle-principal {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* ==========================================================================
   §2 — BANDEAU
   Même anatomie que le comptoir (`.bandeau-lieu`, `.pdv-chip`, `.et-reseau`,
   `.bandeau-outils`, `.bandeau-caissier` viennent de caisse.css) ; seul le
   conteneur est redéfini, la salle n'ayant ni verrou ni afficheur.
   ========================================================================== */

.salle-bandeau {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--cai-surface);
    border-bottom: 1px solid var(--cai-bord);
    min-height: 52px;
    flex: 0 0 auto;
}

.salle-horloge {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--cai-texte-faible);
}

/* Bouton d'outil du bandeau — l'équivalent salle de .caisse-btn-secondaire. */
.salle-outil {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0 0.7rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.salle-outil:active { background: var(--cai-bord); }
.salle-outil:disabled { color: var(--cai-texte-faible); }

/* État de la session de caisse : c'est ce qui autorise, ou non, l'encaissement. */
.salle-session {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--cai-bord);
    color: var(--cai-texte-faible);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.salle-session .et-pastille { width: 8px; height: 8px; border-radius: 50%; background: #3fbf6a; }
.salle-session.on { color: #3fbf6a; border-color: rgba(63, 191, 106, 0.5); }
.salle-session.off { color: var(--cai-danger); border-color: rgba(214, 69, 69, 0.5); }
.salle-session.off .et-pastille { background: var(--cai-danger); }

/* ==========================================================================
   §3 — FAITS SAILLANTS
   Ce qu'un chef de rang regarde en levant les yeux : combien de tables tournent,
   combien de couverts sont assis, ce qui est en jeu, et quelle table attend
   depuis trop longtemps. Aucune de ces valeurs n'est cliquable : c'est un
   tableau de bord, pas un menu.
   ========================================================================== */

.salle-faits {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--cai-bord);
    border-bottom: 1px solid var(--cai-bord);
    flex: 0 0 auto;
}

.salle-fait {
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.9rem;
    background: var(--cai-surface);
    min-width: 0;
}

.salle-fait-l {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cai-texte-faible);
}

.salle-fait-v {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
}

.salle-fait-s { font-size: 0.7rem; color: var(--cai-texte-faible); }
.salle-fait.accent .salle-fait-v { color: var(--cai-accent); }
.salle-fait.alerte .salle-fait-v { color: var(--cai-danger); }

/* ==========================================================================
   §4 — BARRE DE FILTRES
   Une salle de trente tables ne se lit pas d'un coup. Zone, état, et une
   recherche qui porte sur le code de table comme sur le nom du serveur : « où en
   est Alice ? » est une question de service, pas une requête.
   ========================================================================== */

.salle-filtres {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--cai-bord);
    background: var(--cai-fond);
    flex: 0 0 auto;
}

.salle-chip {
    min-height: 36px;
    padding: 0 0.75rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.salle-chip:active { background: var(--cai-bord); }

.salle-chip.actif {
    background: rgba(242, 108, 22, 0.18);
    border-color: var(--cai-accent);
    color: var(--cai-accent);
}

.salle-chip-n {
    margin-left: 0.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--cai-texte-faible);
    font-weight: 700;
}

.salle-chip.actif .salle-chip-n { color: inherit; }

.salle-sep { flex: 1 1 auto; }

.salle-recherche {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0 0.6rem;
    background: var(--cai-surface);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    color: var(--cai-texte-faible);
}

.salle-recherche input {
    width: 170px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--cai-texte);
    font-size: 0.85rem;
}

/* ==========================================================================
   §5 — PLAN DE SALLE
   ========================================================================== */

.salle-corps {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.salle-plan {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.9rem 1rem 1.5rem;
    min-width: 0;
}

.salle-zone {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.2rem 0 0.6rem;
}

.salle-zone-titre {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cai-texte-faible);
    white-space: nowrap;
}

.salle-zone-trait { flex: 1 1 auto; height: 1px; background: var(--cai-bord); }

.salle-zone-compte {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cai-texte-faible);
    font-variant-numeric: tabular-nums;
}

.salle-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--sal-tuile), 1fr));
    gap: 0.65rem;
    margin-bottom: 1.4rem;
}

/* ---- La tuile de table ----
   Trois registres, toujours au même endroit : identité en haut, argent au
   milieu, service en bas. Un plan se lit en balayant une colonne, pas en
   déchiffrant chaque tuile. */
.salle-table {
    position: relative;
    min-height: var(--sal-tuile);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.55rem 0.6rem 0.7rem;
    background: var(--cai-surface);
    border: 1px solid var(--cai-bord);
    border-radius: 10px;
    text-align: left;
    color: var(--cai-texte);
    overflow: hidden;
}

.salle-table:active { background: var(--cai-surface-2); }
.salle-table:disabled { opacity: 0.5; }

.salle-table-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.salle-table-code { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.salle-table-libelle { font-size: 0.7rem; color: var(--cai-texte-faible); line-height: 1.2; }
.salle-table-total {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Le montant et la durée cohabitent sur une ligne TANT QU'ILS TIENNENT. Une
   tuile de 132 px offre 113 px utiles ; « 86 400 XAF » en pèse 95 à lui seul,
   et la durée était en train de l'écraser sur deux lignes — sur les neuf tuiles
   occupées, à toutes les densités. Le montant garde donc sa ligne d'un bloc et
   c'est la durée qui passe dessous quand la place manque. Aux densités larges,
   les deux tiennent côte à côte comme prévu. */
.salle-table-pied {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.1rem 0.4rem;
}

.salle-table-duree {
    font-size: 0.7rem;
    color: var(--cai-texte-faible);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.salle-table-serveur {
    font-size: 0.7rem;
    color: var(--cai-texte-faible);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pastille d'état, coin haut droit. La couleur seule ne suffit pas — le
   libellé du pied la répète en toutes lettres. */
.salle-etat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--cai-bord);
    color: var(--cai-texte-faible);
    white-space: nowrap;
}

.salle-etat.libre { color: var(--cai-texte-faible); }
.salle-etat.occupee { color: var(--cai-accent); border-color: rgba(242, 108, 22, 0.5); }
.salle-etat.attente { color: var(--cai-danger); border-color: rgba(214, 69, 69, 0.5); }

/* Bandes de gauche : l'état se lit de loin, sans lire le texte. */
.salle-table.occupee { box-shadow: inset 4px 0 0 var(--cai-accent); }
.salle-table.attente { box-shadow: inset 4px 0 0 var(--cai-danger); }

.salle-table.active {
    border-color: var(--cai-accent);
    background: var(--cai-surface-2);
}

/* Jauge de temps d'occupation : pleine à 60 minutes, seuil au-delà duquel une
   table se relance. Purement indicative, elle ne remplace pas la durée écrite. */
.salle-table-jauge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--cai-bord);
}

.salle-table-jauge span {
    display: block;
    height: 100%;
    background: var(--cai-accent);
}

.salle-table.attente .salle-table-jauge span { background: var(--cai-danger); }

/* ---- États vides ---- */
.salle-vide {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--cai-texte-faible);
}

.salle-vide i { display: block; font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.65; }
.salle-vide a { color: var(--cai-accent); }

/* ==========================================================================
   §6 — PANNEAU ADDITION
   ========================================================================== */

.salle-addition {
    flex: 0 0 var(--sal-addition-l);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--cai-surface);
    border-left: 1px solid var(--cai-bord);
}

.salle-addition-entete {
    padding: 0.75rem 0.9rem;
    background: var(--cai-surface-2);
    border-bottom: 1px solid var(--cai-bord);
    flex: 0 0 auto;
}

.salle-addition-titre {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.salle-addition-code { font-size: 1.3rem; font-weight: 800; }

.salle-addition-sous {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--cai-texte-faible);
}

.salle-statut {
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(242, 108, 22, 0.18);
    color: var(--cai-accent);
    border: 1px solid rgba(242, 108, 22, 0.45);
    white-space: nowrap;
}

.salle-avertissement {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    background: rgba(242, 108, 22, 0.12);
    border: 1px solid rgba(242, 108, 22, 0.35);
    color: #f0a86a;
    font-size: 0.75rem;
}

.salle-addition-lignes {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.salle-ligne {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--cai-bord);
}

.salle-ligne-qte {
    flex: 0 0 auto;
    min-width: 2.1rem;
    padding: 0.1rem 0.3rem;
    border-radius: 6px;
    background: var(--cai-surface-2);
    border: 1px solid var(--cai-bord);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.salle-ligne-corps { flex: 1 1 auto; min-width: 0; }
.salle-ligne-nom { font-size: 0.92rem; font-weight: 600; line-height: 1.25; }

.salle-ligne-detail {
    font-size: 0.72rem;
    color: var(--cai-texte-faible);
    font-variant-numeric: tabular-nums;
}

.salle-ligne-note { color: #8ec6ff; font-style: italic; }

/* ---- Où en est la cuisine, ligne par ligne ----
   Quatre états, et un seul crie : PRÊT. Les trois autres informent, celui-là
   appelle — c'est la seule raison pour laquelle le serveur regarde cette
   colonne, et il doit la voir sans lire. */
.salle-ligne-cuisine { font-weight: 700; }
.salle-ligne-cuisine.attente { color: var(--cai-texte-faible); }
.salle-ligne-cuisine.encours { color: #e8a33d; }
.salle-ligne-cuisine.pret { color: var(--cai-valider); }
.salle-ligne-cuisine.servi { color: var(--cai-texte-faible); font-weight: 500; }
.salle-ligne-motif { color: var(--cai-danger); }
.salle-ligne-regle { color: var(--cai-valider); }

.salle-ligne-fin {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.salle-ligne-montant { font-weight: 700; font-variant-numeric: tabular-nums; }

.salle-ligne-retirer {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    color: var(--cai-danger);
}

.salle-ligne-retirer:active { background: var(--cai-bord); }

.salle-ligne.annulee .salle-ligne-nom { text-decoration: line-through; }
.salle-ligne.annulee { opacity: 0.55; }
.salle-ligne.payee { opacity: 0.65; }

.salle-ligne-sup {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    color: var(--cai-texte-faible);
}

.salle-ligne-sup:active { background: var(--cai-bord); }

/* ---- Intitulé d'un service (entrée, plat, dessert) ----
   UN BANDEAU, PAS UN TITRE
     Il sépare deux blocs de lignes sans les écraser : la commande reste ce qu'on
     lit, le service est ce qui la découpe. Collant en haut de la liste, il reste
     lisible quand la table a trente lignes et qu'on fait défiler.

   LE SERVICE QUI PART EST LE SEUL EN COULEUR
     Trois services tous accentués ne disent plus lequel descend au prochain
     appui — et c'est précisément la question que le serveur se pose. */
.salle-service {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    background: var(--cai-surface-2);
    border-bottom: 1px solid var(--cai-bord);
    border-top: 1px solid var(--cai-bord);
}

.salle-service-nom {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cai-texte-faible);
}

.salle-service-etat {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--cai-texte-faible);
    font-variant-numeric: tabular-nums;
}

.salle-service.prochain { border-left: 3px solid var(--cai-accent); }
.salle-service.prochain .salle-service-nom { color: var(--cai-accent); }

/* Le geste du « faire suivre ». Cible de doigt : ce bouton se presse en salle,
   une assiette dans l'autre main. */
.salle-service-envoi {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0 0.7rem;
    background: var(--cai-surface);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 700;
}

.salle-service-envoi:active { background: var(--cai-bord); }

.salle-service-envoi.accent {
    border-color: var(--cai-accent);
    color: var(--cai-accent);
}

/* ---- Choix du service à la saisie (modale catalogue) ----
   Une rangée de pastilles au-dessus du catalogue : le service se pose une fois
   et vaut pour toutes les consommations qui suivent. */
.salle-services-choix {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--cai-bord);
}

.salle-services-titre {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cai-texte-faible);
}

/* ---- Suppléments d'une consommation ----
   RETRAIT ET NON PUCE : le supplément appartient à la ligne au-dessus. Le
   décalage de 34 px l'aligne sous le libellé du plat, pas sous sa quantité,
   de sorte qu'on lise « Burger / + Fromage » comme une seule commande. Un
   filet à gauche ferme la lecture, sans faire une seconde ligne. */
.salle-sup {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.9rem 0.15rem calc(0.9rem + 34px);
    font-size: 0.78rem;
    color: var(--cai-texte-faible);
}

.salle-sup-qte {
    flex: 0 0 auto;
    min-width: 26px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.salle-sup-corps {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.salle-sup-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salle-sup-prix { font-size: 0.7rem; opacity: 0.8; font-variant-numeric: tabular-nums; }

.salle-sup-montant {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.salle-sup.annulee { opacity: 0.5; text-decoration: line-through; }

/* ---- Rattachement du serveur au personnel ---- */
.salle-serveur-lien {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.salle-serveur-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--cai-valider);
}

/* Le serveur affiché dans l'en-tête de l'addition EST le bouton qui le change :
   un crayon à côté ferait une cible de plus à viser au doigt, pour le même geste. */
.salle-serveur-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 28px;
    padding: 0 0.4rem;
    background: transparent;
    border: 1px dashed var(--cai-bord);
    border-radius: 6px;
    color: inherit;
    font: inherit;
}

.salle-serveur-btn:active { background: var(--cai-bord); }

/* ---- Totaux ---- */
.salle-totaux {
    flex: 0 0 auto;
    padding: 0.5rem 0.9rem;
    border-top: 1px solid var(--cai-bord);
    background: var(--cai-surface-2);
}

.salle-total-ligne {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--cai-texte-faible);
    font-variant-numeric: tabular-nums;
    padding: 0.1rem 0;
}

.salle-total-ligne.regle { color: var(--cai-valider); }

/* L'intitulé était aussi gros que la somme : à 340 px — la largeur du panneau
   dès le palier 1100, donc au plancher de 1024 px de la charte — « Reste à
   payer » et son montant se repliaient tous les deux. C'est le montant qui
   porte l'information ; l'intitulé se contente de le nommer. */
.salle-total-ligne.reste {
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--cai-bord);
    align-items: baseline;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cai-texte);
}

.salle-total-ligne.reste span + span {
    font-size: 1.35rem;
    font-weight: 800;
    white-space: nowrap;
}

/* ---- Actions ---- */
.salle-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem 0.9rem;
}

.salle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--cai-action-h);
    padding: 0 0.5rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
}

.salle-btn:active { background: var(--cai-bord); }
.salle-btn:disabled { color: var(--cai-texte-faible); }
.salle-btn.danger { color: var(--cai-danger); }
.salle-btn.pleine-largeur { grid-column: 1 / -1; }

/* Le geste le plus fréquent, et le seul bouton d'engagement de l'écran. */
.salle-btn-principal {
    grid-column: 1 / -1;
    min-height: var(--cai-encaisser-h);
    background: var(--cai-accent);
    border-color: var(--cai-accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
}

.salle-btn-principal:active { filter: brightness(1.12); }

.salle-btn-principal:disabled {
    background: var(--cai-bord);
    border-color: var(--cai-bord);
    color: var(--cai-texte-faible);
}

/* ==========================================================================
   §7 — MODALES : BASE NEUTRE
   Consommée telle quelle par /app/pos/bar (back-office, jetons --et-*). Ne rien
   y mettre qui suppose le fond sombre du POS : l'habillage POS est au §8.
   ========================================================================== */

.salle-modale-fond {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1080;
}

.salle-modale {
    background: var(--et-surface);
    color: var(--et-ink);
    width: min(900px, 94vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--et-hairline);
}

.salle-modale-entete,
.salle-modale-pied {
    padding: 12px 16px;
    border-bottom: 1px solid var(--et-hairline);
    display: flex;
    align-items: center;
    gap: 12px;
}

.salle-modale-pied { border-bottom: 0; border-top: 1px solid var(--et-hairline); }

.salle-modale-corps { padding: 12px 16px; overflow-y: auto; min-height: 0; }

/* ==========================================================================
   §8 — MODALES : HABILLAGE POS
   Scopé à `.salle-plein-ecran` — le paramétrage du bar ne le voit jamais.
   Une modale de caisse est un poste de travail à part entière : en-tête qui
   porte le contexte, corps qui défile, pied à deux boutons dont un seul engage.
   ========================================================================== */

.salle-plein-ecran .salle-modale-fond {
    background: rgba(0, 0, 0, 0.72);
    z-index: 1000;
}

.salle-plein-ecran .salle-modale {
    background: var(--cai-surface);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 12px;
    overflow: hidden;
    width: min(860px, 96vw);
    max-height: 94vh;
}

.salle-plein-ecran .salle-modale.compacte { width: min(480px, 96vw); }
.salle-plein-ecran .salle-modale.large { width: min(1100px, 96vw); }

.salle-plein-ecran .salle-modale-entete {
    padding: 0.8rem 1rem;
    background: var(--cai-surface-2);
    border-bottom: 1px solid var(--cai-bord);
    flex-wrap: wrap;
    gap: 0.6rem;
}

.salle-plein-ecran .salle-modale-pied {
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--cai-bord);
    gap: 0.6rem;
    flex-wrap: wrap;
}

.salle-plein-ecran .salle-modale-corps { padding: 0.9rem 1rem; }

.salle-modale-titre { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.salle-modale-sous { font-size: 0.75rem; color: var(--cai-texte-faible); }

.salle-modale-montant {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--cai-accent);
}

.salle-modale-note {
    font-size: 0.75rem;
    color: var(--cai-texte-faible);
    line-height: 1.4;
    flex: 1 1 220px;
    min-width: 0;
}

/* Champs de saisie dans une modale POS : hauteur de doigt, fond sombre. */
.salle-champ {
    width: 100%;
    min-height: var(--cai-action-h);
    padding: 0 0.75rem;
    background: var(--cai-fond);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1rem;
}

.salle-champ:focus { outline: 2px solid var(--cai-accent); outline-offset: -2px; }
.salle-champ::placeholder { color: var(--cai-texte-faible); }

.salle-label {
    display: block;
    margin: 0.8rem 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cai-texte-faible);
}

.salle-label:first-child { margin-top: 0; }

/* Boutons du pied : le secondaire annule, le principal engage. */
.salle-modale-annuler {
    min-height: var(--cai-action-h);
    padding: 0 1.1rem;
    background: transparent;
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
}

.salle-modale-annuler:active { background: var(--cai-surface-2); }

.salle-modale-valider {
    min-height: var(--cai-encaisser-h);
    padding: 0 1.6rem;
    background: var(--cai-valider);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.15rem;
    font-weight: 800;
}

.salle-modale-valider:active { filter: brightness(1.15); }
.salle-modale-valider:disabled { background: var(--cai-bord); color: var(--cai-texte-faible); }
.salle-modale-valider.accent { background: var(--cai-accent); }
.salle-modale-valider.danger { background: var(--cai-danger); }

/* ==========================================================================
   §9 — CONTENUS DE MODALES
   ========================================================================== */

/* ---- Sélecteur en pavé (couverts, nombre de parts) ---- */
.salle-pave-choix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.4rem;
}

.salle-choix {
    min-height: var(--cai-touche-h);
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 700;
}

.salle-choix:active { background: var(--cai-bord); }

.salle-choix.actif {
    background: rgba(242, 108, 22, 0.18);
    border-color: var(--cai-accent);
    color: var(--cai-accent);
}

/* ---- Motifs prêts à l'emploi (annulation, abandon) ----
   Un motif tapé au clavier sur un poste tactile finit par être « x » : proposer
   les vrais motifs du métier, c'est obtenir une traçabilité exploitable. */
.salle-motifs { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ---- Catalogue ---- */
.salle-familles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.salle-grille-articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 0.5rem;
}

.salle-article {
    position: relative;
    min-height: var(--cai-article-h);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.2rem;
    padding: 0.5rem 0.55rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 10px;
    text-align: left;
    overflow: hidden;
}

.salle-article:active { background: var(--cai-bord); }
.salle-article:disabled { opacity: 0.5; }

.salle-article-nom { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }

.salle-article-prix {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.salle-article-promo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.05rem 0.25rem;
    background: rgba(242, 108, 22, 0.16);
    color: #f0a86a;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
}

/* ---- Cibles de transfert / regroupement ---- */
.salle-cibles { display: flex; flex-direction: column; gap: 0.4rem; }

.salle-cible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--cai-action-h);
    padding: 0.5rem 0.85rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 10px;
    text-align: left;
}

.salle-cible:active { background: var(--cai-bord); }
.salle-cible-t { font-size: 0.95rem; font-weight: 700; }
.salle-cible-s { font-size: 0.72rem; color: var(--cai-texte-faible); }
.salle-cible-m { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Parts d'addition ---- */
.salle-parts { display: flex; flex-direction: column; gap: 0.5rem; }

.salle-part {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--cai-surface-2);
    border: 1px solid var(--cai-bord);
    border-radius: 10px;
}

.salle-part-t { font-size: 0.95rem; font-weight: 800; }
.salle-part-s { font-size: 0.72rem; color: var(--cai-texte-faible); }

.salle-part-m {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.salle-part-btn {
    min-height: var(--cai-action-h);
    padding: 0 1rem;
    background: var(--cai-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 800;
}

.salle-part-btn:active { filter: brightness(1.12); }
.salle-part-btn:disabled { background: var(--cai-bord); color: var(--cai-texte-faible); }

/* ---- Encaissement : deux colonnes, modes à gauche, espèces à droite ---- */
.salle-encaisse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.salle-modes { display: flex; flex-direction: column; gap: 0.4rem; }

.salle-mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-height: var(--cai-action-h);
    padding: 0.5rem 0.85rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
}

.salle-mode:active { background: var(--cai-bord); }

.salle-mode.actif {
    background: rgba(242, 108, 22, 0.18);
    border-color: var(--cai-accent);
    color: var(--cai-accent);
}

.salle-mode-ref { font-size: 0.68rem; font-weight: 400; color: var(--cai-texte-faible); }
.salle-mode.actif .salle-mode-ref { color: inherit; opacity: 0.85; }

/* Pavé espèces : les coupures d'abord, les chiffres ensuite. Au bar, neuf
   règlements sur dix se posent avec un billet — le pavé n'est là que pour le
   dixième. */
.salle-especes { display: flex; flex-direction: column; gap: 0.5rem; }

.salle-recu {
    padding: 0.5rem 0.75rem;
    background: var(--cai-fond);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1.7rem;
    font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.salle-coupures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.salle-coupure {
    min-height: 44px;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.salle-coupure:active { background: var(--cai-bord); }
.salle-coupure.appoint { color: var(--cai-accent); border-color: rgba(242, 108, 22, 0.45); }

.salle-pave-touches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.salle-touche {
    min-height: var(--cai-touche-h);
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1.35rem;
    font-weight: 700;
}

.salle-touche:active { background: var(--cai-bord); }
.salle-touche.secondaire { font-size: 1rem; color: var(--cai-texte-faible); }

/* Le rendu de monnaie : l'information la plus regardée de l'encaissement. */
.salle-rendu {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--cai-surface-2);
    border-left: 5px solid var(--cai-valider);
    border-radius: 8px;
    font-size: 0.95rem;
}

.salle-rendu strong {
    font-size: 1.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.salle-rendu.manque { border-left-color: var(--cai-danger); color: var(--cai-danger); }

/* Bandeau d'alerte dans une modale (session fermée, référence manquante…). */
.salle-alerte {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: rgba(214, 69, 69, 0.14);
    border: 1px solid rgba(214, 69, 69, 0.45);
    color: var(--cai-texte);
    font-size: 0.9rem;
}

.salle-alerte a { color: var(--cai-accent); }

/* ==========================================================================
   §11 — MENUS ET FORMULES (script 1364)
   ========================================================================== */

/* ---- La rangée des formules, en tête du catalogue ----
   EN TÊTE, ET NON DANS UN ONGLET : à midi, une table sur deux prend la
   formule. La faire chercher derrière un onglet la ferait saisir à la carte —
   au mauvais prix, et sans que rien ne le signale. */
.salle-formules {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--cai-bord);
}

.salle-formule {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-height: 56px;
    padding: 0.4rem 0.8rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-accent);
    border-radius: 8px;
    text-align: left;
}

.salle-formule:active { background: var(--cai-bord); }

.salle-formule-nom { font-size: 0.92rem; font-weight: 700; }

.salle-formule-prix {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cai-accent);
    font-variant-numeric: tabular-nums;
}

.salle-formule-desc {
    font-size: 0.72rem;
    color: var(--cai-texte-faible);
}

/* ---- L'assistant de choix ----
   Le fil du haut dit OÙ L'ON EN EST et reste cliquable : un client change
   d'avis sur l'entrée pendant qu'on lui demande le dessert. */
.salle-formule-fil {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--cai-bord);
}

.salle-formule-consigne {
    padding: 0.5rem 0.9rem 0;
    font-size: 0.85rem;
    color: var(--cai-texte-faible);
}

.salle-formule-facultatif {
    display: block;
    font-size: 0.75rem;
    color: var(--cai-texte-faible);
    font-style: italic;
}

/* Un plat retenu : la SEULE couleur de cet assistant, parce que c'est la seule
   information que le serveur y cherche en levant les yeux. */
.salle-article.retenu {
    border-color: var(--cai-accent);
    background: var(--cai-surface-2);
}

/* ---- Une formule sur l'addition ----
   Même famille que l'intitulé de service (§ plus haut) : un bandeau, pas un
   titre. La commande reste ce qu'on lit ; la formule est ce qui la regroupe. */
.salle-formule-bandeau {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.3rem 0.9rem;
    background: var(--cai-surface-2);
    border-top: 1px solid var(--cai-bord);
    border-bottom: 1px solid var(--cai-bord);
    border-left: 3px solid var(--cai-accent);
}

.salle-formule-bandeau-nom {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cai-accent);
}

.salle-formule-bandeau-prix {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   §12 — POURBOIRES (script 1365)
   ========================================================================== */

/* Le surplus d'espèces : rendu, ou laissé au serveur. UN SEUL basculement pour
   le même argent — deux champs auraient laissé saisir un pourboire ET un rendu
   sur la même pièce. */
.salle-surplus {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.salle-surplus .salle-chip { flex: 1 1 0; }

/* Le pourboire se distingue du rendu par la couleur d'engagement : c'est le
   seul des deux qui ne revient pas au client, et l'écran doit le dire avant que
   le serveur valide. */
.salle-rendu.pourboire { color: var(--cai-accent); }

/* ==========================================================================
   §15 — LA RUPTURE DU JOUR (script 1368)

   « On est épuisé sur le poisson. » Ce n'est PAS le stock : le stock compte de
   la marchandise, la rupture dit ce que la cuisine ne peut plus faire — et un
   plat du jour n'a pas de stock du tout.

   LA TUILE EST BARRÉE, PAS ÉTEINTE
     Elle reste cliquable, et c'est délibéré : il reste des cas légitimes — la
     portion mise de côté, le plat que le chef refait en deux minutes. Le
     serveur voit la rupture, il décide ; le refus appartient au serveur
     d'application, et seulement si le gérant l'a réglé ainsi.
   ========================================================================== */

.salle-article.epuise { opacity: 0.62; }
.salle-article.epuise .salle-article-nom { text-decoration: line-through; }

/* Le bandeau prend la place de celui des promotions, jamais les deux à la fois :
   un plat épuisé n'a pas à annoncer sa remise. */
.salle-article-rupture {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.05rem 0.25rem;
    background: var(--cai-texte);
    color: var(--cai-fond);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

/* Ce qu'il reste n'est pas une alerte : c'est un décompte, et il se lit comme
   le reste de la vignette tant qu'il n'est pas critique. */
.salle-article-rupture.reste {
    background: var(--cai-bord);
    color: var(--cai-texte-faible);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

/* ==========================================================================
   §13 — CE QU'UNE TABLE A DE PROMIS (script 1366)

   La ligne s'affiche sur la vignette, LIBRE OU OCCUPÉE. Sur une table libre
   elle empêche d'y installer un client de passage ; sur une table occupée elle
   dit au serveur quelle note il doit solder avant l'heure promise. C'est la
   même information, et elle sert deux fois.

   AUCUNE COULEUR EN DUR, comme partout : l'imminence emprunte --cai-danger,
   celui-là même que porte une table à relancer (.salle-table.attente). Une
   réservation dont l'heure est arrivée et une table qu'on a oubliée appellent
   le même geste — les peindre pareil est un choix, pas une économie.
   ========================================================================== */

.salle-table-resa {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
    padding: 0.12rem 0.3rem;
    border: 1px solid var(--cai-bord);
    border-radius: 3px;
    font-size: 0.65rem;
    color: var(--cai-texte-faible);

    /* Le nom du client déborde vite sur une vignette de 150 px : il se coupe,
       l'heure et les couverts ne se coupent jamais. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salle-table-resa b {
    font-variant-numeric: tabular-nums;
    color: var(--cai-texte);
}

.salle-table-resa span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* L'heure est passée, ou elle y est : la table n'est plus disponible pour un
   client de passage, quoi qu'en dise sa pastille « Libre ». */
.salle-table-resa.imminente {
    border-color: var(--cai-danger);
    color: var(--cai-danger);
}

.salle-table-resa.imminente b { color: var(--cai-danger); }

/* ==========================================================================
   §14 — CAHIER DE RÉSERVATIONS (script 1366)

   L'écran /caisse/reservations réutilise la coquille de la salle — même
   plein-écran, même bandeau, mêmes modales — et n'ajoute que la LISTE du
   cahier. Une seconde feuille aurait recopié quatre cents lignes de coquille
   pour une table de six colonnes.

   POURQUOI UNE LISTE, ET NON UNE GRILLE HORAIRE
     Un planning en colonnes de tables se lit bien sur un écran de bureau, et
     pas du tout sur la tablette posée à l'entrée. Ce que le maître d'hôtel
     fait vingt fois par service est : chercher un nom, dire « c'est celle de
     20 h », installer. Une liste triée par heure répond aux trois.
   ========================================================================== */

.resa-liste {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.resa-ligne {
    display: grid;

    /* heure | corps extensible | actions. L'heure et les actions ont une
       largeur fixe : le nom du client est la seule chose qui doit s'étirer. */
    grid-template-columns: 4.5rem 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0.6rem;
    background: var(--cai-surface);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
}

/* Le retard est la seule couleur de cette liste : c'est la ligne à relancer,
   et le maître d'hôtel la cherche des yeux depuis l'autre bout de la salle. */
.resa-ligne.retard { border-color: var(--cai-danger); }
.resa-ligne.close { opacity: 0.55; }

.resa-heure {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--cai-texte);
    line-height: 1.1;
}

.resa-duree {
    display: block;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--cai-texte-faible);
}

.resa-corps { min-width: 0; }

.resa-nom {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cai-texte);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resa-detail {
    font-size: 0.7rem;
    color: var(--cai-texte-faible);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resa-note {
    font-size: 0.7rem;
    color: var(--cai-texte-faible);
    font-style: italic;
}

.resa-actions {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

/* LE SEUL GESTE D'ENGAGEMENT DE LA LIGNE, et donc le seul bouton peint.
   « Installer » est ce que le maître d'hôtel fait vingt fois par service ;
   modifier, annuler et marquer absent sont des chips, comme ailleurs.

   Il ne réutilise PAS .salle-modale-valider, dont la hauteur est celle du
   bouton d'encaissement (80 px) : dans une ligne de liste, elle imposerait à
   chaque réservation la hauteur d'une tuile de plan de salle. */
.resa-installer {
    min-height: var(--cai-action-h);
    padding: 0 0.9rem;
    background: var(--cai-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.resa-installer:active { filter: brightness(1.15); }

.resa-installer:disabled {
    background: var(--cai-bord);
    color: var(--cai-texte-faible);
}

/* Le cahier vide n'est pas une erreur : un mardi midi sans réservation est
   l'ordinaire. On le dit, on ne l'alarme pas. */
.resa-vide {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--cai-texte-faible);
    font-size: 0.85rem;
}

.resa-vide i { font-size: 2rem; opacity: 0.4; }

/* ==========================================================================
   §10 — ÉCRANS PLUS PETITS
   Une tablette en salle : le rail se resserre sur ses icônes (règle héritée de
   caisse.css), l'addition passe sous le plan.
   ========================================================================== */

@media (max-width: 1100px) {
    .salle-plein-ecran { --sal-addition-l: 340px; }
}

@media (max-width: 900px) {
    .salle-corps { flex-direction: column; }

    /* La rangée des formules passe en colonne : trois formules côte à côte sur
       une tablette réduisent chaque nom à deux mots coupés. */
    .salle-formule { flex: 1 1 100%; }

    .salle-addition {
        flex: 1 1 auto;
        border-left: 0;
        border-top: 1px solid var(--cai-bord);
    }

    .salle-encaisse { grid-template-columns: 1fr; }

    /* Les montants ne se coupent plus (`white-space: nowrap` au §3) : sous 900 px
       il faut donc leur donner la place, sans quoi ils déborderaient de leur
       case au lieu de se replier. Une base plus large et un corps plus petit —
       « 236 900 XAF » tient alors dans les 140 px. */
    .salle-faits .salle-fait { flex-basis: 140px; }
    .salle-faits .salle-fait-v { font-size: 1.05rem; }

    .salle-recherche input { width: 120px; }
}