Thème Captelle

{%- comment -%} NAHNAH AI · Thème Captelle. Ambiance et structure inspirées du modèle payant « SalesHookAI Landing Page » de panto (21st.dev) : aucun code repris, code original NAHNAH AI. {%- endcomment -%}
<div class="nn-themes-captelle" 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: 'Inter Tight','Inter',system-ui,sans-serif; --nn-font2: 'Inter',system-ui,-apple-system,sans-serif;">
  <header class="nn-themes-captelle__entete" data-nn-entete>
    <a class="nn-themes-captelle__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-captelle__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M17 6.5A6 6 0 1 0 17 17.5"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/></svg></span><span>{{ section.settings.nom_marque | default: shop.name | escape }}</span>{%- endif -%}</a>
    <nav class="nn-themes-captelle__nav" id="nn-themes-captelle-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-captelle__actions">
      <a class="nn-themes-captelle__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-captelle__panier" href="{{ routes.cart_url }}">Panier <span class="nn-themes-captelle__compte">{{ cart.item_count }}</span></a>
      <button class="nn-themes-captelle__burger" type="button" aria-expanded="false" aria-controls="nn-themes-captelle-nav-{{ section.id }}" data-nn-burger><span aria-hidden="true"></span><span aria-hidden="true"></span><span class="nn-themes-captelle__vh">Ouvrir le menu</span></button>
    </div>
  </header>
  <section class="nn-themes-captelle__heros" data-nn-scene>
    <span class="nn-themes-captelle__nappe nn-themes-captelle__nappe--a" aria-hidden="true"></span><span class="nn-themes-captelle__nappe nn-themes-captelle__nappe--b" aria-hidden="true"></span><span class="nn-themes-captelle__nappe nn-themes-captelle__nappe--c" aria-hidden="true"></span>
    <span class="nn-themes-captelle__grain" aria-hidden="true"></span>
    <div class="nn-themes-captelle__heros-contenu">
      {%- if section.settings.surtitre != blank -%}<p class="nn-themes-captelle__pastille" data-nn-apparition><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>{{ section.settings.surtitre | escape }}</p>{%- endif -%}
      <h1>
        <span class="nn-themes-captelle__ligne" style="--nn-l: 0">{{ section.settings.titre | escape }}</span>
        {%- if section.settings.titre_suite != blank -%}<span class="nn-themes-captelle__ligne" style="--nn-l: 1">{{ section.settings.titre_suite | escape }}</span>{%- endif -%}
        {%- if section.settings.titre_accent != blank -%}<span class="nn-themes-captelle__ligne nn-themes-captelle__ligne--accent" style="--nn-l: 2">{{ section.settings.titre_accent | escape }}</span>{%- endif -%}
      </h1>
      <p class="nn-themes-captelle__intro" data-nn-apparition style="--nn-i: 3">{{ section.settings.texte | escape }}</p>
      <div class="nn-themes-captelle__boutons" data-nn-apparition style="--nn-i: 4">
        <a class="nn-themes-captelle__bouton" href="{{ section.settings.lien_bouton | default: routes.all_products_collection_url }}">{{ section.settings.bouton | escape }}<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
        {%- if section.settings.bouton2 != blank -%}<a class="nn-themes-captelle__bouton nn-themes-captelle__bouton--second" href="{{ section.settings.lien_bouton2 | default: '#vedettes' }}"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M7 5l12 7-12 7z"/></svg>{{ section.settings.bouton2 | escape }}</a>{%- endif -%}
      </div>
      {%- if section.settings.mention_heros != blank -%}<p class="nn-themes-captelle__mention" data-nn-apparition style="--nn-i: 5">{{ section.settings.mention_heros | escape }}</p>{%- endif -%}
    </div>
    {%- if section.settings.usages != blank -%}
    <div class="nn-themes-captelle__usages" aria-label="Usages"><div class="nn-themes-captelle__usages-piste">{%- assign nn_usages = section.settings.usages | split: '·' -%}{%- for n in (1..2) -%}{%- for u in nn_usages -%}<span{% if n == 2 %} aria-hidden="true"{% endif %}><i></i>{{ u | strip | escape }}</span>{%- endfor -%}{%- endfor -%}</div></div>
    {%- endif -%}
  </section>
  <section class="nn-themes-captelle__bloc" id="collections">
