/* ===== Zone d'intervention — habillage =====================================
   Même dessin que la maquette, mais la section occupe toute la largeur de
   sa colonne : il n'y a plus d'avis sur le côté. Deux blocs côte à côte,
   le texte à gauche, la liste des villes à droite, puis un seul bloc
   empilé sur mobile. --- */

body #page-container .et_pb_section.ah-zone,
body .et_pb_section.ah-zone,
.et_pb_section.ah-zone {
  --zn-chocolat: var(--ah-chocolat, #4c250a);
  --zn-ocre: #c8943a;
  --zn-texte: #3e2716;
  --zn-doux: rgba(62, 39, 22, 0.62);
  --zn-air-x: var(--ah-marge-site, max(4vw, calc((100vw - 1380px) / 2)));
  --zn-air-y: clamp(56px, 6.4vw, 88px);
  /* Divi sert ce h2 à 60 px via sa règle générique. On reste dans la
     fourchette des autres titres de section (52 / 44 px chez Histoire). */
  --zn-titre: clamp(28px, 3vw, 44px);
  --zn-texte-taille: 16px;
  --zn-filet: 3px;   /* hauteur des perles sous les villes */

  box-sizing: border-box;
  margin: 0 !important;
  padding: var(--zn-air-y) var(--zn-air-x) !important;
  text-align: left !important;
  background-color: #ffffff !important;
  overflow: visible !important;
  min-height: 0 !important;
  border: 0 !important;
}

.et_pb_section.ah-zone .et_pb_row,
.et_pb_section.ah-zone .et_pb_column,
.et_pb_section.ah-zone .et_pb_text,
.et_pb_section.ah-zone .et_pb_code,
.et_pb_section.ah-zone .et_pb_code_inner,
.et_pb_section.ah-zone .et_pb_text_inner {
  overflow: visible !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Le texte prend la plus grande part, la liste des villes reste à droite
   sans jamais descendre sous sa largeur lisible. */
.et_pb_section.ah-zone .et_pb_column {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  align-items: start;
  column-gap: clamp(40px, 6vw, 110px);
}

/* Les deux lignes du titre prennent toute la largeur : dans la colonne
   de gauche, « sur mesure » et « basée à Lyon » tombaient chacune
   sur leur ligne. */
body #page-container .et_pb_section.ah-zone .ah-zone_titre {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  margin: 0 0 clamp(72px, 8vw, 120px) !important;
  text-align: left !important;
}
body #page-container .et_pb_section.ah-zone .ah-zone_texte {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  text-align: left !important;
}
body #page-container .et_pb_section.ah-zone .ah-zone_villes,
body #page-container .et_pb_section.ah-zone .et_pb_text:not(.ah-zone_titre):not(.ah-zone_texte),
body #page-container .et_pb_section.ah-zone .et_pb_code {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  /* Le bloc des villes se centre sur la hauteur du titre et du texte,
     il ne se cale plus en haut. */
  align-self: center;
  text-align: left !important;
}

/* --- Titre : exactement comme Histoire, Agence, Approche, Expertises.
   Rond terre au-dessus, ligne 1 encre, ligne 2 tan, et on ne touche PAS
   à la mise en forme Divi (police, taille, graisse) sur ordinateur. --- */
.et_pb_section.ah-zone .ah-zone_titre::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  margin: 0 0 18px;
  border-radius: 50%;
  background: var(--ah-terre, #b07030);
}

body #page-container .et_pb_section.ah-zone .ah-zone_titre,
body #page-container .et_pb_section.ah-zone .ah-zone_titre h1,
body #page-container .et_pb_section.ah-zone .ah-zone_titre h2,
body #page-container .et_pb_section.ah-zone .ah-zone_titre p,
body #page-container .et_pb_section.ah-zone .ah-zone_titre .ah-zone__l1,
body #page-container .et_pb_section.ah-zone .ah-zone_titre .ah-zone__l2 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ah-encre, #3e2716) !important;
  font-size: var(--zn-titre) !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  text-align: left !important;
  text-transform: none !important;
}
body #page-container .et_pb_section.ah-zone .ah-zone_titre .ah-zone__l1,
body #page-container .et_pb_section.ah-zone .ah-zone_titre .ah-zone__l2 {
  display: block !important;
  white-space: nowrap;
}
body #page-container .et_pb_section.ah-zone .ah-zone_titre .ah-zone__l2,
body #page-container .et_pb_section.ah-zone .ah-zone_titre p + p {
  color: var(--ah-tan, #a87d43) !important;
}

/* --- Paragraphes : les villes et les types de lieux ressortent en ocre
   gras, et le dernier paragraphe est entièrement en ocre gras. --- */
