layout-06-bento-l-span — Bento 3 × 3 à deux enjambements en L
============================================================

Tenir cinq modules de tailles très différentes sur une VRAIE grille 3 × 3, en n'employant que deux enjambements — un vertical à gauche, un horizontal à droite — qui se CROISENT sans jamais se chevaucher : c'est ce croisement qui supprime toute frontière horizontale continue et fait qu'un écran dense cesse de se lire comme un tableau.

EMPLOYER QUAND
  Accueil, sommaire de services, page d'entrée d'application : un contenu principal qui doit dominer sans occuper la moitié de l'écran, un contenu long à gauche (liste, nuage, sommaire), et deux entrées secondaires de même rang en haut. Le module dominant prend l'aplat inversé, et il est le SEUL.

ÉVITER QUAND
  Les modules sont de même rang (une grille régulière dit alors la vérité et se refond sans douleur), le contenu du module haut à gauche varie beaucoup en longueur (l'enjambement vertical fige sa hauteur), ou l'écran doit se replier en une colonne sur mobile — les deux enjambements y perdent tout sens et il faut une autre composition, pas une adaptation de celle-ci.

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 : a, b, c, hero, d.

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 : 1326 × 830 px. Charte : ref-17-mono-bento-legal.
Licence MIT — https://visual.capitalb.fr/p/layout-06-bento-l-span.html
