Rendez-vous annuel récurrent

{%- comment -%} NAHNAH AI · Rendez-vous annuel récurrent {%- endcomment -%}
<section class="nn-compte-a-rebours-anniversaire-annuel" data-jour="{{ section.settings.jour }}" data-mois="{{ section.settings.mois }}" data-jourj="{{ section.settings.texte_jour_j | escape }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};" hidden>
  <p class="nn-compte-a-rebours-anniversaire-annuel__sur">{{ section.settings.nom | escape }}</p>
  <p class="nn-compte-a-rebours-anniversaire-annuel__jours" aria-live="polite"><b>0</b><span>{{ section.settings.texte_jours | escape }}</span></p>
  <div class="nn-compte-a-rebours-anniversaire-annuel__annee" aria-hidden="true"><i></i></div>
  <p class="nn-compte-a-rebours-anniversaire-annuel__date"></p>
</section>
{% schema %}
{"name":"Rendez-vous annuel","settings":[
{"type":"text","id":"nom","label":"Nom du rendez-vous","default":"Anniversaire de la boutique"},
{"type":"range","id":"jour","label":"Jour","min":1,"max":31,"step":1,"default":14},
{"type":"range","id":"mois","label":"Mois (1 = janvier)","min":1,"max":12,"step":1,"default":2},
{"type":"text","id":"texte_jours","label":"Texte après le nombre","default":"jours avant le grand jour"},
{"type":"text","id":"texte_jour_j","label":"Message le jour J","default":"C'est aujourd'hui ! Merci d'être là."},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FDF4FF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#3B0764"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#C026D3"}],
"presets":[{"name":"Rendez-vous annuel récurrent"}]}
{% endschema %}

{% stylesheet %}
/* Grand nombre de jours et barre de l'année écoulée */
.nn-compte-a-rebours-anniversaire-annuel{margin:24px 16px;padding:32px 20px;border-radius:20px;background:var(--nn-fond);color:var(--nn-texte);text-align:center}
.nn-compte-a-rebours-anniversaire-annuel__sur{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--nn-accent)}
.nn-compte-a-rebours-anniversaire-annuel__jours{margin:8px 0 18px;display:flex;flex-direction:column;align-items:center}
.nn-compte-a-rebours-anniversaire-annuel__jours b{font-size:clamp(56px,16vw,120px);line-height:1;font-variant-numeric:tabular-nums;color:var(--nn-accent)}
.nn-compte-a-rebours-anniversaire-annuel__annee{height:8px;max-width:420px;margin:0 auto;border-radius:999px;background:color-mix(in srgb,var(--nn-accent) 15%,transparent);overflow:hidden}
.nn-compte-a-rebours-anniversaire-annuel__annee i{display:block;height:100%;width:0;background:var(--nn-accent);border-radius:inherit;transition:width 1.2s ease}
.nn-compte-a-rebours-anniversaire-annuel__date{margin:10px 0 0;font-size:13px;opacity:.7}
.nn-compte-a-rebours-anniversaire-annuel.est-jour-j b{animation:nn-compte-a-rebours-anniversaire-annuel-fete 1s ease-in-out infinite alternate}
@keyframes nn-compte-a-rebours-anniversaire-annuel-fete{to{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){.nn-compte-a-rebours-anniversaire-annuel__annee i{transition:none}.nn-compte-a-rebours-anniversaire-annuel.est-jour-j b{animation:none}}
{% endstylesheet %}

{% javascript %}
// Calcule la prochaine occurrence annuelle et la part de l'année déjà écoulée
(function () {
  document.querySelectorAll('.nn-compte-a-rebours-anniversaire-annuel').forEach(function (bloc) {
    var jour = parseInt(bloc.getAttribute('data-jour'), 10), mois = parseInt(bloc.getAttribute('data-mois'), 10) - 1;
    if (isNaN(jour) || isNaN(mois)) { return; }
    var nombre = bloc.querySelector('b'), texte = bloc.querySelector('.nn-compte-a-rebours-anniversaire-annuel__jours span');
    function maj() {
      var auj = new Date(); auj.setHours(0, 0, 0, 0);
      var cible = new Date(auj.getFullYear(), mois, jour);
      if (cible < auj) { cible = new Date(auj.getFullYear() + 1, mois, jour); }
      var precedente = new Date(cible.getFullYear() - 1, mois, jour);
      var j = Math.round((cible - auj) / 86400000);
      if (j === 0) { bloc.classList.add('est-jour-j'); nombre.textContent = '🎉'; texte.textContent = bloc.getAttribute('data-jourj'); }
      else { bloc.classList.remove('est-jour-j'); nombre.textContent = j; }
      bloc.querySelector('i').style.width = (j === 0 ? 100 : ((auj - precedente) / (cible - precedente)) * 100) + '%';
      bloc.querySelector('.nn-compte-a-rebours-anniversaire-annuel__date').textContent = cible.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
      bloc.hidden = false;
    }
    maj();
    setInterval(maj, 600000);
  });
})();
{% endjavascript %}