Thème Casilo

{%- comment -%} NAHNAH AI · Thème Casilo. Ambiance et structure inspirées du modèle gratuit « Quillery » de Naved (navedux, illos.dev) sur 21st.dev (https://21st.dev/community/templates/quillery). 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-casilo" 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: 'Hanken Grotesk','Inter',system-ui,sans-serif; --nn-font2: 'Hanken Grotesk','Inter',system-ui,sans-serif; --nn-profond: {{ section.settings.couleur_profond }}; --nn-mono: 'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;">
  <header class="nn-themes-casilo__entete" data-nn-entete>
    <a class="nn-themes-casilo__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-casilo__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3h17l-3 5H2z"/><path d="M5 9.5h17l-3 5H2z" opacity=".65"/><path d="M5 16h17l-3 5H2z" opacity=".35"/></svg></span><span>{{ section.settings.nom_marque | default: shop.name | escape }}</span>{%- endif -%}</a>
    <nav class="nn-themes-casilo__nav" id="nn-themes-casilo-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-casilo__actions">
      <a class="nn-themes-casilo__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-casilo__panier" href="{{ routes.cart_url }}">Panier <span class="nn-themes-casilo__compte">{{ cart.item_count }}</span></a>
      <button class="nn-themes-casilo__burger" type="button" aria-expanded="false" aria-controls="nn-themes-casilo-nav-{{ section.id }}" data-nn-burger><span aria-hidden="true"></span><span aria-hidden="true"></span><span class="nn-themes-casilo__vh">Ouvrir le menu</span></button>
    </div>
  </header>
  <section class="nn-themes-casilo__bento">
    <div class="nn-themes-casilo__tuile nn-themes-casilo__tuile--titre" data-nn-apparition>
      {%- if section.settings.surtitre != blank -%}<p class="nn-themes-casilo__etiquette"><i></i>{{ section.settings.surtitre | escape }}</p>{%- endif -%}
      <h1>{{ section.settings.titre | escape }}</h1>
      <p>{{ section.settings.texte | escape }}</p>
      <div class="nn-themes-casilo__boutons"><a class="nn-themes-casilo__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-casilo__bouton nn-themes-casilo__bouton--second" href="{{ section.settings.lien_bouton2 | default: '#collections' }}">{{ section.settings.bouton2 | escape }}</a>{%- endif -%}</div>
    </div>
    <div class="nn-themes-casilo__tuile nn-themes-casilo__tuile--iso" data-nn-apparition style="--nn-i: 1">
      <svg class="nn-themes-casilo__etagere" viewBox="0 0 320 260" aria-hidden="true"><polygon class="nn-themes-casilo__plateau" points="20,170 160,95 300,170 160,245"/><polygon class="nn-themes-casilo__plateau-cote" points="20,170 160,245 160,257 20,182"/><polygon class="nn-themes-casilo__plateau-cote2" points="160,245 300,170 300,182 160,257"/><g transform="translate(56 160)"><g class="nn-themes-casilo__boite" style="--nn-k: 1"><polygon class="nn-themes-casilo__face-haut" points="0,-20 34,-38 68,-20 34,-2"/><polygon class="nn-themes-casilo__face-g" points="0,-20 34,-2 34,38 0,20"/><polygon class="nn-themes-casilo__face-d" points="34,-2 68,-20 68,20 34,38"/><path class="nn-themes-casilo__poignee" d="M10 4l14 8M44 12l14-8"/></g></g><g transform="translate(126 122)"><g class="nn-themes-casilo__boite" style="--nn-k: 2"><polygon class="nn-themes-casilo__face-haut" points="0,-20 34,-38 68,-20 34,-2"/><polygon class="nn-themes-casilo__face-g" points="0,-20 34,-2 34,38 0,20"/><polygon class="nn-themes-casilo__face-d" points="34,-2 68,-20 68,20 34,38"/><path class="nn-themes-casilo__poignee" d="M10 4l14 8M44 12l14-8"/></g></g><g transform="translate(196 160)"><g class="nn-themes-casilo__boite" style="--nn-k: 3"><polygon class="nn-themes-casilo__face-haut" points="0,-20 34,-38 68,-20 34,-2"/><polygon class="nn-themes-casilo__face-g" points="0,-20 34,-2 34,38 0,20"/><polygon class="nn-themes-casilo__face-d" points="34,-2 68,-20 68,20 34,38"/><path class="nn-themes-casilo__poignee" d="M10 4l14 8M44 12l14-8"/></g></g><g transform="translate(126 196)"><g class="nn-themes-casilo__boite" style="--nn-k: 4"><polygon class="nn-themes-casilo__face-haut" points="0,-20 34,-38 68,-20 34,-2"/><polygon class="nn-themes-casilo__face-g" points="0,-20 34,-2 34,38 0,20"/><polygon class="nn-themes-casilo__face-d" points="34,-2 68,-20 68,20 34,38"/><path class="nn-themes-casilo__poignee" d="M10 4l14 8M44 12l14-8"/></g></g></svg>
    </div>
    <div class="nn-themes-casilo__tuile nn-themes-casilo__tuile--casiers" data-nn-apparition style="--nn-i: 2">
      <span class="nn-themes-casilo__etiquette"><i></i>{{ section.settings.tuile_grille | escape }}</span>
      <div class="nn-themes-casilo__casiers" aria-hidden="true">{%- for i in (1..9) -%}<i style="--nn-c: {{ i }}"></i>{%- endfor -%}</div>
    </div>
    <div class="nn-themes-casilo__tuile nn-themes-casilo__tuile--texte" data-nn-apparition style="--nn-i: 3">
      <span class="nn-themes-casilo__etiquette"><i></i>{{ section.settings.tuile_titre | escape }}</span>
      <p>{{ section.settings.tuile_texte | escape }}</p>
    </div>
  </section>
  <section class="nn-themes-casilo__bloc" id="collections">
<div class="nn-themes-casilo__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-casilo__collections">
      {%- for block in section.blocks -%}{%- if block.type == 'collection' -%}
      {%- assign col = block.settings.collection -%}
      <a class="nn-themes-casilo__collection" href="{{ col.url | default: routes.collections_url }}" data-nn-apparition style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <span class="nn-themes-casilo__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-casilo__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-casilo__bloc" id="vedettes">
<div class="nn-themes-casilo__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-casilo__produits">
      {%- for block in section.blocks -%}{%- if block.type == 'produit' -%}
      <article class="nn-themes-casilo__produit" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <div class="nn-themes-casilo__visuel" aria-hidden="true">{%- case block.settings.visuel -%}{%- when 'tissu' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 42 60 26l40 16v46L60 104 20 88z"/><path d="M20 42l40 16 40-16M60 58v46"/><path d="M34 62c4 2 8 2 12 0M74 62c4 2 8 2 12 0"/></svg>{%- when 'bureau' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14 56 60 36l46 20v32L60 108 14 88z"/><path d="M14 56l46 20 46-20M60 76v32M37 66v32M83 66v32"/><path d="M40 52V24M46 50V30M78 48V26"/></svg>{%- when 'acrylique' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="22" y="34" width="76" height="60" rx="6"/><path d="M22 52h76M22 72h76M60 52v42"/><path d="M30 40l10 8" opacity=".6"/></svg>{%- when 'porte' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M32 14h56v92H32z"/><path d="M50 14v-4h20v4"/><path d="M38 30h44v18H38zM38 54h44v18H38zM38 78h44v18H38z"/></svg>{%- endcase -%}</div>
        <span class="nn-themes-casilo__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-casilo__ref">Réf. fournisseur : {{ block.settings.reference | escape }}</small>{%- endif -%}
      </article>
      {%- endif -%}{%- endfor -%}
    </div>
    <p class="nn-themes-casilo__note">Produits d’exemple : choisis ta collection dans l’éditeur et décoche « Afficher les produits d’exemple ».</p>
    {%- else -%}
    <div class="nn-themes-casilo__produits">
      {%- for p in section.settings.collection_vedette.products limit: section.settings.nb_produits -%}
      <a class="nn-themes-casilo__produit" href="{{ p.url }}" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}">
        <span class="nn-themes-casilo__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-casilo__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-casilo__bloc" id="histoire">
<div class="nn-themes-casilo__histoire">
      <div class="nn-themes-casilo__media nn-themes-casilo__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-casilo__histoire-texte" data-nn-apparition><h2>{{ section.settings.titre_histoire | escape }}</h2><div class="nn-themes-casilo__rte">{{ section.settings.texte_histoire }}</div></div>
    </div>
</section>
  <section class="nn-themes-casilo__bloc" id="avis">
<div class="nn-themes-casilo__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-casilo__avis-liste">
      {%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}
      <figure class="nn-themes-casilo__avis" data-nn-apparition {{ block.shopify_attributes }}>
        <span class="nn-themes-casilo__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-casilo__note">{{ section.settings.mention_avis | escape }}</p>{%- endif -%}
    {%- else -%}
    <div class="nn-themes-casilo__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-casilo__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-casilo__bloc" id="faq">
<div class="nn-themes-casilo__tete" data-nn-apparition><h2>{{ section.settings.titre_faq | escape }}</h2></div>
    <div class="nn-themes-casilo__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-casilo__question" data-nn-apparition {{ block.shopify_attributes }}>
        <button type="button" aria-expanded="false" aria-controls="nn-themes-casilo-r-{{ block.id }}" data-nn-question><span class="nn-themes-casilo__num">{% if nn_q < 10 %}0{% endif %}{{ nn_q }}</span><span>{{ block.settings.question | escape }}</span><span class="nn-themes-casilo__plus" aria-hidden="true"></span></button>
        <div class="nn-themes-casilo__reponse" id="nn-themes-casilo-r-{{ block.id }}" role="region"><div>{{ block.settings.reponse }}</div></div>
      </div>
      {%- endif -%}{%- endfor -%}
    </div>
</section>
  <footer class="nn-themes-casilo__pied">
    <div class="nn-themes-casilo__pied-grille">
      <div><a class="nn-themes-casilo__marque" href="{{ routes.root_url }}"><span class="nn-themes-casilo__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 3h17l-3 5H2z"/><path d="M5 9.5h17l-3 5H2z" opacity=".65"/><path d="M5 16h17l-3 5H2z" opacity=".35"/></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-casilo__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-casilo__pied-titre">{{ section.settings.titre_newsletter | escape }}</p>
        {%- form 'customer', id: 'nn-themes-casilo-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-casilo__vh" for="nn-themes-casilo-courriel">E-mail</label><input id="nn-themes-casilo-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-casilo__copyright">© {{ 'now' | date: '%Y' }} {{ section.settings.nom_marque | default: shop.name | escape }}</p>
  </footer>
</div>

{% schema %}
{"name":"Thème Casilo","tag":"section","class":"nn-th-casilo","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":"Casilo"},{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"header","content":"Héros"},{"type":"text","id":"surtitre","label":"Surtitre","default":"Rangement pour toute la maison"},{"type":"text","id":"titre","label":"Titre","default":"Chaque chose à sa place, enfin."},{"type":"textarea","id":"texte","label":"Texte","default":"Boîtes pliables, casiers et organiseurs pour ranger placards, bureau et salle de bain sans travaux ni perceuse."},{"type":"text","id":"bouton","label":"Bouton principal","default":"Ranger maintenant"},{"type":"url","id":"lien_bouton","label":"Lien du bouton principal"},{"type":"text","id":"bouton2","label":"Bouton secondaire","default":"Voir les pièces"},{"type":"url","id":"lien_bouton2","label":"Lien du bouton secondaire"},{"type":"text","id":"tuile_grille","label":"Tuile casiers · étiquette","default":"Un casier par usage"},{"type":"text","id":"tuile_titre","label":"Tuile texte · étiquette","default":"Sans perceuse"},{"type":"textarea","id":"tuile_texte","label":"Tuile texte · contenu","default":"Des rangements qui se posent, se plient et se déplacent : idéal en location."},{"type":"header","content":"Collections"},{"type":"text","id":"titre_collections","label":"Titre","default":"Pièce par pièce"},{"type":"text","id":"texte_collections","label":"Texte","default":"Commence par la pièce qui déborde le plus."},{"type":"header","content":"Produits vedettes"},{"type":"text","id":"titre_produits","label":"Titre","default":"Nos rangements préférés"},{"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":"Un tiroir rangé, puis tout le reste"},{"type":"richtext","id":"texte_histoire","label":"Texte","default":"<p>Raconte ici comment la boutique est née : un petit appartement, un placard impossible, une méthode qui a fini par marcher.</p><p>Explique comment tu choisis des rangements simples et durables.</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":"Avant, aprè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":"Rangements simples pour toutes les pièces de la maison."},{"type":"text","id":"titre_newsletter","label":"Titre newsletter","default":"Une idée de rangement par mois"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#EEF0ED"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#141819"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#1DAF9C"},{"type":"color","id":"couleur_second","label":"Secondaire","default":"#FBFCFA"},{"type":"color","id":"couleur_profond","label":"Accent foncé","default":"#0A6A5E"}],"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":"tissu","label":"Boîte en tissu"},{"value":"bureau","label":"Casier de bureau"},{"value":"acrylique","label":"Boîte acrylique"},{"value":"porte","label":"Organiseur de porte"}],"default":"tissu"},{"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 Casilo","blocks":[{"type":"collection","settings":{"titre":"Placards et dressing","texte":"Boîtes et poches"}},{"type":"collection","settings":{"titre":"Bureau","texte":"Casiers et plateaux"}},{"type":"collection","settings":{"titre":"Salle de bain","texte":"Boîtes transparentes"}},{"type":"produit","settings":{"titre":"Boîte de rangement pliable en tissu","detail":"Se plie à plat quand elle ne sert pas","visuel":"tissu","reference":"CJ 1413084503500525568"}},{"type":"produit","settings":{"titre":"Boîte de rangement de bureau à compartiments","detail":"Stylos, câbles, petites fournitures","visuel":"bureau","reference":"CJ 1386883997170274304"}},{"type":"produit","settings":{"titre":"Boîte de rangement en acrylique transparent","detail":"On voit tout d’un coup d’œil","visuel":"acrylique","reference":"CJ B3F33E92-7881-41B6-A283-07C42392B172"}},{"type":"produit","settings":{"titre":"Organiseur suspendu de porte, 3 poches","detail":"Utilise l’arrière des portes","visuel":"porte","reference":"CJ 1971120660599726082"}},{"type":"faq","settings":{"question":"Quels sont les délais de livraison ?","reponse":"<p>Les commandes 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 la bonne taille de boîte ?","reponse":"<p>Mesure la largeur, la hauteur et la profondeur de ton étagère, puis compare-les aux dimensions de chaque fiche produit.</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 Casilo : thème complet (code original NAHNAH AI) */
.nn-themes-casilo{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-casilo *{box-sizing:border-box}
.nn-themes-casilo a{color:inherit;text-decoration:none}
.nn-themes-casilo img,.nn-themes-casilo svg{display:block;max-width:100%}
.nn-themes-casilo h1,.nn-themes-casilo h2,.nn-themes-casilo h3{font-family:var(--nn-font);margin:0}
.nn-themes-casilo__vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nn-themes-casilo__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-casilo__entete.est-compact{padding-block:8px}
.nn-themes-casilo__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-casilo__mono{display:inline-flex;width:26px;height:26px;color:var(--nn-accent)}
.nn-themes-casilo__mono svg{width:100%;height:100%}
.nn-themes-casilo__nav{display:none;gap:22px;margin:0 auto}
.nn-themes-casilo__nav a{position:relative;opacity:.8;transition:opacity .2s}
.nn-themes-casilo__nav a:hover{opacity:1}
.nn-themes-casilo__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nn-themes-casilo__icone{display:inline-flex;padding:6px}
.nn-themes-casilo__panier{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.nn-themes-casilo__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-casilo__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-casilo__burger span[aria-hidden]{display:block;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-casilo.menu-ouvert .nn-themes-casilo__burger span[aria-hidden]:first-child{transform:translateY(3.5px) rotate(45deg)}
.nn-themes-casilo.menu-ouvert .nn-themes-casilo__burger span[aria-hidden]:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.nn-themes-casilo.menu-ouvert .nn-themes-casilo__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-casilo__bloc{position:relative;max-width:1240px;margin:0 auto;padding:56px 16px}
.nn-themes-casilo__tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.nn-themes-casilo__tete h2{font-size:clamp(28px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em}
.nn-themes-casilo__tete p{margin:0;max-width:46ch;opacity:.75}
.nn-themes-casilo__collections{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.nn-themes-casilo__collection{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.nn-themes-casilo__media{display:block;overflow:hidden}
.nn-themes-casilo__media img,.nn-themes-casilo__media svg{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.nn-themes-casilo__collection .nn-themes-casilo__media{aspect-ratio:4/3}
.nn-themes-casilo__collection:hover .nn-themes-casilo__media img{transform:scale(1.05)}
.nn-themes-casilo__collection-texte{display:flex;flex-direction:column;gap:2px}
.nn-themes-casilo__collection-texte small{opacity:.7}
.nn-themes-casilo__produits{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.nn-themes-casilo__produit{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;transition:transform .35s,box-shadow .35s,border-color .35s}
.nn-themes-casilo__produit h3{font-size:17px;line-height:1.3;font-family:var(--nn-font2);font-weight:600}
.nn-themes-casilo__produit p{margin:0;font-size:14px;opacity:.72}
.nn-themes-casilo__produit .nn-themes-casilo__media{aspect-ratio:1}
.nn-themes-casilo__visuel{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.nn-themes-casilo__visuel svg{width:72%;height:72%}
.nn-themes-casilo__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-casilo__ref{font-size:11px;opacity:.6}
.nn-themes-casilo__prix{font-weight:700}
.nn-themes-casilo__prix s{opacity:.5;font-weight:400}
.nn-themes-casilo__note{margin:18px 0 0;font-size:13px;opacity:.6}
.nn-themes-casilo__histoire{display:grid;gap:28px;align-items:center}
.nn-themes-casilo__histoire-media{aspect-ratio:4/3}
.nn-themes-casilo__histoire-texte h2{font-size:clamp(28px,4.2vw,48px);line-height:1.08;margin-bottom:16px}
.nn-themes-casilo__rte p{margin:0 0 12px}
.nn-themes-casilo__avis-liste{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.nn-themes-casilo__avis{margin:0;padding:22px;display:flex;flex-direction:column;gap:10px}
.nn-themes-casilo__avis blockquote{margin:0}
.nn-themes-casilo__etoiles{color:var(--nn-accent);letter-spacing:2px}
.nn-themes-casilo__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-casilo__avis-vide span{letter-spacing:4px;opacity:.5}
.nn-themes-casilo__avis-vide p{margin:0;max-width:52ch;opacity:.8}
.nn-themes-casilo__faq{display:grid;gap:0}
.nn-themes-casilo__question{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 16%,transparent)}
.nn-themes-casilo__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-casilo__num{font-size:12px;opacity:.5;font-variant-numeric:tabular-nums}
.nn-themes-casilo__plus{position:relative;width:14px;height:14px;margin-left:auto;flex:none}
.nn-themes-casilo__plus::before,.nn-themes-casilo__plus::after{content:"";position:absolute;inset:6px 0 auto;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-casilo__plus::after{transform:rotate(90deg)}
.nn-themes-casilo__question button[aria-expanded=true] .nn-themes-casilo__plus::after{transform:rotate(0)}
.nn-themes-casilo__reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.nn-themes-casilo__reponse>div{overflow:hidden;opacity:.8}
.nn-themes-casilo__question.est-ouverte .nn-themes-casilo__reponse{grid-template-rows:1fr}
.nn-themes-casilo__reponse p{margin:0 0 16px}
.nn-themes-casilo__pied{position:relative;padding:56px 16px 28px}
.nn-themes-casilo__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-casilo__pied-liens{display:grid;gap:8px;align-content:start}
.nn-themes-casilo__pied-liens a{opacity:.75}
.nn-themes-casilo__pied-liens a:hover{opacity:1}
.nn-themes-casilo__pied-titre{margin:0 0 10px;font-weight:600}
.nn-themes-casilo__pied form{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-casilo__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-casilo__pied button{padding:12px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:700;cursor:pointer}
.nn-themes-casilo__pied small{display:block;margin-top:8px;opacity:.55;font-size:12px}
.nn-themes-casilo__copyright{max-width:1240px;margin:32px auto 0;font-size:13px;opacity:.55}
.nn-themes-casilo [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-casilo [data-nn-apparition].est-visible{opacity:1;transform:none}
@media (min-width:900px){.nn-themes-casilo__nav{display:flex}.nn-themes-casilo__burger{display:none}.nn-themes-casilo__entete{padding:16px 40px}.nn-themes-casilo__bloc{padding:88px 40px}.nn-themes-casilo__histoire{grid-template-columns:1.05fr .95fr}.nn-themes-casilo__pied{padding:72px 40px 32px}}

/* Direction artistique propre au thème */
.nn-themes-casilo__entete{background:color-mix(in srgb,var(--nn-fond) 85%,transparent);backdrop-filter:blur(10px)}
.nn-themes-casilo__entete.est-compact{box-shadow:0 1px 0 color-mix(in srgb,var(--nn-texte) 10%,transparent)}
.nn-themes-casilo .nn-themes-casilo__panier{padding:8px 14px;border-radius:12px;background:var(--nn-texte);color:var(--nn-second)}
.nn-themes-casilo__compte{background:var(--nn-accent);color:var(--nn-texte)}
.nn-themes-casilo__etiquette{display:inline-flex;align-items:center;gap:8px;font-family:var(--nn-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--nn-profond)}
.nn-themes-casilo__etiquette i{width:8px;height:8px;border-radius:2px;background:var(--nn-accent);animation:nn-themes-casilo-pouls 2s ease-in-out infinite}
@keyframes nn-themes-casilo-pouls{50%{transform:scale(1.5);opacity:.6}}
.nn-themes-casilo__bento{max-width:1240px;margin:0 auto;padding:16px;display:grid;gap:12px}
.nn-themes-casilo__tuile{position:relative;padding:24px;border-radius:14px;background:var(--nn-second);border:1px solid color-mix(in srgb,var(--nn-texte) 9%,transparent);overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.nn-themes-casilo__tuile:hover{transform:translateY(-3px);box-shadow:0 24px 40px -32px color-mix(in srgb,var(--nn-profond) 80%,transparent)}
.nn-themes-casilo__tuile--titre{display:flex;flex-direction:column;gap:18px;justify-content:flex-end}
.nn-themes-casilo__bento h1{font-size:clamp(42px,7.6vw,92px);line-height:.95;letter-spacing:-.05em;font-weight:600}
.nn-themes-casilo__tuile--titre>p{margin:0;max-width:46ch;font-size:17px;opacity:.75}
.nn-themes-casilo__boutons{display:flex;flex-wrap:wrap;gap:10px}
.nn-themes-casilo__bouton{display:inline-flex;padding:13px 20px;border-radius:12px;background:var(--nn-texte);color:var(--nn-second)!important;font-weight:600;border:1px solid var(--nn-texte);transition:transform .25s,background .25s}
.nn-themes-casilo__bouton:hover{transform:translateY(-2px);background:var(--nn-profond)}
.nn-themes-casilo__bouton--second{background:var(--nn-second);color:var(--nn-texte)!important;border-color:color-mix(in srgb,var(--nn-texte) 22%,transparent)}
.nn-themes-casilo__bouton--second:hover{background:var(--nn-fond)}
.nn-themes-casilo__tuile--iso{display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--nn-accent) 16%,var(--nn-second)),var(--nn-second) 70%)}
.nn-themes-casilo__etagere{width:100%;max-width:380px}
.nn-themes-casilo__plateau{fill:color-mix(in srgb,var(--nn-texte) 6%,var(--nn-second));stroke:color-mix(in srgb,var(--nn-texte) 30%,transparent)}
.nn-themes-casilo__plateau-cote,.nn-themes-casilo__plateau-cote2{fill:color-mix(in srgb,var(--nn-texte) 14%,var(--nn-second))}
.nn-themes-casilo__boite{animation:nn-themes-casilo-pose 7s cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:calc(var(--nn-k)*.45s);opacity:0}
.nn-themes-casilo__boite polygon{stroke:var(--nn-texte);stroke-width:1.2;stroke-linejoin:round}
.nn-themes-casilo__face-haut{fill:color-mix(in srgb,var(--nn-accent) 45%,#fff)}
.nn-themes-casilo__face-g{fill:var(--nn-accent)}
.nn-themes-casilo__face-d{fill:var(--nn-profond)}
.nn-themes-casilo__poignee{stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.7}
@keyframes nn-themes-casilo-pose{0%{transform:translateY(-90px);opacity:0}12%{opacity:1}22%,82%{transform:none;opacity:1}94%,100%{transform:translateY(10px);opacity:0}}
.nn-themes-casilo__tuile--casiers{display:flex;flex-direction:column;gap:18px}
.nn-themes-casilo__casiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nn-themes-casilo__casiers i{aspect-ratio:1.4;border-radius:8px;border:1.5px dashed color-mix(in srgb,var(--nn-texte) 25%,transparent);animation:nn-themes-casilo-remplit 6.3s ease infinite;animation-delay:calc(var(--nn-c)*.35s)}
@keyframes nn-themes-casilo-remplit{0%,8%{background:transparent;border-style:dashed}16%,80%{background:color-mix(in srgb,var(--nn-accent) 70%,#fff);border-style:solid;border-color:var(--nn-profond)}92%,100%{background:transparent}}
.nn-themes-casilo__tuile--texte{display:flex;flex-direction:column;justify-content:center;gap:10px;background:var(--nn-texte);color:var(--nn-second)}
.nn-themes-casilo__tuile--texte .nn-themes-casilo__etiquette{color:var(--nn-accent)}
.nn-themes-casilo__tuile--texte p{margin:0;font-size:22px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.nn-themes-casilo__tete h2{font-weight:600;letter-spacing:-.04em}
.nn-themes-casilo__collections{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.nn-themes-casilo__collection{position:relative;border-radius:14px;padding:10px;background:var(--nn-second);border:1px solid color-mix(in srgb,var(--nn-texte) 9%,transparent);transition:transform .4s,box-shadow .4s}
.nn-themes-casilo__collection:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px var(--nn-profond)}
.nn-themes-casilo__collection .nn-themes-casilo__media{border-radius:10px}
.nn-themes-casilo__produit{border-radius:14px;background:var(--nn-second);border:1px solid color-mix(in srgb,var(--nn-texte) 9%,transparent)}
.nn-themes-casilo__produit:hover{transform:translateY(-4px) rotate(.4deg);box-shadow:0 24px 40px -30px var(--nn-profond)}
.nn-themes-casilo__visuel{border-radius:10px;background:color-mix(in srgb,var(--nn-accent) 14%,var(--nn-fond));color:var(--nn-profond)}
.nn-themes-casilo__exemple{border-radius:6px;font-family:var(--nn-mono);font-weight:500}
.nn-themes-casilo__histoire-media{border-radius:14px}
.nn-themes-casilo__avis,.nn-themes-casilo__avis-vide{border-radius:14px;background:var(--nn-second)}
.nn-themes-casilo__pied{background:var(--nn-texte);color:var(--nn-second)}
.nn-themes-casilo__pied .nn-themes-casilo__mono{color:var(--nn-accent)}
.nn-themes-casilo__pied button{border-radius:12px;color:var(--nn-texte)}
.nn-themes-casilo__pied input[type=email]{border-radius:12px}
@media (min-width:900px){.nn-themes-casilo__bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,auto);padding:16px 40px}.nn-themes-casilo__tuile--titre{grid-column:span 2;grid-row:span 2;padding:40px}.nn-themes-casilo__tuile--iso{grid-row:span 2}.nn-themes-casilo__tuile--texte{grid-column:span 2}.nn-themes-casilo__collections{grid-template-columns:repeat(3,1fr)}.nn-themes-casilo__collection:first-child{grid-column:span 2;grid-row:span 2}.nn-themes-casilo__collection:first-child .nn-themes-casilo__media{aspect-ratio:auto;flex:1}}

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

{% javascript %}
// NAHNAH AI · Thème Casilo : 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
    // Tuiles : légère inclinaison qui suit le pointeur (effet bento vivant)
    if (!calme) racine.querySelectorAll('.nn-themes-casilo__tuile').forEach(function (t) {
      t.addEventListener('pointermove', function (e) {
        var r = t.getBoundingClientRect();
        var x = (e.clientX - r.left) / r.width - 0.5, y = (e.clientY - r.top) / r.height - 0.5;
        t.style.transform = 'perspective(900px) rotateX(' + (-y * 3).toFixed(2) + 'deg) rotateY(' + (x * 3).toFixed(2) + 'deg) translateY(-3px)';
      });
      t.addEventListener('pointerleave', function () { t.style.transform = ''; });
    });
  }
  function tout() { document.querySelectorAll('.nn-themes-casilo').forEach(brancher); }
  tout();
  document.addEventListener('shopify:section:load', tout);
})();
{% endjavascript %}