{# accroche-galerie-5.html — Variante 5 photos en grille asymétrique (col gauche 3 / col droite 2).
   Identique à accroche-galerie-4 pour le bloc texte. Slots :
   {{ICON_SVG}}                       — SVG ou img inline du logo/icône (optionnel)
   {{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_5_SRC}}    — 5 sources d'images (col gauche 3 décalées / col droite 2)
   {{IMG_1_ALT}} ... {{IMG_5_ALT}}    — alt text

   Par défaut associée à section-4. Switchable via .ag--theme-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 class="ag__img-wrap"><img src="{{IMG_3_SRC}}" alt="{{IMG_3_ALT}}" loading="lazy"></div>
        </div>
        <div class="ag__col ag__col--right">
          <div class="ag__img-wrap"><img src="{{IMG_4_SRC}}" alt="{{IMG_4_ALT}}" loading="lazy"></div>
          <div class="ag__img-wrap"><img src="{{IMG_5_SRC}}" alt="{{IMG_5_ALT}}" loading="lazy"></div>
        </div>
      </div>

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

<style>
  .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; color: var(--ag-text); }
  .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 5 photos : col gauche 3 (décalée haut), col droite 2 */
  .ag__gallery { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; align-items: start; }
  .ag__col { display: grid; row-gap: 1rem; }
  .ag__col--left { margin-top: -4rem; }   /* offset vertical signature */
  .ag__img-wrap {
    position: relative;
    padding-top: 120%;
    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>