body{
	border: 0;
  margin: 0;
  padding: 0;
	background: transparent url(../images/bg2.svg) no-repeat center top fixed;
  background-size: 100%;
}
body, td, th, input, textarea, select{
	outline: none;
	color: #474747;
	font-size: 14px;
  line-height: 16px;
	font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, p, img, a, ul, li, input, textarea{
	border: 0;
	margin: 0;
	padding: 0;
	outline: none;
}
a{
	text-decoration: none;
}
.mob{
	display: none;
}

/***************************
*** HEADER *****************
***************************/

#header{
  top: 0;
  left: 0;
  width: 100%;
  height: 68px;
  z-index: 1002;
  position: fixed;
  background: white;
  border-bottom: 1px solid black;
  -webkit-transition: height .35s ease;
	transition: height .35s ease;
}
#header.short{
  height: 40px;
}
h1{
  padding: 13px 0 0 35px;
}
#header.short h1{
  padding-top: 3px;
}
#header h1 img{
  height: 69px;
  -webkit-transition: height .35s ease;
	transition: height .35s ease;
}
#header.short h1 img{
  height: 47px;
}
#header ul{
  bottom: 0;
  right: 29px;
  position: absolute;
  list-style-type: none;
}
#header li{
  padding-left: 68px;
  display: inline-block;
}
#header li a{
  color: #474747;
  font-size: 10px;
  padding: 0 6px 0 6px;
  display: inline-block;
  text-transform: uppercase;
  -webkit-transition: background .35s ease;
	transition: background .35s ease;
}
#header li a:hover{
  background: #d7d7d3;
}
#header li span{
  padding-left: 20px;
  display: inline-block;
}
#header li em{
	font-style: normal;
}
#header li u{
	text-decoration: none;
}
#burger{
	top: 0;
	left: 0;
	width: 60px;
	height: 68px;
	display: none;
	position: absolute;
	background: transparent url(../images/picto-burger.svg) no-repeat center center;
	bacground-size: 30px;
}

/***************************
*** LANGS ******************
***************************/

#langs{
  top: 69px;
	left: 175px;
  z-index: 1005;
  position: fixed;
	-webkit-transition: top .35s ease;
	transition: top .35s ease;
}
#langs.short{
	top: 41px;
}
#langs ul{
	list-style-type: none;
}
#langs li{
	height: 14px;
	display: inline-block;
}
#langs a{
  color: #474747;
  font-size: 12px;
  line-height: 14px;
	background: white;
	vertical-align: top;
  padding: 0 3px 0 3px;
	display: inline-block;
  text-transform: uppercase;
  -webkit-transition: background .35s ease;
	transition: background .35s ease;
}
#langs a.over{
  background: #d7d7d3;
}

/***************************
*** MENU *******************
***************************/

#menu{
  left: 35px;
  top: 110px;
  width: 190px;
  z-index: 1001;
  position: absolute;
}
#menu.sticky{
	position: fixed;
}
#menu ul{
  list-style-type: none;
}
#menu li{
  padding: 8px 0 8px 0;
}
#menu li.search.msel{
  background: #d7d7d3;
}
#menu a{
  color: #474747;
  display: block;
  font-size: 12px;
  line-height: 12px;
  padding-left: 6px;
  text-transform: uppercase;
  -webkit-transition: background .35s ease;
	transition: background .35s ease;
}
#menu a.over{
  background: #d7d7d3;
}
#menu li.search.msel li a.over{
  background: white;
}
#menu span{
  float: right;
  display: block;
  position: relative;
  padding-right: 6px;
}
#menu .mob{
	display: none;
}
#menu .mob.last{
	padding-bottom: 30px;
}
#menu .mob a{
	font-size: 11px;
	text-align: right;
}
#menu .mob span{
	margin-left: 9px;
}

/***************************
*** SMENU ******************
***************************/

