*{margin:0;padding:0;box-sizing:border-box}
:root{--blue:#005CFF;--dark:#03070c;--line:#e8e8e8}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;color:#0a0d12;background:#fff;overflow-x:hidden}

.site-header{
  height:118px;width:100%;position:absolute;top:0;left:0;z-index:20;
  display:flex;align-items:flex-start;justify-content:space-between;padding:18px 24px 0 27px;
}
.brand img{width:420px;height:auto;display:block}
.main-nav{display:flex;gap:29px;align-items:flex-start;padding-top:36px;margin-left:auto}
.main-nav a{position:relative;color:#fff;text-decoration:none;font-size:14px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.main-nav a.active{color:var(--blue)}
.main-nav a.active:after{content:"";position:absolute;height:2px;width:47px;left:0;bottom:-18px;background:var(--blue)}
.nav-cta{
  margin-left:30px;margin-top:16px;background:var(--blue);color:#fff;text-decoration:none;
  width:158px;height:55px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:800;line-height:1.12;text-align:center;box-shadow:0 0 18px rgba(0,92,255,.22)
}
.nav-cta span{font-size:18px}

.hero{
  height:500px;
  position:relative;
  display:flex;
  align-items:center;
  padding:170px 0 0 42px;
  background:#000;
}
.hero-content{
  position:relative;
  z-index:5;
  width:45%;
  color:#fff;
  margin-top:0;
}
.hero:before,
.hero:after{
  display:none;
}
.hero:after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.18);
}
.hero h1{font-size:52px;line-height:1.03;font-weight:900;letter-spacing:.01em;margin-bottom:18px}
.hero h1 span{color:var(--blue)}
.hero p{font-size:16px;line-height:1.53;max-width:540px;color:#fff;margin-bottom:31px}
.hero-actions{display:flex;gap:15px}
.btn{height:42px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:13px;font-weight:850;color:#fff}
.btn.primary{background:var(--blue);min-width:236px}
.btn.primary span{font-size:21px;margin-left:12px}
.btn.outline{border:1px solid rgba(255,255,255,.43);min-width:213px;background:rgba(0,0,0,.18)}
.phone{font-size:24px;transform:rotate(-25deg);display:inline-block;margin-right:12px}

.services{
min-height:320px;
background:#fff;
text-align:center;
padding:34px 20px 0;
}
.eyebrow{font-size:15px;font-weight:900;color:var(--blue);letter-spacing:.11em;margin-bottom:7px;text-align:center}
.services h2{font-size:24px;line-height:1.16;font-weight:900;letter-spacing:.01em;margin-bottom:10px}
.title-line{display:block;width:900px;height:3px;background:var(--blue);margin:0 auto}
.service-grid {
  width: 100%;
  max-width: 1200px; /* Aligne la grille avec le reste du site */
  margin: 50px auto 0;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3 services par ligne au lieu de 9 */
  gap: 30px; /* Crée un bel espace propre entre les cases */
}

.service-card {
  min-height: 250px; /* Donne une hauteur fixe pour que toutes les cases soient égales */
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* Aligne le texte en haut et l'image/ligne en bas */
  background: #ffffff;
  border: 1px solid #e9e9e9; /* Ajoute une fine bordure tout le tour de la case */
  border-radius: 8px; /* Arrondit légèrement les coins des cases */
}


.service-card:last-child{
  border-right:none;
}
.service-card i{
  display:none;
  width:100%;
  height:2px;
  background:var(--blue);
  margin-top:18px;
  border-radius:20px;
  opacity:.9;
}
.split{display:grid;grid-template-columns:45% 55%;min-height:360px}
.why{background:#030609;color:#fff;padding:39px 40px 30px 72px}
.why h2,.quote h2{font-size:24px;font-weight:900;letter-spacing:.02em;margin-bottom:12px}
.small-line{display:block;width:30px;height:2px;background:var(--blue);margin-bottom:31px}
.why-item{display:grid;grid-template-columns:43px 1fr;gap:22px;align-items:center;max-width:385px;padding:0 0 18px;margin-bottom:17px;border-bottom:1px solid rgba(255,255,255,.14)}
.why-item:last-child{border-bottom:0}
.why-item svg{width:38px;height:38px;stroke:var(--blue);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.why-item h3{font-size:14px;font-weight:900;margin-bottom:5px}
.why-item p{font-size:13px;line-height:1.3;color:#fff}

.quote{background:linear-gradient(135deg,#0044d7 0%,#0063ff 60%,#0053e4 100%);padding:39px 64px 35px 56px;color:#fff}
.quote .small-line.light{background:#fff;margin-bottom:22px;opacity:.95}
.form-row{
  display:flex;
  gap:16px;
  margin-bottom:16px;
}
input,select,textarea{
  width:100%;
  background:rgba(0,34,130,.08);
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  padding:16px;
  font-size:14px;
  outline:none;
  border-radius:8px;
}
::placeholder{color:#fff;opacity:.95}
select{appearance:auto;color:#fff}
textarea{
  min-height:140px;
  padding-top:16px;
  resize:none;
  margin-top:6px;
}
button{
  width:280px;height:43px;border:0;background:#fff;color:var(--blue);font-size:13px;font-weight:900;margin:20px auto 0;display:flex;align-items:center;justify-content:center;gap:16px;cursor:pointer
}
button span{font-size:21px}

.zones{
  padding:45px 20px;
  background:#f7f9fc;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.zone-content{
  width:100%;
  max-width:1000px;
  display:flex;
  justify-content:center;
}
.zones .eyebrow{margin-bottom:6px}
.zones .title-line{
  width:70px;
  height:4px;
  margin:18px auto 28px;
}
.zones h2{
  font-size:28px;
  font-weight:900;
  letter-spacing:.03em;
  color:#0a0d12;
}
.pin{color:var(--blue);font-size:30px;margin-right:12px;font-weight:400}
.

.realisations{display:none}

.footer{height:120px;background:#020508;color:#fff;display:grid;grid-template-columns:250px 1fr 220px;align-items:center;padding:16px 42px;position:relative}
.footer img{width:177px}
.contact-lines{justify-self:center;font-size:16px;line-height:1.8}
.contact-lines p:first-child{color:#fff}
.social{justify-self:end;display:flex;align-items:center;gap:14px;font-weight:900;font-size:13px}
.social span{width:33px;height:33px;border:1px solid var(--blue);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:22px}
.footer small{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:12px;color:#d8d8d8}

@media (max-width:900px){
  .site-header{position:absolute;height:auto;padding:16px;align-items:center}
  .brand img{width:180px}.main-nav{display:none}.nav-cta{margin:0;width:136px;height:46px;font-size:11px}
  .hero{height:620px;padding:155px 24px 40px;background-position:center right}
  .hero-content{width:100%;margin-top:0}.hero h1{font-size:42px}.hero p{font-size:15px}
  .hero-actions{flex-direction:column;width:100%}.btn{width:100%}
  .services{height:auto;padding:42px 22px}.services h2{font-size:22px}.service-grid{
  grid-template-columns:repeat(9, minmax(0, 1fr)) !important;
}
  .service-card,.service-card:nth-child(n){border-right:0;margin-left:0;grid-column:auto}
  .split{grid-template-columns:1fr}.why,.quote{padding:42px 24px}
  .form-row{grid-template-columns:1fr}button{width:100%}
  .zones{height:auto;padding:32px 20px}.zone-content{flex-direction:column;gap:16px}.zones h2{white-space:normal;text-align:center}
  .footer{height:auto;grid-template-columns:1fr;gap:18px;text-align:center;padding:28px 20px 48px}.footer img,.contact-lines,.social{justify-self:center}
}

.hero-content{
  position:relative;
  z-index:5;
  width:50%;
  color:#fff;
  margin-top:120px;
}
/* ===== HERO IMAGE SLIDER ===== */

.hero{
  position:relative;
  overflow:hidden;
}
.hero-slider{
  position:absolute;
  top:0;
  right:0;
  width:55%;
  height:100%;
  z-index:1;
}

.slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 2s ease-in-out;
}

.slide.active{
  opacity:1;
}

.hero-slider:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to left,
    rgba(0,0,0,.15),
    rgba(0,0,0,.88)
  );
}
.service-card img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:8px;
  margin:14px 0 6px;
  display:block;
}
@media (max-width: 768px){

  .site-header{
    position:absolute;
    padding:15px;
  }

  .brand img{
    width:210px;
  }

  .nav-cta,
  .main-nav{
    display:none;
  }

  .hero{
    height:auto;
    min-height:720px;
    padding:160px 22px 60px;
    display:block;
  }

  .hero-content{
    width:100%;
    margin-top:0;
    position:relative;
    z-index:5;
  }

  .hero-slider{
    width:100%;
    height:45%;
    top:auto;
    bottom:0;
  }

  .hero p{
    font-size:16px;
    line-height:1.6;
  }

  .hero-actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .service-grid{
    grid-template-columns:1fr !important;
    gap:28px;
  }

  .service-card{
    border-right:none;
    padding:0;
  }

  .service-card img {
  width: 100%;
  height: 160px; /* Force toutes les images à avoir la même hauteur */
  object-fit: cover; /* Recadre proprement l'image sans la déformer */
  border-radius: 6px;
  margin: 15px 0 0;
  display: block;
}

  .title-line{
    width:90% !important;
  }

  .split{
    grid-template-columns:1fr;
  }

  .form-row{
    flex-direction:column;
  }

  .footer{
    height:auto;
    grid-template-columns:1fr;
    text-align:center;
    gap:20px;
  }
}