{# reseaux-sociaux-stats.html — Bandeau réseaux horizontal flat (icône large + action verbe + count chiffre).
   Variante de reseaux-sociaux.html (qui est une grille de cards avec card background).
   Ici : layout 6 colonnes égales, séparateurs verticaux, icônes grandes colorées, accent count.
   Slots :
   {{H2}}                                   — titre centré (ex. "Stay Connected With Me")
   {{ITEMS_HTML}}                           — répéter pour chaque réseau :
                                              <a class="rss__item" href="…">
                                                <span class="rss__icon" aria-hidden="true"><svg…/></span>
                                                <span class="rss__action">Watch My Videos</span>
                                                <span class="rss__count">3.39M</span>
                                              </a>
   {{HIGHLIGHT_IDX}}                        — index (1-based) de l'item à mettre en highlight (subtle bg), optionnel
#}

<section class="rss">
  <div class="rss__inner">
    <h2 class="rss__h2">{{H2}}</h2>
    <div class="rss__row">
      {{ITEMS_HTML}}
    </div>
  </div>
</section>

<style>
  .rss { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .rss__inner { max-width: 90rem; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
  .rss__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.3rem); text-align: center; text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 3rem; }
  .rss__row { display: grid; grid-template-columns: repeat(6, 1fr); align-items: stretch; }
  .rss__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1.25rem; padding: 1.5rem 1rem; text-decoration: none; color: inherit; text-align: center; border-left: 1px solid color-mix(in srgb, var(--color-accent, #d98d4f) 35%, transparent); transition: background .25s; }
  .rss__item:first-child { border-left: none; }
  .rss__item:hover { background: color-mix(in srgb, var(--color-accent, #d98d4f) 12%, transparent); }
  .rss__item:hover .rss__action,
  .rss__item:hover .rss__count { color: var(--color-accent, #d98d4f); }
  .rss__icon { display: inline-flex; width: 3.75rem; height: 3.75rem; align-items: center; justify-content: center; color: var(--color-accent, #d98d4f); }
  .rss__icon svg { width: 100%; height: 100%; }
  .rss__action { font-family: var(--font-body, inherit); font-size: 1rem; line-height: 1.3; font-weight: 400; }
  .rss__count { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; }
  @media (max-width: 991px) { .rss__row { grid-template-columns: repeat(3, 1fr); } .rss__item:nth-child(4) { border-left: none; } }
  @media (max-width: 600px) { .rss__row { grid-template-columns: repeat(2, 1fr); } .rss__item { border-left: none !important; border-top: 1px solid color-mix(in srgb, var(--color-accent, #d98d4f) 35%, transparent); padding: 1.75rem 0.5rem; } .rss__item:nth-child(-n+2) { border-top: none; } }
</style>

<script>
/* rss__count counter animation — démarre quand la section devient visible (IntersectionObserver).
   Préserve les suffixes (K, M, /mo, etc.). Easing ease-out cubic, durée 1.4s. */
(function () {
  document.querySelectorAll('.rss').forEach(function (root) {
    if (root.dataset.rssInit) return;
    root.dataset.rssInit = '1';
    var counts = root.querySelectorAll('.rss__count');
    counts.forEach(function (c) { c.dataset.target = c.textContent.trim(); c.textContent = '0'; });
    function animate(el) {
      var m = (el.dataset.target || '').match(/^([\d.,]+)(.*)$/);
      if (!m) { el.textContent = el.dataset.target; return; }
      var target = parseFloat(m[1].replace(',', '.'));
      var suffix = m[2];
      var t0 = performance.now();
      (function step(now) {
        var p = Math.min((now - t0) / 1400, 1);
        var eased = 1 - Math.pow(1 - p, 3);
        var v = target * eased;
        el.textContent = (v >= 10 ? Math.round(v) : v.toFixed(1)) + suffix;
        if (p < 1) requestAnimationFrame(step);
      })(t0);
    }
    new IntersectionObserver(function (entries, obs) {
      entries.forEach(function (e) {
        if (e.isIntersecting) { counts.forEach(animate); obs.disconnect(); }
      });
    }, { threshold: 0.3 }).observe(root);
  });
})();
</script>