/* =========================================================
   SMP2E — Site vitrine — Feuille de style commune
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#2A2058; --navy-2:#1C1640; --navy-3:#3A2E70;
  --teal:#12A6B3; --teal-2:#0C8791; --teal-light:#4FD8CF; --mint:#3ED6A0;
  --ink:#232741; --gray:#616A80; --gray-light:#9AA2B5;
  --bg-soft:#F3F6FB; --bg-soft-2:#EAF0F8; --white:#FFFFFF; --line:#E1E6F0;
  --radius:14px; --radius-sm:8px;
  --shadow:0 10px 30px -12px rgba(42,32,88,0.18);
  --shadow-sm:0 4px 14px -6px rgba(42,32,88,0.12);
  --container:1180px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--ink); line-height:1.6; background:#fff; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Poppins','Inter',sans-serif;font-weight:700;color:var(--navy);line-height:1.2;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
svg{display:block;}
.icon{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
section{padding:88px 0;}
@media(max-width:768px){ section{padding:56px 0;} }

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:600;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--teal-2);margin-bottom:10px;}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--mint);display:inline-block;}
.eyebrow.on-dark{color:var(--teal-light);}

h2.section-title{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px;}
h2.section-title .accent{color:var(--teal);}
p.lead{font-size:17px;color:var(--gray);max-width:640px;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:40px;transition:all .18s ease;border:none;cursor:pointer;}
.btn svg{width:16px;height:16px;}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 8px 20px -6px rgba(18,166,179,0.5);}
.btn-primary:hover{background:var(--teal-2);transform:translateY(-1px);}
.btn-outline{border:1.5px solid rgba(255,255,255,0.35);color:#fff;background:rgba(255,255,255,0.05);}
.btn-outline:hover{background:rgba(255,255,255,0.14);}
.btn-outline.on-light{border-color:var(--line);color:var(--navy);background:#fff;}
.btn-outline.on-light:hover{background:var(--bg-soft);}
.btn-block{width:100%;justify-content:center;}

/* header / nav */
.site-header{position:sticky;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
.brand{display:flex;align-items:center;gap:9px;}
.brand .mark{width:28px;height:28px;color:var(--teal);}
.brand .word{font-family:'Poppins';font-weight:700;font-size:19px;color:var(--navy);}
.brand .word span{color:var(--teal);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-family:'Poppins';font-weight:600;font-size:14px;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;transition:color .15s, border-color .15s;}
.nav-links a:hover, .nav-links a.active{color:var(--teal-2);border-color:var(--teal);}
.nav-cta{display:flex;align-items:center;gap:18px;}
.btn-primary-icon{display:none;width:15px;height:15px;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;width:26px;height:20px;position:relative;flex-direction:column;justify-content:space-between;}
.nav-toggle span{display:block;height:2.4px;background:var(--navy);border-radius:2px;}

@media(max-width:900px){
  .nav-links{position:fixed;top:64px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .18s ease;}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-links a{width:100%;padding:12px 0;border-bottom:1px solid var(--line);}
  .nav-toggle{display:flex;}
  .nav-cta .btn-primary-label{display:none;}
  .nav-cta .btn-primary{padding:13px;border-radius:50%;}
  .nav-cta .btn-primary-icon{display:block;}
}

/* hero (dark) */
.hero{position:relative;background:linear-gradient(120deg,var(--navy-2) 0%,var(--navy) 55%,var(--navy-3) 100%);color:#fff;overflow:hidden;}
.deco-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,0.12);pointer-events:none;}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:50px;align-items:center;position:relative;z-index:1;padding:80px 0;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr;padding:56px 0 40px;gap:34px;} }
.hero h1{font-size:clamp(30px,4.6vw,50px);line-height:1.14;color:#fff;}
.hero h1 span{color:var(--teal-light);}
.hero .sub{margin-top:16px;font-size:17px;color:#D6D3F0;max-width:520px;line-height:1.65;}
.hero-ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
.hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px;}
.hero-pill{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.06);border-radius:40px;padding:8px 16px;font-size:13px;font-weight:600;font-family:'Poppins';}
.hero-pill svg{width:15px;height:15px;color:var(--teal-light);}
.hero-photo{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3.1;}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--navy-2) 0%,rgba(28,22,64,0.08) 34%,rgba(28,22,64,0) 55%);}

/* page hero (sub-pages, smaller) */
.page-hero{position:relative;background:linear-gradient(120deg,var(--navy-2) 0%,var(--navy) 55%,var(--navy-3) 100%);color:#fff;padding:64px 0 54px;overflow:hidden;}
.page-hero .crumb{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal-light);font-weight:600;font-family:'Poppins';}
.page-hero h1{margin-top:10px;font-size:clamp(28px,4vw,40px);color:#fff;}
.page-hero .sub{margin-top:12px;font-size:16px;color:#D6D3F0;max-width:600px;}

/* grids & cards */
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:900px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr;} }

