Lancement dans plusieurs fuseaux

{%- comment -%} NAHNAH AI · Lancement dans plusieurs fuseaux {%- endcomment -%}
<section class="nn-compte-a-rebours-fuseaux-horaires" data-date="{{ section.settings.date_lancement | escape }}" data-fuseau="{{ section.settings.fuseau_reference | escape }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};" hidden>
  <h2 class="nn-compte-a-rebours-fuseaux-horaires__titre">{{ section.settings.titre | escape }}</h2>
  <p class="nn-compte-a-rebours-fuseaux-horaires__temps" aria-live="polite">—</p>
  <ul class="nn-compte-a-rebours-fuseaux-horaires__liste">
    {%- for block in section.blocks -%}
      <li class="nn-compte-a-rebours-fuseaux-horaires__ville" data-fuseau="{{ block.settings.fuseau | escape }}" {{ block.shopify_attributes }}>
        <span>{{ block.settings.ville | escape }}</span><b>--:--</b><small></small>
      </li>
    {%- endfor -%}
  </ul>
</section>
{% schema %}
{"name":"Lancement multi-fuseaux","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Le lancement commence dans"},
{"type":"text","id":"date_lancement","label":"Date du lancement (AAAA-MM-JJ HH:MM)"},
{"type":"text","id":"fuseau_reference","label":"Fuseau de cette date (nom IANA)","default":"Europe/Paris","info":"Exemples : Europe/Paris, America/Montreal, Africa/Dakar"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#0F172A"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#F8FAFC"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#38BDF8"}],
"blocks":[{"type":"ville","name":"Ville","settings":[
{"type":"text","id":"ville","label":"Nom affiché","default":"Paris"},
{"type":"text","id":"fuseau","label":"Fuseau (nom IANA)","default":"Europe/Paris"}]}],
"presets":[{"name":"Lancement dans plusieurs fuseaux","blocks":[
{"type":"ville","settings":{"ville":"Paris","fuseau":"Europe/Paris"}},
{"type":"ville","settings":{"ville":"Montréal","fuseau":"America/Montreal"}},
{"type":"ville","settings":{"ville":"Dakar","fuseau":"Africa/Dakar"}},
{"type":"ville","settings":{"ville":"Dubaï","fuseau":"Asia/Dubai"}}]}]}
{% endschema %}

{% stylesheet %}
/* Carte sombre avec liste de villes */
.nn-compte-a-rebours-fuseaux-horaires{margin:24px 16px;padding:28px 20px;border-radius:20px;background:var(--nn-fond);color:var(--nn-texte);text-align:center}
.nn-compte-a-rebours-fuseaux-horaires__titre{margin:0 0 8px;font-size:18px;font-weight:500;opacity:.8}
.nn-compte-a-rebours-fuseaux-horaires__temps{margin:0 0 24px;font-size:clamp(28px,7vw,48px);font-weight:700;font-variant-numeric:tabular-nums;color:var(--nn-accent)}
.nn-compte-a-rebours-fuseaux-horaires__liste{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;max-width:720px}
.nn-compte-a-rebours-fuseaux-horaires__ville{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--nn-texte) 8%,transparent);transition:transform .3s}
.nn-compte-a-rebours-fuseaux-horaires__ville:hover{transform:translateY(-3px)}
.nn-compte-a-rebours-fuseaux-horaires__ville b{font-size:22px;font-variant-numeric:tabular-nums}
.nn-compte-a-rebours-fuseaux-horaires__ville small{opacity:.6;font-size:12px}
@media (prefers-reduced-motion: reduce){.nn-compte-a-rebours-fuseaux-horaires__ville{transition:none}.nn-compte-a-rebours-fuseaux-horaires__ville:hover{transform:none}}
{% endstylesheet %}

{% javascript %}
// Convertit la date saisie (heure locale du fuseau de référence) en instant réel, puis l'affiche par ville
(function () {
  // Décalage d'un fuseau IANA à un instant donné, en minutes
  function decalage(fuseau, instant) {
    try {
      var p = new Intl.DateTimeFormat('en-US', { timeZone: fuseau, hourCycle: 'h23', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).formatToParts(instant);
      var v = {}; p.forEach(function (x) { v[x.type] = x.value; });
      return (Date.UTC(+v.year, v.month - 1, +v.day, +v.hour, +v.minute, +v.second) - instant) / 60000;
    } catch (e) { return null; }
  }
  document.querySelectorAll('.nn-compte-a-rebours-fuseaux-horaires').forEach(function (bloc) {
    var m = (bloc.getAttribute('data-date') || '').match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})/);
    if (!m) { return; }
    var brut = Date.UTC(+m[1], m[2] - 1, +m[3], +m[4], +m[5]);
    var d = decalage(bloc.getAttribute('data-fuseau') || 'UTC', new Date(brut));
    if (d === null) { return; }
    var cible = brut - d * 60000;
    bloc.querySelectorAll('.nn-compte-a-rebours-fuseaux-horaires__ville').forEach(function (li) {
      try {
        var f = li.getAttribute('data-fuseau');
        li.querySelector('b').textContent = new Intl.DateTimeFormat('fr-FR', { timeZone: f, hour: '2-digit', minute: '2-digit' }).format(cible);
        li.querySelector('small').textContent = new Intl.DateTimeFormat('fr-FR', { timeZone: f, weekday: 'long', day: 'numeric', month: 'long' }).format(cible);
      } catch (e) { li.hidden = true; }
    });
    var zone = bloc.querySelector('.nn-compte-a-rebours-fuseaux-horaires__temps');
    function deux(n) { return (n < 10 ? '0' : '') + n; }
    function maj() {
      var s = Math.floor((cible - Date.now()) / 1000);
      if (s <= 0) { zone.textContent = 'C\'est parti !'; clearInterval(t); bloc.hidden = false; return; }
      zone.textContent = Math.floor(s / 86400) + ' j ' + deux(Math.floor(s / 3600) % 24) + ' h ' + deux(Math.floor(s / 60) % 60) + ' min ' + deux(s % 60) + ' s';
      bloc.hidden = false;
    }
    var t = setInterval(maj, 1000);
    maj();
  });
})();
{% endjavascript %}