Thème Restaurant sushi zen

<div class="nn-theme-compose" data-theme="theme-resto-sushi-zen">
<!-- 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-tapis-sushi -->
<section class="nn-ts">
  <div class="nn-ts__texte"><span>{{ section.settings.sur | default: "Omakase · Livraison · À emporter" }}</span><h1>{{ section.settings.titre | default: "Le Japon, roulé à la main" }}</h1><a href="{{ section.settings.lien | default: '/collections/all' }}" class="nn-ts__btn">{{ section.settings.bouton | default: "Commander" }}</a><a href="{{ section.settings.lien2 | default: '#reserver' }}" class="nn-ts__btn2">Réserver une table</a></div>
  <div class="nn-ts__tapis"><div class="nn-ts__piste">{% for i in (1..2) %}<b>🍣</b><b>🍙</b><b>🍤</b><b>🥢</b><b>🍱</b><b>🍣</b>{% endfor %}</div></div>
</section>

<!-- Section : fiche-plateau-sushis -->
<section class="nn-ps">
  <div class="nn-ps__plateau"><div class="nn-ps__pieces"></div><small class="nn-ps__vide">Ton plateau est vide</small></div>
  <div class="nn-ps__infos"><h2>{{ section.settings.titre | default: "Compose ton plateau" }}</h2>
    <div class="nn-ps__choix"><button data-e="🍣" data-p="2.2">Nigiri saumon <span>2,20 €</span></button><button data-e="🍙" data-p="1.8">Onigiri <span>1,80 €</span></button><button data-e="🍤" data-p="2.6">Tempura crevette <span>2,60 €</span></button><button data-e="🥟" data-p="1.5">Gyoza <span>1,50 €</span></button></div>
    <p class="nn-ps__total"><b class="n">0</b> pièces · <b class="t">0,00 €</b></p><button class="nn-ps__reset">Vider</button><a class="nn-ps__btn">Commander ce plateau</a></div>
</section>

<!-- Section : carrousel-categories-rondes -->
<section class="nn-bul"><div class="nn-bul__liste">{% for block in section.blocks %}<a class="nn-bul__item" href="{{ block.settings.lien }}"><span class="nn-bul__anneau"><span class="nn-bul__img">{% if block.settings.image %}{{ block.settings.image | image_url: width: 200 | image_tag: loading: 'lazy' }}{% else %}{{ 'collection-1' | placeholder_svg_tag }}{% endif %}</span></span><b>{{ block.settings.nom }}</b></a>{% endfor %}</div></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-bento-verre -->
{%- comment -%} NAHNAH AI · Pied de page bento en verre (bibliothèque Sections & effets) {%- endcomment -%}
<footer class="nn-footer-bento-verre" 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-h1: {{ section.settings.halo_1 }}; --nn-h2: {{ section.settings.halo_2 }};">
  <span class="nn-footer-bento-verre__halo nn-footer-bento-verre__halo--1" aria-hidden="true"></span><span class="nn-footer-bento-verre__halo nn-footer-bento-verre__halo--2" aria-hidden="true"></span>
  <div class="nn-footer-bento-verre__grille">
    <div class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--marque">
      <p class="nn-footer-bento-verre__nom">{{ shop.name | escape }}</p>
      {%- if section.settings.accroche != blank -%}<p class="nn-footer-bento-verre__accroche">{{ section.settings.accroche | escape }}</p>{%- endif -%}
      {%- if section.settings.texte != blank -%}<p class="nn-footer-bento-verre__petit">{{ section.settings.texte | escape }}</p>{%- endif -%}
    </div>
    <nav class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--menu" aria-label="{{ section.settings.menu.title | default: 'Pied de page' | escape }}">
      <p class="nn-footer-bento-verre__etiquette">{{ section.settings.menu.title | escape }}</p>
      <ul role="list">
        {%- for link in section.settings.menu.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}
      </ul>
    </nav>
    <div class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--contact">
      <p class="nn-footer-bento-verre__etiquette">Contact</p>
      {%- assign nn_mail = section.settings.email | default: shop.email -%}
      {%- if nn_mail != blank -%}<a href="mailto:{{ nn_mail }}">{{ nn_mail | escape }}</a>{%- endif -%}
      {%- if section.settings.telephone != blank -%}<a href="tel:{{ section.settings.telephone | remove: ' ' }}">{{ section.settings.telephone | escape }}</a>{%- endif -%}
      {%- if section.settings.instagram != blank or section.settings.tiktok != blank or section.settings.pinterest != blank or section.settings.youtube != blank -%}
        <ul class="nn-footer-bento-verre__reseaux" role="list">
          {%- if section.settings.instagram != blank -%}<li><a href="{{ section.settings.instagram }}">Instagram</a></li>{%- endif -%}
          {%- if section.settings.tiktok != blank -%}<li><a href="{{ section.settings.tiktok }}">TikTok</a></li>{%- endif -%}
          {%- if section.settings.pinterest != blank -%}<li><a href="{{ section.settings.pinterest }}">Pinterest</a></li>{%- endif -%}
          {%- if section.settings.youtube != blank -%}<li><a href="{{ section.settings.youtube }}">YouTube</a></li>{%- endif -%}
        </ul>
      {%- endif -%}
    </div>
    <div class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--news">
      <p class="nn-footer-bento-verre__etiquette">{{ section.settings.titre_newsletter | escape }}</p>
      {%- form 'customer', class: 'nn-footer-bento-verre__form' -%}
        <input type="hidden" name="contact[tags]" value="newsletter">
        <div class="nn-footer-bento-verre__champs">
          <label class="nn-footer-bento-verre__sr" for="nn-email-{{ section.id }}">Adresse e-mail</label>
          <input id="nn-email-{{ section.id }}" type="email" name="contact[email]" required autocomplete="email" placeholder="ton@email.fr">
          <button type="submit">OK</button>
        </div>
      {%- endform -%}
    </div>
    <p class="nn-footer-bento-verre__tuile nn-footer-bento-verre__tuile--bas">© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</p>
  </div>
