Thème Cubiscule

{%- comment -%} NAHNAH AI · Thème Cubiscule. Ambiance et structure inspirées du modèle gratuit « Ferrow » de Naved (navedux, illos.dev) sur 21st.dev (https://21st.dev/community/templates/ferrow). Aucune licence indiquée pour le code sur la page du modèle et illustrations Illos non redistribuables : aucun code ni illustration repris, dessins et code originaux NAHNAH AI. {%- endcomment -%}
<div class="nn-themes-cubiscule" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-second: {{ section.settings.couleur_second }}; --nn-font: 'Newsreader','Iowan Old Style',Georgia,serif; --nn-font2: 'Inter',system-ui,-apple-system,sans-serif; --nn-mono: 'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;">
  <header class="nn-themes-cubiscule__entete" data-nn-entete>
    <a class="nn-themes-cubiscule__marque" href="{{ routes.root_url }}">{%- if section.settings.logo != blank -%}{{ section.settings.logo | image_url: width: 240 | image_tag: alt: shop.name, height: 32, style: 'height:32px;width:auto' }}{%- else -%}<span class="nn-themes-cubiscule__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h7v7H4zM13 13h7v7h-7z"/><path d="M13 4h7v7h-7z" opacity=".45"/></svg></span><span>{{ section.settings.nom_marque | default: shop.name | escape }}</span>{%- endif -%}</a>
    <nav class="nn-themes-cubiscule__nav" id="nn-themes-cubiscule-nav-{{ section.id }}" aria-label="Menu principal">{%- for l in section.settings.menu.links limit: 6 -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav>
    <div class="nn-themes-cubiscule__actions">
      <a class="nn-themes-cubiscule__icone" href="{{ routes.search_url }}" aria-label="Rechercher"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg></a>
      <a class="nn-themes-cubiscule__panier" href="{{ routes.cart_url }}">Panier <span class="nn-themes-cubiscule__compte">{{ cart.item_count }}</span></a>
      <button class="nn-themes-cubiscule__burger" type="button" aria-expanded="false" aria-controls="nn-themes-cubiscule-nav-{{ section.id }}" data-nn-burger><span aria-hidden="true"></span><span aria-hidden="true"></span><span class="nn-themes-cubiscule__vh">Ouvrir le menu</span></button>
    </div>
  </header>
  <section class="nn-themes-cubiscule__heros">
    {%- if section.settings.surtitre != blank -%}<p class="nn-themes-cubiscule__etiquette" data-nn-apparition><i></i>{{ section.settings.surtitre | escape }}</p>{%- endif -%}
    <h1 data-nn-apparition style="--nn-i: 1">{{ section.settings.titre | escape }}{%- if section.settings.titre_suite != blank -%}<br>{{ section.settings.titre_suite | escape }}{%- endif -%}</h1>
    <div class="nn-themes-cubiscule__heros-ligne" data-nn-apparition style="--nn-i: 2">
      <p>{{ section.settings.texte | escape }}</p>
      <div class="nn-themes-cubiscule__boutons"><a class="nn-themes-cubiscule__bouton" href="{{ section.settings.lien_bouton | default: routes.all_products_collection_url }}">{{ section.settings.bouton | escape }}</a>{%- if section.settings.bouton2 != blank -%}<a class="nn-themes-cubiscule__bouton nn-themes-cubiscule__bouton--second" href="{{ section.settings.lien_bouton2 | default: '#vedettes' }}">{{ section.settings.bouton2 | escape }}</a>{%- endif -%}</div>
    </div>
    <div class="nn-themes-cubiscule__plateau" data-nn-apparition data-nn-plateau style="--nn-i: 3">
      <svg viewBox="80 -10 560 310" aria-hidden="true">{%- for c in (1..3) -%}<g class="nn-themes-cubiscule__couche" style="--nn-c: {{ c }}"><polygon class="nn-themes-cubiscule__tranche-g" points="170,120 300,195 300,207 170,132"/><polygon class="nn-themes-cubiscule__tranche-d" points="300,195 430,120 430,132 300,207"/>{%- for i in (0..4) -%}{%- for j in (0..4) -%}{%- assign nn_cx = i | minus: j | times: 26 | plus: 300 -%}{%- assign nn_cy = i | plus: j | times: 15 | plus: 60 -%}<polygon class="nn-themes-cubiscule__case"{% if c == 3 %} data-nn-case{% endif %} points="{{ nn_cx }},{{ nn_cy | minus: 13 }} {{ nn_cx | plus: 23 }},{{ nn_cy }} {{ nn_cx }},{{ nn_cy | plus: 13 }} {{ nn_cx | minus: 23 }},{{ nn_cy }}"/>{%- endfor -%}{%- endfor -%}<path class="nn-themes-cubiscule__repere" d="M436 126h40"/><text class="nn-themes-cubiscule__txt" x="484" y="130">NIVEAU {{ c }}</text></g>{%- endfor -%}</svg>
    </div>
  </section>
  <section class="nn-themes-cubiscule__bloc" id="collections">
<div class="nn-themes-cubiscule__tete" data-nn-apparition><h2>{{ section.settings.titre_collections | escape }}</h2>{%- if section.settings.texte_collections != blank -%}<p>{{ section.settings.texte_collections | escape }}</p>{%- endif -%}</div>
    <div class="nn-themes-cubiscule__collections">
      {%- for block in section.blocks -%}{%- if block.type == 'collection' -%}
      {%- assign col = block.settings.collection -%}
      <a class="nn-themes-cubiscule__collection" href="{{ col.url | default: routes.collections_url }}" data-nn-apparition style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <span class="nn-themes-cubiscule__media">{%- if col.featured_image -%}{{ col.featured_image | image_url: width: 700 | image_tag: loading: 'lazy', alt: col.title }}{%- else -%}{{ 'collection-1' | placeholder_svg_tag }}{%- endif -%}</span>
        <span class="nn-themes-cubiscule__collection-texte"><strong>{{ block.settings.titre | default: col.title | default: 'Choisis une collection' | escape }}</strong>{%- if block.settings.texte != blank -%}<small>{{ block.settings.texte | escape }}</small>{%- endif -%}</span>
      </a>
      {%- endif -%}{%- endfor -%}
    </div>
</section>
  <section class="nn-themes-cubiscule__bloc" id="vedettes">
<div class="nn-themes-cubiscule__tete" data-nn-apparition><h2>{{ section.settings.titre_produits | escape }}</h2></div>
    {%- if section.settings.afficher_exemples or section.settings.collection_vedette == blank -%}
    <div class="nn-themes-cubiscule__produits">
      {%- for block in section.blocks -%}{%- if block.type == 'produit' -%}
      <article class="nn-themes-cubiscule__produit" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <div class="nn-themes-cubiscule__visuel" aria-hidden="true">{%- case block.settings.visuel -%}{%- when 'boite' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M22 48 60 32l38 16v40L60 104 22 88z"/><path d="M22 48l38 16 38-16M60 64v40"/><circle cx="80" cy="70" r="8"/><path d="M80 62V54M34 60l14 6M34 72l14 6"/></svg>{%- when 'cube' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M60 14 98 34v44L60 98 22 78V34z"/><path d="M22 34l38 20 38-20M60 54v44"/><path d="M35 41l38 20M47 27l38 20M41 52v30M48 56v30M73 61v30M86 54v30"/></svg>{%- when 'coeur' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M60 100C30 80 14 62 14 42c0-14 10-24 24-24 10 0 18 6 22 14 4-8 12-14 22-14 14 0 24 10 24 24 0 20-16 38-46 58z"/><path d="M60 32v26l-14 10M60 58l18 12M36 40l24 18"/></svg>{%- when 'logique' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="18" y="18" width="84" height="84" rx="8"/><path d="M46 18v84M74 18v84M18 46h84M18 74h84"/><circle cx="32" cy="32" r="6"/><circle cx="88" cy="60" r="6"/><path d="M54 82h12"/></svg>{%- endcase -%}</div>
        <span class="nn-themes-cubiscule__exemple">Exemple</span>
        <h3>{{ block.settings.titre | escape }}</h3>
        {%- if block.settings.detail != blank -%}<p>{{ block.settings.detail | escape }}</p>{%- endif -%}
        {%- if request.design_mode and block.settings.reference != blank -%}<small class="nn-themes-cubiscule__ref">Réf. fournisseur : {{ block.settings.reference | escape }}</small>{%- endif -%}
      </article>
      {%- endif -%}{%- endfor -%}
    </div>
    <p class="nn-themes-cubiscule__note">Produits d’exemple : choisis ta collection dans l’éditeur et décoche « Afficher les produits d’exemple ».</p>
    {%- else -%}
    <div class="nn-themes-cubiscule__produits">
      {%- for p in section.settings.collection_vedette.products limit: section.settings.nb_produits -%}
      <a class="nn-themes-cubiscule__produit" href="{{ p.url }}" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}">
        <span class="nn-themes-cubiscule__media">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: p.featured_image.alt | default: p.title }}{%- else -%}{{ 'product-1' | placeholder_svg_tag }}{%- endif -%}</span>
        <h3>{{ p.title | escape }}</h3>
        <span class="nn-themes-cubiscule__prix">{%- if p.compare_at_price > p.price -%}<s>{{ p.compare_at_price | money }}</s> {%- endif -%}{{ p.price | money }}</span>
      </a>
      {%- endfor -%}
    </div>
    {%- endif -%}
</section>
  <section class="nn-themes-cubiscule__bloc" id="histoire">
<div class="nn-themes-cubiscule__histoire">
      <div class="nn-themes-cubiscule__media nn-themes-cubiscule__histoire-media" data-nn-apparition>{%- if section.settings.image_histoire != blank -%}{{ section.settings.image_histoire | image_url: width: 1000 | image_tag: loading: 'lazy', alt: section.settings.titre_histoire }}{%- else -%}{{ 'lifestyle-2' | placeholder_svg_tag }}{%- endif -%}</div>
      <div class="nn-themes-cubiscule__histoire-texte" data-nn-apparition><h2>{{ section.settings.titre_histoire | escape }}</h2><div class="nn-themes-cubiscule__rte">{{ section.settings.texte_histoire }}</div></div>
    </div>
</section>
  <section class="nn-themes-cubiscule__bloc" id="avis">
<div class="nn-themes-cubiscule__tete" data-nn-apparition><h2>{{ section.settings.titre_avis | escape }}</h2></div>
    {%- assign nn_nb_avis = 0 -%}{%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}{%- assign nn_nb_avis = nn_nb_avis | plus: 1 -%}{%- endif -%}{%- endfor -%}
    {%- if nn_nb_avis > 0 -%}
    <div class="nn-themes-cubiscule__avis-liste">
      {%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}
      <figure class="nn-themes-cubiscule__avis" data-nn-apparition {{ block.shopify_attributes }}>
        <span class="nn-themes-cubiscule__etoiles" role="img" aria-label="Note : {{ block.settings.note }} sur 5">{%- for i in (1..5) -%}{%- if i <= block.settings.note -%}★{%- else -%}☆{%- endif -%}{%- endfor -%}</span>
        <blockquote>« {{ block.settings.texte | escape }} »</blockquote>
        <figcaption>{{ block.settings.prenom | escape }}{%- if block.settings.date != blank -%} · {{ block.settings.date | escape }}{%- endif -%}{%- if block.settings.achat_verifie -%} · Achat vérifié{%- endif -%}</figcaption>
      </figure>
      {%- endif -%}{%- endfor -%}
    </div>
    {%- if section.settings.mention_avis != blank -%}<p class="nn-themes-cubiscule__note">{{ section.settings.mention_avis | escape }}</p>{%- endif -%}
    {%- else -%}
    <div class="nn-themes-cubiscule__avis-vide" data-nn-apparition><span aria-hidden="true">☆☆☆☆☆</span><p>{{ section.settings.texte_sans_avis | escape }}</p></div>
    {%- endif -%}
    {%- if request.design_mode -%}<p class="nn-themes-cubiscule__note">Ajoute des blocs « Avis client » avec de vrais avis reçus : les blocs vides restent masqués.</p>{%- endif -%}
</section>
  <section class="nn-themes-cubiscule__bloc" id="faq">
<div class="nn-themes-cubiscule__tete" data-nn-apparition><h2>{{ section.settings.titre_faq | escape }}</h2></div>
    <div class="nn-themes-cubiscule__faq">
      {%- assign nn_q = 0 -%}
      {%- for block in section.blocks -%}{%- if block.type == 'faq' -%}{%- assign nn_q = nn_q | plus: 1 -%}
      <div class="nn-themes-cubiscule__question" data-nn-apparition {{ block.shopify_attributes }}>
        <button type="button" aria-expanded="false" aria-controls="nn-themes-cubiscule-r-{{ block.id }}" data-nn-question><span class="nn-themes-cubiscule__num">{% if nn_q < 10 %}0{% endif %}{{ nn_q }}</span><span>{{ block.settings.question | escape }}</span><span class="nn-themes-cubiscule__plus" aria-hidden="true"></span></button>
        <div class="nn-themes-cubiscule__reponse" id="nn-themes-cubiscule-r-{{ block.id }}" role="region"><div>{{ block.settings.reponse }}</div></div>
      </div>
      {%- endif -%}{%- endfor -%}
    </div>
</section>
  <footer class="nn-themes-cubiscule__pied">
    <div class="nn-themes-cubiscule__pied-grille">
      <div><a class="nn-themes-cubiscule__marque" href="{{ routes.root_url }}"><span class="nn-themes-cubiscule__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h7v7H4zM13 13h7v7h-7z"/><path d="M13 4h7v7h-7z" opacity=".45"/></svg></span><span>{{ section.settings.nom_marque | default: shop.name | escape }}</span></a><p>{{ section.settings.texte_pied | escape }}</p></div>
      <nav class="nn-themes-cubiscule__pied-liens" aria-label="Pied de page">{%- for l in section.settings.menu_pied.links -%}<a href="{{ l.url }}">{{ l.title | escape }}</a>{%- endfor -%}</nav>
      <div>
        <p class="nn-themes-cubiscule__pied-titre">{{ section.settings.titre_newsletter | escape }}</p>
        {%- form 'customer', id: 'nn-themes-cubiscule-newsletter' -%}<input type="hidden" name="contact[tags]" value="newsletter">{%- if form.posted_successfully? -%}<p>Merci, ton inscription est enregistrée.</p>{%- else -%}<label class="nn-themes-cubiscule__vh" for="nn-themes-cubiscule-courriel">E-mail</label><input id="nn-themes-cubiscule-courriel" type="email" name="contact[email]" placeholder="Ton e-mail" required autocomplete="email"><button type="submit">S’inscrire</button>{%- endif -%}{%- endform -%}
        <small>Désinscription possible à tout moment depuis chaque e-mail.</small>
      </div>
    </div>
    <p class="nn-themes-cubiscule__copyright">© {{ 'now' | date: '%Y' }} {{ section.settings.nom_marque | default: shop.name | escape }}</p>
  </footer>
</div>

{% schema %}
{"name":"Thème Cubiscule","tag":"section","class":"nn-th-cubiscule","settings":[{"type":"header","content":"En-tête"},{"type":"image_picker","id":"logo","label":"Logo (facultatif)","info":"Sans logo, le nom de marque s’affiche en texte."},{"type":"text","id":"nom_marque","label":"Nom de la marque","default":"Cubiscule"},{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"header","content":"Héros"},{"type":"text","id":"surtitre","label":"Surtitre","default":"Pièce après pièce"},{"type":"text","id":"titre","label":"Titre","default":"Des casse-tête,"},{"type":"text","id":"titre_suite","label":"Suite du titre (ton atténué ou accent)","default":"pour les mains et la tête."},{"type":"textarea","id":"texte","label":"Texte","default":"Maquettes en bois, cubes en métal et jeux de logique à assembler seul ou à plusieurs, pour ralentir un peu."},{"type":"text","id":"bouton","label":"Bouton principal","default":"Choisir un défi"},{"type":"url","id":"lien_bouton","label":"Lien du bouton principal"},{"type":"text","id":"bouton2","label":"Bouton secondaire","default":"Voir les jeux"},{"type":"url","id":"lien_bouton2","label":"Lien du bouton secondaire"},{"type":"header","content":"Collections"},{"type":"text","id":"titre_collections","label":"Titre","default":"Choisis ton défi"},{"type":"text","id":"texte_collections","label":"Texte","default":"Assembler, démonter ou réfléchir."},{"type":"header","content":"Produits vedettes"},{"type":"text","id":"titre_produits","label":"Titre","default":"À résoudre ce mois-ci"},{"type":"checkbox","id":"afficher_exemples","label":"Afficher les produits d’exemple","default":true,"info":"Décoche-la quand ta collection est prête : tes vrais produits et leurs prix s’afficheront."},{"type":"collection","id":"collection_vedette","label":"Collection vedette"},{"type":"range","id":"nb_produits","label":"Nombre de produits","min":2,"max":12,"step":1,"default":8},{"type":"header","content":"Histoire"},{"type":"text","id":"titre_histoire","label":"Titre","default":"Une soirée, une boîte, mille pièces"},{"type":"richtext","id":"texte_histoire","label":"Texte","default":"<p>Raconte ici d’où vient ta passion : un casse-tête offert, une maquette terminée à trois heures du matin, le plaisir du dernier déclic.</p><p>Explique comment tu sélectionnes des jeux qui tiennent vraiment la distance.</p>"},{"type":"image_picker","id":"image_histoire","label":"Image"},{"type":"header","content":"Avis clients"},{"type":"paragraph","content":"Saisis uniquement un avis réellement reçu, mot pour mot, avec l’accord du client. Inventer, acheter ou réécrire des avis est interdit (pratique commerciale trompeuse)."},{"type":"text","id":"titre_avis","label":"Titre","default":"Défis relevés"},{"type":"text","id":"texte_sans_avis","label":"Texte tant qu’aucun avis n’est saisi","default":"Pas encore d’avis publiés : les retours de nos clients s’afficheront ici, tels qu’ils nous les ont écrits."},{"type":"text","id":"mention_avis","label":"Mention sous les avis","default":"Avis saisis par la boutique à partir des messages reçus de ses clients, sans modification."},{"type":"header","content":"FAQ"},{"type":"text","id":"titre_faq","label":"Titre","default":"Questions fréquentes"},{"type":"header","content":"Pied de page"},{"type":"link_list","id":"menu_pied","label":"Menu","default":"footer"},{"type":"text","id":"texte_pied","label":"Texte","default":"Casse-tête, maquettes et jeux de logique à assembler."},{"type":"text","id":"titre_newsletter","label":"Titre newsletter","default":"Un nouveau défi chaque mois"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#141312"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#EDE8DF"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#2BB5A0"},{"type":"color","id":"couleur_second","label":"Secondaire","default":"#1D1B19"}],"blocks":[{"type":"collection","name":"Collection","limit":6,"settings":[{"type":"collection","id":"collection","label":"Collection"},{"type":"text","id":"titre","label":"Titre affiché (sinon celui de la collection)"},{"type":"text","id":"texte","label":"Petit texte"}]},{"type":"produit","name":"Produit d’exemple","limit":8,"settings":[{"type":"paragraph","content":"Carte marquée « Exemple », sans prix : à remplacer par ta collection vedette."},{"type":"text","id":"titre","label":"Nom du produit","default":"Produit d’exemple"},{"type":"text","id":"detail","label":"Détail"},{"type":"select","id":"visuel","label":"Visuel","options":[{"value":"boite","label":"Boîte à musique"},{"value":"cube","label":"Cube"},{"value":"coeur","label":"Cœur en bois"},{"value":"logique","label":"Jeu de logique"}],"default":"boite"},{"type":"text","id":"reference","label":"Référence fournisseur","info":"Visible seulement dans l’éditeur de thème."}]},{"type":"avis","name":"Avis client","settings":[{"type":"paragraph","content":"Saisis uniquement un avis réellement reçu, mot pour mot, avec l’accord du client. Inventer, acheter ou réécrire des avis est interdit (pratique commerciale trompeuse)."},{"type":"text","id":"prenom","label":"Prénom ou initiale du client"},{"type":"range","id":"note","label":"Note sur 5","min":1,"max":5,"step":1,"default":5},{"type":"textarea","id":"texte","label":"Texte de l’avis (tel que reçu)"},{"type":"text","id":"date","label":"Date de l’avis"},{"type":"checkbox","id":"achat_verifie","label":"Achat vérifié : coche seulement si tu as retrouvé la commande","default":false}]},{"type":"faq","name":"Question FAQ","settings":[{"type":"text","id":"question","label":"Question","default":"Ta question"},{"type":"richtext","id":"reponse","label":"Réponse","default":"<p>Ta réponse.</p>"}]}],"presets":[{"name":"Thème Cubiscule","blocks":[{"type":"collection","settings":{"titre":"Maquettes en bois","texte":"À assembler sans colle"}},{"type":"collection","settings":{"titre":"Casse-tête en métal","texte":"Pour les patients"}},{"type":"collection","settings":{"titre":"Jeux de logique","texte":"Seul ou à plusieurs"}},{"type":"produit","settings":{"titre":"Maquette 3D en bois : boîte à musique","detail":"À assembler, puis à remonter","visuel":"boite","reference":"CJ 2406270750531627200"}},{"type":"produit","settings":{"titre":"Cube casse-tête en aluminium","detail":"Se manipule sans fin","visuel":"cube","reference":"CJ 1514165039543103488"}},{"type":"produit","settings":{"titre":"Puzzle cœur en bois à message","detail":"Un cadeau à reconstituer","visuel":"coeur","reference":"CJ 1730058986096959488"}},{"type":"produit","settings":{"titre":"Jeu de logique et de concentration","detail":"Des grilles à résoudre vite","visuel":"logique","reference":"CJ 2406150900481611300"}},{"type":"faq","settings":{"question":"Quels sont les délais de livraison ?","reponse":"<p>Les colis partent avec suivi. Indique ici tes délais réels de préparation et de transport, pays par pays.</p>"}},{"type":"faq","settings":{"question":"Puis-je retourner un article ?","reponse":"<p>Tu disposes de 14 jours après réception pour exercer ton droit de rétractation. Précise ici tes conditions de retour et de remboursement.</p>"}},{"type":"faq","settings":{"question":"Comment choisir le niveau de difficulté ?","reponse":"<p>Chaque fiche indique le nombre de pièces et un niveau indicatif. Ajoute ici tes conseils selon l’âge et l’expérience.</p>"}},{"type":"faq","settings":{"question":"Quels moyens de paiement acceptez-vous ?","reponse":"<p>Liste ici les moyens de paiement réellement activés sur ta boutique.</p>"}}]}]}
{% endschema %}

{% stylesheet %}
/* NAHNAH AI · Thème Cubiscule : thème complet (code original NAHNAH AI) */
.nn-themes-cubiscule{position:relative;overflow:clip;background-color:var(--nn-fond);color:var(--nn-texte);font-family:var(--nn-font2);line-height:1.6;font-size:16px}
.nn-themes-cubiscule *{box-sizing:border-box}
.nn-themes-cubiscule a{color:inherit;text-decoration:none}
.nn-themes-cubiscule img,.nn-themes-cubiscule svg{display:block;max-width:100%}
.nn-themes-cubiscule h1,.nn-themes-cubiscule h2,.nn-themes-cubiscule h3{font-family:var(--nn-font);margin:0}
.nn-themes-cubiscule__vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nn-themes-cubiscule__entete{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:14px 16px;transition:padding .3s,box-shadow .3s,background-color .3s}
.nn-themes-cubiscule__entete.est-compact{padding-block:8px}
.nn-themes-cubiscule__marque{display:inline-flex;align-items:center;gap:10px;font-family:var(--nn-font);font-weight:700;font-size:20px;letter-spacing:-.01em}
.nn-themes-cubiscule__mono{display:inline-flex;width:26px;height:26px;color:var(--nn-accent)}
.nn-themes-cubiscule__mono svg{width:100%;height:100%}
.nn-themes-cubiscule__nav{display:none;gap:22px;margin:0 auto}
.nn-themes-cubiscule__nav a{position:relative;opacity:.8;transition:opacity .2s}
.nn-themes-cubiscule__nav a:hover{opacity:1}
.nn-themes-cubiscule__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nn-themes-cubiscule__icone{display:inline-flex;padding:6px}
.nn-themes-cubiscule__panier{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.nn-themes-cubiscule__compte{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--nn-accent);color:var(--nn-fond);font-size:12px}
.nn-themes-cubiscule__burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 9px;border:0;background:transparent;color:inherit;cursor:pointer}
.nn-themes-cubiscule__burger span[aria-hidden]{display:block;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-cubiscule.menu-ouvert .nn-themes-cubiscule__burger span[aria-hidden]:first-child{transform:translateY(3.5px) rotate(45deg)}
.nn-themes-cubiscule.menu-ouvert .nn-themes-cubiscule__burger span[aria-hidden]:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.nn-themes-cubiscule.menu-ouvert .nn-themes-cubiscule__nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;padding:16px;gap:14px;background:var(--nn-fond);border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-cubiscule__bloc{position:relative;max-width:1240px;margin:0 auto;padding:56px 16px}
.nn-themes-cubiscule__tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.nn-themes-cubiscule__tete h2{font-size:clamp(28px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em}
.nn-themes-cubiscule__tete p{margin:0;max-width:46ch;opacity:.75}
.nn-themes-cubiscule__collections{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.nn-themes-cubiscule__collection{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.nn-themes-cubiscule__media{display:block;overflow:hidden}
.nn-themes-cubiscule__media img,.nn-themes-cubiscule__media svg{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.nn-themes-cubiscule__collection .nn-themes-cubiscule__media{aspect-ratio:4/3}
.nn-themes-cubiscule__collection:hover .nn-themes-cubiscule__media img{transform:scale(1.05)}
.nn-themes-cubiscule__collection-texte{display:flex;flex-direction:column;gap:2px}
.nn-themes-cubiscule__collection-texte small{opacity:.7}
.nn-themes-cubiscule__produits{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.nn-themes-cubiscule__produit{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;transition:transform .35s,box-shadow .35s,border-color .35s}
.nn-themes-cubiscule__produit h3{font-size:17px;line-height:1.3;font-family:var(--nn-font2);font-weight:600}
.nn-themes-cubiscule__produit p{margin:0;font-size:14px;opacity:.72}
.nn-themes-cubiscule__produit .nn-themes-cubiscule__media{aspect-ratio:1}
.nn-themes-cubiscule__visuel{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.nn-themes-cubiscule__visuel svg{width:72%;height:72%}
.nn-themes-cubiscule__exemple{position:absolute;top:22px;left:22px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--nn-fond);color:var(--nn-texte);border:1px solid color-mix(in srgb,var(--nn-texte) 25%,transparent)}
.nn-themes-cubiscule__ref{font-size:11px;opacity:.6}
.nn-themes-cubiscule__prix{font-weight:700}
.nn-themes-cubiscule__prix s{opacity:.5;font-weight:400}
.nn-themes-cubiscule__note{margin:18px 0 0;font-size:13px;opacity:.6}
.nn-themes-cubiscule__histoire{display:grid;gap:28px;align-items:center}
.nn-themes-cubiscule__histoire-media{aspect-ratio:4/3}
.nn-themes-cubiscule__histoire-texte h2{font-size:clamp(28px,4.2vw,48px);line-height:1.08;margin-bottom:16px}
.nn-themes-cubiscule__rte p{margin:0 0 12px}
.nn-themes-cubiscule__avis-liste{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.nn-themes-cubiscule__avis{margin:0;padding:22px;display:flex;flex-direction:column;gap:10px}
.nn-themes-cubiscule__avis blockquote{margin:0}
.nn-themes-cubiscule__etoiles{color:var(--nn-accent);letter-spacing:2px}
.nn-themes-cubiscule__avis-vide{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 20px;text-align:center;border:1px dashed color-mix(in srgb,var(--nn-texte) 30%,transparent)}
.nn-themes-cubiscule__avis-vide span{letter-spacing:4px;opacity:.5}
.nn-themes-cubiscule__avis-vide p{margin:0;max-width:52ch;opacity:.8}
.nn-themes-cubiscule__faq{display:grid;gap:0}
.nn-themes-cubiscule__question{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 16%,transparent)}
.nn-themes-cubiscule__question button{display:flex;align-items:center;gap:16px;width:100%;padding:18px 0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer}
.nn-themes-cubiscule__num{font-size:12px;opacity:.5;font-variant-numeric:tabular-nums}
.nn-themes-cubiscule__plus{position:relative;width:14px;height:14px;margin-left:auto;flex:none}
.nn-themes-cubiscule__plus::before,.nn-themes-cubiscule__plus::after{content:"";position:absolute;inset:6px 0 auto;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-cubiscule__plus::after{transform:rotate(90deg)}
.nn-themes-cubiscule__question button[aria-expanded=true] .nn-themes-cubiscule__plus::after{transform:rotate(0)}
.nn-themes-cubiscule__reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.nn-themes-cubiscule__reponse>div{overflow:hidden;opacity:.8}
.nn-themes-cubiscule__question.est-ouverte .nn-themes-cubiscule__reponse{grid-template-rows:1fr}
.nn-themes-cubiscule__reponse p{margin:0 0 16px}
.nn-themes-cubiscule__pied{position:relative;padding:56px 16px 28px}
.nn-themes-cubiscule__pied-grille{max-width:1240px;margin:0 auto;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.nn-themes-cubiscule__pied-liens{display:grid;gap:8px;align-content:start}
.nn-themes-cubiscule__pied-liens a{opacity:.75}
.nn-themes-cubiscule__pied-liens a:hover{opacity:1}
.nn-themes-cubiscule__pied-titre{margin:0 0 10px;font-weight:600}
.nn-themes-cubiscule__pied form{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-cubiscule__pied input[type=email]{flex:1 1 180px;min-width:0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--nn-texte) 30%,transparent);background:transparent;color:inherit;font:inherit}
.nn-themes-cubiscule__pied button{padding:12px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:700;cursor:pointer}
.nn-themes-cubiscule__pied small{display:block;margin-top:8px;opacity:.55;font-size:12px}
.nn-themes-cubiscule__copyright{max-width:1240px;margin:32px auto 0;font-size:13px;opacity:.55}
.nn-themes-cubiscule [data-nn-apparition]{opacity:0;transform:translateY(24px);transition:opacity .8s ease calc(var(--nn-i,0)*90ms),transform .8s ease calc(var(--nn-i,0)*90ms)}
.nn-themes-cubiscule [data-nn-apparition].est-visible{opacity:1;transform:none}
@media (min-width:900px){.nn-themes-cubiscule__nav{display:flex}.nn-themes-cubiscule__burger{display:none}.nn-themes-cubiscule__entete{padding:16px 40px}.nn-themes-cubiscule__bloc{padding:88px 40px}.nn-themes-cubiscule__histoire{grid-template-columns:1.05fr .95fr}.nn-themes-cubiscule__pied{padding:72px 40px 32px}}

/* Direction artistique propre au thème */
.nn-themes-cubiscule__entete{background:color-mix(in srgb,var(--nn-fond) 85%,transparent);backdrop-filter:blur(10px)}
.nn-themes-cubiscule__entete.est-compact{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 10%,transparent)}
.nn-themes-cubiscule__marque{font-family:var(--nn-font2);font-weight:600}
.nn-themes-cubiscule__mono{width:18px;height:18px}
.nn-themes-cubiscule .nn-themes-cubiscule__panier{padding:8px 16px;border-radius:999px;background:var(--nn-texte);color:var(--nn-fond)}
.nn-themes-cubiscule__compte{background:var(--nn-accent);color:var(--nn-fond)}
.nn-themes-cubiscule__etiquette{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-family:var(--nn-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.nn-themes-cubiscule__etiquette i{width:9px;height:9px;border-radius:50%;background:var(--nn-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--nn-accent) 30%,transparent);animation:nn-themes-cubiscule-pouls 2.2s ease-in-out infinite}
@keyframes nn-themes-cubiscule-pouls{50%{box-shadow:0 0 0 7px transparent}}
.nn-themes-cubiscule__heros{max-width:1180px;margin:0 auto;padding:48px 16px 24px}
.nn-themes-cubiscule__heros h1{font-size:clamp(44px,7.4vw,92px);line-height:1;letter-spacing:-.03em;font-weight:400}
.nn-themes-cubiscule__heros-ligne{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px;margin-top:28px}
.nn-themes-cubiscule__heros-ligne p{margin:0;max-width:44ch;font-size:18px;opacity:.75}
.nn-themes-cubiscule__boutons{display:flex;flex-wrap:wrap;gap:10px}
.nn-themes-cubiscule__bouton{display:inline-flex;align-items:center;padding:13px 22px;border-radius:999px;background:var(--nn-texte);color:var(--nn-fond)!important;font-weight:500;border:1px solid var(--nn-texte);transition:transform .3s,background .3s}
.nn-themes-cubiscule__bouton:hover{transform:translateY(-2px);background:var(--nn-accent);border-color:var(--nn-accent)}
.nn-themes-cubiscule__bouton--second{background:transparent;color:var(--nn-texte)!important;border-color:color-mix(in srgb,var(--nn-texte) 30%,transparent)}
.nn-themes-cubiscule__plateau{margin-top:40px;border:1px solid color-mix(in srgb,var(--nn-texte) 12%,transparent);border-radius:18px;background:radial-gradient(70% 90% at 50% 40%,color-mix(in srgb,var(--nn-accent) 7%,var(--nn-second)),var(--nn-second));padding:20px 8px}
.nn-themes-cubiscule__plateau svg{width:100%;max-width:760px;margin:0 auto;height:auto;overflow:visible}
.nn-themes-cubiscule__couche{transform:translateY(calc((var(--nn-c) - 2) * -10px + 40px));transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.nn-themes-cubiscule__plateau.est-visible .nn-themes-cubiscule__couche{transform:translateY(calc((var(--nn-c) - 2) * -30px + 40px))}
.nn-themes-cubiscule__plateau:hover .nn-themes-cubiscule__couche{transform:translateY(calc((var(--nn-c) - 2) * -44px + 40px))}
.nn-themes-cubiscule__case{fill:var(--nn-fond);stroke:color-mix(in srgb,var(--nn-texte) 45%,transparent);stroke-width:1;transition:fill .5s,stroke .5s}
.nn-themes-cubiscule__case.est-allumee{fill:var(--nn-accent);stroke:color-mix(in srgb,var(--nn-accent) 60%,#fff)}
.nn-themes-cubiscule__tranche-g{fill:color-mix(in srgb,var(--nn-texte) 18%,var(--nn-fond))}
.nn-themes-cubiscule__tranche-d{fill:color-mix(in srgb,var(--nn-texte) 10%,var(--nn-fond))}
.nn-themes-cubiscule__repere{stroke:color-mix(in srgb,var(--nn-texte) 40%,transparent);stroke-width:1}
.nn-themes-cubiscule__txt{fill:color-mix(in srgb,var(--nn-texte) 65%,transparent);font-family:var(--nn-mono);font-size:11px;letter-spacing:.12em}
.nn-themes-cubiscule__tete h2,.nn-themes-cubiscule__histoire-texte h2{font-weight:400}
.nn-themes-cubiscule__collection{border-radius:16px;padding:10px;border:1px solid color-mix(in srgb,var(--nn-texte) 10%,transparent);background:var(--nn-second)}
.nn-themes-cubiscule__collection .nn-themes-cubiscule__media{border-radius:10px}
.nn-themes-cubiscule__collection-texte strong{font-family:var(--nn-font);font-size:22px;font-weight:400}
.nn-themes-cubiscule__produit{background:var(--nn-second);border:1px solid color-mix(in srgb,var(--nn-texte) 10%,transparent);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);border-radius:4px}
.nn-themes-cubiscule__produit::after{content:"";position:absolute;top:0;right:0;width:28px;height:28px;background:linear-gradient(225deg,transparent 50%,color-mix(in srgb,var(--nn-accent) 60%,transparent) 50%);transition:transform .4s}
.nn-themes-cubiscule__produit:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--nn-accent) 50%,transparent)}
.nn-themes-cubiscule__produit:hover::after{transform:translate(-4px,4px)}
.nn-themes-cubiscule__produit h3{font-family:var(--nn-font);font-size:20px;font-weight:400}
.nn-themes-cubiscule__visuel{border-radius:4px;color:var(--nn-accent);background:linear-gradient(135deg,color-mix(in srgb,var(--nn-texte) 5%,var(--nn-fond)),var(--nn-fond))}
.nn-themes-cubiscule__produit:hover .nn-themes-cubiscule__visuel svg{transform:rotate(-6deg) scale(1.05);transition:transform .5s}
.nn-themes-cubiscule__exemple{font-family:var(--nn-mono);border-radius:3px}
.nn-themes-cubiscule__histoire-media{border-radius:16px}
.nn-themes-cubiscule__avis,.nn-themes-cubiscule__avis-vide{border-radius:16px;background:var(--nn-second)}
.nn-themes-cubiscule__num{font-family:var(--nn-mono)}
.nn-themes-cubiscule__pied{border-top:1px solid color-mix(in srgb,var(--nn-texte) 10%,transparent)}
.nn-themes-cubiscule__pied button{border-radius:999px;color:var(--nn-fond)}
.nn-themes-cubiscule__pied input[type=email]{border-radius:999px}
@media (min-width:900px){.nn-themes-cubiscule__heros{padding:80px 40px 32px}}

@media (prefers-reduced-motion: reduce){.nn-themes-cubiscule *,.nn-themes-cubiscule *::before,.nn-themes-cubiscule *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.nn-themes-cubiscule [data-nn-apparition]{opacity:1;transform:none}}
{% endstylesheet %}

{% javascript %}
// NAHNAH AI · Thème Cubiscule : effets du thème (aucun Liquid ici, réglages lus dans des attributs data-*)
(function () {
  var calme = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  
  function brancher(racine) {
    if (racine.dataset.nnPret) return;
    racine.dataset.nnPret = '1';
    // Aperçu de la bibliothèque NAHNAH seulement : html[data-nn-demo] (jamais posé dans une boutique)
    var demo = document.documentElement.hasAttribute('data-nn-demo');

    // 1. En-tête collant : il se compacte dès que l'on défile
    var entete = racine.querySelector('[data-nn-entete]');
    function surDefilement() { if (entete) entete.classList.toggle('est-compact', window.scrollY > 30); }
    window.addEventListener('scroll', surDefilement, { passive: true });
    surDefilement();

    // 2. Menu mobile : le bouton ouvre et ferme la navigation
    var burger = racine.querySelector('[data-nn-burger]');
    if (burger) burger.addEventListener('click', function () {
      var ouvert = burger.getAttribute('aria-expanded') === 'true';
      burger.setAttribute('aria-expanded', String(!ouvert));
      racine.classList.toggle('menu-ouvert', !ouvert);
    });

    // 3. Apparition des blocs quand ils entrent à l'écran (décalage par --nn-i)
    var cibles = racine.querySelectorAll('[data-nn-apparition]');
    if (calme || !('IntersectionObserver' in window)) {
      cibles.forEach(function (el) { el.classList.add('est-visible'); });
    } else {
      var obs = new IntersectionObserver(function (entrees) {
        entrees.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('est-visible'); obs.unobserve(e.target); } });
      }, { threshold: 0.15 });
      cibles.forEach(function (el) { obs.observe(el); });
    }

    // 4. FAQ en accordéon : une réponse ouverte à la fois, hauteur animée en CSS
    racine.querySelectorAll('[data-nn-question]').forEach(function (b) {
      b.addEventListener('click', function () {
        var bloc = b.parentNode;
        var ouvrir = b.getAttribute('aria-expanded') !== 'true';
        racine.querySelectorAll('[data-nn-question]').forEach(function (autre) {
          autre.setAttribute('aria-expanded', 'false');
          autre.parentNode.classList.remove('est-ouverte');
        });
        b.setAttribute('aria-expanded', String(ouvrir));
        bloc.classList.toggle('est-ouverte', ouvrir);
      });
    });

    // 5. Effets propres au thème
    // Plateau : quelques cases du niveau supérieur s'allument au hasard, comme des pièces qui trouvent leur place
    var cases = racine.querySelectorAll('[data-nn-case]');
    if (cases.length && !calme) {
      var allumees = [];
      setInterval(function () {
        var c = cases[Math.floor(Math.random() * cases.length)];
        c.classList.add('est-allumee');
        allumees.push(c);
        if (allumees.length > 4) allumees.shift().classList.remove('est-allumee');
      }, 700);
    } else if (cases.length) {
      [3, 7, 12, 18].forEach(function (k) { if (cases[k]) cases[k].classList.add('est-allumee'); });
    }
  }
  function tout() { document.querySelectorAll('.nn-themes-cubiscule').forEach(brancher); }
  tout();
  document.addEventListener('shopify:section:load', tout);
})();
{% endjavascript %}