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

.ah-agence .ah-titre-l1::before {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--ah-terre, #b07030);
  margin-bottom: 18px;
}
.ah-agence .ah-titre-l1,
.ah-agence .ah-titre-l1 h1,
.ah-agence .ah-titre-l1 h2,
.ah-agence .ah-titre-l1 h3,
.ah-agence .ah-titre-l1 p {
  color: var(--ah-encre, #3e2716) !important;
}
.ah-agence .ah-titre-l2,
.ah-agence .ah-titre-l2 h1,
.ah-agence .ah-titre-l2 h2,
.ah-agence .ah-titre-l2 h3,
.ah-agence .ah-titre-l2 p {
  color: var(--ah-tan, #a87d43) !important;
}

.ah-agence {
  --ah-img-gap: 16px;
  --ah-mc-rond: 8px;
  --ah-chocolat: #4c250a;
  --ah-ocre: #c8943a;
  --ah-terre: #b07030;
  --ah-encre: #3e2716;
  --ah-tan: #a87d43;
  /* Taille de « comment souhaitez-vous vivre ce lieu ? » — changer ICI. */
  --ah-citation-taille: 30px;
}
.et_pb_section.ah-agence {
  padding-bottom: 0 !important;
}
.ah-agence .photoalexandra {
  margin-top: 0 !important;
}
.ah-agence .et_pb_row {
  margin-bottom: var(--ah-img-gap) !important;
}
.ah-agence .et_pb_row:has(.et_pb_image) {
  margin-bottom: var(--ah-img-gap) !important;
}
.ah-agence .et_pb_row:has(.photobureau),
.ah-agence .et_pb_row:has(.materiautheque) {
  display: flex !important;
  align-items: flex-start;
  gap: var(--ah-img-gap) !important;
}
.ah-agence .et_pb_row:has(.photobureau) > .et_pb_column,
.ah-agence .et_pb_row:has(.materiautheque) > .et_pb_column {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
}
.ah-agence .photoalexandra .et_pb_image_wrap,
.ah-agence .photobureau .et_pb_image_wrap,
.ah-agence .materiautheque .et_pb_image_wrap,
.ah-agence .equipe .et_pb_image_wrap {
  display: block;
  position: relative;
  overflow: hidden;
}
.ah-agence .photoalexandra .et_pb_image_wrap img,
.ah-agence .photobureau .et_pb_image_wrap img,
.ah-agence .materiautheque .et_pb_image_wrap img,
.ah-agence .equipe .et_pb_image_wrap img {
  transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}
.ah-agence .photoalexandra .et_pb_image_wrap img:hover,
.ah-agence .photobureau .et_pb_image_wrap img:hover,
.ah-agence .materiautheque .et_pb_image_wrap img:hover,
.ah-agence .equipe .et_pb_image_wrap img:hover {
  transform: scale(1.035);
}

.ah-agence .ah-legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 14px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #fff;
  pointer-events: none;
}
/* Photos Agence : légendes masquées, sauf le portrait (.photoalexandra). */
.ah-agence .et_pb_image:not(.photoalexandra) .ah-legende {
  display: none;
}

.ah-agence .et_pb_row:has(.projetreussimotsclés) {
  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-agence .projetreussimotsclés,
.ah-agence .projetreussimotsclés * {
  color: #fff !important;
}
.ah-agence .projetreussimotsclés .et_pb_text_inner > p {
  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-agence .projetreussimotsclés .et_pb_text_inner > p,
.ah-agence .projetreussimotsclés .et_pb_text_inner > p * {
  font-weight: 300 !important;
}
.ah-agence .et_pb_row:has(.projetreussimotsclés) li {
  font-weight: 500 !important;
}
.ah-agence .projetreussimotsclés { text-align: center; }
.ah-agence .projetreussimotsclés ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 48px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.ah-agence .projetreussimotsclés li {
  position: relative;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  padding-bottom: 9px;
}
.ah-agence .projetreussimotsclés li p,
.ah-agence .projetreussimotsclés li p * {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  word-spacing: normal !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: inherit;
}
.ah-agence .projetreussimotsclés li:not(:first-child)::before {
  content: "" !important;
  position: absolute;
  left: calc(-24px - var(--ah-mc-rond, 8px) / 2);
  top: calc((100% - 9px) / 2);
  transform: translateY(-50%);
  width: var(--ah-mc-rond, 8px);
  height: var(--ah-mc-rond, 8px);
  border-radius: 50%;
  background: var(--ah-ocre, #c8943a) !important;
  opacity: 1 !important;
  font-size: 0 !important;
  line-height: 1;
}
.ah-agence .projetreussimotsclé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-agence .projetreussimotsclés li:hover::after {
  transform: scaleX(1);
}

@media (max-width: 980px) {
  .ah-agence { --ah-img-gap: 14px; }
  .et_pb_section.ah-agence {
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .ah-agence > .et_pb_row,
  .ah-agence .et_pb_row {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .ah-agence .et_pb_row:has(.titre) {
    text-align: center !important;
  }
  .ah-agence .ah-titre-l1,
  .ah-agence .ah-titre-l1 h1,
  .ah-agence .ah-titre-l1 h2,
  .ah-agence .ah-titre-l1 h3,
  .ah-agence .ah-titre-l1 p,
  .ah-agence .ah-titre-l2,
  .ah-agence .ah-titre-l2 h1,
  .ah-agence .ah-titre-l2 h2,
  .ah-agence .ah-titre-l2 h3,
  .ah-agence .ah-titre-l2 p {
    text-align: center !important;
    font-size: clamp(28px, 8vw, 32px) !important;
    line-height: 1.15 !important;
  }
  .ah-agence .ah-titre-l1::before {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 14px;
  }
  .ah-agence .photoalexandra,
  .ah-agence .photobureau,
  .ah-agence .materiautheque,
  .ah-agence .equipe,
  .ah-agence .et_pb_image {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .ah-agence .et_pb_column {
    margin-bottom: var(--ah-img-gap) !important;
  }
  .ah-agence .et_pb_row {
    margin-bottom: var(--ah-img-gap) !important;
  }
  .ah-agence .et_pb_column:last-child {
    margin-bottom: 0 !important;
  }
  .ah-agence .photoalexandra .et_pb_image_wrap,
  .ah-agence .photobureau .et_pb_image_wrap,
  .ah-agence .materiautheque .et_pb_image_wrap,
  .ah-agence .equipe .et_pb_image_wrap,
  .ah-agence .et_pb_image {
    transform: none !important;
  }
  .ah-agence .photoalexandra .et_pb_image_wrap img:hover,
  .ah-agence .photobureau .et_pb_image_wrap img:hover,
  .ah-agence .materiautheque .et_pb_image_wrap img:hover,
  .ah-agence .equipe .et_pb_image_wrap img:hover {
    transform: none;
  }
  .ah-agence .et_pb_row:has(.projetreussimotsclés) {
    padding: 56px 24px !important;
  }
  .ah-agence .projetreussimotsclés .et_pb_text_inner > p,
  .ah-agence .projetreussimotsclés .et_pb_text_inner > p *,
  .ah-agence .projetreussimotsclés .et_pb_text_inner > p .ah-vague-mot {
    font-size: 18px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.03em;
    word-spacing: 0.22em;
  }
  .ah-agence .projetreussimotsclés .ah-vague-mot {
    display: inline-block;
  }
  .ah-agence .projetreussimotsclés ul { gap: 12px 22px; margin-top: 28px; }
  .ah-agence .projetreussimotsclés li {
    font-size: 12px;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
  }
  .ah-agence .projetreussimotsclés li:not(:first-child)::before {
    left: -16px;
    font-size: 15px;
  }
}

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

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

/* Vague de lecture, même geste que le paragraphe du CTA. */
@keyframes ah-lecture-vague {
  0% { transform: translateY(0); }
  35% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
.ah-agence .ah-vague-mot {
  display: inline-block;
  opacity: 0.5;
  transform: none;
  transition: opacity 1.15s ease;
}
.ah-agence .ah-vague-mot.ah-vague-on,
.ah-agence .ah-vague-mot.ah-vague-lu {
  opacity: 1;
}
.ah-agence .ah-vague-mot.ah-vague-on {
  animation: ah-lecture-vague 0.7s ease both;
}
.ah-agence .projetreussimotsclés .ah-vague-mot {
  opacity: 1;
  animation: none;
}
.ah-agence .projetreussimotsclés .ah-vague-mot.ah-vague-on,
.ah-agence .projetreussimotsclés .ah-vague-mot.ah-vague-lu {
  color: #fff;
}
.ah-agence .projetreussimotsclés .ah-vague-mot.ah-vague-on {
  transform: none;
  animation: ah-lecture-vague 0.7s ease both;
}

/* Citation : 30px, peut revenir à la ligne. */
.ah-agence .ah-ag-citation,
.ah-agence .vivrelieu {
  display: block;
  white-space: normal;
  max-width: 100%;
  line-height: 1.2;
}
.ah-agence .ah-ag-citation,
.ah-agence .ah-ag-citation .et_pb_text_inner,
.ah-agence .ah-ag-citation p,
.ah-agence .ah-ag-citation *,
.ah-agence .vivrelieu,
.ah-agence .vivrelieu .et_pb_text_inner,
.ah-agence .vivrelieu p,
.ah-agence .vivrelieu * {
  color: var(--ah-encre, #3e2716) !important;
  font-weight: 600 !important;
  font-size: var(--ah-citation-taille) !important;
}
.ah-agence.ah-js .ah-ag-citation,
.ah-agence.ah-js .ah-ag-citation .et_pb_text_inner {
  opacity: 0 !important;
  transform: translateY(.35em);
  transition: opacity 1.3s ease, transform 1.4s cubic-bezier(.22,1,.36,1);
}
.ah-agence.ah-js .ah-ag-citation.ah-in,
.ah-agence.ah-js .ah-ag-citation.ah-in .et_pb_text_inner,
.ah-agence:not(.ah-js) .ah-ag-citation {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 980px) {
  .ah-agence .ah-ag-citation,
  .ah-agence .vivrelieu { white-space: normal; }

  .ah-agence {
    --ah-citation-taille: 38px;
  }
  .ah-agence .ah-ag-citation,
  .ah-agence .ah-ag-citation .et_pb_text_inner,
  .ah-agence .ah-ag-citation p,
  .ah-agence .ah-ag-citation *,
  .ah-agence .vivrelieu,
  .ah-agence .vivrelieu .et_pb_text_inner,
  .ah-agence .vivrelieu p,
  .ah-agence .vivrelieu * {
    text-align: center !important;
    font-size: 38px !important;
    line-height: 1.18 !important;
  }

  /* Phrase au-dessus + paragraphe : centrés, taille inchangée. */
  .ah-agence .ah-ag-textes,
  .ah-agence .ah-ag-textes .et_pb_text,
  .ah-agence .ah-ag-textes .et_pb_text_inner,
  .ah-agence .ah-ag-textes p,
  .ah-agence .question,
  .ah-agence .question .et_pb_text_inner,
  .ah-agence .question p,
  .ah-agence .question *,
  .ah-agence .txtvivrelieu,
  .ah-agence .txtvivrelieu .et_pb_text_inner,
  .ah-agence .txtvivrelieu p,
  .ah-agence .txtvivrelieu * {
    text-align: center !important;
  }

  /* Disque vert « agence » : sur le carrousel, AU-DESSUS du voile. */
  a.ah-agence-bouton-mobile,
  body.ah-histoire-au-top a.ah-agence-bouton-mobile,
  body.ah-hero-entre-ok a.ah-agence-bouton-mobile {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 20 !important;
    justify-content: center;
    align-items: center;
    width: 112px !important;
    height: 112px !important;
    margin: auto !important;
  }
  a.ah-agence-bouton-mobile .ah-curseur,
  a.ah-agence-bouton-mobile .ah-curseur.est-ouvert {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 21 !important;
  }
  a.ah-agence-bouton-mobile .ah-curseur .ah-curseur__anneau,
  a.ah-agence-bouton-mobile .ah-curseur .ah-curseur__anneau text,
  a.ah-agence-bouton-mobile .ah-curseur .ah-curseur__anneau textPath {
    fill: #ffffff !important;
    animation: none !important;
  }
  a.ah-agence-bouton-mobile .ah-agence-spin {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    pointer-events: none;
    transform-origin: 50% 50%;
  }
  a.ah-agence-bouton-mobile .ah-agence-spin .ah-curseur__anneau {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    animation: none !important;
  }

  /* Photo Alexandra : pleine largeur, air avant le texte. */
  .ah-agence .ah-ag-alex {
    width: 100vw;
    max-width: 100vw;
    margin: 8px calc(50% - 50vw) 40px;
    padding: 0 !important;
  }
  .ah-agence .ah-ag-alex .photoalexandra,
  .ah-agence .ah-ag-alex .et_pb_image,
  .ah-agence .ah-ag-alex .et_pb_image > a,
  .ah-agence .ah-ag-alex .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ah-agence .ah-ag-alex .et_pb_image_wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    height: auto !important;
  }
  .ah-agence .ah-ag-alex img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center top;
    transform: none !important;
  }

  /* Textes : après Alexandra, avec marges. */
  .ah-agence .ah-ag-textes {
    padding: 8px 24px 20px !important;
  }
  .ah-agence .ah-ag-textes .et_pb_text,
  .ah-agence .ah-ag-textes .et_pb_module {
    margin: 0 0 16px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  .ah-agence .ah-ag-textes .et_pb_module:last-child {
    margin-bottom: 0 !important;
  }

  /* 3 photos : défilement horizontal pleine largeur, lié au scroll.
     --ah-ag-defile-par-slide : portion de viewport par image (plus petit = plus vite). */
  .ah-agence .ah-ag-defile {
    --ah-ag-defile-n: 3;
    --ah-ag-defile-par-slide: 0.32;
    --ah-ag-defile-h: calc(100svh - var(--ah-menu-barre-h, 78px));
    display: block;
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 0 !important;
    height: calc(
      var(--ah-ag-defile-h) *
      (1 + (var(--ah-ag-defile-n) - 1) * var(--ah-ag-defile-par-slide))
    );
    z-index: 2;
  }
  .ah-agence .ah-ag-defile-scene {
    position: sticky;
    top: var(--ah-menu-barre-h, 78px);
    height: var(--ah-ag-defile-h);
    overflow: hidden;
    background: var(--ah-beige, #f7f0ea);
    isolation: isolate;
  }
  .ah-agence .ah-ag-defile-rail {
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 0;
    height: 100%;
    width: calc(var(--ah-ag-defile-n) * 100vw);
    will-change: transform;
  }
  .ah-agence .ah-ag-defile-rail::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(28, 18, 10, 0.50);
  }
  .ah-agence .ah-ag-defile-slide {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .ah-agence .ah-ag-defile-slide .et_pb_image,
  .ah-agence .ah-ag-defile-slide .et_pb_image > a,
  .ah-agence .ah-ag-defile-slide .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ah-agence .ah-ag-defile-slide .et_pb_image_wrap img,
  .ah-agence .ah-ag-defile-slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    transform: none !important;
  }
  .ah-agence .ah-ag-defile--statique {
    height: auto !important;
  }
  .ah-agence .ah-ag-defile--statique .ah-ag-defile-scene {
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }
  .ah-agence .ah-ag-defile--statique .ah-ag-defile-rail {
    flex-direction: column;
    width: 100vw !important;
    transform: none !important;
  }
  .ah-agence .ah-ag-defile--statique .ah-ag-defile-slide {
    width: 100vw;
    height: 78vw;
    min-height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ah-agence.ah-js .ah-ag-citation {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Ordinateur : le mot tourne sur le fond de la page (disque masqué).
   Espresso sur beige, crème dès que le disque touche le bandeau chocolat. */
.ah-agence-spin {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.ah-agence-spin .ah-curseur__anneau {
  animation: none !important;
}
.ah-agence-curseur .ah-curseur__anneau text,
.ah-agence-curseur .ah-curseur__anneau textPath,
a.ah-agence-bouton-mobile .ah-curseur .ah-curseur__anneau text,
a.ah-agence-bouton-mobile .ah-curseur .ah-curseur__anneau textPath {
  font-size: 9.1px !important;
  letter-spacing: 0.35px !important;
}
@media (min-width: 981px) {
  .ah-agence-curseur.est-sur-bandeau .ah-curseur__anneau,
  .ah-agence-curseur.est-sur-bandeau .ah-curseur__anneau text,
  .ah-agence-curseur.est-sur-bandeau .ah-curseur__anneau textPath {
    fill: #eadecf !important;
  }
  /* Sur une photo, le mot passe en blanc franc : les images sont trop
     sombres pour le chocolat. Prioritaire sur le bandeau. */
  .ah-agence-curseur.est-sur-photo .ah-curseur__anneau,
  .ah-agence-curseur.est-sur-photo .ah-curseur__anneau text,
  .ah-agence-curseur.est-sur-photo .ah-curseur__anneau textPath {
    fill: #ffffff !important;
  }
}

/* ==================================================================
   Vague de lecture — bandeau chocolat (.projetreussimotsclés)
   Même mécanisme qu’Histoire (mots, bande 36–62 vh).
   Crème au repos, blanc au passage (comme .role), pas terre.
   Les légendes photo (.ah-legende) ne sont pas concernées.
================================================================== */
.ah-agence .projetreussimotsclés .et_pb_text_inner > p .ah-vague-mot {
  display: inline-block;
  opacity: 0.5;
  transform: none;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: opacity 1.15s ease;
}
.ah-agence .projetreussimotsclés .et_pb_text_inner > p .ah-vague-mot.ah-vague-on,
.ah-agence .projetreussimotsclés .et_pb_text_inner > p .ah-vague-mot.ah-vague-lu {
  opacity: 1;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.ah-agence .projetreussimotsclés .et_pb_text_inner > p .ah-vague-mot.ah-vague-on {
  animation: ah-lecture-vague 0.7s ease both;
}

@media (max-width: 980px) {
  .ah-agence .projetreussimotsclés .et_pb_text_inner > p .ah-vague-mot {
    display: inline-block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ah-agence .projetreussimotsclés .et_pb_text_inner > p .ah-vague-mot.ah-vague-on {
    transform: none;
    animation: none;
  }
}