{# testimonials-carrousel.html — Carrousel pur CSS (scroll-snap) de N témoignages clients.
   Swipe natif tactile + scroll horizontal souris. Zéro JS. Pas de flèches.
   Slots :
   {{EYEBROW}} / {{H2}}     — header
   {{ITEMS_HTML}}           — répéter pour chaque témoignage :
                              <article class="tcc__card">
                                <blockquote class="tcc__quote">…texte…</blockquote>
                                <cite class="tcc__cite">— Prénom, transformation</cite>
                              </article>
#}

<section class="tcc">
  <div class="tcc__inner">
    <header class="tcc__header">
      <span class="tcc__eyebrow">{{EYEBROW}}</span>
      <h2 class="tcc__h2">{{H2}}</h2>
    </header>
  </div>
  <div class="tcc__track" tabindex="0" aria-label="Témoignages, faire défiler horizontalement">
    {{ITEMS_HTML}}
  </div>
</section>

<style>
  .tcc { background: var(--color-bg-alt, #f5f5f5); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); padding: 4rem 0; }
  .tcc__inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
  .tcc__header { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .tcc__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .tcc__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; line-height: 1.15; }
  .tcc__track {
    display: flex; gap: 1.5rem; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 1.5rem;
    padding: 0.5rem 1.5rem 2rem;
    scrollbar-width: thin;
  }
  .tcc__track::-webkit-scrollbar { height: 8px; }
  .tcc__track::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 25%, transparent); border-radius: 999px; }
  .tcc__card {
    flex: 0 0 min(85%, 24rem);
    scroll-snap-align: center;
    background: var(--color-bg, #fff);
    border-radius: 14px;
    padding: 1.75rem;
    display: flex; flex-direction: column; gap: 1rem;
    box-shadow: 0 2px 12px color-mix(in srgb, currentColor 8%, transparent);
  }
  .tcc__quote { font-size: 1rem; line-height: 1.55; margin: 0; }
  .tcc__quote::before { content: "\201C"; }
  .tcc__quote::after  { content: "\201D"; }
  .tcc__cite { display: block; margin-top: auto; font-family: var(--font-heading, inherit); font-weight: 600; font-size: 0.9rem; opacity: 0.8; font-style: normal; }
</style>