layout-19-tiles-over-claim — Rangée de tuiles sous énoncé
============================================================

Ouvrir un écran par une rangée de trois tuiles de largeurs très inégales — une grande visuelle, deux brèves dont UNE SEULE est un aplat d'accent — puis laisser un énoncé prendre toute la parole en dessous, dans le seul très grand corps du bloc. Deux lois tiennent la composition : la grande tuile et le COUPLE de brèves se partagent la largeur presque à parts égales, ce qui interdit à la rangée de se lire comme « une image et deux annexes » ; et le marqueur de marque n'est pas calé sur la marge droite mais centré sur l'AXE de la tuile d'accent, base posée sur la baseline de la dernière ligne. C'est ce second ancrage qui rattache le marqueur à l'accent au lieu d'en faire un objet de coin.

EMPLOYER QUAND
  Quand un écran doit dire une chose forte ET montrer trois entrées de rangs différents sans les hiérarchiser par la taille du texte : une couverture de section, une ouverture de proposition commerciale, un hero de page produit. Vaut particulièrement lorsque l'un des trois blocs est un VISUEL et les deux autres du texte court — la répartition 0,49 / 0,24 / 0,25 est faite pour ce cas et pour lui seul. Vaut aussi comme démonstration du geste « accent unique dit deux fois » : la tuile jaune est à la fois la seule colorée et la plus large des deux brèves.

ÉVITER QUAND
  Avec trois tuiles de MÊME nature — trois brèves, trois KPI : les largeurs inégales n'ont alors aucun motif et se lisent comme un défaut de calage (prendre `card-12-inverted-kpi-row`, qui traite exactement ce cas). Avec deux aplats d'accent : la rangée perd son point d'entrée, et le marqueur n'a plus d'axe unique à viser. Et sous ~1100 px de largeur, où trois colonnes dont une à 24 % ne portent plus trois lignes de texte — au repli, on empile les brèves sous le visuel et le marqueur revient en fin d'énoncé.

COMMENT S'EN SERVIR
  1. Collez le contenu de tokens.css dans votre page. Il porte deux choses : la règle
     box-sizing que le fragment SUPPOSE (sans elle la composition grossit et déborde),
     et les jetons --vl-* de la charte, à fusionner avec les vôtres.
  2. Collez fragment.html là où la composition doit apparaître. Son CSS voyage avec
     lui, dans son <style> : rien à importer, rien à installer.
  3. Remplacez les textes. Les emplacements prévus : [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].

POLICES
  Le rendu de référence utilise les polices du dépôt (OFL) : https://github.com/lbachelotcapitalb/visual-lab/tree/main/fonts

Cadre de référence : 1448 × 674 px. Charte : ref-22-yellow-proposal-bento.
Licence MIT — https://visual.capitalb.fr/p/layout-19-tiles-over-claim.html
