/*=================================================================================*/
/*------------------------------Page Raids en solo ------------------------------*/
/*=================================================================================*/

/* ___________________________ selon gemini __________________________*/
.white-section {
  background-color: var(--color-off-white);
  padding: 20px 20px;
}

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

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

/* --- Base des conteneurs --- */
.texte1-container,
.image-container {
  flex: 1 1 400px;
  max-width: 100%; /* Empêche le débordement sur petit écran */
  height: auto;
}

.texte1-container p {
  padding-bottom: 15px;
}

.image-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.image-container img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
}

/* --- Section Photos de Raid --- */
.foto-raid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px; /* Réduit pour un meilleur rendu de base */
  padding: 10px;
  width: 100%; /* CHANGEMENT : 100% au lieu de 1200px fixes qui cassaient le responsive */
  max-width: 1200px;
  margin: 50px auto 0 auto; /* Centre le bloc lui-même */
}

.foto-raid img {
  width: 100%; /* Devient fluide */
  max-width: 400px; /* Ne dépassera jamais sa taille max */
  height: auto;
  display: block; /* Évite les espaces vides indésirables */
}



/*=================================================================================*/
/*----------------------------------- RESPONSIVE ----------------------------------*/
/*=================================================================================*/

@media (max-width: 950px) {
  .common-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Réduit l'espace global entre l'image d'intro et le texte */
  }

  .texte1-container,
  .image-container {
    width: 100%;
    height: fit-content;
  }

  /* Espace réduit sous le texte pour coller un peu plus aux photos du raid */
  .texte1-container {
    margin-bottom: 10px; 
  }

  .image-container img {
    max-width: 450px; 
  }

  .foto-raid {
    flex-direction: column;
    margin-top: 15px; /* Réduit l'espace entre le texte du dessus et la première image */
    gap: 30px;        /* Espace uniforme de 30px entre TOUTES les images (si HTML regroupé) */
    width: 100%;
  }
}

@media (max-width: 600px) {
  .white-section {
    padding: 15px 10px; 
  }

  .mainTwo-container {
    margin-top: 10px;
  }
  
  .common-container {
    gap: 10px; /* Encore plus serré sur mobile */
  }

  .texte1-container,
  .image-container {
    flex: 1 1 auto; /* Plus souple que 200px qui peut pousser du contenu */
  }

  .image-container img,
  .foto-raid img {
    width: 100%; 
    max-width: 100%; 
    height: auto;
  }

  .image-container img {
    object-fit: contain; 
  }

  .foto-raid {
    margin-top: 10px; /* Réduit l'espace texte/images sur mobile */
    gap: 20px;        /* Espace légèrement plus petit (20px) entre les images sur mobile */
  }
}