body #page-container .et_pb_section.ah-zone .ah-zone_texte p {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 46em;
  color: var(--zn-texte) !important;
  font-size: var(--zn-texte-taille) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  text-align: left !important;
  text-transform: none !important;
}
body #page-container .et_pb_section.ah-zone .ah-zone_texte p + p {
  margin-top: 1.15em !important;
}
body #page-container .et_pb_section.ah-zone .ah-zone_texte strong,
body #page-container .et_pb_section.ah-zone .ah-zone_texte b,
body #page-container .et_pb_section.ah-zone .ah-zone_texte .ah-zone__fort,
body #page-container .et_pb_section.ah-zone .ah-zone_texte p.ah-zone__p-fort {
  color: var(--zn-ocre) !important;
  font-weight: 400 !important;
  background: none !important;
  -webkit-text-fill-color: var(--zn-ocre) !important;
}

/* --- Liste des villes : intitulé, puis deux colonnes de villes
   soulignées par la frise perlée du site. --- */
.et_pb_section.ah-zone .ah-zone_villes::before,
.et_pb_section.ah-zone .et_pb_text:not(.ah-zone_titre):not(.ah-zone_texte)::before {
  content: "Zones d’intervention";
  display: block;
  margin: 0 0 18px;
  color: var(--zn-doux);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.et_pb_section.ah-zone .ah-zone__cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.et_pb_section.ah-zone .ah-zone__city {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 12px 0;
  color: #a87d43;
  font-size: var(--zn-texte-taille);
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
}
/* Lyon, le siège : un peu plus appuyé que les autres. */
.et_pb_section.ah-zone .ah-zone__nom {
  min-width: 0;
}
.et_pb_section.ah-zone .ah-zone__city--siege {
  font-weight: 700;
  color: #a87d43;
}
.et_pb_section.ah-zone .ah-zone__city--siege .ah-zone__puce {
  background: var(--zn-chocolat);
}
.et_pb_section.ah-zone .ah-zone__puce {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zn-ocre);
}
/* Frise perlée sous chaque ville, plus une au-dessus de la première
   ligne : c'est le même motif que les mots-clés d'Histoire.
   Elle se dessine de gauche à droite quand la ville arrive dans l'écran
   (classe ah-vu posée par le JS), et au survol. */
.et_pb_section.ah-zone .ah-zone__city::after,
.et_pb_section.ah-zone .ah-zone__city:nth-child(1)::before,
.et_pb_section.ah-zone .ah-zone__city:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background-color: transparent;
  background-image: url("../img/separateur-logo-ocre-isotype.svg");
  background-repeat: repeat-x;
  background-position: var(--zn-glisse, 0px) center;
  background-size: auto 4px;
  -webkit-mask-image: none;
          mask-image: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1),
              background-color .35s ease;
}
.et_pb_section.ah-zone .ah-zone__city::after { bottom: 0; }
.et_pb_section.ah-zone .ah-zone__city:nth-child(1)::before,
.et_pb_section.ah-zone .ah-zone__city:nth-child(2)::before { top: 0; }
/* La colonne de droite se dessine juste après celle de gauche : chaque
   rangée se trace d'un côté puis de l'autre. */
.et_pb_section.ah-zone .ah-zone__city:nth-child(2n)::after,
.et_pb_section.ah-zone .ah-zone__city:nth-child(2n)::before {
  transition-delay: .09s;
}
.et_pb_section.ah-zone .ah-zone__city.ah-vu::after,
.et_pb_section.ah-zone .ah-zone__city.ah-vu:nth-child(1)::before,
.et_pb_section.ah-zone .ah-zone__city.ah-vu:nth-child(2)::before,
.et_pb_section.ah-zone .ah-zone__city:hover::after,
.et_pb_section.ah-zone .ah-zone__city:hover:nth-child(1)::before,
.et_pb_section.ah-zone .ah-zone__city:hover:nth-child(2)::before {
  transform: scaleX(1);
}

/* Survol : la ville et sa frise passent au chocolat de la charte. */
.et_pb_section.ah-zone .ah-zone__city,
.et_pb_section.ah-zone .ah-zone__nom {
  transition: color .8s ease, -webkit-text-fill-color .8s ease;
}
.et_pb_section.ah-zone .ah-zone__puce {
  transition: background-color .35s ease, transform .35s ease;
}
body #page-container .et_pb_section.ah-zone .ah-zone__city:hover,
body #page-container .et_pb_section.ah-zone .ah-zone__city:hover .ah-zone__nom {
  color: var(--zn-chocolat) !important;
  -webkit-text-fill-color: var(--zn-chocolat) !important;
}
.et_pb_section.ah-zone .ah-zone__city:hover::after,
.et_pb_section.ah-zone .ah-zone__city:hover:nth-child(1)::before,
.et_pb_section.ah-zone .ah-zone__city:hover:nth-child(2)::before {
  background-color: var(--zn-chocolat);
  transition-delay: 0s;
}
.et_pb_section.ah-zone .ah-zone__city:hover .ah-zone__puce {
  background: var(--zn-chocolat);
  transform: scale(1.25);
}

/* Repli si le JS n'a pas tourné : les villes restent des paragraphes,
   avec la même puce et la même frise perlée que la liste. */
