Pop-up offre chronométrée honnête

{%- comment -%} NAHNAH AI · Pop-up offre chronométrée honnête {%- endcomment -%}
<div class="nn-popups-offre-chrono" data-fin="{{ section.settings.date_fin | escape }}" data-delai="{{ section.settings.delai }}" hidden
  style="--nn-fond:{{ section.settings.fond }};--nn-texte:{{ section.settings.texte_couleur }};--nn-accent:{{ section.settings.accent }};">
  <div class="nn-popups-offre-chrono__voile" data-fermer></div>
  <div class="nn-popups-offre-chrono__boite" role="dialog" aria-modal="true" aria-labelledby="nn-chrono-titre-{{ section.id }}" tabindex="-1">
    <button type="button" class="nn-popups-offre-chrono__x" data-fermer aria-label="Fermer">×</button>
    <p class="nn-popups-offre-chrono__badge">{{ section.settings.badge }}</p>
    <h2 id="nn-chrono-titre-{{ section.id }}" class="nn-popups-offre-chrono__titre">{{ section.settings.titre }}</h2>
    <p class="nn-popups-offre-chrono__texte">{{ section.settings.texte }}</p>
    <div class="nn-popups-offre-chrono__compteur" role="timer" aria-live="off">
      <div><span data-u="j">00</span><small>jours</small></div>
      <div><span data-u="h">00</span><small>heures</small></div>
      <div><span data-u="m">00</span><small>min</small></div>
      <div><span data-u="s">00</span><small>sec</small></div>
    </div>
    {%- if section.settings.code != blank -%}<button type="button" class="nn-popups-offre-chrono__code" data-code="{{ section.settings.code | escape }}">{{ section.settings.code }} · copier</button>{%- endif -%}
    <a class="nn-popups-offre-chrono__cta" href="{{ section.settings.lien | default: routes.all_products_collection_url }}">{{ section.settings.cta }}</a>
    <button type="button" class="nn-popups-offre-chrono__non" data-fermer>{{ section.settings.libelle_non }}</button>
  </div>
</div>
{% schema %}
{"name":"Offre chronométrée","settings":[
{"type":"text","id":"date_fin","label":"Fin de l'offre (AAAA-MM-JJTHH:MM)","default":"2026-12-31T23:59","info":"Le pop-up ne s'affiche plus après cette date."},
{"type":"text","id":"badge","label":"Badge","default":"Offre limitée"},
{"type":"text","id":"titre","label":"Titre","default":"-20 % sur toute la boutique"},
{"type":"text","id":"texte","label":"Texte","default":"L'offre se termine à la fin du compte à rebours. Pas de prolongation."},
{"type":"text","id":"code","label":"Code promo","default":"CHRONO20"},
{"type":"text","id":"cta","label":"Bouton","default":"J'en profite"},
{"type":"url","id":"lien","label":"Lien du bouton"},
{"type":"text","id":"libelle_non","label":"Lien de refus","default":"Non merci"},
{"type":"range","id":"delai","label":"Délai d'apparition (s)","min":0,"max":30,"step":1,"default":5},
{"type":"color","id":"fond","label":"Fond","default":"#0f172a"},
{"type":"color","id":"texte_couleur","label":"Texte","default":"#f8fafc"},
{"type":"color","id":"accent","label":"Accent","default":"#f97316"}],
"presets":[{"name":"Offre chronométrée"}]}
{% endschema %}

