/* Roboto auto-hébergée : une seule police variable (graisses 400 à 700),
   37 ko, plus de requête vers Google Fonts. */
@font-face{font-family:'Roboto';src:url('../fonts/roboto-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

/* MonChauffagistePrivé par Proxiserve — feuille commune aux landings.
   Charte : bleu nuit 184562, rouge FF4A56, bleu 4E94E3, orange F38F35,
   vert 5DC44E. Typo : Roboto. */

:root{
  --navy:#184562; --navy-deep:#0F3049; --navy-ink:#0B2335;
  --red:#FF4A56; --red-deep:#E1313E; --red-pale:#FFE9EB; --red-da:#FF4A56; --lame:rgba(78,148,227,.38);
  --sky:#4E94E3; --sky-pale:#E8F1FB; --sky-mist:#F3F7FB;
  --orange:#F38F35; --orange-pale:#FDEEDF;
  --green:#5DC44E; --green-deep:#3E9A31; --green-pale:#E6F6E2;
  --ink:#16242E; --ink-2:#4B5B68; --ink-3:#6E7C88;
  --line:rgba(24,69,98,.12);
  --r-card:22px; --r-field:12px; --r-btn:999px;
  --ease:cubic-bezier(.32,.72,0,1);
  --font:'Roboto',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --accent:var(--red); --accent-pale:var(--red-pale);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.js .rv,.js .ent{opacity:1!important;transform:none!important}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--sky)}
/* renvois aux notes de bas de page (*, **) : pas de soulignement, en exposant */
a[href="#notes"]{text-decoration:none;color:inherit;font-size:.8em;vertical-align:super;line-height:0;margin-left:1px}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
h2{font-size:clamp(28px,4vw,40px);font-weight:700}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

/* ---------- marque ---------- */
.brand{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--navy);line-height:1}
.brand__name{font-size:25px;font-weight:400;letter-spacing:-.03em}
.brand__name b{font-weight:700}
.brand__name em{font-style:normal;font-weight:700;color:var(--red)}
.brand__by{display:flex;align-items:center;gap:0;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--navy)}
.brand__by .sun{width:16px;height:16px;color:var(--red);margin:0 3px 0 6px}
.brand__by b{font-weight:700;color:var(--red)}
.brand__by b + span{font-weight:400;color:var(--ink-2)}
.brand--light{color:#fff}
.brand--light .brand__by{color:#fff}
.brand--light .brand__by b + span{color:rgba(255,255,255,.8)}

/* ---------- en-tête ---------- */
.top{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.top .brand{min-width:0}
.top .btn{flex-shrink:0}
.top .btn .sm{display:none}
@media (max-width:599px){.top .btn{padding:11px 16px;font-size:14px}.top .btn .lg{display:none}.top .btn .sm{display:inline}.brand__name{font-size:22px}}
@media (max-width:339px){.top .btn{display:none}}
.top__right{display:flex;align-items:center;gap:14px}
.top__tel{display:none;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.top__tel .ico{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--red-pale);color:var(--red)}
.top__tel b{display:block;font-size:17px;line-height:1.1}
.top__tel span{display:block;font-size:12.5px;color:var(--ink-3)}
@media (min-width:860px){.top__tel{display:flex}}
.top__tel[hidden],.call[hidden],.sticky a[hidden]{display:none!important}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:var(--r-btn);border:0;font:inherit;font-weight:700;font-size:16.5px;line-height:1.1;text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),background .18s,box-shadow .18s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--red{background:var(--red);color:#fff;box-shadow:0 10px 24px -12px rgba(255,74,86,.7)}
.btn--red:hover{background:var(--red-deep)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-deep)}
.btn--white{background:#fff;color:var(--navy)}
.btn--white:hover{background:var(--sky-pale)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px #fff}
.btn--lg{padding:19px 32px;font-size:18px}
.btn .ico{width:20px;height:20px}
.btn[disabled]{opacity:.7;cursor:default}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px}
.cta-line small{font-size:14.5px;color:var(--ink-3)}
.cta-line--light small{color:rgba(255,255,255,.75)}

/* ---------- héros ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}

.hero__inner{display:grid;gap:34px;padding:44px 20px 56px}
.hero__copy h1{color:#fff;font-size:clamp(32px,5vw,52px);font-weight:700}
.hero__copy h1 em{font-style:normal;color:#fff}
.hero__lead{margin-top:18px;font-size:clamp(17px,1.5vw,19.5px);line-height:1.5;color:rgba(255,255,255,.88);max-width:34em}
.hero__ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.hero__ticks li{display:flex;align-items:flex-start;gap:10px;font-size:16px;color:rgba(255,255,255,.92)}
.hero__ticks .ico{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--green);color:#fff;stroke-width:3}
.hero__stats{display:flex;gap:28px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.hero__stats b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.hero__stats span{display:block;font-size:13px;color:rgba(255,255,255,.72);margin-top:5px;max-width:9em}
.hero__call{margin-top:26px;display:grid;gap:10px}
.hero__call .btn{width:100%}
.hero__call small{font-size:14px;color:rgba(255,255,255,.75)}
@media (min-width:900px){
  .hero__inner{grid-template-columns:minmax(0,1.05fr) minmax(380px,460px);align-items:center;gap:48px;padding:64px 20px 76px}
  .hero__call{grid-template-columns:auto 1fr;align-items:center}
  .hero__call .btn{width:auto}
}

/* ---------- photo de fond du héros ---------- */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,69,98,.84) 0%,rgba(24,69,98,.62) 55%,rgba(24,69,98,.88) 100%)}
@media (min-width:900px){.hero__bg::after{background:linear-gradient(100deg,rgba(24,69,98,.98) 0%,rgba(24,69,98,.94) 38%,rgba(24,69,98,.45) 60%,rgba(24,69,98,.2) 100%)}}
.hero--photo .lames,.hero--photo .lame-rouge{display:none}

