body {
  font-family: Arial;
  margin: 0;
  padding: 0;
}
p{
  text-align: justify;
  word-spacing: normal;
  hyphens: auto; /* Ajoute la césure automatique des mots */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
/* Style du héros avec l'image de fond */
.hero {
  position: relative;
  background-image: url('/assets/Images/slide/slide5.webp'); /* Remplace avec ton image */
  background-size: cover;
  background-position: center;
  margin-top: 120px;
  width: 100%;
  height: 850px;

}
  /* Overlay pour la couleur semi-transparente */
  .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 98, 51, 0.2); /* Couleur avec faible opacité */
  }
  
  /* Style du contenu du héros (au-dessus de l'image) */
  .hero-content {
    position: absolute;
    top: 50%;
    margin-left: 30%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Pour placer le contenu au-dessus de l'overlay */
    padding: 20px;
    color: white;
  }
  .hero-content h1{
    font-size: 3vw;
    text-transform: uppercase;
    font-weight: bolder;
   
  }
  
  /* Media Queries pour la responsive design */
  @media only screen and (max-width: 1300px) {
    .hero {
      height: 600px;
      background-position: center;
    
    }
  }
  
  @media only screen and (max-width: 768px) {
    .hero {
      width: 100%;
      background-position: center;
    
    }
    .hero-content {
      padding: 10px; /* Rembourrage réduit pour les écrans plus petits */
    }
  
    .hero-content h1 {
      font-size: 30px; /* Taille de police réduite */
      margin-left: 10%;
      width: 100%;
    }
  }
  
  @media only screen and (max-width: 480px) {
    .hero {
     height: 200px;
     margin-top: 110px;
    }
    .hero-content {
      padding: 5px; /* Rembourrage encore plus réduit */
    }
  
    .hero-content h1 {
      font-size: 15px; /* Taille de police encore plus petite */
      margin-left: 10%;
      width: 100%;
    }
  }
  /********************************************************************************/
  /* Style pour le titre principal en majuscules */
.titre {
    text-transform: uppercase;
    text-align: center;
    color: #FF6233;
    font-size: 1.9em; /* Taille de police du titre */
    font-weight: bold; /* Gras pour le titre principal */
    margin-bottom: 20px; /* Espacement en bas du titre */
    margin-top: 20px;
}

/* Style pour le sous-titre */
.soustitre {
    text-align: center;
    font-size: 1.5em; /* Taille de police du sous-titre */
    font-weight: normal; /* Police normale pour le sous-titre */
    color: #333; /* Couleur de texte pour le sous-titre */
    margin-bottom: 20px; /* Espacement en bas du sous-titre */
}
@media (max-width: 768px) {
    .titre {
        font-size: 1.5em; /* Réduit la taille de police du titre sur les petits écrans */
    }

    .soustitre {
        font-size: 1em; /* Réduit la taille de police du sous-titre sur les petits écrans */
        margin-bottom: 15px; /* Ajuste l'espacement en bas du sous-titre sur les petits écrans */
    }
}
/************************************************************************************************/
/* Style de la section contenant les deux blocs */
.section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  
}

/* Style du bloc de gauche */
.left-block {
  width: 30%; /* Ajuste la largeur selon les besoins */
  margin-left: 10px;
  padding: 20px;
  display: flex;
  
}



/* Style de l'image avec fond */
.image-background {
  position: relative;
  width: 80%;
  height: auto;
  overflow: hidden;
}

/* Couche de couleur de fond */
.background-overlay {
  position: absolute;
  top: -40%; /* Décalage vers le haut */
  left: -40%; /* Décalage vers la gauche */
  width: 100%;
  height: 90%; /* Ajuste la hauteur pour couvrir le décalage */
  background-color: #FF6233; /* Couleur #ff6233 avec une faible opacité */
  z-index: 1;
}

/* Style de l'image */
.image-background img {
  margin-top: 10%;
  margin-left: 10%;
  display: block;
  width: 90%; /* Ajuste la taille de l'image */
  height: auto;
  position: relative;
  z-index: 2;
  border-radius: 10px; /* Ajoute des bords arrondis */
}