#menu li ul{
  height: 0;
  overflow: hidden;
  -webkit-transition: height .35s ease;
	transition: height .35s ease;
}
#menu li.open ul{
  height: auto;
}
#menu li li{
  line-height: 12px;
  padding: 2px 0 2px 0;
}
#menu li li.first{
  padding-top: 8px;
}
#menu li li a{
  font-size: 10px;
  padding-left: 12px;
}
#menu span.col{
	float: left;
	width: 8px;
	height: 8px;
  padding-right: 0;
	margin-right: 5px;
	display: inline-block;
	border: 1px solid #b5b5af;
}

/***************************
*** footer *****************
***************************/

#footer{
  padding: 30px 0 10px 0;
}
#footer ul{
  text-align: center;
}
#footer li{
  font-size: 10px;
  line-height: 17px;
  padding: 2px 0 2px 0;
  display: inline-block;
}
#footer li.sep{
  width: 10px;
}
#footer a{
	color: #474747;
  padding: 0 7px 0 6px;
  display: inline-block;
  text-transform: uppercase;
  -webkit-transition: background .35s ease;
	transition: background .35s ease;
}
#footer .fb a{
  padding-left: 29px;
  background: transparent url(../images/picto-fb.png) no-repeat 5px top;
}
#footer .bold li,
#footer .bold a{
  color: black;
}
#footer a:hover{
  background-color: #d7d7d3;
}

/***************************
*** CONTENT ****************
***************************/

.content{
	z-index: 2;
  padding: 69px 35px 0 260px;
	background: transparent url(../images/bg1.svg) no-repeat 180px -69px fixed;
	background-size: 100%;
}
.content.home{
	background: none;
}
.content.prods,
.content.pop{
	padding-top: 108px;
}
.content h2{
  font-size: 12px;
  line-height: 12px;
	font-weight: normal;
	padding: 49px 0 26px 0;
  text-transform: uppercase;
}
.content.pop h2{
	padding-top: 0;
}
.content p{
	padding: 8px 0 8px 20px;
}
.content a{
	color: inherit;
	text-decoration: underline;
}
.content a:hover{
	text-decoration: none !important;
}

/***************************
*** HOOK *******************
***************************/

.hook{
	width: 165px;
	height: 39px;
	margin-top: -39px;
	position: absolute;
	background: transparent url(../images/bg-compte.png) no-repeat left top;
}
.panier .hook{
	background-image: url(../images/bg-sac.png);
}

/***************************
*** DIAPO ******************
***************************/

#dinner{
  overflow: hidden;
	max-width: 1280px;
  position: absolute;
}
#dinner img{
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  position: absolute;
  -webkit-transition: opacity 2s ease;
	transition: opacity 2s ease;
}
#dinner img.portrait{
  width: auto;
  height: 100%;
}
#dinner img.show{
  opacity: 1;
}

/***************************
*** ILLUS ******************
***************************/

.fl{
	float: left;
	position: relative;
	margin: 8px 12px 8px 0;
	border: 1px solid #474747;
}

/***************************
*** VIDEO ******************
***************************/

.content video,
.content iframe.video{
	width: 100%;
	max-width: 1280px;
	margin-bottom: 60px;
}
.content video{
	cursor: pointer;
}

/***************************
*** COLS *******************
***************************/

.content .col{
	float: left;
	position: relative;
}
.content .col2{
	width: 50%;
}

/***************************
*** POPIN ******************
***************************/

.popin{
	background: #d7d7d3;
	padding: 10px 20px 0 20px;
}
.popin.pb{
	padding-bottom: 10px;
}
.popin h4,
.popin h3{
	font-size: 12px;
	line-height: 14px;
	padding-bottom: 26px;
	text-transform: uppercase;
}
.popin h4{
	padding: 26px 0 0 0;
}
.popin h3.nopb{
	padding-bottom: 0;
}

/***************************
*** FORMS ******************
***************************/

