tag-01-gooey-capsule

Capsule néon soudée — mot-clé + glyphe

Faire d'un mot-clé un OBJET : un contour continu qui soude un cercle de glyphe à une pilule de texte par deux congés concaves, pour qu'un terme isolé pèse autant qu'un titre sans être plus gros.

tagslidesocialweb372×114px13 benchmarks

Télécharger le .zip

Le fragment RÉEL, dans son propre document, sur le sol de sa charte — pas une image. Ce que vous voyez est exactement ce que vous collerez.

Employer quand

Valoriser des mots-clés, des noms de produits, de modules, d'offres ou de compétences sur une slide, un hero ou une couverture — seul, ou empilé en liste. C'est le pattern quand il faut donner du poids à des termes qui n'ont ni chiffre ni phrase autour.

Éviter quand

Le libellé dépasse deux mots (la pilule devient une barre et le cou n'est plus lisible), l'élément est cliquable (ça ressemble à un bouton et le cou casse la cible), ou l'icône doit être COMPRISE — à 0,6u dans un cercle, elle marque une catégorie, elle n'explique rien.

Notes

La difficulté du pattern n'est pas le dessin, c'est la LARGEUR VARIABLE : le contour doit rester continu quel que soit le mot. D'où le découpage en trois pièces — tête fixe (cercle + les deux congés + calotte gauche, un seul <path>), corps élastique (les deux droites en bordures CSS), calotte droite fixe. Les droites du corps prolongent les extrémités du tracé au pixel près parce que le SVG est rendu à l'échelle exacte (viewBox 1.8275 × 1.255 pour une boîte de 1.8275u × 1.255u, donc 1 unité de viewBox = 1u) et que son stroke-width (0.055) est le même nombre que --sw (0.055u). Casser cette égalité — un SVG en preserveAspectRatio non uniforme, une hauteur de pilule qui ne suit plus — rouvre le contour et la signature tombe. La géométrie du cou est calculée, pas dessinée à l'œil : les congés de rayon 0,28u sont TANGENTS extérieurement au cercle (0,6u) et à la calotte (0,5u) distants de 1,2u d'entraxe, ce qui place leurs centres à (±0,6692u, ±0,5715u) et les points de tangence à x = 0,4563u sur le cercle et x = 0,8597u sur la calotte. Ces six nombres sont solidaires : changer le rayon du cercle sans recalculer les congés produit un raccord qui casse — visible à 3 px, invisible sur une maquette réduite, et c'est exactement ce que les benchmarks de continuité attrapent. Deuxième défaut que rien ne mesurait et que seul le RENDU a sorti (12/08) : à la jonction, la bordure CSS de la pilule et le stroke SVG se touchent bout à bout, et la rastérisation laisse un trou d'environ 0,7 px — un contour continu en géométrie, interrompu à l'œil. D'où le débord de 0,05 u ajouté aux DEUX extrémités des tracés (les `M`/`L` qui sortent du viewBox, avec `overflow: visible`) : la couverture des douze lignes droites passe de 0,30 à ≥ 0,99. Les quatre glyphes (éclair, croix directionnelle, rayons, cadre) sont REDESSINÉS : la référence n'existe pas sur disque, seule sa géométrie a survécu.

Mots-clés

capsule pilule etiquette tag mot-cle keyword neon contour outline icone soudure gooey sombre slide hero

La charte

ref-12-neon-capsule-tags

Néon vert — étiquettes capsules sur fond sombre

Voir l'écran entier ↗

Variables

`--vl-neon`	le trait ET le texte — c'est la seule couleur du pattern défaut : `#4FE383`
`--vl-cap-u`	l'unité dont TOUTE la géométrie dérive (hauteur de rangée = 1,255 × u) ; elle n'est pas libre — le trait vaut 0,055 u et Chrome ARRONDIT une bordure CSS au pixel entier là où il ne le fait pas d'un stroke SVG, donc une valeur qui ne tombe pas sur un trait quasi entier rouvre la soudure à l'œil défaut : `91px`

Emplacements

iconlabel

Benchmarks — la géométrie, en assertions vérifiables

Rejouables par node bin/check.mjs tag-01-gooey-capsule : le pattern se prouve, il ne se croit pas.

assertion	mesure	attendu
tête (cercle + cou + calotte) ≈ 1,456 × la hauteur de rangée	`box('.vl-cap__head').w / H`	1.4562 ± 0.02
pilule ≈ 84 % de la hauteur : le cercle déborde en haut ET en bas	`box('.vl-cap__label').h / H`	0.8406 ± 0.01
trait unique — la bordure de la pilule vaut 4,4 % de la hauteur (= le stroke SVG)	`num('.vl-cap__label','borderTopWidth') / H`	0.0438 ± 0.005
contour continu : la pilule commence là où la tête finit (±0,6 px)	`Math.abs(box('.vl-cap__label').left - box('.vl-cap__head').right)`	≤ 0.6
contour continu : la calotte droite est collée à la pilule (±0,6 px)	`Math.abs(box('.vl-cap__tail').left - box('.vl-cap__label').right)`	≤ 0.6
pilule centrée sur la tête — débord haut = débord bas	`Math.abs((box('.vl-cap__label').top - box('.vl-cap__head').top) - (box('.vl-cap__head').bottom - box('.vl-cap__label').bottom))`	≤ 0.6
les trois pièces pavent la capsule sans trou ni recouvrement	`box('.vl-cap').w - (box('.vl-cap__head').w + box('.vl-cap__label').w + box('.vl-cap__tail').w)`	0 ± 0.6
corps ≈ 49 % de la hauteur de rangée (le mot remplit la pilule)	`num('.vl-cap__label','fontSize') / H`	0.494 ± 0.03
capitales — la capsule ne prend pas de bas-de-casse	`cs('.vl-cap__label','textTransform') === 'uppercase' ? 1 : 0`	1
glyphe centré dans le cercle : centre à (H/2, H/2), ±1 px	`Math.max(Math.abs(box('.vl-cap__icon').left + box('.vl-cap__icon').w / 2 - H / 2), Math.abs(box('.vl-cap__icon').top + box('.vl-cap__icon').h / 2 - H / 2))`	≤ 1
glyphe entre 40 % et 55 % du diamètre du cercle — au-delà il touche le trait	`box('.vl-cap__icon').w / H`	0.4 → 0.55
le mot respire plus à droite (calotte ronde) qu'à gauche (jonction droite)	`num('.vl-cap__label','paddingRight') / num('.vl-cap__label','paddingLeft')`	≥ 1.2
contraste du mot ≥ 4,5 — le néon sur le vert sombre n'a aucune excuse	`contrast('.vl-cap__label')`	≥ 4.5

Le code

fragment — patterns/tag-01-gooey-capsule.html Télécharger

<!-- tag-01-gooey-capsule — fragment autonome. Couleurs via --vl-* uniquement.
     UN mot-clé = UN contour continu : cercle de glyphe + « cou » à congés concaves + pilule.
     La largeur est pilotée par le mot ; toute la géométrie dérive de --vl-cap-u. -->
<div class="vl-capstack">

  <span class="vl-cap">
    <span class="vl-cap__head" aria-hidden="true">
      <svg viewBox="0 0 1.8275 1.255"><path d="M1.8775 0.1275L1.8275 0.1275A.5 .5 0 0 0 1.487222 0.261152A.28 .28 0 0 1 1.08375 0.237838A.6 .6 0 1 0 1.08375 1.017162A.28 .28 0 0 1 1.487222 0.993848A.5 .5 0 0 0 1.8275 1.1275L1.8775 1.1275"/></svg>
    </span>
    <svg class="vl-cap__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.6 2.6 6.4 13.2h4.6L10.4 21.4l7.2-10.6h-4.6z"/></svg>
    <span class="vl-cap__label">HRT</span>
    <span class="vl-cap__tail" aria-hidden="true">
      <svg viewBox="0 0 0.5275 1.055"><path d="M-0.05 0.0275L0 0.0275A.5 .5 0 0 1 0 1.0275L-0.05 1.0275"/></svg>
    </span>
  </span>

  <span class="vl-cap">
    <span class="vl-cap__head" aria-hidden="true">
      <svg viewBox="0 0 1.8275 1.255"><path d="M1.8775 0.1275L1.8275 0.1275A.5 .5 0 0 0 1.487222 0.261152A.28 .28 0 0 1 1.08375 0.237838A.6 .6 0 1 0 1.08375 1.017162A.28 .28 0 0 1 1.487222 0.993848A.5 .5 0 0 0 1.8275 1.1275L1.8775 1.1275"/></svg>
    </span>
    <svg class="vl-cap__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.6v18.8M2.6 12h18.8M12 2.6 9.2 5.6M12 2.6l2.8 3M12 21.4l-2.8-3M12 21.4l2.8-3M2.6 12l3 2.8M2.6 12l3-2.8M21.4 12l-3 2.8M21.4 12l-3-2.8"/></svg>
    <span class="vl-cap__label">NDA+</span>
    <span class="vl-cap__tail" aria-hidden="true">
      <svg viewBox="0 0 0.5275 1.055"><path d="M-0.05 0.0275L0 0.0275A.5 .5 0 0 1 0 1.0275L-0.05 1.0275"/></svg>
    </span>
  </span>

  <span class="vl-cap">
    <span class="vl-cap__head" aria-hidden="true">
      <svg viewBox="0 0 1.8275 1.255"><path d="M1.8775 0.1275L1.8275 0.1275A.5 .5 0 0 0 1.487222 0.261152A.28 .28 0 0 1 1.08375 0.237838A.6 .6 0 1 0 1.08375 1.017162A.28 .28 0 0 1 1.487222 0.993848A.5 .5 0 0 0 1.8275 1.1275L1.8775 1.1275"/></svg>
    </span>
    <svg class="vl-cap__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M17.6 12h3.6M16.85 9.2l3.12-1.8M14.8 7.15l1.8-3.12M12 6.4V2.8M9.2 7.15 7.4 4.03M7.15 9.2 4.03 7.4M6.4 12H2.8M7.15 14.8l-3.12 1.8M9.2 16.85 7.4 19.97M12 17.6v3.6M14.8 16.85l1.8 3.12M16.85 14.8l3.12 1.8"/></svg>
    <span class="vl-cap__label">Sermorelin</span>
    <span class="vl-cap__tail" aria-hidden="true">
      <svg viewBox="0 0 0.5275 1.055"><path d="M-0.05 0.0275L0 0.0275A.5 .5 0 0 1 0 1.0275L-0.05 1.0275"/></svg>
    </span>
  </span>

  <span class="vl-cap">
    <span class="vl-cap__head" aria-hidden="true">
      <svg viewBox="0 0 1.8275 1.255"><path d="M1.8775 0.1275L1.8275 0.1275A.5 .5 0 0 0 1.487222 0.261152A.28 .28 0 0 1 1.08375 0.237838A.6 .6 0 1 0 1.08375 1.017162A.28 .28 0 0 1 1.487222 0.993848A.5 .5 0 0 0 1.8275 1.1275L1.8775 1.1275"/></svg>
    </span>
    <svg class="vl-cap__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.6 2.6 6.4 13.2h4.6L10.4 21.4l7.2-10.6h-4.6z"/></svg>
    <span class="vl-cap__label">Enclomiphene</span>
    <span class="vl-cap__tail" aria-hidden="true">
      <svg viewBox="0 0 0.5275 1.055"><path d="M-0.05 0.0275L0 0.0275A.5 .5 0 0 1 0 1.0275L-0.05 1.0275"/></svg>
    </span>
  </span>

  <span class="vl-cap">
    <span class="vl-cap__head" aria-hidden="true">
      <svg viewBox="0 0 1.8275 1.255"><path d="M1.8775 0.1275L1.8275 0.1275A.5 .5 0 0 0 1.487222 0.261152A.28 .28 0 0 1 1.08375 0.237838A.6 .6 0 1 0 1.08375 1.017162A.28 .28 0 0 1 1.487222 0.993848A.5 .5 0 0 0 1.8275 1.1275L1.8775 1.1275"/></svg>
    </span>
    <svg class="vl-cap__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 10 14 14M14 10 10 14M8.4 3.6H3.6v4.8M15.6 3.6h4.8v4.8M15.6 20.4h4.8v-4.8M8.4 20.4H3.6v-4.8"/></svg>
    <span class="vl-cap__label">Semaglutide</span>
    <span class="vl-cap__tail" aria-hidden="true">
      <svg viewBox="0 0 0.5275 1.055"><path d="M-0.05 0.0275L0 0.0275A.5 .5 0 0 1 0 1.0275L-0.05 1.0275"/></svg>
    </span>
  </span>

  <span class="vl-cap">
    <span class="vl-cap__head" aria-hidden="true">
      <svg viewBox="0 0 1.8275 1.255"><path d="M1.8775 0.1275L1.8275 0.1275A.5 .5 0 0 0 1.487222 0.261152A.28 .28 0 0 1 1.08375 0.237838A.6 .6 0 1 0 1.08375 1.017162A.28 .28 0 0 1 1.487222 0.993848A.5 .5 0 0 0 1.8275 1.1275L1.8775 1.1275"/></svg>
    </span>
    <svg class="vl-cap__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.6 2.6 6.4 13.2h4.6L10.4 21.4l7.2-10.6h-4.6z"/></svg>
    <span class="vl-cap__label">Testosterone</span>
    <span class="vl-cap__tail" aria-hidden="true">
      <svg viewBox="0 0 0.5275 1.055"><path d="M-0.05 0.0275L0 0.0275A.5 .5 0 0 1 0 1.0275L-0.05 1.0275"/></svg>
    </span>
  </span>

</div>

<style>
/* ————— la capsule ————— */
/* Toute la géométrie dérive d'UNE longueur, --vl-cap-u (l'unité) ; les nombres qui suivent
   sont des RATIOS mesurés sur la référence, pas des pixels choisis. Ils sont solidaires :
   le cou n'est tangent que pour ce jeu-là (cercle 0.6u, calotte 0.5u, congé 0.28u,
   entraxe 1.2u). Changer l'un sans recalculer les autres rouvre le contour. */
.vl-cap {
  --u: var(--vl-cap-u, 91px);
  --sw: calc(var(--u) * 0.055);           /* trait unique : SVG et bordures partagent cette valeur */
  position: relative;
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 1.255);          /* = diamètre extérieur du cercle */
  color: var(--vl-neon);
  box-sizing: border-box;
}
.vl-cap * { box-sizing: border-box; }

