/* ===================================================================
   PARTITION DE L'ARRIVÉE — source unique des durées.
   Le CSS (repli sans JS) et hero-entre-v8.js lisent ces mêmes valeurs :
   impossible que les deux chemins jouent un rythme différent.

     0,45 s  photo seule, puis le logo monte et paraît   (0,85 s)
     1,15 s  le texte se pose, en fondu pur              (0,90 s)
             — 4 lignes décalées de 0,12 s, la dernière finit à 2,41 s
     2,40 s  le curseur est autorisé, une fois le texte en place

   Pour resserrer ou étirer l'arrivée, ne toucher qu'ici.
=================================================================== */
:root {
  --ah-e-depart:         .45s;   /* la photo reste seule ce temps-là   */
  --ah-e-logo-duree:     .85s;
  --ah-e-texte-debut:   1.15s;   /* chevauche la fin du logo : un seul geste */
  --ah-e-texte-duree:    .90s;
  --ah-e-pas:            .12s;   /* décalage d'une ligne de texte à l'autre */
  --ah-e-curseur-debut: 2.40s;
  --ah-e-sortie: cubic-bezier(.22, 1, .36, 1);
}

/* Avec JS, hero-entre-v8 mène seul la danse : on éteint les keyframes
   de repli avant même le premier rendu (le script est chargé en <head>),
   sinon les deux timelines se superposent. */
html.ah-js #ah-logo,
html.ah-js .ah-hero-texte__el {
  animation: none !important;
}

/* Ne jamais laisser .ah-anim masquer <html> (écran blanc mobile). */
html.ah-anim {
  opacity: 1 !important;
  transform: none !important;
}
/* Le module Code Divi porte la classe « ah-logo » (réglage du module).
   Sans ça, tout le hero (texte + bouton) prend position:fixed et
   opacity:0 — la cascade photo → logo → texte est invisible. */
.et_pb_module.ah-logo,
.et_pb_code.ah-logo {
  position: static !important;
  top: auto !important;
  left: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  pointer-events: auto !important;
  z-index: auto !important;
  width: auto !important;
  height: auto !important;
  line-height: inherit !important;
  margin: 0 !important;
}
/* overflow-x:hidden + overflow-y:visible se calcule en auto (spec) :
   ça piège le sticky et clippe. clip sur X ne crée pas de scrollport. */
#page-container,
#et-main-area,
.et-l,
.et_builder_inner_content {
  overflow-x: clip;
  overflow-y: visible;
}

/* ============ 1. LOGO ============ */
#ah-logo {
  --ah-logo-largeur: 186px;   /* arrivée −25 % (248 → 186) */
  --ah-logo-haut:     76px;   /* 36 + 40 px plus bas sur la photo */
  --ah-logo-clair:  #ffffff;
  --ah-logo-fonce:  #4c250a;   /* chocolat de la charte */

  --ah-logo-rapport:     0.9008;    /* 135.93 / 150.9, logo empilé */
  --ah-logo-rapport-fin: 0.45592;   /* logo chocolat horizontal, au menu */
  --ah-logo-rapport-duo: 0.31959;   /* 128.46 / 401.95, sigle + mot, mobile */

  /* Siège du lockup chocolat dans la barre (−20 % encore : 186 → 149). */
  --ah-logo-largeur-fin: 119px;
  --ah-logo-haut-fin:     12px;

  position: fixed;
  top: var(--ah-logo-haut);
  left: 50%;
  z-index: 999999;
  line-height: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, 18px, 0);
  animation: ah-entre-logo var(--ah-e-logo-duree) var(--ah-e-sortie)
             var(--ah-e-depart) both;
  /* Mêmes durées que la keyframe : le chemin JS (.is-entre) et le repli
     CSS donnent exactement le même mouvement. */
  transition: top 1.15s cubic-bezier(.16,.84,.44,1),
              opacity var(--ah-e-logo-duree) var(--ah-e-sortie),
              transform var(--ah-e-logo-duree) var(--ah-e-sortie);
}
body > #ah-logo {
  position: fixed !important;
}
#ah-logo.is-entre {
  animation: none;
  opacity: 1 !important;
  transform: translate3d(-50%, 0, 0);
}
@keyframes ah-entre-logo {
  to { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
/* Le texte ne bouge pas : il vient uniquement par transparence. */
@keyframes ah-entre-texte {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ah-entre-btn-pin {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* Les deux dessins se superposent dans une même boîte. C'est elle qui
   voyage : sa forme passe du carré du sigle au bandeau du logo complet,
   pendant que l'un s'efface et que l'autre paraît. */
.ah-logo__lien {
  position: relative;
  display: block;
  width:  var(--ah-logo-largeur);
  height: calc(var(--ah-logo-largeur) * var(--ah-logo-rapport));
  line-height: 0;
  pointer-events: auto;
  transition: width  1.15s cubic-bezier(.16,.84,.44,1),
              height 1.15s cubic-bezier(.16,.84,.44,1);
}
.ah-logo__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Même durée que le déplacement du logo : le blanc ne s'éteint
     pas avant que le chocolat soit là. */
  transition: opacity 1.25s cubic-bezier(.16,.84,.44,1);
}
.ah-logo__svg--sigle {
  background: url("../img/logo-ah-blanc-signature.svg") center / contain no-repeat;
  filter: drop-shadow(0 1px 12px rgba(0,0,0,.26));
  opacity: 1;
}
.ah-logo__svg--complet { color: var(--ah-logo-fonce); opacity: 0; }
.ah-logo__svg--complet .ah-logo__baseline { display: none; }

/* Lockup mobile : le sigle seul, « alexandra hilvert » posé à côté.
   Invisible sur ordinateur — là, c'est le logo empilé qui tient l'affiche. */
.ah-logo__svg--duo {
  color: var(--ah-logo-clair);
  opacity: 0;
  filter: drop-shadow(0 1px 12px rgba(0,0,0,.26));
}

/* État « calé au-dessus du menu » — ordinateur seulement.
   Mobile : le lockup chocolat passe par .ah-logo--mobile-sticky. */
@media (min-width: 981px) {
  #ah-logo.is-ouvert {
    top: var(--ah-logo-haut-fin);
    transform: translate3d(-50%, 0, 0);
    opacity: 1 !important;
  }
  body.admin-bar #ah-logo.is-ouvert {
    top: 44px;
  }
  #ah-logo.is-ouvert .ah-logo__lien {
    width:  var(--ah-logo-largeur-fin);
    height: calc(var(--ah-logo-largeur-fin) * var(--ah-logo-rapport-fin));
  }
  #ah-logo.is-ouvert .ah-logo__svg--sigle {
    opacity: 0;
    transition-delay: .4s;
  }
  #ah-logo.is-ouvert .ah-logo__svg--complet {
    opacity: 1;
    transition-delay: .55s;
  }
}

/* Mobile : même logo blanc empilé que l'ordinateur à l'arrivée
   (--sigle, pas le lockup duo). Puis interpolation vers le chocolat. */
