/* =========================================================================== LOT 10 — EN DENSITÉ « COMPACTE », UNE RANGÉE TIENT SUR UNE LIGNE (2026-10-23) CE QUE CE FICHIER CORRIGE « Compacte » ne réglait que le rembourrage des cellules (--et-cellule-y, 4 px). Mesuré au banc sur les 310 écrans, en compacte, à 1440 px : 282 tableaux, rangée MÉDIANE de 41 px, 12 seulement à 26 px ou moins. Le rembourrage était partout à 4 px ; ce qui doublait la rangée, c'était le texte sur deux lignes ou plus — une deuxième ligne écrite dans la cellule (le matricule sous le nom, la date sous le numéro), ou un libellé plus long que sa colonne, qui revient à la ligne. CE QU'IL FAIT — décision produit du 2026-10-23 En compacte, une cellule de texte tient sa ligne : ce qui ne tient pas est coupé par « … », comme dans les tableaux denses SAP Fiori, et se lit ENTIER au survol (le titre est posé par js/densite-compacte.js, seulement quand la cellule est coupée). La deuxième ligne revient sur la première, après un blanc. Confortable et Tactile gardent les retours à la ligne : la densité reste le choix de chacun. CE QUI N'EST JAMAIS COUPÉ Un montant, un code, une date (`.tbl-num`, `.tbl-mono`), la colonne d'actions, et toute cellule qui porte une commande ou un objet graphique (bouton, champ, liste, jauge, barre, frise, profil) : couper un chiffre, c'est en donner un autre, et une commande coupée ne se vise plus. Depuis le 2026-10-24, `.tbl-court` aussi (posée par ColonneTableau.ValeurCourte : un numéro de pièce rendu en lien, « CF-2026-0… », n'a ni .tbl-num ni .tbl-mono et se coupait) ; et, dans les tableaux écrits à la main (.mx-tbl, .ep-table, .scp-table…), toute cellule qui se déclare chiffre ou code par son nom de classe — `text-end`, `num`, `droite`, `*-num`, `*mono*` — ou dont le lien SEUL le déclare (`> .mx-tbl-mono:only-child` : une cellule qui mêle la valeur et un texte, « 18/10/2026 soumise par k.mba », reste coupable, sans quoi sa phrase poussait la colonne Décision hors du cadre) : le banc en relevait 351 tronquées sur 59 écrans, des montants de paie aux numéros de pièce. PAS `*nowrap*` ni `*-droite` : un écran les pose aussi sur un nom (« ap-nowrap » sur le fournisseur), et épargné, ce nom poussait la liste des tarifs 153 px hors de son cadre. La colonne des pastilles d'état (`.tbl-mid`) reste coupable : épargnée, elle poussait la liste des commandes 101 px hors de son cadre à 1280 px, filtres ouverts — mieux vaut « Partiellem… » lisible au survol qu'une colonne qu'il faut aller chercher en défilant. Un `.btn-link` n'en est pas une : il se lit comme un lien (le code d'un tiers au grand livre), sa cellule se coupe comme du texte et il garde sa hauteur de ligne — traité en bouton, il passait à 24 px et renvoyait le nom à la ligne (eta-09, 42 → 47 px). COMMENT LA COUPE TIENT DANS UNE TABLE À LARGEUR AUTOMATIQUE `max-width: 0` sur la cellule coupable : sa largeur minimale tombe à zéro, la table répartit la place au prorata du contenu, et la cellule qui n'a pas sa largeur entière coupe au lieu de pousser la table hors de l'écran. Les colonnes jamais coupées gardent leur largeur de contenu — c'est ce qu'on veut lire en entier. AU-DESSUS DE 1024 PX SEULEMENT En dessous, les listes passent en cartes, où rien n'a à être coupé ; et la règle tactile y gouverne la géométrie. Géométrie seule, aucune couleur. =========================================================================== */ @media (min-width: 1025px) { .appgrid[data-densite="compacte"] table > tbody > tr > td:not(.tbl-num, .tbl-mono, .tbl-court, .text-end, .num, .est-num, .droite, [class*="-num"], [class*="mono"], .tbl-col-actions, [colspan], :has(> :is([class*="mono"], [class*="-num"]):only-child, > :only-child > :is([class*="mono"], [class*="-num"]):only-child), :has(input, select, textarea, button:not(.btn-link), .btn:not(.btn-link), .mx-btn, .progress, canvas, [class*="barre"], [class*="jauge"], [class*="frise"], [class*="profil"], [class*="avatar"])) { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Une cellule épargnée par la coupe tient sa ligne quand même : entière, mais insécable. */ .appgrid[data-densite="compacte"] table > tbody > tr > td:is(.tbl-court, .text-end, .num, .est-num, .droite, [class*="-num"], [class*="mono"], :has(> :is([class*="mono"], [class*="-num"]):only-child, > :only-child > :is([class*="mono"], [class*="-num"]):only-child)):not(.tbl-col-actions, [colspan]) { white-space: nowrap; } /* La deuxième ligne revient sur la première : tout ce que la cellule empile passe en ligne — les pastilles, puces et marques gardent leur boîte (inline-block). Cette remontée-là vaut AUSSI pour une valeur épargnée par la coupe : un numéro de pièce et sa date dessous tiennent une ligne, entiers (sans quoi la rangée des approbations d'achat passait de 48 à 67 px). Seule la coupe a la liste d'exemptions élargie. */ .appgrid[data-densite="compacte"] table > tbody > tr > td:not(.tbl-num, .tbl-mono, .tbl-col-actions, [colspan], :has(input, select, textarea, button:not(.btn-link), .btn:not(.btn-link), .mx-btn, .progress, canvas, [class*="barre"], [class*="jauge"], [class*="frise"], [class*="profil"], [class*="avatar"])) :is(div, p, span, strong, b, em, small, a, label):not(.badge, [class*="pastille"], [class*="chip"], [class*="marque"], [hidden], .d-none, .visually-hidden, [class*="lib-carte"], [class*="lib-court"], [class*="empile-l"], .odp-sous, .rol-matrice-cel-fam) { /* JAMAIS CE QUE L'ÉCRAN MASQUE (2026-10-24). `display: inline` l'emporte sur le `display: none` qu'un écran pose au bureau sur le libellé qui ne sert qu'à sa carte (« Entrée – sortie », « Dues »… des journées de la fiche salarié) : le libellé reparaissait devant chaque valeur. Coupé par « … » il passait inaperçu ; épargné de la coupe depuis le 2026-10-24 (cellules en chasse fixe), il poussait la table des journées 126 px hors de son cadre (banc employe-fiche-journees). Le CSS ne sait pas qu'un élément est masqué : les cinq conventions relevées dans les cellules sont nommées — libellé de carte (*-lib-carte), libellé court (*-lib-court), étiquette empilée (*-empile-l), deux sous-lignes masquées — avec les marques standard. Un écran qui masque autre chose dans une cellule prend l'une de ces conventions. */ display: inline; /* Et le texte qu'ils portent ne revient pas à la ligne : un `text-wrap: balance` posé par l'écran (`.aff-cycle > strong`) est un raccourci qui RALLUME le retour à la ligne sur son élément, par-dessus le `nowrap` de la cellule — relevé aux affectations. */ white-space: nowrap; } /* L'UTILITAIRE « .d-block » DE BOOTSTRAP (2026-10-25) : il pose `display: block !important`, et la remontée ci-dessus, sans `!important`, perdait contre lui — la date de péremption, son échéance et sa pastille restaient sur trois lignes (lots, 57 px la rangée au banc), comme toute cellule écrite « ». Un `!important` ne se bat qu'avec un autre ; celui-ci ne vise que .d-block, dans le même périmètre que la remontée. */ .appgrid[data-densite="compacte"] table > tbody > tr > td:not(.tbl-num, .tbl-mono, .tbl-col-actions, [colspan], :has(input, select, textarea, button:not(.btn-link), .btn:not(.btn-link), .mx-btn, .progress, canvas, [class*="barre"], [class*="jauge"], [class*="frise"], [class*="profil"], [class*="avatar"])) .d-block:not(.badge, [class*="pastille"], [class*="chip"], [class*="marque"], [hidden], .visually-hidden) { display: inline !important; } .appgrid[data-densite="compacte"] table > tbody > tr > td:not(.tbl-num, .tbl-mono, .tbl-col-actions, [colspan], :has(input, select, textarea, button:not(.btn-link), .btn:not(.btn-link), .mx-btn, .progress, canvas, [class*="barre"], [class*="jauge"], [class*="frise"], [class*="profil"], [class*="avatar"])) * + .d-block:not(.badge, [class*="pastille"], [class*="chip"], [class*="marque"]) { margin-left: .6em; } /* Un blanc entre la première ligne et la deuxième remontée. */ .appgrid[data-densite="compacte"] table > tbody > tr > td:not(.tbl-num, .tbl-mono, .tbl-col-actions, [colspan], :has(input, select, textarea, button:not(.btn-link), .btn:not(.btn-link), .mx-btn, .progress, canvas, [class*="barre"], [class*="jauge"], [class*="frise"], [class*="profil"], [class*="avatar"])) :is([class$="-sous"], [class*="-sous "], [class$="__mat"], [class*="__mat "], [class$="-detail"], [class*="-detail "], div + div, p + p) { margin: 0 0 0 .6em; } /* LA COLONNE D'ACTIONS tient sa ligne : ses boutons se rangent côte à côte au lieu de s'empiler (« Approuver » sur « Refuser », relevé aux congés). */ .appgrid[data-densite="compacte"] table > tbody > tr > td.tbl-col-actions { white-space: nowrap; } .appgrid[data-densite="compacte"] table > tbody > tr > td.tbl-col-actions :is(span, div):has(> :is(button, a, .btn, .mx-btn)) { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; } } /* ET SES BOUTONS PRENNENT LA HAUTEUR D'UNE LIGNE — sur un poste SANS écran tactile seulement. La règle tactile (lot02) veut 44 px quand le doigt est le pointeur PRINCIPAL : la densité ne la fait jamais céder, d'où le `not (pointer: coarse)` — `any-pointer` jusqu'au 2026-10-26, qui rendait aussi ses grosses lignes à tout portable à écran tactile piloté au pavé. 24 px, c'est la hauteur des boutons d'icône du gabarit de liste (`.tbl .btn-sm`) : un bouton d'action à 32 ou 42 px dans une rangée de 24 en faisait une rangée de 40 à 50 (projets, congés). */ @media (min-width: 1025px) and (not (pointer: coarse)) { /* « .ep-btn » aussi (2026-10-25) : le bouton d'EasyPaie (32 px) faisait des rangées de 41 px dans les listes de bulletins et de prêts. */ .appgrid[data-densite="compacte"] table > tbody > tr > td :is(.mx-btn, .btn, .ep-btn):not(.btn-lg, .btn-link) { min-height: 0; height: 22px; /* 24 px jusqu'au 2026-10-26 */ padding-top: 0; padding-bottom: 0; line-height: 20px; } }