
:root{
  --navy:#1B2E5D;
  --navy-dark:#141F42;
  --orange:#E7521A;
  --green:#5BAC29;
  --gray-bg:#F2F5F6;
  --text:#2B2F36;
  --radius:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; height:100%;}
body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    margin:0;
    font-family:'Poppins',Arial,Helvetica,sans-serif;
    color:var(--text);
    background:#fff;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}

/* ---------- HEADER ---------- */
.site-header{
  background:var(--navy);
  border-bottom:3px solid var(--orange);
  position:sticky; top:0; z-index:100;
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.logo{
  color:#fff;font-weight:700;font-size:20px;text-decoration:none;letter-spacing:.5px;
  display:flex; align-items:center; gap:8px;
}
.logo span{color:var(--orange);}
.logo .dot{width:10px;height:10px;background:var(--orange);border-radius:3px;display:inline-block;}

.nav-toggle{display:none;}
.nav-toggle-label{
  display:none; cursor:pointer; width:28px; height:22px; position:relative;
}
.nav-toggle-label span, .nav-toggle-label::before, .nav-toggle-label::after{
  content:""; position:absolute; left:0; width:100%; height:3px; background:#fff; border-radius:2px;
}
.nav-toggle-label::before{top:0;}
.nav-toggle-label span{top:9px;}
.nav-toggle-label::after{top:18px;}

.main-nav{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.main-nav a{
  display:inline-block; color:#fff; text-decoration:none; font-size:14.5px; font-weight:500;
  line-height:1; padding:9px 0; border-bottom:2px solid transparent;
}
.main-nav a:hover{border-bottom-color:var(--orange);}
.cta-btn{
  background:var(--green) !important; color:#fff !important; padding:11px 28px;
  line-height:1; border-radius:22px; font-weight:600; border-bottom:none !important; white-space:nowrap;
}
.cta-btn:hover{background:#4c9422 !important;}

@media (max-width:860px){
  .nav-toggle-label{display:block;}
  .main-nav{
    display:none; width:100%; flex-direction:column; align-items:flex-start;
    background:var(--navy-dark); padding:14px 4px; border-radius:10px; gap:14px;
  }
  .nav-toggle:checked ~ .main-nav{display:flex;}
  .cta-btn{width:100%; text-align:center;}
}

/* ---------- HERO (home) ---------- */
.home-hero{
  background:var(--navy); color:#fff;
}
.home-hero-inner{
  display:flex; align-items:center; gap:40px; flex-wrap:wrap;
  padding:60px 24px; max-width:1200px; margin:0 auto;
}
.hero-text{flex:1 1 420px;}
.hero-text h1{font-size:clamp(28px,4vw,44px); line-height:1.25; margin:0 0 20px;}
.hero-text .accent{color:var(--orange);}
.hero-text p{font-size:16px; line-height:1.6; opacity:.9; margin:0 0 28px; max-width:560px;}
.cta-btn-lg{
  display:inline-block; background:var(--green); color:#fff; text-decoration:none;
  padding:14px 32px; border-radius:26px; font-weight:700; font-size:15px;
}
.cta-btn-lg:hover{background:#4c9422;}
.hero-media{
  flex:1 1 280px; max-width:420px; margin:0 auto;
  position:relative;
}
.hero-media::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:130%; height:85%;
  background:radial-gradient(circle, rgba(93,178,232,.55) 0%, rgba(93,178,232,0) 72%);
  z-index:0;
  pointer-events:none;
}
.hero-media img{position:relative; z-index:1;}

/* ---------- STATS BAR ---------- */
.stats-bar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:40px;
  background:var(--navy-dark); color:var(--orange); padding:36px 24px; text-align:center;
}
.stat h3{font-size:26px; margin:0 0 6px; color:var(--orange);}
.stat p{margin:0; color:#dfe3ea; font-size:13.5px; max-width:180px;}

/* ---------- SUBPAGE HERO (fidèle à la mise en page du PDF : fond blanc, texte + image encadrée en alternance) ---------- */
.page-hero{
  background:#fff; padding:60px 24px 50px;
}
.page-hero-inner{
  max-width:1200px; margin:0 auto; width:100%;
  display:flex; align-items:center; gap:48px; flex-wrap:wrap;
}
.page-hero.reverse .page-hero-inner{flex-direction:row-reverse;}
.page-hero-text{flex:1 1 380px;}
.page-hero-media{flex:1 1 320px; max-width:420px; margin:0 auto; position:relative;}
.page-hero h1{font-size:clamp(24px,3.4vw,34px); line-height:1.3; margin:0 0 18px; color:var(--navy); font-weight:600;}
.page-hero h1 .accent{color:var(--orange);}
.page-hero p{font-size:15px; line-height:1.65; color:#525966; margin:0;}

.image-frame{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  border-radius:20px 20px 20px 90px;
}
.page-hero.reverse .image-frame{border-radius:20px 20px 90px 20px;}
.image-frame img{width:100%; height:100%; object-fit:cover;}
.swoosh{
  position:absolute; width:100px; z-index:-1;
  bottom:-24px; right:-20px;
}
.page-hero.reverse .swoosh{right:auto; left:-20px;}

/* ---------- FEATURES GRID ---------- */
.features-grid{
  max-width:1200px; margin:0 auto; padding:56px 24px 70px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px;
}
.feature-card{
  background:var(--gray-bg); border-radius:var(--radius); padding:26px 24px; position:relative;
}
.feature-card .card-head{
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
}
.feature-card .card-icon{width:52px; height:52px; object-fit:contain; flex-shrink:0;}
.feature-card .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; color:#fff; font-weight:700; font-size:14px;
  flex-shrink:0;
}
.feature-card h3{font-size:16.5px; margin:0 0 10px;}
.feature-card p{font-size:14px; line-height:1.55; color:#525966; margin:0 0 10px;}
.feature-card ul{margin:0; padding-left:0; list-style:none; font-size:13.5px; color:#525966;}
.feature-card ul li{padding-left:20px; position:relative; margin-bottom:6px;}
.feature-card ul li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700;}

.num.c0{background:var(--navy);}
.num.c1{background:var(--orange);}
.num.c2{background:var(--green);}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--navy); color:#dfe3ea;}
.footer-inner{
  max-width:1200px; margin:0 auto; padding:56px 24px 30px;
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px;
}
.footer-col h4{color:#fff; font-size:14px; letter-spacing:.5px; margin:0 0 16px;}
.footer-col.brand p{font-size:13.5px; line-height:1.6; color:#c3c9d4; margin:14px 0 0;}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col ul li{margin-bottom:10px; font-size:13.5px;}
.footer-col ul li a{text-decoration:none; color:#dfe3ea;}
.footer-col ul li a:hover{color:var(--orange);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:18px 24px; text-align:center;
  font-size:12.5px; color:#9aa2b1; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; max-width:1200px; margin:0 auto;
}
.footer-bottom a{text-decoration:underline;}

@media (max-width:768px){
  .footer-inner{grid-template-columns:1fr; text-align:left;}
  .home-hero{flex-direction:column; text-align:center;}
  .hero-text p{margin-left:auto; margin-right:auto;}
  .footer-bottom{flex-direction:column; text-align:center; justify-content:center;}
  .page-hero .page-hero-inner, .page-hero.reverse .page-hero-inner{flex-direction:column; text-align:center;}
  .page-hero-media{order:-1;}
}