<div class="nn-themes-captelle__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-captelle__collections">
      {%- for block in section.blocks -%}{%- if block.type == 'collection' -%}
      {%- assign col = block.settings.collection -%}
      <a class="nn-themes-captelle__collection" href="{{ col.url | default: routes.collections_url }}" data-nn-apparition style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <span class="nn-themes-captelle__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-captelle__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-captelle__bloc" id="vedettes">
<div class="nn-themes-captelle__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-captelle__produits">
      {%- for block in section.blocks -%}{%- if block.type == 'produit' -%}
      <article class="nn-themes-captelle__produit" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <div class="nn-themes-captelle__visuel" aria-hidden="true">{%- case block.settings.visuel -%}{%- when 'micro' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="46" y="12" width="28" height="50" rx="14"/><path d="M46 30h10M46 40h10M64 30h10M64 40h10"/><path d="M36 50c0 14 10 24 24 24s24-10 24-24"/><path d="M60 74v22M44 104h32"/></svg>{%- when 'anneau' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="60" cy="46" r="30"/><circle cx="60" cy="46" r="20"/><rect x="54" y="38" width="12" height="20" rx="2"/><path d="M60 76v14M60 90 44 110M60 90l16 20M60 90v20"/></svg>{%- when 'suivi' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="44" y="22" width="32" height="54" rx="6"/><path d="M56 30h8"/><path d="M40 82h40l-6 12H46z"/><path d="M30 40a34 34 0 0 1 0 30M90 40a34 34 0 0 0 0 30M22 34a46 46 0 0 1 0 42M98 34a46 46 0 0 0 0 42"/></svg>{%- when 'trepied' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="46" y="12" width="28" height="44" rx="5"/><path d="M42 56h36v8H42z"/><path d="M60 64v14M60 78 38 106M60 78l22 28M60 78v28"/></svg>{%- endcase -%}</div>
        <span class="nn-themes-captelle__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-captelle__ref">Réf. fournisseur : {{ block.settings.reference | escape }}</small>{%- endif -%}
      </article>
      {%- endif -%}{%- endfor -%}
    </div>
    <p class="nn-themes-captelle__note">Produits d’exemple : choisis ta collection dans l’éditeur et décoche « Afficher les produits d’exemple ».</p>
    {%- else -%}
    <div class="nn-themes-captelle__produits">
      {%- for p in section.settings.collection_vedette.products limit: section.settings.nb_produits -%}
      <a class="nn-themes-captelle__produit" href="{{ p.url }}" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}">
        <span class="nn-themes-captelle__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-captelle__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-captelle__bloc" id="histoire">
<div class="nn-themes-captelle__histoire">
      <div class="nn-themes-captelle__media nn-themes-captelle__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-captelle__histoire-texte" data-nn-apparition><h2>{{ section.settings.titre_histoire | escape }}</h2><div class="nn-themes-captelle__rte">{{ section.settings.texte_histoire }}</div></div>
    </div>
</section>
  <section class="nn-themes-captelle__bloc" id="avis">
<div class="nn-themes-captelle__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-captelle__avis-liste">
      {%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}
      <figure class="nn-themes-captelle__avis" data-nn-apparition {{ block.shopify_attributes }}>
        <span class="nn-themes-captelle__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-captelle__note">{{ section.settings.mention_avis | escape }}</p>{%- endif -%}
    {%- else -%}
    <div class="nn-themes-captelle__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-captelle__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-captelle__bloc" id="faq">
<div class="nn-themes-captelle__tete" data-nn-apparition><h2>{{ section.settings.titre_faq | escape }}</h2></div>
    <div class="nn-themes-captelle__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-captelle__question" data-nn-apparition {{ block.shopify_attributes }}>
        <button type="button" aria-expanded="false" aria-controls="nn-themes-captelle-r-{{ block.id }}" data-nn-question><span class="nn-themes-captelle__num">{% if nn_q < 10 %}0{% endif %}{{ nn_q }}</span><span>{{ block.settings.question | escape }}</span><span class="nn-themes-captelle__plus" aria-hidden="true"></span></button>
        <div class="nn-themes-captelle__reponse" id="nn-themes-captelle-r-{{ block.id }}" role="region"><div>{{ block.settings.reponse }}</div></div>
      </div>
      {%- endif -%}{%- endfor -%}
    </div>
</section>
  <footer class="nn-themes-captelle__pied">
    <div class="nn-themes-captelle__pied-grille">
      <div><a class="nn-themes-captelle__marque" href="{{ routes.root_url }}"><span class="nn-themes-captelle__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M17 6.5A6 6 0 1 0 17 17.5"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/></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-captelle__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-captelle__pied-titre">{{ section.settings.titre_newsletter | escape }}</p>
        {%- form 'customer', id: 'nn-themes-captelle-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-captelle__vh" for="nn-themes-captelle-courriel">E-mail</label><input id="nn-themes-captelle-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-captelle__copyright">© {{ 'now' | date: '%Y' }} {{ section.settings.nom_marque | default: shop.name | escape }}</p>
  </footer>
</div>

{% schema %}
{"name":"Thème Captelle","tag":"section","class":"nn-th-captelle","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":"Captelle"},{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"header","content":"Héros"},{"type":"text","id":"surtitre","label":"Surtitre","default":"Micro, lumière, cadre : l’essentiel pour filmer"},{"type":"text","id":"titre","label":"Titre","default":"Filme mieux."},{"type":"text","id":"titre_suite","label":"Suite du titre (ton atténué ou accent)","default":"Parle plus clair."},{"type":"textarea","id":"texte","label":"Texte","default":"Micros, anneaux lumineux et supports pour enregistrer podcasts, lives et tutoriels avec un rendu propre, depuis ton bureau."},{"type":"text","id":"bouton","label":"Bouton principal","default":"Composer mon setup"},{"type":"url","id":"lien_bouton","label":"Lien du bouton principal"},{"type":"text","id":"bouton2","label":"Bouton secondaire","default":"Voir le matériel"},{"type":"url","id":"lien_bouton2","label":"Lien du bouton secondaire"},{"type":"text","id":"titre_accent","label":"Dernière ligne du titre (accent)","default":"Tout depuis ton bureau."},{"type":"text","id":"mention_heros","label":"Petite ligne sous les boutons","default":"Paiement sécurisé · Suivi de commande · Réponse par e-mail"},{"type":"text","id":"usages","label":"Bandeau d’usages (séparés par ·)","default":"Podcast · Live · Tutoriel · Déballage · Visio · Vlog · Voix off · Cours en ligne"},{"type":"header","content":"Collections"},{"type":"text","id":"titre_collections","label":"Titre","default":"Monte ton setup"},{"type":"text","id":"texte_collections","label":"Texte","default":"Le son d’abord, puis la lumière, puis la stabilité."},{"type":"header","content":"Produits vedettes"},{"type":"text","id":"titre_produits","label":"Titre","default":"Le matériel du moment"},{"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":"On a commencé avec un téléphone posé sur une pile de livres"},{"type":"richtext","id":"texte_histoire","label":"Texte","default":"<p>Raconte ici tes débuts de créateur ou de créatrice : le son qui grésille, la lumière du plafond, les premiers essais.</p><p>Explique comment tu choisis et testes le matériel que tu proposes.</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":"Ce que disent les créateurs"},{"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":"Matériel simple pour enregistrer et diffuser depuis chez soi."},{"type":"text","id":"titre_newsletter","label":"Titre newsletter","default":"Astuces de tournage, une fois par mois"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#060608"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#F2F0F7"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#8B5CF6"},{"type":"color","id":"couleur_second","label":"Secondaire","default":"#4C1D95"}],"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":"micro","label":"Micro"},{"value":"anneau","label":"Anneau lumineux"},{"value":"suivi","label":"Support à suivi"},{"value":"trepied","label":"Mini trépied"}],"default":"micro"},{"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 Captelle","blocks":[{"type":"collection","settings":{"titre":"Son","texte":"Micros et accessoires"}},{"type":"collection","settings":{"titre":"Lumière","texte":"Anneaux et panneaux"}},{"type":"collection","settings":{"titre":"Stabilisation","texte":"Trépieds et supports"}},{"type":"produit","settings":{"titre":"Kit micro à condensateur BM800","detail":"Pour la voix : podcast, voix off","visuel":"micro","reference":"CJ 1413664783403716608"}},{"type":"produit","settings":{"titre":"Anneau lumineux de 26 cm","detail":"Lumière douce et réglable","visuel":"anneau","reference":"CJ 1392689867976216576"}},{"type":"produit","settings":{"titre":"Support à suivi automatique du visage","detail":"Pivote pour te garder dans le cadre","visuel":"suivi","reference":"CJ 1597165945188405248"}},{"type":"produit","settings":{"titre":"Mini trépied perche pour téléphone","detail":"Se pose sur le bureau","visuel":"trepied","reference":"CJ 1416577557570129920"}},{"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":"Ce matériel fonctionne-t-il avec mon téléphone ou mon ordinateur ?","reponse":"<p>La compatibilité (prise, système, fixation) est précisée sur chaque fiche produit : vérifie-la avant de commander, ou écris-nous.</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 Captelle : thème complet (code original NAHNAH AI) */
.nn-themes-captelle{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-captelle *{box-sizing:border-box}
.nn-themes-captelle a{color:inherit;text-decoration:none}
.nn-themes-captelle img,.nn-themes-captelle svg{display:block;max-width:100%}
.nn-themes-captelle h1,.nn-themes-captelle h2,.nn-themes-captelle h3{font-family:var(--nn-font);margin:0}
.nn-themes-captelle__vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nn-themes-captelle__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-captelle__entete.est-compact{padding-block:8px}
.nn-themes-captelle__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-captelle__mono{display:inline-flex;width:26px;height:26px;color:var(--nn-accent)}
.nn-themes-captelle__mono svg{width:100%;height:100%}
.nn-themes-captelle__nav{display:none;gap:22px;margin:0 auto}
.nn-themes-captelle__nav a{position:relative;opacity:.8;transition:opacity .2s}
.nn-themes-captelle__nav a:hover{opacity:1}
.nn-themes-captelle__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nn-themes-captelle__icone{display:inline-flex;padding:6px}
.nn-themes-captelle__panier{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.nn-themes-captelle__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-captelle__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-captelle__burger span[aria-hidden]{display:block;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-captelle.menu-ouvert .nn-themes-captelle__burger span[aria-hidden]:first-child{transform:translateY(3.5px) rotate(45deg)}
.nn-themes-captelle.menu-ouvert .nn-themes-captelle__burger span[aria-hidden]:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.nn-themes-captelle.menu-ouvert .nn-themes-captelle__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-captelle__bloc{position:relative;max-width:1240px;margin:0 auto;padding:56px 16px}
.nn-themes-captelle__tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.nn-themes-captelle__tete h2{font-size:clamp(28px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em}
.nn-themes-captelle__tete p{margin:0;max-width:46ch;opacity:.75}
.nn-themes-captelle__collections{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.nn-themes-captelle__collection{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.nn-themes-captelle__media{display:block;overflow:hidden}
.nn-themes-captelle__media img,.nn-themes-captelle__media svg{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.nn-themes-captelle__collection .nn-themes-captelle__media{aspect-ratio:4/3}
.nn-themes-captelle__collection:hover .nn-themes-captelle__media img{transform:scale(1.05)}
.nn-themes-captelle__collection-texte{display:flex;flex-direction:column;gap:2px}
.nn-themes-captelle__collection-texte small{opacity:.7}
.nn-themes-captelle__produits{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.nn-themes-captelle__produit{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;transition:transform .35s,box-shadow .35s,border-color .35s}
.nn-themes-captelle__produit h3{font-size:17px;line-height:1.3;font-family:var(--nn-font2);font-weight:600}
.nn-themes-captelle__produit p{margin:0;font-size:14px;opacity:.72}
.nn-themes-captelle__produit .nn-themes-captelle__media{aspect-ratio:1}
.nn-themes-captelle__visuel{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.nn-themes-captelle__visuel svg{width:72%;height:72%}
.nn-themes-captelle__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-captelle__ref{font-size:11px;opacity:.6}
.nn-themes-captelle__prix{font-weight:700}
.nn-themes-captelle__prix s{opacity:.5;font-weight:400}
.nn-themes-captelle__note{margin:18px 0 0;font-size:13px;opacity:.6}
.nn-themes-captelle__histoire{display:grid;gap:28px;align-items:center}
.nn-themes-captelle__histoire-media{aspect-ratio:4/3}
.nn-themes-captelle__histoire-texte h2{font-size:clamp(28px,4.2vw,48px);line-height:1.08;margin-bottom:16px}
.nn-themes-captelle__rte p{margin:0 0 12px}
.nn-themes-captelle__avis-liste{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.nn-themes-captelle__avis{margin:0;padding:22px;display:flex;flex-direction:column;gap:10px}
.nn-themes-captelle__avis blockquote{margin:0}
.nn-themes-captelle__etoiles{color:var(--nn-accent);letter-spacing:2px}
.nn-themes-captelle__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-captelle__avis-vide span{letter-spacing:4px;opacity:.5}
.nn-themes-captelle__avis-vide p{margin:0;max-width:52ch;opacity:.8}
.nn-themes-captelle__faq{display:grid;gap:0}
.nn-themes-captelle__question{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 16%,transparent)}
.nn-themes-captelle__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-captelle__num{font-size:12px;opacity:.5;font-variant-numeric:tabular-nums}
.nn-themes-captelle__plus{position:relative;width:14px;height:14px;margin-left:auto;flex:none}
.nn-themes-captelle__plus::before,.nn-themes-captelle__plus::after{content:"";position:absolute;inset:6px 0 auto;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-captelle__plus::after{transform:rotate(90deg)}
.nn-themes-captelle__question button[aria-expanded=true] .nn-themes-captelle__plus::after{transform:rotate(0)}
.nn-themes-captelle__reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.nn-themes-captelle__reponse>div{overflow:hidden;opacity:.8}
.nn-themes-captelle__question.est-ouverte .nn-themes-captelle__reponse{grid-template-rows:1fr}
.nn-themes-captelle__reponse p{margin:0 0 16px}
.nn-themes-captelle__pied{position:relative;padding:56px 16px 28px}
.nn-themes-captelle__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-captelle__pied-liens{display:grid;gap:8px;align-content:start}
.nn-themes-captelle__pied-liens a{opacity:.75}
.nn-themes-captelle__pied-liens a:hover{opacity:1}
.nn-themes-captelle__pied-titre{margin:0 0 10px;font-weight:600}
.nn-themes-captelle__pied form{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-captelle__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-captelle__pied button{padding:12px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:700;cursor:pointer}
.nn-themes-captelle__pied small{display:block;margin-top:8px;opacity:.55;font-size:12px}
.nn-themes-captelle__copyright{max-width:1240px;margin:32px auto 0;font-size:13px;opacity:.55}
.nn-themes-captelle [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-captelle [data-nn-apparition].est-visible{opacity:1;transform:none}
@media (min-width:900px){.nn-themes-captelle__nav{display:flex}.nn-themes-captelle__burger{display:none}.nn-themes-captelle__entete{padding:16px 40px}.nn-themes-captelle__bloc{padding:88px 40px}.nn-themes-captelle__histoire{grid-template-columns:1.05fr .95fr}.nn-themes-captelle__pied{padding:72px 40px 32px}}

/* Direction artistique propre au thème */
.nn-themes-captelle__entete{background:color-mix(in srgb,var(--nn-fond) 60%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.nn-themes-captelle__mono{color:var(--nn-accent)}
.nn-themes-captelle .nn-themes-captelle__panier{padding:8px 14px;border-radius:10px;background:var(--nn-accent);color:#fff}
.nn-themes-captelle__compte{background:#fff;color:var(--nn-accent)}
.nn-themes-captelle__heros{position:relative;overflow:hidden;min-height:min(94vh,900px);display:flex;flex-direction:column;justify-content:center;padding:96px 16px 0;text-align:center;--nn-px:0;--nn-py:0}
.nn-themes-captelle__nappe{position:absolute;border-radius:50%;filter:blur(60px);opacity:.75;pointer-events:none;mix-blend-mode:screen}
.nn-themes-captelle__nappe--a{width:56vw;height:56vw;max-width:720px;max-height:720px;left:-14%;top:4%;background:radial-gradient(circle,var(--nn-accent),transparent 65%);animation:nn-themes-captelle-derive 18s ease-in-out infinite;translate:calc(var(--nn-px)*40px) calc(var(--nn-py)*30px)}
.nn-themes-captelle__nappe--b{width:44vw;height:44vw;max-width:560px;max-height:560px;right:-10%;top:30%;background:radial-gradient(circle,var(--nn-second),transparent 65%);animation:nn-themes-captelle-derive 22s ease-in-out infinite reverse;translate:calc(var(--nn-px)*-50px) calc(var(--nn-py)*-30px)}
.nn-themes-captelle__nappe--c{width:30vw;height:30vw;max-width:380px;max-height:380px;left:40%;bottom:-8%;background:radial-gradient(circle,#C084FC,transparent 65%);opacity:.35;animation:nn-themes-captelle-derive 26s ease-in-out infinite}
@keyframes nn-themes-captelle-derive{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,-8%) scale(1.12)}66%{transform:translate(-5%,6%) scale(.92)}}
.nn-themes-captelle__grain{position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px),radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px);background-size:3px 3px,5px 5px;background-position:0 0,1px 2px}
.nn-themes-captelle__heros-contenu{position:relative;max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}
.nn-themes-captelle__pastille{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:500;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.nn-themes-captelle__pastille::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:nn-themes-captelle-reflet 4.5s ease-in-out infinite 1s}
@keyframes nn-themes-captelle-reflet{40%,100%{transform:translateX(120%)}}
.nn-themes-captelle__heros h1{font-size:clamp(40px,7.4vw,92px);line-height:1.04;letter-spacing:-.035em;font-weight:500}
.nn-themes-captelle__ligne{display:block;opacity:0;filter:blur(14px);transform:translateY(18px);animation:nn-themes-captelle-devoile 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--nn-l)*.22s + .15s)}
.nn-themes-captelle__ligne--accent{background:linear-gradient(90deg,var(--nn-accent),#C084FC 60%,var(--nn-accent));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:nn-themes-captelle-devoile 1.1s cubic-bezier(.2,.7,.2,1) forwards .6s,nn-themes-captelle-degrade 6s linear infinite 1.7s}
@keyframes nn-themes-captelle-devoile{to{opacity:1;filter:none;transform:none}}
@keyframes nn-themes-captelle-degrade{to{background-position:200% 0}}
.nn-themes-captelle__intro{margin:0;max-width:52ch;font-size:18px;opacity:.82}
.nn-themes-captelle__boutons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.nn-themes-captelle__bouton{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:12px;font-weight:600;color:#fff!important;background:linear-gradient(180deg,color-mix(in srgb,var(--nn-accent) 85%,#fff),var(--nn-second));border:1px solid color-mix(in srgb,var(--nn-accent) 70%,#fff);box-shadow:0 10px 40px -10px var(--nn-accent);transition:transform .3s,box-shadow .3s}
.nn-themes-captelle__bouton svg{transition:transform .3s}
.nn-themes-captelle__bouton:hover{transform:translateY(-2px);box-shadow:0 14px 50px -8px var(--nn-accent)}
.nn-themes-captelle__bouton:hover svg{transform:translateX(4px)}
.nn-themes-captelle__bouton--second{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18);box-shadow:none}
.nn-themes-captelle__bouton--second svg{color:var(--nn-accent)}
.nn-themes-captelle__mention{margin:0;font-size:13px;opacity:.55}
.nn-themes-captelle__usages{position:relative;margin-top:64px;padding:22px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.nn-themes-captelle__usages-piste{display:inline-flex;gap:44px;padding-right:44px;white-space:nowrap;animation:nn-themes-captelle-defile 30s linear infinite}
.nn-themes-captelle__usages span{display:inline-flex;align-items:center;gap:10px;font-size:18px;opacity:.75}
.nn-themes-captelle__usages i{width:10px;height:10px;border-radius:3px;background:var(--nn-accent);box-shadow:0 0 12px var(--nn-accent)}
@keyframes nn-themes-captelle-defile{to{transform:translateX(-50%)}}
.nn-themes-captelle__collection{padding:10px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.nn-themes-captelle__collection .nn-themes-captelle__media{border-radius:12px}
.nn-themes-captelle__produit{border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);--nn-mx:50%;--nn-my:0%}
.nn-themes-captelle__produit::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--nn-mx) var(--nn-my),var(--nn-accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.nn-themes-captelle__produit:hover::before{opacity:1}
.nn-themes-captelle__produit:hover{transform:translateY(-4px)}
.nn-themes-captelle__visuel{border-radius:12px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--nn-accent) 35%,transparent),rgba(255,255,255,.02) 70%);color:#E9DDFF}
.nn-themes-captelle__exemple{background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.25)}
.nn-themes-captelle__histoire-media{border-radius:18px}
.nn-themes-captelle__avis,.nn-themes-captelle__avis-vide{border-radius:18px;background:rgba(255,255,255,.03)}
.nn-themes-captelle__avis{border:1px solid rgba(255,255,255,.1)}
.nn-themes-captelle__pied{border-top:1px solid rgba(255,255,255,.08);background:radial-gradient(60% 120% at 50% 120%,color-mix(in srgb,var(--nn-accent) 30%,transparent),transparent)}
.nn-themes-captelle__pied button{border-radius:10px;color:#fff}
.nn-themes-captelle__pied input[type=email]{border-radius:10px}
@media (max-width:899px){.nn-themes-captelle__panier{padding:6px 10px}}
@media (prefers-reduced-motion: reduce){.nn-themes-captelle__ligne,.nn-themes-captelle__ligne--accent{opacity:1;filter:none;transform:none}}

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

{% javascript %}
// NAHNAH AI · Thème Captelle : 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
    // Nappes violettes : elles glissent légèrement vers le pointeur (variables --nn-px / --nn-py)
    var scene = racine.querySelector('[data-nn-scene]');
    if (scene && !calme) scene.addEventListener('pointermove', function (e) {
      var r = scene.getBoundingClientRect();
      scene.style.setProperty('--nn-px', ((e.clientX - r.left) / r.width - 0.5).toFixed(3));
      scene.style.setProperty('--nn-py', ((e.clientY - r.top) / r.height - 0.5).toFixed(3));
    });
    // Cartes en verre : le liseré lumineux suit le pointeur
    racine.querySelectorAll('[data-nn-carte]').forEach(function (c) {
      c.addEventListener('pointermove', function (e) {
        var r = c.getBoundingClientRect();
        c.style.setProperty('--nn-mx', (e.clientX - r.left) + 'px');
        c.style.setProperty('--nn-my', (e.clientY - r.top) + 'px');
      });
    });
  }
  function tout() { document.querySelectorAll('.nn-themes-captelle').forEach(brancher); }
  tout();
  document.addEventListener('shopify:section:load', tout);
})();
{% endjavascript %}