{% stylesheet %}
.nn-popups-offre-chrono{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px}
.nn-popups-offre-chrono[hidden]{display:none}
.nn-popups-offre-chrono__voile{position:absolute;inset:0;background:rgba(2,6,23,.6);backdrop-filter:blur(4px)}
.nn-popups-offre-chrono__boite{position:relative;width:100%;max-width:440px;padding:32px 26px 22px;border-radius:24px;background:var(--nn-fond);color:var(--nn-texte);text-align:center;animation:nn-chrono-in .5s cubic-bezier(.2,1.2,.4,1)}
.nn-popups-offre-chrono__x{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:inherit;font-size:24px;cursor:pointer}
.nn-popups-offre-chrono__badge{display:inline-block;margin:0;padding:4px 12px;border-radius:99px;background:var(--nn-accent);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.nn-popups-offre-chrono__titre{margin:14px 0 6px;font-size:28px;line-height:1.15}
.nn-popups-offre-chrono__texte{margin:0 0 18px;opacity:.75;font-size:14px}
.nn-popups-offre-chrono__compteur{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.nn-popups-offre-chrono__compteur div{padding:10px 0;border-radius:14px;background:rgba(255,255,255,.08)}
.nn-popups-offre-chrono__compteur span{display:block;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.nn-popups-offre-chrono__compteur small{font-size:11px;opacity:.7}
.nn-popups-offre-chrono__code{display:block;width:100%;margin-bottom:10px;padding:10px;border:1.5px dashed var(--nn-accent);border-radius:12px;background:none;color:inherit;font-weight:700;cursor:pointer}
.nn-popups-offre-chrono__cta{display:block;padding:14px;border-radius:14px;background:var(--nn-accent);color:#fff;font-weight:700;text-decoration:none}
.nn-popups-offre-chrono__non{margin-top:10px;border:0;background:none;color:inherit;opacity:.7;text-decoration:underline;cursor:pointer;padding:8px}
.nn-popups-offre-chrono button:focus-visible,.nn-popups-offre-chrono a:focus-visible{outline:3px solid var(--nn-accent);outline-offset:2px}
@keyframes nn-chrono-in{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.nn-popups-offre-chrono__boite{animation:none}}
{% endstylesheet %}

{% javascript %}
// Offre chronométrée NAHNAH : vrai compte à rebours, focus piégé, Échap pour fermer
(function(){
  var p=document.querySelector('.nn-popups-offre-chrono');if(!p)return;
  var fin=new Date(p.dataset.fin).getTime();
  // Offre terminée ou date invalide : on n'affiche rien (pas de faux compteur)
  if(!fin||fin<=Date.now())return;
  try{if(sessionStorage.getItem('nn-chrono-vu'))return;}catch(e){}
  var boite=p.querySelector('[role="dialog"]'),avant=null,minuteur;
  function deux(n){return String(n).padStart(2,'0');}
  function tic(){
    var r=Math.max(0,fin-Date.now()),s=Math.floor(r/1000);
    p.querySelector('[data-u="j"]').textContent=deux(Math.floor(s/86400));
    p.querySelector('[data-u="h"]').textContent=deux(Math.floor(s%86400/3600));
    p.querySelector('[data-u="m"]').textContent=deux(Math.floor(s%3600/60));
    p.querySelector('[data-u="s"]').textContent=deux(s%60);
    if(r===0)fermer();
  }
  function focusables(){return boite.querySelectorAll('a[href],button:not([disabled])');}
  function ouvrir(){avant=document.activeElement;p.hidden=false;tic();minuteur=setInterval(tic,1000);boite.focus();}
  function fermer(){p.hidden=true;clearInterval(minuteur);try{sessionStorage.setItem('nn-chrono-vu',1);}catch(e){}if(avant&&avant.focus)avant.focus();}
  p.addEventListener('click',function(e){
    if(e.target.closest('[data-fermer]'))fermer();
    var c=e.target.closest('[data-code]');if(c){navigator.clipboard&&navigator.clipboard.writeText(c.dataset.code);c.textContent=c.dataset.code+' · copié ✓';}
  });
  // Clavier : Échap ferme, Tab reste dans la fenêtre
  p.addEventListener('keydown',function(e){
    if(e.key==='Escape')fermer();
    if(e.key==='Tab'){var f=focusables(),a=f[0],z=f[f.length-1];if(e.shiftKey&&document.activeElement===a){e.preventDefault();z.focus();}else if(!e.shiftKey&&document.activeElement===z){e.preventDefault();a.focus();}}
  });
  setTimeout(ouvrir,(+p.dataset.delai||0)*1000);
})();
{% endjavascript %}