/* =========================================================================== MODÈLE ERP — le gabarit commun des écrans, préfixe de classes .mx-* («modèle»). À charger APRÈS easytech-theme.css, easytime-shell.css et fiche.css. D'OÙ ÇA VIENT Passation « Projet EasyTime — Design 7 », reçue le 2026-08-17 : docs/modeles/passation-design-7.md, captures dans docs/modeles/captures/. Deux écrans y font office de gabarits — la liste du personnel et la fiche salarié — et TOUS les autres écrans du produit en dérivent. Les valeurs de ce fichier sont celles de la passation ; elles ne se rediscutent pas écran par écran. CE QUE CE FICHIER CONTIENT, ET CE QU'IL NE CONTIENT PAS Il ne redéclare AUCUNE couleur : tout passe par les jetons --et-* de easytech-theme.css, qui reste la source unique (bascule du 2026-08-17). Il n'habille pas non plus la liste — le tableau, sa barre d'outils, sa sélection, son pied et sa pagination vivent dans le bloc .tbl-* de easytime-shell.css et sont servis par Components/Shared/Tableau.razor. Il porte les pièces du gabarit qui n'avaient AUCUN équivalent dans le dépôt : .mx-page la trame de page — en-tête blanc, fil d'Ariane, titre, barre d'outils à droite, filet de 3 px, corps plafonné .mx-btn les boutons de barre d'outils (transparents / engagement) .mx-obj l'en-tête de page objet et sa bande de faits saillants .mx-rail le rail d'onglets groupés d'une fiche .mx-form LA GRAMMAIRE DE FORMULAIRE DENSE — le point le plus important de la passation, celui dont toute fiche dérive .mx-modale la modale, sa grille et son bloc d'effets .mx-ind la couche analytique : cartes d'indicateur et barres POURQUOI UN FICHIER À PART PLUTÔT QUE DANS fiche.css Le modèle .fx-* qu'il côtoie décrit une AUTRE fiche : bandeau marine à texte blanc, une carte de saisie à deux colonnes, libellés au-dessus des champs. Une quarantaine d'écrans en vivent. Écraser .fx-* sur place les aurait tous cassés d'un coup pour un gabarit qu'ils n'ont pas encore adopté ; les deux cohabitent, et les écrans passent au .mx-* un par un, en commençant par les deux écrans de référence. Le jour où plus rien ne porte .fx-*, ce fichier-là disparaît — pas avant. RÈGLES DE REPRISE - Aucune couleur en dur dans une page : les jetons, ou une classe d'ici. - Angles droits partout, sauf --et-r-btn (boutons de barre d'outils) et --et-r-pill (pastilles d'état, barres). Les champs de saisie n'ont JAMAIS d'arrondi. - Un écran ne porte qu'UN SEUL bouton orange (.mx-btn-cta) à la fois. - Sous un champ, une seule ligne à la fois : aide, erreur ou compteur. =========================================================================== */ /* =========================================================================== 0. ANIMATIONS — deux, et deux seulement. La passation est explicite : « Rien d'autre ne bouge. » Les préfixer mx- évite la collision avec les fxUp/cbp-ouvre déjà posés ailleurs. =========================================================================== */ @keyframes mxUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes mxIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mx-page, .mx-obj, .mx-panneau, .mx-modale-cadre, .mx-sur { animation: none !important; } } /* =========================================================================== 1. TRAME DE PAGE — commune aux deux gabarits. Le plafond de 1600 px n'est pas décoratif : au-delà, une rangée de tableau sépare tellement son matricule de son état qu'il faut suivre la ligne du doigt. La gouttière de 24 px et le padding bas de 52 px viennent de la passation ; le second laisse la place au dernier bouton d'une fiche longue sans qu'il colle au bord de la fenêtre. =========================================================================== */ .mx-page { min-height: 100%; background: var(--et-surface-2); font-family: var(--et-font); color: var(--et-ink); } .mx-page-tete { background: var(--et-surface); border-bottom: 3px solid var(--et-form-strip); } .mx-page-tete-in, .mx-page-corps { max-width: 1600px; margin: 0 auto; } .mx-page-tete-in { padding: 12px 24px; } .mx-page-corps { padding: 18px 24px 52px; } /* Fil d'Ariane. Le dernier segment n'est pas un lien : c'est la page où l'on est. Le rendre cliquable ferait recharger l'écran déjà ouvert. */ .mx-fil { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--et-faint); } .mx-fil a { color: var(--et-ink); font-weight: 500; text-decoration: none; } .mx-fil a:hover { color: var(--et-form-blue-d); text-decoration: underline; } .mx-fil .sep { color: var(--et-inerte); } .mx-fil .courant { color: var(--et-ink); } .mx-page-titre-rang { margin-top: 7px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .mx-page-titre-txt { flex: 1; min-width: 0; } .mx-page-titre-txt h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.025em; color: var(--et-ink); } /* Le résumé porte le nombre de lignes retenues et le total — l'information la plus lue de l'écran après la liste. Le gris de la passation (#6A6D70) donne 5,74:1 sur blanc : au-dessus du seuil, contrairement au #89919A des notes, qui reste réservé aux méthodes de calcul. */ .mx-page-resume { margin-top: 4px; font-size: 13px; color: var(--et-muted); } /* --------------------------------------------------------------------------- BARRE D'OUTILS D'EN-TÊTE — les actions GLOBALES de l'écran, à droite du titre. Elle n'est pas dans la carte : une action qui vaut pour l'écran entier ne se range pas dans l'un de ses blocs. Le pied de carte, symétriquement, ne porte AUCUNE action — seulement la mention explicative. --------------------------------------------------------------------------- */ .mx-outils { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--et-r-btn); background: transparent; color: var(--et-form-blue-encre); font-family: inherit; font-size: 14px; font-weight: 600; /* Open Sans est large : sans nowrap, « Historique paie » se coupe en deux dans un bouton à hauteur fixe et déborde par le bas. */ white-space: nowrap; cursor: pointer; transition: background .12s, color .12s; } .mx-btn:hover:enabled { background: var(--et-tint); color: var(--et-form-blue-d); } .mx-btn:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; } .mx-btn:disabled { color: var(--et-inerte); cursor: not-allowed; } /* Bouton blanc : une action réelle mais secondaire — Annuler, Suivant, Exporter. */ .mx-btn-blanc { background: var(--et-surface); border-color: var(--et-form-border); color: var(--et-ink); } .mx-btn-blanc:hover:enabled { background: var(--et-surface); border-color: var(--et-inerte); } /* LE bouton d'engagement. Un par écran. Modifier, Enregistrer, Nouveau X, Se connecter, le CTA d'une modale de création — rien d'autre. */ .mx-btn-cta { background: var(--et-action); color: var(--et-sur-aplat); border-color: var(--et-action); } .mx-btn-cta:hover:enabled { background: var(--et-action-d); border-color: var(--et-action-d); color: var(--et-sur-aplat); } /* Délavé et non transparent : un CTA à demi effacé se lit comme un défaut d'affichage, alors qu'il dit « il manque quelque chose ». Le not-allowed le confirme au survol, avant le clic. */ .mx-btn-cta:disabled { background: var(--et-action-off); border-color: var(--et-action-off); color: var(--et-sur-aplat); cursor: not-allowed; } /* Action destructrice : bordure rouge pâle, jamais un aplat. Un bouton rouge plein attire l'œil vers ce qu'on veut justement qu'il évite. */ .mx-btn-danger { background: var(--et-surface); border-color: var(--et-danger-bord); color: var(--et-danger-ink); } .mx-btn-danger:hover:enabled { background: var(--et-danger-badge-bg); border-color: var(--et-danger); } /* Variante 42 px — la barre d'outils de la LISTE, pas celle de l'en-tête de page. Elle est à ANGLES DROITS, et ce n'est pas une inattention : la passation ne tolère les 4 px que « sur les boutons de la barre d'outils d'en-tête ». Ses maquettes de liste donnent bien un « Exporter » et un « Nouveau salarié » de 42 px sans le moindre arrondi. La règle qui en découle tient en une ligne : 32 px arrondis près du titre, 42 px carrés au-dessus de la table. */ .mx-btn-42 { height: 42px; padding: 0 17px; border-radius: 0; } .mx-btn-ico { width: 42px; height: 42px; padding: 0; border-radius: 0; } /* Variante MINI — les commandes de FIN DE LIGNE d'une table, pas une barre d'outils. ELLE ÉTAIT ÉCRITE DANS QUATRE ÉCRANS ET DÉFINIE DANS AUCUNE FEUILLE. Relevé le 2026-09-08 en portant la console d'administration au gabarit : `mx-btn mx-btn-mini` apparaît dans Abonnes, Sauvegardes, JournalAudit et Tenants — quatre écrans qui rendaient donc un bouton de barre d'outils de 32 px et 14 px de texte dans une cellule de 22 px de haut. La classe n'était pas mal réglée : elle n'existait pas. C'est le pire cas du dépôt, parce que rien ne le signale — le balisage est juste, la cascade ne trouve rien à appliquer, et l'écran a l'air simplement mal aligné. Sa place est donc ici, à côté des deux autres variantes de taille, et non dans une cinquième feuille d'écran : la règle du dépôt est qu'une classe servant deux écrans monte dans le gabarit (CLAUDE.md). LES VALEURS SUIVENT `.tbl .btn-sm` juste au-dessus dans easytime-shell.css — 24 px de haut, 12 px de texte, angles droits. C'est le bouton que les tables Bootstrap du dépôt servent déjà en fin de ligne : la mesure existait, elle n'avait pas d'équivalent .mx-*, si bien qu'un écran passé au gabarit perdait la taille que l'écran d'à côté avait encore. AUCUN PALIER TACTILE ICI : le §12 en pose un pour toute la famille .mx-btn (min-height 44 px sous 1024 px, height auto) et il est déclaré APRÈS cette ligne — il la reprend donc sans qu'elle ait à le redire. Une cible ne rétrécit pas, y compris quand elle est « mini ». */ .mx-btn-mini { height: 24px; padding: 0 8px; border-radius: 0; font-size: 12px; gap: 5px; } .mx-btn-mini.mx-btn-ico { width: 24px; padding: 0; } /* LE GABARIT DE BOUTON PORTÉ PAR UN LIEN. « Nouveau X » mène à une fiche dès que l'objet en a une : c'est alors une ADRESSE, donc un — qui s'ouvre dans un onglet, se met en favori et se parcourt au clavier comme un lien. L'apparence, elle, ne change pas : c'est toujours le bouton d'engagement de la barre d'outils. Ces deux lignes sont nécessaires et non décoratives : :enabled ne s'applique qu'aux contrôles de formulaire, si bien qu'un resterait souligné et inerte au survol. */ a.mx-btn { text-decoration: none; } a.mx-btn:hover { background: var(--et-tint); color: var(--et-form-blue-d); } a.mx-btn-blanc:hover { background: var(--et-surface); border-color: var(--et-inerte); color: var(--et-ink); } a.mx-btn-cta:hover { background: var(--et-action-d); border-color: var(--et-action-d); color: var(--et-sur-aplat); } /* =========================================================================== 2. CARTE — surface plate. Ni ombre ni arrondi : « la structure tient par les filets ». Le bandeau et le pied reculent d'un ton pour que la zone de données reste la seule surface blanche. =========================================================================== */ .mx-carte { background: var(--et-surface); border: 1px solid var(--et-hairline); animation: mxUp .3s ease both; } .mx-carte-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--et-surface-2); border-bottom: 1px solid var(--et-hairline); } .mx-carte-titre { font-size: 14px; font-weight: 700; color: var(--et-table-head-encre); } /* LA SECONDE LIGNE DU BANDEAU, quand la carte en a besoin : « 7 jours », « 148 salariés attendus », « rien à traiter ». Elle EXPLIQUE, elle n'intitule pas — d'où la casse basse et le gris atténué, comme .mx-groupe-note. Elle arrive avec le portage de l'accueil du pointage (2026-09-08), dont les cinq cartes portaient toutes un sous-titre dans leur `.md-head`. */ .mx-carte-note { font-size: 12px; color: var(--et-faint); } .mx-carte-corps { padding: 14px 0; } /* LE PIED NE PORTE PAS D'ACTION. Il porte la mention qui explique ce que la carte fait — d'où le fond alterné et le gris atténué. Les actions sont dans la barre d'outils d'en-tête, une fois pour toutes. */ .mx-carte-pied { padding: 10px 14px; background: var(--et-surface-3); border-top: 1px solid var(--et-hairline); font-size: 13px; color: var(--et-faint); } /* =========================================================================== 3. PAGE OBJET — l'en-tête d'une fiche. Fond #F5F6F7, filet inférieur de 3 px : le même filet que la page, repris un cran plus bas. C'est ce qui fait lire l'objet comme une seconde entête et non comme le premier bloc du formulaire. =========================================================================== */ .mx-obj { background: var(--et-surface-2); border-bottom: 3px solid var(--et-form-strip); animation: mxIn .16s ease both; } .mx-obj-rang { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 12px 18px; } .mx-obj-id { flex: 1; min-width: 0; } .mx-obj-nom-rang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mx-obj-nom { margin: 0; font-size: 20px; font-weight: 700; color: var(--et-ink); } .mx-obj-sous { margin-top: 3px; font-family: var(--et-font-mono); font-size: 13px; color: var(--et-muted); } .mx-obj-photo { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--et-surface); border: 1px solid var(--et-hairline); font-size: 15px; font-weight: 600; color: var(--et-muted); overflow: hidden; } .mx-obj-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Pastille d'état — la SEULE pilule du modèle avec la barre de progression. Le point de 6 px double la teinte : il reste lisible pour qui ne distingue pas le vert du rouge, et c'est lui qui porte le signal quand la pastille est imprimée en noir et blanc. */ .mx-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--et-r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; } .mx-pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .mx-pastille.est-positif { color: var(--et-succes-ink); background: var(--et-succes-bg); } .mx-pastille.est-critique { color: var(--et-avertissement-ink); background: var(--et-avertissement-bg); } .mx-pastille.est-negatif { color: var(--et-danger-ink); background: var(--et-danger-badge-bg); } .mx-pastille.est-neutre { color: var(--et-neutre); background: var(--et-neutre-bg); } .mx-pastille.est-info { color: var(--et-form-blue-d); background: var(--et-tint); } /* --------------------------------------------------------------------------- BANDE DE FAITS SAILLANTS Les filets viennent de la GOUTTIÈRE, pas de bordures : gap: 1px sur un fond #E5E5E5 laisse voir le fond entre les tuiles. C'est ce qui évite le filet double au repli — avec des border-right, la dernière tuile d'une rangée et la première de la suivante en portaient deux, et la grille se déformait dès qu'elle passait à la ligne. --------------------------------------------------------------------------- */ /* FLEX ET NON GRILLE, depuis 2026-08-26. La grille en auto-fit posait un nombre de colonnes fixe par rangée : cinq tuiles sur deux colonnes en laissaient une SIXIÈME, vide — et comme les filets viennent du fond du conteneur, cette cellule vide ne se lisait pas comme un blanc mais comme une tuile grise sans valeur. Sur une bande de faits saillants, une case grise se cherche. En flex, la dernière rangée se PARTAGE la largeur restante : plus de trou, et les rangées pleines restent régulières puisque toutes les tuiles ont la même base. Le prix est que les colonnes ne s'alignent plus d'une rangée à l'autre quand le compte est impair — un décalage contre un trou, le trou est pire. */ .mx-faits { display: flex; flex-wrap: wrap; gap: 1px; background: var(--et-hairline); border-top: 1px solid var(--et-hairline); } .mx-fait { flex: 1 1 148px; background: var(--et-surface-2); padding: 6px 10px; min-width: 0; } .mx-fait-lbl { font-family: var(--et-font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--et-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-fait-val { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--et-ink); } .mx-fait-val.mono { font-family: var(--et-font-mono); font-weight: 500; } /* La précision suit la valeur, en clair et en gris : « 40,00 h semaine standard 40 h ». Un chiffre sans sa base est une devinette. */ .mx-fait-val .prec { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--et-faint); } .mx-fait-val.est-positif { color: var(--et-succes-ink); } .mx-fait-val.est-critique { color: var(--et-avertissement-ink); } .mx-fait-val.est-negatif { color: var(--et-danger-ink); } /* =========================================================================== 4. RAIL D'ONGLETS GROUPÉS + PANNEAUX Le rail est une COLONNE, pas une rangée : une fiche salarié porte une vingtaine d'onglets, qui en rangée se replient sur trois lignes ou se cachent derrière un « … ». En colonne ils tiennent tous, et surtout ils se GROUPENT — Dossier, Contrat & paie, Suivi RH, Temps & présence, Sortie — ce qu'une rangée ne permet pas. =========================================================================== */ .mx-fiche { display: grid; grid-template-columns: 232px minmax(0, 1fr); background: var(--et-surface); border: 1px solid var(--et-hairline); min-height: 620px; } /* Le retrait haut est celui du PANNEAU (.mx-panneau, 12 px) : les deux colonnes commencent sur la même ligne, et la fiche se lit comme un seul bloc. Le rail partait 4 px plus haut et son premier intitulé 2 px plus bas — assez pour que rien ne s'aligne, pas assez pour qu'on voie pourquoi. */ .mx-rail { background: var(--et-surface-2); border-right: 1px solid var(--et-hairline); padding: 12px 0 16px; overflow-y: auto; } .mx-rail-groupe + .mx-rail-groupe { margin-top: 10px; } .mx-rail-lbl { padding: 6px 12px 4px; font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--et-table-head-encre); } /* Le premier intitulé ne reprend PAS le retrait haut du groupe : il est déjà posé par le rail. Les suivants le gardent, c'est lui qui sépare deux groupes. */ .mx-rail-groupe:first-child .mx-rail-lbl { padding-top: 0; } .mx-onglet { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 12px; /* Le filet gauche existe TOUJOURS, transparent au repos : sans lui, le libellé se décalait de 3 px au changement d'onglet. */ border: 0; border-left: 3px solid transparent; background: transparent; color: var(--et-ink); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; } .mx-onglet:hover { background: var(--et-rang); } .mx-onglet.est-actif { background: var(--et-surface); border-left-color: var(--et-form-blue); color: var(--et-form-blue-encre); font-weight: 700; } .mx-onglet-ico { flex: none; width: 15px; text-align: center; color: var(--et-muted); font-size: 12px; } .mx-onglet.est-actif .mx-onglet-ico { color: var(--et-form-blue-encre); } .mx-onglet-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Les panneaux SE SUPERPOSENT dans une seule cellule de grille, les inactifs en display: none. Empilés à la suite, la hauteur de la carte sautait d'un onglet à l'autre et la page se remettait à défiler à chaque changement. */ .mx-panneaux { display: grid; min-width: 0; } .mx-panneau { grid-area: 1 / 1; min-width: 0; padding: 12px 0 18px; animation: mxIn .16s ease both; } .mx-panneau[hidden], .mx-panneau.est-masque { display: none; } /* =========================================================================== 5. FORMULAIRE DENSE — LA GRAMMAIRE DE RÉFÉRENCE. « C'est le point le plus important de la passation. Toute fiche du produit suit exactement ce modèle. » Libellé à DROITE dans une colonne fixe de 158 px : l'œil descend le long du bord droit des libellés, qui touche le bord gauche des valeurs, et les deux colonnes se lisent comme une seule. Un libellé aligné à gauche laisse entre lui et sa valeur un blanc variable, d'autant plus large que le libellé est court — c'est ce blanc qui oblige à suivre la ligne du doigt sur une fiche de quarante champs. AUCUN FILET ENTRE LES RANGÉES. Seuls les en-têtes de groupe en portent : à raison d'un filet par champ, une fiche dense devient une grille de tableur. =========================================================================== */ /* AUCUNE GOUTTIÈRE ENTRE LES RANGÉES — la passation n'en pose pas, et la capture de référence le confirme : « padding: 2px 18px » sur .mx-champ, rien d'autre. Ces 8 px triplaient l'écart (2 + 8 + 2 au lieu de 2 + 2) et se payaient sur CHAQUE rangée de CHAQUE fiche du produit. MESURÉ SUR docs/modeles/captures/01-fiche.png, qui « fait foi en recette » : les rangées en lecture du bloc Contact s'y suivent à 14 px sur une capture réduite à 909 px, soit 24,6 px au 1600 px d'origine. Avec la gouttière nous étions à 35 px ; sans elle, à 27 — les 2 px qui restent sont ceux que la révision de valeurs du 2026-09-02 a ajoutés au corps du libellé et de la valeur, et ils sont assumés. */ .mx-form { display: flex; flex-direction: column; } .mx-champ { display: grid; grid-template-columns: minmax(0, 158px) minmax(0, 1fr); gap: 12px; align-items: start; padding: 2px 18px; /* LA HAUTEUR DU CONTRÔLE, NOMMÉE — c'est le libellé qui la lit, plus bas, pour se centrer dessus. Elle vaut 34 px ici, 40 dans une fenêtre (§6) et 44 sous le palier tactile : trois valeurs, donc un chiffre en dur aurait réparé un cadre en cassant les deux autres. Le jeton est redéclaré à CÔTÉ de chacune des trois règles de hauteur, jamais ailleurs — les deux se déplacent ensemble ou le libellé se décale à nouveau. */ --mx-champ-h: 34px; } .mx-champ-lbl { /* MARGE REMISE À ZÉRO, ET CE N'EST PAS UNE PRÉCAUTION DE STYLE. app.css:60 pose « label { margin: 0.85rem 0 0.35rem } » — un sélecteur d'élément NU, sans garde, chargé avant toutes les feuilles du gabarit. Il ajoutait 13,6 px au-dessus et 5,6 px au-dessous de CHAQUE libellé de rangée : 19,2 px par rangée, sur toutes les fiches du produit. C'est ce qui faisait qu'une rangée de saisie mesurait 63 px en production là où la charte en pose 44, et que le banc du gabarit — qui ne référençait pas app.css — n'en voyait rien. Le banc la charge maintenant. La règle nue elle-même touche 1 999 nu parce qu'il est posé dans des rangées cliquables, où il doit rester reconnaissable comme la cible précise du clic — celle qui accepte le clic milieu et s'annonce aux lecteurs d'écran. */ .mx-lien { color: var(--et-form-blue-encre); font-weight: 600; text-decoration: none; } .mx-lien:hover { color: var(--et-form-blue-d); text-decoration: underline; } /* LE LIBELLÉ SE CENTRE SUR LE CONTRÔLE (2026-09-10, issue #1152). Les deux règles qui suivent alignent les BORDS HAUTS du libellé et du contrôle. C'est juste pour une valeur en lecture, dont la première ligne est la cible ; c'est faux pour une boîte de 34, 40 ou 44 px. Mesuré sur le rendu, en comparant le centre de la première ligne du libellé au centre du contrôle : le libellé était 8,9 px trop haut en page et 11,9 px trop haut en fenêtre. Les rangées en lecture, elles, tombaient à 0,0 px — parfaites. Sur une fiche où les deux se suivent dans la même colonne, l'œil ne voit que le décalage. Le libellé prend donc la hauteur du contrôle et s'y centre. Un intitulé sur deux lignes grandit avec, et reste centré. NI .mx-zone, NI .mx-check. Une zone de texte fait 68 px et plus : sa première ligne est la bonne cible, la centrer sur le bloc éloignerait l'intitulé de ce qu'il désigne. Une case à cocher mesurait déjà à 2 px près. MAIS .mx-canal, OUI (ajouté le 2026-09-10, après coup). C'est la SECONDE des deux enveloppes du gabarit, et elle manquait là où .mx-input-suffixe a été ajoutée pour exactement la même raison : le champ courriel/téléphone enveloppe son input dans un div, si bien que la rangée ne « voit » aucun contrôle en enfant direct. Le défaut est le même, il coûte plus cher — un suffixe est rare, un champ de contact est sur toutes les fiches de tiers, de salarié et d'utilisateur. Et il s'est AGGRAVÉ en se réparant autour : mesuré sur la fenêtre d'identité du salarié, ces quatre rangées-là restaient à 11,5 px quand les dix autres du même formulaire tombaient à 0,6. Un décalage isolé au milieu d'une colonne alignée se voit mieux qu'un décalage général. ET .mx-btn AUSSI (même jour, autre lot) : la rangée qui pose une valeur et un bouton côte à côte. Un bouton est un contrôle — il se clique —, et il emporte la ligne de base de sa ligne avec lui : 12,5 px sur la rangée « Société » d'un terminal non affecté, la seule du produit dans ce cas. Trois enveloppes, une seule liste, et c'est la troisième fois qu'on l'oublie. */ .mx-champ:has(> .mx-champ-val > :is(.mx-input, .mx-select, .mx-input-suffixe, .mx-canal, .mx-btn)) > .mx-champ-lbl { /* LES 6 px DE RETRAIT HAUT PARTENT AVEC L'ALIGNEMENT QU'ILS SERVAIENT. Ils calent le libellé sur la première ligne d'une valeur EN LECTURE ; sur une rangée de saisie, c'est le centrage qui s'en charge, et les garder décalait encore de 5 à 6 px — mesuré, et constant dans les trois hauteurs, ce qui les désignait. */ padding-top: 0; min-height: var(--mx-champ-h); display: flex; align-items: center; justify-content: flex-end; } /* ET LE CONTRÔLE REND SES 6 px DE MARGE, qui ne compensaient que le retrait ci-dessus. Retirer l'un sans l'autre laisse un décalage de 6 px — constant dans les trois hauteurs, ce qui l'a désigné du premier coup : les deux boîtes font alors la même hauteur, et seul leur bord haut diffère. Même portée que le centrage, à dessein : une rangée .mx-zone garde son retrait et garde donc sa marge. Les deux règles sont vraies ensemble ou fausses ensemble. */ .mx-champ:has(> .mx-champ-val > :is(.mx-input, .mx-select, .mx-input-suffixe, .mx-canal, .mx-btn)) > .mx-champ-val > :is(.mx-input, .mx-select) { margin-top: 0; } /* Sur une rangée qui porte un contrôle, le padding-top de la valeur disparaît : le champ se cale de lui-même sur le libellé. */ /* .mx-input-suffixe EST DANS LA LISTE, et son absence coûtait 5 px. Le champ à suffixe enveloppe son input dans un div : la valeur ne « voyait » donc aucun contrôle en enfant direct, gardait son retrait de 5 px, et le seul champ de la fiche terminal qui en porte un était le seul à rester décalé. Un défaut qui ne se voit que sur la rangée qui l'a. */ /* .mx-canal Y EST POUR LA MÊME RAISON, et elle coûtait les mêmes 5 px : les deux enveloppes du gabarit se tiennent, l'une ne va pas dans cette liste sans l'autre. */ .mx-champ-val:has(> .mx-input, > .mx-select, > .mx-zone, > .mx-input-suffixe, > .mx-canal, > .mx-btn) { padding-top: 0; } /* … MAIS LE CONTRÔLE, LUI, N'HÉRITAIT D'AUCUN DÉCALAGE : son bord haut restait collé au haut de la cellule, 6 px au-dessus de celui du libellé (qui porte ce 6 px en padding-top pour se caler sur la 1re ligne d'une VALEUR EN LECTURE). Le padding-top:0 ci-dessus enlève le seul décalage qui compensait — d'où le correctif : le reporter sur le contrôle lui-même, en marge et non en padding, pour ne pas agrandir sa boîte de 34 px. Scopé à .mx-champ-val (comme la règle au-dessus) : .mx-input/.mx-select/.mx-zone servent aussi hors fiche dense — modales, filtres — où aucun libellé voisin n'a ce 6 px à compenser. */ .mx-champ-val > .mx-input, .mx-champ-val > .mx-select, .mx-champ-val > .mx-zone { margin-top: 6px; } .mx-input, .mx-select, .mx-zone { width: 100%; height: 34px; padding: 0 11px; border: 1px solid var(--et-form-border); border-radius: 0; /* jamais d'arrondi */ background: var(--et-surface); color: var(--et-ink); font-family: inherit; font-size: 13px; outline: none; } .mx-zone { height: auto; min-height: 68px; padding: 8px 11px; line-height: 1.45; resize: vertical; } /* LE CHEVRON EST PORTÉ PAR LE CHAMP, pas posé à la main à côté de lui. Le modèle .fx-* demandait un
enveloppant et un frère du , .mx-case juste dessous quand la ligne est un
--------------------------------------------------------------------------- */ .mx-seg { display: inline-flex; flex: none; overflow: hidden; border: 1px solid var(--et-form-border); } .mx-seg > button { height: 31px; padding: 0 13px; border: 0; border-right: 1px solid var(--et-form-border); background: var(--et-surface); color: var(--et-ink); font-family: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; } .mx-seg > button:last-child { border-right: 0; } .mx-seg > button:hover { background: var(--et-rang); } .mx-seg > button:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; } /* Actif : ardoise pleine, libellé blanc. Jamais d'orange — il est réservé au bouton d'engagement, et l'écran en porte déjà un. L'actif NE RÉAGIT PAS au survol : il ne se sélectionne pas deux fois, et un fond qui bouge sous le curseur laisserait croire qu'il va se passer quelque chose. */ .mx-seg > button.est-actif, .mx-seg > button.est-actif:hover { background: var(--et-table-head); color: var(--et-sur-ardoise-plein); font-weight: 600; } .appgrid[data-theme="dark"] .mx-seg > button.est-actif { background: #2c4373; color: var(--et-ink); } /* --------------------------------------------------------------------------- LISTE DE SESSIONS (.ses-*) — USR-06. AU GABARIT, ET PAS DANS UNE FEUILLE D'ÉCRAN : ces classes servent à DEUX écrans — « Mes appareils » (MonCompte) et le bloc sessions de la fiche utilisateur —, portés par le même composant Shared/ListeSessions.razor. La règle du dépôt est explicite : une classe utilisée par deux écrans ou plus monte ici, sinon l'un des deux finirait par dépendre de la feuille de l'autre pour s'afficher. Une LISTE, pas un tableau : chaque ligne porte quatre informations de longueurs très inégales — un agent court, deux adresses, deux dates relatives. En colonnes, l'adresse IP dicterait la largeur de tout. --------------------------------------------------------------------------- */ .ses-liste { list-style: none; margin: 0; padding: 0; } .ses-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--et-hairline); } .ses-item:last-child { border-bottom: 0; } /* L'APPAREIL COURANT SE MARQUE PAR UN LISERÉ, pas par un fond : la liste en compte souvent une seule autre, et un bloc teinté sur deux lignes se lit comme une alerte alors que c'est une information rassurante. */ .ses-item-courante { box-shadow: inset 3px 0 0 0 var(--et-succes); padding-left: 10px; } .ses-icone { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--et-muted); font-size: 15px; } .ses-corps { flex: 1 1 auto; min-width: 0; } .ses-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ses-agent { font-size: 13px; font-weight: 600; color: var(--et-ink); } .ses-detail { font-size: 12px; color: var(--et-muted); display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; } .ses-sep { opacity: .5; } /* L'échéance est la seule information de la ligne qui parle du FUTUR : elle se distingue, sans crier — une session expire, ce n'est pas un incident. */ .ses-exp { font-style: italic; } .ses-ip { font-size: 12px; color: var(--et-muted); margin-top: 1px; display: flex; flex-wrap: wrap; gap: 8px; } .ses-ip-autre { opacity: .8; } .ses-fermer { flex: 0 0 auto; align-self: center; } .ses-vide { padding: 12px 0; font-size: 13px; color: var(--et-muted); } .ses-actions { display: flex; justify-content: flex-end; padding-top: 10px; } /* Règle tactile (docs/cibles-tactiles.md) : sous 1024 px, aucune cible sous 44 px. Et sous 560 px le bouton passe SOUS la ligne — à cette largeur, le garder à droite écraserait l'agent sur trois lignes. */ @media (max-width: 1024px) { .ses-fermer, .ses-actions .mx-btn { min-height: 44px; } } @media (max-width: 560px) { .ses-item { flex-wrap: wrap; } .ses-fermer { width: 100%; justify-content: center; margin-top: 6px; } } /* --------------------------------------------------------------------------- 11.x BANDEAU D'ÉTAT (.mx-blocage) — ce qui bloque, ce qui a échoué, ce qui a réussi. MONTÉ DEPUIS ecran-devis.css (2026-09-02), où il s'appelait .dev-blocage. La file d'approbation en avait besoin, et la règle du dépôt est nette : une classe employée par deux écrans monte dans le gabarit, jamais l'inverse — sinon la file ne s'afficherait correctement qu'à condition que la feuille de l'écran des documents soit chargée, ce que rien ne garantit ni n'explique. Trois tons, trois classes, et pas un style en ligne : « jamais de couleur codée en dur dans une page » vaut aussi pour un var(--et-*) recopié dans un attribut style. --------------------------------------------------------------------------- */ .mx-blocage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 16px; margin-bottom: 16px; background: var(--et-avertissement-bg); border: 1px solid var(--et-avertissement-bord); border-left: 4px solid var(--et-avertissement-mark); } .mx-blocage > i { font-size: 18px; color: var(--et-avertissement-ink); } .mx-blocage.est-erreur { background: var(--et-danger-badge-bg); border-color: var(--et-danger-bord); border-left-color: var(--et-danger); } .mx-blocage.est-erreur > i, .mx-blocage.est-erreur .mx-blocage-titre, .mx-blocage.est-erreur .mx-blocage-detail { color: var(--et-danger-ink); } .mx-blocage.est-succes { background: var(--et-succes-bg); border-color: var(--et-succes-bord); border-left-color: var(--et-succes); } .mx-blocage.est-succes > i, .mx-blocage.est-succes .mx-blocage-titre, .mx-blocage.est-succes .mx-blocage-detail { color: var(--et-succes-ink); } .mx-blocage-txt { flex: 1; min-width: 220px; } .mx-blocage-titre { font-size: 13px; font-weight: 700; color: var(--et-avertissement-ink); } /* 13 px et non 12,5 : l'échelle typographique révisée sur main (« échelle 98 % ») a touché cette ligne pendant que le bloc montait ici. Reporté à la fusion — laisser 12,5 aurait annulé leur correction sans que personne le voie. */ .mx-blocage-detail { font-size: 13px; color: var(--et-avertissement-ink); } /* --------------------------------------------------------------------------- 11.x LÉGENDE ET MARQUE (.mx-legende / .mx-marque) CE QUE C'EST : la rangée « ▪ sous le besoin ▪ au besoin ▪ en surnombre » qui accompagne un graphique, et le petit carré de couleur qui y désigne une série ou un état. Rien d'autre — ce n'est pas une pastille d'état (.mx-pastille, qui porte un LIBELLÉ et se lit seule) ni une puce cliquable (.mx-puce). POURQUOI ELLE MONTE ICI. Trois écrans du pointage la dessinaient : la vue Charge du planning (.plg-pastille, un carré sans couleur — la page écrivait la couleur), l'accueil du module (une icône « bi-square-fill » coloriée dans un attribut style) et le tableau EasyBI (un .badge de Bootstrap avec un fond écrit dans la page). Trois formes pour un rôle, et surtout : dans les trois cas la COULEUR était écrite dans la page, ce que la charte proscrit. L'AMBRE EST CELLE DES MARQUES, PAS CELLE DES TEXTES. Une marque est un objet graphique : au seuil de 3:1, --et-avertissement rend 2,15:1 et échoue, d'où --et-avertissement-mark (docs/couleurs-en-dur.md et la charte du 2026-09-03). Le rouge et le vert, eux, passent tels quels. LES SÉRIES D'IDENTITÉ prennent .est-cat-1 à -8, dans l'ordre d'attribution de PaletteCategorielle — jamais une couleur d'état comme « série n° 4 ». --------------------------------------------------------------------------- */ .mx-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; color: var(--et-muted); } .mx-legende > span { display: inline-flex; align-items: center; gap: 6px; } .mx-marque { flex: none; display: inline-block; width: 10px; height: 10px; background: var(--et-inerte); } .mx-marque.est-positif { background: var(--et-succes); } .mx-marque.est-critique { background: var(--et-avertissement-mark); } .mx-marque.est-negatif { background: var(--et-danger); } .mx-marque.est-info { background: var(--et-form-blue); } .mx-marque.est-neutre { background: var(--et-neutre); } .mx-marque.est-cat-1 { background: var(--et-cat-1); } .mx-marque.est-cat-2 { background: var(--et-cat-2); } .mx-marque.est-cat-3 { background: var(--et-cat-3); } .mx-marque.est-cat-4 { background: var(--et-cat-4); } .mx-marque.est-cat-5 { background: var(--et-cat-5); } .mx-marque.est-cat-6 { background: var(--et-cat-6); } .mx-marque.est-cat-7 { background: var(--et-cat-7); } .mx-marque.est-cat-8 { background: var(--et-cat-8); } /* --------------------------------------------------------------------------- 11.x ÉTAT VIDE (.mx-etat-vide) — « il n'y a rien », dit dans une carte. À NE PAS CONFONDRE avec l'état vide du gabarit de LISTE, que `Tableau` rend lui-même (VideIcone / VideMessage, styles .tbl-*). Celui-ci sert un bloc qui n'est pas une table : un cumul sans salarié sur le périmètre retenu, une feuille de présence avant qu'on ait choisi une période. POURQUOI IL MONTE ICI. Le composant partagé `EtatVide` existait déjà, mais ses règles vivaient sous « .ecran-compta .cpt-empty » — scopées à un module. Hors EasyCompta, le composant rendait donc du texte NU : icône sans cadre, titre sans graisse. Deux écrans du pointage s'étaient rabattus sur un
à style en ligne (padding, centrage, couleur de note), et l'écran des périodes appelait le composant sans savoir qu'il ne peignait rien. Les valeurs sont celles d'EasyCompta, à l'identique : le module garde son rendu, les autres le gagnent. --------------------------------------------------------------------------- */ .mx-etat-vide { text-align: center; padding: 40px 24px; color: var(--et-muted); border: 1px dashed var(--et-form-border); background: var(--et-surface-3); } .mx-etat-vide .ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; font-size: 24px; color: var(--et-form-blue-encre); background: var(--et-info-bg); margin-bottom: 10px; } .mx-etat-vide .tt { font-weight: 700; color: var(--et-muted); font-size: 15px; } .mx-etat-vide .ms { font-size: 13px; margin-top: 3px; } .mx-etat-vide .act { margin-top: 14px; } /* --------------------------------------------------------------------------- 11.x PUCE (.mx-puce) — le petit bouton d'un choix court, en rangée. CE QU'ELLE EST : une valeur qu'on désigne d'un clic, quand il y en a trois à dix et qu'elles s'écrivent en un mot ou un nombre — une longueur de cycle (7, 14, 21, 28), un décalage de rotation, une cadence de période, « tout inclure / tout exclure ». Ce n'est ni un