diagram-04-serpentine-milestones — Chronologie serpentine à ronds
============================================================

Dérouler une chronologie sur une colonne aussi longue qu'on veut : un fil continu qui descend en serpentant, des ronds d'étape posés alternativement de part et d'autre de l'axe, et le texte toujours du côté opposé au rond. Le fil ne relie pas les étapes par le plus court chemin — il fait une ÉPINGLE au-delà de chaque rond avant de le traverser, et c'est ce demi-tour qui donne au temps sa longueur ressentie. Fond transparent : le module se pose sur ce qu'on veut.

EMPLOYER QUAND
  Une histoire à raconter dans l'ordre, sur un support qui défile — affiche, story, page longue, infographie imprimée. L'espacement de chaque intervalle étant réglable un par un, une période creuse peut occuper autant de place qu'une période dense, ou l'inverse : c'est le seul endroit où ce diagramme laisse entrer une notion de durée.

ÉVITER QUAND
  Il faut une échelle de temps exacte (rien n'est proportionnel ici tant qu'on ne règle pas les espacements soi-même), la surface est en paysage (le serpentin a besoin de hauteur), ou les étapes portent des objets multiples et hétérogènes — c'est diagram-02-branch-timeline qui sait accrocher plusieurs objets à une même date.

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 : track, steps, notes, labels.

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 : 1080 × 2447 px. Charte : ref-23-serpentine-timeline.
Licence MIT — https://visual.capitalb.fr/p/diagram-04-serpentine-milestones.html
