Thème Pollinelle

{%- comment -%} NAHNAH AI · Thème Pollinelle. Ambiance et structure inspirées du modèle gratuit « Fintech Landing Page Template with Flower Meadow Hero » de Kedhareswer Naidu (kedhareswer) sur 21st.dev (https://21st.dev/community/templates/fintech-landing-page-template-with-flower-meadow-hero). Aucune licence indiquée sur la page du modèle : aucun code repris, code original NAHNAH AI. {%- endcomment -%}
<div class="nn-themes-pollinelle" 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: 'Plus Jakarta Sans','Manrope',system-ui,sans-serif; --nn-font2: 'Plus Jakarta Sans','Manrope',system-ui,sans-serif; --nn-fleur: {{ section.settings.couleur_fleur }};">
  <header class="nn-themes-pollinelle__entete" data-nn-entete>
    <a class="nn-themes-pollinelle__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-pollinelle__mono" aria-hidden="true"><svg viewBox="-12 -12 24 24" fill="currentColor"><path d="M0-11C1.2-3.4 3.4-1.2 11 0 3.4 1.2 1.2 3.4 0 11-1.2 3.4-3.4 1.2-11 0-3.4-1.2-1.2-3.4 0-11z"/></svg></span><span>{{ section.settings.nom_marque | default: shop.name | escape }}</span>{%- endif -%}</a>
    <nav class="nn-themes-pollinelle__nav" id="nn-themes-pollinelle-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-pollinelle__actions">
      <a class="nn-themes-pollinelle__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-pollinelle__panier" href="{{ routes.cart_url }}">Panier <span class="nn-themes-pollinelle__compte">{{ cart.item_count }}</span></a>
      <button class="nn-themes-pollinelle__burger" type="button" aria-expanded="false" aria-controls="nn-themes-pollinelle-nav-{{ section.id }}" data-nn-burger><span aria-hidden="true"></span><span aria-hidden="true"></span><span class="nn-themes-pollinelle__vh">Ouvrir le menu</span></button>
    </div>
  </header>
  <section class="nn-themes-pollinelle__heros">
    <div class="nn-themes-pollinelle__scene">
      <svg class="nn-themes-pollinelle__etoile" viewBox="-12 -12 24 24" width="28" height="28" fill="currentColor" aria-hidden="true"><path d="M0-11C1.2-3.4 3.4-1.2 11 0 3.4 1.2 1.2 3.4 0 11-1.2 3.4-3.4 1.2-11 0-3.4-1.2-1.2-3.4 0-11z"/></svg>
      <h1 data-nn-apparition>{{ section.settings.titre | escape }}{%- if section.settings.titre_suite != blank -%}<br>{{ section.settings.titre_suite | escape }}{%- endif -%}</h1>
      <p data-nn-apparition style="--nn-i: 1">{{ section.settings.texte | escape }}</p>
      <div data-nn-apparition style="--nn-i: 2"><a class="nn-themes-pollinelle__bouton" href="{{ section.settings.lien_bouton | default: routes.all_products_collection_url }}">{{ section.settings.bouton | escape }}</a></div>
      <span class="nn-themes-pollinelle__pollen" aria-hidden="true">{%- for i in (1..10) -%}<i style="--nn-p: {{ i }}"></i>{%- endfor -%}</span>
      <svg class="nn-themes-pollinelle__graine nn-themes-pollinelle__graine--a" viewBox="0 0 100 100" aria-hidden="true"><defs><radialGradient id="nn-themes-pollinelle-nacre" cx="35%" cy="30%" r="75%"><stop offset="0" stop-color="#fff"/><stop offset=".45" stop-color="#F4C6DA"/><stop offset="1" stop-color="#9E4A74"/></radialGradient></defs><ellipse cx="50" cy="50" rx="34" ry="44" fill="url(#nn-themes-pollinelle-nacre)"/><ellipse cx="40" cy="34" rx="8" ry="14" fill="#fff" opacity=".55"/></svg>
      <svg class="nn-themes-pollinelle__graine nn-themes-pollinelle__graine--b" viewBox="0 0 100 100" aria-hidden="true"><ellipse cx="50" cy="50" rx="30" ry="40" fill="url(#nn-themes-pollinelle-nacre)"/><ellipse cx="41" cy="35" rx="7" ry="12" fill="#fff" opacity=".5"/></svg>
      <svg class="nn-themes-pollinelle__prairie" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMax slice" aria-hidden="true">{%- for i in (1..70) -%}{%- assign nn_x = i | times: 173 | modulo: 1240 | minus: 20 -%}{%- assign nn_y = i | times: 29 | modulo: 90 | plus: 120 -%}{%- assign nn_r = i | modulo: 4 | plus: 5 -%}{%- assign nn_t = i | modulo: 3 -%}<g class="nn-themes-pollinelle__fleur nn-themes-pollinelle__fleur--loin nn-themes-pollinelle__teinte-{{ nn_t }}" style="animation-delay: -{{ i | modulo: 7 }}.{{ i | modulo: 9 }}s"><path d="M{{ nn_x }} 300 Q{{ nn_x | plus: 6 }} {{ nn_y | plus: 50 }} {{ nn_x }} {{ nn_y }}"/><circle cx="{{ nn_x }}" cy="{{ nn_y }}" r="{{ nn_r }}"/><circle cx="{{ nn_x | minus: nn_r }}" cy="{{ nn_y | plus: 4 }}" r="{{ nn_r | minus: 2 }}"/><circle cx="{{ nn_x | plus: nn_r }}" cy="{{ nn_y | plus: 3 }}" r="{{ nn_r | minus: 1 }}"/></g>{%- endfor -%}{%- for i in (1..46) -%}{%- assign nn_x = i | times: 263 | modulo: 1240 | minus: 20 -%}{%- assign nn_y = i | times: 29 | modulo: 70 | plus: 190 -%}{%- assign nn_r = i | modulo: 4 | plus: 9 -%}{%- assign nn_t = i | modulo: 3 -%}<g class="nn-themes-pollinelle__fleur nn-themes-pollinelle__fleur--pres nn-themes-pollinelle__teinte-{{ nn_t }}" style="animation-delay: -{{ i | modulo: 7 }}.{{ i | modulo: 9 }}s"><path d="M{{ nn_x }} 300 Q{{ nn_x | plus: 6 }} {{ nn_y | plus: 50 }} {{ nn_x }} {{ nn_y }}"/><circle cx="{{ nn_x }}" cy="{{ nn_y }}" r="{{ nn_r }}"/><circle cx="{{ nn_x | minus: nn_r }}" cy="{{ nn_y | plus: 4 }}" r="{{ nn_r | minus: 2 }}"/><circle cx="{{ nn_x | plus: nn_r }}" cy="{{ nn_y | plus: 3 }}" r="{{ nn_r | minus: 1 }}"/></g>{%- endfor -%}</svg>
    </div>
  </section>
  <section class="nn-themes-pollinelle__question-intro">
    <h2 data-nn-apparition>{{ section.settings.titre_intro | escape }}</h2>
    <p data-nn-apparition style="--nn-i: 1">{{ section.settings.texte_intro | escape }}</p>
  </section>
  <section class="nn-themes-pollinelle__bloc" id="collections">
<div class="nn-themes-pollinelle__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-pollinelle__collections">
      {%- for block in section.blocks -%}{%- if block.type == 'collection' -%}
      {%- assign col = block.settings.collection -%}
      <a class="nn-themes-pollinelle__collection" href="{{ col.url | default: routes.collections_url }}" data-nn-apparition style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <span class="nn-themes-pollinelle__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-pollinelle__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-pollinelle__bloc" id="vedettes">
<div class="nn-themes-pollinelle__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-pollinelle__produits">
      {%- for block in section.blocks -%}{%- if block.type == 'produit' -%}
      <article class="nn-themes-pollinelle__produit" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <div class="nn-themes-pollinelle__visuel" aria-hidden="true">{%- case block.settings.visuel -%}{%- when 'bac' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 62h84l-8 26H26z"/><path d="M30 88v18M90 88v18"/><path d="M40 62c0-14 8-20 8-30M48 46c-8 0-12-6-12-10 6 0 12 4 12 10M60 62c0-18 6-26 10-34M70 40c6 0 10-6 10-10-6 0-10 4-10 10M80 62c0-10-4-16-6-20"/></svg>{%- when 'secateur' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M44 76 82 26c4-6 12-2 8 4L58 82"/><path d="M58 82 30 100M44 76 22 88"/><circle cx="52" cy="78" r="4"/><path d="M58 82l-6 20M44 76l-22 2"/></svg>{%- when 'treillis' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M30 104V22M60 104V16M90 104V22M30 40 90 70M30 70 90 40M30 98 90 98"/><path d="M60 34c10 6 14 16 10 26M50 54c-8 2-12 8-10 16"/><circle cx="70" cy="62" r="5"/><circle cx="40" cy="72" r="4"/></svg>{%- when 'tunnel' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M14 92h92"/><path d="M22 92c0-40 76-40 76 0"/><path d="M40 92c0-28 40-28 40 0M60 54v38"/><path d="M34 92c0-8 6-12 6-16M80 92c0-8 4-10 6-14"/></svg>{%- endcase -%}</div>
        <span class="nn-themes-pollinelle__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-pollinelle__ref">Réf. fournisseur : {{ block.settings.reference | escape }}</small>{%- endif -%}
      </article>
      {%- endif -%}{%- endfor -%}
    </div>
    <p class="nn-themes-pollinelle__note">Produits d’exemple : choisis ta collection dans l’éditeur et décoche « Afficher les produits d’exemple ».</p>
    {%- else -%}
    <div class="nn-themes-pollinelle__produits">
      {%- for p in section.settings.collection_vedette.products limit: section.settings.nb_produits -%}
      <a class="nn-themes-pollinelle__produit" href="{{ p.url }}" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}">
        <span class="nn-themes-pollinelle__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-pollinelle__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-pollinelle__bloc" id="histoire">
<div class="nn-themes-pollinelle__histoire">
      <div class="nn-themes-pollinelle__media nn-themes-pollinelle__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-pollinelle__histoire-texte" data-nn-apparition><h2>{{ section.settings.titre_histoire | escape }}</h2><div class="nn-themes-pollinelle__rte">{{ section.settings.texte_histoire }}</div></div>
    </div>
</section>
  <section class="nn-themes-pollinelle__bloc" id="avis">
<div class="nn-themes-pollinelle__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-pollinelle__avis-liste">
      {%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}
      <figure class="nn-themes-pollinelle__avis" data-nn-apparition {{ block.shopify_attributes }}>
        <span class="nn-themes-pollinelle__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-pollinelle__note">{{ section.settings.mention_avis | escape }}</p>{%- endif -%}
    {%- else -%}
    <div class="nn-themes-pollinelle__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-pollinelle__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-pollinelle__bloc" id="faq">
<div class="nn-themes-pollinelle__tete" data-nn-apparition><h2>{{ section.settings.titre_faq | escape }}</h2></div>
    <div class="nn-themes-pollinelle__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-pollinelle__question" data-nn-apparition {{ block.shopify_attributes }}>
        <button type="button" aria-expanded="false" aria-controls="nn-themes-pollinelle-r-{{ block.id }}" data-nn-question><span class="nn-themes-pollinelle__num">{% if nn_q < 10 %}0{% endif %}{{ nn_q }}</span><span>{{ block.settings.question | escape }}</span><span class="nn-themes-pollinelle__plus" aria-hidden="true"></span></button>
        <div class="nn-themes-pollinelle__reponse" id="nn-themes-pollinelle-r-{{ block.id }}" role="region"><div>{{ block.settings.reponse }}</div></div>
      </div>
      {%- endif -%}{%- endfor -%}
    </div>
</section>
  <footer class="nn-themes-pollinelle__pied">
    <div class="nn-themes-pollinelle__pied-grille">
      <div><a class="nn-themes-pollinelle__marque" href="{{ routes.root_url }}"><span class="nn-themes-pollinelle__mono" aria-hidden="true"><svg viewBox="-12 -12 24 24" fill="currentColor"><path d="M0-11C1.2-3.4 3.4-1.2 11 0 3.4 1.2 1.2 3.4 0 11-1.2 3.4-3.4 1.2-11 0-3.4-1.2-1.2-3.4 0-11z"/></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-pollinelle__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-pollinelle__pied-titre">{{ section.settings.titre_newsletter | escape }}</p>
        {%- form 'customer', id: 'nn-themes-pollinelle-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-pollinelle__vh" for="nn-themes-pollinelle-courriel">E-mail</label><input id="nn-themes-pollinelle-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-pollinelle__copyright">© {{ 'now' | date: '%Y' }} {{ section.settings.nom_marque | default: shop.name | escape }}</p>
  </footer>
</div>

{% schema %}
{"name":"Thème Pollinelle","tag":"section","class":"nn-th-pollinelle","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":"Pollinelle"},{"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":"Un potager"},{"type":"text","id":"titre_suite","label":"Suite du titre (ton atténué ou accent)","default":"en pleine floraison"},{"type":"textarea","id":"texte","label":"Texte","default":"Bacs, outils et tuteurs pour faire pousser tomates, fraises et herbes sur quelques mètres carrés de balcon."},{"type":"text","id":"bouton","label":"Bouton principal","default":"Voir le potager"},{"type":"url","id":"lien_bouton","label":"Lien du bouton principal"},{"type":"header","content":"Introduction"},{"type":"text","id":"titre_intro","label":"Grande question","default":"Un potager sur un balcon ?"},{"type":"textarea","id":"texte_intro","label":"Réponse","default":"Oui : avec un bac surélevé, un treillis et un peu de soleil, quelques mètres carrés suffisent pour récolter herbes, salades et petits fruits de saison."},{"type":"header","content":"Collections"},{"type":"text","id":"titre_collections","label":"Titre","default":"Tout pour semer"},{"type":"text","id":"texte_collections","label":"Texte","default":"Choisis ton point de départ : un bac, des outils ou des tuteurs."},{"type":"header","content":"Produits vedettes"},{"type":"text","id":"titre_produits","label":"Titre","default":"La sélection 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":"Le jardin commence à la fenêtre"},{"type":"richtext","id":"texte_histoire","label":"Texte","default":"<p>Raconte ici d’où vient la boutique : un premier pied de tomates sur un rebord, des voisins curieux, l’envie de partager.</p><p>Dis comment tu choisis tes outils et ce que tu fais pousser toi-même.</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":"Récoltes de nos clients"},{"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":"Bacs, outils et tuteurs pour jardiner en ville."},{"type":"text","id":"titre_newsletter","label":"Titre newsletter","default":"Le calendrier des semis, chaque mois"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#F3F2F5"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#16141F"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#3A1B2D"},{"type":"color","id":"couleur_second","label":"Secondaire","default":"#F4C6DA"},{"type":"color","id":"couleur_fleur","label":"Fleurs de la prairie","default":"#AD4278"}],"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":"bac","label":"Bac surélevé"},{"value":"secateur","label":"Sécateur"},{"value":"treillis","label":"Treillis"},{"value":"tunnel","label":"Tunnel de culture"}],"default":"bac"},{"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 Pollinelle","blocks":[{"type":"collection","settings":{"titre":"Bacs et jardinières","texte":"Pour balcons et terrasses"}},{"type":"collection","settings":{"titre":"Outils à main","texte":"Légers et précis"}},{"type":"collection","settings":{"titre":"Tuteurs et treillis","texte":"Pour les grimpantes"}},{"type":"produit","settings":{"titre":"Bac potager surélevé avec réserve d’eau","detail":"Une réserve espace les arrosages","visuel":"bac","reference":"CJ 1955104915645693953"}},{"type":"produit","settings":{"titre":"Sécateur de jardin léger","detail":"Pour tailler sans forcer","visuel":"secateur","reference":"CJ 2501080655431624400"}},{"type":"produit","settings":{"titre":"Treillis en métal pour plantes grimpantes","detail":"Tomates, pois, haricots","visuel":"treillis","reference":"CJ 1909547667677949953"}},{"type":"produit","settings":{"titre":"Tunnel de culture en PVC et métal","detail":"Abrite les jeunes plants","visuel":"tunnel","reference":"CJ 1906978566568574978"}},{"type":"faq","settings":{"question":"Quels sont les délais de livraison ?","reponse":"<p>Les colis partent avec suivi. Indique ici tes délais réels de préparation et de transport, pays par pays.</p>"}},{"type":"faq","settings":{"question":"Puis-je retourner un article ?","reponse":"<p>Tu disposes de 14 jours après réception pour exercer ton droit de rétractation. Précise ici tes conditions de retour et de remboursement.</p>"}},{"type":"faq","settings":{"question":"Mon balcon est peu ensoleillé, que faire pousser ?","reponse":"<p>Les herbes aromatiques et les salades se contentent de quelques heures de soleil. Ajoute ici tes conseils selon l’exposition.</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 Pollinelle : thème complet (code original NAHNAH AI) */
.nn-themes-pollinelle{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-pollinelle *{box-sizing:border-box}
.nn-themes-pollinelle a{color:inherit;text-decoration:none}
.nn-themes-pollinelle img,.nn-themes-pollinelle svg{display:block;max-width:100%}
.nn-themes-pollinelle h1,.nn-themes-pollinelle h2,.nn-themes-pollinelle h3{font-family:var(--nn-font);margin:0}
.nn-themes-pollinelle__vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nn-themes-pollinelle__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-pollinelle__entete.est-compact{padding-block:8px}
.nn-themes-pollinelle__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-pollinelle__mono{display:inline-flex;width:26px;height:26px;color:var(--nn-accent)}
.nn-themes-pollinelle__mono svg{width:100%;height:100%}
.nn-themes-pollinelle__nav{display:none;gap:22px;margin:0 auto}
.nn-themes-pollinelle__nav a{position:relative;opacity:.8;transition:opacity .2s}
.nn-themes-pollinelle__nav a:hover{opacity:1}
.nn-themes-pollinelle__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nn-themes-pollinelle__icone{display:inline-flex;padding:6px}
.nn-themes-pollinelle__panier{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.nn-themes-pollinelle__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-pollinelle__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-pollinelle__burger span[aria-hidden]{display:block;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-pollinelle.menu-ouvert .nn-themes-pollinelle__burger span[aria-hidden]:first-child{transform:translateY(3.5px) rotate(45deg)}
.nn-themes-pollinelle.menu-ouvert .nn-themes-pollinelle__burger span[aria-hidden]:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.nn-themes-pollinelle.menu-ouvert .nn-themes-pollinelle__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-pollinelle__bloc{position:relative;max-width:1240px;margin:0 auto;padding:56px 16px}
.nn-themes-pollinelle__tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.nn-themes-pollinelle__tete h2{font-size:clamp(28px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em}
.nn-themes-pollinelle__tete p{margin:0;max-width:46ch;opacity:.75}
.nn-themes-pollinelle__collections{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.nn-themes-pollinelle__collection{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.nn-themes-pollinelle__media{display:block;overflow:hidden}
.nn-themes-pollinelle__media img,.nn-themes-pollinelle__media svg{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.nn-themes-pollinelle__collection .nn-themes-pollinelle__media{aspect-ratio:4/3}
.nn-themes-pollinelle__collection:hover .nn-themes-pollinelle__media img{transform:scale(1.05)}
.nn-themes-pollinelle__collection-texte{display:flex;flex-direction:column;gap:2px}
.nn-themes-pollinelle__collection-texte small{opacity:.7}
.nn-themes-pollinelle__produits{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.nn-themes-pollinelle__produit{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;transition:transform .35s,box-shadow .35s,border-color .35s}
.nn-themes-pollinelle__produit h3{font-size:17px;line-height:1.3;font-family:var(--nn-font2);font-weight:600}
.nn-themes-pollinelle__produit p{margin:0;font-size:14px;opacity:.72}
.nn-themes-pollinelle__produit .nn-themes-pollinelle__media{aspect-ratio:1}
.nn-themes-pollinelle__visuel{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.nn-themes-pollinelle__visuel svg{width:72%;height:72%}
.nn-themes-pollinelle__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-pollinelle__ref{font-size:11px;opacity:.6}
.nn-themes-pollinelle__prix{font-weight:700}
.nn-themes-pollinelle__prix s{opacity:.5;font-weight:400}
.nn-themes-pollinelle__note{margin:18px 0 0;font-size:13px;opacity:.6}
.nn-themes-pollinelle__histoire{display:grid;gap:28px;align-items:center}
.nn-themes-pollinelle__histoire-media{aspect-ratio:4/3}
.nn-themes-pollinelle__histoire-texte h2{font-size:clamp(28px,4.2vw,48px);line-height:1.08;margin-bottom:16px}
.nn-themes-pollinelle__rte p{margin:0 0 12px}
.nn-themes-pollinelle__avis-liste{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.nn-themes-pollinelle__avis{margin:0;padding:22px;display:flex;flex-direction:column;gap:10px}
.nn-themes-pollinelle__avis blockquote{margin:0}
.nn-themes-pollinelle__etoiles{color:var(--nn-accent);letter-spacing:2px}
.nn-themes-pollinelle__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-pollinelle__avis-vide span{letter-spacing:4px;opacity:.5}
.nn-themes-pollinelle__avis-vide p{margin:0;max-width:52ch;opacity:.8}
.nn-themes-pollinelle__faq{display:grid;gap:0}
.nn-themes-pollinelle__question{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 16%,transparent)}
.nn-themes-pollinelle__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-pollinelle__num{font-size:12px;opacity:.5;font-variant-numeric:tabular-nums}
.nn-themes-pollinelle__plus{position:relative;width:14px;height:14px;margin-left:auto;flex:none}
.nn-themes-pollinelle__plus::before,.nn-themes-pollinelle__plus::after{content:"";position:absolute;inset:6px 0 auto;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-pollinelle__plus::after{transform:rotate(90deg)}
.nn-themes-pollinelle__question button[aria-expanded=true] .nn-themes-pollinelle__plus::after{transform:rotate(0)}
.nn-themes-pollinelle__reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.nn-themes-pollinelle__reponse>div{overflow:hidden;opacity:.8}
.nn-themes-pollinelle__question.est-ouverte .nn-themes-pollinelle__reponse{grid-template-rows:1fr}
.nn-themes-pollinelle__reponse p{margin:0 0 16px}
.nn-themes-pollinelle__pied{position:relative;padding:56px 16px 28px}
.nn-themes-pollinelle__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-pollinelle__pied-liens{display:grid;gap:8px;align-content:start}
.nn-themes-pollinelle__pied-liens a{opacity:.75}
.nn-themes-pollinelle__pied-liens a:hover{opacity:1}
.nn-themes-pollinelle__pied-titre{margin:0 0 10px;font-weight:600}
.nn-themes-pollinelle__pied form{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-pollinelle__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-pollinelle__pied button{padding:12px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:700;cursor:pointer}
.nn-themes-pollinelle__pied small{display:block;margin-top:8px;opacity:.55;font-size:12px}
.nn-themes-pollinelle__copyright{max-width:1240px;margin:32px auto 0;font-size:13px;opacity:.55}
.nn-themes-pollinelle [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-pollinelle [data-nn-apparition].est-visible{opacity:1;transform:none}
@media (min-width:900px){.nn-themes-pollinelle__nav{display:flex}.nn-themes-pollinelle__burger{display:none}.nn-themes-pollinelle__entete{padding:16px 40px}.nn-themes-pollinelle__bloc{padding:88px 40px}.nn-themes-pollinelle__histoire{grid-template-columns:1.05fr .95fr}.nn-themes-pollinelle__pied{padding:72px 40px 32px}}

/* Direction artistique propre au thème */
.nn-themes-pollinelle__entete{background:color-mix(in srgb,var(--nn-fond) 82%,transparent);backdrop-filter:blur(12px)}
.nn-themes-pollinelle__entete.est-compact{box-shadow:0 10px 30px -24px var(--nn-accent)}
.nn-themes-pollinelle__mono{color:var(--nn-texte);width:20px;height:20px}
.nn-themes-pollinelle__compte{background:var(--nn-accent)}
.nn-themes-pollinelle__heros{padding:8px 12px 0}
.nn-themes-pollinelle__scene{position:relative;overflow:hidden;max-width:1300px;margin:0 auto;min-height:560px;border-radius:28px;padding:56px 18px 0;text-align:center;background:radial-gradient(120% 80% at 50% 0%,#fff 0%,color-mix(in srgb,var(--nn-second) 55%,#fff) 45%,var(--nn-second) 100%)}
.nn-themes-pollinelle__etoile{margin:0 auto 14px;color:var(--nn-texte);animation:nn-themes-pollinelle-scintille 4s ease-in-out infinite}
@keyframes nn-themes-pollinelle-scintille{50%{transform:rotate(45deg) scale(.82);opacity:.7}}
.nn-themes-pollinelle__heros h1{font-size:clamp(42px,8vw,92px);line-height:.98;letter-spacing:-.045em;font-weight:500}
.nn-themes-pollinelle__heros p{max-width:44ch;margin:18px auto 24px;opacity:.75}
.nn-themes-pollinelle__bouton{display:inline-flex;padding:13px 24px;border-radius:999px;background:var(--nn-accent);color:#fff!important;font-weight:600;transition:transform .3s,box-shadow .3s}
.nn-themes-pollinelle__bouton:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 30px -14px var(--nn-accent)}
.nn-themes-pollinelle__prairie{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;pointer-events:none}
.nn-themes-pollinelle__fleur{transform-box:fill-box;transform-origin:50% 100%;animation:nn-themes-pollinelle-vent 5.5s ease-in-out infinite}
.nn-themes-pollinelle__fleur path{stroke:#B79B6B;stroke-width:1.4;fill:none;opacity:.6}
.nn-themes-pollinelle__fleur--loin circle{opacity:.55}
.nn-themes-pollinelle__teinte-0 circle{fill:var(--nn-fleur)}
.nn-themes-pollinelle__teinte-1 circle{fill:color-mix(in srgb,var(--nn-fleur) 45%,#fff)}
.nn-themes-pollinelle__teinte-2 circle{fill:color-mix(in srgb,var(--nn-fleur) 70%,#3A1B2D)}
.nn-themes-pollinelle__fleur--pres{animation-duration:4.2s}
@keyframes nn-themes-pollinelle-vent{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3.5deg)}}
.nn-themes-pollinelle__graine{position:absolute;filter:drop-shadow(0 18px 18px rgba(80,20,50,.25));animation:nn-themes-pollinelle-flotte 6s ease-in-out infinite;z-index:2}
.nn-themes-pollinelle__graine--a{width:110px;left:16%;bottom:24%;transform:rotate(-18deg)}
.nn-themes-pollinelle__graine--b{width:84px;right:13%;bottom:34%;animation-delay:-3s;animation-duration:7s}
@keyframes nn-themes-pollinelle-flotte{0%,100%{translate:0 0;rotate:-14deg}50%{translate:0 -16px;rotate:-4deg}}
.nn-themes-pollinelle__pollen i{position:absolute;bottom:18%;left:calc(var(--nn-p)*9%);width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;opacity:0;animation:nn-themes-pollinelle-pollen 7s linear infinite;animation-delay:calc(var(--nn-p)*-.7s)}
@keyframes nn-themes-pollinelle-pollen{10%{opacity:.9}100%{transform:translate(30px,-340px);opacity:0}}
.nn-themes-pollinelle__question-intro{max-width:1240px;margin:0 auto;padding:72px 16px 8px;display:grid;gap:18px}
.nn-themes-pollinelle__question-intro h2{font-size:clamp(36px,6vw,72px);line-height:1;letter-spacing:-.04em;font-weight:500}
.nn-themes-pollinelle__question-intro p{margin:0;font-size:clamp(18px,2vw,24px);line-height:1.4;max-width:34ch}
.nn-themes-pollinelle__collection{border-radius:24px;padding:10px;background:#fff}
.nn-themes-pollinelle__collection .nn-themes-pollinelle__media{border-radius:18px}
.nn-themes-pollinelle__produit{border-radius:24px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.nn-themes-pollinelle__produit:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 26px 40px -30px var(--nn-accent)}
.nn-themes-pollinelle__visuel{border-radius:18px;background:radial-gradient(circle at 50% 30%,#fff,var(--nn-second));color:var(--nn-accent)}
.nn-themes-pollinelle__produit .nn-themes-pollinelle__media{border-radius:18px}
.nn-themes-pollinelle__exemple{border-radius:999px}
.nn-themes-pollinelle__histoire-media{border-radius:28px}
.nn-themes-pollinelle__avis,.nn-themes-pollinelle__avis-vide{border-radius:24px;background:#fff}
.nn-themes-pollinelle__avis-vide{border-color:var(--nn-second)}
.nn-themes-pollinelle__pied{margin:24px 12px 12px;border-radius:28px;background:var(--nn-accent);color:#fff}
.nn-themes-pollinelle__pied input[type=email]{border-radius:999px;border-color:rgba(255,255,255,.4)}
.nn-themes-pollinelle__pied button{border-radius:999px;background:var(--nn-second);color:var(--nn-accent)}
.nn-themes-pollinelle__pied .nn-themes-pollinelle__mono{color:#fff}
@media (min-width:900px){.nn-themes-pollinelle__question-intro{grid-template-columns:1.1fr .9fr;align-items:end;padding:110px 40px 16px}.nn-themes-pollinelle__scene{min-height:640px;padding-top:76px}.nn-themes-pollinelle__heros{padding:8px 32px 0}}

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

{% javascript %}
// NAHNAH AI · Thème Pollinelle : 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
    // Graines : légère parallaxe au pointeur (le décor suit la souris)
    if (!calme) {
      var scene = racine.querySelector('.nn-themes-pollinelle__scene');
      var graines = racine.querySelectorAll('.nn-themes-pollinelle__graine');
      if (scene) scene.addEventListener('pointermove', function (e) {
        var r = scene.getBoundingClientRect();
        var x = (e.clientX - r.left) / r.width - 0.5, y = (e.clientY - r.top) / r.height - 0.5;
        graines.forEach(function (g, k) { g.style.transform = 'translate(' + (x * (k ? -18 : 24)).toFixed(1) + 'px,' + (y * (k ? -12 : 16)).toFixed(1) + 'px)'; });
      });
    }
  }
  function tout() { document.querySelectorAll('.nn-themes-pollinelle').forEach(brancher); }
  tout();
  document.addEventListener('shopify:section:load', tout);
})();
{% endjavascript %}