:root{--bleu:#0B5FFF;--bleu-fonce:#0640B8;--navy:#0A1330;--navy-2:#101D45;--vert:#1FBF6B;--vert-fonce:#149655;--vert-pale:#E7F9F0;--bleu-pale:#EAF1FF;--texte:#1B2340;--texte-2:#5A6482;--blanc:#FFF;--bord:#E3E8F4;--radius:14px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--texte);background:#fff;line-height:1.65}
img{max-width:100%}
a{color:var(--bleu);text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--bord)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--navy)}
.logo .eclair{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--bleu),var(--vert));display:grid;place-items:center;color:#fff;font-size:1.05rem}
.logo span b{color:var(--bleu)}
nav ul{display:flex;gap:22px;list-style:none;align-items:center}
nav a{color:var(--texte);font-weight:500;font-size:.94rem}
nav a:hover,nav a.actif{color:var(--bleu)}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.95rem;transition:.2s;border:none;cursor:pointer}
.btn-vert{background:var(--vert);color:#fff !important;box-shadow:0 6px 18px rgba(31,191,107,.35)}
.btn-vert:hover{background:var(--vert-fonce);transform:translateY(-1px)}
.btn-bleu{background:var(--bleu);color:#fff !important}
.btn-bleu:hover{background:var(--bleu-fonce)}
.burger{display:none;background:none;border:none;font-size:1.6rem;color:var(--navy);cursor:pointer}
.hero{background:radial-gradient(1100px 500px at 75% -10%,rgba(11,95,255,.45),transparent 60%),radial-gradient(700px 400px at 5% 110%,rgba(31,191,107,.25),transparent 60%),var(--navy);color:#fff;padding:72px 0 88px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url('/images/hero-borne.webp') center right/cover no-repeat;opacity:.85}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,#0A1330 8%,rgba(10,19,48,.93) 34%,rgba(10,19,48,.55) 58%,rgba(10,19,48,.28) 100%)}
.hero .wrap{display:grid;grid-template-columns:1fr 560px;gap:48px;align-items:center;position:relative;z-index:1}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(31,191,107,.15);border:1px solid rgba(31,191,107,.5);color:#7BEBB4;padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:600;margin-bottom:20px}
.hero h1{font-size:2.5rem;line-height:1.15;font-weight:800;margin-bottom:18px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#5D95FF,#39E08A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{color:#B9C4E2;font-size:1.08rem;margin-bottom:26px;max-width:520px}
.points{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:28px}
.points li{list-style:none;display:flex;gap:8px;align-items:center;color:#D7DEF2;font-size:.92rem}
.points .coche{color:var(--vert);font-weight:800}
.carte-devis{background:#fff;color:var(--texte);border-radius:18px;padding:20px 20px 14px;box-shadow:0 30px 60px rgba(4,10,30,.45)}
.carte-devis h2,.carte-devis .h2{font-size:1.25rem;margin-bottom:4px}
.carte-devis .gratuit{color:var(--vert-fonce);font-size:.88rem;font-weight:700;margin-bottom:14px;display:block}
.rassurance{font-size:.78rem;color:var(--texte-2);text-align:center;margin-top:12px}
/* ---- Widget ViteUnDevis : version compacte (iframe → zoom global) ---- */
.vud-conteneur{min-height:620px;font-size:14px;zoom:.72}
.vud-conteneur iframe{display:none !important}
.vud-conteneur img{max-width:64px !important;height:auto !important;border-radius:10px}
.vud-conteneur h1,.vud-conteneur h2,.vud-conteneur h3,.vud-conteneur h4{font-size:1rem !important;line-height:1.3 !important;margin:4px 0 !important;color:var(--navy) !important}
.vud-conteneur p,.vud-conteneur li,.vud-conteneur td{font-size:.85rem !important;line-height:1.45 !important;margin:4px 0 !important}
.vud-conteneur a{color:var(--bleu) !important}
.vud-conteneur label{font-size:.88rem !important}
.vud-conteneur select,.vud-conteneur input[type=text],.vud-conteneur input[type=email],.vud-conteneur input[type=tel]{padding:9px 12px !important;border:1.5px solid var(--bord) !important;border-radius:8px !important;font-size:.95rem !important;max-width:100%}
.vud-conteneur input[type=button],.vud-conteneur input[type=submit],.vud-conteneur button{background:var(--vert) !important;color:#fff !important;border:none !important;border-radius:999px !important;padding:10px 18px !important;font-weight:700 !important;cursor:pointer;font-size:.95rem !important}
.confiance{background:var(--bleu-pale);padding:18px 0}
.confiance .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}
.confiance span{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;color:var(--navy)}
section{padding:70px 0}
.titre-sec{text-align:center;max-width:680px;margin:0 auto 46px}
.titre-sec .sur-titre{color:var(--vert-fonce);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.titre-sec h2{font-size:1.9rem;margin:8px 0 12px;color:var(--navy)}
.titre-sec p{color:var(--texte-2)}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.etape{background:#fff;border:1px solid var(--bord);border-radius:var(--radius);padding:30px 26px;text-align:center;transition:.2s}
.etape:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,95,255,.12)}
.etape .num{width:46px;height:46px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(135deg,var(--bleu),var(--vert));color:#fff;font-weight:800;display:grid;place-items:center;font-size:1.15rem}
.etape h3{margin-bottom:8px;color:var(--navy)}
.etape p{color:var(--texte-2);font-size:.94rem}
.sec-grise{background:#F6F8FD}
.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tarif{background:#fff;border:1.5px solid var(--bord);border-radius:var(--radius);padding:32px 28px;position:relative}
.tarif.populaire{border-color:var(--vert);box-shadow:0 18px 40px rgba(31,191,107,.15)}
.tarif .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--vert);color:#fff;font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:999px}
.tarif h3{color:var(--navy);margin-bottom:4px}
.tarif .puissance{color:var(--bleu);font-weight:700;font-size:.9rem;margin-bottom:14px}
.tarif .prix{font-size:1.8rem;font-weight:800;color:var(--navy)}
.tarif .prix small{font-size:.85rem;color:var(--texte-2);font-weight:500}
.tarif ul{list-style:none;margin:18px 0 22px}
.tarif li{padding:6px 0;font-size:.92rem;color:var(--texte-2);display:flex;gap:8px}
.tarif li::before{content:"✓";color:var(--vert);font-weight:800}
.tarif .btn{width:100%;text-align:center}
.aides{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.aide{border-radius:var(--radius);padding:30px 26px;background:var(--vert-pale);border:1px solid #C9EEDB}
.aide.bleue{background:var(--bleu-pale);border-color:#CBDCFB}
.aide .montant{font-size:1.65rem;font-weight:800;color:var(--vert-fonce)}
.aide.bleue .montant{color:var(--bleu)}
.aide h3{margin:6px 0 8px;color:var(--navy);font-size:1.05rem}
.aide p{font-size:.92rem;color:var(--texte-2)}
.villes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ville{background:#fff;border:1px solid var(--bord);border-radius:10px;padding:14px 18px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:10px;transition:.15s}
.ville:hover{border-color:var(--bleu);color:var(--bleu);transform:translateY(-2px)}
.ville .pin{color:var(--vert)}
.faq{max-width:820px;margin:0 auto}
details{background:#fff;border:1px solid var(--bord);border-radius:12px;margin-bottom:12px;overflow:hidden}
summary{padding:18px 22px;font-weight:600;cursor:pointer;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::after{content:"+";color:var(--bleu);font-size:1.4rem;font-weight:400;transition:.2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 22px 18px;color:var(--texte-2);font-size:.95rem}
.cta-final{background:linear-gradient(120deg,var(--bleu-fonce),var(--bleu) 55%,var(--vert));color:#fff;text-align:center;border-radius:20px;padding:52px 32px}
.cta-final h2{font-size:1.8rem;margin-bottom:12px}
.cta-final p{opacity:.9;margin-bottom:26px}
.cta-final .btn{background:#fff;color:var(--navy) !important;font-size:1.05rem}
/* pages intérieures */
.page-hero{background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;padding:54px 0 46px}
.page-hero h1{font-size:2.1rem;line-height:1.2;max-width:780px}
.page-hero .fil{font-size:.85rem;color:#8FA0CC;margin-bottom:14px}
.page-hero .fil a{color:#B9C4E2}
.page-hero p.intro{color:#B9C4E2;max-width:720px;margin-top:14px;font-size:1.05rem}
.article{padding:56px 0}
.article .wrap{max-width:860px}
.article h2{color:var(--navy);font-size:1.5rem;margin:38px 0 14px}
.article h3{color:var(--navy);font-size:1.15rem;margin:26px 0 10px}
.article p{margin-bottom:14px;color:#333c58}
.visuel-article{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-bottom:18px;box-shadow:0 14px 34px rgba(11,95,255,.14)}
.byline{font-size:.85rem;color:var(--texte-2);border-bottom:1px solid var(--bord);padding-bottom:14px;margin-bottom:24px}
.article ul,.article ol{margin:0 0 16px 22px;color:#333c58}
.article li{margin-bottom:8px}
.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.article th{background:var(--bleu-pale);color:var(--navy);text-align:left;padding:11px 14px}
.article td{border-bottom:1px solid var(--bord);padding:11px 14px}
.encart{background:var(--vert-pale);border-left:4px solid var(--vert);border-radius:0 12px 12px 0;padding:18px 22px;margin:22px 0}
.encart.bleu{background:var(--bleu-pale);border-left-color:var(--bleu)}
.encart p{margin:0}
.cta-inline{text-align:center;margin:34px 0}
footer{background:var(--navy);color:#9FACD0;padding:56px 0 28px;margin-top:0}
.foot-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
footer h4{color:#fff;margin-bottom:14px;font-size:.98rem}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a{color:#9FACD0;font-size:.92rem;background:none;border:none;cursor:pointer;padding:0;font-family:inherit}
footer a:hover{color:#fff}
.foot-coordonnees{border-top:1px solid rgba(255,255,255,.1);padding:16px 0 4px;font-size:.85rem}
.foot-coordonnees strong{color:#fff}
.foot-bas{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* modales */
.modale{display:none;position:fixed;inset:0;z-index:100;background:rgba(10,19,48,.75);padding:24px}
.modale.ouverte{display:flex;align-items:center;justify-content:center}
.modale-corps{background:#fff;max-width:720px;width:100%;max-height:85vh;overflow:auto;border-radius:16px;padding:34px 32px;position:relative}
.modale-corps h2{color:var(--navy);margin-bottom:18px;font-size:1.4rem}
.modale-corps h3{color:var(--navy);margin:20px 0 8px;font-size:1.05rem}
.modale-corps p,.modale-corps li{font-size:.93rem;color:#333c58;margin-bottom:10px}
.modale-corps ul{margin-left:20px}
.modale-fermer{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.6rem;color:var(--texte-2);cursor:pointer}
.ph{background:#FFF3CD;padding:1px 6px;border-radius:5px;font-weight:600}
@media(max-width:960px){
.hero .wrap{grid-template-columns:1fr}
.etapes,.tarifs,.aides{grid-template-columns:1fr}
.villes{grid-template-columns:repeat(2,1fr)}
.foot-grille{grid-template-columns:1fr 1fr}
nav ul{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;border-bottom:1px solid var(--bord);gap:16px}
nav ul.ouvert{display:flex}
.burger{display:block}
.hero h1{font-size:1.9rem}
.page-hero h1{font-size:1.6rem}
}
@media(max-width:720px){
section{padding:46px 0}
.hero{padding:44px 0 58px}
.hero h1{font-size:1.65rem}
.hero p.sub{font-size:1rem}
.carte-devis{padding:20px 16px}
.titre-sec h2{font-size:1.45rem}
.article{padding:40px 0}
.article h2{font-size:1.25rem}
.article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cta-final{padding:36px 20px}
.cta-final h2{font-size:1.35rem}
.confiance .wrap{justify-content:flex-start;gap:10px}
.confiance span{font-size:.82rem}
.foot-grille{grid-template-columns:1fr;gap:26px}
.points{gap:10px 18px}
.nav{height:60px}
nav ul{top:60px}
}