/* Style du bloc de droite */
.right-block {
  width: 50%; /* Ajuste la largeur selon les besoins */
  padding: 20px;
  text-align: center;

}

/* Style du titre principal */
.right-block h2 {
  color: #000000;
  margin-bottom: 20px;
  font-size: 26px;
}

/* Style des blocs de contenu */
.content-block {
  margin-bottom: 20px;
}

/* Style des sous-titres */
.content-block h3 {
  margin: 10px 0;
  font-size: 20px;
}

/* Style du contenu */
.content-block p {
  margin: 0;
  color: #555;
  text-align: left;

}
.content-block ul li{
  text-align: left;
}
/* Style du bouton arrondi */
.button-bouttons {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #ff6233;
  background-color: transparent;
  color: #15171C;
  background-color: #ff6233;
  border-radius: 30px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s, color 0.3s;
}

.button-bouttons:hover {
  border: 2px solid #ff9c33;
  background-color: #ff9c33;
  color: #fff;
}

/* Media Queries pour la responsive design */
@media (min-width: 1024px) {
  .section {
      flex-direction: row;
      justify-content: center;
  }

  .left-block,
  .right-block {
      width: 45%;
      margin: 20px;
  }
}
@media only screen and (max-width: 768px) {
  .section {
    flex-direction: column;
  }

  .left-block, .right-block {
    width: 70%;
  }


  .right-block img {
    width: 80%; /* Réduit la taille de l'image */
  }
}
/* Media Queries pour la responsive design */
@media only screen and (max-width: 480px) {
  .right-block h2 {
    color: #000000;
    margin-bottom: 20px;
    font-size: 20px;
  }

  .left-block {
    width: 100%; /* Ajuste la largeur selon les besoins */
    color: #FF6233;
    
  }
  .image-background img {
    width: 100%;
    height: 200px;
  }


}


/*********************************************************************************************/
/* Style de la ligne séparatrice */
.separator {
  width: 100%;
  height: 5px; /* Épaisseur de la ligne */
  background-color: #ff6233; /* Couleur de la ligne */
}
  /* Ajout de media queries pour la responsive design */
@media only screen and (max-width: 768px) {
    .separator{
      height: 4px;
    }/* Réduit l'épaisseur de la ligne pour les écrans plus petits */
  }
/*********************************************************************************************/
/* Style de la section contenant les deux blocs */
.section2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Style du bloc de gauche */

.left {
  width: 30%; /* Ajuste la largeur selon les besoins */
  margin-left: 10px;
  padding: 20px;
  display: flex;
  position: relative;
  animation: slideIn 2s ease-out; /* Animation de droite vers la gauche au chargement */
}

/* Définition de l'animation de droite vers la gauche */
@keyframes slideIn {
  from {
      transform: translateX(100%); /* Commence en dehors de l'écran à droite */
  }
  to {
      transform: translateX(0); /* Se termine à sa position initiale */
  }
}

/* Style de l'image avec fond */
.image {
  position: relative;
  width: 80%;
  height: auto;
  overflow: hidden;
}

/* Couche de couleur de fond */
.overlay {
  position: absolute;
  bottom: -30%; /* Décalage vers le haut */
  right: -30%; /* Décalage vers la gauche */
  width: 100%;
  height: 120%; /* Ajuste la hauteur pour couvrir le décalage */
  background-color: #FF6233; /* Couleur #ff6233 avec une faible opacité */
  z-index: 1;
}

/* Style de l'image */
.image img {
  margin-bottom: 10%;
  margin-right: 10%;
  display: block;
  width: 90%; /* Ajuste la taille de l'image */
  height: auto;
  position: relative;
  z-index: 2;
  border-radius: 10px; /* Ajoute des bords arrondis */
}

/* Style du bloc de droite */
.right {
  width: 50%; /* Ajuste la largeur selon les besoins */
  padding: 20px;
}

