FAQ idées reçues vs réalité

{%- comment -%} NAHNAH AI · FAQ idées reçues vs réalité {%- endcomment -%}
<section class="nn-faq-idees-recues" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-mythe: {{ section.settings.couleur_mythe }}; --nn-realite: {{ section.settings.couleur_realite }}; --nn-texte: {{ section.settings.couleur_texte }};">
  {%- if section.settings.titre != blank -%}<h2>{{ section.settings.titre | escape }}</h2>{%- endif -%}
  <div class="nn-faq-idees-recues__liste">
    {%- for bloc in section.blocks -%}
      <article class="nn-faq-idees-recues__carte" {{ bloc.shopify_attributes }}>
        <p class="nn-faq-idees-recues__etiquette nn-faq-idees-recues__etiquette--mythe">{{ section.settings.label_mythe | escape }}</p>
        <h3>{{ bloc.settings.mythe | escape }}</h3>
        <button type="button" class="nn-faq-idees-recues__bouton" aria-expanded="false" aria-controls="nn-realite-{{ bloc.id }}">{{ section.settings.label_bouton | escape }}</button>
        <div class="nn-faq-idees-recues__realite" id="nn-realite-{{ bloc.id }}" hidden>
          <p class="nn-faq-idees-recues__etiquette nn-faq-idees-recues__etiquette--realite">{{ section.settings.label_realite | escape }}</p>
          {{ bloc.settings.realite }}
        </div>
      </article>
    {%- endfor -%}
  </div>
</section>
{% schema %}
{"name":"FAQ idées reçues","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Idées reçues : on démêle le vrai du faux"},
{"type":"text","id":"label_mythe","label":"Étiquette idée reçue","default":"Idée reçue"},
{"type":"text","id":"label_realite","label":"Étiquette réalité","default":"En réalité"},
{"type":"text","id":"label_bouton","label":"Texte du bouton","default":"Voir la réalité"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FAFAF9"},
{"type":"color","id":"couleur_mythe","label":"Couleur idée reçue","default":"#DC2626"},
{"type":"color","id":"couleur_realite","label":"Couleur réalité","default":"#059669"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#1C1917"}],
"blocks":[{"type":"idee","name":"Idée reçue","settings":[{"type":"text","id":"mythe","label":"Idée reçue","default":"« Les produits de qualité coûtent forcément cher. »"},{"type":"richtext","id":"realite","label":"Réalité","default":"<p>Explique ici pourquoi ton offre prouve le contraire.</p>"}]}],
"presets":[{"name":"FAQ idées reçues vs réalité","blocks":[{"type":"idee"},{"type":"idee","settings":{"mythe":"« La livraison prend des semaines. »"}},{"type":"idee","settings":{"mythe":"« Impossible de retourner un article. »"}}]}]}
{% endschema %}

{% stylesheet %}
/* Cartes qui basculent de l'idée reçue (rouge) à la réalité (verte) */
.nn-faq-idees-recues{background:var(--nn-fond);color:var(--nn-texte);padding:56px 16px;font-family:system-ui,sans-serif}
.nn-faq-idees-recues h2{text-align:center;margin:0 0 32px;font-size:clamp(26px,4vw,40px)}
.nn-faq-idees-recues__liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;max-width:1080px;margin:0 auto}
.nn-faq-idees-recues__carte{background:#fff;border-radius:18px;padding:24px;border-top:5px solid var(--nn-mythe);box-shadow:0 6px 20px rgba(0,0,0,.05);transition:border-color .3s}
.nn-faq-idees-recues__carte.est-revele{border-top-color:var(--nn-realite)}
.nn-faq-idees-recues__carte h3{margin:6px 0 16px;font-size:19px;line-height:1.35;transition:opacity .3s}
.nn-faq-idees-recues__carte.est-revele h3{text-decoration:line-through;opacity:.5}
.nn-faq-idees-recues__etiquette{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.nn-faq-idees-recues__etiquette--mythe{color:var(--nn-mythe)}
.nn-faq-idees-recues__etiquette--realite{color:var(--nn-realite)}
.nn-faq-idees-recues__bouton{border:0;border-radius:999px;padding:10px 18px;background:var(--nn-texte);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.nn-faq-idees-recues__bouton:focus-visible{outline:2px solid var(--nn-realite);outline-offset:3px}
.nn-faq-idees-recues__realite{margin-top:16px;line-height:1.6;animation:nn-idees-apparait .35s ease}
@keyframes nn-idees-apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.nn-faq-idees-recues__realite{animation:none}.nn-faq-idees-recues__carte,.nn-faq-idees-recues__carte h3{transition:none}}
{% endstylesheet %}

{% javascript %}
/* Bascule idée reçue / réalité avec aria-expanded */
(function () {
  document.querySelectorAll('.nn-faq-idees-recues__bouton').forEach(function (bouton) {
    var texteInitial = bouton.textContent;
    bouton.addEventListener('click', function () {
      var carte = bouton.closest('.nn-faq-idees-recues__carte');
      var zone = document.getElementById(bouton.getAttribute('aria-controls'));
      var ouvert = bouton.getAttribute('aria-expanded') === 'true';
      // Inverse l'état et met à jour l'affichage
      bouton.setAttribute('aria-expanded', String(!ouvert));
      zone.hidden = ouvert;
      carte.classList.toggle('est-revele', !ouvert);
      bouton.textContent = ouvert ? texteInitial : '↺';
    });
  });
})();
{% endjavascript %}