Thème Tech minimal blanc

<div class="nn-theme-compose" data-theme="theme-tech-minimal">
<!-- 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-produit-eclate -->
<section class="nn-pe">
  <div class="nn-pe__texte"><span class="nn-pe__sur">{{ section.settings.sur | default: "Nouveau" }}</span><h1>{{ section.settings.titre | default: "Pensé jusqu'au moindre détail." }}</h1><a class="nn-pe__btn" href="{{ section.settings.lien | default: '/collections/all' }}">{{ section.settings.bouton | default: "Commander" }}</a></div>
  <div class="nn-pe__scene">
    <div class="nn-pe__couche c1"><span>Coque aluminium recyclé</span></div>
    <div class="nn-pe__couche c2"><span>Batterie 40 h</span></div>
    <div class="nn-pe__couche c3"><span>Puce silencieuse</span></div>
    <div class="nn-pe__couche c4"><span>Verre trempé</span></div>
  </div>
</section>

<!-- Section : fiche-comparateur-specs -->
<section class="nn-cp">
  <h2>{{ section.settings.titre | default: "Quel modèle est fait pour toi ?" }}</h2>
  <div class="nn-cp__onglets"><button data-m="0">Essentiel</button><button data-m="1" class="est-actif">Pro</button><button data-m="2">Max</button></div>
  <div class="nn-cp__specs">
    <div><span>Autonomie</span><div class="nn-cp__barre"><i data-v="50,75,100"></i></div></div>
    <div><span>Puissance</span><div class="nn-cp__barre"><i data-v="40,70,100"></i></div></div>
    <div><span>Silence</span><div class="nn-cp__barre"><i data-v="60,85,95"></i></div></div>
    <div><span>Stockage</span><div class="nn-cp__barre"><i data-v="25,50,100"></i></div></div>
  </div>
  <p class="nn-cp__prix"><b data-p="149 €,249 €,349 €">249 €</b> <small>ou 3 fois sans frais</small></p>
</section>

<!-- 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-geant-wordmark -->
<footer class="nn-fg"><div class="nn-fg__haut"><div><h3>{{ section.settings.accroche }}</h3><form class="nn-fg__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" required><button type="submit">→</button></form></div>
{% for block in section.blocks %}<div class="nn-fg__col"><b>{{ block.settings.titre }}</b>{% for l in block.settings.menu.links %}<a href="{{ l.url }}">{{ l.title }}</a>{% endfor %}</div>{% endfor %}</div>
<div class="nn-fg__nom">{{ section.settings.nom | default: shop.name }}</div><p class="nn-fg__bas">© {{ 'now' | date: '%Y' }} {{ shop.name }}</p></footer>