.popin form{
	padding-bottom: 30px;
}
form textarea,
form input[type="password"],
form input[type="text"]{
	border: 0;
	padding: 0;
	width: 90%;
	height: 20px;
	color: white;
	display: block;
	font-size: 12px;
	max-width: 250px;
	padding-left: 5px;
	line-height: 20px;
	margin-bottom: 12px;
	background: #b5b5af;
}
form textarea{
	padding: 5px 0 5px 5px;
	resize: none;
	height: 120px;
	line-height: 16px;
}
form .sendpass{
	height: 20px;
	color: #474747;
	display: block;
	line-height: 20px;
	padding-left: 5px;
	font-style: italic;
	margin-bottom: 12px;
	text-decoration: none;
}
form .sendpass:hover{
	text-decoration: underline !important;
}
.content form p{
	padding-left: 0;
	padding-top: 12px;
	padding-right: 30px;
}
a.but,
a.cheque,
form input[type="submit"]{
	width: auto;
	height: 20px;
	display: block;
	font-size: 12px;
	cursor: pointer;
	font-weight: bold;
	line-height: 20px;
	text-align: right;
	background: white;
	padding: 0 5px 0 5px;
	text-transform: uppercase;
	-webkit-transition: color .35s ease, background .35s ease;
	transition: color .35s ease, background .35s ease;
}
a.but,
a.cheque:hover,
form input[type="submit"]:hover{
	background: #b5b5af;
	color: white;
}
a.but{
	display: inline-block;
	text-decoration: none;
}
a.but:hover{
	color: #b5b5af;
	background: white;
}
::-webkit-input-placeholder{
  color: white;
  font-style: italic;
}
::-moz-placeholder{
	color: white;
  font-style: italic;
}
:-ms-input-placeholder{
	color: white;
  font-style: italic;
}
:-moz-placeholder{
	color: white;
  font-style: italic;
}
form select{
	border: 0;
	padding: 0;
	width: 90%;
	height: 20px;
	color: white;
	display: block;
	max-width: 250px;
	background: #b5b5af;
	margin-bottom: 12px;
}
form .confirm{
	display: none;
}
form .err{
	color: red;
	min-height: 26px;
	line-height: 26px;
	margin-bottom: -30px;
}
#form-recap .err{
	text-align: right;
	margin-bottom: -15px;
}

/***************************
*** PRODS ******************
***************************/

