@import url('https://fonts.googleapis.com/css2?family=Mada:wght@200;300;400;500;600;700;900&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{font-size: 62.5%;}

body{
	font-family: 'Mada', sans-serif;
	font-size: 1.6vw;
}


/*--------------------VARIABLES-------------------- */
:root{
	--orange:#F28E00;
	--white:white;
	--green:#A2C617;
}

.white {color: var(--white);}
.orange {background: var(--orange);}
.green {background: var(--green);}
.border {
	border-top-right-radius: 30rem;
	border-bottom-left-radius: 30rem;
}


/*--------------------GRID-------------------- */
.grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
}

.grid_gap {grid-column-gap: 5%;}

.grid_nav {
	grid-template-rows: 100vh;
	position: relative;
}

.span1 {grid-column: span 1;}
.span2 {grid-column: span 2;}
.span3 {grid-column: span 3;}
.span4 {grid-column: span 4;}
.span5 {grid-column: span 5;}
.span6 {grid-column: span 6;}
.span7 {grid-column: span 7;}
.span8 {grid-column: span 8;}


/*--------------------GENERAL-------------------- */
.wrapper {
	width: 80%;
	margin: auto;
}

.center {
	display: flex;
	justify-content: center;
}

a {
	text-decoration: none;
	font-weight: 400;
	transition: color .5s ease;
	color: white;
}

a:hover {color: var(--green);}

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

p {line-height: 3.5rem;}


/*--------------------TITRES-------------------- */
h1 {
	font-size: 7vw;
	font-weight: 900;
	line-height: 13vh;
}

h2, h4 {
	font-size: 2.8vw;
	font-weight: 700;
}

h3, figcaption {font-size: 2.4vw;}

h1, figcaption, h4 {text-transform: uppercase;}

h1, h2, h3 {text-align: center;}


/*--------------------ESPACEMENT-------------------- */
.space {margin: 5% 0;}

.bottom {margin-bottom: 3%;}

.bottom_title {margin-bottom: 6%;}

.right {margin-right: 1%;}


/*--------------------HEADER-------------------- */
header {
	background-image: url(../img/marty/feu.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 1%;
}

#logo_header {
	height: 25%;
	object-fit: contain;
	margin-top: 20%;
}

#bandeau {
	background: white;
	color: var(--green);
	padding: 2% 0;
	margin: 4% 0;
}

.nav_header {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1%;
	padding: 1%;
}


/*--------------------PHOTOS-------------------- */
#photos {position: relative;}

.title_photos {
	position: absolute;
	left: 0;
	right: 0;
	top: 5%;
}

figcaption {
	position: absolute;
	bottom: .8%;
	padding: .8%;
	text-shadow: 2px 1px 4px black;
}


/*--------------------CONTACT-------------------- */
.address_link {
	color: black;
	display: block;
}

#horaire {margin-top: 15%;}

iframe {height: 480px;}


/*--------------------FOOTER-------------------- */
footer {padding: 1.5% 0;}

#logo_footer {object-fit: contain;}

.footer_link {font-size: 1.3vw;}

.footer_link:first-child {width: 5%;}

.space_around {
	display: flex;
	justify-content: space-around;
	align-items: center;
}


/*--------------------POINT DE RUPTURE-------------------- */
@media (max-width: 770px) {
	header {
		background-position: center;
		height: 100vh;
		text-align: center;
	}

	#header {
		grid-column: span 8;
		margin-top: 40vh;
		margin-bottom: 43%;
		padding-top: 3%;		
	}

	.nav_header {position: static;}
	
	p {line-height: 1.5rem;}
	
	.border {
		border-top-right-radius: 15rem;
		border-bottom-left-radius: 15rem;
	}
	
	h1 {line-height: inherit;}
	
	#logo_header {
		height: 30%;
		margin: 0;
	}
	
	#bandeau {
		padding: 1% 0;
		margin: 2% 0;
	}

	.right {margin-right: 3%;}

	h2 {
		display: inline-block;
		margin: 0 1.5%;
	}
	
	iframe {height: 250px;}
}


@media (max-width: 540px) {
	.border {
		border-top-right-radius: 10rem;
		border-bottom-left-radius: 10rem;
	}

	iframe {height: 200px;}

	#header {margin-bottom: 40%;}
}


@media (max-width: 414px) {
	iframe {height: 150px;}

	#header {margin-bottom: 55%;}

	#logo_header {margin: 2% 0;}

	#bandeau {margin: 5% 0;}

	.span1 {grid-column: span 8;}
	.span2 {grid-column: span 4;}
	.span3 {grid-column: span 8;}
	.span4 {grid-column: span 8;}
	.span5 {grid-column: span 8;}
	.span6 {grid-column: span 8;}

	.border {
		border-top-right-radius: 8rem;
		border-bottom-left-radius: 8rem;
	}

	.title_photos {top: 3%;}

	.pdr_position {bottom: 45%;}

	address, #horaire {text-align: center;}

	.inline {display: inline-block;}

	.pdr_right {margin-right: 5%;}

	* {
		font-size: 2.5vw;
		line-height: 2vh;
	}

	h3 {font-size: 4vw;}

	.pdr_txt {font-size: 3vw;}

	.pdr_bottom {margin-bottom: 10%;}

	.pdr_title {font-size: 6vw;}

	#horaire {margin-top: 8%;}

}


@media (max-width: 375px) {
	#header {margin-bottom: 75%;}
}