@media (max-width: 980px) {
  /* Arrivée iOS : --ah-vh = hauteur visible (visualViewport), posée
     dès le <head>. Sans ça, 100lvh déborde sous la barre d'URL et
     le sigle est coupé. --ah-vv-top rattrape un décalage de viewport. */
  html.ah-accueil {
    min-height: 100svh;
    min-height: -webkit-fill-available;
  }
  #ah-logo {
    --ah-logo-p: 0;
    --ah-logo-sigle: 1;
    --ah-logo-complet: 0;
    top: max(12px, calc(env(safe-area-inset-top, 0px) + var(--ah-vv-top, 0px) + 76px - (64px * var(--ah-logo-p, 0))));
    opacity: 0;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
    animation: none;
    transition: opacity var(--ah-e-logo-duree) var(--ah-e-sortie);
  }
  #ah-logo.is-entre,
  #ah-logo.ah-logo--mobile-sticky {
    opacity: 1 !important;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
  }
  #ah-logo .ah-logo__lien {
    width: var(--ah-logo-largeur);
    height: calc(var(--ah-logo-largeur) * var(--ah-logo-rapport));
    /* La taille suit le scroll. L'opacité, elle, fond : sinon le
       blanc saute à 0 avant que le marron soit peint. */
    transition: none;
  }
  #ah-logo .ah-logo__svg {
    transition: opacity .85s cubic-bezier(.16,.84,.44,1);
  }
  #ah-logo .ah-logo__svg--sigle {
    opacity: var(--ah-logo-sigle, 1) !important;
  }
  #ah-logo .ah-logo__svg--duo {
    opacity: 0 !important;
  }
  #ah-logo .ah-logo__svg--complet {
    opacity: var(--ah-logo-complet, 0) !important;
    color: var(--ah-logo-fonce, #4c250a);
  }
  html body #ah-logo#ah-logo {
    top: max(12px, calc(env(safe-area-inset-top, 0px) + var(--ah-vv-top, 0px) + 76px - (64px * var(--ah-logo-p, 0)))) !important;
  }
  html body #ah-logo#ah-logo .ah-logo__lien {
    width: calc((var(--ah-logo-largeur) * (1 - var(--ah-logo-p, 0))) + (119px * var(--ah-logo-p, 0))) !important;
    height: calc((var(--ah-logo-largeur) * var(--ah-logo-rapport) * (1 - var(--ah-logo-p, 0))) + (54px * var(--ah-logo-p, 0))) !important;
  }
  body.ah-menu-ouvert #ah-logo {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ah-logo, #ah-logo .ah-logo__lien, #ah-logo .ah-logo__svg { transition: none !important; }
  #ah-logo {
    opacity: 1 !important;
    transform: translate3d(-50%, 0, 0) !important;
  }
}

.et-fb #ah-logo, .et-fb-root-ancestor #ah-logo { display: none !important; }

/* Overlay + zone clic + frise : le module Code Divi a souvent
   height:0 (.et_pb_code_inner). S’il reste position:relative, le
   texte et le disque se collent en bas de la photo d’un coup.
   On remonte le bloc de positionnement à la section 100vh. */
body .ah-carousel-section .et_pb_row,
body .ah-carousel-section .et_pb_column,
body .ah-carousel-section .et_pb_code,
body .ah-carousel-section .et_pb_code_inner,
body .ah-carousel-section .et_pb_module.ah-logo {
  position: static !important;
  transform: none !important;
}

/* ============ 2. TEXTE DU HERO ============ */
.ah-hero-texte {
  --ah-ht-cote:    clamp(26px, 6vw, 124px);
  --ah-ht-bas:     clamp(78px, 13vh, 150px);
  --ah-ht-marque:  clamp(360px, 35.3vw, 565px);
  --ah-ht-phrase:  clamp(18px, 1.55vw, 24px);
  --ah-ht-sous:    clamp(38px, 3.4vw, 58px);
  --ah-ht-lieu:    clamp(13px, 1.05vw, 16px);
  --ah-ht-montee:  16px;
  --ah-ht-venue:   18px;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  z-index: 5;
  color: #fdfbf8;                                  /* blanc cassé lumineux */
  pointer-events: none;
  /* Deux voiles : un bas de photo pour la signature, et un flanc droit
     pour le slogan. Aucun n'a de bord franc. */
  background:
    linear-gradient(to left,
      rgba(40, 25, 13, .56) 0%,
      rgba(40, 25, 13, .34) 26%,
      rgba(40, 25, 13, 0) 58%),
    linear-gradient(to top,
      rgba(28, 18, 10, .40) 0%,
      rgba(28, 18, 10, .16) 38%,
      rgba(28, 18, 10, 0) 72%);
}

/* Une fois rattachés à la section 100vh (hero-entre), plus de piège
   Divi : overlay et zone clic remplissent la photo, ordinateur compris. */
html body .ah-carousel-section.et_pb_section > .ah-hero-texte {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  z-index: 5 !important;
}
html body .ah-carousel-section.et_pb_section > .ah-curseur-zone {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 6 !important;
  pointer-events: auto !important;
}

/* ---------- Apparition : photo seule, puis logo, puis texte ----------
   Le texte est le dernier maillon et n'arrive qu'en transparence :
   aucune montée, aucun glissement — seule l'opacité travaille, pour
   qu'il se dépose sur la photo au lieu d'y entrer.
   --i = rang de la ligne ; il sert au repli CSS (animation-delay) comme
   au chemin JS (transition-delay), donc la cadence est la même. */
.ah-hero-texte__el {
  --i: 0;
  display: block;
  opacity: 0;
  transform: none;
  animation: ah-entre-texte var(--ah-e-texte-duree) var(--ah-e-sortie)
             calc(var(--ah-e-texte-debut) + var(--i) * var(--ah-e-pas)) forwards;
  transition: opacity var(--ah-e-texte-duree) var(--ah-e-sortie);
}
.ah-hero-texte.is-entre .ah-hero-texte__el {
  animation: none;
  opacity: 1 !important;
  transform: none !important;
  transition-delay: calc(var(--i) * var(--ah-e-pas));
}
/* Les 4 lignes visibles, dans l'ordre de lecture. */
.ah-hero-texte__vers:nth-child(1) { --i: 0; }
.ah-hero-texte__vers:nth-child(2) { --i: 1; }
.ah-hero-texte__vers:nth-child(3) { --i: 2; }
.ah-hero-texte__lieu              { --i: 3; }

/* ---------- Bas gauche : plus de logo, ni de nom, ni de phrase ---------- */
.ah-hero-texte__gauche {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.ah-hero-texte__logo,
.ah-hero-texte__marque-svg {
  display: none;
}
.ah-hero-texte__titre {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
}

/* ---------- 2. La profession ---------- */
.ah-hero-texte__phrase {
  margin-top: 19px;                    /* entre 16 et 22 px sous le nom */
  font-size: var(--ah-ht-phrase);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .008em;
  text-shadow: 0 1px 10px rgba(0,0,0,.3);
}

/* ---------- 3. La promesse, tiers droit ---------- */
.ah-hero-texte__droite {
  position: absolute;
  right: 7%;
  top: 38%;
  width: clamp(480px, 38vw, 560px);
  max-width: 86%;
  text-align: left;
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .ah-hero-texte__droite {
    position: absolute !important;
    right: 7% !important;
    top: 38% !important;
    width: clamp(480px, 38vw, 560px) !important;
    max-width: 86% !important;
    text-align: left !important;
    display: block !important;
  }
}
.ah-hero-texte__sous {
  margin: 0 !important; padding: 0 !important;
  color: inherit !important;
  font-size: var(--ah-ht-sous) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.34);
}
/* Slogan seul : une petite vague au scroll, sans agrandissement.
   Pas la ligne « Basée à Lyon ». */
