{# accroche-galerie-4.html — Accroche d'entrée (H1 + sous-titre + intro + CTA) avec galerie 4 photos
   en grille 2 col × 2 lignes décalées. Clone indépendant (zéro Webflow) de section_hero de www.maison-mere.co.
   Slots :
   {{ICON_SVG}}                       — SVG ou img inline du logo/icône (optionnel, peut être vide)
   {{H1_AVANT}} / {{H1_ACCENT}}       — h1 principal (accent = highlight)
   {{H3}}                             — sous-titre h3
   {{INTRO_HTML}}                     — paragraphe d'introduction (HTML autorisé)
   {{CTA_LABEL}} / {{CTA_HREF}}       — bouton CTA principal
   {{IMG_1_SRC}} ... {{IMG_4_SRC}}    — 4 sources d'images (galerie 2 col × 2 lignes décalées)
   {{IMG_1_ALT}} ... {{IMG_4_ALT}}    — alt text de chaque image

   Par défaut associée à section-4 (violet/blanc/vert pour MM). Pour utiliser une autre section,
   appliquer la classe `ag--theme-N` (1, 2, 3, 4) sur le <section> racine.
#}

<section class="ag ag--theme-4">
  <div class="ag__inner">
    <div class="ag__grid">

      <div class="ag__lead">
        <div class="ag__icon">{{ICON_SVG}}</div>
        <h1 class="ag__h1">{{H1_AVANT}} <span class="ag__highlight">{{H1_ACCENT}}</span></h1>
        <p class="ag__h3">{{H3}}</p>
        <p class="ag__intro">{{INTRO_HTML}}</p>
        <a class="ag__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
      </div>

      <div class="ag__gallery">
        <div class="ag__col ag__col--left">
          <div class="ag__img-wrap"><img src="{{IMG_1_SRC}}" alt="{{IMG_1_ALT}}" loading="lazy"></div>
          <div class="ag__img-wrap"><img src="{{IMG_2_SRC}}" alt="{{IMG_2_ALT}}" loading="lazy"></div>
        </div>
        <div class="ag__col ag__col--right">
          <div class="ag__img-wrap"><img src="{{IMG_3_SRC}}" alt="{{IMG_3_ALT}}" loading="lazy"></div>
          <div class="ag__img-wrap"><img src="{{IMG_4_SRC}}" alt="{{IMG_4_ALT}}" loading="lazy"></div>
        </div>
      </div>

    </div>
  </div>
</section>

<style>
  /* Tokens locaux mappés sur la section choisie via .ag--theme-N */
  .ag.ag--theme-1 { --ag-bg: var(--section-1-bg); --ag-text: var(--section-1-text); --ag-highlight: var(--section-1-highlight); }
  .ag.ag--theme-2 { --ag-bg: var(--section-2-bg); --ag-text: var(--section-2-text); --ag-highlight: var(--section-2-highlight); }
  .ag.ag--theme-3 { --ag-bg: var(--section-3-bg); --ag-text: var(--section-3-text); --ag-highlight: var(--section-3-highlight); }
  .ag.ag--theme-4 { --ag-bg: var(--section-4-bg); --ag-text: var(--section-4-text); --ag-highlight: var(--section-4-highlight); }

  .ag {
    --ag-cta-bg:    var(--cta-bg, #ff2c7b);
    --ag-cta-text:  var(--cta-text, #ffffff);
    --ag-cta-bg-h:  var(--cta-bg-hover, #d91f63);
    --ag-cta-text-h:var(--cta-text-hover, #ffffff);
    --ag-font-h:    var(--font-heading, system-ui, sans-serif);
    --ag-font-b:    var(--font-body, system-ui, sans-serif);

    background: var(--ag-bg);
    color: var(--ag-text);
    font-family: var(--ag-font-b);
  }
  .ag__inner { max-width: 90rem; margin: 0 auto; padding: 5rem 2rem 6rem; }
  .ag__grid {
    display: grid;
    grid-template-columns: 0.75fr 0.5fr;
    column-gap: 4rem;
    align-items: center;
  }
  .ag__lead {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 40rem;
  }
  .ag__icon { height: 2.25rem; }
  .ag__icon svg, .ag__icon img { height: 100%; width: auto; }
  .ag__h1 {
    font-family: var(--ag-font-h);
    font-weight: 700;
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    line-height: 1.1;
    margin: 0;
    color: var(--ag-text);
  }
  .ag__highlight { color: var(--ag-highlight); }
  .ag__h3 {
    font-family: var(--ag-font-h);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    line-height: 1.3;
    margin: 0;
    color: var(--ag-text);
  }
  .ag__intro {
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
    color: var(--ag-text);
  }
  .ag__cta {
    align-self: flex-start;
    background: var(--ag-cta-bg);
    color: var(--ag-cta-text) !important;
    text-decoration: none;
    font-family: var(--ag-font-h);
    font-weight: 700;
    font-size: 1.125rem;
    padding: 1rem 1.75rem;
    border-radius: 10px;
    transition: background .25s, color .25s, transform .25s;
  }
  .ag__cta:hover { background: var(--ag-cta-bg-h); color: var(--ag-cta-text-h) !important; transform: scale(.97); }

  /* Galerie : 2 colonnes décalées (effet masonry signature MM) */
  .ag__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }
  .ag__col { display: grid; row-gap: 1rem; }
  .ag__col--left { margin-top: -3rem; }   /* offset vertical signature */
  .ag__img-wrap {
    position: relative;
    padding-top: 120%;      /* ratio portrait 5:6 */
    overflow: hidden;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ag-text) 8%, transparent);
  }
  .ag__img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Responsive */
  @media (max-width: 991px) {
    .ag__inner { padding: 4rem 1.5rem 5rem; }
    .ag__grid { grid-template-columns: 1fr; row-gap: 3rem; }
    .ag__col--left { margin-top: 0; }
  }
  @media (max-width: 600px) {
    .ag__h1 { font-size: clamp(1.875rem, 7vw, 2.5rem); }
    .ag__gallery { grid-template-columns: 1fr; }
  }
</style>