/* Reset */
*{ margin:0; padding: 0; box-sizing: border-box; font-size: 1em; line-height: 1.25;}

/*Mise en forme*/
h1					{	font-size:3em;}
h2					{	font-size:2em}
h3					{	font-size:2.5em}
h4					{	font-size:2.125em;}
h5					{	font-size:2em;}
h6					{	font-size:1.75em;}
h1,h2,h3,h4,h5,h6,p	{ 	margin-bottom: 1em;
						font-family: 'Overlock', cursive;
					}
a					{	text-decoration: none; color: #000;}
p					{	max-width: 33em;}
li{
	font-family: 'Overlock', cursive;
}
/*Structure*/
.full,.demi, .tier, .quart,
.deuxtier, 
.troisquart			{	float: left; padding: 0 1em;}
.full				{	width:100%;}
.demi				{ 	width:50%;}
.tier				{ 	width:calc(100% / 3);}
.quart				{	width: 25%;}
.deuxtier			{	width: calc(100% * 2/3);}
.troisquart			{	width: 75%;}
.off7				{	margin-right: 8.33%;}
.margebas			{	margin-bottom: 3em;}
.container			{	width: 100%; max-width: 1024px; margin: 0 auto;}
.container_ssmarge	{	margin: 0 -1em; }
.clear				{	clear: both;}
.clear_right		{	clear: right;}
.clear_left			{	clear: left;}


address				{	font-family: 'Overlock', cursive;
						font-style: normal;
						margin-bottom: 1em;
					}

/* General */
body{
	background: #8cc731;
}

section{
	background: #fff;
}

.main{
	padding: 3.125%;
	min-height: calc(100vh - 250px - 80px);
	background: #fff url('../image/bgbas.jpg') right bottom no-repeat;
	padding-top: 282px;
}

.main h2{
	color: #8cc731;
}
/*Header */

header{
	background: #ffffff url('../image/bghead.jpg') no-repeat;
	background-size: 100%;
	text-align: center;
	height: 220px;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index:9999;
}
#logo{

	width: 134px;
	height: auto;
}
/* Navigation */
header .nav{
	display: flex;
	justify-content: center;
	background: #7e003b;
	height: 52px;
	padding: 10px 0;
}

header .nav li{
	display: inline-block;
	font-family: 'Amatic SC', cursive;
	font-size: 1.875em;
	color: #fff;
	line-height: 32px;
	padding: 0 7.5px;
	transition: color 0.5s;
}
header .nav a{
	color: #fff;
	line-height: 32px;
	transition: color 0.5s;
}
header .nav li:hover a{
	color: #8cc731;
}
header .nav li:nth-child(2){

	border: solid 2px #fff;
	border-style: none solid;
}
header .nav li.current a{
	font-weight: bold;
	color: #8cc731;
}

/* Footer */

footer{
	background: #8b0035;
}
footer p{
	height: 80px;
	line-height: 80px;
	color: #fff;
	font-size: 0.875em;
	text-align: center;
	margin: 0 auto;
}

/* Home */
#home{
	text-align: center;
}

#home p{
	font-size: 1.125em;
	margin: 0 auto 30px;
}
#bloc_bouteille{
	margin-bottom: 56.25px;
}
#bouteille{
	max-width: 225px;
	width: 100%;
}
#bloc_boutique{
	width: 100%;
}
#bloc_boutique img {
	width:75%;
}

/* Categories */

.categories{
	display: flex;
	justify-content: space-around;
	height: 52px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #fff;
}
.categories li{
	display: inline-block;
	line-height: 12px;
	font-family: 'Amatic SC', cursive;
	padding: 10px 20px;
	color: #fff;
	font-size: 1.3em;
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.5s, background 0.5s, font-size 0.5s, filter 0.5s;
}
.categories li:hover{
	filter: brightness(1.2);
}
.categories li.current:hover{
	filter: unset;
}

.categories li.current{
	font-size: 2em;
}

#bloc_catImg{
	display: none;
}
.current{
	font-weight: bold;
}
.bloc_products{
	padding: 0 6.25%;
}

.categorie{
	flex-wrap: wrap;
	justify-content: center;
}
#rouge{
	background: #7e003b;
}
#rouge.current{
	background: #fff;
	color:  #7e003b;
}
#blanc{
	background: #8cc731;
}
#blanc.current{
	background: #fff;
	color:  #8cc731;
}
#epice{
	background: #446e06;
}
#epice.current{
	background: #fff;
	color:  #446e06;
}
.produit{
	position: relative;
	margin-bottom: 6.25%;
	padding: 6.25%;
	text-align: center;
	background: #fff;
}
.produit p{
	padding: 0 6.25%;
}
.produit h4{
	margin-bottom: 10px;
}
.produit button{
	height: 40px;
	line-height: 40px;
	width:160px;
	color: #fff;
	background: #7e003b;
	border-radius: 10px; 
	border-style: none;
	font-family: 'Overlock', cursive;
}
.prix{
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: #fff;
	background: #7e003b;
	text-align: center;
	line-height: 60px;
	font-family: 'Overlock', cursive;
}
.photo_produit img{
	width: 100%;
}

#vinblanc, #vinepice{
	display: none;
}


/* Nous contacter */

#page_ounoustrouve .main{
	padding-top: 250px;

}

#bloccarte{
	padding: 3.125%;
	display: flex;
	justify-content: center;
}
#blocCoordonee{
	text-align: center;
	padding: 3.125%;
	background: rgba(255,255,255,0.75);
}

#blocCoordonee h3, #blocCoordonee h2{
	margin-bottom: 0.5em;
	line-height: 1;
}
#blocCoordonee h3{
	font-size: 2em;
}

#phone{
	font-size: 2em;
}
#mail{
	font-size: 1.5em;
}
@media screen and (max-width: 375px){
	#logo {
    	width: 100px;
	}
	header .nav li {
		font-size: 1.5em;
		line-height: 26px;
	}

}
@media screen and (orientation:landscape){
	header{
		position: static;
	}
}