Cercles de progression

{%- comment -%} NAHNAH AI · Cercles de progression (bibliothèque Sections & effets) {%- endcomment -%}
{%- if section.settings.date_fin != blank -%}
<nn-rebours-cercles class="nn-rebours-cercles" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};" data-mode="date" data-zone="{{ section.settings.fuseau | escape }}" data-libelles="{{ section.settings.libelles | escape }}" data-fin="{{ section.settings.date_fin | escape }}" data-a-la-fin="{{ section.settings.a_la_fin }}" data-jours-max="{{ section.settings.jours_reference }}"{% if request.design_mode %} data-editeur{% endif %}>
<div class="nn-rebours-cercles__contenu">
  {%- if section.settings.titre != blank -%}<h2 class="nn-rebours-cercles__titre">{{ section.settings.titre }}</h2>{%- endif -%}
  <div data-pendant>{%- assign nn_l = section.settings.libelles | split: ',' -%}
<div class="nn-rebours-cercles__unites" role="timer" aria-live="off" aria-atomic="true">
  <div class="nn-rebours-cercles__bloc" data-bloc-jours>
    <svg class="nn-rebours-cercles__anneau" viewBox="0 0 100 100" aria-hidden="true" focusable="false"><circle class="nn-rebours-cercles__piste" cx="50" cy="50" r="44" pathLength="100"/><circle class="nn-rebours-cercles__arc" cx="50" cy="50" r="44" pathLength="100" data-cercle="j"/></svg><span class="nn-rebours-cercles__valeur"><span class="nn-rebours-cercles__nombre" data-unite="j">--</span>
    <span class="nn-rebours-cercles__libelle">{{ nn_l[0] | strip | escape }}</span></span>
  </div>
  <div class="nn-rebours-cercles__bloc">
    <svg class="nn-rebours-cercles__anneau" viewBox="0 0 100 100" aria-hidden="true" focusable="false"><circle class="nn-rebours-cercles__piste" cx="50" cy="50" r="44" pathLength="100"/><circle class="nn-rebours-cercles__arc" cx="50" cy="50" r="44" pathLength="100" data-cercle="h"/></svg><span class="nn-rebours-cercles__valeur"><span class="nn-rebours-cercles__nombre" data-unite="h">--</span>
    <span class="nn-rebours-cercles__libelle">{{ nn_l[1] | strip | escape }}</span></span>
  </div>
  <div class="nn-rebours-cercles__bloc">
    <svg class="nn-rebours-cercles__anneau" viewBox="0 0 100 100" aria-hidden="true" focusable="false"><circle class="nn-rebours-cercles__piste" cx="50" cy="50" r="44" pathLength="100"/><circle class="nn-rebours-cercles__arc" cx="50" cy="50" r="44" pathLength="100" data-cercle="m"/></svg><span class="nn-rebours-cercles__valeur"><span class="nn-rebours-cercles__nombre" data-unite="m">--</span>
    <span class="nn-rebours-cercles__libelle">{{ nn_l[2] | strip | escape }}</span></span>
  </div>
  <div class="nn-rebours-cercles__bloc">
    <svg class="nn-rebours-cercles__anneau" viewBox="0 0 100 100" aria-hidden="true" focusable="false"><circle class="nn-rebours-cercles__piste" cx="50" cy="50" r="44" pathLength="100"/><circle class="nn-rebours-cercles__arc" cx="50" cy="50" r="44" pathLength="100" data-cercle="s"/></svg><span class="nn-rebours-cercles__valeur"><span class="nn-rebours-cercles__nombre" data-unite="s">--</span>
    <span class="nn-rebours-cercles__libelle">{{ nn_l[3] | strip | escape }}</span></span>
  </div>
</div></div>
  <p class="nn-rebours-cercles__fin" data-apres hidden>{{ section.settings.message_fin }}</p>
</div>
<span class="nn-rebours-cercles__lecteur">Fin : <span data-echeance></span></span>
<span class="nn-rebours-cercles__lecteur" role="status" data-annonce data-texte-fin="{{ section.settings.message_fin | strip_html | escape }}"></span>
<p class="nn-rebours-cercles__alerte" data-alerte hidden>Date illisible : écris-la par exemple 24/12/2026 18:00 (message visible dans l’éditeur seulement).</p>
<p class="nn-rebours-cercles__alerte" data-note-masque hidden>Date passée : la section est masquée pour les visiteurs (ce message n’apparaît que dans l’éditeur).</p>
</nn-rebours-cercles>
{%- elsif request.design_mode -%}
  <p class="nn-rebours-cercles__editeur">Indique la vraie date de fin de ton offre pour afficher le compte à rebours.</p>
{%- endif -%}