.ah-hero-texte__vers .ah-hero-mot {
  display: inline-block;
  transform: none;
}
.ah-hero-texte__vers .ah-hero-mot.est-on {
  animation: ah-slogan-vague .7s ease both;
  animation-delay: calc(var(--mot, 0) * 55ms);
}
@keyframes ah-slogan-vague {
  0% { transform: translateY(0); }
  35% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ah-hero-texte__vers .ah-hero-mot.est-on { animation: none; }
}

/* ---------- 4. La localisation, sous le slogan ---------- */
.ah-hero-texte__lieu {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-top: 28px;                    /* entre 24 et 32 px sous le slogan */
  color: inherit !important;
  font-size: var(--ah-ht-lieu) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.34);
}
.ah-hero-texte__puce {
  flex: none; width: 3px; height: 3px; margin: 0 10px;
  border-radius: 50%; background: currentColor;
}

.ah-hero-texte__lecture {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- La scène épinglée (scroll hero) ----------
   Le carrousel reste collé en haut de l'écran pendant que la page défile,
   et les sections suivantes viennent le recouvrir — ordinateur ET mobile.
   (Sur mobile, pas de course vide : seul l'empilement change.)
   La section ne doit être enfermée dans aucun
   conteneur, sinon elle se décolle à son bord. `body` devant les
   sélecteurs : le CSS global pose `position: relative` sur la même
   section, et il se charge après cette feuille. */
/* Vague : 16 px ordinateur, 12 px mobile. On pose aussi
   --ah-sep-height et --ah-sep-tile : le CSS global les calcule
   sur :root (encore 24 px en ligne), et la vague se retrouvait
   plus haute que sa section, donc trop basse sur la jonction. */
/* La largeur d'une tuile était calculée : 12 x 26,667 = 320,004 px.
   Le masque se répétait donc tous les 320,004 px, et chaque répétition
   retombait un peu plus à côté de la grille de pixels. Le navigateur
   tramant chaque tuile pour son compte, il restait un cheveu transparent
   au raccord — d'autant plus visible que la vague y est fine. On pose
   des largeurs entières : le raccord tombe pile, à chaque répétition.
   L'écart avec la proportion exacte du dessin (26,738) est inférieur au
   tiers de pixel sur toute la tuile : invisible. */
body {
  --ah-sep-haut: 16px;
  --ah-sep-height: var(--ah-sep-haut);
  --ah-sep-tile: 427px;
  /* Séparateur fourni par Erika (300 × 12), répété sans déformation. */
  --ah-sep-vague-haut: clamp(12px, 4vw, 48px);
  --ah-sep-vague: url("../img/separateur-ah-structure-bois.png");
}
@media (max-width: 767px) {
  body {
    --ah-sep-haut: 12px;
    --ah-sep-height: var(--ah-sep-haut);
    --ah-sep-tile: 320px;
  }
}
@media (max-width: 980px) {
  body {
    --ah-sep-haut: 12px;
    --ah-sep-height: var(--ah-sep-haut);
    --ah-sep-tile: 320px;
  }
}
body .ah-sep {
  top: calc(-0.5 * var(--ah-sep-vague-haut));
  height: var(--ah-sep-vague-haut);
  z-index: 5;
  overflow: visible;
}
/* Le JS d'Intégration écrit transform sur le ruban à chaque image,
   avec lissage. hero-sep-v1.js translate un moteur autour du ruban
   à la place : on gèle l'écriture d'Intégration, y compris en ligne
   (le !important l'emporte). hero-sep-v2.js clone ensuite le ruban
   pour que l'Intégration écrive hors DOM. */
.ah-sep__track,
.ah-sep-pois__track,
.ah-sep-fleur__track,
.ah-sep-losanges__track {
  transform: none !important;
  will-change: auto !important;
}
.ah-sep__moteur {
  position: absolute;
  inset: 0;
}
/* Vague : bande blanche opaque, hauteur = le trait.
   Sans fond, top:-50% dans une section trop haute laisse
   voir la photo sticky entre la vague et Histoire. */
body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section {
  position: relative !important;
  background-color: #ffffff !important;
  background-image: none !important;
  z-index: 5;
  height: var(--ah-sep-vague-haut) !important;
  min-height: var(--ah-sep-vague-haut) !important;
  max-height: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}
/* Section vague vide en ligne : on redessine le trait ocre.
   :not(:has(.ah-sep)) évite un double si le module revient. */
body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section:not(:has(.ah-sep))::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-0.5 * var(--ah-sep-vague-haut));
  height: var(--ah-sep-vague-haut);
  background-color: transparent;
  background-image: var(--ah-sep-vague);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  -webkit-mask-image: none;
          mask-image: none;
  pointer-events: none;
  z-index: 6;
}
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section:not(:has(.ah-sep))::before {
    background-image: var(--ah-sep-vague);
  }
}
/* Mobile : la section menu est la barre blanche (siège du logo
   chocolat + frise). Ne plus l'écraser à hauteur 0. */
@media (max-width: 980px) {
  body .ah-carousel-section.et_pb_section ~ .et_pb_section--with-menu:not(.ah-hero) {
    background-color: #ffffff !important;
  }
  /* Vague à cheval sur le bord haut d'Histoire : la section n'occupe
     plus de place, le ruban dépasse de 6 px de part et d'autre.
     Plus de margin-top:-28px : c'est lui qui décalait le trait. */
  body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 5;
    background-color: transparent !important;
  }
  body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section .ah-sep,
  body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section:not(:has(.ah-sep))::before {
    top: calc(-0.5 * var(--ah-sep-vague-haut));
    height: var(--ah-sep-vague-haut);
    overflow: visible;
  }
  body .ah-carousel-section.et_pb_section ~ .ah-hist.et_pb_section {
    margin-top: 0 !important;
    background-color: #ffffff !important;
  }
}

body .ah-carousel-section.et_pb_section {
  position: sticky;
  top: 0;
  z-index: 1;
  /* Même vide, le hero tient l’écran : le menu reste sous le pli
     et n’apparaît qu’à l’arrivée d’Histoire. */
  min-height: 100vh;
  min-height: 100svh;
}
body .ah-carousel-section.et_pb_section ~ .et_pb_section:not(.et_pb_sticky_module) {
  position: relative;
  z-index: 3;
}
/* ---- La vague doit rester AU-DESSUS d'Histoire ----
   La règle générique juste au-dessus a exactement la même spécificité
   que celle qui donnait z-index:5 à la vague (quatre classes), et elle
   vient après : la section vague retombait donc à 3, à égalité avec
   Histoire — qui, étant plus bas dans le DOM, la recouvrait. Sur
   ordinateur cela se voyait peu (la vague gardait un fond blanc à
   elle) ; sur mobile, où on la rend transparente et où Histoire remonte
   de 2 px, la vague disparaissait purement et simplement.
   On redonne ici l'étage voulu, avec une spécificité qui gagne pour de
   bon (.et_pb_section compté deux fois) et !important pour ne pas
   dépendre de l'ordre de chargement du CSS global. */