/* ---------- bandeau France Rénov' (mention obligatoire, arrêté du 31 juillet 2026) ---------- */
.renov{display:block;max-width:460px;border-radius:10px;overflow:hidden;background:#fff}
.renov img{display:block;width:100%;height:auto}
.foot .renov{margin:0 0 20px}

/* ---------- fonds DA « lames de radiateur » ---------- */
.lames{position:absolute;display:flex;gap:14px;pointer-events:none;z-index:0}
.lames span{display:block;width:28px;border-radius:999px;background:var(--lame)}
.lames--haut{top:-60px;align-items:flex-start}
.lames--bas{bottom:-70px;align-items:flex-end}
.lames .rouge{background:var(--red-da)}
.lame-rouge{position:absolute;width:28px;height:110px;border-radius:999px;background:var(--red-da);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
@media (max-width:899px){.lames--bas,.lame-rouge{display:none}.lames--haut{right:-10px!important;transform:scale(.7);transform-origin:top right}}
.sec--rings{background:#fff;position:relative;overflow:hidden}
.sec--rings::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at calc(100% + 40px) 50%,transparent 120px,rgba(24,69,98,.06) 120px 148px,transparent 148px 200px,rgba(24,69,98,.06) 200px 228px,transparent 228px 280px,rgba(24,69,98,.06) 280px 308px,transparent 308px)}
.sec--rings > .wrap{position:relative}
.sec--rings-bas::before{background:radial-gradient(circle at calc(100% + 60px) calc(100% + 60px),transparent 170px,rgba(24,69,98,.06) 170px 198px,transparent 198px 250px,rgba(24,69,98,.06) 250px 278px,transparent 278px)}
.sec--navy{position:relative;overflow:hidden}
.sec--navy > .wrap{position:relative;z-index:1}
.sec--navy .lames span{background:var(--lame)}
.sec--navy .lames .rouge,.lames .rouge{background:var(--red)}
main.page{background-color:#F4F6F8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='17' y='10' width='6' height='20' rx='3' fill='%23184562' fill-opacity='.06'/%3E%3C/svg%3E")}
.sec--dots{background-color:#F4F6F8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='17' y='10' width='6' height='20' rx='3' fill='%23184562' fill-opacity='.06'/%3E%3C/svg%3E")}
.final--lames .lames span{width:24px;background:rgba(255,255,255,.22)}
.final--lames .lames--haut{left:-10px;top:-60px;gap:12px}
.final--lames .lames--bas{right:20px;bottom:-60px;gap:12px}

/* ---------- fonds DA tour 2 : thermostat, plan technique, blocs ---------- */
.sec--thermo,.sec--grid,.sec--blocs{position:relative;overflow:hidden}
.sec--thermo > .wrap,.sec--grid > .wrap,.sec--blocs > .wrap{position:relative;z-index:1}
.sec--thermo{background:#fff}
.deco--thermo{position:absolute;right:-160px;bottom:-200px;width:440px;height:440px;pointer-events:none}
.deco--thermo .piste{stroke:#EEF2F5}
.deco--thermo .chaleur{stroke:var(--red);transform-origin:220px 220px;animation:thermo 6s linear infinite}
@keyframes thermo{from{transform:rotate(215deg)}to{transform:rotate(575deg)}}
.sec--navy.sec--thermo{background:var(--navy)}
.sec--navy .deco--thermo{right:-110px;top:50%;bottom:auto;margin-top:-230px;width:460px;height:460px}
.sec--navy .deco--thermo .piste{stroke:var(--lame)}
.sec--grid{background-color:#F6F8FA;background-image:linear-gradient(#E9EEF2 1px,transparent 1px),linear-gradient(90deg,#E9EEF2 1px,transparent 1px);background-size:40px 40px}
.sec--grid::after{content:"";position:absolute;right:32px;bottom:162px;width:16px;height:16px;border-radius:3px;background:var(--red)}
.sec--grid::before{content:"";position:absolute;right:40px;bottom:-90px;width:220px;height:260px;border:2px solid #C9D5DF;border-radius:4px;pointer-events:none}
.sec--navy.sec--grid{background-color:var(--navy);background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:40px 40px}
.sec--navy.sec--grid::before{border-color:rgba(78,148,227,.45)}
.sec--blocs{background:#fff}
.sec--blocs::before{content:"";position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:130px 130px 0 130px;background:#EEF2F5;pointer-events:none}
.sec--blocs::after{content:"";position:absolute;right:150px;top:46px;width:44px;height:44px;border-radius:50% 50% 50% 0;background:var(--red);pointer-events:none}
.sec--navy.sec--blocs{background:var(--navy)}
.sec--navy.sec--blocs::before{right:auto;left:-150px;bottom:-190px;width:240px;height:240px;border-radius:50%;background:rgba(78,148,227,.3)}
.sec--navy.sec--blocs::after{background:var(--red)}
@media (max-width:899px){.sec--grid::before,.sec--grid::after,.sec--blocs::after{display:none}.deco--thermo{width:300px;height:300px;right:-120px;bottom:-140px}}

/* ---------- labels (PG, RGE Qualibat, RGE) sous les chiffres du héros ---------- */
.labels{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.labels span{display:inline-flex;align-items:center;height:64px;padding:8px 16px;border-radius:14px;background:#fff}
.labels img{height:48px;width:auto}
.labels img[alt^="RGE,"]{height:34px}

/* ---------- questionnaire ---------- */
.quiz{background:#fff;color:var(--ink);border-radius:var(--r-card);padding:22px 22px 24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);position:relative}
.quiz__title{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.01em;margin:0 0 2px}
.quiz__sub{font-size:14px;color:var(--ink-3);margin-bottom:14px}
.quiz__bar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.qbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;padding:0}
.qbtn .ico{width:18px;height:18px}
.segs{flex:1;display:flex;gap:5px}
.segs i{flex:1;height:5px;border-radius:3px;background:var(--sky-pale);transition:background .3s}
.segs i.on{background:var(--red)}
.quiz__count{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.quiz__viewport{position:relative;overflow:hidden;transition:height .32s var(--ease)}
.step{display:none;margin:0;padding:0 0 1px;border:0;min-width:0}
.step.is-active{display:block}
.step.is-leaving{position:absolute;inset:0 0 auto 0}
.step__q{font-size:21px;font-weight:700;color:var(--navy);line-height:1.2;letter-spacing:-.01em;padding:0;margin:0 0 4px}
.step__hint{font-size:14.5px;color:var(--ink-2);margin:0 0 14px;line-height:1.45}
.opts{display:grid;gap:9px}
.opt{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--sky)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt:has(input:checked){border-color:var(--navy);background:var(--sky-mist)}
.opt:has(input:focus-visible){outline:3px solid var(--sky);outline-offset:2px}
.opt__ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--navy)}
.opt__ico .ico{width:22px;height:22px}
.c-sky{background:var(--sky-pale)} .c-red{background:var(--red-pale);color:var(--red-deep)} .c-orange{background:var(--orange-pale);color:#B8651A} .c-green{background:var(--green-pale);color:var(--green-deep)} .c-mist{background:var(--sky-mist)}
.opt__txt{flex:1;font-weight:500;font-size:16px;line-height:1.25}
.opt__txt small{display:block;font-weight:400;font-size:13px;color:var(--ink-3);margin-top:2px}
.opt__radio{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:background .15s,border-color .15s}
.opt__radio svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.opt:has(input:checked) .opt__radio{background:var(--navy);border-color:var(--navy)}
.opt:has(input:checked) .opt__radio svg{opacity:1}
.opts--2{grid-template-columns:1fr 1fr}
.opts--2 .opt{flex-direction:column;align-items:flex-start;gap:8px}
.opts--2 .opt__radio{position:absolute;top:12px;right:12px}
.group{display:grid;gap:10px}
@media (min-width:480px){.group--2{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin:0 0 5px}
.field input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:var(--r-field);border:1.5px solid var(--line);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 3px rgba(78,148,227,.2)}
.field.is-bad input{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,74,86,.18)}
.tel{display:flex;align-items:stretch}
.tel .cc{display:grid;place-items:center;padding:0 12px;border:1.5px solid var(--line);border-right:0;border-radius:var(--r-field) 0 0 var(--r-field);background:var(--sky-mist);color:var(--ink-2);font-size:15px}
.tel input{border-radius:0 var(--r-field) var(--r-field) 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{font:inherit;font-size:14px;padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.note{font-size:13.5px;color:var(--ink-3);margin-top:8px;min-height:1em;line-height:1.4}
.note.is-err{color:var(--red-deep)}
.step__actions{margin-top:16px;display:grid}
.step__actions .btn{width:100%}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px;border-radius:14px;background:var(--sky-mist);cursor:pointer}
.consent p{font-size:13px;line-height:1.4;color:var(--ink-2)}
.switch{flex:none;position:relative;width:44px;height:26px;margin-top:1px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:999px;background:#fff;border:2px solid var(--red);transition:background .2s,border-color .2s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--red);transition:transform .2s var(--ease),background .2s}
.switch input:checked + span{background:var(--green);border-color:var(--green)}
.switch input:checked + span::after{background:#fff;transform:translateX(18px)}
.switch input:focus-visible + span{outline:3px solid var(--sky);outline-offset:2px}
.consent.is-bad .switch span{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,74,86,.2)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.done{display:none;text-align:left}
.done.is-on{display:block}
.done__badge{width:56px;height:56px;border-radius:50%;background:var(--green-pale);color:var(--green-deep);display:grid;place-items:center;margin-bottom:14px}
.done__badge .ico{width:30px;height:30px;stroke-width:2.6}
.done h2{font-size:24px;margin-bottom:8px}
.done p{color:var(--ink-2);font-size:15.5px}
.timeline{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.timeline li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.timeline .n{width:30px;height:30px;border-radius:50%;background:var(--sky-pale);color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:14px}
.timeline b{display:block;font-size:15.5px}
.timeline span{display:block;color:var(--ink-2);font-size:14px;line-height:1.4}
.timeline span span{display:inline;font-size:inherit;color:var(--navy);font-weight:500}

/* ---------- bandeau de preuves ---------- */
.proof{background:#fff;border-bottom:1px solid var(--line)}
.proof ul{list-style:none;margin:0;padding:18px 0;display:grid;gap:14px}
.proof li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.3}
.proof .b{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--navy)}
.proof strong{display:block;font-weight:700;color:var(--navy)}
.proof span{color:var(--ink-3);font-size:13.5px}
@media (min-width:720px){.proof ul{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.proof ul{grid-template-columns:repeat(4,1fr);gap:20px}}

/* ---------- sections ---------- */
.sec{padding:56px 0}
.sec--mist{background:var(--sky-mist)}
.sec--sky{background:var(--sky-pale)}
.sec--navy{background:var(--navy);color:#fff}
.sec--navy h2,.sec--navy h3{color:#fff}
.sec__head{max-width:40em;margin-bottom:28px}
.sec__head p{margin-top:14px;font-size:18px;color:var(--ink-2);line-height:1.5}
.sec--navy .sec__head p{color:rgba(255,255,255,.8)}
.sec__head--center{margin-left:auto;margin-right:auto;text-align:center}
.grid{display:grid;gap:18px}
@media (min-width:700px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid--4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--sky-pale);border-radius:var(--r-card);padding:24px;border:1px solid rgba(24,69,98,.10);display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.card > *{grid-column:1/-1}
.card .b{grid-column:1;margin:0}
.card .b + h3{grid-column:2;margin:0}
.card--tint{border:0}
.card--sky{background:var(--sky-pale)} .card--green{background:var(--green-pale)} .card--orange{background:var(--orange-pale)} .card--red{background:var(--red-pale)} .card--navy{background:rgba(255,255,255,.06);color:#fff;position:relative;z-index:1}
.card .b{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--navy);border:0}
.card--navy .b{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
.card .big{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--navy)}
.card .big small{font-size:18px;font-weight:500;letter-spacing:0;margin-left:4px}
.card h3{margin-top:0}
.card p{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.card--navy p{color:rgba(255,255,255,.8)}
.card--tint p{color:var(--ink-2)}
.card.card--navy h3,.card.card--navy .big{color:#fff}
.card.card--navy p{color:rgba(255,255,255,.8)}

/* liste à coches */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.45}
.ticks .ico{flex:none;width:24px;height:24px;padding:5px;border-radius:50%;background:var(--green);color:#fff;stroke-width:3;margin-top:1px}
.ticks--no .ico{background:var(--red-pale);color:var(--red-deep)}
.ticks b{color:var(--navy)}

/* étapes (séquence réelle) */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:etape}
.steps li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px 22px 24px 70px;counter-increment:etape}
.steps li::before{content:counter(etape);position:absolute;left:22px;top:24px;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;font-size:16px;display:grid;place-items:center}
.steps li.is-key{background:var(--navy);border-color:var(--navy);color:#fff}
.steps li.is-key::before{background:var(--red)}
.steps li.is-key h3{color:#fff}
.steps li.is-key p{color:rgba(255,255,255,.8)}
.steps h3{font-size:18px}
.steps p{margin-top:6px;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.steps .dur{display:inline-block;margin-top:10px;padding:4px 10px;border-radius:999px;background:var(--sky-pale);color:var(--navy);font-size:13px;font-weight:500}
.steps li.is-key .dur{background:rgba(255,255,255,.14);color:#fff}
@media (min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}.steps--2{grid-template-columns:1fr 1fr}.steps li{padding:68px 22px 26px}.steps li::before{top:22px}}

/* devis illustré (page PAC / simulateur) */
.devis{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);padding:26px 24px;box-shadow:0 30px 60px -40px rgba(24,69,98,.5);max-width:460px}
.devis__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink-3)}
.devis__head b{color:var(--navy);font-size:16px}
.devis__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.devis__row span{color:var(--ink-2)}
.devis__row small{display:block;font-size:13px;color:var(--ink-3)}
.devis__row b{white-space:nowrap;font-size:18px;letter-spacing:-.01em}
.devis__row b.ok{color:var(--green-deep)}
.photo figcaption{font-size:13px;color:var(--ink-3);margin-top:8px}
.devis__row--aide b{color:var(--green-deep)}
.devis__total{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0 0;font-size:17px;font-weight:700;color:var(--navy)}
.devis__total b{font-size:18px;letter-spacing:-.01em;text-align:right}
@media (max-width:479px){.devis__total{font-size:16px}.devis__total b{font-size:17px}}
.devis__note{margin-top:14px;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.devis__tag{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--green-pale);color:var(--green-deep);font-size:12.5px;font-weight:700}
.split{display:grid;gap:36px;align-items:stretch}
/* la photo ne fixe jamais la hauteur : elle remplit celle de la colonne d'en face */
.split > .photo,.split > div > .photo--marge{position:relative;aspect-ratio:auto;min-height:260px}
.split > .photo img,.split > div > .photo--marge img{position:absolute;inset:0;width:100%;height:100%}
.split > div{display:flex;flex-direction:column}
.split > .ticks{align-content:start}
.split > div > .photo--marge{flex:1}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}.split--rev > :first-child{order:2}}
.split .sec__head{margin-bottom:0}

/* photo de section */
.photo{border-radius:var(--r-card);overflow:hidden;box-shadow:0 30px 60px -40px rgba(24,69,98,.5);background:var(--sky-pale)}
.photo{display:flex;flex-direction:column}
.photo img{width:100%;height:100%;object-fit:cover;display:block;flex:1;min-height:0}
.photo--portrait{aspect-ratio:4/5;max-width:460px}
.photo--landscape{aspect-ratio:16/10}
.photo--marge{margin-top:24px!important}
.photo__cap{display:block;padding:12px 16px;font-size:13.5px;color:var(--ink-2);background:#fff;border-top:1px solid var(--line)}
.split--photo{align-items:stretch}

/* fiche produit */
.spec{display:grid;gap:14px}
@media (min-width:600px){.spec{grid-template-columns:1fr 1fr}.spec--1{grid-template-columns:1fr}}
.spec div{padding:18px 20px;border-radius:16px;background:#fff;border:2px solid var(--green)}
.spec b{display:block;font-size:26px;letter-spacing:-.02em;color:var(--navy);line-height:1.1}
.spec span{display:block;margin-top:5px;font-size:14.5px;color:var(--ink-2);line-height:1.4}
.pac{position:relative;border-radius:var(--r-card);background:linear-gradient(160deg,var(--sky-pale),#fff);border:1px solid var(--line);padding:28px}
.pac svg{width:100%;height:auto}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--navy)}
.badge .ico{width:18px;height:18px;color:var(--green-deep)}
.sec--navy .badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.sec--navy .badge .ico{color:#9BE48E}

/* agences par région : repère rouge, villes séparées par un point */
.agences{display:grid;gap:18px;margin-top:26px}
@media (min-width:700px){.agences{grid-template-columns:auto auto;gap:40px;justify-content:start}.agences--col{grid-template-columns:1fr;gap:22px;margin-top:6px}}
.agences__region{padding-left:16px;border-left:3px solid var(--red)}
.agences__region > span{display:block;font-size:13px;letter-spacing:.02em;color:var(--sky);margin-bottom:6px}
.agences__region ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 6px;font-size:19px;font-weight:700;color:var(--navy);line-height:1.5}
.agences__region li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin:0 8px 3px 0}
.agences__region li{margin-right:8px}
.sec--navy .agences__region ul{color:#fff}
.sec--navy .agences__region > span{color:rgba(255,255,255,.7)}
/* villes et mentions en ligne, sans bulles */
.villes{margin-top:18px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.sec--navy .villes{color:rgba(255,255,255,.85)}

/* réseau / agences */
.zones{display:grid;gap:18px}
@media (min-width:700px){.zones{grid-template-columns:1fr 1fr}}
.zone{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.zone h3{display:flex;align-items:center;gap:10px}
.zone h3 .ico{color:var(--red)}
.zone p{margin-top:10px;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.zone ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.zone li{padding:6px 12px;border-radius:999px;background:var(--sky-mist);font-size:14px;color:var(--navy)}

/* FAQ */
.faq{display:grid;gap:40px}
@media (min-width:900px){.faq{grid-template-columns:1fr 1.5fr}}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:700;font-size:16.5px;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--sky-pale);display:grid;place-items:center;font-weight:400;font-size:20px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 20px 20px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}

/* appel direct */
.call{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:18px;background:#fff;color:var(--navy);text-decoration:none;border:1px solid var(--line);box-shadow:0 20px 40px -30px rgba(0,0,0,.4)}
.call .ico{flex:none;width:52px;height:52px;padding:14px;border-radius:50%;background:var(--red);color:#fff}
.call b{display:block;font-size:clamp(22px,3vw,28px);letter-spacing:-.01em;line-height:1.1}
.call span{display:block;font-size:14px;color:var(--ink-3);margin-top:3px}
.call--inverse{background:var(--navy);color:#fff;border-color:transparent}
.call--inverse span{color:rgba(255,255,255,.75)}
.or{display:flex;align-items:center;gap:14px;margin:18px 0 12px;color:rgba(255,255,255,.65);font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.2)}
.quiz .or{color:var(--ink-3)}.quiz .or::before,.quiz .or::after{background:var(--line)}

/* CTA final */
.final{background:var(--red-da);color:#fff;padding:72px 0;position:relative;overflow:hidden;isolation:isolate}
.final__box{max-width:640px;margin:0 auto;text-align:center}
.final h2{color:#fff}
.final p{margin:16px auto 0;font-size:18px;color:rgba(255,255,255,.85);max-width:32em}
.final .btn{margin-top:28px}
.final .wrap{position:relative;z-index:1}
.final.final--navy{background:var(--navy)}

/* pied */
.foot{background-color:var(--navy);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect x='21' y='12' width='6' height='24' rx='3' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E");color:rgba(255,255,255,.72);padding:48px 0 110px;font-size:13.5px;line-height:1.55}
@media (min-width:900px){.foot{padding-bottom:56px}}
.foot .brand{margin-bottom:22px}
.foot p{margin-top:10px;max-width:70em}
.foot nav{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px}
.foot a{color:#fff}
.foot__legal{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}

/* bouton collant mobile */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:10px;transform:translateY(110%);transition:transform .3s var(--ease)}
.sticky.is-on{transform:none}
.sticky--2{grid-template-columns:1fr 1fr}
.sticky .btn{width:100%;padding:14px 10px;font-size:15.5px}
@media (min-width:900px){.sticky{display:none}}

/* pages secondaires */
.page{padding:48px 0 72px}
.page .wrap{max-width:760px}
.page h1{font-size:clamp(30px,5vw,42px);margin-bottom:16px}
.page h2{font-size:24px;margin:34px 0 10px}
.page p,.page li{font-size:16.5px;color:var(--ink-2);line-height:1.6}
.page p{margin-top:12px}
.page ul{padding-left:22px;margin-top:10px}
.carte{background:#fff;border-radius:var(--r-card);padding:30px 26px;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(24,69,98,.4)}
.carte .done{display:block}
.carte .timeline b{font-size:16.5px}
.carte .timeline span{font-size:15px}
.rappel{margin-top:22px;padding:18px;border-radius:16px;background:var(--sky-mist);font-size:15px;color:var(--ink-2);line-height:1.5}
.rappel b{color:var(--navy)}
.attention{margin-top:22px;padding:18px 20px;border-radius:16px;background:var(--orange-pale);border:1px solid rgba(243,143,53,.35);font-size:15px;line-height:1.5;color:var(--ink)}
.attention b{color:#B8651A}

/* index interne */
.hub{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
@media (min-width:700px){.hub{grid-template-columns:1fr 1fr}}
.hub a,.hub .hub__card{display:block;padding:24px;border-radius:var(--r-card);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.hub a:hover{border-color:var(--sky)}
.hub .hub__card span a{display:inline;padding:0;border:0;color:var(--sky);text-decoration:underline}
.hub b{display:block;font-size:20px;color:var(--navy);margin-bottom:6px}
.hub span{font-size:15px;color:var(--ink-2)}
.hub .tag{display:inline-block;margin-top:12px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:500;background:var(--green-pale);color:var(--green-deep)}
.hub .tag--later{background:var(--sky-pale);color:var(--navy)}

/* ---------- animations (même mécanique que mon-bilan-solaire) ---------- */
/* entrée du héros, en cascade */
.js .ent{opacity:0;transform:translateY(14px);animation:ent .8s var(--ease) forwards}
@keyframes ent{to{opacity:1;transform:none}}
.e1{animation-delay:.05s}.e2{animation-delay:.16s}.e3{animation-delay:.26s}.e4{animation-delay:.36s}.e5{animation-delay:.22s}
/* apparition au défilement : chaque élément .rv s'anime quand il entre dans l'écran */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.is-vu{animation:ent .7s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms)}
/* reflet qui balaie les boutons principaux */
.btn--red,.final .btn--white{position:relative;overflow:hidden}
.btn--red::after,.final .btn--white::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-50%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:reflet 5.2s var(--ease) infinite;pointer-events:none}
.final .btn--white::after{background:linear-gradient(90deg,transparent,rgba(24,69,98,.12),transparent)}
@keyframes reflet{0%{left:-50%}52%{left:130%}100%{left:130%}}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
/* lames qui respirent doucement */
.lames span,.lame-rouge{animation:flotte 7s ease-in-out infinite alternate}
.lames span:nth-child(2n){animation-duration:9s;animation-delay:-3s}
.lames span:nth-child(3n){animation-duration:8s;animation-delay:-5s}
@keyframes flotte{from{transform:translateY(0)}to{transform:translateY(10px)}}
/* questionnaire : glissement des étapes, remplissage de la barre, coche qui apparaît */
.step.is-active{animation:inR .45s var(--ease) both}
.step.is-active.from-back{animation-name:inL}
@keyframes inR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.segs i{position:relative;overflow:hidden;background:var(--sky-pale)}
.segs i::after{content:"";position:absolute;inset:0;background:var(--red);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.segs i.on{background:var(--sky-pale)}
.segs i.on::after{transform:scaleX(1)}
.opt{transition:border-color .15s,background .15s,transform .18s var(--ease)}
.opt:hover{transform:translateY(-1px)}
.opt__radio svg{opacity:1;transform:scale(0);transition:transform .3s var(--ease)}
.opt:has(input:checked) .opt__radio svg{transform:scale(1)}
.done.is-on{animation:inR .5s var(--ease) both}
/* cartes et photos : léger relief au survol */
.card,.steps li,.spec div,.zone,.faq details{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.card:hover,.steps li:hover,.spec div:hover{transform:translateY(-3px);box-shadow:0 18px 36px -28px rgba(24,69,98,.45)}
.faq summary::after{transition:transform .3s var(--ease),background .2s}
.faq details[open]{box-shadow:0 18px 36px -28px rgba(24,69,98,.45)}
.photo img{transition:transform .8s var(--ease)}
.photo:hover img{transform:scale(1.03)}
.sticky{transition:transform .45s var(--ease)}

/* ---------- badge Avis Vérifiés (note de proxiserve.fr), collant en bas à droite ---------- */
.avis{position:fixed;right:10px;bottom:14px;z-index:40;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 10px;border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 10px 30px -12px rgba(0,0,0,.35),0 0 0 1px var(--line);transition:bottom .3s var(--ease)}
.avis__note{display:flex;align-items:center;gap:5px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--navy)}
.avis__note svg{width:18px;height:18px;fill:#1C6BC1}
.avis__txt{display:flex;flex-direction:column;line-height:1.15}
.avis__txt b{font-size:12px;color:#1C6BC1}
.avis__txt span{font-size:11.5px;color:var(--ink-3)}
body:has(#sticky.is-on) .avis{bottom:84px}
@media (min-width:900px){.avis{right:18px;bottom:18px}body:has(#sticky.is-on) .avis{bottom:18px}}
@media (max-width:379px){.avis{transform:scale(.9);transform-origin:100% 100%}}