Barre newsletter à mi-page

{%- comment -%} NAHNAH AI · Barre newsletter à mi-page (formulaire client Shopify) {%- endcomment -%}
<div class="nn-popup-mi-page-newsletter" hidden style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  <p>{{ section.settings.texte | escape }}</p>
  {%- form 'customer', class: 'nn-popup-mi-page-newsletter__formulaire' -%}
    <input type="hidden" name="contact[tags]" value="newsletter">
    <input type="email" name="contact[email]" placeholder="Ton e-mail" required aria-label="E-mail">
    <button type="submit">{{ section.settings.bouton | escape }}</button>
  {%- endform -%}
  <button type="button" class="nn-popup-mi-page-newsletter__fermer" aria-label="Fermer">×</button>
</div>
{% schema %}
{"name":"Newsletter mi-page","settings":[
{"type":"text","id":"texte","label":"Texte","default":"Tu aimes ce que tu lis ? Reçois nos nouveautés."},
{"type":"text","id":"bouton","label":"Bouton","default":"Je m'inscris"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#1E1B4B"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#FFFFFF"},
{"type":"color","id":"couleur_accent","label":"Bouton","default":"#FACC15"}],
"presets":[{"name":"Barre newsletter à mi-page"}]}
{% endschema %}

{% stylesheet %}
/* Barre fixe en bas, entrée en glissant */
.nn-popup-mi-page-newsletter{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;padding:14px 44px 14px 16px;border-radius:16px;background:var(--nn-fond);color:var(--nn-texte);box-shadow:0 14px 34px rgba(0,0,0,.3);animation:nn-popup-mi-page-newsletter-monte .5s ease}
.nn-popup-mi-page-newsletter[hidden]{display:none}
.nn-popup-mi-page-newsletter p{margin:0;font-weight:600;text-align:center}
.nn-popup-mi-page-newsletter__formulaire{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 260px;max-width:420px}
.nn-popup-mi-page-newsletter input[type=email]{flex:1 1 160px;min-width:0;padding:11px 14px;border-radius:999px;border:0}
.nn-popup-mi-page-newsletter button[type=submit]{padding:11px 18px;border:0;border-radius:999px;background:var(--nn-accent);color:#1a1a1a;font-weight:800;cursor:pointer}
.nn-popup-mi-page-newsletter__fermer{position:absolute;top:6px;right:10px;border:0;background:transparent;color:inherit;font-size:22px;cursor:pointer}
@keyframes nn-popup-mi-page-newsletter-monte{from{transform:translateY(120%)}}
@media (prefers-reduced-motion: reduce){.nn-popup-mi-page-newsletter{animation:none}}
{% endstylesheet %}

{% javascript %}
// Montre la barre à 50 % de lecture de la page, une seule fois par visite
document.querySelectorAll('.nn-popup-mi-page-newsletter').forEach(function (barre) {
  var cle = 'nn-popup-mi-page-newsletter-vu';
  try { if (sessionStorage.getItem(cle)) { return; } } catch (e) {}
  function verifier() {
    var hauteur = document.documentElement.scrollHeight - window.innerHeight;
    if (hauteur > 0 && window.scrollY / hauteur >= 0.5) {
      barre.hidden = false;
      try { sessionStorage.setItem(cle, '1'); } catch (e) {}
      window.removeEventListener('scroll', verifier);
    }
  }
  window.addEventListener('scroll', verifier, { passive: true });
  barre.querySelector('.nn-popup-mi-page-newsletter__fermer').addEventListener('click', function () { barre.hidden = true; });
});
{% endjavascript %}