card-12-inverted-kpi-row — Rangée de KPI dont un seul est inversé — et plus large
============================================================

Ouvrir un tableau de bord par trois indicateurs de même nature dont UN SEUL est de premier rang, en lui appliquant deux fois le même geste de hiérarchie : l'aplat inversé ET une colonne 5 % plus large. Chaque carte range ses quatre informations dans le même ordre — libellé en haut, pastille de renvoi ancrée au coin opposé, chiffre poussé en bas, note collée dessous.

EMPLOYER QUAND
  Bandeau d'ouverture d'un tableau de bord ou d'un rapport : trois à quatre valeurs comparables (un solde, un revenu, un volume) dont une seule commande l'attention. Le chiffre est court — quatre à six signes — et la note tient sur une ligne.

ÉVITER QUAND
  Les valeurs ne sont pas comparables entre elles (la rangée suggère une lecture de gauche à droite qui n'existe pas), il y en a plus de quatre (la carte inversée cesse de dominer et la largeur différenciée devient un défaut d'alignement), ou plusieurs cartes doivent être mises en avant — deux aplats inversés dans une rangée annulent le seul geste de hiérarchie du système.

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 : label, go, fig, note.

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 : 1286 × 219 px. Charte : ref-18-lime-sales-dashboard.
Licence MIT — https://visual.capitalb.fr/p/card-12-inverted-kpi-row.html
