Carrousel d’avis clients en bulles

{%- comment -%} NAHNAH AI · Carrousel d’avis clients en bulles {%- endcomment -%}
<div class="nn-carrousels-avis-clients" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-duree: {{ section.settings.duree }}s;" data-nn-auto="{{ section.settings.auto }}">
  {%- if section.settings.titre != blank -%}<h2 class="nn-carrousels-avis-clients__titre">{{ section.settings.titre | escape }}</h2>{%- endif -%}
  <div class="nn-carrousels-avis-clients__scene" tabindex="0" role="region" aria-roledescription="carrousel" aria-label="Avis clients">
    {%- for block in section.blocks -%}
      <figure class="nn-carrousels-avis-clients__avis{% if forloop.first %} est-actif{% endif %}" aria-hidden="{% if forloop.first %}false{% else %}true{% endif %}" {{ block.shopify_attributes }}>
        <div class="nn-carrousels-avis-clients__etoiles" aria-label="{{ block.settings.note }} sur 5">{%- for i in (1..5) -%}<span{% if i > block.settings.note %} class="est-vide"{% endif %}>★</span>{%- endfor -%}</div>
        <blockquote class="nn-carrousels-avis-clients__citation">« {{ block.settings.texte | escape }} »</blockquote>
        <figcaption class="nn-carrousels-avis-clients__auteur"><span class="nn-carrousels-avis-clients__initiales" aria-hidden="true">{{ block.settings.nom | slice: 0 }}</span><span><strong>{{ block.settings.nom | escape }}</strong>{%- if block.settings.detail != blank -%}<small>{{ block.settings.detail | escape }}</small>{%- endif -%}</span></figcaption>
      </figure>
    {%- endfor -%}
  </div>
  <div class="nn-carrousels-avis-clients__commandes">
    <button type="button" class="nn-carrousels-avis-clients__btn" data-nn-prec aria-label="Avis précédent">←</button>
    <span class="nn-carrousels-avis-clients__minuteur" aria-hidden="true"><svg viewBox="0 0 36 36"><circle cx="18" cy="18" r="16"></circle><circle class="nn-carrousels-avis-clients__arc" cx="18" cy="18" r="16"></circle></svg><span data-nn-pos>1</span></span>
    <button type="button" class="nn-carrousels-avis-clients__btn" data-nn-suiv aria-label="Avis suivant">→</button>
  </div>
</div>

