*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter',sans-serif;
  color:#0c1f4f;
  background:#fff;
  line-height: 1.6;
}

/* HEADER */
header{
  height:90px;
  padding:0 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #eee;
}

.logo{
  display:flex;
  align-items:center;
  gap:15px;
  height:60px; /* FIX stabilité */
}

.logo h2{
  font-size:22px;
  margin:0;   /* IMPORTANT */
  line-height:1.1;
}

.logo p{
  margin:0;   /* IMPORTANT */
  color:#777;
  font-size:14px;
  line-height:1.2;
}

.logo img{
  width:75px;
  height:auto;
  display:block; /* évite micro décalage baseline */
}

nav{
  display:flex;
  gap:35px;
}

nav a{
  text-decoration:none;
  color:#111;
  font-weight:500;
}

/* HERO */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:85vh;
}

.hero-left{
  padding:100px 80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-left h1{
  font-size:65px;
  line-height:1.1;
  margin:25px 0;
  text-align:center;
}

.hero-left p{
  color:#555;
  line-height:1.8;
  margin-bottom:40px;
  text-align:center;
}

.hero-buttons{
  display:flex;
  gap:20px;
  justify-content:center;
}

.blue-btn,
.white-btn{
  text-decoration:none;
  display:inline-block;
  transition:0.3s ease;
}

.blue-btn{
  background:#0c2d72;
  color:white;
  border:none;
  padding:16px 32px;
  border-radius:6px;
  cursor:pointer;
}

.white-btn{
  background:white;
  border:1px solid #0c2d72;
  color:#0c2d72;
  padding:16px 32px;
  border-radius:6px;
  cursor:pointer;
}

.blue-btn:hover,
.white-btn:hover{
  transform:translateY(-2px);
}

/* HERO IMAGE */
.hero-right{
  position:relative;
  overflow:hidden;
}

.hero-right img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.image-overlay{
  position:absolute;
  top:0;
  left:0;
  width:45%;
  height:100%;
  z-index:2;

  background:linear-gradient(
    to right,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.95) 25%,
    rgba(255,255,255,0.7) 55%,
    rgba(255,255,255,0) 100%
  );

  clip-path:polygon(
    0 0,
    100% 0,
    75% 100%,
    0 100%
  );
}

/* FEATURES */
.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:50px;
  gap:30px;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}

.feature{
  text-align:center;
}

/* ICONES FEATHER */
.feature i{
  color:#0c2d72;
  margin-bottom:20px;
}

/* ANIMATION ICONES */
.feature svg,
.card svg,
.mini-card svg{
  transition:all 0.3s ease;
}

.feature:hover svg,
.card:hover svg,
.mini-card:hover svg{
  transform:translateY(-6px) scale(1.2);
  filter:drop-shadow(0 6px 10px rgba(12,45,114,0.25));
}

/* EXPERTISE + SECTEURS + WHY */
.expertise,
.sectors,
.why{
  padding:100px 80px;
}

.expertise h2,
.sectors h2{
  text-align:center;
  font-size:42px;
  margin-bottom:60px;
}

/* CARDS */
.expertise-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.card{
  padding:40px;
  border:1px solid #eee;
  border-radius:12px;
  text-align:center;
}

/* SECTEURS */
.sector-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px;
}

.sector-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
}

.sector-card img{
  width:100%;
  height:350px;
  object-fit:cover;
}

.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(5,20,60,.9),transparent);
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:30px;
}

/* WHY */
.why{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
}

.mini-card{
  border:1px solid #eee;
  padding:40px;
  border-radius:12px;
  text-align:center;
}

