Thème Bureviel

{%- comment -%} NAHNAH AI · Thème Bureviel. Ambiance et structure inspirées du modèle payant « Vertex – AI Workflow Automation Landing Template » de ruixen.ui (21st.dev) : aucun code repris, code original NAHNAH AI. {%- endcomment -%}
<div class="nn-themes-bureviel" 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: 'Fraunces','Times New Roman',Georgia,serif; --nn-font2: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;">
  <header class="nn-themes-bureviel__entete" data-nn-entete>
    <a class="nn-themes-bureviel__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-bureviel__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2 20 7v10l-8 5-8-5V7z"/><path d="m12 2v20M4 7l16 10M20 7 4 17"/></svg></span><span>{{ section.settings.nom_marque | default: shop.name | escape }}</span>{%- endif -%}</a>
    <nav class="nn-themes-bureviel__nav" id="nn-themes-bureviel-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-bureviel__actions">
      <a class="nn-themes-bureviel__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-bureviel__panier" href="{{ routes.cart_url }}">Panier <span class="nn-themes-bureviel__compte">{{ cart.item_count }}</span></a>
      <button class="nn-themes-bureviel__burger" type="button" aria-expanded="false" aria-controls="nn-themes-bureviel-nav-{{ section.id }}" data-nn-burger><span aria-hidden="true"></span><span aria-hidden="true"></span><span class="nn-themes-bureviel__vh">Ouvrir le menu</span></button>
    </div>
  </header>
  <section class="nn-themes-bureviel__heros">
    <span class="nn-themes-bureviel__cadre" aria-hidden="true"></span>
    {%- if section.settings.surtitre != blank -%}<p class="nn-themes-bureviel__badge" data-nn-apparition><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z"/></svg>{{ section.settings.surtitre | escape }}</p>{%- endif -%}
    <h1 data-nn-apparition style="--nn-i: 1">{{ section.settings.titre | escape }}</h1>
    <p class="nn-themes-bureviel__intro" data-nn-apparition style="--nn-i: 2">{{ section.settings.texte | escape }}</p>
    <div class="nn-themes-bureviel__boutons" data-nn-apparition style="--nn-i: 3"><a class="nn-themes-bureviel__bouton" href="{{ section.settings.lien_bouton | default: routes.all_products_collection_url }}">{{ section.settings.bouton | escape }}</a>{%- if section.settings.bouton2 != blank -%}<a class="nn-themes-bureviel__bouton nn-themes-bureviel__bouton--second" href="{{ section.settings.lien_bouton2 | default: '#zones' }}">{{ section.settings.bouton2 | escape }}</a>{%- endif -%}</div>
    <div class="nn-themes-bureviel__pile" id="zones" data-nn-apparition style="--nn-i: 4">
      <div class="nn-themes-bureviel__fiche" style="--nn-k: 3"><i style="--nn-c: #E5484D"></i><b>{{ section.settings.fiche_1 | escape }}</b><span>{{ section.settings.fiche_1_texte | escape }}</span></div>
      <div class="nn-themes-bureviel__fiche" style="--nn-k: 2"><i style="--nn-c: #3E63DD"></i><b>{{ section.settings.fiche_2 | escape }}</b><span>{{ section.settings.fiche_2_texte | escape }}</span></div>
      <div class="nn-themes-bureviel__fiche" style="--nn-k: 1"><i style="--nn-c: #30A46C"></i><b>{{ section.settings.fiche_3 | escape }}</b><span>{{ section.settings.fiche_3_texte | escape }}</span></div>
      <div class="nn-themes-bureviel__panneau">
        <div class="nn-themes-bureviel__panneau-gauche">
          <svg class="nn-themes-bureviel__bureau" viewBox="0 0 260 170" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M14 128h232M30 128v34M230 128v34"/><rect x="70" y="40" width="120" height="70" rx="6"/><path d="M118 110v18M100 128h60"/><path class="nn-themes-bureviel__ecran" d="M84 56h60M84 70h86M84 84h44"/><path d="M212 128V74l-22-20"/><path d="M178 50l24 8-8 10z"/><path class="nn-themes-bureviel__halo" d="M186 66 160 126h60z" fill="currentColor" stroke="none"/><path d="M40 128v-14h20v14M44 114c-6-14 4-22 6-30 4 10 12 16 4 30"/></svg>
          <h3>{{ section.settings.titre_panneau | escape }}</h3>
        </div>
        <div class="nn-themes-bureviel__panneau-droite">
          <div class="nn-themes-bureviel__puces" role="tablist" aria-label="{{ section.settings.titre_panneau | escape }}">
            {%- for k in (1..4) -%}{%- capture cle -%}zone_{{ k }}{%- endcapture -%}<button type="button" role="tab" class="nn-themes-bureviel__puce{% if k == 1 %} est-active{% endif %}" aria-selected="{% if k == 1 %}true{% else %}false{% endif %}" data-nn-zone="{{ k }}">{{ section.settings[cle] | escape }}</button>{%- endfor -%}
          </div>
          {%- for k in (1..4) -%}{%- capture cle -%}zone_{{ k }}_texte{%- endcapture -%}<p class="nn-themes-bureviel__zone{% if k == 1 %} est-active{% endif %}" role="tabpanel" data-nn-zone-texte="{{ k }}">{{ section.settings[cle] | escape }}</p>{%- endfor -%}
          <span class="nn-themes-bureviel__jauge" aria-hidden="true"><span></span></span>
        </div>
      </div>
    </div>
  </section>
  <section class="nn-themes-bureviel__bloc" id="collections">