</footer>


</div>
{% schema %}{"name":"Thème Restaurant sushi zen","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-tapis-sushi */
.nn-ts{min-height:560px;display:grid;grid-template-rows:1fr auto;background:#f5f1ea;color:#1a1a1a;font-family:"Inter",sans-serif;overflow:hidden}
.nn-ts__texte{display:grid;align-content:center;justify-items:center;text-align:center;padding:60px 6% 30px}
.nn-ts__texte span{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#c8102e}
.nn-ts h1{font-family:"Noto Serif JP","Fraunces",serif;font-weight:500;font-size:clamp(40px,6.5vw,86px);letter-spacing:-.02em;margin:14px 0 28px}
.nn-ts__btn,.nn-ts__btn2{display:inline-block;margin:4px;padding:15px 30px;border-radius:999px;font-weight:700;text-decoration:none}
.nn-ts__btn{background:#1a1a1a;color:#fff}.nn-ts__btn2{border:1.5px solid #1a1a1a;color:#1a1a1a}
.nn-ts__tapis{position:relative;height:150px;background:#2b2b2b;border-top:10px solid #c8102e;overflow:hidden}
.nn-ts__tapis::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.07) 58px 60px);animation:nnTsTapis 2s linear infinite}
@keyframes nnTsTapis{to{background-position:60px 0}}
.nn-ts__piste{display:flex;gap:70px;width:max-content;padding:28px 0;animation:nnTsDefile 18s linear infinite}
.nn-ts__piste b{display:grid;place-items:center;width:94px;height:94px;border-radius:50%;background:#fff;border:6px solid #e9e1d4;font-size:46px;box-shadow:0 10px 20px rgba(0,0,0,.35)}
@keyframes nnTsDefile{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.nn-ts *{animation:none!important}}
/* fiche-plateau-sushis */
.nn-ps{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:72px 7%;background:#fff;color:#1a1a1a;font-family:"Inter",sans-serif}
.nn-ps__plateau{position:relative;aspect-ratio:1.4;border-radius:18px;background:#c89b6d repeating-linear-gradient(90deg,transparent 0 22px,rgba(0,0,0,.05) 22px 24px);box-shadow:inset 0 0 0 10px #a97b4f,0 24px 40px rgba(0,0,0,.15);display:grid;place-items:center;padding:30px}
.nn-ps__pieces{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:40px}
.nn-ps__pieces i{font-style:normal;animation:nnPsPose .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes nnPsPose{from{transform:translateY(-60px) scale(.5);opacity:0}}
.nn-ps__vide{position:absolute;color:#6b4a2b}
.nn-ps h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(28px,4vw,42px);margin:0 0 18px}
.nn-ps__choix{display:grid;gap:8px}
.nn-ps__choix button{display:flex;justify-content:space-between;border:1px solid #e5e0d8;background:#faf8f4;padding:14px 16px;border-radius:12px;font-size:15px;cursor:pointer;transition:transform .15s,border-color .2s}
.nn-ps__choix button:active{transform:scale(.97)}.nn-ps__choix button:hover{border-color:#c8102e}
.nn-ps__total{font-size:18px;margin:20px 0 8px}.nn-ps__total .t{color:#c8102e;font-size:26px}
.nn-ps__reset{background:none;border:0;text-decoration:underline;cursor:pointer;padding:0;margin-bottom:12px}
.nn-ps__btn{display:block;text-align:center;background:#1a1a1a;color:#fff;padding:16px;border-radius:999px;font-weight:700;cursor:pointer}
@media(max-width:760px){.nn-ps{grid-template-columns:1fr}}
/* carrousel-categories-rondes */
.nn-bul{padding:30px 5vw;background:#ffffff}
.nn-bul__liste{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;justify-content:safe center}
.nn-bul__item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#111111;font-size:14px}
.nn-bul__anneau{position:relative;width:86px;height:86px;border-radius:50%;padding:3px;overflow:hidden;transition:transform .25s}
.nn-bul__anneau::before{content:"";position:absolute;inset:-50%;background:conic-gradient(#f59e0b,#ec4899,#8b5cf6,#f59e0b);animation:nnBul 4s linear infinite}
.nn-bul__img{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid #ffffff;background:#f4f4f5}
.nn-bul__img img,.nn-bul__img svg{width:100%;height:100%;object-fit:cover}
.nn-bul__item:hover .nn-bul__anneau{transform:scale(1.08)}
@keyframes nnBul{to{transform:rotate(360deg)}}
/* 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-bento-verre */
.nn-footer-bento-verre { position: relative; display: block; overflow: hidden; padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); isolation: isolate; }
.nn-footer-bento-verre__halo { position: absolute; z-index: -1; width: 46vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: 0.55; pointer-events: none; }
.nn-footer-bento-verre__halo--1 { left: -8%; top: -20%; background: var(--nn-h1); animation: nn-footer-bento-verre-derive 14s ease-in-out infinite alternate; }
.nn-footer-bento-verre__halo--2 { right: -10%; bottom: -30%; background: var(--nn-h2); animation: nn-footer-bento-verre-derive 18s ease-in-out -6s infinite alternate-reverse; }
.nn-footer-bento-verre__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1200px; margin: 0 auto; }
.nn-footer-bento-verre__tuile { margin: 0; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s; }
.nn-footer-bento-verre__tuile:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.28); }
.nn-footer-bento-verre__tuile--marque { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; }
.nn-footer-bento-verre__tuile--news { grid-column: span 2; }
.nn-footer-bento-verre__tuile--bas { grid-column: 1 / -1; padding: 14px 22px; font-size: 13px; opacity: 0.7; }
.nn-footer-bento-verre__nom { margin: 0 0 auto; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.nn-footer-bento-verre__accroche { margin: 30px 0 8px; font-size: clamp(24px, 3vw, 38px); font-weight: 700; line-height: 1.1; }
.nn-footer-bento-verre__petit { margin: 0; opacity: 0.7; font-size: 14px; }
.nn-footer-bento-verre__etiquette { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nn-accent); }
.nn-footer-bento-verre ul { margin: 0; padding: 0; list-style: none; }
.nn-footer-bento-verre__tuile--menu li + li { margin-top: 6px; }
.nn-footer-bento-verre a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s; }
.nn-footer-bento-verre a:hover, .nn-footer-bento-verre a:focus-visible { background-size: 100% 1px; }
.nn-footer-bento-verre a:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 2px; }
.nn-footer-bento-verre__tuile--contact { display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.nn-footer-bento-verre__reseaux { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px !important; font-size: 14px; }
.nn-footer-bento-verre__champs { display: flex; gap: 8px; }
.nn-footer-bento-verre__champs input[type="email"] { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; background: rgba(0, 0, 0, 0.25); color: inherit; font: inherit; }
.nn-footer-bento-verre__champs input:focus-visible { outline: 2px solid var(--nn-accent); }
.nn-footer-bento-verre__champs button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--nn-accent); color: #0C0D14; font: inherit; font-weight: 700; cursor: pointer; }
.nn-footer-bento-verre__merci { margin: 8px 0 0; font-size: 13px; }
.nn-footer-bento-verre__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes nn-footer-bento-verre-derive { from { transform: translate(0, 0) scale(1); } to { transform: translate(12%, 18%) scale(1.15); } }
@media (max-width: 749px) {
  .nn-footer-bento-verre__grille { grid-template-columns: 1fr 1fr; }
  .nn-footer-bento-verre__tuile--marque, .nn-footer-bento-verre__tuile--news { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nn-footer-bento-verre *, .nn-footer-bento-verre *::before, .nn-footer-bento-verre *::after { animation: none !important; transition: none !important; }
}
{% 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-tapis-sushi */
/* Aucun script requis */
/* fiche-plateau-sushis */
document.querySelectorAll('.nn-ps').forEach(function(s){var n=0,t=0,p=s.querySelector('.nn-ps__pieces'),v=s.querySelector('.nn-ps__vide');function aff(){s.querySelector('.n').textContent=n;s.querySelector('.t').textContent=t.toFixed(2).replace('.',',')+' €';v.style.display=n?'none':'';}s.querySelectorAll('[data-e]').forEach(function(b){b.addEventListener('click',function(){if(n>=24)return;var i=document.createElement('i');i.textContent=b.dataset.e;p.appendChild(i);n++;t+=+b.dataset.p;aff();});});s.querySelector('.nn-ps__reset').addEventListener('click',function(){p.innerHTML='';n=0;t=0;aff();});aff();});
/* carrousel-categories-rondes */
// Bulles : CSS seul
/* 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-bento-verre */
{% endjavascript %}