/* ===== Approche — habillage (prototype) ===== */

.ah-approche .ah-titre-l1::before {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--ah-terre, #b07030);
  margin-bottom: 18px;
}

/* La section / la ligne peuvent avoir overflow:hidden par défaut (Divi) :
   ça couperait la galerie. On l'annule ici, par précaution (même bug que
   celui qui cassait le sticky en v2/v3) — même si le vrai bord-à-bord
   écran est bloqué plus haut dans le thème, voir l'entête du module. */
.ah-approche.et_pb_section,
.ah-approche .et_pb_row {
  overflow: visible !important;
}

/* Une seule valeur pour TOUTES les marges de la section : entre les
   photos, entre les séries, et entre la colonne texte et la galerie.
   Changer ici change tout d'un coup. */
.ah-approche {
  --ah-appr-gap: 20px;
}

/* --- Rangée texte / galerie, côte à côte, défilement normal --- */
.ah-approche .ah-appr-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--ah-appr-gap);
  flex-wrap: wrap;
}
.ah-approche .ah-appr-col-texte {
  flex: 0 1 320px;
  max-width: 320px;
}
.ah-approche .ah-appr-col-galerie {
  flex: 1 1 480px;
}

/* Modules qui n'entrent pas dans la mise en page prévue : ils sont
   conservés sous la colonne texte au lieu d'être supprimés. */
.ah-approche .ah-appr-restes {
  margin-top: var(--ah-appr-gap);
}
.ah-approche .ah-appr-restes > .et_pb_module + .et_pb_module {
  margin-top: var(--ah-appr-gap);
}

/* --- Texte : tous les paragraphes à la MÊME taille --------------------
   Les blocs de texte venaient de Divi avec des réglages très différents
   (28px/47px pour le premier, 16px/27px pour les suivants) : la colonne
   dépassait la galerie de plus de 200px. On impose ici une seule taille
   à tous, réglable d'un seul endroit.
   La graisse et la couleur ne sont PAS touchées : c'est ce qui distingue
   encore le paragraphe d'accroche et celui en ocre. --- */
.ah-approche {
  --ah-appr-txt: 16px;         /* taille commune à tous les paragraphes */
  --ah-appr-interligne: 1.55;  /* voir la note ci-dessous */
  --ah-appr-para: 16px;        /* écart entre paragraphes et entre blocs */
}
/* Mesuré en direct sur ton site, colonne texte / galerie :
     interligne 1.7  → 991 px contre 947, la colonne dépasse de 44
     interligne 1.65 → 971, dépasse de 25
     interligne 1.6  → 951, dépasse de 5
     interligne 1.55 → 932, il reste 15 px de marge   ← valeur retenue
   Si tu préfères un texte plus aéré, monte à 1.6 : le débordement de
   5 px ne se voit pas. Au-delà, la colonne dépassera visiblement. */
/* Pas de préfixe de colonne : le dernier bloc part dans la galerie sur
   ordinateur et doit garder exactement la même typographie. */
