/*-----------------------IMAGES-----------------------------*/
/* pour les images habituelles et parfois des images grandes sur toute la page*/
.conteneur_imag{
	width:80%;
	margin:1rem auto;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	flex:1;
		 min-height:0;
		  min-width:0;
}

.conteneur_imag img{
	width:35%;
	 min-height:0;
		  min-width:0;
}

/*------DIVERS ----------*/
.fond_noir{
width:95%;
background-color:#000000;	
}

/*---- float gauche --------------*/
.img_gauche{
	float: left;
}

/* Réinitialise le flottement après chaque section */
.image_texte_stopFloat {
  clear: both; /* Cela garantit que le flot est annulé à chaque nouvelle section */
  margin-bottom: 2rem; /* Optionnel : ajoutez de l'espace entre les sections */
}

/*------------------------------------VIDEO-------------------------------------*/
.conteneur_video{
	width:75%;
	margin:1rem auto;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	flex:1;
	gap:1%;
	 min-height:0;
		  min-width:0;
}

video {
  width: 70%;
  height: auto;
}

/*========================== Responsive ================*/

/*---------------- Responsive Images --------------------*/

@media (max-width: 768px) {
	.conteneur_imag {
		width: 95%; /* prend plus de place sur mobile */
		gap: 1rem;  /* espace entre les images */
	}

	.conteneur_imag img {
		width: 100%; /* chaque image prend toute la largeur */
	}
}

/* ----------- Responsive Vidéos ----------- */
@media (max-width: 768px) {
	.conteneur_video {
		width: 95%; /* plus de largeur sur mobile */
		flex-direction: column; /* empiler les vidéos si plusieurs */
		gap: 1rem;
	}

	video {
		width: 100%; /* vidéo prend toute la largeur */
	}
}


/*====================== EVENEMENTS VIGNETTES + TEXTE ===================*/

.texte_vignette {
  width: 50%;
  margin: auto;
  display: flex;
  align-items: center;
  padding: 1rem;
  flex-wrap: wrap;
  border: 1px solid red;
}

/* ✅ alterne image/texte sur les lignes paires */
.texte_vignette:nth-of-type(even) {
  flex-direction: row-reverse;
}

.texte, .vignette {
  flex: 1;
  padding: 0;
}

.vignette img {
  width:80% ;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* ================== Responsive ================== */
@media (max-width: 768px) {
  .texte_vignette {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
    text-align: center;
    padding: 0.2rem;
  }

  /*  même les paires passent en colonne */
  .texte_vignette:nth-of-type(even) {
    flex-direction: column;
  }

  .texte, .vignette {
    width: 90%;
  }

  .texte {
    text-align: left;
  }

  .vignette img {
    width: 100%;
    height: auto;
  }
}