/*************************************
Copyright (c) 2005-2016 Infini'click
                                     
http://www.infiniclick.fr				
                                      
Date de realisation : 03/2017         
*************************************/

html, body {height: 100%; margin: 0; padding: 0}
body {width: 100%; font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 22px; display: table}
#content {width: 100%; height: auto; overflow: hidden}
a img:link, a img:visited, a img:hover, a:link img, a:visited img, a:hover img {border:none; background: transparent}
a img:hover, a:hover img {border:none; background: transparent !important} 
a, a:active, img, img:active, input img, input img:hover {border: none; outline: none}
a, a:visited {color: #f89921; text-decoration: none}
a:hover {color: #f89921; text-decoration: underline}
img {max-width: 100%; height: auto}
iframe {border: 0}
.iframe {position: relative; margin: 0; padding: 0; text-align: center}
ul, li {margin: 0; padding: 0}
li {margin-left: 24px}
.clear {clear: both}
/* Header */
#fond-header {width: 100%; height: 140px; background: #d0d0d8}
#header {width: 1200px; height: 110px; margin: 0 auto; padding: 15px 0}
.logo {width: 500px; height: 110px; float: left; line-height: 110px}
.compte {width: 700px; height: 90px; float: right; text-align: right; line-height: 110px; padding-top: 20px}
/* Recherche */
#recherche {margin: 0 0 20px; width: 264px; border: 1px solid #9ca7ba}
.input-rec {width: 218px; color: #000; margin: 0; padding: 8px 6px 8px 40px; font-size: 15px; border: none; outline: none; background: url(../images/site/picto-loupe.png) no-repeat}
::-webkit-input-placeholder {color:#000; font-size: 15px}
::-moz-placeholder {color:#000; font-size: 15px} /* firefox 19+ */
:-ms-input-placeholder {color:#000; font-size: 15px} /* ie */
input:-moz-placeholder {color:#000; font-size: 15px}
/* Menu */
nav {width: 1200px; height: 70px; margin: 0 auto}
nav a.mobile_handle {display: none}
nav ul {width: 100%; height: 70px; margin: 0 0 0 -16px; padding: 0}
nav ul li {float: left; color: #000; list-style: none; height: 70px; line-height: 70px; padding: 0; font-size: 18px; text-transform: uppercase}
nav ul a, nav ul a:visited {color: #000; text-decoration: none; padding: 0; cursor: pointer}
nav ul a:hover {text-decoration: none; color: #f89921}
nav ul a.actif {text-decoration: none; color: #f89921; padding: 0}
nav ul a.passif {text-decoration: none; padding: 0}
/* Bandeaux */
#bandeaux {width: 100%; height: 380px; background: #414162}
.band-img {width: 1200px; height: 380px; margin: 0 auto}
/* Contenu */
#contenu {width: 1200px; height: auto; margin: 0 auto; overflow: auto}
h1 {font-size: 30px; color: #f89921; font-weight: normal; font-family: 'Open Sans', sans-serif}
h2 {font-size: 20px; color: #6a6a89; font-weight: normal; font-family: 'Open Sans', sans-serif}
h3 {font-size: 17px; color: #f89921; font-weight: normal; font-family: 'Open Sans', sans-serif}
hr {width: 100%; height: 1px; border: 0; color: #6a6a89; background: #6a6a89}
#left {float: left; width: 890px; height: auto; padding: 20px 0}
#right {float: right; width: 270px; height: auto; padding-top: 36px}
/* Colonne */
.box {background: #efeff2; width: 268px; margin-bottom: 20px; border: 1px solid #d0d0d8}
.titre-col {background: #6a6a89; color: #fff; padding: 8px 0; text-align: center; text-transform: uppercase; font-size: 18px}
.texte-col {padding: 6px; color: #000; font-size: 13px}
.texte-col-text1 {text-align: center; font-size: 19px; padding: 8px 0}
.texte-col-text2 {text-align: center; font-size: 27px; font-weight: bold; padding: 8px 0 2px}
.texte-col-text3 {text-align: center; font-size: 13px; padding: 0 0 8px}
.lien-col {text-align: right; margin: 10px 0 6px}
ul.col {margin: 6px 0 6px -8px}
ul li.padding {padding: 6px 0}
ul.col li a, ul.col li a:visited {color: #000; text-decoration: none; font-size: 15px}
ul.col li a:hover {color: #f89921; text-decoration: underline}
/* Home */
ul.home {width: 100%; height: auto; margin: 0; padding: 0; display: table}
ul.home li {float: left; width: 33%; list-style: none; height: auto; margin: 0; padding: 0; display: table-cell}
.pad1 {padding: 6px 4px 0; text-align: center; font-size: 20px; font-weight: bold; vertical-align: text-top}
.pad2 {padding: 0 4px; text-align: center; vertical-align: text-top}
/* Revendeurs */
.rev {width: 100%; height: auto; display: table; overflow: auto; margin: 16px auto 26px}
.rev-l {width: 35%; height: auto; display: table-cell; vertical-align: top}
.rev-r {width: 60%; height: auto; display: table-cell; padding-left: 5%; vertical-align: top}
/* Produits */
.table-liste {line-height: 1.6em; margin: 16px 0; border-collapse: collapse; font-size: 1em !important; width: 100%}
.table-liste td {padding: 5px !important; border: 1px solid #ddd; vertical-align: middle}
ul.produits {width: 100%; padding: 0; margin: 0 0 10px; display: table}
ul.produits li {float: left; width: 48%; list-style: none; margin: 0; padding: 0; display: table-cell}
ul.produits li:last-child {float: right;}
.titre-prod {background: #6a6a89; color: #fff; padding: 8px 0; text-align: center}
.prix-prod {padding: 8px 0; float: right; font-weight: bold; font-size: 16px}
.desc-prod {width: 100%; padding: 10px 0; height: auto; display: table}
.desc-prod-l {width: 35%; display: table-cell; padding: 0 1% 6px 0}
.desc-prod-r {width: 64%; display: table-cell; vertical-align: top; padding: 0 0 6px}
.btn-prod {width: 100%; height:40px; border-bottom: 1px solid #f89921; margin-bottom: 16px}
.btn-prod-l {float: left; padding-left: 6px}
.btn-prod-r {float: right; padding-right: 6px}
/* Formulaire */
.form-z {width: 890px; min-height: 80px; height: auto}
.form-l {float: left; width: 420px}
.form-r {float: right; width: 420px}
input[type=submit] {-webkit-appearance: none}
input[type=text], textarea, select {-webkit-appearance: none}
.input, .textarea, .select, .newsletter {border: 1px #ccc solid; font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 20px; color: #000; border-radius: 3px; padding: 12px; margin-top: 4px; width: 400px}
.textarea {width: 870px; margin: 8px 0}
.select {width: 428px; padding: 8px 12px}
.newsletter {width: 260px}
.erreur {position: absolute; top: 71px; left: 25%; display: none; opacity: 0; z-index: 100; width: 800px; height: auto; color: #fff; padding: 8px; background: #ff0000}
.ok {position: absolute; top: 71px; left: 25%; display: none; opacity: 0; z-index: 99; width: 800px; height: auto; color: #fff; padding: 8px; background: #009304}
.erreur p, .ok p {display: inline}
.alerte {background: #ff0000; color: #fff; padding: 8px; width: 656px}
.btn-qte {margin: 0; background: #f89921; padding: 2px 6px; color: #fff; text-decoration: none; display: inline-block; line-height: 16px; cursor: pointer; border: none}
.sqte {width: 54px; margin-top: -4px; line-height: 10px; padding: 3px 5px}
.bouton-bleu, .bouton-orange, .bouton-orange2, .bouton-panier {background: #9898b3; padding: 8px 18px; color: #fff; text-decoration: none; border: 1px solid #fff; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 17px; text-transform: uppercase}
.bouton-bleu:hover, .bouton-bleu:focus {text-decoration: none; background: #9898b3; border: 1px solid #fff}
.bouton-orange {background: #f89921}
.bouton-orange:hover, .bouton-orange:focus {text-decoration: none; background: #f89921}
.bouton-orange2 {padding: 2px 9px; background: #f89921}
.bouton-orange2:hover, .bouton-orange2:focus {text-decoration: none; background: #f89921}	
.bouton-panier {background: #f89921 url(../images/site/picto-panier.png) left 16px center no-repeat; padding-left: 56px}
.bouton-panier:hover, .bouton-panier:focus {background: #f89921 url(../images/site/picto-panier.png) left 16px center no-repeat; text-decoration: none; border: 1px solid #fff}
a.bouton-bleu, a.bouton-orange, a.bouton-panier {color: #fff; text-decoration: none; border: 1px solid #fff}
a.bouton-panier {color: #fff; text-decoration: none; border: 1px solid #fff}
.gros {font-size: 26px}
/* Panier */
#panier {clear: both; width: 100%; height: 30px; margin: 10px 0}
#panier ul {width: 100%; margin: 0; padding: 0}
#panier li {list-style: none; float: left; width: 18%; margin: 0 1% 0 0; text-transform: uppercase; font-weight: bold; padding: 0; font-size: 15px}
#panier li.pause {color: #ccc; border-bottom: 5px solid #ccc; padding-bottom: 3px; width: 18%px; margin-right: 2%}
#panier li.actif {color: #414162; border-bottom: 5px solid #414162; padding-bottom: 3px; width: 18%; margin-right: 2%}
#panier li a, #panier li a:visited {color: #ccc; border-bottom: 5px solid #ccc; text-decoration: none; width: 18%; display: block; padding-bottom: 3px}
#panier li a:hover {color: #414162; border-bottom: 5px solid #414162; text-decoration: none}
/* Listes commandes-factures */
.contenant, .contenant-form, .contenant-liste {clear: both; margin: 10px 0; padding: 0; height: auto; width: 100%}
.contenant-liste {margin-top: -12px; padding: 12px 0 0 0}
#entete-fac, #entete-adr {width: 100%; height: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px}
#entete-fac li.sup, ul.detail-fac li.sup {list-style: none; width: 6%; float: left; text-align: center}
#entete-fac li.libelle, ul.detail-fac li.libelle {list-style: none; width: 46%; float: left}
#entete-fac li.libelle2, ul.detail-fac li.libelle2 {list-style: none; width: 52%; float: left}
#entete-fac li.libelle3, ul.detail-fac li.libelle3 {list-style: none; width: 75%; float: left}
#entete-fac li.qte, ul.detail-fac li.qte {list-style: none; width: 12%; float: left; text-align: center}
#entete-fac li.montant, #entete-fac li.montant2, ul.detail-fac li.montant, ul.detail-fac li.montant2 {list-style: none; width: 18%; float: left; text-align: right}
#entete-fac ul, #entete-adr ul {list-style: none; height: 30px; line-height: 30px; margin: 0; padding: 0; position: relative}
#entete-fac li, #entete-adr li {list-style: none; height: 30px; line-height: 30px; margin: 0; padding: 0; float: left}
#entete-adr li {padding-left: 4px}
#detail-fac, #detail-adr {width: 100%; height: auto}
ul.detail-fac, ul.detail-mois, ul.total-mois {list-style: none; width: 100%; margin: 0; padding: 0; float: left}
ul.detail-mois {background: #ecf8ff; height: 22px; line-height: 22px; color: #1a83bc; font-weight: bold}
ul.total-mois {background: #eee; height: 22px; line-height: 22px; color: #000}
ul.detail-adr {list-style: none; width: 100%; margin: 0; padding: 0; float: left}
ul.detail-fac li {list-style: none; min-height: 20px; height: auto; line-height: 20px; margin: 0; padding: 6px 0; float: left}
ul.detail-pay li {list-style: none; min-height: 36px; height: auto; line-height: 36px; margin: 0; padding: 0; float: left}
ul.detail-adr li {list-style: none; min-height: 30px; height: auto; line-height: 22px; margin: 0; padding: 0; float: left}
#total-fac {width: 100%; height: auto; border-top: 1px solid #ccc; padding-top: 10px}
#total-fac ul, #total-fac li {list-style: none; min-height: 22px; height: auto; line-height: 22px; margin: 0; padding: 0; position: relative}
#total-fac li {float: left}
#total-fac li.libelle {list-style: none; float: left; width: 80%; text-align: right}
#total-fac li.montant {list-style: none; float: left; width: 20%; text-align: right}
.sup {width: 80px; text-align: center; border: 0; height: auto}
.nbr {width: 120px; text-align: center; border: 0; height: auto}
.pic {width: 38px; text-align: center; border: 0; height: auto}
.ajo, .ajo2 {width: 120px; text-align: center; border: 0; height: auto}
.ajo a, .ajo a:visited, .ajo2 a, .ajo2 a:visited {color: #f89921; text-decoration: none}
.ajo a:hover, .ajo2 a:hover {text-decoration: underline}
.inf {width: 40px; text-align: left; border: 0; height: auto}
.qte-panier, .qte-panier:focus {padding: 4px 5px; border: 1px solid #000; background: #fff; color: #000; width: 30px; font-size: 14px; outline: none; text-align: center; margin-top: -3px}
/* Articles */
ul.ordre {width: 100%; height: auto; overflow: hidden; list-style-type: none; border-bottom: 1px solid #ddd; margin-bottom: 16px}
ul.ordre li {width: 48%; display: block; margin: 0; padding: 0}
ul.ordre li:first-child {float: left}
ul.ordre li:last-child {float: right}
.art-com {font-size: 15px; line-height: 18px; font-style: italic}
.art-img {float: left; margin: 0 10px 10px 0}
.boxl {width: 100%; padding: 0 0 10px; margin-bottom: 16px; overflow: hidden}
.boxli {width: 100%; padding: 0 0 10px; margin-bottom: 16px; border-top: 1px solid #ddd; overflow: hidden}
.infos-art {font-size: 12px; font-weight: normal; text-decoration: none; line-height: 14px}
.infos-art a, .infos-art a:visited {text-decoration: none; color: #f89921}
.infos-art a:hover {text-decoration: underline; color: #f89921}
.art-haut {width: 100%; height: auto; margin-bottom: 20px}
.art-txt {font-size: 14px; font-weight: normal; text-decoration: none; color: #000; line-height: 16px}
.art-txt ul li {padding-bottom: 4px}
.art-txt a, .art-txtt a:visited {text-decoration: none; color: #f89921}
.art-txt a:hover {text-decoration: none; color: #f89921}
.art-bas {width: 100%}
.art-basl {float: left; font-size: 12px; font-weight: normal; text-decoration: none; color: #3a3a39; line-height: 30px}
.art-basr {float: right}
.ava-acc {width: 100%; height: 60px; padding: 10px 0 0; margin: 0}
.ava {margin: 0; width: 50px; float: left}
.ava-tit {color: #3a3a39; padding: 3px 0 0 14px; margin: 0 0 0 50px}
.ava-tit a, .ava-tit a:visited {color: #f89921; text-decoration: none}
.ava-tit a:hover {color: #f89921; text-decoration: underline}
.ava-txt {margin: 0; width: 100%; height: auto; color: #3a3a39}
.ava-txt a, .ava-txt a:visited {color: #f89921; text-decoration: none}
.ava-txt a:hover {color: #f89921; text-decoration: none}
.art-res {clear: both; padding: 0; margin: 16px 0 0; width: 100%; height: auto}
/* Footer */
#footer {width: 100%; height: auto; background: #d0d0d8; color: #000; font-size: 15px; display: table-row}
#zone-footer {width: 1200px; height: auto; margin: 0 auto; padding: 16px 0; overflow: hidden; display: table}
#zone-footer-l {width: 31%; padding: 0 1%; height: auto; border-left: 1px solid #fff; border-right: 1px solid #fff; display: table-cell}
#zone-footer-r {height: auto; width: 31%; padding: 0 1%; border-right: 1px solid #fff; display: table-cell}
#zone-footer-c {height: auto; width: 31%; padding: 0 1%; border-right: 1px solid #fff; display: table-cell}
.footer-titre {font-size: 20px; font-weight: bold; color: #133a8d; text-align: center}
.footer-texte {font-size: 15px; color: #000; text-align: center; padding-top: 16px}
#footer-bas {width: 1200px; margin: 0 auto; padding: 16px 0; overflow: auto}
#footer-bas-l {float: left; width: 50%}
#footer-bas-r {float: right; width: 50%; text-align: right}
#zone-footer a, #zone-footer a:visited, #footer-bas-r a, #footer-bas-r a:visited {color: #000; text-decoration: none}
#zone-footer a:hover, #footer-bas-r a:hover {color: #000; text-decoration: underline}
#zone-footer ul {padding-top: 16px; margin-left: 16px}
.droite {text-align: right}
.message {font-size: 18px; color: #ff0000; font-weight: bold}
#cookies{width: 100%; height: auto; padding: 10px 0 10px 0; font-size: 13px; color:#fff; background: #6a6a89; text-align: center; bottom: 0; position: fixed}
.cookies {padding-left: 20px; font-size: 20px; font-weight: bold}
#cookies a, #cookies a:visited {text-decoration: none; color:#fff}
#cookies a:hover {text-decoration: underline; color:#f89921}
@media only screen and (min-width: 320px) and (max-width: 1199px) {
	#fond-header {height: auto; overflow: auto; padding: 6px 0 16px}
	#header {width: 100%; height: auto}
	.logo {width: 40%; height: auto; line-height: inherit; padding: 0 1%}
	.compte {width: 56%; height: auto; line-height: inherit; padding: 50px 1% 0}
	nav {width: 100%}
	#contenu {width: 98%; padding: 0 1% 20px; overflow: auto}
	#bandeaux {width: 96%; height: auto; padding: 0 2%; margin: 0}
	.band-img {width: 100%; height: auto}
	#left {width: 74%}
	#right {width: 23%}
	.box {width: 100%}
	.titre-col {font-size: 16px}
	#recherche {width: 99%}
	.input-rec {width: 81%; padding: 8px 1% 8px 18%}
	.texte, p, .texte li, li {text-align: left}
	.bouton {font-size: 16px; line-height: 18px; padding: 6px 8px}
	.form-z {width: 100%; min-height: 80px; height: auto}
	.form-l {float: left; width: 48%}
	.form-r {float: right; width: 48%}
	.input, .textarea, .select, .newsletter {padding: 12px 2%; width: 96%}
	.textarea {width: 98%; margin: 8px 0; padding: 12px 1%}
	.select {width: 100%; padding: 8px 0}
	#zone-footer {width: 100%; margin: 0 auto}
	#footer-bas {width: 98%; padding: 6px 1%}
	.iframe {position: relative; margin: 0; padding: 0}
	.iframe .iframe-ratio {display: block; width: 100%; height: auto}
	.iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0}
}
@media only screen and (min-width: 320px) and (max-width: 999px) {
	body {margin-top: 28px}
	#bandeaux {display: none}
	nav {position: fixed; float: none; margin: 0; padding: 0; top: 0; left: 0; width: 100%; z-index: 50000; height: 28px}
	nav a.mobile_handle {display: block; padding: 3px 1% 3px 0; background: #6a6a89; text-align: right; margin: 0; height: 28px; line-height: 32px}
	nav ul {display: none; height: auto; margin: 0}
	nav ul li {display: block; position: relative; float: none; text-align: center; background: #6a6a89; border-bottom: 1px solid #fff; font-size: 16px; height: 28px; line-height: 32px; margin: 0; padding-bottom: 6px}
	nav ul a, nav ul a:link, nav ul a:active, nav ul a:visited {display: block; width: 100%; float: none; color: #fff; margin: 0}
	nav ul a:hover {color: #f89921; text-decoration: none}
	nav ul a.actif {text-decoration: none; color: #f89921; padding: 0; border-bottom: none}
	.newsletter {width: 90%}
	.sup {width: 10%; text-align: center}
	.nbr {width: 18%; text-align: center}
	.ajo, .ajo2 {width: 18%; text-align: center}
	h1 {line-height: 32px}
	.erreur, .ok {left: 1%; width: 90%}
}
@media only screen and (max-width: 800px) {
	#left {float: none; width: 100%}
	#right {float: none; margin-left: 0; width: 100%}
}
@media only screen and (max-width: 640px) {
	.logo {float: none; width: 90%; height: auto; padding: 0 5%; text-align: center; line-height: inherit}
	.compte {float: none; width: 96%; height: auto; line-height: inherit; padding: 20px 2% 0; text-align: center}
	h1 {font-size: 24px; line-height: 26px}
	ul.home {display: block}
	ul.home li {float: none; width: 96%; display: block}
	.pad1 {padding: 6px 2%; font-size: 18px}
	.pad2 {padding: 0 2% 10px; font-size: 16px}
	ul.produits {display: block}
	ul.produits li {float: none; width: 100%; display: block; overflow: hidden; margin-bottom: 16px}
	ul.produits li:last-child {float: none}
	.bouton-bleu, .bouton-orange, .bouton-orange2, .bouton-panier {padding: 8px; font-size: 14px}
	.bouton-bleu:hover, .bouton-bleu:focus {text-decoration: none; background: #9898b3; border: 1px solid #fff}
	.bouton-orange {background: #f89921}
	.bouton-orange:hover, .bouton-orange:focus {text-decoration: none; background: #f89921}
	.bouton-orange2 {padding: 2px 9px; background: #f89921}
	.bouton-orange2:hover, .bouton-orange2:focus {text-decoration: none; background: #f89921}
	.bouton-panier {background: #f89921 url(../images/site/picto-panier.png) left 16px center no-repeat; padding-left: 56px}
	.bouton-panier:hover, .bouton-panier:focus {background: #f89921 url(../images/site/picto-panier.png) left 16px center no-repeat; text-decoration: none; border: 1px solid #fff}
	.form-z {width: 96%; min-height: 80px; height: auto}
	.form-l {float: none; width: 96%}
	.form-r {float: none; width: 96%}
	.sup {width: 20%}
	.ajo {width: 26%}
	.ajo2 {display: none}
	ul.ordre {border-bottom: none; padding-bottom: 0}
	ul.ordre li {width: 100%}
	ul.ordre li:first-child {float: none}
	ul.ordre li:last-child {float: none}
	.ava-txt {margin: 16px 0 0}
	#zone-footer {width: 96%; display: block; padding: 10px 2%}
	#zone-footer-l {width: 100%; border-left: none; border-right: none; border-bottom: 1px solid #fff; display: block; padding: 10px 0}
	#zone-footer-r {width: 100%; border-right: none; display: block; padding: 10px 0}
	#zone-footer-c {width: 100%; border-right: none; border-bottom: 1px solid #fff; display: block; padding: 10px 0}
}
@media only screen and (max-width: 420px) {
	#entete-fac li.sup, ul.detail-fac li.sup {list-style: none; width: 12%; float: left; text-align: center}
	#entete-fac li.libelle, ul.detail-fac li.libelle {list-style: none; width: 46%; float: left}
	#entete-fac li.libelle2, ul.detail-fac li.libelle2 {list-style: none; width: 58%; float: left}
	#entete-fac li.qte, ul.detail-fac li.qte {list-style: none; width: 12%; float: left; text-align: center}
	#entete-fac li.montant2, ul.detail-fac li.montant2 {list-style: none; width: 30%; float: left; text-align: right}
	#entete-fac li.montant, ul.detail-fac li.montant {display: none}
	#panier {height: auto}
	#panier li {width: 96%; padding: 0; margin: 0 0 16px}
	#panier li.pause {width: 96%}
	#panier li.actif {width: 96%}
	#panier li a, #panier li a:visited {width: 96%}
	#total-fac li.libelle {width: 70%}
	#total-fac li.montant {width: 30%}
}