Pizza à garnir

<section class="nn-pg2">
  <div class="nn-pg2__pizza"><div class="nn-pg2__garn"></div></div>
  <div class="nn-pg2__infos"><h2>{{ section.settings.titre | default: "Ta pizza sur mesure" }}</h2><p>Base tomate et mozzarella · 9 €</p>
    <div class="nn-pg2__choix"><button data-e="🍄" data-p="1.5">Champignons</button><button data-e="🫒" data-p="1">Olives</button><button data-e="🌶️" data-p="1">Piment</button><button data-e="🥓" data-p="2">Jambon</button><button data-e="🍅" data-p="1">Tomates cerises</button><button data-e="🌿" data-p="0.5">Basilic</button></div>
    <p class="nn-pg2__total">Total <b>9,00 €</b> · cuisson <span>90 s</span></p><a class="nn-pg2__btn">Ajouter à la commande</a></div>
</section>
{% schema %}{"name":"Pizza à garnir","settings":[{"type":"text","id":"titre","label":"Titre","default":"Ta pizza sur mesure"}],"presets":[{"name":"Pizza à garnir"}]}{% endschema %}

{% stylesheet %}
.nn-pg2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:72px 7%;background:#fbeee0;color:#1d1310;font-family:"DM Sans",sans-serif}
.nn-pg2__pizza{position:relative;width:min(340px,90%);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle,#f6d27a 0 50%,#e8b15a 51% 60%,#c43c1f 61% 86%,#d99a52 87%);box-shadow:0 24px 50px rgba(0,0,0,.25);overflow:hidden}
.nn-pg2__garn i{position:absolute;font-style:normal;font-size:30px;animation:nnPg2Tombe .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes nnPg2Tombe{from{transform:translateY(-200px) rotate(-90deg);opacity:0}}
.nn-pg2 h2{font-family:"Fraunces",serif;font-size:clamp(28px,4vw,42px);margin:0}
.nn-pg2__choix{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.nn-pg2__choix button{border:1.5px solid #e8cdb0;background:#fff;padding:12px;border-radius:12px;cursor:pointer;font-size:15px}
.nn-pg2__choix button.est-actif{background:#e4572e;border-color:#e4572e;color:#fff}
.nn-pg2__total{font-size:18px;margin:20px 0}.nn-pg2__total b{font-size:26px;color:#e4572e}
.nn-pg2__btn{display:block;text-align:center;background:#1d1310;color:#fff;padding:16px;border-radius:999px;font-weight:700;cursor:pointer}
@media(max-width:760px){.nn-pg2{grid-template-columns:1fr}}
{% endstylesheet %}

{% javascript %}
document.querySelectorAll('.nn-pg2').forEach(function(s){var g=s.querySelector('.nn-pg2__garn');function maj(){var a=s.querySelectorAll('.nn-pg2__choix .est-actif'),t=9;a.forEach(function(b){t+=+b.dataset.p});s.querySelector('.nn-pg2__total b').textContent=t.toFixed(2).replace('.',',')+' €';s.querySelector('.nn-pg2__total span').textContent=(90+a.length*5)+' s';}s.querySelectorAll('[data-e]').forEach(function(b){b.addEventListener('click',function(){b.classList.toggle('est-actif');if(b.classList.contains('est-actif')){for(var k=0;k<5;k++){var i=document.createElement('i');i.textContent=b.dataset.e;i.dataset.e=b.dataset.e;var a=Math.random()*6.28,r=15+Math.random()*25;i.style.left=(45+Math.cos(a)*r)+'%';i.style.top=(45+Math.sin(a)*r)+'%';i.style.animationDelay=(k*.06)+'s';g.appendChild(i);}}else g.querySelectorAll('[data-e="'+b.dataset.e+'"]').forEach(function(i){i.remove()});maj();});});maj();});
{% endjavascript %}