/*#region main */

@font-face {
	font-family: 'PinyonScript-Regular';
	src: url('/assets/fonts/PinyonScript-Regular.ttf');
}

main{
	display: flex;
	flex-direction: column;
}

h2{
	text-align: center;
}

section{
	padding: 10px 20px 20px;
	padding-top: 10px;
	scroll-margin-top: 80px; /* hauteur du header pour prendre en compte le header toujours visible */
}

section:nth-child(2n){
	background-color: #2E1515;
}
section:nth-child(2n+1){
	background-color: #69181A;
}

#div-banniere{
	height: 500px;
	width: 100%;
	background-image: url('/assets/images/banniere.jpg');
	background-size: cover;
	background-position: center;

	display: flex;
	justify-content: center;
	align-items: center;
}

#div-banniere > h1{
	font-family: 'PinyonScript-Regular';
	font-size: 9rem;
	color: #C0C0C0;
	text-shadow: black 1px 0 5px;
}

.fleur-transition{
	max-height: 270px;
	max-width: 180px;
	width:20%;
	margin: 0 10px;
	align-self: center;
}

#img-modal{
	max-height: 600px;
	max-width: 600px;
}



/*#region charte */

#section-charte p > span {
	font-weight: bold;
}

#div-charte{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 20px;
}

#div-charte > p{
	min-width: 300px;
	max-width: 400px;
	font-size: 1.20rem !important;
}

#div-charte > img{
	max-width: 480px;
	border-radius: 10px;
}

/*#endregion charte */

/*#region galerie */

#section-galerie{
	padding-bottom: 30px;
}

#div-carousel-galerie{
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 20px;
}

#div-carousel-galerie > div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width:30%;
	min-height: 100%;
}

#div-carousel-galerie > div > h3{
	text-align: center;
}

.carousel-item img{
	width: 100%;
	border-radius: 10px;
}

.carousel-indicators {
	bottom: -40px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
	background-color: black;
	border-radius: 45%;
}

.carousel-control-prev, .carousel-control-next {
	opacity: 0.7;
}

.carousel{
	max-width: 500px;
}

/*#endregion galerie */

/*#region localisation */

#div-localisation{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

#div-localisation > div > p {
	margin: 0 10px 10px 20px;
	min-width: 340px;
} 

iframe{ /* pour la carte google */
	min-width: 250;
	width: 400px;
	height: 300px;
	border-radius: 10px;
}

/*#endregion localisation */

/*#region responsive */

	@media screen and (min-width: 2000px) {
		#div-banniere{
			width: 2000px;
			align-self: center;
		}


			
	}

	@media screen and (max-width: 1200px) {
		
		.fleur-transition{
			max-height: 210px;
			max-width: 140px;
		}

		#div-banniere{
			height: 400px;
		}

		#div-banniere > h1 {
			font-size: 7.5rem;
		}
	}

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

		#div-charte > img{
			max-width: 360px;
			border-radius: 10px;
		}

		#div-charte > p{
			font-size: 1.10rem !important;
		}

		#section-localisation .fleur-transition{
			display: none;
		}

		#div-localisation > div > p{
			margin-right: 0 ;
		}
	}

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

		#div-banniere{
			height: 300px;
		}

		#div-banniere > h1 {
			font-size: 5.5rem;
		}
	}

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

		/*#region charte */
		#div-charte{
			flex-direction: column;
			align-items: center;
			gap: 20px;
		}

		#div-charte > p{
			width: 100%;
			max-width: 100%;
			font-size: 1.05rem !important;
		}

		#div-charte > img{
			width: 75%;
		}
		/*#endregion charte */

	}

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

		#div-banniere{
			height: 250px;
		}

		#div-banniere > h1 {
			font-size: 4.5rem;
		}

		/*#region localisation */

		#div-localisation > div > p{
			min-width: 260px;
		}

		iframe{
			max-height: 230px;
			min-width: 200px;
		}

		/*#endregion localisation */

		.fs-5{
			font-size: 1.1rem !important;
		}

		.fs-3{
			font-size: 1.25rem !important;
		}

		.fs-4{
			font-size: calc(1rem + .3vw) !important;;
		}
	}

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

		#div-banniere{
			height: 200px;
		}

		#div-banniere > h1 {
			font-size: 3.7rem;
		}

		/*#region localisation */

		#section-localisation .fleur-transition{
			max-height: 150px;
			max-width: 100px;
			transform: rotate(-90deg);
			display: block;
			margin: 0;
			width: inherit;
		}

		#div-localisation{
			flex-direction: column;
			align-items: center;
			gap: 0px;
		}

		#div-localisation > div > h3{
			text-align: center;
			margin: 0;
		}

		#div-localisation > div > p{
			min-width: 240px;
			margin: 0;
		}

		iframe{ /* pour la carte google */
			width: 90%;
			height: 250px;
		}

		/*#endregion galerie */
	
		#img-modal{
			max-height: 90vh;
			max-width: 90vw;
		}

	}

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

		#div-banniere{
			height: 175px;
		}

		#div-banniere > h1 {
			font-size: 3rem;
		}

		.fleur-transition, #section-annonce .fleur-transition{ /* overide des autres médias queries */
			display:none;
		}

		#div-charte > img{
			display: none;
		}

		#div-charte > p {
			min-width: 225px;
		}

		/*#region galerie */

		#div-carousel-galerie{
			flex-direction: column;
			align-items: center;
			gap: 20px;
		}

		#div-carousel-galerie > div > h3{
			text-align: center;
		}

		#div-carousel-galerie > div{
			width:90%;
		}

		/*#endregion galerie */

		.fs-5{
			font-size: 1rem !important;
		}

		.fs-3{
			font-size: 1.25rem !important;
		}

		.fs-4{
			font-size: calc(1rem + .3vw) !important;;
		}
	}

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

		#div-banniere{
			height: 150px;
		}	
		
		#div-banniere > h1 {
			font-size: 2.5rem;
		}
	}
/*#endregion responsive */

/*#endregion main */