/* Style du titre principal */
.right h2 {
  color: #000000;
  margin-bottom: 20px;
  font-size: 26px;
  text-align: center;
}

/* Style des blocs de contenu */
.content {
  margin-bottom: 20px;
  text-align: center;
}

/* Style des sous-titres */
.content h3 {
  margin: 10px 0;
  font-size: 20px;
}
/* Style du contenu */
.content p {
  margin: 0;
  color: #555;
  text-align: justify;
}
/* Style du bouton arrondi */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #ffbd59;
  background-color: transparent;
  color: #ffbd59;
  border-radius: 30px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s, color 0.3s;
}

.button:hover {
  border: 2px solid #ff6233;
  background-color: #ff6233;
  color: #fff;
}
/* Media Queries pour la responsive design */
@media (min-width: 1024px) {
  .section2 {
    flex-direction: row;
    justify-content: center;
   
}

.left,
.right {
    width: 45%;
    margin: 20px;
}
}
@media only screen and (max-width: 768px) {
  .section2 {
    flex-direction: column;
    text-align: center;
  }
  .section2 .left .image{
    margin-left: 50px;
  }
  .section .left-block .image-background{
    margin-left: 50px;
  }

  .left, .right {
    width: 70%;
  }

  .right img {
    width: 80%; /* Réduit la taille de l'image */
  }
}
@media only screen and (max-width: 480px) {
  .right h2 {
    color: #000000;
    margin-bottom: 20px;
    font-size: 20px;
    text-align: center;
  }
  .section2 .left .image{
    margin-right: 50px;
  }
  .section .left-block .image-background{
    margin-right: 50px;
  }
  .left {
    width: 100%;
    margin: 20px;
}
.right {
  padding: 20px 2px;
}
.right-block {
  padding: 20px 2px;
}
}
/*************************************************************************************************/
/* Style de la section */
.section3 {
  max-width: 1200px;
  margin: 20px;
  display: flex;
  justify-content: space-between; /* Aligne les blocs de gauche à droite avec un espacement */
 text-align: justify;

}

