@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400');

body { width: 960px; margin: auto; font-family: Quicksand, helvetica, arial, sans-serif; color: #888989; }

a { color: #b39b73; text-decoration: none; }
.button { vertical-align:top; box-sizing: content-box; display: inline-block; padding: 5px 10px; line-height: 20px; background-color: #fff; border: 1px solid #8AA898; border-radius: 5px; color: #b39b73; cursor: pointer; font-size: 12pt; }
.choix { padding: 5px 10px; height: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 25px; color: #8AA898; cursor: pointer; font-size: 12pt; }
.choix.selected { border: 1px solid #b39b73; }
.retour { padding: 15px; background: url('../images/fleche.png') no-repeat left; }

h1 { font-size: 18pt; text-align: center; font-weight: 300; font-family: Quicksand; margin: 0; margin-top: 20px; }
h1 i { font-size: 24pt; }
h2 { font-size: 11pt; text-align: center; font-weight: 300; font-family: Quicksand; margin-top: 1px;}

.menu { position: relative; padding-top: 145px; height: 100px; font-weight: 400; font-family: Quicksand; }
.menu ul { position: absolute; display: inline-block; width: 400px; margin: 0; }
.menu-left { left: 0; background: url('../images/menu.png') no-repeat left 27px; padding: 0 0 27px 25px; }
.menu-right { right: 0; background: url('../images/menu.png') no-repeat right 27px; padding: 0 25px 27px 0; }
.menu li {  display: inline-block; width: 40%; list-style: none; margin-bottom: 10px; text-align: center; }
.menu-left li { float: left; }
.menu-right li { float: right; }
.menu a.actif { padding-top: 4px; box-shadow: 0 -12px 0 -11px #b39b73; }

.menu-center { position: absolute; height: 242px; width: 197px; top: 2px; margin-left: auto; margin-right: auto; left: 0; right: 0; }
.logo { height: 100%; width: 100%; display: inline-block; background: url('../images/logo.png') no-repeat center; }

.menu-links { position: absolute; top: 2px; left: 0; margin: 0; padding: 0; }
.menu .menu-links li { display: inline-block; list-style: none; width: auto; margin: auto; text-align: left; }

.menu .cart { position: absolute; top: 2px; right: 0; }
.menu .cart img { vertical-align: bottom; }
.menu .cart .cart-number { display: inline-block; width: 33px; height: 33px; background: url('../images/rondvide.png') no-repeat center; color: #fff; text-align: center; line-height: 33px; }

.credits { font-size: 10pt; margin: 0; padding: 0 0 0 20px; }
.credits li { list-style: none; }
.credit-photo { font-size: 8pt; position: absolute; right: 10px; background-color: #fff; }

.bandeau-accueil { position: relative; padding: 20px 0 10px 0; }
.bandeau-accueil img { width: 470px; height: 240px; }
.bandeau-accueil-gauche, .bandeau-accueil-droit, .bandeau-accueil-full { position: relative; display: inline-block; padding-bottom: 10px; }
.bandeau-accueil-gauche, .bandeau-accueil-full { float: left; }
.bandeau-accueil-droit { float: right; }
.bandeau-accueil-full img { width: 960px; height: 366px; }
ul.accueil { margin: 0; padding: 0; }
ul.accueil li { display: inline-block; list-style: none; float: left; padding: 10px 20px; position: relative; }
ul.accueil li:first-child { padding-left: 0; }
ul.accueil li:last-child { padding-right: 0; }
ul.accueil img { width: 210px; height: 210px; opacity: 1; }
ul.accueil li .credit-photo, .bandeau-accueil .credit-photo { bottom: 0; }
ul.accueil li span.fond { display: inline-block; position: absolute; height: 30px; top: 170px; left: 20px; width: 210px; background-color: #fff; opacity: 0.5; }
ul.accueil li span.lien { display: inline-block; position: absolute; font-size: 18pt; line-height: 30px; text-align: center; top: 170px; left: 20px; width: 210px; background-color: transparent; text-shadow: 3px 3px 4px #fff,  3px -3px 4px #fff,  -3px 3px 4px #fff,  -3px -3px 4px #fff; }
ul.accueil li:first-child span.fond { left: 0; }
ul.accueil li:first-child span.lien { left: 0; }
.accueil-intro { padding: 0 0 10px 0; text-align: center; line-height: 1.5em; }

div.atelier-description { padding: 10px 120px; text-align: justify; clear: both; }
ul.atelier li { display: inline-block; list-style: none; float: left; padding: 10px 10px 14px 10px; position: relative; }
ul.atelier.top { margin: 0; padding: 0 120px; }
ul.atelier.top li { width: 720px; height: 480px; }
ul.atelier.top li img { width: 720px; height: 480px; }
ul.atelier.left { float: left; width: 365px; padding: 0 0 0 110px; }
ul.atelier.right { float: right; width: 365px; padding: 0 110px 0 0; }
ul.atelier li img { width: 100%; }
ul.atelier li .credit-photo { bottom: 0; }

.collection {
	clear: both;
	padding-top: 15px;
}

ul.sur-mesure { margin: 0; padding: 0 90px; }
ul.sur-mesure li { list-style: none; }
ul.sur-mesure li .nav { user-select: none; cursor: pointer; color: #aaaaaa; display: inline-block; width: 30px; text-align: center; vertical-align: middle; font-size: 5em; }
ul.sur-mesure li .nav:hover { color: inherit; }
ul.sur-mesure li .diaporama { user-select: none; display: inline-block; position: relative; width: 720px; height: 480px; vertical-align: middle; }
ul.sur-mesure li .diaporama-previous { position: absolute; width: 50%; height: 100%; top: 0; left: 0; cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="30" style="font-size: 40px; font-weight: bold"><text y="30" color="%23aaaaaa" stroke="%23ffffff" stroke-width="1.1">‹</text></svg>') 3 20, w-resize; }
ul.sur-mesure li .diaporama-next { position: absolute; width: 50%; height: 100%; top: 0; right: 0; cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="30" style="font-size: 40px; font-weight: bold"><text y="30" color="%23aaaaaa" stroke="%23ffffff" stroke-width="1.1">›</text></svg>') 12 20, e-resize; }
ul.sur-mesure li .diaporama-images { display: inline-block; width: 100%; text-align: center; }
ul.sur-mesure li .diaporama-images img { display: none; }
ul.sur-mesure li .diaporama-images img:first-child { display: inherit; }
ul.sur-mesure li .legende { margin: 0 30px 60px 30px; }

ul.produits { margin: 0; padding: 0 30px; }
.produit { position: relative; display: inline-block; list-style: none; float: left; width: 280px; height: 280px; padding: 10px; line-height:  }
.produits img { width: 100%; height: 100%; }
.produit .fond { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: white; opacity: 0.6; }
.produit .description { color: #666767; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 120px 0 0 0; display: none; text-align: center; background-color: transparent; }
.produit .description .nom { opacity: 1; font-size: 22pt; font-weight: bold; font-style: italic; margin: 0 0 0 0; font-weight: 400; font-family: Quicksand; }
.produit .description .type { opacity: 1; font-size: 12pt; font-weight: bold; margin: 0; font-weight: 400; font-family: Quicksand; }

.fiche-produit { margin: 20px 96px 0 96px; }
.produit-visuel { display: inline-block; max-width: 480px; float: left; margin-right: 48px; text-align: center; }
.produit-zoom { position: relative; width: 480px; height: 480px; margin-bottom: 12px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.produit-zoom:not(.no-zoom) { cursor: zoom-in; }
.produit-zoom .legende { position: absolute; background: white; width: 100%; padding: 5px 0; text-align: center; color: #333333;  background-color: white; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ }
.produit-zoom .legende.top { top: 0; }
.produit-zoom .legende.bottom { bottom: 0; }
.produit-zoom .legende a { color: #7a551a; }
.zoom-link { display: none; }
.produit-description { text-align: justify; }
.produit-visuel ul { margin: 0; padding: 0; }
.produit-visuel li { list-style: none; margin-right: 12px; }
.produit-visuel ul.miniatures li { display: inline-block; cursor: pointer; }
.produit-miniature { position: relative; width: 87px; height: 87px; background-repeat: no-repeat; background-position: center; background-size: cover; }

.panier table { width: 640px; background-color: #fff; border: 1px solid #8AA898; border-spacing: 0; border-collapse: collapse; margin: 20px auto; }
.panier-visuel img { padding: 3px; width: 64px; height: 64px; }
.panier-nom { font-size: 14pt; }
.panier-type { font-size: 10pt;  font-style: italic; }
.panier-qte { padding-left: 20px; }
.panier-qte input { width: 24px; text-align: right; border: 1px solid #ccc; color: #888989; }
.panier-prix { text-align: right; }
.panier-shipping-line td { padding-bottom: 10px; }
.panier-total-line td { padding-bottom: 10px; }
.panier-expedition td { height: 60px }
.panier-frais-de-port td { font-size: 10pt; text-align: center; font-style: italic; padding: 0 0 10px; }
.panier-frais-de-port.retrait { display: none; }
.product-remove { display: inline-block; width: 16px; height: 16px; background: url('../images/croix1.png') no-repeat center; cursor: pointer; }
.product-remove:hover { background: url('../images/croix2.png') no-repeat center; }

.commande-form-fields { padding: 20px; border: 1px solid #8AA898; width: 620px; margin: 24px auto; }
.commande-form label { line-height: 14pt; width: 240px; float: left; margin: 6px 0; padding-right: 12px; text-align: right; font-style: initial; }
.commande-form fieldset { border: none; margin: 6px 0; padding: 0; font-style: italic; }
.commande-form .choix { margin: 6px 0; }
.commande-form input[type='text'] { line-height: 14pt; width: 320px; padding-left: 4px; border: 1px solid #ccc; color: #888989; margin: 6px 0; }
.commande-form textarea { width: 320px; height: 80px; border: 1px solid #ccc; color: #888989; margin: 6px 0; }
.commande-form label.invalid-field { background: url('../images/croix1.png') no-repeat center; }
.commande-form input[type='text'].invalid-field { border: 1px solid #b39b73; }
.commande-form .choix-paiement { margin: 6px 0; }
.commande-form .frais-de-port { font-size: 10pt; font-style: italic; text-align: justify; }
.commande-form .rgpd { font-size: 10pt; font-style: italic; text-align: justify; }
.commande-form-promo input[type='text']#code_promo { width: 120px; vertical-align:top; box-sizing: content-box; display: inline-block; padding: 5px 10px; line-height: 20px; font-size: 12pt; border: 1px solid #ccc;}
.code-promo-message { font-size: 10pt; font-style: italic; padding-bottom: 1em; }
.ancien-prix { margin-right: 2em; text-decoration: line-through; }
.nouveau-prix { font-weight: bold; }

.deux-adresses { display: none; }
.adresse-livraison-identique, .adresse-livraison-autre { color: #b39b73; cursor: pointer; }

.invisible { display: none; }

.message { width: 640px; padding: 24px; margin: 24px auto; }

.contact { width: 440px; margin: 24px auto; text-align: justify; margin-bottom: 120px; }

.cgv { width: 640px; margin: 24px auto; text-align: justify; }
.cgv h1 { font-size: 10pt; font-weight: bold; }

footer { clear: both; padding-top: 20px; text-align: center }

.message-produit { font-weight: bold; }
.message-panier { margin: 20px auto; padding: 20px; font-weight: bold; border: 1px solid #b39b73; }
.message-boutique { margin: 60px auto; text-align: center; border: 1px solid #b39b73; }

.filtre { border: 1px solid #8AA898; padding: 0; margin: 10px 40px; }

.filtre > li { display: inline-block; height: 24px; line-height: 24px; width: 25%; text-align: center; list-style: none; padding: 6px 0; }
.filtre-item{ position: relative; cursor: pointer; color: #b39b73; }
.filtre-valeurs { margin: 0; padding: 0 0 5px 0; display: none; width: 100%; position: absolute; left: -1px; top: 36px; background-color: #fff; z-index: 100; border: 1px solid #8AA898; border-top: none; }

.filtre-valeur {list-style: none; cursor: pointer;}
.filtre-valeur.impossible {cursor: default; color: #ddd;}

.filtre-zone { display: none; }
.filtre-zone.actif { display: inline-block;}
.filtre-remove { margin-bottom: -2px; cursor: pointer; display: inline-block; width: 16px; height: 16px; background: url('../images/croix1.png') no-repeat center right; }

.collaborateur { color: #b39b73; }
.collaboration { margin: 20px 0 40px 0; text-align: justify; }
.collaboration h2 { font-size: 14pt; text-align: left; }

.shooting { position: relative; height: 900px; }
.shooting img { padding: 2px 0; position: relative; }
.shooting-left { position: absolute; left: 0; width: 100%; text-align: left; }
.shooting-right { position: absolute; right: 0; width: 100%; text-align: right; }

.collaborateurs { clear: both; }