Compte à rebours en verre flottant

{%- comment -%} NAHNAH AI · Compte à rebours en verre flottant (masqué sans vraie date) {%- endcomment -%}
<section class="nn-rebours-verre-flottant" data-fin="{{ section.settings.date | escape }}" style="--nn-a: {{ section.settings.couleur_a }}; --nn-b: {{ section.settings.couleur_b }}; --nn-texte: {{ section.settings.couleur_texte }};">
  {%- if section.settings.titre != blank -%}<h2>{{ section.settings.titre | escape }}</h2>{%- endif -%}
  <div class="nn-rebours-verre-flottant__cartes" role="timer">
    {%- assign noms = 'Jours,Heures,Minutes,Secondes' | split: ',' -%}
    {%- for nom in noms -%}<div class="nn-rebours-verre-flottant__carte" style="animation-delay: -{{ forloop.index }}s"><strong data-u="{{ forloop.index0 }}">00</strong><span>{{ nom }}</span></div>{%- endfor -%}
  </div>
</section>
{% schema %}
{"name":"Rebours verre","settings":[
{"type":"text","id":"date","label":"Date de fin réelle (AAAA-MM-JJTHH:MM)","info":"Laisse vide = section masquée."},
{"type":"text","id":"titre","label":"Titre","default":"Ouverture des précommandes"},
{"type":"color","id":"couleur_a","label":"Dégradé 1","default":"#FF6CAB"},
{"type":"color","id":"couleur_b","label":"Dégradé 2","default":"#7366FF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#FFFFFF"}],
"presets":[{"name":"Compte à rebours en verre flottant"}]}
{% endschema %}

{% stylesheet %}
/* Dégradé qui bouge derrière des cartes en verre */
.nn-rebours-verre-flottant{background:linear-gradient(120deg,var(--nn-a),var(--nn-b),var(--nn-a));background-size:200% 200%;animation:nn-rebours-verre-flottant-fond 10s ease infinite;color:var(--nn-texte);padding:50px 16px;text-align:center;font-family:system-ui,sans-serif}
.nn-rebours-verre-flottant h2{margin:0 0 24px;font-size:clamp(24px,5vw,40px)}
.nn-rebours-verre-flottant__cartes{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.nn-rebours-verre-flottant__carte{display:flex;flex-direction:column;gap:4px;min-width:90px;padding:18px 14px;border-radius:20px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.15);animation:nn-rebours-verre-flottant-flotte 4s ease-in-out infinite}
.nn-rebours-verre-flottant__carte strong{font:800 clamp(30px,7vw,52px)/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.nn-rebours-verre-flottant__carte span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.85}
@keyframes nn-rebours-verre-flottant-fond{50%{background-position:100% 100%}}
@keyframes nn-rebours-verre-flottant-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){.nn-rebours-verre-flottant,.nn-rebours-verre-flottant__carte{animation:none}}
{% endstylesheet %}

{% javascript %}
// Met à jour les cartes chaque seconde
document.querySelectorAll('.nn-rebours-verre-flottant').forEach(function (bloc) {
  var fin = new Date(bloc.getAttribute('data-fin')).getTime();
  if (isNaN(fin)) return;
  var cases = bloc.querySelectorAll('[data-u]');
  function maj() {
    var r = Math.max(0, fin - Date.now());
    var v = [Math.floor(r / 864e5), Math.floor(r / 36e5) % 24, Math.floor(r / 6e4) % 60, Math.floor(r / 1e3) % 60];
    cases.forEach(function (c, i) { c.textContent = String(v[i]).padStart(2, '0'); });
  }
  setInterval(maj, 1000);
  maj();
});
{% endjavascript %}