body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section.et_pb_section {
  z-index: 5 !important;
}
/* Le menu épinglé garde sa position, gérée par Divi : on ne touche
   qu'à son étage, pour qu'il coiffe la photo comme les autres. */
body .ah-carousel-section.et_pb_section ~ .et_pb_sticky_module { z-index: 4; }

/* ---- Le cheveu qui encadre le menu sous Safari ----
   La course du hero mesure 17,5 vh : 157,5 px sur un écran de 900.
   Une hauteur à virgule dans le flux, et toutes les sections qui
   suivent tombent sur un demi-pixel (206,5 / 314,5…). Chrome arrondit
   et ne montre rien ; Safari, qui compose la photo épinglée sur sa
   propre couche, laisse passer un cheveu de photo dans l'interstice —
   un trait au-dessus du menu, un autre en dessous.
   On fait déborder le fond blanc de la section menu d'un pixel de part
   et d'autre : plus d'interstice, et pas un pixel de mise en page qui
   bouge. Ses deux voisines sont blanches, le débord est invisible. */
body .ah-carousel-section.et_pb_section ~ .et_pb_sticky_module {
  box-shadow: 0 -1px 0 0 #ffffff, 0 1px 0 0 #ffffff;
}

/* L'intercalaire vide qui donne au hero sa course : pendant sa traversée
   la photo reste seule à l'écran, le temps que le logo se pose et que le
   texte vienne. Il est posé après la section, jamais autour d'elle. */
.ah-scene-course {
  /* C'est cette hauteur qui fait la longueur du parallaxe : le script
     d'Intégration lit p = scroll / hauteur de la course. 35vh → 17.5vh :
     la première photo termine sa glissée deux fois plus tôt. */
  height: var(--ah-sc-course, 17.5vh);
  pointer-events: none;
}

/* Hero plein écran. svh suit la barre d'adresse des mobiles ; le vh
   en premier sert de repli aux navigateurs qui l'ignorent. */
.ah-carousel-section .ah-carousel.ah-carousel {
  height: 100vh !important;
  height: 100svh !important;
}
/* Même cadre pour la 1re photo (LCP) et les slides suivantes.
   Toutes des <img object-fit:cover> : un background-image à côté
   d'une img donnait un cadrage Safari ≠ Chrome. */
.ah-carousel picture,
.ah-carousel img.ah-carousel__lcp,
.ah-carousel img.ah-carousel__couche {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
}
.ah-carousel img.ah-carousel__lcp,
.ah-carousel img.ah-carousel__couche {
  object-fit: cover !important;
  object-position: center !important;
}
/* Connectée à WordPress, la barre d'administration reste fixée en haut
   de l'écran sur ordinateur. La photo doit à la fois se caler dessous
   et perdre sa hauteur : sans le décalage, il manquerait 32 px en bas
   dès que la section s'épingle. En dessous de 783 px la barre défile
   avec la page, il n'y a donc rien à compenser. */
@media screen and (min-width: 783px) {
  body.admin-bar .ah-carousel-section.et_pb_section {
    top: 32px !important;
  }
  body.admin-bar .ah-carousel-section .ah-carousel.ah-carousel {
    height: calc(100svh - 32px) !important;
  }
}

/* Le parallaxe porte sur l'image, pas sur son cadre : celui-ci garde
   overflow:hidden, donc rien ne déborde de la section. */
/* État de départ, et rien de plus : c'est hero-parallaxe-v1.js qui pose
   ensuite la transformation en ligne, couche par couche.
   On ne lit plus --z ni --py. L'ancien script d'Intégration continue de
   les écrire sur la section à chaque image ; tant qu'une règle les lisait,
   le navigateur recalculait le style de tout le hero à chaque fois. Plus
   personne ne les lit : ces écritures ne coûtent plus rien. */
body.ah-scene-active .ah-carousel img,
body.ah-scene-active .ah-carousel__couche {
  transform: translate3d(0, 4%, 0) scale(1.16);
  transform-origin: 50% 50%;
  will-change: transform;
  /* Safari re-tramait la photo à chaque image pendant le défilement :
     la fixer sur sa propre couche calme le tremblement. */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Mobile : le parallaxe Intégration relance un rAF + transform sur
   l'élément sticky à chaque scroll (course à 0). On le coupe. */
@media (max-width: 900px) {
  body.ah-scene-active .ah-carousel img,
  body.ah-scene-active .ah-carousel__couche {
    transform: none !important;
    will-change: auto;
  }
}
/* Dès qu'Histoire / la vague recouvre : plus de fade, et on lâche la
   couche de composition. En revanche on NE remet PAS le transform à
   zéro : la photo est encore aux deux tiers à l'écran à cet instant, et
   repasser d'un coup de scale(1.09) à scale(1) la faisait rétrécir et
   sauter de 36 px. Le parallaxe a de toute façon fini sa course avant
   ce basculement : garder son dernier état, c'est ne plus bouger. */
body.ah-hero-recouvert .ah-carousel img,
body.ah-hero-recouvert .ah-carousel__couche {
  transition: none !important;
  will-change: auto !important;
}
body.ah-hero-recouvert .ah-hero-texte__el {
  animation: none !important;
  transition: none !important;
}
body.ah-hero-recouvert .ah-hero-texte.is-entre .ah-hero-texte__el {
  opacity: 1 !important;
  transform: none !important;
}
/* Le disque reste tant qu’Histoire n’est pas en haut (ah-histoire-au-top). */
body.ah-hero-recouvert .ah-curseur-bouton__anneau,
body.ah-hero-recouvert #ah-curseur .ah-curseur__anneau {
  animation: none !important;
}

