body,html{height:100%;margin:0 auto;background:#F4F3EF}
#left{min-height:100%;min-width:12%;float:left;border-right:1px solid #D5D5D5;background:#66615B;border-left:1px solid grey;text-align:center;}
#menuleft li{
	list-style:none;
	border-bottom:1px solid grey;
	line-height:50px;
	padding-left:20px;
	font-family: 'Poiret One', cursive;
	text-align:left;
	color:#eae3e3;
}
#menuleft  a{color:black;text-decoration:none;}
#menuleft li:hover{color:white;cursor:pointer;border-bottom:1px solid grey;}
#center{width:100%;background:#F4F3EF}
#centreright{float:left;width:88%;font-family: 'Roboto Condensed', sans-serif;background:#F4F3EF}
#centreright h2{border-bottom:1px solid white;line-height:60px;}
.grid-container {
  display: grid;
  column-gap: 20px;
 grid-template-columns: repeat(6, 1fr);
  margin-bottom:50px;

}
.grid-container a {
  color:black;
}
.grid-container a:hover {
  color:black;
}
.blanc{background:white;padding:10px;margin:20px;}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius:10px;
  font-size: 30px;
  text-align: center;
  margin-bottom:10px;
  padding:1px;
  border:1px solid #D5D5D5;
}
#righttop{float:right;width:88%;top:0;background:#F4F3EF;border-bottom:1px solid #D5D5D5;text-align:right;}
.grid-item a {color:black;}
.grid-item img{width:100%;border-radius:10px;}
#price{background:#D5D5D5;font-size:14px;padding:5px;border-radius:4px;margin-left:5px;}
#listeproduit{width:45%;padding:5px;border:1px solid #E5E5E5;}
#imgproduit{max-width:100px;float:left;}
#imgproduit img{width:100%;}
#titreproduit{font-size:18px;float:left;margin-left:10px;}
#cadre{border:1px solid #D5D5D5;padding:20px;}
#photoadd{width:100px;height:100px;margin-right:10px;color:#5A88CA;padding-top:25px;font-size:40px;border:1px solid #E4E4E4;text-align:center;float:left;margin-top:20px;}
#photoadde{width:100px;height:100px;text-align:center;margin-right:10px;border:1px solid #E4E4E4;float:left;margin-top:20px;}
#photoadde img{width:70%;margin-top:1px;}
.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.inputfile + label {

	
	display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
	cursor:pointer;
}
.top{
	list-style:none;
	float:right;
	font-size:12px;
	margin-right:15px;
	margin-bottom:9px;
}
.top li a{color:black}
#righttop a{color:grey}
#righttop a:hover{color:#82a518;}


.grid-tableau {
  display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 25px;
 padding:15px;
  font-size:16px;
  
}
.grid-item-tableau {
  padding: 20px;
  text-align: center;
  border-radius:15px;
  box-shadow: 8px 8px 12px #C5C5C5;
  font-family: 'Poiret One', cursive;
  background:white;
}
.grid-item-tableau:hover{
	cursor:pointer;
	color:#5A88CA;
}
#mycommande{
	margin-top:40px;
}

.grid-tableaue {
  display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 5px;
  padding: 10px;
  font-size:16px;
}
.grid-item-tableaue {
  padding: 20px;
  text-align: center;
  border:1px solid #D5D5D5;
}
.red-border{border : 1px solid #F86C6B}


.grid-tableau6 {
  display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 5px;
  padding: 10px;
  font-size:16px;
}
.grid-item-tableau6 {
  padding: 2px;
  text-align: center;
  border:1px solid #D5D5D5;
}
.grid-item-tableau6 img{width:100%;margin-bottom:5px;}


@media screen and (min-width: 780px) and (max-width: 1200px) { 
	.grid-tableau {
	  display: grid;
	 grid-template-columns: repeat(2, 1fr);
	 gap: 5px;
	  padding: 10px;
	  font-size:16px;
	}
	.grid-tableau6{
		display: grid;
		 grid-template-columns: repeat(3, 1fr);
		 gap: 5px;
	}
	#left{display:none;}
	#centreright{float:left;width:99%;margin:0 auto;font-family: 'Roboto Condensed', sans-serif;}
	#righttop{float:right;width:100%;top:0;background:#F4F4F4;border-bottom:1px solid #D5D5D5;text-align:right;}
}


@media screen and (max-width: 779px)
{
	#left{display:none;}
	#centreright{float:left;width:99%;margin:0 auto;font-family: 'Roboto Condensed', sans-serif;}
	#righttop{float:right;width:100%;top:0;background:#F4F4F4;border-bottom:1px solid #D5D5D5;text-align:right;}
	
	.grid-tableau {
	  display: grid;
	 grid-template-columns: repeat(1, 1fr);
	 gap: 5px;
	  padding: 10px;
	  font-size:16px;
	}
	.grid-tableau6{
		display: grid;
		 grid-template-columns: repeat(1, 1fr);
		 gap: 5px;
	}
}