Thème Papeterie encre

<div class="nn-theme-compose" data-theme="theme-papeterie-encre">
<!-- Section : header-ilot-flottant -->
<header class="nn-hi"><a class="nn-hi__logo" href="/">{{ shop.name }}</a><nav>{% for l in linklists[section.settings.menu].links %}<a href="{{ l.url }}">{{ l.title }}</a>{% endfor %}</nav><a class="nn-hi__cta" href="{{ section.settings.lien }}">{{ section.settings.bouton }}</a></header>

<!-- Section : heros-plume-encre -->
<section class="nn-pe2">
  <span class="nn-pe2__tache t1"></span><span class="nn-pe2__tache t2"></span>
  <div class="nn-pe2__texte"><svg class="nn-pe2__titre" viewBox="0 0 700 140" aria-label="{{ section.settings.titre | default: 'Écrire, encore.' }}"><text x="50%" y="100" text-anchor="middle">{{ section.settings.titre | default: "Écrire, encore." }}</text></svg>
    <p>{{ section.settings.texte | default: "Carnets, stylos plume et papiers d'exception pour ceux qui aiment encore écrire à la main." }}</p><a href="{{ section.settings.lien | default: '/collections/all' }}" class="nn-pe2__btn">{{ section.settings.bouton | default: "Ouvrir le carnet" }}</a>
    <svg class="nn-pe2__signature" viewBox="0 0 200 60" aria-hidden="true"><path d="M10 40 C30 10 40 50 60 30 S90 10 100 35 S130 50 150 25 S180 20 190 40"/></svg></div>
  <span class="nn-pe2__plume">✒️</span>
</section>

<!-- Section : fiche-carnet-initiales -->
<section class="nn-ci">
  <div class="nn-ci__scene"><div class="nn-ci__carnet"><div class="nn-ci__couv"><b class="nn-ci__ini">S.S.</b></div><div class="nn-ci__page"></div></div></div>
  <div class="nn-ci__infos"><h2>{{ section.settings.titre | default: "Carnet Cuir Héritage" }}</h2><p class="nn-ci__prix">{{ section.settings.prix | default: "32 €" }}</p>
    <p>Couverture</p><div class="nn-ci__couleurs"><button style="--c:#1c2541" class="est-actif"></button><button style="--c:#8c1c13"></button><button style="--c:#2f5233"></button><button style="--c:#a0703f"></button></div>
    <label>Tes initiales<input maxlength="4" value="S.S." class="nn-ci__champ"></label><a class="nn-ci__btn">Ajouter au panier</a></div>
</section>

