/* ÉTANCHÉI-D — pages services (services, types d'étanchéité, entretien, accessoires, pièces à sceller). Préfixe es-.
   Même esprit que les pages services de Com'in Clean et de Nemelec, cohérent avec l'accueil V3 (ea-) : en-tête vivant,
   SIGNATURE MÉTIER animée sous le hero (une par page : ondes d'eau, membrane qui se pose, bassin qu'on entretient,
   soudure, scellement), texte en blocs aérés qui apparaissent, cartes qui entrent en 3D, galeries « Nos chantiers »
   (photos seules), bandeaux d'appel en vraie photo. Aucun texte n'est écrit ici.
   Chargé APRÈS /assets/eco/css/site.css. Tout ce qui est caché l'est par une classe posée par services.js juste avant
   d'observer : sans JS, tout reste visible (et les signatures tournent). Transform / opacity uniquement.
   AUCUN reflet qui balaie une photo (la brillance des boutons reste).
   Accent #2d9c9b : sur fond sombre il tombe à 4,4:1 -> --es-clair #5fd6d4 (8,4:1). Sur fond clair, sur-titres en #1d6f6e (5,9:1). */

.es-page{
  --es-ease:cubic-bezier(.2,.8,.2,1);
  --es-spring:cubic-bezier(.34,1.56,.64,1);
  --es-clair:#5fd6d4;
  --es-sombre:var(--accent-fonce-a11y,#1d7372);
  --es-ac:#2d9c9b;
  --es-ad:var(--accent-fonce-a11y,#1d7372);
  --es-eau:#8fd3e8;
  --es-eau-2:#c4ebf5;
  --es-beton:#cfd7de;
  --es-beton-d:#8e9aa6;
}
[hidden]{display:none!important}

/* barre de progression : un peu de lumière */
.es-page [data-progress]{box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}

/* ---------- 1. Apparitions au scroll : plus amples que celles du thème ([data-reveal] + .is-hidden) ---------- */
.es-page [data-reveal]{transition:opacity .85s var(--es-ease),transform .95s var(--es-ease),filter .85s ease}
.es-page [data-reveal].is-hidden{filter:blur(8px)}
.es-page [data-reveal].is-hidden[data-reveal="1"]{transform:translateY(46px) scale(.985)}
.es-page [data-reveal].is-hidden[data-reveal="right"]{transform:translateX(70px) scale(.97)}
.es-page [data-reveal].is-hidden[data-reveal="zoom"]{transform:scale(.92)}
/* les cartes d'une grille entrent en 3D (pivot vers l'avant) */
.es-page .grille-cartes>[data-reveal].is-hidden,.es-page .grille-galeries>[data-reveal].is-hidden{transform:perspective(900px) translateY(56px) rotateX(-14deg) scale(.95);transform-origin:50% 100%}
.es-page .grille-cartes,.es-page .grille-galeries{perspective:1200px}

/* ---------- 2. Rythme vertical : blocs aérés ---------- */
@media (min-width:768px){.es-page section.es-bloc,.es-page section.es-conf{padding:84px 24px 92px!important}}
@media (max-width:767px){.es-page section.es-bloc,.es-page section.es-conf{padding:48px 16px 56px!important}}
.es-bloc{position:relative;overflow:hidden;isolation:isolate}
/* titres de section : trait avant le sur-titre + filet qui se trace sous le h2 */
.es-tt>span:first-child{color:var(--es-sombre)!important}
.es-tt>span:first-child::before{content:'';display:inline-block;vertical-align:middle;width:30px;height:2px;margin:-3px 12px 0 0;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--es-ease) .25s}
.es-tt:not(.is-hidden)>span:first-child::before{transform:scaleX(1)}
.es-tt h2::after{content:'';display:block;height:3px;width:0;margin-top:16px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--es-clair));transition:width .9s var(--es-ease) .45s}
.es-tt:not(.is-hidden) h2::after{width:72px}
@media (max-width:480px){.es-tt>span:first-child::before{display:none}}