/* Style des blocs */
.left-bloc {
  justify-content: center;
  margin-right: 10%;
  margin-top: 10px;
  width: calc(50% - 10px); /* Ajuste la largeur selon les besoins et soustrait l'espacement */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  text-align: center;
 
}
.right-bloc {
  justify-content: center;
  margin-top: 10px;
  width: calc(50% - 10px); /* Ajuste la largeur selon les besoins et soustrait l'espacement */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.right-bloc p {
  text-align: left;
}
 .left-bloc p {
  text-align: left;
}
.left-bloc, .right-bloc {
  justify-content: center;
  margin-right: 10%;
  margin-top: 10px;
  width: calc(50% - 10px); /* Ajuste la largeur selon les besoins et soustrait l'espacement */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition pour transform et box-shadow */
}

/* Animation au survol */
.left-bloc:hover, .right-bloc:hover {
  transform: translateY(-5px); /* Déplacement vers le haut */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Effet d'ombre plus prononcé */
}

.all{
  margin: 20px;
  background-color:#8e8a8a ;
}
.titreb {
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  font-size: 1.9em; /* Taille de police du titre */
  font-weight: bold; /* Gras pour le titre principal */
  margin-bottom: 10px; /* Espacement en bas du titre */
  padding-top: 15px;
}
/* Style des sous-titres */
.left-bloc h3,
.right-bloc h3 {
  color: black;
  text-align: center;
  margin: 10px 0;
  font-size: 20px;
}

/* Style du contenu */
.left-bloc p,
.right-bloc p {
  margin: 0;
  color: black;
  background-color: #FF6233;
  margin-top: 10%;
  margin-left: 60px;
  width: calc(80% - 10px); /* Ajuste la largeur selon les besoins et soustrait l'espacement */
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;

}

@media only screen and (max-width: 480px) {
  .left-bloc p,
  .right-bloc p  {
    margin-left: 35px;
}
}

/* Style du bouton personnalisé */
.custom-buttons {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #FF6233;
  background-color: transparent;
  background-color: #FF6233;
  color: #15171C;
  border-radius: 30px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s, color 0.3s;
}

.custom-buttons:hover {
  background-color: #f4a810;
  color: #FFFF;
  border: 2px solid #f4a810;
}
@media (min-width: 1024px) {
  .section3 {
      flex-direction: row;
      justify-content: center;

      max-width: 1200px;
      margin: auto;
  }

  .left-bloc, .right-bloc {
      flex: 1;
      margin: 10px 20px;
  }
}
@media only screen and (max-width: 768px) {
  .section3 {
    flex-direction: column;
  }

  .left-bloc, .right-bloc {
    width: 100%;
  }
  .titre {
  font-size: 1.5em; /* Réduit la taille de police du titre sur les petits écrans */
}
}
/*************************************************************************************************/
/********************************************** Styles de la section des partenaires *******************************/
.partners-section {
  text-align: center; /* Centre le texte à l'intérieur de la section */
  padding: 20px; /* Ajoute un espacement de 20px autour de la section */
  background-color: #f9f9f9; /* Couleur de fond pour la section */
}

.partners-section h2 {
  font-size: 1.9em; /* Taille de la police du titre */
  margin-bottom: 10px; /* Ajoute un espacement en bas du titre */
  font-weight: bold; /* Rend le texte du titre en gras */
  text-transform: uppercase; /* Met le texte du titre en majuscules */
  color: #ff6233; /* Couleur du texte du titre */
}

.partners-container {
  display: flex; /* Utilise Flexbox pour la disposition des logos */
  flex-wrap: wrap; /* Permet aux logos de passer à la ligne suivante si nécessaire */
  justify-content: center; /* Centre les logos horizontalement */
  gap: 20px; /* Ajoute un espacement entre les logos */
}

.partner-logo {
  flex: 1 1 calc(25% - 20px); /* Les logos occupent 25% de la largeur moins l'espacement */
  display: flex; /* Utilise Flexbox pour centrer les images à l'intérieur du conteneur */
  justify-content: center; /* Centre les images horizontalement */
  align-items: center; /* Centre les images verticalement */
  max-width: 200px; /* Limite la largeur maximale des logos */
  padding: 10px; /* Ajoute un espacement interne */
  box-sizing: border-box; /* Inclut le padding dans la largeur et la hauteur des éléments */
}

.partner-logo img {
  max-width: 100%; /* Assure que l'image ne dépasse pas la largeur du conteneur */
  height: auto; /* Maintient le ratio de l'image */
}

/* Styles responsifs pour les écrans plus petits */
@media (max-width: 768px) {
  .partner-logo {
      flex: 1 1 calc(50% - 20px); /* Les logos occupent 50% de la largeur moins l'espacement */
  }
}

@media (max-width: 480px) {
  .partner-logo {
      flex: 1 1 100%; /* Les logos occupent 100% de la largeur */
  }
}


.hidden {
  display: none;
}

.extraContent {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

/* Exemple pour .left-block et .right-block */
.left-block, .right-block {
  margin-left: 0; /* Supprime la marge à gauche */
  margin-right: 0; /* Supprime la marge à droite */
  /* Les autres styles restent inchangés */
}

/* Pour .left, .right, .left-bloc, et .right-bloc */
.left, .right, .left-bloc, .right-bloc {
  margin-left: 0; /* Supprime la marge à gauche */
  margin-right: 0; /* Supprime la marge à droite */
  /* Les autres styles restent inchangés */
}
/* Exemple pour .section, .section2, et .section3 */
.section, .section2, .section3 {
  margin-left: 0; /* Supprime la marge à gauche */
  margin-right: 0; /* Supprime la marge à droite */
  /* Les autres styles restent inchangés */
}
/* Exemple pour .partners-section et .partners-container */
.partners-section, .partners-container {
  margin-left: 0; /* Supprime la marge à gauche */
  margin-right: 0; /* Supprime la marge à droite */
  /* Les autres styles restent inchangés */
}