/* ==========================================================================
   ecran-formules.css — Menus et formules (/app/pos/formules)

   PORTÉE : CET ÉCRAN SEULEMENT (docs/modeles/passation-design-7.md §11)
     Les classes .frm-* ne servent qu'ici. Le jour où l'une d'elles sert à un
     second écran, elle MONTE dans le gabarit (modele-erp.css) — jamais
     l'inverse, sans quoi un écran finirait par dépendre de la feuille d'un
     autre pour s'afficher.

     C'est ce qui vient d'arriver à la fiche à onglets logée dans une modale :
     les formules et les suppléments en veulent une, elle est donc partie dans
     le gabarit sous .mx-modale-fiche, et cette feuille n'en garde rien.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*.

   QUATRE JETONS DE CETTE FEUILLE N'EXISTAIENT PAS, et c'est la correction la
   moins visible de cette passe — mais celle qui rendait l'écran. Elle citait
   --et-bord, --et-fond-2, --et-texte-faible et --et-texte ; aucun des quatre
   n'est déclaré dans easytech-theme.css, et une var() sans valeur ne dégrade
   pas : la déclaration entière devient invalide au calcul. Les groupes de choix
   n'avaient donc NI CADRE NI FOND — c'est-à-dire exactement ce que le
   commentaire ci-dessous dit être leur raison d'être — et les notes gardaient
   la couleur du texte courant. Le dessin était écrit, il ne sortait pas.

   Les noms justes sont ceux du gabarit : --et-hairline (filet), --et-surface-2
   (fond de bloc), --et-muted (texte secondaire), --et-ink (texte). Un jeton mal
   nommé ne se signale nulle part : ni le navigateur ni la compilation ne
   protestent. Il se voit à la relecture, ou pas du tout.
   ========================================================================== */

/* LA LARGEUR EST CELLE DU CRAN TRÈS LARGE (2026-09-10) — .est-tres-large, posée
   dans la page. La saisie tient sur un rail d'onglets (gabarit §4) : 232 px de
   rail plus un panneau de formulaire dense, dont la seule colonne de libellés
   fait déjà 158 px ; en dessous, le panneau ne loge plus une table de choix à
   cinq colonnes sans la faire défiler. */

/* ---- La tête de la modale ----
   .frm-tete-txt et .frm-tete-sous SONT MONTÉES DANS LE GABARIT (2026-09-07) sous
   .mx-modale-tete-txt et .mx-modale-sous : ecran-supplements.css en portait la
   copie mot pour mot, et les fiches des paramètres d'organisation en auraient
   fait une troisième. Leur note — pourquoi le titre porte le libellé et non
   « Modifier la formule », pourquoi --et-muted et non --et-faint — est partie
   avec elles dans modele-erp.css §6. Rien ne reste ici : cet écran écrit
   désormais les classes du gabarit. */

/* ---- La bande de faits de la modale ----
   Elle est COLLÉE à la tête, sans le filet supérieur que la bande porte dans
   une fiche : ici, c'est le filet de 3 px de l'en-tête de modale qui sépare. */
.frm-faits { border-top: 0; }

/* ---- Les jours de service ---- */
.frm-jours {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* ---- Un groupe de choix ----
   ENCADRÉ, ET NON SÉPARÉ D'UN FILET : le gérant doit voir d'un coup d'œil où
   commence et où finit un groupe, parce que c'est LUI qui porte le service et
   que se tromper de groupe décale un plat d'un envoi. */
.frm-groupe {
    border: 1px solid var(--et-hairline);
    border-radius: 0;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--et-surface-2);
}

/* Un groupe fautif se signale sur son CADRE et pas seulement par sa phrase :
   replié, la phrase est le seul repère, et elle est courte. */
.frm-groupe.est-faux { border-color: var(--et-danger); }

/* Replié, un groupe n'est plus qu'une rangée d'outils — c'est ce qui borne la
   hauteur de l'éditeur : cinq groupes tiennent en cinq lignes. */
.frm-groupe.est-replie { padding-bottom: 0.35rem; }
.frm-groupe.est-replie .frm-groupe-tete { margin-bottom: 0; }

.frm-groupe-tete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* LE NOM DU GROUPE SE RÉTRÉCIT, il ne pousse pas. Mesurée à 1280 px, la rangée
   d'en-tête demandait 864 px pour 784 disponibles : les trois boutons d'outils
   passaient à la ligne et laissaient une bande vide de 50 px SOUS chaque groupe.
   Cinq groupes, 250 px perdus — sur l'écran dont toute la refonte visait la
   compacité. C'est le nom qui cède, parce qu'« Entrée » ou « Dessert » se lit
   entier bien avant 220 px. */
.frm-groupe-nom {
    flex: 1 1 150px;
    min-width: 110px;
    max-width: 220px;
    font-weight: 600;
}

/* Le chevron de repli, discret : c'est un geste de lecture, pas une action sur
   la carte. Il ne prend donc pas le dessin d'un bouton. */
.frm-plier {
    flex: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--et-muted);
    cursor: pointer;
    font-size: 12px;
}
.frm-plier:hover { color: var(--et-ink); }
.frm-plier:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; }

/* Le compte de choix proposés SUIT le groupe replié : sans lui, un groupe fermé
   ne dirait plus s'il propose quatre entrées ou aucune — or « aucune » est
   exactement ce qui empêche la formule de se commander. */
.frm-groupe-n {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-muted);
    white-space: nowrap;
}