.ah-approche .txt-approche,
.ah-approche .txt-approche p,
.ah-approche .txt-approche span:not(.ah-appr-mot) {
  font-size: var(--ah-appr-txt) !important;
  line-height: var(--ah-appr-interligne) !important;
  letter-spacing: 0.01em !important;
}
.ah-approche .txt-approche p {
  margin: 0 0 var(--ah-appr-para);
}
.ah-approche .txt-approche p:last-child {
  margin-bottom: 0;
}
/* écart régulier entre les blocs de texte successifs */
.ah-approche .ah-appr-col-texte .txt-approche + .txt-approche {
  margin-top: var(--ah-appr-para);
}
.ah-approche .ah-appr-mot {
  display: inline-block;
  transition: color .5s ease, font-size .5s ease;
}
.ah-approche .ah-appr-mot.ah-actif {
  color: var(--ah-terre, #b07030);
  font-weight: 700;
  font-size: 1.08em;
}

/* Dernier paragraphe (« Nous croyons aux lieux qui vivent… ») : chocolat
   partout, ordinateur et mobile. Le passage mis en avant garde son gras,
   il change seulement de couleur. */
.ah-approche .ah-appr-bloc-final,
.ah-approche .ah-appr-bloc-final p,
.ah-approche .ah-appr-bloc-final span,
.ah-approche .ah-appr-bloc-final strong,
.ah-approche .ah-appr-bloc-final em,
.ah-approche .ah-appr-bloc-final .ah-appr-mot,
.ah-approche .ah-appr-bloc-final .ah-appr-mot.ah-actif {
  color: var(--ah-chocolat, #4c250a) !important;
}

/* --- Galerie : 3 séries empilées, chaque série en colonnes verticales
   égales, avec un léger parallaxe par photo. Marge identique partout :
   entre les photos (horizontal) et entre les séries (vertical). --- */
.ah-approche .ah-appr-serie {
  display: grid;
  /* le nombre de colonnes est posé en JS selon le nombre de photos
     réellement présentes dans la série, pour ne jamais laisser de trou */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ah-appr-gap);
}
.ah-approche .ah-appr-serie + .ah-appr-serie {
  margin-top: var(--ah-appr-gap); /* même valeur que le gap ci-dessus */
}
/* Une case par emplacement de la grille, occupée ou non : la place est
   gardée, donc les photos ne se décalent jamais. */
.ah-approche .ah-appr-serie > .ah-appr-case {
  min-width: 0;
}
/* Case vide + dernier paragraphe (ordinateur) : centré en hauteur entre
   la rangée de photos du haut et celle du bas. */
.ah-approche .ah-appr-case.ah-a-texte {
  display: flex;
  align-items: center;
  padding-left: var(--ah-appr-gap);
}
.ah-approche .ah-appr-case.ah-a-texte .txt-approche {
  margin: 0 !important;
}
.ah-approche .ah-appr-serie .et_pb_image_wrap {
  display: block;
  position: relative;
  width: 100%;
  /* proportion fixe : toutes les photos ont exactement le même format,
     quelle que soit la largeur de l'écran ou le nombre de colonnes */
  aspect-ratio: 3 / 4;
  height: auto;
  overflow: hidden;
}
.ah-approche .ah-appr-serie img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  will-change: transform;
}

@media (max-width: 980px) {
  .ah-approche .et_pb_row:has(.titre),
  .ah-approche .et_pb_row:has(.titre) .titre,
  .ah-approche .et_pb_row:has(.titre) .titre *,
  .ah-approche .ah-titre-l1,
  .ah-approche .ah-titre-l1 h1,
  .ah-approche .ah-titre-l1 h2,
  .ah-approche .ah-titre-l1 h3,
  .ah-approche .ah-titre-l1 p,
  .ah-approche .ah-titre-l2,
  .ah-approche .ah-titre-l2 h1,
  .ah-approche .ah-titre-l2 h2,
  .ah-approche .ah-titre-l2 h3,
  .ah-approche .ah-titre-l2 p {
    text-align: center !important;
    font-size: clamp(28px, 8vw, 32px) !important;
    line-height: 1.15 !important;
  }
  .ah-approche .ah-titre-l1::before {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 14px;
  }
  .ah-approche .ah-appr-col-texte {
    max-width: none;
  }
  /* Air entre le titre et le premier paragraphe. */
  .ah-approche .ah-appr-col-texte .ah-titre-l2,
  .ah-approche .ah-appr-col-texte .ah-titre-l1 {
    margin-bottom: 0 !important;
  }
  .ah-approche .ah-appr-col-texte .ah-titre-l1 + .txt-approche,
  .ah-approche .ah-appr-col-texte .ah-titre-l2 + .txt-approche {
    margin-top: 28px !important;
  }
  .ah-approche .ah-appr-serie img {
    transform: none !important;
  }
  /* Pas de case vide sur mobile : la rangée n'a que ses photos, qui
     s'élargissent pour occuper toute la largeur (--ah-appr-cols est
     posé par le JS, série par série). */
  .ah-approche .ah-appr-serie {
    grid-template-columns: repeat(var(--ah-appr-cols, 3), 1fr);
  }
  .ah-approche .ah-appr-case-vide {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ah-approche .ah-appr-serie img { transition: none !important; }
  .ah-approche .ah-appr-mot { transition: none !important; }
}