body {
    background-color: #F5F5F5;
    font-family: "roboto";
    height: 100vh;
 
   
}
a {
    text-decoration: none;
    color: #303131;
}
nav {
   
    font-family: 'roboto';
    font-size: 30px;
   
}
/* nav couleur */
.bg-color {
  background: linear-gradient(to right, white, #376DAA, #376DAA, #376DAA   );
}
/* media query du nav */
@media (max-width: 767.98px) {
  .navbar-nav {
    margin-left: auto !important;
  }

}
.hero {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  
}

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

/* Texte par-dessus l'image */
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #F5F5F5;
  text-align: center;
  background-color: #376DAA;
  padding: 20px 40px;
  border-radius: 12px;
}

.hero-text h1 {
  font-size: 2.5rem;
  color: #DC7627;
  margin-bottom: 0.5rem;
  text-shadow: #313131 2px 2px 4px;
}

.hero-text p {
  font-size: 1.2rem;
  color: #F5F5F5;
}


.siteWeb {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    margin-top: 100px;
}

.siteWeb p {
    color: #303131;
    font-family: 'Roboto', sans-serif;
    margin-top: 10px;
}

.btn-siteWeb {
    background-color: #DC7627;
    color: #F6F6F7;
    width: 150px;
    border: none;
    padding: 10px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 15px;
}

.formation {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    margin-top: 100px;
    margin-bottom: 100px;
}

.formation p {
    color: #303131;
    font-family: 'Roboto', sans-serif;
    margin-top: 10px;
}

.btn-formation {
    background-color: #DC7627;
    color: #F6F6F7;
    width: 150px;
    border: none;
    padding: 10px;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 15px;
}

/* ✅ Harmonisation des blocs */
.box-siteWeb,
.box-formation {
    width: 40vw;
    max-width: 600px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ✅ Images harmonisées */
.logo-siteWeb img,
.img-formation img {
    width: 35vw;
    height: 25vh;
    object-fit: contain;
}

@media (max-width: 767.98px) {
  .siteWeb,
  .formation {
    flex-direction: column;
    align-items: center;
  }

  .box-siteWeb,
  .box-formation {
    width: 90vw;
    max-width: 100%;
  }

  .logo-siteWeb img,
  .img-formation img {
    width: 80vw;
    height: auto;
  }

  .btn-siteWeb,
  .btn-formation {
    width: 80%;
    margin: 20px auto 15px auto; /* ✅ centré aussi en responsive */
  }

  .navbar-nav {
    margin-left: auto !important;
  }
}


.btn-service {
    background-color: #DC7627;
    color: #F6F6F7;
  border-radius: 20px;
 padding: 10px;

   
}
/* footer */
footer{
    background-color: #313131;    
    height: 80px;
    font-family: 'roboto';   
}
footer {
    color:#F5F5F5;
    text-align: center;
    align-content: center;
    font-size: 20px;    
}
footer p {
    color: #F5F5F5;
    text-decoration: none;
}

p {
   color: black;
    font-family: 'roboto';
    font-size: 20px;
}



/* page apropos */
h2{
    color:#313131;
    font-size: 48px ;
    text-align: center;
    margin: 50px;
  
    
}
/* Styles de base (desktop & grands écrans) */
.apropos1, .apropos2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;                
  padding: 2rem;
}

.paragraph1, .paragraph2,
.img-apropos1, .img-apropos2 {
  flex: 1 1 45%;
  max-width: 45%;
}

.img-apropos1 img,
.img-apropos2 img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.img-apropos1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-apropos2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 992px) {
  .paragraph1, .paragraph2,
  .img-apropos1, .img-apropos2 {
    flex: 1 1 100%;
    max-width: 100%;
    text-align: center;
  }

  .apropos1, .apropos2 {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
  }
}

@media (max-width: 576px) {
  .apropos1 p, .apropos2 p {
    font-size: 16px;
    padding: 0 1rem;
  }

  .apropos1, .apropos2 {
    padding: 1rem;
  }
}