FAQ avec progression de lecture

{%- comment -%} NAHNAH AI · FAQ avec progression de lecture {%- endcomment -%}
<section class="nn-faq-progression-lecture" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-texte: {{ section.settings.couleur_texte }};">
  {%- if section.settings.titre != blank -%}<h2>{{ section.settings.titre | escape }}</h2>{%- endif -%}
  <div class="nn-faq-progression-lecture__barre-outils">
    <p class="nn-faq-progression-lecture__compteur" aria-live="polite"><span data-nn-lues>0</span> / {{ section.blocks.size }} {{ section.settings.texte_lues | escape }}</p>
    <button type="button" class="nn-faq-progression-lecture__tout" aria-pressed="false" data-nn-ouvrir="{{ section.settings.texte_ouvrir | escape }}" data-nn-fermer="{{ section.settings.texte_fermer | escape }}">{{ section.settings.texte_ouvrir | escape }}</button>
  </div>
  <div class="nn-faq-progression-lecture__piste" aria-hidden="true"><div class="nn-faq-progression-lecture__jauge"></div></div>
  <div class="nn-faq-progression-lecture__liste">
    {%- for bloc in section.blocks -%}
      <details class="nn-faq-progression-lecture__item" {{ bloc.shopify_attributes }}>
        <summary><span class="nn-faq-progression-lecture__coche" aria-hidden="true"></span>{{ bloc.settings.question | escape }}</summary>
        <div class="nn-faq-progression-lecture__reponse">{{ bloc.settings.reponse }}</div>
      </details>
    {%- endfor -%}
  </div>
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{%- for bloc in section.blocks -%}{"@type":"Question","name":{{ bloc.settings.question | json }},"acceptedAnswer":{"@type":"Answer","text":{{ bloc.settings.reponse | strip_html | json }}}}{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%}]}</script>
</section>
{% schema %}
{"name":"FAQ progression","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Avant de commander"},
{"type":"text","id":"texte_lues","label":"Texte du compteur","default":"questions lues"},
{"type":"text","id":"texte_ouvrir","label":"Bouton tout déplier","default":"Tout déplier"},
{"type":"text","id":"texte_fermer","label":"Bouton tout replier","default":"Tout replier"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FFFFFF"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#7C3AED"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#1F2937"}],
"blocks":[{"type":"question","name":"Question","settings":[{"type":"text","id":"question","label":"Question","default":"Quelle taille choisir ?"},{"type":"richtext","id":"reponse","label":"Réponse","default":"<p>Donne ici tes conseils de taille.</p>"}]}],
"presets":[{"name":"FAQ avec progression de lecture","blocks":[{"type":"question"},{"type":"question","settings":{"question":"Quand vais-je être débité ?"}},{"type":"question","settings":{"question":"Comment entretenir mon article ?"}},{"type":"question","settings":{"question":"Proposez-vous une garantie ?"}}]}]}
{% endschema %}

{% stylesheet %}
/* Barre de progression + coches sur les questions déjà lues */
.nn-faq-progression-lecture{background:var(--nn-fond);color:var(--nn-texte);padding:56px 16px;font-family:system-ui,sans-serif}
.nn-faq-progression-lecture h2{text-align:center;margin:0 0 24px;font-size:clamp(26px,4vw,40px)}
.nn-faq-progression-lecture__barre-outils,.nn-faq-progression-lecture__piste,.nn-faq-progression-lecture__liste{max-width:760px;margin-left:auto;margin-right:auto}
.nn-faq-progression-lecture__barre-outils{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.nn-faq-progression-lecture__compteur{margin:0;font-size:14px;font-weight:600}
.nn-faq-progression-lecture__tout{border:1px solid var(--nn-accent);color:var(--nn-accent);background:transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.nn-faq-progression-lecture__tout:focus-visible{outline:2px solid var(--nn-accent);outline-offset:2px}
.nn-faq-progression-lecture__piste{height:6px;border-radius:6px;background:rgba(0,0,0,.08);margin-top:12px;margin-bottom:22px;overflow:hidden}
.nn-faq-progression-lecture__jauge{height:100%;width:0;background:var(--nn-accent);border-radius:6px;transition:width .4s ease}
.nn-faq-progression-lecture__liste{display:grid;gap:8px}
.nn-faq-progression-lecture__item{border-bottom:1px solid rgba(0,0,0,.08)}
.nn-faq-progression-lecture summary{display:flex;align-items:center;gap:12px;padding:16px 4px;cursor:pointer;list-style:none;font-weight:600}
.nn-faq-progression-lecture summary::-webkit-details-marker{display:none}
.nn-faq-progression-lecture summary:focus-visible{outline:2px solid var(--nn-accent);outline-offset:2px}
.nn-faq-progression-lecture__coche{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.2);flex-shrink:0;display:grid;place-items:center;font-size:12px;transition:background .25s,border-color .25s}
.nn-faq-progression-lecture__item.est-lue .nn-faq-progression-lecture__coche{background:var(--nn-accent);border-color:var(--nn-accent);color:#fff}
.nn-faq-progression-lecture__item.est-lue .nn-faq-progression-lecture__coche::after{content:"✓"}
.nn-faq-progression-lecture__reponse{padding:0 4px 18px 36px;line-height:1.6}
@media (prefers-reduced-motion: reduce){.nn-faq-progression-lecture__jauge,.nn-faq-progression-lecture__coche{transition:none}}
{% endstylesheet %}

{% javascript %}
/* Compte les questions ouvertes au moins une fois et gère « tout déplier » */
(function () {
  document.querySelectorAll('.nn-faq-progression-lecture').forEach(function (section) {
    var items = section.querySelectorAll('.nn-faq-progression-lecture__item');
    var compteur = section.querySelector('[data-nn-lues]');
    var jauge = section.querySelector('.nn-faq-progression-lecture__jauge');
    var bouton = section.querySelector('.nn-faq-progression-lecture__tout');
    // Met à jour le compteur et la jauge
    function majProgression() {
      var lues = section.querySelectorAll('.est-lue').length;
      compteur.textContent = lues;
      jauge.style.width = (items.length ? (lues / items.length) * 100 : 0) + '%';
    }
    items.forEach(function (item) {
      item.addEventListener('toggle', function () {
        if (item.open) { item.classList.add('est-lue'); majProgression(); }
      });
    });
    // Bouton tout déplier / tout replier
    bouton.addEventListener('click', function () {
      var ouvrir = bouton.getAttribute('aria-pressed') !== 'true';
      items.forEach(function (item) { item.open = ouvrir; });
      bouton.setAttribute('aria-pressed', String(ouvrir));
      bouton.textContent = ouvrir ? bouton.dataset.nnFermer : bouton.dataset.nnOuvrir;
    });
  });
})();
{% endjavascript %}