.prod{
	float: left;
	width: 33.3333%;
	position: relative;
}
.prod.double{
	width: 66.6666%;
}
.prod .inner{
	padding: 5px 15px 5px 15px;
}
.prod .img{
	width: 100%;
	display: table;
	background: transparent url(../images/bg-prod.svg) no-repeat center top;
	background-size: 100%;
}
.prod.double .img{
	background-image: url(../images/bg-prod-double.svg);
}
.prod .img .cell{
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
.prod .img img{
	width: 80%;
}
.prod.double .img img{
	width: 75%;
}
.prod a{
	color: #474747;
}
.prod p{
	padding: 0;
	height: 45px;
	padding-left: 0;
	font-size: 10px;
	margin-top: -10px;
	line-height: 15px;
	margin-left: -5px;
	text-transform: uppercase;
}
.prod p span{
	line-height: 14px;
	padding: 0 5px 0 5px;
	display: inline-block;
	-webkit-transition: background .35s ease;
	transition: background .35s ease;
}
.prod:hover p span{
	background: #d7d7d3;
}
.prod .add-to-bag{
	top: 15px;
	right: 30px;
	width: 30px;
	height: 22px;
	color: white;
	font-size: 20px;
	padding-top: 10px;
	line-height: 20px;
	position: absolute;
	text-align: center;
	background: transparent url(../images/picto-sac.png) no-repeat left top;
	-webkit-transition: opacity .35s ease;
	transition: opacity .35s ease;
}
.prod.in-bag .add-to-bag{
	height: 18px;
	font-size: 12px;
	padding-top: 14px;
	line-height: 12px;
}
.prod .couls{
	left: 0;
	opacity: 0;
	width: 100%;
	bottom: 65px;
	text-align: right;
	margin-left: -30px;
	position: absolute;
	-webkit-transition: opacity .35s ease;
	transition: opacity .35s ease;
}
.prod .couls.ok{
	opacity: 1;
}
.prod.double .couls{
	bottom: 80px;
}

/***************************
*** PLUS *******************
***************************/

.plus{
	top: 50%;
	width: 100px;
	font-size: 35px;
	line-height: 35px;
	position: absolute;
	margin: -17px 0 0 -50px;
}

/***************************
*** PRODUIT ****************
***************************/

.tab{
	width: 100%;
	display: table;
	margin-bottom: 25px;
}
.tab .cell{
	font-size: 16px;
  line-height: 18px;
	padding-right: 25px;
	display: table-cell;
	vertical-align: middle;
}
.tab .cell.img{
	max-width: 50%;
}
.tab.odd .cell{
	padding-right: 0;
	padding-left: 25px;
}

/***************************
*** PRODUIT ****************
***************************/

.prod-img{
	float: left;
	width: 66.6666%;
	padding-top: 49px;
	position: relative;
}
.prod-img .inner{
	padding: 0 15px 0 15px;
}
.prod-img .table{
	width: 100%;
	display: table;
	background: transparent url(../images/bg-prod-double.svg) no-repeat center top;
	background-size: 100%;
}
.prod-img .cell{
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
.prod-img .cell.col2{
	width: 50%;
}
.prod-img.porte .cell:first-child{
	width: auto;
}
.prod-img.porte .cell.details{
	display: none;
}
.prod-img.porte .col2 img,
.prod-img img{
	width: 78%;
}
.prod-img .col2 img{
	width: 98%;
}
.product h3{
	font-size: 12px;
	line-height: 12px;
	padding-left: 25px;
	font-weight: normal;
	text-transform: uppercase;
}

/***************************
*** PRODUIT FICHE **********
***************************/

.fiche{
	float: left;
	width: 33.3333%;
	position: relative;
}
.fiche .inner{
	padding: 0 15px 0 15px;
}
.fiche form{
	font-size: 11px;
	background: #d7d7d3;
	text-transform: uppercase;
	padding: 20px 15px 0 15px;
}
.content .fiche form h2{
	font-size: 12px;
	padding-top: 26px;
	font-weight: bold;
	line-height: 14px;
	padding-bottom: 25px;
}
.content .fiche form p{
	padding-left: 0;
	font-size: 12px;
	padding: 9px 0 9px 0;
	text-transform: none;
}
.fiche form input[type="text"]{
	padding: 0;
	width: 100%;
	max-width: none;
	text-align: center;
}
.fiche form div{
	padding-top: 10px;
}
.fiche form input[type="submit"]{
	margin-top: 30px;
}
.fiche form select{
	width: 100%;
	max-width: none;
	text-align: center;
}

/***************************
*** BOUTONS RETOUR & SHARE *
***************************/

a.share,
a.back{
	color: #474747;
	font-size: 11px;
	margin-top: 16px;
	line-height: 17px;
	margin-left: -5px;
	padding: 0 5px 0 5px;
	display: inline-block;
	text-transform: uppercase;
	text-decoration: none !important;
	-webkit-transition: background .2s ease, color .2s ease;
	transition: background .2s ease, color .2s ease;
}
a.share{
	float: right;
	margin-left: 0;
	margin-right: -5px;
	position: relative;
	padding-left: 27px;
	background: transparent url(../images/picto-fb.png) no-repeat 5px center;
}
a.share:hover,
a.back:hover{
	color: white;
	background-color: #b5b5af;
	text-decoration: none !important;
}

/***************************
*** PRODUIT COULEURS *******
***************************/

#couleurs{
	width: 10px;
	padding-top: 49px;
	margin-left: -7px;
	position: absolute;
}
#couleurs div{
	width: 12px;
	height: 12px;
	cursor: pointer;
	background: black;
	margin-bottom: 5px;
	border: 1px solid #b5b5af;
}
#couleurs div.porte{
	border: 0;
	background: transparent url(../images/picto-porte.png) no-repeat center center;
}