</div>
{% schema %}{"name":"Thème Tech minimal blanc","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-produit-eclate */
.nn-pe{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;padding:80px 6%;background:#fafafa;color:#111;font-family:Inter,sans-serif;--e:0}
.nn-pe__sur{color:#2563eb;font-weight:700;font-size:14px}
.nn-pe h1{font-size:clamp(36px,5vw,64px);letter-spacing:-.03em;line-height:1.02;margin:10px 0 28px;font-weight:700}
.nn-pe__btn{display:inline-block;background:#111;color:#fff;padding:14px 28px;border-radius:999px;text-decoration:none;font-weight:600}
.nn-pe__scene{position:relative;height:420px;perspective:1000px}
.nn-pe__couche{position:absolute;left:20%;top:30%;width:60%;height:38%;border-radius:22px;transform:rotateX(58deg) rotateZ(-30deg) translateZ(calc(var(--i)*var(--e)*70px));transition:transform .15s linear;box-shadow:0 20px 40px rgba(0,0,0,.08)}
.c1{--i:0;background:linear-gradient(135deg,#d4d4d8,#a1a1aa)}.c2{--i:1;background:#22c55e;opacity:.9}.c3{--i:2;background:#111}.c4{--i:3;background:rgba(147,197,253,.55);backdrop-filter:blur(4px);border:1px solid #fff}
.nn-pe__couche span{position:absolute;right:-150px;top:10px;transform:rotateZ(30deg) rotateX(-58deg);font-size:13px;font-weight:600;white-space:nowrap;opacity:var(--e);border-left:2px solid #2563eb;padding-left:8px}
@media(max-width:760px){.nn-pe{grid-template-columns:1fr}.nn-pe__couche span{right:-90px;font-size:11px}}
/* fiche-comparateur-specs */
.nn-cp{padding:72px 6%;background:#fff;color:#111;font-family:Inter,sans-serif;text-align:center}
.nn-cp h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;margin:0 0 24px}
.nn-cp__onglets{display:inline-flex;background:#f4f4f5;border-radius:999px;padding:5px;margin-bottom:34px}
.nn-cp__onglets button{border:0;background:none;padding:10px 24px;border-radius:999px;font-weight:600;cursor:pointer;transition:background .3s,color .3s}
.nn-cp__onglets button.est-actif{background:#111;color:#fff}
.nn-cp__specs{max-width:560px;margin:0 auto;display:grid;gap:18px;text-align:left}
.nn-cp__specs span{font-size:14px;font-weight:600}
.nn-cp__barre{height:10px;background:#f4f4f5;border-radius:999px;margin-top:6px;overflow:hidden}
.nn-cp__barre i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#22c55e);border-radius:999px;transition:width .6s cubic-bezier(.3,1.3,.5,1)}
.nn-cp__prix{margin:32px 0 0;font-size:32px}.nn-cp__prix small{font-size:14px;opacity:.6}
/* 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-geant-wordmark */
.nn-fg{background:#0a0a0a;color:#ffffff;padding:60px 5vw 20px;overflow:hidden}
.nn-fg__haut{display:grid;grid-template-columns:2fr repeat(auto-fit,minmax(140px,1fr));gap:40px}
.nn-fg h3{font-size:24px;margin:0 0 16px;max-width:380px}
.nn-fg__nl{display:flex;max-width:380px;border-bottom:1px solid #3f3f46}
.nn-fg__nl input{flex:1;background:transparent;border:0;color:#ffffff;padding:12px 0;font-size:16px;outline:none}
.nn-fg__nl button{background:none;border:0;color:#ffffff;font-size:22px;cursor:pointer;transition:transform .2s}
.nn-fg__nl button:hover{transform:translateX(6px)}
.nn-fg__col{display:flex;flex-direction:column;gap:10px}
.nn-fg__col b{color:#a1a1aa;font-size:13px;text-transform:uppercase;letter-spacing:1px}
.nn-fg__col a{color:#ffffff;text-decoration:none;opacity:.85;transition:opacity .2s}.nn-fg__col a:hover{opacity:1}
.nn-fg__nom{font-size:clamp(70px,19vw,300px);font-weight:900;line-height:.85;letter-spacing:-.04em;margin-top:60px;text-align:center;background:linear-gradient(180deg,#ffffff,#3f3f46);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(40%);opacity:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity 1.2s}
.nn-fg__nom.vu{transform:none;opacity:1}
.nn-fg__bas{color:#71717a;font-size:13px;text-align:center;margin-top:20px}
{% 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})});
/* heros-produit-eclate */
document.querySelectorAll('.nn-pe').forEach(function(s){if(matchMedia('(prefers-reduced-motion: reduce)').matches){s.style.setProperty('--e',1);return;}function maj(){var r=s.getBoundingClientRect(),h=innerHeight,p=Math.min(1,Math.max(0,(h-r.top)/(h*0.9)));s.style.setProperty('--e',p.toFixed(3));}addEventListener('scroll',maj,{passive:true});maj();});
/* fiche-comparateur-specs */
document.querySelectorAll('.nn-cp').forEach(function(s){function choisir(m){s.querySelectorAll('[data-m]').forEach(function(b){b.classList.toggle('est-actif',+b.dataset.m===m)});s.querySelectorAll('[data-v]').forEach(function(i){i.style.width=i.dataset.v.split(',')[m]+'%'});var p=s.querySelector('[data-p]');p.textContent=p.dataset.p.split(',')[m];}s.querySelectorAll('[data-m]').forEach(function(b){b.addEventListener('click',function(){choisir(+b.dataset.m)})});setTimeout(function(){choisir(1)},200);});
/* 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-geant-wordmark */
// Nom géant : se révèle quand il arrive à l'écran
document.querySelectorAll('.nn-fg__nom').forEach(function(n){new IntersectionObserver(function(e,o){if(e[0].isIntersecting){n.classList.add('vu');o.disconnect();}}).observe(n);});
{% endjavascript %}