` dans le flux : sur une page courte — un fil vide, une fiche sans * rencontre, un formulaire de connexion, une erreur — il s'arrêtait là où le * contenu s'arrêtait, avec un aplat de fond en dessous. Le défaut dépendait de * la LONGUEUR DU CONTENU ET DE LA HAUTEUR DE L'ÉCRAN : invisible sur un * portable bien rempli, flagrant sur un grand écran de bureau. Il touchait les * 21 écrans, puisqu'il est dans la coquille. * * 🛑 **UNE COLONNE FLEX, PAS UN `position: fixed`.** Un pied fixé se * superposerait au contenu et volerait sa hauteur en permanence ; celui-ci * reste DANS le flux — il descend quand la page est courte, et se laisse * pousser quand elle est longue. C'est ce qui permet à un écran de grandir * dynamiquement (un îlot qui insère des résultats, un `

` et non un `` : le verrou de * score EST un lien (sur mobile c'est le seul chemin) et un `` dans un `` * est invalide. Le lien du match couvre donc la carte par son `::after`, et le * verrou passe au-dessus en `z-index`. Deux points d'arrêt au clavier, dans * l'ordre du document, chacun annonçant ce qu'il ouvre. */ .sm-mt { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 18px; gap: var(--sp-5); align-items: center; background: var(--color-surface); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: var(--sp-6) var(--sp-7); color: inherit; } .sm-mt + .sm-mt { margin-top: var(--sp-5); } .sm-mt:hover { box-shadow: var(--shadow-md); } .sm-mt-lien { color: inherit; text-decoration: none; } .sm-mt-lien::after { content: ''; position: absolute; inset: 0; } .sm-mt-lien:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--r-xs); } /* Le verrou repasse AU-DESSUS du lien étiré : sans cela il serait recouvert et deviendrait incliquable — exactement le contraire de ce que §D.5 demande. */ .sm-mt .sm-score--locked { position: relative; z-index: 1; } /* Colonne fixe : c'est elle qui fait que les listes s'alignent d'un écran à l'autre. La MAJUSCULE est en CSS, jamais dans le msgid — sinon l'anglais casse et la traduction double. */ .sm-mt-statut { display: block; text-align: center; font-size: var(--fs-cap); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-neutral-700); } .sm-mt-statut--live { color: var(--sm-loss); } .sm-mt-statut--mitemps { color: var(--sm-draw-text); } /* jamais `--sm-draw` */ .sm-mt-statut--termine { color: var(--color-neutral-700); } .sm-mt-statut--avenir { color: var(--color-accent-2-700); } .sm-mt-statut--annule { color: var(--color-neutral-600); } .sm-mt-heure { display: block; margin-top: 3px; text-transform: none; letter-spacing: 0; font-family: var(--font-heading); font-size: 15px; color: var(--color-text); } .sm-mt-corps { min-width: 0; } /* ⚠️ La ligne est passée de `block` à `flex` pour accueillir le badge vidéo à sa droite. L'ellipse a suivi sur le LIEN : posée sur le conteneur flex, elle n'aurait rien tronqué (un élément flex ne déborde pas de son parent, il le pousse) et « Confédération Africaine de Football · J14 » aurait chassé le badge hors de la carte. */ .sm-mt-comp { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-cap); color: var(--color-neutral-700); margin-bottom: 7px; } .sm-mt-comp > .sm-mt-lien { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Le badge vidéo : une existence, jamais une promesse d'accès. Neutre et non accentué — il ne doit pas se lire comme un bouton, la carte entière étant déjà le lien. `flex: none` : c'est le nom de la compétition qui se tronque, jamais lui. */ .sm-mt-video { display: inline-flex; align-items: center; flex: none; color: var(--color-neutral-700); } .sm-mt-video svg { display: block; } /* L'issue du match (T.A.B., après prolongation). Sous les deux lignes d'équipes, alignée sur le score — c'est de lui qu'elle corrige la lecture. */ .sm-mt-issue { display: block; margin-top: 5px; text-align: right; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neutral-700); } .sm-mt-eq { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; row-gap: 5px; align-items: center; } /* `min-width: 0` est INDISPENSABLE : sans lui, une piste de grille refuse de descendre sous la largeur de son contenu, et « Mamelodi Sundowns FC » fait déborder la page à 390 px. */ .sm-mt-nom { min-width: 0; font-size: var(--fs-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sm-mt-score { font-family: var(--font-heading); font-size: var(--fs-num-md); text-align: right; } /* 🛑 LE POINT DE §D.5 : deux lignes d'équipe, UNE seule pastille de verrou. */ .sm-mt-eq > .sm-score--locked { grid-column: 3; grid-row: 1 / span 2; align-self: center; } .sm-mt-chev { color: var(--color-neutral-500); text-align: center; } @media (max-width: 420px) { .sm-mt { grid-template-columns: 56px minmax(0, 1fr); padding: var(--sp-5) var(--sp-6); } /* Le chevron est DÉCORATIF : la carte entière est le lien. */ .sm-mt-chev { display: none; } } /* Une carte qui porte une liste : c'est la liste qui perd ses puces, pas la carte qui gagne une règle de plus. */ .sm-liste { list-style: none; margin: 0; padding: 0; } /* ── LA BANDE RICHE DU PIED — rendue sur le seul accueil, DÉCLARÉE ICI ──── * * Balisage : `templates/v2/partials/_footer.html`, sous `{% if pied_riche %}`. * * 🛑 ELLE NE PEUT PAS VIVRE DANS `sm-accueil.css`, ET LE GARDE-FOU L'A DIT. * `_footer.html` est un partiel PARTAGÉ : `test_aucune_classe_emise_n_est_sans_feuille` * a fait rougir `v2/glossaire.html` — un gabarit qui n'ouvre jamais la bande, * mais qui inclut le partiel qui la porte, et qui ne charge pas la feuille de * l'accueil. Les classes ne peignaient donc rien pour lui. La règle générale * est celle-ci : **le style d'un partiel partagé vit dans une feuille * partagée**, quel que soit le nombre d'écrans qui l'activent aujourd'hui. * * Ce n'est PAS un second pied (arbitrage A-8) : c'est une bande AU-DESSUS du * pied compact. Écrire un `_footer_riche.html` séparé aurait dupliqué la * bascule de thème, le sélecteur de langue et l'espace compte dans un second * FICHIER — quatre divergences en attente. * * 🔴 CINQ COLONNES TITRÉES, ET NON DEUX ZONES. La bande portait « Rester * informé » et « Nous suivre » pendant que les six destinations tombaient en * rangée à plat dans le pied compact et que les liens légaux se noyaient dans * la ligne de copyright : aucune hiérarchie, sur le dernier écran que voit un * visiteur. On reprend le découpage de la maquette — marque · Explorer · * Aide & infos · Légal · Rester informé. « Nous suivre » a été retirée : les * quatre comptes n'existent pas (motif complet dans `statsmaker/coquille.py`). * * ⚠️ `repeat(auto-fit, minmax(240px, 1fr))` NE POUVAIT PAS tenir cinq colonnes : * 5 × 240 + 4 gouttières dépassent les 1120 px de `--sm-page-max`, la grille * retombait donc à quatre pistes et la dernière colonne passait à la ligne, * seule. Les proportions sont donc DÉCLARÉES : la marque et l'inscription à la * lettre d'information sont plus larges que trois listes de liens courts. */ .sm-ftx { flex: none; border-top: 1px solid var(--color-divider); background: var(--color-surface); } .sm-ftx-in { max-width: var(--sm-page-max); margin: 0 auto; padding: var(--sp-10) var(--sp-9); display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr); gap: var(--sp-9) var(--sp-8); align-items: start; } .sm-ftx-col { min-width: 0; } .sm-ftx-logo { display: flex; align-items: center; gap: 9px; } /* La baseline REPREND le `

