@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');
:root{
  --navy:#0c2740; --navy2:#10395d; --navy3:#15507f;
  --aqua:#0ea5c4; --aqua-d:#0b87a3; --aqua-soft:#e7f6fb;
  --coral:#ff7a1a; --coral-d:#e9650b;
  --ink:#0f1d2e; --gray:#475569; --gray-l:#6b7c8d; --bord:#e2e8f0; --bg:#fff; --soft:#f4f9fc;
  --disp:'Lexend',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Source Sans 3',-apple-system,BlinkMacSystemFont,sans-serif;
  --sh-sm:0 1px 3px rgba(12,39,64,.06),0 1px 2px rgba(12,39,64,.04);
  --sh-md:0 6px 18px rgba(12,39,64,.08);
  --sh-lg:0 18px 44px rgba(12,39,64,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a,button,summary,label,[role=button]{cursor:pointer}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--aqua);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3,.disp{font-family:var(--disp);letter-spacing:-.02em}
.ph{background:#fff1ec;color:var(--coral-d);border:1px dashed var(--coral);border-radius:5px;padding:0 5px;font-weight:700;font-size:.94em}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.125em}

/* HEADER */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--bord)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:14px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:38px;height:38px;display:block}
.brand .bn{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--navy);line-height:1.05}
.brand .bn small{display:block;font-family:var(--body);font-size:9.5px;font-weight:700;letter-spacing:1.5px;color:var(--aqua-d);text-transform:uppercase}
.navr{display:flex;align-items:center;gap:14px}
.tel{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--navy);font-size:18px;font-family:var(--disp)}
.tel .ic{background:var(--aqua-soft);color:var(--aqua-d);width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px}
.cta{background:var(--coral);color:#fff!important;padding:12px 20px;border-radius:11px;font-weight:800;font-size:14.5px;white-space:nowrap;box-shadow:0 6px 16px rgba(255,122,26,.28);transition:.15s}
.cta:hover{background:var(--coral-d);transform:translateY(-1px)}

/* HERO */
.hero{background:radial-gradient(120% 120% at 80% -10%,var(--navy3),var(--navy) 55%);color:#fff;position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 92%,0 100%)}
.hero .wrap{padding-top:76px;padding-bottom:120px;position:relative;z-index:2}
.hero:after{content:"";position:absolute;right:-8%;top:-10%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,196,.35),transparent 62%);z-index:1}
.hgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(14,165,196,.16);border:1px solid rgba(14,165,196,.4);color:#bfeefb;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:22px}
.badge .ico{color:var(--aqua)}
h1{font-size:50px;line-height:1.05;font-weight:700}
h1 .u{color:var(--aqua);position:relative;white-space:nowrap}
h1 .u:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:7px;background:rgba(14,165,196,.28);z-index:-1;border-radius:4px}
.hero p.sub{font-size:18px;color:#cdddea;margin-top:18px;max-width:520px;line-height:1.55}
.hactions{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap}
.btn-call{background:#fff;color:var(--navy)!important;padding:16px 26px;border-radius:13px;font-weight:800;font-size:17px;font-family:var(--disp);display:inline-flex;align-items:center;gap:10px;transition:.15s}
.btn-call:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.btn-call .ico{color:var(--aqua-d);width:20px;height:20px}
.btn-devis{background:var(--coral);color:#fff!important;padding:16px 26px;border-radius:13px;font-weight:800;font-size:17px;font-family:var(--disp);box-shadow:0 10px 24px rgba(255,122,26,.32);transition:.15s}
.btn-devis:hover{background:var(--coral-d);transform:translateY(-2px)}
.hcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:24px;backdrop-filter:blur(6px)}
.hcard .row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.hcard .row:last-child{border-bottom:none}
.hcard .ico{color:var(--aqua);width:24px;height:24px;flex:0 0 auto}
.hcard .row b{font-family:var(--disp);font-weight:600;font-size:15.5px}
.hcard .row span{display:block;font-size:13px;color:#aec3d4}

/* TRUST STRIP */
.strip{background:var(--navy2);color:#fff;position:relative;z-index:3;margin-top:-40px}
.strip .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;padding:22px 24px}
.strip span{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600}
.strip .ico{color:var(--aqua);width:20px;height:20px}

section{padding:78px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua-d);margin-bottom:14px}
.eyebrow:before{content:"";width:26px;height:2px;background:var(--aqua);border-radius:2px}
h2{font-size:36px;font-weight:700;line-height:1.12}
.lead{font-size:17px;color:var(--gray);max-width:620px;margin-top:12px}
.soft{background:var(--soft)}

/* ABOUT / 30 ANS */
.about{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.about .big{font-family:var(--disp);font-size:62px;font-weight:700;color:var(--navy);line-height:1}
.about .big span{color:var(--aqua-d)}
.about .pts{margin-top:18px}
.about .pts>div{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.about .pts .ico{color:var(--aqua-d);width:22px;height:22px;flex:0 0 auto;margin-top:3px}
.about .pts b{font-family:var(--disp);font-weight:600}
.about .pts p{font-size:14px;color:var(--gray);margin:0}
.about .visual{background:linear-gradient(135deg,var(--navy3),var(--navy));border-radius:24px;padding:40px;color:#fff;text-align:center}
.about .visual .big{color:#fff}.about .visual .big span{color:var(--aqua)}
.about .visual p{color:#cdddea;margin-top:10px;font-size:15px}

/* SERVICES */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.s{border:1px solid var(--bord);border-radius:18px;padding:26px;background:#fff;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.s:hover{border-color:transparent;box-shadow:var(--sh-lg);transform:translateY(-4px)}
.s .ibox{width:52px;height:52px;border-radius:14px;background:var(--aqua-soft);color:var(--aqua-d);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.s .ibox .ico{width:26px;height:26px}
.s h3{font-size:18.5px;font-weight:600;margin-bottom:6px}
.s p{font-size:14px;color:var(--gray)}

/* POURQUOI */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px}
.w{text-align:left}
.w .ibox{width:56px;height:56px;border-radius:16px;background:var(--navy);color:var(--aqua);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.w .ibox .ico{width:27px;height:27px}
.w h3{font-size:17.5px;font-weight:600;margin-bottom:5px}
.w p{font-size:14px;color:var(--gray)}

/* ZONE / CITIES */
.cities{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.city{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--bord);border-radius:13px;padding:15px 20px;background:#fff;font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--navy);transition:.15s}
.city:hover{border-color:var(--aqua);background:var(--aqua-soft);transform:translateY(-2px)}
.city .ico{color:var(--coral);width:19px;height:19px}
.morecities{margin-top:18px;font-size:15px}
.morecities a{color:var(--aqua-d);font-weight:700}

/* BREADCRUMB + PAGE-VILLE */
.crumb{background:var(--soft);font-size:13px;color:var(--gray-l);padding:11px 0;border-bottom:1px solid var(--bord)}
.crumb a{color:var(--aqua-d);font-weight:600}
p.body{font-size:15.5px;color:var(--gray);max-width:780px;margin-top:14px;line-height:1.7}
.nearby{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}
.nearby a{border:1px solid var(--bord);border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;color:var(--navy);background:#fff;transition:.15s}
.nearby a:hover{border-color:var(--aqua);background:var(--aqua-soft)}

/* FORM */
.formsec{background:radial-gradient(120% 120% at 15% 0%,var(--navy3),var(--navy) 60%);color:#fff}
.formwrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.formwrap .pitch h2{color:#fff}
.formwrap .pitch .eyebrow{color:var(--aqua)}
.formwrap .pitch p{color:#cdddea;font-size:16px;margin-top:14px}
.wa{display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#fff!important;padding:14px 22px;border-radius:12px;font-weight:800;font-size:15px;font-family:var(--disp);margin-top:24px}
.wa:hover{filter:brightness(.95)}
.wa .ico{width:20px;height:20px}
form{background:#fff;border-radius:22px;padding:30px;box-shadow:0 26px 60px rgba(0,0,0,.3);color:var(--ink)}
form h3{font-size:21px;font-weight:700;margin-bottom:4px}
form .fsub{font-size:13.5px;color:var(--gray-l);margin-bottom:18px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--navy)}
.fld input,.fld select,.fld textarea{width:100%;border:1.5px solid var(--bord);border-radius:11px;padding:13px 14px;font-size:14.5px;font-family:inherit;background:var(--soft);transition:.12s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--aqua);background:#fff;box-shadow:0 0 0 4px rgba(14,165,196,.14)}
.fld textarea{min-height:74px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form button{width:100%;background:var(--coral);color:#fff;border:none;padding:16px;border-radius:13px;font-weight:800;font-size:16.5px;font-family:var(--disp);cursor:pointer;margin-top:6px;box-shadow:0 10px 24px rgba(255,122,26,.32);transition:.15s}
form button:hover{background:var(--coral-d);transform:translateY(-2px)}
form .rgpd{font-size:11px;color:var(--gray-l);margin-top:12px;text-align:center}

/* FAQ */
.faqwrap{max-width:800px;margin-top:34px}
details{border:1px solid var(--bord);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden;transition:.15s}
details[open]{border-color:var(--aqua);box-shadow:0 10px 26px rgba(10,42,67,.08)}
details summary{padding:18px 20px;font-family:var(--disp);font-weight:600;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+";color:var(--aqua-d);font-size:24px;font-weight:600;line-height:1}
details[open] summary:after{content:"–"}
details .a{padding:0 20px 18px;font-size:14.5px;color:var(--gray)}

footer{background:var(--navy);color:#9db4c6;padding:36px 0;font-size:13.5px;line-height:1.95}
footer .ft{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer .fb{display:flex;align-items:center;gap:11px;margin-bottom:8px}
footer .fb img{width:34px;height:34px}
footer .fb b{font-family:var(--disp);color:#fff;font-size:17px}
footer a{color:#bfeefb}
footer .legal{font-size:11px;color:#5f788c;margin-top:18px;border-top:1px solid #1c3a52;padding-top:14px;width:100%}

/* PRICING */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px;align-items:start}
.price{border:1px solid var(--bord);border-radius:20px;padding:28px;background:#fff;box-shadow:var(--sh-sm);position:relative;transition:transform .18s,box-shadow .18s}
.price:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.price.hot{border:2px solid var(--aqua);box-shadow:var(--sh-lg)}
.tagpop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--aqua);color:#fff;font-family:var(--disp);font-weight:700;font-size:12px;padding:5px 14px;border-radius:999px;white-space:nowrap}
.price .pt{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--navy)}
.price .pa{font-size:15px;color:var(--gray);margin:12px 0 2px}
.price .pa b{font-family:var(--disp);font-size:34px;color:var(--navy);font-weight:800;letter-spacing:-.02em}
.pa-year{font-size:13px;color:var(--gray-l);margin:2px 0 6px}
.pl{list-style:none;margin:18px 0 22px}
.pl li{font-size:14px;color:var(--gray);padding-left:28px;position:relative;margin-bottom:10px}
.pl li:before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--aqua-soft)}
.pl li:after{content:"✓";position:absolute;left:5px;top:1px;color:var(--aqua-d);font-weight:800;font-size:11px}
.btn-devis.full{display:block;text-align:center;width:100%;box-sizing:border-box}
.pricenote{text-align:center;margin-top:24px;font-size:14px;color:var(--gray-l)}

/* INTENT */
.intentsec{padding-top:56px;padding-bottom:14px}
.intent{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.itile{display:block;border:1.5px solid var(--bord);border-radius:16px;padding:22px;background:#fff;box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s,border-color .16s}
.itile:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--aqua)}
.itile .ibox{margin-bottom:12px}
.itile b{display:block;font-family:var(--disp);font-size:17px;color:var(--navy);margin-bottom:2px}
.itile span{font-size:13px;color:var(--gray-l)}
/* BRANDS */
.brands{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.bchip{border:1px solid var(--bord);border-radius:10px;padding:12px 20px;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--navy);background:#fff;box-shadow:var(--sh-sm)}
/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px}
.step .sn{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--disp);font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-family:var(--disp);font-size:17px;font-weight:600;margin-bottom:6px}
.step p{font-size:14px;color:var(--gray)}
/* STATS */
.stats{background:var(--navy);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:46px 24px;text-align:center}
.stats .st b{display:block;font-family:var(--disp);font-size:42px;font-weight:800;color:var(--aqua);line-height:1;letter-spacing:-.02em}
.stats .st span{font-size:14px;color:#cdddea;margin-top:8px;display:block}

.mobilebar{display:none}
@media (max-width:900px){
  .tel .txt{display:none}
  .hgrid{grid-template-columns:1fr}
  .hcard{display:none}
  h1{font-size:38px}
  .svc{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr;gap:26px}
  .formwrap{grid-template-columns:1fr;gap:30px}
  .pricing{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .intent{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .nav .cta{display:none}
  .mobilebar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;box-shadow:0 -4px 20px rgba(0,0,0,.15)}
  .mobilebar a{flex:1;text-align:center;padding:16px;font-weight:800;font-family:var(--disp);font-size:15px;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
  .mobilebar a .ico{width:18px;height:18px}
  .mobilebar .c{background:var(--navy)} .mobilebar .d{background:var(--coral)}
  body{padding-bottom:56px}
}
@media (max-width:560px){ h1{font-size:32px} .svc,.why,.frow{grid-template-columns:1fr} }