layout-17-quadrant-epicentre — Quadrant à épicentre
============================================================

Poser quatre modules de VOLUMES très inégaux sans que la grille impose leurs tailles : chaque vignette n'est ancrée que par son coin vif, qui pointe le centre du bloc, et ses deux autres bords sont libres — donc sa largeur ET sa hauteur lui appartiennent. Les quatre coins vifs convergent sur un point unique, l'épicentre, où se serrent aussi les quatre numéros. C'est ce point qui tient la composition à la place des alignements de bord, et c'est pour ça que quatre tailles différentes ne s'y lisent pas comme un défaut de calage.

EMPLOYER QUAND
  Quand quatre blocs de contenu réel — pas quatre KPI de même longueur — doivent cohabiter : un module à onze points, un à trois phrases longues, un à six points, un à une phrase. Un bento y répondrait en étirant les petits et en creusant des vides ; ici le vide n'existe pas, parce qu'aucune vignette n'est tenue de rattraper sa voisine. Vaut aussi dès que la numérotation doit se lire comme un PARCOURS et non comme quatre étiquettes indépendantes : réunis au centre, les numéros donnent l'ordre sans qu'aucune flèche ne soit dessinée.

ÉVITER QUAND
  À moins de quatre modules, ou à plus : la forme est celle d'un quadrant, un cinquième bloc n'a plus de coin à occuper. Sous ~1100 px de largeur non plus — les quatre vignettes ne tiennent plus côte à côte, et le repli en pile fait disparaître l'épicentre, donc le pattern avec lui (au repli, on garde les vignettes et on rend l'ordre par l'index, pas par la position). Et jamais avec des contenus de même volume : quatre tailles identiques rendent la liberté du pattern invisible et une grille ordinaire fera mieux.

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].

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 : 1320 × 1498 px. Charte : ref-21-finengy-quadrant-clair.
Licence MIT — https://visual.capitalb.fr/p/layout-17-quadrant-epicentre.html
