Barre de fin à deux volumes

{
  "name": "Barre de fin à deux volumes",
  "family": "layout",
  "ref": "ref-21-finengy-quadrant-clair",
  "intent": "Fermer une section par un objet qu'on voit encore après un long bloc : une barre pleine à bords ronds dont le bouton occupe la moitié droite, avec son propre arrondi et son propre aplat. Les deux se lisent comme deux volumes superposés — là où un filet horizontal surmonté d'une phrase grise et d'un lien souligné ne fait que séparer, sans rien porter.",
  "when_to_use": "En fin de section longue, quand il reste UNE chose à dire et UNE seule route à proposer : la phrase de conclusion, et le bouton qui l'emmène. Se cale sur la largeur du bloc qu'elle referme — c'est cet alignement qui la fait lire comme sa fermeture plutôt que comme un objet posé après.",
  "avoid_when": "Dès qu'il y a deux destinations : la barre conclut, elle n'arbitre pas — deux boutons en font une barre de navigation, et la conclusion se perd. À éviter aussi quand la phrase dépasse trois lignes (la gélule devient un pavé arrondi, ses deux caps mangent le texte), et à une largeur inférieure à celle du bloc qu'elle suit : centrée plus étroite, elle flotte au lieu de fermer.",
  "media": [
    "web",
    "slide"
  ],
  "tags": [
    "barre",
    "bande",
    "conclusion",
    "cta",
    "bouton",
    "gelule",
    "pilule",
    "fin-de-section",
    "rayon"
  ],
  "vars": [
    {
      "name": "--vl-barre-w",
      "role": "la largeur de la barre — celle du bloc qu'elle referme, jamais celle de la colonne de texte",
      "default": "1320px"
    },
    {
      "name": "--vl-barre-jeu",
      "role": "le jeu autour du bouton, ÉGAL sur les quatre côtés : c'est lui qui fait la superposition",
      "default": "10px"
    },
    {
      "name": "--vl-barre-pad",
      "role": "le renfoncement du texte du côté rond de la barre",
      "default": "48px"
    }
  ],
  "slots": [
    {
      "name": "phrase",
      "selector": ".vl-barre__txt",
      "role": "la conclusion, une à trois lignes"
    },
    {
      "name": "bouton",
      "selector": ".vl-barre__cta",
      "role": "la seule route proposée"
    }
  ],
  "geometry": {
    "root": ".vl-barre",
    "frame": [
      1320,
      80
    ],
    "ratios": {
      "jeu_over_hauteur": 0.116,
      "pad_over_hauteur": 0.558,
      "bouton_over_largeur": 0.262,
      "hauteur_over_largeur": 0.065,
      "boutons": 1
    },
    "type_px": {
      "phrase": 21,
      "bouton": 19
    },
    "pad_ratio": {
      "top": 0.0076,
      "x": 0.0364,
      "bottom": 0.0076
    }
  },
  "benchmarks": [
    {
      "name": "DEUX VOLUMES — le jeu autour du bouton est le même sur ses quatre côtés : inégal, le bouton se lit comme collé à un bord au lieu d'être posé SUR la barre",
      "measure": "(() => { const b = box('.vl-barre'), c = box('.vl-barre__cta'); const j = [c.top - b.top, b.bottom - c.bottom, b.right - c.right]; return (Math.max(...j) - Math.min(...j)) / H; })()",
      "max": 0.02
    },
    {
      "name": "les DEUX rayons sont pleins (≥ la demi-hauteur de leur boîte) : deux gélules, pas deux rectangles adoucis",
      "measure": "(() => { const rb = num('.vl-barre', 'borderTopLeftRadius') / (box('.vl-barre').h / 2); const rc = num('.vl-barre__cta', 'borderTopLeftRadius') / (box('.vl-barre__cta').h / 2); return Math.min(rb, rc); })()",
      "min": 1
    },
    {
      "name": "UN SEUL bouton — la barre conclut, elle ne propose pas deux routes",
      "measure": "document.querySelectorAll('.vl-barre__cta').length",
      "expect": 1,
      "tol": 0
    },
    {
      "name": "LE BOUTON EST UN APLAT, pas un lien souligné : son fond diffère de celui de la barre, et il ne porte aucun soulignement",
      "measure": "(() => { const meme = cs('.vl-barre__cta', 'backgroundColor') === cs('.vl-barre', 'backgroundColor'); const souligne = cs('.vl-barre__cta', 'textDecorationLine') !== 'none'; return (!meme && !souligne) ? 1 : 0; })()",
      "expect": 1,
      "tol": 0
    },
    {
      "name": "LE TEXTE RESPIRE DU CÔTÉ ROND — son renfoncement vaut au moins le tiers de la hauteur de barre, sinon la première lettre entre dans le cap arrondi",
      "measure": "num('.vl-barre', 'paddingLeft') / H",
      "min": 0.33
    },
    {
      "name": "BARRE BASSE — elle ferme, elle ne pèse pas : sa hauteur reste sous 0,09 de sa largeur",
      "measure": "H / W",
      "max": 0.09
    },
    {
      "name": "PLANCHER DE CORPS — la phrase fait au moins 0,0145 de la largeur (19 px sur 1320) : c'est une conclusion qu'on lit, pas une mention légale",
      "measure": "num('.vl-barre__txt', 'fontSize') / W",
      "min": 0.0145
    },
    {
      "name": "LE BOUTON N'EST PAS UN PAVÉ — il occupe entre un cinquième et un tiers de la barre : au-delà, ce n'est plus une conclusion mais une bannière d'appel",
      "measure": "box('.vl-barre__cta').w / W",
      "min": 0.18,
      "max": 0.34
    }
  ],
  "notes": "**Le geste tient dans un rapport, pas dans un dessin.** Le bouton est inséré du MÊME jeu sur ses quatre côtés (10 px sur une barre de 86) : c'est cette égalité qui le fait lire comme un volume POSÉ sur la barre. Un jeu inégal — collé en haut, ou à fleur du bord droit — et il redevient un élément aligné dans une boîte, ce qui est exactement la lecture qu'on fuit.\n\n**Les deux rayons doivent être pleins.** Une gélule dans une gélule se lit d'un coup d'œil ; deux rayons finis (12, 24 px) donnent deux rectangles adoucis dont l'un contient l'autre, et la superposition disparaît. Le benchmark mesure le rapport rayon / demi-hauteur, donc il survit à tout changement d'échelle.\n\n**La largeur n'est pas cosmétique.** La barre se cale sur le bloc qu'elle referme — ici les 1320 px du quadrant `layout-17-quadrant-epicentre`, qui sortent de la colonne de texte du site. Ramenée à la colonne (1120), elle est plus étroite que ce qu'elle conclut et se lit comme un objet posé APRÈS, pas comme une fermeture.\n\n**Origine.** Reversée le 21/08/2026 depuis la section « Nos propositions de valeur » du site Finengy Advisory, en même temps que le quadrant qu'elle referme. Elle remplace un filet horizontal surmonté d'une phrase en gris et d'un lien souligné — trois objets qui, après 1500 px de vignettes, ne se voyaient plus.",
  "id": "layout-18-barre-deux-volumes"
}