/* ---------------------------------- */
/* PAGE CONTACT                       */
/* ---------------------------------- */

.accueil {
	display: flex;
	padding: 0 15px;
}

.infos {
	display: flex;
	flex-direction: column;
	width: 60%;
	padding: 10px;
}

.matchs {
	display: flex;
	flex-direction: column;
	width: 40%;
	padding: 10px;
}

#image-carousel {
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 15px;
}

.boutique-photos {
	display: flex;
	width: 100%;
	margin-bottom: 15px;
}

.boutique-index {
	display: flex;
	flex-direction: column;
	width: 50%;
	padding-right: 7px;
}

.boutique-titre, .photos-titre {
	text-align: center;
	font-size: 0.9rem;
	background-color: #202a4f;
	border-radius: 4px 4px 0 0;
	padding: 5px;
}

#boutique-carousel {
	height: 300px;
	border-radius: 0 0 4px 4px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.75);
}

.photos-index {
	display: flex;
	flex-direction: column;
	width: 50%;
	padding-left: 7px;
}

#photos-carousel {
	height: 300px;
	border-radius: 0 0 4px 4px;
	overflow: hidden;
}

#photos-carousel,
#photos-carousel .splide__track,
#photos-carousel .splide__list,
#photos-carousel .splide__slide,
#boutique-carousel,
#boutique-carousel .splide__track,
#boutique-carousel .splide__list,
#boutique-carousel .splide__slide {
  height: 300px; /* fixe la hauteur à tous les niveaux du carrousel */
}

/* Texte par-dessus l'image */
.slide-text {
	position: absolute;
	bottom: 30px;
	left: 30px;
	color: #fff;
	text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

.slide-titre {
	margin: 0 0 5px 0;
	font-size: 22px;
}

.slide-text p {
	margin: 0;
	font-size: 16px;
}

/* Forcer les images du carrousel à occuper toute la largeur du slide */
.carousel-haut img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover; /* pour que l’image remplisse l’espace si les proportions varient */
}

.carousel-gauche {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  /*background-color: rgba(0,0,0,0.05);*/ /* optionnel pour voir le cadre */
}

.carousel-gauche img {
  width: 90%;       /* taille max horizontale */
  height: 90%;      /* taille max verticale */
  object-fit: contain; /* ne rogne pas l’image */
  display: block;
}

.carousel-droite img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* remplit toute la hauteur, garde le ratio, rogne si nécessaire */
	display: block;
}

table {
	width: 100%;
	box-shadow: 0 0 2px black;
	border-radius: 4px;
	overflow: hidden;
	border-collapse: collapse;
	font-size: 0.9rem;
	color: #333;
}

.titre {
	background-color: #202a4f;
	color: white;
	padding: 5px 0;
}

tbody tr {
	background-color: #ddd;
}

tbody tr:nth-child(odd) {
	background-color: #f2f2f2;
}

tbody td {
	padding: 5px 12px;
	vertical-align: middle;
}

.last table {
	margin-bottom: 15px;
}

.next table {
	margin-bottom: 15px;
}

.resultats td.equipe-domicile {
	text-align: left;
	width: 40%;
}

.resultats td.equipe-exterieur {
	text-align: right;
	width: 40%;
}

.score {
	min-width: 70px;
	text-align: center;
	background-color: rgba(0,0,0,0.1);
}

.victoire {
	background-color: #50af5d!important;
	color: white!important;
}

.defaite {
	background-color: #d94343!important;
	color: white!important;
}

.heure {
	text-align: center;
}

.date {
	text-align: center;
}

.avenir td.equipe-domicile {
	text-align: right;
}

.avenir td.equipe-exterieur {
	text-align: left;
}

.avenir td:nth-child(odd) {
	background-color: rgba(0,0,0,0.1);
}


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

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

}

@media screen and (max-width: 992px) {
	.matchs {
		width: 50%;
	}
}

@media screen and (max-width: 768px) {
	.accueil {
		display: flex;
		flex-direction: column;
	}

	.infos {
		width: 100%;
	}

	.matchs {
		width: 100%;
	}

	#image-carousel {
		order: 1;
	}

  .last {
  	order: 2;
  }

  .next {
  	order: 3;
  }

  .boutique-photos {
  	order: 4;
  }

  .elfsight-app-c22a05ed-d2a2-41d2-92ab-051ebc3e9588 {
  	order: 5;
  }

  .maps {
  	order: 6;
  }

  .infos,
  .matchs {
    display: contents; /* les enfants deviennent visibles au conteneur parent flex */
  }
}

@media screen and (max-width: 576px) {

}