feature.liquid

{% comment %}
  Section : Feature Mushie (image centrale + avantages gauche/droite)
  - Utilise la palette de couleurs du thème (color_scheme)
  - Titre paramétrable
  - Image desktop & mobile
  - Blocs "avantage" positionnés à gauche ou à droite
  - Style responsive
{% endcomment %}
<section id="feature-mushie-{{ section.id }}"
  class="feature-mushie color-{{ section.settings.color_scheme }} gradient"
  style="--fm-max: {{ section.settings.max_width }}px;">

  <div class="fm-wrap">
    {% if section.settings.heading != blank %}
      <h2 class="fm-heading">{{ section.settings.heading }}</h2>
    {% endif %}

    <div class="fm-content">
      <!-- Colonne gauche : blocs "left" -->
      <div class="fm-col fm-col-left">
        {% for block in section.blocks %}
          {% if block.type == 'feature_item' and block.settings.position == 'left' %}
            <div class="fm-item" {{ block.shopify_attributes }}>
              {% if block.settings.icon != blank %}
                <div class="fm-icon">
                  {{ block.settings.icon | image_url: width: 96 | image_tag:
                    loading: 'lazy',
                    alt: block.settings.icon_alt | default: block.settings.title }}
                </div>
              {% endif %}
              {% if block.settings.title != blank %}
                <p class="fm-item-title">{{ block.settings.title }}</p>
              {% endif %}
              {% if block.settings.text != blank %}
                <p class="fm-item-text">{{ block.settings.text }}</p>
              {% endif %}
            </div>
          {% endif %}
        {% endfor %}
      </div>

      <!-- Image centrale -->
      <div class="fm-image">
        {% assign desktop_img = section.settings.image_desktop %}
        {% assign mobile_img = section.settings.image_mobile | default: section.settings.image_desktop %}

        {% if desktop_img != blank %}
          <picture>
            {% if mobile_img != blank %}
              <source media="(max-width: 749px)" srcset="{{ mobile_img | image_url: width: 900 }}">
            {% endif %}
            <img
              src="{{ desktop_img | image_url: width: 1500 }}"
              alt="{{ section.settings.image_alt | escape }}"
              loading="lazy"
              width="{{ desktop_img.width }}"
              height="{{ desktop_img.height }}">
          </picture>
        {% else %}
          <div class="fm-image--placeholder">
            {{ 'image' | placeholder_svg_tag }}
          </div>
        {% endif %}
      </div>

      <!-- Colonne droite : blocs "right" -->
      <div class="fm-col fm-col-right">
        {% for block in section.blocks %}
          {% if block.type == 'feature_item' and block.settings.position == 'right' %}
            <div class="fm-item" {{ block.shopify_attributes }}>
              {% if block.settings.icon != blank %}
                <div class="fm-icon">
                  {{ block.settings.icon | image_url: width: 96 | image_tag:
                    loading: 'lazy',
                    alt: block.settings.icon_alt | default: block.settings.title }}
                </div>
              {% endif %}
              {% if block.settings.title != blank %}
                <p class="fm-item-title">{{ block.settings.title }}</p>
              {% endif %}
              {% if block.settings.text != blank %}
                <p class="fm-item-text">{{ block.settings.text }}</p>
              {% endif %}
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>

<style>
  /* Conteneur */
  #feature-mushie-{{ section.id }} .fm-wrap{
    max-width: var(--fm-max, 1200px);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 32px);
  }

  /* Titre de section (facultatif) */
  #feature-mushie-{{ section.id }} .fm-heading{
    text-align: center;
    margin: 0 0 clamp(16px, 3vw, 24px);
    font-size: clamp(22px, 3vw, 36px);
    line-height: 1.2;
    color: rgb(var(--color-foreground));
  }

  /* >>> Grille 3 colonnes : gauche (items), centre (image), droite (items) */
  #feature-mushie-{{ section.id }} .fm-content{
    display: grid;
    grid-template-columns: 1fr minmax(320px, 560px) 1fr;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
  }

  /* Colonnes gauche/droite : piles verticales, centrées */
  #feature-mushie-{{ section.id }} .fm-col{
    display: grid;
    gap: clamp(18px, 2vw, 28px);
    justify-items: center;   /* centre chaque bloc */
    text-align: center;
  }

  /* Un item = icône au-dessus, titre en maj, texte dessous */
  #feature-mushie-{{ section.id }} .fm-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 320px;
    background: transparent;   /* pas de carton derrière */
    padding: 0;
  }

  #feature-mushie-{{ section.id }} .fm-icon img{
    width: 72px;
    height: auto;
    display: block;
    margin-bottom: 12px;
  }

  #feature-mushie-{{ section.id }} .fm-item-title{
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: rgb(var(--color-foreground));
    font-size: clamp(16px, 1.6vw, 22px);
    margin: 0 0 8px;
  }

  #feature-mushie-{{ section.id }} .fm-item-text{
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.6;
    color: color-mix(in oklab, rgb(var(--color-foreground)) 85%, rgb(var(--color-background)) 15%);
    margin: 0;
  }

  /* Image au centre (ne PAS la faire span sur toutes les colonnes) */
  #feature-mushie-{{ section.id }} .fm-image{
    display: flex;
    justify-content: center;
  }
  #feature-mushie-{{ section.id }} .fm-image img{
    width: 100%;
    max-width: 560px;
    height: auto;
    border-radius: 16px;
    display: block;
  }

  /* Responsive */
  @media (max-width: 989px){
    #feature-mushie-{{ section.id }} .fm-content{
      grid-template-columns: 1fr; /* on passe en pile */
      gap: 28px;
    }
    /* Ordre : image puis items gauche puis items droite (ou inverse si tu préfères) */
    #feature-mushie-{{ section.id }} .fm-image{ order: 1; }
    #feature-mushie-{{ section.id }} .fm-col-left{ order: 2; }
    #feature-mushie-{{ section.id }} .fm-col-right{ order: 3; }
  }

  /* --- MOBILE : image tout en haut, 4 avantages en 2x2 --- */
