*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0px;
	padding: 0px;
	min-height: 100vh;
	background-color: white;
	font-family: 'Roboto', sans-serif;
}

.container {
	max-width: 100rem;
	margin: 0 auto;
	padding: 0 2rem 2rem;
}

.heading {
	font-size: 4.5rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: #1a1a1a;
}

.header{
	width: 100%;
	margin: 0 auto;
	text-transform: uppercase;
	text-align: center;
}

.heading-img{
	width: 75%;
}


.heading span {
	display: block;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
}

.gallery p{
	text-transform: uppercase;
	text-align: center;
	letter-spacing:1px;
}


.gallery-item {
	flex: 2 0 30rem;
	padding-top: 15%;

}

button{
  	width: 50%;
	height:50px;
	text-align: center;
	position: relative;
	left: 26%;
	text-transform:uppercase;
	color: #1f1e26;
	background-color: white;
	font-weight:500;
	letter-spacing:1px;
	font-size:15px;
	outline:none;
	border: 1px solid #1f1e26;
}

#bouton>button{
	transition:all .3s ease-in-out;
}

#bouton:hover button{
	border: 1px solid #f2e6c2;

  	color:#bf8e63;
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.gallery-image:hover {
	transform: scale(1.1);
}


@supports (display: grid) {
	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		grid-gap: 2rem;
	}

	.gallery,
	.gallery-item {
		margin: 10%;
	}
}

/* HEADER ET FOOTER */

header{
	position: relative;
	background-color: #1f1e26;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	height: 120px;	 
}

.logo{
	width: 10%;
	position: absolute;
	top: 3%;
	left: 45%;
}


a{
	text-decoration: none;
}


.menu li{
	list-style: none;
	display: inline-block;
}


.menu a{
	display: inline-block;
}


.GS{
	position: absolute;
	top: 17%;
	left: 2%;
	font-size: 120%;
	font-family: 'Roboto Slab', serif;
	text-transform: capitalize;
	color: white;
}


.GS:hover{
	color: #F2E6C2;
}


.scent{
	position: absolute;
	left: 30%;
	font-size: 120%;
	color: white;
}


.propos{
	position: absolute;
	right: 35%;
	font-size: 120%;
	color: white;
}


.menu li:hover a{
	border-bottom: 4px solid #F2E6C2;
	color: #F2E6C2;
}


.panier{
	position: absolute;
	top: 35%;
	right: 5%;
	width: 3%;
}


footer{
	position: relative;
	background-color: #F2E6C2;
	position: relative;
	height: 180px;
	font-family: 'Roboto', sans-serif;
	font-size: 120%;
}

footer a{
	color: #1f1e26;
	text-decoration: none;
}


footer a:hover{
	color: white;
}

.menu2 img{
	width: 4%;
}


.menu2 ul li{
	list-style: none;
}


.goodsc{
	position: absolute;
	top: 15%;
	left: 20%;
	text-transform: uppercase;
}


.propos2{
	position: absolute;
	top: 15%;
	left: 47%;
	text-transform: uppercase;
}


.scent2{
	position: absolute;
	top: 15%;
	left: 70%;
	text-transform: uppercase;
}

.insta{
	position: absolute;
	bottom: 30%;
	left: 37%;
}

.twitter{
	position: absolute;
	bottom: 30%;
	left: 47%;
}


.pinterest{
	position: absolute;
	bottom: 30%;
	left: 57%;
}

.log{
	position: absolute;
	bottom: 7%;
	left: 45%;
	font-size: 95%;
}