/* CTA */
.cta{
  background:#08245f;
  color:white;
  padding:60px 80px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* FOOTER */
footer{
  padding:40px 80px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer-logo{
  display:flex;
  align-items:center;
  gap:15px;
}

.footer-logo img{
  width:75px;
}

/* RESPONSIVE */
@media(max-width:1000px){

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

  .features,
  .expertise-grid,
  .sector-grid,
  .why{
    grid-template-columns:1fr;
  }

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

  header{
    flex-direction:column;
    height:auto;
    padding:20px;
    gap:20px;
  }

  nav{
    flex-wrap:wrap;
    justify-content:center;
  }

  .hero-left{
    padding:60px 30px;
  }

  .hero-left h1{
    font-size:42px;
  }

}

/* PARTENAIRES */
.partners{
  padding:100px 80px;
  text-align:center;
}

.partners h2{
  font-size:42px;
  margin-bottom:60px;
}

.partners-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  align-items:center;
}

.partners-grid img{
  width:100%;
  max-width:180px;
  margin:auto;
  opacity:0.6;
  filter:grayscale(100%);
  transition:all 0.3s ease;
}

.partners-grid img:hover{
  opacity:1;
  filter:grayscale(0%);
  transform:scale(1.05);
}

/* PARTENAIRES MARQUEE */
.partners{
  padding:100px 80px;
  text-align:center;
  overflow:hidden;
}

.partners h2{
  font-size:42px;
  margin-bottom:60px;
}

/* zone visible */
.partners-marquee{
  overflow:hidden;
  position:relative;
}

/* piste qui défile */
.partners-track{
  display:flex;
  gap:80px;
  width:max-content;
  animation:scroll 25s linear infinite;
  align-items:center;
}

/* logos */
.partners-track img{
  width:160px;
  height:auto;
  opacity:0.6;
  filter:grayscale(0%);
  transition:all 0.3s ease;
}

.partners-track img:hover{
  opacity:1;
  filter:grayscale(0%);
  transform:scale(1.1);
}

/* animation */
@keyframes scroll{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

.partners-track:hover{
  animation-play-state:paused;
}

/* CONTACT PAGE */
.contact-page{
  padding:100px 80px;
  text-align:center;
}

.contact-page h1{
  font-size:42px;
  margin-bottom:20px;
}

.contact-page p{
  color:#555;
  margin-bottom:50px;
}

.contact-form{
  max-width:800px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-form .row{
  display:flex;
  gap:20px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:15px;
  border:1px solid #ddd;
  border-radius:6px;
  font-family:'Inter',sans-serif;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#0c2d72;
}

.contact-form button{
  align-self:flex-start;
}

/* CONTACT PAGE */

.contact-section{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:50px;

  padding:50px 80px 40px;

  background: linear-gradient(
    135deg,
    #e0f2ff 0%,
    #dbeafe 35%,
    #f0f9ff 70%,
    #ffffff 100%
  );

  align-items:center;
}

/* LEFT */

.contact-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.contact-info span{
  color:#0c2d72;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:20px;
}

.contact-info h1{
  font-size:58px;
  line-height:1.1;
  margin-bottom:25px;
}

.contact-info p{
  color:#555;
  line-height:1.8;
  margin-bottom:40px;
}

.contact-details{
  display:flex;
  flex-direction:column;
  gap:25px;
}

.contact-details h3{
  margin-bottom:8px;
}

/* RIGHT */

.contact-form-box{
  background:white;
  padding:50px;
  border-radius:20px;
  box-shadow:0 10px 40px rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.4);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:25px;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.input-group{
  display:flex;
  flex-direction:column;
}

.input-group label{
  margin-bottom:10px;
  font-weight:600;
  color:#0c1f4f;
}

.contact-form input,
.contact-form textarea{
  padding:16px;
  border:1px solid #ddd;
  border-radius:10px;
  font-family:'Inter',sans-serif;
  font-size:15px;
  transition:0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#0c2d72;
  box-shadow:0 0 0 4px rgba(12,45,114,0.1);
}

.contact-form textarea{
  resize:none;
}

.contact-form button{
  width:fit-content;
  margin-top:10px;
}

/* RESPONSIVE */

@media(max-width:1000px){

  .contact-section{
    grid-template-columns:1fr;
    padding:60px 25px;
  }

  .contact-info h1{
    font-size:42px;
  }

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

  .contact-form-box{
    padding:30px;
  }

}

.logo{
  transition:0.3s ease;
}

.logo:hover{
  opacity:0.85;
  transform:scale(1.02);
}

.contact-section::-webkit-scrollbar {
  display: none;
}

.contact-section {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html{
  scroll-behavior:smooth;
}

#secteurs{
  scroll-margin-top:100px;
}

html {
  overflow-y: scroll; /* force scrollbar toujours visible */
}

body, button, input, textarea, a{
  font-family: 'Inter', sans-serif;
}

.lang {
  margin-left: 20px;
  font-weight: 600;
}

.lang a {
  text-decoration: none;
  color: #0c2d72;
  margin: 0 5px;
}

.lang-switch {
  margin-left: 20px;
}

.lang-switch button {
  background: none;
  border: 1px solid #0c2d72;
  color: #0c2d72;
  padding: 5px 10px;
  margin-left: 5px;
  cursor: pointer;
  border-radius: 4px;
}

.lang-switch button:hover {
  background: #0c2d72;
  color: white;
}

#langToggle {
  margin-left: 15px;
  padding: 6px 12px;
  border: 1px solid #0c2d72;
  background: white;
  color: #0c2d72;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 600;
}

#langToggle:hover {
  background: #0c2d72;
  color: white;
}

/* Alignement des cartes Nos expertises */
.expertise-grid{
  align-items:stretch;
}

.card{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.card h3{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card p{
  min-height:52px;
}

.contact-form button.blue-btn {
    display: block;
    margin: 20px auto 0;
}

.file-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
}

.file-upload .blue-btn,
.contact-form button.blue-btn {
    width: 220px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.file-upload .blue-btn {
    font-size: 14px;
} 

/* =====================================================
   EFFET HOVER - SECTEURS D'ACTIVITÉ
===================================================== */

.sector-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.sector-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.sector-card img {
    transition: transform 0.5s ease;
}

.sector-card:hover img {
    transform: scale(1.05);
}
/* =====================================================
   NOS EXPERTISES
   Même style que "Pourquoi nous choisir"
===================================================== */

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.expertise .card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.expertise .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.expertise .card i {
    transition: transform 0.5s ease;
}

.expertise .card:hover i {
    transform: scale(1.1);
}

 /* =====================================================
    CENTRAGE IDENTIQUE DES CARTES
 ===================================================== */

 /* NOS EXPERTISES */
 .expertise .card {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     min-height: 260px;
 }

 .expertise .card h3 {
     text-align: center;
     width: 100%;
 }

 .expertise .card p {
     text-align: center;
     width: 100%;
 }


 /* POURQUOI NOUS CHOISIR */
 .why-grid .feature {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     min-height: 220px;
 }

 .why-grid .feature h3,
 .why-grid .feature p {
     text-align: center;
     width: 100%;
 }


 /* SECTEURS */
 .sector-card .overlay {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
     text-align: center;
 }

 .sector-card .overlay h3,
 .sector-card .overlay p {
     width: 100%;
     text-align: center;
 }


 /* =====================================================
    MÊME LARGEUR / ESPACEMENT
 ===================================================== */

 .expertise-grid,
 .sector-grid {
     align-items: stretch;
 }


 .expertise .card,
 .sector-card {
     width: 100%;
 }


 /* =====================================================
    RESPONSIVE
 ===================================================== */

 @media (max-width: 1000px) {

     .expertise .card,
     .why-grid .feature {
         min-height: 220px;
     }

 }

 /* =====================================================
   CARTES — MISE EN FORME UNIFORME
   EXPERTISES / SECTEURS / POURQUOI NOUS CHOISIR
===================================================== */


/* =====================================================
   NOS EXPERTISES
===================================================== */

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: stretch;
}

.expertise .card {
    min-height: 280px;

    padding: 40px 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid #eee;
    border-radius: 12px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    cursor: pointer;
}


/* Icône */

.expertise .card svg {
    width: 32px;
    height: 32px;

    margin-bottom: 25px;

    color: #0c2d72;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* Titre */

.expertise .card h3 {
    width: 100%;

    min-height: auto;

    margin: 0 0 15px 0;

    display: block;

    text-align: center;

    color: #0c1f4f;
}


/* Texte */

.expertise .card p {
    width: 100%;

    min-height: auto;

    margin: 0;

    text-align: center;

    color: #555;
}


/* Hover */

.expertise .card:hover {
    transform: translateY(-8px);

    border-color: #0c2d72;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}

.expertise .card:hover svg {
    transform: translateY(-5px) scale(1.15);

    filter:
        drop-shadow(
            0 6px 10px
            rgba(12, 45, 114, 0.25)
        );
}

.expertise .card:hover h3 {
    color: #0c2d72;
}


/* =====================================================
   NOS SECTEURS D'ACTIVITÉ
===================================================== */

.sector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;

    align-items: stretch;
}

.sector-card {
    position: relative;

    width: 100%;
    height: 280px;

    overflow: hidden;

    border-radius: 12px;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Image */

.sector-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.5s ease;
}


/* Overlay */

.sector-card .overlay {
    position: absolute;

    inset: 0;

    padding: 30px;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;
    align-items: center;

    text-align: center;

    color: white;

    background:
        linear-gradient(
            to top,
            rgba(5, 20, 60, 0.9),
            transparent
        );
}


/* Titre */

.sector-card .overlay h3 {
    width: 100%;

    margin: 0 0 8px 0;

    text-align: center;
}


/* Texte */

.sector-card .overlay p {
    width: 100%;

    margin: 0;

    text-align: center;
}


/* Hover */

.sector-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}

.sector-card:hover img {
    transform: scale(1.05);
}


/* =====================================================
   POURQUOI NOUS CHOISIR
===================================================== */

.why {
    display: grid;

    grid-template-columns: 1fr 2fr;

    gap: 40px;

    align-items: center;
}


/* Grille */

.why-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

    align-items: stretch;
}


/* Cartes */

.why-grid .feature {
    min-height: 220px;

    padding: 40px 30px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid #eee;

    border-radius: 12px;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Icône */

.why-grid .feature svg {
    width: 32px;
    height: 32px;

    margin-bottom: 25px;

    color: #0c2d72;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* Titre */

.why-grid .feature h3 {
    width: 100%;

    margin: 0 0 10px 0;

    text-align: center;

    color: #0c1f4f;
}


/* Texte */

.why-grid .feature p {
    width: 100%;

    margin: 0;

    text-align: center;

    color: #555;
}


/* Hover */

.why-grid .feature:hover {
    transform: translateY(-8px);

    border-color: #0c2d72;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}

.why-grid .feature:hover svg {
    transform: translateY(-5px) scale(1.15);

    filter:
        drop-shadow(
            0 6px 10px
            rgba(12, 45, 114, 0.25)
        );
}

.why-grid .feature:hover h3 {
    color: #0c2d72;
}


/* =====================================================
   TITRES DES SECTIONS
===================================================== */

.expertise h2,
.sectors h2 {
    text-align: center;
    margin-bottom: 60px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sector-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 650px) {

    .expertise-grid,
    .sector-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   HARMONISATION FINALE DES CARTES
   EXPERTISES / SECTEURS / POURQUOI NOUS CHOISIR
========================================================= */


/* =========================================================
   NOS EXPERTISES
========================================================= */

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: stretch;
}

.expertise .card {
    width: 100%;
    min-height: 280px;
    padding: 40px 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid #eee;
    border-radius: 12px;

    background: #fff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    cursor: pointer;
}

/* Icône */
.expertise .card svg {
    width: 32px;
    height: 32px;

    margin: 0 0 25px 0;

    color: #0c2d72;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

/* Titre */
.expertise .card h3 {
    width: 100%;

    margin: 0 0 15px 0;
    padding: 0;

    min-height: 0;

    display: block;

    text-align: center;

    color: #0c1f4f;
}

/* Texte */
.expertise .card p {
    width: 100%;

    margin: 0;
    padding: 0;

    min-height: 0;

    text-align: center;

    color: #555;
}

/* Hover */
.expertise .card:hover {
    transform: translateY(-8px);

    border-color: #0c2d72;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}

.expertise .card:hover svg {
    transform: translateY(-5px) scale(1.15);

    filter:
        drop-shadow(
            0 6px 10px rgba(12, 45, 114, 0.25)
        );
}

.expertise .card:hover h3 {
    color: #0c2d72;
}


/* =========================================================
   NOS SECTEURS D'ACTIVITÉ
========================================================= */

.sector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;

    align-items: stretch;
}

.sector-card {
    position: relative;

    width: 100%;
    height: 280px;

    overflow: hidden;

    border-radius: 12px;

    background: #fff;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Image */
.sector-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

/* Overlay */
.sector-card .overlay {
    position: absolute;
    inset: 0;

    padding: 30px;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;
    align-items: center;

    text-align: center;

    color: #fff;

    background:
        linear-gradient(
            to top,
            rgba(5, 20, 60, 0.9),
            rgba(5, 20, 60, 0.15) 70%,
            transparent
        );
}

/* Titre */
.sector-card .overlay h3 {
    width: 100%;

    margin: 0 0 8px 0;

    text-align: center;

    color: #fff;
}

/* Texte */
.sector-card .overlay p {
    width: 100%;

    margin: 0;

    text-align: center;

    color: #fff;
}

/* Hover */
.sector-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}

.sector-card:hover img {
    transform: scale(1.05);
}

/* =========================================================
   POURQUOI NOUS CHOISIR
   ALIGNÉ COMME NOS EXPERTISES
========================================================= */

.why {
    display: block;
    padding: 100px 80px;
    text-align: center;
}

/* Titre + texte au-dessus des 4 cartes */
.why-left {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 60px auto;
    text-align: center;
}

.why-left h2 {
    font-size: 42px;
    margin: 0 0 20px 0;
    text-align: center;
}

.why-left p {
    max-width: 800px;
    margin: 0 auto;
    color: #555;
    line-height: 1.8;
    text-align: center;
}


/* Les 4 cartes sur UNE seule ligne */
.why-grid {
    width: 100%;
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    align-items: stretch;
}


/* Même dimensions que les cartes EXPERTISES */
.why-grid .feature {
    width: 100%;
    min-height: 280px;

    padding: 40px 30px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid #eee;
    border-radius: 12px;

    background: #fff;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Icônes */
.why-grid .feature svg {
    width: 32px;
    height: 32px;

    margin: 0 0 25px 0;

    color: #0c2d72;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* Titres */
.why-grid .feature h3 {
    width: 100%;

    margin: 0 0 15px 0;

    text-align: center;

    color: #0c1f4f;
}


/* Textes */
.why-grid .feature p {
    width: 100%;

    margin: 0;

    text-align: center;

    color: #555;
}


/* =========================================================
   HOVER
========================================================= */

.why-grid .feature:hover {
    transform: translateY(-8px);

    border-color: #0c2d72;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}


.why-grid .feature:hover svg {
    transform: translateY(-5px) scale(1.15);

    filter:
        drop-shadow(
            0 6px 10px rgba(12, 45, 114, 0.25)
        );
}


.why-grid .feature:hover h3 {
    color: #0c2d72;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .why {
        padding: 80px 30px;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

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

    .why-left h2 {
        font-size: 34px;
    }

}

.logo {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.footer-logo {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.footer-logo:hover,
.footer-logo:visited,
.footer-logo:active {
    text-decoration: none;
    color: inherit;
}

/* ========== PAGE CONTACT ========== */

.contact-page {
    background-image: url('images/contact-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* optionnel : effet parallaxe léger */
    min-height: 100vh;
    padding: 80px 20px 100px;
}

/* Pour que le formulaire reste bien lisible */
.contact-form {
    background: rgba(255, 255, 255, 0.92); /* fond blanc semi-transparent */
    backdrop-filter: blur(8px);             /* effet verre dépoli (optionnel) */
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    max-width: 700px;
    margin: 0 auto;
}