@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Work Sans";src:url(fonts/work-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url(fonts/work-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --royal:#1a4590; --royal-l:#2a62c0; --deep:#0f2d66; --sky:#8dbbec; --ice:#eaf3fc; --foam:#f7fbff; --sun:#ffd25e; --ink:#13213d; --muted:#4b5f80;
  --line:rgba(26,69,144,.2); --head:"Archivo","Work Sans",sans-serif; --sans:"Work Sans","Segoe UI",system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px); --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--foam);color:var(--ink);font:400 17.5px/1.65 var(--sans);-webkit-text-size-adjust:100%;overflow-x:clip}
h1,h2,h3{font-family:var(--head);font-weight:800;margin:0;color:var(--deep)}
a{color:inherit}
:focus-visible{outline:3px solid var(--royal-l);outline-offset:3px}
.todo{background:rgba(255,210,94,.5);border-bottom:1px dotted var(--royal)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.mock{margin:0;padding:7px var(--pad);background:var(--deep);color:#eaf3fc;font:600 .78rem var(--sans);text-align:center}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;padding:10px var(--pad);background:rgba(247,251,255,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.logo{margin-right:auto;display:flex;flex-direction:column;text-decoration:none;font:400 1.35rem/1 var(--sans);color:var(--royal);letter-spacing:.02em}
.logo b{font:800 1.4rem/1 var(--head);letter-spacing:.04em;text-transform:uppercase;display:inline}
.logo span{font:600 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.nav{display:none}
@media (min-width:900px){.nav{display:flex;gap:28px}.nav a{font-weight:600;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}.nav a:hover{border-bottom-color:var(--royal-l)}}

/* Boutons : bulle de savon (principal) et raclette (secondaire) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 34px;border:0;border-radius:999px;color:#fff;font:600 1.02rem var(--sans);text-decoration:none;cursor:pointer;background:radial-gradient(circle at 10% 30%,rgba(255,255,255,.95) 0 3.5%,rgba(255,255,255,.28) 4% 9%,transparent 10%),radial-gradient(circle at 50% 120%,rgba(141,187,236,.8),transparent 60%),linear-gradient(160deg,#2a62c0,#17449a);box-shadow:inset 0 -6px 14px rgba(255,255,255,.2),0 10px 22px rgba(23,68,154,.32);transition:transform .25s}
.btn:hover{animation:wob .7s ease}
.btn:active{transform:scale(.93)}
@keyframes wob{0%{transform:scale(1)}30%{transform:scale(1.08,.94) translateY(-3px)}60%{transform:scale(.97,1.04) translateY(-4px)}100%{transform:scale(1) translateY(-3px)}}
.btn{white-space:nowrap}
.btn.small{min-height:46px;padding:0 20px;font-size:.9rem}
.btn.blade{background:#fff;color:var(--deep);border-radius:6px 6px 2px 2px;border-bottom:7px solid #1b2433;box-shadow:0 6px 14px rgba(15,45,102,.18);overflow:hidden;animation:none}
.btn.blade::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(90deg,transparent,rgba(141,187,236,.65),transparent);transform:skewX(-20deg);transition:left .6s}
.btn.blade:hover{animation:none;transform:translateY(-2px)}
.btn.blade:hover::after{left:120%}

/* Hero : une vitre embuée qu'on essuie */
.hero{position:relative;min-height:calc(100svh - 120px);display:grid;align-items:center;padding:clamp(30px,6vh,70px) var(--pad);overflow:hidden}
.scene,.fog{position:absolute;inset:0;width:100%;height:100%}
.scene svg{width:100%;height:100%;display:block}
.fog{touch-action:pan-y;cursor:crosshair}
.hero-card{position:relative;z-index:2;max-width:640px;padding:clamp(24px,4vw,44px);background:rgba(255,255,255,.93);border-left:8px solid var(--royal);box-shadow:0 20px 50px rgba(15,45,102,.25);margin-left:max(0px,calc((100% - var(--max))/2))}
.eyebrow{margin:0 0 12px;font:600 .8rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--royal-l)}
.hero h1{font-size:clamp(2.3rem,7.6vw,4.6rem);line-height:1;letter-spacing:-.01em}
.lead{margin:18px 0 26px;max-width:30em}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.wipe-hint{position:absolute;z-index:1;right:var(--pad);bottom:16px;margin:0;padding:6px 14px;background:rgba(255,255,255,.85);color:var(--deep);font:600 .82rem var(--sans);border-radius:999px;transition:opacity .6s;pointer-events:none}
.wipe-hint.gone{opacity:0}

section{max-width:var(--max);margin:0 auto;padding:clamp(70px,12vh,130px) var(--pad) 0}
.hero,.soap{max-width:none}
h2{font-size:clamp(1.9rem,5.4vw,3.2rem);line-height:1.05;margin-bottom:clamp(22px,4vh,38px);max-width:16em}
h3{font-size:1.15rem;letter-spacing:.01em}

/* Services : une liste de contrôle qui se coche */
.check{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(24px,5vw,70px)}
.check li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.check p{margin:4px 0 0;color:var(--muted);font-size:.98rem}
.tick{width:40px;height:40px;fill:none;stroke:var(--royal-l);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.tick path{stroke:var(--royal);stroke-width:4;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .7s ease .25s}
.tick circle{stroke-dasharray:110;stroke-dashoffset:110;transition:stroke-dashoffset .6s ease}
.check li.in .tick path,.check li.in .tick circle{stroke-dashoffset:0}
@media (min-width:860px){.check{grid-template-columns:1fr 1fr}}

/* Bandeau savonneux avec des bulles qui montent */
.soap{position:relative;margin-top:clamp(70px,12vh,130px);padding:clamp(70px,12vh,120px) var(--pad);background:linear-gradient(180deg,var(--royal) 0%,#2a62c0 100%);color:#fff;overflow:hidden}
.soap-t{position:relative;z-index:1;max-width:22em;margin:0 auto;font:800 clamp(1.5rem,4.6vw,2.8rem)/1.15 var(--head);text-align:center}
.bubbles i{position:absolute;bottom:-80px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.8) 0 8%,rgba(255,255,255,.12) 40%,transparent 70%);animation:rise 9s linear infinite}
.bubbles i:nth-child(1){left:5%;width:34px;height:34px;animation-duration:8s}
.bubbles i:nth-child(2){left:14%;width:20px;height:20px;animation-duration:11s;animation-delay:-3s}
.bubbles i:nth-child(3){left:23%;width:56px;height:56px;animation-duration:13s;animation-delay:-6s}
.bubbles i:nth-child(4){left:33%;width:26px;height:26px;animation-duration:9s;animation-delay:-2s}
.bubbles i:nth-child(5){left:42%;width:42px;height:42px;animation-duration:12s;animation-delay:-8s}
.bubbles i:nth-child(6){left:52%;width:18px;height:18px;animation-duration:10s;animation-delay:-4s}
.bubbles i:nth-child(7){left:60%;width:64px;height:64px;animation-duration:14s;animation-delay:-1s}
.bubbles i:nth-child(8){left:70%;width:30px;height:30px;animation-duration:9s;animation-delay:-7s}
.bubbles i:nth-child(9){left:78%;width:46px;height:46px;animation-duration:12s;animation-delay:-5s}
.bubbles i:nth-child(10){left:86%;width:22px;height:22px;animation-duration:8s;animation-delay:-3s}
.bubbles i:nth-child(11){left:93%;width:38px;height:38px;animation-duration:11s;animation-delay:-9s}
.bubbles i:nth-child(12){left:48%;width:28px;height:28px;animation-duration:15s;animation-delay:-10s}
@keyframes rise{from{transform:translateY(0) translateX(0)}50%{transform:translateY(-200px) translateX(14px)}to{transform:translateY(-480px) translateX(-8px);opacity:.1}}

/* Avant / après */
.ba{position:relative;aspect-ratio:16/9;max-width:900px;border:3px solid var(--deep);overflow:hidden;touch-action:pan-y}
.ba-layer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.ba-layer span{align-self:flex-start;padding:4px 14px;background:var(--deep);color:#fff;font:800 .85rem var(--head);letter-spacing:.14em;text-transform:uppercase}
.ba-layer em{margin-top:8px;font:600 .8rem var(--sans);letter-spacing:.14em;font-style:normal;color:var(--deep)}
.ba-after{background:linear-gradient(160deg,#bfe0fb,#eaf6ff);align-items:flex-end}
.ba-after span{align-self:flex-end}
.ba-after em{align-self:flex-end}
.ba-before{background:linear-gradient(160deg,#a9a79a,#cdc9b9 50%,#b6b3a5);clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 2px var(--deep);pointer-events:none}
.ba-line::after{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px;border-radius:50%;background:#fff;border:3px solid var(--deep)}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba:focus-within{outline:3px solid var(--royal-l);outline-offset:3px}
.note{margin:16px 0 0;font-size:.92rem}

/* Contact */
.contact{display:grid;gap:44px}
.people{list-style:none;margin:18px 0;padding:0;display:grid;gap:12px;max-width:420px}
.people a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;background:#fff;border:2px solid var(--royal);border-radius:999px;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.people a span{font-weight:600}
.people b{font:800 1.15rem var(--head);color:var(--royal)}
.people a:hover{background:var(--royal);color:#fff;transform:translateX(6px)}
.people a:hover b{color:#fff}
.mail{font:800 clamp(1.15rem,3.4vw,1.5rem) var(--head);color:var(--royal);text-decoration-thickness:3px;text-underline-offset:5px}
form{display:grid;gap:6px;max-width:540px}
label{font:600 .88rem var(--sans);margin-top:14px;color:var(--deep)}
input[type=text],input[type=tel],select,textarea{font:inherit;padding:12px 14px;border:2px solid var(--royal);border-radius:12px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--sky);outline-offset:0}
textarea{resize:vertical}
.hp{position:absolute;left:-9999px}
form .btn{margin-top:22px;justify-self:start}
.form-msg{min-height:1.6em;margin:12px 0 0;font-weight:600}
.form-msg.ok{color:#1d6b3a}.form-msg.err{color:#a4271a}.form-msg.info{background:rgba(255,210,94,.5);padding:10px 12px;border-radius:8px}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr;gap:80px}}

footer{margin-top:clamp(70px,12vh,130px);padding:30px var(--pad) 90px;background:var(--deep);color:#d4e4f8}
footer p{margin:4px auto;max-width:calc(var(--max) - 2*var(--pad))}
footer b{color:#fff}
footer a{margin-right:20px}
.dial{position:fixed;z-index:40;left:0;right:0;bottom:0;display:flex;gap:8px;padding:8px 10px;background:rgba(247,251,255,.96);border-top:1px solid var(--line)}
.dial a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:var(--royal);color:#fff;font:600 .92rem var(--sans);text-decoration:none}
@media (min-width:900px){.dial{display:none}footer{padding-bottom:30px}}

.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{animation:none}
  .bubbles i{animation:none;bottom:20px}
  .tick path,.tick circle{stroke-dashoffset:0;transition:none}
  .fog,.wipe-hint{display:none}
}

.legal-page{background:#fff}
.legal{max-width:720px;margin:0 auto;padding:30px var(--pad) 70px}
.legal h1{font-size:2.2rem;line-height:1.05;margin:20px 0 14px}
.legal h2{font-size:1.3rem;margin:28px 0 8px;max-width:none}
.legal .draft{background:rgba(255,210,94,.4);border:2px solid var(--sun);padding:12px 14px}