/* texte d'introduction : bloc large, filet vertical qui se trace, jamais en colonne contre des photos */
.es-lead{position:relative;max-width:820px;margin:0 0 38px;padding:4px 0 4px 26px;font-size:clamp(16.5px,1.5vw,19px);line-height:1.8;color:var(--texte-doux)}
.es-lead::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--es-clair));transform-origin:top;transition:transform 1s var(--es-ease) .2s}
.es-lead.is-hidden::before{transform:scaleY(0)}
.es-lead a{color:var(--es-sombre);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.es-sous{margin:0 0 22px;font-size:clamp(20px,2.2vw,26px);font-weight:700;line-height:1.2;color:var(--titre)}
@media (max-width:600px){.es-lead{padding-left:18px;margin-bottom:28px}}

/* ---------- 3. HERO : titre mot par mot, fil tracé, photo qui respire, bulles ---------- */
.es-hero{min-height:268px!important}
.es-hero>div:last-of-type{padding-top:70px!important;padding-bottom:36px!important}
.es-hero span[style*="accent-texte"]{color:var(--es-clair)!important}
.es-hero-bg{animation:esKen 26s ease-in-out infinite alternate;transform-origin:30% 50%}
@keyframes esKen{from{transform:scale(1)}to{transform:scale(1.08)}}
.es-bulles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.es-hw{display:inline-block}
.es-hw>i{display:inline-block;font-style:normal;transition:opacity .7s var(--es-ease),transform .85s var(--es-ease),filter .7s ease;transition-delay:calc(var(--i,0)*80ms + .15s)}
.es-pre .es-hw>i{opacity:0;transform:translateY(.55em);filter:blur(6px)}
.es-fil{display:block;width:84px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--es-clair));transform-origin:left center;transition:transform 1s var(--es-ease) .6s}
.es-pre .es-fil{transform:scaleX(0)}
.es-hero-in>*:not(h1):not(.es-fil){transition:opacity .8s ease .05s,transform .8s var(--es-ease) .05s}
.es-pre .es-hero-in>*:not(h1):not(.es-fil){opacity:0;transform:translateY(14px)}

