/* Hero : eyebrow, titre (encre puis bleu logo), paragraphe, pilule. Tailles de la maquette (specs v1). */
.eyebrow {
  position: absolute; left: 86px; top: 224px; line-height: 1;
  font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--ls-eyebrow);
  color: var(--ink-eyebrow); white-space: nowrap; text-transform: uppercase;
}
/* Le titre : bloc de 4 lignes de 72 px, sommet d'encre à 281 comme la maquette */
.title {
  position: absolute; left: 84px; top: 270px; margin: 0; width: 600px; white-space: nowrap;
  font-size: var(--fs-title); font-weight: 700; line-height: 72px; letter-spacing: var(--ls-title);
}
.title .ink { color: var(--ink-title); display: block; }
.title .blue { color: var(--blue-logo); display: block; }
.lead {
  position: absolute; left: 86px; top: 663px; margin: 0;
  font-size: var(--fs-para); font-weight: 500; line-height: var(--lh-para); color: var(--ink-para); white-space: nowrap;
}
.pill { position: absolute; left: 84px; top: 803px; width: 358px; height: 52px; border-radius: var(--pill-radius); background: var(--pill-bg); }
.pill__dot { position: absolute; left: 27px; top: 19px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); }
.pill__text {
  position: absolute; left: 64px; top: 15px; line-height: 1; white-space: nowrap;
  font-size: var(--fs-pill); font-weight: 600; letter-spacing: var(--ls-pill); color: var(--ink-pill);
}