{# quiz-zone-cta.html — Bloc invitation quiz interactive : eyebrow + h2 + lead + 3 zones illustrées + CTA + hint.
   Slots :
   {{EYEBROW}}                              — ex. "Quiz gratuit · 2 min"
   {{H2_HTML}}                              — titre (HTML pour <span> accent)
   {{LEAD}}                                 — paragraphe d'intro
   {{ZONE_1_ICON}} / {{ZONE_1_LABEL}}       — × 3 (emoji ou caractère + label court)
   {{ZONE_2_ICON}} / {{ZONE_2_LABEL}}
   {{ZONE_3_ICON}} / {{ZONE_3_LABEL}}
   {{CTA_LABEL}} / {{CTA_HREF}}             — bouton principal
   {{HINT}}                                 — micro-ligne (durée, gratuité…)
#}

<section class="qzc">
  <div class="qzc__inner">
    <div class="qzc__card">
      <span class="qzc__eyebrow">{{EYEBROW}}</span>
      <h2 class="qzc__h2">{{H2_HTML}}</h2>
      <p class="qzc__lead">{{LEAD}}</p>
      <ul class="qzc__zones">
        <li class="qzc__zone"><span class="qzc__icon" aria-hidden="true">{{ZONE_1_ICON}}</span><span class="qzc__label">{{ZONE_1_LABEL}}</span></li>
        <li class="qzc__zone"><span class="qzc__icon" aria-hidden="true">{{ZONE_2_ICON}}</span><span class="qzc__label">{{ZONE_2_LABEL}}</span></li>
        <li class="qzc__zone"><span class="qzc__icon" aria-hidden="true">{{ZONE_3_ICON}}</span><span class="qzc__label">{{ZONE_3_LABEL}}</span></li>
      </ul>
      <a class="qzc__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
      <span class="qzc__hint">{{HINT}}</span>
    </div>
  </div>
</section>

<style>
  .qzc { background: var(--color-bg-alt, #f7f4ef); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .qzc__inner { max-width: 56rem; margin: 0 auto; padding: 4rem 1.5rem; }
  .qzc__card { background: var(--color-bg, #fff); border-radius: 18px; padding: 3rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
  .qzc__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .qzc__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4.2vw, 2.75rem); line-height: 1.15; margin: 0; }
  .qzc__h2 :where(span) { color: var(--color-accent, #ff2c7b); }
  .qzc__lead { font-size: 1.1rem; line-height: 1.55; margin: 0; max-width: 32rem; }
  .qzc__zones { list-style: none; padding: 0; margin: 1.5rem 0 0.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; width: 100%; max-width: 28rem; }
  .qzc__zone { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.9rem 0.5rem; background: var(--color-bg-alt, #f7f4ef); border-radius: 10px; }
  .qzc__icon { font-size: 1.75rem; line-height: 1; }
  .qzc__label { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 0.85rem; }
  .qzc__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.1rem; padding: 1.1rem 2rem; border-radius: 10px; margin-top: 0.75rem; transition: transform .25s, filter .25s; }
  .qzc__cta:hover { transform: scale(.97); filter: saturate(.85); }
  .qzc__hint { font-size: 0.85rem; opacity: 0.65; }
  @media (max-width: 600px) { .qzc__card { padding: 2rem 1.25rem; } .qzc__zones { grid-template-columns: 1fr; } }
</style>