/* ---------- Ordinateur : le métier tient sur une ligne ---------- */
@media (min-width: 1100px) { .ah-hero-texte__phrase { white-space: nowrap; } }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  /* Ces boîtes avaient été ouvertes (overflow visible) parce que
     overflow-x:clip sur un ancêtre fait de position:fixed un absolute
     dans un conteneur qui défile — le hero épinglé n'y tenait pas.
     Il n'y a plus rien de fixe ici : on referme, sinon le ruban du
     séparateur (1015 px de large) déborde et la page se met à défiler
     de 320 px sur le côté.
     transform / filter / contain restent neutralisés : ce sont eux qui
     créaient des contextes d'empilement parasites. */
  /* ---- Retour à la géométrie du 14 août ----
     C'est la version dont Erika dit qu'elle se comportait bien. Ses
     ancêtres ne sont PAS rouverts : ils gardent le overflow-x:clip de la
     règle générale, en haut de cette feuille. Rien n'est fixe ici, donc
     le piège du fixed-dans-une-boîte-qui-clippe ne s'applique pas — et
     le ruban du séparateur reste retenu, sans défilement latéral. */
  html, body {
    transform: none !important;
    filter: none !important;
  }
  #page-container,
  #et-main-area,
  #et-boc,
  .et-l,
  .et_builder_inner_content {
    transform: none !important;
    filter: none !important;
    contain: none !important;
  }
  /* hero-pin-v3 déplace le hero sous <body>. Le placeholder reste dans
     Divi et réserve sa hauteur ; tous ses frères suivants doivent passer
     au-dessus du hero fixe pour conserver le recouvrement d'Histoire. */
  html.ah-hero-pinne .ah-hero-ph ~ .et_pb_section:not(.et_pb_sticky_module) {
    position: relative;
    z-index: 3;
  }
  html.ah-hero-pinne .ah-hero-ph ~ .ah-hero.et_pb_section {
    z-index: 5 !important;
  }
  html.ah-hero-pinne .ah-hero-ph ~ .et_pb_sticky_module {
    z-index: 4;
  }
  /* ---- Mobile : plus d'épinglage du tout ----
     La photo défile comme n'importe quel contenu. Histoire ne glisse
     plus par-dessus : elle arrive après, simplement. Plus aucun élément
     n'est fixe pendant le défilement, donc plus rien qui puisse trembler
     ni se décaler quand la barre d'adresse bouge.
     La hauteur reste définie (100svh) : c'est elle qui permet à la chaîne
     rangée / colonne / module en height:100% de se résoudre. */
  /* ---- Mobile : le hero tient l'écran, Histoire glisse par-dessus ----
     position:sticky et non fixed : la section garde sa place dans le
     flux (donc aucun placeholder à tenir à jour, et rien qui se décale
     quand la barre d'adresse se rétracte), et c'est le compositeur qui
     la maintient en haut — pas une boucle JS. C'est la forme la moins
     coûteuse pour WebKit.
     Elle reste collée jusqu'au bas de son parent, c'est-à-dire jusqu'au
     bas de la page : Histoire, qui est au-dessus dans l'ordre
     d'empilement, la recouvre en arrivant. */
  /* Hero plein écran, épinglé : Histoire (z-index 3) glisse par-dessus.
     overflow:visible sur la section, hidden sur le carrousel — et pas
     l'inverse. C'était écrit noir sur blanc dans la version du 14 août,
     et le v47 l'avait perdu en héritant des règles du hero fixé :
     un overflow:hidden sur un élément collant en fait une boîte de
     défilement, que WebKit recale sur le fil principal à chaque image.
     C'est le candidat le plus probable pour le frisson revenu.
     Hauteur en unité absolue (100svh), pas en pourcentage : elle ne
     dépend alors d'aucun ancêtre. */
  body > .ah-carousel-section.et_pb_section,
  body .ah-carousel-section.et_pb_section {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    /* Arrivée Safari (lien / Notes) : ne jamais tomber sur 100vh / lvh
       (barre rentrée, trop haut). svh = fenêtre visible minimale.
       --ah-vh (px) est posé par hero-entre dès le <head>, et ne fait
       que rétrécir si iOS avait trop mesuré au premier coup. */
    height: 100svh !important;
    height: var(--ah-vh, 100svh) !important;
    max-height: 100svh;
    max-height: var(--ah-vh, 100svh);
    top: var(--ah-vv-top, 0px) !important;
    margin: 0 !important;
    z-index: 1;
    overflow: visible !important;
    transform: none !important;
  }
  body .ah-carousel-section .ah-carousel.ah-carousel {
    overflow: hidden;
    height: 100svh !important;
    height: var(--ah-vh, 100svh) !important;
    contain: paint;
  }

  /* Le hero est en position:fixed avec top:0 et bottom:0 : il occupe donc
     toujours la fenêtre VISIBLE du moment. Sur iPhone, cette fenêtre
     grandit quand la barre d'adresse se rétracte — de 812 à 883 px sur un
     14 Pro, par exemple. Or le placeholder gardait la hauteur mesurée au
     chargement, barre déployée (svh). Il réservait donc jusqu'à 70 px de
     défilement de moins que la place réellement occupée par la photo :
     Histoire commençait à la recouvrir trop tôt, et chaque rétractation de
     la barre déplaçait la frontière d'un coup. C'est ce décalage-là qu'on
     voit passer au défilement.
     Même hauteur que le hero visible (svh / --ah-vh), pas lvh :
     sinon le placeholder est plus haut que la photo et le scroll
     d'arrivée se décale. */
  .ah-hero-ph {
    display: block;
    width: 100%;
    height: 100svh;
    height: var(--ah-vh, 100svh);
    pointer-events: none;
    visibility: hidden;
  }
  /* Une fois la place du hero quittée, il ne doit plus se voir
     dans le vide sous les sections suivantes. */
  html.ah-hero-pinne body > .ah-carousel-section.ah-hero-passe {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* height:100% ne se résout que si TOUS les ancêtres ont une hauteur
     définie. Ici la chaîne est
       section (fixed, top:0/bottom:0 → hauteur définie)
       └ .et_pb_row          height:auto
         └ .et_pb_column     height:auto
           └ .et_pb_module   height:100%  ← pourcentage indéfini
             └ .et_pb_code_inner
               └ .ah-carousel
     Le pourcentage retombait donc sur auto, et comme la photo est en
     position:absolute il ne restait aucun contenu dans le flux pour
     donner une hauteur : tout s'écrasait à 0 et la photo disparaissait.
     On fait descendre la hauteur le long de la chaîne. Les marges
     internes de la rangée Divi sont annulées, sinon la photo dépasse
     du cadre fixe et se retrouve décentrée. */
  body .ah-carousel-section .et_pb_row,
  body .ah-carousel-section .et_pb_column,
  body .ah-carousel-section .et_pb_module.ah-carousel,
  body .ah-carousel-section .et_pb_code_inner {
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body .ah-carousel-section .ah-carousel.ah-carousel {
    overflow: hidden;
    height: 100% !important;
    min-height: 100%;
  }
  .ah-carousel img,
  .ah-carousel__lcp {
    transform: none !important;
    will-change: auto !important;
    -webkit-backface-visibility: visible !important;
            backface-visibility: visible !important;
  }
  /* Le bandeau « réalisations » tourne autour du disque, donc en dehors
     de son fond beige : il tombe sur la photo. En chocolat il s'y perdait,
     surtout sur le carrelage sombre. */
  .ah-curseur__anneau text,
  .ah-curseur__anneau textPath {
    fill: #ffffff;
  }

  .ah-hero-texte {
    --ah-ht-marque: clamp(190px, 60vw, 330px);
    --ah-ht-phrase: clamp(17px, 4.6vw, 19px);
    --ah-ht-sous:   clamp(24px, 6.6vw, 30px);
    --ah-ht-lieu:   clamp(12.5px, 3.4vw, 14px);
    --ah-ht-venue:  24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    overflow: visible;
    z-index: 5;
    height: 100%;
    padding: max(28px, env(safe-area-inset-top, 0px)) var(--ah-ht-cote) clamp(88px, 12vh, 120px);
    background:
      linear-gradient(to top,
        rgba(28, 18, 10, .58) 0%,
        rgba(28, 18, 10, .26) 46%,
        rgba(28, 18, 10, 0) 82%);
  }
  .ah-hero-texte__droite {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ah-hero-texte__sous { text-align: center; }
  .ah-hero-texte__lieu {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    width: 100%;
  }
  a.ah-curseur-bouton { order: 2; }
  .ah-hero-texte__lieu { order: 3; }
  /* Hero mobile : exactement la même partition, même fondu sans montée. */
  .ah-hero-texte__el { opacity: 0; transform: none; }
  .ah-hero-texte.is-entre .ah-hero-texte__el { opacity: 1 !important; transform: none !important; }
  .ah-scene-course { display: none; height: 0; --ah-sc-course: 0px; }

  /* Mobile : carrousel actif (v11). Le ruban du séparateur reste figé. */
  .ah-sep__track,
  .ah-sep__moteur {
    transform: none !important;
    will-change: auto !important;
  }

  /* ---- Banc d'essai 1-3 : propres au mobile ----
     Activé par ?calme=N (voir assets/js/hero-essai-v3.js). */

  /* 1. La photo sur sa propre couche graphique.
        Résultat : aucun changement. */
  html.ah-essai-1 .ah-carousel-section .ah-carousel.ah-carousel {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }

  /* 2. Plus d'épinglage du tout : la photo défile comme le reste.
        Histoire ne glisse plus par-dessus — c'est un essai, pas une
        proposition de rendu.
        Résultat : aucun changement. */
  /* 2. Plus d'épinglage : la photo défile avec la page.
        (v43 utilise fixed, pas sticky — on force relative ici aussi.) */
  html.ah-essai-2 body .ah-carousel-section.et_pb_section,
  html.ah-essai-2 body > .ah-carousel-section.et_pb_section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: 100svh !important;
  }
  html.ah-essai-2 .ah-hero-ph { display: none !important; height: 0 !important; }
  html.ah-essai-2 #page-container { z-index: auto; }

  /* 3. Hauteur en lvh : la barre d'adresse de l'iPhone ne fait plus
        respirer la mise en page en se rétractant.
        Résultat : aucun changement. */
  html.ah-essai-3 body .ah-carousel-section.et_pb_section,
  html.ah-essai-3 body .ah-carousel-section .ah-carousel.ah-carousel {
    height: 100lvh !important;
    max-height: 100lvh;
  }
}

/* ---- Banc d'essai 4-7 : ordinateur et mobile ----
   Safari de bureau tremble encore un peu : ces essais y marchent aussi. */

/* 4. Une seule photo à l'écran : les quatre couches du fondu croisé
      sont retirées. */
html.ah-essai-4 .ah-carousel .ah-carousel__couche { display: none !important; }

/* 5. Le séparateur cesse d'être animé : ni le JS d'Intégration
      (ruban) ni le thème (moteur). */
html.ah-essai-5 .ah-sep__track,
html.ah-essai-5 .ah-sep__moteur {
  transform: none !important;
  will-change: auto !important;
}

/* 6. Pas de CSS : hero-carousel-v6.js n'écoute plus le scroll
      (plus de getBoundingClientRect à chaque image). */

/* 7. Plus de photo : un aplat à la place. Si le tremblement
      disparaît, c'est le poids des pixels. */
/* 8 — ORDINATEUR : le parallaxe de la photo est coupé. C'est le seul
   mouvement lié au défilement qui reste sur grand écran. S'il n'y a plus
   de frisson sous Safari avec ?calme=8, c'est lui ; sinon c'est le
   sticky lui-même, et il faudra le traiter comme sur mobile. */
html.ah-essai-8 .ah-carousel img,
html.ah-essai-8 .ah-carousel__couche {
  transform: none !important;
  will-change: auto !important;
}

html.ah-essai-7 .ah-carousel {
  background: #2c1c12 !important;
}
html.ah-essai-7 .ah-carousel img,
html.ah-essai-7 .ah-carousel .ah-carousel__couche {
  display: none !important;
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .ah-hero-texte__el { opacity: 1 !important; transform: none !important; }
  .ah-curseur-bouton { opacity: 1 !important; transform: none !important; }
  body.ah-scene-active .ah-carousel img,
  body.ah-scene-active .ah-carousel__couche { transform: none !important; }
  .ah-sep__moteur { transform: none !important; }
}

.et-fb .ah-hero-texte, .et-fb-root-ancestor .ah-hero-texte { position: relative; inset: auto; }
.et-fb .ah-hero-texte__el, .et-fb-root-ancestor .ah-hero-texte__el { opacity: 1 !important; transform: none !important; }
.et-fb .ah-curseur-bouton, .et-fb-root-ancestor .ah-curseur-bouton { opacity: 1 !important; transform: none !important; }

/* ============ 3. CURSEUR ============ */
.ah-curseur {
  --ah-cur-petit:    11px;                    /* diamètre au repos */
  --ah-cur-grand:    clamp(104px, 9.5vw, 148px); /* diamètre sur la photo */
  --ah-cur-chocolat: #522202;
  --ah-cur-fond:     #522202;
  --ah-cur-mot:      #ffffff;   /* « réalisations » : blanc sur chocolat */
  --ah-cur-masque:   url("../img/selecteur-hero-ah.svg");

  position: fixed;
  top: 0;
  left: 0;
  z-index: 999998;
  display: grid;
  place-items: center;
  width: var(--ah-cur-petit);
  height: var(--ah-cur-petit);
  margin: calc(var(--ah-cur-petit) / -2) 0 0 calc(var(--ah-cur-petit) / -2);
  border-radius: 50%;
  overflow: hidden;
  background: var(--ah-cur-chocolat);
  pointer-events: none;
  opacity: 0;
  /* Opacité hors boucle d'animation du suivi : le fondu d'arrivée
     se fait une fois, quand .est-autorise est posé. */
  transition: width .42s cubic-bezier(.22,.61,.36,1),
              height .42s cubic-bezier(.22,.61,.36,1),
              margin .42s cubic-bezier(.22,.61,.36,1),
              background .3s ease,
              opacity .9s cubic-bezier(.22, 1, .36, 1);
}
/* Invisible tant que le logo n'a pas fini d'apparaître (.est-autorise). */
.ah-curseur:not(.est-autorise) { opacity: 0 !important; }
.ah-curseur.est-visible.est-autorise { opacity: 1 !important; }
/* L'Intégration peut autoriser le curseur trop tôt : on le retient
   jusqu'à la fin de la cascade d'arrivée. */
body:not(.ah-hero-entre-ok) .ah-curseur { opacity: 0 !important; }

.ah-curseur__contenu {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .22s ease, transform .38s cubic-bezier(.22,.61,.36,1);
}

/* Le mot, disposé en cercle autour du sigle */
.ah-curseur__anneau {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--ah-cur-mot);
  animation: ah-cur-rotation 42s linear infinite;
}
.ah-curseur__anneau text {
  font-size: 8.4px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Fond chocolat découpé par selecteur-hero-ah.svg (médias WP) :
   crème du SVG = chocolat visible ; trou AH = photo au travers. */
.ah-curseur__fond {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ah-cur-fond);
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: var(--ah-cur-masque);
          mask-image: var(--ah-cur-masque);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.ah-curseur.est-ouvert .ah-curseur__fond {
  opacity: 1;
}
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .ah-curseur.est-ouvert .ah-curseur__fond {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@keyframes ah-cur-rotation { to { transform: rotate(360deg); } }

/* --- État ouvert : au survol de la photo --- */
.ah-curseur.est-ouvert {
  width: var(--ah-cur-grand) !important;
  height: var(--ah-cur-grand) !important;
  margin: calc(var(--ah-cur-grand) / -2) 0 0 calc(var(--ah-cur-grand) / -2) !important;
  background: transparent;
  /* Le scale du scroll dépasse le carré : sinon il est rogné. */
  overflow: visible;
}
.ah-curseur.est-ouvert .ah-curseur__contenu {
  opacity: 1;
  transform: none;
  transition-delay: .04s;
}
/* Même grossissement que le disque du CTA : +22 % en remontant
   dans l'écran. Sur le contenu, pas sur le disque : le suivi souris
   pose déjà un translate sur .ah-curseur. */
.ah-curseur__corps {
  position: absolute;
  inset: 0;
  transform: scale(calc(1 + 0.22 * var(--ah-btn-scroll, 0)));
  transform-origin: center center;
  transition: transform 1.15s cubic-bezier(.16, 1, .3, 1);
}

/* --- Le lien qui couvre la photo --- */
.ah-curseur-zone {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 4;
  display: block;
}
.ah-curseur-zone__texte {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ah-curseur-zone:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -14px;
}

/* Le pointeur natif disparaît sur la photo, remplacé par le nôtre */
@media (hover: hover) and (pointer: fine) {
  .ah-carousel-section,
  .ah-carousel-section * { cursor: none; }
}

/* --- Mobile : lien ocre simple « réalisations » (plus de disque).
   Ordinateur : le curseur-disque .ah-curseur reste inchangé. */
.ah-carousel-section {
  position: relative;
}
.ah-curseur-bouton {
  display: none;
  pointer-events: auto;
  text-decoration: none !important;
}
.ah-curseur-bouton__fond,
.ah-curseur-bouton__anneau {
  display: none !important;
}
.ah-curseur-bouton:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}
@media (max-width: 1099px), (hover: none), (pointer: coarse) {
  /* Tablette + tactile : slogan centré, disque figé sous le texte.
     L’ordinateur large avec souris garde le curseur qui suit. */
  .ah-hero-texte {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    overflow: visible;
    z-index: 5;
    height: 100%;
    padding: 0 var(--ah-ht-cote, 32px) clamp(88px, 12vh, 140px);
    background:
      linear-gradient(to top,
        rgba(28, 18, 10, .58) 0%,
        rgba(28, 18, 10, .26) 46%,
        rgba(28, 18, 10, 0) 82%);
  }
  .ah-hero-texte__droite {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ah-hero-texte__sous { text-align: center; }
  .ah-hero-texte__lieu {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    width: 100%;
    order: 3;
  }
  a.ah-curseur-bouton { order: 2; }
  .ah-curseur-zone { display: none !important; }

  /* Disque « réalisations », le même qu'au survol ordinateur, posé
     sous le texte et figé (il ne suit pas le doigt). */
  a.ah-curseur-bouton {
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    width: 112px !important;
    height: 112px !important;
    margin: 28px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    overflow: visible !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1) !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .ah-hero-texte.is-entre a.ah-curseur-bouton,
  body.ah-hero-entre-ok a.ah-curseur-bouton {
    opacity: 1 !important;
  }
  /* Tant que le disque est sur body (Intégration), on le cache :
     il ne doit pas flotter en haut à gauche. */
  body > #ah-curseur {
    display: none !important;
  }
  .ah-hero-texte .ah-curseur,
  a.ah-curseur-bouton .ah-curseur,
  a.ah-curseur-bouton .ah-curseur.est-ouvert,
  #ah-curseur.ah-curseur--fixe,
  #ah-curseur.ah-curseur--fixe.est-ouvert {
    display: grid !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 1 !important;
    width: 112px !important;
    height: 112px !important;
    margin: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    background: transparent !important;
    transform: none !important;
    pointer-events: none !important;
  }
  .ah-curseur--fixe .ah-curseur__contenu,
  a.ah-curseur-bouton .ah-curseur .ah-curseur__contenu {
    opacity: 1 !important;
    transform: none !important;
  }
  .ah-hero-texte .ah-curseur,
  a.ah-curseur-bouton .ah-curseur,
  #ah-curseur.ah-curseur--fixe {
    overflow: visible !important;
  }
  .ah-curseur--fixe .ah-curseur__fond,
  a.ah-curseur-bouton .ah-curseur .ah-curseur__fond {
    opacity: 1 !important;
    background: #eadecf !important;
  }
  .ah-curseur--fixe .ah-curseur__anneau,
  a.ah-curseur-bouton .ah-curseur .ah-curseur__anneau {
    fill: #522202 !important;
  }
  body.ah-menu-ouvert a.ah-curseur-bouton {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
  }
}

