/* EXTER3D — charte blanc / bleu / vert */
:root{
  --bleu:#1B6FE8; --bleu-fonce:#0F2B46; --bleu-pale:#EDF4FE;
  --vert:#12B76A; --vert-pale:#E8F8F0;
  --txt:#243B53; --txt-2:#5A7184; --bord:#E4EAF2; --blanc:#ffffff;
  --radius:14px; --shadow:0 6px 24px rgba(15,43,70,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;color:var(--txt);background:var(--blanc);line-height:1.65;font-size:16.5px}
img,svg{max-width:100%}
a{color:var(--bleu);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
.topbar{background:var(--bleu-fonce);color:#cfe0f5;font-size:14px;padding:7px 0;text-align:center}
.topbar strong{color:#fff}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--bord)}
.nav{display:flex;align-items:center;gap:28px;padding:14px 0;flex-wrap:wrap}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--bleu-fonce)}
.brand .b3d{color:var(--vert)}
.brand svg{width:40px;height:41px;flex:none}
.nav ul{display:flex;gap:22px;list-style:none;margin-left:auto;flex-wrap:wrap}
.nav ul a{color:var(--txt);font-weight:600;font-size:15.5px}
.nav ul a:hover,.nav ul a.actif{color:var(--bleu)}
.btn{display:inline-block;background:var(--bleu);color:#fff;font-weight:700;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;font-size:16px;transition:.2s}
.btn:hover{background:#1258bf}
.btn.vert{background:var(--vert)}
.btn.vert:hover{background:#0e9657}
.btn.ghost{background:transparent;color:var(--bleu);border:2px solid var(--bleu)}

/* Hero */
.hero{background:linear-gradient(135deg,var(--bleu-pale) 0%,#fff 55%,var(--vert-pale) 100%);padding:72px 0 64px}
.hero .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15;color:var(--bleu-fonce);letter-spacing:-.5px}
.hero h1 em{color:var(--bleu);font-style:normal}
.hero p.lead{margin:18px 0 26px;font-size:18.5px;color:var(--txt-2)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.badge{background:#fff;border:1px solid var(--bord);border-radius:999px;padding:7px 15px;font-size:14px;font-weight:600;color:var(--bleu-fonce);box-shadow:var(--shadow)}
.badge svg{vertical-align:-3px;margin-right:5px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* Cards / sections */
section{padding:64px 0}
section.alt{background:#F7FAFD}
.kicker{display:inline-block;background:var(--vert-pale);color:#0b7c49;font-weight:700;font-size:13.5px;letter-spacing:1.2px;text-transform:uppercase;padding:5px 14px;border-radius:999px;margin-bottom:14px}
.kicker.bleu{background:var(--bleu-pale);color:var(--bleu)}
h2.titre{font-size:clamp(24px,3.2vw,34px);color:var(--bleu-fonce);letter-spacing:-.4px;margin-bottom:12px}
p.sous{color:var(--txt-2);max-width:720px;margin-bottom:36px;font-size:17.5px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--bord);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.card .ico{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--bleu-pale)}
.card h3{color:var(--bleu-fonce);font-size:19px}
.card p{color:var(--txt-2);font-size:15.5px;flex:1}
.card a.lien{font-weight:700}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:8px}
.point{display:flex;gap:12px;align-items:flex-start}
.point .puce{flex:none;width:26px;height:26px;border-radius:50%;background:var(--vert);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.point b{color:var(--bleu-fonce)}
.point span{display:block;color:var(--txt-2);font-size:15px}

/* Figures (visuels) */
figure.visuel{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--bord);background:#fff}
figure.visuel svg{display:block;width:100%;height:auto}
figure.visuel figcaption{padding:10px 16px;font-size:13.5px;color:var(--txt-2);border-top:1px solid var(--bord)}

/* Étapes */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;counter-reset:etape}
.etape{background:#fff;border:1px solid var(--bord);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.etape::before{counter-increment:etape;content:counter(etape,decimal-leading-zero);font-weight:800;font-size:26px;color:var(--vert)}
.etape h3{color:var(--bleu-fonce);font-size:17px;margin:6px 0 4px}
.etape p{color:var(--txt-2);font-size:14.5px}

/* Tarifs */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.tarif{background:#fff;border:1px solid var(--bord);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);position:relative}
.tarif.star{border:2px solid var(--vert)}
.tarif .pop{position:absolute;top:-13px;left:24px;background:var(--vert);color:#fff;font-size:12.5px;font-weight:700;padding:3px 12px;border-radius:999px}
.tarif h3{color:var(--bleu-fonce);font-size:18px}
.tarif .prix{font-size:32px;font-weight:800;color:var(--bleu);margin:8px 0 2px}
.tarif .prix small{font-size:14px;color:var(--txt-2);font-weight:600}
.tarif ul{list-style:none;margin:14px 0 18px}
.tarif li{padding:6px 0 6px 26px;position:relative;font-size:15px;color:var(--txt)}
.tarif li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:800}
.note-tarif{margin-top:18px;font-size:13.5px;color:var(--txt-2)}

/* FAQ */
details.faq{background:#fff;border:1px solid var(--bord);border-radius:12px;margin-bottom:12px;box-shadow:var(--shadow)}
details.faq summary{cursor:pointer;font-weight:700;color:var(--bleu-fonce);padding:18px 20px;list-style:none;position:relative;padding-right:44px}
details.faq summary::after{content:"+";position:absolute;right:20px;top:12px;font-size:26px;color:var(--bleu)}
details.faq[open] summary::after{content:"–"}
details.faq .rep{padding:0 20px 18px;color:var(--txt-2)}

/* Bandeau CTA */
.bandeau{background:linear-gradient(120deg,var(--bleu) 0%,#0e56b8 55%,var(--vert) 130%);border-radius:var(--radius);color:#fff;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.bandeau h2{font-size:clamp(22px,3vw,30px)}
.bandeau p{opacity:.9}
.bandeau .btn{background:#fff;color:var(--bleu)}

/* Formulaire */
form.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#fff;border:1px solid var(--bord);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
form.contact .full{grid-column:1/-1}
form.contact label{font-weight:700;font-size:14px;color:var(--bleu-fonce);display:block;margin-bottom:6px}
form.contact input,form.contact select,form.contact textarea{width:100%;padding:12px 14px;border:1px solid var(--bord);border-radius:10px;font:inherit;background:#FBFCFE}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{outline:2px solid var(--bleu);border-color:transparent}
.coords{display:grid;gap:14px}
.coords .c{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--bord);border-radius:12px;padding:16px;box-shadow:var(--shadow)}

/* Footer */
footer.site{background:var(--bleu-fonce);color:#B9CBDE;margin-top:70px;padding:54px 0 26px;font-size:15px}
footer.site h4{color:#fff;margin-bottom:12px;font-size:16px}
footer.site a{color:#B9CBDE}
footer.site a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;margin-bottom:34px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:8px}
.legal{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;font-size:13.5px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* Responsive */
@media (max-width:860px){
  .hero .grid{grid-template-columns:1fr}
  form.contact{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav ul{gap:14px}
}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* Photos superposées (hero) */
.pile{position:relative;margin:0 0 46px 26px}
.pile .principale{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--bord)}
.pile .overlay{position:absolute;bottom:-38px;left:-26px;width:52%;border:6px solid #fff;border-radius:12px;box-shadow:0 14px 34px rgba(15,43,70,.25);transform:rotate(-4deg)}
.pile .pastille{position:absolute;top:-14px;right:-8px;background:var(--vert);color:#fff;font-weight:800;font-size:13.5px;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow);transform:rotate(3deg)}
.xp{color:var(--vert);font-weight:800}

/* Duo passions (2 grosses images cliquables) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
a.passion{position:relative;display:flex;align-items:flex-end;min-height:440px;border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 34px rgba(15,43,70,.18)}
a.passion img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
a.passion:hover img{transform:scale(1.05)}
a.passion .voile{position:absolute;inset:0;background:linear-gradient(185deg,rgba(15,43,70,.05) 35%,rgba(15,43,70,.92) 100%)}
a.passion .txt{position:relative;padding:30px;color:#fff}
a.passion .txt .etq{display:inline-block;background:var(--vert);font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:5px 13px;border-radius:999px;margin-bottom:12px}
a.passion .txt h3{font-size:clamp(22px,2.6vw,30px);line-height:1.2;margin-bottom:8px}
a.passion .txt p{opacity:.92;margin-bottom:16px;font-size:15.5px;max-width:46ch}
a.passion .txt .fauxbtn{display:inline-block;background:#fff;color:var(--bleu);font-weight:700;padding:10px 20px;border-radius:999px;font-size:15px}
@media (max-width:860px){.duo{grid-template-columns:1fr}a.passion{min-height:340px}}

/* Bande garanties */
.garanties{background:var(--bleu-fonce);border-radius:var(--radius);padding:34px 26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;color:#fff;text-align:center}
.garanties .g .rond{width:58px;height:58px;margin:0 auto 10px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:26px}
.garanties .g b{display:block;font-size:17px;margin-bottom:3px}
.garanties .g span{font-size:14px;color:#B9CBDE}

/* Bande photo pleine largeur */
.bande-photo{position:relative;border-radius:var(--radius);overflow:hidden;min-height:280px;display:flex;align-items:center;box-shadow:var(--shadow)}
.bande-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bande-photo .voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,43,70,.85) 0%,rgba(15,43,70,.35) 70%,rgba(15,43,70,.15) 100%)}
.bande-photo .txt{position:relative;color:#fff;padding:36px;max-width:560px}
.bande-photo .txt h2{font-size:clamp(22px,3vw,30px);margin-bottom:8px}
.bande-photo .txt p{opacity:.92}

/* Icônes types de climatisation */
.type-ico{display:block;margin-bottom:6px}