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

/* --- Titre : on ne touche PAS à la mise en forme Divi (police, taille,
   couleur, balise h2) — comme Agence. On n'anime que le fondu du mot
   qui bascule et de la 2ᵉ ligne. Le JS écrit DANS le h2 existant, il
   ne le remplace plus (sinon la mise en page Divi disparaissait). --- */
.ah-histoire .ah-titre-l2,
.ah-histoire .ah-titre-l2 h1,
.ah-histoire .ah-titre-l2 h2,
.ah-histoire .ah-titre-l2 h3,
.ah-histoire .ah-titre-l2 p {
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.ah-histoire .ah-titre-l2.ah-titre-swap-out,
.ah-histoire .ah-titre-l2.ah-titre-swap-out h1,
.ah-histoire .ah-titre-l2.ah-titre-swap-out h2,
.ah-histoire .ah-titre-l2.ah-titre-swap-out h3,
.ah-histoire .ah-titre-l2.ah-titre-swap-out p {
  opacity: 0;
  transform: translateY(5px);
}
.ah-histoire .ah-mot {
  display: inline-block;
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.ah-histoire .ah-mot.ah-mot-out {
  opacity: 0;
  transform: translateY(5px);
}
/* Rond décoratif au-dessus du titre */
.ah-histoire .ah-titre-l1::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--ah-terre, #b07030);
  margin-bottom: 18px;
}
/* Titre bicolore, comme la maquette : ligne 1 chocolat, ligne 2 tan. */
.ah-histoire .ah-titre-l1,
.ah-histoire .ah-titre-l1 h1,
.ah-histoire .ah-titre-l1 h2,
.ah-histoire .ah-titre-l1 h3,
.ah-histoire .ah-titre-l1 p {
  color: var(--ah-encre, #3e2716) !important;
}
.ah-histoire .ah-titre-l2,
.ah-histoire .ah-titre-l2 h1,
.ah-histoire .ah-titre-l2 h2,
.ah-histoire .ah-titre-l2 h3,
.ah-histoire .ah-titre-l2 p {
  color: var(--ah-tan, #a87d43) !important;
}
/* --- Liste des 5 lignes : chaque module = UNE ligne de 1,45 em.
   La puce vit dans la gouttière gauche du poème (left:0). Elle glisse
   de N × 1,45 em : plus de getBoundingClientRect sur la boîte Divi
   (trop large → collée à la photo, trop haute → sous la ligne).
   margin:0 pour battre le .ah-puce global du CSS du thème (séparateur
   4px à 14px de marge). Jamais position:fixed. --- */
.ah-histoire .transformer,
.ah-histoire .evoluer,
.ah-histoire .reveler,
.ah-histoire .reinventer,
.ah-histoire .imaginer {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  transition:
    font-size .7s cubic-bezier(.22,1,.36,1),
    font-weight .7s cubic-bezier(.22,1,.36,1),
    color .7s cubic-bezier(.22,1,.36,1);
}
.ah-histoire .transformer .et_pb_text_inner,
.ah-histoire .evoluer .et_pb_text_inner,
.ah-histoire .reveler .et_pb_text_inner,
.ah-histoire .reinventer .et_pb_text_inner,
.ah-histoire .imaginer .et_pb_text_inner {
  margin: 0 !important;
  padding: 0 !important;
}
.ah-histoire .transformer p,
.ah-histoire .evoluer p,
.ah-histoire .reveler p,
.ah-histoire .reinventer p,
.ah-histoire .imaginer p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}
.ah-histoire .transformer .et_pb_text_inner,
.ah-histoire .evoluer .et_pb_text_inner,
.ah-histoire .reveler .et_pb_text_inner,
.ah-histoire .reinventer .et_pb_text_inner,
.ah-histoire .imaginer .et_pb_text_inner,
.ah-histoire .ah-ligne-active .et_pb_text_inner {
  transition:
    font-size .7s cubic-bezier(.22,1,.36,1),
    font-weight .7s cubic-bezier(.22,1,.36,1),
    color .7s cubic-bezier(.22,1,.36,1);
}
.ah-histoire .ah-ligne-active,
.ah-histoire .ah-ligne-active .et_pb_text_inner,
.ah-histoire .ah-ligne-active .et_pb_text_inner * {
  font-weight: 600 !important;
  color: var(--ah-terre, #b07030) !important;
}
.ah-histoire .ah-puce {
  position: absolute;
  left: 0 !important;
  top: 0;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex: none !important;
  border-radius: 50%;
  background: var(--ah-terre, #b07030);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transition:
    top .65s cubic-bezier(.22,1,.36,1),
    opacity .8s cubic-bezier(.22,1,.36,1);
}
.ah-histoire .ah-puce.ah-in {
  opacity: 1;
}

/* --- Images : aucune taille imposée, survol (pas de parallaxe).
   MARGES ÉGALES PARTOUT : une seule valeur (--ah-img-gap) sert à la fois
   entre les photos côte à côte, entre les photos empilées dans une même
   colonne, et entre les rangées. Tous les décalages posés dans Divi
   (marges négatives, paddings de rattrapage) sont neutralisés, sinon
   chaque photo garde son propre écart et rien ne s'aligne. --- */
.ah-histoire {
  --ah-img-gap: 24px;   /* écart unique entre toutes les photos */
  --ah-mc-rond: 8px;    /* diamètre des ronds entre les mots-clés */
  --ah-chocolat: #4c250a; /* marron du bloc de bas de section */
  --ah-encre: #3e2716;
  --ah-tan: #a87d43;
  --ah-ocre: #c8943a;
  --ah-terre: #b07030;
  --ah-beige: #f7f0ea;
}
.ah-histoire .et_pb_image {
  margin: 0 !important;
  padding: 0 !important;
}
/* rangées contenant des photos : écart horizontal fixe entre colonnes */
.ah-histoire .et_pb_row:has(.et_pb_image) {
  display: flex !important;
  align-items: flex-start;
  gap: var(--ah-img-gap);
}
.ah-histoire .et_pb_row:has(.et_pb_image) > .et_pb_column {
  margin-right: 0 !important;
  flex: 1 1 auto;
}
/* modules empilés dans une colonne qui contient une photo : même écart */
.ah-histoire .et_pb_row:has(.et_pb_image) > .et_pb_column:has(.et_pb_image) {
  display: flex !important;
  flex-direction: column;
  gap: var(--ah-img-gap);
}
.ah-histoire .et_pb_row:has(.et_pb_image) > .et_pb_column:has(.et_pb_image) > .et_pb_module {
  margin: 0 !important;
}
.ah-histoire .et_pb_row:has(.et_pb_image) > .et_pb_column > .et_pb_module + .et_pb_module {
  margin-top: var(--ah-img-gap) !important;
}
/* écart vertical entre rangées : même valeur */
.ah-histoire .et_pb_row {
  margin-bottom: var(--ah-img-gap) !important;
}
.ah-histoire .boutique .et_pb_image_wrap,
.ah-histoire .maison .et_pb_image_wrap,
.ah-histoire .resto .et_pb_image_wrap,
.ah-histoire .appartement .et_pb_image_wrap,
.ah-histoire .cabinetmedical .et_pb_image_wrap,
.ah-histoire .hotel .et_pb_image_wrap {
  display: block;
  position: relative;
  overflow: hidden;
}
.ah-histoire .boutique .et_pb_image_wrap img,
.ah-histoire .maison .et_pb_image_wrap img,
.ah-histoire .resto .et_pb_image_wrap img,
.ah-histoire .appartement .et_pb_image_wrap img,
.ah-histoire .cabinetmedical .et_pb_image_wrap img,
.ah-histoire .hotel .et_pb_image_wrap img {
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}
.ah-histoire .boutique .et_pb_image_wrap img:hover,
.ah-histoire .maison .et_pb_image_wrap img:hover,
.ah-histoire .resto .et_pb_image_wrap img:hover,
.ah-histoire .appartement .et_pb_image_wrap img:hover,
.ah-histoire .cabinetmedical .et_pb_image_wrap img:hover,
.ah-histoire .hotel .et_pb_image_wrap img:hover {
  transform: scale(1.03);
}
/* Voile chocolat, transparent moyen : la photo reste lisible. */
.ah-histoire .et_pb_image_wrap {
  position: relative;
}
.ah-histoire .et_pb_image_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(76, 37, 10, 0.4);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .ah-histoire .et_pb_image_wrap:hover::after {
    opacity: 1;
  }
}

/* --- Légende posée DANS la photo, EN BAS, bouge avec elle.
   Le dégradé part du bas pour garder le texte lisible. --- */
.ah-histoire .ah-legende {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: left;
  color: #fff;
  pointer-events: none;
  z-index: 2;
}

/* --- Bloc marron de bas de section : pleine largeur d'écran.
   La rangée Divi est centrée et limitée à 1080px ; on la fait déborder
   jusqu'aux deux bords avec des marges négatives calculées, ce qui évite
   d'avoir à toucher à la structure dans Divi. --- */
.ah-histoire .et_pb_row:has(.role) {
  background-color: var(--ah-chocolat, #4c250a);
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  width: auto !important;
  padding: 64px 6vw !important;
  margin-bottom: 0 !important;
}
.ah-histoire .et_pb_row:has(.role) .role,
.ah-histoire .et_pb_row:has(.role) .role * {
  color: #fff;
}

/* --- Paragraphe de rôle : centré, agrandi (ordinateur inchangé). --- */
.ah-histoire .role {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.55;
  font-weight: 300;
}
.ah-histoire .role,
.ah-histoire .role * {
  font-weight: 300 !important;
}

/* --- Mots-clés : plus gras que le rôle, puces ocre immobiles.
   L'effet de lecture ne touche pas les mots-clés : ils restent
   blancs, puces ocre immobiles. --- */
.ah-histoire .motsclés { text-align: center; }
.ah-histoire .motsclés ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 48px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.ah-histoire .motsclés li {
  position: relative;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  padding-bottom: 9px;
}
.ah-histoire .motsclés li.li2 { color: #fff; }
.ah-histoire .motsclés li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(-24px - var(--ah-mc-rond, 14px) / 2);
  top: calc((100% - 9px) / 2);
  transform: translateY(-50%);
  width: var(--ah-mc-rond, 14px);
  height: var(--ah-mc-rond, 14px);
  border-radius: 50%;
  background: var(--ah-ocre, #c8943a);
}
.ah-histoire .motsclés li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background-color: transparent;
  background-image: url("../img/separateur-logo-blanc.svg");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 4px;
  -webkit-mask-image: none;
  mask-image: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.ah-histoire .motsclés li:hover::after {
  transform: scaleX(1);
}

@media (max-width: 980px) {
  .ah-histoire {
    --ah-img-gap: 28px;
  }
  /* Annule tout décalage Divi : une image sous l’autre, même écart. */
  .ah-histoire .boutique,
  .ah-histoire .maison,
  .ah-histoire .resto,
  .ah-histoire .appartement,
  .ah-histoire .cabinetmedical,
  .ah-histoire .hotel,
  .ah-histoire .et_pb_image {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .ah-histoire .et_pb_column {
    margin-bottom: var(--ah-img-gap) !important;
  }
  .ah-histoire .et_pb_row {
    margin-bottom: var(--ah-img-gap) !important;
  }
  .ah-histoire .et_pb_column:last-child {
    margin-bottom: 0 !important;
  }
  .ah-histoire .boutique .et_pb_image_wrap,
  .ah-histoire .maison .et_pb_image_wrap,
  .ah-histoire .resto .et_pb_image_wrap,
  .ah-histoire .appartement .et_pb_image_wrap,
  .ah-histoire .cabinetmedical .et_pb_image_wrap,
  .ah-histoire .hotel .et_pb_image_wrap {
    transform: none !important;
  }
  .ah-histoire .boutique .et_pb_image_wrap img:hover,
  .ah-histoire .maison .et_pb_image_wrap img:hover,
  .ah-histoire .resto .et_pb_image_wrap img:hover,
  .ah-histoire .appartement .et_pb_image_wrap img:hover,
  .ah-histoire .cabinetmedical .et_pb_image_wrap img:hover,
  .ah-histoire .hotel .et_pb_image_wrap img:hover {
    transform: none;
  }
  .ah-histoire .et_pb_row:has(.role) {
    padding: 56px 24px !important;
  }
  .ah-histoire .role {
    max-width: 38em;
  }
  .ah-histoire .role,
  .ah-histoire .role .et_pb_text_inner,
  .ah-histoire .role .et_pb_text_inner p,
  .ah-histoire .role .ah-vague-mot {
    font-size: 18px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.03em;
    word-spacing: 0.22em;
  }
  .ah-histoire .role .ah-vague-mot {
    display: inline-block;
    opacity: 0.5;
    transform: none;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transition: opacity 1.15s ease;
  }
  .ah-histoire .role .ah-vague-mot.ah-vague-on,
  .ah-histoire .role .ah-vague-mot.ah-vague-lu {
    opacity: 1;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  .ah-histoire .role .ah-vague-mot.ah-vague-on {
    animation: ah-lecture-vague 0.7s ease both;
  }
  .ah-histoire .motsclés ul { gap: 12px 22px; margin-top: 28px; }
  .ah-histoire .motsclés li {
    font-size: 12px;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
  }
  .ah-histoire .motsclés li:not(:first-child)::before {
    left: -16px;
    font-size: 15px;
  }
  .ah-histoire .ah-puce {
    display: none !important;
    animation: none !important;
    transition: none !important;
  }
  .ah-histoire .transformer,
  .ah-histoire .evoluer,
  .ah-histoire .reveler,
  .ah-histoire .reinventer,
  .ah-histoire .imaginer {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .ah-histoire .motsclés li { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .ah-histoire * { transition: none !important; }
  .ah-histoire .ah-puce { transition: none !important; opacity: 1 !important; }
}

/* ==========================================================
   GRILLE — un seul bloc (maquette 26/08 21h32)
   ----------------------------------------------------------
   Le titre reste AU-DESSUS. La galerie est UN bloc de 3 colonnes.
   Paysages 3/2, portraits 2/3. Pas de 4ᵉ rangée : elle débordait.

     A : boutique, hôtel, paragraphe, cabinet médical
     B : cuisine, salon
     C : poème, restaurant
     (photo-7 retirée)
   ========================================================== */

.ah-histoire {
  --ah-galerie-bord: clamp(28px, 5.5vw, 88px);
}
/* Fond blanc, puis beige dès qu’Histoire arrive en haut.
   Plus de bascule au sticky du menu (trop tôt, trop sec). */
.et_pb_section.ah-histoire {
  --histoire-fond-repos: #ffffff;
  --histoire-fond-colle: var(--ah-beige, #f7f0ea);
  --histoire-fondu: .25s;
  background-color: var(--histoire-fond-repos) !important;
  transition: background-color var(--histoire-fondu) ease !important;
}
.et_pb_section.et_pb_sticky:has(.menu-exceptionnel)
  ~ .et_pb_section.ah-histoire {
  background-color: var(--histoire-fond-repos) !important;
}
body.ah-histoire-au-top .et_pb_section.ah-histoire {
  background-color: var(--histoire-fond-colle) !important;
}
@media (max-width: 980px) {
  .et_pb_section.ah-histoire,
  .ah-histoire .ah-hist-pin-scene {
    transition: none !important;
  }
  .et_pb_section.ah-histoire {
    overflow: visible !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .et_pb_section.ah-histoire { transition: none !important; }
}

/* Plus de pin : le poème suit le scroll de la page (comme mobile).
   La scène reste dans le flux — pas de sticky / fixed / rail. */
.ah-histoire .ah-hist-pin {
  position: relative;
  display: block;
  height: auto !important;
}
.ah-histoire .ah-hist-pin-scene {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  transform: none !important;
  z-index: 2;
  background-color: var(--histoire-fond-repos, #ffffff);
  transition: background-color var(--histoire-fondu, .25s) ease;
}
.et_pb_section.et_pb_sticky:has(.menu-exceptionnel)
  ~ .et_pb_section.ah-histoire .ah-hist-pin-scene {
  background-color: var(--histoire-fond-repos, #ffffff);
}
body.ah-histoire-au-top .ah-histoire .ah-hist-pin-scene {
  background-color: var(--histoire-fond-colle, #f7f0ea);
}
.ah-histoire .ah-hist-pin-scene > .et_pb_row {
  width: 100%;
}
.ah-histoire .ah-hist-pin-runway {
  display: none;
  width: 100%;
  height: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

.ah-histoire .ah-hist-grille {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: var(--ah-img-gap);
  padding: 0 var(--ah-galerie-bord);
  display: flex;
  flex-direction: column;
  gap: var(--ah-img-gap);
  height: auto;
  overflow: visible;
}
.ah-histoire .ah-hist-grille .et_pb_image_wrap {
  transform: none !important;
  position: relative;
  overflow: hidden;
}

.ah-histoire .ah-hg-haut {
  display: flex;
  gap: var(--ah-img-gap);
  align-items: stretch;
}
.ah-histoire .ah-hg-colA,
.ah-histoire .ah-hg-colB,
.ah-histoire .ah-hg-colC {
  display: flex;
  flex-direction: column;
  gap: var(--ah-img-gap);
  min-width: 0;
  min-height: 0;
}
.ah-histoire .ah-hg-colA { flex: 0 1 36%; }
.ah-histoire .ah-hg-colB { flex: 0 1 29%; }
.ah-histoire .ah-hg-colC { flex: 1 1 29%; }

.ah-histoire .ah-hist-grille .et_pb_image,
.ah-histoire .ah-hist-grille .et_pb_text {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100%;
}
.ah-histoire .ah-hist-grille .et_pb_image {
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
}
.ah-histoire .ah-hist-grille .et_pb_image > a {
  display: block;
  width: 100%;
  max-width: 100%;
}
.ah-histoire .ah-hist-grille .et_pb_image_wrap {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.ah-histoire .ah-format-portrait .et_pb_image_wrap {
  aspect-ratio: 2 / 3;
}
.ah-histoire .ah-hist-grille .et_pb_image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Dernière photo de A et de C : elles allongent pour fermer le bloc
   à la même hauteur que la colonne B. */
.ah-histoire .ah-hg-colA > .et_pb_image:last-child,
.ah-histoire .ah-hg-colC > .et_pb_image {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ah-histoire .ah-hg-colA > .et_pb_image:last-child > a,
.ah-histoire .ah-hg-colC > .et_pb_image > a,
.ah-histoire .ah-hg-colA > .et_pb_image:last-child .et_pb_image_wrap,
.ah-histoire .ah-hg-colC > .et_pb_image .et_pb_image_wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}

/* Poème : gouttière de 18px pour la puce, lignes calées à 1,45 em.
   La ligne active grandit de 5px sans déplacer la grille : overflow
   visible + taille sur l’inner seulement. */
.ah-histoire .ah-hg-liste {
  --ah-poeme-taille: clamp(15px, 1.15vw, 18px);
  position: relative;
  padding: 0 0 0 18px;
  background: transparent;
  flex: 0 0 auto;
  font-size: var(--ah-poeme-taille);
  line-height: 1.45;
  overflow: visible;
}
.ah-histoire .ah-hg-liste > .et_pb_module {
  display: flex;
  align-items: center;
  height: 1.45em !important;
  min-height: 0 !important;
  max-height: 1.45em !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 0;
}
.ah-histoire .ah-hg-liste > .et_pb_module.ah-ligne-active {
  z-index: 2;
}
.ah-histoire .ah-hg-liste > .et_pb_module + .et_pb_module {
  margin-top: 0 !important;
}
.ah-histoire .ah-hg-liste .et_pb_text_inner,
.ah-histoire .ah-hg-liste .et_pb_text_inner p,
.ah-histoire .ah-hg-liste .et_pb_text_inner * {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: 1.45em !important;
}
.ah-histoire .ah-hg-liste > .et_pb_module .et_pb_text_inner {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  transform-origin: 0 50%;
  transition:
    font-size .7s cubic-bezier(.22,1,.36,1),
    font-weight .7s cubic-bezier(.22,1,.36,1),
    color .7s cubic-bezier(.22,1,.36,1);
}
.ah-histoire .ah-hg-liste > .ah-ligne-active .et_pb_text_inner {
  font-size: calc(var(--ah-poeme-taille) + 5px) !important;
}
.ah-histoire .ah-hg-liste > .ah-ligne-active .et_pb_text_inner p,
.ah-histoire .ah-hg-liste > .ah-ligne-active .et_pb_text_inner * {
  font-size: inherit !important;
}

/* Paragraphe : plus de rectangle blanc. Les mots s'allument au scroll
   comme dans la section Approche (couleur terre, sans changer la taille
   — ça ferait bouger la grille). */
.ah-histoire .ah-hg-paragraphe {
  background: transparent;
  padding: 8px 8px 4px 0;
  max-width: 36ch;
  flex: 0 0 auto;
}
.ah-histoire .ah-hg-paragraphe .et_pb_text_inner {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.7;
}
@keyframes ah-lecture-vague {
  0% { transform: translateY(0); }
  35% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
.ah-histoire .ah-vague-mot {
  display: inline-block;
  opacity: 0.5;
  transform: none;
  transition: opacity 1.15s ease;
}
.ah-histoire .ah-vague-mot.ah-vague-on,
.ah-histoire .ah-vague-mot.ah-vague-lu {
  opacity: 1;
}
.ah-histoire .ah-vague-mot.ah-vague-on {
  animation: ah-lecture-vague 0.7s ease both;
}
.ah-histoire .role .ah-vague-mot.ah-vague-on,
.ah-histoire .role .ah-vague-mot.ah-vague-lu {
  opacity: 1;
}
.ah-histoire .role .ah-vague-mot.ah-vague-on {
  transform: none;
  animation: ah-lecture-vague 0.7s ease both;
}

/* Titre : reste dans sa rangée Divi, AU-DESSUS des photos, aligné
   sur le bord gauche de la galerie. */
.ah-histoire .et_pb_row:has(.titre) {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: var(--ah-img-gap) !important;
  padding-left: var(--ah-galerie-bord) !important;
  padding-right: var(--ah-galerie-bord) !important;
}

@media (max-width: 980px) {
  .ah-histoire .ah-hist-grille { height: auto; overflow: visible; }
  .ah-histoire .ah-hg-haut { flex-direction: column; }
  .ah-histoire .ah-hg-colA,
  .ah-histoire .ah-hg-colB,
  .ah-histoire .ah-hg-colC { flex: 1 1 auto; }
  .ah-histoire .ah-hg-colA > .et_pb_image:last-child,
  .ah-histoire .ah-hg-colC > .et_pb_image { flex: 0 0 auto; }
  .ah-histoire .ah-hg-colA > .et_pb_image:last-child .et_pb_image_wrap,
  .ah-histoire .ah-hg-colC > .et_pb_image .et_pb_image_wrap { aspect-ratio: 3 / 2; height: auto; }

  /* Air entre la barre menu et le titre. */
  .ah-histoire .et_pb_row:has(.titre) {
    padding-top: 32px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: center !important;
  }
  .ah-histoire .et_pb_row:has(.titre) .titre,
  .ah-histoire .et_pb_row:has(.titre) .titre *,
  .ah-histoire .ah-titre-l1,
  .ah-histoire .ah-titre-l1 h1,
  .ah-histoire .ah-titre-l1 h2,
  .ah-histoire .ah-titre-l1 h3,
  .ah-histoire .ah-titre-l1 p,
  .ah-histoire .ah-titre-l2,
  .ah-histoire .ah-titre-l2 h1,
  .ah-histoire .ah-titre-l2 h2,
  .ah-histoire .ah-titre-l2 h3,
  .ah-histoire .ah-titre-l2 p {
    text-align: center !important;
    font-size: clamp(28px, 8vw, 32px) !important;
    line-height: 1.15 !important;
  }
  .ah-histoire .ah-titre-l1::before {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 14px;
  }

  /* Liste centrée, hauteur libre + air entre les lignes (plus de chevauchement). */
  .ah-histoire .ah-hg-liste {
    --ah-poeme-taille: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: max-content;
    max-width: calc(100% - 48px);
    margin-left: auto;
    margin-right: auto;
    padding: 8px 0 16px;
    text-align: center;
  }
  .ah-histoire .ah-hg-liste > .et_pb_module {
    justify-content: center;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 0 !important;
  }
  .ah-histoire .ah-hg-liste > .et_pb_module + .et_pb_module {
    margin-top: 0 !important;
  }
  .ah-histoire .ah-hg-liste .et_pb_text_inner,
  .ah-histoire .ah-hg-liste .et_pb_text_inner p,
  .ah-histoire .ah-hg-liste .et_pb_text_inner * {
    line-height: 1.45 !important;
  }
  .ah-histoire .ah-hg-liste > .et_pb_module .et_pb_text_inner {
    transform-origin: 50% 50%;
    white-space: normal;
    text-align: center;
  }
  .ah-histoire .ah-hg-paragraphe {
    max-width: 36em;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 24px 8px;
    text-align: center;
  }
  .ah-histoire .ah-hg-paragraphe .et_pb_text_inner {
    font-size: 18px !important;
    text-align: center;
    color: var(--ah-encre, #3e2716);
  }
}