@font-face {
	font-family: "Nexa";
	src: url("fonts/nexa-light.otf");
}

@font-face {
	font-family: "Nexab";
	src: url("fonts/nexa-bold.otf");
}

body {
	margin: 0;
}

h1, h2, h3, h4, a {
	font-family: "Nexab";
	text-transform: uppercase;
	color: #291A0E;
}

h1 {
	font-size: 25px;
}

p {
	font-family: "Nexa";
	font-size: 18px;
	line-height: 25px;
}

p span, .contact p, footer p {
	font-family: "Nexab";
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

header, #accueil, #services, #contact {
	padding: 10px;
}

/*==========*/
/*Display*/
/*==========*/

.header, nav ul, .stitre, footer {
	display: flex;
}

/*==========*/
/*Header*/
/*==========*/

header {
	height: 165px;
}

.header {
	justify-content: space-between;
	align-items: center;
}

.logo img {
	width: 150px;
	height: auto;
}

nav ul {
	flex-direction: column;
}

nav ul li {
	margin: 5px 0;
}

/*==========*/
/*Accueil*/
/*==========*/

#accueil {
	padding: 30px 10px;
	background: url(img/accueil.jpg) no-repeat center;
	background-size: cover;
}

#accueil p, #accueil h1 {
	color: #fff;
}

/*==========*/
/*Services*/
/*==========*/

#services h2, #services h3, #contact h2 {
	margin: 50px 0 0 0;
}

#services h4 {
	margin: 0;
}

#services p {
	line-height: 18px;
}

.titre, .titreh1 {
	margin: 0 auto;
	width: 120px;
}

.titre, .titreh1, .contact, .info{
	text-align: center;
}

.h2ligne {
	height: 10px;
	width: 100%;
	background-color: #B5966F;
	clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
}

.ligne {
	width: 115px;
	height: 5px;
	background-color: #B5966F;
}

.stitre {
	align-items: center;
	margin-top: 50px;
}

.los {
	width: 10px;
	height: 10px;
	margin-right: 5px;
	background-color: #291A0E;
	clip-path: polygon(5px 0, 10px 5px, 5px 10px, 0 5px);
}

.bloc p {
	margin-left: 15px;
}

/*==========*/
/*Galerie photos*/
/*==========*/

.titreh1 {
	margin: 80px auto 50px auto;
	width: 220px;
}

.galerie {
	margin-bottom: 50px;
}

.galerie h1 {
	margin: 0;
}

/*==========*/
/*Contact*/
/*==========*/

.info {
	margin-top: 30px;
}

.contact {
	margin: 30px 0;
}

/*==========*/
/*Mentions Légales*/
/*==========*/

.mentions h2 {
	margin-top: 100px;
}

.mentions h3 {
	margin-top: 50px;
}

/*==========*/
/*Footer*/
/*==========*/

footer {
	justify-content: center;
	align-items: center;
	padding: 41px 0;
	background-color: #B5966F;
}

footer img {
	width: 40px;
	height: auto;
	margin-left: 20px;
}

@media (min-width: 768px) {

/*==========*/
/*Display*/
/*==========*/

	#accueil {
		display: flex;
	}

	.container-bloc, .container-bloc2 {
		display: grid;
	}

/*==========*/
/*Header*/
/*==========*/

	nav ul {
		flex-direction: row;
	}
	
	nav ul li {
		margin: 0 0 0 15px;
	}

/*==========*/
/*Accueil*/
/*==========*/

	#accueil {
		height: 79.3vh;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding: 5px;
	}

	.container {
		max-width: 1200px;
	}

/*==========*/
/*Services*/
/*==========*/

	.titre {
		width: 150px;
	}

	.container {
		margin: 0 auto;
	}

	.container-bloc, .container-bloc2 {
		grid-template-columns: 50% 50%;
		grid-column-gap: 30px;
	}

	/*==========*/
	/*Galerie photos*/
	/*==========*/

	.titreh1 {
		margin: 100px auto 50px auto;
		width: 220px;
	}

}

@media (min-width: 992px) {

h2 {
	font-size: 30px;
}

/*==========*/
/*Services*/
/*==========*/

	#services {
		background: url(img/logo-bg.svg) no-repeat;
		background-position: bottom -50px right -50px;
		background-size: 500px 500px;
	}

	.container-bloc {
		grid-template-columns: 20% 10% 20% 20%;
		grid-column-gap: 30px;
	}

	.container-bloc2 {
		grid-template-columns: 20% 50%;
		grid-column-gap: 30px;
	}

/*==========*/
/*Contact*/
/*==========*/

	#contact {
		height: 87vh;
	}

	#contact, .contact {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#contact h2 {
		margin: 60px 0 0 0;
	}

	.info {
		margin: 100px 0;
	}

	.contact {
		height: 225px;
		background: url(img/logo-bg2.svg) no-repeat center;
	}

	.contact p {
		font-size: 25px;
		margin: 10px;
	}
}

@media (min-width: 1200px) {

	h1, .presentation p, #contact p {
		font-size: 25px;
	}

/*==========*/
/*Header*/
/*==========*/

	.header {
		margin: 0 auto;
		width: 1200px;
	}

/*==========*/
/*Accueil*/
/*==========*/

	.presentation p, #contact p {
		line-height: 35px;
	}

/*==========*/
/*Services*/
/*==========*/

	#services {
		background: url(img/logo-bg.svg) no-repeat;
		background-position: bottom -100px right -100px;
		background-size: 600px 600px;
	}
}