/* ===================================================================
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 ),
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 (é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%;
transition: opacity .7s ease;
}
.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; }
#ah-logo.is-ouvert .ah-logo__svg--complet { opacity: 1; transition-delay: .3s; }
}
/* Mobile : logo blanc figé (pas de top/transform qui fight le sticky).
Le passage chocolat n'a lieu qu'une fois, seuil franc côté JS.
Il ne monte pas, mais il paraît sur la même durée qu'ailleurs :
c'est le même geste, seulement privé de son déplacement. */
@media (max-width: 980px) {
#ah-logo {
top: calc(env(safe-area-inset-top, 0px) + 58px);
opacity: 0;
visibility: visible;
transform: translate3d(-50%, 0, 0);
animation: none;
transition: opacity var(--ah-e-logo-duree) var(--ah-e-sortie),
top .7s cubic-bezier(.16,.84,.44,1);
}
#ah-logo.is-entre,
#ah-logo.ah-logo--mobile-sticky {
opacity: 1 !important;
visibility: visible;
transform: translate3d(-50%, 0, 0);
}
/* La boîte prend la forme du lockup : large et basse, plus le carré
du logo empilé. */
#ah-logo .ah-logo__lien {
width: min(268px, 74vw);
height: calc(min(268px, 74vw) * var(--ah-logo-rapport-duo));
transition: width .7s cubic-bezier(.16,.84,.44,1),
height .7s cubic-bezier(.16,.84,.44,1);
}
#ah-logo .ah-logo__svg--sigle { opacity: 0; }
#ah-logo .ah-logo__svg--duo { opacity: 1; }
#ah-logo.ah-logo--mobile-sticky {
top: calc(14px + env(safe-area-inset-top, 0px)) !important;
pointer-events: auto !important;
transition: opacity .45s ease,
top .7s cubic-bezier(.16,.84,.44,1);
}
#ah-logo.ah-logo--mobile-sticky .ah-logo__lien {
width: 110px;
height: calc(110px * var(--ah-logo-rapport-fin));
transition: width .7s cubic-bezier(.16,.84,.44,1),
height .7s cubic-bezier(.16,.84,.44,1);
}
/* La feuille collée dans Divi (Options du thème → CSS personnalisé)
impose 88 × 40 et top:10px en !important, sur un sélecteur plus
précis que le nôtre : c'était elle qu'on voyait à l'écran, jamais
la taille réglée ici. On double l'ID pour reprendre la main sans
avoir à recoller cette feuille.
Lockup à +35 % (88 × 40 → 119 × 54) et centré dans la bande blanche
du menu, haute de 108 px sur mobile. Le dessin ne commence qu'à
5 px du haut de sa boîte (la ligne de signature du SVG est masquée
mais garde sa place) : son milieu tombe à 29,5 px, d'où ces 24 px
de marge haute pour l'amener à 54 px, le milieu de la bande. */
html body #ah-logo#ah-logo.ah-logo--mobile-sticky {
top: calc(24px + env(safe-area-inset-top, 0px)) !important;
}
html body #ah-logo#ah-logo.ah-logo--mobile-sticky .ah-logo__lien {
width: 119px !important;
height: 54px !important;
}
#ah-logo.ah-logo--mobile-sticky .ah-logo__svg--sigle { opacity: 0; transition: opacity .45s ease; }
#ah-logo.ah-logo--mobile-sticky .ah-logo__svg--duo { opacity: 0; transition: opacity .45s ease; }
#ah-logo.ah-logo--mobile-sticky .ah-logo__svg--complet {
opacity: 1;
color: var(--ah-chocolat, #4c250a);
transition: opacity .55s ease .1s;
}
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; }
/* ============ 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;
inset: 0;
z-index: 3;
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%);
}
/* ---------- 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;
}
.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);
}
/* ---------- 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 Divi (entre vague et Histoire) ne
doit plus occuper de place — sinon trou / photo au travers.
Ne pas y coller la vague (.ah-hero). */
@media (max-width: 980px) {
body .ah-carousel-section.et_pb_section ~ .et_pb_section--with-menu:not(.ah-hero) {
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
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;
}
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 ![]()
: 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,
body.ah-hero-recouvert .ah-curseur-bouton {
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;
}
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 . 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;
/* lvh = barre rétractée, ne bouge plus pendant le scroll.
svh grandissait avec la barre d'adresse et faisait trembler
l'élément collant. */
height: 100vh !important;
height: 100lvh !important;
max-height: 100lvh;
margin: 0 !important;
z-index: 1;
overflow: visible !important;
transform: none !important;
}
body .ah-carousel-section .ah-carousel.ah-carousel {
overflow: hidden;
height: 100vh !important;
height: 100lvh !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.
lvh est la hauteur barre rétractée, c'est-à-dire le maximum que la
photo puisse occuper, et elle ne varie pas pendant le défilement : la
réserve est toujours suffisante, et toujours stable. */
.ah-hero-ph {
display: block;
width: 100%;
height: 100vh; /* repli pour les navigateurs sans lvh */
height: 100lvh;
pointer-events: none;
visibility: hidden;
}
/* 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: 0 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;
}
.ah-curseur.est-ouvert .ah-curseur__contenu {
opacity: 1;
transform: none;
transition-delay: .04s;
}
/* --- Le lien qui couvre la photo --- */
.ah-curseur-zone {
position: absolute;
inset: 0;
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: 980px), (hover: none), (pointer: coarse) {
/* 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: 1 !important;
transform: none !important;
animation: none !important;
-webkit-mask-image: none !important;
mask-image: none !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-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;
}
}
@media (prefers-reduced-motion: reduce) {
.ah-curseur, .ah-curseur__contenu { 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 ORGANIQUE INLINE — bord inférieur du hero
La section suivante est blanche sur la homepage : currentColor
reprend exactement ce blanc, y compris dans la partie pleine.
================================================================ */
body .ah-carousel-section.et_pb_section {
--ah-organic-divider-color: #ffffff;
}
body .ah-carousel-section .ah-carousel.ah-carousel {
position: relative !important;
}
body .ah-carousel-section .organic-divider {
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: -1px !important;
width: 100% !important;
max-width: none !important;
height: clamp(96px, 7vw, 126px) !important;
margin: 0 !important;
padding: 0 !important;
color: var(--ah-organic-divider-color) !important;
overflow: visible !important;
pointer-events: none !important;
z-index: 12 !important;
shape-rendering: geometricPrecision;
animation: none !important;
transition: none !important;
filter: none !important;
}
/* La section blanche remonte devant le hero sticky. Cette seconde
instance du même SVG reste solidaire de son bord supérieur : la forme
ne peut donc plus être rognée progressivement par le fond du menu. */
html body #page-container#page-container
.et_pb_section:has(.menu-exceptionnel):not(.ah-histoire)
> .organic-divider--transition {
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
bottom: 100% !important;
width: 100% !important;
max-width: none !important;
height: clamp(96px, 7vw, 126px) !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
overflow: visible !important;
pointer-events: none !important;
z-index: 2 !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;
}
@media (max-width: 767px) {
body .organic-divider {
height: 74px !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 , 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.page-id-3478 .ah-hero .ah-sep-frise {
display: none !important;
}
/* Menu collé : éteindre la photo sticky pour qu'elle ne perce plus les perles. */
@media (min-width: 981px) {
html body.page-id-3478:has(.et_pb_section.et_pb_sticky:has(.menu-exceptionnel)) .ah-carousel-section {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 0 !important;
}
}