/* Tablette : disque un peu plus grand, slogan plus lisible qu’au téléphone. */
@media (min-width: 701px) and (max-width: 1099px) {
  .ah-hero-texte {
    --ah-ht-sous: clamp(32px, 3.8vw, 46px);
    --ah-ht-lieu: clamp(13px, 1.45vw, 15px);
    padding: 0 clamp(36px, 6vw, 88px) clamp(100px, 11vh, 148px);
  }
  a.ah-curseur-bouton {
    width: 128px !important;
    height: 128px !important;
    margin: 32px auto 0 !important;
  }
  .ah-hero-texte .ah-curseur,
  a.ah-curseur-bouton .ah-curseur,
  a.ah-curseur-bouton .ah-curseur.est-ouvert,
  #ah-curseur.ah-curseur--fixe,
  #ah-curseur.ah-curseur--fixe.est-ouvert {
    width: 128px !important;
    height: 128px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ah-curseur, .ah-curseur__contenu { transition: none !important; }
  .ah-curseur__corps { transform: none !important; transition: none !important; }
  .ah-curseur__anneau,
  .ah-curseur-bouton__anneau { animation: none !important; }
}

/* Neutralisé dans le constructeur visuel Divi */
.et-fb .ah-curseur, .et-fb-root-ancestor .ah-curseur { display: none !important; }
.et-fb .ah-curseur-zone, .et-fb-root-ancestor .ah-curseur-zone { display: none !important; }

