Thème Café torréfié

<div class="nn-theme-compose" data-theme="theme-cafe-torrefie">
<!-- Section : header-annonce-defilante -->
<div class="nn-hb"><div class="nn-hb__band"><div class="nn-hb__piste">{% for i in (1..4) %}<span>{{ section.settings.annonce }}</span>{% endfor %}</div></div><header class="nn-hb__bar"><nav class="nn-hb__g">{% for l in linklists[section.settings.menu].links limit:3 %}<a href="{{ l.url }}">{{ l.title }}</a>{% endfor %}</nav><a class="nn-hb__logo" href="/">{{ shop.name }}</a><div class="nn-hb__d"><a href="/search">Rechercher</a><a href="/cart">Panier ({{ cart.item_count }})</a></div></header></div>

<!-- Section : heros-vapeur-tasse -->
<section class="nn-vp">
  <div class="nn-vp__photo"><img src="{{ section.settings.photo | default: 'https://images.unsplash.com/photo-1544816155-12df9643f363?w=1400&q=80' }}" alt="Ambiance" loading="lazy"><div class="nn-vp__vapeur"><i></i><i></i><i></i></div></div>
  <div class="nn-vp__texte">
    <span class="nn-vp__etiquette">{{ section.settings.etiquette | default: "Fait cette semaine" }}</span>
    <h1>{{ section.settings.titre | default: "Le goût du fait maison" }}</h1>
    <p>{{ section.settings.texte | default: "Des objets simples et chaleureux, fabriqués en petites séries par des artisans passionnés." }}</p>
    <a class="nn-vp__btn" href="{{ section.settings.lien | default: '/collections/all' }}">{{ section.settings.bouton | default: "Entrer dans l'atelier" }}</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 : confiance-carnet-artisan -->
<section class="nn-ca">
  <div class="nn-ca__page">
    <img class="nn-ca__portrait" src="https://images.unsplash.com/photo-1503602642458-232111445657?w=700&q=80" alt="L'atelier" loading="lazy">
    <div class="nn-ca__mots">
      <h2>{{ section.settings.titre | default: "Un mot de l'atelier" }}</h2>
      <blockquote>{{ section.settings.citation | default: "Chaque pièce passe entre mes mains avant de partir chez toi. Si elle ne me plaît pas, elle ne part pas." }}</blockquote>
      <svg class="nn-ca__signature" viewBox="0 0 240 70" aria-hidden="true"><path d="M8 50 C 30 10, 40 10, 44 46 S 70 60, 82 28 S 104 18, 110 44 S 140 58, 150 30 C 156 16, 170 16, 168 40 S 196 62, 232 22"/></svg>
      <div class="nn-ca__tampons"><span>Fait main</span><span>Petites séries</span><span>Réparable à vie</span></div>
    </div>
  </div>
</section>

<!-- Section : avis-damier-portraits -->
<section class="nn-dam">{% for block in section.blocks limit: 6 %}<div class="nn-dam__photo">{% if block.settings.photo %}{{ block.settings.photo | image_url: width: 700 | image_tag: loading: 'lazy' }}{% else %}{{ 'lifestyle-1' | placeholder_svg_tag }}{% endif %}</div><figure class="nn-dam__avis"><p>★★★★★</p><blockquote>{{ block.settings.texte }}</blockquote><figcaption>{{ block.settings.nom }}</figcaption></figure>{% endfor %}</section>

<!-- Section : footer-photo-parallax -->
<footer class="nn-fm nn-fm--photo-parallax" style="--a:{{ section.settings.accent }}"><img class="nn-fm__px" src="{{ section.settings.image }}" alt="" loading="lazy">
<div class="nn-fm__in"><div class="nn-fm__marque"><b>{{ section.settings.nom }}</b><p>{{ section.settings.accroche }}</p><p class="nn-fm__note"><span>★★★★★</span> 4,9/5 · 2 300 avis</p></div>
<nav class="nn-fm__liens">{% for l in section.settings.menu.links %}<a href="{{ l.url }}">{{ l.title }}</a>{% else %}<a href="/collections/all">Boutique</a><a href="/collections/all">Nouveautés</a><a href="/pages/contact">Contact</a><a href="/policies/shipping-policy">Livraison</a><a href="/policies/refund-policy">Retours</a>{% endfor %}</nav>
<form class="nn-fm__nl" method="post" action="/contact#contact_form"><input type="hidden" name="form_type" value="customer"><input type="hidden" name="contact[tags]" value="newsletter"><input type="email" name="contact[email]" placeholder="Ton e-mail pour -10 %" required><button type="submit">OK</button></form></div>
<p class="nn-fm__bas">© {{ 'now' | date: '%Y' }} {{ shop.name }} · Paiement sécurisé · Livraison 48 h</p></footer>

