/*GLOBAL */

* {
	box-sizing: border-box;
	outline: none;
}
-html
{
	max-width:1100px;
	margin:0 auto;
}
body 
{
	font-family: "Open Sans", Arial;
	line-height: 1.8;
	color: #666;
	font-size:16px;
	background-color:#F2F2F2;
}

.contener,.contener2
{
	width:80%;
	margin:0 auto;
	 
}
h1, h2, h3 {
	font-weight: normal;
}
h1
{
 font-size:40px;
 color:#879E0F;
 font-family: 'Candal';
 text-align:center;
 font-weight:normal;
}
h2
{
	font-size:25px;
	color:white;
	font-family: 'Candal';
}

h3
{
font-size:20px;
 font-family: 'Candal';
}

/*home*/
/* header*/
header,footer
{
    background-image: url("../img/bg.jpg");
    background-size: cover;
	background-position: center;
    color:white;
    margin:0;
    position: relative;
    width: 100%;
    
}
header p:first-child
{
    text-align:center;
    background-color:#879E0F;
    padding:5px;
    margin-top:0px;
}

header div 
{
 display:flex;  
 justify-content:space-between;
 align-items:center;
 width:80%;
 margin:0 auto;
}
header i {
	font-size: 20px;
	background-color:#879E0F;
	color: white;
	width: 45px;
	height: 45px;
	border-radius: 50% ;
	border:white solid 1px;
	padding:10px 15px 10px 10px;
	margin:5px;
}
header .coin
{
	width:100px;
	position:absolute;
	right:0;
	top:0;
}
nav
{
    display:flex;
    justify-content:space-between;
    width:80%;
    margin:0 auto;
}

nav a
{
    color:white;
    text-decoration:none;
    text-transform:uppercase;
		margin-bottom: 20px;
		padding:10px;
}
nav a:hover
{
	background-color:#C1D169;
	opacity: 20%;
	color:white;
}
.panier
{
	display:flex;
	justify-content:flex-center;
	width:220px;
	align-items:baseline;
	margin:0;
}
#panier
{
	background-color:transparent;
}
/*main*/
.offre
{
	width:100%;
}
p
{
 text-align:center;	
}
/*chississez votre thé*/
#thes
{
	text-align:center;
	background-color:white;
}
.thes
{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
}
figure img
{
	width:100%;
	opacity:0.5;
}
figure img:hover
{
   opacity:1;	
}

figcaption
{
	font-weight:bold;
}
fieldset
{
	border-bottom:none;
	border-left:none;
	border-right:none;
	margin:0 15px;
}
legend
{
	  padding:15px;
	  color:#879E0F;
	  font-family: 'Candal';
    font-size:20px;
    text-align:center;
}
#produit,#shop
{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	background-color:white;
	margin:15px;
	text-align:center;
	width:100%;
	margin:20px  auto;
}
#produit article, .variete article
{
	width:35%;
	padding-bottom:30px;
}
#produit img,.variete img
{
	width:100%;
}
#produit a,.variete a,#ajout
{
	color:white;
	text-decoration:none;
	text-transform:uppercase;
	background-color:#B09067;
	padding:15px;
	
}
.prix
{
	font-weight:bold;
	font-size:24px;
}
/*footer*/
footer
{
	color:white;
	margin-top:25px;
}
.communication
{
background-color:rgba(135,158,15,0.7);
display:flex;
flex-direction:rom;
justify-content:space-around;
color:white;
}
.communication a
{
	 	display: block;
     	text-align: center;
     	padding:15px;
     	color:#ECF7B3;
     	text-decoration:none;
     	text-transform:uppercase;
}
.communication a .fa
{
        display: block;
     	text-align: center;	
}
.nav
{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-around;
}
.nav2
{
	display:flex;
	flex-direction:column;
	text-align:center;
}
.nav2 a
{
	color:#ECF7B3;
	text-decoration:none;
}
/* LICENCE */
#licence {
	font-size:10px;
    display: block;
    text-align: center;
    padding: 25px;
    background-color:rgba(135,158,15,0.7);
}
#licence a
{
	color:white;
	text-decoration:none;
}

#licence img {
    width: 30px;
}
/*about*/
.contener2
{
	background-color:white;
	padding:10px;
}

.presentation h2,.concept h2
{
	color:#32332F;
	padding:10px;
}

.presentation legend,.the legend
{
	text-align:left;
}
.presentation p,.concept p ,.the p,.article p,.description p
{
	text-align:left;
	padding:0 15px;
}