/* La tête porte le cercle, les DEUX congés concaves et la calotte gauche de la pilule —
   d'un seul trait. C'est la soudure qui fait la signature : jamais deux formes posées
   l'une à côté de l'autre. Largeur fixe (1.8275u) : le cou ne s'étire pas. */
.vl-cap__head {
  flex: none;
  width: calc(var(--u) * 1.8275);
  height: 100%;
}
.vl-cap__head svg,
.vl-cap__tail svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vl-cap__head path,
.vl-cap__tail path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.055;                     /* en unités de viewBox = 0.055u, comme --sw */
}

/* Le corps de la pilule : seules les deux droites, en bordures. Elles prolongent EXACTEMENT
   les extrémités du tracé SVG (même y, même épaisseur) — c'est ce qui autorise la largeur
   variable sans jamais rouvrir le contour. */
.vl-cap__label {
  height: calc(var(--u) * 1.055);
  border-top: var(--sw) solid currentColor;
  border-bottom: var(--sw) solid currentColor;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 0.3) 0 calc(var(--u) * 0.18);
  font-size: calc(var(--u) * 0.62);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* La calotte droite : un demi-stade, de largeur fixe elle aussi. */
.vl-cap__tail {
  flex: none;
  width: calc(var(--u) * 0.5275);
  height: calc(var(--u) * 1.055);
}

