:root{--fond:#1C1917;--surface:#26211D;--bord:#332D28;--bord2:#4A423B;--ambre:#F0B052;--lueur:#F7C97E;--texte:#F5EFE6;--texte2:#CFC5B8;--texte3:#9C9186;--cuivre:#E39A4C;--grad:linear-gradient(135deg,#F9D497 0%,#F0B052 48%,#E39A4C 100%);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:110px}
body{margin:0;background:var(--fond);color:var(--texte);font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--lueur)}
h1,h2,h3,.t{font-family:'Barlow Condensed','Source Sans 3',sans-serif;font-weight:700;line-height:1.05;margin:0;text-wrap:balance;color:var(--texte)}
h1{font-size:clamp(40px,6vw,76px)}
h2{font-size:clamp(32px,4.2vw,52px)}
h3{font-size:clamp(24px,2.4vw,30px)}
p{margin:0}
.wrap{width:min(1280px,100% - 40px);margin-inline:auto}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ambre)}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--ambre);border-radius:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:600;font-size:17px;padding:16px 26px;border-radius:10px;border:2px solid transparent;transition:transform .2s,background .2s,background-position .5s,box-shadow .3s}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--grad);background-size:180% 100%;background-position:0 0;color:var(--fond);box-shadow:0 8px 24px -14px rgba(240,176,82,.7)}
.btn-p:hover{background-position:100% 0;box-shadow:0 14px 30px -14px rgba(240,176,82,.85)}
.btn-s{background:rgba(245,239,230,.06);color:var(--texte);border-color:rgba(245,239,230,.35)}
.btn-s:hover{background:rgba(245,239,230,.12)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--lueur);outline-offset:3px}
/* en-tête */
.apercu{background:#F0B052;color:#1C1917;font-size:14px;font-weight:600;text-align:center;padding:8px 16px;letter-spacing:.3px}
.apercu span{font-weight:400;opacity:.85}
.apercu a{color:#1C1917;font-weight:700}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(28,25,23,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--bord)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--texte)}
.brand .mark{width:46px;height:46px;flex:none;filter:drop-shadow(0 4px 14px rgba(240,176,82,.25));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.brand:hover .mark{transform:translateY(-2px) rotate(-4deg)}
.brand .name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;letter-spacing:.5px;line-height:1;display:flex;flex-direction:column;gap:5px;white-space:nowrap}
.brand .name em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .name small{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--texte3)}
.nav{display:flex;gap:28px;font-weight:600;font-size:16px}
.nav a{color:var(--texte2);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--texte)}
.nav a[aria-current]{border-bottom:2px solid var(--ambre);padding-bottom:2px}
.actions{display:flex;align-items:center;gap:18px}
.tel{color:var(--texte);text-decoration:none;font-weight:600;font-size:17px}
.burger{display:none;background:none;border:1px solid var(--bord2);border-radius:8px;width:44px;height:44px;color:var(--texte);cursor:pointer}
/* héros */
.hero{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:center}
.hero img.bg,.hero video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* bande des marques */
.marques{background:var(--surface);border-block:1px solid var(--bord);overflow:hidden;padding-block:30px;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marques .track{display:flex;width:max-content;animation:defile 38s linear infinite}
.marques .track>div{display:flex;align-items:center;gap:44px;padding-right:44px}
.marques span{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(34px,4.4vw,58px);line-height:1;text-transform:uppercase;letter-spacing:1px;color:transparent;-webkit-text-stroke:1.3px rgba(245,239,230,.6);white-space:nowrap;transition:color .3s,-webkit-text-stroke-color .3s}
.marques span:hover{color:var(--texte);-webkit-text-stroke-color:transparent}
.marques b{font-size:20px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.marques:hover .track{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,25,23,.96) 0%,rgba(28,25,23,.84) 45%,rgba(28,25,23,.3) 100%)}
.hero .wrap{position:relative;padding-block:88px;display:flex;flex-direction:column;gap:24px;max-width:820px;margin-left:max(20px,calc((100% - 1280px)/2))}
.hero p.lead{font-size:clamp(18px,1.6vw,21px);color:var(--texte2);max-width:560px}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px;color:var(--texte2)}
.hero.small{min-height:440px}
.hero::after{content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;max-width:820px;max-height:820px;background:radial-gradient(closest-side,rgba(240,176,82,.16),transparent 70%);pointer-events:none}
/* bande de confiance */
.band{background:var(--surface);border-block:1px solid var(--bord)}
.band .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:28px}
.band .n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:40px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.band .l{font-size:15px;color:var(--texte2);margin-top:4px}
/* sections */
section.sec{padding-block:80px}
section.sec.alt{background:var(--surface);border-block:1px solid var(--bord)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:36px}
.sec-head .l{display:flex;flex-direction:column;gap:10px}
.sec-head p{color:var(--texte2);max-width:440px;font-size:17px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.card{position:relative;isolation:isolate;background:var(--surface);border:1px solid var(--bord);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--texte);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
a.card::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;background:linear-gradient(150deg,#F9D497,#F0B052 30%,rgba(227,154,76,.35) 60%,transparent 85%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;pointer-events:none}
a.card::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(380px circle at var(--x,50%) var(--y,0%),rgba(249,212,151,.13),transparent 65%);opacity:0;transition:opacity .45s;pointer-events:none}
a.card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px -30px rgba(0,0,0,.85),0 20px 50px -28px rgba(240,176,82,.45)}
a.card:hover::before,a.card:hover::after{opacity:1}
.card img{transition:filter .6s}
a.card img{filter:saturate(.85) brightness(.92)}
a.card:hover img{filter:saturate(1.05) brightness(1)}
.card .k{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:2px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card .more i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
a.card:hover .more i{transform:translateX(6px)}
.card img{width:100%;height:220px;object-fit:cover}
.grid4 .card img{height:190px}
.card .body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px}
.card .body p{color:var(--texte2);font-size:16px}
.card .more{font-size:15px;font-weight:600;color:var(--ambre)}
.prose{max-width:66ch;display:flex;flex-direction:column;gap:16px;color:var(--texte2)}
.prose strong{color:var(--texte)}
.prose ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.split img{border-radius:18px;width:100%;height:100%;object-fit:cover;max-height:460px}
.list{display:flex;flex-direction:column}
.list .it{display:flex;gap:20px;padding-block:22px;border-top:1px solid var(--bord)}
.list .it:last-child{border-bottom:1px solid var(--bord)}
.list .bar{width:4px;border-radius:2px;background:var(--grad);flex:none;align-self:stretch}
.list .it p{color:var(--texte2);font-size:16px;margin-top:4px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.step{border-top:2px solid var(--bord2);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.step .num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:48px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step p{color:var(--texte2);font-size:16px}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gal figure{margin:0;background:var(--surface);border:1px solid var(--bord);border-radius:14px;overflow:hidden}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gal figcaption{padding:12px 16px;font-size:15px;color:var(--texte2)}
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pairs figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--bord);background:var(--surface)}
.pairs img{width:100%}
.pairs figcaption{padding:12px 16px;font-size:15px;color:var(--texte2)}
.faq details{border-top:1px solid var(--bord);padding-block:16px}
.faq details:last-child{border-bottom:1px solid var(--bord)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--ambre);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--texte2);margin-top:10px;max-width:66ch}
.cta-final{background:var(--grad);color:var(--fond);position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;inset:-50% -10% auto auto;width:520px;height:520px;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent 70%);pointer-events:none}
.cta-final .wrap{position:relative}
.cta-final .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:72px}
.cta-final h2{color:var(--fond);max-width:760px}
.cta-final p{color:#3A2E1F;max-width:600px;margin-top:12px}
.cta-final .btn-p{background:var(--fond);color:var(--texte);box-shadow:0 10px 30px -14px rgba(28,25,23,.8)}
.cta-final .btn-p:hover{background:#2A2420}
.cta-final .btn-s{color:var(--fond);border-color:rgba(28,25,23,.45)}
.cta-final .b{display:flex;flex-direction:column;gap:12px;align-items:flex-end;flex:none}
footer{padding-block:64px 32px}
footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
footer .col{display:flex;flex-direction:column;gap:10px;font-size:16px;color:var(--texte2)}
footer .col .h{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ambre);margin-bottom:6px}
footer .col a{color:var(--texte2);text-decoration:none}
footer .col a:hover{color:var(--texte)}
footer .legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--bord);font-size:14px;color:var(--texte3);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
/* formulaire */
form.f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
form.f .full{grid-column:1/-1}
form.f label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600;color:var(--texte2)}
form.f input,form.f select,form.f textarea{font:inherit;color:var(--texte);background:var(--fond);border:1px solid var(--bord2);border-radius:10px;padding:12px 14px}
form.f input:focus,form.f select:focus,form.f textarea:focus{outline:2px solid var(--ambre);border-color:var(--ambre)}
form.f textarea{min-height:140px;resize:vertical}
.note{font-size:15px;color:var(--texte3)}
.ok{display:none;background:var(--surface);border:1px solid var(--ambre);border-radius:12px;padding:20px;color:var(--texte)}
.contact-box{background:var(--surface);border:1px solid var(--bord);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:14px;font-size:17px}
.contact-box .h{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ambre)}
.contact-box a{color:var(--texte);text-decoration:none;font-weight:600}
.mobilebar{display:none}
@media (max-width:960px){
 .nav{display:none}.nav.open{display:flex;position:absolute;left:0;right:0;top:84px;background:var(--surface);flex-direction:column;padding:20px;border-bottom:1px solid var(--bord)}
 .burger{display:block}.actions .btn{display:none}
 .band .wrap,.grid3,.grid4,.steps,.gal{grid-template-columns:repeat(2,minmax(0,1fr))}
 .split{grid-template-columns:1fr}.sec-head{flex-direction:column;align-items:flex-start}
 .cta-final .wrap{flex-direction:column;align-items:flex-start}.cta-final .b{align-items:flex-start}
 footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
 body{font-size:17px}
 .brand .name{font-size:20px}.brand .name small{font-size:10px;letter-spacing:1.5px}.brand .mark{width:38px;height:38px}
 .hero .wrap{padding-block:56px}.hero .veil{background:linear-gradient(180deg,rgba(28,25,23,.94) 0%,rgba(28,25,23,.86) 70%,rgba(28,25,23,.6) 100%)}
 .band .wrap,.grid2,.grid3,.grid4,.steps,.gal,.pairs,form.f{grid-template-columns:1fr}
 .actions .tel{display:none}
 footer .cols{grid-template-columns:1fr}
 .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--bord);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:10px}
 .mobilebar .btn{flex:1;padding:14px 10px;font-size:16px}
 body{padding-bottom:80px}
}