/* ---- Séparateur structure bois (dessin Erika, 300 × 12) ---- */
html body .ah-hero .ah-sep__track,
html body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section .ah-sep__track {
  left: 0 !important;
  width: 100% !important;
  background-color: transparent !important;
  background-image: var(--ah-sep-vague) !important;
  background-repeat: repeat-x !important;
  background-position: center bottom !important;
  background-size: auto 100% !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  transform: none !important;
}

/* ============ 4. CURSEUR DE LA SECTION AGENCE ============ */
.ah-agence {
  position: relative;
}
.ah-agence-curseur-zone {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: block;
  background: transparent;
  cursor: none;
}

/* ================================================================
   SÉPARATEUR LOGO BLANC — une seule frise, à cheval.
   Fichier : separateur-logo-blanc.svg (même sous le menu fixé).
   Le clone menu .organic-divider--transition est LA ligne de jonction.
   L’original dans le hero est masqué dès que le clone existe
   (sinon double ligne). Pas de --menu-bas.
================================================================ */
body .ah-carousel-section.et_pb_section {
  --ah-organic-divider-color: #ffffff;
  --ah-sep-logo: url("../img/separateur-logo-blanc.svg");
  --ah-sep-logo-h: clamp(34px, 4.6vw, 56px);
}
body .ah-carousel-section .ah-carousel.ah-carousel {
  position: relative !important;
}
html body.ah-accueil {
  --ah-sep-logo-h: clamp(34px, 4.6vw, 56px);
  --menu-sep-h: clamp(34px, 4.6vw, 56px);
}
@media (max-width: 767px) {
  html body.ah-accueil {
    --ah-sep-logo-h: clamp(26px, 8vw, 40px);
    --menu-sep-h: clamp(26px, 8vw, 40px);
  }
}
body .ah-carousel-section .organic-divider {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--ah-sep-logo-h, 40px) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ah-organic-divider-color) !important;
  background-color: transparent !important;
  background-image: var(--ah-sep-logo) !important;
  background-repeat: repeat-x !important;
  background-position: center center !important;
  background-size: auto 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 12 !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
  transform: translateY(50%) !important;
  visibility: visible !important;
}
/* Ordinateur : original masqué seulement si le clone est sur le menu
   DE PAGE. Un clone dans le header TB ne doit pas éteindre la frise. */
