card-11-corner-arrow-tile — Vignette d'entrée à flèche de coin
============================================================

Faire d'un module une ENTRÉE cliquable sans bouton ni liseré : le titre en haut à gauche, une flèche oblique ancrée au coin opposé — jamais alignée sur le titre — et l'illustration qui occupe tout le bas de la vignette au lieu d'être centrée dedans.

EMPLOYER QUAND
  Grille de services, sommaire de rubriques, tuiles d'entrée d'un accueil : trois à cinq vignettes de même rang dont chacune mène ailleurs. Le titre tient sur deux lignes courtes, l'illustration porte la respiration, et la flèche est le seul signe d'interaction de l'écran.

ÉVITER QUAND
  La vignette porte un chiffre (elle devient une carte de KPI, cf. card-10-kpi-notch-tile : le chiffre veut l'aplomb du bas, l'illustration aussi, et les deux ne cohabitent pas), le titre dépasse trois lignes (il rejoint la flèche et le coin cesse d'être libre), ou la vignette n'est pas cliquable — une flèche qui ne mène nulle part est un mensonge d'interface.

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 : title, art, sub.

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 : 466 × 302 px. Charte : ref-17-mono-bento-legal.
Licence MIT — https://visual.capitalb.fr/p/card-11-corner-arrow-tile.html
