Questions rassurantes avec recherche

{%- comment -%} NAHNAH AI · Questions rassurantes avec recherche {%- endcomment -%}
<section class="nn-confiance-questions-recherche" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  <div class="nn-confiance-questions-recherche__inner">
    {%- if section.settings.titre != blank -%}<h2>{{ section.settings.titre | escape }}</h2>{%- endif -%}
    <label class="nn-confiance-questions-recherche__champ"><span class="nn-confiance-questions-recherche__loupe" aria-hidden="true"></span><input type="search" placeholder="{{ section.settings.placeholder | escape }}" aria-label="{{ section.settings.placeholder | escape }}" data-nn-recherche></label>
    <div class="nn-confiance-questions-recherche__liste">
      {%- for block in section.blocks -%}
      <details class="nn-confiance-questions-recherche__item" {{ block.shopify_attributes }}><summary>{{ block.settings.question | escape }}</summary><div>{{ block.settings.reponse }}</div></details>
      {%- endfor -%}
    </div>
    <p class="nn-confiance-questions-recherche__vide" hidden data-nn-vide>{{ section.settings.texte_vide | escape }}{%- if section.settings.lien_contact != blank -%} <a href="{{ section.settings.lien_contact }}">{{ section.settings.texte_contact | escape }}</a>{%- endif -%}</p>
  </div>
</section>
{% schema %}
{"name":"Questions avec recherche","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Un doute ? Cherche ici"},
{"type":"text","id":"placeholder","label":"Texte du champ","default":"Ex. : délai, remboursement, paiement…"},
{"type":"text","id":"texte_vide","label":"Texte si aucun résultat","default":"Pas de réponse pour l'instant."},
{"type":"text","id":"texte_contact","label":"Texte du lien contact","default":"Pose-nous la question"},
{"type":"url","id":"lien_contact","label":"Lien contact"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#F7F7F5"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#1F1F1F"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#0E9F6E"}],
"blocks":[{"type":"question","name":"Question","settings":[
{"type":"text","id":"question","label":"Question","default":"Quand vais-je recevoir ma commande ?"},
{"type":"richtext","id":"reponse","label":"Réponse","default":"<p>Indique ici tes délais de préparation et de livraison.</p>"}]}],
"max_blocks":20,
"presets":[{"name":"Questions rassurantes avec recherche","blocks":[{"type":"question"},{"type":"question","settings":{"question":"Le paiement est-il sécurisé ?","reponse":"<p>Explique ici comment les paiements sont protégés.</p>"}},{"type":"question","settings":{"question":"Comment être remboursé ?","reponse":"<p>Décris ici ta procédure de retour et de remboursement.</p>"}}]}]}
{% endschema %}

{% stylesheet %}
/* FAQ filtrable */
.nn-confiance-questions-recherche{background:var(--nn-fond);color:var(--nn-texte);padding:40px 16px}
.nn-confiance-questions-recherche__inner{max-width:720px;margin:0 auto}
.nn-confiance-questions-recherche h2{margin:0 0 16px;font-size:clamp(24px,4.5vw,36px)}
.nn-confiance-questions-recherche__champ{display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:14px;background:#fff;border:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);transition:border-color .2s,box-shadow .2s}
.nn-confiance-questions-recherche__champ:focus-within{border-color:var(--nn-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--nn-accent) 18%,transparent)}
.nn-confiance-questions-recherche__loupe{width:14px;height:14px;border:2px solid currentColor;border-radius:50%;position:relative;opacity:.5;flex:0 0 auto}
.nn-confiance-questions-recherche__loupe::after{content:"";position:absolute;width:2px;height:7px;background:currentColor;right:-4px;bottom:-6px;transform:rotate(-45deg)}
.nn-confiance-questions-recherche input{flex:1;border:0;outline:0;background:none;padding:14px 0;font:inherit;color:inherit;min-width:0}
.nn-confiance-questions-recherche__liste{margin-top:14px;display:grid;gap:8px}
.nn-confiance-questions-recherche__item{background:#fff;border-radius:12px;padding:0 16px;animation:nn-confiance-questions-recherche-apparait .3s ease}
.nn-confiance-questions-recherche__item[hidden]{display:none}
.nn-confiance-questions-recherche__item summary{cursor:pointer;padding:14px 0;font-weight:700}
.nn-confiance-questions-recherche__item div{padding:0 0 14px;line-height:1.55}
.nn-confiance-questions-recherche mark{background:color-mix(in srgb,var(--nn-accent) 25%,transparent);color:inherit;border-radius:3px}
.nn-confiance-questions-recherche__vide{margin-top:14px;opacity:.75}
.nn-confiance-questions-recherche__vide a{color:var(--nn-accent);font-weight:700}
@keyframes nn-confiance-questions-recherche-apparait{from{opacity:0}}
@media (prefers-reduced-motion: reduce){.nn-confiance-questions-recherche__item{animation:none}.nn-confiance-questions-recherche__champ{transition:none}}
{% endstylesheet %}

{% javascript %}
/* Filtre instantané des questions */
(function(){
  document.querySelectorAll('.nn-confiance-questions-recherche').forEach(function(section){
    var champ = section.querySelector('[data-nn-recherche]');
    var vide = section.querySelector('[data-nn-vide]');
    var items = Array.prototype.slice.call(section.querySelectorAll('.nn-confiance-questions-recherche__item'));
    if(!champ) return;
    // normalise : minuscules et sans accents
    function normalise(t){ return (t || '').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g,''); }
    champ.addEventListener('input', function(){
      var terme = normalise(champ.value.trim());
      var visibles = 0;
      items.forEach(function(item){
        var ok = !terme || normalise(item.textContent).indexOf(terme) !== -1;
        item.hidden = !ok;
        if(ok) visibles++;
        // ouvre automatiquement les réponses trouvées
        item.open = !!terme && ok;
      });
      if(vide) vide.hidden = visibles !== 0;
    });
  });
})();
{% endjavascript %}