* **************************************************************************************************** */
/* *********************************   Page Actualités      ***************************** */
/* ******************************************************************************************************* */

/************************Section 1 (casse-croute) *****************************/
.blue-section {
  background-color: var(--color-light-blue);
  padding: 20px 20px;
}


.mainTwo-container {
  /* On s'assure qu'aucune hauteur fixe ne bloque le contenu */
  height: auto !important; 
  min-height: min-content;
}

.common-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px; /* Ajoute un peu de padding en haut/bas pour respirer */
  flex-wrap: wrap;
}

.texte1-container, .image-container {
  /* flex: 1 1 400px;
  min-width: 300px; */
  flex: 1 1 400px;
  min-width: 300px;

  height: auto; /* Force les blocs à s'adapter à leur contenu */
}
.texte1-container p{
  padding-bottom: 15px;
}
.image-container {
  display: flex;
  justify-content: center;
  overflow: visible; /* Sécurité : empêche le masquage du contenu */
  width: 70%;
 
}

.image-container img {
  width: 80%;
  max-width: 600px;
  height: auto; /* Indispensable pour garder le bon ratio sans écraser */
  display: block; /* Supprime l'espace résiduel sous l'image */
  
}
/* -----------------------Responsive  section 1--------------------------- */
@media (max-width: 950px){
 .text-actu{
  margin-top: 30px; 
}
.container_section h2{
  padding: 20px  20px ;
}
}
@media (max-width: 500px){

 #rond-norm  #last-container{
    margin-top: 30px;
}

 #big-rando  #middle-container{
    margin-top: 30px;
}

.img-actu img{
  height:300px;
  width: 300px;
  margin: auto;

}
.text-actu{
  margin-top: 10px;
}
.container section{
  margin-top: 20px;
} 
.container_section h2{
  padding: 10px 20px;
}
}

/************************Section 2 (les grandes sorties) *****************************/
.white-section {
  background-color: var(--color-off-white);
  padding: 20px 20px;
}

/************************Section 3 (Ronde normandes) *****************************/
.blue-section {
  background-color: var(--color-light-blue);
  padding: 20px 20px;
}