Thème Foulée

{%- comment -%} NAHNAH AI · Thème Foulée {%- endcomment -%}
<div class="nn-themes-foulee" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-second: {{ section.settings.couleur_second }}; --nn-font: 'Archivo Black','Arial Black',sans-serif; --nn-font2: 'Archivo',system-ui,sans-serif; --nn-vitesse: {{ section.settings.vitesse_ruban }}s;">
  <span class="nn-themes-foulee__lueur" aria-hidden="true"></span>
  <header class="nn-themes-foulee__entete">
    <a class="nn-themes-foulee__logo" href="{{ routes.root_url }}">{%- if section.settings.logo != blank -%}{{ section.settings.logo | image_url: width: 240 | image_tag: alt: shop.name, height: 36, style: 'height:36px;width:auto' }}{%- else -%}{{ shop.name | escape }}{%- endif -%}</a>
    <nav class="nn-themes-foulee__nav" aria-label="Menu principal">{%- for l in linklists[section.settings.menu].links limit: 5 -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav>
    <a href="{{ routes.cart_url }}">Panier ({{ cart.item_count }})</a>
  </header>
  <section class="nn-themes-foulee__heros">
    <span class="nn-themes-foulee__bulle" data-nn-parallaxe="0.35" style="width:120px;height:120px;top:8%;left:46%"></span>
    <span class="nn-themes-foulee__bulle" data-nn-parallaxe="-0.2" style="width:60px;height:60px;bottom:12%;left:6%"></span>
    <div data-nn-apparition>
      {%- if section.settings.surtitre != blank -%}<p style="text-transform:uppercase;letter-spacing:.18em;font-size:12px;margin-bottom:14px">{{ section.settings.surtitre | escape }}</p>{%- endif -%}
      <h1>{{ section.settings.titre | escape }}</h1>
      <p style="margin:20px 0 28px">{{ section.settings.texte | escape }}</p>
      <a class="nn-themes-foulee__bouton" href="{{ section.settings.lien_bouton | default: routes.all_products_collection_url }}">{{ section.settings.bouton | escape }}</a>
    </div>
    <div class="nn-themes-foulee__heros-visuel" data-nn-apparition><div data-nn-parallaxe="0.08" style="height:100%">{%- if section.settings.image != blank -%}{{ section.settings.image | image_url: width: 1200 | image_tag: alt: section.settings.titre, loading: 'eager' }}{%- else -%}{{ 'lifestyle-1' | placeholder_svg_tag }}{%- endif -%}</div></div>
  </section>
  {%- if section.settings.ruban != blank -%}
  <div class="nn-themes-foulee__ruban" aria-hidden="true"><div class="nn-themes-foulee__ruban-piste">{%- assign mots = section.settings.ruban | split: '·' -%}{%- for n in (1..2) -%}{%- for m in mots -%}<span>{{ m | strip | escape }} ✦</span>{%- endfor -%}{%- endfor -%}</div></div>
  {%- endif -%}
  <section class="nn-themes-foulee__bloc" id="collections">
    <h2 data-nn-apparition>{{ section.settings.titre_collections | escape }}</h2>
    <div class="nn-themes-foulee__grille">
      {%- for block in section.blocks -%}{%- if block.type == 'collection' -%}
      {%- assign col = block.settings.collection -%}
      <a class="nn-themes-foulee__col" href="{{ col.url | default: routes.collections_url }}" data-nn-apparition {{ block.shopify_attributes }}>
        <span class="nn-themes-foulee__media">{%- if col.featured_image -%}{{ col.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: col.title }}{%- else -%}{{ 'collection-1' | placeholder_svg_tag }}{%- endif -%}</span>
        <strong>{{ col.title | default: 'Choisis une collection' | escape }}</strong>
      </a>
      {%- endif -%}{%- endfor -%}
    </div>
  </section>
  <section class="nn-themes-foulee__bloc" id="vedettes">
    <h2 data-nn-apparition>{{ section.settings.titre_produits | escape }}</h2>
    <div class="nn-themes-foulee__fleches"><button type="button" data-nn-sens="-1" aria-label="Précédent">←</button><button type="button" data-nn-sens="1" aria-label="Suivant">→</button></div>
    <div class="nn-themes-foulee__carrousel" data-nn-carrousel>
      {%- for p in section.settings.collection_vedette.products limit: section.settings.nb_produits -%}
      <a class="nn-themes-foulee__carte" href="{{ p.url }}" data-nn-inclinaison="{{ section.settings.force_inclinaison }}">
        <span class="nn-themes-foulee__media">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: p.featured_image.alt | default: p.title }}{%- else -%}{{ 'product-1' | placeholder_svg_tag }}{%- endif -%}</span>
        <span>{{ p.title | escape }}</span>
        <span class="nn-themes-foulee__prix">{%- if p.compare_at_price > p.price -%}<s style="opacity:.5;font-weight:400">{{ p.compare_at_price | money }}</s> {%- endif -%}{{ p.price | money }}</span>
      </a>
      {%- else -%}
      {%- for i in (1..4) -%}<div class="nn-themes-foulee__carte" data-nn-inclinaison="{{ section.settings.force_inclinaison }}"><span class="nn-themes-foulee__media">{{ 'product-' | append: i | placeholder_svg_tag }}</span><span>Choisis une collection vedette</span></div>{%- endfor -%}
      {%- endfor -%}
    </div>
  </section>
  <section class="nn-themes-foulee__bloc" id="histoire">
    <div class="nn-themes-foulee__histoire">
      <div class="nn-themes-foulee__media" data-nn-apparition>{%- if section.settings.image_histoire != blank -%}{{ section.settings.image_histoire | image_url: width: 900 | image_tag: loading: 'lazy', alt: section.settings.titre_histoire }}{%- else -%}{{ 'lifestyle-2' | placeholder_svg_tag }}{%- endif -%}</div>
      <div data-nn-apparition>
        <h2>{{ section.settings.titre_histoire | escape }}</h2>
        <div>{{ section.settings.texte_histoire }}</div>
        <div class="nn-themes-foulee__chiffres">
          {%- for block in section.blocks -%}{%- if block.type == 'chiffre' -%}<div class="nn-themes-foulee__chiffre" {{ block.shopify_attributes }}><b data-nn-compteur="{{ block.settings.valeur }}">{{ block.settings.valeur }}</b><span>{{ block.settings.legende | escape }}</span></div>{%- endif -%}{%- endfor -%}
        </div>
      </div>
    </div>
  </section>
  <section class="nn-themes-foulee__bloc" id="avis">
    <h2 data-nn-apparition>{{ section.settings.titre_avis | escape }}</h2>
    <div class="nn-themes-foulee__grille">
      {%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}
      <figure class="nn-themes-foulee__avis" data-nn-apparition {{ block.shopify_attributes }}><blockquote>« {{ block.settings.texte | escape }} »</blockquote>{%- if block.settings.auteur != blank -%}<figcaption>— {{ block.settings.auteur | escape }}</figcaption>{%- endif -%}</figure>
      {%- endif -%}{%- endfor -%}
    </div>
    {%- if request.design_mode -%}<p style="opacity:.6;font-size:13px">Ajoutez des blocs « Avis client » avec de vrais avis : les blocs vides restent masqués.</p>{%- endif -%}
  </section>
  <section class="nn-themes-foulee__bloc nn-themes-foulee__faq" id="faq">
    <h2 data-nn-apparition>{{ section.settings.titre_faq | escape }}</h2>
    {%- for block in section.blocks -%}{%- if block.type == 'faq' -%}<details data-nn-apparition {{ block.shopify_attributes }}><summary>{{ block.settings.question | escape }}</summary><div>{{ block.settings.reponse }}</div></details>{%- endif -%}{%- endfor -%}
  </section>
  <footer class="nn-themes-foulee__pied">
    <div class="nn-themes-foulee__pied-grille">
      <div><strong class="nn-themes-foulee__logo">{{ shop.name | escape }}</strong><p>{{ section.settings.texte_pied | escape }}</p></div>
      <nav aria-label="Pied de page" style="display:grid;gap:6px">{%- for l in linklists[section.settings.menu_pied].links -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav>
      <div>
        <p>{{ section.settings.titre_newsletter | escape }}</p>
        {%- form 'customer', id: 'nn-newsletter-foulee' -%}<input type="hidden" name="contact[tags]" value="newsletter">{%- if form.posted_successfully? -%}<p>Merci, c'est noté.</p>{%- else -%}<input type="email" name="contact[email]" placeholder="Votre e-mail" required aria-label="E-mail"><button type="submit">S'inscrire</button>{%- endif -%}{%- endform -%}
      </div>
    </div>
    <small>© {{ 'now' | date: '%Y' }} {{ shop.name | escape }} · Tous droits réservés</small>
  </footer>
</div>
{% schema %}
{"name":"Thème Foulée","tag":"section","class":"nn-th-foulee","settings":[{"type":"header","content":"En-tête"},{"type":"image_picker","id":"logo","label":"Logo"},{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"header","content":"Héros"},{"type":"text","id":"surtitre","label":"Surtitre","default":"Nouvelle collection"},{"type":"text","id":"titre","label":"Titre","default":"Chaque foulée compte"},{"type":"textarea","id":"texte","label":"Texte","default":"Équipement pensé pour l'effort, choisi pour durer, prêt pour ta prochaine séance."},{"type":"text","id":"bouton","label":"Bouton","default":"Je m'équipe"},{"type":"url","id":"lien_bouton","label":"Lien du bouton"},{"type":"image_picker","id":"image","label":"Image du héros"},{"type":"header","content":"Bandeau défilant"},{"type":"text","id":"ruban","label":"Messages (séparés par ·)","default":"Running · Training · Récupération · Échange facile · Paiement sécurisé"},{"type":"range","id":"vitesse_ruban","label":"Durée d'un tour","min":10,"max":60,"step":2,"unit":"s","default":28},{"type":"header","content":"Collections et produits"},{"type":"text","id":"titre_collections","label":"Titre collections","default":"Nos univers"},{"type":"text","id":"titre_produits","label":"Titre produits vedettes","default":"Les incontournables"},{"type":"collection","id":"collection_vedette","label":"Collection vedette"},{"type":"range","id":"nb_produits","label":"Nombre de produits","min":2,"max":12,"step":1,"default":8},{"type":"range","id":"force_inclinaison","label":"Force de l'inclinaison 3D","min":0,"max":20,"step":1,"unit":"°","default":8},{"type":"header","content":"Histoire"},{"type":"text","id":"titre_histoire","label":"Titre","default":"Né sur le terrain"},{"type":"richtext","id":"texte_histoire","label":"Texte","default":"<p>Racontez ici d'où vient votre marque : la discipline, l'entraînement, les valeurs qui vous font avancer.</p>"},{"type":"image_picker","id":"image_histoire","label":"Image"},{"type":"header","content":"Avis et FAQ"},{"type":"text","id":"titre_avis","label":"Titre avis","default":"Ce qu'en disent nos clients"},{"type":"text","id":"titre_faq","label":"Titre FAQ","default":"Questions fréquentes"},{"type":"header","content":"Pied de page"},{"type":"link_list","id":"menu_pied","label":"Menu","default":"footer"},{"type":"text","id":"texte_pied","label":"Texte","default":"Décrivez votre marque en une phrase."},{"type":"text","id":"titre_newsletter","label":"Titre newsletter","default":"Recevez nos nouveautés"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#F4F4F0"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#0D0D0D"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#D4FF2E"},{"type":"color","id":"couleur_second","label":"Secondaire","default":"#0D0D0D"}],"blocks":[{"type":"collection","name":"Collection","limit":6,"settings":[{"type":"collection","id":"collection","label":"Collection"}]},{"type":"chiffre","name":"Chiffre animé","limit":4,"settings":[{"type":"number","id":"valeur","label":"Valeur","default":14},{"type":"text","id":"legende","label":"Légende","default":"jours pour changer d'avis"}]},{"type":"avis","name":"Avis client","settings":[{"type":"textarea","id":"texte","label":"Avis (réel, avec accord du client)"},{"type":"text","id":"auteur","label":"Prénom du client"}]},{"type":"faq","name":"Question FAQ","settings":[{"type":"text","id":"question","label":"Question","default":"Votre question"},{"type":"richtext","id":"reponse","label":"Réponse","default":"<p>Votre réponse.</p>"}]}],"presets":[{"name":"Thème Foulée","blocks":[{"type":"collection"},{"type":"collection"},{"type":"collection"},{"type":"chiffre","settings":{"valeur":14,"legende":"jours pour changer d'avis"}},{"type":"chiffre","settings":{"valeur":7,"legende":"jours sur 7, boutique ouverte"}},{"type":"chiffre","settings":{"valeur":3,"legende":"étapes pour commander"}},{"type":"avis"},{"type":"avis"},{"type":"avis"},{"type":"faq","settings":{"question":"Quels sont les délais de livraison ?","reponse":"<p>Indiquez ici vos délais réels de préparation et de livraison.</p>"}},{"type":"faq","settings":{"question":"Puis-je retourner un article ?","reponse":"<p>Vous disposez de 14 jours après réception pour exercer votre droit de rétractation. Précisez ici vos conditions.</p>"}},{"type":"faq","settings":{"question":"Quels moyens de paiement acceptez-vous ?","reponse":"<p>Listez ici les moyens de paiement activés sur votre boutique.</p>"}}]}]}
{% endschema %}

{% stylesheet %}
/* NAHNAH AI · Thème Foulée : thème complet (direction artistique propre) */
.nn-themes-foulee{--nn-x:50%;--nn-y:30%;position:relative;overflow:clip;background-color:var(--nn-fond);color:var(--nn-texte);font-family:var(--nn-font2);line-height:1.6}
.nn-themes-foulee *{box-sizing:border-box}
.nn-themes-foulee a{color:inherit;text-decoration:none}
.nn-themes-foulee img,.nn-themes-foulee svg{display:block;max-width:100%}
.nn-themes-foulee__lueur{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(420px circle at var(--nn-x) var(--nn-y),color-mix(in srgb,var(--nn-accent) 22%,transparent),transparent 70%)}
.nn-themes-foulee__entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;transition:padding .3s,box-shadow .3s}
.nn-themes-foulee__entete.est-compact{padding-block:8px;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
.nn-themes-foulee__logo{font-family:var(--nn-font);font-size:22px;font-weight:700}
.nn-themes-foulee__nav{display:flex;gap:18px;flex-wrap:wrap}
.nn-themes-foulee__nav a{position:relative}
.nn-themes-foulee__nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nn-themes-foulee__nav a:hover::after{transform:scaleX(1)}
.nn-themes-foulee__heros{position:relative;z-index:1;display:grid;gap:28px;align-items:center;padding:48px 16px 56px;max-width:1200px;margin:0 auto}
.nn-themes-foulee__heros h1{margin:0;font-size:clamp(38px,7vw,88px);line-height:1}
.nn-themes-foulee__heros p{margin:0;max-width:48ch;font-size:17px;opacity:.85}
.nn-themes-foulee__heros-visuel{position:relative;overflow:hidden;aspect-ratio:4/5;max-height:620px}
.nn-themes-foulee__heros-visuel img,.nn-themes-foulee__heros-visuel svg{width:100%;height:115%;object-fit:cover;will-change:transform}
.nn-themes-foulee__bulle{z-index:0;pointer-events:none;will-change:transform}
.nn-themes-foulee__bouton{display:inline-block;justify-self:start;padding:15px 28px;background:var(--nn-accent);color:var(--nn-fond)!important;font-weight:600;transition:transform .25s,box-shadow .25s,background .25s}
.nn-themes-foulee__bouton:hover{transform:translateY(-2px)}
.nn-themes-foulee__ruban{position:relative;z-index:1;overflow:hidden;white-space:nowrap;padding:14px 0}
.nn-themes-foulee__ruban-piste{display:inline-flex;gap:48px;padding-right:48px;animation:nn-themes-foulee-defile var(--nn-vitesse,28s) linear infinite}
@keyframes nn-themes-foulee-defile{to{transform:translateX(-50%)}}
.nn-themes-foulee__bloc{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:56px 16px}
.nn-themes-foulee__bloc h2{margin:0 0 24px;font-size:clamp(28px,4.5vw,52px);line-height:1.05}
.nn-themes-foulee__grille{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.nn-themes-foulee__col{display:flex;flex-direction:column;gap:10px;padding:14px;overflow:hidden}
.nn-themes-foulee__col .nn-themes-foulee__media{aspect-ratio:1}
.nn-themes-foulee__media{overflow:hidden}
.nn-themes-foulee__media img,.nn-themes-foulee__media svg{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.nn-themes-foulee__col:hover .nn-themes-foulee__media img,.nn-themes-foulee__carte:hover .nn-themes-foulee__media img{transform:scale(1.06)}
.nn-themes-foulee__carrousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:thin}
.nn-themes-foulee__carte{flex:0 0 min(78%,280px);scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:12px;transform-style:preserve-3d;transition:transform .2s,box-shadow .3s}
.nn-themes-foulee__carte .nn-themes-foulee__media{aspect-ratio:4/5}
.nn-themes-foulee__prix{font-weight:700;color:var(--nn-accent)}
.nn-themes-foulee__fleches{display:flex;gap:8px;margin-bottom:14px}
.nn-themes-foulee__fleches button{width:44px;height:44px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;font-size:18px;border-radius:50%}
.nn-themes-foulee__histoire{display:grid;gap:28px;align-items:center}
.nn-themes-foulee__histoire .nn-themes-foulee__media{aspect-ratio:4/3}
.nn-themes-foulee__chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:20px}
.nn-themes-foulee__chiffre b{display:block;font-family:var(--nn-font);font-size:clamp(36px,6vw,60px);line-height:1}
.nn-themes-foulee__avis{padding:22px;display:flex;flex-direction:column;gap:12px}
.nn-themes-foulee__avis blockquote{margin:0;font-size:17px}
.nn-themes-foulee__faq details{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 20%,transparent);padding:16px 0}
.nn-themes-foulee__faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.nn-themes-foulee__faq summary::after{content:"+";transition:transform .3s}
.nn-themes-foulee__faq details[open] summary::after{transform:rotate(45deg)}
.nn-themes-foulee__pied{position:relative;z-index:1;padding:48px 16px 28px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 15%,transparent)}
.nn-themes-foulee__pied-grille{max-width:1200px;margin:0 auto;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.nn-themes-foulee__pied form{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-foulee__pied input[type=email]{flex:1 1 180px;min-width:0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--nn-texte) 30%,transparent);background:transparent;color:inherit;font:inherit}
.nn-themes-foulee__pied button{padding:12px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:700;cursor:pointer}
.nn-themes-foulee__pied small{display:block;max-width:1200px;margin:28px auto 0;opacity:.6}
.nn-themes-foulee [data-nn-apparition]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.nn-themes-foulee [data-nn-apparition].est-visible{opacity:1;transform:none}
@media (min-width:750px){.nn-themes-foulee__heros{grid-template-columns:1.1fr .9fr;padding:72px 40px}.nn-themes-foulee__bloc{padding:80px 40px}.nn-themes-foulee__histoire{grid-template-columns:1fr 1fr}.nn-themes-foulee__entete{padding:18px 40px}.nn-themes-foulee__carte{flex-basis:300px}}
@media (hover:none){.nn-themes-foulee__lueur{display:none}}
@media (prefers-reduced-motion: reduce){.nn-themes-foulee *,.nn-themes-foulee *::before,.nn-themes-foulee *::after{animation:none!important;transition:none!important}.nn-themes-foulee [data-nn-apparition]{opacity:1;transform:none}.nn-themes-foulee__lueur{display:none}.nn-themes-foulee__carrousel{scroll-behavior:auto}}

.nn-themes-foulee h1,.nn-themes-foulee h2{font-family:var(--nn-font);text-transform:uppercase;font-style:italic;letter-spacing:-.02em;line-height:.92}
.nn-themes-foulee h1{font-size:clamp(44px,10vw,128px)}
.nn-themes-foulee__entete{background:var(--nn-texte);color:var(--nn-fond)}
.nn-themes-foulee__entete a{color:var(--nn-fond)!important}
.nn-themes-foulee__bouton{border-radius:0;color:var(--nn-texte)!important;transform:skewX(-8deg);font-weight:800;text-transform:uppercase}
.nn-themes-foulee__carte,.nn-themes-foulee__col,.nn-themes-foulee__avis{border-radius:0;background:#fff;border:2px solid var(--nn-texte)}
.nn-themes-foulee__carte:hover{box-shadow:8px 8px 0 var(--nn-texte)}
.nn-themes-foulee__heros-visuel{border-radius:0;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%)}
.nn-themes-foulee__ruban{background:var(--nn-accent);color:var(--nn-texte);font-family:var(--nn-font);font-style:italic;text-transform:uppercase;font-size:22px;transform:rotate(-2deg);margin:20px -10px}
.nn-themes-foulee__bulle{position:absolute;height:6px;width:120px;background:var(--nn-accent);transform:skewX(-30deg)}
.nn-themes-foulee__chiffre b{-webkit-text-stroke:2px var(--nn-texte);color:var(--nn-accent)}
{% endstylesheet %}

{% javascript %}
// NAHNAH AI · Thème Foulée : effets du thème (aucun Liquid ici, tout passe par data-*)
(function () {
  var calme = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('.nn-themes-foulee').forEach(function (racine) {
    // 1. Menu sticky : l'en-tête se compacte après un léger défilement
    var entete = racine.querySelector('.nn-themes-foulee__entete');
    function surDefilement() {
      if (entete) entete.classList.toggle('est-compact', window.scrollY > 40);
      if (calme) return;
      // 2. Parallaxe : chaque élément data-nn-parallaxe glisse selon sa vitesse
      racine.querySelectorAll('[data-nn-parallaxe]').forEach(function (el) {
        var r = el.getBoundingClientRect();
        var vitesse = parseFloat(el.getAttribute('data-nn-parallaxe')) || 0.15;
        var decalage = (r.top + r.height / 2 - window.innerHeight / 2) * vitesse;
        el.style.transform = 'translate3d(0,' + (-decalage).toFixed(1) + 'px,0)';
      });
    }
    window.addEventListener('scroll', surDefilement, { passive: true });
    surDefilement();

    // 3. Apparition au défilement + 4. compteurs déclenchés à l'apparition
    function animerCompteur(el) {
      var cible = parseFloat(el.getAttribute('data-nn-compteur')) || 0;
      if (calme) { el.textContent = cible; return; }
      var debut = null;
      function pas(t) {
        if (!debut) debut = t;
        var p = Math.min((t - debut) / 1400, 1);
        // Courbe douce en fin d'animation
        el.textContent = Math.round(cible * (1 - Math.pow(1 - p, 3)));
        if (p < 1) requestAnimationFrame(pas);
      }
      requestAnimationFrame(pas);
    }
    var cibles = racine.querySelectorAll('[data-nn-apparition],[data-nn-compteur]');
    if ('IntersectionObserver' in window) {
      var obs = new IntersectionObserver(function (entrees) {
        entrees.forEach(function (e) {
          if (!e.isIntersecting) return;
          e.target.classList.add('est-visible');
          if (e.target.hasAttribute('data-nn-compteur')) animerCompteur(e.target);
          obs.unobserve(e.target);
        });
      }, { threshold: 0.2 });
      cibles.forEach(function (el) { obs.observe(el); });
    } else {
      cibles.forEach(function (el) { el.classList.add('est-visible'); if (el.hasAttribute('data-nn-compteur')) animerCompteur(el); });
    }

    if (calme) return;
    // 5. Spotlight : la lueur suit le pointeur
    racine.addEventListener('pointermove', function (e) {
      var r = racine.getBoundingClientRect();
      racine.style.setProperty('--nn-x', (e.clientX - r.left) + 'px');
      racine.style.setProperty('--nn-y', (e.clientY - r.top) + 'px');
    });

    // 6. Inclinaison 3D des cartes produits
    racine.querySelectorAll('[data-nn-inclinaison]').forEach(function (carte) {
      var force = parseFloat(carte.getAttribute('data-nn-inclinaison')) || 8;
      carte.addEventListener('pointermove', function (e) {
        var r = carte.getBoundingClientRect();
        var x = (e.clientX - r.left) / r.width - 0.5;
        var y = (e.clientY - r.top) / r.height - 0.5;
        carte.style.transform = 'perspective(800px) rotateX(' + (-y * force) + 'deg) rotateY(' + (x * force) + 'deg)';
      });
      carte.addEventListener('pointerleave', function () { carte.style.transform = ''; });
    });
  });

  // 7. Carrousel fluide : flèches qui font défiler d'une carte
  document.querySelectorAll('.nn-themes-foulee [data-nn-carrousel]').forEach(function (piste) {
    var bloc = piste.parentNode;
    bloc.querySelectorAll('[data-nn-sens]').forEach(function (b) {
      b.addEventListener('click', function () {
        var carte = piste.firstElementChild;
        var pas = carte ? carte.getBoundingClientRect().width + 16 : 300;
        piste.scrollBy({ left: pas * parseInt(b.getAttribute('data-nn-sens'), 10), behavior: calme ? 'auto' : 'smooth' });
      });
    });
  });
})();
{% endjavascript %}