/* ========================================================= PONT LEGACY — à supprimer avec app.css et Bootstrap ========================================================= Le design system pose ses propres bases sur les éléments HTML (tokens/base.css) : elles remplacent celles du reboot Bootstrap, sur lesquelles les écrans pas encore refondus comptent encore. Ce fichier ne restitue que ce qui manquerait, et uniquement en tokens. Il est chargé après styles.css : ses sélecteurs d'élément (spécificité 0,0,1) l'emportent sur ceux de tokens/base.css, et perdent face à n'importe quelle classe .ds-* (0,1,0). Les composants du système gardent donc la main partout où ils s'appliquent. Chaque règle disparaît quand le dernier écran qui en dépend a basculé. Le fichier est vide à la fin de la refonte — c'est son critère de réussite. */ /* Fond de l'application. tokens/base.css pose body { background: var(--color-bg) }, soit du blanc, alors que readme.md prescrit --color-bg-subtle comme fond d'application, les surfaces de contenu restant blanches. Le système n'a pas de classe de coquille qui porte ce fond, et son sélecteur body l'emporte sur celui d'app.css (« html, body » ne cumule pas sa spécificité : chaque sélecteur de la liste vaut pour lui-même). Sans cette règle, toutes les cartes du portail sont blanches sur blanc. --bg résout sur --color-bg-subtle, y compris en sombre. */ body { background: var(--bg); } /* tokens/base.css remet les titres et les paragraphes à margin: 0, ce qui est le bon défaut pour des composants. Les écrans encore en Bootstrap s'appuient sur les marges du reboot : sans elles, tous les blocs de texte du portail se collent. Valeurs du reboot, exprimées en tokens (0,5 rem = --space-2, 1 rem = --space-4). */ h1, h2, h3, h4, h5, h6 { margin-block: 0 var(--space-2); } p { margin-block: 0 var(--space-4); } /* ========================================================= CORRECTIF SYSTÈME — bascule de gabarit (data-viewport) ========================================================= Défaut dans le système lui-même, pas dans le portail. css/mobile.css déclare, dans cet ordre : ligne 133 [data-viewport="phone"], [data-viewport="handset"] { display: none } ligne 142 .ds-rowcards { display: flex; ... } Les deux valent (0,1,0) : à spécificité égale, la dernière gagne. Un .ds-rowcards[data-viewport] reste donc affiché à TOUTES les largeurs. Appairé au conteneur de tableau que le système prescrit lui-même (commentaire de mobile.css ligne 141), le bureau montre à la fois le tableau ET la liste en cartes : la liste de dossiers apparaît deux fois. Constaté à 1440 px sur TicketTable.razor, qui suit à la lettre la paire documentée. Correction ici plutôt que dans css/ds/ : le système est recopié verbatim et resynchronisé, une retouche sur place serait perdue. Le sélecteur porte la classe ET l'attribut (0,2,0), il passe donc devant sans !important. SEUIL — le portail bascule en cartes à 899 px et non à 599, donc sur le marqueur « phone » et non « handset ». Raison : à partir de 900 px la barre latérale fixe reprend 264 px, et entre 600 et 899 px les sept colonnes de la file support n'étaient pas lisibles. Les deux marqueurs sont fournis par le système, on prend simplement l'autre paire. À RETIRER dès que le système corrige l'ordre de ses deux règles. */ .ds-rowcards[data-viewport="phone"] { display: none; } @media (max-width: 899px) { .ds-rowcards[data-viewport="phone"] { display: flex; } } /* Même défaut, deuxième victime : l'EN-TÊTE COMPACT du téléphone. Le système prescrit lui-même `.ds-appbar` + `data-viewport="phone"`. Or dans la fenêtre ≤ 899 px, sa règle de bascule pose `display: revert`. Or `revert` ne rend pas la valeur de `.ds-appbar` — il rend celle de l'origine précédente, c'est-à-dire la feuille du navigateur : pour un
, `block`. La barre perd donc son `display: grid` et ses trois zones (retour / titre / action) s'empilent verticalement. À l'écran, le bouton de menu tombe SOUS l'en-tête et se superpose au titre de la page — c'est exactement ce qu'on voyait à 390 px. `revert` est le mauvais mot-clé pour ce travail : le seul qui rende la valeur de la cascade auteur est `revert-layer`, et encore, à condition que les deux règles vivent dans des couches distinctes. Un système qui veut masquer puis rétablir doit soit remettre la valeur explicitement par composant, soit s'appuyer sur `@layer`. Ici on remet la valeur du système, avec la classe ET l'attribut (0,2,0). */ .ds-appbar[data-viewport="phone"] { display: none; } @media (max-width: 899px) { .ds-appbar[data-viewport="phone"] { display: grid; } } /* ========================================================= CORRECTIF SYSTÈME — un bouton rendu en lien devient illisible au survol ========================================================= Défaut dans le système, pas dans le portail. `tokens/base.css` pose `a:hover { color: var(--color-link-hover) }`. Spécificité 0,1,1 : ce sélecteur l'emporte sur `.ds-btn--primary` (0,1,0), qui pose `color: var(--brand-on-primary)`. Résultat : tout `` perd sa couleur de texte au survol et prend celle d'un lien. Sur les variantes à fond foncé, cela donne du bleu marine sur bleu marine — le libellé disparaît. Constaté sur « Fiche PDF » de l'en-tête de dossier. La vitrine ne montre que des `