` est le tiroir de contenu de la
maison — « l'acte irréversible se replie » (Console), « la raison
n'apparaît qu'au geste » (Trust, Proqr). Huit replis de Console étaient
stylés en ligne à 17–19px de haut : sous le plancher de la cible (2.5.8),
et sans marqueur de dévoilement quand un `summary` porte `.btn`. */
.repli > summary {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
padding: 2px 4px;
margin-inline: -4px;
border-radius: var(--r-sm);
font-size: 12.5px;
color: var(--ink-2);
cursor: pointer;
list-style: none;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::before {
content: "";
width: 7px;
height: 7px;
flex-shrink: 0;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--t-fast) var(--ease);
}
.repli[open] > summary::before { transform: rotate(45deg); }
.repli > summary:hover { color: var(--ink); }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
/* LE TABLEAU QUI SE LIT EN CARTES. Sous 640px, une rangée devient un bloc :
l'en-tête disparaît de l'œil (pas du lecteur d'écran — il reste dans le
flux, seulement retiré visuellement), et chaque cellule porte son
étiquette. DÉCLARATIF : l'écran pose `class="table cartes"` et un
`data-label` sur chaque `| `. Les produits qui ont déjà leur pli
(`.col-fold`, FoldStack — Console, Trust, Proqr, Vendor-Connect à 720px)
le gardent ; ce motif sert Collect, dont quinze tableaux sur dix-neuf
n'avaient aucun repli et débordaient à droite. */
/* UN MOT INSÉCABLE FIXE LA LARGEUR DU TABLEAU ENTIER.
Mesuré le 16 septembre 2026 sur `/people` chez Console : le tableau
faisait 421px dans une fenêtre de 375, et la cause tenait en un mot —
`a.diallo@example.com`, 192px, qu'aucune règle ne coupe parce qu'un
courriel ne contient pas d'espace. Il fixait la largeur MINIMALE de sa
colonne, donc celle du tableau. « Statut », la colonne qu'on vient lire,
commençait hors de l'écran.
`anywhere` ET PAS `break-word` : seul `anywhere` entre dans le calcul de
la largeur min-content, et c'est cette largeur-là qui fixait le tableau.
Mesuré dans les deux sens sur la page servie — avec `break-word` le
tableau reste à 421px et le texte coupe simplement plus tôt : la
correction AURAIT EU L'AIR de marcher.
Posée sur la CELLULE et non sur le courriel : un plan de contrôle est
plein de mots insécables — un identifiant, une empreinte, une clé de
service, une URL — et le prochain arrivera par un autre écran.
RIEN ICI NE TIENT CETTE RÈGLE : une barrière de charte lit du CSS, pas
une largeur rendue. C'est `tableaux:check` chez Console qui la tient là
où elle se mesure. Le trou est nommé plutôt que tu. */
@media (max-width: 767px) {
.table :is(td, th) { overflow-wrap: anywhere; }
}
@media (max-width: 639px) {
.table.cartes thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.table.cartes tr {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.table.cartes td,
.table.cartes tbody th {
display: grid;
grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
gap: 4px 12px;
padding: 4px 0;
border: 0;
text-align: left;
}
.table.cartes td::before,
.table.cartes tbody th::before {
content: attr(data-label);
color: var(--ink-3);
font-size: 11.5px;
}
.table.cartes td:not([data-label])::before,
.table.cartes tbody th:not([data-label])::before { content: none; }
}
/* L'EN-TÊTE DE PAGE ET SON APARTÉ. L'aparté s'aligne sur le TITRE, pas sur
le chapô : posé sans marge, il flottait au milieu d'un bloc de deux
lignes. Et `.section-head` enveloppe désormais : les asides `nowrap` de
Trust débordaient à 375px. */
.page-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 36px;
}
.page-head > .aside { margin-top: 6px; }
.section-head { flex-wrap: wrap; }
.section-head .section-aside {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 10px;
align-self: center;
font-size: 12px;
color: var(--ink-3);
}
/* LE TITRE D'UNE CARTE, LES FAITS, LA BANDE DE STATISTIQUES. */
.card-title {
font-size: 13px;
font-weight: 550;
color: var(--ink);
letter-spacing: -0.005em;
}
.facts {
display: grid;
grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
gap: 8px 16px;
margin: 0;
font-size: 12.5px;
}
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink-2); }
@media (max-width: 479px) {
.facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
.facts dd { margin-bottom: 8px; }
}
.stat-strip {
display: flex;
flex-wrap: wrap;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
}
.stat-strip > * {
flex: 1 1 8rem;
background: var(--surface-solid);
padding: 12px 14px;
}
/* LA BASCULE DE LANGUE. Six coquilles forçaient `fontSize: 10.5` sur un
`.btn.ghost` pour « EN » / « FR » : le seul texte de bouton sous 11,5px
de la plateforme. La chasse est voulue — deux lettres capitales ont
besoin d'air —, la taille ne l'était pas. */
.btn.langue { letter-spacing: 0.1em; }
/* ══════════════════════════════════════════════════════════════════════
3.9.0 — LA CIBLE AU DOIGT
Tout tient aujourd'hui entre 24 et 32px : le plancher de la WCAG (2.5.8,
24px) de justesse, et rien n'approche la recommandation de 44px. Le
dessin de bureau ne bouge pas — « ONE shape: 30px tall » est une décision
— mais un pointeur GROSSIER n'est pas une souris : il n'a ni la précision
ni le survol qui rattrapent une cible étroite.
══════════════════════════════════════════════════════════════════════ */
/* 3.13.0 — 44px, LA RECOMMANDATION QUE CETTE NOTE CITAIT SANS L'ATTEINDRE.
La même liste vaut sous 768px quel que soit le pointeur : voir le § 4
de « 3.13.0 — LA QUALITÉ D'iOS », en fin de fichier. */
@media (pointer: coarse) {
.btn, .search-trigger { min-height: 44px; }
.btn, .chip:is(a, button), .tab, .repli > summary { min-width: 44px; }
.icon-btn { width: 44px; height: 44px; }
.product-switch { height: 44px; }
.topbar-identite .signout { min-height: 44px; min-width: 44px; }
.chip:is(a, button), .tab { min-height: 44px; }
.tab { display: inline-flex; align-items: center; }
/* LES RANGÉES DE LA PORTE. Mesurées à 39px au doigt le 16 septembre 2026,
sur les sept produits : un pixel sous le plancher, parce que leur
hauteur vient de leur contenu (`padding: 9px 0`) et que cette liste
n'était nommée nulle part ici. C'est la PREMIÈRE chose qu'on touche en
arrivant, et sur certains produits la seule. */
.seuil-demo-rang { min-height: 44px; align-content: center; }
.field :is(input, select) { height: 44px; }
.nav-item, .product-item, .palette-row { padding-block: 12px; min-height: 44px; }
.repli > summary, summary.btn { min-height: 44px; }
/* 3.13.1 — SIX CIBLES QUE CE BLOC NE NOMMAIT PAS, et que chaque produit
relevait dans sa propre feuille. Mesurées au doigt par les relevés des
sept (6-9 octobre 2026) : le lien de la marque 17×16 à 130×19 ; le
champ de la palette 225×25 à 520×23 ; le lien seul d'une cellule,
d'un fait ou d'un fil d'Ariane 8×15 à 283×15 ; « Mot de passe
oublié ? » 132×17 ; la rangée d'objet rendue en lien 35 à 38px ; le
champ d'édition en place 343×33. `:not([class])` : un lien qui porte
une classe (`.btn`, `.chip`, `.cite`, `.pill`…) a déjà son dessin et sa
règle — un `min-height` posé sur une pastille de 22px la redessinerait
à 44. La même liste vaut sous 768px : § « 3.13.1 », 2. */
.brand-link,
:is(.table td, .table th, .table li, .facts dd, .breadcrumb) > a:not([class]) {
display: inline-flex;
align-items: center;
min-height: 44px;
min-width: 44px;
}
.seuil-second a { display: inline-flex; align-items: flex-end; min-height: 44px; }
.palette-head input { min-height: 44px; }
.object-row:is(a, button, label),
.editable .editing { min-height: 44px; }
}
/* iOS ZOOME LA PAGE au focus d'un champ sous 16px, et ne dézoome jamais :
le lecteur se retrouve dans un écran deux fois trop grand, à faire
glisser la page pour lire ce qu'il tape. Téléphone seulement — sur une
tablette la place existe, et 16px y déformerait les formulaires denses. */
@media (pointer: coarse) and (max-width: 767px) {
/* TOUS LES CHAMPS, PAS SEULEMENT CEUX DE `.field`. La règle ne nommait
que le formulaire type, et manquait les deux champs que l'on rencontre
en premier : celui de la PALETTE DE COMMANDE (15px — la recherche de
toute la maison) et le `select` de la PORTE (14px — la seule commande
de la page d'entrée de Trust et de Proqr). Un champ qui zoome à
l'entrée laisse le lecteur dans un écran deux fois trop grand avant
même qu'il soit entré. */
.field :is(input, select, textarea),
.palette-head input,
.seuil-form :is(input, select, textarea) { font-size: 16px; }
/* LE LIEN D'ACCUEIL DU TÉLÉPHONE. Mesuré à 101×19px au doigt.
LA NORME EST TENUE, ET CE N'EST PAS LA RAISON : la WCAG 2.5.8 AA
exempte une cible sous 24px quand rien d'autre n'est à moins de 24px
de son centre, et le voisin le plus proche est à 83px. Ce qui est en
cause est le plancher de CETTE MAISON, 44px au doigt depuis la 3.13.0 — et l'objet :
c'est le lien d'accueil, celui qu'on vise du pouce en tenant
l'appareil, sur l'écran où l'on a le moins de place pour viser.
Il n'existe QUE sur téléphone (`.mobile-only`), donc aucun écran large
ne le montre et aucune relecture faite au bureau ne pouvait le voir. */
a.mobile-only { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
}
/* ══════════════════════════════════════════════════════════════════════════
3.13.0 — LA QUALITÉ D'iOS
Une couche, la même que tout ce qui précède, posée APRÈS lui : chaque
règle d'ici l'emporte sur celle qu'elle remplace par l'ORDRE, et ce
qu'elle retire, elle le retire par une déclaration écrite
(`overflow-wrap: normal`, `display: grid`, `background: transparent`) —
jamais par une absence. C'est ce qui permet d'éprouver cette feuille en
l'AJOUTANT à la page servie, sur la plateforme vivante, sans rien
reconstruire : ce que l'ajout mesure est ce que la feuille fera.
Chaque paragraphe dit ce que la sonde d'écrans a mesuré sur les sept
produits (sept largeurs, de 375 à 1 440, tous les chemins servis) et ce
qui change. Les nombres complets sont dans la livraison de cette version.
══════════════════════════════════════════════════════════════════════════ */
@layer yntgyst-components {
/* ── 1 · UNE PASTILLE NE SE COUPE PAS ────────────────────────────────────
`.pill` (22px) et `.chip` (24px) ont une hauteur FIXE, et rien ne leur
interdisait de passer à la ligne : dans une cellule étroite, « Reçue en
entier » se posait sur deux ou trois lignes DANS une forme d'une ligne,
et sortait par le haut et par le bas — jusqu'à 94px chez Proqr, 833
occurrences chez Trust, « Acti/ve » chez Console. La charte a tiré cette
leçon pour `.btn` en 1.5.0 (« The 30px was DECLARED and not TRUE ») ;
elle ne l'avait pas tirée pour les marques.
Une marque est un mot, pas une phrase : elle ne passe jamais à la ligne
et ne se laisse pas écraser par ses voisines. `.pill.wrap` reste le SEUL
chemin vers deux lignes, et le dit désormais en toutes lettres. */
.pill,
.chip { white-space: nowrap; flex-shrink: 0; }
.pill.wrap { white-space: normal; flex-shrink: 1; }
/* ── 2 · UN TABLEAU ÉTROIT NE HACHE PLUS SES MOTS ────────────────────────
Sous 768px, `overflow-wrap: anywhere` était posé sur TOUTES les cellules
pour qu'un courriel insécable cesse de fixer la largeur d'un tableau
(voir sa note, plus haut). Il tenait sa promesse et en cassait une
autre : `anywhere` ramène la largeur minimale de chaque cellule à UN
glyphe, et l'algorithme du tableau automatique donne alors la place au
contenu le plus long. Les colonnes courtes tombaient à une lettre —
« STATU/S », « OVERA/LL », « R/e/l/e/a/s/e » sur 29 × 140px, « Acti/ve »
sous sa pastille : 3 674 mots coupés chez Trust, 938 écrasements chez
Proqr.
LA CELLULE GARDE `anywhere` : c'est là que vivent les courriels, les
URL, les empreintes, et le prochain arrivera par un autre écran. CE QUI
N'EST PAS DU TEXTE LIBRE LE PERD — l'en-tête, qui nomme la colonne et en
devient le PLANCHER (une colonne ne descend plus sous le plus long mot
de son titre), la pastille, la marque, le bouton, le repli, la touche,
le registre, la date, le nombre, et la cellule que le produit déclare
serrée (`.tight`, la convention de Proqr et de Trust).
CE QUI RESTE TROP LARGE DÉFILE, AU LIEU DE S'ÉCRASER : dans sa
`.data-scroll`, région focalisable. C'est un état intermédiaire assumé ;
le vrai remède d'un tableau-liste au téléphone est `.table.cartes`
(plus haut), que chaque produit pose écran par écran. */
@media (max-width: 767px) {
.table th,
.table :is(td, th):is(.num, .tnum, .tight),
.table :is(td, th) :is(.pill, .chip, .btn, .kbd, .register, .tnum, summary, time) {
overflow-wrap: normal;
}
}
/* Le résumé d'un repli est une COMMANDE — « Release », « Révoquer » — et
il était le seul à pouvoir passer à la ligne : `inline-flex`, sans
`nowrap`. Dans une colonne serrée il s'écrivait une lettre par ligne. */
.repli > summary { white-space: nowrap; }
/* ── 3 · LA BARRE DU HAUT TIENT DANS UN TÉLÉPHONE ────────────────────────
À 375px la barre porte jusqu'à sept commandes dans 343px : menu, marque,
recherche, puis ce que le produit pose — cloche, langue, thème — et la
sortie. Le déclencheur de recherche, seul élément compressible
(`min-width: 0`), tombait entre 24 et 93px, et son libellé à « R… » ou
« Sea… » — sur chaque page de chaque produit, 749 fois chez Knowledge.
Une ellipse qui ne laisse qu'une lettre n'est plus un libellé.
LA BARRE DÉCIDE SUR SA PROPRE LARGEUR, PAS SUR CELLE DE L'ÉCRAN. Sous
600px de barre — tout téléphone, et l'iPad en portrait, où la barre
latérale n'en laisse que 520 —, la recherche devient ce qu'elle est sur
iOS : une loupe de 44px. Le mot et le ⌘K quittent l'ÉCRAN, pas
l'oreille : depuis la coquille 1.11.0 le nom est porté par le bouton
lui-même (`aria-label`, le même mot), si bien qu'ils peuvent sortir par
`display: none` sans rendre la commande muette. La déconnexion repliée
suit la même voie ; son mot n'a plus besoin de la technique `.sr-only`,
qu'aucun outil de mesure ne distingue d'un texte coupé.
LE SEUL `!important` DE CETTE CHARTE HORS DU MOUVEMENT RÉDUIT, et sa
raison. La coquille rend le déclencheur élastique par un style EN LIGNE
(`flex: 1`, `maxWidth: 420`) — c'est lui qui donne au bureau sa grande
recherche, et Knowledge, qui sert une copie de cette feuille, en dépend.
Un style en ligne bat toute feuille ; seul `!important` le bat. Il ne
vise qu'une propriété, sous une seule condition : sous 600px de barre,
la loupe ne s'étire pas.
LES CIBLES DE 44px DÉBORDENT SUR L'AIR QUI LES SÉPARE, comme les
boutons d'une barre d'iOS : 44px pour le doigt, 32 dans la rangée
(`margin-inline: -6px`). Sept commandes de 44px et leurs écarts
réclament 372px ; il en existe 343. Deux cibles voisines se partagent
au plus 4px, pris dans l'écart qui les séparait déjà. */
.topbar { container: barre / inline-size; }
@media (max-width: 479px) {
.topbar { gap: 8px; }
.topbar-identite .signout .signout-mot { display: none; }
}
@container barre (max-width: 599px) {
.search-trigger {
flex: 0 0 auto !important;
width: 28px;
min-width: 28px;
max-width: none;
padding: 0;
justify-content: center;
}
.search-trigger > :not(svg) { display: none; }
}
/* Au bureau (pointeur fin, 768px et plus), la loupe a la taille de ses
voisines, 28px, et rien ne déborde : c'est au doigt et sous 768px
seulement que les cibles passent à 44 et empiètent sur l'air. */
@media (pointer: coarse), (max-width: 767px) {
@container barre (max-width: 599px) {
.search-trigger { width: 44px; min-width: 44px; }
.topbar :is(.icon-btn, .search-trigger, .btn, .signout) { margin-inline: -6px; }
}
}
/* ── 4 · 44px AU DOIGT — ET SOUS 768px ───────────────────────────────────
Le bloc tactile de la 3.9.0 (plus haut) montait les commandes à 40px et
citait lui-même la recommandation de 44 sans l'atteindre ; les marques
et les onglets restaient à 32, la sortie repliée à 28 de large. Mesuré
sur les sept : 1 951 cibles sous 44 chez Trust, 1 551 chez Proqr, 1 144
chez Knowledge. Le bloc tactile passe à 44, et la même liste vaut sous
768px quel que soit le pointeur : une fenêtre de téléphone est tenue au
doigt, et la densité du bureau n'y a rien à faire. Les deux listes sont
la même et se lisent ensemble ; `cible:check` lit la première. */
@media (max-width: 767px) {
.btn, .search-trigger { min-height: 44px; }
.btn, .chip:is(a, button), .tab, .repli > summary { min-width: 44px; }
.icon-btn { width: 44px; height: 44px; }
.product-switch { height: 44px; }
.topbar-identite .signout { min-height: 44px; min-width: 44px; }
.chip:is(a, button), .tab { min-height: 44px; }
.tab { display: inline-flex; align-items: center; }
.seuil-demo-rang { min-height: 44px; align-content: center; }
.field :is(input, select) { height: 44px; }
.nav-item, .product-item, .palette-row { padding-block: 12px; min-height: 44px; }
.repli > summary, summary.btn { min-height: 44px; }
a.mobile-only { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
/* ── 5 · LA CARTE DE LA PORTE NE COUPE RIEN ──────────────────────────────
La rangée « se connecter en tant que » était une grille `1fr auto` à
24px d'écart : le rôle gardait sa largeur, le courriel partait en
ellipse — « a.diallo@exa… » entre 375 et 430px, sur la première page de
chaque produit. Et la note de la porte, où vit un jeton insécable
(`EVIDENCE_ALLOW_DEMO_IN_PRODUCTION=true`), dépassait de 5px d'une
carte en `overflow: hidden`, qui la coupait.
Sous 480px le rôle passe SOUS le nom — la rangée d'une liste d'iOS, un
titre et son sous-titre — et le courriel ne se coupe plus : il a la
largeur de la carte, et un mot trop long pour elle se replie au lieu de
disparaître. */
.seuil.porte .seuil-corps { overflow-wrap: break-word; }
.seuil-demo-note { overflow-wrap: anywhere; }
.seuil-demo-rang { grid-template-columns: minmax(0, 1fr) auto; }
.seuil-demo-rang .qui {
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
}
@media (max-width: 479px) {
.seuil-demo-rang {
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 2px;
}
}
/* ── 6 · UNE BANDE DE CHIFFRES A DES TUILES ÉGALES ───────────────────────
`.stat-strip` était un `flex-wrap` à base de 8rem : un montant de 26px
(« 1 712 037,40 € ») poussait sa tuile sur sa propre ligne — trois
tuiles donnaient 2 + 1, quatre 1 + 2 + 1 — et la dernière s'étirait sur
toute la largeur ; un libellé qui passait à deux lignes décalait son
chiffre de 20px sous ceux des voisines.
La bande devient une GRILLE de colonnes égales — autant qu'il en tient
de 10rem, soit deux sur tout téléphone — et chaque tuile y occupe trois
rangées PARTAGÉES (`subgrid`) : libellé, chiffre, note. Les chiffres
d'une même rangée tombent sur la même ligne, quel que soit le libellé.
Le filet d'un pixel n'est plus le fond de la bande vu entre les tuiles
— une case vide l'aurait peint en aplat — mais le contour de chaque
tuile, dans l'écart. Et le chiffre se règle sur SA tuile (13 % de sa
largeur, entre 18 et 26px), comme un chiffre d'iOS qui rétrécit pour
tenir plutôt que de sortir. */
.stat-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
background: transparent;
}
.stat-strip > * {
flex: none;
min-width: 0;
grid-row: span 3;
box-shadow: 0 0 0 1px var(--line);
}
.stat-strip > .stat { container-type: inline-size; }
.stat-strip > .stat:not(:has(> :nth-child(4))) {
display: grid;
grid-template-rows: subgrid;
row-gap: 0;
align-content: start;
}
.stat-strip > .stat .value { font-size: clamp(18px, 13cqi, 26px); }
/* ── ET UN FILET : UN CHAMP NE DÉPASSE PAS SON FORMULAIRE ─────────────────
Un `select` prend la largeur de sa plus longue option : chez Proqr, des
phrases de 80 à 100 caractères poussaient la page 479px au-delà de
l'écran. Le produit raccourcit ses options ; la charte borne le champ.
`max-width` seul ne suffit pas : un `select` dont la largeur est un
POURCENTAGE cesse de compter sa plus longue option dans la largeur
minimale de son conteneur, et c'est elle qui poussait la page. */
.field :is(input, select, textarea) { max-width: 100%; }
.field select { width: 100%; }
/* ── ET LES ONGLETS DISENT QU'IL EN RESTE ────────────────────────────────
`.tabs` défile en largeur, et c'est voulu ; mais rien ne disait qu'il
restait des onglets à droite — « Evidence ( » coupé au milieu de son
compteur, l'étape « Assess… » d'un assistant. Le bord s'estompe quand le
composant d'onglets du produit pose `.deborde`, c'est-à-dire tant qu'il
reste à défiler (Trust a déjà `TabsRecenter` pour le savoir). Un masque
et non une couleur : le fondu vaut sur tous les fonds et les deux
thèmes. */
.tabs.deborde {
-webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 40px), transparent);
mask-image: linear-gradient(to right, currentColor calc(100% - 40px), transparent);
}
}
/* ══════════════════════════════════════════════════════════════════════════
3.13.1 — LA PERSONNE AU TÉLÉPHONE, ET CE QUE LES SEPT RELEVAIENT SEULS
Même forme que le § 3.13.0 au-dessus : une couche, la même, posée APRÈS
tout ce qui précède ; ce qu'elle retire, elle le retire par une
déclaration écrite. Le 1 est une décision du propriétaire ; les 2 à 7
sont des règles que les relevés d'écrans des sept produits (sonde iOS,
sept largeurs, valeurs longues, 6-9 octobre 2026) avaient posées chacun
dans SA feuille — Collect, Console, Evidence, Knowledge, Proqr, Trust,
Vendor-Connect —, parce que la cause est ici et que le produit ne pouvait
pas toucher la charte. Chacune remonte une fois, au lieu d'être recopiée
sept fois ou oubliée par ceux qui ne l'avaient pas encore mesurée.
══════════════════════════════════════════════════════════════════════════ */
@layer yntgyst-components {
/* ── 1 · SOUS 768px, LES INITIALES — LE NOM ENTIER DANS LE MENU DU COMPTE ─
Décision du propriétaire, 10 octobre 2026 (D21). Jusqu'ici la barre
effaçait le nom sous 768px et gardait la seule déconnexion : personne ne
voyait plus qui était connecté sur un téléphone, et au-dessus le nom
passait à l'ellipse à 22 caractères (« Nina Falk Telekommunikationsdienste
de Saint-Rémy-… », 366 à 404px cachés chez Vendor-Connect ; « Engagement ·
Déclaration de durabilité… », 500px chez Evidence).
SOUS 768px, la coquille 1.12.0 rend un bouton de 44px (`.compte`) qui
porte les INITIALES dans une pastille de 32px, et dont le NOM ACCESSIBLE
est le nom entier. Il ouvre le MENU DU COMPTE : le nom entier, qui passe
à la ligne au lieu de se couper, puis la déconnexion, une rangée de 44px.
La déconnexion de la barre s'y range : la barre garde le même nombre de
commandes qu'avant, la pastille prenant la place de la sortie repliée.
À 768px ET AU-DESSUS, RIEN NE CHANGE : le nom et la sortie restent dans
la barre, et le bouton comme le menu ne s'y montrent jamais.
LE MENU S'ACCROCHE À LA BARRE, PAS AU BOUTON. `.topbar-identite` n'est
pas positionnée : le bloc conteneur du menu est `.topbar` (absolue), si
bien que `right: 8px` le tient dans l'écran quelle que soit la place de
la pastille, et `max-width` l'empêche d'en sortir. */
.topbar-identite .compte {
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 999px;
background: none;
font: inherit;
cursor: pointer;
}
.compte-initiales {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--surface-3);
color: var(--ink);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
transition: box-shadow var(--t-fast) var(--ease);
}
.topbar-identite .compte:hover .compte-initiales,
.topbar-identite .compte[aria-expanded="true"] .compte-initiales {
box-shadow: 0 0 0 1.5px var(--ink-3);
}
/* Une fenêtre, donc opaque — la règle des fenêtres de la 3.11, plus haut :
`--surface-solid`, le filet de `--glass-edge`, l'ombre du niveau
flottant. */
.compte-menu {
position: absolute;
top: calc(100% + 4px);
right: 8px;
z-index: 45;
width: max-content;
min-width: 208px;
max-width: calc(100% - 16px);
padding: 4px;
border: 1px solid var(--glass-edge);
border-radius: var(--r-float);
background: var(--surface-solid);
box-shadow: var(--shadow-lg);
}
/* LE NOM ENTIER, jamais coupé : il passe à la ligne, et un mot plus long
que le menu (un nom de famille de 35 lettres) se replie au lieu de
sortir. */
.compte-nom {
margin: 0;
padding: 8px 10px 6px;
font-size: 12.5px;
font-weight: 500;
line-height: 1.4;
color: var(--ink);
white-space: normal;
overflow-wrap: break-word;
}
.compte-menu form {
margin: 4px 0 0;
padding-top: 4px;
border-top: 1px solid var(--line);
}
.compte-sortie {
display: flex;
align-items: center;
width: 100%;
min-height: 44px;
padding: 0 10px;
border: 0;
border-radius: var(--r-sm);
background: none;
font: inherit;
font-size: 12.5px;
color: var(--ink-2);
text-align: start;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.compte-sortie:hover,
.compte-sortie:focus-visible {
background: var(--surface-2);
color: var(--ink);
}
@media (max-width: 767px) {
.topbar-identite > form { display: none; }
.topbar-identite .compte { display: inline-flex; }
}
@media (min-width: 768px) {
.compte-menu { display: none; }
}
/* La pastille suit ses voisines de la barre (§ 3 de la 3.13.0) : 44px pour
le doigt, 32 dans la rangée. */
@media (pointer: coarse), (max-width: 767px) {
@container barre (max-width: 599px) {
.topbar .compte { margin-inline: -6px; }
}
}
/* ── 2 · LES SIX CIBLES DU BLOC TACTILE, SOUS 768px AUSSI ─────────────────
Les six cibles que la 3.13.1 ajoute au bloc `pointer: coarse` (3.9.0,
plus haut, où `cible:check` les lit), et la même liste sous 768px quel
que soit le pointeur — la règle du § 4 de la 3.13.0. Collect, Console,
Knowledge, Proqr, Trust et Vendor-Connect les relevaient chacun dans sa
feuille ; Evidence relevait sa marque par le CONTENU qu'il passe au lien.
LE LIEN DE LA MARQUE PORTE UNE CLASSE (`.brand-link`, coquille 1.12.0) :
`.sidebar-brand a`, la forme que les produits écrivaient, atteint aussi
les liens du menu des produits (`.product-item`, `display: block`), que
le même `inline-flex` remettrait en ligne. */
@media (max-width: 767px) {
.brand-link,
:is(.table td, .table th, .table li, .facts dd, .breadcrumb) > a:not([class]) {
display: inline-flex;
align-items: center;
min-height: 44px;
min-width: 44px;
}
.seuil-second a { display: inline-flex; align-items: flex-end; min-height: 44px; }
.palette-head input { min-height: 44px; }
.object-row:is(a, button, label),
.editable .editing { min-height: 44px; }
}
/* LE CHAMP DE LA PALETTE MONTE DANS SON REMBOURRAGE : 44 + 2 × 4 = 52, la
tête garde la hauteur qu'elle avait (53px) au lieu de passer à 73.
ET UNE `.chip` QUI PORTE UNE COMMANDE GRANDIT AVEC ELLE. `.chip` a une
hauteur FIXE de 24px ; la croix qui retire un élément, portée à 44px au
doigt par le produit, en débordait et recouvrait celle de la rangée
d'en dessous (Collect, 17 chevauchements de 32 %, relevé du 6 octobre
2026). Au doigt et sous 768px, la hauteur devient un plancher ; au
bureau, rien ne bouge. */
@media (pointer: coarse), (max-width: 767px) {
.palette-head { padding-block: 4px; }
.chip:has(> :is(a, button)) { height: auto; min-height: 24px; }
}
/* ── 3 · UN NOM NE PASSE PAS À L'ELLIPSE ─────────────────────────────────
Décision Q-B du propriétaire (6 octobre 2026) : seuls les jetons
techniques — courriel, identifiant, empreinte, URL — passent à
l'ellipse. La charte la posait sur des NOMS : le nom et l'aide d'une
rangée d'objet (les quatre aides des réglages de Proqr coupées à 375px,
« The documents a supplier has to produce », 77px cachés), et le nom
d'un résultat de la palette (« Établissements Camara-Delacroix,
Ébénisterie… », 304 à 329px cachés à 375px chez Proqr, 9 à 34 encore à
1 440). Ils passent à la ligne, et la rangée grandit.
DANS LA PALETTE, LE NOM SE LIT EN COLONNE, ET LA RANGÉE NE SE REPLIE
QUE S'IL LE FAUT. Le nom avait une base nulle (`flex: 1`) ET une
largeur minimale nulle (`min-width: 0`) : une référence de 68
caractères en chasse fixe (≈ 470px) prenait la rangée entière à
375px, et le nom était écrasé à côté d'elle. Il garde sa base nulle —
il prend la place que la référence et le type lui laissent, et s'y
replie entre ses mots, en colonne —, mais plus sa largeur nulle : il
ne descend jamais sous son plus long mot (`min-width: auto`). Quand ce
mot ne tient pas à côté de la référence, la rangée se replie et le nom
passe sur la ligne suivante ; la référence se replie à ses tirets
plutôt que de sortir. Un mot n'est coupé que s'il est plus large que
la rangée.
NI UNE BASE FIXE, NI LA LONGUEUR DU NOM. La première écriture de ce §
demandait 14rem au nom, quel qu'il soit : 224px, plus la référence et
le type, dépassent la rangée d'un téléphone, et CHAQUE résultat
passait sur deux lignes, nom court compris — « Business Term » seul en
ligne 2 chez Knowledge, 44 → 71,6px par rangée, huit résultats
visibles devenus cinq et demi (contre-lecture du lot, 10 octobre
2026). La deuxième lui donnait pour base sa propre longueur (`auto`) :
un nom court tenait, mais un nom plus long que la place laissée
passait sur SA ligne, la référence seule au-dessus, le type seul
dessous — chez Proqr, « Casques de visioconférence pour l'équipe
données » 62,8 → 99px, la liste « PR » de 657 à 782px (reprise, 10
octobre 2026). En colonne, elle revient à 657. */
.object-row .name,
.object-row .sub {
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: break-word;
}
.palette-row { flex-wrap: wrap; }
.palette-row .name {
flex: 1 1 0%;
min-width: auto;
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: break-word;
}
.palette-row .ref {
min-width: 0;
max-width: 100%;
overflow-wrap: break-word;
}
/* ── 4 · UN TITRE NE FAIT PAS DÉFILER LA PAGE ────────────────────────────
Un élément souple garde pour largeur minimale celle de son plus long
mot. « Solvik Energi Informationssicherheitsmanagementsystem » en
`.page-title` (≈ 410px dans une colonne de 343, Trust),
« Nachhaltigkeitsberichterstattungsverpflichtungen » (≈ 700px, Evidence),
un nom de famille de 35 lettres (Console) : la page défilait en largeur
de 375 à 768px, et l'en-tête entier sortait de l'écran.
`break-word` NE COUPE QUE LE MOT QUI NE TIENT SUR AUCUNE LIGNE, et ne
touche pas la largeur minimale : aucun titre ordinaire ne bouge. Le
bloc du titre d'une `.page-head` peut désormais céder (`min-width: 0`).
Un produit qui préfère réduire la police d'un tel mot plutôt que le
replier (Trust, `TitreAjuste`) le garde : ce plancher ne joue alors
jamais. */
.page-head > :not(.aside) { min-width: 0; }
.page-hero,
.page-title,
.object-title { overflow-wrap: break-word; }
.section-head h2,
.section-head .title {
min-width: 0;
overflow-wrap: break-word;
}
/* ── 5 · EN CARTE, UNE MARQUE GARDE SA LARGEUR ───────────────────────────
Une cellule de `.table.cartes` est une grille sans `justify-items` :
une pastille de statut seule s'y étirait en ruban sur toute la colonne
de la valeur (Collect, réserve de #432 ; Proqr ; Trust). Les marques et
les commandes se posent au début de leur piste ; le texte et les blocs
gardent la piste entière. */
@media (max-width: 639px) {
.table.cartes :is(td, tbody th) > :is(.pill, .chip, .badge-count, .count, .cite, .kbd, .btn, a, button, time) {
justify-self: start;
}
}
/* ── 6 · LE POINT D'UNE PASTILLE GARDE SA FORME ──────────────────────────
Quand le texte d'une `.pill.wrap` réclame plus que sa ligne, la flexbox
retire la place aux DEUX enfants au prorata de leur base : le point de
5px tombait à un trait de 2 à 3px (Vendor-Connect, « En attente de votre
confirmation » à 768px). Même chose pour le point d'un bandeau. */
.pill .dot,
.banner .bar .dot { flex-shrink: 0; }
/* ── 7 · LE RÉSUMÉ D'UN REPLI, DANS UNE RANGÉE D'ACTES ───────────────────
`margin-inline: -4px` aligne le chevron sur le texte d'une PHRASE. Dans
une `.btn-row`, le résumé est une commande parmi des boutons : quand il
finit la ligne, sa boîte dépassait de 4px ce qui la contient, et le
cadre d'un tableau défilait pour 4px (Trust, /remediation à 390px, 362
pour 358). */
.btn-row .repli > summary { margin-inline: 0; }
/* ── 8 · AUCUNE LETTRE SOUS 11,5px ───────────────────────────────────────
Rien ici : les trois règles changent EN PLACE, plus haut, parce que
`cible:check` lit la règle elle-même et ne doit plus rien exempter.
`.fi` (la lettre F ou I d'une clause, fait ou inférence) passe de 8 à
11,5px dans sa boîte de 12 ; `.fam.sm` de 8 à 11,5px dans son carré de
20 ; `.fam` de 10 à 11,5px dans celui de 28. Décision D11/Q-C du
propriétaire : 0 texte rendu sous 11,5px. `.fi` est rendue par
Knowledge sur ses fiches d'objet ; CIBLE 1.7.0 retire les trois
exemptions, si bien qu'une lettre qui redescend rougit chez les sept. */
}
|