/* ===========================================================
   MT Pro Clean — feuille de style
   Palette extraite du logo
   =========================================================== */
:root{
  --ink:#0E3A52;          /* bleu pétrole profond */
  --primary:#11506B;
  --primary-2:#2C7A98;
  --steel:#5FA3B5;
  --aqua:#CDEBEC;
  --aqua-soft:#EAF6F6;
  --leaf:#5FB84A;         /* accent vert (éco) */
  --leaf-dark:#46962f;
  --bg:#F3F7F8;
  --white:#ffffff;
  --text:#1d3b47;
  --muted:#5b7783;
  --line:#dde8ea;
  --shadow:0 10px 30px rgba(14,58,82,.10);
  --shadow-lg:0 24px 60px rgba(14,58,82,.18);
  --radius:16px;
  --radius-sm:10px;
  --maxw:1160px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--bg);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* fallback navigateurs anciens */
  overflow-x:clip;     /* empêche le défilement horizontal causé par le menu mobile hors-écran, sans casser le header sticky */
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.5vw,3.2rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{display:inline-block;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-size:.78rem;color:var(--primary-2);margin-bottom:.6rem}
.lead{font-size:1.15rem;color:var(--muted)}
.center{text-align:center}
section{padding:72px 0}
.section-tight{padding:48px 0}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:1rem;
  padding:.85em 1.5em;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--primary-2),var(--primary));color:#fff;
  box-shadow:0 8px 22px rgba(17,80,107,.35)}
.btn-leaf{background:linear-gradient(135deg,var(--leaf),var(--leaf-dark));color:#fff;
  box-shadow:0 8px 22px rgba(70,150,47,.35)}
.btn-ghost{background:#fff;color:var(--primary);border-color:var(--line)}
.btn-white{background:#fff;color:var(--primary)}
.btn-lg{padding:1.05em 1.9em;font-size:1.08rem}

/* ---------- Header ---------- */
.topbar{background:var(--ink);color:#cfe6ec;font-size:.86rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar a{color:#eaf6f6;font-weight:600}
.topbar .tb-right{display:flex;gap:18px;align-items:center}
.topbar svg{vertical-align:-2px}

header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:100px;width:auto}
.menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.menu a{color:var(--ink);font-weight:600;padding:.4em .55em;border-radius:8px;font-size:.82rem;white-space:nowrap}
.menu a:hover{background:var(--aqua-soft);color:var(--primary)}
.menu a.active{color:var(--primary-2)}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:3px;background:var(--ink);border-radius:3px;margin:5px 0;transition:.25s}

@media(max-width:980px){
  .menu{position:absolute;top:calc(100% + 8px);right:16px;left:auto;
    width:min(74vw,260px);flex-direction:column;align-items:stretch;
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;gap:5px;
    box-shadow:var(--shadow-lg);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-10px) scale(.98);transform-origin:top right;
    transition:opacity .2s ease,transform .2s ease,visibility .2s}
  body.nav-open .menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
  .menu a{padding:.5em 1em;font-size:1.02rem;border-radius:8px}
  .menu a:hover,.menu a.active{background:var(--aqua-soft);color:var(--primary)}
  .burger{display:block;z-index:60}
  body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .nav-cta .btn-ghost{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--ink) 0%,var(--primary) 55%,var(--primary-2) 100%)}
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(900px 380px at 80% -10%,rgba(95,184,74,.22),transparent 60%),
             radial-gradient(700px 360px at 0% 110%,rgba(205,235,236,.20),transparent 60%);pointer-events:none}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:64px;padding-bottom:72px}