{% schema %}
{
  "name": "Avis clients en bulles",
  "tag": "section",
  "class": "nn-section-carrousels-avis-clients",
  "max_blocks": 12,
  "settings": [
    { "type": "text", "id": "titre", "label": "Titre", "default": "Ils nous font confiance" },
    { "type": "checkbox", "id": "auto", "label": "Passer à l’avis suivant tout seul", "default": true, "info": "Coupé si le visiteur a demandé à réduire les animations." },
    { "type": "range", "id": "duree", "label": "Durée par avis", "min": 3, "max": 12, "step": 1, "unit": "s", "default": 6 },
    { "type": "header", "content": "Couleurs" },
    { "type": "color", "id": "couleur_fond", "label": "Fond", "default": "#F6F3FF" },
    { "type": "color", "id": "couleur_texte", "label": "Texte", "default": "#1E1B2E" },
    { "type": "color", "id": "couleur_accent", "label": "Accent (étoiles, minuteur)", "default": "#7C5CFF" },
    { "type": "header", "content": "Espacement" },
    { "type": "range", "id": "marge_haut", "label": "Marge haute", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "marge_bas", "label": "Marge basse", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 48 }
  ],
  "blocks": [
    {
      "type": "avis",
      "name": "Avis",
      "settings": [
        { "type": "textarea", "id": "texte", "label": "Avis", "default": "Commande reçue en deux jours, qualité au rendez-vous. Je recommande sans hésiter !" },
        { "type": "text", "id": "nom", "label": "Nom", "default": "Camille" },
        { "type": "text", "id": "detail", "label": "Détail (ville, produit…)", "default": "Cliente vérifiée · Lyon" },
        { "type": "range", "id": "note", "label": "Note", "min": 1, "max": 5, "step": 1, "default": 5 }
      ]
    }
  ],
  "presets": [
    {
      "name": "Avis clients en bulles",
      "blocks": [
        { "type": "avis" },
        { "type": "avis", "settings": { "texte": "Un service client qui répond vraiment, et vite. Ça change tout.", "nom": "Yanis", "detail": "Client vérifié · Paris" } },
        { "type": "avis", "settings": { "texte": "Exactement comme sur les photos. Deuxième commande déjà passée.", "nom": "Inès", "detail": "Cliente vérifiée · Lille", "note": 4 } }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-carrousels-avis-clients { padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); text-align: center; }
.nn-carrousels-avis-clients__titre { margin: 0 0 28px; font-size: clamp(24px, 3.4vw, 38px); }
.nn-carrousels-avis-clients__scene { display: grid; max-width: 820px; margin: 0 auto; }
.nn-carrousels-avis-clients__scene:focus-visible, .nn-carrousels-avis-clients__btn:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 4px; }
.nn-carrousels-avis-clients__avis { grid-area: 1 / 1; margin: 0; padding: 36px 28px; border-radius: 28px; background: #FFFFFF; box-shadow: 0 24px 50px -30px rgba(30, 27, 46, 0.45); opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(4px); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s; pointer-events: none; }
.nn-carrousels-avis-clients__avis.est-actif { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.nn-carrousels-avis-clients__etoiles { color: var(--nn-accent); font-size: 22px; letter-spacing: 3px; }
.nn-carrousels-avis-clients__etoiles .est-vide { opacity: 0.25; }
.nn-carrousels-avis-clients__citation { margin: 16px 0 22px; font-size: clamp(18px, 2.4vw, 26px); line-height: 1.45; font-weight: 600; }
.nn-carrousels-avis-clients__auteur { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.nn-carrousels-avis-clients__auteur small { display: block; opacity: 0.65; }
.nn-carrousels-avis-clients__initiales { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--nn-accent); color: #FFFFFF; font-weight: 700; text-transform: uppercase; }
.nn-carrousels-avis-clients__commandes { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 26px; }
.nn-carrousels-avis-clients__btn { width: 46px; height: 46px; border: 0; border-radius: 50%; background: #FFFFFF; color: inherit; font-size: 18px; cursor: pointer; box-shadow: 0 6px 18px -10px rgba(30, 27, 46, 0.5); }
.nn-carrousels-avis-clients__minuteur { position: relative; display: grid; place-items: center; width: 44px; height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nn-carrousels-avis-clients__minuteur svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.nn-carrousels-avis-clients__minuteur circle { fill: none; stroke: rgba(30, 27, 46, 0.12); stroke-width: 3; }
.nn-carrousels-avis-clients__minuteur .nn-carrousels-avis-clients__arc { stroke: var(--nn-accent); stroke-dasharray: 100.6; stroke-dashoffset: 100.6; }
.nn-carrousels-avis-clients.est-en-cours .nn-carrousels-avis-clients__arc { animation: nn-carrousels-avis-clients-arc var(--nn-duree) linear forwards; }
.nn-carrousels-avis-clients.est-en-pause .nn-carrousels-avis-clients__arc { animation-play-state: paused; }
@keyframes nn-carrousels-avis-clients-arc { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nn-carrousels-avis-clients *, .nn-carrousels-avis-clients *::before, .nn-carrousels-avis-clients *::after { animation: none !important; transition: none !important; }
}
{% endstylesheet %}

{% javascript %}
(function () {
  // Respecte le réglage « réduire les animations » du visiteur
  var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  function brancher(racine) {
    if (racine.dataset.nnPret) return;
    racine.dataset.nnPret = "1";
    var avis = [].slice.call(racine.querySelectorAll(".nn-carrousels-avis-clients__avis"));
    if (!avis.length) return;
    var actuel = 0, minuterie = null, pos = racine.querySelector("[data-nn-pos]");
    var duree = parseFloat(getComputedStyle(racine).getPropertyValue("--nn-duree")) * 1000 || 6000;
    var auto = racine.getAttribute("data-nn-auto") === "true" && !reduit && avis.length > 1;
    // Affiche l'avis demandé et relance la minuterie circulaire
    function aller(i) {
      avis[actuel].classList.remove("est-actif"); avis[actuel].setAttribute("aria-hidden", "true");
      actuel = (i + avis.length) % avis.length;
      avis[actuel].classList.add("est-actif"); avis[actuel].setAttribute("aria-hidden", "false");
      if (pos) pos.textContent = actuel + 1;
      relancer();
    }
    function relancer() {
      clearTimeout(minuterie);
      if (!auto) return;
      racine.classList.remove("est-en-cours"); void racine.offsetWidth; racine.classList.add("est-en-cours");
      minuterie = setTimeout(function () { aller(actuel + 1); }, duree);
    }
    // Pause au survol : on fige l'arc et on garde le temps restant simple (relance complète à la sortie)
    racine.addEventListener("mouseenter", function () { if (!auto) return; clearTimeout(minuterie); racine.classList.add("est-en-pause"); });
    racine.addEventListener("mouseleave", function () { racine.classList.remove("est-en-pause"); relancer(); });
    racine.querySelector("[data-nn-suiv]").addEventListener("click", function () { aller(actuel + 1); });
    racine.querySelector("[data-nn-prec]").addEventListener("click", function () { aller(actuel - 1); });
    racine.querySelector(".nn-carrousels-avis-clients__scene").addEventListener("keydown", function (e) {
      if (e.key === "ArrowRight") { e.preventDefault(); aller(actuel + 1); }
      if (e.key === "ArrowLeft") { e.preventDefault(); aller(actuel - 1); }
    });
    relancer();
  }
  function tout() { document.querySelectorAll(".nn-carrousels-avis-clients").forEach(brancher); }
  tout();
  document.addEventListener("shopify:section:load", tout);
})();
{% endjavascript %}