/* ═══ UXGEN — KIT DE COMMERCE ═══════════════════════════════════════════════════════ Collé tel quel, jamais retouché. Il ne peint qu'avec les jetons de uxgen_theme. Trois arbitrages sont DANS ce fichier et ne sont pas décoratifs : · la jauge de franco fait 3 px et n'est PAS verte — l'état débloqué se lit au remplissage, pas à la couleur. À 6 px elle pesait autant que la phrase. · le complément est une BARRE FINE, fond neutre, produit débordant à -8° avec une vraie drop-shadow qui suit le détourage — jamais un box-shadow de rectangle. · l'étiquette est un ONGLET GLISSÉ DERRIÈRE la carte : c'est l'ordre du DOM qui le fait, elle est écrite AVANT et la carte opaque se peint par-dessus. ══ 🚨 LE KIT SE SOUMET AUX RÈGLES QUE LE SERVEUR FACTURE (15/08/2026) ══════════════ L'audit du matin (§5, « le serveur facture à l'agent ce que son propre kit peint ») avait nommé la classe sans la fermer. Elle est fermée ici, et les trois écarts sont tenus PAR CETTE FEUILLE : · G2 — plus aucune grille du kit n'a de piste implicite : toutes portent `grid-template-columns: minmax(0, 1fr)`. Une piste `auto` prend pour plancher la min-content de ses items, et F12 rend chaque montant insécable : les deux règles du serveur, mises bout à bout, fabriquaient le débordement. 447 px de page dans une fenêtre de 390 avant, 390 après. · C5 — DEUX GRAISSES, et pas une de plus : 400 et 700. Le kit en peignait quatre (500, 600, 700, 800) sur les cinq que l'audit compte, c'est-à-dire qu'il faisait échouer C5 à lui tout seul, sur toutes les pages. · C7 — plus aucune mention sous `--pas--1`, et le texte qui ARGUMENTE (garantie sous le bouton, réassurance de fiche, phrase de sortie d'abonnement, écart au franco) est passé à `--pas-0`. Les deux pas viennent de la grammaire servie quand elle est là, avec un repli pour un kit posé seul sur un file://. · D5 — les vignettes injectées portent leurs deux attributs ET une boîte réservée en CSS. Voir `.ux-palier__vignette img`. ═══════════════════════════════════════════════════════════════════════════════════ */ /* ══ 🚨 C9 — LA POLICE DE MONTANT, NOMMÉE ICI ET NULLE PART AILLEURS ═════════════════ « Les prix ne sont JAMAIS dans la police des titres : grotesque neutre, `font-variant-numeric: tabular-nums`, colonnes alignées à la virgule. » Réclamé cent fois. Mesuré le 21/08/2026 sur les douze boutiques du corpus : DIX écrivaient leur montant dans la police du `h1`. Ce n'était pas dix fautes, c'était UNE : le gabarit ne connaissait que deux polices — « display » et « texte ». Un montant est important, une display a l'air importante, et l'auteur de page groupait mécaniquement son prix avec ses titres (`h1, h2, h3, .prix__montant { font-family: var(--police-display) }`, mot pour mot dans `_test-forge`). Tant qu'il n'existe pas de police DE MONTANT, la faute renaît à chaque génération. Le jeton existe maintenant, et il vaut la police de TEXTE par défaut : une display a des chasses inégales, deux montants l'un sous l'autre cessent de se comparer, et la comparaison est tout ce qu'on demande à l'acheteur devant une échelle de lots. 🚨 IL NE DÉPEND D'AUCUNE CLASSE DE LA BOUTIQUE. Douze boutiques nomment leur prix de douze façons (`.prix__montant`, `.achat__montant`, `.montant`, `.fait__valeur`, `.prix`, ``, `
`…) : un sélecteur de classe n'aurait guéri qu'une page. C'est le SCRIPT du kit qui marque les montants au chargement (section 0), avec exactement la règle du détecteur — un nœud dont le texte EST un montant, pas un qui en contient un. Il pose le réglage en style d'élément et non par cette feuille, parce que la feuille de la boutique est chargée APRÈS la nôtre sur une partie du corpus et gagne à spécificité égale : la leçon du 18/08 au soir, un remède inerte mesuré au navigateur. */ :root { --police-montant: var(--police-texte, var(--font-text, inherit)); } [data-ux-montant] { font-family: var(--police-montant); font-variant-numeric: tabular-nums; } .ux-voile { position: fixed; inset: 0; z-index: 80; background: color-mix(in oklab, var(--sol-sombre, #111) 34%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--duree, 260ms) var(--courbe, ease); } .ux-voile[data-ouvert="1"] { opacity: 1; pointer-events: auto; } .ux-tiroir { position: fixed; top: 0; right: 0; z-index: 90; height: 100dvh; width: 100%; max-width: 26rem; display: flex; flex-direction: column; overflow: hidden; background: var(--sol-clair, #fff); color: var(--sur-clair, #141414); box-shadow: var(--ombre-posee, 0 18px 40px -16px rgba(0,0,0,.38)); transform: translateX(100%); pointer-events: none; transition: transform 180ms var(--courbe, cubic-bezier(.22,1,.36,1)); font: inherit; } /* 180 ms, et le chiffre est mesuré : l'audit de transaction relit la page 900 ms après le clic, le vol vers le panier dure 700 ms et le tiroir ne s'ouvre qu'APRÈS lui. Une transition plus longue ferait conclure « aucun panier lisible » sur un panier qui s'ouvre. */ .ux-tiroir[data-ouvert="1"] { transform: translateX(0); pointer-events: auto; } .ux-tiroir__tete { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.25rem; border-bottom: 1px solid color-mix(in oklab, var(--sur-clair, #141414) 12%, transparent); } .ux-tiroir__titre { margin: 0; font-family: var(--police-display, inherit); font-size: 1.125rem; font-weight: 700; } .ux-tiroir__corps { flex: 1 1 auto; min-height: 22dvh; overflow-y: auto; overscroll-behavior: contain; } /* Le pied est BORNÉ et ne peut être ni poussé hors écran ni rogné : sur un panier à 8 articles, une base flexible avait écrasé la liste À ZÉRO et enfermé le client. */ .ux-tiroir__pied { flex: 0 0 auto; padding: 1.5rem 1.25rem 1rem; border-top: 1px solid color-mix(in oklab, var(--sur-clair, #141414) 12%, transparent); background: var(--sol-clair, #fff); } /* 🔴 PATCH B01-4 — 2.75rem = 44 px, JAMAIS MOINS : la croix de fermeture faisait 32 px et violait G3, la règle que le propre audit du serveur facture (3e récidive de la famille « le kit se contredit », après le ; un groupe de boutons n'a pas de champ à étiqueter, il a un role=group et un aria-label. Le texte reste PEINT, et à la même graisse que les libellés de champ. */ .ux-choix__intitule { display: block; font-size: 13px; font-weight: 700; margin: 0 0 .25rem; } .ux-choix__variantes { display: flex; flex-wrap: wrap; gap: .5rem; } .ux-choix__variante { min-height: 44px; padding: .5rem .875rem; font: inherit; font-size: 14px; font-weight: 400; background: transparent; color: inherit; cursor: pointer; border: 1px solid var(--trait, rgba(0,0,0,.18)); border-radius: var(--rayon, 8px); } .ux-choix__variante[aria-pressed="true"] { border-color: var(--marque, #2b2b2b); box-shadow: inset 0 0 0 1px var(--marque, #2b2b2b); font-weight: 700; } /* ── LE CHOIX QUI MANQUE — 18/08/2026 ──────────────────────────────────────────────────── Ni rouge ni icône d'erreur : ce n'est pas une faute du client, c'est une étape qu'il n'a pas encore faite. Le groupe se souligne à la couleur de marque, le message se lit au pas du corps (C7 : ce qui ARGUMENTE ne descend pas sous `--pas-0`) et à la graisse 700, la seule graisse forte que le kit s'autorise (C5). */ .ux-choix__variantes[data-ux-manquant="1"] { outline: 2px solid var(--marque, #2b2b2b); outline-offset: 3px; border-radius: var(--rayon, 8px); } .ux-choix__manque { margin: .5rem 0 0; font-size: var(--pas-0, 1rem); line-height: 1.4; font-weight: 700; } .ux-choix__case { display: flex; align-items: center; gap: .5rem; font-size: 14px; font-weight: 400; } .ux-choix__case input { width: 1.125rem; height: 1.125rem; accent-color: var(--marque, #2b2b2b); } /* ── LA BARRE D'ACHAT COLLANTE ─────────────────────────────────────────────────────────── Budget MESURÉ : 76 px à 390×844, soit 9 % de la hauteur visible. L'audit de transaction refuse tout élément fixe qui mange plus de 25 % en permanence — sur la page notée 87/100 le 13/08, la barre collante mangeait 110 px sur chaque écran. Le plafond est ici en dur. */ .ux-barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom, 0px)); max-height: 20vh; background: var(--sol-clair, #fff); color: var(--sur-clair, #141414); border-top: 1px solid color-mix(in oklab, var(--sur-clair,#141414) 14%, transparent); } /* ══ P1 (fournée 4) — LA BARRE NE PEUT PLUS SE CHEVAUCHER ═══════════════════════════════ 14/08/2026, mesuré dans le DOM sur la boutique CINQ à 390 px : __quoi écrasé à 21 px, le bouton figé à 325 px, le texte du nom de produit sortant de sa boîte de 164 px et se PEIGNANT SOUS LE BOUTON sur 152 px. Le mécanisme tenait en trois déclarations : · .ux-bouton en « flex: 0 0 auto » — le bouton ne rétrécissait JAMAIS ; · __quoi en « flex: 1 1 auto; min-width: 0 » — la colonne de gauche s'écrasait à zéro ; · ses enfants en « white-space: nowrap » et « overflow: visible » — le texte sortait. Aucune des trois n'est fausse seule ; c'est leur somme qui casse, et elle ne casse que sur la LONGUEUR DU CONTENU. 464 tests verts sur fixtures courtes n'ont rien vu : IPPUKU passait parce que son bouton faisait 222 px, pas parce qu'il était mieux construit. Ce qui est réparé ici : la colonne de gauche COUPE (ellipse) au lieu de déborder, et le bouton REND de la place au lieu d'en prendre. Le détecteur « collision » de blocks/_spec mesure le résultat à 320/360/390/768/1440 — la règle et le refus, pas la règle seule. */ .ux-barre-achat__quoi { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; overflow: hidden; } /* Un enfant de grille a « min-width: auto » : sans cette ligne, la colonne refuse de descendre sous la largeur de son plus long mot et le texte ressort par la droite. */ .ux-barre-achat__quoi > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* B02-N3 — l'écart au franco, DANS la barre : même calcul que le tiroir, jamais un second. ══ 🔴 18/08/2026, cycle « alambic » — LA PHRASE DU KIT ÉTAIT COUPÉE SUR TÉLÉPHONE ═══════ Le peigne fin l'a relevée sur DEUX boutiques sans rapport, et le navigateur l'a reproduite : mcp « Encore 4,10 € — livraison offerte. » 206 px dans 189 ← COUPÉE alambic « Encore 70,00 € — livraison offerte. » 221 px dans 201 ← COUPÉE Notez le montant de mcp : **4,10 €**, c'est-à-dire le plus court possible. Ce n'est donc pas le nombre qui déborde, c'est LA PHRASE — elle ne tient dans aucun cas à 390 px. ── CE QUI REND CE DÉFAUT PARTICULIER ──────────────────────────────────────────────────── Vingt lignes plus haut, ce fichier REFUSE au marchand un nom de produit de plus de 28 signes, précisément pour qu'il ne se fasse pas couper dans cette barre (« nom-tronque-dans- la-barre », 15/08, relevé sur gen7-matcha). Le serveur impose donc une limite au texte du marchand, et écrit le sien trop long dans la même boîte, deux lignes en dessous. Le marchand ne peut RIEN y faire : cette phrase-là, c'est nous qui la composons. ── LE REMÈDE : ELLE SE REPLIE, ELLE NE SE COUPE PAS ───────────────────────────────────── La règle d'Angelo est explicite — *l'UI ne doit JAMAIS tronquer bêtement ; c'est le texte qui s'adapte à la contrainte*. Ici la contrainte ne peut pas être satisfaite par un raccourcissement sans inventer un second vocabulaire (« port offert » là où le tiroir dit « livraison offerte ») — et deux formulations pour la même promesse est très exactement le défaut « franco annoncé deux fois » que publier refuse. On replie donc sur deux lignes. Le nom du produit, lui, GARDE son ellipsis : c'est un nom, il se coupe ; ceci est une phrase, elle s'enroule. Mesuré au navigateur, à 390×844, un article au panier, AVANT puis APRÈS : alambic 221 px dans 201, 1 ligne, barre 65 px → 201 dans 201, 2 lignes, barre 71 px mcp 206 px dans 189, 1 ligne, barre 69 px → 189 dans 189, 2 lignes, barre 71 px Plus aucune coupe, et la barre gagne 2 à 6 px. Le plafond d'éléments fixes de l'obligation BLOQUANTE rien-ne-masque est de 169 px à cette taille : il reste 98 px de marge. La page ne déborde pas en largeur, avant comme après. */ .ux-barre-achat__franco { font-size: var(--pas--1, .8125rem); line-height: 1.2; opacity: .8; font-variant-numeric: tabular-nums; } /* ══ 🔴 18/08/2026, SOIR — LE REMÈDE CI-DESSUS ÉTAIT INERTE SUR LE CORPUS ═════════════════ Le correctif de ce matin a été REMESURÉ au navigateur, kit fraîchement construit posé sur une copie de la boutique. À 360 px, sur «  » et sur sa fiche produit : « Livraison offerte dès 49,00 €. » 179 px dans 162 ← TOUJOURS COUPÉE white-space calculé : nowrap · overflow : hidden · text-overflow : ellipsis c'est-à-dire l'exact inverse des trois déclarations écrites vingt lignes plus haut. La cause n'est ni le kit ni la cascade interne : c'est la feuille DE LA BOUTIQUE, chargée après la nôtre, qui redéclare le même sélecteur à la même spécificité — rase.css:468 .ux-barre-achat__franco { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } et à spécificité égale, la dernière feuille gagne. Deux boutiques sur treize touchent ce sélecteur, et les deux le font pour la même raison : «  » écrit EXACTEMENT notre remède, avec en commentaire l'écart d'audit qui le lui a fait écrire (« texte-tronque-a-l-achat / F12 »). Autrement dit le serveur fait corriger DEPUIS LA FEUILLE DU MARCHAND un défaut que sa propre plomberie peint — la même désobéissance que celle relevée sur «  » du bouton, et la deuxième de la journée. ── LE GESTE, ET IL EST BORNÉ ──────────────────────────────────────────────────────────── Cette phrase est COMPOSÉE PAR LE KIT : le marchand ne peut ni la raccourcir ni la reformuler, et la couper laisse « Livraison offerte dès 49,0… », c'est-à-dire une promesse commerciale amputée sur le seul élément visible en permanence à 360 px. On monte donc la spécificité des TROIS SEULES déclarations qui COUPENT, et d'elles seules : la taille, l'interligne, l'opacité et les chiffres tabulaires restent à une seule classe, donc entièrement thémables. Le marchand garde le style ; il ne peut plus, par recopie du traitement du NOM juste au-dessus, remettre l'ellipse sur une PHRASE. Un nom se coupe — c'est un nom. Une phrase s'enroule. */ .ux-barre-achat .ux-barre-achat__franco { white-space: normal; overflow: visible; text-overflow: clip; } .ux-barre-achat .ux-bouton { width: auto; flex: 0 1 auto; max-width: 62%; min-width: 0; overflow: hidden; height: 2.75rem; font-size: 15px; padding: 0 .875rem; } /* Dans la barre, ce qui cède est le PRIX BARRÉ, jamais le montant à payer : l'un est un argument, l'autre est l'information sans laquelle on ne clique pas. */ .ux-barre-achat .ux-bouton .ux-bouton__ligne { max-width: 100%; flex-wrap: nowrap; } .ux-barre-achat .ux-bouton .ux-bouton__ligne > span:first-child { flex: 0 0 auto; } .ux-barre-achat .ux-bouton .ux-bouton__plein { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Sous 400 px, un prix barré réduit à un sliver de trois pixels ne prouve rien et salit la pastille : on le retire de la BARRE (il reste entier sur la carte de lot, où il a la place d'être lu). Mesuré à 320 px avec un montant à quatre chiffres : sa boîte tombait à 0 px. */ @media (max-width: 400px) { .ux-barre-achat .ux-bouton .ux-bouton__plein { display: none; } /* ══ 🔴 18/08/2026, SOIR — LE BOUTON PRENAIT LA COLONNE DU NOM ═══════════════ Vingt lignes plus haut, ce fichier fait REFUSER au marchand un nom de plus de « LARGEUR_COLONNE_BARRE » (164 px à 360 ce matin-là) — et la colonne promise n'existait pas. Relevé au navigateur sur les 13 boutiques du corpus, à 360 et à 390 : precommande nom « MIDI — écran SPF 50 » 125 px dans 117 ← COUPE bouton « Précommander — 29,00 € » 199 px pour 212 demandés, c'est-à-dire REPLIÉ SUR DEUX LIGNES dans une boîte de 44 px de haut. Le nom fait 19 signes : ce n'est pas sa longueur, c'est ce que le bouton laisse. 125 + 212 + 44 de chrome = 381 px à servir dans 360. **Il manquait 21 px, et aucune répartition ne les invente** — c'est de la place qu'il fallait rendre, pas un partage à refaire. Modéliser la largeur du bouton depuis la configuration a été essayé et écarté (±8 % d'erreur quand 2 px séparent « forge », sain, de « precommande », coupé). ══ CE QUI EST RENDU, ET C'EST DU CHROME, JAMAIS DU TEXTE ════════════════════ Sous 400 px — là où le prix barré disparaît déjà, deux lignes plus haut : · la marge latérale de la barre : 1rem → .75rem (+8 px) · la gouttière entre le nom et le bouton : .75rem → .5rem (+4 px) · les flancs du bouton : .875rem → .625rem (+8 px) · le corps du libellé : 15px → 14px (+12 px sur le plus long du corpus) La HAUTEUR du bouton ne bouge pas (2.75rem = 44 px, la cible tactile de G3), et le libellé garde le droit de se replier : on ne lui pose PAS « white-space: nowrap », qui couperait le montant — l'information sans laquelle on ne clique pas. MESURÉ APRÈS, sur les 24 relevés (13 boutiques × 360 et 390), kit repropagé : precommande colonne 117 → 136, nom entier, bouton 192 px SUR UNE SEULE LIGNE les 12 autres aucun nom coupé, aucun libellé coupé ni replié, hauteur inchangée — et les trois libellés que le flex rognait déjà de 3 à 17 px (halle, mcp, saison) tiennent désormais en entier. 5 relevés fautifs → 0. */ .ux-barre-achat { gap: .5rem; padding-left: .75rem; padding-right: .75rem; } .ux-barre-achat .ux-bouton { font-size: 14px; padding: 0 .625rem; } } .ux-compte { font-variant-numeric: tabular-nums; } .ux-fantome { position: fixed; z-index: 100; pointer-events: none; object-fit: contain; border-radius: var(--rayon, 8px); filter: drop-shadow(0 12px 24px rgba(0,0,0,.25)); }