Héros compteurs bénéfices

{%- comment -%} NAHNAH AI · Héros compteurs bénéfices (bibliothèque Sections & effets) {%- endcomment -%}
<nn-hero-benefices class="nn-hero-benefices" 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 }}; --nn-bouton: {{ section.settings.couleur_bouton }}; --nn-texte-bouton: {{ section.settings.couleur_texte_bouton }};">
  <div class="nn-hero-benefices__grille">
    <div class="nn-hero-benefices__contenu">
    {%- if section.settings.surtitre != blank -%}
      <p class="nn-hero-benefices__surtitre">{{ section.settings.surtitre | escape }}</p>
    {%- endif -%}
    {%- if section.settings.titre != blank -%}
      <h2 class="nn-hero-benefices__titre">{{ section.settings.titre }}</h2>
    {%- endif -%}
    {%- if section.settings.texte != blank -%}
      <div class="nn-hero-benefices__texte">{{ section.settings.texte }}</div>
    {%- endif -%}
    {%- if section.settings.bouton_texte != blank or section.settings.bouton2_texte != blank -%}
      <div class="nn-hero-benefices__boutons">
        {%- if section.settings.bouton_texte != blank -%}
          <a class="nn-hero-benefices__bouton" href="{{ section.settings.bouton_lien | default: routes.all_products_collection_url }}">{{ section.settings.bouton_texte | escape }}</a>
        {%- endif -%}
        {%- if section.settings.bouton2_texte != blank -%}
          <a class="nn-hero-benefices__bouton nn-hero-benefices__bouton--second" href="{{ section.settings.bouton2_lien | default: routes.collections_url }}">{{ section.settings.bouton2_texte | escape }}</a>
        {%- endif -%}
      </div>
    {%- endif -%}
    </div>
    {%- if section.blocks.size > 0 -%}
      <ul class="nn-hero-benefices__cartes" role="list">
        {%- for block in section.blocks -%}
          <li class="nn-hero-benefices__carte" {{ block.shopify_attributes }}>
            <span class="nn-hero-benefices__vh">{{ block.settings.prefixe | escape }}{{ block.settings.valeur }}{{ block.settings.suffixe | escape }} {{ block.settings.libelle | escape }}</span>
            <span class="nn-hero-benefices__nombre" aria-hidden="true">{{ block.settings.prefixe | escape }}<span data-nn-compteur="{{ block.settings.valeur }}">{{ block.settings.valeur }}</span>{{ block.settings.suffixe | escape }}</span>
            <span class="nn-hero-benefices__libelle" aria-hidden="true">{{ block.settings.libelle | escape }}</span>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
</nn-hero-benefices>

