Thème Vesperine

{%- comment -%} NAHNAH AI · Thème Vesperine. Ambiance et structure inspirées du modèle gratuit « Aurael » de Mohammad Shehadeh (mohammadshehadeh) sur 21st.dev (https://21st.dev/community/templates/aurael). Aucune licence indiquée sur la page du modèle : aucun code repris, code original NAHNAH AI. {%- endcomment -%}
<div class="nn-themes-vesperine" 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: 'Manrope','Inter',system-ui,sans-serif; --nn-font2: 'Inter',system-ui,-apple-system,sans-serif; --nn-fond-j: {{ section.settings.couleur_fond_jour }}; --nn-texte-j: {{ section.settings.couleur_texte_jour }}; --nn-accent-j: {{ section.settings.couleur_accent_jour }}; --nn-second-j: {{ section.settings.couleur_second_jour }};" data-nn-moment="{% if section.settings.moment == 'jour' %}jour{% else %}nuit{% endif %}" data-nn-moment-reglage="{{ section.settings.moment }}">
  <header class="nn-themes-vesperine__entete" data-nn-entete>
    <a class="nn-themes-vesperine__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-vesperine__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg></span><span>{{ section.settings.nom_marque | default: shop.name | escape }}</span>{%- endif -%}</a>
    <nav class="nn-themes-vesperine__nav" id="nn-themes-vesperine-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-vesperine__actions">
      <a class="nn-themes-vesperine__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-vesperine__panier" href="{{ routes.cart_url }}">Panier <span class="nn-themes-vesperine__compte">{{ cart.item_count }}</span></a>
      <button class="nn-themes-vesperine__burger" type="button" aria-expanded="false" aria-controls="nn-themes-vesperine-nav-{{ section.id }}" data-nn-burger><span aria-hidden="true"></span><span aria-hidden="true"></span><span class="nn-themes-vesperine__vh">Ouvrir le menu</span></button>
    </div>
  </header>
  <section class="nn-themes-vesperine__heros">
    <div class="nn-themes-vesperine__photos" aria-hidden="true">
      <span class="nn-themes-vesperine__photo nn-themes-vesperine__photo--jour">{%- if section.settings.image_jour != blank -%}{{ section.settings.image_jour | image_url: width: 1800 | image_tag: loading: 'eager', alt: '' }}{%- else -%}{{ 'lifestyle-1' | placeholder_svg_tag }}{%- endif -%}</span>
      <span class="nn-themes-vesperine__photo nn-themes-vesperine__photo--nuit">{%- if section.settings.image_nuit != blank -%}{{ section.settings.image_nuit | image_url: width: 1800 | image_tag: loading: 'eager', alt: '' }}{%- else -%}{{ 'lifestyle-2' | placeholder_svg_tag }}{%- endif -%}</span>
      <span class="nn-themes-vesperine__voile"></span>
      <span class="nn-themes-vesperine__etoiles-ciel">{%- for i in (1..26) -%}<i style="left: {{ i | times: 37 | modulo: 100 }}%; top: {{ i | times: 23 | modulo: 46 }}%; animation-delay: -{{ i | modulo: 5 }}s"></i>{%- endfor -%}</span>
      <span class="nn-themes-vesperine__soleil"></span>
    </div>
    <div class="nn-themes-vesperine__heros-contenu">
      <h1 data-nn-apparition><span>{{ section.settings.titre | escape }}</span>{%- if section.settings.titre_suite != blank -%} <span class="nn-themes-vesperine__attenue">{{ section.settings.titre_suite | escape }}</span>{%- endif -%}</h1>
      <div class="nn-themes-vesperine__bascule" role="group" aria-label="Ambiance de la page" data-nn-apparition style="--nn-i: 1">
        <span class="nn-themes-vesperine__curseur" aria-hidden="true"></span>
        <button type="button" data-nn-vers="jour" aria-pressed="false"><b>{{ section.settings.libelle_jour | escape }}</b><small>{{ section.settings.sous_jour | escape }}</small></button>
        <button type="button" data-nn-vers="nuit" aria-pressed="true"><b>{{ section.settings.libelle_nuit | escape }}</b><small>{{ section.settings.sous_nuit | escape }}</small></button>
      </div>
      <p data-nn-apparition style="--nn-i: 2">{{ section.settings.texte | escape }}</p>
      <div data-nn-apparition style="--nn-i: 3"><a class="nn-themes-vesperine__bouton" href="{{ section.settings.lien_bouton | default: routes.all_products_collection_url }}">{{ section.settings.bouton | escape }}</a></div>
    </div>
  </section>
  <section class="nn-themes-vesperine__bande" id="collections">
    <aside class="nn-themes-vesperine__rail" aria-hidden="true"><span>01</span><b>Collections</b></aside>
    <div class="nn-themes-vesperine__bande-contenu">
<div class="nn-themes-vesperine__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-vesperine__collections">
      {%- for block in section.blocks -%}{%- if block.type == 'collection' -%}
      {%- assign col = block.settings.collection -%}
      <a class="nn-themes-vesperine__collection" href="{{ col.url | default: routes.collections_url }}" data-nn-apparition style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <span class="nn-themes-vesperine__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-vesperine__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>
    </div>
  </section>
  <section class="nn-themes-vesperine__bande" id="vedettes">
    <aside class="nn-themes-vesperine__rail" aria-hidden="true"><span>02</span><b>Produits</b></aside>
    <div class="nn-themes-vesperine__bande-contenu">
<div class="nn-themes-vesperine__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-vesperine__produits">
      {%- for block in section.blocks -%}{%- if block.type == 'produit' -%}
      <article class="nn-themes-vesperine__produit" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <div class="nn-themes-vesperine__visuel" aria-hidden="true">{%- case block.settings.visuel -%}{%- when 'rose' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M60 104V64"/><path d="M60 64c-14 0-22-10-22-22 8 0 14 4 16 10 0-12 6-20 6-20s6 8 6 20c2-6 8-10 16-10 0 12-8 22-22 22z"/><path d="M60 84c-8-6-18-4-22 0M60 90c8-6 16-4 20 0"/><path d="M50 16l-4-6M70 16l4-6M60 12V6"/></svg>{%- when 'applique' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14 100h30V78h30V56h32"/><rect x="58" y="40" width="26" height="14" rx="3"/><path d="M62 54l-6 14M80 54l6 14"/><path d="M60 40l4-8h14l4 8"/></svg>{%- when 'lanterne' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M60 10v14"/><path d="M44 30h32l6 16v34l-6 16H44l-6-16V46z"/><path d="M38 46h44M38 80h44M50 30v66M60 30v66M70 30v66"/><circle cx="60" cy="63" r="6"/></svg>{%- when 'camping' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M46 22c0-10 28-10 28 0"/><rect x="40" y="26" width="40" height="12" rx="3"/><rect x="42" y="38" width="36" height="46" rx="6"/><path d="M50 50h20M50 60h20M50 70h20"/><rect x="40" y="84" width="40" height="12" rx="3"/></svg>{%- endcase -%}</div>
        <span class="nn-themes-vesperine__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-vesperine__ref">Réf. fournisseur : {{ block.settings.reference | escape }}</small>{%- endif -%}
      </article>
      {%- endif -%}{%- endfor -%}
    </div>
    <p class="nn-themes-vesperine__note">Produits d’exemple : choisis ta collection dans l’éditeur et décoche « Afficher les produits d’exemple ».</p>
    {%- else -%}
    <div class="nn-themes-vesperine__produits">
      {%- for p in section.settings.collection_vedette.products limit: section.settings.nb_produits -%}
      <a class="nn-themes-vesperine__produit" href="{{ p.url }}" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}">
        <span class="nn-themes-vesperine__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-vesperine__prix">{%- if p.compare_at_price > p.price -%}<s>{{ p.compare_at_price | money }}</s> {%- endif -%}{{ p.price | money }}</span>
      </a>
      {%- endfor -%}
    </div>
    {%- endif -%}
    </div>
  </section>
  <section class="nn-themes-vesperine__bande" id="histoire">
    <aside class="nn-themes-vesperine__rail" aria-hidden="true"><span>03</span><b>Histoire</b></aside>
    <div class="nn-themes-vesperine__bande-contenu">
<div class="nn-themes-vesperine__histoire">
      <div class="nn-themes-vesperine__media nn-themes-vesperine__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-vesperine__histoire-texte" data-nn-apparition><h2>{{ section.settings.titre_histoire | escape }}</h2><div class="nn-themes-vesperine__rte">{{ section.settings.texte_histoire }}</div></div>
    </div>
    </div>
  </section>
  <section class="nn-themes-vesperine__bande" id="avis">
    <aside class="nn-themes-vesperine__rail" aria-hidden="true"><span>04</span><b>Avis</b></aside>
    <div class="nn-themes-vesperine__bande-contenu">
<div class="nn-themes-vesperine__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-vesperine__avis-liste">
      {%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}
      <figure class="nn-themes-vesperine__avis" data-nn-apparition {{ block.shopify_attributes }}>
        <span class="nn-themes-vesperine__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-vesperine__note">{{ section.settings.mention_avis | escape }}</p>{%- endif -%}
    {%- else -%}
    <div class="nn-themes-vesperine__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-vesperine__note">Ajoute des blocs « Avis client » avec de vrais avis reçus : les blocs vides restent masqués.</p>{%- endif -%}
    </div>
  </section>
  <section class="nn-themes-vesperine__bande" id="faq">
    <aside class="nn-themes-vesperine__rail" aria-hidden="true"><span>05</span><b>Questions</b></aside>
    <div class="nn-themes-vesperine__bande-contenu">
<div class="nn-themes-vesperine__tete" data-nn-apparition><h2>{{ section.settings.titre_faq | escape }}</h2></div>
    <div class="nn-themes-vesperine__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-vesperine__question" data-nn-apparition {{ block.shopify_attributes }}>
        <button type="button" aria-expanded="false" aria-controls="nn-themes-vesperine-r-{{ block.id }}" data-nn-question><span class="nn-themes-vesperine__num">{% if nn_q < 10 %}0{% endif %}{{ nn_q }}</span><span>{{ block.settings.question | escape }}</span><span class="nn-themes-vesperine__plus" aria-hidden="true"></span></button>
        <div class="nn-themes-vesperine__reponse" id="nn-themes-vesperine-r-{{ block.id }}" role="region"><div>{{ block.settings.reponse }}</div></div>
      </div>
      {%- endif -%}{%- endfor -%}
    </div>
    </div>
  </section>
  <footer class="nn-themes-vesperine__pied">
    <div class="nn-themes-vesperine__pied-grille">
      <div><a class="nn-themes-vesperine__marque" href="{{ routes.root_url }}"><span class="nn-themes-vesperine__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></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-vesperine__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-vesperine__pied-titre">{{ section.settings.titre_newsletter | escape }}</p>
        {%- form 'customer', id: 'nn-themes-vesperine-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-vesperine__vh" for="nn-themes-vesperine-courriel">E-mail</label><input id="nn-themes-vesperine-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-vesperine__copyright">© {{ 'now' | date: '%Y' }} {{ section.settings.nom_marque | default: shop.name | escape }}</p>
  </footer>
</div>

{% schema %}
{"name":"Thème Vesperine","tag":"section","class":"nn-th-vesperine","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":"Vesperine"},{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"header","content":"Héros"},{"type":"text","id":"surtitre","label":"Surtitre","default":""},{"type":"text","id":"titre","label":"Titre","default":"La lumière du jour"},{"type":"text","id":"titre_suite","label":"Suite du titre (ton atténué ou accent)","default":"gardée pour le soir"},{"type":"textarea","id":"texte","label":"Texte","default":"Lanternes, appliques et lampes solaires qui se rechargent au soleil et s’allument seules à la tombée de la nuit."},{"type":"text","id":"bouton","label":"Bouton principal","default":"Voir les lumières"},{"type":"url","id":"lien_bouton","label":"Lien du bouton principal"},{"type":"select","id":"moment","label":"Mode à l’ouverture","options":[{"value":"nuit","label":"Nuit"},{"value":"jour","label":"Jour"},{"value":"heure","label":"Selon l’heure du visiteur"}],"default":"nuit"},{"type":"image_picker","id":"image_jour","label":"Photo du héros (jour)"},{"type":"image_picker","id":"image_nuit","label":"Photo du héros (nuit)"},{"type":"text","id":"libelle_jour","label":"Bouton jour","default":"Jour"},{"type":"text","id":"sous_jour","label":"Bouton jour · détail","default":"Recharge au soleil"},{"type":"text","id":"libelle_nuit","label":"Bouton nuit","default":"Soir"},{"type":"text","id":"sous_nuit","label":"Bouton nuit · détail","default":"S’allume seule"},{"type":"header","content":"Collections"},{"type":"text","id":"titre_collections","label":"Titre","default":"Pour chaque coin dehors"},{"type":"text","id":"texte_collections","label":"Texte","default":"Allées, terrasse ou week-end au grand air."},{"type":"header","content":"Produits vedettes"},{"type":"text","id":"titre_produits","label":"Titre","default":"Allumées ce soir"},{"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":"Le soleil fait le plein, la nuit fait le reste"},{"type":"richtext","id":"texte_histoire","label":"Texte","default":"<p>Raconte ici pourquoi tu t’es tourné vers l’éclairage solaire : un jardin sans prise, l’envie de lumière douce, la simplicité d’installation.</p><p>Explique comment tu testes chaque lampe avant de la proposer.</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":"Vos soirées dehors"},{"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":"Lumières solaires pour jardins, terrasses et escapades."},{"type":"text","id":"titre_newsletter","label":"Titre newsletter","default":"Idées d’éclairage, au fil des saisons"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#0D1117"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#E8E8E8"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#F7B045"},{"type":"color","id":"couleur_second","label":"Secondaire","default":"#1B2230"},{"type":"header","content":"Couleurs du mode jour"},{"type":"color","id":"couleur_fond_jour","label":"Fond (jour)","default":"#F4F2EC"},{"type":"color","id":"couleur_texte_jour","label":"Texte (jour)","default":"#1B1A17"},{"type":"color","id":"couleur_accent_jour","label":"Accent (jour)","default":"#C9771E"},{"type":"color","id":"couleur_second_jour","label":"Secondaire (jour)","default":"#E2DCCD"}],"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":"rose","label":"Lampe rose"},{"value":"applique","label":"Applique de marche"},{"value":"lanterne","label":"Lanterne tressée"},{"value":"camping","label":"Lanterne de camping"}],"default":"rose"},{"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 Vesperine","blocks":[{"type":"collection","settings":{"titre":"Allées et jardin","texte":"Balisage et ambiance"}},{"type":"collection","settings":{"titre":"Terrasse","texte":"Lanternes et appliques"}},{"type":"collection","settings":{"titre":"Escapades","texte":"Lumières nomades"}},{"type":"produit","settings":{"titre":"Lampe solaire rose en cristal, 10 couleurs","detail":"Couleurs changeantes à la nuit tombée","visuel":"rose","reference":"CJ 1592054620216635392"}},{"type":"produit","settings":{"titre":"Applique solaire pour marches et clôtures","detail":"Éclaire les marches sans câble","visuel":"applique","reference":"CJ 1791060172350173184"}},{"type":"produit","settings":{"titre":"Lanterne solaire effet bambou tressé","detail":"À suspendre sous un arbre ou une pergola","visuel":"lanterne","reference":"CJ 1785552948060237824"}},{"type":"produit","settings":{"titre":"Lanterne de camping solaire à crochet","detail":"Se recharge au soleil ou en USB-C","visuel":"camping","reference":"CJ 2102922109963505666"}},{"type":"faq","settings":{"question":"Quels sont les délais de livraison ?","reponse":"<p>Les lampes sont expédiées 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":"Combien de temps éclairent les lampes solaires ?","reponse":"<p>Cela dépend de l’ensoleillement de la journée et du modèle : indique ici la durée annoncée par fiche et rappelle qu’elle baisse en hiver.</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 Vesperine : thème complet (code original NAHNAH AI) */
.nn-themes-vesperine{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-vesperine *{box-sizing:border-box}
.nn-themes-vesperine a{color:inherit;text-decoration:none}
.nn-themes-vesperine img,.nn-themes-vesperine svg{display:block;max-width:100%}
.nn-themes-vesperine h1,.nn-themes-vesperine h2,.nn-themes-vesperine h3{font-family:var(--nn-font);margin:0}
.nn-themes-vesperine__vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nn-themes-vesperine__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-vesperine__entete.est-compact{padding-block:8px}
.nn-themes-vesperine__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-vesperine__mono{display:inline-flex;width:26px;height:26px;color:var(--nn-accent)}
.nn-themes-vesperine__mono svg{width:100%;height:100%}
.nn-themes-vesperine__nav{display:none;gap:22px;margin:0 auto}
.nn-themes-vesperine__nav a{position:relative;opacity:.8;transition:opacity .2s}
.nn-themes-vesperine__nav a:hover{opacity:1}
.nn-themes-vesperine__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nn-themes-vesperine__icone{display:inline-flex;padding:6px}
.nn-themes-vesperine__panier{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.nn-themes-vesperine__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-vesperine__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-vesperine__burger span[aria-hidden]{display:block;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-vesperine.menu-ouvert .nn-themes-vesperine__burger span[aria-hidden]:first-child{transform:translateY(3.5px) rotate(45deg)}
.nn-themes-vesperine.menu-ouvert .nn-themes-vesperine__burger span[aria-hidden]:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.nn-themes-vesperine.menu-ouvert .nn-themes-vesperine__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-vesperine__bloc{position:relative;max-width:1240px;margin:0 auto;padding:56px 16px}
.nn-themes-vesperine__tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.nn-themes-vesperine__tete h2{font-size:clamp(28px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em}
.nn-themes-vesperine__tete p{margin:0;max-width:46ch;opacity:.75}
.nn-themes-vesperine__collections{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.nn-themes-vesperine__collection{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.nn-themes-vesperine__media{display:block;overflow:hidden}
.nn-themes-vesperine__media img,.nn-themes-vesperine__media svg{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.nn-themes-vesperine__collection .nn-themes-vesperine__media{aspect-ratio:4/3}
.nn-themes-vesperine__collection:hover .nn-themes-vesperine__media img{transform:scale(1.05)}
.nn-themes-vesperine__collection-texte{display:flex;flex-direction:column;gap:2px}
.nn-themes-vesperine__collection-texte small{opacity:.7}
.nn-themes-vesperine__produits{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.nn-themes-vesperine__produit{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;transition:transform .35s,box-shadow .35s,border-color .35s}
.nn-themes-vesperine__produit h3{font-size:17px;line-height:1.3;font-family:var(--nn-font2);font-weight:600}
.nn-themes-vesperine__produit p{margin:0;font-size:14px;opacity:.72}
.nn-themes-vesperine__produit .nn-themes-vesperine__media{aspect-ratio:1}
.nn-themes-vesperine__visuel{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.nn-themes-vesperine__visuel svg{width:72%;height:72%}
.nn-themes-vesperine__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-vesperine__ref{font-size:11px;opacity:.6}
.nn-themes-vesperine__prix{font-weight:700}
.nn-themes-vesperine__prix s{opacity:.5;font-weight:400}
.nn-themes-vesperine__note{margin:18px 0 0;font-size:13px;opacity:.6}
.nn-themes-vesperine__histoire{display:grid;gap:28px;align-items:center}
.nn-themes-vesperine__histoire-media{aspect-ratio:4/3}
.nn-themes-vesperine__histoire-texte h2{font-size:clamp(28px,4.2vw,48px);line-height:1.08;margin-bottom:16px}
.nn-themes-vesperine__rte p{margin:0 0 12px}
.nn-themes-vesperine__avis-liste{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.nn-themes-vesperine__avis{margin:0;padding:22px;display:flex;flex-direction:column;gap:10px}
.nn-themes-vesperine__avis blockquote{margin:0}
.nn-themes-vesperine__etoiles{color:var(--nn-accent);letter-spacing:2px}
.nn-themes-vesperine__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-vesperine__avis-vide span{letter-spacing:4px;opacity:.5}
.nn-themes-vesperine__avis-vide p{margin:0;max-width:52ch;opacity:.8}
.nn-themes-vesperine__faq{display:grid;gap:0}
.nn-themes-vesperine__question{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 16%,transparent)}
.nn-themes-vesperine__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-vesperine__num{font-size:12px;opacity:.5;font-variant-numeric:tabular-nums}
.nn-themes-vesperine__plus{position:relative;width:14px;height:14px;margin-left:auto;flex:none}
.nn-themes-vesperine__plus::before,.nn-themes-vesperine__plus::after{content:"";position:absolute;inset:6px 0 auto;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-vesperine__plus::after{transform:rotate(90deg)}
.nn-themes-vesperine__question button[aria-expanded=true] .nn-themes-vesperine__plus::after{transform:rotate(0)}
.nn-themes-vesperine__reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.nn-themes-vesperine__reponse>div{overflow:hidden;opacity:.8}
.nn-themes-vesperine__question.est-ouverte .nn-themes-vesperine__reponse{grid-template-rows:1fr}
.nn-themes-vesperine__reponse p{margin:0 0 16px}
.nn-themes-vesperine__pied{position:relative;padding:56px 16px 28px}
.nn-themes-vesperine__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-vesperine__pied-liens{display:grid;gap:8px;align-content:start}
.nn-themes-vesperine__pied-liens a{opacity:.75}
.nn-themes-vesperine__pied-liens a:hover{opacity:1}
.nn-themes-vesperine__pied-titre{margin:0 0 10px;font-weight:600}
.nn-themes-vesperine__pied form{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-vesperine__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-vesperine__pied button{padding:12px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:700;cursor:pointer}
.nn-themes-vesperine__pied small{display:block;margin-top:8px;opacity:.55;font-size:12px}
.nn-themes-vesperine__copyright{max-width:1240px;margin:32px auto 0;font-size:13px;opacity:.55}
.nn-themes-vesperine [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-vesperine [data-nn-apparition].est-visible{opacity:1;transform:none}
@media (min-width:900px){.nn-themes-vesperine__nav{display:flex}.nn-themes-vesperine__burger{display:none}.nn-themes-vesperine__entete{padding:16px 40px}.nn-themes-vesperine__bloc{padding:88px 40px}.nn-themes-vesperine__histoire{grid-template-columns:1.05fr .95fr}.nn-themes-vesperine__pied{padding:72px 40px 32px}}

/* Direction artistique propre au thème */
.nn-themes-vesperine{transition:background-color .9s ease,color .9s ease}
.nn-themes-vesperine[data-nn-moment=jour]{--nn-fond:var(--nn-fond-j)!important;--nn-texte:var(--nn-texte-j)!important;--nn-accent:var(--nn-accent-j)!important;--nn-second:var(--nn-second-j)!important}
.nn-themes-vesperine__entete{position:sticky;background:color-mix(in srgb,var(--nn-fond) 70%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 10%,transparent);transition:background-color .9s,padding .3s}
.nn-themes-vesperine__marque{font-weight:600}
.nn-themes-vesperine__heros{position:relative;min-height:min(92vh,860px);display:grid;align-items:end;margin-top:-64px;padding:120px 16px 56px;overflow:hidden}
.nn-themes-vesperine__photos,.nn-themes-vesperine__photo,.nn-themes-vesperine__voile,.nn-themes-vesperine__etoiles-ciel,.nn-themes-vesperine__soleil{position:absolute;inset:0}
.nn-themes-vesperine__photo img{width:100%;height:100%;object-fit:cover}
.nn-themes-vesperine__photo{transition:opacity 1.4s ease}
.nn-themes-vesperine__photo--nuit img{filter:brightness(.55) saturate(.8) hue-rotate(-12deg)}
.nn-themes-vesperine[data-nn-moment=jour] .nn-themes-vesperine__photo--nuit,.nn-themes-vesperine[data-nn-moment=nuit] .nn-themes-vesperine__photo--jour{opacity:0}
.nn-themes-vesperine__voile{background:linear-gradient(to bottom,color-mix(in srgb,var(--nn-fond) 55%,transparent) 0%,transparent 35%,color-mix(in srgb,var(--nn-fond) 70%,transparent) 70%,var(--nn-fond) 100%);transition:background .9s}
.nn-themes-vesperine__etoiles-ciel{transition:opacity 1.2s}
.nn-themes-vesperine[data-nn-moment=jour] .nn-themes-vesperine__etoiles-ciel{opacity:0}
.nn-themes-vesperine__etoiles-ciel i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:nn-themes-vesperine-scintille 3.4s ease-in-out infinite}
@keyframes nn-themes-vesperine-scintille{50%{opacity:.15;transform:scale(.6)}}
.nn-themes-vesperine__soleil{inset:auto;left:62%;top:8%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--nn-accent) 70%,#fff),transparent 68%);opacity:0;transform:translateY(60px) scale(.7);transition:opacity 1.4s,transform 1.4s}
.nn-themes-vesperine[data-nn-moment=jour] .nn-themes-vesperine__soleil{opacity:.75;transform:none}
.nn-themes-vesperine__heros-contenu{position:relative;max-width:980px;margin:0 auto;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.nn-themes-vesperine__heros h1{font-size:clamp(40px,7.6vw,96px);line-height:1.02;letter-spacing:-.04em;font-weight:600}
.nn-themes-vesperine__heros h1 span{display:block}
.nn-themes-vesperine__attenue{opacity:.5}
.nn-themes-vesperine__heros p{margin:0;max-width:48ch;opacity:.8}
.nn-themes-vesperine__bascule{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:14px;background:color-mix(in srgb,var(--nn-fond) 75%,transparent);border:1px solid color-mix(in srgb,var(--nn-texte) 16%,transparent);backdrop-filter:blur(8px)}
.nn-themes-vesperine__bascule button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:8px 22px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:color .5s}
.nn-themes-vesperine__bascule small{font-size:11px;opacity:.7}
.nn-themes-vesperine__curseur{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:10px;background:var(--nn-accent);transition:transform .6s cubic-bezier(.3,1.3,.5,1),background-color .9s}
.nn-themes-vesperine[data-nn-moment=nuit] .nn-themes-vesperine__curseur{transform:translateX(100%)}
.nn-themes-vesperine[data-nn-moment=nuit] [data-nn-vers=nuit],.nn-themes-vesperine[data-nn-moment=jour] [data-nn-vers=jour]{color:#241A0F}
.nn-themes-vesperine__bouton{display:inline-flex;padding:13px 26px;border-radius:10px;background:var(--nn-accent);color:#241A0F!important;font-weight:600;transition:transform .3s,box-shadow .3s,background-color .9s}
.nn-themes-vesperine__bouton:hover{transform:translateY(-2px);box-shadow:0 0 0 6px color-mix(in srgb,var(--nn-accent) 25%,transparent)}
.nn-themes-vesperine__bande{position:relative;max-width:1240px;margin:0 auto;padding:56px 16px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);display:grid;gap:20px}
.nn-themes-vesperine__rail{display:flex;gap:10px;align-items:baseline;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nn-themes-vesperine__rail span{color:var(--nn-accent);font-variant-numeric:tabular-nums}
.nn-themes-vesperine__rail b{font-weight:500;opacity:.7}
.nn-themes-vesperine__collection{border-top:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);padding-top:12px}
.nn-themes-vesperine__produit{border:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);border-radius:4px}
.nn-themes-vesperine__produit:hover{border-color:var(--nn-accent);box-shadow:0 0 40px -18px var(--nn-accent)}
.nn-themes-vesperine__visuel{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--nn-accent) 30%,transparent),var(--nn-second) 70%);color:var(--nn-accent);transition:background .9s}
.nn-themes-vesperine__produit:hover .nn-themes-vesperine__visuel svg{filter:drop-shadow(0 0 10px var(--nn-accent))}
.nn-themes-vesperine__exemple{background:var(--nn-fond)}
.nn-themes-vesperine__avis{border:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-vesperine__pied{border-top:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-vesperine__pied button{color:#241A0F;border-radius:10px}
.nn-themes-vesperine__pied input[type=email]{border-radius:10px}
@media (min-width:900px){.nn-themes-vesperine__bande{grid-template-columns:200px 1fr;padding:88px 40px;gap:40px}.nn-themes-vesperine__rail{position:sticky;top:96px;align-self:start;flex-direction:column;gap:6px}.nn-themes-vesperine__rail span{font-size:44px;line-height:1;letter-spacing:-.03em}.nn-themes-vesperine__heros{padding:140px 40px 72px}}

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

{% javascript %}
// NAHNAH AI · Thème Vesperine : 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
    // Jour / nuit : toute la page change de palette (variables CSS), avec fondu des photos du héros
    var reglage = racine.getAttribute('data-nn-moment-reglage');
    function poser(m) {
      racine.setAttribute('data-nn-moment', m);
      racine.querySelectorAll('[data-nn-vers]').forEach(function (b) { b.setAttribute('aria-pressed', String(b.getAttribute('data-nn-vers') === m)); });
    }
    if (reglage === 'heure') { var h = new Date().getHours(); poser(h >= 7 && h < 19 ? 'jour' : 'nuit'); }
    var alternance = null;
    racine.querySelectorAll('[data-nn-vers]').forEach(function (b) {
      b.addEventListener('click', function () { clearInterval(alternance); poser(b.getAttribute('data-nn-vers')); });
    });
    // Démonstration de la bibliothèque seulement : la page alterne seule entre jour et nuit
    if (demo && !calme) alternance = setInterval(function () { poser(racine.getAttribute('data-nn-moment') === 'nuit' ? 'jour' : 'nuit'); }, 4200);
  }
  function tout() { document.querySelectorAll('.nn-themes-vesperine').forEach(brancher); }
  tout();
  document.addEventListener('shopify:section:load', tout);
})();
{% endjavascript %}