{# cta-final-promo.html — Bandeau CTA final pleine largeur, fond sombre, h2 + lead + bouton.
   Slots :
   {{EYEBROW}}                      — petite ligne au-dessus (optionnel)
   {{H2_HTML}}                      — titre principal
   {{LEAD}}                         — paragraphe
   {{CTA_LABEL}} / {{CTA_HREF}}     — bouton principal
   {{HINT}}                         — micro-ligne sous le bouton (optionnel)
#}

<section class="cfp">
  <div class="cfp__inner">
    <span class="cfp__eyebrow">{{EYEBROW}}</span>
    <h2 class="cfp__h2">{{H2_HTML}}</h2>
    <p class="cfp__lead">{{LEAD}}</p>
    <a class="cfp__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
    <span class="cfp__hint">{{HINT}}</span>
  </div>
</section>

<style>
  .cfp { background: var(--color-bg-dark, #111); color: var(--color-bg, #fff); font-family: var(--font-body, system-ui, sans-serif); }
  .cfp__inner { max-width: 48rem; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
  .cfp__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .cfp__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; margin: 0; }
  .cfp__lead { font-size: 1.125rem; line-height: 1.55; margin: 0; opacity: 0.85; max-width: 32rem; }
  .cfp__cta {
    background: var(--color-cta-bg, var(--color-accent, #ff2c7b));
    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: 0.5rem;
    transition: transform .2s, filter .2s;
  }
  .cfp__cta:hover { transform: scale(.97); filter: saturate(.85); }
  .cfp__hint { font-size: 0.85rem; opacity: 0.65; }
</style>