/* héros accueil — descente dans le semi-enfoui */
.descente{position:relative;background:radial-gradient(110% 90% at 68% 50%,#2B241E 0%,#1C1917 55%,#131110 100%);border-bottom:1px solid var(--bord)}
.descente .tunnel,.descente .gauge,.descente .scroll-hint,.descente .shade{display:none}
.descente .pan{padding-block:64px;display:flex;flex-direction:column;gap:22px}
.descente .p1{padding-top:88px}
.descente .p3{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;padding-bottom:88px}
.descente .p3 .p3t{display:flex;flex-direction:column;gap:20px}
.descente h1{font-size:clamp(40px,5.2vw,72px)}
.descente .lead{font-size:clamp(18px,1.6vw,21px);color:var(--texte2);max-width:560px}
.descente .cta{display:flex;flex-wrap:wrap;gap:14px}
.descente .chips{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px;color:var(--texte2)}
/* mode animé */
.descente.fx{height:360vh}
.fx .stage{position:sticky;top:84px;height:calc(100vh - 84px);height:calc(100svh - 84px);overflow:hidden}
.fx .tunnel{display:block;position:absolute;inset:0;perspective:800px;perspective-origin:68% 50%}
.fx .world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.fx .ring,.fx .disc{--d:min(64vh,580px);position:absolute;left:68%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%}
.fx .ring{border:2px solid rgba(245,239,230,.16)}
.fx .ring:nth-child(3n+1){border-color:rgba(240,176,82,.6);box-shadow:0 0 34px rgba(240,176,82,.14),inset 0 0 34px rgba(240,176,82,.12)}
.fx .ring.rim{border:12px solid rgba(245,239,230,.88);box-shadow:0 0 0 3px rgba(240,176,82,.5),inset 0 0 0 3px rgba(240,176,82,.35),0 40px 90px -20px rgba(0,0,0,.7)}
.fx .disc{background:url(img/apres-lavage-interieur-cuve-semi-enfoui.jpg) center/cover;box-shadow:0 0 0 2px rgba(240,176,82,.5),0 0 80px rgba(240,176,82,.25);filter:brightness(.85)}
.fx .shade{display:block;position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,17,16,.94) 0%,rgba(19,17,16,.75) 36%,rgba(19,17,16,0) 62%);pointer-events:none}
.fx .panels{position:absolute;top:0;bottom:0;left:0;right:0;margin-inline:auto}
.fx .pan{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + var(--dy,0px)));padding:0;max-width:640px;opacity:0;will-change:opacity,transform}
.fx .p1{opacity:1}
.fx .p3{max-width:none;padding:0}
.fx .p3 .ba{margin-right:72px}
.fx .p3 .p3t{max-width:520px}
.fx .gauge{display:flex;position:absolute;right:28px;top:50%;transform:translateY(-50%);flex-direction:column;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--texte3)}
.fx .gauge .trk{position:relative;width:2px;height:200px;background:linear-gradient(180deg,rgba(245,239,230,.35),rgba(240,176,82,.5))}
.fx .gauge i{position:absolute;left:50%;top:calc(var(--g,0) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 5px rgba(240,176,82,.2)}
.fx .scroll-hint{display:flex;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--texte2);transition:opacity .4s;animation:pulse 2.2s ease-in-out infinite}
.fx.moved .scroll-hint{opacity:0}
@keyframes pulse{50%{transform:translate(-50%,6px)}}
/* avant / après */
.ba{position:relative;height:min(500px,62vh);aspect-ratio:3/4;border-radius:20px;overflow:hidden;box-shadow:0 44px 90px -30px #000,0 0 0 1px rgba(249,212,151,.45),0 30px 70px -40px rgba(240,176,82,.6);touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .apres{clip-path:inset(0 0 0 var(--p))}
.ba .line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#F9D497 15%,#F0B052 85%,transparent);box-shadow:0 0 18px rgba(249,212,151,.8)}
.ba .knob{position:absolute;top:50%;left:var(--p);width:50px;height:50px;border-radius:50%;background:var(--grad);color:var(--fond);display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 0 0 7px rgba(240,176,82,.2),0 12px 26px -8px #000;transition:box-shadow .3s}
.ba:hover .knob,.ba:focus-within .knob{box-shadow:0 0 0 11px rgba(240,176,82,.26),0 12px 26px -8px #000}
.ba:focus-within{outline:3px solid var(--lueur);outline-offset:4px}
.ba .lab{position:absolute;top:14px;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:6px 11px;border-radius:999px;backdrop-filter:blur(8px);pointer-events:none}
.ba .lab.l{left:14px;background:rgba(28,25,23,.72);color:var(--texte)}
.ba .lab.r{right:14px;background:rgba(249,212,151,.92);color:var(--fond)}
.ba .hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:13px;font-weight:600;white-space:nowrap;padding:7px 13px;border-radius:999px;background:rgba(28,25,23,.72);backdrop-filter:blur(8px);color:var(--texte2);transition:opacity .4s;pointer-events:none}
.ba.used .hint{opacity:0}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
@media (max-width:860px){
 .descente .p3{grid-template-columns:1fr;gap:28px}.descente .ba{height:auto;width:min(340px,78vw)}
 .fx .tunnel{perspective-origin:50% 32%}.fx .ring,.fx .disc{--d:min(76vw,46vh);left:50%;top:32%}
 .fx .shade{background:linear-gradient(180deg,rgba(19,17,16,0) 18%,rgba(19,17,16,.7) 48%,rgba(19,17,16,.96) 72%)}
 .fx .pan{top:auto;bottom:40px;transform:translateY(var(--dy,0px))}
 .fx .p1 .chips{display:none}
 .fx .p3{bottom:24px}.fx .p3 .p3t{gap:12px}.fx .p3 .p3t .lead,.fx .p3 .p3t .cta{display:none}
 .fx .p3 .ba{width:min(260px,62vw);justify-self:center;margin-right:0}
 .fx .gauge{display:none}
}
@media (max-width:640px){.fx .pan{bottom:104px}.fx .p3{bottom:96px}.descente h1{font-size:clamp(34px,9vw,44px)}.fx .p1 .lead{font-size:16px}.fx .scroll-hint{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}.marques .track{animation:none}}