</div>
{% schema %}{"name":"Thème Café torréfié","settings":[]}{% endschema %}

{% stylesheet %}
/* header-annonce-defilante */
.nn-hb__band{background:#a3e635;color:#111;overflow:hidden;font-size:13px;font-weight:700}
.nn-hb__piste{display:flex;gap:40px;width:max-content;padding:8px 0;animation:nnHb 20s linear infinite}
@keyframes nnHb{to{transform:translateX(-50%)}}
.nn-hb__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#0a0a0a;color:#fff;padding:18px 5vw}
.nn-hb__bar a{color:#fff;text-decoration:none;font-size:14px}
.nn-hb__g,.nn-hb__d{display:flex;gap:20px}.nn-hb__d{justify-content:flex-end}
.nn-hb__logo{font-size:22px;font-weight:900;letter-spacing:3px;text-transform:uppercase}
@media(max-width:749px){.nn-hb__g{display:none}.nn-hb__bar{grid-template-columns:auto 1fr}}
/* heros-vapeur-tasse */
.nn-vp{display:grid;grid-template-columns:1.1fr 1fr;min-height:540px;background:#2b1d14;color:#f3e7d7;font-family:"DM Sans",sans-serif}
.nn-vp__photo{position:relative;overflow:hidden}
.nn-vp__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25) contrast(1.05)}
.nn-vp__vapeur{position:absolute;left:45%;bottom:30%}
.nn-vp__vapeur i{position:absolute;bottom:0;width:22px;height:120px;border-radius:50%;background:linear-gradient(transparent,rgba(255,255,255,.55),transparent);filter:blur(8px);animation:nnVpMonte 4s ease-in infinite;opacity:0}
.nn-vp__vapeur i:nth-child(2){left:26px;animation-delay:1.3s}.nn-vp__vapeur i:nth-child(3){left:-24px;animation-delay:2.6s}
@keyframes nnVpMonte{0%{transform:translateY(0) scaleX(1);opacity:0}30%{opacity:.8}100%{transform:translateY(-160px) scaleX(2.4) rotate(12deg);opacity:0}}
.nn-vp__texte{display:flex;flex-direction:column;justify-content:center;padding:56px 8%}
.nn-vp__etiquette{align-self:flex-start;border:1px dashed #d39b5f;color:#d39b5f;padding:6px 14px;border-radius:4px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;margin-bottom:18px;transform:rotate(-2deg)}
.nn-vp h1{font-family:"Fraunces",Georgia,serif;font-size:clamp(34px,5vw,60px);line-height:1.05;margin:0 0 16px;font-weight:600}
.nn-vp p{font-size:17px;opacity:.85;margin:0 0 28px;max-width:440px}
.nn-vp__btn{align-self:flex-start;background:#d39b5f;color:#2b1d14;padding:15px 28px;border-radius:10px;font-weight:800;text-decoration:none;transition:transform .2s,background .2s}
.nn-vp__btn:hover{transform:translateY(-3px);background:#e6b179}
@media(max-width:760px){.nn-vp{grid-template-columns:1fr}.nn-vp__photo{height:320px}}
@media(prefers-reduced-motion:reduce){.nn-vp__vapeur{display:none}}
/* 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; }
}
/* confiance-carnet-artisan */
.nn-ca{padding:72px 6%;background:#3a281c;font-family:"DM Sans",sans-serif}
.nn-ca__page{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;max-width:1000px;margin:0 auto;background:#f6ecdc;color:#3b2a1a;padding:40px;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.35);background-image:repeating-linear-gradient(transparent 0 31px,rgba(139,74,31,.12) 31px 32px)}
.nn-ca__portrait{width:100%;aspect-ratio:3/4;object-fit:cover;border:8px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.2);transform:rotate(-3deg)}
.nn-ca h2{font-family:"Fraunces",Georgia,serif;font-size:32px;margin:0 0 14px}
.nn-ca blockquote{font-family:"Caveat","Fraunces",cursive;font-size:26px;line-height:1.3;margin:0 0 10px}
.nn-ca__signature{width:200px;height:60px;fill:none;stroke:#8b4a1f;stroke-width:3;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600}
.nn-ca.est-visible .nn-ca__signature{animation:nnCaSigne 2.4s ease forwards}
@keyframes nnCaSigne{to{stroke-dashoffset:0}}
.nn-ca__tampons{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.nn-ca__tampons span{border:2px solid #b5532f;color:#b5532f;padding:6px 12px;border-radius:4px;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.06em;transform:rotate(-4deg)}
.nn-ca__tampons span:nth-child(2){transform:rotate(3deg)}
@media(max-width:760px){.nn-ca__page{grid-template-columns:1fr;padding:26px}.nn-ca__portrait{max-width:240px;margin:0 auto}}
/* avis-damier-portraits */
.nn-dam{display:grid;grid-template-columns:repeat(3,1fr);background:#111111}
.nn-dam>*{aspect-ratio:1;margin:0;opacity:0;transform:scale(.96);transition:opacity .7s,transform .7s}
.nn-dam.vu>*{opacity:1;transform:none}
.nn-dam>*:nth-child(2){transition-delay:.1s}.nn-dam>*:nth-child(3){transition-delay:.2s}.nn-dam>*:nth-child(4){transition-delay:.3s}.nn-dam>*:nth-child(5){transition-delay:.4s}.nn-dam>*:nth-child(6){transition-delay:.5s}
.nn-dam__photo img,.nn-dam__photo svg{width:100%;height:100%;object-fit:cover;background:#27272a}
.nn-dam__avis{display:flex;flex-direction:column;justify-content:center;padding:8%;color:#ffffff}
.nn-dam__avis:nth-of-type(odd){background:#fef3c7;color:#111111}
.nn-dam__avis p{color:#f59e0b;margin:0}.nn-dam__avis blockquote{margin:12px 0;font-size:clamp(15px,1.6vw,22px);line-height:1.4}
.nn-dam__avis figcaption{opacity:.7}
@media(max-width:749px){.nn-dam{grid-template-columns:1fr 1fr}}
/* footer-photo-parallax */
.nn-fm{position:relative;overflow:hidden;padding:70px 5vw 22px;font-family:inherit}
.nn-fm__in{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:36px;max-width:1200px;margin:0 auto;align-items:start}
.nn-fm__marque b{font-size:30px;letter-spacing:-.02em}.nn-fm__marque p{opacity:.75;margin:8px 0}
.nn-fm__note span{color:#f59e0b;letter-spacing:2px}
.nn-fm__liens{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.nn-fm__liens a{color:inherit;opacity:.8;text-decoration:none;transition:opacity .2s,transform .2s}.nn-fm__liens a:hover{opacity:1;transform:translateX(4px)}
.nn-fm__nl{display:flex;gap:8px}.nn-fm__nl input{flex:1;min-width:0;padding:14px 16px;border-radius:12px;border:1px solid rgba(127,127,127,.35);background:rgba(127,127,127,.08);color:inherit;font:inherit}
.nn-fm__nl button{padding:0 20px;border:0;border-radius:12px;background:var(--a);color:#ffffff;font-weight:700;cursor:pointer;transition:transform .2s}.nn-fm__nl button:hover{transform:scale(1.06)}
.nn-fm__bas{position:relative;z-index:2;text-align:center;opacity:.55;font-size:13px;margin:40px 0 0}
@media(max-width:749px){.nn-fm__in{grid-template-columns:1fr}}.nn-fm--photo-parallax{color:#ffffff;background:#000000}.nn-fm__px{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover;opacity:.5;will-change:transform}
{% endstylesheet %}

{% javascript %}
/* header-annonce-defilante */
// Animation CSS seule
/* heros-vapeur-tasse */
/* Aucun script requis */
/* 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);
})();
/* confiance-carnet-artisan */
document.querySelectorAll('.nn-ca').forEach(function(s){if(!('IntersectionObserver' in window)){s.classList.add('est-visible');return;}new IntersectionObserver(function(e,o){e.forEach(function(x){if(x.isIntersecting){s.classList.add('est-visible');o.disconnect();}});},{threshold:.3}).observe(s);});
/* avis-damier-portraits */
// Damier : cascade à l'apparition
document.querySelectorAll('.nn-dam').forEach(function(s){new IntersectionObserver(function(e,o){if(e[0].isIntersecting){s.classList.add('vu');o.disconnect();}}).observe(s);});
/* footer-photo-parallax */
// Parallax : la photo bouge moins vite que la page
document.querySelectorAll('.nn-fm__px').forEach(function(i){var f=i.parentNode;addEventListener('scroll',function(){var r=f.getBoundingClientRect();i.style.transform='translateY('+(r.top*-.2)+'px)';},{passive:true});});
{% endjavascript %}