.white-section {
  background-color: var(--color-off-white);
  padding: 20px 20px;
}

.article-container {
  width: 900px;
  max-height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  margin-top: 100px;
}

.text-article h1 {
  text-transform: uppercase;
  margin-top: 100px;
}

.text-article h2 {
  padding-bottom: 0;
  margin-top: 50px;
  margin-bottom: 10px;
}

.article-container h3,
#sous-titre h2 {
  padding: 20px 0 0 10px;
  font-size: var(--fs-20);
}

/*------------------- Page Circuits du trimestre -------------*/

#circuits-trimestre {
  width: 100%;
  /* Utilisation de min-height au lieu de height pour laisser la page grandir au besoin */
  min-height: auto;
}

#circuits-trimestre div {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 100px; /* Réduit de 200px à 40px pour éviter de trop pousser le contenu */
}

#circuits-trimestre img {
  width: 60%; /* Ajustement de la taille desktop pour une meilleure lisibilité */
  max-width: 900px; /* Empêche les images de devenir gigantesques sur très grand écran */
  height: auto; /* PRESERVE LE RATIO D'IMAGE (remplace height: 50%/100%) */
  object-fit: contain;
  margin-bottom: 20px;
}

/*-------------------------- Responsive de la page circuits ------------------------*/

/* Retrait des hauteurs fixes (vh) pour laisser le scroll naturel fonctionner */
@media (max-width: 1600px) {
  #circuits-trimestre img {
    width: 70%;
  }
}

@media (max-width: 800px) {
  #circuits-trimestre div {
    margin-top: 120px;
  }
  #circuits-trimestre img {
    width: 85%;
  }
}

@media (max-width: 420px) {
  #circuits-trimestre img {
    width: 98%;
  }
}

/********************** Responsive pour les pages règlements, statuts***************************/

@media (max-width: 1600px) {
  .container_section {
    margin-bottom: 10px;
    margin-top: 50px;
    margin-top: 10px;
  }
}
@media (max-width: 1100px) {
  .article-container {
    width: 70%;
  }
}
@media (max-width: 810px) {
  .article {
    margin-top: 10px;
  }
  .article-container {
    width: 90%;
  }
  .article-container h1 {
    margin-top: 10px;
    padding-top: 10px;
  }
}
@media (max-width: 480px) {
  #icon-fleche {
    top: 40vh;
    right: 10px;
    width: 30px;
    height: 30px;
    z-index: 99;
    top: 70vh;
  }
  .article-container h1 {
    /*padding: 20px 0;*/
    font-size: var(--fs-24);
  }

  .article-container h2 {
    padding: 10px 0 0 10px;
    font-size: var(--fs-24);
  }
  .article-container h3 {
    padding: 20px 0 0 10px;
    font-size: var(--fs-20);
  }
  .article-container p {
    padding: 10px;
    line-height: 1.4;
    font-size: var(--fs-16);
    margin-bottom: 10px;
  }
  /*#btn-retour {
  font-size: var(--fs-16);
  
}*/
}