Compte à rebours en phrase

{%- comment -%} NAHNAH AI · Compte à rebours en phrase (vraie date, affiche 0 sans date) {%- endcomment -%}
<div class="nn-rebours-phrase-naturelle" data-fin="{{ section.settings.date_fin | escape }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  <p><span class="nn-rebours-phrase-naturelle__debut">{{ section.settings.debut | escape }}</span> <span class="nn-rebours-phrase-naturelle__temps"><b>0</b> minute</span> {{ section.settings.fin | escape }}</p>
</div>
{% schema %}
{"name":"Compte à rebours phrase","settings":[
{"type":"text","id":"date_fin","label":"Date de fin réelle (AAAA-MM-JJ HH:MM)"},
{"type":"text","id":"debut","label":"Début de phrase","default":"Encore"},
{"type":"text","id":"fin","label":"Fin de phrase","default":"avant la fin de l'offre."},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FFF8E7"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#2A2116"},
{"type":"color","id":"couleur_accent","label":"Chiffres","default":"#D97706"}],
"presets":[{"name":"Compte à rebours en phrase"}]}
{% endschema %}

{% stylesheet %}
/* Phrase centrée, chiffres en couleur */
.nn-rebours-phrase-naturelle{background:var(--nn-fond);color:var(--nn-texte);padding:24px 16px;text-align:center}
.nn-rebours-phrase-naturelle p{margin:0;font-size:clamp(18px,3.4vw,30px);font-family:Georgia,serif;line-height:1.4}
.nn-rebours-phrase-naturelle b{color:var(--nn-accent);font-family:system-ui,sans-serif;font-variant-numeric:tabular-nums;display:inline-block;animation:nn-rebours-phrase-naturelle-tic .4s ease}
@keyframes nn-rebours-phrase-naturelle-tic{from{transform:translateY(-4px);opacity:.4}}
@media (prefers-reduced-motion: reduce){.nn-rebours-phrase-naturelle b{animation:none}}
{% endstylesheet %}

{% javascript %}
// Écrit le temps restant en phrase ; masque la section si la date est passée ou invalide
document.querySelectorAll('.nn-rebours-phrase-naturelle').forEach(function (bloc) {
  var fin = new Date((bloc.getAttribute('data-fin') || '').replace(' ', 'T'));
  var zone = bloc.querySelector('.nn-rebours-phrase-naturelle__temps');
  if (isNaN(fin.getTime())) { return; }
  function pluriel(n, mot) { return '<b>' + n + '</b> ' + mot + (n > 1 ? 's' : ''); }
  function maj() {
    var reste = fin.getTime() - Date.now();
    if (reste <= 0) { clearInterval(minuteur); return; }
    var j = Math.floor(reste / 86400000);
    var h = Math.floor(reste / 3600000) % 24;
    var m = Math.floor(reste / 60000) % 60;
    var morceaux = [];
    if (j > 0) { morceaux.push(pluriel(j, 'jour')); }
    if (h > 0 || j > 0) { morceaux.push(pluriel(h, 'heure')); }
    morceaux.push(pluriel(m, 'minute'));
    var dernier = morceaux.pop();
    zone.innerHTML = morceaux.length ? morceaux.join(', ') + ' et ' + dernier : dernier;
    bloc.hidden = false;
  }
  var minuteur = setInterval(maj, 30000);
  maj();
});
{% endjavascript %}