/* Le glyphe est POSÉ dans le cercle, il n'entre pas dans le flux : le centre du cercle est
   à (0.6275u, 0.6275u), soit exactement (H/2, H/2). */
.vl-cap__icon {
  position: absolute;
  left: calc(var(--u) * 0.3175);
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--u) * 0.62);
  height: calc(var(--u) * 0.62);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* ————— la pile ————— */
/* Alignée à DROITE : c'est le bord droit qui tient la colonne, les têtes tombent en escalier
   selon la longueur du mot. Empilées, elles se calent sur leur bord DROIT : la longueur des mots dessine l'escalier. */
.vl-capstack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--vl-cap-u, 91px) * 0.1);
}
</style>

tokens de la charte — systems/ref-12-neon-capsule-tags.json Télécharger

:root {
  --vl-bg: #26331F;
  --vl-neon: #4FE383;
  --vl-neon-soft: #4FE38344;
  --vl-ink-invert: #FFFFFF;
  --vl-cap-u: 91px;
  --vl-margin: 60px;
}

les métadonnées — patterns/tag-01-gooey-capsule.json (télécharger)

{
  "name": "Capsule néon soudée — mot-clé + glyphe",
  "family": "tag",
  "ref": "ref-12-neon-capsule-tags",
  "intent": "Faire d'un mot-clé un OBJET : un contour continu qui soude un cercle de glyphe à une pilule de texte par deux congés concaves, pour qu'un terme isolé pèse autant qu'un titre sans être plus gros.",
  "when_to_use": "Valoriser des mots-clés, des noms de produits, de modules, d'offres ou de compétences sur une slide, un hero ou une couverture — seul, ou empilé en liste. C'est le pattern quand il faut donner du poids à des termes qui n'ont ni chiffre ni phrase autour.",
  "avoid_when": "Le libellé dépasse deux mots (la pilule devient une barre et le cou n'est plus lisible), l'élément est cliquable (ça ressemble à un bouton et le cou casse la cible), ou l'icône doit être COMPRISE — à 0,6u dans un cercle, elle marque une catégorie, elle n'explique rien.",
  "tags": [
    "capsule",
    "pilule",
    "etiquette",
    "tag",
    "mot-cle",
    "keyword",
    "neon",
    "contour",
    "outline",
    "icone",
    "soudure",
    "gooey",
    "sombre",
    "slide",
    "hero"
  ],
  "vars": [
    {
      "name": "--vl-neon",
      "role": "le trait ET le texte — c'est la seule couleur du pattern",
      "default": "#4FE383"
    },
    {
      "name": "--vl-cap-u",
      "role": "l'unité dont TOUTE la géométrie dérive (hauteur de rangée = 1,255 × u) ; elle n'est pas libre — le trait vaut 0,055 u et Chrome ARRONDIT une bordure CSS au pixel entier là où il ne le fait pas d'un stroke SVG, donc une valeur qui ne tombe pas sur un trait quasi entier rouvre la soudure à l'œil",
      "default": "91px"
    }
  ],
  "slots": [
    "icon",
    "label"
  ],
  "geometry": {
    "root": ".vl-cap",
    "frame": [
      372,
      114
    ],
    "ratios": {
      "head_over_height": 1.4562,
      "label_over_height": 0.8406,
      "stroke_over_height": 0.0438,
      "font_over_height": 0.494,
      "icon_over_height": 0.478,
      "circle_r_over_u": 0.6,
      "cap_r_over_u": 0.5,
      "fillet_r_over_u": 0.28,
      "centres_gap_over_u": 1.2
    },
    "type_px": {
      "label": 56.4
    },
    "pad_ratio": {
      "top": 0,
      "x": 0.143,
      "bottom": 0
    }
  },
  "benchmarks": [
    {
      "name": "tête (cercle + cou + calotte) ≈ 1,456 × la hauteur de rangée",
      "measure": "box('.vl-cap__head').w / H",
      "expect": 1.4562,
      "tol": 0.02
    },
    {
      "name": "pilule ≈ 84 % de la hauteur : le cercle déborde en haut ET en bas",
      "measure": "box('.vl-cap__label').h / H",
      "expect": 0.8406,
      "tol": 0.01
    },
    {
      "name": "trait unique — la bordure de la pilule vaut 4,4 % de la hauteur (= le stroke SVG)",
      "measure": "num('.vl-cap__label','borderTopWidth') / H",
      "expect": 0.0438,
      "tol": 0.005
    },
    {
      "name": "contour continu : la pilule commence là où la tête finit (±0,6 px)",
      "measure": "Math.abs(box('.vl-cap__label').left - box('.vl-cap__head').right)",
      "max": 0.6
    },
    {
      "name": "contour continu : la calotte droite est collée à la pilule (±0,6 px)",
      "measure": "Math.abs(box('.vl-cap__tail').left - box('.vl-cap__label').right)",
      "max": 0.6
    },
    {
      "name": "pilule centrée sur la tête — débord haut = débord bas",
      "measure": "Math.abs((box('.vl-cap__label').top - box('.vl-cap__head').top) - (box('.vl-cap__head').bottom - box('.vl-cap__label').bottom))",
      "max": 0.6
    },
    {
      "name": "les trois pièces pavent la capsule sans trou ni recouvrement",
      "measure": "box('.vl-cap').w - (box('.vl-cap__head').w + box('.vl-cap__label').w + box('.vl-cap__tail').w)",
      "expect": 0,
      "tol": 0.6
    },
    {
      "name": "corps ≈ 49 % de la hauteur de rangée (le mot remplit la pilule)",
      "measure": "num('.vl-cap__label','fontSize') / H",
      "expect": 0.494,
      "tol": 0.03
    },
    {
      "name": "capitales — la capsule ne prend pas de bas-de-casse",
      "measure": "cs('.vl-cap__label','textTransform') === 'uppercase' ? 1 : 0",
      "expect": 1
    },
    {
      "name": "glyphe centré dans le cercle : centre à (H/2, H/2), ±1 px",
      "measure": "Math.max(Math.abs(box('.vl-cap__icon').left + box('.vl-cap__icon').w / 2 - H / 2), Math.abs(box('.vl-cap__icon').top + box('.vl-cap__icon').h / 2 - H / 2))",
      "max": 1
    },
    {
      "name": "glyphe entre 40 % et 55 % du diamètre du cercle — au-delà il touche le trait",
      "measure": "box('.vl-cap__icon').w / H",
      "min": 0.4,
      "max": 0.55
    },
    {
      "name": "le mot respire plus à droite (calotte ronde) qu'à gauche (jonction droite)",
      "measure": "num('.vl-cap__label','paddingRight') / num('.vl-cap__label','paddingLeft')",
      "min": 1.2
    },
    {
      "name": "contraste du mot ≥ 4,5 — le néon sur le vert sombre n'a aucune excuse",
      "measure": "contrast('.vl-cap__label')",
      "min": 4.5
    }
  ],
  "notes": "La difficulté du pattern n'est pas le dessin, c'est la LARGEUR VARIABLE : le contour doit rester continu quel que soit le mot. D'où le découpage en trois pièces — tête fixe (cercle + les deux congés + calotte gauche, un seul <path>), corps élastique (les deux droites en bordures CSS), calotte droite fixe. Les droites du corps prolongent les extrémités du tracé au pixel près parce que le SVG est rendu à l'échelle exacte (viewBox 1.8275 × 1.255 pour une boîte de 1.8275u × 1.255u, donc 1 unité de viewBox = 1u) et que son stroke-width (0.055) est le même nombre que --sw (0.055u). Casser cette égalité — un SVG en preserveAspectRatio non uniforme, une hauteur de pilule qui ne suit plus — rouvre le contour et la signature tombe. La géométrie du cou est calculée, pas dessinée à l'œil : les congés de rayon 0,28u sont TANGENTS extérieurement au cercle (0,6u) et à la calotte (0,5u) distants de 1,2u d'entraxe, ce qui place leurs centres à (±0,6692u, ±0,5715u) et les points de tangence à x = 0,4563u sur le cercle et x = 0,8597u sur la calotte. Ces six nombres sont solidaires : changer le rayon du cercle sans recalculer les congés produit un raccord qui casse — visible à 3 px, invisible sur une maquette réduite, et c'est exactement ce que les benchmarks de continuité attrapent. Deuxième défaut que rien ne mesurait et que seul le RENDU a sorti (12/08) : à la jonction, la bordure CSS de la pilule et le stroke SVG se touchent bout à bout, et la rastérisation laisse un trou d'environ 0,7 px — un contour continu en géométrie, interrompu à l'œil. D'où le débord de 0,05 u ajouté aux DEUX extrémités des tracés (les `M`/`L` qui sortent du viewBox, avec `overflow: visible`) : la couverture des douze lignes droites passe de 0,30 à ≥ 0,99. Les quatre glyphes (éclair, croix directionnelle, rayons, cadre) sont REDESSINÉS : la référence n'existe pas sur disque, seule sa géométrie a survécu.",
  "media": [
    "slide",
    "social",
    "web"
  ],
  "id": "tag-01-gooey-capsule"
}