/* ---------- 4. SIGNATURE MÉTIER : bande animée sous le hero ---------- */
.es-sig{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--fond-2),var(--fond));border-bottom:1px solid var(--bord)}
.es-sig-in{position:relative;height:clamp(118px,15vw,200px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.es-sig svg{position:absolute;left:50%;top:0;height:100%;width:auto;min-width:100%;transform:translateX(-50%);display:block;overflow:visible}
.es-sig.es-off *{animation-play-state:paused!important}
@media (max-width:640px){.es-sig-in{height:128px}.es-sig svg{height:128px;width:auto;min-width:0;aspect-ratio:1200/200}.es-sig--types-detancheite svg{aspect-ratio:1200/220}}

.es-rip,.es-roll,.es-etoile,.es-chaleur,.es-rouleur,.es-pulse,.es-drop{transform-box:fill-box}
.es-str-ac{fill:none;stroke:var(--es-ac);stroke-width:3;stroke-linecap:round}
.es-str-eau{fill:none;stroke:#5bb8d6;stroke-width:2.5;stroke-linecap:round;opacity:.8}
.es-fill-eau{fill:var(--es-eau);opacity:.55}
.es-fill-eau2{fill:var(--es-eau-2);opacity:.8}
.es-sol{fill:none;stroke:var(--es-beton-d);stroke-width:2;stroke-linecap:round}
.es-sol-p{fill:none;stroke:var(--es-beton-d);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round;opacity:.6}
.es-beton{fill:var(--es-beton);stroke:var(--es-beton-d);stroke-width:1.5;stroke-linejoin:round}
@keyframes esWave{from{transform:translateX(0)}to{transform:translateX(-240px)}}
@keyframes esWaveR{from{transform:translateX(-240px)}to{transform:translateX(0)}}
@keyframes esWaveS{from{transform:translateX(0)}to{transform:translateX(-160px)}}
.es-w{transform-box:view-box}

/* 4a. services : ondes d'eau — vagues qui défilent, ondes qui s'ouvrent depuis la goutte */
.es-w1{animation:esWave 7s linear infinite}
.es-w2{animation:esWaveR 10s linear infinite}
.es-w3{animation:esWave 13s linear infinite}
.es-rip{fill:none;stroke:var(--es-ac);stroke-width:2.6;transform-origin:center;transform:scale(.05);opacity:0;animation:esRip 3.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes esRip{0%{transform:scale(.05);opacity:0}8%{opacity:1}100%{transform:scale(1);opacity:0}}
.es-drop{fill:var(--es-ac);animation:esDrop 3.6s cubic-bezier(.55,0,1,.6) infinite;opacity:0}
@keyframes esDrop{0%{transform:translateY(-34px);opacity:0}4%{opacity:1}14%{transform:translateY(36px);opacity:1}15%{transform:translateY(38px);opacity:0}100%{opacity:0;transform:translateY(38px)}}

/* 4b. types d'étanchéité : la membrane se pose (roulée, soudée sur les parois), puis l'eau monte */
.es-mem{fill:none;stroke:var(--es-ac);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;animation:esMem 10s ease-in-out infinite}
@keyframes esMem{0%{stroke-dashoffset:1;opacity:1}40%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:1}99%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
.es-soude{offset-rotate:0deg;animation:esSoude 10s ease-in-out infinite;opacity:0}
@keyframes esSoude{0%{offset-distance:0%;opacity:1}40%{offset-distance:100%;opacity:1}41%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
.es-eau-monte{transform-box:view-box;transform-origin:600px 172px;animation:esMonte 10s ease-in-out infinite}
@keyframes esMonte{0%,42%{transform:scaleY(0);opacity:1}70%{transform:scaleY(1);opacity:1}92%{transform:scaleY(1);opacity:1}99%{transform:scaleY(1);opacity:0}100%{transform:scaleY(0);opacity:0}}
.es-w4{animation:esWaveS 3.4s linear infinite}
.es-rouleau{fill:#dde5ea;stroke:var(--es-beton-d);stroke-width:1.5}
.es-rouleau2{fill:var(--es-eau-2);stroke:var(--es-beton-d);stroke-width:1.2}
.es-roll{transform-origin:center;animation:esRoll 10s ease-in-out infinite}
@keyframes esRoll{0%{transform:rotate(0)}40%{transform:rotate(-540deg)}100%{transform:rotate(-540deg)}}

/* 4c. entretien : un robot nettoie le fond, l'eau scintille, des bulles montent */
.es-paroi{fill:none;stroke:var(--es-beton-d);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.es-w5{animation:esWaveS 5s linear infinite}
.es-w6{animation:esWaveS 3.4s linear infinite reverse}
.es-debris{fill:#8a96a2;animation:esDebris 10s linear infinite}
@keyframes esDebris{0%{opacity:0}85%{opacity:0}95%{opacity:1}100%{opacity:1}}
.es-robot{animation:esRobot 10s linear infinite}
@keyframes esRobot{0%{transform:translateX(260px);opacity:0}3%{opacity:1}70%{transform:translateX(900px);opacity:1}76%{transform:translateX(930px);opacity:0}100%{transform:translateX(930px);opacity:0}}
.es-robot-c{fill:var(--es-ad)}
.es-robot-v{fill:var(--es-eau-2)}
.es-roue{fill:#33424f;stroke:#fff;stroke-width:1.4}
.es-brosse{fill:none;stroke:#33424f;stroke-width:2;stroke-linecap:round}
.es-rb{fill:none;stroke:#fff;stroke-width:1.2;animation:esRb 2.4s ease-out infinite}
@keyframes esRb{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-34px);opacity:0}}
.es-bulle{fill:none;stroke:#fff;stroke-width:1.3;opacity:0;animation:esBulle 6s ease-in infinite}
@keyframes esBulle{0%{transform:translateY(0);opacity:0}12%{opacity:.85}85%{opacity:.6}100%{transform:translateY(-92px);opacity:0}}
.es-etoile{fill:#fff;transform-origin:center;transform:scale(0);opacity:0;animation:esEtoile 2.8s ease-in-out infinite}
@keyframes esEtoile{0%,100%{transform:scale(0) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{transform:scale(.3) rotate(90deg);opacity:.3}}

/* 4d. accessoires : la soudure — le Leister avance, le joint se trace, le rouleau presse derrière */
.es-toile-a{fill:#c3cfd9;stroke:var(--es-beton-d);stroke-width:1.2}
.es-toile-b{fill:#a9bac7;stroke:var(--es-beton-d);stroke-width:1.2}
.es-soudure{fill:none;stroke:var(--es-ac);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1 2;animation:esSoudure 8s linear infinite}
@keyframes esSoudure{0%{stroke-dashoffset:1;opacity:1}70%{stroke-dashoffset:0;opacity:1}90%{stroke-dashoffset:0;opacity:1}98%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
.es-leister{animation:esLeister 8s linear infinite}
@keyframes esLeister{0%{transform:translateX(328px);opacity:0}4%{opacity:1}70%{transform:translateX(868px);opacity:1}82%{transform:translateX(868px);opacity:1}90%{transform:translateX(868px);opacity:0}100%{transform:translateX(328px);opacity:0}}
.es-corps{fill:var(--es-ad)}
.es-poignee{fill:#33424f}
.es-buse{fill:#6d7c89}
.es-cable{fill:none;stroke:#33424f;stroke-width:3;stroke-linecap:round}
.es-air{fill:none;stroke:#e08a2c;stroke-width:2;stroke-linecap:round;opacity:.7;animation:esAir 1.2s ease-in-out infinite}
@keyframes esAir{0%,100%{opacity:.25}50%{opacity:.9}}
.es-chaleur{animation:esChaleur 1s ease-in-out infinite;transform-origin:center}
@keyframes esChaleur{0%,100%{transform:scale(.85);opacity:.8}50%{transform:scale(1.15);opacity:1}}
.es-bras{fill:none;stroke:#6d7c89;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.es-rouleur-c{fill:#fff;stroke:var(--es-ad);stroke-width:2.4}
.es-rouleur-r{stroke:var(--es-ad);stroke-width:1.6;fill:none}
.es-rouleur{transform-origin:center;animation:esTourne 1.6s linear infinite}
@keyframes esTourne{to{transform:rotate(360deg)}}
.es-etincelle{fill:#ffb347;opacity:0;animation:esEtincelle 1.1s ease-out infinite}
@keyframes esEtincelle{0%{transform:translate(0,0);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx,12px),-26px);opacity:0}}

/* 4e. pièces à sceller : la pièce traverse la paroi, les brides la scellent, l'eau circule */
.es-mur{stroke:var(--es-beton-d);stroke-width:1.5}
.es-conduite{fill:none;stroke:var(--es-ac);stroke-width:5;stroke-dasharray:3 9;stroke-linecap:round;opacity:.55}
.es-tuyau{animation:esTuyau 8s ease-in-out infinite}
@keyframes esTuyau{0%{transform:translateX(-130px);opacity:0}4%{opacity:1}22%{transform:translateX(0);opacity:1}92%{transform:translateX(0);opacity:1}99%{transform:translateX(0);opacity:0}100%{transform:translateX(-130px);opacity:0}}
.es-tuyau-c{fill:#d9efef;stroke:var(--es-ad);stroke-width:2}
.es-bride{fill:var(--es-ad)}
.es-collier{fill:var(--es-ac)}
.es-colliers{animation:esColliers 8s ease-in-out infinite;transform-origin:600px 100px;transform-box:view-box}
@keyframes esColliers{0%,22%{transform:scaleY(0);opacity:0}30%{transform:scaleY(1.2);opacity:1}34%{transform:scaleY(1);opacity:1}92%{transform:scaleY(1);opacity:1}99%{opacity:0}100%{transform:scaleY(0);opacity:0}}
.es-pulse{fill:none;stroke:var(--es-ac);stroke-width:2;opacity:0;transform-origin:center;transform:scale(.5);animation:esPulse 8s ease-out infinite}
@keyframes esPulse{0%,30%{transform:scale(.5);opacity:0}33%{opacity:.9}46%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.es-flux{animation:esFlux 8s ease-in-out infinite}
@keyframes esFlux{0%,38%{opacity:0}46%{opacity:1}90%{opacity:1}98%{opacity:0}100%{opacity:0}}
.es-goutte{fill:#3a9fc4;opacity:0;animation:esGoutte 2.4s linear infinite}
@keyframes esGoutte{0%{transform:translateX(0);opacity:0}8%{opacity:1}55%{transform:translateX(200px);opacity:1}100%{transform:translateX(420px);opacity:0}}
.es-w7{animation:esWaveS 4s linear infinite}

/* ---------- 5. CARTES : relief au survol, ✓ qui s'allument à la suite, images qui respirent ---------- */
.es-page .grille-cartes .hv09,.es-page .grille-cartes .hv23{will-change:transform;box-shadow:0 18px 40px -30px rgba(10,43,66,.5);transition:transform .45s var(--es-ease),box-shadow .45s,background .3s,border-color .35s!important}
.es-page .grille-cartes .hv09:hover,.es-page .grille-cartes .hv23:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--bord))!important;box-shadow:0 30px 56px -30px rgba(10,43,66,.55)}
.es-page .grille-cartes .hv09.es-tilting,.es-page .grille-cartes .hv23.es-tilting{transition:transform .08s linear,box-shadow .3s,border-color .35s!important}
.es-page .grille-cartes img,.es-page .es-conf img{transition:transform 1.1s var(--es-ease)!important}
.es-page .grille-services-accueil .hv23>div:first-child{aspect-ratio:4/3}
/* pastille ✓ : entre en rebondissant, puis halo */
.es-steps .hv09>span:first-child{position:relative}
.es-steps.es-pre .hv09>span:first-child{transform:scale(.3);opacity:.3}
.es-steps .hv09>span:first-child{transition:transform .7s var(--es-spring),opacity .5s,background .4s,color .4s,box-shadow .5s}
.es-steps>.es-lit .hv09>span:first-child{transform:scale(1);opacity:1;background:var(--accent)!important;color:var(--sur-accent)!important;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);animation:esHalo 1.2s ease-out 1}
@keyframes esHalo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 16px color-mix(in srgb,var(--accent) 0%,transparent)}}
/* fil entre les étapes (4 colonnes seulement) */
@media (min-width:1000px){
  .es-steps>[data-reveal]{position:relative}
  .es-steps>[data-reveal]:not(:last-child)::after{content:'';position:absolute;z-index:1;top:50px;left:80px;width:calc(100% - 80px + 18px + 14px);height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--accent),var(--es-clair));transform-origin:left;transition:transform .7s var(--es-ease) .35s;pointer-events:none}
  .es-steps.es-pre>[data-reveal]:not(:last-child)::after{transform:scaleX(0)}
  .es-steps>[data-reveal]:not(:last-child):not(.es-lit)::after{transform:scaleX(0)}
}

/* ---------- 6. GALERIES « Nos chantiers » : photos seules, empilées sur mobile, aucun défilement automatique ---------- */
.es-page .grille-galeries .mini-gallery{transform-style:preserve-3d;will-change:transform;box-shadow:0 18px 40px -26px rgba(10,43,66,.55);
  transition:transform .6s var(--es-ease),box-shadow .45s,border-color .35s}
.es-page .grille-galeries .mini-gallery:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--bord));box-shadow:0 30px 56px -28px rgba(10,43,66,.6)}
.es-page .grille-galeries .mini-gallery.es-tilting{transition:transform .08s linear,box-shadow .3s,border-color .35s}
.es-page .mini-gallery-track img{transition:transform 1.1s var(--es-ease)}
.es-page .mini-gallery:hover .mini-gallery-track img{transform:scale(1.045)}
.es-zoom{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(10,43,66,.62);color:#fff;border:1px solid rgba(255,255,255,.28);pointer-events:none;opacity:0;transform:scale(.7);transition:opacity .3s,transform .45s var(--es-spring)}
.es-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.es-page .mini-gallery:hover .es-zoom,.es-page .mini-gallery:focus-within .es-zoom{opacity:1;transform:none}
.es-page .mini-gallery [data-prev],.es-page .mini-gallery [data-next]{
  width:42px!important;height:42px!important;background:#fff!important;color:var(--titre)!important;border:0!important;font-size:22px!important;line-height:1;
  box-shadow:0 8px 22px -8px rgba(10,43,66,.55);transition:background .25s,color .25s,transform .35s var(--es-spring),box-shadow .25s}
.es-page .mini-gallery [data-prev]{left:12px!important}
.es-page .mini-gallery [data-next]{right:12px!important}
.es-page .mini-gallery [data-prev]:hover,.es-page .mini-gallery [data-next]:hover{background:var(--accent)!important;color:var(--sur-accent)!important;transform:translateY(-50%) scale(1.1)!important}
.es-page .mini-gallery [data-prev]:focus-visible,.es-page .mini-gallery [data-next]:focus-visible{outline:3px solid var(--accent-fonce);outline-offset:2px}
@media (max-width:599px){
  .es-page .grille-galeries>[data-reveal].is-hidden{transform:translateY(34px) scale(.97)}
  .es-page .mini-gallery [data-prev],.es-page .mini-gallery [data-next]{width:40px!important;height:40px!important}
  .es-zoom{display:none}
}
@media (hover:none){.es-page .mini-gallery:hover .mini-gallery-track img{transform:none}}

/* ---------- 7. Section « Configurez votre piscine ! » : contenu inchangé, cadre décalé derrière l'image ---------- */
.es-conf-img>div{position:relative;z-index:1}
.es-conf-img::before{content:'';position:absolute;inset:16px -14px -16px 14px;border:2px solid var(--accent);border-radius:30px;opacity:.35;z-index:0;transition:transform .9s var(--es-ease) .3s,opacity .9s ease .3s}
.es-conf-img.is-hidden::before{opacity:0;transform:translate(-20px,-20px)}
.es-conf span[style*="accent-texte"]{color:var(--es-sombre)!important}
@media (max-width:640px){.es-conf-img::before{inset:10px -8px -10px 8px}}

/* ---------- 8. BANDEAU D'APPEL : vraie photo de chantier à gauche (sujet dans le tiers gauche), texte à droite ---------- */
.es-appel>img.es-appel-photo{position:absolute;left:0;top:0;bottom:0;width:62%;height:100%;object-fit:cover;object-position:var(--es-pos,30% 50%);
  animation:esKen2 24s ease-in-out infinite alternate;transform-origin:25% 45%}
@keyframes esKen2{from{transform:scale(1)}to{transform:scale(1.07)}}
.es-appel>div:nth-child(2){background:linear-gradient(90deg,rgba(var(--overlay-rgb),0) 0%,rgba(var(--overlay-rgb),0) 30%,rgba(var(--overlay-rgb),.82) 52%,rgb(var(--overlay-rgb)) 68%)!important}
.es-appel span[style*="color:var(--accent)"]{color:var(--es-clair)!important}
.es-appel>div:nth-child(3)>*{transition:opacity .8s ease,transform .9s var(--es-ease)}
.es-appel.is-hidden>div:nth-child(3)>*{opacity:0;transform:translateY(20px)}
.es-appel>div:nth-child(3)>*:nth-child(2){transition-delay:.12s}
.es-appel>div:nth-child(3)>*:nth-child(3){transition-delay:.24s}
.es-appel>div:nth-child(3)>*:nth-child(4){transition-delay:.36s}
.es-appel .hv20{position:relative;overflow:hidden;isolation:isolate}
.es-appel .hv20::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-140%) skewX(-20deg);transition:transform .75s var(--es-ease)}
.es-appel .hv20:hover::after{transform:translateX(260%) skewX(-20deg)}
html .es-appel .hv20{transition:transform .5s var(--es-spring),background .2s,box-shadow .25s,color .2s,border-color .2s!important}
html .es-appel .hv20:hover{transform:translateY(-3px) scale(1.045)}
@media (max-width:640px){
  .es-appel{flex-direction:column;align-items:stretch;min-height:0!important}
  .es-appel>img.es-appel-photo{position:relative;width:100%;height:250px;object-position:var(--es-pos-m,30% 50%);transform-origin:30% 40%}
  .es-appel>div:nth-child(2){background:linear-gradient(180deg,rgba(var(--overlay-rgb),0) 0,rgba(var(--overlay-rgb),0) 120px,rgb(var(--overlay-rgb)) 250px,rgb(var(--overlay-rgb)) 100%)!important}
  .es-appel>div:nth-child(3){margin-left:0!important;padding:28px 24px 34px!important}
}

/* ---------- Mouvement réduit : tout est coupé, les signatures restent à leur état final ---------- */
@media (prefers-reduced-motion:reduce){
  .es-page [data-reveal]{transition:none!important;filter:none!important}
  .es-page [data-reveal].is-hidden{opacity:1!important;transform:none!important}
  .es-hw>i,.es-fil,.es-hero-in>*,.es-hero-bg,.es-appel>img.es-appel-photo,.es-appel>div:nth-child(3)>*{transition:none!important;animation:none!important}
  .es-pre .es-hw>i,.es-pre .es-hero-in>*:not(.es-fil){opacity:1!important;transform:none!important;filter:none!important}
  .es-pre .es-fil{transform:none!important}
  .es-bulles,.es-zoom{display:none!important}
  .es-sig svg *{animation:none!important}
  .es-rip,.es-drop,.es-soude,.es-etincelle,.es-bulle,.es-etoile,.es-pulse,.es-goutte,.es-rb{display:none}
  .es-eau-monte,.es-colliers,.es-flux,.es-tuyau,.es-leister,.es-robot,.es-mem,.es-soudure{opacity:1!important}
  .es-leister{transform:translateX(868px)}
  .es-robot{transform:translateX(900px)}
  .es-eau-monte{transform:none}
  .es-debris{opacity:0}
  .es-lead::before,.es-tt>span:first-child::before{transition:none!important;transform:none!important}
  .es-tt h2::after{width:72px!important;transition:none!important}
  .es-conf-img::before{opacity:.35!important;transform:none!important;transition:none!important}
  .es-steps .hv09>span:first-child{transform:none!important;opacity:1!important;animation:none!important;transition:none!important}
  .es-steps>[data-reveal]::after{transform:none!important;transition:none!important}
  .es-page .grille-galeries .mini-gallery,.es-page .mini-gallery-track img,.es-page .grille-cartes .hv09,.es-page .grille-cartes .hv23{transition:none!important}
  .es-page .mini-gallery:hover .mini-gallery-track img{transform:none}
  .es-appel .hv20::after{display:none}
  html .es-appel .hv20:hover{transform:none}
}