{# hero-stats-tagline.html — Hero "credentials proof" : eyebrow + h1 (chiffre clé) + tagline + CTA + hint.
   Différent de hero-offer-cta (offre commerciale) et hero-intro-portrait (présentation coach).
   Ici : autorité par les chiffres + statement court.
   Slots :
   {{EYEBROW}}                              — petite ligne (ex. "Méthode A.R.C.H.I")
   {{H1_HTML}}                              — h1 avec chiffre clé (HTML pour <span> accent sur le nombre)
   {{TAGLINE}}                              — phrase courte sous le h1 (positionnement)
   {{CTA_LABEL}} / {{CTA_HREF}}             — bouton CTA principal
   {{HINT}}                                 — micro-ligne sous le CTA (optionnel)
#}

<section class="hst">
  <div class="hst__inner">
    <span class="hst__eyebrow">{{EYEBROW}}</span>
    <h1 class="hst__h1">{{H1_HTML}}</h1>
    <p class="hst__tagline">{{TAGLINE}}</p>
    <a class="hst__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
    <span class="hst__hint">{{HINT}}</span>
  </div>
</section>

<style>
  .hst { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .hst__inner { max-width: 64rem; margin: 0 auto; padding: 6rem 1.5rem 5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
  .hst__eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .hst__h1 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(2.75rem, 6.5vw, 5rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0; max-width: 24ch; }
  .hst__h1 :where(span) { color: var(--color-accent, #ff2c7b); }
  .hst__tagline { font-family: var(--font-heading, inherit); font-weight: 500; font-size: clamp(1.15rem, 1.75vw, 1.5rem); line-height: 1.4; margin: 0; opacity: 0.85; max-width: 38rem; }
  .hst__cta { background: var(--color-cta-bg, #111); color: var(--color-cta-text, #fff) !important; text-decoration: none; font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.15rem; padding: 1.1rem 2rem; border-radius: 10px; margin-top: 1rem; transition: transform .25s, filter .25s; }
  .hst__cta:hover { transform: scale(.97); filter: saturate(.85); }
  .hst__hint { font-size: 0.875rem; opacity: 0.6; }
  @media (max-width: 600px) { .hst__inner { padding: 4rem 1.25rem 3.5rem; } }
</style>