.card{background:var(--bg-soft);border-radius:var(--radius);padding:26px;border:1px solid var(--line);transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.card .ic-wrap{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;padding:11px;margin-bottom:16px;}
.card .ic-wrap.teal{background:var(--teal);}
.card h3{font-size:17px;margin-bottom:8px;}
.card p{font-size:14.5px;color:var(--gray);}
.card a.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:'Poppins';font-weight:600;font-size:13.5px;color:var(--teal-2);}
.card a.card-link svg{width:13px;height:13px;}

.service-list{margin-top:6px;}
.service-list li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px;}
.service-list li:last-child{border-bottom:none;}
.service-list .dot{width:18px;height:18px;min-width:18px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.service-list .dot svg{width:10px;height:10px;stroke-width:4;}

.photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.photo img{width:100%;height:100%;object-fit:cover;}

.diagram-box{background:var(--navy-2);border-radius:var(--radius);padding:22px;color:#fff;}
.diagram-box .cap{font-size:11.5px;color:#B9B4E0;letter-spacing:1px;text-transform:uppercase;margin-top:10px;text-align:center;}

.divider{height:1px;background:var(--line);margin:20px 0;}

/* bands */
.band-dark{background:linear-gradient(120deg,var(--navy-2) 0%,var(--navy) 55%,var(--navy-3) 100%);color:#fff;position:relative;overflow:hidden;}
.band-soft{background:var(--bg-soft);}

/* steps */
.steps{display:flex;justify-content:space-between;position:relative;margin-top:20px;flex-wrap:wrap;gap:24px;}
.steps::before{content:"";position:absolute;top:26px;left:6%;right:6%;height:1px;background:var(--line);}
@media(max-width:820px){ .steps::before{display:none;} }
.step{text-align:center;position:relative;z-index:1;width:18%;}
@media(max-width:820px){ .step{width:45%;} }
.step .dot{width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.step .dot.teal{background:var(--teal);}
.step .dot svg{width:22px;height:22px;}
.step h4{font-size:14px;color:var(--navy);}
.step p{font-size:12.5px;color:var(--gray);margin-top:3px;}

/* logos */
.logo-card{height:96px;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:14px 18px;transition:box-shadow .18s ease, transform .18s ease;}
.logo-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.logo-card img{max-width:100%;max-height:100%;object-fit:contain;}
.logo-card.sup{background:var(--bg-soft);}

/* stat / diff */
.diff{display:flex;gap:14px;align-items:flex-start;}
.diff .ic-c{width:44px;height:44px;min-width:44px;border-radius:12px;background:var(--bg-soft-2);color:var(--teal-2);display:flex;align-items:center;justify-content:center;padding:10px;}
.diff h4{font-size:15.5px;color:var(--navy);}
.diff p{font-size:13.5px;color:var(--gray);margin-top:3px;}

/* quote band */
.quote-band{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(120deg,var(--navy-2) 0%,var(--navy) 55%,var(--navy-3) 100%);padding:40px 44px;color:#fff;}
.quote-band p{font-family:'Poppins';font-weight:600;font-size:clamp(17px,2vw,22px);line-height:1.45;max-width:760px;position:relative;z-index:1;}

/* contact */
.contact-item{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line);}
.contact-item:last-child{border-bottom:none;}
.contact-item .ic-c{width:46px;height:46px;min-width:46px;border-radius:12px;background:var(--bg-soft-2);color:var(--teal-2);display:flex;align-items:center;justify-content:center;padding:11px;}
.contact-item .lbl{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gray-light);font-weight:600;}
.contact-item .val{font-size:17px;font-weight:600;color:var(--navy);margin-top:2px;font-family:'Poppins';}
.contact-item a.val:hover{color:var(--teal-2);}

.map-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}

/* footer */
.site-footer{background:var(--navy-2);color:#B9B4E0;padding:56px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;}
@media(max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h4{color:#fff;font-size:14px;margin-bottom:14px;font-family:'Poppins';}
.footer-grid ul li{margin-bottom:9px;font-size:13.5px;}
.footer-grid ul li a:hover{color:var(--teal-light);}
.footer-brand{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.footer-brand .mark{width:24px;height:24px;color:var(--teal-light);}
.footer-brand .word{font-family:'Poppins';font-weight:700;font-size:17px;color:#fff;}
.footer-brand .word span{color:var(--teal-light);}
.footer-grid p{font-size:13.5px;line-height:1.6;max-width:280px;}
.footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#8f89bb;}

/* reveal animation — hidden only once JS confirms it can reveal it again (progressive enhancement) */
.reveal{opacity:1;}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease;}
.js .reveal.in{opacity:1;transform:translateY(0);}

/* misc helpers */
.mt-0{margin-top:0;}
.text-center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}