FAQ à liens partageables

{%- comment -%} NAHNAH AI · FAQ à liens partageables {%- endcomment -%}
<section class="nn-faq-lien-partage" 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-lien-partage__liste">
    {%- for bloc in section.blocks -%}
      {%- assign ancre = bloc.settings.question | handleize | prepend: 'q-' -%}
      <details class="nn-faq-lien-partage__item" id="{{ ancre }}" {{ bloc.shopify_attributes }}>
        <summary><span>{{ bloc.settings.question | escape }}</span><span class="nn-faq-lien-partage__chevron" aria-hidden="true"></span></summary>
        <div class="nn-faq-lien-partage__reponse">
          {{ bloc.settings.reponse }}
          <button type="button" class="nn-faq-lien-partage__copier" data-nn-ancre="{{ ancre }}" data-nn-ok="{{ section.settings.texte_copie | escape }}">🔗 {{ section.settings.texte_bouton | escape }}</button>
        </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 liens partageables","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Questions fréquentes"},
{"type":"text","id":"texte_bouton","label":"Bouton copier","default":"Copier le lien de cette question"},
{"type":"text","id":"texte_copie","label":"Confirmation","default":"Lien copié !"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#F8FAFC"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#2563EB"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#0F172A"}],
"blocks":[{"type":"question","name":"Question","settings":[{"type":"text","id":"question","label":"Question","default":"Comment modifier mon adresse de livraison ?"},{"type":"richtext","id":"reponse","label":"Réponse","default":"<p>Explique ici la démarche à suivre.</p>"}]}],
"presets":[{"name":"FAQ à liens partageables","blocks":[{"type":"question"},{"type":"question","settings":{"question":"Puis-je annuler ma commande ?"}},{"type":"question","settings":{"question":"Livrez-vous à l'étranger ?"}}]}]}
{% endschema %}

{% stylesheet %}
/* Accordéon avec ancre par question et surbrillance de la question ciblée */
.nn-faq-lien-partage{background:var(--nn-fond);color:var(--nn-texte);padding:56px 16px;font-family:system-ui,sans-serif}
.nn-faq-lien-partage h2{text-align:center;margin:0 0 28px;font-size:clamp(26px,4vw,40px)}
.nn-faq-lien-partage__liste{max-width:780px;margin:0 auto;display:grid;gap:10px}
.nn-faq-lien-partage__item{background:#fff;border-radius:12px;border:1px solid rgba(15,23,42,.08);scroll-margin-top:90px;transition:box-shadow .4s}
.nn-faq-lien-partage__item.est-cible{box-shadow:0 0 0 3px var(--nn-accent)}
.nn-faq-lien-partage summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;font-weight:600}
.nn-faq-lien-partage summary::-webkit-details-marker{display:none}
.nn-faq-lien-partage summary:focus-visible{outline:2px solid var(--nn-accent);outline-offset:-2px;border-radius:12px}
.nn-faq-lien-partage__chevron{width:10px;height:10px;border-right:2px solid var(--nn-accent);border-bottom:2px solid var(--nn-accent);transform:rotate(45deg);transition:transform .25s;flex-shrink:0}
.nn-faq-lien-partage__item[open] .nn-faq-lien-partage__chevron{transform:rotate(-135deg)}
.nn-faq-lien-partage__reponse{padding:0 20px 18px;line-height:1.6}
.nn-faq-lien-partage__copier{margin-top:8px;border:0;background:none;color:var(--nn-accent);font:inherit;font-size:14px;cursor:pointer;padding:4px 0}
.nn-faq-lien-partage__copier:focus-visible{outline:2px solid var(--nn-accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.nn-faq-lien-partage__item,.nn-faq-lien-partage__chevron{transition:none}}
{% endstylesheet %}

{% javascript %}
/* Ouvre la question ciblée par l'URL et copie le lien d'une question */
(function () {
  // Ouvre et met en avant la question correspondant à l'ancre de l'URL
  function ouvrirCible() {
    if (!location.hash) return;
    var cible = document.getElementById(decodeURIComponent(location.hash.slice(1)));
    if (!cible || !cible.classList.contains('nn-faq-lien-partage__item')) return;
    cible.open = true;
    cible.classList.add('est-cible');
    cible.scrollIntoView({ block: 'start' });
    setTimeout(function () { cible.classList.remove('est-cible'); }, 2500);
  }
  ouvrirCible();
  window.addEventListener('hashchange', ouvrirCible);
  // Copie du lien dans le presse-papiers
  document.querySelectorAll('.nn-faq-lien-partage__copier').forEach(function (bouton) {
    var texte = bouton.textContent;
    bouton.addEventListener('click', function () {
      var lien = location.origin + location.pathname + '#' + bouton.dataset.nnAncre;
      var fini = function () { bouton.textContent = '✓ ' + bouton.dataset.nnOk; setTimeout(function () { bouton.textContent = texte; }, 2000); };
      if (navigator.clipboard) { navigator.clipboard.writeText(lien).then(fini, fini); } else { fini(); }
    });
  });
})();
{% endjavascript %}