/***************************
*** PANIER *****************
***************************/

.panier table{
	width: 100%;
}
.panier th{
	padding: 5px;
	font-size: 11px;
	line-height: 11px;
	text-align: center;
	vertical-align: bottom;
	text-transform: uppercase;
}
.panier td{
	font-size: 12px;
	text-align: center;
	padding: 2px 5px 2px 5px;
}
.panier th.art,
.panier td.art{
	text-align: left;
}
.panier td.ind{
	padding-left: 50px !important;
}
.panier td.i{
	width: 66px;
	text-align: left;
}
.panier td.d{
	width: 26px;
}
.panier img{
	width: 60px;
}
.panier form td input{
	width: 30px;
	margin: 0;
	padding-left: 0;
	text-align: center;
	display: inline-block;
}
.panier .del{
	width: 20px;
	height: 20px;
	font-size: 16px;
	cursor: pointer;
	line-height: 20px;
	text-align: center;
	background: #b5b5af;
	display: inline-block;
	-webkit-transition: background .2s ease;
	transition: background .2s ease;
}
.panier .del:hover{
	background: transparent;
}
.panier td a{
	color: #474747;
	font-size: 14px;
}
.panier td a.suivre{
	font-size: inherit;
}
.panier a:hover{
	text-decoration: underline;
}
.panier tr.recap td{
	background: #b5b5af;
	border-top: 10px solid #d7d7d3;
}
.panier tr.stotal td{
	text-transform: uppercase;
	border-top: 30px solid #d7d7d3;
}
.panier tr.total td{
	font-weight: bold;
	text-transform: uppercase;
}
.content.panier .fid{
	width: 50%;
	float: right;
	line-height: 20px;
	text-align: right;
	font-weight: bold;
	font-style: italic;
	position: relative;
	padding: 20px 0 0 0;
}

/***************************
*** BOUTON *****************
***************************/

.bouton{
	float: right;
	width: 33.3333%;
	padding-top: 20px;
	text-align: right;
	position: relative;
}
.cheque,
form .bouton input[type="submit"]{
	display: inline-block;
}
.cheque{
	float: right;
	position: relative;
	text-decoration: none !important;
}

/***************************
*** CODE *******************
***************************/

.promo{
	float: left;
	width: 33.3333%;
	margin-top: 20px;
	position: relative;
	padding-bottom: 40px;
}
.promo .inner{
	background: #b5b5af;
}
.promo form{
	padding: 15px;
}
.promo p{
	padding: 0 !important;
	font-weight: bold;
}
.promo form input[type="text"]{
	padding: 0;
	width: 100%;
	color: #474747;
	max-width: none;
	background: white;
	margin: 5px 0 0 0;
	text-align: center;
}
.promo ::-webkit-input-placeholder{
  color: #b5b5af;
}
.promo ::-moz-placeholder{
	color: #b5b5af;
}
.promo :-ms-input-placeholder{
	color: #b5b5af;
}
.promo :-moz-placeholder{
	color: #b5b5af;
}
.promo form input[type="submit"]{
	float: right;
	margin-top: 5px;
	position: relative;
}
.promo form .err{
	margin-bottom: 0;
	margin-top: -26px;
}

/***************************
*** ADRESSE ****************
***************************/

.content #form-adr-fac p.radio,
.content #form-adr p.radio{
	padding: 0 0 10px 15px;
}
#form-mes .count{
	font-size: 11px;
	line-height: 11px;
	margin-top: -10px;
}

/***************************
*** RECAP ******************
***************************/

#cgv{
	width: 50%;
	float: left;
	font-size: 12px;
	margin-top: 20px;
	line-height: 20px;
	position: relative;
}
.content p.tac{
	padding-left: 0;
	font-size: 12px;
	padding-top: 20px;
	text-align: center;
}
.content p.tac img{
	width: 220px;
	margin-top: 10px;
}
.recap .back{
	margin-top: 0;
	line-height: 20px;
	margin-bottom: 20px;
}