.frm-groupe-outils {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Monter, descendre, retirer sont des gestes SECONDAIRES : on règle un groupe
   bien plus souvent qu'on ne le déplace. Ils prennent donc 32 px et non les
   42 du bouton d'icône du gabarit — ce qui rend en même temps les 30 px qui
   manquaient à la rangée. Sous 1024 px la règle tactile reprend la main et les
   ramène à 44 : un geste rare reste un geste, et ne se rate pas au doigt. */
.frm-groupe-outils .mx-btn-ico { width: 32px; height: 32px; }

/* La faute du groupe, dans le groupe. Elle était en haut de la modale, à six
   cents pixels du groupe qu'elle décrivait, et ne disait pas lequel. */
.frm-groupe-err {
    display: flex;
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    color: var(--et-danger-ink);
}

/* Un champ étiqueté en ligne : « Service [ 2 ] ». Le gabarit dense
   (158 px à droite) est fait pour une fiche, pas pour une rangée d'outils. */
.frm-champ {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--et-muted);
    white-space: nowrap;
}

.frm-note {
    font-size: 0.78rem;
    color: var(--et-muted);
    margin-bottom: 0.5rem;
}

.frm-vide {
    padding: 0.75rem;
    border: 1px dashed var(--et-hairline);
    color: var(--et-muted);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* ---- La table des choix d'un groupe ----
   Une table et non une pile de rangées : les mêmes colonnes d'un groupe à
   l'autre, donc un article se compare sans relire d'étiquette, et quatre choix
   tiennent en quatre lignes au lieu de quatre blocs. Le dessin vient du gabarit
   (.mx-tbl.mx-tbl-saisie) ; seules les LARGEURS sont propres à cet écran. */
.frm-tbl { min-width: 620px; }
.frm-tbl th:nth-child(1), .frm-tbl td:nth-child(1) { width: 40%; }
.frm-tbl th:nth-child(2), .frm-tbl td:nth-child(2) { width: 34%; }
.frm-tbl th:nth-child(3), .frm-tbl td:nth-child(3) { width: 130px; }
.frm-tbl th:nth-child(4), .frm-tbl td:nth-child(4) { width: 72px; text-align: center; }
.frm-tbl th:nth-child(5), .frm-tbl td:nth-child(5) { width: 48px; }

/* Une case à cocher seule dans sa colonne : le gabarit .mx-check attend un
   libellé à côté, il n'y en a pas ici — l'en-tête de colonne le dit.

   ET C'EST CE QUI LA REND FRAGILE AU DOIGT. Une case à cocher fait 17 px ;
   ailleurs, c'est le LIBELLÉ qui donne au .mx-check sa surface de frappe, et
   sans libellé il ne reste que les 17 px. Mesuré à 390 et 768 px, c'était la
   plus petite cible de l'écran. Elle reprend donc les 44 px de la règle
   tactile par sa propre étiquette, dont la case reste le centre. */
.frm-check-seul { justify-content: center; gap: 0; }

.frm-ajout { margin-top: 0.5rem; }

/* ---- L'aperçu de la ventilation ----
   C'est la seule chose de cet écran qui ne se règle pas : elle se CONSTATE.
   D'où une présentation de tableau, alignée sur les montants. */
.frm-apercu {
    border: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.75rem;
}

/* L'ENCRE EST DÉCLARÉE, et ce n'est pas une redondance. Ni body ni .appgrid ne
   posent de couleur de texte : ce qui n'en déclare pas hérite du NOIR du
   navigateur. Sur le fond clair du thème par défaut, cela ne se voit pas ; sur
   l'ardoise du thème sombre, la ventilation — le chiffre le plus important de
   ce panneau — s'écrivait en noir sur marine, mesuré à 1,06:1. C'était déjà le
   cas avant cette passe : le bloc n'a jamais eu de couleur, et personne ne
   l'avait ouvert en sombre. */
.frm-apercu-ligne {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
    font-size: 0.85rem;
    color: var(--et-ink);
}

.frm-apercu-nom { flex: 1 1 auto; min-width: 0; }

.frm-apercu-tarif {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--et-muted);
    font-variant-numeric: tabular-nums;
}

.frm-apercu-part {
    flex: 0 0 auto;
    min-width: 110px;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.frm-apercu-ligne.total {
    border-top: 1px solid var(--et-hairline);
    margin-top: 0.2rem;
    padding-top: 0.3rem;
}

/* ---- Le pied ----
   Le compte de fautes se pose À CÔTÉ du bouton d'engagement, et non en haut de
   la modale : c'est au moment de cliquer qu'on a besoin de savoir qu'il reste
   quelque chose à corriger, et sur quel onglet le rail le dit déjà. */
.frm-pied-err {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--et-danger-ink);
}

/* ==========================================================================
   ÉCRANS PLUS PETITS (docs/conventions-responsive.md)
   Une carte se règle au bureau, mais se relit sur une tablette en salle.
   Géométrie seulement — aucune couleur.
   ========================================================================== */

@media (max-width: 1024px) {
    /* Règle tactile (docs/cibles-tactiles.md) : rien ne descend sous 44 px, et
       une cible ne rétrécit jamais. */
    .frm-jours .mx-btn,
    .frm-groupe-outils .mx-btn { min-height: 44px; min-width: 44px; }
    .frm-plier { width: 44px; height: 44px; }
    /* La case « proposé », qui n'a pas de libellé pour lui donner sa surface. */
    .frm-check-seul { min-width: 44px; min-height: 44px; }
}

@media (max-width: 720px) {
    .frm-groupe-nom { max-width: none; flex: 1 1 100%; }

    /* La table garde sa largeur minimale et défile dans son cadre
       (.mx-tbl-cadre) : replier ses colonnes rendrait le supplément et la case
       « proposé » invisibles, or ce sont eux qu'on vient régler. */
    .frm-apercu-tarif { display: none; }
}