{% schema %}
{
  "name": "Héros compteurs bénéfices",
  "tag": "section",
  "class": "nn-section-hero-benefices",
  "max_blocks": 4,
  "settings": [
    {
      "type": "text",
      "id": "surtitre",
      "label": "Sur-titre (vide : masqué)",
      "default": "Pourquoi nous choisir"
    },
    {
      "type": "inline_richtext",
      "id": "titre",
      "label": "Titre",
      "default": "Achète l’esprit tranquille"
    },
    {
      "type": "richtext",
      "id": "texte",
      "label": "Texte",
      "default": "<p>Des engagements clairs, affichés noir sur blanc. Adapte ces chiffres à ta boutique : n’affiche que des informations exactes.</p>"
    },
    {
      "type": "header",
      "content": "Boutons"
    },
    {
      "type": "text",
      "id": "bouton_texte",
      "label": "Texte du bouton (vide : masqué)",
      "default": "Commencer mes achats"
    },
    {
      "type": "url",
      "id": "bouton_lien",
      "label": "Lien du bouton (vide : tous les produits)"
    },
    {
      "type": "text",
      "id": "bouton2_texte",
      "label": "Texte du bouton secondaire (vide : masqué)",
      "default": "Questions fréquentes"
    },
    {
      "type": "url",
      "id": "bouton2_lien",
      "label": "Lien du bouton secondaire (vide : collections)"
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#0B1220"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#F2F5F9"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#2EE6A8"
    },
    {
      "type": "color",
      "id": "couleur_bouton",
      "label": "Bouton",
      "default": "#2EE6A8"
    },
    {
      "type": "color",
      "id": "couleur_texte_bouton",
      "label": "Texte du bouton",
      "default": "#0B1220"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    }
  ],
  "blocks": [
    {
      "type": "chiffre",
      "name": "Chiffre clé",
      "settings": [
        {
          "type": "paragraph",
          "content": "N’affiche que des chiffres exacts et vérifiables (pas d’avis ni de ventes inventés)."
        },
        {
          "type": "number",
          "id": "valeur",
          "label": "Valeur",
          "default": 14
        },
        {
          "type": "text",
          "id": "prefixe",
          "label": "Avant le chiffre (facultatif)"
        },
        {
          "type": "text",
          "id": "suffixe",
          "label": "Après le chiffre",
          "default": " jours"
        },
        {
          "type": "text",
          "id": "libelle",
          "label": "Libellé",
          "default": "pour changer d’avis"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Héros compteurs bénéfices",
      "blocks": [
        {
          "type": "chiffre",
          "settings": {
            "valeur": 14,
            "prefixe": "",
            "suffixe": " jours",
            "libelle": "pour changer d’avis (droit de rétractation)"
          }
        },
        {
          "type": "chiffre",
          "settings": {
            "valeur": 100,
            "prefixe": "",
            "suffixe": " %",
            "libelle": "des paiements chiffrés et sécurisés"
          }
        },
        {
          "type": "chiffre",
          "settings": {
            "valeur": 24,
            "prefixe": "",
            "suffixe": " h/24",
            "libelle": "pour commander, quand tu veux"
          }
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-hero-benefices {
  position: relative;
  display: block;
  padding: var(--nn-mh) 0 var(--nn-mb);
  background: var(--nn-fond);
  color: var(--nn-texte);
  overflow-x: clip;
}
.nn-hero-benefices *, .nn-hero-benefices *::before, .nn-hero-benefices *::after { box-sizing: border-box; }
.nn-hero-benefices :where(a, button):focus-visible { outline: 3px solid var(--nn-accent); outline-offset: 3px; }
.nn-hero-benefices__surtitre { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nn-accent); }
.nn-hero-benefices__titre { margin: 0 0 16px; font-size: clamp(32px, 6vw, 60px); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; color: inherit; }
.nn-hero-benefices__texte { margin: 0 0 28px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; opacity: 0.88; max-width: 560px; }
.nn-hero-benefices__texte p { margin: 0 0 0.6em; }
.nn-hero-benefices__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.nn-hero-benefices__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 14px 28px;
  border-radius: var(--nn-arrondi-bouton, 8px);
  background: var(--nn-bouton);
  color: var(--nn-texte-bouton);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nn-hero-benefices__bouton--second { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) {
  .nn-hero-benefices__bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--nn-bouton) 35%, transparent); }
  .nn-hero-benefices__bouton--second:hover { box-shadow: inset 0 0 0 2px currentColor, 0 12px 26px rgba(0, 0, 0, 0.12); }
}
.nn-hero-benefices__vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nn-hero-benefices__grille { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(48px, 8vw, 110px) 16px; }
@media (min-width: 900px) { .nn-hero-benefices__grille { grid-template-columns: 1.1fr 1fr; padding-inline: 32px; } }
.nn-hero-benefices__titre { font-size: clamp(34px, 5.5vw, 64px); }
.nn-hero-benefices__cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.nn-hero-benefices__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 22px 20px;
  border: 1px solid color-mix(in srgb, var(--nn-accent) 30%, transparent);
  border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--nn-accent) 12%, transparent), transparent 60%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nn-texte) 10%, transparent);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.nn-hero-benefices__carte:first-child:nth-last-child(3) { grid-column: 1 / -1; }
@media (hover: hover) { .nn-hero-benefices__carte:hover { transform: translateY(-4px); border-color: var(--nn-accent); } }
.nn-hero-benefices__nombre { font-size: clamp(34px, 5vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--nn-accent); text-shadow: 0 0 24px color-mix(in srgb, var(--nn-accent) 45%, transparent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nn-hero-benefices__libelle { font-size: 15px; line-height: 1.4; opacity: 0.85; }
.nn-hero-benefices__bouton { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .nn-hero-benefices, .nn-hero-benefices *, .nn-hero-benefices *::before, .nn-hero-benefices *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}

{% javascript %}
if (!customElements.get("nn-hero-benefices")) {
  // Compte de 0 jusqu'à la valeur quand la carte devient visible ; valeur finale directe si animations réduites
  customElements.define("nn-hero-benefices", class extends HTMLElement {
    connectedCallback() {
      if (this.dataset.nnPret) return;
      this.dataset.nnPret = "1";
      var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (reduit || !("IntersectionObserver" in window)) return;
      var compteurs = Array.prototype.slice.call(this.querySelectorAll("[data-nn-compteur]"));
      if (!compteurs.length) return;
      var animer = function (el) {
        var cible = parseFloat(el.getAttribute("data-nn-compteur")) || 0;
        var decimales = (String(cible).split(".")[1] || "").length;
        var debut = null;
        var etape = function (t) {
          if (debut === null) debut = t;
          var k = Math.min(1, (t - debut) / 1400);
          var v = cible * (1 - Math.pow(1 - k, 3));
          el.textContent = v.toFixed(decimales).replace(".", ",");
          if (k < 1) requestAnimationFrame(etape);
        };
        requestAnimationFrame(etape);
      };
      var obs = new IntersectionObserver(function (entrees) {
        entrees.forEach(function (e) {
          if (!e.isIntersecting) return;
          obs.unobserve(e.target);
          animer(e.target);
        });
      }, { threshold: 0.4 });
      compteurs.forEach(function (el) {
        el.textContent = "0";
        obs.observe(el);
      });
      this._obs = obs;
    }
    disconnectedCallback() {
      if (this._obs) this._obs.disconnect();
    }
  });
}
{% endjavascript %}