body #page-container .et_pb_section.ah-zone .ah-zone_villes p {
  position: relative;
  margin: 0 !important;
  padding: 12px 0 12px 18px !important;
  color: var(--zn-texte) !important;
  font-size: var(--zn-texte-taille) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  text-transform: none !important;
}
body #page-container .et_pb_section.ah-zone .ah-zone_villes p::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(12px + 0.45em);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zn-ocre);
}
body #page-container .et_pb_section.ah-zone .ah-zone_villes p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background-color: transparent;
  background-image: url("../img/separateur-logo-ocre-isotype.svg");
  background-repeat: repeat-x;
  background-position: var(--zn-glisse, 0px) center;
  background-size: auto 4px;
  -webkit-mask-image: none;
          mask-image: none;
}

@media (max-width: 980px) {
  .et_pb_section.ah-zone {
    --zn-air-x: 32px;
    --zn-air-y: 56px;
    --zn-titre: clamp(28px, 8vw, 32px);
    --zn-texte-taille: 18px;
  }
  .et_pb_section.ah-zone .ah-zone_titre::before {
    margin: 0 auto 14px;
  }
  /* Mobile : même mise en forme que les autres titres de section. */
  body #page-container .et_pb_section.ah-zone .ah-zone_titre,
  body #page-container .et_pb_section.ah-zone .ah-zone_titre h1,
  body #page-container .et_pb_section.ah-zone .ah-zone_titre h2,
  body #page-container .et_pb_section.ah-zone .ah-zone_titre p,
  body #page-container .et_pb_section.ah-zone .ah-zone_titre .ah-zone__l1,
  body #page-container .et_pb_section.ah-zone .ah-zone_titre .ah-zone__l2 {
    text-align: center !important;
    font-size: var(--zn-titre) !important;
    line-height: 1.15 !important;
    white-space: normal;
  }
  /* Un seul bloc : titre, texte, puis les villes. */
  .et_pb_section.ah-zone .et_pb_column {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  body #page-container .et_pb_section.ah-zone .ah-zone_titre,
  body #page-container .et_pb_section.ah-zone .ah-zone_texte,
  body #page-container .et_pb_section.ah-zone .ah-zone_villes,
  body #page-container .et_pb_section.ah-zone .et_pb_text:not(.ah-zone_titre):not(.ah-zone_texte),
  body #page-container .et_pb_section.ah-zone .et_pb_code {
    grid-column: 1;
    grid-row: auto;
  }
  body #page-container .et_pb_section.ah-zone .ah-zone_texte p {
    max-width: none;
  }
  /* « Aix-en-Provence » ne tient pas sur une demi-largeur de téléphone :
     une seule colonne, la frise court sur toute la largeur. */
  .et_pb_section.ah-zone .ah-zone__cities {
    grid-template-columns: 1fr;
  }
  .et_pb_section.ah-zone .ah-zone__city:nth-child(2)::before {
    content: none;
  }
}

@media (max-width: 767px) {
  .et_pb_section.ah-zone {
    --zn-air-x: 20px;
    --zn-air-y: 48px;
    --zn-titre: clamp(26px, 8vw, 32px);
  }
  .et_pb_section.ah-zone .ah-zone_titre::before { margin: 0 auto 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .et_pb_section.ah-zone .ah-zone__city,
  .et_pb_section.ah-zone .ah-zone__city::after,
  .et_pb_section.ah-zone .ah-zone__city::before,
  .et_pb_section.ah-zone .ah-zone__puce {
    transition: none !important;
  }
  .et_pb_section.ah-zone .ah-zone__city::after,
  .et_pb_section.ah-zone .ah-zone__city:nth-child(1)::before,
  .et_pb_section.ah-zone .ah-zone__city:nth-child(2)::before {
    transform: scaleX(1) !important;
  }
}

/* Au repos le nom est terre claire. Au scroll il devient espresso,
   assez contrasté pour que le passage se lise. */
body #page-container .et_pb_section.ah-zone .ah-zone__city,
body #page-container .et_pb_section.ah-zone .ah-zone__city .ah-zone__nom {
  color: #a87d43 !important;
  -webkit-text-fill-color: #a87d43 !important;
}
body #page-container .et_pb_section.ah-zone .ah-zone__city.ah-lue,
body #page-container .et_pb_section.ah-zone .ah-zone__city.ah-lue .ah-zone__nom {
  color: var(--ah-espresso, #2d1d12) !important;
  -webkit-text-fill-color: var(--ah-espresso, #2d1d12) !important;
  transition-delay: calc(var(--zn-i, 0) * 90ms);
}
body #page-container .et_pb_section.ah-zone .ah-zone__city.ah-lue .ah-zone__puce {
  background: var(--ah-espresso, #2d1d12);
  transition-delay: calc(var(--zn-i, 0) * 90ms);
}

/* Le module Code de la Zone contient encore le CTA collé par erreur :
   on le masque. Les villes restent dans le module Texte. */
.et_pb_section.ah-zone > .et_pb_row .et_pb_code,
.et_pb_section.ah-zone .et_pb_code.et_pb_module {
  display: none !important;
}