Thème Ohmlinea

{%- comment -%} NAHNAH AI · Thème Ohmlinea. Ambiance et structure inspirées du modèle gratuit « Tallyfold » de Naved (navedux, illos.dev) sur 21st.dev (https://21st.dev/community/templates/tallyfold). Aucune licence indiquée pour le code sur la page du modèle et illustrations Illos non redistribuables : aucun code ni illustration repris, dessins et code originaux NAHNAH AI. {%- endcomment -%}
<div class="nn-themes-ohmlinea" 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: 'Instrument Sans','Inter',system-ui,sans-serif; --nn-font2: 'Instrument Sans','Inter',system-ui,sans-serif; --nn-fond-c: {{ section.settings.couleur_fond_clair }}; --nn-texte-c: {{ section.settings.couleur_texte_clair }}; --nn-accent-c: {{ section.settings.couleur_accent_clair }}; --nn-second-c: {{ section.settings.couleur_second_clair }}; --nn-mono: 'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;" data-nn-mode="sombre">
  <header class="nn-themes-ohmlinea__entete" data-nn-entete>
    <a class="nn-themes-ohmlinea__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-ohmlinea__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h6v16H4zM13 4h7v7h-7z"/></svg></span><span>{{ section.settings.nom_marque | default: shop.name | escape }}</span>{%- endif -%}</a>
    <nav class="nn-themes-ohmlinea__nav" id="nn-themes-ohmlinea-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-ohmlinea__actions">
      <button class="nn-themes-ohmlinea__mode" type="button" data-nn-mode-bouton aria-label="Passer en mode clair ou sombre"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5"/></svg></button><a class="nn-themes-ohmlinea__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-ohmlinea__panier" href="{{ routes.cart_url }}">Panier <span class="nn-themes-ohmlinea__compte">{{ cart.item_count }}</span></a>
      <button class="nn-themes-ohmlinea__burger" type="button" aria-expanded="false" aria-controls="nn-themes-ohmlinea-nav-{{ section.id }}" data-nn-burger><span aria-hidden="true"></span><span aria-hidden="true"></span><span class="nn-themes-ohmlinea__vh">Ouvrir le menu</span></button>
    </div>
  </header>
  <section class="nn-themes-ohmlinea__heros">
    <div class="nn-themes-ohmlinea__panneau nn-themes-ohmlinea__panneau--titre" data-nn-apparition>
      {%- if section.settings.surtitre != blank -%}<p class="nn-themes-ohmlinea__etiquette"><i></i>{{ section.settings.surtitre | escape }}</p>{%- endif -%}
      <h1>{{ section.settings.titre | escape }}{%- if section.settings.titre_suite != blank -%}<span>{{ section.settings.titre_suite | escape }}</span>{%- endif -%}</h1>
    </div>
    <div class="nn-themes-ohmlinea__panneau nn-themes-ohmlinea__panneau--cote" data-nn-apparition style="--nn-i: 1">
      <p class="nn-themes-ohmlinea__accroche">{{ section.settings.texte | escape }}</p>
      <div class="nn-themes-ohmlinea__boutons"><a class="nn-themes-ohmlinea__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-ohmlinea__bouton nn-themes-ohmlinea__bouton--second" href="{{ section.settings.lien_bouton2 | default: '#vedettes' }}">{{ section.settings.bouton2 | escape }}</a>{%- endif -%}</div>
      <a class="nn-themes-ohmlinea__vers-etablis" href="#etablis"><span aria-hidden="true">▸</span><b>{{ section.settings.lien_etablis | escape }}</b><small>{{ section.settings.lien_etablis_detail | escape }}</small></a>
    </div>
    <div class="nn-themes-ohmlinea__panneau nn-themes-ohmlinea__panneau--banc" data-nn-apparition style="--nn-i: 2">
      <svg class="nn-themes-ohmlinea__banc" viewBox="0 0 900 290" fill="none" stroke-linecap="round" aria-hidden="true">
        {%- for i in (0..60) -%}{%- assign nn_t = i | modulo: 5 -%}<path class="nn-themes-ohmlinea__graduation" d="M{{ i | times: 13 | plus: 60 }} 236v{% if nn_t == 0 %}12{% else %}6{% endif %}"/>{%- endfor -%}
        <path class="nn-themes-ohmlinea__rail" d="M40 214H860M40 162H860"/>
        <text class="nn-themes-ohmlinea__txt" x="60" y="270">ENTRÉE</text><text class="nn-themes-ohmlinea__txt" x="790" y="270">SORTIE</text>
        <g class="nn-themes-ohmlinea__sonde"><path d="M450 40v150"/><rect x="430" y="96" width="40" height="38"/><circle class="nn-themes-ohmlinea__sonde-point" cx="450" cy="115" r="5"/><path class="nn-themes-ohmlinea__faisceau" d="M450 134v80"/></g>
        <g class="nn-themes-ohmlinea__pieces" transform="translate(40 200)">{%- for k in (1..5) -%}<g class="nn-themes-ohmlinea__piece" style="animation-delay: -{{ k | times: 18 }}00ms"><rect x="0" y="-26" width="64" height="40" rx="3"/><path d="M8-16h26M8-8h40M8 0h18"/><circle cx="52" cy="-14" r="4"/></g>{%- endfor -%}</g>
        <g class="nn-themes-ohmlinea__compteur"><rect x="394" y="8" width="112" height="24"/><text class="nn-themes-ohmlinea__txt" x="404" y="25">VÉRIFIÉES <tspan data-nn-compte>0</tspan></text></g>
      </svg>
      <div class="nn-themes-ohmlinea__banc-pied"><span class="nn-themes-ohmlinea__etiquette"><b>BANC D’ESSAI</b> / MESURE, SOUDURE, MONTAGE</span><span>{{ section.settings.legende_banc | escape }}</span></div>
    </div>
  </section>
  <section class="nn-themes-ohmlinea__bloc" id="etablis">
    <div class="nn-themes-ohmlinea__tete" data-nn-apparition><h2>{{ section.settings.titre_etablis | escape }}</h2></div>
    <div class="nn-themes-ohmlinea__onglets" role="tablist" data-nn-apparition>
      {%- for k in (1..3) -%}{%- capture cle -%}onglet_{{ k }}{%- endcapture -%}<button type="button" role="tab" data-nn-onglet="{{ k }}" aria-selected="{% if k == 1 %}true{% else %}false{% endif %}"><span>0{{ k }}</span>{{ section.settings[cle] | escape }}</button>{%- endfor -%}
    </div>
    {%- for k in (1..3) -%}{%- capture cle -%}onglet_{{ k }}_texte{%- endcapture -%}<div class="nn-themes-ohmlinea__panneau nn-themes-ohmlinea__onglet{% if k == 1 %} est-actif{% endif %}" role="tabpanel" data-nn-panneau="{{ k }}"><span class="nn-themes-ohmlinea__etiquette"><i></i>ÉTABLI 0{{ k }}</span><p>{{ section.settings[cle] | escape }}</p></div>{%- endfor -%}
  </section>
  <section class="nn-themes-ohmlinea__bloc" id="collections">
<div class="nn-themes-ohmlinea__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-ohmlinea__collections">
      {%- for block in section.blocks -%}{%- if block.type == 'collection' -%}
      {%- assign col = block.settings.collection -%}
      <a class="nn-themes-ohmlinea__collection" href="{{ col.url | default: routes.collections_url }}" data-nn-apparition style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <span class="nn-themes-ohmlinea__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-ohmlinea__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-ohmlinea__bloc" id="vedettes">
<div class="nn-themes-ohmlinea__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-ohmlinea__produits">
      {%- for block in section.blocks -%}{%- if block.type == 'produit' -%}
      <article class="nn-themes-ohmlinea__produit" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}" {{ block.shopify_attributes }}>
        <div class="nn-themes-ohmlinea__visuel" aria-hidden="true">{%- case block.settings.visuel -%}{%- when 'multimetre' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="34" y="12" width="52" height="88" rx="8"/><rect x="42" y="20" width="36" height="20" rx="2"/><circle cx="60" cy="62" r="12"/><path d="M60 62l6-8"/><circle cx="46" cy="90" r="3"/><circle cx="60" cy="90" r="3"/><circle cx="74" cy="90" r="3"/><path d="M46 93c-6 10-14 12-22 14M74 93c6 10 14 12 22 14"/></svg>{%- when 'extracteur' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="26" y="20" width="68" height="68" rx="6"/><circle cx="60" cy="54" r="24"/><path d="M60 54l10-18M60 54 42 46M60 54l8 20"/><path d="M40 88v14h40V88"/></svg>{%- when 'tournevis' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M22 98 54 66"/><rect x="52" y="34" width="20" height="44" rx="6" transform="rotate(45 62 56)"/><path d="M76 42l18-18"/><path d="M84 92h20M84 82h20M84 72h20"/></svg>{%- when 'pannes' -%}<svg viewBox="0 0 120 120" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M24 28v52l6 14 6-14V28zM52 28v56l6 10 6-10V28zM80 28v50l8 18 8-18V28z"/><path d="M24 40h12M52 40h12M80 40h16"/></svg>{%- endcase -%}</div>
        <span class="nn-themes-ohmlinea__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-ohmlinea__ref">Réf. fournisseur : {{ block.settings.reference | escape }}</small>{%- endif -%}
      </article>
      {%- endif -%}{%- endfor -%}
    </div>
    <p class="nn-themes-ohmlinea__note">Produits d’exemple : choisis ta collection dans l’éditeur et décoche « Afficher les produits d’exemple ».</p>
    {%- else -%}
    <div class="nn-themes-ohmlinea__produits">
      {%- for p in section.settings.collection_vedette.products limit: section.settings.nb_produits -%}
      <a class="nn-themes-ohmlinea__produit" href="{{ p.url }}" data-nn-apparition data-nn-carte style="--nn-i: {{ forloop.index0 }}">
        <span class="nn-themes-ohmlinea__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-ohmlinea__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-ohmlinea__bloc" id="histoire">
<div class="nn-themes-ohmlinea__histoire">
      <div class="nn-themes-ohmlinea__media nn-themes-ohmlinea__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-ohmlinea__histoire-texte" data-nn-apparition><h2>{{ section.settings.titre_histoire | escape }}</h2><div class="nn-themes-ohmlinea__rte">{{ section.settings.texte_histoire }}</div></div>
    </div>
</section>
  <section class="nn-themes-ohmlinea__bloc" id="avis">
<div class="nn-themes-ohmlinea__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-ohmlinea__avis-liste">
      {%- for block in section.blocks -%}{%- if block.type == 'avis' and block.settings.texte != blank -%}
      <figure class="nn-themes-ohmlinea__avis" data-nn-apparition {{ block.shopify_attributes }}>
        <span class="nn-themes-ohmlinea__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-ohmlinea__note">{{ section.settings.mention_avis | escape }}</p>{%- endif -%}
    {%- else -%}
    <div class="nn-themes-ohmlinea__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-ohmlinea__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-ohmlinea__bloc" id="faq">
<div class="nn-themes-ohmlinea__tete" data-nn-apparition><h2>{{ section.settings.titre_faq | escape }}</h2></div>
    <div class="nn-themes-ohmlinea__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-ohmlinea__question" data-nn-apparition {{ block.shopify_attributes }}>
        <button type="button" aria-expanded="false" aria-controls="nn-themes-ohmlinea-r-{{ block.id }}" data-nn-question><span class="nn-themes-ohmlinea__num">{% if nn_q < 10 %}0{% endif %}{{ nn_q }}</span><span>{{ block.settings.question | escape }}</span><span class="nn-themes-ohmlinea__plus" aria-hidden="true"></span></button>
        <div class="nn-themes-ohmlinea__reponse" id="nn-themes-ohmlinea-r-{{ block.id }}" role="region"><div>{{ block.settings.reponse }}</div></div>
      </div>
      {%- endif -%}{%- endfor -%}
    </div>
</section>
  <footer class="nn-themes-ohmlinea__pied">
    <div class="nn-themes-ohmlinea__pied-grille">
      <div><a class="nn-themes-ohmlinea__marque" href="{{ routes.root_url }}"><span class="nn-themes-ohmlinea__mono" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h6v16H4zM13 4h7v7h-7z"/></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-ohmlinea__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-ohmlinea__pied-titre">{{ section.settings.titre_newsletter | escape }}</p>
        {%- form 'customer', id: 'nn-themes-ohmlinea-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-ohmlinea__vh" for="nn-themes-ohmlinea-courriel">E-mail</label><input id="nn-themes-ohmlinea-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-ohmlinea__copyright">© {{ 'now' | date: '%Y' }} {{ section.settings.nom_marque | default: shop.name | escape }}</p>
  </footer>
</div>

{% schema %}
{"name":"Thème Ohmlinea","tag":"section","class":"nn-th-ohmlinea","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":"Ohmlinea"},{"type":"link_list","id":"menu","label":"Menu","default":"main-menu"},{"type":"header","content":"Héros"},{"type":"text","id":"surtitre","label":"Surtitre","default":"Mesure, soudure et réparation"},{"type":"text","id":"titre","label":"Titre","default":"Chaque composant."},{"type":"text","id":"titre_suite","label":"Suite du titre (ton atténué ou accent)","default":"Chaque mesure vérifiée."},{"type":"textarea","id":"texte","label":"Texte","default":"Multimètres, extracteurs de fumées et outils de précision pour réparer, monter et mesurer sur ton établi, en amateur ou en atelier."},{"type":"text","id":"bouton","label":"Bouton principal","default":"Équiper l’établi"},{"type":"url","id":"lien_bouton","label":"Lien du bouton principal"},{"type":"text","id":"bouton2","label":"Bouton secondaire","default":"Voir les outils"},{"type":"url","id":"lien_bouton2","label":"Lien du bouton secondaire"},{"type":"text","id":"lien_etablis","label":"Lien vers les établis","default":"Découvrir les trois établis"},{"type":"text","id":"lien_etablis_detail","label":"Lien vers les établis · détail","default":"Mesure, soudure, démontage"},{"type":"text","id":"legende_banc","label":"Légende du banc animé","default":"Chaque carte passe sous la sonde et devient verte une fois contrôlée."},{"type":"header","content":"Onglets d’établis"},{"type":"text","id":"titre_etablis","label":"Titre","default":"Trois établis, un même soin"},{"type":"text","id":"onglet_1","label":"Onglet 1","default":"Mesure"},{"type":"textarea","id":"onglet_1_texte","label":"Onglet 1 · texte","default":"Tension, continuité, résistance : un multimètre fiable est le premier outil à poser sur l’établi."},{"type":"text","id":"onglet_2","label":"Onglet 2","default":"Soudure"},{"type":"textarea","id":"onglet_2_texte","label":"Onglet 2 · texte","default":"Des pannes adaptées à chaque point et un extracteur pour éloigner les fumées du visage."},{"type":"text","id":"onglet_3","label":"Onglet 3","default":"Démontage"},{"type":"textarea","id":"onglet_3_texte","label":"Onglet 3 · texte","default":"Des embouts de précision pour ouvrir téléphones, consoles et petits appareils sans abîmer les vis."},{"type":"header","content":"Collections"},{"type":"text","id":"titre_collections","label":"Titre","default":"Par poste de travail"},{"type":"text","id":"texte_collections","label":"Texte","default":"Trouve l’outil selon ce que tu fais sur l’établi."},{"type":"header","content":"Produits vedettes"},{"type":"text","id":"titre_produits","label":"Titre","default":"Sur l’établi cette semaine"},{"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":"Réparer plutôt que remplacer"},{"type":"richtext","id":"texte_histoire","label":"Texte","default":"<p>Raconte ici d’où vient l’atelier : une console en panne, un premier fer à souder, l’envie de comprendre ce qu’il y a sous le capot.</p><p>Explique ce que tu vérifies avant de proposer un outil.</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":"Retours de l’atelier"},{"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":"Outils de mesure, de soudure et de précision pour l’électronique."},{"type":"text","id":"titre_newsletter","label":"Titre newsletter","default":"Fiches pratiques et nouveaux outils"},{"type":"header","content":"Couleurs"},{"type":"color","id":"couleur_fond","label":"Fond","default":"#0F1112"},{"type":"color","id":"couleur_texte","label":"Texte","default":"#ECEDEA"},{"type":"color","id":"couleur_accent","label":"Accent","default":"#2DD4BF"},{"type":"color","id":"couleur_second","label":"Secondaire","default":"#171A1B"},{"type":"header","content":"Couleurs du mode clair"},{"type":"color","id":"couleur_fond_clair","label":"Fond (clair)","default":"#F2F2EF"},{"type":"color","id":"couleur_texte_clair","label":"Texte (clair)","default":"#121212"},{"type":"color","id":"couleur_accent_clair","label":"Accent (clair)","default":"#0D7A6C"},{"type":"color","id":"couleur_second_clair","label":"Panneaux (clair)","default":"#FFFFFF"}],"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":"multimetre","label":"Multimètre"},{"value":"extracteur","label":"Extracteur"},{"value":"tournevis","label":"Tournevis"},{"value":"pannes","label":"Pannes"}],"default":"multimetre"},{"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 Ohmlinea","blocks":[{"type":"collection","settings":{"titre":"Mesure","texte":"Multimètres et testeurs"}},{"type":"collection","settings":{"titre":"Soudure","texte":"Pannes et extraction"}},{"type":"collection","settings":{"titre":"Démontage","texte":"Tournevis de précision"}},{"type":"produit","settings":{"titre":"Multimètre numérique de poche XL830L","detail":"Tension, courant, continuité","visuel":"multimetre","reference":"CJ 1380474738215882752"}},{"type":"produit","settings":{"titre":"Extracteur de fumées de soudure","detail":"Éloigne les fumées du visage","visuel":"extracteur","reference":"CJ 0DF80C61-0AED-4CC0-89F1-05D4DA1B0E56"}},{"type":"produit","settings":{"titre":"Coffret de tournevis de précision 115 en 1","detail":"Embouts magnétiques variés","visuel":"tournevis","reference":"CJ 1832684738768162816"}},{"type":"produit","settings":{"titre":"Assortiment de pannes pour fer à souder","detail":"Une pointe pour chaque soudure","visuel":"pannes","reference":"CJ 2507070737111629000"}},{"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":"Ces outils conviennent-ils aux débutants ?","reponse":"<p>Oui pour la plupart : chaque fiche indique l’usage prévu. Rappelle ici les précautions de base (soudure ventilée, appareil débranché).</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 Ohmlinea : thème complet (code original NAHNAH AI) */
.nn-themes-ohmlinea{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-ohmlinea *{box-sizing:border-box}
.nn-themes-ohmlinea a{color:inherit;text-decoration:none}
.nn-themes-ohmlinea img,.nn-themes-ohmlinea svg{display:block;max-width:100%}
.nn-themes-ohmlinea h1,.nn-themes-ohmlinea h2,.nn-themes-ohmlinea h3{font-family:var(--nn-font);margin:0}
.nn-themes-ohmlinea__vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nn-themes-ohmlinea__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-ohmlinea__entete.est-compact{padding-block:8px}
.nn-themes-ohmlinea__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-ohmlinea__mono{display:inline-flex;width:26px;height:26px;color:var(--nn-accent)}
.nn-themes-ohmlinea__mono svg{width:100%;height:100%}
.nn-themes-ohmlinea__nav{display:none;gap:22px;margin:0 auto}
.nn-themes-ohmlinea__nav a{position:relative;opacity:.8;transition:opacity .2s}
.nn-themes-ohmlinea__nav a:hover{opacity:1}
.nn-themes-ohmlinea__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nn-themes-ohmlinea__icone{display:inline-flex;padding:6px}
.nn-themes-ohmlinea__panier{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.nn-themes-ohmlinea__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-ohmlinea__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-ohmlinea__burger span[aria-hidden]{display:block;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-ohmlinea.menu-ouvert .nn-themes-ohmlinea__burger span[aria-hidden]:first-child{transform:translateY(3.5px) rotate(45deg)}
.nn-themes-ohmlinea.menu-ouvert .nn-themes-ohmlinea__burger span[aria-hidden]:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.nn-themes-ohmlinea.menu-ouvert .nn-themes-ohmlinea__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-ohmlinea__bloc{position:relative;max-width:1240px;margin:0 auto;padding:56px 16px}
.nn-themes-ohmlinea__tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.nn-themes-ohmlinea__tete h2{font-size:clamp(28px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em}
.nn-themes-ohmlinea__tete p{margin:0;max-width:46ch;opacity:.75}
.nn-themes-ohmlinea__collections{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.nn-themes-ohmlinea__collection{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.nn-themes-ohmlinea__media{display:block;overflow:hidden}
.nn-themes-ohmlinea__media img,.nn-themes-ohmlinea__media svg{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.nn-themes-ohmlinea__collection .nn-themes-ohmlinea__media{aspect-ratio:4/3}
.nn-themes-ohmlinea__collection:hover .nn-themes-ohmlinea__media img{transform:scale(1.05)}
.nn-themes-ohmlinea__collection-texte{display:flex;flex-direction:column;gap:2px}
.nn-themes-ohmlinea__collection-texte small{opacity:.7}
.nn-themes-ohmlinea__produits{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.nn-themes-ohmlinea__produit{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px;transition:transform .35s,box-shadow .35s,border-color .35s}
.nn-themes-ohmlinea__produit h3{font-size:17px;line-height:1.3;font-family:var(--nn-font2);font-weight:600}
.nn-themes-ohmlinea__produit p{margin:0;font-size:14px;opacity:.72}
.nn-themes-ohmlinea__produit .nn-themes-ohmlinea__media{aspect-ratio:1}
.nn-themes-ohmlinea__visuel{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.nn-themes-ohmlinea__visuel svg{width:72%;height:72%}
.nn-themes-ohmlinea__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-ohmlinea__ref{font-size:11px;opacity:.6}
.nn-themes-ohmlinea__prix{font-weight:700}
.nn-themes-ohmlinea__prix s{opacity:.5;font-weight:400}
.nn-themes-ohmlinea__note{margin:18px 0 0;font-size:13px;opacity:.6}
.nn-themes-ohmlinea__histoire{display:grid;gap:28px;align-items:center}
.nn-themes-ohmlinea__histoire-media{aspect-ratio:4/3}
.nn-themes-ohmlinea__histoire-texte h2{font-size:clamp(28px,4.2vw,48px);line-height:1.08;margin-bottom:16px}
.nn-themes-ohmlinea__rte p{margin:0 0 12px}
.nn-themes-ohmlinea__avis-liste{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.nn-themes-ohmlinea__avis{margin:0;padding:22px;display:flex;flex-direction:column;gap:10px}
.nn-themes-ohmlinea__avis blockquote{margin:0}
.nn-themes-ohmlinea__etoiles{color:var(--nn-accent);letter-spacing:2px}
.nn-themes-ohmlinea__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-ohmlinea__avis-vide span{letter-spacing:4px;opacity:.5}
.nn-themes-ohmlinea__avis-vide p{margin:0;max-width:52ch;opacity:.8}
.nn-themes-ohmlinea__faq{display:grid;gap:0}
.nn-themes-ohmlinea__question{border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 16%,transparent)}
.nn-themes-ohmlinea__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-ohmlinea__num{font-size:12px;opacity:.5;font-variant-numeric:tabular-nums}
.nn-themes-ohmlinea__plus{position:relative;width:14px;height:14px;margin-left:auto;flex:none}
.nn-themes-ohmlinea__plus::before,.nn-themes-ohmlinea__plus::after{content:"";position:absolute;inset:6px 0 auto;height:2px;background:currentColor;transition:transform .3s}
.nn-themes-ohmlinea__plus::after{transform:rotate(90deg)}
.nn-themes-ohmlinea__question button[aria-expanded=true] .nn-themes-ohmlinea__plus::after{transform:rotate(0)}
.nn-themes-ohmlinea__reponse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.nn-themes-ohmlinea__reponse>div{overflow:hidden;opacity:.8}
.nn-themes-ohmlinea__question.est-ouverte .nn-themes-ohmlinea__reponse{grid-template-rows:1fr}
.nn-themes-ohmlinea__reponse p{margin:0 0 16px}
.nn-themes-ohmlinea__pied{position:relative;padding:56px 16px 28px}
.nn-themes-ohmlinea__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-ohmlinea__pied-liens{display:grid;gap:8px;align-content:start}
.nn-themes-ohmlinea__pied-liens a{opacity:.75}
.nn-themes-ohmlinea__pied-liens a:hover{opacity:1}
.nn-themes-ohmlinea__pied-titre{margin:0 0 10px;font-weight:600}
.nn-themes-ohmlinea__pied form{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-ohmlinea__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-ohmlinea__pied button{padding:12px 18px;border:0;background:var(--nn-accent);color:var(--nn-fond);font:inherit;font-weight:700;cursor:pointer}
.nn-themes-ohmlinea__pied small{display:block;margin-top:8px;opacity:.55;font-size:12px}
.nn-themes-ohmlinea__copyright{max-width:1240px;margin:32px auto 0;font-size:13px;opacity:.55}
.nn-themes-ohmlinea [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-ohmlinea [data-nn-apparition].est-visible{opacity:1;transform:none}
@media (min-width:900px){.nn-themes-ohmlinea__nav{display:flex}.nn-themes-ohmlinea__burger{display:none}.nn-themes-ohmlinea__entete{padding:16px 40px}.nn-themes-ohmlinea__bloc{padding:88px 40px}.nn-themes-ohmlinea__histoire{grid-template-columns:1.05fr .95fr}.nn-themes-ohmlinea__pied{padding:72px 40px 32px}}

/* Direction artistique propre au thème */
.nn-themes-ohmlinea{font-size:15px}
.nn-themes-ohmlinea[data-nn-mode=clair]{--nn-fond:var(--nn-fond-c)!important;--nn-texte:var(--nn-texte-c)!important;--nn-accent:var(--nn-accent-c)!important;--nn-second:var(--nn-second-c)!important}
.nn-themes-ohmlinea,.nn-themes-ohmlinea__panneau,.nn-themes-ohmlinea__entete{transition:background-color .5s,color .5s,border-color .5s}
.nn-themes-ohmlinea__entete{background:var(--nn-fond);border-bottom:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-ohmlinea__marque{font-family:var(--nn-font2);font-weight:600;font-size:18px}
.nn-themes-ohmlinea__mono{width:20px;height:20px}
.nn-themes-ohmlinea__mode{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid color-mix(in srgb,var(--nn-texte) 18%,transparent);border-radius:6px;background:transparent;color:inherit;cursor:pointer}
.nn-themes-ohmlinea__mode svg{transition:transform .6s}
.nn-themes-ohmlinea[data-nn-mode=clair] .nn-themes-ohmlinea__mode svg{transform:rotate(180deg)}
.nn-themes-ohmlinea .nn-themes-ohmlinea__panier{padding:8px 14px;border-radius:6px;background:var(--nn-accent);color:var(--nn-fond)}
.nn-themes-ohmlinea__compte{background:var(--nn-fond);color:var(--nn-texte)}
.nn-themes-ohmlinea__etiquette{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:var(--nn-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.nn-themes-ohmlinea__etiquette i{width:7px;height:7px;border-radius:50%;background:var(--nn-accent);box-shadow:0 0 0 0 var(--nn-accent);animation:nn-themes-ohmlinea-bip 2.4s infinite}
.nn-themes-ohmlinea__etiquette b{color:var(--nn-accent);font-weight:600}
@keyframes nn-themes-ohmlinea-bip{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--nn-accent) 60%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
.nn-themes-ohmlinea__heros{max-width:1240px;margin:0 auto;padding:16px;display:grid;gap:12px}
.nn-themes-ohmlinea__panneau{border:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);background:var(--nn-second);border-radius:4px;padding:24px}
.nn-themes-ohmlinea__panneau--titre{display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-height:300px}
.nn-themes-ohmlinea__heros h1{font-size:clamp(38px,6.4vw,80px);line-height:1;letter-spacing:-.045em;font-weight:500}
.nn-themes-ohmlinea__heros h1 span{display:block;opacity:.55}
.nn-themes-ohmlinea__accroche{margin:0 0 20px;font-size:18px;line-height:1.5;opacity:.8}
.nn-themes-ohmlinea__boutons{display:flex;flex-wrap:wrap;gap:8px}
.nn-themes-ohmlinea__bouton{display:inline-flex;padding:11px 16px;border-radius:5px;background:var(--nn-accent);color:var(--nn-fond)!important;font-weight:600;border:1px solid var(--nn-accent);transition:filter .2s,transform .2s}
.nn-themes-ohmlinea__bouton:hover{filter:brightness(1.1);transform:translateY(-1px)}
.nn-themes-ohmlinea__bouton--second{background:transparent;color:var(--nn-texte)!important;border-color:color-mix(in srgb,var(--nn-texte) 22%,transparent)}
.nn-themes-ohmlinea__vers-etablis{display:grid;grid-template-columns:auto 1fr;column-gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 12%,transparent)}
.nn-themes-ohmlinea__vers-etablis span{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--nn-texte) 22%,transparent);color:var(--nn-accent)}
.nn-themes-ohmlinea__vers-etablis small{opacity:.6}
.nn-themes-ohmlinea__panneau--banc{padding:0;overflow:hidden}
.nn-themes-ohmlinea__banc{width:100%;height:auto;padding:12px 8px}
.nn-themes-ohmlinea__graduation,.nn-themes-ohmlinea__rail{stroke:color-mix(in srgb,var(--nn-texte) 35%,transparent);stroke-width:1.2}
.nn-themes-ohmlinea__txt{fill:color-mix(in srgb,var(--nn-texte) 60%,transparent);font-family:var(--nn-mono);font-size:13px;letter-spacing:.08em}
.nn-themes-ohmlinea__sonde path,.nn-themes-ohmlinea__sonde rect,.nn-themes-ohmlinea__compteur rect{stroke:color-mix(in srgb,var(--nn-texte) 55%,transparent);stroke-width:1.4}
.nn-themes-ohmlinea__sonde-point{fill:var(--nn-accent);animation:nn-themes-ohmlinea-clignote 1.2s steps(2) infinite}
.nn-themes-ohmlinea__faisceau{stroke:var(--nn-accent)!important;stroke-width:2!important;stroke-dasharray:6 6;animation:nn-themes-ohmlinea-tirets 1s linear infinite}
@keyframes nn-themes-ohmlinea-clignote{50%{opacity:.2}}
@keyframes nn-themes-ohmlinea-tirets{to{stroke-dashoffset:-12}}
.nn-themes-ohmlinea__piece{stroke-width:1.6;animation:nn-themes-ohmlinea-convoyeur 9s linear infinite}
@keyframes nn-themes-ohmlinea-convoyeur{0%{transform:translateX(0);stroke:color-mix(in srgb,var(--nn-texte) 55%,transparent);fill:transparent}46%{stroke:color-mix(in srgb,var(--nn-texte) 55%,transparent);fill:transparent}52%,100%{stroke:var(--nn-accent);fill:color-mix(in srgb,var(--nn-accent) 12%,transparent)}100%{transform:translateX(756px)}}
.nn-themes-ohmlinea__compteur tspan{fill:var(--nn-accent)}
.nn-themes-ohmlinea__banc-pied{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:14px 24px;border-top:1px solid color-mix(in srgb,var(--nn-texte) 12%,transparent);font-size:13px;opacity:.85}
.nn-themes-ohmlinea__onglets{display:flex;flex-wrap:wrap;gap:0;border:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);border-radius:4px;width:max-content;max-width:100%;margin-bottom:12px;overflow:hidden}
.nn-themes-ohmlinea__onglets button{display:inline-flex;gap:8px;padding:10px 18px;border:0;border-right:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .3s,color .3s}
.nn-themes-ohmlinea__onglets button span{font-family:var(--nn-mono);font-size:12px;opacity:.6}
.nn-themes-ohmlinea__onglets button[aria-selected=true]{background:var(--nn-accent);color:var(--nn-fond)}
.nn-themes-ohmlinea__onglet{display:none}
.nn-themes-ohmlinea__onglet.est-actif{display:block;animation:nn-themes-ohmlinea-ouvre .5s ease}
.nn-themes-ohmlinea__onglet p{margin:14px 0 0;font-size:clamp(18px,2.2vw,26px);line-height:1.4;max-width:46ch}
@keyframes nn-themes-ohmlinea-ouvre{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
.nn-themes-ohmlinea__tete h2{font-weight:500;letter-spacing:-.04em}
.nn-themes-ohmlinea__collection{padding:10px;border:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);background:var(--nn-second);border-radius:4px}
.nn-themes-ohmlinea__collection-texte strong{font-family:var(--nn-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.nn-themes-ohmlinea__produits{counter-reset:nn-p;gap:0;border:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);border-radius:4px;overflow:hidden}
.nn-themes-ohmlinea__produit{counter-increment:nn-p;background:var(--nn-second);outline:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent);padding:20px}
.nn-themes-ohmlinea__produit::after{content:counter(nn-p,decimal-leading-zero);position:absolute;top:20px;right:20px;font-family:var(--nn-mono);font-size:12px;opacity:.5}
.nn-themes-ohmlinea__produit:hover{background:color-mix(in srgb,var(--nn-accent) 8%,var(--nn-second))}
.nn-themes-ohmlinea__visuel{color:var(--nn-accent);background:repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--nn-texte) 8%,transparent) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--nn-texte) 8%,transparent) 23px 24px)}
.nn-themes-ohmlinea__produit:hover .nn-themes-ohmlinea__visuel svg{animation:nn-themes-ohmlinea-vibre .5s ease}
@keyframes nn-themes-ohmlinea-vibre{30%{transform:translateX(-3px)}60%{transform:translateX(3px)}}
.nn-themes-ohmlinea__exemple{top:28px;left:28px;border-radius:3px;font-family:var(--nn-mono)}
.nn-themes-ohmlinea__histoire-media{border-radius:4px}
.nn-themes-ohmlinea__avis,.nn-themes-ohmlinea__avis-vide{border-radius:4px;background:var(--nn-second)}
.nn-themes-ohmlinea__avis{border:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-ohmlinea__num{font-family:var(--nn-mono)}
.nn-themes-ohmlinea__pied{border-top:1px solid color-mix(in srgb,var(--nn-texte) 14%,transparent)}
.nn-themes-ohmlinea__pied button,.nn-themes-ohmlinea__pied input[type=email]{border-radius:5px}
@media (min-width:900px){.nn-themes-ohmlinea__heros{grid-template-columns:1.6fr 1fr;padding:16px 40px}.nn-themes-ohmlinea__panneau--banc{grid-column:1/-1}.nn-themes-ohmlinea__panneau{padding:32px}}

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

{% javascript %}
// NAHNAH AI · Thème Ohmlinea : 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
    // Mode clair / sombre : mémorisé pour le visiteur (si le navigateur le permet)
    var bouton = racine.querySelector('[data-nn-mode-bouton]');
    try { var memo = window.localStorage.getItem('nn-ohmlinea-mode'); if (memo === 'clair' || memo === 'sombre') racine.setAttribute('data-nn-mode', memo); } catch (e) {}
    if (bouton) bouton.addEventListener('click', function () {
      var m = racine.getAttribute('data-nn-mode') === 'clair' ? 'sombre' : 'clair';
      racine.setAttribute('data-nn-mode', m);
      try { window.localStorage.setItem('nn-ohmlinea-mode', m); } catch (e) {}
    });
    // Banc animé : le compteur avance à chaque carte qui sort du banc
    var compte = racine.querySelector('[data-nn-compte]'), n = 0;
    racine.querySelectorAll('.nn-themes-ohmlinea__piece').forEach(function (p) {
      p.addEventListener('animationiteration', function () { n += 1; if (compte) compte.textContent = String(n); });
    });
    // Onglets d'établis : clic ou flèches du clavier
    var onglets = racine.querySelectorAll('[data-nn-onglet]');
    function activer(k) {
      onglets.forEach(function (b) { b.setAttribute('aria-selected', String(b.getAttribute('data-nn-onglet') === String(k))); });
      racine.querySelectorAll('[data-nn-panneau]').forEach(function (p) { p.classList.toggle('est-actif', p.getAttribute('data-nn-panneau') === String(k)); });
    }
    onglets.forEach(function (b, i) {
      b.addEventListener('click', function () { activer(b.getAttribute('data-nn-onglet')); });
      b.addEventListener('keydown', function (e) {
        if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
        var j = (i + (e.key === 'ArrowRight' ? 1 : onglets.length - 1)) % onglets.length;
        onglets[j].focus(); activer(onglets[j].getAttribute('data-nn-onglet'));
      });
    });
  }
  function tout() { document.querySelectorAll('.nn-themes-ohmlinea').forEach(brancher); }
  tout();
  document.addEventListener('shopify:section:load', tout);
})();
{% endjavascript %}