/* =========================================================================== ÉCRAN — FILE D'APPROBATION DES DOCUMENTS DE VENTE (préfixe .apv-*) Ce que cette feuille porte, et rien d'autre : les quelques cellules propres à cette liste. Le cadre de page (.mx-page), les boutons (.mx-btn), la modale (.mx-modale-*) et le bandeau d'état (.mx-blocage) viennent du gabarit modele-erp.css ; le tableau lui-même vient du gabarit de liste (.tbl-*, via Tableau.razor). Aucune de ces classes n'est redéfinie ici. AUCUNE COULEUR EN DUR : que des jetons --et-*, donc le thème sombre suit. Chargée APRÈS modele-erp.css, par son propre dans App.razor — un écran n'ajoute plus rien à la queue d'une feuille partagée. =========================================================================== */ /* --------------------------------------------------------------------------- ÉCHELLE TYPOGRAPHIQUE — REPORTÉE LE 2026-09-08 Cette feuille datait d'avant la révision des VALEURS de la charte (2026-09-02, passation EasyCompta) et portait encore les tailles fractionnaires qu'elle a retirées : « le barème ne porte ni fraction ni taille sous 12 px ». Sept déclarations étaient concernées — 10,5 → 12 px, 11,5 → 12 px, 12,5 → 13 px — dont une SOUS le plancher : .apv-lot-lbl, l'intitulé de la barre de sélection, à 10,5 px. Ce n'est pas un ajustement d'apparence. Un intitulé de 10,5 px en capitales espacées est ce qu'on ne lit pas ; or celui-là coiffe « Remise la plus forte », c'est-à-dire le chiffre que la file d'approbation existe pour montrer avant qu'on signe. --------------------------------------------------------------------------- */ /* Le numéro est l'identité de la pièce : mono, comme partout où le dépôt écrit un numéro de document ou un montant. */ .apv-num { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; color: var(--et-ink); } .apv-sous { font-size: 12px; color: var(--et-muted); line-height: 1.4; } .apv-palier { font-size: 13px; font-weight: 600; color: var(--et-ink); } /* LA REMISE PORTE LA SEULE COULEUR DE LA RANGÉE, et seulement au-delà de 30 % : colorer toutes les remises reviendrait à n'en signaler aucune. Le seuil est d'affichage, pas de gestion — celui qui décide est le palier, en base. */ .apv-remise { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; color: var(--et-ink); } .apv-remise.est-forte { color: var(--et-avertissement-ink); } .apv-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .apv-refuser { color: var(--et-danger-ink); } /* ---------- Fenêtre de refus ---------- */ .apv-refus-rappel { padding: 8px 10px; margin-bottom: 12px; background: var(--et-surface-2); font-size: 13px; color: var(--et-muted); } .apv-lbl { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--et-muted); } .apv-motif { width: 100%; padding: 7px 9px; font-family: inherit; font-size: 13px; line-height: 1.45; color: var(--et-ink); background: var(--et-surface); border: 1px solid var(--et-filet-fort); border-radius: 0; resize: vertical; } .apv-motif:focus { outline: none; border-color: var(--et-form-blue); } .apv-aide { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--et-faint); } /* --------------------------------------------------------------------------- APPROBATION EN LOT — la barre de sélection, et le récapitulatif qui la double. CE QUE CES DEUX SURFACES PORTENT EST LEUR RAISON D'ÊTRE : le nombre, le total engagé et la REMISE LA PLUS FORTE. Une barre de sélection qui n'afficherait qu'un compte laisserait signer douze documents sans jamais voir « 47 % » — et c'est très exactement ce qu'on reproche au traitement en lot. La remise forte est le seul accent coloré des deux surfaces. Au-delà de 30 %, comme dans la colonne : deux seuils différents pour la même notion se seraient contredits sous les yeux du lecteur. --------------------------------------------------------------------------- */ .apv-lot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; } .apv-lot-faits { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .apv-lot-fait { display: flex; flex-direction: column; gap: 1px; } .apv-lot-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted); } .apv-lot-val { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; color: var(--et-ink); } .apv-lot-val.est-forte { color: var(--et-avertissement-ink); } .apv-lot-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* LES PIÈCES NOMMÉES DU REFUS EN LOT. Le motif sera lu par autant de vendeurs qu'il y a de jetons ici : les voir est ce qui permet de juger si un motif unique a du sens, ou s'il faut refuser un par un. Une hauteur bornée, parce que cent numéros repousseraient le champ de motif hors de l'écran. */ .apv-lot-liste { display: flex; flex-wrap: wrap; gap: 5px; max-height: 108px; overflow-y: auto; padding: 8px 10px; margin-bottom: 12px; background: var(--et-surface-2); } .apv-lot-piece { font-family: var(--et-font-mono); font-size: 12px; padding: 2px 7px; color: var(--et-ink); background: var(--et-surface); border: 1px solid var(--et-hairline); } .apv-recap { margin-bottom: 12px; border: 1px solid var(--et-hairline); } .apv-recap-rang { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; font-size: 13px; color: var(--et-muted); } .apv-recap-rang + .apv-recap-rang { border-top: 1px solid var(--et-rang); } .apv-recap-val { font-family: var(--et-font-mono); font-weight: 600; color: var(--et-ink); } .apv-recap-val.est-forte { color: var(--et-avertissement-ink); } /* =========================================================================== PALIERS DE LARGEUR — géométrie seule (docs/conventions-responsive.md). =========================================================================== */ @media (max-width: 1024px) { /* CIBLES TACTILES (docs/cibles-tactiles.md) : sous 1024 px, aucune cible de cet écran ne descend sous 44 px, et aucune ne rétrécit. */ .apv-actions .mx-btn { min-height: 44px; } .apv-lot-actions .mx-btn { min-height: 44px; } .apv-motif { min-height: 88px; } } @media (max-width: 720px) { /* Les deux boutons passent pleine largeur : côte à côte dans une cellule de 170 px, ils deviendraient deux cibles trop étroites pour le pouce. */ .apv-actions { flex-wrap: wrap; } .apv-actions .mx-btn { flex: 1 1 100%; justify-content: center; } /* La barre de sélection passe en colonne : les chiffres au-dessus du bouton, jamais le bouton coincé entre eux — c'est ce qu'on doit LIRE avant de signer. */ .apv-lot { flex-direction: column; align-items: stretch; gap: 10px; } .apv-lot-actions { margin-left: 0; flex-wrap: wrap; } .apv-lot-actions .mx-btn { flex: 1 1 100%; justify-content: center; } }