/***************************
*** MAP ********************
***************************/

#map{
	padding-top: 12px;
}
#map iframe{
	width: 100%;
	height: 100%;
}
.content .points p{
	padding-left: 0;
}
.content .points h3{
	font-size: 14px;
	line-height: 14px;
	padding-top: 30px;
	font-weight: normal;
	text-transform: uppercase;
}
.points .col .inner{
	padding: 0 15px 0 15px;
}

/***************************
*** CALENDAR ***************
***************************/

#cal{
	top: -1000px;
	left: -1000px;
	z-index: 1000;
	position: fixed;
}
table.calendar td.atelier{
	cursor: pointer;
	background: green !important;
}
table.calendar td.complet{
	cursor: default;
	background: red !important;
}

/***************************
*** FORM-BANQUE ************
***************************/

#payform{
}

/***************************
*** RESPONSIVE *************
***************************/

@media screen and (max-width: 1080px) {
	.prod,
	.prod.double{
		width: 50%;
	}
	.prod.double .img{
		background-image: url(../images/bg-prod.svg);
	}
	.prod.double .img img{
		width: 72%;
	}
}

@media screen and (max-width: 960px) {
	#header{
	  height: 68px !important;
	}
	#burger{
		display: block;
	}
	h1{
		padding-left: 0;
		text-align: center;
		padding-top: 13px !important;
	}
	#header h1 img{
	  height: 69px !important;
	}
	#header .hide{
		display: none;
	}
	#header ul{
	  right: 9px;
	}
	#langs{
		top: 4px;
		left: auto;
		right: 12px;
		width: 100px;
		text-align: right;
	}
	#menu{
		top: 69px;
		left: -100%;
		width: 220px;
		background: white;
		position: absolute !important;
		border-right: 1px solid black;
		border-bottom: 1px solid black;
	}
	#menu.open{
		left: 0;
	}
	#menu ul{
		padding: 9px 9px 0 9px;
	}
	#menu .mob{
		display: block;
	}
	#menu span{
		margin-left: 9px;
	}
	#menu span.col{
		margin-left: 0;
	}
	.content{
	  padding: 69px 15px 0 15px;
	}
	.fiche .inner{
		padding: 0 0 0 15px;
	}
	.prod .couls{
		opacity: 1;
	}
	.prod-img,
	.fiche{
		clear: both;
		float: none;
		width: auto;
		position: static;
	}
	.fiche{
		margin: 30px 15px 50px 0;
	}
	.content .fiche form h2{
		padding-top: 0;
	}
	#couleurs{
		padding-top: 0;
	}
}

@media screen and (max-width: 780px) {
	.fl{
		float: none;
		width: auto;
		position: static;
		margin: 8px 0 8px 20px;
	}
	.tab{
		display: block;
	}
	.tab .cell{
		padding: 0 !important;
		display: block;
	}
	.mob{
		display: block;
	}
	.web{
		display: none !important;
	}
	.brand img{
		margin-left: 20px;
	}
}

@media screen and (max-width: 680px) {
	.content .col{
		float: none;
		position: static;
		padding-bottom: 40px;
	}
	.content .col2{
		width: auto;
	}
	.promo{
		width: 50%;
	}
}

@media screen and (max-width: 580px) {
	#header li em{
		display: none;
	}
	#header li span{
	  padding-left: 9px;
	}
	.prod,
	.prod.double{
		width: 100%;
	}
	.product h3{
		margin-top: 30px;
		padding-left: 15px;
	}
	.panier td.i{
		width: 0;
		padding: 0;
		overflow: hidden;
	}
	.panier td.i img{
		display: none;
	}
	#cgv,
	.content.panier .fid{
		width: auto;
		float: none;
		position: static;
	}
	#payform img{
		width: 30px;
	}
	.promo{
		width: 75%;
		float: none;
		position: static;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 480px) {
	.panier th.pu,
	.panier td.pu{
		padding: 0;
		overflow: hidden;
		max-width: 0 !important;
	}
}