/* =========================================================================== ÉCRAN MODÈLE DE PAIE — création et modification d'un modèle (.mpa-*) Components/Pages/Paie/ModelePaieFiche.razor. SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css. C'est la règle du dépôt : un écran, un fichier, un dans App.razor après modele-erp.css. Les classes ci-dessous ne servent QUE lui — la table de collection, qui servait déjà l'écran Tiers, est montée dans le gabarit (.mx-tbl-*, modele-erp.css §11) plutôt que d'être recopiée ici. AUCUNE COULEUR LITTÉRALE : tout vient des jetons d'easytech-theme.css. =========================================================================== */ /* --------------------------------------------------------------------------- 1. LA MODALE — un rail d'onglets là où il y avait une rangée d'oreilles. Les cinq oreilles à plat (« nav nav-tabs ») tenaient dans 920 px parce qu'elles ne coûtaient qu'une hauteur. Le rail groupé coûte une COLONNE de 208 px, et deux des cinq onglets portent une table large : la structure aligne six colonnes dont quatre à largeur imposée (80 + 110 + 150 + 80 + 60, soit 480 px avant même le libellé de rubrique), la population cinq (430 px avant le nom du salarié). 1 040 px laissent au libellé et au nom la largeur qu'ils demandent sans que la table défile sur un écran de bureau. --------------------------------------------------------------------------- */ .mpa-modale { max-width: 1040px; } /* Le corps ne pose plus de gouttière : elle appartient aux PANNEAUX, à l'intérieur du cadre du rail. Posée ici, elle décollerait le rail des trois bords de la modale et ferait flotter une boîte dans la boîte. */ .mpa-corps { padding: 0; } /* Le plancher de 620 px du gabarit est celui d'une PAGE. Dans un voile qui commence à 48 px du haut, il déborde d'un portable à 768 px de haut. 420 px couvrent le plus long des cinq onglets : c'est un plancher, la boîte grandit avec son contenu. */ .mpa-modale .mx-fiche { border: 0; min-height: 420px; grid-template-columns: 208px minmax(0, 1fr); } /* LA GOUTTIÈRE DES CHAMPS N'EST PAS À REPRENDRE ICI, et c'est un piège qu'il vaut mieux nommer : modele-erp.css la retire bien dans une modale, mais par `.mx-modale-corps .mx-champ { padding: 2px 0 }` — et cet écran-ci a un corps `.fx-modale-corps`, de l'autre famille. La règle ne l'atteint jamais, les 18 px de base tiennent, et les redéclarer ici serait une règle morte qu'on croirait porteuse. */ /* --------------------------------------------------------------------------- 2. CE QU'UN PANNEAU PORTE EN PLUS DE SES CHAMPS. `.mx-panneau` ne pose aucun retrait latéral : le gabarit le fait porter aux champs et aux en-têtes de groupe, qui sont seuls à connaître la grille dense. Tout le reste — un encart, une table, une rangée de boutons — doit donc apporter sa gouttière, sans quoi il touche le filet du rail. --------------------------------------------------------------------------- */ .mpa-bloc { margin: 0 18px 12px; } .mpa-bloc:last-child { margin-bottom: 0; } /* Rangée d'ajout — le sélecteur de rubrique et son bouton. `gap` et non une marge sur le bouton : les deux sont de même poids, ils se suivent. */ .mpa-ajout { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mpa-ajout .mx-select { max-width: 420px; } /* --------------------------------------------------------------------------- 3. TROIS FORMES DE CELLULE QUE LA TABLE DU GABARIT NE DEVINE PAS. --------------------------------------------------------------------------- */ /* L'ORDRE est un nombre saisi, pas un identifiant : 70 px suffisent aux trois chiffres qu'il porte, et le laisser à 100 % de sa colonne donnerait à un champ de trois caractères la largeur d'un libellé. */ .mpa-ordre { max-width: 70px; } /* Le TAUX et son signe. Le motif remplace l'`input-group` de Bootstrap, dont l'« addon » est un bloc bordé collé au champ : à angles droits, deux boîtes accolées se lisent comme un seul champ coupé en deux. */ .mpa-avec-unite { display: flex; align-items: center; gap: 6px; } .mpa-unite { font-size: 12px; color: var(--et-muted); white-space: nowrap; } /* Marque de ligne — « désactivée », « visé par », « hérite », le nom d'une action tracée. Un jeton, pas une pastille d'état de la coquille : il qualifie une ligne dans une table, il ne dit pas l'état d'un objet dans une liste. LES VARIANTES SONT NOMMÉES PAR LA SÉMANTIQUE, PAS PAR LE MOT AFFICHÉ. Un « est-oui » aurait servi la colonne « hérite » et rien d'autre : l'historique marque « Création » et « Suppression » de la même façon, sans qu'aucun oui ni aucun non n'y figure. Le texte porte le sens, la classe porte la couleur. Toutes empruntent aux jetons de sémantique, jamais à une couleur littérale. */ .mpa-marque { display: inline-block; padding: 1px 6px; border: 1px solid var(--et-form-border); background: var(--et-surface-2); color: var(--et-muted); font-size: 12px; font-weight: 600; white-space: nowrap; } .mpa-marque.est-bien { border-color: var(--et-succes); color: var(--et-succes-ink); background: transparent; } .mpa-marque.est-attention { border-color: var(--et-avertissement-mark); color: var(--et-avertissement-ink); background: transparent; } .mpa-marque.est-ko { border-color: var(--et-danger-bord); color: var(--et-danger-ink); background: transparent; } /* La case « active » d'une rubrique est SEULE dans sa cellule : centrée, elle se lit en colonne comme une colonne de oui/non, ce qu'elle est. */ .mpa-case { text-align: center; } /* Taille retiree le 2026-09-10 : la case prend les 17 px du gabarit (app.css), et 24 px sous 1024 px (lot02). Voir docs/cibles-tactiles.md. */ .mpa-case input { cursor: pointer; } /* --------------------------------------------------------------------------- 4. PALIERS — docs/conventions-responsive.md. Recette à 390 / 768 / 1280 / 1600 px, paliers pris dans l'échelle retenue. --------------------------------------------------------------------------- */ /* RÈGLE TACTILE (lot 02, docs/cibles-tactiles.md) : sous 1024 px, aucune cible interactive ne descend sous 44 px. Le lot 02 couvre la coquille et le gabarit de liste ; l'onglet du rail est propre à cet écran, donc à sa charge — le bouton de rangée, lui, est déjà traité par `.mx-tbl-btn` dans le gabarit. Sous 1100 px le gabarit a déjà couché le rail en rangée défilante (modele-erp.css §9) : la hauteur s'applique aux deux formes. */ @media (max-width: 1024px) { .mpa-modale .mx-onglet { min-height: 44px; } /* Marche tactile retiree le 2026-09-10 : lot02 la pose une fois pour toutes les cases natives du back-office, a 24 px. Voir docs/cibles-tactiles.md. */ } /* Sous 720 px le gabarit replie de lui-même la colonne de libellés au-dessus de la valeur (modele-erp.css §9). Les gouttières rendues plus haut suivent ce repli. */ @media (max-width: 720px) { .mpa-bloc { margin-left: 14px; margin-right: 14px; } }