/* ==========================================================================
   ecran-supplements.css — Suppléments tarifés (/app/pos/supplements)

   PORTÉE : CET ÉCRAN SEULEMENT (docs/modeles/passation-design-7.md §11)
     Les classes .sup-* 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.

   POURQUOI CET ÉCRAN N'AVAIT PAS DE FEUILLE, ET EN A UNE MAINTENANT
     Il tenait entièrement sur le gabarit, ce qui était la bonne façon de le
     poser. Ce qui l'en fait sortir tient en une chose : l'APERÇU DU TICKET.
     Deux sorties d'impression, l'addition et le bon de cuisine, dessinées à
     l'échelle d'un rouleau de 80 mm. Aucun objet du gabarit ne ressemble à
     cela, et le tordre pour y arriver aurait coûté plus cher que huit règles.

     La fiche à onglets qui loge la saisie, elle, N'EST PAS ICI : les formules
     en veulent une aussi, elle est donc dans le gabarit sous .mx-modale-fiche.

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

/* LA LARGEUR EST CELLE DU CRAN LARGE (2026-09-10) — .est-large, posée dans la
   page. Un supplément porte neuf champs — moins qu'une formule, qui en porte
   cent : sa fenêtre reste donc d'un cran en dessous de celle des formules, le
   rail de 232 px et un panneau de formulaire dense y tiennent largement, et
   l'élargir n'ajouterait que du blanc à droite des champs. */

/* ---- La tête de la modale ----
   .sup-tete-txt et .sup-tete-sous SONT MONTÉES DANS LE GABARIT (2026-09-07) sous
   .mx-modale-tete-txt et .mx-modale-sous : ecran-formules.css en portait la même
   règle sous un autre nom, et un troisième écran allait la recopier. Leur note
   est partie avec elles dans modele-erp.css §6. */

/* Bande de faits collée à la tête : c'est le filet de 3 px de l'en-tête de
   modale qui sépare, celui de la bande ferait double. */
.sup-faits { border-top: 0; }

/* ==========================================================================
   L'APERÇU DU TICKET

   IL IMITE UN ROULEAU, ET C'EST VOULU : mono, étroit, montants alignés à
   droite. Un aperçu dessiné comme le reste du formulaire se lirait comme un
   récapitulatif de saisie ; dessiné comme un ticket, il se lit comme ce qui
   sortira de l'imprimante — ce qui est précisément la question posée.
   ========================================================================== */
.sup-ticket {
    max-width: 380px;
    padding: 10px 12px 12px;
    margin-bottom: 12px;
    background: var(--et-surface-2);
    border: 1px solid var(--et-hairline);
    font-family: var(--et-font-mono);
    font-size: 12px;
}

.sup-ticket-tete {
    margin: 10px 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px dashed var(--et-hairline);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--et-table-head-encre);
}
.sup-ticket-tete:first-child { margin-top: 0; }

.sup-ticket-ligne {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 2px 0;
    color: var(--et-ink);
}

/* La ligne du plat est là pour situer le supplément SOUS elle. Elle est donc
   estompée : ce n'est pas elle qu'on règle. */
.sup-ticket-ligne.est-plat { color: var(--et-muted); }

.sup-ticket-nom {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sup-ticket-mt {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* « sans prix », « son prix » : une mention et non un montant. Elle ne prend
   donc ni la graisse ni l'alignement des chiffres. */
/* « sans prix », « son prix » : des MOTS, pas un tiret de valeur absente.
   --et-inerte est le gris du « non renseigné » et rend 1,88:1 sur ce fond —
   il est fait pour un tiret qu'on ne lit pas. Ces mentions se lisent. */
.sup-ticket-sans {
    font-weight: 400;
    font-style: italic;
    color: var(--et-muted);
}

.sup-ticket-note {
    margin-top: 6px;
    font-family: var(--et-font);
    font-size: 12px;
    line-height: 1.5;
    color: var(--et-faint);
}

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

/* ==========================================================================
   ÉCRANS PLUS PETITS (docs/conventions-responsive.md)
   Géométrie seulement — aucune couleur.
   ========================================================================== */

@media (max-width: 560px) {
    /* Le rouleau prend toute la largeur : à 380 px imposés, il débordait de la
       gouttière de 18 px du panneau au lieu de se réduire. */
    .sup-ticket { max-width: none; }
}