@media (max-width: 749px) {
  /* Grille mobile : 2 colonnes pour les avantages */
  #feature-mushie-{{ section.id }} .fm-content{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 18px !important;
    justify-items: center !important;
    align-items: start !important;
    text-align: center !important;
  }

  /* L'image passe sous le titre et au-dessus des avantages, en full width */
  #feature-mushie-{{ section.id }} .fm-image{
    grid-column: 1 / -1 !important;
    order: -1 !important;
    margin: 8px 0 20px !important;
    display: flex !important;
    justify-content: center !important;
  }
  #feature-mushie-{{ section.id }} .fm-image img{
    width: 100% !important;
    max-width: 800px !important;
    height: auto !important;
    display: block !important;
    border-radius: 16px;
  }

  /* On “fusionne” les colonnes gauche/droite pour avoir une grille 2x2 globale */
  #feature-mushie-{{ section.id }} .fm-col-left,
  #feature-mushie-{{ section.id }} .fm-col-right{
    display: contents !important;  /* les .fm-item deviennent des enfants directs de .fm-content */
    order: 2 !important;
  }

  /* Stylage des items (icône au-dessus, titre en MAJ, texte dessous) */
  #feature-mushie-{{ section.id }} .fm-item{
    max-width: 300px !important;
    margin: 0 auto !important;
    text-align: center !important;
    align-items: center !important;
  }
  #feature-mushie-{{ section.id }} .fm-icon img{
    width: 56px !important;
    height: auto !important;
    margin-bottom: 10px !important;
    display: block !important;
  }
  #feature-mushie-{{ section.id }} .fm-item-title{
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    letter-spacing: .02em;
    margin: 0 0 6px !important;
  }
  #feature-mushie-{{ section.id }} .fm-item-text{
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
}

</style>



</section>

{% schema %}
{
  "name": "Feature – Image au centre",
  "tag": "section",
  "class": "section feature-mushie-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Titre",
      "default": "Le calme commence dans vos mains."
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Palette de couleurs",
      "default": "scheme-1"
    },
    {
      "type": "image_picker",
      "id": "image_desktop",
      "label": "Image centrale (desktop)"
    },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Image centrale (mobile, optionnel)"
    },
    {
      "type": "text",
      "id": "image_alt",
      "label": "Texte alternatif image",
      "default": "Image centrale"
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "Largeur max du conteneur",
      "min": 900,
      "max": 1600,
      "step": 10,
      "unit": "px",
      "default": 1200
    }
  ],
  "blocks": [
    {
      "type": "feature_item",
      "name": "Avantage",
      "settings": [
        {
          "type": "select",
          "id": "position",
          "label": "Position",
          "options": [
            { "value": "left", "label": "Colonne gauche" },
            { "value": "right", "label": "Colonne droite" }
          ],
          "default": "left"
        },
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icône"
        },
        {
          "type": "text",
          "id": "icon_alt",
          "label": "Texte alternatif icône",
          "default": "Icône"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Titre",
          "default": "Titre de l’avantage"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Texte",
          "default": "Description courte de l’avantage."
        }
      ]
    }
  ],
  "max_blocks": 10,
  "presets": [
    {
      "name": "Feature – Image au centre",
      "blocks": [
        {
          "type": "feature_item",
          "settings": {
            "position": "left",
            "title": "Mains apaisées",
            "text": "Poids, forme ou texture : il calme dès qu’on le touche."
          }
        },
        {
          "type": "feature_item",
          "settings": {
            "position": "left",
            "title": "Corps apaisé",
            "text": "Sa densité rassure. Votre corps relâche et le mental suit."
          }
        },
        {
          "type": "feature_item",
          "settings": {
            "position": "right",
            "title": "Sommeil profond",
            "text": "Sous la main ou calé contre vous : il ralentit le rythme."
          }
        },
        {
          "type": "feature_item",
          "settings": {
            "position": "right",
            "title": "Beau & Utile",
            "text": "On ne le lâche plus. Il est aussi apaisant qu'esthétique."
          }
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}{% endstylesheet %}
{% javascript %}{% endjavascript %}
Créé il y a 2 mois.