/* Police Plus Jakarta Sans (licence SIL OFL, fichier dans assets/fonts) — hébergée sur le site */
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/plus-jakarta-sans.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* =====================================================================
   ABS Débouchage — style inspiré du modèle « Solaris » (MotionSite)
   adapté au débouchage. Règles : skill ui-ux-pro-max (contraste AA,
   cibles tactiles 44px, reduced-motion, pas d'emoji, icônes SVG).
   ===================================================================== */
:root{
  --brand:#c2410c; --brand-dk:#9a3412; --brand-hi:#fb7a35; --brand-50:#fff3ec; --brand-100:#ffe2d1;
  --dark:#0b1b2e; --dark-2:#12263f; --dark-3:#1b3554;
  --ink:#0d1726; --text:#3b4656; --muted:#64707f;
  --bg:#ffffff; --soft:#f4f6f9; --line:#e5e9ef; --line-2:#cfd6e0;
  --ok:#16a34a; --ok-ink:#15803d; --danger:#b91c1c;
  --wa:#25d366; --wa-dk:#1fb457; --wa-ink:#063b1d;
  --r:12px; --r-lg:20px; --r-xl:28px; --pill:999px;
  --sh-1:0 1px 3px rgba(13,23,38,.06);
  --sh-2:0 4px 10px rgba(13,23,38,.05),0 14px 34px rgba(13,23,38,.09);
  --sh-3:0 10px 24px rgba(13,23,38,.10),0 30px 70px rgba(13,23,38,.18);
  --f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f);font-size:16.5px;line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;padding-bottom:76px}
@media(min-width:960px){body{padding-bottom:0}}
h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--brand-hi);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:10px 14px;z-index:200;border-radius:10px}
.skip:focus{left:8px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 28px}
@media(max-width:560px){.wrap{padding:0 18px}}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-fill{fill:currentColor;stroke:none}

/* ---------- Boutons ---------- */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 24px;border-radius:var(--pill);border:1.5px solid transparent;font-weight:700;font-size:16px;line-height:1.2;text-align:center;letter-spacing:-.005em;transition:background .25s var(--ease),border-color .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
.btn .ico{width:19px;height:19px;stroke-width:2.2}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-lg{--h:56px;font-size:17px;padding:0 28px}
.btn-call{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(194,65,12,.28)}
.btn-call:hover{background:var(--brand)}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.24)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:var(--dark-3)}
.btn-line{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--ink)}
.btn-wa{background:var(--wa);color:var(--wa-ink)}
.btn-wa:hover{background:var(--wa-dk)}
.btn-white{background:#fff;color:var(--brand-dk)}
.btn-white:hover{background:var(--brand-50)}
.btn-block{width:100%}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brand);font-size:15px}
.more .ico{width:17px;height:17px;transition:transform .25s var(--ease)}