{% schema %}
{
  "name": "Rebours cercles",
  "tag": "section",
  "class": "nn-section-rebours-cercles",
  "settings": [
    {
      "type": "inline_richtext",
      "id": "titre",
      "label": "Titre",
      "default": "Plus que quelques jours pour en profiter"
    },
    {
      "type": "range",
      "id": "jours_reference",
      "label": "Jours d’un cercle plein",
      "min": 1,
      "max": 60,
      "step": 1,
      "default": 7,
      "unit": "j",
      "info": "Le cercle des jours est plein à ce nombre de jours restants."
    },
    {
      "type": "header",
      "content": "Fin de l’offre"
    },
    {
      "type": "text",
      "id": "date_fin",
      "label": "Date et heure de fin",
      "placeholder": "24/12/2026 18:00",
      "info": "Vraie date de fin de ton offre, à l’heure du fuseau choisi : 24/12/2026 18:00 ou 2026-12-24 18:00 (sans heure : 23:59). Le compte à rebours ne repart jamais à zéro."
    },
    {
      "type": "select",
      "id": "fuseau",
      "label": "Fuseau horaire des dates",
      "options": [
        {
          "value": "Europe/Paris",
          "label": "France, Belgique, Suisse, Luxembourg (Paris)"
        },
        {
          "value": "Europe/London",
          "label": "Royaume-Uni, Irlande (Londres)"
        },
        {
          "value": "Europe/Lisbon",
          "label": "Portugal (Lisbonne)"
        },
        {
          "value": "America/Toronto",
          "label": "Québec, Ontario (Montréal)"
        },
        {
          "value": "America/New_York",
          "label": "États-Unis, côte Est (New York)"
        },
        {
          "value": "America/Martinique",
          "label": "Martinique"
        },
        {
          "value": "America/Guadeloupe",
          "label": "Guadeloupe"
        },
        {
          "value": "America/Cayenne",
          "label": "Guyane"
        },
        {
          "value": "Indian/Reunion",
          "label": "La Réunion"
        },
        {
          "value": "Indian/Mayotte",
          "label": "Mayotte"
        },
        {
          "value": "Pacific/Noumea",
          "label": "Nouvelle-Calédonie"
        },
        {
          "value": "Pacific/Tahiti",
          "label": "Polynésie française (Tahiti)"
        },
        {
          "value": "Africa/Casablanca",
          "label": "Maroc (Casablanca)"
        },
        {
          "value": "Africa/Algiers",
          "label": "Algérie (Alger)"
        },
        {
          "value": "Africa/Tunis",
          "label": "Tunisie (Tunis)"
        },
        {
          "value": "Africa/Dakar",
          "label": "Sénégal (Dakar)"
        },
        {
          "value": "Africa/Abidjan",
          "label": "Côte d’Ivoire (Abidjan)"
        },
        {
          "value": "Africa/Douala",
          "label": "Cameroun (Douala)"
        },
        {
          "value": "Africa/Kinshasa",
          "label": "RD Congo (Kinshasa)"
        },
        {
          "value": "UTC",
          "label": "Temps universel (UTC)"
        }
      ],
      "default": "Europe/Paris"
    },
    {
      "type": "select",
      "id": "a_la_fin",
      "label": "Une fois la date passée",
      "options": [
        {
          "value": "message",
          "label": "Afficher le message de fin"
        },
        {
          "value": "masquer",
          "label": "Masquer la section"
        }
      ],
      "default": "message"
    },
    {
      "type": "inline_richtext",
      "id": "message_fin",
      "label": "Message de fin",
      "default": "Cette offre est terminée. Merci pour ta visite !"
    },
    {
      "type": "header",
      "content": "Affichage"
    },
    {
      "type": "text",
      "id": "libelles",
      "label": "Libellés des unités",
      "default": "jours, heures, minutes, secondes",
      "info": "Jours, heures, minutes, secondes : séparés par des virgules, dans cet ordre."
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#F5F7FF"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#101A3A"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#3D5AFE"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    }
  ],
  "presets": [
    {
      "name": "Rebours cercles"
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-rebours-cercles {
  display: block;
  padding: var(--nn-mh, 0px) 16px var(--nn-mb, 0px);
  background: var(--nn-fond);
  color: var(--nn-texte);
}
.nn-rebours-cercles[hidden], .nn-rebours-cercles [hidden] { display: none !important; }
.nn-rebours-cercles *, .nn-rebours-cercles *::before, .nn-rebours-cercles *::after { box-sizing: border-box; }
.nn-rebours-cercles :focus-visible { outline: 3px solid var(--nn-accent); outline-offset: 3px; }
.nn-rebours-cercles__editeur { margin: 0; padding: 16px; font-size: 14px; text-align: center; border: 1px dashed currentColor; opacity: 0.7; }
.nn-rebours-cercles { position: relative; }
.nn-rebours-cercles__lecteur { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.nn-rebours-cercles__alerte { max-width: 640px; margin: 12px auto 0; padding: 8px 12px; font-size: 13px; line-height: 1.4; text-align: center; border: 1px dashed currentColor; border-radius: 8px; opacity: 0.85; }
.nn-rebours-cercles__fin { margin: 0; overflow-wrap: anywhere; }
.nn-rebours-cercles [data-unite], .nn-rebours-cercles [data-texte] { font-variant-numeric: tabular-nums; }
.nn-rebours-cercles__contenu { max-width: 900px; margin: 0 auto; text-align: center; }
.nn-rebours-cercles__titre { margin: 0 0 24px; font-size: clamp(20px, 4vw, 30px); }
.nn-rebours-cercles__unites { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 2vw, 20px); }
.nn-rebours-cercles__bloc { position: relative; display: grid; place-items: center; width: clamp(68px, 19vw, 130px); aspect-ratio: 1; }
.nn-rebours-cercles__anneau { position: absolute; inset: 0; width: 100%; height: 100%; }
.nn-rebours-cercles__piste { fill: none; stroke: color-mix(in srgb, var(--nn-texte) 12%, transparent); stroke-width: 7; }
.nn-rebours-cercles__arc { fill: none; stroke: var(--nn-accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100px 100px; stroke-dashoffset: calc((1 - var(--nn-p, 1)) * 100px); transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; transition: stroke-dashoffset 0.6s ease; }
.nn-rebours-cercles__valeur { position: relative; display: grid; justify-items: center; line-height: 1.1; }
.nn-rebours-cercles__nombre { font-size: clamp(20px, 5.5vw, 38px); font-weight: 800; }
.nn-rebours-cercles__libelle { font-size: clamp(9px, 2.4vw, 13px); opacity: 0.75; }
.nn-rebours-cercles__fin { font-size: 18px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .nn-rebours-cercles, .nn-rebours-cercles *, .nn-rebours-cercles *::before, .nn-rebours-cercles *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}

{% javascript %}
if (!customElements.get("nn-rebours-cercles")) {
  customElements.define("nn-rebours-cercles", class extends HTMLElement {
    connectedCallback() {
      if (this.dataset.nnPret) return;
      this.dataset.nnPret = "1";
      var soi = this;
      this.editeur = this.hasAttribute("data-editeur");
      this.zone = this.dataset.zone || "UTC";
      this.unites = {};
      this.dernier = {};
      ["j", "h", "m", "s"].forEach(function (u) { soi.unites[u] = Array.prototype.slice.call(soi.querySelectorAll('[data-unite="' + u + '"]')); });
      this.libelles = String(this.dataset.libelles || "j,h,min,s").split(",").map(function (x) { return x.trim(); });
      this.debut = this.lireDate(this.dataset.debut);
      this.fin = this.calculerFin();
      if (this.querySelector("[data-progres]") && !Number.isFinite(this.debut)) this.fin = NaN;
      this.ecrireEcheance();
      this.brancherCopie();
      this.tic();
    }
    disconnectedCallback() {
      clearTimeout(this.minuterie);
      delete this.dataset.nnPret;
      delete this.dataset.etat;
    }
    // Écart (ms) entre l'heure locale du fuseau et UTC à l'instant t (heure d'été comprise)
    decalage(t) {
      try {
        if (!this.formateur) this.formateur = new Intl.DateTimeFormat("en-US", { timeZone: this.zone, hourCycle: "h23", year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" });
        var p = {};
        this.formateur.formatToParts(new Date(t)).forEach(function (x) { p[x.type] = x.value; });
        return Date.UTC(Number(p.year), Number(p.month) - 1, Number(p.day), Number(p.hour) % 24, Number(p.minute), Number(p.second)) - Math.floor(t / 1000) * 1000;
      } catch (e) { return NaN; }
    }
    // Instant UTC d'une heure « murale » du fuseau choisi
    instant(a, mo, j, h, mi, s) {
      var mur = Date.UTC(a, mo - 1, j, h, mi, s);
      return mur - this.decalage(mur - this.decalage(mur));
    }
    // Date saisie par le marchand : 24/12/2026 18:00, 2026-12-24 18:00 (fuseau choisi) ou ISO avec décalage
    lireDate(brut) {
      var texte = String(brut || "").trim();
      if (!texte) return NaN;
      if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]\d{2}:?\d{2})$/i.test(texte)) return Date.parse(texte);
      var m = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:[\sT]+(\d{1,2})(?:[:hH](\d{2})?)?)?$/.exec(texte);
      var p = m ? [m[1], m[2], m[3], m[4], m[5]] : null;
      if (!p) {
        m = /^(\d{1,2})[\/.-](\d{1,2})[\/.-](\d{4})(?:[\s,]+(?:[aA]\s+)?(\d{1,2})(?:[:hH](\d{2})?)?)?$/.exec(texte);
        if (m) p = [m[3], m[2], m[1], m[4], m[5]];
      }
      if (!p) return NaN;
      var sansHeure = p[3] === undefined;
      var n = p.map(function (x) { return Number(x || 0); });
      if (n[1] < 1 || n[1] > 12 || n[2] < 1 || n[2] > 31 || n[3] > 23 || n[4] > 59) return NaN;
      return sansHeure ? this.instant(n[0], n[1], n[2], 23, 59, 59) : this.instant(n[0], n[1], n[2], n[3], n[4], 0);
    }
    lireJour(x) {
      var m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(x);
      var a, mo, j;
      if (m) { a = m[1]; mo = m[2]; j = m[3]; }
      else {
        m = /^(\d{1,2})[\/.](\d{1,2})[\/.](\d{4})$/.exec(x);
        if (!m) return "";
        a = m[3]; mo = m[2]; j = m[1];
      }
      return a + "-" + String(mo).padStart(2, "0") + "-" + String(j).padStart(2, "0");
    }
    calculerFin() {
      var mode = this.dataset.mode || "date";
      if (mode === "quotidien") return this.prochaineLimite();
      var fin = this.lireDate(this.dataset.fin);
      if (mode !== "visiteur") return fin;
      // Offre par visiteur : début mémorisé UNE fois, jamais remis à zéro ; sans mémoire fiable, rien n'est affiché
      var heures = Number(this.dataset.duree);
      if (!(heures > 0)) return NaN;
      var debut = Date.now();
      if (!this.editeur) {
        var cle = "nn-rebours-visiteur:" + (this.dataset.cle || "offre");
        try {
          var lu = Number(localStorage.getItem(cle));
          if (lu > 0 && lu <= Date.now()) debut = lu;
          else localStorage.setItem(cle, String(debut));
          if (Number(localStorage.getItem(cle)) !== debut) return NaN;
        } catch (e) { return NaN; }
      }
      this.debut = debut;
      var finVisiteur = debut + heures * 3600000;
      return Number.isFinite(fin) ? Math.min(fin, finVisiteur) : finVisiteur;
    }
    // Prochaine heure limite quotidienne réelle (jours d'expédition et jours fermés du marchand)
    prochaineLimite() {
      var hm = /^(\d{1,2})(?:[:hH](\d{2})?)?$/.exec(String(this.dataset.heure || "").trim());
      if (!hm || Number(hm[1]) > 23 || Number(hm[2] || 0) > 59) return NaN;
      var maintenant = Date.now();
      var dec = this.decalage(maintenant);
      if (!Number.isFinite(dec)) return NaN;
      var mur = new Date(maintenant + dec);
      var jours = this.dataset.jours || "1-5";
      var soi = this;
      var fermes = String(this.dataset.fermes || "").split(/[\s,;]+/).map(function (x) { return soi.lireJour(x); });
      for (var k = 0; k < 21; k++) {
        var jour = new Date(Date.UTC(mur.getUTCFullYear(), mur.getUTCMonth(), mur.getUTCDate() + k));
        var semaine = jour.getUTCDay();
        if (jours === "1-5" && (semaine === 0 || semaine === 6)) continue;
        if (jours === "1-6" && semaine === 0) continue;
        if (fermes.indexOf(jour.toISOString().slice(0, 10)) >= 0) continue;
        var limite = this.instant(jour.getUTCFullYear(), jour.getUTCMonth() + 1, jour.getUTCDate(), Number(hm[1]), Number(hm[2] || 0), 0);
        if (limite > maintenant) {
          this.ecartJours = Math.round((Date.UTC(jour.getUTCFullYear(), jour.getUTCMonth(), jour.getUTCDate()) - Date.UTC(mur.getUTCFullYear(), mur.getUTCMonth(), mur.getUTCDate())) / 86400000);
          this.jourLimite = jour;
          return limite;
        }
      }
      return NaN;
    }
    ecrireEcheance() {
      if (!Number.isFinite(this.fin)) return;
      var langue = document.documentElement.lang || "fr";
      var texte = "";
      try {
        var o = { weekday: "long", day: "numeric", month: "long", hour: "2-digit", minute: "2-digit", timeZone: this.zone };
        if (new Date(this.fin).getFullYear() !== new Date().getFullYear()) o.year = "numeric";
        texte = new Intl.DateTimeFormat(langue, o).format(new Date(this.fin));
      } catch (e) { texte = new Date(this.fin).toLocaleString(); }
      this.querySelectorAll("[data-echeance]").forEach(function (n) { n.textContent = texte; });
      if (!this.jourLimite) return;
      var nom = this.ecartJours === 0 ? this.dataset.aujourdhui || "" : this.ecartJours === 1 ? this.dataset.demain || "" : "";
      if (!nom) {
        try { nom = new Intl.DateTimeFormat(langue, { weekday: "long", timeZone: "UTC" }).format(this.jourLimite); } catch (e) { nom = ""; }
      }
      this.querySelectorAll("[data-jour]").forEach(function (n) { n.textContent = nom; });
    }
    brancherCopie() {
      var soi = this;
      var bouton = this.querySelector("[data-copier]");
      var code = this.querySelector("[data-code]");
      var statut = this.querySelector("[data-statut]");
      if (!bouton || !code || bouton.dataset.nnBranche) return;
      bouton.dataset.nnBranche = "1";
      var dire = function (texte) {
        if (statut) statut.textContent = texte;
        soi.classList.add("est-copie");
        clearTimeout(soi.minuterieCopie);
        soi.minuterieCopie = setTimeout(function () { soi.classList.remove("est-copie"); if (statut) statut.textContent = ""; }, 2500);
      };
      var selectionner = function () {
        try {
          var plage = document.createRange();
          plage.selectNodeContents(code);
          var sel = window.getSelection();
          sel.removeAllRanges();
          sel.addRange(plage);
          dire(bouton.dataset.selection || "Code sélectionné");
        } catch (e) { dire(""); }
      };
      bouton.addEventListener("click", function () {
        var texte = code.textContent.trim();
        try {
          navigator.clipboard.writeText(texte).then(function () { dire(bouton.dataset.copie || "Copié !"); }, selectionner);
        } catch (e) { selectionner(); }
      });
    }
    tic() {
      clearTimeout(this.minuterie);
      var soi = this;
      var maintenant = Date.now();
      var reste = this.fin - maintenant;
      if (!Number.isFinite(reste)) return this.invalide();
      if (reste <= 0) {
        if (this.dataset.mode === "quotidien") {
          this.fin = this.prochaineLimite();
          this.ecrireEcheance();
          if (!(this.fin > maintenant)) return this.invalide();
          reste = this.fin - maintenant;
        } else {
          var prolongation = (Number(this.dataset.prolongation) || 0) * 60000;
          if (maintenant < this.fin + prolongation) {
            this.afficher({ j: 0, h: 0, m: 0, s: 0 });
            this.etat("direct");
            this.minuterie = setTimeout(function () { soi.tic(); }, Math.min(60000, this.fin + prolongation - maintenant + 50));
            return;
          }
          return this.terminer();
        }
      }
      var s = Math.floor(reste / 1000);
      this.afficher({ j: Math.floor(s / 86400), h: Math.floor((s % 86400) / 3600), m: Math.floor((s % 3600) / 60), s: s % 60 });
      this.etat("pendant");
      this.actif = true;
      this.minuterie = setTimeout(function () { soi.tic(); }, 1000 - (Date.now() % 1000) + 20);
    }
    afficher(v) {
      var soi = this;
      var flip = this.hasAttribute("data-flip");
      var sansJours = v.j === 0;
      this.querySelectorAll("[data-bloc-jours]").forEach(function (n) { n.hidden = sansJours; });
      ["j", "h", "m", "s"].forEach(function (u) {
        var texte = String(v[u]).padStart(2, "0");
        if (soi.dernier[u] === texte) return;
        var premier = soi.dernier[u] === undefined;
        soi.dernier[u] = texte;
        soi.unites[u].forEach(function (n) {
          n.textContent = texte;
          if (flip && !premier) {
            var t = n.closest("[data-tuile]") || n;
            t.classList.remove("est-change");
            void t.offsetWidth;
            t.classList.add("est-change");
          }
        });
      });
      if (!this.joursMax) this.joursMax = Math.max(1, Number(this.dataset.joursMax) || v.j || 1);
      var max = { j: this.joursMax, h: 24, m: 60, s: 60 };
      this.querySelectorAll("[data-cercle]").forEach(function (n) {
        n.style.setProperty("--nn-p", Math.min(1, v[n.getAttribute("data-cercle")] / max[n.getAttribute("data-cercle")]).toFixed(4));
      });
      if (Number.isFinite(this.debut) && this.fin > this.debut) {
        var p = Math.min(1, Math.max(0, (Date.now() - this.debut) / (this.fin - this.debut)));
        this.querySelectorAll("[data-progres]").forEach(function (n) { n.style.setProperty("--nn-p", p.toFixed(4)); });
        this.querySelectorAll("[data-pourcent]").forEach(function (n) { n.textContent = Math.floor(p * 100) + " %"; });
      }
      var textes = this.querySelectorAll("[data-texte]");
      if (!textes.length) return;
      var l = this.libelles;
      var morceaux = [];
      if (this.dataset.format === "horloge") {
        morceaux.push(String(v.h + v.j * 24).padStart(2, "0") + ":" + String(v.m).padStart(2, "0") + ":" + String(v.s).padStart(2, "0"));
      } else {
        if (v.j) morceaux.push(v.j + " " + (l[0] || "j"));
        if (v.j || v.h) morceaux.push(v.h + " " + (l[1] || "h"));
        morceaux.push(v.m + " " + (l[2] || "min"));
        if (!this.hasAttribute("data-sans-secondes")) morceaux.push(v.s + " " + (l[3] || "s"));
      }
      var phrase = morceaux.join(" ");
      textes.forEach(function (n) { if (n.textContent !== phrase) n.textContent = phrase; });
    }
    etat(e) {
      if (this.dataset.etat === e) return;
      var avant = this.dataset.etat;
      this.dataset.etat = e;
      this.querySelectorAll("[data-pendant]").forEach(function (n) { n.hidden = e !== "pendant"; });
      this.querySelectorAll("[data-direct]").forEach(function (n) { n.hidden = e !== "direct"; });
      this.querySelectorAll("[data-apres]").forEach(function (n) { n.hidden = e !== "apres"; });
      // Une seule annonce polie, et seulement si l'offre se termine pendant la visite
      var annonce = this.querySelector("[data-annonce]");
      if (annonce && avant && this.actif && (e === "apres" || e === "direct")) annonce.textContent = annonce.getAttribute(e === "direct" ? "data-texte-direct" : "data-texte-fin") || "";
    }
    montrer(selecteur) {
      this.querySelectorAll(selecteur).forEach(function (n) { n.hidden = false; });
    }
    terminer() {
      this.afficher({ j: 0, h: 0, m: 0, s: 0 });
      this.etat("apres");
      if (this.dataset.aLaFin !== "masquer") return;
      if (this.editeur) this.montrer("[data-note-masque]");
      else this.hidden = true;
    }
    invalide() {
      this.etat("invalide");
      if (this.editeur) this.montrer("[data-alerte]");
      else this.hidden = true;
    }
  });
}
{% endjavascript %}