/* ============================================================= MM — la coquille et les composants portés. Chargé APRÈS tokens.css, qui est la source de vérité unique des couleurs. Les dix règles dures du §0 de DESIGN_SYSTEM.md tiennent ici, et trois d'entre elles sont vérifiables à la lecture : · AUCUN hex en dur — toute couleur est une variable --c-*. Sinon le mode sombre et la palette daltonien se défont silencieusement, un composant à la fois. · TOUTE taille de police est un CRAN de l'échelle — `var(--mil-fs-0…6)`, définis dans `tokens.css`. Le multiplicateur du zoom texte y est déjà inclus, donc le cran s'écrit seul, sans `calc` autour. Recopier sa valeur à la main rend le même pixel et perd la seule chose que l'échelle promet : le jour où un cran bouge, le point d'usage écrit à la main ne bouge pas. Deux tests le tiennent — la règle 5 pour le zoom, et `…lit_un_cran_de_l_echelle` pour la forme. · Classes SÉMANTIQUES (.list-row, .card-actions), jamais utilitaires (.mt-4, .flex). Ce qui n'est PAS ici : les écrans d'avant-connexion, qui n'ont ni navigation ni personne à nommer → auth.css. ============================================================= */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* `overflow-wrap` est un DÉFAUT TYPOGRAPHIQUE, au même titre que `line-height` juste au-dessus : un mot plus long que son conteneur se coupe au lieu d'en sortir. Posé sur `body`, il s'hérite — donc l'en-tête, les avis et tout composant à venir l'ont sans y penser, ce qu'une règle par écran ne garantit jamais bien longtemps. Il le faut ici parce que la règle 5 du §0 (zoom texte) et la règle 9 (phone-first) se rencontrent : à 375px et 150 %, « renseignements » mesure 287px à lui seul dans une colonne de lecture de 293. Le mot le plus long du français ne rétrécit pas quand l'écran rétrécit. `break-word` et pas `anywhere` : le second changerait AUSSI la largeur min-content de chaque boîte, donc la taille naturelle des boutons, des pastilles et des colonnes de tableau. On veut couper quand il le faut, pas déclarer que tout peut se réduire à une lettre. ── ET `hyphens` DÉCIDE OÙ ──────────────────────────────────────────────── `hyphens: auto` coupe aux SYLLABES, avec un vrai trait d'union : « rensei-gnements » au lieu de « renseigneme / nts ». Il lui faut deux choses, vraies toutes les deux ici — un dictionnaire de la langue dans le navigateur, et `lang` sur ``, que les deux gabarits posent depuis la locale de l'app. LES DEUX RESTENT, ET LA REDONDANCE EST LE BUT. Mesuré : à 320px, chacun tient seul les vingt écrans — retirer l'un OU l'autre ne rouvre aucun débordement dans un navigateur qui hyphène le français. C'est justement pourquoi les deux sont là : `hyphens` est une amélioration CONDITIONNELLE — pas de dictionnaire, pas de césure, sans le moindre avertissement — et il n'a rien à dire d'une adresse courriel ou d'un identifiant, qui n'ont pas de syllabes. `overflow-wrap` est le plancher qui ne dépend de rien. Le premier choisit où couper quand il le peut ; le second garantit qu'on coupe. `-webkit-hyphens` parce que Safari n'a rendu le nom nu qu'en 17 : sans le préfixe, l'iPhone d'avant-hier — le téléphone que la règle 9 vise en premier — retombe silencieusement sur la coupure sèche. CE QUE ÇA CHANGE AILLEURS. La césure ouvre des points de coupure, donc elle rétrécit la largeur min-content — et une colonne de tableau se règle là-dessus. Le tableau de /confidentialite réclamait 341px ; il tient maintenant dans la colonne de lecture, à 320px comme à 375px, et ne défile plus. `.table-scroll` reste pour le roster, qui demande toujours 635px parce qu'un `` au milieu de deux blocs qu'on clique, et des cases à cocher de 13 px qu'on vise avec un doigt. Ce qui arrive : un objet unique, la pastille — un `