/* Styles généraux */
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color:var(--bg-color);
  color: var(--text-color);
}


h1 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 11px;
  color: #f29c38;
}

.h2 {
  font-size: 1.6rem;
  margin-bottom: 20px; /* Ajout d'espace sous le titre */
}

.about-container .hero2 h1 {
  color: #f29c38;
  font-size: 29px;
  text-align: center;
  margin: 7px 9px 21px 49px;
}
/* Ligne orange sous les titres */
.h1::after,
.h2::after {
  content: "";
  display: block;
  width: 150px; /* Longueur de la ligne */
  height: 4px; /* Épaisseur de la ligne */
  background-color: #F29C38; /* Couleur orange */
  margin: 5px auto 0; /* Centrage et espacement */
}

/* Conteneur principal */
.about-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: auto;
   width: 70%;
   max-width: 765px;
   margin: 22px auto;
   box-sizing: border-box;
   background-color: var(--bg-color);
   /* border: 2px solid #F29C38; */
   max-height: 475px;
   border-radius: 20px;
   position: relative;
   top: 12px;
   gap: 1px;
   right: 0px;
  }

.p{
  font-size: 0.9rem;
  line-height: 1.2;
}

.hero2 {
  text-align: center;
  bottom: 21px;
  left: 12px;
  position: relative;
}

.about-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1100px;
}

.about-grid.row-1 .about-section {
  flex: 1 1 45%;
}

.about-grid.row-2 .about-section {
  flex: 1 1 28%;
}


.about-section h2 {
  color: var(--text-color);
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 0px;
}

.about-section h2::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background-color: #F29C38;
  margin: 6px auto;
  border-radius: 2px;
}

.about-section p,
.about-section ul {
  font-size: 0.8rem;
  line-height: 1;
  color: var(--text-color);
  text-align: justify;
  max-width: 800px;
  margin: 0 auto;
}


/* ============================
   Responsive Design
============================= */
@media (max-width: 768px) {
  /* Conteneur principal */
  .about-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--bg-color);
    height: auto;
    position: relative;
    max-height: 524px;
    top: 0px;
  }
  h1 {
    font-size: 1.4rem;
    margin-bottom: 11px;
    color: #f29c38;
    }
    .about-section h2 {
      color:var(--text-color);
      font-size: 1rem;
      text-align: center;
      margin-bottom: 12px;
      }
      .about-section p, .about-section ul {
        font-size: 0.8rem;
        line-height: 1;
        color:var(--text-color);
        text-align: justify;
        max-width: 800px;
        margin: 0 auto;
    }
    .h2{
      margin-top: 8px;
    }
    .hero2 {
      text-align: center;
      bottom: 0px;
      left: 4px;
      position: relative;
  }
  p {
    font-size: 0.8px;
}
.about-container .hero2 h1 {
  color: #f29c38;
  font-size: 18px;
  text-align: center;
  margin: 7px 9px 21px 49px;
}
}

@media (min-width: 768px) and (max-width: 1200px) {

  /* Conteneur principal */
.about-container {
  flex-direction: column;
  display: flex;
  height: auto;
  align-items: center;
  max-height: 501px;
  background-color: var(--bg-color);
  top: 15px;
  position: relative;
}
h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 11px;
  color: #f29c38;
  }
  .about-section h2 {
    color:var(--text-color);
    font-size: 1rem;
    text-align: center;
    margin-bottom: 12px;
    }
}