{# impact-numbers.html — Stats impact pleine largeur : eyebrow + h2 + lead + 4 stats horizontaux.
   Différent de about-coach (qui inline 3 stats dans une bio). Ici stats centrés, pleine largeur.
   Slots :
   {{EYEBROW}}
   {{H2}}
   {{LEAD}}                                 — sous-titre court
   {{STAT_1_VALUE}} / {{STAT_1_LABEL}}      — × 4
   {{STAT_2_VALUE}} / {{STAT_2_LABEL}}
   {{STAT_3_VALUE}} / {{STAT_3_LABEL}}
   {{STAT_4_VALUE}} / {{STAT_4_LABEL}}
#}

<section class="impn">
  <div class="impn__inner">
    <header class="impn__header">
      <span class="impn__eyebrow">{{EYEBROW}}</span>
      <h2 class="impn__h2">{{H2}}</h2>
      <p class="impn__lead">{{LEAD}}</p>
    </header>
    <ul class="impn__grid">
      <li class="impn__item"><span class="impn__val">{{STAT_1_VALUE}}</span><span class="impn__lab">{{STAT_1_LABEL}}</span></li>
      <li class="impn__item"><span class="impn__val">{{STAT_2_VALUE}}</span><span class="impn__lab">{{STAT_2_LABEL}}</span></li>
      <li class="impn__item"><span class="impn__val">{{STAT_3_VALUE}}</span><span class="impn__lab">{{STAT_3_LABEL}}</span></li>
      <li class="impn__item"><span class="impn__val">{{STAT_4_VALUE}}</span><span class="impn__lab">{{STAT_4_LABEL}}</span></li>
    </ul>
  </div>
</section>

<style>
  .impn { background: var(--color-bg-dark, #111); color: var(--color-bg, #fff); font-family: var(--font-body, system-ui, sans-serif); }
  .impn__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; }
  .impn__header { text-align: center; margin-bottom: 3rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .impn__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .impn__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; line-height: 1.15; }
  .impn__lead { font-size: 1.05rem; line-height: 1.55; margin: 0; opacity: 0.8; max-width: 36rem; }
  .impn__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
  .impn__item { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 1rem; border-radius: 10px; }
  .impn__val { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; color: var(--color-accent, #ff2c7b); letter-spacing: -0.02em; }
  .impn__lab { font-size: 0.95rem; opacity: 0.75; }
  @media (max-width: 768px) { .impn__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
  @media (max-width: 480px) { .impn__grid { grid-template-columns: 1fr; } }
</style>