/* * TROIS PROBABILITES COTE A COTE — la mise en page vit ICI, et nulle part ailleurs. * ============================================================================= * LOT PROBA-LISIBLE (2026-08-22). Chargee APRES les miroirs du Design, meme * regle que plan-rail.css / contrast-aa.css : on etend, on n'edite pas le miroir. * * ----------------------------------------------------------------------------- * CE QU'ELLE REPARE, ET POURQUOI LE PORTEUR N'ETAIT PAS LE BON NIVEAU * ----------------------------------------------------------------------------- * Le 2026-08-20, les trois colonnes du visuel social se superposaient sur un * favori net : elles etaient positionnees au DEBUT DE LEUR SEGMENT colore, donc * la position dependait de la valeur. Corrige la-bas par une grille de tiers * fixes (SocialVisualSvgRenderer). * * Le 2026-08-22, le meme symptome est ressorti sur le dashboard Expert — * « 41,5%28,1%30,5% » — par un mecanisme DIFFERENT. La grille y etait deja fixe. * C'est donc la REGLE qui manquait, pas le correctif : cinq surfaces posaient * chacune leur version de « trois nombres cote a cote », et aucune ne garantissait * que les nombres TIENNENT dans la place qu'on leur donne. * * ----------------------------------------------------------------------------- * LE DECLENCHEUR MESURE — CE N'EST PAS LA REPARTITION DES VALEURS * ----------------------------------------------------------------------------- * Mesure du 2026-08-22 sur le rendu reel (police Space Grotesk 800) : * * viewport | largeur allouee | colonne | corps | texte « 46,8% » | verdict * ---------|-----------------|---------|--------|-----------------|-------- * 380px | 131 px | 38,7 px | 14 px | 38,7 px | limite * 1440px | 93 px | 25,8 px | 17 px | 47,4 px | CASSE * * La largeur allouee DECROIT quand le viewport CROIT — `.decision-hero` passe a * deux colonnes en desktop — pendant que le corps CROIT avec le viewport * (`clamp(14px, 1.25vw, 17px)`). Deux variables en sens oppose, et RIEN ne les * reliait : le corps etait indexe sur le VIEWPORT, la largeur sur le PARENT. * * Corollaires, tous mesures et tous contre-intuitifs : * - la repartition n'y est pour rien. A corps 12 px, « 41,5% » fait deja 30,4 px * pour une colonne de 25,8 px : AUCUNE valeur affichable ne tenait en desktop ; * - c'est le DESKTOP qui casse, pas le mobile ; * - `width: min(100%, 184px)` etait un plafond INERTE — le parent n'offrait que * 93 px. Meme famille que le `max(-100, …)` tautologique du LOT EXPERT-SURFACES. * * ----------------------------------------------------------------------------- * LES TROIS GARANTIES — retirer UNE SEULE suffit a rouvrir le defaut * ----------------------------------------------------------------------------- * ① `minmax(min-content, 1fr)`, JAMAIS `minmax(0, 1fr)` ni `1fr` nu. * `minmax(0, …)` desactive precisement la protection min-content : la colonne * devient plus etroite que son contenu, et le texte SORT de sa colonne pour se * poser sur la voisine. C'est cela, la superposition — pas un defaut de calcul. * * ② Le repli est l'EMPILEMENT, jamais la troncature. * « TRONQUER une donnee principale plutot que DESCENDRE EN CORPS » est un * interdit du projet : un texte plus petit se lit pour ce qu'il est, un texte * tronque se lit comme un texte complet. Ici on descend en corps ET on empile. * * ③ Le corps est indexe sur la LARGEUR DU CONTENEUR (`cqw`), jamais sur le * viewport (`vw`). C'est le lien manquant du ①. Un `vw` decrit la fenetre ; * la place disponible, elle, est decidee par le parent. * * ⚠ POURQUOI LA SUPERPOSITION EST SILENCIEUSE, et ce que cela impose aux tests : * `getBoundingClientRect()` rend la boite (26 px), pas le texte qui en deborde * (47 px). Une verification qui compare des RECTANGLES sort donc VERTE sur le * cas casse. Le seul predicat qui le voit est `scrollWidth > clientWidth`. * Voir `tests/Feature/Ui/ProbabiliteTripletLisibleTest.php`. */ /* Le conteneur declare sa largeur comme unite de reference. Sans lui, `cqw` et `@container` ne referencent rien et les regles ci-dessous sont ignorees — le rendu retombe alors sur l'empilement, qui tient toujours. */ .fl-prob3 { container-type: inline-size; /* La reference doit etre la place DISPONIBLE. Un conteneur dimensionne par son contenu (item flex, `width: auto`) se mesurerait lui-meme : la query repondrait sur la largeur qu'elle est censee decider. */ width: 100%; min-width: 0; } .fl-prob3__grid { display: grid; /* PAR DEFAUT : UNE colonne. C'est l'etat SUR — il tient a toute largeur. Les trois colonnes sont une AMELIORATION conditionnee a la place reelle, jamais l'inverse : un navigateur sans container queries empile, il ne superpose pas. */ grid-template-columns: minmax(min-content, 1fr); gap: 2px 8px; align-items: baseline; justify-items: center; font-size: 13px; /* repli : navigateur sans `cqw` */ font-size: clamp(13px, 8.8cqw, 17px); } /* 168 px : borne DEDUITE, pas choisie. Trois colonnes plus deux gouttieres de 8 px doivent contenir le pire texte affichable. A 168 px le corps vaut 8,8cqw = 14,8 px, ou « 46,8% » mesure 41 px pour une colonne de 50,7 px. En dessous, aucun corps lisible ne fait tenir trois colonnes — c'est la mesure du tableau ci-dessus, pas une precaution. */ @container (min-width: 168px) { .fl-prob3__grid { grid-template-columns: repeat(3, minmax(min-content, 1fr)); } } /* Une cellule = une issue : sa valeur ET sa clef (1 / N / 2). Elles sont dans le MEME element de grille, donc l'appariement survit a l'empilement. Deux rangees independantes se seraient desappariees en repli — la valeur du domicile au-dessus de la clef du nul. */ .fl-prob3__cell { display: grid; justify-items: center; min-width: 0; } .fl-prob3__val { font-weight: 800; line-height: 1.1; } .fl-prob3__key { font-size: 0.66em; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-text); } /* Couleurs d'issue — memes tokens que la jauge d'origine (analyse.css). Elles vivent ICI pour que la regle soit autonome : une surface qui l'adopte n'a pas a rapatrier un bout de feuille voisine, ce qui est exactement le mecanisme par lequel cinq porteurs ont diverge. Tokens de TEXTE (`--*-text`), jamais les tokens de marque, qui sont des FONDS — cf. DoD docs/ai/dod-contraste-aa.md. */ .fl-prob3__val.home { color: var(--accent-2-text); } .fl-prob3__val.draw { color: var(--muted-text); font-size: 0.9em; } .fl-prob3__val.away { color: var(--accent-text); }