.hero h1{color:#fff}
.hero p.lead{color:#d6ebf0}
.hero .badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
.chip{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);padding:.5em 1em;border-radius:999px;font-size:.86rem;font-weight:600}
.chip svg{width:18px;height:18px;flex:0 0 auto}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius);padding:26px;backdrop-filter:blur(6px)}
.hero-card h3{color:#fff;margin-bottom:.3em}
.hero-card .stars{color:#ffd24a;font-size:1.2rem;letter-spacing:2px}
.hero-card ul{list-style:none;margin:14px 0 0;padding:0}
.hero-card li{display:flex;gap:.6em;padding:.35em 0;color:#eaf6f6;font-weight:600}
.hero-card li svg{flex:0 0 auto;margin-top:3px}
@media(max-width:840px){.hero .container{grid-template-columns:1fr;padding-top:44px;padding-bottom:48px}}

/* ---------- Services ---------- */
.grid{display:grid;gap:22px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  background:var(--aqua-soft);color:var(--primary-2);margin-bottom:16px}
.card .ic svg{width:30px;height:30px}
.card h3{margin-bottom:.25em}
.card .tag{color:var(--leaf-dark);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.card .more{display:inline-flex;align-items:center;gap:.4em;font-weight:700;margin-top:6px}
.service-card{display:flex;flex-direction:column;align-items:flex-start;padding:30px}
.service-card-title{font-size:1.5rem;margin:.15em 0 .35em}
.service-card .muted{margin-bottom:22px}
.service-card .btn{margin-top:auto}

/* ---------- Bandeaux / sections ---------- */
.band{background:var(--ink);color:#eaf6f6}
.band h2{color:#fff}
.band p{color:#cfe6ec}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:840px){.split{grid-template-columns:1fr}}
.feature{display:flex;gap:14px;margin-bottom:18px}
.feature .fic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--aqua-soft);color:var(--primary-2)}
.fic svg{width:24px;height:24px}
.contact-list .ic svg,.contact-list .ic{flex:0 0 auto}
.contact-list .ic svg{width:20px;height:20px}
.feature h3{margin:.1em 0 .2em;font-size:1.1rem}
.feature p{margin:0;color:var(--muted)}
.band .feature .fic{background:rgba(255,255,255,.12);color:#bfe6c9}
.band .feature p{color:#cfe6ec}
.band .feature h3{color:#fff}

/* ---------- Process ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-18px;left:24px;
  width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--leaf),var(--leaf-dark));
  color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:0 6px 16px rgba(70,150,47,.4)}

/* ---------- Zone / communes ---------- */
.zone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.commune-link{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:.8em 1em;font-weight:700;color:var(--ink);
  transition:.15s}
.commune-link:hover{border-color:var(--steel);background:var(--aqua-soft);color:var(--primary);transform:translateY(-2px)}
.commune-link small{color:var(--muted);font-weight:600}
.sector-title{margin:26px 0 12px;color:var(--primary-2);font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#eaf6f6;max-width:620px;margin:0 auto 24px}
.cta-band .hero-cta{justify-content:center}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.qa{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.qa button{width:100%;text-align:left;background:none;border:0;padding:18px 20px;font-size:1.05rem;
  font-weight:700;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:inherit}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 20px}
.qa .ans p{padding-bottom:18px;margin:0;color:var(--muted)}
.qa.open .ans{max-height:320px}
.qa .pm{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--aqua-soft);color:var(--primary-2);
  display:grid;place-items:center;font-size:1.3rem;line-height:1;transition:.2s}
.qa.open .pm{background:var(--primary-2);color:#fff;transform:rotate(45deg)}

/* ---------- Form ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.form label{display:block;font-weight:700;color:var(--ink);margin:14px 0 6px;font-size:.95rem}
.form input,.form textarea,.form select{width:100%;padding:.8em 1em;border:1.5px solid var(--line);
  border-radius:10px;font-family:inherit;font-size:1rem;color:var(--text);background:#fdffff}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--primary-2);box-shadow:0 0 0 3px rgba(44,122,152,.15)}
.form textarea{min-height:120px;resize:vertical}
.note{font-size:.85rem;color:var(--muted)}

/* ---------- Contact info ---------- */
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.contact-list .ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--aqua-soft);color:var(--primary-2)}
.contact-list a{color:var(--ink);font-weight:700}
.contact-list small{color:var(--muted);display:block;font-weight:600}

/* ---------- Article (pages texte) ---------- */
.prose{max-width:760px;margin:0 auto}
.prose h2{margin-top:1.4em}
.prose ul{padding-left:1.2em}
.prose li{margin:.4em 0}
.pagehead{background:linear-gradient(135deg,var(--ink),var(--primary));color:#fff;padding:60px 0 56px}
.pagehead h1{color:#fff;margin-bottom:.2em}
.pagehead p{color:#d6ebf0;max-width:640px;margin:0}
.breadcrumb{font-size:.85rem;color:#bcd9e2;margin-bottom:14px}
.breadcrumb a{color:#eaf6f6}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:#bcd6df;padding:56px 0 26px;font-size:.93rem}
footer.site h4{color:#fff;font-size:1rem;margin-bottom:14px}
footer.site a{color:#cfe6ec}
footer.site a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px}
@media(max-width:840px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:.4em 0}
.foot-logo{height:96px;width:auto;background:#fff;padding:8px 12px;border-radius:12px;display:inline-block;margin-bottom:14px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#9fc1cc;font-size:.85rem}

/* ---------- WhatsApp flottant ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:80;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.5);transition:transform .15s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:34px;height:34px;fill:#fff}

/* utilities */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.tcenter{text-align:center}
.muted{color:var(--muted)}

/* ===== Slider Avant / Après ===== */
.slider-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.slider-grid{grid-template-columns:1fr}}
.ba-slider{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3;
  cursor:col-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  background:#e8eef0;box-shadow:0 10px 30px rgba(14,58,82,.12)}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
/* APRÈS = image de fond (toujours visible) */
.ba-slider .ba-ap{z-index:1}
/* AVANT = calque au-dessus, révélé/masqué via la largeur du conteneur */
.ba-before-wrap{position:absolute;inset:0;width:50%;overflow:hidden;z-index:2}
.ba-before-wrap .ba-av{width:auto;height:100%;max-width:none}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;z-index:3;
  background:#fff;pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.4)}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;
  transform:translate(-50%,-50%);background:#fff;border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24' fill='none' stroke='%230E3A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}
.ba-label-av,.ba-label-ap{position:absolute;bottom:12px;padding:4px 11px;font-size:.72rem;
  font-weight:800;letter-spacing:.04em;border-radius:999px;background:rgba(14,58,82,.78);
  color:#fff;pointer-events:none;z-index:4}
.ba-label-av{left:12px}
.ba-label-ap{right:12px}
/* Titres de région dans le footer */
li.footer-sector-title{list-style:none;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#8aabbb;margin-top:10px;margin-bottom:2px;pointer-events:none}
li.footer-sector-title:first-child{margin-top:0}

/* Photo hero */
.hero-img-wrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(14,58,82,.18)}
.hero-img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4}
.hero-card-overlay{position:absolute;bottom:16px;left:16px;right:24px;background:rgba(14,58,82,.82);
  backdrop-filter:blur(4px);border-radius:10px;padding:10px 16px;color:#fff;
  display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600}
.hero-card-overlay .stars{color:#f5c842;font-size:1rem;letter-spacing:2px}

/* Photo À propos */
.about-img{width:100%;border-radius:16px;object-fit:cover;box-shadow:0 8px 30px rgba(14,58,82,.15);aspect-ratio:3/4}
@media(max-width:760px){.about-img{max-width:320px;margin:0 auto;display:block}}