@media (min-width: 981px) {
  html:has(#page-container .et_pb_section--with-menu:not([class*="tb_header"]) > .organic-divider--transition)
    body .ah-carousel-section .organic-divider:not(.organic-divider--transition) {
    visibility: hidden !important;
  }
}
@media (max-width: 980px) {
  /* Même geste que l'ordinateur : clone sur la barre blanche, pas sur
     Histoire. Un clone resté sur Histoire (ancien JS) ne doit plus peindre. */
  html body #page-container .et_pb_section.ah-histoire > .organic-divider--transition {
    display: none !important;
  }
  html body #page-container#page-container
    .et_pb_section:has(.menu-exceptionnel):not(.ah-histoire):not([class*="tb_header"])
    > .organic-divider--transition {
    height: var(--ah-sep-logo-h, clamp(26px, 8vw, 40px)) !important;
  }
  body.ah-accueil #page-container,
  body.ah-accueil #et-main-area,
  body.ah-accueil .et-l,
  body.ah-accueil .et_builder_inner_content,
  body.ah-accueil .et_pb_section.ah-histoire,
  body.ah-accueil #page-container
    .et_pb_section:has(.menu-exceptionnel):not(.ah-histoire) {
    overflow: visible !important;
  }
}
body.ah-histoire-au-top #ah-curseur,
body.ah-histoire-au-top a.ah-curseur-bouton {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.et-l--header .organic-divider {
  display: none !important;
}

html body #page-container#page-container
  .et_pb_section:has(.menu-exceptionnel):not(.ah-histoire):not([class*="tb_header"])
  > .organic-divider--transition {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--ah-sep-logo-h, clamp(34px, 4.6vw, 56px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  background-color: transparent !important;
  background-image: var(--ah-sep-logo, url("../img/separateur-logo-blanc.svg")) !important;
  background-repeat: repeat-x !important;
  background-position: center center !important;
  background-size: auto 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 40 !important;
  transform: translateY(-50%) !important;
  shape-rendering: geometricPrecision;
  animation: none !important;
  transition: none !important;
  filter: none !important;
}
html body #page-container#page-container
  .et_pb_sticky_placeholder .organic-divider--transition {
  display: none !important;
}

html body #page-container#page-container
  .et_pb_section:has(.menu-exceptionnel):not(.ah-histoire)
  > .organic-divider--menu-bas {
  display: none !important;
}
html body #page-container#page-container
  .et_pb_sticky_placeholder .organic-divider--menu-bas {
  display: none !important;
}

@media (max-width: 767px) {
  body .ah-carousel-section .organic-divider,
  html body #page-container .organic-divider--transition {
    height: var(--ah-sep-logo-h, clamp(26px, 8vw, 40px)) !important;
  }
}

/* Les anciennes couches vivaient dans une section séparée après le
   carrousel. On conserve sa hauteur de flux pour ne modifier aucune
   mesure du hero, mais on retire tous ses anciens dessins. */
body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section .ah-sep,
body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section .ah-sep__track,
body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section .ah-sep__moteur {
  display: none !important;
}
body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section::before,
body .ah-carousel-section.et_pb_section ~ .ah-hero.et_pb_section::after {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask: none !important;
          mask: none !important;
}
.ah-agence-curseur-zone:focus-visible {
  outline: 2px solid var(--ah-terre, #b07030);
  outline-offset: -12px;
}
.ah-agence-curseur {
  z-index: 999997;
}
.ah-agence-curseur .ah-curseur__contenu {
  opacity: 1;
  transform: none;
}
/* Couleurs de la charte : fond vert kaki, mot en noir espresso — au
   lieu du chocolat et du blanc du disque « réalisations ».
   En !important parce que le bloc mobile de ce disque (fond crème, mot
   blanc) l'est aussi, et parce que le mot est peint sur <text>, pas
   sur le SVG qui le porte. */
.ah-agence-curseur,
.ah-agence-bouton-mobile .ah-curseur {
  --ah-cur-fond:     var(--ah-vert-kaki, #72632a);
  --ah-cur-chocolat: var(--ah-vert-kaki, #72632a);
  --ah-cur-mot:      var(--ah-espresso, #2d1d12);
}
.ah-agence-curseur .ah-curseur__fond,
a.ah-agence-bouton-mobile .ah-curseur .ah-curseur__fond {
  background: var(--ah-vert-kaki, #72632a) !important;
}
.ah-agence-curseur .ah-curseur__anneau,
.ah-agence-curseur .ah-curseur__anneau text,
.ah-agence-curseur .ah-curseur__anneau textPath,
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: var(--ah-espresso, #2d1d12) !important;
}
.ah-agence-bouton-mobile {
  display: none;
}
@media (max-width: 980px), (hover: none), (pointer: coarse) {
  .ah-agence-curseur-zone,
  body > .ah-agence-curseur {
    display: none !important;
  }
  a.ah-agence-bouton-mobile {
    display: block !important;
    margin-top: 36px !important;
    margin-bottom: 8px !important;
  }
  .ah-agence-bouton-mobile .ah-curseur__anneau {
    animation: none !important;
  }
}
html body:is(.page-id-3478, .page-homepage, .page-home, .page-id-4379) .ah-hero .ah-sep-frise {
  display: none !important;
}

/* Menu collé : Histoire recouvre la photo (z-index), sans coupure
   d’opacité — le geste reste un fondu de calques, pas un interrupteur. */