{# testimonials-celebs.html — Grille 4 témoignages "logos" (célébrités/influenceurs) : photo ronde + citation + nom + rôle.
   Slots :
   {{EYEBROW}}                                                          — petite ligne (ex. "Ils en parlent")
   {{H2}}                                                               — titre (optionnel)
   {{NAME_1}} / {{ROLE_1}} / {{QUOTE_1}} / {{PHOTO_1_SRC}}              — × 4
   {{NAME_2}} / {{ROLE_2}} / {{QUOTE_2}} / {{PHOTO_2_SRC}}
   {{NAME_3}} / {{ROLE_3}} / {{QUOTE_3}} / {{PHOTO_3_SRC}}
   {{NAME_4}} / {{ROLE_4}} / {{QUOTE_4}} / {{PHOTO_4_SRC}}
#}

<section class="tcl">
  <div class="tcl__inner">
    <header class="tcl__header">
      <span class="tcl__eyebrow">{{EYEBROW}}</span>
      <h2 class="tcl__h2">{{H2}}</h2>
    </header>
    <ul class="tcl__grid">
      <li class="tcl__card"><img class="tcl__photo" src="{{PHOTO_1_SRC}}" alt="{{NAME_1}}" loading="lazy"><blockquote class="tcl__quote">{{QUOTE_1}}</blockquote><cite class="tcl__cite"><span class="tcl__name">{{NAME_1}}</span><span class="tcl__role">{{ROLE_1}}</span></cite></li>
      <li class="tcl__card"><img class="tcl__photo" src="{{PHOTO_2_SRC}}" alt="{{NAME_2}}" loading="lazy"><blockquote class="tcl__quote">{{QUOTE_2}}</blockquote><cite class="tcl__cite"><span class="tcl__name">{{NAME_2}}</span><span class="tcl__role">{{ROLE_2}}</span></cite></li>
      <li class="tcl__card"><img class="tcl__photo" src="{{PHOTO_3_SRC}}" alt="{{NAME_3}}" loading="lazy"><blockquote class="tcl__quote">{{QUOTE_3}}</blockquote><cite class="tcl__cite"><span class="tcl__name">{{NAME_3}}</span><span class="tcl__role">{{ROLE_3}}</span></cite></li>
      <li class="tcl__card"><img class="tcl__photo" src="{{PHOTO_4_SRC}}" alt="{{NAME_4}}" loading="lazy"><blockquote class="tcl__quote">{{QUOTE_4}}</blockquote><cite class="tcl__cite"><span class="tcl__name">{{NAME_4}}</span><span class="tcl__role">{{ROLE_4}}</span></cite></li>
    </ul>
  </div>
</section>

<style>
  .tcl { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .tcl__inner { max-width: 90rem; margin: 0 auto; padding: 4rem 1.5rem; }
  .tcl__header { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .tcl__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .tcl__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin: 0; }
  .tcl__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .tcl__card { background: var(--color-bg-alt, #f8f8f8); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; }
  .tcl__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; }
  .tcl__quote { font-size: 1rem; line-height: 1.5; margin: 0; font-style: italic; }
  .tcl__quote::before { content: "\201C"; }
  .tcl__quote::after  { content: "\201D"; }
  .tcl__cite { display: flex; flex-direction: column; font-style: normal; }
  .tcl__name { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 0.95rem; }
  .tcl__role { font-size: 0.825rem; opacity: 0.7; }
  @media (max-width: 991px) { .tcl__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .tcl__grid { grid-template-columns: 1fr; } }
</style>