shape-03-stadium-track — Rail stadium à enfant emboîté
============================================================

Poser une piste à bouts ronds qui porte un objet EMBOÎTÉ — barre de progression, interrupteur, jauge — sans que le liseré entre les deux s'épaississe dans les courbes. Une seule loi le tient : l'enfant est inset d'une constante sur ses quatre côtés et son rayon vaut celui du rail moins cet inset, ce qui fait tomber les deux centres de courbure au même point. Deux remplissages en découlent, une barre partielle et une pastille, et ce ne sont pas deux objets : c'est le même rail avec deux longueurs d'enfant.

EMPLOYER QUAND
  Partout où une piste doit porter une position ou un état : barre de progression, interrupteur, jauge de segment, pastille de statut dans un tableau de bord. Aussi comme primitive de composition dans un vocabulaire de formes pleines — c'est la forme la plus fréquente d'une planche géométrique, parce qu'elle est la seule à porter une orientation LONGUE sans texte.

ÉVITER QUAND
  Sur une boîte proche du carré : à moins de 1,6 d'aspect les deux bouts ronds se rejoignent, le rail devient une gélule courte puis un disque, et l'enfant emboîté n'a plus de course à parcourir — c'est un anneau, pas une piste. Éviter aussi dès que l'enfant doit toucher un bord : l'inset est constant sur les quatre côtés par construction, et le rendre nul d'un côté détruit la concentricité, donc l'objet même du pattern. Et en mailing : Outlook rend `border-radius` et les dégradés de façon imprévisible — voir `node bin/emit.mjs --audit --target email`.

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 : —.

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 : 483 × 483 px. Charte : ref-01-bento-pills-2030.
Licence MIT — https://visual.capitalb.fr/p/shape-03-stadium-track.html
