@font-face {
    font-family: 'garetbook';
    src: url('fonts/garet-book-webfont.woff2') format('woff2'),
         url('fonts/garet-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'garetheavy';
    src: url('fonts/garet-heavy-webfont.woff2') format('woff2'),
         url('fonts/garet-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'newyorkregular';
    src: url('fonts/newyork_webfont.woff2') format('woff2'),
         url('fonts/newyork_webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*{margin:0;padding:0;}html{width:100,01%;box-sizing: border-box;overflow-x:hidden}img{border:none;}*, *:after, *:before{box-sizing: border-box;}
body{background:#fbfafa;font-family:"garetbook", Arial, sans-serif;font-weight:400;font-size:1.4rem;line-height:1.8rem;color:#4c443d;text-align:center;}

a{color:#4c443dc2;text-decoration: none;border-bottom: 1px dotted #4c443dc2;}
a:hover{color:#4c443d}
a.lienImage{border:none;}

p{margin-bottom: 1.4rem;}
p:last-child{margin-bottom: 0;}

strong{background-color:#4c443d;color:#fbfafa;display:inline-block;padding: 10px 20px;border-radius: 5px;}

h1{text-transform: uppercase;font-family:'newyorkregular', serif;font-size: 3vw;line-height:3vw;margin-bottom: 1.4rem;}
h2{text-transform: uppercase;font-size: 1.4vw;line-height:1.4vw;margin-bottom: 1.4rem;}
h3{text-transform: uppercase;font-size: 1.1vw;line-height:1.1vw;margin-bottom: 1.1rem;}

ul{margin-bottom: 3rem;}
li{margin: 0 0 .5rem 2rem;}

#contenupresite{width: 100vw;height: 100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;}
#contenupresite	img{
		max-height: 50vh;
	margin: 0 0 2rem 0;
	}

.menuHaut{
	z-index: 999;
	width: 100vw;
	position: fixed;
	top:0;
	left:0;
	padding:20px 40px 20px 20px;
	display: flex;
	box-shadow: 0 0 10px rgb(191,181,172,.33);
	align-items: center;
	justify-content:space-between;
	background:#fbfafa;
}
.menuHaut .logo img{
	height: 65px;
	display: block;
}
.menuHaut nav{
	display: flex;
	gap: 30px;
}
.menuHaut nav a{
	text-transform: uppercase;
	border: none;
	font-size: 1.2rem;
}
.menuHautMobile{display: none;}
.menuBurger{display:none;}

.accueil{
	min-height: 100vh;
	padding-top: 105px;
}

.splash{
	width: 100vw;
	height: calc(100vh - 105px);
	background-color: black;
}
.splash img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tagline{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.tagline h1{margin:0;font-size:4vw;line-height: 4vw;}
.tagline h1, .tagline p{color:#FFF;text-shadow:0 0 10px rgb(0,0,0,.5);}

.contenuAccueil{
	padding: 100px;
	text-align: left;
}

.quisuisje{
	min-height: 100vh;
	display: flex;
	gap: 100px;
	padding: 205px 100px 100px;
}
.quisuisje .image img{
	width: 100%;
	border-radius: 5px 5px 40px 5px;
}
.quisuisje .contenuQuiSuisJe{
	text-align: left;
}

.prestations{
	min-height: 100vh;
	padding: 205px 100px 50px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: flex-start;
	align-content: center;
}

.listePrestas{
	display: flex;
	gap: 50px;  
	justify-content: space-around;
}

.listePrestas .presta{
	padding: 30px;
	background:#4c443d;
	color:#FFF;
	flex:1;
	border-radius: 5px;
	text-align: left;
}

.listePrestas .presta img{
	width: 100%;
	border-radius: 5px 5px 40px 5px;
	margin:10px 0;
}

.listePrestas .presta h2 {
  margin-bottom: 0.5rem;
}

.listePrestas .presta .formule {
  text-transform: uppercase;
  font-size: 1rem;
  color: #bfb5ac;
  margin: 0;
}

.listePrestas .presta .lienbas {
  text-align: right;
}
.listePrestas .presta a {
  	color: #FFF;
	border: none;
}
.listePrestas .presta .lienbas a {
  	color: #bfb5ac;
	border-color: #bfb5ac;
}

.prestaSeule{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 205px 100px 100px;
}
.prestaSeule .contenuPresta{
	display: flex;
	gap: 100px;
}
.prestaSeule .image img{
	width: 100%;
	border-radius: 5px 5px 40px 5px;
}
.prestaSeule .texte{
	text-align: left;
}
.prestaSeule .texte .formule{
  text-transform: uppercase;
  font-size: 1rem;
  color: #bfb5ac;
  margin: 0;
}

.contactBasDePage{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contactBasDePage a{
	background-color: #4c443d;
	color:#FFF;
	border:none;
	border-radius: 5px;
	padding: 20px;
	font-weight:bold;
	text-transform: uppercase;
	font-size: 2vw;
	width: auto;
}

.contact{
	min-height: 100vh;
	padding: 205px 100px 100px;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.contact h1{
	margin-bottom: 0.5rem;
}

.contact .errors{
	font-size: 1rem;
	line-height: 1rem;
}

.contact strong{
	background-color: transparent;
	padding: 0;
	color: #4c443d;
}

.contact fieldset{
	border: none;
}

.contact input[type=text]{
	height:35px;
	width :400px;
	font-size: 1.2rem;
	padding: 5px;
	font-family:"garetbook", Arial, sans-serif;
	border-radius: 5px 5px 0 0;
	border: 1px solid #bfb5ac;
}
.contact input[type=text]:focus, .contact textarea:focus{
	outline: none;
}

.contact textarea{
	height:105px;
	width :400px;
	font-size: 1.2rem;
	padding: 5px;
	font-family:"garetbook", Arial, sans-serif;
	border-radius: 5px 5px 0 0;
	border: 1px solid #bfb5ac;
}
.contact input[type=submit]{
	height:40px;
	width :400px;
	font-size: 1.4rem;
	text-transform: uppercase;
	font-weight: bold;
	padding: 5px;
	font-family:"garetbook", Arial, sans-serif;
	border-radius: 5px;
	border: 1px solid #4c443d;
	background-color: #4c443d;
	color: #FFF;
	cursor: pointer;
	transition: background-color .5s;
}
.contact input[type=submit]:hover{
	background-color: #bfb5ac;
	color: #4c443d;
}



.mentionslegales{
	min-height: 100vh;
	padding: 205px 100px 100px;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mentionslegales hr{
	width: 50%;
	height: 1px;
	background-color: transparent;
	margin: 2rem auto 4rem;
	border: none;
	border-top-width: medium;
	border-top-style: none;
	border-top-color: currentcolor;
	border-top: 1px dashed rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
}

.portfolio{
	min-height: 100vh;
	padding: 205px 100px 100px;
}

.portfolioGrid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
}
.portfolioGrid .imagePortfolio a{
	border-bottom: none;
}
.portfolioGrid .imagePortfolio img{
	width: 100%;
	display: block;
	border-radius: 5px;
}

.footer{
	width: 100%;
	padding: 20px 40px;
	background-color:#bfb5ac;
}


@media only screen and (max-width: 1080px){
	
	h1{font-size: 5vw;line-height: 5vw;}
	h2{font-size: 3vw;line-height: 3vw;}
	
	
	.menuHaut{display: none;}
	.menuHautMobile{
		z-index: 999;
		width: 100vw;
		position: fixed;
		top:0;
		left:0;
		padding:20px 40px 20px 20px;
		display: flex;
		box-shadow: 0 0 10px rgb(191,181,172,.33);
		align-items: center;
		justify-content:space-between;
		background:#fbfafa;
	}
	.logo img, .menuHautMobile .burger img, .croix img{
		height: 100px;
		display: block;
	}
	
	.bandeau{
		display: flex;
		justify-content: space-between;
		margin-bottom: 50px;
	}
	
	.menuBurger nav{
		display: flex;
		flex-direction: column;
		gap: 20px;
		text-align: left;
	}
	
	.menuBurger nav a{
		text-transform: uppercase;
		border: none;
		font-size: 3rem;
		line-height: 3rem;
	}
	
	.contenuAccueil{
		padding: 50px;
	}
	.tagline h1{
		font-size: 5vw;
		line-height: 5vw;
	}
	.prestations, .prestaSeule, .quisuisje, .contact, .portfolio{
		padding: 190px 50px 50px;
	}
	
	.listePrestas{
		flex-direction: column;
	}
	
	.portfolioGrid{
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 50px;
	}
	.menuBurger{
		z-index: 9999;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: #fbfafa;
		flex-direction: column;
		padding: 20px 40px 20px 20px;
		gap: 50px;
	}
	
	.burger, .croix{cursor: pointer;}
	
	.contact input[type="text"], .contact input[type=submit]{
		width: 80vw;
		height: 5vw;
	}
	
	.contact textarea{
		width: 80vw;
		height: 15vw;
	}
	
	fieldset p{
		margin-bottom: 20px;
	}
	
	.quisuisje{
		flex-direction: column-reverse;
	}
	
	.contenuPresta{
		flex-direction: column-reverse;
	}
	
	.contactBasDePage a{
		font-size: 5vw;
	}
	
}