<div class="nn-themes-bureviel__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-bureviel__collections">
      {%- for block in section.blocks -%}{%- if block.type == 'collection' -%}
      {%- assign col = block.settings.collection -%}
      <a class="nn-themes-bureviel__collection" href="{{ col.url | default: routes.collections_url }}" data-nn-apparition style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <span class="nn-themes-bureviel__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-bureviel__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-bureviel__bloc" id="vedettes">
<div class="nn-themes-bureviel__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-bureviel__produits">
      {%- for block in section.blocks -%}{%- if block.type == 'produit' -%}
      <article class="nn-themes-bureviel__produit" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <div class="nn-themes-bureviel__visuel" aria-hidden="true">{%- case block.settings.visuel -%}{%- when 'pliable' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 92h84"/><path d="M30 92 74 40l14 6-34 46"/><path d="M74 40l18-6"/><path d="M40 92l14-20"/></svg>{%- when 'alu' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M16 88h88"/><path d="M28 88 46 52h58L86 88"/><path d="M52 60h44M48 68h44M44 76h44"/><path d="M46 52 38 34h50l16 18"/></svg>{%- when 'clips' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M10 40h100"/><rect x="22" y="40" width="18" height="16" rx="4"/><rect x="52" y="40" width="18" height="16" rx="4"/><rect x="82" y="40" width="18" height="16" rx="4"/><path d="M31 56c0 30-14 30-14 50M61 56c0 26 6 30 6 50M91 56c0 22 14 30 14 50"/></svg>{%- when 'lateral' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="14" y="26" width="64" height="44" rx="4"/><path d="M46 70v16M32 86h28"/><path d="M78 40h10"/><rect x="88" y="28" width="20" height="38" rx="5"/><path d="M95 60h6"/></svg>{%- endcase -%}</div>
        <span class="nn-themes-bureviel__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-bureviel__ref">Réf. fournisseur : {{ block.settings.reference | escape }}</small>{%- endif -%}
      </article>
      {%- endif -%}{%- endfor -%}
    </div>
    <p class="nn-themes-bureviel__note">Produits d’exemple : choisis ta collection dans l’éditeur et décoche « Afficher les produits d’exemple ».</p>
    {%- else -%}
    <div class="nn-themes-bureviel__produits">
      {%- for p in section.settings.collection_vedette.products limit: section.settings.nb_produits -%}
      <a class="nn-themes-bureviel__produit" href="{{ p.url }}" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}">
        <span class="nn-themes-bureviel__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-bureviel__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-bureviel__bloc" id="histoire">
<div class="nn-themes-bureviel__histoire">
      <div class="nn-themes-bureviel__media nn-themes-bureviel__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-bureviel__histoire-texte" data-nn-apparition><h2>{{ section.settings.titre_histoire | escape }}</h2><div class="nn-themes-bureviel__rte">{{ section.settings.texte_histoire }}</div></div>
    </div>
</section>
  <section class="nn-themes-bureviel__bloc" id="avis">
<div class="nn-themes-bureviel__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-bureviel__avis-liste">
      {%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}
      <figure class="nn-themes-bureviel__avis" data-nn-apparition {{ block.shopify_attributes }}>
        <span class="nn-themes-bureviel__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-bureviel__note">{{ section.settings.mention_avis | escape }}</p>{%- endif -%}
    {%- else -%}
    <div class="nn-themes-bureviel__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-bureviel__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-bureviel__bloc" id="faq">
<div class="nn-themes-bureviel__tete" data-nn-apparition><h2>{{ section.settings.titre_faq | escape }}</h2></div>
    <div class="nn-themes-bureviel__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-bureviel__question" data-nn-apparition {{ block.shopify_attributes }}>
        <button type="button" aria-expanded="false" aria-controls="nn-themes-bureviel-r-{{ block.id }}" data-nn-question><span class="nn-themes-bureviel__num">{% if nn_q < 10 %}0{% endif %}{{ nn_q }}</span><span>{{ block.settings.question | escape }}</span><span class="nn-themes-bureviel__plus" aria-hidden="true"></span></button>
        <div class="nn-themes-bureviel__reponse" id="nn-themes-bureviel-r-{{ block.id }}" role="region"><div>{{ block.settings.reponse }}</div></div>
      </div>
      {%- endif -%}{%- endfor -%}
    </div>
</section>
  <footer class="nn-themes-bureviel__pied">
    <div class="nn-themes-bureviel__pied-grille">
      <div><a class="nn-themes-bureviel__marque" href="{{ routes.root_url }}"><span class="nn-themes-bureviel__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2 20 7v10l-8 5-8-5V7z"/><path d="m12 2v20M4 7l16 10M20 7 4 17"/></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-bureviel__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-bureviel__pied-titre">{{ section.settings.titre_newsletter | escape }}</p>
        {%- form 'customer', id: 'nn-themes-bureviel-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-bureviel__vh" for="nn-themes-bureviel-courriel">E-mail</label><input id="nn-themes-bureviel-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-bureviel__copyright">© {{ 'now' | date: '%Y' }} {{ section.settings.nom_marque | default: shop.name | escape }}</p>
  </footer>
</div>

{% schema %}
{"name":"Thème Bureviel","tag":"section","class":"nn-th-bureviel","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":"Bureviel"},{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"header","content":"Héros"},{"type":"text","id":"surtitre","label":"Surtitre","default":"Un poste rangé, l’esprit libre"},{"type":"text","id":"titre","label":"Titre","default":"Un bureau qui travaille avec toi"},{"type":"textarea","id":"texte","label":"Texte","default":"Supports, rangements et lumière pour installer un poste net, à la maison comme au bureau, sans y passer le week-end."},{"type":"text","id":"bouton","label":"Bouton principal","default":"Équiper mon bureau"},{"type":"url","id":"lien_bouton","label":"Lien du bouton principal"},{"type":"text","id":"bouton2","label":"Bouton secondaire","default":"Voir les zones"},{"type":"url","id":"lien_bouton2","label":"Lien du bouton secondaire"},{"type":"header","content":"Pile de fiches (héros)"},{"type":"text","id":"fiche_1","label":"Fiche 1","default":"Écran"},{"type":"text","id":"fiche_1_texte","label":"Fiche 1 · détail","default":"à hauteur des yeux"},{"type":"text","id":"fiche_2","label":"Fiche 2","default":"Câbles"},{"type":"text","id":"fiche_2_texte","label":"Fiche 2 · détail","default":"rangés sous le plateau"},{"type":"text","id":"fiche_3","label":"Fiche 3","default":"Lumière"},{"type":"text","id":"fiche_3_texte","label":"Fiche 3 · détail","default":"douce en fin de journée"},{"type":"text","id":"titre_panneau","label":"Titre du panneau","default":"Ton poste, zone par zone"},{"type":"text","id":"zone_1","label":"Zone 1","default":"Posture"},{"type":"textarea","id":"zone_1_texte","label":"Zone 1 · texte","default":"Rehausse l’écran ou l’ordinateur portable : le haut de l’écran arrive à hauteur des yeux."},{"type":"text","id":"zone_2","label":"Zone 2","default":"Câbles"},{"type":"textarea","id":"zone_2_texte","label":"Zone 2 · texte","default":"Des clips sous le plateau gardent chaque câble à sa place, le bureau reste dégagé."},{"type":"text","id":"zone_3","label":"Zone 3","default":"Téléphone"},{"type":"textarea","id":"zone_3_texte","label":"Zone 3 · texte","default":"Un support latéral garde le téléphone visible sans encombrer le plan de travail."},{"type":"text","id":"zone_4","label":"Zone 4","default":"Rangement"},{"type":"textarea","id":"zone_4_texte","label":"Zone 4 · texte","default":"Un support pliable se range dans un tiroir ou un sac quand la journée est finie."},{"type":"header","content":"Collections"},{"type":"text","id":"titre_collections","label":"Titre","default":"Par zone du bureau"},{"type":"text","id":"texte_collections","label":"Texte","default":"Choisis par où commencer : l’écran, les câbles ou la lumière."},{"type":"header","content":"Produits vedettes"},{"type":"text","id":"titre_produits","label":"Titre","default":"Pour bien commencer"},{"type":"checkbox","id":"afficher_exemples","label":"Afficher les produits d’exemple","default":true,"info":"Décoche-la quand ta collection est prête : tes vrais produits et leurs prix s’afficheront."},{"type":"collection","id":"collection_vedette","label":"Collection vedette"},{"type":"range","id":"nb_produits","label":"Nombre de produits","min":2,"max":12,"step":1,"default":8},{"type":"header","content":"Histoire"},{"type":"text","id":"titre_histoire","label":"Titre","default":"Un poste de travail se règle, il ne s’endure pas"},{"type":"richtext","id":"texte_histoire","label":"Texte","default":"<p>Raconte ici pourquoi tu as lancé la boutique : la table de cuisine devenue bureau, le dos qui proteste, l’envie d’un espace calme.</p><p>Explique comment tu choisis chaque accessoire et ce que tu vérifies avant de le 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":"Ils ont installé leur poste"},{"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":"Accessoires de bureau pour travailler bien installé, chez soi comme ailleurs."},{"type":"text","id":"titre_newsletter","label":"Titre newsletter","default":"Conseils d’installation et nouveautés"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#FAFAF8"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#151515"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#151515"},{"type":"color","id":"couleur_second","label":"Secondaire","default":"#E7E5E0"}],"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":"pliable","label":"Support pliable"},{"value":"alu","label":"Support aluminium"},{"value":"clips","label":"Clips à câbles"},{"value":"lateral","label":"Support latéral"}],"default":"pliable"},{"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 Bureviel","blocks":[{"type":"collection","settings":{"titre":"Supports et rehausseurs","texte":"Écran et portable à la bonne hauteur"}},{"type":"collection","settings":{"titre":"Rangement des câbles","texte":"Un plateau dégagé"}},{"type":"collection","settings":{"titre":"Lumière de bureau","texte":"Pour les fins de journée"}},{"type":"produit","settings":{"titre":"Support pliable pour ordinateur portable","detail":"Se replie et se glisse dans un sac","visuel":"pliable","reference":"CJ 4C56FFFA-399B-4E05-98C6-092BB3A724A9"}},{"type":"produit","settings":{"titre":"Support ventilé en aluminium pour portable","detail":"Laisse circuler l’air sous l’ordinateur","visuel":"alu","reference":"CJ 2508270727211626000"}},{"type":"produit","settings":{"titre":"Clips magnétiques pour câbles sous le bureau","detail":"Chaque câble garde sa place","visuel":"clips","reference":"CJ 1763402968205897728"}},{"type":"produit","settings":{"titre":"Support latéral magnétique pour téléphone","detail":"Se fixe sur le côté de l’écran","visuel":"lateral","reference":"CJ 1729723634354638848"}},{"type":"faq","settings":{"question":"Quels sont les délais de livraison ?","reponse":"<p>Les colis sont expédiés avec suivi. Indique ici tes délais réels de préparation et de transport, pays par pays.</p>"}},{"type":"faq","settings":{"question":"Puis-je retourner un article ?","reponse":"<p>Tu disposes de 14 jours après réception pour exercer ton droit de rétractation. Précise ici tes conditions de retour et de remboursement.</p>"}},{"type":"faq","settings":{"question":"Comment savoir si un support convient à mon matériel ?","reponse":"<p>Chaque fiche produit indique les dimensions et le poids supportés : compare-les à ton écran ou à ton ordinateur avant de commander.</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 Bureviel : thème complet (code original NAHNAH AI) */
.nn-themes-bureviel{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-bureviel *{box-sizing:border-box}
.nn-themes-bureviel a{color:inherit;text-decoration:none}
.nn-themes-bureviel img,.nn-themes-bureviel svg{display:block;max-width:100%}
.nn-themes-bureviel h1,.nn-themes-bureviel h2,.nn-themes-bureviel h3{font-family:var(--nn-font);margin:0}
.nn-themes-bureviel__vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nn-themes-bureviel__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-bureviel__entete.est-compact{padding-block:8px}
.nn-themes-bureviel__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-bureviel__mono{display:inline-flex;width:26px;height:26px;color:var(--nn-accent)}
.nn-themes-bureviel__mono svg{width:100%;height:100%}
.nn-themes-bureviel__nav{display:none;gap:22px;margin:0 auto}
.nn-themes-bureviel__nav a{position:relative;opacity:.8;transition:opacity .2s}
.nn-themes-bureviel__nav a:hover{opacity:1}
.nn-themes-bureviel__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nn-themes-bureviel__icone{display:inline-flex;padding:6px}
.nn-themes-bureviel__panier{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.nn-themes-bureviel__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-bureviel__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-bureviel__burger span[aria-hidden]{display:block;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-bureviel.menu-ouvert .nn-themes-bureviel__burger span[aria-hidden]:first-child{transform:translateY(3.5px) rotate(45deg)}
.nn-themes-bureviel.menu-ouvert .nn-themes-bureviel__burger span[aria-hidden]:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.nn-themes-bureviel.menu-ouvert .nn-themes-bureviel__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-bureviel__bloc{position:relative;max-width:1240px;margin:0 auto;padding:56px 16px}
.nn-themes-bureviel__tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.nn-themes-bureviel__tete h2{font-size:clamp(28px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em}
.nn-themes-bureviel__tete p{margin:0;max-width:46ch;opacity:.75}
.nn-themes-bureviel__collections{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.nn-themes-bureviel__collection{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.nn-themes-bureviel__media{display:block;overflow:hidden}
.nn-themes-bureviel__media img,.nn-themes-bureviel__media svg{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.nn-themes-bureviel__collection .nn-themes-bureviel__media{aspect-ratio:4/3}
.nn-themes-bureviel__collection:hover .nn-themes-bureviel__media img{transform:scale(1.05)}
.nn-themes-bureviel__collection-texte{display:flex;flex-direction:column;gap:2px}
.nn-themes-bureviel__collection-texte small{opacity:.7}
.nn-themes-bureviel__produits{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.nn-themes-bureviel__produit{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;transition:transform .35s,box-shadow .35s,border-color .35s}
.nn-themes-bureviel__produit h3{font-size:17px;line-height:1.3;font-family:var(--nn-font2);font-weight:600}
.nn-themes-bureviel__produit p{margin:0;font-size:14px;opacity:.72}
.nn-themes-bureviel__produit .nn-themes-bureviel__media{aspect-ratio:1}
.nn-themes-bureviel__visuel{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.nn-themes-bureviel__visuel svg{width:72%;height:72%}
.nn-themes-bureviel__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-bureviel__ref{font-size:11px;opacity:.6}
.nn-themes-bureviel__prix{font-weight:700}
.nn-themes-bureviel__prix s{opacity:.5;font-weight:400}
.nn-themes-bureviel__note{margin:18px 0 0;font-size:13px;opacity:.6}
.nn-themes-bureviel__histoire{display:grid;gap:28px;align-items:center}
.nn-themes-bureviel__histoire-media{aspect-ratio:4/3}
.nn-themes-bureviel__histoire-texte h2{font-size:clamp(28px,4.2vw,48px);line-height:1.08;margin-bottom:16px}
.nn-themes-bureviel__rte p{margin:0 0 12px}
.nn-themes-bureviel__avis-liste{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.nn-themes-bureviel__avis{margin:0;padding:22px;display:flex;flex-direction:column;gap:10px}
.nn-themes-bureviel__avis blockquote{margin:0}
.nn-themes-bureviel__etoiles{color:var(--nn-accent);letter-spacing:2px}
.nn-themes-bureviel__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-bureviel__avis-vide span{letter-spacing:4px;opacity:.5}
.nn-themes-bureviel__avis-vide p{margin:0;max-width:52ch;opacity:.8}
.nn-themes-bureviel__faq{display:grid;gap:0}
.nn-themes-bureviel__question{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 16%,transparent)}
.nn-themes-bureviel__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-bureviel__num{font-size:12px;opacity:.5;font-variant-numeric:tabular-nums}
.nn-themes-bureviel__plus{position:relative;width:14px;height:14px;margin-left:auto;flex:none}
.nn-themes-bureviel__plus::before,.nn-themes-bureviel__plus::after{content:"";position:absolute;inset:6px 0 auto;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-bureviel__plus::after{transform:rotate(90deg)}
.nn-themes-bureviel__question button[aria-expanded=true] .nn-themes-bureviel__plus::after{transform:rotate(0)}
.nn-themes-bureviel__reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.nn-themes-bureviel__reponse>div{overflow:hidden;opacity:.8}
.nn-themes-bureviel__question.est-ouverte .nn-themes-bureviel__reponse{grid-template-rows:1fr}
.nn-themes-bureviel__reponse p{margin:0 0 16px}
.nn-themes-bureviel__pied{position:relative;padding:56px 16px 28px}
.nn-themes-bureviel__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-bureviel__pied-liens{display:grid;gap:8px;align-content:start}
.nn-themes-bureviel__pied-liens a{opacity:.75}
.nn-themes-bureviel__pied-liens a:hover{opacity:1}
.nn-themes-bureviel__pied-titre{margin:0 0 10px;font-weight:600}
.nn-themes-bureviel__pied form{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-bureviel__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-bureviel__pied button{padding:12px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:700;cursor:pointer}
.nn-themes-bureviel__pied small{display:block;margin-top:8px;opacity:.55;font-size:12px}
.nn-themes-bureviel__copyright{max-width:1240px;margin:32px auto 0;font-size:13px;opacity:.55}
.nn-themes-bureviel [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-bureviel [data-nn-apparition].est-visible{opacity:1;transform:none}
@media (min-width:900px){.nn-themes-bureviel__nav{display:flex}.nn-themes-bureviel__burger{display:none}.nn-themes-bureviel__entete{padding:16px 40px}.nn-themes-bureviel__bloc{padding:88px 40px}.nn-themes-bureviel__histoire{grid-template-columns:1.05fr .95fr}.nn-themes-bureviel__pied{padding:72px 40px 32px}}

/* Direction artistique propre au thème */
.nn-themes-bureviel{background-image:linear-gradient(to right,transparent calc(50% - 621px),var(--nn-second) calc(50% - 621px),var(--nn-second) calc(50% - 620px),transparent calc(50% - 620px),transparent calc(50% + 620px),var(--nn-second) calc(50% + 620px),var(--nn-second) calc(50% + 621px),transparent calc(50% + 621px))}
.nn-themes-bureviel__entete{background:color-mix(in srgb,var(--nn-fond) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--nn-second)}
.nn-themes-bureviel__entete.est-compact{box-shadow:0 8px 24px -20px rgba(0,0,0,.6)}
.nn-themes-bureviel__marque{font-family:var(--nn-font2);font-weight:700}
.nn-themes-bureviel__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .3s}
.nn-themes-bureviel__nav a:hover::after{transform:scaleX(1)}
.nn-themes-bureviel__heros{position:relative;max-width:1240px;margin:0 auto;padding:56px 16px 40px;text-align:center}
.nn-themes-bureviel__badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:6px 14px;border:1px solid var(--nn-second);border-radius:999px;font-size:14px;background:var(--nn-fond)}
.nn-themes-bureviel__heros h1{font-size:clamp(40px,8.4vw,104px);line-height:.98;letter-spacing:-.035em;font-weight:600;max-width:15ch;margin:0 auto}
.nn-themes-bureviel__intro{max-width:56ch;margin:22px auto 0;font-size:18px;opacity:.7}
.nn-themes-bureviel__boutons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.nn-themes-bureviel__bouton{display:inline-flex;align-items:center;padding:14px 24px;border-radius:8px;background:var(--nn-accent);color:var(--nn-fond)!important;font-weight:600;border:1px solid var(--nn-accent);transition:transform .25s,box-shadow .25s}
.nn-themes-bureviel__bouton:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.6)}
.nn-themes-bureviel__bouton--second{background:var(--nn-fond);color:var(--nn-texte)!important;border-color:var(--nn-second)}
.nn-themes-bureviel__pile{position:relative;max-width:1000px;margin:56px auto 0;text-align:left}
.nn-themes-bureviel__fiche{position:relative;display:flex;align-items:center;gap:10px;margin:0 calc(var(--nn-k)*18px) -34px;padding:12px 18px 40px;border:1px solid var(--nn-second);border-radius:14px 14px 0 0;background:color-mix(in srgb,var(--nn-fond) 94%,#000);font-size:14px;transform:translateY(calc(var(--nn-k)*14px));opacity:.6;transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--nn-k)*120ms),opacity .9s,margin .9s}
.nn-themes-bureviel__fiche i{width:9px;height:9px;transform:rotate(45deg);background:var(--nn-c);flex:none}
.nn-themes-bureviel__fiche span{opacity:.6}
.nn-themes-bureviel__pile.est-visible .nn-themes-bureviel__fiche{transform:none;opacity:1;margin-bottom:-26px}
.nn-themes-bureviel__panneau{position:relative;display:grid;gap:0;border:1px solid var(--nn-second);border-radius:16px;background:var(--nn-fond);box-shadow:0 30px 60px -40px rgba(0,0,0,.45);overflow:hidden}
.nn-themes-bureviel__panneau-gauche{padding:22px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid var(--nn-second)}
.nn-themes-bureviel__bureau{width:100%;max-width:300px;color:var(--nn-texte)}
.nn-themes-bureviel__halo{opacity:.12;animation:nn-themes-bureviel-lampe 3.6s ease-in-out infinite}
.nn-themes-bureviel__ecran{stroke-dasharray:90;stroke-dashoffset:90;animation:nn-themes-bureviel-ecrire 4s ease-in-out infinite}
@keyframes nn-themes-bureviel-lampe{50%{opacity:.28}}
@keyframes nn-themes-bureviel-ecrire{40%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-90}}
.nn-themes-bureviel__panneau h3{font-size:22px;font-weight:600}
.nn-themes-bureviel__panneau-droite{position:relative;padding:22px;display:flex;flex-direction:column;gap:16px}
.nn-themes-bureviel__puces{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-bureviel__puce{padding:9px 14px;border:1px solid var(--nn-second);border-radius:10px;background:var(--nn-fond);color:inherit;font:inherit;font-size:15px;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.nn-themes-bureviel__puce.est-active{background:var(--nn-texte);color:var(--nn-fond);box-shadow:0 8px 18px -12px rgba(0,0,0,.7)}
.nn-themes-bureviel__zone{display:none;margin:0;font-size:17px;line-height:1.55;min-height:3.2em}
.nn-themes-bureviel__zone.est-active{display:block;animation:nn-themes-bureviel-entree .6s ease}
@keyframes nn-themes-bureviel-entree{from{opacity:0;transform:translateY(8px)}}
.nn-themes-bureviel__jauge{display:block;height:2px;background:var(--nn-second);overflow:hidden;border-radius:2px}
.nn-themes-bureviel__jauge span{display:block;height:100%;width:100%;background:var(--nn-texte);transform-origin:left;transform:scaleX(0)}
.nn-themes-bureviel__jauge.est-en-cours span{animation:nn-themes-bureviel-jauge var(--nn-duree,2600ms) linear forwards}
@keyframes nn-themes-bureviel-jauge{to{transform:scaleX(1)}}
.nn-themes-bureviel__bloc{border-top:1px solid var(--nn-second)}
.nn-themes-bureviel__collection{padding:10px;border:1px solid var(--nn-second);border-radius:14px;background:var(--nn-fond)}
.nn-themes-bureviel__collection .nn-themes-bureviel__media{border-radius:10px}
.nn-themes-bureviel__produit{border:1px solid var(--nn-second);border-radius:14px;background:var(--nn-fond)}
.nn-themes-bureviel__produit:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(0,0,0,.5)}
.nn-themes-bureviel__visuel{border-radius:10px;background:color-mix(in srgb,var(--nn-second) 55%,var(--nn-fond));color:var(--nn-texte)}
.nn-themes-bureviel__produit .nn-themes-bureviel__media{border-radius:10px}
.nn-themes-bureviel__histoire-media{border-radius:16px}
.nn-themes-bureviel__tete h2,.nn-themes-bureviel__histoire-texte h2{font-weight:600}
.nn-themes-bureviel__avis,.nn-themes-bureviel__avis-vide{border-radius:14px}
.nn-themes-bureviel__avis{border:1px solid var(--nn-second)}
.nn-themes-bureviel__pied{border-top:1px solid var(--nn-second)}
.nn-themes-bureviel__pied input[type=email],.nn-themes-bureviel__pied button{border-radius:8px}
.nn-themes-bureviel__pied button{background:var(--nn-texte)}
@media (min-width:750px){.nn-themes-bureviel__panneau{grid-template-columns:.9fr 1.1fr}.nn-themes-bureviel__panneau-gauche{border-bottom:0;border-right:1px solid var(--nn-second)}.nn-themes-bureviel__heros{padding:88px 40px 56px}.nn-themes-bureviel__fiche{margin-inline:calc(var(--nn-k)*28px)}}
@media (max-width:749px){.nn-themes-bureviel{background-image:none}}

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

{% javascript %}
// NAHNAH AI · Thème Bureviel : 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
    // Zones du poste : les puces défilent toutes seules (jauge), un clic reprend la main
    var puces = racine.querySelectorAll('[data-nn-zone]');
    var textes = racine.querySelectorAll('[data-nn-zone-texte]');
    var jauge = racine.querySelector('.nn-themes-bureviel__jauge');
    var actuelle = 1, minuteur = null, DUREE = 2600;
    function montrer(k) {
      actuelle = k;
      puces.forEach(function (p) { var oui = p.getAttribute('data-nn-zone') === String(k); p.classList.toggle('est-active', oui); p.setAttribute('aria-selected', String(oui)); });
      textes.forEach(function (t) { t.classList.toggle('est-active', t.getAttribute('data-nn-zone-texte') === String(k)); });
      if (jauge) { jauge.classList.remove('est-en-cours'); void jauge.offsetWidth; if (minuteur) jauge.classList.add('est-en-cours'); }
    }
    function suivante() { montrer(actuelle % puces.length + 1); }
    puces.forEach(function (p) {
      p.addEventListener('click', function () { clearInterval(minuteur); minuteur = null; montrer(parseInt(p.getAttribute('data-nn-zone'), 10)); });
    });
    if (!calme && puces.length) {
      if (jauge) jauge.style.setProperty('--nn-duree', DUREE + 'ms');
      minuteur = setInterval(suivante, DUREE);
      montrer(1);
    }
  }
  function tout() { document.querySelectorAll('.nn-themes-bureviel').forEach(brancher); }
  tout();
  document.addEventListener('shopify:section:load', tout);
})();
{% endjavascript %}