<!-- Section : carrousel-polaroids -->
{%- comment -%} NAHNAH AI · Carrousel pile de polaroïds (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-carrousel-polaroids" 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-nn-invitation="{{ section.settings.invitation }}">
  <div class="nn-carrousel-polaroids__mise">
    <div class="nn-carrousel-polaroids__texte">
      {%- if section.settings.titre != blank -%}<h2 class="nn-carrousel-polaroids__titre">{{ section.settings.titre | escape }}</h2>{%- endif -%}
      {%- if section.settings.texte != blank -%}<p>{{ section.settings.texte | escape }}</p>{%- endif -%}
      <div class="nn-carrousel-polaroids__commandes">
        <button type="button" class="nn-carrousel-polaroids__btn" data-nn-prec aria-label="Photo précédente">←</button>
        <span class="nn-carrousel-polaroids__compte" aria-live="polite"><span data-nn-pos>1</span> / {{ section.blocks.size }}</span>
        <button type="button" class="nn-carrousel-polaroids__btn" data-nn-suiv aria-label="Photo suivante">→</button>
      </div>
    </div>
    <ul class="nn-carrousel-polaroids__pile" role="list" tabindex="0" aria-label="Photos" data-nn-pile>
      {%- for block in section.blocks -%}
        <li class="nn-carrousel-polaroids__polaroid" style="--nn-i: {{ forloop.index0 }};" {{ block.shopify_attributes }}>
          <span class="nn-carrousel-polaroids__cliche">{%- if block.settings.image != blank -%}{{ block.settings.image | image_url: width: 700 | image_tag: loading: 'lazy', alt: block.settings.legende }}{%- endif -%}</span>
          <span class="nn-carrousel-polaroids__legende">{{ block.settings.legende | escape }}</span>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</div>


<!-- Section : avis-note-geante -->
<section class="nn-ng" data-note="{{ section.settings.note }}"><div class="nn-ng__gauche"><div class="nn-ng__chiffre">0,0</div><div class="nn-ng__etoiles">★★★★★</div><p>{{ section.settings.nombre }} avis vérifiés</p></div>
<div class="nn-ng__barres">{% assign parts = '82,12,4,1,1' | split: ',' %}{% for p in parts %}<div class="nn-ng__ligne"><span>{{ 6 | minus: forloop.index }} ★</span><div><i style="--p:{{ p }}%"></i></div><span>{{ p }} %</span></div>{% endfor %}</div></section>

<!-- Section : footer-rideau-ouvrant -->
{%- comment -%} NAHNAH AI · Pied de page à rideau qui s’ouvre (bibliothèque Sections & effets) {%- endcomment -%}
<footer class="nn-footer-rideau-ouvrant" 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-rideau: {{ section.settings.couleur_rideau }};" data-nn-invitation="{{ section.settings.invitation }}">
  <span class="nn-footer-rideau-ouvrant__pan nn-footer-rideau-ouvrant__pan--g" aria-hidden="true"></span><span class="nn-footer-rideau-ouvrant__pan nn-footer-rideau-ouvrant__pan--d" aria-hidden="true"></span>
  <div class="nn-footer-rideau-ouvrant__scene">
    <p class="nn-footer-rideau-ouvrant__nom">{{ shop.name | escape }}</p>
    {%- if section.settings.phrase != blank -%}<p class="nn-footer-rideau-ouvrant__phrase">{{ section.settings.phrase | escape }}</p>{%- endif -%}
    <nav aria-label="{{ section.settings.menu.title | default: 'Pied de page' | escape }}"><ul class="nn-footer-rideau-ouvrant__menu" role="list">{%- for link in section.settings.menu.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}</ul></nav>
    {%- if section.settings.lien_contact != blank and section.settings.contact != blank -%}<a class="nn-footer-rideau-ouvrant__contact" href="{{ section.settings.lien_contact }}">{{ section.settings.contact | escape }} →</a>{%- endif -%}
    <p class="nn-footer-rideau-ouvrant__copy">© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</p>
  </div>
</footer>


</div>
{% schema %}{"name":"Thème Papeterie encre","settings":[]}{% endschema %}

{% stylesheet %}
/* header-ilot-flottant */
.nn-hi{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:26px;padding:10px 12px 10px 22px;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px rgba(0,0,0,.08);transition:padding .3s,top .3s}
.nn-hi.petit{top:6px;padding:6px 8px 6px 18px}
.nn-hi__logo{font-weight:900;color:#111;text-decoration:none}
.nn-hi nav{display:flex;gap:20px}.nn-hi nav a{color:#3f3f46;text-decoration:none;font-size:14px}.nn-hi nav a:hover{color:#111}
.nn-hi__cta{background:#111;color:#fff;padding:9px 18px;border-radius:999px;text-decoration:none;font-size:14px}
@media(max-width:749px){.nn-hi nav{display:none}}
/* heros-plume-encre */
.nn-pe2{position:relative;min-height:540px;display:grid;place-items:center;text-align:center;background:#f7f1e3 repeating-linear-gradient(transparent 0 31px,#e2d8c3 31px 32px);color:#1c2541;font-family:"EB Garamond","Georgia",serif;overflow:hidden}
.nn-pe2__tache{position:absolute;border-radius:48% 52% 60% 40%/50% 45% 55% 50%;background:#1c2541;opacity:.85;transform:scale(0);animation:nnPeTache 1.2s ease-out forwards}
.t1{top:10%;right:12%;width:90px;height:80px;animation-delay:2.4s}.t2{bottom:14%;left:9%;width:50px;height:46px;animation-delay:2.8s}
@keyframes nnPeTache{70%{transform:scale(1.15)}100%{transform:scale(1)}}
.nn-pe2__texte{position:relative;z-index:2;padding:0 6%;max-width:760px}
.nn-pe2__titre{width:100%;height:auto}
.nn-pe2__titre text{font-family:"Pinyon Script","Great Vibes",cursive;font-size:96px;fill:transparent;stroke:#1c2541;stroke-width:1.4;stroke-dasharray:900;stroke-dashoffset:900;animation:nnPeEcrit 2.6s ease forwards,nnPeRemplit .6s 2.4s forwards}
@keyframes nnPeEcrit{to{stroke-dashoffset:0}}
@keyframes nnPeRemplit{to{fill:#1c2541}}
.nn-pe2 p{font-size:19px;margin:6px auto 28px;max-width:520px}
.nn-pe2__btn{display:inline-block;background:#1c2541;color:#f7f1e3;padding:14px 32px;text-decoration:none;font-size:17px;letter-spacing:.06em;border-radius:2px}
.nn-pe2__signature{display:block;width:180px;margin:24px auto 0;fill:none;stroke:#8c1c13;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:nnPeEcrit 1.6s 3s ease forwards}
.nn-pe2__plume{position:absolute;top:30%;left:20%;font-size:56px;animation:nnPePlume 2.6s ease-in-out forwards}
@keyframes nnPePlume{0%{transform:translate(0,0)}25%{transform:translate(18vw,8px)}50%{transform:translate(30vw,-6px)}75%{transform:translate(44vw,6px)}100%{transform:translate(56vw,-10px) rotate(20deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.nn-pe2 *{animation:none!important}.nn-pe2__titre text{fill:#1c2541}.nn-pe2__tache{transform:none}.nn-pe2__signature{stroke-dashoffset:0}.nn-pe2__plume{display:none}}
/* fiche-carnet-initiales */
.nn-ci{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:72px 7%;background:#f7f1e3;color:#1c2541;font-family:"EB Garamond",serif}
.nn-ci__scene{perspective:1200px;display:grid;place-items:center;height:380px}
.nn-ci__carnet{position:relative;width:220px;height:310px;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(6deg)}
.nn-ci__page{position:absolute;inset:6px 0 6px 6px;background:#fffdf6 repeating-linear-gradient(transparent 0 19px,#e8dfcb 19px 20px);border-radius:0 6px 6px 0}
.nn-ci__couv{position:absolute;inset:0;background:var(--couv,#1c2541);border-radius:4px 10px 10px 4px;display:grid;place-items:center;transform-origin:left;transition:transform .9s cubic-bezier(.6,0,.2,1),background .4s;box-shadow:inset 10px 0 12px rgba(0,0,0,.25),0 20px 40px rgba(0,0,0,.25);backface-visibility:hidden}
.nn-ci__scene:hover .nn-ci__couv{transform:rotateY(-150deg)}
.nn-ci__ini{font-family:"Cinzel",serif;font-size:42px;letter-spacing:.1em;color:#d9b45a;text-shadow:0 1px 0 #7a5a1c,0 -1px 0 #fff3c4}
.nn-ci h2{font-size:clamp(28px,4vw,42px);margin:0}
.nn-ci__prix{font-size:22px;margin:6px 0 16px}
.nn-ci p{margin:12px 0 6px}
.nn-ci__couleurs{display:flex;gap:10px}
.nn-ci__couleurs button{width:38px;height:38px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 1px #cbbf9f;cursor:pointer}
.nn-ci__couleurs button.est-actif{box-shadow:0 0 0 3px #1c2541}
.nn-ci label{display:block;margin-top:16px}
.nn-ci__champ{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid #cbbf9f;font-family:"Cinzel",serif;font-size:20px;letter-spacing:.1em;text-transform:uppercase;background:#fff}
.nn-ci__btn{display:block;text-align:center;margin-top:20px;background:#1c2541;color:#f7f1e3;padding:16px;cursor:pointer;font-size:17px}
@media(max-width:760px){.nn-ci{grid-template-columns:1fr}}
/* carrousel-polaroids */
.nn-carrousel-polaroids { padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); overflow: hidden; }
.nn-carrousel-polaroids__mise { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; }
.nn-carrousel-polaroids__titre { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 40px); }
.nn-carrousel-polaroids__texte p { margin: 0; opacity: 0.8; }
.nn-carrousel-polaroids__commandes { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.nn-carrousel-polaroids__btn { width: 48px; height: 48px; border: 2px solid var(--nn-texte); border-radius: 50%; background: none; color: inherit; font-size: 18px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.nn-carrousel-polaroids__btn:hover { background: var(--nn-texte); color: var(--nn-fond); }
.nn-carrousel-polaroids__btn:focus-visible, .nn-carrousel-polaroids__pile:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 3px; }
.nn-carrousel-polaroids__compte { font-variant-numeric: tabular-nums; font-weight: 700; }
.nn-carrousel-polaroids__pile { position: relative; height: 430px; margin: 0; padding: 0; list-style: none; touch-action: pan-y; }
.nn-carrousel-polaroids__polaroid { --nn-r: calc((var(--nn-o, 0) - 1.5) * 3.5deg); position: absolute; left: 50%; top: 50%; width: min(300px, 78vw); padding: 12px 12px 0; background: #FFFFFF; box-shadow: 0 18px 40px -18px rgba(43, 38, 32, 0.55); transform: translate(-50%, -50%) translate(calc(var(--nn-o, 0) * 6px), calc(var(--nn-o, 0) * -4px)) rotate(var(--nn-r)); z-index: calc(20 - var(--nn-o, 0)); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nn-carrousel-polaroids__polaroid--envol { transform: translate(-50%, -50%) translate(115%, -10%) rotate(18deg); }
.nn-carrousel-polaroids__cliche { display: block; aspect-ratio: 1; overflow: hidden; background: linear-gradient(135deg, #D9CBB5, #8C7B66); }
.nn-carrousel-polaroids__cliche img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nn-carrousel-polaroids__legende { display: block; padding: 12px 4px 16px; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 17px; text-align: center; color: #2B2620; }
@media (max-width: 749px) { .nn-carrousel-polaroids__mise { grid-template-columns: 1fr; gap: 10px; } .nn-carrousel-polaroids__pile { height: 380px; order: -1; } }
@media (prefers-reduced-motion: reduce) {
  .nn-carrousel-polaroids *, .nn-carrousel-polaroids *::before, .nn-carrousel-polaroids *::after { animation: none !important; transition: none !important; }
}
/* avis-note-geante */
.nn-ng{display:flex;flex-wrap:wrap;gap:50px;align-items:center;justify-content:center;padding:60px 5vw;background:#ffffff}
.nn-ng__chiffre{font-size:96px;font-weight:800;color:#111111;line-height:1}
.nn-ng__etoiles{color:#f59e0b;font-size:28px;letter-spacing:4px}
.nn-ng__barres{flex:1;min-width:260px;max-width:460px}
.nn-ng__ligne{display:grid;grid-template-columns:40px 1fr 46px;gap:10px;align-items:center;margin:8px 0;color:#52525b;font-size:14px}
.nn-ng__ligne div{height:10px;border-radius:99px;background:#f4f4f5;overflow:hidden}
.nn-ng__ligne i{display:block;height:100%;width:0;background:#f59e0b;border-radius:99px;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.nn-ng.vu .nn-ng__ligne i{width:var(--p)}
/* footer-rideau-ouvrant */
.nn-footer-rideau-ouvrant { position: relative; display: block; overflow: hidden; padding: var(--nn-mh) 16px var(--nn-mb); background: radial-gradient(60% 70% at 50% 40%, rgba(232, 176, 75, 0.16), transparent 70%), var(--nn-fond); color: var(--nn-texte); text-align: center; }
.nn-footer-rideau-ouvrant__pan { position: absolute; top: 0; bottom: 0; z-index: 2; width: 51%; background: repeating-linear-gradient(90deg, var(--nn-rideau) 0 28px, rgba(0, 0, 0, 0.28) 28px 34px, var(--nn-rideau) 34px 56px); box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); transition: transform 1.4s cubic-bezier(0.7, 0, 0.2, 1); pointer-events: none; }
.nn-footer-rideau-ouvrant__pan--g { left: 0; transform-origin: left; }
.nn-footer-rideau-ouvrant__pan--d { right: 0; transform-origin: right; }
.nn-footer-rideau-ouvrant--ouvert .nn-footer-rideau-ouvrant__pan--g { transform: translateX(-92%) scaleX(0.6); }
.nn-footer-rideau-ouvrant--ouvert .nn-footer-rideau-ouvrant__pan--d { transform: translateX(92%) scaleX(0.6); }
.nn-footer-rideau-ouvrant__scene { position: relative; max-width: 1000px; margin: 0 auto; }
.nn-footer-rideau-ouvrant__nom { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 10vw, 128px); line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere; opacity: 0; transform: translateY(24px) scale(0.96); transition: opacity 1s 0.6s, transform 1s 0.6s; }
.nn-footer-rideau-ouvrant--ouvert .nn-footer-rideau-ouvrant__nom { opacity: 1; transform: none; }
.nn-footer-rideau-ouvrant__phrase { margin: 14px 0 26px; font-size: 17px; opacity: 0.8; }
.nn-footer-rideau-ouvrant__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0 0 18px; padding: 0; list-style: none; }
.nn-footer-rideau-ouvrant a { color: inherit; text-decoration: none; }
.nn-footer-rideau-ouvrant__menu a:hover, .nn-footer-rideau-ouvrant__contact:hover { color: var(--nn-accent); }
.nn-footer-rideau-ouvrant a:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 2px; }
.nn-footer-rideau-ouvrant__contact { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--nn-accent); border-radius: 999px; color: var(--nn-accent); }
.nn-footer-rideau-ouvrant__copy { margin: 24px 0 0; font-size: 12px; opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .nn-footer-rideau-ouvrant *, .nn-footer-rideau-ouvrant *::before, .nn-footer-rideau-ouvrant *::after { animation: none !important; transition: none !important; }
  .nn-footer-rideau-ouvrant__pan { display: none; } .nn-footer-rideau-ouvrant__nom { opacity: 1; transform: none; }
}
{% endstylesheet %}

{% javascript %}
/* header-ilot-flottant */
// Rétrécit le header au scroll
document.querySelectorAll('.nn-hi').forEach(function(h){addEventListener('scroll',function(){h.classList.toggle('petit',scrollY>40)},{passive:true})});
// Aperçu seulement (html[data-nn-demo], jamais posé en boutique) : l'îlot se resserre puis s'élargit comme au défilement
if(document.documentElement.hasAttribute('data-nn-demo'))setInterval(function(){document.querySelectorAll('.nn-hi').forEach(function(h){h.classList.toggle('petit');});},1800);
/* heros-plume-encre */
/* Aucun script requis */
/* fiche-carnet-initiales */
document.querySelectorAll('.nn-ci').forEach(function(s){s.querySelectorAll('.nn-ci__couleurs button').forEach(function(b){b.addEventListener('click',function(){s.querySelectorAll('.nn-ci__couleurs button').forEach(function(x){x.classList.toggle('est-actif',x===b)});s.querySelector('.nn-ci__couv').style.setProperty('--couv',getComputedStyle(b).getPropertyValue('--c'));});});s.querySelector('.nn-ci__champ').addEventListener('input',function(e){s.querySelector('.nn-ci__ini').textContent=e.target.value.toUpperCase()||'·';});});
/* carrousel-polaroids */
(function () {
  var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  function brancher(racine) {
    if (racine.dataset.nnPret) return;
    racine.dataset.nnPret = "1";
    var pile = racine.querySelector("[data-nn-pile]");
    var cartes = [].slice.call(racine.querySelectorAll(".nn-carrousel-polaroids__polaroid"));
    if (!pile || !cartes.length) return;
    var ordre = cartes.map(function (_, i) { return i; }), occupe = false, pos = racine.querySelector("[data-nn-pos]");
    function placer() { ordre.forEach(function (i, o) { cartes[i].style.setProperty("--nn-o", o); }); if (pos) pos.textContent = ordre[0] + 1; }
    function suivant() {
      if (occupe || cartes.length < 2) return; occupe = true;
      var dessus = cartes[ordre[0]];
      dessus.classList.add("nn-carrousel-polaroids__polaroid--envol");
      setTimeout(function () { dessus.classList.remove("nn-carrousel-polaroids__polaroid--envol"); ordre.push(ordre.shift()); placer(); occupe = false; }, reduit ? 0 : 420);
    }
    function precedent() { if (occupe || cartes.length < 2) return; ordre.unshift(ordre.pop()); placer(); }
    placer();
    var auto = null;
    function stop() { if (auto) { clearInterval(auto); auto = null; } }
    racine.querySelector("[data-nn-suiv]").addEventListener("click", function () { stop(); suivant(); });
    racine.querySelector("[data-nn-prec]").addEventListener("click", function () { stop(); precedent(); });
    pile.addEventListener("keydown", function (e) { if (e.key === "ArrowRight") { e.preventDefault(); stop(); suivant(); } if (e.key === "ArrowLeft") { e.preventDefault(); stop(); precedent(); } });
    var x0 = null;
    pile.addEventListener("pointerdown", function (e) { x0 = e.clientX; });
    pile.addEventListener("pointerup", function (e) { if (x0 === null) return; var d = e.clientX - x0; x0 = null; if (Math.abs(d) > 30) { stop(); if (d < 0) suivant(); else precedent(); } });
    if (racine.getAttribute("data-nn-invitation") === "true" && !reduit) auto = setInterval(suivant, 2200);
  }
  function tout() { document.querySelectorAll(".nn-carrousel-polaroids").forEach(brancher); }
  tout();
  document.addEventListener("shopify:section:load", tout);
})();
/* avis-note-geante */
// Note géante : compteur et barres au moment où le bloc apparaît
document.querySelectorAll('.nn-ng').forEach(function(s){var n=parseFloat(s.dataset.note)||4.9,c=s.querySelector('.nn-ng__chiffre');
  new IntersectionObserver(function(e,o){if(!e[0].isIntersecting)return;o.disconnect();s.classList.add('vu');var t0=performance.now();
    (function f(t){var p=Math.min(1,(t-t0)/1400);c.textContent=(n*p).toFixed(1).replace('.',',');if(p<1)requestAnimationFrame(f);})(t0);}).observe(s);});
/* footer-rideau-ouvrant */
(function () {
  var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  function brancher(racine) {
    if (racine.dataset.nnPret) return;
    racine.dataset.nnPret = "1";
    if (reduit) { racine.classList.add("nn-footer-rideau-ouvrant--ouvert"); return; }
    if ("IntersectionObserver" in window) {
      var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { racine.classList.add("nn-footer-rideau-ouvrant--ouvert"); io.disconnect(); } }); }, { threshold: 0.3 });
      io.observe(racine);
    } else racine.classList.add("nn-footer-rideau-ouvrant--ouvert");
    if (racine.getAttribute("data-nn-invitation") === "true") setInterval(function () { racine.classList.remove("nn-footer-rideau-ouvrant--ouvert"); setTimeout(function () { racine.classList.add("nn-footer-rideau-ouvrant--ouvert"); }, 1500); }, 5600);
  }
  function tout() { document.querySelectorAll(".nn-footer-rideau-ouvrant").forEach(brancher); }
  tout();
  document.addEventListener("shopify:section:load", tout);
})();
{% endjavascript %}