/* ---------- Puce d'en-tête de section ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--pill);background:var(--brand-50);color:var(--brand-dk);font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--brand);font-style:normal}
.on-dark .chip{background:rgba(251,122,53,.14);color:#ffb68d}
.on-dark .chip i{background:var(--brand-hi)}

/* ---------- Navigation (transparente → barre flottante) ---------- */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;transition:padding .35s var(--ease)}
.navbar{display:flex;align-items:center;gap:18px;height:64px;padding:0 10px 0 22px;border-radius:var(--pill);transition:background .35s var(--ease),box-shadow .35s,height .35s var(--ease);color:#fff}
.nav-wrap.scrolled{padding:10px 0}
.nav-wrap.scrolled .navbar,.nav-solid .navbar{background:var(--dark);box-shadow:0 12px 30px rgba(11,27,46,.25)}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0}
.brand svg{width:38px;height:38px;flex:none}
.brand-name{display:block;font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;color:#fff}
.brand-name b{color:var(--brand-hi);font-weight:800}
.brand-sub{display:block;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.72);white-space:nowrap;line-height:1.2}
.nav{display:flex;align-items:center;gap:2px}
.nav>a,.nav .dd>button{display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:var(--pill);font-weight:600;font-size:15px;color:rgba(255,255,255,.92);background:none;border:0;transition:background .2s,color .2s}
.nav>a:hover,.nav .dd>button:hover,.nav>a[aria-current]{background:rgba(255,255,255,.12);color:#fff}
.dd{position:relative}
.dd>button .ico{width:16px;height:16px;transition:transform .25s}
.dd-menu{position:absolute;top:calc(100% + 16px);left:-12px;width:min(620px,92vw);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.dd-menu::before{content:"";position:absolute;inset:-18px 0 auto;height:18px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.dd:hover>button .ico,.dd.open>button .ico{transform:rotate(180deg)}
.dd-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);font-weight:700;font-size:15px;color:var(--ink);line-height:1.3}
.dd-menu a:hover{background:var(--soft)}
.dd-menu a .ico{color:var(--brand);width:22px;height:22px}
.dd-menu small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.lang{display:flex;gap:2px;margin-left:4px}
.lang a,.lang span{font-weight:700;font-size:13px;padding:7px 10px;border-radius:var(--pill);min-width:36px;text-align:center}
.lang span{background:rgba(255,255,255,.16)}
.lang a{color:rgba(255,255,255,.75)}
.lang a:hover{color:#fff}
.head-call{--h:46px;padding:0 18px;font-size:15px;box-shadow:none}
.burger{display:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:0;color:#fff;align-items:center;justify-content:center}
@media(max-width:1080px){.nav>a.hide-md{display:none}}
@media(max-width:959px){
  .nav{position:fixed;top:calc(var(--nav-top,82px) + 8px);left:12px;right:12px;bottom:auto;max-height:calc(100vh - var(--nav-top,92px) - 90px);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);flex-direction:column;align-items:stretch;gap:0;padding:10px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav>a,.nav .dd>button{font-size:17px;padding:14px 12px;width:100%;justify-content:space-between;color:var(--ink);border-radius:var(--r)}
  .nav>a.hide-md{display:flex}
  .nav>a:hover,.nav .dd>button:hover{background:var(--soft);color:var(--ink)}
  .dd-menu{position:static;transform:none;width:auto;opacity:1;visibility:visible;display:none;grid-template-columns:1fr;box-shadow:none;padding:0 0 6px}
  .dd.open .dd-menu{display:grid}
  .burger{display:flex}
  .head-call span{display:none}.head-call{width:46px;padding:0}
  .navbar{padding:0 8px 0 16px;height:60px}
}
@media(max-width:440px){.brand-sub{display:none}.lang a,.lang span{padding:7px 8px;min-width:32px}.navbar{gap:8px}}

/* ---------- Héros diaporama ---------- */
.hero{position:relative;min-height:max(640px,94vh);color:#fff;overflow:hidden;background:var(--dark);display:flex;align-items:flex-end}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.slide.on img{animation:kb 8s linear forwards}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.14)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,19,33,.82) 0%,rgba(8,19,33,.55) 42%,rgba(8,19,33,.12) 75%),linear-gradient(0deg,rgba(8,19,33,.75) 0%,rgba(8,19,33,0) 45%),linear-gradient(180deg,rgba(8,19,33,.55) 0%,rgba(8,19,33,0) 22%);pointer-events:none}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:56px}
.hero .hlabel{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;padding:7px 14px 7px 10px;border-radius:var(--pill);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero .hlabel .pulse{margin-right:2px}
.slide-txt{position:relative;min-height:200px;max-width:760px}
.slide-txt>div{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.slide-txt>div.on{position:relative;opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
.slide-txt .k{display:block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-hi);margin-bottom:12px}
.slide-txt .t{display:block;font-size:clamp(40px,6vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:#fff}
.slide-txt .t em{font-style:normal;color:var(--brand-hi)}
.slide-txt p{margin-top:16px;font-size:clamp(17px,1.5vw,19px);color:rgba(255,255,255,.86);max-width:560px}
.hero .cta-row{margin-top:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:44px}
.prog{display:flex;gap:14px;list-style:none;flex:1;max-width:620px}
.prog li{flex:1}
.prog button{display:block;width:100%;text-align:left;background:none;border:0;color:rgba(255,255,255,.7);font-size:13.5px;font-weight:600;padding:10px 0 0;min-height:44px}
.prog button.on{color:#fff}
.prog .bar{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;margin-bottom:10px}
.prog .bar i{display:block;height:100%;width:0;background:var(--brand-hi)}
.prog button.on .bar i{animation:fillbar 7s linear forwards}
.prog button.done .bar i{width:100%}
@keyframes fillbar{to{width:100%}}
.avail{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:var(--r-lg);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap}
.avail strong{display:block;font-size:14.5px;line-height:1.3}
.avail span{display:block;font-size:13px;color:rgba(255,255,255,.75)}
.pulse{position:relative;width:9px;height:9px;border-radius:50%;background:#4ade80;flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2s var(--ease) infinite}
@keyframes ping{from{transform:scale(1);opacity:.6}to{transform:scale(2.8);opacity:0}}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;font-size:14px;color:rgba(255,255,255,.75);margin-bottom:16px}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a:hover{color:#fff;text-decoration:underline}
.sv-hero{min-height:max(560px,80vh)}
.sv-hero .slide-txt{min-height:0}
.sv-price{display:inline-flex;align-items:baseline;gap:10px;margin-top:18px;padding:10px 16px;border-radius:var(--r);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.sv-price b{font-size:22px;font-weight:800;color:#fff;white-space:nowrap}
.sv-price span{font-size:14px;color:rgba(255,255,255,.8)}
@media(max-width:860px){.hero-foot{flex-direction:column;align-items:stretch}.prog{max-width:none}.avail{align-self:flex-start}}
@media(max-width:560px){.hero{min-height:auto}.hero-inner{padding-top:120px;padding-bottom:36px}.slide-txt{min-height:0}.hero .cta-row .btn{flex:1 1 100%}.prog button{font-size:12.5px}.hero::after{background:linear-gradient(0deg,rgba(8,19,33,.9) 0%,rgba(8,19,33,.55) 60%,rgba(8,19,33,.5) 100%)}}

/* ---------- Sections ---------- */
.section{padding:76px 0}
.section-sm{padding:52px 0}
.soft{background:var(--soft)}
.dark{background:var(--dark);color:#b8c4d3}
.dark h2,.dark h3{color:#fff}
.sh{max-width:720px;margin-bottom:36px}
.sh.center{margin-left:auto;margin-right:auto;text-align:center}
.sh .chip{margin-bottom:14px}
.sh h2{font-size:clamp(28px,3.3vw,42px);margin-bottom:12px}
.sh h2 em{font-style:normal;color:var(--brand)}
.dark .sh h2 em{color:var(--brand-hi)}
.sh p{font-size:18px;color:var(--muted)}
.dark .sh p{color:#9fb0c4}
.sh-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}
.sh-row .sh{margin-bottom:0}
@media(max-width:700px){.section{padding:52px 0}.section-sm{padding:40px 0}.sh{margin-bottom:24px}.sh-row{flex-direction:column;align-items:flex-start;margin-bottom:24px}}

/* ---------- Bloc « on ne fait pas que déboucher » ---------- */
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.intro .sh{margin-bottom:28px}
.feat{list-style:none;display:grid;gap:22px;margin-bottom:34px}
.feat li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.feat .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand-50);color:var(--brand)}
.feat .ic .ico{width:21px;height:21px}
.feat h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:2px}
.feat p{font-size:15.5px;color:var(--muted)}
.hq{border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-3);overflow:hidden}
.hq-ph{aspect-ratio:16/10;overflow:hidden}
.hq-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.hq:hover .hq-ph img{transform:scale(1.04)}
.hq-body{padding:24px 26px 26px}
.hq-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.hq-top small{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hq-top b{display:block;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.badge-ok{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--pill);background:#ecfdf3;color:var(--ok-ink);font-size:13px;font-weight:700;white-space:nowrap}
.badge-ok .pulse{width:7px;height:7px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats div{padding:14px 10px;border-radius:var(--r);background:var(--soft);text-align:center}
.stats b{display:block;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.2}
.stats span{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
@media(max-width:960px){.intro{grid-template-columns:1fr;gap:44px}}

/* ---------- Cartes services (style projets) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-2);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.card-ph{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--soft)}
.card-ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card-ph img{transform:scale(1.07)}
.card-ph::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(8,19,33,.55),transparent);pointer-events:none}
.tags{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:6px;flex-wrap:wrap;z-index:1}
.tag{padding:5px 11px;border-radius:var(--pill);font-size:12.5px;font-weight:700;background:rgba(255,255,255,.94);color:var(--ink)}
.tag.b{background:var(--brand);color:#fff}
.card-ph .on-img{position:absolute;left:16px;bottom:12px;z-index:1;display:flex;align-items:center;gap:7px;color:#fff;font-size:13px;font-weight:600}
.card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 22px}
.card h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2}
.card p{font-size:15.5px;color:var(--muted);flex:1;margin-bottom:18px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}
.card:hover .more .ico{transform:translateX(4px)}
.card.wide{grid-column:1/-1;flex-direction:row;background:var(--dark);color:#b8c4d3}
.card.wide .card-ph{flex:1.2;aspect-ratio:auto;min-height:300px}
.card.wide .card-ph::after{background:linear-gradient(90deg,transparent 55%,var(--dark))}
.card.wide .card-body{flex:1;justify-content:center;padding:40px}
.card.wide h3{color:#fff;font-size:28px}
.card.wide p{color:#9fb0c4;flex:0;font-size:16.5px}
.card.wide .card-foot{border-color:rgba(255,255,255,.12);color:#fff}
.card.wide .more{color:var(--brand-hi)}
@media(max-width:1000px){.cards{grid-template-columns:1fr 1fr}.card.wide{grid-column:auto;flex-direction:column}.card.wide .card-ph{aspect-ratio:16/11;min-height:0}.card.wide .card-ph::after{background:linear-gradient(0deg,rgba(8,19,33,.55),transparent)}.card.wide .card-body{padding:22px 24px}.card.wide h3{font-size:20px}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}

/* ---------- Étapes ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 14px)}
.steps li{position:relative;text-align:center;padding:0 6px}
.steps .num{position:relative;z-index:1;width:56px;height:56px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--brand);color:var(--brand);box-shadow:0 0 0 8px var(--soft)}
.steps .num .ico{width:24px;height:24px}
.steps li::after{counter-increment:s;content:counter(s);position:absolute;top:-6px;left:calc(50% + 16px);z-index:2;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.steps h3{font-size:18px;margin-bottom:6px;letter-spacing:-.015em}
.steps p{font-size:15px;color:var(--muted)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:44px}.steps::before{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.steps li{text-align:left;padding:0 0 0 76px;min-height:56px}.steps .num{position:absolute;left:0;top:0;margin:0}.steps li::after{left:40px}}

/* ---------- Section sombre + diagnostic ---------- */
.diag-sec{position:relative;overflow:hidden}
.diag-sec .bgimg{position:absolute;inset:0;opacity:.18}
.diag-sec .bgimg img{width:100%;height:100%;object-fit:cover}
.diag-sec::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 30%,rgba(11,27,46,.86) 100%)}
.diag-wrap{position:relative;z-index:1;display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.diag-aside .sh{margin-bottom:26px}
.ticks{list-style:none;display:grid;gap:12px;margin-bottom:30px}
.ticks li{display:flex;gap:12px;align-items:center;color:#fff;font-weight:600}
.ticks .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--ok);color:#fff;stroke-width:3}
.diag-aside .alt{font-size:15px;color:#9fb0c4}
.diag-aside .alt a{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em}
.diag-aside .alt a .ico{color:var(--brand-hi);width:24px;height:24px}
.diag{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;color:var(--text)}
.diag-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px 0}
.diag-head h3{font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.diag-head p{font-size:14px;color:var(--muted)}
.diag-steps{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.diag-bar{display:flex;gap:4px}
.diag-bar i{width:24px;height:5px;border-radius:5px;background:var(--line);transition:background .3s}
.diag-bar i.on{background:var(--brand)}
.diag-body{padding:22px 28px 28px}
.diag-q{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px}
.diag-hint{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.diag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.d-opt{display:flex;align-items:center;gap:11px;width:100%;min-height:58px;padding:12px 14px;background:var(--soft);border:1.5px solid transparent;border-radius:var(--r);text-align:left;font-weight:700;font-size:14.5px;line-height:1.3;color:var(--ink);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.d-opt .ico{width:22px;height:22px;color:var(--brand)}
.d-opt:hover{background:var(--brand-50);border-color:var(--brand-100)}
.d-opt[aria-pressed=true]{background:var(--brand-50);border-color:var(--brand)}
.d-list{display:grid;gap:10px}
.d-list .d-opt{min-height:56px;padding:14px 18px;font-size:15.5px}
.d-list .d-opt .ico{color:var(--muted);margin-left:auto;width:19px;height:19px}
.diag-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.d-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);font-weight:700;font-size:14.5px;padding:10px 2px;min-height:44px}
.d-back:hover{color:var(--ink)}
.d-back .ico{width:17px;height:17px}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 18px;border-radius:var(--r);margin-bottom:14px}
.verdict .ico{width:24px;height:24px;margin-top:1px}
.verdict strong{display:block;font-size:16px;font-weight:800;line-height:1.35}
.verdict p{font-size:14.5px;margin-top:3px}
.verdict.urgent{background:#fef2f2;color:#7f1d1d}.verdict.urgent strong{color:#991b1b}
.verdict.today{background:#fffbeb;color:#78350f}.verdict.today strong{color:#92400e}
.verdict.plan{background:#f0fdf4;color:#14532d}.verdict.plan strong{color:#166534}
.res-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-bottom:18px}
.res-box{padding:14px 16px;border-radius:var(--r);background:var(--soft)}
.res-box small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.res-box b{display:block;font-size:22px;font-weight:800;color:var(--brand);letter-spacing:-.02em;line-height:1.25}
.res-box p{font-size:14.5px;color:var(--text);line-height:1.5}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field label small{font-weight:600;text-transform:none;letter-spacing:0}
.field input{width:100%;min-height:50px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-size:16px;background:var(--soft);transition:border-color .2s,background .2s,box-shadow .2s}
.field input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(194,65,12,.12)}
.field input[aria-invalid=true]{border-color:var(--danger)}
.field .err{display:none;color:var(--danger);font-size:13.5px;font-weight:700;margin-top:6px}
.field .err.show{display:block}
.res-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.res-actions .btn{box-shadow:none}
.diag-note{font-size:13.5px;color:var(--muted);margin-top:12px;text-align:center}
.diag-sent{display:none;margin-top:12px;padding:12px 14px;border-radius:var(--r);background:#f0fdf4;color:#14532d;font-size:14.5px}
.diag-sent.show{display:block}
.diag-noscript{padding:28px}
.js .diag-noscript{display:none}
.diag-panel[hidden]{display:none}
.diag-panel{animation:fadein .35s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:960px){.diag-wrap{grid-template-columns:1fr;gap:40px}}
@media(max-width:600px){.diag-grid{grid-template-columns:1fr 1fr}.diag-head{padding:18px 18px 0;flex-direction:column;align-items:flex-start;gap:8px}.diag-body{padding:18px}.res-grid,.fields,.res-actions{grid-template-columns:1fr}}

/* ---------- Tarifs ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:32px 30px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-2)}
.plan.hot{background:var(--dark);color:#b8c4d3;box-shadow:var(--sh-3)}
.plan.hot h3{color:#fff}
.plan .chip{align-self:flex-start;margin-bottom:16px}
.plan h3{font-size:21px;margin-bottom:6px}
.plan small{font-size:14.5px;color:var(--muted)}
.plan.hot small{color:#9fb0c4}
.plan .amount{font-size:46px;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1.1;margin:4px 0 22px}
.plan.hot .amount{color:#fff}
.plan .amount.q{font-size:32px;line-height:1.45}
.plan ul{list-style:none;display:grid;gap:12px;margin-bottom:28px;flex:1}
.plan li{display:flex;gap:10px;font-size:15.5px}
.plan li .ico{width:20px;height:20px;padding:3px;border-radius:50%;background:#ecfdf3;color:var(--ok-ink);stroke-width:3;margin-top:2px}
.plan.hot li .ico{background:rgba(74,222,128,.15);color:#4ade80}
.plan .btn-call{box-shadow:none}
.p-note{text-align:center;font-size:14.5px;color:var(--muted);margin-top:24px}
@media(max-width:900px){.plans{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,340px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:0 -28px;padding:6px 28px 18px;scroll-padding:0 28px;scrollbar-width:none}.plans::-webkit-scrollbar{display:none}.plans>*{scroll-snap-align:start}}
@media(max-width:560px){.plans{margin:0 -18px;padding:6px 18px 18px;scroll-padding:0 18px}}

/* ---------- Zones ---------- */
/* ---------- Zone d'intervention : carte interactive ---------- */
.zones{display:grid;grid-template-columns:minmax(0,430px) 1fr;gap:48px;align-items:start}
.zmap{position:sticky;top:96px;border-radius:var(--r-xl);background:var(--dark);overflow:hidden;box-shadow:var(--sh-3);isolation:isolate}
.zm-svg{width:100%;height:auto;aspect-ratio:600/582}
.zm-ctx path{fill:var(--dark-2);stroke:#21405f;stroke-width:1}
.zm-bxl{fill:var(--brand);stroke:var(--dark);stroke-width:1.5;stroke-linejoin:round;cursor:pointer;transition:fill .2s var(--ease),opacity .5s var(--ease)}
.zm-peri{fill:url(#zm-hatch);stroke:var(--brand-hi);stroke-width:1.3;stroke-dasharray:5 4;stroke-linejoin:round;cursor:pointer;transition:opacity .5s var(--ease)}
.zm-hb{fill:#2e1a14}.zm-hl{stroke:#8a3a17;stroke-width:2.6}
.zm-bxl:hover,.zm-bxl.hov{fill:#e2531a}
.zm-bxl.on{fill:#fb7a35}
.zm-peri:hover,.zm-peri.hov,.zm-peri.on{stroke-dasharray:none;stroke-width:2.2}
.zm-shapes .on{stroke:#fff;stroke-width:2.4}
.js .zmap:not(.in) .zm-bxl,.js .zmap:not(.in) .zm-peri{opacity:0}
.zmap.in .zm-bxl,.zmap.in .zm-peri{transition-delay:calc(var(--i) * 45ms),calc(var(--i) * 45ms)}
.zmap.in.ready .zm-bxl,.zmap.in.ready .zm-peri{transition-delay:0s}
.zm-pin{transition:transform .75s var(--ease);pointer-events:none}
.zm-drop g>path:first-child{fill:#38bdf8;stroke:#fff;stroke-width:2.2;stroke-linejoin:round}
.zm-shine{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.85}
.zm-drop.fall{animation:zmFall .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes zmFall{0%{transform:translateY(-26px);opacity:0}60%{opacity:1}100%{transform:none}}
.zm-rip{fill:none;stroke:#7dd3fc;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:zmRip 2.4s ease-out infinite}
.zm-rip.r2{animation-delay:1.2s}
@keyframes zmRip{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.zm-pipe path{fill:none;stroke-linecap:round}
.zm-pipe-c{stroke:#0e2a47;stroke-width:9;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 1px rgba(125,211,252,.6))}
.zm-pipe-w{stroke:#7dd3fc;stroke-width:3;stroke-dasharray:2 9;opacity:0;animation:zmFlow .9s linear infinite}
.zm-pipe.go .zm-pipe-c{animation:zmLay .7s var(--ease) forwards}
.zm-pipe.go .zm-pipe-w{opacity:1;transition:opacity .3s .5s}
@keyframes zmLay{to{stroke-dashoffset:0}}
@keyframes zmFlow{to{stroke-dashoffset:-11}}
.zm-lbl{fill:#fff;font:800 17px var(--f);paint-order:stroke;stroke:var(--dark);stroke-width:4px;stroke-linejoin:round}
.zm-legend{position:absolute;top:16px;left:16px;list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;font-weight:700;color:#dbe3ee}
.zm-legend li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--pill);background:rgba(11,27,46,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1)}
.zm-legend i{width:12px;height:12px;border-radius:3px;flex:none}
.k-bxl{background:var(--brand)}.k-peri{border:1.5px dashed var(--brand-hi);background:repeating-linear-gradient(45deg,#2e1a14 0 3px,#8a3a17 3px 5px)}
.zm-card{display:grid;row-gap:2px;padding:16px 20px 18px;background:#fff;border-top:1px solid var(--line)}
.zm-card>.zm-btn{margin-top:12px}
.zm-live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--ok-ink);text-transform:uppercase;letter-spacing:.04em}
.zm-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:zmLive 2s infinite}
@keyframes zmLive{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.zm-name{font-size:21px;line-height:1.2;color:var(--ink);letter-spacing:-.02em;min-height:1.2em}
.zm-name b{font-weight:800}.zm-name span{font-weight:600;color:var(--muted);font-size:15px;margin-left:4px}
.zm-eta{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--text)}
.zm-eta .ico{width:16px;height:16px;color:var(--brand)}
.zm-btn{justify-content:center;min-height:46px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zsearch{position:relative;display:block;margin-bottom:22px}
.zsearch .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none}
.zsearch input{width:100%;min-height:52px;padding:12px 16px 12px 46px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;font-size:16px;font-weight:600;color:var(--ink);box-shadow:var(--sh-1);transition:border-color .18s,box-shadow .18s}
.zsearch input::placeholder{color:var(--muted);font-weight:500}
.zsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(194,65,12,.14)}
.zempty{margin:-6px 0 18px;padding:14px 16px;border-radius:12px;background:var(--brand-50);color:var(--brand-dk);font-weight:600;font-size:15px}
.zgroup+.zgroup{margin-top:24px}
.zgroup[hidden]{display:none}
.zh{display:flex;align-items:center;gap:10px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.zh span{padding:2px 9px;border-radius:var(--pill);background:var(--soft);border:1px solid var(--line);font-size:12px;letter-spacing:0;color:var(--ink)}
.zlist{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.zlist li[hidden]{display:none}
.zc{position:relative;width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px 8px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font-size:15px;font-weight:700;color:var(--ink);border-radius:0;transition:background .18s,color .18s}
.zc::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--brand);transform:scaleY(0);transition:transform .2s var(--ease)}
.zc-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zc-cp{font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:600;color:var(--muted)}
.zc-ok{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;opacity:.55;transition:opacity .2s}
.zc:hover,.zc.hov{background:#fff;color:var(--brand-dk)}
.zc:hover .zc-ok,.zc.hov .zc-ok{opacity:1}
.zc[aria-pressed=true]{background:#fff;color:var(--brand-dk)}
.zc[aria-pressed=true]::before{transform:scaleY(1)}
.zc[aria-pressed=true] .zc-ok{opacity:1;box-shadow:0 0 0 4px rgba(22,163,74,.16)}
.zc[aria-pressed=true] .zc-cp{color:var(--brand)}
.zl-peri .zc-ok{background:none;border:1.5px solid var(--ok)}
.zmore{margin-top:20px;font-size:15px;color:var(--text)}
@media(max-width:420px){.zlist{grid-template-columns:1fr}}
@media(max-width:960px){.zones{grid-template-columns:1fr}.zmap{position:relative;top:auto;max-width:430px;width:100%;margin-inline:auto}}
@media(max-width:600px){.zm-legend{top:12px;left:12px}.zm-lbl{font-size:21px}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:48px;align-items:start}
.faq-side{position:sticky;top:96px}
.faq-side .sh{margin-bottom:24px}
.faq-ask{padding:24px;border-radius:var(--r-lg);background:var(--dark);color:#b8c4d3;display:grid;gap:10px}
.faq-ask h3{color:#fff;font-size:20px}
.faq-ask p{font-size:15px;margin-bottom:6px}
@media(max-width:960px){.faq-grid{grid-template-columns:1fr;gap:8px}.faq-side{position:static}.faq-ask{display:none}}
.faq{display:grid;gap:12px}
.faq details{border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-1);border:1px solid var(--line);transition:box-shadow .25s}
.faq details[open]{box-shadow:var(--sh-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;font-weight:700;font-size:16.5px;color:var(--ink);list-style:none;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--soft);color:var(--ink);transition:transform .3s var(--ease),background .25s,color .25s}
.faq details[open] summary .ico{transform:rotate(180deg);background:var(--brand);color:#fff}
.faq details p{padding:0 24px 22px;font-size:15.5px}

/* ---------- Bandeau d'appel ---------- */
.band{position:relative;overflow:hidden;background:var(--brand);color:#fff}
.band::before{content:"";position:absolute;width:560px;height:560px;right:-160px;top:-260px;border-radius:50%;background:rgba(255,255,255,.08)}
.band .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:64px;padding-bottom:64px}
.band h2{color:#fff;font-size:clamp(28px,3.4vw,42px);margin-bottom:8px}
.band p{font-size:18px;color:#ffe3d4}
.band .cta-row{flex:none}
.band .btn-dark{box-shadow:0 10px 24px rgba(0,0,0,.2)}
@media(max-width:860px){.band .wrap{flex-direction:column;align-items:flex-start}.band .cta-row{width:100%}.band .btn{flex:1 1 240px}}

/* ---------- Pages service ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.box{padding:32px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-2)}
.box h2{font-size:22px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.box h2 .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brand-50);color:var(--brand)}
.box h2 .ic.b{background:#eef4ff;color:#1d4ed8}
.box h2 .ic .ico{width:20px;height:20px}
.list{list-style:none;display:grid;gap:12px}
.list li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--ink);font-weight:500}
.list li .ico{width:20px;height:20px;margin-top:2px;color:var(--brand)}
.list.b li .ico{color:#1d4ed8}
.list.ok li .ico{color:var(--ok-ink);stroke-width:2.6}
.tip{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:24px 28px;border-radius:var(--r-lg);background:var(--brand-50);border:1px solid var(--brand-100);margin-top:28px}
.tip .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff}
.tip .ic .ico{width:21px;height:21px}
.tip h3{font-size:17px;color:var(--brand-dk);margin-bottom:4px}
.tip p{color:#7c2d12;font-size:15.5px}
@media(max-width:760px){.cols2{grid-template-columns:1fr}.box{padding:24px}.tip{padding:20px}}

/* ---------- Contact / pages simples ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.c-card{display:flex;flex-direction:column;gap:2px;padding:24px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-2);transition:transform .3s var(--ease),box-shadow .3s}
a.c-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.c-card .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand-50);color:var(--brand);margin-bottom:14px}
.c-card .ic .ico{width:21px;height:21px}
.c-card small{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.c-card b{font-size:17px;font-weight:800;color:var(--ink);word-break:break-word}
@media(max-width:960px){.contact-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.contact-grid{grid-template-columns:1fr}}
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.blocks{grid-template-columns:1fr}}
.prose{max-width:760px}
.prose p{margin-bottom:16px}
.page-top{padding-top:140px}

/* ---------- Pied de page ---------- */
.footer{background:#07121f;color:#93a3b8;font-size:15px;padding:56px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.footer h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:16px}
.footer ul{list-style:none;display:grid;gap:10px}
.footer p{max-width:330px}
.footer a:hover{color:#fff}
.footer .brand{margin-bottom:16px}
.footer .phone{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em}
.footer .phone .ico{color:var(--brand-hi)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid #16263b;margin-top:56px;padding-top:22px;font-size:13.5px}
.legal a{text-decoration:underline}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}.footer-grid>:first-child,.footer-grid>:last-child{grid-column:1/-1}.footer{padding-top:44px}}

/* ---------- Barre mobile ---------- */
.mbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:90;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));border-radius:var(--pill);background:var(--dark);box-shadow:var(--sh-3)}
.mbar .btn{--h:48px;font-size:15.5px;padding:0 10px;box-shadow:none}
@media(min-width:960px){.mbar{display:none}}

/* ---------- Apparitions ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}
.hero-inner>*,.intro>*,.diag-wrap>*,.zones>*,.cols2>*{min-width:0}
.lang-m{display:none!important}
@media(max-width:959px){.navbar>.lang{display:none}.nav>a.lang-m{display:flex!important;color:var(--brand)!important}}
@media(max-width:560px){.hero .hlabel{font-size:11.5px;letter-spacing:.06em;padding:6px 12px 6px 9px}}

/* ===== Corrections de l'audit ui-ux-pro-max ===== */
a,button,summary,.btn{touch-action:manipulation}
.hero{min-height:max(640px,94vh);min-height:max(640px,94dvh)}
.sv-hero{min-height:max(560px,80vh);min-height:max(560px,80dvh)}
.nav>a,.nav .dd>button{min-height:44px}
.footer .fh{color:#fff;font-size:15px;font-weight:700;letter-spacing:0;margin-bottom:8px}
.footer ul{gap:0}
.footer li a{display:inline-flex;align-items:center;min-height:44px}
.footer li{min-height:44px;display:flex;align-items:center}
.footer .phone,.legal a{min-height:44px;display:inline-flex;align-items:center}
.band p{color:#fff}
.hq-top small,.res-box small,.field label,.c-card small{font-size:13px}
.prog-wrap{display:flex;align-items:flex-end;gap:14px;flex:1;max-width:680px}
.pause{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;transition:background .2s}
.pause:hover{background:rgba(255,255,255,.26)}
.pause .ico{width:18px;height:18px}
.is-paused .prog button.on .bar i{animation-play-state:paused}
.is-paused .slide.on img{animation-play-state:paused}
@media(max-width:860px){.prog-wrap{max-width:none;width:100%}}
@media(max-width:560px){.hero .hlabel{font-size:12.5px;letter-spacing:.04em}.prog button{font-size:13px}}
.c-card b{overflow-wrap:anywhere}
.brand{min-height:44px}
.lang a,.lang span{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;margin:-13px 0}
.lang a,.lang span{min-width:44px}
.sv-hero .slide-txt .t{font-size:clamp(32px,4.6vw,60px);margin:0}
.slide-txt h1.t{color:#fff}

/* ===== Grille de services compacte et homogène ===== */
.svc-grid{list-style:none;display:grid;gap:18px}
.svc-grid.g5{grid-template-columns:repeat(5,1fr)}
.svc-grid.g4{grid-template-columns:repeat(4,1fr)}
.svc-grid li{display:flex}
.sv{position:relative;display:flex;flex-direction:column;width:100%;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-2);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.sv:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.sv-ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.sv-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.sv:hover .sv-ph img{transform:scale(1.06)}
.sv-body{display:flex;flex-direction:column;gap:4px;padding:14px 48px 16px 16px;flex:1}
.sv-t{font-weight:800;font-size:15.5px;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.sv-m{font-size:13px;font-weight:600;color:var(--muted)}
.sv-go{position:absolute;right:12px;bottom:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-50);color:var(--brand);transition:background .25s,color .25s,transform .25s var(--ease)}
.sv-go .ico{width:16px;height:16px}
.sv:hover .sv-go{background:var(--brand);color:#fff;transform:translateX(2px)}
@media(max-width:1100px){.svc-grid.g5,.svc-grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:700px) and (max-width:1100px){.svc-grid.g4{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.svc-grid{gap:12px}.sv-body{padding:12px 40px 14px 12px}.sv-t{font-size:14.5px}.sv-m{font-size:12.5px}.sv-go{right:10px;bottom:12px;width:28px;height:28px}}

/* ===== Héros accueil : canalisation animée ===== */
.hero-pipe{min-height:auto;align-items:center;background:radial-gradient(900px 520px at 78% 40%,rgba(37,99,235,.22),transparent 60%),radial-gradient(700px 400px at 10% 100%,rgba(194,65,12,.18),transparent 60%),var(--dark)}
.hero-pipe::after{background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px;mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 70%)}
.hp-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;padding-top:150px;padding-bottom:90px}
.hp-title{font-size:clamp(40px,5.2vw,70px);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.hp-title em{font-style:normal;color:var(--brand-hi);display:block}
.hp-lead{margin-top:20px;font-size:clamp(17px,1.5vw,19px);color:rgba(255,255,255,.82);max-width:520px}
.hp-copy .cta-row{margin-top:32px}
.hp-checks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;font-size:15px;font-weight:600;color:rgba(255,255,255,.9)}
.hp-checks li{display:flex;align-items:center;gap:8px}
.hp-checks .ico{width:20px;height:20px;padding:3px;border-radius:50%;background:rgba(74,222,128,.16);color:#4ade80;stroke-width:3}
.hp-visual{position:relative}
.pipe-box{position:relative;aspect-ratio:640/480;border-radius:var(--r-xl);background:radial-gradient(120% 90% at 60% 45%,#122c4a 0%,#0a1a2d 70%);border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden}
.pipe-box canvas{position:absolute;inset:0;width:100%;height:100%}
.pc-water{filter:url(#goo)}
.pipe-chip{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:var(--pill);background:rgba(8,19,33,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:14px;font-weight:700;transition:border-color .3s}
.pipe-chip .dot{width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.2);transition:background .3s,box-shadow .3s}
.pipe-chip.s1 .dot{background:var(--brand-hi);box-shadow:0 0 0 4px rgba(251,122,53,.22)}
.pipe-chip.s2 .dot{background:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.22)}
.pipe-chip.s3 .dot{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.22)}
.pipe-chip.s3{border-color:rgba(74,222,128,.45)}
.pipe-lab{position:absolute;right:18px;top:20px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.pipe-replay{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--pill);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease),background .2s}
.pipe-replay .ico{width:15px;height:15px}
.pipe-replay:hover{background:rgba(255,255,255,.22)}
.pipe-box.is-done .pipe-replay{opacity:1;pointer-events:auto;transform:none}
.hp-visual .avail{position:absolute;left:-22px;bottom:-22px}
@media(max-width:1000px){.hp-grid{grid-template-columns:1fr;gap:44px;padding-top:120px;padding-bottom:64px}.hp-visual .avail{position:static;margin-top:16px;display:inline-flex}}
@media(max-width:560px){.hp-grid{padding-top:104px}.pipe-chip{font-size:12.5px;padding:6px 11px;left:10px;top:10px}.pipe-lab{display:none}.pipe-box{border-radius:var(--r-lg)}.hero-pipe .cta-row .btn{flex:1 1 100%}}
.pipe-box.is-done .pipe-lab{opacity:0}
.pipe-replay{top:12px;bottom:auto}
.pipe-lab{transition:opacity .3s}
@media(max-width:560px){.pipe-replay{top:8px;right:8px;padding:0 12px;font-size:13px}}
/* bouton pause de l'animation : toujours visible, discret */
.pipe-replay{top:12px;right:12px;bottom:auto;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;opacity:1;pointer-events:auto;transform:none}
.pipe-replay .ico{width:17px;height:17px}
.pipe-lab{right:68px}
.pipe-box.is-done .pipe-lab{opacity:1}
@media(max-width:560px){.pipe-replay{top:8px;right:8px;width:44px;padding:0}}

/* ---------- Défilement « pages empilées » : chaque section monte sur la précédente ---------- */
main>section:not(.hero){position:relative;background-color:var(--bg);border-radius:34px 34px 0 0;margin-top:-34px;box-shadow:0 -14px 34px rgba(11,27,46,.10);overflow:clip}
main>section.soft{background-color:var(--soft)}
main>section.dark{background-color:var(--dark);box-shadow:0 -14px 40px rgba(0,0,0,.28)}
main>section.band{background-color:var(--brand)}
main>section:not(.hero)::before{content:"";position:absolute;top:12px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:5px;background:currentColor;opacity:.12;pointer-events:none}
main>section:not(.hero)>.wrap{transform-origin:50% 0;will-change:auto}
.stk-dim{position:absolute;inset:0;background:#0b1b2e;opacity:0;pointer-events:none;z-index:5}
@media(max-width:700px){main>section:not(.hero){border-radius:26px 26px 0 0;margin-top:-26px}}
.footer{position:relative}

/* ---------- Pages services : scène animée dans le héros ---------- */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:56px;align-items:end}
.hero-main{min-width:0}
.hero-side{min-width:0}
@media(max-width:1060px){.hero-split{grid-template-columns:1fr;gap:28px}.hero-side{max-width:560px}}
.sc-box{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#0b1b2e;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.sc-svg{display:block;width:100%;height:auto;aspect-ratio:480/340}
.sc-svg text{font-family:var(--f)}
.sc-foot{position:relative;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;background:#0f2338;border-top:1px solid rgba(255,255,255,.08)}
.sc-bar{position:absolute;left:0;right:0;top:-1px;height:3px;background:rgba(255,255,255,.06)}
.sc-bar i{display:block;height:100%;background:linear-gradient(90deg,#fb7a35,#38bdf8);transform-origin:left;transform:scaleX(0)}
.sc-cap{position:relative;flex:1;min-width:0;display:grid;padding-left:18px;color:#fff;font-size:14.5px;font-weight:700;line-height:1.3}
.sc-cap>i{position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.18)}
.sc-cap>span{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0}
.sc-lab{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7f93ab;white-space:nowrap}
.sc-pause{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;transition:background .2s}
.sc-pause:hover{background:rgba(255,255,255,.16)}
.sc-pause .ico{width:18px;height:18px}
@media(max-width:560px){.sc-lab{display:none}.sc-cap{font-size:13.5px}.sc-box{border-radius:20px}}

/* ---------- Cartes services : icône qui réagit (goutte + tuyau qui se remplit) ---------- */
.sv-ic{position:absolute;top:12px;left:12px;z-index:2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--brand);box-shadow:0 4px 14px rgba(11,27,46,.18);transition:transform .35s var(--ease),background .25s,color .25s}
.sv-ic .ico{width:21px;height:21px;position:relative;z-index:1}
.sv-ic::after{content:"";position:absolute;left:50%;top:100%;width:9px;height:9px;margin-left:-4.5px;border-radius:50% 0 50% 50%;background:#38bdf8;transform:rotate(-45deg) translateY(-6px) scale(.2);opacity:0}
.sv:hover .sv-ic,.sv:focus-visible .sv-ic{transform:translateY(-2px);background:var(--brand);color:#fff}
.sv:hover .sv-ic::after,.sv:focus-visible .sv-ic::after,.sv.drip .sv-ic::after{animation:svDrip 1.3s cubic-bezier(.5,0,.75,0) infinite}
.sv.drip .sv-ic::after{animation-iteration-count:2}
@keyframes svDrip{0%{opacity:0;transform:translateY(-8px) rotate(-45deg) scale(.2)}18%{opacity:1;transform:translateY(-4px) rotate(-45deg) scale(1)}70%{opacity:1}100%{opacity:0;transform:translateY(38px) rotate(-45deg) scale(.7)}}
.sv-go{overflow:hidden;isolation:isolate}
.sv-go::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#38bdf8,#0284c7);transform:translateY(101%);transition:transform .5s var(--ease)}
.sv-go::after{content:"";position:absolute;left:-30%;right:-30%;top:-6px;height:12px;z-index:-1;border-radius:45%;background:#7dd3fc;transform:translateY(40px);transition:transform .5s var(--ease)}
.sv:hover .sv-go,.sv:focus-visible .sv-go{background:var(--brand-50);color:#fff}
.sv:hover .sv-go::before,.sv:focus-visible .sv-go::before{transform:none}
.sv:hover .sv-go::after,.sv:focus-visible .sv-go::after{transform:translateY(0);animation:svWave 1.2s linear infinite}
@keyframes svWave{to{transform:translateY(0) rotate(360deg)}}
.sv:active .sv-ic{transform:scale(.94)}
@media(max-width:560px){.sv-ic{top:8px;left:8px;width:34px;height:34px;border-radius:10px}.sv-ic .ico{width:18px;height:18px}}

/* ======================= Effets « eau » ======================= */
/* 1. Boutons : l'eau monte dans le bouton d'appel au survol */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-call::before{content:"";position:absolute;left:-50%;top:115%;width:200%;height:300%;z-index:-1;border-radius:42%;background:linear-gradient(180deg,#9a3412,#7c2d12);transition:top .6s var(--ease);animation:wvSpin 5s linear infinite;animation-play-state:paused}
.btn-call:hover::before,.btn-call:focus-visible::before{top:-12%;animation-play-state:running}
@keyframes wvSpin{to{transform:rotate(360deg)}}
/* 2. Onde au toucher (ajoutée par app.js) */
.rip{position:absolute;z-index:0;border-radius:50%;pointer-events:none;width:24px;height:24px;margin:-12px 0 0 -12px;border:2px solid rgba(255,255,255,.75);background:rgba(255,255,255,.18);transform:scale(0);animation:rip .75s cubic-bezier(.2,.7,.3,1) forwards}
.rip.r2{animation-delay:.12s;background:none}
.btn-line .rip,.btn-white .rip{border-color:rgba(194,65,12,.55);background:rgba(194,65,12,.1)}
@keyframes rip{0%{transform:scale(0);opacity:1}100%{transform:scale(14);opacity:0}}
.btn>*:not(.rip){position:relative;z-index:1}
/* 3. Le téléphone sonne de temps en temps */
.mbar .btn-call .ico,.head-call .ico{transform-origin:50% 60%;animation:ring 9s ease-in-out 3s infinite}
@keyframes ring{0%,7%,100%{transform:none}1%{transform:rotate(-16deg)}2%{transform:rotate(14deg)}3%{transform:rotate(-12deg)}4%{transform:rotate(10deg)}5%{transform:rotate(-6deg)}6%{transform:rotate(3deg)}}

/* 4. Les étapes reliées par un tuyau qui se remplit */
.steps::after{content:"";position:absolute;left:12.5%;right:12.5%;top:26px;height:4px;border-radius:4px;background:linear-gradient(90deg,#38bdf8,#0284c7);transform-origin:left;transform:scaleX(var(--f,0));transition:transform .35s linear;box-shadow:0 0 12px rgba(56,189,248,.45)}
.steps .num{transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.steps li.lit .num{background:var(--brand);color:#fff;box-shadow:0 0 0 8px var(--soft),0 0 0 11px rgba(56,189,248,.35)}
.section:not(.soft) .steps li.lit .num{box-shadow:0 0 0 8px var(--bg),0 0 0 11px rgba(56,189,248,.35)}
.section:not(.soft) .steps .num{box-shadow:0 0 0 8px var(--bg)}
@media(max-width:520px){
 .steps::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 8px,transparent 8px 14px)}
 .steps::after{left:26px;right:auto;top:28px;bottom:28px;width:4px;height:auto;transform-origin:top;transform:scaleY(var(--f,0))}
 .steps{row-gap:30px}}

/* 5. Tuyau de lecture sur le côté (ordinateur) */
.spipe{position:fixed;right:14px;top:50%;z-index:80;width:10px;height:34vh;margin-top:-17vh;border-radius:10px;background:rgba(148,163,184,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 2px 8px rgba(11,27,46,.12);overflow:hidden;pointer-events:none}
.spipe-legacy i{position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(180deg,#7dd3fc,#0284c7);transform-origin:top;transform:scaleY(var(--p,0));border-radius:0 0 10px 10px}
@media(max-width:959px){.spipe{display:none}}

/* 7. Bandeau : vagues et bulles */
.band-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.band .wrap{z-index:1}
.band-fx svg{max-width:none;position:absolute;left:0;bottom:0;width:200%;height:46px;animation:wvMove 14s linear infinite}
.band-fx svg.w2{height:34px;animation-duration:9s;animation-direction:reverse;opacity:.9}
@keyframes wvMove{to{transform:translateX(-50%)}}
.band-fx i{position:absolute;bottom:-14px;width:var(--s,10px);height:var(--s,10px);border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);animation:bub var(--d,7s) ease-in infinite;animation-delay:var(--l,0s);opacity:0}
@keyframes bub{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(8px,-110px)}100%{transform:translate(-6px,-230px);opacity:0}}

/* 8. Page 404 : la page est bouchée */
.nf{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.nf-art{max-width:380px;justify-self:center;width:100%}
.nf-art svg{width:100%;height:auto;display:block}
.nf-plunger{animation:plunge 1.4s cubic-bezier(.5,0,.5,1) infinite}
.nf-cup{transform-box:fill-box;transform-origin:50% 0;animation:squash 1.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes plunge{0%,100%{transform:translateY(-26px)}50%{transform:none}}
@keyframes squash{0%,40%,100%{transform:none}50%{transform:scaleX(1.18) scaleY(.75)}}
.nf-bub{animation:nfBub 2.8s ease-in infinite;opacity:0}
.nf-bub:nth-of-type(2){animation-delay:.9s}.nf-bub:nth-of-type(3){animation-delay:1.8s}
@keyframes nfBub{0%{transform:none;opacity:0}20%{opacity:.9}100%{transform:translateY(-70px);opacity:0}}
@media(max-width:760px){.nf{grid-template-columns:1fr}.nf-art{max-width:260px;order:-1}}

/* 4 bis. Le tuyau des étapes : vrai tuyau PVC avec manchons, l'eau coule dedans */
.steps::before{top:18px;height:20px;border-radius:10px;
 background:
  linear-gradient(180deg,#8796aa,#c4ceda 30%,#8796aa) calc(16.66% - 7px) 0/14px 100% no-repeat,
  linear-gradient(180deg,#8796aa,#c4ceda 30%,#8796aa) calc(50% - 7px) 0/14px 100% no-repeat,
  linear-gradient(180deg,#8796aa,#c4ceda 30%,#8796aa) calc(83.33% - 7px) 0/14px 100% no-repeat,
  linear-gradient(180deg,#b9c4d2 0%,#f1f5f9 28%,#dfe6ee 55%,#a7b3c2 100%);
 box-shadow:inset 0 -2px 0 rgba(11,27,46,.12),0 3px 8px rgba(11,27,46,.12)}
.steps::after{top:24px;height:8px;border-radius:4px;
 background:repeating-linear-gradient(90deg,#0ea5e9 0 16px,#7dd3fc 16px 22px,#0ea5e9 22px 34px);
 background-size:34px 100%;box-shadow:0 0 10px rgba(56,189,248,.5);
 animation:pipeFlow .7s linear infinite}
@keyframes pipeFlow{to{background-position:34px 0}}
@media(max-width:520px){
 .steps::before{left:18px;right:auto;top:28px;bottom:28px;width:20px;height:auto;
  background:
   linear-gradient(90deg,#8796aa,#c4ceda 30%,#8796aa) 0 calc(16.66% - 7px)/100% 14px no-repeat,
   linear-gradient(90deg,#8796aa,#c4ceda 30%,#8796aa) 0 calc(50% - 7px)/100% 14px no-repeat,
   linear-gradient(90deg,#8796aa,#c4ceda 30%,#8796aa) 0 calc(83.33% - 7px)/100% 14px no-repeat,
   linear-gradient(90deg,#b9c4d2 0%,#f1f5f9 28%,#dfe6ee 55%,#a7b3c2 100%)}
 .steps::after{left:24px;top:28px;bottom:28px;width:8px;height:auto;
  background:repeating-linear-gradient(180deg,#0ea5e9 0 16px,#7dd3fc 16px 22px,#0ea5e9 22px 34px);background-size:100% 34px;animation-name:pipeFlowV}
 @keyframes pipeFlowV{to{background-position:0 34px}}}
@media(min-width:521px) and (max-width:900px){.steps::after{display:none}}
@media(max-width:520px){.steps::before{display:block}}

/* ===== Tuyau réaliste des étapes (remplace la ligne) ===== */
.steps-wrap{position:relative;padding-right:56px;padding-bottom:70px}
.steps-wrap .steps{position:relative;z-index:1}
.steps-wrap .steps::before,.steps-wrap .steps::after{display:none!important}
.spw{position:absolute;inset:0;z-index:0;pointer-events:none}
/* tube transparent */
.spw-run,.spw-down{position:absolute;border-radius:12px;overflow:hidden;
 background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(226,232,240,.75) 30%,rgba(203,213,225,.6) 70%,rgba(148,163,184,.75) 100%);
 box-shadow:inset 0 0 0 2px #8796aa,inset 0 3px 0 2px rgba(255,255,255,.8),0 4px 10px rgba(11,27,46,.14)}
.spw-run{left:calc((100% - 56px) * .125);right:36px;top:17px;height:22px}
/* eau qui coule, avec bulles et reflet */
.spw-water{position:absolute;left:4px;right:4px;top:4px;bottom:4px;border-radius:8px;transform-origin:left;transform:scaleX(var(--f,0));transition:transform .35s linear;
 background:linear-gradient(180deg,#a5e3fd 0%,#38bdf8 30%,#0ea5e9 65%,#0369a1 100%);overflow:hidden}
.spw-water::before{content:"";position:absolute;inset:0;
 background-image:radial-gradient(circle at 8px 5px,rgba(255,255,255,.9) 0 1.6px,transparent 2.2px),radial-gradient(circle at 27px 9px,rgba(255,255,255,.7) 0 1.2px,transparent 1.8px),radial-gradient(circle at 40px 4px,rgba(255,255,255,.55) 0 2px,transparent 2.6px);
 background-size:52px 100%;animation:spwBub 1.1s linear infinite}
.spw-water::after{content:"";position:absolute;left:0;right:0;top:1px;height:3px;border-radius:3px;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 10px,rgba(255,255,255,.15) 10px 26px);background-size:26px 100%;animation:spwBub .6s linear infinite}
@keyframes spwBub{to{background-position:52px 0}}
/* manchons de raccord */
.spw-m{position:absolute;top:12px;width:18px;height:32px;margin-left:-9px;border-radius:5px;
 background:linear-gradient(90deg,#8796aa,#dbe3ec 35%,#a7b3c2 70%,#7b8a9e),repeating-linear-gradient(180deg,transparent 0 6px,rgba(11,27,46,.12) 6px 7px);background-blend-mode:multiply;
 box-shadow:0 3px 6px rgba(11,27,46,.18)}
.spw-m.m1{left:calc((100% - 56px) * .25)}.spw-m.m2{left:calc((100% - 56px) * .5)}.spw-m.m3{left:calc((100% - 56px) * .75)}
/* coude + descente */
.spw-elbow{position:absolute;right:2px;top:17px;width:44px;height:44px;overflow:visible}
.spw-ew{opacity:0;transition:opacity .25s}
.spw-down{right:6px;top:58px;width:22px;height:62px}
.spw-down .spw-water{transform-origin:top;transform:scaleY(0);background:linear-gradient(90deg,#a5e3fd 0%,#38bdf8 30%,#0ea5e9 65%,#0369a1 100%);transition:transform .3s .2s linear}
.spw-down .spw-water::before{background-size:100% 52px;background-image:radial-gradient(circle at 5px 8px,rgba(255,255,255,.9) 0 1.6px,transparent 2.2px),radial-gradient(circle at 9px 30px,rgba(255,255,255,.7) 0 1.4px,transparent 2px);animation-name:spwBubV}
.spw-down .spw-water::after{display:none}
@keyframes spwBubV{to{background-position:0 52px}}
.spw-flange{position:absolute;right:2px;top:116px;width:30px;height:10px;border-radius:4px;background:linear-gradient(90deg,#7b8a9e,#dbe3ec 40%,#8796aa);box-shadow:0 2px 4px rgba(11,27,46,.2)}
/* chute d'eau et grille d'égout */
.spw-fall{position:absolute;right:13px;top:126px;width:8px;height:0;border-radius:0 0 6px 6px;
 background:repeating-linear-gradient(180deg,#7dd3fc 0 7px,#38bdf8 7px 14px);background-size:100% 14px;animation:spwFall .35s linear infinite;
 transition:height .35s .45s ease-in}
@keyframes spwFall{to{background-position:0 14px}}
.spw-drop{position:absolute;right:15px;top:128px;width:5px;height:7px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#38bdf8;opacity:0}
.spw-drain{position:absolute;right:-3px;bottom:4px;width:40px;height:10px;border-radius:5px;background:repeating-linear-gradient(90deg,#475569 0 4px,#94a3b8 4px 8px);box-shadow:0 0 0 2px #64748b}
.spw-drain i{position:absolute;left:50%;top:50%;width:46px;height:12px;margin:-6px 0 0 -23px;border-radius:50%;border:2px solid #38bdf8;opacity:0}
/* l'eau arrive au bout : elle s'écoule */
.steps-wrap.flow .spw-ew{opacity:1}
.steps-wrap.flow .spw-down .spw-water{transform:scaleY(1)}
.steps-wrap.flow .spw-fall{height:calc(100% - 140px)}
.steps-wrap.flow .spw-drop{animation:spwDrop .9s ease-in .8s infinite}
.steps-wrap.flow .spw-drop.d2{animation-delay:1.25s}
.steps-wrap.flow .spw-drain i{animation:spwRip 1.4s ease-out .8s infinite}
.steps-wrap.flow .spw-drain i.r2{animation-delay:1.5s}
@keyframes spwDrop{0%{opacity:0;transform:none}15%{opacity:1}100%{opacity:.2;transform:translate(6px,46px)}}
@keyframes spwRip{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.steps-wrap .steps li.lit .num{box-shadow:0 0 0 8px var(--soft),0 0 0 11px rgba(56,189,248,.4)}
.section:not(.soft) .steps-wrap .steps li.lit .num{box-shadow:0 0 0 8px var(--bg),0 0 0 11px rgba(56,189,248,.4)}
/* tablette : grille 2 × 2, pas de tuyau */
@media(max-width:900px){.steps-wrap{padding-right:0;padding-bottom:0}.spw{display:none}}
/* mobile : tuyau vertical qui descend le long des étapes puis se vide dans la grille */
@media(max-width:520px){
 .steps-wrap{padding-bottom:84px}
 .spw{display:block}
 .spw-run{left:17px;right:auto;top:28px;bottom:60px;width:22px;height:auto;
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(226,232,240,.75) 30%,rgba(203,213,225,.6) 70%,rgba(148,163,184,.75) 100%)}
 .spw-run .spw-water{transform-origin:top;transform:scaleY(var(--f,0));background:linear-gradient(90deg,#a5e3fd 0%,#38bdf8 30%,#0ea5e9 65%,#0369a1 100%)}
 .spw-run .spw-water::before{background-size:100% 52px;background-image:radial-gradient(circle at 5px 8px,rgba(255,255,255,.9) 0 1.6px,transparent 2.2px),radial-gradient(circle at 9px 30px,rgba(255,255,255,.7) 0 1.4px,transparent 2px);animation-name:spwBubV}
 .spw-run .spw-water::after{display:none}
 .spw-m,.spw-elbow,.spw-down{display:none}
 .spw-flange{right:auto;left:13px;top:auto;bottom:54px}
 .spw-fall{right:auto;left:24px;top:calc(100% - 54px);height:0}
 .steps-wrap.flow .spw-fall{height:36px}
 .spw-drop{right:auto;left:26px;top:auto;bottom:40px}
 .spw-drain{right:auto;left:8px;bottom:6px}
 @keyframes spwDrop{0%{opacity:0;transform:none}15%{opacity:1}100%{opacity:.2;transform:translate(3px,28px)}}}

/* ---------- Tarifs : comment on fixe le prix + engagements ---------- */
.pricing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:start}
.pricing .sh{margin-bottom:28px}
.pr-h{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px}
.pfac{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pfac li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.pfac li:hover{border-color:#bae6fd;box-shadow:var(--sh-2);transform:translateY(-2px)}
.pf-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#e0f2fe;color:#0369a1}
.pf-ic .ico{width:21px;height:21px}
.pfac h4{font-size:16px;color:var(--ink);margin-bottom:3px;letter-spacing:-.01em}
.pfac p{font-size:14.5px;color:var(--muted);line-height:1.5}
.peng{position:sticky;top:96px;padding:30px;border-radius:var(--r-xl);background:var(--dark);color:#b8c4d3;box-shadow:var(--sh-3);overflow:hidden}
.peng::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.18),transparent 70%);pointer-events:none}
.peng-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(251,122,53,.15);color:var(--brand-hi);margin-bottom:16px}
.peng-ic .ico{width:24px;height:24px}
.peng h3{color:#fff;font-size:24px;margin-bottom:6px}
.peng>p{font-size:15px;margin-bottom:18px}
.peng ul{list-style:none;display:grid;gap:12px;margin-bottom:24px}
.peng li{display:flex;gap:12px;align-items:flex-start;color:#fff;font-weight:600;font-size:15.5px;line-height:1.4}
.peng li .ico{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--ok);color:#fff;stroke-width:3}
.peng-or{margin-top:14px;text-align:center;font-size:14.5px}
.peng-or a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px}
@media(max-width:960px){.pricing{grid-template-columns:1fr;gap:28px}.peng{position:relative;top:auto}}
@media(max-width:560px){.pfac{grid-template-columns:1fr}.pfac li{padding:14px}.peng{padding:24px}}

/* ---------- Tarifs : icônes animées en continu ---------- */
.pf-ic svg{width:26px;height:26px;overflow:visible}
.pfa-flow{stroke-dasharray:2.5 3.5;animation:pfaFlow .8s linear infinite}
@keyframes pfaFlow{to{stroke-dashoffset:-6}}
.pfa-pin{animation:pfaBounce 1.6s cubic-bezier(.3,0,.4,1) infinite}
.pfa-shadow{transform-box:fill-box;transform-origin:center;animation:pfaShadow 1.6s cubic-bezier(.3,0,.4,1) infinite}
@keyframes pfaBounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}55%{transform:translateY(-4px)}}
@keyframes pfaShadow{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(.6);opacity:.15}}
.pfa-needle{transform-origin:12px 17px;animation:pfaNeedle 2.6s ease-in-out infinite}
@keyframes pfaNeedle{0%,100%{transform:rotate(-62deg)}45%{transform:rotate(48deg)}55%{transform:rotate(40deg)}70%{transform:rotate(52deg)}}
.pf-clock{animation:pfaDay 8s ease-in-out infinite}
.pf-clock .pfa-face,.pf-clock path{stroke:#0369a1;animation:pfaStroke 8s ease-in-out infinite}
.pfa-h{transform-origin:12px 12.5px;animation:pfaSpin 8s linear infinite}
.pfa-m{transform-origin:12px 12.5px;animation:pfaSpin 1.33s linear infinite}
@keyframes pfaSpin{to{transform:rotate(360deg)}}
.pfa-sun{animation:pfaSun 8s ease-in-out infinite}.pfa-moon{animation:pfaMoon 8s ease-in-out infinite}
@keyframes pfaDay{0%,40%,100%{background:#e0f2fe}50%,90%{background:#1e3a5f}}
@keyframes pfaStroke{0%,40%,100%{stroke:#0369a1}50%,90%{stroke:#e2e8f0}}
@keyframes pfaSun{0%,40%,100%{opacity:1}50%,90%{opacity:0}}
@keyframes pfaMoon{0%,40%,100%{opacity:0}50%,90%{opacity:1}}

/* ---------- Tarifs : engagements cochés + gouttes + tampon ---------- */
.peng li .ck{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok);display:grid;place-items:center}
.peng li .ck .ico{width:22px;height:22px;padding:4px;background:none;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.peng li .ck{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:background .3s,box-shadow .3s}
.peng.in li .ck{background:var(--ok);box-shadow:none;transition-delay:calc(var(--i) * .45s + .35s)}
.peng.in li .ck .ico{transform:none;transition-delay:calc(var(--i) * .45s + .4s)}
.peng li .ck::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #7dd3fc;opacity:0}
.ck-drop{position:absolute;left:50%;top:-16px;width:7px;height:9px;margin-left:-3.5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#38bdf8;opacity:0}
.peng.in .ck-drop{animation:ckDrop 6s ease-in infinite;animation-delay:calc(var(--i) * .45s)}
.peng.in li .ck::after{animation:ckRing 6s ease-out infinite;animation-delay:calc(var(--i) * .45s)}
@keyframes ckDrop{0%{opacity:0;transform:translateY(-6px)}3%{opacity:1}9%{opacity:1;transform:translateY(14px)}11%{opacity:0;transform:translateY(16px) scale(.6)}100%{opacity:0}}
@keyframes ckRing{0%,9%{opacity:0;transform:scale(.6)}11%{opacity:1}22%{opacity:0;transform:scale(1.7)}100%{opacity:0}}
.peng li span:last-child{transition:color .3s}
.peng-stamp{position:absolute;top:26px;right:22px;padding:6px 12px;border:2.5px solid #4ade80;border-radius:8px;color:#4ade80;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-10deg);opacity:0;box-shadow:inset 0 0 0 2px rgba(11,27,46,1),inset 0 0 0 3.5px rgba(74,222,128,.6)}
.peng.in .peng-stamp{animation:stampIn .5s cubic-bezier(.3,1.5,.5,1) 2.4s forwards,stampGlow 3s ease-in-out 3s infinite}
@keyframes stampIn{0%{opacity:0;transform:rotate(-10deg) scale(1.8)}100%{opacity:1;transform:rotate(-10deg) scale(1)}}
@keyframes stampGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(74,222,128,.55))}}
.pf-clock .pfa-moon{stroke:none!important}

/* ======================= Palette : orange = action, bleu eau = information ======================= */
:root{--water:#0284c7;--water-ink:#0369a1;--water-hi:#38bdf8;--water-50:#e0f2fe;--water-100:#bae6fd}
/* étiquettes au-dessus des titres */
.chip{background:var(--water-50);color:var(--water-ink)}
.chip i{background:var(--water)}
.on-dark .chip{background:rgba(56,189,248,.14);color:#7dd3fc}
.on-dark .chip i{background:var(--water-hi)}
/* pastilles d'icônes informatives */
.feat .ic,.box h2 .ic.b,.c-card .ic{background:var(--water-50);color:var(--water-ink)}
.dd-menu a .ico,.d-opt .ico,.zm-eta .ico{color:var(--water-ink)}
.d-opt:hover{background:var(--water-50);border-color:var(--water-100)}
.d-opt[aria-pressed=true]{background:var(--water-50);border-color:var(--water)}
.diag-bar i.on{background:var(--water)}
.res-box b{color:var(--ink)}
.tip{background:var(--water-50)!important;border-color:var(--water-100)!important}
.tip .ic{background:var(--water);color:#fff}
.tip h3{color:var(--water-ink)}
.faq details[open] summary .ico{background:var(--water);color:#fff}
/* étapes : bleu nuit au repos, se remplissent d'eau quand le tuyau les atteint */
.steps .num{border-color:var(--dark-3);color:var(--dark-3)}
.steps li::after{background:var(--dark)}
.steps li.lit .num,.steps-wrap .steps li.lit .num{background:var(--water);border-color:var(--water);color:#fff}
.steps li.lit::after{background:var(--water-ink)}
.steps li.lit .num .ico{animation:numPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes numPop{0%{transform:scale(.6)}100%{transform:none}}

/* ---------- Badge « Ouvert maintenant » ---------- */
.brand-sub.live{display:inline-flex;align-items:center;gap:6px;color:#86efac!important;font-weight:700}
.brand-sub.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:liveDot 2s infinite}
@keyframes liveDot{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.brand-sub.live b{font-variant-numeric:tabular-nums;color:#fff;font-weight:800}

/* ---------- « Ça déborde ? » : bouton + fenêtre des 3 gestes ---------- */
.urg-btn{display:inline-flex;align-items:center;gap:10px;margin-top:16px;min-height:44px;padding:8px 14px 8px 10px;border-radius:var(--pill);border:1px solid rgba(253,224,71,.35);background:rgba(250,204,21,.1);color:#fde68a;font-size:14.5px;font-weight:700;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.urg-btn:hover{background:rgba(250,204,21,.18);border-color:rgba(253,224,71,.6)}
.urg-btn>.ico:first-child{width:22px;height:22px;padding:3px;border-radius:50%;background:#facc15;color:#422006;animation:urgBlink 2.4s ease-in-out infinite}
.urg-btn>.ico:last-child{width:16px;height:16px;opacity:.7}
@keyframes urgBlink{0%,100%{box-shadow:0 0 0 0 rgba(250,204,21,.6)}50%{box-shadow:0 0 0 6px rgba(250,204,21,0)}}
.urg{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:28px;border:0;border-radius:24px;background:#fff;color:var(--text);box-shadow:var(--sh-3);overflow:auto}
.urg::backdrop{background:rgba(7,18,31,.65);backdrop-filter:blur(4px)}
.urg[open]{animation:urgIn .35s var(--ease)}
@keyframes urgIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.urg-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--soft);display:grid;place-items:center;color:var(--ink)}
.urg-x .ico{transform:rotate(45deg)}
.urg-k{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--pill);background:#fef3c7;color:#92400e;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.urg-k .ico{width:15px;height:15px}
.urg h2{font-size:clamp(22px,4vw,28px);margin:12px 50px 6px 0}
.urg-lead{font-size:15.5px;color:var(--muted);margin-bottom:18px}
.urg-steps{list-style:none;display:grid;gap:10px;margin-bottom:20px}
.urg-steps li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:12px 14px 12px 12px;border-radius:16px;background:var(--soft);border:1px solid var(--line)}
.urg[open] .urg-steps li{animation:urgStep .45s var(--ease) both;animation-delay:calc(var(--i) * .12s + .1s)}
@keyframes urgStep{from{opacity:0;transform:translateY(8px)}}
.urg-art{width:64px;height:64px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-1)}
.urg-art svg{width:48px;height:48px}
.urg-n{position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--dark);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.urg-steps h3{font-size:16.5px;margin-bottom:2px}
.urg-steps p{font-size:14.5px;color:var(--muted);line-height:1.45}
.ua-valve{transform-origin:24px 16px;animation:uaValve 2.4s ease-in-out infinite}
@keyframes uaValve{0%,20%{transform:none}60%,100%{transform:rotate(90deg)}}
.ua-drop{animation:uaDrop 1.8s ease-in-out infinite}
@keyframes uaDrop{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.ua-bottle{transform-origin:24px 40px;animation:uaShake 2.2s ease-in-out infinite}
@keyframes uaShake{0%,60%,100%{transform:none}66%{transform:rotate(-8deg)}72%{transform:rotate(7deg)}78%{transform:rotate(-4deg)}84%{transform:rotate(2deg)}}
@media(max-width:560px){.urg{padding:22px 18px}.urg-steps li{grid-template-columns:52px 1fr;gap:12px}.urg-art{width:52px;height:52px}.urg-art svg{width:40px;height:40px}.urg-btn{font-size:13.5px}}

/* ---------- Tube de lecture : robinet qui goutte, le tube se remplit en descendant ---------- */
.spipe{position:fixed;right:14px;top:50%;z-index:80;width:34px;height:calc(36vh + 30px);margin-top:calc(-18vh - 15px);background:none;box-shadow:none;border-radius:0;overflow:visible;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(11,27,46,.18))}
.spipe-fau{position:absolute;left:0;top:0;width:34px;height:34px}
.spipe-tube{position:absolute;left:3px;top:36px;bottom:0;width:16px;border-radius:3px 3px 10px 10px;overflow:hidden;
 background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(226,232,240,.45) 45%,rgba(203,213,225,.6));box-shadow:inset 0 0 0 1.5px rgba(100,116,139,.6)}
.spipe-water{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p,0) * 100%);transform:none;background:linear-gradient(90deg,#7dd3fc,#0ea5e9 55%,#0369a1);transition:height .25s linear}
.spipe-water::before{content:"";position:absolute;left:-40%;right:-40%;top:-4px;height:8px;border-radius:50%;background:#7dd3fc;animation:spWave 1.6s ease-in-out infinite}
.spipe-water::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 5px 10px,rgba(255,255,255,.8) 0 1.4px,transparent 2px),radial-gradient(circle at 10px 34px,rgba(255,255,255,.6) 0 1.1px,transparent 1.6px);background-size:16px 46px;animation:spBub 2.2s linear infinite}
@keyframes spWave{0%,100%{transform:translateX(-12%) rotate(-3deg)}50%{transform:translateX(12%) rotate(3deg)}}
@keyframes spBub{to{background-position:0 -46px}}
.spipe-drop{position:absolute;left:7px;top:28px;width:7px;height:9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#38bdf8;opacity:0;animation:spDrop 1.3s cubic-bezier(.5,0,.9,.6) infinite}
.spipe-drop.d2{animation-delay:.65s}
@keyframes spDrop{0%{opacity:0;transform:translateY(0) scale(.4)}12%{opacity:1;transform:translateY(2px) scale(1)}90%{opacity:1}100%{opacity:0;transform:translateY(var(--fall,200px)) scaleY(1.3)}}
.spipe-rip{position:absolute;left:50%;bottom:calc(var(--p,0) * 100% - 3px);width:14px;height:5px;margin-left:-7px;border-radius:50%;border:1.5px solid #e0f2fe;opacity:0;animation:spRip 1.3s ease-out infinite;animation-delay:1.15s}
@keyframes spRip{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.4);opacity:0}}

/* ---------- Intro : maison en coupe animée ---------- */
.house{display:block;width:100%;height:100%}
.hs-l{fill:#7f93ab;font:800 9px var(--f);letter-spacing:.06em;text-transform:uppercase}
.hs-w{stroke-dasharray:4 7;animation:hsFlow .9s linear infinite}
@keyframes hsFlow{to{stroke-dashoffset:-11}}
.hs-bathw{animation:hsBath 8s ease-in-out infinite}
@keyframes hsBath{0%,10%{transform:none}35%,85%{transform:translateY(8px) scaleY(.2)}100%{transform:none}}
.hs-bathw{transform-box:fill-box;transform-origin:bottom}
.hs-ok{opacity:0;animation:hsOk 8s ease-out infinite;animation-delay:calc(var(--i) * .7s + .6s)}
@keyframes hsOk{0%{opacity:0}6%{opacity:1}80%{opacity:1}90%,100%{opacity:0}}
.hs-ok circle{transform-box:fill-box;transform-origin:center;animation:hsPop 8s ease-out infinite;animation-delay:inherit}
@keyframes hsPop{0%{transform:scale(.3)}6%{transform:scale(1.25)}10%{transform:scale(1)}100%{transform:scale(1)}}
.hq:hover .hq-ph img{transform:none}

/* ---------- Diagnostic express : pluie, niveau d'eau qui monte à chaque étape ---------- */
.diag-rain{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.diag-rain i{position:absolute;top:-40px;width:2px;height:var(--h,18px);border-radius:2px;background:linear-gradient(180deg,rgba(125,211,252,0),rgba(125,211,252,.65));animation:rain var(--d,3s) linear infinite;animation-delay:var(--l,0s)}
.diag-rain i::after{content:"";position:absolute;left:-2px;bottom:-3px;width:6px;height:6px;border-radius:50%;background:rgba(125,211,252,.75)}
@keyframes rain{0%{transform:translateY(0);opacity:0}8%{opacity:1}100%{transform:translateY(900px);opacity:.6}}
.diag{position:relative;isolation:isolate}
.diag>*{position:relative;z-index:1}
.diag::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;height:14px;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6Q15 0 30 6T60 6T90 6T120 6V12H0Z' fill='%2338bdf8' fill-opacity='.22'/%3E%3C/svg%3E") repeat-x 0 0/120px 12px,linear-gradient(180deg,transparent 11px,rgba(56,189,248,.14) 11px);
 animation:diagWave 3s linear infinite;transition:height .8s var(--ease)}
.diag[data-step="2"]::after{height:28%}
.diag[data-step="3"]::after{height:46%}
@keyframes diagWave{to{background-position:120px 0,0 0}}
.diag-bar i{width:26px;height:6px;overflow:hidden;position:relative}
.diag-bar i.on{background:linear-gradient(90deg,#0ea5e9,#38bdf8,#0ea5e9);background-size:26px 100%;animation:barFlow 1s linear infinite}
@keyframes barFlow{to{background-position:26px 0}}
.d-opt{position:relative;overflow:hidden;isolation:isolate}
.d-opt .rip{border-color:rgba(2,132,199,.55);background:rgba(56,189,248,.15)}

/* ---------- Zones : liste compacte, alignée sur la hauteur de la carte ---------- */
.zmap{position:relative!important;top:auto!important}
.zones{align-items:stretch}
.zside{display:flex;flex-direction:column}
.zsearch{margin-bottom:16px}
.zgroup+.zgroup{margin-top:18px}
.zh{margin-bottom:4px;padding-bottom:8px}
.zlist{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px}
.zc{min-height:38px;padding:6px 8px 6px 12px;font-size:14px;gap:6px}
.zc-cp{font-size:12px}
.zc-ok{display:none}
.zl-peri{display:flex;flex-wrap:wrap;gap:6px;padding-top:6px}
.zl-peri li{display:block}
.zl-peri .zc{width:auto;min-height:36px;padding:6px 12px;border:1px dashed var(--line-2)!important;border-radius:var(--pill);background:#fff}
.zl-peri .zc::before{display:none}
.zl-peri .zc[aria-pressed=true]{border-style:solid!important;border-color:var(--brand)!important}
.zmore{margin-top:auto;padding-top:14px;font-size:14px;color:var(--muted)}
@media(max-width:1100px) and (min-width:961px){.zlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.zlist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}.zc{font-size:13.5px}}
@media(max-width:560px){.zc-cp{display:none}.zc-n{white-space:normal;overflow:visible;line-height:1.25}}
.diag-rain i{width:2.5px;background:linear-gradient(180deg,rgba(125,211,252,0),rgba(125,211,252,.9))}

/* ---------- Scènes animées des services (généré par scenes.py) ---------- */
@keyframes scA-water{0%{transform:none}52%{transform:none}70%{transform:translateY(46px)}93%{transform:translateY(46px)}100%{transform:none}}
.scA-water{animation:scA-water 12s infinite ease-in-out}
@keyframes scA-fur{0%{stroke-dashoffset:100}25%{stroke-dashoffset:100}42%{stroke-dashoffset:0}52%{stroke-dashoffset:0}64%{stroke-dashoffset:100}100%{stroke-dashoffset:100}}
.scA-fur{animation:scA-fur 12s infinite ease-in-out}
@keyframes scA-mot{0%{transform:none}40%{transform:none}41%{transform:translate(1px,-1px)}42%{transform:translate(-1px,1px)}43%{transform:translate(1px,1px)}44%{transform:translate(-1px,-1px)}45%{transform:translate(1px,0)}46%{transform:translate(-1px,1px)}47%{transform:translate(1px,-1px)}48%{transform:translate(0,1px)}49%{transform:none}100%{transform:none}}
.scA-mot{animation:scA-mot 12s infinite}
@keyframes scA-clog{0%{transform:none;opacity:1}42%{transform:none;opacity:1}44%{transform:translate(1px,-1px)}46%{transform:translate(-1px,1px)}48%{transform:translate(1px,1px);opacity:1}54%{transform:translate(10px,30px) scale(.4);opacity:0}96%{transform:none;opacity:0}100%{transform:none;opacity:1}}
.scA-clog{animation:scA-clog 12s infinite}
@keyframes scA-frag{0%{opacity:0;transform:none}50%{opacity:0;transform:none}53%{opacity:1}64%{opacity:0;transform:translateY(40px)}100%{opacity:0}}
.scA-frag{animation:scA-frag 12s infinite}
@keyframes scA-still{0%{opacity:1}50%{opacity:1}54%{opacity:0}95%{opacity:0}100%{opacity:1}}
.scA-still{animation:scA-still 12s infinite}
@keyframes scA-flow{0%{opacity:0}52%{opacity:0}54%{opacity:1}88%{opacity:1}90%{opacity:0}100%{opacity:0}}
.scA-flow{animation:scA-flow 12s infinite,scFlow .8s linear infinite}
@keyframes scB-water{0%{transform:none}66%{transform:none}80%{transform:translateY(44px)}94%{transform:translateY(44px)}100%{transform:none}}
.scB-water{animation:scB-water 12s infinite ease-in-out}
@keyframes scB-nut{0%{transform:none}25%{transform:none}27%{transform:scaleX(.3)}29%{transform:none}31%{transform:scaleX(.3)}33%{transform:none}56%{transform:none}58%{transform:scaleX(.3)}60%{transform:none}62%{transform:scaleX(.3)}64%{transform:none}100%{transform:none}}
.scB-nut{animation:scB-nut 12s infinite}
@keyframes scB-u{0%{transform:none}34%{transform:none}42%{transform:translateY(42px)}54%{transform:translateY(42px)}62%{transform:none}100%{transform:none}}
.scB-u{animation:scB-u 12s infinite ease-in-out}
@keyframes scB-clog{0%{transform:none;opacity:1}44%{transform:none;opacity:1}50%{transform:translateY(24px);opacity:0}96%{transform:none;opacity:0}100%{transform:none;opacity:1}}
.scB-clog{animation:scB-clog 12s infinite ease-in}
@keyframes scB-bucket{0%{opacity:0}24%{opacity:0}27%{opacity:1}69%{opacity:1}72%{opacity:0}100%{opacity:0}}
.scB-bucket{animation:scB-bucket 12s infinite}
@keyframes scB-flow{0%{opacity:0}66%{opacity:0}68%{opacity:1}90%{opacity:1}92%{opacity:0}100%{opacity:0}}
.scB-flow{animation:scB-flow 12s infinite,scFlow .8s linear infinite}
@keyframes scC-grate{0%{transform:none}25%{transform:none}32%{transform:translate(-50px,-34px) rotate(-24deg)}60%{transform:translate(-50px,-34px) rotate(-24deg)}67%{transform:none}100%{transform:none}}
.scC-grate{animation:scC-grate 12s infinite ease-in-out}
@keyframes scC-tool{0%{stroke-dashoffset:100}32%{stroke-dashoffset:100}44%{stroke-dashoffset:0}50%{stroke-dashoffset:0}60%{stroke-dashoffset:100}100%{stroke-dashoffset:100}}
.scC-tool{animation:scC-tool 12s infinite ease-in-out}
@keyframes scC-hair{0%{transform:none;opacity:1}50%{transform:none;opacity:1}60%{transform:translate(70px,-150px);opacity:0}96%{transform:none;opacity:0}100%{transform:none;opacity:1}}
.scC-hair{animation:scC-hair 12s infinite ease-in}
@keyframes scC-pud{0%{transform:none}68%{transform:none}86%{transform:scaleX(.04)}94%{transform:scaleX(.04)}100%{transform:none}}
.scC-pud{animation:scC-pud 12s infinite ease-in}
@keyframes scC-swirl{0%{opacity:0}68%{opacity:0}70%{opacity:1}86%{opacity:1}88%{opacity:0}100%{opacity:0}}
.scC-swirl{animation:scC-swirl 12s infinite,scSpin .9s ease-out infinite}
@keyframes scC-flow{0%{opacity:0}68%{opacity:0}70%{opacity:1}90%{opacity:1}92%{opacity:0}100%{opacity:0}}
.scC-flow{animation:scC-flow 12s infinite,scFlow .8s linear infinite}
@keyframes scD-noz{0%{transform:none}25%{transform:none}62%{transform:translateX(360px)}74%{transform:translateX(360px)}82%{transform:none}100%{transform:none}}
.scD-noz{animation:scD-noz 12s infinite linear}
@keyframes scD-hose{0%{transform:scaleX(0)}25%{transform:scaleX(0)}62%{transform:scaleX(1)}74%{transform:scaleX(1)}82%{transform:scaleX(0)}100%{transform:scaleX(0)}}
.scD-hose{animation:scD-hose 12s infinite linear}
@keyframes scD-jet{0%{opacity:0}25%{opacity:0}27%{opacity:1}68%{opacity:1}70%{opacity:0}100%{opacity:0}}
.scD-jet{animation:scD-jet 12s infinite,scFlow .4s linear infinite}
@keyframes scD-r0{0%{opacity:1}40.9%{opacity:1}42.9%{opacity:0}95%{opacity:0}100%{opacity:1}}
.scD-r0{animation:scD-r0 12s infinite}
@keyframes scD-r1{0%{opacity:1}50.2%{opacity:1}52.2%{opacity:0}95%{opacity:0}100%{opacity:1}}
.scD-r1{animation:scD-r1 12s infinite}
@keyframes scD-r2{0%{opacity:1}58.4%{opacity:1}60.4%{opacity:0}95%{opacity:0}100%{opacity:1}}
.scD-r2{animation:scD-r2 12s infinite}
@keyframes scD-g0{0%{opacity:1}35.8%{opacity:1}37.8%{opacity:0}95%{opacity:0}100%{opacity:1}}
.scD-g0{animation:scD-g0 12s infinite}
@keyframes scD-g1{0%{opacity:1}54.3%{opacity:1}56.3%{opacity:0}95%{opacity:0}100%{opacity:1}}
.scD-g1{animation:scD-g1 12s infinite}
@keyframes scD-flow{0%{opacity:0}70%{opacity:0}72%{opacity:1}92%{opacity:1}94%{opacity:0}100%{opacity:0}}
.scD-flow{animation:scD-flow 12s infinite,scFlow .8s linear infinite}
@keyframes scE-cam{0%{transform:none}6%{transform:none}46%{transform:translateX(270px)}84%{transform:translateX(270px)}97%{transform:none}100%{transform:none}}
.scE-cam{animation:scE-cam 12s infinite ease-in-out}
@keyframes scE-cable{0%{transform:scaleX(.07)}6%{transform:scaleX(.07)}46%{transform:scaleX(1)}84%{transform:scaleX(1)}97%{transform:scaleX(.07)}100%{transform:scaleX(.07)}}
.scE-cable{animation:scE-cable 12s infinite ease-in-out}
@keyframes scE-mark{0%{opacity:0}50%{opacity:0}52%{opacity:1}84%{opacity:1}86%{opacity:0}100%{opacity:0}}
.scE-mark{animation:scE-mark 12s infinite}
@keyframes scE-crk{0%{opacity:0}46%{opacity:0}48%{opacity:1}82%{opacity:1}84%{opacity:0}100%{opacity:0}}
.scE-crk{animation:scE-crk 12s infinite}
@keyframes scE-tunw{0%{opacity:1}46%{opacity:1}48%{opacity:0}84%{opacity:0}86%{opacity:1}100%{opacity:1}}
.scE-tun{animation:scE-tunw 12s infinite}.scE-tun circle{transform-box:fill-box;transform-origin:center;animation:scTun 1.2s linear infinite}.scE-tun circle:nth-child(2){animation-delay:-.4s}.scE-tun circle:nth-child(3){animation-delay:-.8s}
.scE-rec{animation:scBlink 1s steps(2) infinite}
@keyframes scFlow{100%{stroke-dashoffset:-16}}
@keyframes scSpin{0%{transform:scale(1.6)}100%{transform:scale(.3)}}
@keyframes scTun{0%{transform:scale(.4);opacity:0}30%{opacity:1}100%{transform:scale(4.6);opacity:0}}
@keyframes scBlink{0%{opacity:1}100%{opacity:.15}}
@keyframes scOk{0%{opacity:0}80%{opacity:0}82%{opacity:1}95%{opacity:1}97%{opacity:0}100%{opacity:0}}
.sc-ok{animation:scOk 12s infinite}
.sc-flow{stroke-dasharray:6 10}
.scA-fur,.scC-tool{stroke-dasharray:100}
.scB-nut,.scC-pud,.scC-swirl,.scD-hose,.scE-cable{transform-box:fill-box;transform-origin:center}.scD-hose,.scE-cable{transform-origin:left center}
.scC-grate,.scC-hair{transform-box:fill-box;transform-origin:center}
@keyframes scCap{0%{opacity:0;transform:translateY(4px)}1.5%{opacity:1;transform:none}23.5%{opacity:1;transform:none}25%{opacity:0;transform:translateY(-4px)}100%{opacity:0}}
.sc-cap span:nth-of-type(1){animation:scCap 12s infinite 0.0s both}.sc-cap span:nth-of-type(2){animation:scCap 12s infinite 3.0s both}.sc-cap span:nth-of-type(3){animation:scCap 12s infinite 6.0s both}.sc-cap span:nth-of-type(4){animation:scCap 12s infinite 9.0s both}
@keyframes scBar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.sc-bar i{animation:scBar 12s linear infinite}
.sc-box.off *,.sc-box.off *::before,.sc-box.paused *,.sc-box.paused *::before{animation-play-state:paused!important}