{# reseaux-sociaux.html — Grille N cards de réseaux sociaux (icon + nom + handle/stat + lien).
   Slots :
   {{EYEBROW}} / {{H2}}     — header
   {{ITEMS_HTML}}           — répéter pour chaque réseau :
                              <a class="rs__card" href="…" target="_blank" rel="noopener">
                                <span class="rs__icon" aria-hidden="true"><svg…>…</svg></span>
                                <span class="rs__name">YouTube</span>
                                <span class="rs__handle">@handle</span>
                              </a>
#}

<section class="rs">
  <div class="rs__inner">
    <header class="rs__header">
      <span class="rs__eyebrow">{{EYEBROW}}</span>
      <h2 class="rs__h2">{{H2}}</h2>
    </header>
    <div class="rs__grid">
      {{ITEMS_HTML}}
    </div>
  </div>
</section>

<style>
  .rs { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .rs__inner { max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem; }
  .rs__header { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .rs__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .rs__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; }
  .rs__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
  .rs__card { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; padding: 1.5rem 1rem; background: var(--color-bg-alt, #f5f5f5); border-radius: 12px; color: inherit; text-decoration: none; transition: transform .2s, background .2s; text-align: center; }
  .rs__card:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--color-accent, #ff2c7b) 12%, var(--color-bg-alt, #f5f5f5)); }
  .rs__icon { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; color: var(--color-accent, #ff2c7b); }
  .rs__icon svg { width: 100%; height: 100%; }
  .rs__name { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 0.95rem; }
  .rs__handle { font-size: 0.8rem; opacity: 0.75; }
  @media (max-width: 991px) { .rs__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 600px) { .rs__grid { grid-template-columns: repeat(2, 1fr); } }
</style>