@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --blue:#1e6fd9;
  --blue2:#0a2a4a;
  --soft:#eef4ff;
  --line:#d9e6ff;
  --ink:#0a2a4a;
  --muted:#5a6c86;
  --yellow:#ffd23f;
  --radius:18px;
  --shadow:0 14px 34px rgba(10,42,74,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
.container{max-width:1120px;margin:0 auto;padding:0 18px}
a{color:inherit}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.center{text-align:center;margin-top:18px}

/* Header bleu */
.header{background:var(--blue);color:#fff;position:sticky;top:0;z-index:200}
.header__inner{display:flex;align-items:center;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand__logo{width:44px;height:44px;border-radius:14px;background:#fff;color:var(--blue2);display:flex;align-items:center;justify-content:center;font-weight:950}
.brand__name{font-weight:950}
.brand__tag{font-size:.86rem;opacity:.9}
.nav{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav a{color:#fff;text-decoration:none;padding:10px 10px;border-radius:14px;font-weight:800}
.nav a:hover{background:rgba(255,255,255,.12)}
.nav__cta{padding:10px 14px;border-radius:14px;background:var(--blue);color:#fff;font-weight:700;box-shadow:0 10px 26px rgba(15,77,204,.25)}
.nav__cta:hover{filter:brightness(.98)}


/* Dropdown services (menu roulant) */
.navDrop{position:relative}
.navDrop__summary{list-style:none;cursor:pointer;color:#fff;padding:10px 10px;border-radius:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.navDrop__summary::-webkit-details-marker{display:none}
.navDrop__summary::after{content:"▾";font-size:.9em;opacity:.85}
.navDrop__summary:hover{background:rgba(255,255,255,.12)}
.navDrop__summary.active{background:rgba(255,255,255,.14)}
.navDrop[open] .navDrop__summary{background:rgba(255,255,255,.14)}
.navDrop__menu{position:absolute;top:48px;left:0;min-width:220px;background:#0b3e91;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:8px;box-shadow:0 18px 40px rgba(2,6,23,.25);display:flex;flex-direction:column;gap:2px;z-index:60}
.navDrop__menu a{padding:10px 12px;border-radius:12px}
.navDrop__menu a:hover{background:rgba(255,255,255,.12)}

/* Nav dropdown polish (removes dashed line under Services) */
.nav .navDrop{border-bottom:none;padding:0;margin:0}
.nav .navDrop__summary{outline:none}
.nav .navDrop__summary:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.navDrop:hover .navDrop__menu, .navDrop:focus-within .navDrop__menu{display:flex}

/* On desktop, open dropdown on hover without click */
@media (min-width:981px){
  .navDrop{padding:0;margin:0}
  .navDrop:not([open]) .navDrop__menu{display:none}
  .navDrop:hover{ }
  .navDrop:hover > .navDrop__menu{display:flex}
  .navDrop:hover > .navDrop__summary{background:rgba(255,255,255,.12)}
}

/* Mobile: dropdown becomes inline list */
@media (max-width:980px){
  .navDrop{width:100%}
  .navDrop__menu{position:static;min-width:unset;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none;margin-top:6px}
  .navDrop__summary{width:100%;justify-content:space-between}
}

.navcheck{display:none}
.burger{display:none;margin-left:auto;width:48px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.28);align-items:center;justify-content:center;gap:6px;cursor:pointer}
.burger span{width:20px;height:2px;background:#fff;display:block}
@media (max-width:980px){
  .burger{display:flex}
  .nav{position:absolute;left:0;right:0;top:72px;background:var(--blue);display:none;flex-direction:column;padding:10px 18px 16px;border-top:1px solid rgba(255,255,255,.18)}
  .nav a{width:100%}
  .navcheck:checked ~ .nav{display:flex}
}

/* Bands = séparation nette des couleurs */
.band{padding:64px 0}
.band--white{background:#fff}
.band--soft{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band--stats{background:linear-gradient(180deg, rgba(30,111,217,.12), rgba(30,111,217,.06));border-top:1px solid rgba(30,111,217,.18);border-bottom:1px solid rgba(30,111,217,.18)}

/* Hero banner */
.hero--banner{position:relative;padding:0;background:#fff}
.hero__bg{position:absolute;inset:0;height:440px;background:url("assets/hero-banner.jpg") center/cover}
.hero__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(10,42,74,.56), rgba(10,42,74,.20) 55%, rgba(255,255,255,0))}
.hero__grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:start;padding:38px 0 18px}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr}.hero__bg{height:560px}}
.hero__panel{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.pill{display:inline-flex;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:900;color:var(--blue2)}
h1{margin:12px 0 10px;font-size:2.25rem;line-height:1.08;letter-spacing:-.3px}
.accent{color:var(--blue)}
.lead{font-size:1.05rem;max-width:66ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;text-decoration:none;font-weight:950;border:1px solid transparent}
.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--shadow)}
.btn--soft{background:var(--soft);border:1px solid var(--line)}
.btn--outline{background:#fff;border:1px solid var(--line)}
.btn--outlineOnBlue{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}

.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
@media (max-width:720px){.checks{grid-template-columns:1fr}}
.check{display:flex;gap:10px;padding:12px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.check span{width:28px;height:28px;border-radius:10px;background:rgba(30,111,217,.12);display:flex;align-items:center;justify-content:center;font-weight:950;color:var(--blue)}

.heroCard{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px}
.heroCard__title{font-weight:950}
.heroCard__sub{margin-top:4px}
.heroCard__rows{margin-top:12px;display:grid;gap:10px}
.heroCard__row{padding:10px 12px;border-radius:16px;background:var(--soft);border:1px solid var(--line);font-weight:800}
.heroCard__actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:-32px}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}}
.stat{background:rgba(30,111,217,.10);border:1px solid rgba(30,111,217,.22);border-radius:22px;padding:18px;text-align:center;box-shadow:0 16px 40px rgba(10,42,74,.10);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.stat__n{font-weight:950;font-size:1.6rem}
.stat__t{color:var(--muted);font-weight:800}

/* Section head */
.sectionHead{margin-bottom:16px}
.sectionHead.split{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sectionHead h2{margin:0;font-size:2rem;letter-spacing:-.3px}

/* Cards services */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s ease}
.card:hover{transform:translateY(-3px)}
.card__ico{font-size:1.4rem}
.card__title{font-weight:950;margin-top:10px}
.card__txt{color:var(--muted);margin-top:6px}
.card__more{margin-top:10px;font-weight:950;color:var(--blue2)}

/* Compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){.compare{grid-template-columns:1fr}}
.compare__col{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px}
.compare__tag{display:inline-flex;padding:8px 12px;border-radius:999px;font-weight:950;margin-bottom:10px}
.compare__tag.bad{background:#ffe9ed;color:#b3203c}
.compare__tag.good{background:#e7fff1;color:#0b7a3e}
.compare__row{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.compare__row:last-child{border-bottom:0}
.x,.v{width:26px;height:26px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:950}
.x{background:#ffe9ed;color:#b3203c;border:1px solid #ffd0d9}
.v{background:#e7fff1;color:#0b7a3e;border:1px solid #caffdf}
.compare__result{margin-top:12px;padding:12px;border-radius:16px;font-weight:950;text-align:center;border:1px solid var(--line)}
.compare__result.bad{background:#fff4f6}
.compare__result.good{background:#f2fff7}

/* Guarantee */
.guarantee{text-align:center;max-width:760px}
.shield{width:64px;height:64px;border-radius:22px;margin:0 auto 10px;background:rgba(30,111,217,.12);display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.chip{padding:10px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:900}

/* Reviews */
.gline{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:900}
.g{width:28px;height:28px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:950;color:var(--blue)}
.stars{color:#f4b400}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:980px){.reviews{grid-template-columns:1fr}}
.review{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.review__top{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.avatar{width:44px;height:44px;border-radius:16px;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:950;color:var(--blue2)}

/* Blog */
.blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:980px){.blog{grid-template-columns:1fr}}
.blogCard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.blogTag{display:inline-flex;padding:8px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-weight:950;color:var(--blue2)}
.blogCard h3{margin:12px 0 8px}
.blogMeta{color:var(--muted);font-weight:900;margin-top:10px}

/* CTA */
.cta{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
@media (max-width:720px){.cta{flex-direction:column;align-items:flex-start}}

/* Page hero */
.pageHero{padding:34px 0}
.pageHero--blue{background:var(--soft);border-bottom:1px solid var(--line)}
.crumbs{color:var(--muted);font-weight:900}
.crumbs a{text-decoration:none}
.crumbs span{margin:0 6px}

/* Two panels */
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){.two{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.panel--blue{background:var(--blue);color:#fff;border-color:rgba(255,255,255,.3)}
.list{margin:10px 0 0 18px}
.list--white{color:#fff}
.panel__cta{margin-top:12px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
.stepN{width:34px;height:34px;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:950;color:var(--blue2)}

/* Before/After */
.ba{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow)}
.baStage{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.baImg{width:100%;height:auto;display:block}
.baImg--after{display:none}
.baControls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.baCount{font-weight:950;color:var(--blue2)}

/* Form */
.form{display:flex;flex-direction:column;gap:12px;margin-top:10px}
label{display:flex;flex-direction:column;gap:6px;font-weight:950}
input,select,textarea{padding:12px 12px;border-radius:14px;border:1px solid var(--line);outline:none;font-weight:800}
input:focus,select:focus,textarea:focus{border-color:#a9c8ff;box-shadow:0 0 0 4px rgba(30,111,217,.14)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.grid2{grid-template-columns:1fr}}
.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:850}
.check input{margin-top:4px}

/* Contact side cards */
.infoCards{display:grid;gap:10px;margin-top:10px}
.infoCard{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:12px}
.infoK{opacity:.9;font-weight:900}
.infoV{font-weight:950;font-size:1.05rem;margin-top:4px}
.infoS{opacity:.9;font-weight:800;margin-top:4px}
.miniBox{margin-top:12px;padding:12px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.faq--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.faq--2{grid-template-columns:1fr}}
@media (max-width:980px){.faq{grid-template-columns:1fr}}
.faqCol{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
details{padding:10px 0;border-bottom:1px dashed var(--line)}
details:last-child{border-bottom:0}
summary{cursor:pointer;font-weight:950}
.faqCta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
@media (max-width:720px){.faqCta{flex-direction:column;align-items:flex-start}}

/* Footer bleu */
.footer{background:var(--blue);color:#fff}
/* Texte "muted" dans le footer (sinon illisible sur fond bleu) */
.footer .muted{color:rgba(255,255,255,.88)}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:16px;padding:28px 0}
@media (max-width:980px){.footer__grid{grid-template-columns:1fr}}
.footer__brand{font-weight:950;font-size:1.1rem}
.footer__title{font-weight:950;margin-bottom:10px}
.footer__link{display:block;color:#fff;text-decoration:none;padding:6px 0;opacity:.95}
.footer__link:hover{opacity:1;text-decoration:underline}
.footer__bottombar{background:var(--blue2);}
.footer__bottom{padding:14px 0;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:10px}
.kv__k{opacity:.9;font-weight:900}
.kv__v{font-weight:950}


/* HERO CLEAN (sans cartes) */
.hero--clean{position:relative;padding:0;min-height:460px;color:#fff}
.hero--clean .hero__bg{position:absolute;inset:0;height:100%;background:url("assets/hero-banner.jpg") center/cover}
.hero--clean .hero__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(10,42,74,.78), rgba(10,42,74,.35) 55%, rgba(10,42,74,.15))}
.hero__cleanInner{position:relative;padding:92px 0 60px;max-width:920px}
.hero--clean .pill{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:#fff}
.hero--clean .lead{color:rgba(255,255,255,.92)}
.btn--outlineOnHero{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff}
.btn--outlineOnHero:hover{background:rgba(255,255,255,.18)}
@media (max-width:720px){
  .hero__cleanInner{padding:78px 0 54px}
}


/* Avant/Après — plus petit + design premium */
.ba{
  max-width:760px;
  margin:0 auto;
  padding:14px;
}
.baStage{
  border-radius:16px;
}
.baStage:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(217,230,255,.9);
}
.baImg{border-radius:16px}
.baControls{
  justify-content:center;
}
.baControls .btn{padding:10px 14px;border-radius:12px}
.baCount{
  min-width:72px;
  text-align:center;
  background:var(--soft);
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:14px;
  font-weight:950;
}
.baHint{display:none}
@media (max-width:720px){
  .ba{max-width:100%}
}


/* Pourquoi nous — redesign */
.kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:950;color:var(--blue2)}
.whyWrap{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
@media (max-width:980px){.whyWrap{grid-template-columns:1fr}}
.whyIntro{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.whyBullets{display:grid;gap:10px;margin:14px 0 4px}
.whyBullet{display:flex;gap:10px;padding:12px;border-radius:18px;background:var(--soft);border:1px solid var(--line);align-items:center}
.whyBullet span{width:28px;height:28px;border-radius:10px;background:rgba(30,111,217,.12);display:flex;align-items:center;justify-content:center;font-weight:950;color:var(--blue)}
.whyGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.whyGrid{grid-template-columns:1fr}}
.whyCard2{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow);transition:transform .15s ease}
.whyCard2:hover{transform:translateY(-3px)}
.whyTop{display:flex;gap:10px;align-items:center}
.whyIco2{width:42px;height:42px;border-radius:16px;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.whyTitle2{font-weight:950}
.whyTxt2{color:var(--muted);margin-top:8px}
.whyTag{display:inline-flex;margin-top:12px;padding:8px 10px;border-radius:999px;background:rgba(30,111,217,.10);border:1px solid rgba(30,111,217,.18);font-weight:950;color:var(--blue2)}

/* Carousel Avant/Après — slide gauche->droite */
.carousel{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:14px}
.viewport{overflow:hidden;border-radius:18px}
.track{display:flex;gap:12px;transition:transform .35s ease}
.slide{min-width:100%;border:0;background:transparent;padding:0;text-align:left;cursor:pointer}
.slideInner{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0}
.shot{margin:0;position:relative}
.shot img{display:block;width:100%;height:auto}
.badge{position:absolute;top:10px;left:10px;background:rgba(10,42,74,.85);color:#fff;padding:6px 10px;border-radius:999px;font-weight:950;font-size:.9rem}
.badge--after{background:rgba(30,111,217,.90)}
.slideCap{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px}
.carBtn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);font-size:1.8rem;line-height:1;color:var(--blue2);cursor:pointer}
.carBtn--left{left:-10px}
.carBtn--right{right:-10px}
@media (max-width:720px){
  .pair{grid-template-columns:1fr}
  .carBtn{display:none}
}

/* Modal infos projet */
.modal{position:fixed;inset:0;display:none;z-index:100}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,42,74,.55)}
.modal__panel{position:relative;max-width:720px;margin:10vh auto 0;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35);padding:18px}
.modal__close{position:absolute;top:12px;right:12px;border:1px solid var(--line);background:#fff;border-radius:14px;width:44px;height:44px;cursor:pointer;font-weight:950}
.modal__title{font-weight:950;font-size:1.25rem}
.modal__desc{margin-top:10px;color:var(--muted)}
.modal__hint{margin-top:12px}

/* Pourquoi nous – design sans blocs blancs */
.whyAlt{
  background:linear-gradient(135deg,var(--blue),#0b3a7a);
  color:#fff;
}
.whyAltTitle{font-size:2.2rem;font-weight:900}
.whyAltLead{opacity:.9;margin:10px 0 28px}
.whyAltRow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}
.whyAltItem{
  font-size:1.05rem;
  padding-left:18px;
  position:relative;
}
.whyDot{
  position:absolute;
  left:0; top:.45em;
  width:8px;height:8px;border-radius:50%;
  background:#fff;
}

/* Avant / Après labels */
.baLabels{
  display:flex;
  justify-content:space-between;
  margin:0 0 10px;
  font-weight:800;
  color:var(--muted);
}

/* WhatsApp floating */
.waFloat{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:120;
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.waBtn{
  width:56px;height:56px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--blue),#0b3a7a);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.22);
}
.waBtn:hover{transform:translateY(-2px)}
.waIcon{display:flex}
.waTip{
  max-width:210px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  position:relative;
}
.waTip:after{
  content:"";
  position:absolute;
  right:-6px;
  bottom:18px;
  width:12px;height:12px;
  background:#fff;
  transform:rotate(45deg);
  border-right:1px solid var(--line);
  border-top:1px solid var(--line);
}
.waTipTitle{font-weight:950}
.waTipText{color:var(--muted);margin-top:2px}
.waTipClose{
  position:absolute;top:6px;right:6px;
  width:28px;height:28px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:18px;line-height:1;
}
@media (max-width:720px){
  .waTip{display:none}
  .waFloat{right:14px;bottom:14px}
}

/* Process timeline */
.band--dark{background:linear-gradient(180deg,#062449,#0b3a7a);color:#fff}
.sectionHead.center{text-align:center}
.process{position:relative}
.processGrid{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:start;
}
.processLine{
  height:2px;
  background:rgba(255,255,255,.35);
  border-radius:999px;
  margin:22px 8% 0;
  position:relative;
}
.processLine:before,.processLine:after{
  content:"";
  position:absolute;
  top:-2px;
  width:6px;height:6px;border-radius:50%;
  background:#fff;
}
.processLine:before{left:0}
.processLine:after{right:0}
.step{display:flex;flex-direction:column;align-items:center;gap:14px;position:relative}
.stepIcon{
  width:62px;height:62px;border-radius:18px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.stepCard{
  width:100%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:16px 16px 18px;
  backdrop-filter: blur(6px);
}
.stepCard--main{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.28);
}
.stepTitle{font-weight:950;letter-spacing:.2px}
.stepText{margin-top:8px;color:rgba(255,255,255,.88);line-height:1.55}
.step--main .stepIcon{background:rgba(0,0,0,.22)}
@media (max-width:900px){
  .processGrid{grid-template-columns:1fr;gap:14px}
  .processLine{display:none}
}

/* Pourquoi nous — clean (fond clair, style pro) */
.whyClean{position:relative}
.whyTop{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:14px}
@media (max-width:820px){.whyTop{flex-direction:column;align-items:flex-start}}
.whyPills{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-weight:950;color:var(--blue2);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}
.whyLine{
  height:2px;border-radius:999px;
  background:linear-gradient(90deg, rgba(30,111,217,.15), rgba(30,111,217,.45), rgba(30,111,217,.15));
  margin:10px 0 22px;
}
.whySteps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  align-items:stretch;
}
@media (max-width:920px){.whySteps{grid-template-columns:1fr;gap:12px}}
.whyStep{display:flex;flex-direction:column;align-items:center;gap:12px}
.whyIcon{
  width:56px;height:56px;border-radius:18px;
  background:rgba(30,111,217,.12);
  border:1px solid rgba(30,111,217,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--blue2);
}
.whyCard{
  width:100%;
  background:#fff;border:1px solid var(--line);
  border-radius:22px;
  padding:16px 16px 18px;
  box-shadow:var(--shadow);
}
.whyCard--main{
  border-color:rgba(30,111,217,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}
.whyTitle{font-weight:950;font-size:1.05rem}
.whyText{margin-top:8px;color:var(--muted);line-height:1.55}

/* Alternate band to avoid same backgrounds between sections */
.band--alt{
  background:linear-gradient(180deg,#ffffff 0%, #f6fbff 55%, #ffffff 100%);
  position:relative;
}
.band--alt:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(30,111,217,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.25;
}
.band--alt > .container{position:relative; z-index:1}
/* Add gentle separators */
.band--alt{
  border-top:1px solid rgba(30,111,217,.12);
  border-bottom:1px solid rgba(30,111,217,.12);
}

/* Icon images instead of emojis */
.whyIcon img{
  width:28px;
  height:28px;
}

/* WhatsApp button: perfectly round + official look */
.waBtn{
  width:60px !important;
  height:60px !important;
  border-radius:50% !important;
  background:#25D366 !important; /* WhatsApp green */
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.22);
}
.waBtn svg{display:block}
.waBtn svg path{fill:#fff}
/* Small inline icon helper */
.i24{width:24px;height:24px;vertical-align:middle}

/* Transparent header */
.siteHeader{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:1100;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
/* On scroll we add a solid blue for readability */
.siteHeader.scrolled{
  background:linear-gradient(90deg,#0b3a7a,#1e6fd9);
  border-bottom:1px solid rgba(255,255,255,.18);
}
/* Logo only (no background) */
.siteHeader .logo, .siteHeader .brand{
  display:flex;
  align-items:center;
  gap:0;
  background:transparent !important;
}
.siteHeader .logo img, .siteHeader .brand img{
  background:transparent !important;
  border-radius:0 !important;
  height:46px;
  width:auto;
}
/* Give page top padding so content isn't hidden under fixed header */
body{padding-top:0;}
@media (max-width:720px){
  body{padding-top:0;}
  .siteHeader .logo img, .siteHeader .brand img{ height:42px; }
}

/* Header + hero: banner starts behind header, text stays readable */
.hero{position:relative; overflow:hidden}
.hero__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(11,58,122,.78), rgba(30,111,217,.52)),
    url("assets/hero-banner.jpg") center/cover no-repeat;
  filter:saturate(1.05);
}
.hero__cleanInner{
  position:relative;
  padding-top:120px; /* space for fixed transparent header */
  padding-bottom:80px;
}
@media (max-width:720px){
  .hero__cleanInner{padding-top:110px; padding-bottom:64px;}
}
/* Brand logo in header */
.brand__img{height:46px;width:auto;display:block;background:transparent}
/* Services redesign */
.cards--services{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.cards--services{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards--services{grid-template-columns:1fr}}

.card--service{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  border:1px solid rgba(30,111,217,.14);
  border-radius:22px;
  padding:18px 18px 16px;
  box-shadow:0 16px 34px rgba(0,0,0,.10);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--service:before{
  content:"";
  position:absolute;
  left:14px; right:14px; top:0;
  height:4px;
  border-radius:0 0 10px 10px;
  background:linear-gradient(90deg,#0b3a7a,#1e6fd9);
  opacity:.9;
}
.card--service:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(0,0,0,.14);
  border-color:rgba(30,111,217,.28);
}
.card--service .card__ico{
  width:56px;height:56px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,111,217,.10);
  border:1px solid rgba(30,111,217,.18);
  margin-bottom:10px;
}
.card--service .card__ico img{width:28px;height:28px;display:block}
.card--service .card__title{font-weight:950;font-size:1.08rem;margin-top:2px}
.card--service .card__txt{color:var(--muted);line-height:1.55;margin-top:6px}
.card--service .card__more{margin-top:12px;color:var(--blue2);font-weight:850}

.siteHeader .nav a{color:#fff}
.siteHeader .nav__cta{padding:10px 14px;border-radius:14px;background:var(--blue);color:#fff;font-weight:700;box-shadow:0 10px 26px rgba(15,77,204,.25)}
.siteHeader.scrolled .nav a{color:#fff}

/* Hero text aligned to the right (like your reference) */
.hero__cleanInner{
  display:grid;
  grid-template-columns: 1fr minmax(360px, 560px);
  gap: 32px;
  align-items:center;
}
.hero__content, .heroContent, .hero__text{
  grid-column:2;
  margin-left:auto;
  text-align:left;
}
@media (max-width:900px){
  .hero__cleanInner{grid-template-columns:1fr;}
  .hero__content, .heroContent, .hero__text{grid-column:auto; margin:0 auto; text-align:center;}
}

/* Header without logo: align menu nicely */
.siteHeader{
  padding-left:22px;
  padding-right:22px;
}

/* When brand is removed, keep nav aligned */
.siteHeader .container,
.siteHeader .headerInner,
.siteHeader .header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* === CLEAN HERO FINAL === */
.heroClean{
  position:relative;
  min-height:85vh;
  display:flex;
  align-items:center;
  padding: clamp(28px, 5vw, 64px);
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15)),
    url("assets/hero-banner.jpg") center/cover no-repeat;

}
.heroImage{
  display:none;
}
.heroText{
  margin-left:auto;
  max-width: 640px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 14px;
  padding: clamp(20px, 3vw, 36px);
  background: rgba(11, 58, 122, 0.30);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  color:#fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);

}
.heroText h1{
  font-size:3rem;
  font-weight:900;
  line-height:1.1;
  margin-bottom:14px;
}
.heroServices{
  font-size:1.05rem;
  opacity:.9;
  margin-bottom:18px;
}
.heroDesc{
  font-size:1rem;
  opacity:.85;
  margin-bottom:26px;
}
.heroActions{
  display:flex;
  gap:14px;
}
.btnPrimary{
  background:#1e6fd9;
  color:#fff;
  padding:14px 22px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
}
.btnSecondary{
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  padding:14px 22px;
  border-radius:10px;
  text-decoration:none;
}
@media(max-width:900px){
  .heroClean{
  position:relative;
  min-height:85vh;
  display:flex;
  align-items:center;
  padding: clamp(28px, 5vw, 64px);
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15)),
    url("assets/hero-banner.jpg") center/cover no-repeat;

}
  .heroText{
  margin-left:auto;
  max-width: 640px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 14px;
  padding: clamp(20px, 3vw, 36px);
  background: rgba(11, 58, 122, 0.30);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  color:#fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);

}
  .heroActions{justify-content:center}
}


/* hero responsive */
@media (max-width: 900px){
  .heroText{max-width: 100%; margin-left: 0;}
}

/* =====================
   Before/After component
   ===================== */
.baGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width: 980px){.baGrid{grid-template-columns:1fr}}

.baItem{background:rgba(255,255,255,.82);border:1px solid rgba(0,0,0,.06);border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.10)}
.baSlider{position:relative;isolation:isolate}
.baImg{width:100%;height:auto;display:block}
.baOverlay{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(0,0,0,.40);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);border-radius:14px;padding:10px 12px;color:#fff;font-weight:700}
.baOverlay span{opacity:.92}
.baBtn{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}
.baBtn:hover{background:rgba(255,255,255,.18)}

.baNav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.25);color:#fff;display:grid;place-items:center;font-size:26px;cursor:pointer;z-index:2}
.baNav:hover{background:rgba(0,0,0,.32)}
.baNav--prev{left:10px}
.baNav--next{right:10px}

/* Service hero small tweaks */
.page--service .hero{padding-top:86px}
.hero--small .hero__inner{grid-template-columns:1.2fr .8fr}
@media (max-width: 980px){.hero--small .hero__inner{grid-template-columns:1fr}}

.section--alt{background:linear-gradient(180deg, rgba(15,77,204,.08), rgba(255,255,255,0));border-top:1px solid rgba(0,0,0,.05)}

/* WhatsApp floating button */
.wa-fab{
  position:fixed; right:18px; bottom:18px;
  width:56px; height:56px;
  border-radius:9999px;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px rgba(0,0,0,.28);
  z-index:120;
}
.wa-fab:hover{ transform: translateY(-1px); }
.wa-icon{
  width:28px; height:28px; display:block;
  background-color:#fff;
  -webkit-mask: url("assets/wa.svg") center/contain no-repeat;
  mask: url("assets/wa.svg") center/contain no-repeat;
}
.wa-tip{
  position:fixed; right:86px; bottom:22px;
  background: rgba(255,255,255,.94);
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px 12px 10px 12px;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  z-index:119;
  min-width: 190px;
}
.wa-tip-title{ font-weight:800; font-size:13px; color:#0b1324; }
.wa-tip-sub{ font-size:12px; color:#3c4b66; margin-top:2px; }
.wa-tip-close{
  position:absolute; top:6px; right:8px;
  width:26px; height:26px;
  border-radius:9999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  line-height:24px;
  font-size:18px;
  color:#0b1324;
}
@media (max-width: 520px){
  .wa-tip{ right:74px; bottom:18px; }
  .wa-fab{ right:14px; bottom:14px; width:52px; height:52px; }
}

/* ===== V37 FIX: header visible + spacing + WhatsApp icon ===== */
:root{ --header-h: 84px; }

.siteHeader{
  position: fixed;
  top:0; left:0; right:0;
  min-height: var(--header-h);
  background: rgba(8, 34, 84, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

/* Space for fixed header on every page */
main{ padding-top: calc(var(--header-h) + 18px); }

/* Pull the big hero behind the header (home + services) */
.hero{
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + 56px);
}

/* Ensure nav links stay readable on light backgrounds */
.nav a{ color: rgba(255,255,255,.92); }
.nav a:hover{ color: #ffffff; }

/* WhatsApp floating button: perfect circle + real icon */
.wa-fab{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  background: #25D366;
  border: 0;
}
.wa-icon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.wa-icon img{ width: 28px; height: 28px; display:block; }

/* Tooltip close button bigger */
.wa-tip-close{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(0,0,0,.08);
}
.wa-tip-close:hover{ background: rgba(0,0,0,.14); }

/* On smaller screens: keep header visible and not overlapping content */
@media (max-width: 720px){
  :root{ --header-h: 74px; }
  .siteHeader{ min-height: var(--header-h); }
}

/* Hero should start behind header (banner touches top) */
.heroClean,
.hero--service{
  margin-top: calc(-1 * (var(--header-h) + 18px));
  padding-top: calc(var(--header-h) + 18px + 56px);
}


/* ===== Premium "Étapes clés" section (dark background like example) ===== */
.section--processDark{
  position: relative;
  padding: 84px 0;
  color: #fff;
  overflow: hidden;
}
.section--processDark::before{
  content:"";
  position:absolute; inset:0;
  background: url("assets/img/banner.jpg") center/cover no-repeat;
  transform: scale(1.03);
  filter: saturate(0.95) contrast(1.05);
}
.section--processDark::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(2,6,23,.80), rgba(2,6,23,.55));
}
.processDarkWrap{position:relative; z-index:1;}
.processDarkTitle{
  text-align:center;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 28px;
}
.processSteps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
.processStep{text-align:center;}
.processIcon{
  width: 84px; height: 84px;
  display:inline-grid; place-items:center;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  margin-bottom: 14px;
  box-shadow: 0 18px 42px rgba(0,0,0,.25);
}
.processIcon img{width:44px;height:44px;}
.processConnector{
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.45), rgba(255,255,255,.0));
  margin: 8px auto 22px;
  width: min(340px, 90%);
}
.processCard{
  border-radius: 18px;
  padding: 22px 22px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0,0,0,.30);
}
.processCard--active{
  background: rgba(37,99,235,.55);
  border-color: rgba(147,197,253,.35);
}
.processCard h3{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
}
.processCard p{margin:0;color:rgba(255,255,255,.88);line-height:1.55;font-size:14px;}
@media (max-width: 920px){
  .processSteps{grid-template-columns: 1fr; gap: 18px;}
  .processConnector{display:none;}
}

/* ===== Service intro (image left + content card right) ===== */
.serviceIntro{padding:52px 0 28px;}
.serviceIntroGrid{display:grid;grid-template-columns: 1.1fr .9fr;gap:26px;align-items:stretch;}
.serviceIntroMedia{border-radius:26px;overflow:hidden;background:#0b2d5c;box-shadow:0 26px 80px rgba(2,6,23,.18);position:relative;}
.serviceIntroMedia img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);filter:saturate(1.05) contrast(1.03);}
.serviceIntroMedia::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 20% 30%, rgba(59,130,246,.25), rgba(0,0,0,0));}
.serviceIntroCard{border-radius:26px;padding:28px 28px;background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.08);box-shadow:0 26px 80px rgba(2,6,23,.10);}
.serviceIntroCard h1{margin:0 0 10px;font-size:clamp(22px,3vw,34px);line-height:1.1;}
.serviceIntroCard p{margin:0 0 14px;color:#334155;line-height:1.65;}
.serviceChips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px;}
.serviceChip{padding:10px 12px;border-radius:999px;background:#eff6ff;border:1px solid rgba(37,99,235,.18);color:#1e3a8a;font-weight:700;font-size:13px;}
.serviceIntroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
@media (max-width: 980px){
  .serviceIntroGrid{grid-template-columns:1fr;}
  .serviceIntroMedia{min-height:240px;}
}

/* ===== Before/After premium compare slider ===== */
.compare{border-radius:26px;overflow:hidden;background:#0b2d5c;border:1px solid rgba(148,163,184,.18);box-shadow:0 26px 80px rgba(2,6,23,.14);}
.compareTop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:rgba(2,6,23,.35);color:rgba(255,255,255,.92);font-weight:800;}
.compareTop span{opacity:.9;}
.compareToggle{appearance:none;border:0;cursor:pointer;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-weight:900;letter-spacing:.02em;transition:transform .2s ease, background .2s ease;}
.compareToggle:hover{transform:translateY(-1px);background:rgba(255,255,255,.18);}
.compareViewport{position:relative;height:clamp(240px,42vw,420px);background:#0b2d5c;}
.compareImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.compareAfterWrap{position:absolute;inset:0;width:50%;overflow:hidden;}
.compareHandle{position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;background:rgba(255,255,255,.8);box-shadow:0 0 0 6px rgba(37,99,235,.20);}
.compareHandle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:999px;background:rgba(15,23,42,.75);border:1px solid rgba(255,255,255,.28);box-shadow:0 18px 42px rgba(0,0,0,.35);}
.compareHandle::before{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font-size:18px;color:#fff;opacity:.9;}
.compareRange{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;}
.compareNav{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(255,255,255,.90);}
.compareNav button{appearance:none;border:1px solid rgba(15,23,42,.14);background:#fff;padding:10px 12px;border-radius:12px;font-weight:800;cursor:pointer;}
.compareNav .compareCount{font-weight:900;color:#0f172a;}
.compareInfo{font-size:13px;color:#475569;}

/* ===== WhatsApp bubble: perfectly round + dismissible tooltip ===== */
.wa-widget{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.wa-fab{
  width:60px;height:60px;border-radius:999px;
  display:block;
  padding:0;
  background:transparent; /* the icon itself is the round WhatsApp logo */
  border:0;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.wa-fab:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 22px 60px rgba(0,0,0,.26);}
.wa-fab__icon{display:block;width:100%;height:100%;}
.wa-fab__icon svg{width:100%;height:100%;display:block;}

.wa-tip{max-width:270px;background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:18px;padding:12px 12px 12px 12px;box-shadow:0 22px 62px rgba(2,6,23,.18);transform:translateY(10px);opacity:0;pointer-events:none;transition:transform .22s ease, opacity .22s ease;}
.wa-tip.is-visible{transform:translateY(0);opacity:1;pointer-events:auto;}
.wa-tip.hidden{display:none !important;}
.wa-tip-title{font-weight:900;color:#0f172a;font-size:14px;line-height:1.2;margin-bottom:4px;}
.wa-tip-sub{color:#475569;font-weight:700;font-size:13px;}
.wa-tip-close{appearance:none;border:0;background:rgba(15,23,42,.06);color:#0f172a;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;font-size:18px;cursor:pointer;position:absolute;right:10px;top:10px;}
.wa-tip{position:relative;}
.wa-tip-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:10px 12px;border-radius:12px;background:#25D366;color:#fff;font-weight:900;text-decoration:none;border:1px solid rgba(0,0,0,.05);}
.wa-tip-cta:hover{filter:brightness(1.03);}


.navCta{background:#2563eb !important;color:#fff !important;border:1px solid rgba(255,255,255,.18) !important;}
.navCta:hover{filter:brightness(1.05);}

/* ===== Avant / Après (style TNAgency-like) ===== */
.compare2{padding:10px 0 0}
.compare2__head{text-align:center;margin:0 auto 26px;max-width:760px}
.compare2__head h2{margin:0 0 10px;font-size:44px;letter-spacing:-.02em}
.compare2__head .muted{font-size:18px}

.compare2__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
@media (max-width:980px){.compare2__grid{grid-template-columns:1fr}}

.compare2__card{
  border-radius:26px;
  padding:26px;
  background:#fff;
  box-shadow:0 18px 46px rgba(10,42,74,.10);
  border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.compare2__card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 66px rgba(10,42,74,.14);
}

.compare2__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  margin-bottom:18px;
}
.compare2__badge--bad{background:#ffe9ed;color:#b3203c;border:1px solid #ffd0d9}
.compare2__badge--good{background:#e7fff1;color:#0b7a3e;border:1px solid #caffdf}

.compare2__list{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.compare2__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:16px;
  background:linear-gradient(0deg, rgba(238,244,255,.55), rgba(238,244,255,.55));
}
.compare2__card--bad .compare2__item{background:linear-gradient(0deg, rgba(255,233,237,.55), rgba(255,233,237,.55))}
.compare2__card--good .compare2__item{background:linear-gradient(0deg, rgba(231,255,241,.55), rgba(231,255,241,.55))}

.compare2__icon{
  width:34px;height:34px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  flex:0 0 34px;
}
.compare2__icon--bad{background:#fff;color:#b3203c;border:1px solid #ffd0d9}
.compare2__icon--good{background:#fff;color:#0b7a3e;border:1px solid #caffdf}

.compare2__result{
  margin-top:18px;
  padding:16px 18px;
  border-radius:18px;
  font-weight:900;
  text-align:center;
}
.compare2__result--bad{background:#fff0f3;color:#b3203c;border:1px solid #ffd0d9}
.compare2__result--good{background:#ecfff4;color:#0b7a3e;border:1px solid #caffdf}

.compare2__cta{text-align:center;margin-top:26px}

/* Button upgrade */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:14px;font-weight:900;text-decoration:none}
.btn--primary{background:var(--blue2);color:#fff;box-shadow:0 12px 26px rgba(10,42,74,.18);transition:transform .2s ease, box-shadow .2s ease}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(10,42,74,.22)}


/* ===== Layout helper: 2 cards ===== */
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:620px){.cards--2{grid-template-columns:1fr;}}
/* ===== Nav active state (premium) ===== */
.nav a.active{
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}


/* ===== Steps (service pages) — fixed layout + correct classes ===== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:14px}
.step{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
.step__n,.stepN{
  width:40px;height:40px;border-radius:16px;
  background:linear-gradient(180deg,#eff6ff,#ffffff);
  border:1px solid rgba(37,99,235,.22);
  color:#1e3a8a;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;flex:0 0 40px;
}
.step__body{display:flex;flex-direction:column;gap:6px}
.step__body strong{font-weight:950}
.step__body span{color:#475569;line-height:1.55}


/* ===== Service compare block polish ===== */
.page--service .compare{
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 26px 70px rgba(2,6,23,.14);
  border:1px solid rgba(15,23,42,.10);
}
.page--service .compareNav{
  border-top:1px solid rgba(15,23,42,.08);
}


/* ===== Service page typography ===== */
.page--service .sectionHead h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.02em}
.page--service .section{padding:70px 0}

/* ===== Service hero media (image) ===== */
.serviceHero__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:26px;
  align-items:stretch;
}
@media (max-width:980px){.serviceHero__grid{grid-template-columns:1fr}}

.serviceHero__media{
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(2,6,23,.16);
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.serviceHero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
}

/* ===== Card text + bullets ===== */
.cardText{margin:12px 0;color:#475569;line-height:1.65}
.bullets{margin:14px 0 0;padding-left:18px}
.bullets li{margin:8px 0;color:#0f172a}


/* ===== Construction page: left block image ===== */
.heroLeft--construction{
  background:
    linear-gradient(90deg, rgba(10,37,64,.85) 0%, rgba(10,37,64,.65) 50%, rgba(10,37,64,.40) 100%),
    url('assets/img/construction.jpg') center/cover no-repeat;
}



/* ---------- CTA band (fin des pages services) ---------- */
.ctaBand{
  padding:24px 0 40px;
  background:transparent;
  border-top:none;
}
.ctaBand__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:28px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.ctaBand__inner h2{margin:0 0 6px 0;font-size:26px;line-height:1.2;color:#0f172a}
.ctaBand__inner p{margin:0;color:rgba(15,23,42,.70)}
.ctaBand__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:820px){
  .ctaBand__inner{flex-direction:column;align-items:flex-start}
  .ctaBand__actions{width:100%;justify-content:flex-start}
}

/* ---------- Reveal animation (scroll) ---------- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}

/* ---------- FAQ (services) : reveal en cascade ---------- */
.faqCol details.reveal{transition-delay:0s}
.faqCol details.reveal:nth-of-type(1){transition-delay:.04s}
.faqCol details.reveal:nth-of-type(2){transition-delay:.08s}
.faqCol details.reveal:nth-of-type(3){transition-delay:.12s}
.faqCol details.reveal:nth-of-type(4){transition-delay:.16s}
.faqCol details.reveal:nth-of-type(5){transition-delay:.20s}
.faqCol details.reveal:nth-of-type(6){transition-delay:.24s}

}

/* ---------- FAQ : effet couleurs + animation ---------- */
.faq details{
  position:relative;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  margin:10px 0;
  background:linear-gradient(180deg, rgba(11,94,215,.04), rgba(11,94,215,0));
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.faq details:hover{
  transform:translateY(-1px);
  border-color:rgba(11,94,215,.25);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(11,94,215,.08), rgba(11,94,215,0));
}
.faq details[open]{
  border-color:rgba(11,94,215,.35);
  background:linear-gradient(180deg, rgba(11,94,215,.10), rgba(11,94,215,0));
}
.faq summary{
  list-style:none;
  cursor:pointer;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  width:28px;height:28px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border-radius:10px;
  background:rgba(11,94,215,.10);
  color:#0b5ed7;
  font-weight:900;
  transition:transform .2s ease, background .2s ease;
}
.faq details[open] summary::after{
  content:"–";
  transform:rotate(0deg);
  background:rgba(11,94,215,.16);
}
.faq details p{margin:10px 0 0 0;color:rgba(15,23,42,.75)}

/* Footer: un peu plus d'air en haut */
.footer{padding-top:40px}


.btn.small{padding:10px 12px;border-radius:12px}



/* ===== Réalisations (galerie) ===== */
.hero__stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.stat{display:flex;align-items:baseline;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:#fff}
.sectionHead--row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.filterBar{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.filterBtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 12px;font-weight:800;cursor:pointer;transition:transform .15s ease, background .15s ease}
.filterBtn:hover{transform:translateY(-1px);background:rgba(11,94,215,.06)}
.filterBtn.is-active{background:#0b5ed7;color:#fff;border-color:#0b5ed7}

.worksGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.worksGrid--featured{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 980px){.worksGrid,.worksGrid--featured{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.worksGrid,.worksGrid--featured{grid-template-columns:repeat(1,minmax(0,1fr))}}

.workCard{border:1px solid var(--line);background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:transform .15s ease, box-shadow .15s ease}
.workCard:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.10)}
.workCard__media{position:relative;aspect-ratio:16/10;background:#f3f6ff}
.workCard__media img{width:100%;height:100%;object-fit:cover;display:block}
.workCard__badges{position:absolute;left:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#0b5ed7;color:#fff;font-weight:900;font-size:.78rem}
.badge--soft{background:rgba(255,255,255,.92);color:#0f172a;border:1px solid rgba(15,23,42,.10)}
.workCard__body{padding:14px}
.workCard__body h3{margin:0 0 6px 0;font-size:1.02rem}
.workCard__body p{margin:0 0 12px 0}

.ctaMini{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg, rgba(11,94,215,.06), rgba(255,255,255,1))}
@media (max-width: 820px){.ctaMini{flex-direction:column;align-items:flex-start}}

.compare--modal{margin-top:6px}



/* ====== UI POLISH (buttons + spacing) ====== */
:root{
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:28px;
  --space-6:40px;
}

/* Better section breathing room */
.section{padding:80px 0}
@media (max-width:720px){.section{padding:64px 0}}

.sectionHead{margin-bottom:22px}
.sectionHead h2{margin:0 0 8px 0}
.sectionHead p{margin:0}

/* Cards spacing */
.cards{gap:18px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* Buttons: visible + consistent */
.btn,
.btnPrimary,
.btnSecondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:12px 18px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover,
.btnPrimary:hover,
.btnSecondary:hover{transform:translateY(-1px)}
.btn:active,
.btnPrimary:active,
.btnSecondary:active{transform:translateY(0)}
.btn:focus-visible,
.btnPrimary:focus-visible,
.btnSecondary:focus-visible{
  outline:3px solid rgba(30,111,217,.25);
  outline-offset:2px;
}

/* Existing modifier buttons */
.btn--primary{box-shadow:0 14px 28px rgba(30,111,217,.22)}
.btn--primary:hover{box-shadow:0 18px 34px rgba(30,111,217,.28)}
.btn--outline{border-color:rgba(10,42,74,.18)}
.btn--outline:hover{background:rgba(30,111,217,.06); border-color:rgba(30,111,217,.30)}

/* Primary/Secondary (legacy) */
.btnPrimary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 14px 28px rgba(30,111,217,.22);
}
.btnPrimary:hover{box-shadow:0 18px 34px rgba(30,111,217,.28)}
.btnSecondary{
  background:#fff;
  color:var(--blue);
  border-color:rgba(30,111,217,.28);
}
.btnSecondary:hover{background:rgba(30,111,217,.06); border-color:rgba(30,111,217,.38)}

/* Secondary button on dark hero */
.serviceHero .btnSecondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
}
.serviceHero .btnSecondary:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.70);
}

/* Button group spacing */
.serviceHero__actions,
.btnRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
@media (max-width:520px){
  .serviceHero__actions a,
  .btnRow a{width:100%}
}

/* FAQ wide layout polish */
.faqGrid{gap:16px}
details.faqItem{border-radius:16px}
details.faqItem > summary{padding:14px 16px}
details.faqItem[open]{box-shadow:0 14px 34px rgba(10,42,74,.10)}



/* ====== SPACING FIX: service benefit mini-cards (Comfort/Optimisation/Suivi) ====== */
.checks{
  gap:18px;
  margin-top:18px;
}
.check{
  padding:16px 18px;
}



/* ====== NAV: underline active instead of pill ====== */
.nav a{
  background:transparent !important;
  border-radius:0 !important;
  position:relative;
  padding:10px 6px !important;
  opacity:.92;
}
.nav a:hover{opacity:1}
.nav a::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:4px;
  height:3px;
  border-radius:999px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
.nav a.active::after,
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:hover::after{transform:scaleX(1)}
/* Keep CTA pill */
.nav__cta{border-radius:14px !important}



/* ====== SERVICES: nicer background & readable sections ====== */
.page--service{
  background:linear-gradient(180deg, #ffffff 0%, #f6f9ff 55%, #ffffff 100%);
}
.page--service main{
  padding-bottom:40px;
}
.page--service section.section.container{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:22px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  padding:34px 28px;
  margin:28px auto;
}
@media (max-width:720px){
  .page--service section.section.container{
    padding:26px 18px;
    margin:18px auto;
  }
}
.page--service .serviceHero{margin-bottom:18px}
.page--service .serviceHero__sub{max-width:62ch}
.page--service .cards .card,
.page--service .check{
  box-shadow:none;
}



/* ====== REALISATIONS: clickable cards + horizontal slider ====== */
.worksGrid--featured{
  display:flex !important;
  gap:16px !important;
  overflow:auto;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
}
.worksGrid--featured > .workCard{
  min-width:320px;
  scroll-snap-align:start;
}
@media (max-width:520px){
  .worksGrid--featured > .workCard{min-width:86vw}
}
.carouselArrows{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:-6px;
  margin-bottom:10px;
}
.carouselBtn{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(10,42,74,.14);
  background:#fff;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;
}
.carouselBtn:hover{background:rgba(30,111,217,.06);border-color:rgba(30,111,217,.30)}
.workCard__media{cursor:pointer}



/* ====== INTRO: logo + welcome overlay ====== */
.introOverlay{
  position:fixed; inset:0;
  background:rgba(2,6,23,.78);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.introCard{
  width:min(560px, 92vw);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.96));
  border:1px solid rgba(255,255,255,.26);
  border-radius:24px;
  padding:28px 22px;
  text-align:center;
  box-shadow:0 26px 70px rgba(0,0,0,.28);
  transform: translateY(10px);
  opacity:0;
  animation:introIn .55s ease forwards;
}
.introLogo{
  width:84px;height:84px;
  border-radius:22px;
  background:#fff;
  display:inline-flex;
  align-items:center;justify-content:center;
  box-shadow:0 16px 40px rgba(10,42,74,.18);
  margin-bottom:14px;
}
.introLogo img{width:64px;height:64px;object-fit:contain}
.introCard h2{margin:0 0 6px 0}
.introCard p{margin:0; color:rgba(10,42,74,.75)}
.introCard .introSmall{margin-top:14px; font-size:13px; color:rgba(10,42,74,.6)}
@keyframes introIn{to{transform:translateY(0);opacity:1}}
.introOverlay.hide{animation:introOut .35s ease forwards}
@keyframes introOut{to{opacity:0;visibility:hidden}}



/* ====== NAV DROPDOWN: clean + animated (Services) ====== */
.navDrop__summary{
  background:transparent !important;
  border-radius:0 !important;
  position:relative;
  padding:10px 6px !important;
  opacity:.92;
}
.navDrop__summary:hover{opacity:1}
.navDrop__summary::after{
  content:"▾";
  font-size:.9em;
  opacity:.85;
  margin-left:6px;
  transform:translateY(1px);
}
.navDrop__summary::before{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:4px;
  height:3px;
  border-radius:999px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
.navDrop__summary:hover::before{transform:scaleX(1)}
.navDrop__summary.active::before,
.navDrop[open] .navDrop__summary::before{transform:scaleX(1)}

/* menu animation */
.navDrop__menu{
  opacity:0;
  transform:translateY(-8px) scale(.98);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.navDrop[open] .navDrop__menu{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}



/* ====== HOME: Services grid like reference ====== */
.servicesShowcase{
  padding:70px 0;
  background:linear-gradient(180deg, #ffffff 0%, #f6f9ff 70%, #ffffff 100%);
}
.servicesHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.servicesHeader h2{margin:0}
.servicesHeader p{margin:6px 0 0 0; max-width:62ch}
.servicesGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
@media (max-width:980px){.servicesGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.servicesGrid{grid-template-columns:1fr}}

.svcCard{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  display:flex;
  flex-direction:column;
  min-height:320px;
}
.svcCard__img{
  height:150px;
  background:#0b3e91;
  position:relative;
}
.svcCard__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05);
}
.svcCard__img::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,42,74,.05), rgba(10,42,74,.35));
}
.svcCard__body{
  padding:16px 16px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.svcCard__body h3{margin:0}
.svcCard__list{
  margin:0;
  padding-left:18px;
  color:rgba(10,42,74,.72);
}
.svcCard__actions{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}
.svcCard__actions a{min-height:42px}

/* ====== HOME: Trust split (like reference) ====== */
.trustSplit{
  padding:70px 0;
}
.trustWrap{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:22px;
  align-items:stretch;
}
@media (max-width:900px){.trustWrap{grid-template-columns:1fr}}
.trustLeft{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:24px;
  padding:26px 22px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
}
.trustKicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(30,111,217,.95);
}
.trustLeft h2{margin:10px 0 10px 0; font-size:34px; line-height:1.12}
.trustLeft p{margin:0 0 14px 0; color:rgba(10,42,74,.74)}
.trustBadges{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
@media (max-width:520px){.trustBadges{grid-template-columns:1fr}}
.trustBadge{
  border:1px solid rgba(10,42,74,.10);
  border-radius:18px;
  padding:12px 12px;
  background:linear-gradient(180deg,#fff,#f7fbff);
}
.trustBadge strong{display:block}
.trustBadge span{color:rgba(10,42,74,.7); font-size:13px}

.trustRight{
  border-radius:24px;
  padding:26px 22px;
  background:linear-gradient(180deg, #0b1220, #0a2a4a);
  color:#fff;
  box-shadow:0 26px 70px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
}
.trustRight h3{margin:0 0 14px 0}
.statsGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.statBox{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px 14px;
}
.statBox strong{display:block; font-size:26px; line-height:1}
.statBox span{display:block; color:rgba(255,255,255,.78); margin-top:6px; font-size:13px}



/* ====== NAV: remove white focus rectangle (keep underline) ====== */
.nav a:focus,
.nav a:focus-visible,
.navDrop__summary:focus,
.navDrop__summary:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* ====== GLOBAL: slightly less rounded borders ====== */
:root{
  --radius:14px;
}
/* tighten large radius components */
.card,
.svcCard,
.trustLeft,
.trustRight,
.cta__inner,
.workCard,
.section.container,
.page--service section.section.container,
.nav__cta{
  border-radius:16px !important;
}
.btn,
.btnPrimary,
.btnSecondary{
  border-radius:12px !important;
}
.badge,
.carouselBtn{
  border-radius:12px !important;
}



/* ====== NAV: remove focus rectangle for dropdown items too ====== */
.navDrop__menu a:focus,
.navDrop__menu a:focus-visible,
.nav__cta:focus,
.nav__cta:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
}



/* ====== SIMULATEUR: app-like UI ====== */
.appHero{
  padding:54px 0 18px;
  background:linear-gradient(180deg, rgba(30,111,217,.10), rgba(246,249,255,.0));
}
.appHero__inner{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.appHero h1{margin:0 0 8px 0}
.appHero__chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(30,111,217,.12);border:1px solid rgba(30,111,217,.18);font-weight:800}
.chip--soft{background:rgba(255,255,255,.70);border-color:rgba(10,42,74,.10);font-weight:700}

.appShell{padding:26px 0 70px;background:linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%)}
.appShell__grid{display:grid;grid-template-columns:320px 1fr 360px;gap:18px;align-items:start}
@media (max-width:1100px){.appShell__grid{grid-template-columns:1fr}}
.appSide,.appPreview{position:sticky;top:18px}
@media (max-width:1100px){.appSide,.appPreview{position:static}}

.appSide{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  padding:18px 16px;
}
.appSide__top h2{margin:0 0 12px 0}
.stepper{display:flex;flex-direction:column;gap:10px}
.step{display:flex;gap:10px;align-items:center;border:1px solid rgba(10,42,74,.10);border-radius:14px;padding:10px 10px;background:linear-gradient(180deg,#fff,#f7fbff)}
.step span{width:28px;height:28px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(30,111,217,.12);border:1px solid rgba(30,111,217,.20);font-weight:900}
.step small{display:block;color:rgba(10,42,74,.65)}
.step.is-active{border-color:rgba(30,111,217,.32);box-shadow:0 12px 30px rgba(30,111,217,.10)}
.appSide__hint{margin-top:14px;border-top:1px solid rgba(10,42,74,.08);padding-top:14px}

.appMain .appCard{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  padding:18px 16px;
}
.appCard__head h2{margin:0 0 6px 0}
.previewCard{
  background:linear-gradient(180deg,#0b1220,#0a2a4a);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 26px 70px rgba(0,0,0,.22);
  padding:16px;
  color:#fff;
}
.previewCard__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.previewBox{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
  min-height:240px;
  white-space:pre-wrap;
  margin:0;
}
.previewActions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.previewNote{
  margin-top:12px;
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  padding:14px 14px;
}



/* ====== CONTACT: pro split layout ====== */
.contactShell{
  padding:26px 0 70px;
  background:linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
}
.contactGrid2{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:18px;
  align-items:start;
}
@media (max-width:980px){.contactGrid2{grid-template-columns:1fr}}

.contactInfoCard,
.contactFormCard{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  padding:18px 16px;
}

.infoBadges{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
@media (max-width:520px){.infoBadges{grid-template-columns:1fr}}

.infoBadge{
  display:flex;
  gap:10px;
  align-items:flex-start;
  border:1px solid rgba(10,42,74,.10);
  background:linear-gradient(180deg,#fff,#f7fbff);
  border-radius:14px;
  padding:12px 12px;
}
.infoBadge__icon{
  width:34px;height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(30,111,217,.12);
  border:1px solid rgba(30,111,217,.20);
  font-weight:900;
}
.infoBadge strong{display:block}
.infoBadge span{display:block;color:rgba(10,42,74,.72);font-size:13px;margin-top:3px}

.noticeGreen{
  margin-top:14px;
  border-radius:14px;
  padding:12px 12px;
  border:1px solid rgba(34,197,94,.22);
  background:rgba(34,197,94,.10);
}
.noticeGreen strong{display:block}
.noticeGreen p{margin:6px 0 0 0; color:rgba(10,42,74,.75)}



/* ====== CONTACT FORM IMPROVED ====== */
.contactFormCard .formGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media (max-width:720px){
  .contactFormCard .formGrid{
    grid-template-columns:1fr;
  }
}

.contactFormCard .field input,
.contactFormCard .field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(10,42,74,.14);
  font-size:15px;
}

.contactFormCard .field textarea{
  min-height:200px;
  resize:vertical;
}

.contactFormCard .field--full{
  grid-column:1 / -1;
}

.contactFormCard .btnRow{
  margin-top:14px;
}



/* ====== SIMULATEUR V2: real software look ====== */
.simApp{
  min-height:calc(100vh - 120px);
  padding:18px 0 70px;
  background:linear-gradient(180deg,#f6f9ff 0%, #ffffff 100%);
}
.simShell{
  display:grid;
  grid-template-columns:260px 1fr 360px;
  gap:16px;
  align-items:start;
}
@media (max-width:1100px){
  .simShell{grid-template-columns:1fr}
}

.simNav{
  position:sticky;
  top:14px;
  background:linear-gradient(180deg,#0b1220,#0a2a4a);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow:0 26px 70px rgba(0,0,0,.18);
  padding:14px;
  color:#fff;
}
.simBrand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 6px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.simBrand img{width:36px;height:36px;object-fit:contain;border-radius:10px;background:#fff;padding:4px}
.simBrand strong{display:block;line-height:1}
.simBrand span{display:block;font-size:12px;color:rgba(255,255,255,.72);margin-top:2px}

.simSteps{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.simStepBtn{
  width:100%;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
  text-align:left;
}
.simStepBtn:hover{background:rgba(255,255,255,.09)}
.simStepBtn.is-active{border-color:rgba(30,111,217,.55);background:rgba(30,111,217,.18)}
.simStepBtn .num{
  width:28px;height:28px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  font-weight:900;
}
.simStepBtn.is-active .num{background:rgba(30,111,217,.35);border-color:rgba(30,111,217,.55)}
.simStepBtn small{display:block;color:rgba(255,255,255,.70);margin-top:2px}

.simMain{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  overflow:hidden;
}
.simTopbar{
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(10,42,74,.08);
  background:linear-gradient(180deg,#ffffff,#f7fbff);
}
.simTopbar h1{font-size:20px;margin:0}
.simTopbar .muted{margin:2px 0 0 0}

.simContent{padding:16px}
.simPanel{display:none}
.simPanel.is-active{display:block;animation:fadeUp .18s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.simGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:720px){.simGrid{grid-template-columns:1fr}}

.simField label{display:block;font-weight:800;margin-bottom:6px}
.simField input,.simField select,.simField textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(10,42,74,.14);
  font-size:15px;
}
.simField textarea{min-height:160px;resize:vertical}
.simHint{margin-top:8px;color:rgba(10,42,74,.68);font-size:13px}

.simActions{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(10,42,74,.08);
}

.simSide{
  position:sticky;
  top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media (max-width:1100px){.simSide{position:static}}

.estCard{
  background:linear-gradient(180deg,#0b1220,#0a2a4a);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 26px 70px rgba(0,0,0,.18);
  padding:14px;
  color:#fff;
}
.estHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.estHead h3{margin:0}
.kpiRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
}
.kpi strong{display:block;font-size:22px;line-height:1}
.kpi span{display:block;color:rgba(255,255,255,.75);font-size:12px;margin-top:6px}

.msgCard{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  padding:14px;
}
.msgCard h3{margin:0 0 10px 0}
.msgBox{
  border:1px solid rgba(10,42,74,.12);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg,#fff,#f7fbff);
  min-height:200px;
  white-space:pre-wrap;
  margin:0;
}
.statusPill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.22);
  color:rgba(10,42,74,.78);
  font-weight:800;
  font-size:12px;
}



/* ====== SIMULATEUR V3: single window panel ====== */
.simApp{
  padding:18px 0 70px;
  background:linear-gradient(180deg,#f6f9ff 0%, #ffffff 100%);
}
.appWindow{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(10,42,74,.12);
  box-shadow:0 26px 70px rgba(10,42,74,.16);
  background:#fff;
}
.appWindow__bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border-bottom:1px solid rgba(10,42,74,.08);
}
.winDots{display:flex;gap:8px;align-items:center}
.winDot{width:10px;height:10px;border-radius:999px;background:rgba(10,42,74,.18)}
.winTitle{display:flex;flex-direction:column;gap:2px}
.winTitle strong{line-height:1}
.winTitle span{font-size:12px;color:rgba(10,42,74,.65)}
.appWindow__body{
  display:grid;
  grid-template-columns:260px 1fr 360px;
  min-height:620px;
}
@media (max-width:1100px){
  .appWindow__body{grid-template-columns:1fr}
}
.appWindow__side{
  background:linear-gradient(180deg,#0b1220,#0a2a4a);
  color:#fff;
  padding:14px;
  border-right:1px solid rgba(255,255,255,.10);
}
@media (max-width:1100px){
  .appWindow__side{border-right:0;border-bottom:1px solid rgba(255,255,255,.10)}
}
.appWindow__main{
  padding:16px;
  background:#fff;
}
.appWindow__right{
  padding:14px;
  background:#f7fbff;
  border-left:1px solid rgba(10,42,74,.08);
}
@media (max-width:1100px){
  .appWindow__right{border-left:0;border-top:1px solid rgba(10,42,74,.08)}
}

/* make inner cards flatter inside window */
.simNav{position:static !important; border-radius:14px}
.simMain{border-radius:14px}
.simSide{position:static !important}
.estCard{border-radius:14px}
.msgCard{border-radius:14px}



/* ====== SIMULATEUR V3 POLISH ====== */
.appWindow{
  border-color: rgba(10,42,74,.14) !important;
  box-shadow: 0 34px 90px rgba(10,42,74,.18) !important;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(30,111,217,.16), rgba(255,255,255,0) 60%),
    #ffffff;
}

.appWindow__bar{
  background:
    radial-gradient(900px 300px at 20% -10%, rgba(30,111,217,.18), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#ffffff,#f7fbff);
  padding: 12px 16px !important;
}

.winDot:nth-child(1){background:rgba(239,68,68,.65)}
.winDot:nth-child(2){background:rgba(245,158,11,.70)}
.winDot:nth-child(3){background:rgba(34,197,94,.70)}

.appWindow__body{
  min-height: 660px !important;
}

.appWindow__side{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(30,111,217,.28), rgba(11,18,32,0) 60%),
    linear-gradient(180deg,#0b1220,#0a2a4a);
  padding: 16px !important;
}

.simBrand{
  padding: 8px 8px 14px !important;
}
.simBrand img{
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.simBrand strong{font-size:14px}
.simBrand span{font-size:12px}

.simStepBtn{
  border-radius: 14px !important;
  padding: 11px 12px !important;
}
.simStepBtn .num{
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
}
.simStepBtn.is-active{
  box-shadow: 0 16px 40px rgba(30,111,217,.18);
}

.appWindow__main{
  padding: 18px 18px 22px !important;
}
.simField input, .simField select, .simField textarea{
  background: linear-gradient(180deg,#ffffff,#f8fbff);
}
.simField input:focus, .simField select:focus, .simField textarea:focus{
  outline: 3px solid rgba(30,111,217,.20);
  border-color: rgba(30,111,217,.40);
}

.simActions{
  gap: 12px !important;
}

.appWindow__right{
  background:
    radial-gradient(900px 420px at 80% 0%, rgba(30,111,217,.10), rgba(247,251,255,0) 60%),
    #f7fbff;
  padding: 16px !important;
}

.estCard{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(30,111,217,.22), rgba(11,18,32,0) 60%),
    linear-gradient(180deg,#0b1220,#0a2a4a);
}
.kpi{
  backdrop-filter: blur(6px);
}
.msgCard{
  background: #ffffff;
}
.msgBox{
  min-height: 230px !important;
}

/* Better scrollbars (desktop) */
.worksGrid--featured::-webkit-scrollbar,
.worksGrid::-webkit-scrollbar,
.appWindow__right::-webkit-scrollbar,
.appWindow__main::-webkit-scrollbar{
  height: 10px;
  width: 10px;
}
.worksGrid--featured::-webkit-scrollbar-thumb,
.worksGrid::-webkit-scrollbar-thumb,
.appWindow__right::-webkit-scrollbar-thumb,
.appWindow__main::-webkit-scrollbar-thumb{
  background: rgba(10,42,74,.18);
  border-radius: 999px;
}



/* Buttons polish */
.btn--primary{
  box-shadow: 0 14px 28px rgba(30,111,217,.24);
}
.btn--primary:hover{
  box-shadow: 0 18px 36px rgba(30,111,217,.30);
}
.btn--outline{
  box-shadow: 0 10px 22px rgba(10,42,74,.06);
}



/* simulateur disabled action buttons */
a.isDisabled{
  opacity:.55;
  pointer-events:auto;
}
a.isDisabled:hover{transform:none}



/* msg actions */
.msgActions a.isDisabled{opacity:.55}
.msgActions button{min-height:44px}



/* ====== REALISATIONS BD: premium filters + modal + slider ====== */
.reaHero{
  padding:54px 0 16px;
  background:
    radial-gradient(1200px 420px at 15% -10%, rgba(30,111,217,.16), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#f6f9ff 0%, #ffffff 100%);
}
.reaHero__inner{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
@media (max-width:900px){.reaHero__inner{flex-direction:column;align-items:flex-start}}
.reaHero h1{margin:0 0 10px 0}
.reaHero .muted{margin:0}
.reaKpis{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:900px){.reaKpis{justify-content:flex-start}}
.reaKpi{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(10,42,74,.08);
  padding:10px 12px;
  min-width:140px;
}
.reaKpi strong{display:block;font-size:18px;line-height:1}
.reaKpi span{display:block;color:rgba(10,42,74,.65);font-size:12px;margin-top:6px}

.reaShell{padding:18px 0 70px;background:linear-gradient(180deg,#ffffff 0%, #ffffff 100%)}
.reaTopBar{
  display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  margin-bottom:14px;
}
.reaFilters{
  display:flex;gap:10px;flex-wrap:wrap;
}
.reaFilter{
  border:1px solid rgba(10,42,74,.12);
  background:linear-gradient(180deg,#fff,#f7fbff);
  color:rgba(10,42,74,.88);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.reaFilter:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(10,42,74,.10)}
.reaFilter.is-active{
  border-color:rgba(30,111,217,.45);
  box-shadow:0 18px 40px rgba(30,111,217,.18);
  background:linear-gradient(180deg, rgba(30,111,217,.12), rgba(255,255,255,1));
}
.reaSearch{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.reaSearch input{
  width:min(360px, 92vw);
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(10,42,74,.14);
  background:linear-gradient(180deg,#fff,#f7fbff);
}
.reaSearch input:focus{outline:3px solid rgba(30,111,217,.20);border-color:rgba(30,111,217,.40)}

.reaGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
@media (max-width:980px){.reaGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.reaGrid{grid-template-columns:1fr}}
.reaCard{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  overflow:hidden;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.reaCard:hover{
  transform:translateY(-3px);
  box-shadow:0 28px 70px rgba(10,42,74,.18);
  border-color:rgba(30,111,217,.22);
}
.reaMedia{position:relative;aspect-ratio:16/10;overflow:hidden}
.reaMedia img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .25s ease}
.reaCard:hover .reaMedia img{transform:scale(1.08)}
.reaOverlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
  opacity:.95;
}
.reaBadge{
  position:absolute;top:12px;left:12px;
  padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,42,74,.10);
  font-weight:900;font-size:12px;
}
.reaMeta{
  position:absolute;left:12px;right:12px;bottom:12px;
  color:#fff;
}
.reaMeta strong{display:block;font-size:16px}
.reaMeta span{display:block;color:rgba(255,255,255,.80);font-size:12px;margin-top:4px}
.reaBody{padding:12px 12px 14px}
.reaBody p{margin:0;color:rgba(10,42,74,.72)}
.reaBody .reaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.reaTag{
  padding:6px 10px;border-radius:999px;
  background:rgba(30,111,217,.10);
  border:1px solid rgba(30,111,217,.18);
  font-weight:900;font-size:12px;
}

/* modal */
.reaModal{
  position:fixed;inset:0;
  background:rgba(10,42,74,.60);
  display:none;
  align-items:center;justify-content:center;
  padding:18px;
  z-index:9999;
}
.reaModal.is-open{display:flex}
.reaModal__panel{
  width:min(1080px, 96vw);
  max-height:min(92vh, 980px);
  overflow:auto;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(10,42,74,.14);
  box-shadow:0 34px 90px rgba(0,0,0,.28);
}
.reaModal__bar{
  position:sticky;top:0;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border-bottom:1px solid rgba(10,42,74,.08);
  z-index:2;
}
.reaModal__bar strong{font-size:14px}
.reaClose{
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(10,42,74,.14);
  background:#fff;cursor:pointer;font-weight:900;
}
.reaModal__content{padding:14px}
.reaModal__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}
@media (max-width:980px){.reaModal__grid{grid-template-columns:1fr}}
.reaInfoCard{
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  padding:14px;
}
.reaInfoCard h3{margin:0 0 8px 0}
.reaInfoList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
@media (max-width:520px){.reaInfoList{grid-template-columns:1fr}}
.reaInfoItem{
  border:1px solid rgba(10,42,74,.10);
  border-radius:14px;
  padding:10px;
  background:#fff;
}
.reaInfoItem strong{display:block}
.reaInfoItem span{display:block;color:rgba(10,42,74,.65);font-size:12px;margin-top:4px}

/* before/after slider */
.baWrap{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(10,42,74,.10);
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  background:#000;
}
.ba{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
}
.ba img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.ba .after{clip-path:inset(0 0 0 50%)}
.baHandle{
  position:absolute;top:0;bottom:0;left:50%;
  width:2px;background:rgba(255,255,255,.85);
}
.baKnob{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,42,74,.18);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.baRange{
  width:100%;
  margin:10px 0 0 0;
}
.reaCtaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* fade filter animation */
.reaCard{opacity:1}
.reaCard.is-hidden{opacity:0;transform:scale(.98);pointer-events:none;height:0;margin:0;padding:0;border:0;overflow:hidden}



/* ====== SERVICES V2 (A): unified premium layout ====== */
.svcHero{
  padding:54px 0 18px;
  background:
    radial-gradient(1200px 420px at 15% -10%, rgba(30,111,217,.16), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#f6f9ff 0%, #ffffff 100%);
}
.svcHero__inner{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
@media (max-width:900px){.svcHero__inner{flex-direction:column;align-items:flex-start}}
.svcHero h1{margin:0 0 10px 0}
.svcHero .muted{margin:0}

.svcShell{padding:18px 0 70px;background:linear-gradient(180deg,#ffffff 0%, #ffffff 100%)}

.svcGrid2{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  align-items:start;
}
@media (max-width:980px){.svcGrid2{grid-template-columns:1fr}}

.svcCard2{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  padding:18px 16px;
}

.svcList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width:520px){.svcList{grid-template-columns:1fr}}
.svcItem{
  border:1px solid rgba(10,42,74,.10);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg,#fff,#f7fbff);
  display:flex;
  gap:10px;
}
.svcItem__icon{
  width:34px;height:34px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(30,111,217,.12);
  border:1px solid rgba(30,111,217,.20);
  font-weight:900;
}
.svcItem strong{display:block}
.svcItem span{display:block;color:rgba(10,42,74,.68);font-size:13px;margin-top:3px}

.svcSteps{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
@media (max-width:980px){.svcSteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.svcSteps{grid-template-columns:1fr}}
.svcStep{
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  padding:14px;
  background:#fff;
  box-shadow:0 14px 28px rgba(10,42,74,.07);
}
.svcStep .num{
  width:30px;height:30px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(30,111,217,.12);
  border:1px solid rgba(30,111,217,.20);
  font-weight:900;
}
.svcStep strong{display:block;margin-top:10px}
.svcStep span{display:block;color:rgba(10,42,74,.68);font-size:13px;margin-top:4px}

.svcProjectCta{
  margin-top:16px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(10,42,74,.10);
  box-shadow:0 26px 70px rgba(10,42,74,.14);
  background:
    radial-gradient(1200px 420px at 15% -10%, rgba(30,111,217,.18), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#0b1220,#0a2a4a);
  color:#fff;
}
.svcProjectCta__inner{
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
@media (max-width:900px){.svcProjectCta__inner{flex-direction:column;align-items:flex-start}}
.svcProjectCta h3{margin:0 0 6px 0;color:#fff}
.svcProjectCta p{margin:0;color:rgba(255,255,255,.78)}



/* ====== SERVICES V3: REAL premium (with images & section contrast) ====== */
.page--service{
  background:linear-gradient(180deg,#f6f9ff 0%, #ffffff 42%);
}
.svcHero3{
  position:relative;
  padding:70px 0 28px;
  border-bottom:1px solid rgba(10,42,74,.08);
  overflow:hidden;
}
.svcHero3__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.04) contrast(1.02);
  transform:scale(1.03);
}
.svcHero3__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 420px at 15% 0%, rgba(30,111,217,.34), rgba(255,255,255,0) 62%),
    linear-gradient(90deg, rgba(11,18,32,.82) 0%, rgba(11,18,32,.52) 44%, rgba(11,18,32,.18) 100%);
}
.svcHero3__inner{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:end;
}
@media (max-width:980px){.svcHero3__inner{grid-template-columns:1fr}}
.svcHero3 h1{margin:0 0 10px 0;color:#fff}
.svcHero3 .muted{margin:0;color:rgba(255,255,255,.78)}
.svcHero3 .reaCtaRow{margin-top:14px}
.svcHero3 .reaKpis .reaKpi{background:rgba(255,255,255,.92)}
.svcHero3 .breadcrumb{
  color:rgba(255,255,255,.75);
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  margin-bottom:10px;
}
.svcHero3 .breadcrumb a{color:rgba(255,255,255,.85);text-decoration:none}
.svcHero3 .breadcrumb a:hover{text-decoration:underline}

.svcSection{
  padding:18px 0;
}
.svcSection--alt{
  padding:18px 0;
  background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  border-top:1px solid rgba(10,42,74,.06);
  border-bottom:1px solid rgba(10,42,74,.06);
}

.svcSplit{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
  align-items:start;
}
@media (max-width:980px){.svcSplit{grid-template-columns:1fr}}
.svcPanel{
  background:#fff;
  border:1px solid rgba(10,42,74,.10);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  padding:18px 16px;
}
.svcVisual{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(10,42,74,.10);
  box-shadow:0 26px 70px rgba(10,42,74,.14);
  background:#000;
  min-height:320px;
  position:relative;
}
.svcVisual img{width:100%;height:100%;object-fit:cover;opacity:.92}
.svcVisual__label{
  position:absolute; left:14px; bottom:14px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(10,42,74,.12);
  font-weight:900;
  font-size:12px;
}

.svcCaps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width:980px){.svcCaps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.svcCaps{grid-template-columns:1fr}}
.svcCap{
  border:1px solid rgba(10,42,74,.10);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg,#fff,#f7fbff);
}
.svcCap strong{display:block}
.svcCap span{display:block;color:rgba(10,42,74,.68);font-size:13px;margin-top:6px}

.svcTeaserGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width:980px){.svcTeaserGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svcTeaserGrid{grid-template-columns:1fr}}
.svcWork{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(10,42,74,.10);
  box-shadow:0 18px 44px rgba(10,42,74,.10);
  background:#fff;
}
.svcWork .media{aspect-ratio:16/10;overflow:hidden;position:relative}
.svcWork .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .25s ease}
.svcWork:hover .media img{transform:scale(1.08)}
.svcWork .body{padding:12px 12px 14px}
.svcWork .body strong{display:block}
.svcWork .body span{display:block;color:rgba(10,42,74,.68);font-size:13px;margin-top:6px}

.svcProjectCta2{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(10,42,74,.10);
  box-shadow:0 26px 70px rgba(10,42,74,.14);
  background:
    radial-gradient(1200px 420px at 15% -10%, rgba(30,111,217,.18), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#0b1220,#0a2a4a);
  color:#fff;
}
.svcProjectCta2__inner{
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
@media (max-width:900px){.svcProjectCta2__inner{flex-direction:column;align-items:flex-start}}
.svcProjectCta2 h3{margin:0 0 6px 0;color:#fff}
.svcProjectCta2 p{margin:0;color:rgba(255,255,255,.78)}



/* ====== REALISATIONS: filter badge + arrival animation ====== */
.filterPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(30,111,217,.28);
  background:rgba(30,111,217,.10);
  font-weight:900;
  color:rgba(10,42,74,.86);
  box-shadow:0 14px 28px rgba(30,111,217,.10);
}
.filterPill .dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(30,111,217,.90);
}
.reaGrid.is-focus{
  animation:reaPulse .6s ease;
}
@keyframes reaPulse{
  0%{transform:translateY(0)}
  35%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}



/* ===== HOME KPI STYLE UPDATE ===== */
.homeKpis .homeKpi{
  border: none !important;
  background: rgba(30,111,217,0.12) !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(30,111,217,0.08);
}

.homeKpis .homeKpi strong{
  color: #0a2a4a;
}

.homeKpis .homeKpi span{
  color: rgba(10,42,74,0.75);
}



/* ===== HOME STATS: glass + bigger + premium ===== */
.stats{
  gap: 12px !important;
}
.stats .stat{
  border: 1px solid rgba(30,111,217,0.22) !important;
  background: rgba(30,111,217,0.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(10,42,74,0.10);
  border-radius: 16px !important;
  padding: 14px 16px !important;
  min-height: 64px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.stats .stat:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(10,42,74,0.14);
  border-color: rgba(30,111,217,0.34) !important;
}
.stats .stat__n{
  font-size: 22px !important;
  font-weight: 1000 !important;
  letter-spacing: .2px;
  color: #0a2a4a;
}
.stats .stat__t{
  color: rgba(10,42,74,0.72) !important;
  font-weight: 800;
}

/* nicer spacing under hero */
.band--white{ padding-top: 22px !important; padding-bottom: 22px !important; }



/* ===== HOME STATS: aligned grid + no overlap with banner + icons + reveal ===== */
.band--white{
  margin-top: 18px;
}
@media (max-width:980px){
  .band--white{ margin-top: 10px; }
}

/* force aligned grid */
.stats{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px !important;
  align-items: stretch;
}
@media (max-width:980px){
  .stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:620px){
  .stats{ grid-template-columns: 1fr; }
}

/* card layout */
.stats .stat{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap: 6px;
  min-height: 78px;
}
.stats .stat__i{
  width:34px;height:34px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(30,111,217,0.22);
  box-shadow: 0 10px 22px rgba(10,42,74,0.08);
  font-weight: 900;
  line-height:1;
}
.stats .stat__n{ margin-top: 2px; }

/* reveal cascade */
.stats .stat.reveal{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.stats .stat.reveal.is-visible{ opacity:1; transform: translateY(0); }
.stats .stat.reveal.is-visible:nth-child(1){ transition-delay: .00s; }
.stats .stat.reveal.is-visible:nth-child(2){ transition-delay: .06s; }
.stats .stat.reveal.is-visible:nth-child(3){ transition-delay: .12s; }
.stats .stat.reveal.is-visible:nth-child(4){ transition-delay: .18s; }



/* ===== PREMIUM ZONES BLOCK (D+B) ===== */
.zonesPremium{
  padding: 70px 0;
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(30,111,217,.18), transparent 60%),
    linear-gradient(180deg,#0b1220 0%, #0a2a4a 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.zonesPremium h2{
  color:#fff;
  margin-bottom:10px;
}

.zonesPremium .muted{
  color:rgba(255,255,255,.75);
}

.zonesGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:30px;
  margin-top:40px;
  align-items:center;
}

@media (max-width:980px){
  .zonesGrid{grid-template-columns:1fr;}
}

.zonesMap{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:30px;
  backdrop-filter: blur(10px);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
  text-align:center;
  font-weight:900;
  font-size:22px;
}

.zonesCards{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.zoneCard{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:20px;
  backdrop-filter: blur(8px);
  transition:all .25s ease;
}

.zoneCard:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.12);
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.zoneCard strong{
  display:block;
  font-size:18px;
  margin-bottom:6px;
}

.zoneCard span{
  color:rgba(255,255,255,.75);
  font-size:14px;
}

.zoneCard .btn{
  margin-top:12px;
}



/* ===== 3D Globe Zones (premium) ===== */
.zonesGrid--globe{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  margin-top: 38px;
  align-items: center;
}
@media (max-width:980px){
  .zonesGrid--globe{ grid-template-columns: 1fr; }
}
.globeCard{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  overflow:hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
  position: relative;
  min-height: 360px;
}
#globeViz{
  width:100%;
  height: 420px;
}
@media (max-width:980px){
  #globeViz{ height: 360px; }
}
.globeHint{
  position:absolute;
  left:14px; top:14px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(10,42,74,.12);
  color: rgba(10,42,74,.86);
  font-weight: 900;
  font-size: 12px;
  z-index:2;
}
.globeFallback{
  padding:18px;
  color: rgba(255,255,255,.85);
}
.zoneInfo{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 18px;
  backdrop-filter: blur(8px);
}
.zoneInfoHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.zoneInfoTitle{
  font-weight: 1000;
  font-size: 18px;
}
.zoneInfoBadge{
  padding:6px 10px;
  border-radius:999px;
  background: rgba(30,111,217,.18);
  border: 1px solid rgba(30,111,217,.28);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
}
.zoneInfoText{
  color: rgba(255,255,255,.78);
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.5;
}
.zoneInfoList{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 0 0;
}
@media (max-width:520px){
  .zoneInfoList{ grid-template-columns:1fr; }
}
.zoneInfoItem{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
}
.zoneInfoItem strong{ display:block; color:#fff; }
.zoneInfoItem span{ display:block; color: rgba(255,255,255,.75); font-size: 12px; margin-top: 4px;}
.zonePills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.zonePillBtn{
  cursor:pointer;
  border-radius:999px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.zonePillBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); box-shadow: 0 18px 44px rgba(0,0,0,.25); }
.zonePillBtn.is-active{ border-color: rgba(30,111,217,.45); background: rgba(30,111,217,.16); }



/* ===== Globe Section White Background ===== */
.zonesPremium{
  background: #ffffff !important;
  color:#0a2a4a !important;
}

.zonesPremium h2{
  color:#0a2a4a !important;
}

.zonesPremium .muted{
  color: rgba(10,42,74,.65) !important;
}

.globeCard{
  background: #f5f9ff !important;
  border:1px solid rgba(10,42,74,.08) !important;
  box-shadow: 0 25px 60px rgba(10,42,74,.08) !important;
}

.zoneInfo{
  background:#f8fbff !important;
  border:1px solid rgba(10,42,74,.08) !important;
}

.zoneInfoTitle{
  color:#0a2a4a !important;
}

.zoneInfoText{
  color: rgba(10,42,74,.75) !important;
}

.zoneInfoItem{
  background:#ffffff !important;
  border:1px solid rgba(10,42,74,.06) !important;
}

.zoneInfoItem strong{
  color:#0a2a4a !important;
}

.zoneInfoItem span{
  color: rgba(10,42,74,.70) !important;
}

.globeFallback{
  color: rgba(10,42,74,.75) !important;
}

.zonePillBtn{
  background:#1e6fd9 !important;
  color:#ffffff !important;
  border:1px solid rgba(30,111,217,.55) !important;
}

.zonePillBtn:hover{
  background:#2b7be3 !important;
  border-color: rgba(30,111,217,.70) !important;
  box-shadow: 0 18px 44px rgba(30,111,217,.18) !important;
}

.zonePillBtn.is-active{
  background:#1557b3 !important;
  border-color:rgba(21,87,179,.85) !important;
}

/* =========================
   Footer (site)
   ========================= */
.siteFooter{margin-top:48px;background:linear-gradient(180deg, #081a33 0%, #061326 100%);color:#fff}
.siteFooter a{color:#fff;text-decoration:none}
.siteFooter a:hover{opacity:.9;text-decoration:underline}
.siteFooter__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:22px;padding:40px 0}
.siteFooter__logo{display:flex;align-items:center;gap:10px;font-size:1.05rem}
.siteFooter__logo .dot{width:12px;height:12px;border-radius:99px;background:var(--blue);box-shadow:0 0 0 6px rgba(30,111,217,.22)}
.siteFooter__brand .muted{color:rgba(255,255,255,.74)}
.siteFooter__contact{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.siteFooter__col h3{margin:4px 0 12px;font-size:1rem}
.siteFooter__col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.siteFooter__badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.siteFooter__badges span{font-size:.88rem;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.siteFooter__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.siteFooter__bottom{border-top:1px solid rgba(255,255,255,.12)}
.siteFooter__bottomInner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;color:rgba(255,255,255,.82)}
.siteFooter__legal{display:flex;gap:14px;flex-wrap:wrap}

@media (max-width: 920px){
  .siteFooter__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 520px){
  .siteFooter__grid{grid-template-columns:1fr;}
  .siteFooter__bottomInner{flex-direction:column;align-items:flex-start}
}
.siteFooter .btn--outline{border-color:rgba(255,255,255,.35);color:#fff}
.siteFooter .btn--outline:hover{background:rgba(255,255,255,.10)}


/* --- Blue footer variant (used on service pages) --- */
.siteFooter--blue{background:#1f73d8}
.siteFooter--blue .siteFooter__grid{padding:52px 0 46px}
.siteFooter--blue .siteFooter__logo .dot{background:rgba(255,255,255,.95);box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.siteFooter--blue .muted{color:rgba(255,255,255,.82)}
.siteFooter--blue a{color:#fff}
.siteFooter--blue a:hover{opacity:.95}
.siteFooter__grid--simple{grid-template-columns:1.4fr 1fr 1fr 1fr}
.siteFooter__info{margin-top:16px;display:grid;gap:10px;max-width:360px}
.siteFooter__info .label{display:inline-block;min-width:110px;font-weight:700;opacity:.95}
.siteFooter__info .value{font-weight:600;opacity:.95}
.siteFooter__bottom{background:linear-gradient(180deg, #081a33 0%, #061326 100%);border-top:1px solid rgba(255,255,255,.16)}
.siteFooter__bottomInner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;color:#fff}
@media (max-width: 900px){
  .siteFooter__grid--simple{grid-template-columns:1fr 1fr}
  .siteFooter__bottomInner{flex-direction:column;align-items:flex-start}
}
@media (max-width: 560px){
  .siteFooter__grid--simple{grid-template-columns:1fr}
}


/* ==== Services polish (v2) ==== */
.page--service .svcSection{ padding:28px 0; }
.page--service .svcSection--alt{ padding:28px 0; }
.page--service .sectionHead{ margin-bottom:16px; }
.page--service .sectionHead h2{ font-size:28px; letter-spacing:-.3px; }
@media (max-width: 560px){ .page--service .sectionHead h2{ font-size:24px; } }

.page--service .svcItem{
  border:1px solid rgba(10,42,74,.10);
  background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  border-radius:16px;
  padding:12px 12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.page--service .svcItem:hover{ transform:translateY(-2px); box-shadow:0 16px 44px rgba(10,42,74,.10); }
.page--service .svcItem__icon{
  background:radial-gradient(circle at 30% 30%, rgba(47,125,255,.30), rgba(47,125,255,.12));
  border:1px solid rgba(47,125,255,.25);
}

.page--service .svcZoneTags span{
  background:rgba(47,125,255,.10);
  border:1px solid rgba(47,125,255,.18);
}


/* Simulateur: toast success */
.toastOk{position:fixed;top:18px;right:18px;z-index:9999;background:#0b1220;color:#fff;padding:12px 14px;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.25);opacity:0;transform:translateY(-10px);transition:all .25s ease;font-weight:600}
.toastOk.show{opacity:1;transform:translateY(0)}


/* ==== Service pages: FAQ CTA without background/card ==== */
.page--service .faqCta{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:6px 0 0 !important;
  border-radius:0 !important;
}
.page--service .faqCta .muted{color:rgba(15,23,42,.72);}
@media (max-width:720px){
  .page--service .faqCta{padding-top:8px !important;}
}


/* === Header logo visible (SMD) === */
.siteHeader .brand--logoVisible{
  margin-left:8px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.35);
  border-radius:16px;
  padding:4px 10px;
  box-shadow:0 8px 22px rgba(2,6,23,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.siteHeader .brand--logoVisible img{
  display:block;
  height:62px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
@media (max-width:980px){
  .siteHeader .brand--logoVisible{margin-left:0;padding:3px 8px;border-radius:14px}
  .siteHeader .brand--logoVisible img{height:46px}
  .header__inner{gap:10px}
}
@media (max-width:520px){
  .siteHeader .brand--logoVisible img{height:40px}
}

/* === Header white + text blue (user update) === */
.siteHeader{
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(10,42,74,.08) !important;
  backdrop-filter: blur(8px);
  box-shadow:0 8px 24px rgba(10,42,74,.08);
}
.siteHeader.scrolled{
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid rgba(10,42,74,.10) !important;
}
.siteHeader .brand,
.siteHeader .brand:link,
.siteHeader .brand:visited{color:var(--blue2) !important;}
.siteHeader .brand img{
  height:72px !important;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 2px 8px rgba(30,111,217,.15));
}
.siteHeader .header__inner{padding:10px 0 !important; min-height:86px;}
.siteHeader .nav a,
.siteHeader .navDrop__summary{color:var(--blue) !important;}
.siteHeader .nav a:hover,
.siteHeader .navDrop__summary:hover,
.siteHeader .navDrop[open] .navDrop__summary{
  background:rgba(30,111,217,.08) !important;
}
.siteHeader .nav__cta{
  background:var(--blue) !important;
  color:#fff !important;
  border:1px solid rgba(30,111,217,.15);
}
.siteHeader .navDrop__menu{
  background:#fff !important;
  border:1px solid rgba(30,111,217,.14) !important;
  box-shadow:0 16px 34px rgba(10,42,74,.12);
}
.siteHeader .navDrop__menu a{color:var(--blue2) !important;}
.siteHeader .navDrop__menu a:hover{background:rgba(30,111,217,.08) !important;}
.siteHeader .burger{border:1px solid rgba(30,111,217,.20) !important; background:#fff;}
.siteHeader .burger span{background:var(--blue) !important;}
@media (max-width:980px){
  .siteHeader .nav{background:#fff !important; border-top:1px solid rgba(30,111,217,.12) !important; box-shadow:0 14px 28px rgba(10,42,74,.10);}
  .siteHeader .nav a{color:var(--blue2) !important;}
  .siteHeader .navDrop__menu{background:rgba(30,111,217,.04) !important;}
}
@media (max-width:720px){
  .siteHeader .brand img{height:64px !important;}
  .siteHeader .header__inner{min-height:78px;}
}


/* === Simulateur: retirer les carrés bleus (user update) === */
.appWindow__side .simStepBtn.is-active{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}
.appWindow__side .simStepBtn.is-active .num{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* ===== Header clean white (fix blue squares in nav) ===== */
.siteHeader{
  background:#fff !important;
  border-bottom:1px solid rgba(10,42,74,.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(10,42,74,.06) !important;
}
.siteHeader.scrolled{
  background:#fff !important;
  border-bottom:1px solid rgba(10,42,74,.08) !important;
  box-shadow: 0 12px 28px rgba(10,42,74,.08) !important;
}

/* Textes du menu en bleu, sans carré bleu */
.siteHeader .nav a,
.siteHeader.scrolled .nav a,
.siteHeader .navDrop__summary,
.siteHeader.scrolled .navDrop__summary{
  color: var(--blue2) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.siteHeader .nav a:hover,
.siteHeader .nav a.active,
.siteHeader .nav a[aria-current="page"],
.siteHeader .navDrop__summary:hover,
.siteHeader .navDrop__summary.active,
.siteHeader .navDrop[open] .navDrop__summary{
  background: transparent !important;
  box-shadow: none !important;
}

/* underline plus propre (pas de bloc) */
.siteHeader .nav a::after,
.siteHeader .navDrop__summary::before{
  background: var(--blue) !important;
  height: 2px !important;
  bottom: 2px !important;
}

/* Bouton CTA du header: plus pro, sans gros carré bleu */
.siteHeader .nav__cta,
.siteHeader.scrolled .nav__cta,
.navCta{
  background:#fff !important;
  color: var(--blue) !important;
  border:1px solid rgba(30,111,217,.28) !important;
  box-shadow:none !important;
}
.siteHeader .nav__cta:hover,
.navCta:hover{
  background: rgba(30,111,217,.06) !important;
  color: var(--blue2) !important;
  filter:none !important;
}

/* Dropdown menu lisible sur header blanc */
.siteHeader .navDrop__menu{
  background:#fff !important;
  border:1px solid rgba(10,42,74,.10) !important;
  box-shadow:0 18px 36px rgba(2,6,23,.12) !important;
}
.siteHeader .navDrop__menu a{
  color: var(--blue2) !important;
}
.siteHeader .navDrop__menu a:hover{
  background: rgba(30,111,217,.06) !important;
}

/* ===== Header: Simulateur sans rectangle (user request) ===== */
.siteHeader .nav__cta,
.siteHeader.scrolled .nav__cta,
.siteHeader .nav a.nav__cta,
.siteHeader .nav .nav__cta,
.navCta{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--blue2) !important;
  padding: 10px 6px !important;
  border-radius: 0 !important;
  position: relative;
}
.siteHeader .nav__cta::after,
.siteHeader .nav a.nav__cta::after,
.navCta::after{
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--blue) !important;
  transform: scaleX(1);
  transform-origin: left;
}
.siteHeader .nav__cta:hover,
.navCta:hover{
  background: transparent !important;
  color: var(--blue) !important;
  filter: none !important;
}

/* =========================
   SMD — Alerts + Cookie consent (non-intrusif)
   ========================= */

/* Top info bar (under header) */
.smdAlertBar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  top: calc(var(--header-h, 84px) + 10px);
  width: min(1120px, calc(100% - 24px));
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.smdAlertBar.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.smdAlertBar__inner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(10, 42, 74, .92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 44px rgba(10,42,74,.18);
  backdrop-filter: blur(10px);
}
.smdAlertBar__icon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  flex: 0 0 auto;
  font-weight: 900;
}
.smdAlertBar__text{min-width:0}
.smdAlertBar__title{font-weight: 900; line-height:1.15}
.smdAlertBar__sub{margin-top:2px; font-size: 13px; opacity: .9}
.smdAlertBar__cta{
  margin-left: auto;
  display:flex;
  gap: 8px;
  align-items:center;
}
.smdAlertBar__close{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

/* Toast (bottom-left) */
.smdToast{
  position: fixed;
  left: 14px;
  bottom: 90px; /* laisse la place au bouton WhatsApp */
  width: min(420px, calc(100% - 28px));
  z-index: 9997;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.smdToast.is-show{opacity:1; transform: translateY(0); pointer-events:auto}
.smdToast__inner{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 12px 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.smdToast__icon{
  width: 36px;
  height: 36px;
  border-radius: 16px;
  background: rgba(30,111,217,.10);
  color: var(--blue2);
  display:grid;
  place-items:center;
  font-weight: 900;
  flex: 0 0 auto;
}
.smdToast__title{font-weight: 900; color: var(--ink); line-height:1.15}
.smdToast__desc{margin-top:4px; font-size: 13px; color: var(--muted)}
.smdToast__actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.smdToast__close{
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}

/* Cookie banner */
.smdCookie{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 9996;
  display: none;
}
.smdCookie.is-show{display:block}
.smdCookie__inner{
  max-width: 1120px;
  margin: 0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(10,42,74,.14);
  padding: 14px;
  display:flex;
  gap: 14px;
  align-items:center;
}
.smdCookie__text{min-width:0}
.smdCookie__title{font-weight: 900; color: var(--ink)}
.smdCookie__desc{margin-top:4px; color: var(--muted); font-size: 13px; line-height:1.35}
.smdCookie__link{display:inline-block; margin-top:6px; font-weight:700; font-size: 13px}
.smdCookie__actions{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}

/* Cookie modal details */
.smdCookieCats{margin-top: 14px; display:flex; flex-direction:column; gap:10px}
.smdCookieCat{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
}
.smdCookieCat__title{font-weight:900; color: var(--ink)}
.smdCookieCat__desc{margin-top:2px; color: var(--muted); font-size: 13px; line-height:1.35}
.smdCookieBadge{
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(30,111,217,.10);
  color: var(--blue2);
  border: 1px solid rgba(30,111,217,.18);
}

/* Switch */
.smdSwitch{position:relative; width: 54px; height: 32px; flex: 0 0 auto;}
.smdSwitch input{opacity:0; width:0; height:0}
.smdSwitch__slider{
  position:absolute; inset:0;
  background: rgba(10,42,74,.14);
  border: 1px solid rgba(10,42,74,.10);
  border-radius: 999px;
  transition: .18s ease;
}
.smdSwitch__slider:before{
  content:"";
  position:absolute;
  height: 24px; width: 24px;
  left: 4px; top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(10,42,74,.14);
  transition: .18s ease;
}
.smdSwitch input:checked + .smdSwitch__slider{background: rgba(30,111,217,.25); border-color: rgba(30,111,217,.25)}
.smdSwitch input:checked + .smdSwitch__slider:before{transform: translateY(-50%) translateX(22px)}

@media (max-width: 720px){
  .smdAlertBar{ top: calc(var(--header-h, 74px) + 8px); }
  .smdAlertBar__inner{ border-radius: 16px; }
  .smdCookie__inner{ flex-direction: column; align-items: stretch; }
  .smdCookie__actions{ margin-left: 0; justify-content: flex-end; }
}


/* =========================
   SMD — Notification "message reçu" (top-right)
   ========================= */
.smdMsg{
  position: fixed;
  top: calc(var(--header-h, 84px) + 16px);
  right: 16px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.smdMsg.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.smdMsg__inner{
  width: min(360px, calc(100vw - 32px));
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}
.smdMsg__avatar{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(0,122,255,.12);
  flex: 0 0 auto;
  font-size: 18px;
}
.smdMsg__content{ min-width: 0; }
.smdMsg__title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
  color: #0b0f17;
  margin-top: 2px;
}
.smdMsg__text{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(11,15,23,.82);
}
.smdMsg__meta{
  margin-top: 8px;
  font-size: 11px;
  color: rgba(11,15,23,.55);
}
.smdMsg__close{
  margin-left: auto;
  border: 0;
  background: transparent;
  color: rgba(11,15,23,.55);
  width: 28px;
  height: 28px;
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
}
.smdMsg__close:hover{
  background: rgba(0,0,0,.06);
  color: rgba(11,15,23,.78);
}

@media (max-width: 520px){
  .smdMsg{ right: 12px; top: 12px; }
}