.left
{
	float:left;
}
.right
{
	float:right;
}
.presentation img
{
	width:50%;
	padding:15px;
}
#shop
{
	  background-color:#DBE4C0;
		width:100%;
}
#shop img
{
	width: 55px;
}
/*listing*/
.the
{
	padding-top:25px;
	padding-bottom:40px;
    background-color:white;	
}
.the legend
{
	padding:10px;
}
.the img
{
	margin:10px;
	width:20%;
}
.variete article p
{
	text-align:center;
}
.variete article img
{
	width:50%;
}
.variete
{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	background-color:white;
	text-align:center;
	width:100%;
	margin:0px  auto;
}
.listing
{
	margin:15px 0;
}
/* Par défaut, une étoile est en gris,avec un padding et un curseur en forme de main. */
.fa-star {
	color: gray;
	cursor: pointer;
	padding: 0.0625rem;
}
/* Si elle porte en plus la classe '.gold', elle sera en jaune. */
.fa-star.gold {
	color: #ffdc0f;
}
/* Le groupe '.stars' positionne les étoiles les unes à côté des autres sans espacements. */
.stars 
{
	display: inline-flex;
	justify-content: center;
	font-size: 2em;
	padding:20px;
}
/* A l'état :hover sur le parent '.rating',on force TOUTES les étoiles à passer en jaune. */
.stars:hover .fa-star 
{
	color: #ffdc0f;
}
/* Et si la souris survole une étoile en particulier,on sélectionne toutes les étoiles qui sont APRÈS celle-cigrâce à l'opérateur '~' et on les force en GRIS */
.stars .fa-star:hover ~ .fa-star 
{
		color: gray;
}
.description
{
	display:flex;
	flex-direction:column;
	width:50%;
}
.description p
{
 margin:0px 0px;
}
.description h3
{
margin:0;
padding-left:15px;
}

.avis
{
	display:flex;
   	flex-direction:column;
   	flex-wrap:wrap;
	width:40%;
	text-align:right;
}
.avis select
{
    cursor: pointer;
	margin-top:170px;
	margin-right:15px;
	padding:10px;
	width:90%;
	background-color:#F2F2F2;
}
.avis a
{
	color:#879E0F;
	display:block;
	margin:0 auto;
	text-align:right;
	padding-right:20px;
}
.avis .prix
{
text-align:right;	
padding:0 15px;
margin:0;
}
.ajout
{
	text-align:right;
	padding:0 15px;
	color:#879E0F;
	margin:0;
}
.product
{
	display:flex;
  flex-direction:row;
  justify-content:space-between;	
}
#ajout
{
	width:90%;
  margin-right:15px;
  padding:10px 35px;
  margin-top:80px;
}
#coeur
{
	color:#FE2E2E;
	font-size:25px;
}
span
{
	font-weight:bold;
}
/*responsive*/
/*tablette*/
@media only screen and (max-width:768px) 
{
.contener,.contener2,.presentation
	{
		width:100%;
	}
	.thes
	{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-around;
	}
	figure
	{
     width: 30%;
	}
	figure img
	{
	width:50%;	
	}
	#produit
   {
	flex-wrap:wrap;
   }
	#produit article,.description,.description p,.avis,#shop article
	{
		width:100%;
	}
	#produit img,.description img
	{
		width:50%;
	}
	#shop figure,#ajout
	{
	width:90%;
	margin:0 auto;
	}
	#shop
	{
	flex-direction:column;
	}
	#shop article
	{
		padding-top: 10px;
	}
.presentation img
	{
		width: 70%;
	}
	.the img
	{
		display:none;
	}
	.variete
	{
		flex-direction:column;
		align-items:center;
	}
	.variete article
	{
		width:100%;
	}
	.communication a i
	{
		font-size:16px;
	}
	.communication a
	{
		font-size:10px;
	}
	
	
}
@media only screen and (max-width:415px) 
{
	.contener,.contener2,figure img,.variete article,.presentation img
	{
		width: 100%;
	}
	nav
	{
		text-align: center;
	}
	.nav,nav
	{
		flex-direction: column;
	}
	.panier
	{
		width: 130px;
		position:absolute;
		top:0px;
		left:0;
		margin-bottom: 50px;
		padding-right:10px;
		border-top-right-radius: 40%;
		border-bottom-right-radius: 40%;
		box-shadow: 1px 1px 5px rgb(73, 71, 71);
	}
	.panier #fa 
	{
		margin-top:0;
		margin-bottom:0;
	}
	#panier
	{
		padding:0;
	}
	
	header div a img
	{
		padding:50px 0 25px 70px;
		align-self: center;
		margin-top: 20px;
	}
    header div
		{
		position :relative;
		margin:0;
		}
	.coin,h1,.offre,.slider,#promo,#panier
	{
		display:none;
	}

	figure
	{
		 width: 50%;
		 margin:0;
	}
	.thes
	{
		justify-content: center;
	}
	.communication
	{
		flex-wrap: wrap;
	}
	.communication a
	{
     width: 40%;
     font-size:10px;
	}
	.communication a i
	{
		font-size:16px;
	}
	.presentation img
	{
		float:none;
	}
	
	.product
	{
		flex-direction:column;
		justify-content:center;
	}
	.description, .description p,.stars,.avis .prix,.avis a,.ajout
	{
		text-align:center;
	}
	.description img
	{
		margin:0 auto;
	}
	.stars
	{
		display:block;
	}
	legend
	{
		font-size: 12px;
	}
	.presentation img
	{
		width: 100%;
	}
}