Icônes alimentation & bio

{%- comment -%} NAHNAH AI · Icônes alimentation & bio (bibliothèque Sections & effets) : 10 icônes au trait, animables {%- endcomment -%}
<div class="nn-icones-bio nn-icones-bio--{{ section.settings.alignement }}" data-nn-animation="{{ section.settings.animation }}" data-nn-mode="{{ section.settings.mode }}" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-icone: {{ section.settings.couleur_icone }}; --nn-taille: {{ section.settings.taille }}px; --nn-colonnes: {{ section.settings.colonnes }};">
  {%- if section.settings.titre != blank or section.settings.texte != blank -%}
    <div class="nn-icones-bio__entete">
      {%- if section.settings.titre != blank -%}<h2 class="nn-icones-bio__titre">{{ section.settings.titre }}</h2>{%- endif -%}
      {%- if section.settings.texte != blank -%}<p class="nn-icones-bio__intro">{{ section.settings.texte | escape }}</p>{%- endif -%}
    </div>
  {%- endif -%}
  <ul class="nn-icones-bio__grille" role="list">
    {%- for block in section.blocks -%}
      <li class="nn-icones-bio__carte" style="--nn-i: {{ forloop.index0 }};" {{ block.shopify_attributes }}>
        <span class="nn-icones-bio__pastille nn-icones-bio__pastille--{{ section.settings.forme }}">
          <svg class="nn-icones-bio__svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
        {%- case block.settings.icone -%}
          {%- when 'feuille' -%}
            <path pathLength="1" d="M5 19.5C4.5 11 9.5 5 19.5 4.5 20 14 14.5 19.5 5 19.5z"/><path pathLength="1" d="M5 19.5 13 11.5"/>
          {%- when 'pomme' -%}
            <path pathLength="1" d="M12 7.5c-1.5-1-5.5-1.5-6.8 2.3C4 13.2 6.3 20 9 20.5c1.1.2 1.8-.5 3-.5s1.9.7 3 .5c2.7-.5 5-7.3 3.8-10.7C17.5 6 13.5 6.5 12 7.5z"/><path pathLength="1" d="M12 7.5c0-2 .8-3.5 2.5-4.5"/>
          {%- when 'cafe' -%}
            <path pathLength="1" d="M4.5 9h12v6.5a4.5 4.5 0 0 1-4.5 4.5H9a4.5 4.5 0 0 1-4.5-4.5z"/><path pathLength="1" d="M16.5 10.5H18a2.5 2.5 0 0 1 0 5h-1.5"/><path pathLength="1" d="M8.5 3.5c-.6.8-.6 1.7 0 2.5M12.5 3.5c-.6.8-.6 1.7 0 2.5"/>
          {%- when 'ble' -%}
            <path pathLength="1" d="M12 21V8"/><path pathLength="1" d="M12 12c-2.5 0-4-1.5-4-4 2.5 0 4 1.5 4 4zM12 12c2.5 0 4-1.5 4-4-2.5 0-4 1.5-4 4zM12 16.5c-2.5 0-4-1.5-4-4 2.5 0 4 1.5 4 4zM12 16.5c2.5 0 4-1.5 4-4-2.5 0-4 1.5-4 4zM12 8c-1.2-1-1.2-3 0-4.5 1.2 1.5 1.2 3.5 0 4.5z"/>
          {%- when 'carotte' -%}
            <path pathLength="1" d="M4 20 7.4 9.4a3.6 3.6 0 0 1 6-1.4l2.6 2.6a3.6 3.6 0 0 1-1.4 6z"/><path pathLength="1" d="M14.5 7.5c0-2 1-3.5 2.5-4.5M16.5 9.5c2-.2 3.5.3 4.5 1.5M15.5 8.5 19 5"/><path pathLength="1" d="m8.5 12.5 1.5 1.5M7.2 16l1.3 1.3"/>
          {%- when 'label-bio' -%}
            <circle pathLength="1" cx="12" cy="12" r="8.5"/><path pathLength="1" d="M8 16c0-4.5 3-7.5 8-8 0 5-3 8-8 8zM8 16l4-4"/>
          {%- when 'vegetal' -%}
            <path pathLength="1" d="M12 20.5V11"/><path pathLength="1" d="M12 13C12 8.5 9 6 4.5 6c0 4.5 3 7 7.5 7zM12 11c0-3.8 2.5-6 6.5-6 0 3.8-2.5 6-6.5 6z"/><path pathLength="1" d="M8 20.5h8"/>
          {%- when 'toque' -%}
            <path pathLength="1" d="M7 14.5a4 4 0 0 1-.9-7.9 5 5 0 0 1 9.8 0A4 4 0 0 1 17 14.5V20H7z"/><path pathLength="1" d="M7 17h10"/>
          {%- when 'bouteille' -%}
            <path pathLength="1" d="M10 2.5h4M10.5 2.5v4.2c-1.8 1-3 2.6-3 4.8v8a1.5 1.5 0 0 0 1.5 1.5h6a1.5 1.5 0 0 0 1.5-1.5v-8c0-2.2-1.2-3.8-3-4.8V2.5"/><path pathLength="1" d="M7.5 13h9"/>
          {%- when 'miel' -%}
            <path pathLength="1" d="M6 9h12v9.5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 6 18.5z"/><path pathLength="1" d="M5 5.5h14V9H5z"/><path pathLength="1" d="m12 12.5 2 1.2v2.3l-2 1.2-2-1.2v-2.3z"/>
        {%- endcase -%}
          </svg>
        </span>
        {%- if block.settings.titre != blank -%}
          <h3 class="nn-icones-bio__nom">
            {%- if block.settings.lien != blank -%}
              <a class="nn-icones-bio__lien" href="{{ block.settings.lien }}">{{ block.settings.titre | escape }}</a>
            {%- else -%}
              {{ block.settings.titre | escape }}
            {%- endif -%}
          </h3>
        {%- endif -%}
        {%- if block.settings.texte != blank -%}<p class="nn-icones-bio__texte">{{ block.settings.texte | escape }}</p>{%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</div>

{% schema %}
{
  "name": "Icônes alimentation & bio",
  "tag": "section",
  "class": "nn-section-icones-bio",
  "max_blocks": 24,
  "settings": [
    {
      "type": "inline_richtext",
      "id": "titre",
      "label": "Titre",
      "default": "Le goût des bonnes choses"
    },
    {
      "type": "textarea",
      "id": "texte",
      "label": "Texte d’introduction",
      "default": "Des produits sélectionnés avec soin, la composition est détaillée sur chaque fiche."
    },
    {
      "type": "select",
      "id": "alignement",
      "label": "Alignement",
      "options": [
        {
          "value": "centre",
          "label": "Centré"
        },
        {
          "value": "gauche",
          "label": "À gauche"
        }
      ],
      "default": "centre"
    },
    {
      "type": "range",
      "id": "colonnes",
      "label": "Colonnes sur ordinateur",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 5
    },
    {
      "type": "header",
      "content": "Icônes"
    },
    {
      "type": "range",
      "id": "taille",
      "label": "Taille des icônes",
      "min": 24,
      "max": 64,
      "step": 4,
      "default": 36,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "forme",
      "label": "Fond de l’icône",
      "options": [
        {
          "value": "cercle",
          "label": "Cercle"
        },
        {
          "value": "carre",
          "label": "Carré arrondi"
        },
        {
          "value": "aucune",
          "label": "Aucun"
        }
      ],
      "default": "cercle"
    },
    {
      "type": "select",
      "id": "animation",
      "label": "Animation",
      "options": [
        {
          "value": "aucune",
          "label": "Aucune"
        },
        {
          "value": "rebond",
          "label": "Rebond"
        },
        {
          "value": "rotation",
          "label": "Rotation"
        },
        {
          "value": "pulsation",
          "label": "Pulsation"
        },
        {
          "value": "balancement",
          "label": "Balancement"
        },
        {
          "value": "trace",
          "label": "Tracé dessiné"
        }
      ],
      "default": "trace"
    },
    {
      "type": "select",
      "id": "mode",
      "label": "Déclenchement",
      "options": [
        {
          "value": "survol",
          "label": "Au survol (souris)"
        },
        {
          "value": "continu",
          "label": "En continu"
        }
      ],
      "default": "survol"
    },
    {
      "type": "paragraph",
      "content": "Les animations sont coupées automatiquement si le visiteur a demandé à réduire les animations."
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#F6FBF2"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#103A1F"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#9BE15D"
    },
    {
      "type": "color",
      "id": "couleur_icone",
      "label": "Icône",
      "default": "#2F7A3A"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 48
    }
  ],
  "blocks": [
    {
      "type": "icone",
      "name": "Icône",
      "settings": [
        {
          "type": "select",
          "id": "icone",
          "label": "Icône",
          "options": [
            {
              "value": "feuille",
              "label": "Naturel"
            },
            {
              "value": "pomme",
              "label": "Fruits"
            },
            {
              "value": "cafe",
              "label": "Café & thé"
            },
            {
              "value": "ble",
              "label": "Céréales"
            },
            {
              "value": "carotte",
              "label": "Légumes"
            },
            {
              "value": "label-bio",
              "label": "Agriculture biologique"
            },
            {
              "value": "vegetal",
              "label": "Végétal"
            },
            {
              "value": "toque",
              "label": "Fait maison"
            },
            {
              "value": "bouteille",
              "label": "Boissons"
            },
            {
              "value": "miel",
              "label": "Épicerie fine"
            }
          ],
          "default": "feuille"
        },
        {
          "type": "text",
          "id": "titre",
          "label": "Titre",
          "default": "Naturel"
        },
        {
          "type": "textarea",
          "id": "texte",
          "label": "Texte",
          "default": "Voir la composition sur la fiche"
        },
        {
          "type": "url",
          "id": "lien",
          "label": "Lien (facultatif)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icônes alimentation & bio",
      "blocks": [
        {
          "type": "icone",
          "settings": {
            "icone": "feuille",
            "titre": "Naturel",
            "texte": "Voir la composition sur la fiche"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "pomme",
            "titre": "Fruits",
            "texte": "Des fruits de saison"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "cafe",
            "titre": "Café & thé",
            "texte": "Pour la pause du matin"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "ble",
            "titre": "Céréales",
            "texte": "Pour le petit-déjeuner"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "carotte",
            "titre": "Légumes",
            "texte": "Des légumes à cuisiner"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "label-bio",
            "titre": "Agriculture biologique",
            "texte": "Selon le label indiqué sur la fiche"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "vegetal",
            "titre": "Végétal",
            "texte": "Des recettes à base de plantes"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "toque",
            "titre": "Fait maison",
            "texte": "Préparé en petites quantités"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "bouteille",
            "titre": "Boissons",
            "texte": "À servir bien frais"
          }
        },
        {
          "type": "icone",
          "settings": {
            "icone": "miel",
            "titre": "Épicerie fine",
            "texte": "Des saveurs authentiques"
          }
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-icones-bio {
  padding: var(--nn-mh) 16px var(--nn-mb);
  background: var(--nn-fond);
  color: var(--nn-texte);
}
.nn-icones-bio__entete { max-width: 640px; margin: 0 auto 28px; }
.nn-icones-bio--centre .nn-icones-bio__entete { text-align: center; }
.nn-icones-bio__titre { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; }
.nn-icones-bio__intro { margin: 0; opacity: 0.8; font-size: 16px; line-height: 1.5; }
.nn-icones-bio__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 750px) { .nn-icones-bio__grille { grid-template-columns: repeat(var(--nn-colonnes), minmax(0, 1fr)); gap: 30px 20px; } }
.nn-icones-bio__carte { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.nn-icones-bio--gauche .nn-icones-bio__carte { align-items: flex-start; text-align: start; }
.nn-icones-bio__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--nn-taille) * 1.9);
  height: calc(var(--nn-taille) * 1.9);
  margin-bottom: 12px;
  color: var(--nn-icone);
}
.nn-icones-bio__pastille--cercle { border-radius: 50%; background: color-mix(in srgb, var(--nn-accent) 18%, transparent); }
.nn-icones-bio__pastille--carre { border-radius: 28%; background: color-mix(in srgb, var(--nn-accent) 18%, transparent); }
.nn-icones-bio__pastille--aucune { width: auto; height: auto; }
.nn-icones-bio__svg { display: block; width: var(--nn-taille); height: var(--nn-taille); transform-origin: 50% 50%; }
.nn-icones-bio__nom { margin: 0 0 4px; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.nn-icones-bio__texte { margin: 0; font-size: 14px; line-height: 1.45; opacity: 0.75; overflow-wrap: anywhere; }
.nn-icones-bio__lien { color: inherit; text-decoration: none; }
.nn-icones-bio__lien::after { content: ""; position: absolute; inset: 0; }
.nn-icones-bio__carte:has(.nn-icones-bio__lien) { position: relative; border-radius: 12px; }
.nn-icones-bio__lien:hover { text-decoration: underline; }
.nn-icones-bio__lien:focus-visible { outline: none; }
.nn-icones-bio__carte:has(.nn-icones-bio__lien:focus-visible) { outline: 3px solid var(--nn-accent); outline-offset: 6px; }
@keyframes nn-icones-bio-rebond { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-18%); } 55% { transform: translateY(3%); } 75% { transform: translateY(-5%); } }
@keyframes nn-icones-bio-rotation { to { transform: rotate(1turn); } }
@keyframes nn-icones-bio-pulsation { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes nn-icones-bio-balancement { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes nn-icones-bio-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nn-icones-bio-trace-boucle { 0% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
.nn-icones-bio[data-nn-mode="continu"][data-nn-animation="rebond"] .nn-icones-bio__svg { animation: nn-icones-bio-rebond 1.8s ease-in-out infinite; animation-delay: calc(var(--nn-i) * 120ms); }
.nn-icones-bio[data-nn-mode="continu"][data-nn-animation="rotation"] .nn-icones-bio__svg { animation: nn-icones-bio-rotation 6s linear infinite; }
.nn-icones-bio[data-nn-mode="continu"][data-nn-animation="pulsation"] .nn-icones-bio__svg { animation: nn-icones-bio-pulsation 2.2s ease-in-out infinite; animation-delay: calc(var(--nn-i) * 120ms); }
.nn-icones-bio[data-nn-mode="continu"][data-nn-animation="balancement"] .nn-icones-bio__svg { animation: nn-icones-bio-balancement 2.4s ease-in-out infinite; animation-delay: calc(var(--nn-i) * 120ms); }
.nn-icones-bio[data-nn-mode="continu"][data-nn-animation="trace"] .nn-icones-bio__svg > * { stroke-dasharray: 1; animation: nn-icones-bio-trace-boucle 3.2s ease-in-out infinite; animation-delay: calc(var(--nn-i) * 160ms); }
@media (hover: hover) {
  .nn-icones-bio[data-nn-mode="survol"][data-nn-animation="rebond"] .nn-icones-bio__carte:hover .nn-icones-bio__svg { animation: nn-icones-bio-rebond 0.8s ease-out; }
  .nn-icones-bio[data-nn-mode="survol"][data-nn-animation="rotation"] .nn-icones-bio__carte:hover .nn-icones-bio__svg { animation: nn-icones-bio-rotation 0.7s ease-in-out; }
  .nn-icones-bio[data-nn-mode="survol"][data-nn-animation="pulsation"] .nn-icones-bio__carte:hover .nn-icones-bio__svg { animation: nn-icones-bio-pulsation 0.9s ease-in-out infinite; }
  .nn-icones-bio[data-nn-mode="survol"][data-nn-animation="balancement"] .nn-icones-bio__carte:hover .nn-icones-bio__svg { animation: nn-icones-bio-balancement 0.7s ease-in-out; }
  .nn-icones-bio[data-nn-mode="survol"][data-nn-animation="trace"] .nn-icones-bio__carte:hover .nn-icones-bio__svg > * { stroke-dasharray: 1; animation: nn-icones-bio-trace 0.9s ease-out; }
}
.nn-icones-bio[data-nn-mode="survol"][data-nn-animation="trace"] .nn-icones-bio__carte:focus-within .nn-icones-bio__svg > * { stroke-dasharray: 1; animation: nn-icones-bio-trace 0.9s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .nn-icones-bio *, .nn-icones-bio *::before, .nn-icones-bio *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}

Les 10 icônes, une par une

• NaturelCopier
• FruitsCopier
• Café & théCopier
• CéréalesCopier
• LégumesCopier
• Agriculture biologiqueCopier
• VégétalCopier
• Fait maisonCopier
• BoissonsCopier
• Épicerie fineCopier