@import url(reset.css);
@import url(font-style.css);
:root{
	--blanc:white;
	--noir:black;
}
/* GENERAL CLASS*/
input[type=checkbox]{display:none;}
html{
	font-size: 62.5%;
	font-family: Roboto,sans-serif;
}
.titre{
	font-family: "Abril Fatface",serif;
	font-weight: 400;
}
.wrapper{
	max-width: 98.5rem;
	margin: auto;
}
.flex{display: flex}
.column{flex-direction: column;}
.space-between{justify-content: space-between;}
.vcenter{align-items: center}
.hcenter{justify-content: center;}
.fcenter{
	align-items: center;
	justify-content: center;
}
.padh20{padding:0 2rem;}
.padv20{padding:2rem 0;}
/*CLASS GENERAL*/
/*HEADER*/
header img{width: 6rem;}
nav{gap:6rem;}
nav a:hover{color:grey}
nav a:active{color: yellow;}
header nav a{
	text-decoration: none;
	color: var(--noir);
}
/*HEADER*/
/*HEROS*/
.hero{height:80vh;}
.hero img,.hero article{
	width: 50%;
	object-fit: cover;
}
/*HEROS*/
/*HISTOIRE*/
.histoire, footer{
	background: url(../img/motif.jpg);
	color: var(--blanc);
	padding:10.3rem 0;
}
.histoire p{padding-top: 2rem}
/*HISTOIRE*/
/*CHAISES*/
.chaises{height: 50vh;}
.chaises img{object-fit: cover;}
.chaises img:first-child{width:50%}
.chaises img:nth-child(2){width:20%}
.chaises img:last-child{width:30%}
/*CHAISES*/
/*FOOTER*/
footer figure img{margin: 2rem;}
/*FOOTER*/

@media screen and (max-width:640px){
header div{
	width: 90vw;
	align-items: start!important;
}
/*burger*/

nav{
	align-self:center;
	flex-direction: column;

}
nav a{
	display:none;
	text-align: center;
	align-self: end;
}
input[type=checkbox]:checked+label span:first-child{
	transform: rotate(45deg);
	transform-origin: top left;
}
input[type=checkbox]:checked+label span:nth-child(2){
	transform: translateX(-20px);
	opacity: 0;
	
}
input[type=checkbox]:checked+label span:last-child{
	transform: rotate(-45deg);
	transform-origin: bottom left;
}
input[type=checkbox]:checked+label~a{
	display:flex!important;
	flex-direction:column;

}
label{
	gap:.5rem;
	align-self:end;
	margin-top: 3.5rem;
}
label span{
	display:block;
	height: .5rem;
	width: 3rem;
	background:var(--noir);
	transition: .5s ease;
}
/*burger*/

h2{line-height: 8.4rem;}
.mcolumn{flex-direction: column;}
.histoire{padding:3.4rem;}
.histoire h2{
	width: 87vw;

}
.chaises{height:inherit;}
.chaises img{
	width: 100%!important;
	height:22.2rem;
}
.start{align-items:start;}
.hero img{display:none;}
.hero{
	flex-wrap: wrap;
	place-content:center;
	background:url(../img/chair-1.jpg) center;

}
footer figure img{	margin:1.5rem;}
}