` de l'accueil : zéro `msgid` neuf, et les mots du produit plutôt que ceux d'une maquette. Bornée à 30 caractères de large : au-delà, une ligne de pied de page se lit comme un paragraphe. / .sm-ftx-base { margin: var(--sp-4) 0 0; max-width: 30ch; font-size: var(--fs-cap); color: var(--color-neutral-700); text-wrap: pretty; } / Titre de colonne. Il TITRE vraiment un groupe de liens — d'où un `

` — mais il a son propre dessin et n'emprunte plus `.sm-rubrique`, qui est une suréchelle de contenu et non de navigation. / .sm-ftx-h { margin: 0 0 var(--sp-3); font-size: var(--fs-cap); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-neutral-700); } .sm-ftx-liens { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } / 44 px de haut : ce sont des liens de pied de page sur un produit consulté au pouce, et 2.5.5 ne fait pas d'exception pour le bas de page. Empilés, ils forment une colonne facile à viser — c'est l'inverse de la rangée à plat qu'ils remplacent, où les cibles se touchaient. / .sm-ftx-liens a { display: inline-flex; align-items: center; min-height: var(--sm-tap-min); font-size: var(--fs-ui); } .sm-ftx-nl { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .sm-ftx-nl .input { flex: 1 1 180px; min-width: 0; } / La cible est le `` ENTIER, pas la seule case. Non pré-cochée : un consentement pré-coché n'en est pas un. / .sm-ftx-consent { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sm-tap-min); margin: var(--sp-3) 0 0; font-size: var(--fs-cap); color: var(--color-neutral-700); text-wrap: pretty; } / ⚠️ `min-width` AUTANT que `min-height` : 2.5.5 demande 44 × 44, et « Privacy » ne fait que 39 px de large en anglais — le défaut n'existait pas en français. Un seuil vérifié dans une seule langue n'est pas vérifié. / .sm-ftx-lien { display: inline-flex; align-items: center; justify-content: center; min-height: var(--sm-tap-min); min-width: var(--sm-tap-min); font-size: var(--fs-cap); } / ── Les trois replis de la bande ────────────────────────────────────────── * * 980 px : les cinq pistes tombent sous 130 px et « Conditions d'utilisation » * ne tient plus sur deux lignes. Les trois listes gardent leurs trois colonnes ; * la marque et l'inscription, qui portent du texte long, prennent la largeur. * * 640 px : deux colonnes. Trois listes sur deux pistes laissent un trou en bas * à droite, et c'est le bon compromis — trois colonnes de 100 px hacheraient * chaque libellé sur trois lignes. * * ⚠️ Aucune requête ne descend sous 640 : à une colonne, la bande ferait * 900 px de haut au-dessus d'un pied compact, sur l'écran où l'on a le moins de * place. Deux colonnes de liens courts tiennent parfaitement à 360 px. / @media (max-width: 980px) { .sm-ftx-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm-ftx-marque, .sm-ftx-nlcol { grid-column: 1 / -1; } } @media (max-width: 640px) { .sm-ftx-in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--sp-9) var(--sp-7); gap: var(--sp-8) var(--sp-6); } } / ══════════════════════════════════════════════════════════════════════════ LES PUCES DE FILTRE — une seule écriture, quatre écrans ══════════════════════════════════════════════════════════════════════════ 🔴 Elles n'existaient que sur Joueur (`.sm-jou-puce`). Équipe, Explore et Discipline filtraient sans jamais dire QUOI : panneau refermé, l'utilisateur lit un tableau borné sans le savoir. Le style monte donc ici avec le partiel `_filtres_puces.html`. / .sm-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; / 🔴 AUCUNE MARGE ICI. Elle valait 12 px, et sur Joueur la pile qui * porte les puces a deja `gap: 16px` — mesure au navigateur : 28 px entre les * puces et le contenu, la ou les autres blocs en ont 16. Deux espacements * pour une meme separation s'additionnent, et le decalage se lit comme un * desalignement sans qu'on sache d'ou il vient. C'est la pile qui espace ; * un ecran dont la pile n'a pas de `gap` ajoute la sienne, chez lui. / margin: 0; } .sm-puce { display: inline-flex; align-items: center; gap: 5px; padding: 3px 3px 3px 12px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-800); font-size: 12.5px; / Une puce ne se coupe pas en deux : « Équipe : Espérance de » suivi d'une croix seule à la ligne suivante ne se lit plus. / max-width: 100%; } / Le NOM du filtre est plus discret que sa VALEUR : « Équipe » est le contenant, « Espérance de Tunis » est ce que l'utilisateur a choisi. Sans cette distinction, la puce se lit comme un bloc de texte uniforme. / .sm-puce-lib { opacity: .75; } .sm-puce-lib::after { content: " :"; } .sm-puce-val { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / 🔴 LA CROIX FAISAIT 32 × 26 PX. Le projet impose 44 px de cible tactile * (WCAG 2.5.5) à tous ses contrôles, et celui-ci y échappait — alors qu'il est * le plus petit de l'écran, et qu'un doigt qui le manque retire une autre * puce. On garde le dessin compact et on étend la zone CLIQUABLE par un * pseudo-élément : la puce ne grossit pas, la cible atteint 44 px. / .sm-puce-x { position: relative; display: grid; place-items: center; / ⚠️ `flex: 0 0 auto` OU LA LARGEUR NE TIENT PAS. `.sm-puce` est un * conteneur flex ; par défaut ses enfants ont `flex-shrink: 1`, et la croix * se laissait écraser à la largeur de son glyphe — 10,6 px mesurés au * navigateur, pour 26 px déclarés. Le `width` était bien appliqué, il était * simplement écrasé par la répartition flex. Le défaut ne se voit pas en * relisant la règle : il faut mesurer l'élément. / flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; color: inherit; text-decoration: none; font-size: 13px; line-height: 1; } .sm-puce-x::after { content: ""; position: absolute; / (44 − 26) ÷ 2 = 9 px débordés de chaque côté. / inset: -9px; } .sm-puce-x:hover, .sm-puce-x:focus-visible { background: rgba(0, 0, 0, .1); } .sm-puces-vider { font-size: 12.5px; font-weight: 700; color: var(--color-primary); / Souligné : c'est un lien parmi des pastilles colorées, et la couleur seule ne le distingue pas (WCAG 1.4.1). / text-underline-offset: 2px; / La cible tactile, ici aussi. / display: inline-flex; align-items: center; min-height: var(--sm-tap-min, 44px); padding-inline: 4px; } / ══════════════════════════════════════════════════════════════════════════ LA BARRE DE FILTRES — une seule écriture pour TOUTE l'application ══════════════════════════════════════════════════════════════════════════ 🔴 CINQ ÉCRITURES DIVERGEAIENT. Explore avait deux apparences pour deux commandes de la même barre (le panneau de portée en pilules, celui des filtres en rectangles) ; Joueur, Discipline et l'onglet Vidéos en avaient chacun une troisième. Le client l'a dit sans détour : « Ce devrait être un style réutilisable partout ! TOUS LES FILTRES DE L'APPLICATION ! » 🛑 TOUTES LES VALEURS CI-DESSOUS SONT MESURÉES SUR LA MAQUETTE, servie et ouverte au navigateur, pas déduites de son code. Elles ne se « corrigent » pas à vue de nez : chacune vient d'un `getComputedStyle` sur l'élément réel. ── LA HAUTEUR DES CHAMPS EST UNE DÉCISION DU CLIENT, PAS UN OUBLI ────────── ⚠️ 32 px, et non les 44 px que ce fichier impose ailleurs (WCAG 2.5.5). J'avais tranché l'inverse aux lots 9 et 10 — « sur un produit consulté au pouce, c'est la maquette qui a tort » — et le client a explicitement choisi la maquette après que l'écart lui a été présenté chiffré. C'est sa décision, elle est consignée ici pour qu'on ne la « répare » pas au lot suivant. Ce qui est conservé de la règle : la zone CLIQUABLE des petites cibles (croix de puce, bouton de sens) reste étendue par pseudo-élément. Un contrôle de 32 px de haut sur toute une ligne se vise ; une croix de 11 px, non. / / ── La rangée de commandes : recherche · portée · filtres · tri · total ── / .sm-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 12px; } / Le total en fin de rangée, comme la maquette. / .sm-fb-total { margin-inline-start: auto; font-size: 12.5px; color: var(--color-neutral-600); white-space: nowrap; } / ── Les déclencheurs : « Filtres (n) », « Trier : … », « Liste / Cartes » ── 🔴 FOND TRANSPARENT, PAS BLANC. Mesuré : la maquette rend `rgba(0,0,0,0)` et un filet à 13 % d'opacité ; la v2 rendait `#ffffff` plein et une bordure `rgb(103,112,127)`. Le bouton v2 pesait comme un bouton secondaire alors que la maquette le veut discret — c'est le « le background du bouton filtres n'est pas blanc ! » du client. 🔴 POLICE DE TITRE. La maquette met Anton sur ces déclencheurs, la v2 mettait Archivo. Anton est condensée et grasse : à l'œil, ça se lit comme une autre casse — et c'est l'explication du « même la casse n'est pas la même ». Une relecture du CSS ne le voyait pas ; la mesure au navigateur, oui. / .sm-fb-btn { display: inline-flex; align-items: center; gap: 6px; height: 31px; min-height: 31px; padding: 0 14px; border: 1px solid var(--sm-border-field); border-radius: 999px; background: transparent; color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; } .sm-fb-btn::-webkit-details-marker { display: none; } .sm-fb-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } / Ouvert, ou portant une valeur : le même fond à 7 % que le survol de la maquette. Un état actif signalé par la seule couleur du texte ne se verrait pas (WCAG 1.4.1) — ici c'est le FOND qui change, pas la teinte du mot. / .sm-fb-btn--actif, details[open] > .sm-fb-btn { background: color-mix(in srgb, var(--color-text) 7%, transparent); } / ── Le panneau : PLEINE LARGEUR, en frère de la rangée ────────────────── 🔴 IL SORTAIT EN COLONNE DE 190 PX. Le `
` d'Explore était un ITEM FLEX de la rangée de commandes : un item flex se dimensionne sur son contenu, donc le panneau prenait la largeur du bouton « Filtres » et sa grille interne se repliait en une seule colonne. Mesuré : 190 px de large pour 1080 px disponibles — c'est le « la largeur est bête, il fait déborder l'élément filtres » du client. Le panneau est désormais un FRÈRE de la rangée, comme dans la maquette. / .sm-fb-panneau { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; margin-bottom: 12px; padding: 12px 15px; border: 1px solid var(--color-divider); border-radius: var(--radius-md, 16px); background: var(--color-surface); } / ── Les contrôles ────────────────────────────────────────────────────── 🛑 LE LIBELLÉ EST DANS LE CHAMP, pas au-dessus : la première option d'une liste porte le nom du filtre (« Tous postes »), un combo le porte en `placeholder`. C'est la maquette, et c'est aussi ce qui tient sur une seule ligne. Un `` reste écrit pour les lecteurs d'écran, mais caché — `.sm-visuellement-cache`. Le retirer priverait le champ de son nom accessible : le `placeholder` n'en est pas un. / .sm-fb-champ, .sm-fb-combo { / ⚠️ `min-height` AUSSI, ET PAS SEULEMENT `height`. Ce fichier pose plus * haut `:where(body.sm-v2) select { min-height: var(--sm-tap-min) }` — soit * 44 px. `min-height` l'emporte toujours sur `height`, quelle que soit la * specificite : les listes sortaient donc a 44 px (mesure au navigateur) * alors que la regle disait 32. Le defaut est invisible en relisant le CSS, * puisque les deux declarations sont justes ; c'est leur CASCADE qui * tranche. / height: 32px; min-height: 32px; padding: 0 12px; border: 1px solid var(--sm-border-field); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; / `min-width: 0` : sans lui, un `` peut porter. / .sm-fb-tri { display: inline-flex; align-items: center; gap: 8px; } .sm-fb-tri-lib { font-size: 12.5px; color: var(--color-neutral-700); } / ⚠️ Le bouton de SENS est petit et souvent visé : sa zone cliquable est étendue à 44 px sans que son dessin grossisse. C'est ce qui reste de la règle 2.5.5 une fois la hauteur des champs ramenée à 32 px. / .sm-fb-sens { position: relative; } .sm-fb-sens::after { content: ""; position: absolute; inset: -7px; } / La note d'un critère inversé — « plus bas = mieux ». Sans elle, un tri sur les cartons ou sur le BRT est muet sur son sens, et le lecteur suppose que le premier de la liste est le meilleur. / .sm-fb-note { flex: 1 0 100%; margin: 0; font-size: 12px; color: var(--color-neutral-600); } / Sur téléphone la rangée se replie ; le champ de recherche prend la ligne, parce que c'est le contrôle qu'on emploie en premier. / @media (max-width: 560px) { .sm-fb-recherche { flex: 1 0 100%; } .sm-fb-recherche input { width: 100%; } .sm-fb-total { margin-inline-start: 0; } } / L'enveloppe d'un champ : elle ne porte que le label caché et le contrôle. `display: contents` la rendrait invisible à la disposition — mais un `` y vit aussi, et `contents` sur un parent de datalist casse le rendu dans certains navigateurs. On la garde en `inline-flex`, sans style. / .sm-fb-champ-enveloppe { display: inline-flex; align-items: center; min-width: 0; } / Le bouton « Appliquer » : masqué par l'îlot `filtre-auto` dès que le script tourne, et seule façon d'appliquer un filtre sans script. Il ferme la rangée, à droite. / .sm-fb-appliquer { margin-inline-start: auto; } / Un contrôle qui dépend d'un autre non posé : visible mais inerte, avec la raison portée par le `title`. Le MASQUER ferait apparaître et disparaître des contrôles au fil des choix, et le lecteur ne saurait jamais ce que l'écran sait faire. / .sm-fb-champ:disabled, .sm-fb-combo:disabled, .sm-fb-nombre:disabled { opacity: .5; cursor: not-allowed; } / ── Le tiroir : POURQUOI LE PANNEAU EST SORTI DU FLUX DE LA RANGÉE ────── 🔴 `display: contents` SUR UN `
` A CESSÉ DE MARCHER. C'était la mécanique précédente : la boîte du `
` disparaissait à l'ouverture, son résumé et son panneau devenaient deux items directs de `.sm-fb`, et `order` renvoyait le panneau en dernier. Elle tenait — jusqu'à ce que les navigateurs enveloppent le contenu d'un `
` dans un `::details-content` (Chrome 131, puis les autres). Cette boîte-là, elle, reste : c'est ELLE qui devient l'item flex, à la place qu'occupait le `
`, et le panneau se rouvre donc au milieu de la rangée en poussant les boutons voisins. Le symptôme est exactement celui que le client décrit deux fois — « les filtres apparaissent entre les éléments déjà affichés » — et aucune valeur d'`order` ne l'atteint, puisque l'ordre porte sur une boîte qu'on ne cible plus. 🛑 UN PANNEAU QUI POUSSE EST UN PANNEAU QUI DÉPLACE LA CIBLE. Même bien ordonné, un tiroir en flux repousse la liste au moment où le doigt vient de viser un bouton. Le panneau est donc hors flux, ancré sous la rangée : il ne peut plus, par construction, déplacer quoi que ce soit — ni les boutons, ni les résultats. C'est la garantie que l'`order` ne donnait pas. ⚠️ ET IL NE PEUT PAS ÊTRE COUPÉ. Hors flux, un panneau plus haut que l'écran ne se laisserait pas atteindre par le défilement de la page : il porte donc sa propre borne (`max-height`) et défile en interne. 🛑 AUCUN SCRIPT. Le `
` reste la seule bascule qui fonctionne sans une ligne de JavaScript, au clavier comme à la souris. / .sm-fb { position: relative; } .sm-fb .sm-fb-details > .sm-fb-panneau { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 40; width: auto; margin-bottom: 0; max-height: min(62vh, 460px); overflow-y: auto; box-shadow: var(--shadow-md); } / Le total ferme la rangée, à droite, comme dans la maquette. / .sm-fb-total { margin-inline-start: auto; } / ── L'APPARITION DU PANNEAU ───────────────────────────────────────────── * 🔴 « LEUR APPARITION EST FLUIDE » (maquette). Un `
` natif passe * de `display: none` à `display: flex` d'un seul coup : le panneau surgit. * `@starting-style` + `transition-behavior: allow-discrete` donnent la * transition SANS une ligne de JavaScript — le navigateur anime l'opacité et le * glissement pendant que `display` bascule. * * ⚠️ Les navigateurs qui ne connaissent pas ces propriétés ignorent le bloc et * retrouvent exactement le comportement d'avant : rien ne dépend de la * transition, elle ne fait qu'adoucir. / @media (prefers-reduced-motion: no-preference) { .sm-fb-details > .sm-fb-panneau { transition: opacity .16s ease, translate .16s ease, display .16s allow-discrete; } .sm-fb-details[open] > .sm-fb-panneau { opacity: 1; translate: 0 0; } @starting-style { .sm-fb-details[open] > .sm-fb-panneau { opacity: 0; translate: 0 -6px; } } } / 🔴 UN PANNEAU FERMÉ RESTAIT AFFICHÉ. Le navigateur cache le contenu d'un * `
` replié par une règle d'agent utilisateur — * `details > :not(summary) { display: none }` — et `.sm-fb-panneau { display: * flex }` l'écrasait. Les trois panneaux étaient donc rendus en permanence : * mesuré, le panneau de portée sortait à 221 px sous un `
` que le DOM * disait FERMÉ (`open === false`). * * ⚠️ Le défaut est invisible en relisant l'une ou l'autre règle : chacune est * juste, c'est leur rencontre qui casse. Et il ne se voit pas non plus au * premier coup d'œil, puisqu'un panneau ouvert par erreur ressemble à un * panneau qu'on vient d'ouvrir. / .sm-fb-details:not([open]) > .sm-fb-panneau { display: none; } / Fermé, le `
` reste un item normal qui ne montre que son résumé. / .sm-fb-details > summary::-webkit-details-marker { display: none; } / La pastille de périmètre garde sa teinte : c'est le seul contrôle de la barre qui ne FILTRE pas — il change ce qui est calculé, pas ce qui est listé. Une couleur distincte est ici une information, pas une décoration. / .sm-fb-btn--portee { background: var(--color-accent-2-100, #e6f6ef); border-color: var(--color-accent-2-300, #95d7bb); } .sm-fb-btn--portee:hover { background: color-mix(in srgb, var(--color-accent-2-100, #e6f6ef) 80%, var(--color-text)); } / 🛑 LA BORDURE DES CONTRÔLES NE SUIT PAS LA MAQUETTE, ET C'EST DÉLIBÉRÉ. * * La maquette pose un filet à 13 % d'opacité sur ses champs. Mesuré contre les * deux fonds du produit, il ne tient pas le seuil de 3:1 qu'exige WCAG * 1.4.11 pour la bordure d'un contrôle — et `test_v2_css` le vérifie sur les * deux thèmes, au repos et au survol. * * Le client a choisi la maquette sur la HAUTEUR (32 px au lieu de 44), après * que l'écart lui a été présenté chiffré. La bordure est un autre sujet : une * hauteur réduite gêne le doigt, une bordure invisible efface le contrôle pour * qui voit mal. On garde donc `--sm-border-field` sur ce qui est un CONTRÔLE, * et le filet de la maquette sur ce qui n'en est pas un — le panneau, qui est * une surface. * * L'écart visuel est faible ; l'écart d'usage ne l'est pas. */