/* Ain Clim Service · site v3 · direction « Le choc »
   Fond nuit, avant/après en premier, prix juste en dessous, barre d'action fixe sur mobile. */
:root{
  --n:#06111f; --n2:#0b1b30; --n3:#12294a; --mint:#2fd27a; --mint-d:#25b968; --cy:#1aced9;
  --w:#f1f6f8; --t:#c3d0db; --g:#8ea1b3; --line:rgba(255,255,255,.12);
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px; --gut:max(18px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--n);color:var(--w);font-family:var(--f);font-size:17px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--cy);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut);padding-right:max(18px,env(safe-area-inset-right,0px))}
.disp{font-weight:850;font-stretch:72%;text-transform:uppercase;line-height:.92;letter-spacing:-.005em}
.disp em{font-style:normal;color:var(--mint)}
.kw{display:block;font-size:12.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--cy)}
.lead{color:var(--t);font-size:18px;max-width:34em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:16px 24px;font:800 17px/1.1 var(--f);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s}
.btn:active{transform:scale(.98)}
.btn-go{background:var(--mint);color:var(--n)}
.btn-go:hover{background:#45dd8a}
.btn-line{border:1.5px solid rgba(255,255,255,.35);color:#fff;background:transparent}
.btn-line:hover{border-color:#fff}
.btn svg{width:18px;height:18px;flex:none}

/* en-tête */
header{position:sticky;top:0;z-index:30;background:rgba(6,17,31,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo img{height:30px;width:auto}
.menu{display:flex;gap:26px;font-size:15px;color:var(--t)}
.menu a{text-decoration:none}
.menu a:hover{color:#fff}
.nav-call{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:8px 14px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.nav-call svg{width:16px;height:16px;color:var(--mint)}
@media (max-width:900px){.menu{display:none}.logo img{height:26px}}
@media (max-width:380px){.nav-call span{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:min(760px,calc(100svh - 64px));border-bottom:1px solid var(--line)}
.hero-txt{padding:48px 48px 48px max(18px,calc((100vw - 1180px)/2 + 18px));display:grid;align-content:center;gap:22px}
.hero h1 .disp{display:block;font-size:clamp(46px,7.4vw,104px);margin-top:12px}
.price{display:flex;align-items:baseline;gap:12px}
.price b{font-weight:900;font-stretch:75%;font-size:60px;line-height:1;color:var(--mint)}
.price span{font-size:14px;color:var(--t);line-height:1.35}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.trust{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--g);border-top:1px solid var(--line);padding-top:18px}
.trust b{color:#fff;font-weight:700}
.hero-media{position:relative;min-height:420px}
.hero-media .ba{position:absolute;inset:0}
.hero-media .cap{position:absolute;left:12px;bottom:12px;font-size:12px;color:#fff;background:rgba(6,17,31,.75);padding:5px 9px;border-radius:6px;pointer-events:none}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-media{order:-1;min-height:0;aspect-ratio:4/5;max-height:64svh}
  .hero-txt{padding:24px var(--gut) 30px;gap:18px}
  .hero h1 .disp{font-size:clamp(44px,13vw,64px)}
  .price b{font-size:52px}
  .ctas .btn{flex:1 1 100%}
}

@media (max-width:900px){.hero-media:has(.hm-ticket){order:0;aspect-ratio:auto;max-height:none}.hm-ticket{position:relative!important;padding:0 var(--gut) 30px!important;background:none!important}}

/* avant / après : défilement automatique en boucle de 4 s */
@property --p{syntax:"<percentage>";inherits:true;initial-value:50%}
@keyframes baloop{0%,100%{--p:90%}50%{--p:10%}}
.ba.auto{animation:baloop 4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ba.auto{animation:none}}
.hm-card{position:absolute;inset:28px;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.hm-card .ba{position:absolute;inset:0}
.bubble{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:10px;background:rgba(6,17,31,.88);border-radius:99px;padding:6px 16px 6px 6px;pointer-events:none;max-width:calc(100% - 24px)}
.bubble img{width:52px;height:52px;border-radius:50%;border:2px solid var(--mint);object-fit:cover;flex:none}
.bubble span{font-size:12.5px;color:var(--t);line-height:1.25}
.bubble b{display:block;color:#fff;font-size:15px}
@media (max-width:900px){.hm-card{inset:12px var(--gut) 0;border-radius:16px}.bubble img{width:46px;height:46px}}

.ba{position:relative;overflow:hidden;--p:55%;background:var(--n2);touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .bf{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba .hd{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.ba .hd::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306111f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}
.ba .tg{position:absolute;top:14px;padding:5px 10px;border-radius:6px;font:800 12px/1 var(--f);letter-spacing:.1em;pointer-events:none}
.ba .tg.l{left:14px;background:rgba(6,17,31,.85);color:#fff}
.ba .tg.r{right:14px;background:var(--mint);color:var(--n)}

/* sections */
section{padding-block:80px}
.alt{background:var(--n2)}
.sec-h{display:grid;gap:14px;margin-bottom:34px;max-width:780px}
.sec-h .disp{font-size:clamp(36px,5.2vw,64px)}
@media (max-width:700px){section{padding-block:56px}}

/* ticket de prix */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media (max-width:900px){.offer{grid-template-columns:1fr;gap:28px}}
.ticket{background:var(--n3);border:1px solid rgba(47,210,122,.45);border-radius:18px;padding:24px;display:grid;gap:16px}
.t-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.t-p{font-weight:900;font-stretch:75%;font-size:68px;line-height:1;color:var(--mint)}
.t-p small{font-size:18px;color:#fff;font-weight:700;font-stretch:100%}
.t-cd{text-align:right;font-size:13px;color:var(--t);line-height:1.3}
.t-cd b{display:block;font-weight:850;font-stretch:80%;font-size:30px;color:#fff;text-transform:uppercase}
.t-q{font-size:14px;font-weight:650;color:var(--t)}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.seg button{border:1.5px solid rgba(255,255,255,.28);background:transparent;color:#fff;border-radius:10px;padding:13px 0;font:800 18px var(--f);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--n)}
.t-opt{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
.t-opt input{width:22px;height:22px;accent-color:var(--mint)}
.t-tot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px dashed rgba(255,255,255,.25);padding-top:14px;font-size:15px}
.t-tot b{font-weight:900;font-stretch:80%;font-size:36px;color:var(--mint);font-variant-numeric:tabular-nums}
@media (max-width:420px){.t-p{font-size:54px}.t-cd b{font-size:24px}}
.t-note{font-size:13px;color:var(--g)}
.incl{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.incl li{display:grid;grid-template-columns:24px 1fr;gap:10px;color:var(--t)}
.incl li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306111f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;margin-top:2px}
.incl b{color:#fff}

/* rail photos */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.rail figure{margin:0;scroll-snap-align:start;display:grid;gap:10px;align-content:start}
.rail img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
.rail figcaption{font-size:15px;color:var(--t)}
.rail figcaption b{display:block;color:#fff;font-size:16px}
@media (max-width:700px){.rail{grid-auto-columns:62%;margin-right:calc(-1 * var(--gut))}}

/* comparatif */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vs>div{border-radius:14px;padding:22px;display:grid;gap:12px;align-content:start}
.vs .bad{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.vs .good{background:rgba(47,210,122,.1);border:1px solid rgba(47,210,122,.5)}
.vs h3{font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.vs .good h3{color:var(--mint)}
.vs .bad h3{color:var(--g)}
.vs dl{margin:0;display:grid;gap:10px}
.vs dt{font-size:13px;color:var(--g)}
.vs dd{margin:0;font-weight:650}
.vs .bad dd{color:var(--t);font-weight:500}
@media (max-width:560px){.vs{grid-template-columns:1fr}}

/* méthode */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.steps>div{background:var(--n3);border-radius:14px;padding:22px;display:grid;gap:10px;align-content:start}
.steps>div::before{counter-increment:s;content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--n);display:grid;place-items:center;font:900 20px var(--f)}
.steps h3{font-size:20px}
.steps p{color:var(--t);font-size:16px}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* Ludovic */
.me{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:center}
.me figure{margin:0}
.me img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.me figcaption{font-size:13px;color:var(--g);margin-top:8px}
.me .txt{display:grid;gap:16px}
.me .txt p{color:var(--t)}
.me .txt .disp{font-size:clamp(34px,4.6vw,56px)}
@media (max-width:800px){.me{grid-template-columns:1fr;gap:24px}.me figure{max-width:300px}}

/* zone */
.zone{display:flex;flex-wrap:wrap;gap:10px}
.zone a,.zone span{border:1px solid var(--line);border-radius:99px;padding:9px 15px;font-size:15px;text-decoration:none;color:var(--t)}
.zone a{color:#fff;border-color:rgba(26,206,217,.5)}
.zone a:hover{background:rgba(26,206,217,.12)}
.local{background:var(--n3);border-radius:14px;padding:24px;display:grid;gap:12px;max-width:780px}
.local p{color:var(--t)}

/* rendez-vous + formulaire */
.rdv{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media (max-width:900px){.rdv{grid-template-columns:1fr;gap:28px}}
.ms{background:#fff;color:#0a1b33;border-radius:18px;padding:24px;display:grid;gap:14px;scroll-margin-top:80px}
.ms-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:650;color:#4a5d72}
.ms-back{background:none;border:0;color:#0a1b33;font:700 14px var(--f);cursor:pointer;padding:4px}
.ms-bar{height:5px;background:#e3ebef;border-radius:9px;overflow:hidden}
.ms-bar span{display:block;height:100%;width:25%;background:var(--mint);transition:width .3s}
.ms fieldset{border:0;margin:0;padding:0;display:grid;gap:12px}
.ms legend{font-weight:850;font-stretch:80%;font-size:28px;line-height:1.05;text-transform:uppercase;margin-bottom:10px;padding:0}
.ms-js .ms-step{display:none}
.ms-js .ms-step.on{display:grid}
.ms-ch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ms-ch label{display:flex;align-items:center;justify-content:center;border:1.5px solid #c9d6dd;border-radius:10px;padding:16px 8px;font-weight:700;cursor:pointer;text-align:center}
.ms-ch label:hover{border-color:#0a1b33}
.ms-ch input{position:absolute;opacity:0;pointer-events:none}
.ms-ch label:has(input:checked){background:var(--mint);border-color:var(--mint)}
.ms-ch label:has(input:focus-visible){outline:3px solid var(--cy);outline-offset:2px}
.ms-wide{grid-column:1/-1}
.ms input[type=text],.ms input[type=tel],.ms input:not([type]){width:100%;border:1.5px solid #c9d6dd;border-radius:10px;padding:15px 14px;font:500 17px var(--f);color:#0a1b33;background:#fff}
.ms input:focus{border-color:#0a1b33;outline:none}
.ms .f{display:grid;gap:6px}
.ms .f label{font-size:14px;font-weight:650}
.ms .btn-go{width:100%}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:13.5px;color:#34485e;cursor:pointer}
.consent input{width:20px;height:20px;accent-color:#0a1b33;margin-top:2px}
.hint{font-size:13px;color:#4a5d72}
.hint a{color:#0a1b33;font-weight:650}
.err{color:#b4232a;font-weight:650;font-size:14px;min-height:0}
.err:empty{display:none}
.ms-ok{display:grid;gap:12px}
.ms-ok-t{font-weight:850;font-stretch:80%;font-size:30px;text-transform:uppercase}
.ms-ok-alt{font-size:14px;color:#4a5d72}
.ms-ok-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ms-ok .btn-line{color:#0a1b33;border-color:#0a1b33}

/* FAQ */
.faq{display:grid;gap:10px;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0 18px;background:rgba(255,255,255,.02)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mint);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--t)}

/* appel final */
.final{text-align:left;display:grid;gap:20px;justify-items:start}
.final .disp{font-size:clamp(40px,6.4vw,84px)}

/* pied de page */
footer{border-top:1px solid var(--line);padding-block:30px 24px;font-size:14px;color:var(--g)}
.foot{display:grid;gap:16px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.foot-top img{height:28px;width:auto}
.foot-c{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--t)}
.foot-c a{color:#fff;font-weight:650;text-decoration:none}
.foot-z{font-size:13px}
.foot-z a,.foot-b a{text-decoration:none;color:var(--g)}
.foot-z a:hover,.foot-b a:hover{color:#fff}
.foot-b{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;padding-top:14px;border-top:1px solid var(--line)}

/* barre d'action mobile */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;grid-template-columns:1fr 1.5fr;gap:10px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(6,17,31,.97);border-top:1px solid var(--line);transition:transform .25s}
.bar a{border-radius:10px;padding:14px 6px;text-align:center;font-weight:800;font-size:15px;text-decoration:none}
.bar .b1{border:1.5px solid rgba(255,255,255,.35)}
.bar .b2{background:var(--mint);color:var(--n)}
.bar.hide{transform:translateY(110%)}
@media (max-width:900px){.bar{display:grid}body{padding-bottom:84px}}

/* pages légales */
.legal{max-width:820px}
.legal h1{font-weight:850;font-stretch:75%;text-transform:uppercase;font-size:clamp(36px,5vw,56px);line-height:1;margin-bottom:18px}
.legal h2{font-size:21px;margin:30px 0 10px}
.legal p,.legal li{color:var(--t)}
.legal a{color:var(--cy)}
.legal table{width:100%;border-collapse:collapse;font-size:15px}
.legal td,.legal th{border:1px solid var(--line);padding:8px;text-align:left}