/*--------------------------------------------------------------------------------------- */
/* Polices locales via font-face */
/*--------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'icons';
  src: url('../font/icons.eot');
  src: url('../font/icons.eot?#iefix') format('embedded-opentype'),
       url('../font/icons.woff?v=17') format('woff'),
       url('../font/icons.ttf') format('truetype'),
       url('../font/icons.svg#icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'icons2';
  src: url('../font/icons2.eot');
  src: url('../font/icons2.eot?#iefix') format('embedded-opentype'),
       url('../font/icons2.woff?v=17') format('woff'),
       url('../font/icons2.ttf') format('truetype'),
       url('../font/icons2.svg#icons2') format('svg');
  font-weight: normal;
  font-style: normal;
}


/*--------------------------------------------------------------------------------------- */
/* Style Reset - Normalize */
/*--------------------------------------------------------------------------------------- */
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,picture,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}article,aside,details,figcaption,figure,footer,header,picture,main,nav,section,summary,iframe{display:block}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:400}caption,th{text-align:left}a:active,embed,object{outline:0}audio,canvas,video{vertical-align:middle;display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}button,html,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus,button:focus{outline:thin dotted}abbr[title]{border:0;text-decoration: none;}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;display:block;height:0;padding:0;border:0}mark{background:#ff0;color:#000}p,pre{margin:0 0 1em}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:'';content:none}small{font-size:100%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}nav ol,nav ul{list-style:none;list-style-image:none;margin:0}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure,form{margin:0}fieldset{border:0;margin:0;padding:0}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button{padding:0;border:0 none;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}


/*--------------------------------------------------------------------------------------- */
/* Styles generaux */
/*--------------------------------------------------------------------------------------- */

/* - - - - - Box-model - - - - - */
*, *:before, *:after{
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}


td, th { vertical-align:top; }
hr{ margin: 1em 0; border-top: 1px solid #d1d1d1; }
img{ display:block; vertical-align: middle; }
blockquote{ margin-bottom:1em; font-style:italic; }
cite{ font-weight:bold; }
q{ font-style:italic; }

/* Méthode de clear float */
.clear{ clear:both; }
.clearfix:after{ visibility:hidden; display:block; font-size:0; content:'.'; clear:both; height:0; }
.ie8 .clearfix { zoom:1; }

/* Cacher pour les lecteurs d'écrans et navigateurs */
.hidden, .champCache{ display: none !important; visibility: hidden; }

/* Passe la navigation, pour screen reader */
.passeNav { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Mobile vs Desktop */
.mobile{ display:none !important; }

@media only screen and (max-width: 767px) {
	.desktop{ display:none !important; }
	.mobile{ display:block !important; }
}


/* Icon font - Fontello
--------------------------------------------------------------------------------------- */
[class^="icon-"]:before, [class*=" icon-"]:before,
.incTinyMce ul li:before{
	display: inline-block;
	width: 1em;
	font:normal normal 1em/1em "icons";
	speak: none;
	text-decoration: inherit;
	text-align: center;
	font-variant: normal;
	text-transform: none;
}

.icon-right:before { content: '\e800'; }
.icon-double-right:before { content: '\e800\e800'; white-space: nowrap; letter-spacing:-2px; }
.icon-left:before { content: '\e801'; }
.icon-double-left:before { content: '\e801\e801'; white-space: nowrap; letter-spacing:-2px; }
.icon-up:before { content: '\e802'; }
.icon-down:before { content: '\e803'; }
.icon-menu:before { content: '\e804'; }
.icon-search:before { content: '\e805'; }
.icon-cancel:before { content: '\e806'; }
.icon-facebook:before { content: '\e807'; }
.icon-twitter:before { content: '\e808'; }
.icon-pinterest:before { content: '\e809'; }
.icon-gplus:before { content: '\e80a'; }
.icon-linkedin:before { content: '\e80b'; }
.icon-check:before { content: '\e80c'; }
.icon-print:before { content: '\e80d'; }
.icon-cart:before { content: '\e80e'; }
.icon-mosaic:before { content: '\e80f'; }
.icon-user:before { content: '\e810'; }
.icon-star:before { content: '\e811'; }
.icon-star-half:before { content: '\e812'; }
.icon-remove:before { content: '\e813'; }
.icon-logout:before { content: '\e814'; }
.icon-share:before { content: '\e815'; }
.icon-youtube:before { content: '\e816'; }


/* Body et HTML
--------------------------------------------------------------------------------------- */
body{
	background:#f0f0f0;
	font:400 14px/22px "Roboto", Arial, Helvetica, sans-serif;
	color:#333;
}


/* Conteneurs
--------------------------------------------------------------------------------------- */
.conteneur{
	position:relative;
	width:100%;
	max-width:1270px;
	margin:0 auto;
	padding:0 20px;
}

.backgroundPage{ background-color: #fff; }

.quatreCentQuatre{ padding-top:30px; }

@media only screen and (min-width: 1270px) {
	.conteneur{ padding-left:50px; padding-right:50px; }
}

/* IE8 est barré à 960px */
.no-mediaqueries .conteneur{ width:960px; min-width:960px; max-width:960px;  }

main{
	min-height:500px;
	min-width:280px;
}

main .conteneur{ background-color: #FFF; }

.no-mediaqueries main{ min-height:0; }


/* Titres
--------------------------------------------------------------------------------------- */
h1, .h1mobile{ margin-bottom:0.8em; font:700 30px/36px "Roboto Condensed", Arial, Helvetica, sans-serif; color:#333; }
h2{ margin-bottom:0.8em; font:700 26px/30px "Roboto Condensed", Arial, Helvetica, sans-serif; color:#000; }
h3{ margin-bottom:0.8em; font:700 22px/26px "Roboto Condensed", Arial, Helvetica, sans-serif; color:#000; }
h3 .petitH3{ font:700 12px/16px "Roboto Condensed", Arial, Helvetica, sans-serif; font-weight:normal;}
h4{ margin-bottom:1em; font:700 16px/20px "Roboto Condensed", Arial, Helvetica, sans-serif; color:#000; }

.h1mobile{ margin:20px 0 0; text-align: center; }

.incTinyMce h2, .incTinyMce h3, .incTinyMce h4{ margin:1.3em 0 0.5em; }


/* Hyperliens
--------------------------------------------------------------------------------------- */
a{
	color:#25aae1;
	text-decoration:none;
	-webkit-transition: color 0.15s linear 0s;
	transition: color 0.15s linear 0s;
}
a:hover, a:focus, a:active{ color:#918f90; outline:none; }


/* Textes et CMS
--------------------------------------------------------------------------------------- */
.incTinyMce a{ color:#25aae1; text-decoration: underline; }
.incTinyMce a:hover, .incTinyMce a:focus, .incTinyMce a:active{ color:#918f90; }

.incTinyMce abbr[title]{border-bottom:1px dotted; }
.incTinyMce img{ max-width:100%; max-height: 100%; }

/* - - - Listes - - - */
.incTinyMce ul, .incTinyMce ol{ margin-bottom:1em; overflow:hidden; }
.incTinyMce ul{ list-style-type: none; }
.incTinyMce ul li{ position: relative; margin-left:24px; }
.incTinyMce ul li:before {
	content: '\2022';
	position:absolute;
	top:6px;
	left:-18px;
	color:#25aae1;
}
/* Chrome qui aligne tout croche */
@supports (-webkit-appearance:none) {
	.incTinyMce ul li:before { top:3px; }
}

.incTinyMce ol li{ margin-left:20px; }
.incTinyMce ol ol > li{ list-style:lower-alpha; }

/* - - - Image en float - - - */
.mortaise{
	float:left;
	margin:0.25em 1.25em 1.25em 0;
	text-align:center;
	font-size:12px;
}
.mortaise img{ border:3px solid #333; }

.intro{ font:700 16px/32px "Roboto", Arial, Helvetica, sans-serif; color:#000; }

.note{ font-size:11px; line-height: 1.5em; font-style: italic; }

.vide{
	margin-bottom:50px;
	padding:40px 20px;
	border:1px solid #d1d1d1;
	background-color: #f3f3f3;
	text-align:center;
	font:700 20px/36px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}
.rechVide{ margin-top:26px; }

@media only screen and (max-width: 1269px) {
	.rechVide{ margin:26px 20px 0; }
}

@media only screen and (max-width: 767px) {
	.vide{
		margin-bottom:24px;
		padding:20px;
		font:700 16px/24px "Roboto", Arial, Helvetica, sans-serif;
	}
}

/* Points de suspension a la fin de la fonction couperTexte */
.hellip{
	white-space:nowrap;
	color:#333;
	font-size:0.9em;
}

/* - - - Responsive video - - - */
.videoConteneur{ max-width:520px; margin:0 auto; }
.video{
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%; /* Ratio 16/9 */
    padding-top: 30px; /* Hauteur des controles */
}

.video iframe, .video object, .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* - - - Style par défaut d'un tableau - - - */
.incTinyMce table{
	margin-bottom: 1em;
	border: 1px solid #666;
}
.incTinyMce table th{
	border: 1px solid #666;
	background: #333;
	font: bold 16px/20px "Roboto", Arial, Helvetica, sans-serif;
	color: #fff;
}
.incTinyMce table td, .incTinyMce table th{
	min-width: 50px;
	padding: 0.25em 0.5em;
}
.incTinyMce table tr:nth-child(even){ background: #eee; }


/* Icones
--------------------------------------------------------------------------------------- */
/* Creer une icone sur les liens PDF et RSS */
.lienPDF{ display:inline-block; margin:1em 0; line-height:30px; color:#000; }
.lienPDF:before{
	content:'';
	display:inline-block;
	width:29px;
	height:31px;
	margin-right:6px;
	background:url(../gx/m/icone-pdf.png) 0 0 no-repeat;
	vertical-align:-10px;
}

.lienRSS{ display:inline-block; margin:1em 0; }
.lienRSS:before{
	content:'';
	display:inline-block;
	width:16px;
	height:16px;
	margin-right:6px;
	background:url(../gx/m/icone-rss.png) 0 0 no-repeat;
	vertical-align:-3px;
}


/*--------------------------------------------------------------------------------------- */
/* Formulaires */
/*--------------------------------------------------------------------------------------- */
input, select { vertical-align:middle; }
input[type=radio], input[type=checkbox]{ vertical-align:-1px; margin-right:10px; }
input[readonly]{ background-color:#eee; }
textarea{ resize: vertical; }
label{ display:block; }

/* Couleur de l'etoile pour champs obligatoires */
label abbr, .note abbr{
	padding:0 2px;
	border:0 none !important;
	color:#25aae1;
	cursor:help;
}


/* - - - Input default - - - */
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=tel],
.form input[type=search], .form input[type=url], .form select, .form .customSelect, .form textarea, .multiSelect{
	width:100%;
	max-width:350px;
	height:36px;
	padding:8px 10px;
	border:1px solid #ccc;
    border-radius: 0;
	-webkit-appearance: none;
	font:400 13px/18px Arial, Helvetica, sans-serif;
	color:#636466;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition:box-shadow ease-in-out 0.3s;
	transition:box-shadow ease-in-out 0.3s;
}

.ie8 .form input[type=password]{ font-family: Arial, Helvetica, sans-serif !important; }

.form textarea{ height:104px; max-width:9999px; }


/* - - - Shadow focus - - - */
.form input[type=text]:focus, .form input[type=email]:focus, .form input[type=password]:focus, .form input[type=tel]:focus,
.form input[type=search]:focus, .form input[type=url]:focus, .form select:focus, .form textarea:focus,
.form .customSelect.customSelectFocus, .multiSelect.focus{
	outline:0;
	border: 1px solid #333;
	border:1px solid rgba(51,51,51,0.6);
	-webkit-box-shadow:0 0 5px rgba(51,51,51,0.6);
	box-shadow:0 0 5px rgba(51,51,51,0.6);
}


/* - - - Custom Select - - - */
.customSelect, .multiSelect { background:url(../gx/m/select.png) right -34px no-repeat #fff; }
.customSelect.customSelectFocus, .multiSelect.focus { background-position:right 14px; }
.wrapper{ position: relative; display:inline-block; }


/* - - - Placeholders - - - */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color:#999; font-style:italic; }
input::-moz-placeholder, textarea::-moz-placeholder{ opacity:1; color:#999; font-style:italic; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder{ color:#999 !important; font-style:italic; }


/* - - - Buttons - - - */
button, .button{
	display:inline-block;
	background-color: transparent;
	text-decoration:none !important;
	-webkit-transition: background 0.15s linear 0s, color 0.15s linear 0s;
	transition: background 0.15s linear 0s, color 0.15s linear 0s;
}
.button{
	padding:0 35px;
	border-radius:5px;
	background: #ffb710;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjcxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjg2MGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ffb710 0%, #ff860a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb710), color-stop(100%,#ff860a));
	background: -webkit-linear-gradient(top,  #ffb710 0%,#ff860a 100%);
	background: -o-linear-gradient(top,  #ffb710 0%,#ff860a 100%);
	background: -ms-linear-gradient(top,  #ffb710 0%,#ff860a 100%);
	background: linear-gradient(to bottom,  #ffb710 0%,#ff860a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb710', endColorstr='#ff860a',GradientType=0 );

	text-align: center;
	font:700 14px/48px "Open Sans", Arial, Helvetica, sans-serif;
	color:#000 !important;
	text-transform: uppercase;

	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5);
	margin-top: 20px;
}

button:hover, button:focus, button:active{ outline:none; }
.button:hover, .button:focus, .button:active{
	background: #ff860a;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmODYwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmI3MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ff860a 0%, #ffb710 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff860a), color-stop(100%,#ffb710));
	background: -webkit-linear-gradient(top,  #ff860a 0%,#ffb710 100%);
	background: -o-linear-gradient(top,  #ff860a 0%,#ffb710 100%);
	background: -ms-linear-gradient(top,  #ff860a 0%,#ffb710 100%);
	background: linear-gradient(to bottom,  #ff860a 0%,#ffb710 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff860a', endColorstr='#ffb710',GradientType=0 );
	outline:none;
}

.ie9only .button{ filter:none !important; }

.button.bleu{
	background: #3899db;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM4OTlkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMDg4ZDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #3899db 0%, #3088d5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3899db), color-stop(100%,#3088d5));
	background: -webkit-linear-gradient(top,  #3899db 0%,#3088d5 100%);
	background: -o-linear-gradient(top,  #3899db 0%,#3088d5 100%);
	background: -ms-linear-gradient(top,  #3899db 0%,#3088d5 100%);
	background: linear-gradient(to bottom,  #3899db 0%,#3088d5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3899db', endColorstr='#3088d5',GradientType=0 );
	color:#fff !important;
}

.button.bleu:hover, .button.bleu:focus, .button.bleu:active{
	background: #3088d5;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMwODhkNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzODk5ZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #3088d5 0%, #3899db 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3088d5), color-stop(100%,#3899db));
	background: -webkit-linear-gradient(top,  #3088d5 0%,#3899db 100%);
	background: -o-linear-gradient(top,  #3088d5 0%,#3899db 100%);
	background: -ms-linear-gradient(top,  #3088d5 0%,#3899db 100%);
	background: linear-gradient(to bottom,  #3088d5 0%,#3899db 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3088d5', endColorstr='#3899db',GradientType=0 );
	outline:none;
}

.boutonInactif,.boutonInactif:hover, .boutonInactif:focus, .boutonInactif:active{
	background-color:#999;
	color:#000;
	cursor: default;
	filter:none;
}

.buttonSec{
	display:inline-block;
	padding:0 15px;
	border: 1px solid #d1d1d1;
	border-radius: 5px;
	vertical-align: -1px;
	background-color:#ebebeb;
	font:700 13px/34px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration: none !important;
	-webkit-transition: background 0.15s linear 0s, color 0.15s linear 0s;
	transition: background 0.15s linear 0s, color 0.15s linear 0s;
}

.buttonSec:hover, .buttonSec:focus, .buttonSec:active{
	background-color: #fff;
	color:#000;
}

@media only screen and (max-width: 767px) {
	.button{ padding:0 15px; }
}

/* - - - Avertissements et erreurs - - - */
.messageInfo, .messageSucces, .messageAvertissement, .messageErreur, .transportGratuit  {
	margin-bottom:10px;
	padding:10px;
	border:1px solid;
	border-radius:4px;
	text-align:center;
}
.transportGratuit {
	margin-top:10px;
	line-height: 20px;
}

.colPanier > .messageInfo, .colPanier > .messageSucces, .colPanier > .messageAvertissement, .colPanier > .transportGratuit, .colPanier > .messageErreur { margin-right:300px; }
.colPrincipale > .messageInfo, .colPrincipale > .messageSucces, .colPrincipale > .messageAvertissement, .colPrincipale > .messageErreur { margin-left:270px; }

@media only screen and (max-width: 767px) {
	.colPanier > .messageInfo, .colPanier > .messageSucces, .colPanier > .messageAvertissement, .colPanier > .transportGratuit, .colPanier > .messageErreur { margin-right:0; }
	.colPrincipale > .messageInfo, .colPrincipale > .messageSucces, .colPrincipale > .messageAvertissement, .colPrincipale > .messageErreur { margin-left:0; }
}

.messageInfo{ color:#006592; background-color:#c6edff; border-color:#006592; }
.messageSucces{ color:#004D07; background-color:#dff2bf; border-color:#004D07; }
.messageAvertissement{ color:#7a440a; background-color:#ffffb3; border-color:#7a440a; }
.transportGratuit{ color:#f7941d; background-color:#fff4c6; border-color:#ffce93; }
.transportGratuit strong{ color:#f7941d; }
.transportGratuit span{ color:#f7941d; font-weight: bold; font-size: 20px;line-height:30px; }
.transportGratuit a.petit{ color:#f7941d; text-decoration: underline; font-size: 11px; line-height: 28px;}
.transportGratuit a.retour{ color:#000; }
.messageErreur{ color:#c00; background-color:#fdd; border-color:#c00; }

.erreur, .erreur label, .erreur abbr { color:#c00 !important; }
.erreur input, .erreur textarea, .erreur select, .erreur .customSelect,
input.erreur, textarea.erreur, select.erreur, .customSelect.erreur{ border:1px solid #c00 !important; }

.form .erreur input:focus, .form .erreur textarea:focus, .form .erreur select:focus, .form .erreur .customSelect.customSelectFocus,
.form input.erreur:focus, .form textarea.erreur:focus, .form select.erreur:focus, .form customSelect.customSelectFocus.erreur{
	-webkit-box-shadow:0 0 5px rgba(204,0,0,0.8);
	box-shadow:0 0 5px rgba(204,0,0,0.8);
}

/* Form Layout
--------------------------------------------------------------------------------------- */
.form .col1, .form .col2{
	float:left;
	width:47.5%;
	margin-bottom:1em;
}
.form .col1{ clear:left; }
.form .col2{ margin-left:5%; }
.form .colFull{	clear:left;	margin-bottom:20px; }

.form .rang{ clear:left; width:100%; height:36px; margin-bottom:20px;  }

.form .rang label{
	clear:left;
	float:left;
	width:150px;
	line-height:36px;
}
.form .rang input, .form .rang .wrapper, .form .rang textarea{
	float:left;
	width:300px;
	margin-left:20px;
}
.form .rang select{ width:300px; }
.form .rang textarea{ width:100%; max-width:600px; }

.form .radiocheck{ clear:left; margin-bottom:20px; }
.form .radiocheck input{
	display:inline-block;
	width:auto;
}

.form .radiocheck label{
	display:inline;
}

@media only screen and (max-width: 960px) {
	.form .rang{ height:auto; margin-bottom:10px; }
	.form .rang label, .form .rang input, .form .rang .wrapper{ float:none; width:100%; margin-left:0; }
	.form .rang select{ width:100%; }
}


/*--------------------------------------------------------------------------------------- */
/* Elements UI */
/*--------------------------------------------------------------------------------------- */

/* - - - Menu deroulant pour mobile - - - */
.menuDeroulant{
	position: relative;
	width:100%;
	height:42px;
	padding:0 36px 0 12px;
	border: 1px solid #25aae1;
	background-color: #fff;
	text-align: left;
	font:400 16px/42px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}

.menuDeroulant:after{
	content:'';
	position: absolute;
	top:17px;
	right:14px;
	display:block;
	width:10px;
	height:8px;
	background:url(../gx/m/select.png) 0 0 no-repeat;
}

.menuDeroulant:hover, .menuDeroulant:focus, .menuDeroulant:active{
	background-color: #f3f3f3;
}

@media only screen and (max-width: 767px) {
	.listeDeroulante{
		display:none;
		position: absolute;
		top:42px;
		left:0;
		z-index: 3;
		width:100%;
		padding:10px 12px;
		border:1px solid #25aae1;
		border-top:0;
		background-color: #f3f3f3;
		-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
		-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
		box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
	}

	#menuSide .listeDeroulante h6{ font:400 14px/24px "Roboto", Arial, Helvetica, sans-serif; color:#333; }
	#menuSide .listeDeroulante h6 a{ color:#333; }
}


/* - - - Multi-select pour filtre - - - */
.multiSelect{
	position: relative;
	height: auto;
	min-height:36px;
	padding-right:30px;
	cursor:default;
}

.ie8 .multiSelect{ min-height:0; }

.multiSelect ul{
	display:none;
	position: absolute;
	top:36px;
	left:0;
	z-index: 2;
	min-width:240px;
	max-height: 343px;
	overflow-y: auto;
	padding:5px 10px;
	border:1px solid #ccc;
	list-style: none;
	background-color: #fff;
	line-height: 24px;
}

@media only screen and (max-width: 767px) {
	.selectionnes{ display:none; }
	.multiSelect{ background:none; border:0; }
	.multiSelect ul{
		display:block;
		position: static;
		top:0;
		min-width:0;
		max-height: 9999px;
		padding:0;
		border:none;
		background-color: transparent;
	}
}


/*--------------------------------------------------------------------------------------- */
/* En-tete */
/*--------------------------------------------------------------------------------------- */
#entete{
	position:relative;
	background-color: #231F20;
	color:#f8f8f8;
}

#logo{
	position:absolute;
	display:block;
	width:220px;
}


#public #logo{ width:230px; left:20px; top:20px; }
#logo .demco{ display: inline-block; width:190px; margin-right: 20px; }
#logo .gotrick{ display: inline-block; width:117px; }

#gotrick #logo{ width:140px; top:7px; left:20px; }
#demco #logo{ width:223px; top:7px; left:20px; }

.no-mediaqueries #public #logo{ width:325px; height:82px; background: url(../gx/demco-gotrick-logo.png) 0 0 no-repeat; }
.no-mediaqueries #public #logo div{ display: none; }

@media only screen and (min-width: 1270px) {
	#gotrick #logo, #demco #logo{ left:50px; }
}

@media only screen and (max-width: 1150px) {
	#demco #logo{ top:22px; }
}

@media only screen and (max-width: 950px) {
	#gotrick #logo{ top:22px; }
	#demco #logo{ top:35px; }
}

@media only screen and (max-width: 900px) {
	#public #logo{
		width:262px;
		top:51px;
	}
	#logo .demco{ width:146px; margin-right: 20px; }
	#logo .gotrick{ width:92px; }
}


/* Menu secondaire
--------------------------------------------------------------------------------------- */
#menuSec{
	float:right;
	height:54px;
	padding:16px 0;
	font:400 12px/22px "Roboto", Arial, Helvetica, sans-serif;
}

#menuSec ul{ float:left; }

#menuSec li{ float:left; color:#f8f8f8; }
#menuSec a{
	display:block;
	margin-right:15px;
	color:#f8f8f8;
}
#menuSec a:hover, #menuSec a:focus, #menuSec a:active{ color:#918f90; }


#menuSec .langue, #menuSec .connexion{ margin-right:10px;  }

#menuSec .listeSouhaitEntete a:before{
	content:'\e811';
	font:normal normal 13px "icons";
	vertical-align: 1px;
}

#menuSec .panier a:before{
	content:'\e80e';
	margin-right:6px;
	vertical-align: -2px;
	font:normal normal 20px/22px "icons";
}
#menuSec .panier span{
	color:#f8f8f8;
	-webkit-transition: color 0.15s linear 0s;
	transition: color 0.15s linear 0s;
}
#menuSec .panier a:hover, #menuSec .panier a:focus, #menuSec .panier a:active,
#menuSec .panier a:hover span, #menuSec .panier a:focus span, #menuSec .panier a:active span{ color:#918f90; }


/* - - - Bouton qui change de site - - - */
/* - - - Bouton qui change de site - - - */
#menuSec .btnDetaillant, #menuSec .btnBoutique{ float:right; }

#menuMobile .btnDetaillant{ padding:14px; }


#menuSec .btnDetaillant a, #menuMobile .btnDetaillant a{
	margin-right: 0;
	font:700 12px/22px "Roboto Condensed", Arial, Helvetica, sans-serif;
	color:#000 !important;
}

#menuSec .btnBoutique a, #menuMobile .btnBoutique a{
	margin-right: 0;
	font:700 12px/22px "Roboto Condensed", Arial, Helvetica, sans-serif;
	color:#000 !important;
}

#menuSec .btnDetaillant a, #menuSec .btnBoutique a{ display: inline-block; }
#menuMobile .btnDetaillant a, #menuMobile .btnBoutique a{
	display: block;
	padding: 0 6px;
	text-align: center;
	border: 1px solid #ccc;
	margin-bottom:10px;
}

.btnBoutique a{padding:0 10px;}

.btnBoutique{margin-top:1px!important;height:22px;}


.btnDetaillant .btnGotrick{
	margin: 0;
	background: #ffffff;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNGM0YzQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ffffff 0%, #c4c4c4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#c4c4c4));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#c4c4c4 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#c4c4c4 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#c4c4c4 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#c4c4c4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=0 );
}

#menuSec .btnGotrick{ margin-left:3px; }

.btnDetaillant .btnGotrick:hover, .btnDetaillant .btnGotrick:focus{
	background: #c7c7c7;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M3YzdjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #c7c7c7 0%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7c7c7), color-stop(100%,#ffffff));
	background: -webkit-linear-gradient(top,  #c7c7c7 0%,#ffffff 100%);
	background: -o-linear-gradient(top,  #c7c7c7 0%,#ffffff 100%);
	background: -ms-linear-gradient(top,  #c7c7c7 0%,#ffffff 100%);
	background: linear-gradient(to bottom,  #c7c7c7 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#ffffff',GradientType=0 );
	color:#000;
}

.btnDetaillant .btnDemco, .btnBoutique{
	margin:0;
	background: #8ddcfa;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhkZGNmYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0YjNkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YWQ2ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #8ddcfa 0%, #54b3db 50%, #5ad6e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8ddcfa), color-stop(50%,#54b3db), color-stop(100%,#5ad6e5));
	background: -webkit-linear-gradient(top,  #8ddcfa 0%,#54b3db 50%,#5ad6e5 100%);
	background: -o-linear-gradient(top,  #8ddcfa 0%,#54b3db 50%,#5ad6e5 100%);
	background: -ms-linear-gradient(top,  #8ddcfa 0%,#54b3db 50%,#5ad6e5 100%);
	background: linear-gradient(to bottom,  #8ddcfa 0%,#54b3db 50%,#5ad6e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ddcfa', endColorstr='#5ad6e5',GradientType=0 );
}

.btnDetaillant .btnDemco:hover, .btnDetaillant .btnDemco:focus, .btnBoutique:hover,.btnBoutique:focus{
	background: #3da4be;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkYTRiZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU5YWVkMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhY2UzZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #3da4be 0%, #59aed2 50%, #ace3f9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3da4be), color-stop(50%,#59aed2), color-stop(100%,#ace3f9));
	background: -webkit-linear-gradient(top,  #3da4be 0%,#59aed2 50%,#ace3f9 100%);
	background: -o-linear-gradient(top,  #3da4be 0%,#59aed2 50%,#ace3f9 100%);
	background: -ms-linear-gradient(top,  #3da4be 0%,#59aed2 50%,#ace3f9 100%);
	background: linear-gradient(to bottom,  #3da4be 0%,#59aed2 50%,#ace3f9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3da4be', endColorstr='#ace3f9',GradientType=0 );
	color:#000;
}

.ie9only .btnDetaillant .btnGotrick, .ie9only .btnDetaillant .btnGotrick:hover, .ie9only .btnDetaillant .btnGotrick:focus,
.ie9only .btnDetaillant .btnDemco, .ie9only .btnDetaillant .btnDemco:hover, .ie9only .btnDetaillant .btnDemco:focus{ filter:none; }

#public #menuMobile .btnDemco{ margin-bottom:12px; }

.btnDetaillant .btnGotrick span, .btnDetaillant .btnDemco span{
	display: inline-block;
	padding:0 6px;
	border-left:1px solid rgba(0,0,0,0.13);
	vertical-align: top;
}

.no-rgba .btnDetaillant .btnGotrick span, .no-rgba .btnDetaillant .btnDemco span{ border-right:1px solid #dedede; }

 #menuSec .btnDemco:before,  #menuSec .btnGotrick:before{
	content:'';
	float:left;
	display: block;
	height:22px;
	border-right:1px solid #fff;
	background: url(../gx/m/sprites.png) 0 0 no-repeat;
}

 #menuSec .btnDemco:before{ width:30px; background-position: -77px 0; border-color:#30cedf; }
 #menuSec .btnGotrick:before{ width:24px; background-position: -108px 1px; }

/* IE8 */
.no-mediaqueries #public .panier a{ margin-right: 0; }
.no-mediaqueries #public #menuSec{ height:84px; }
.no-mediaqueries #public #menuSec .btnDetaillant{ clear:left; padding:8px 0; }
.no-mediaqueries #public #menuSec .btnGotrick{ margin-left:12px; }


@media only screen and (max-width: 1220px) {
	#public #menuSec{ height:84px; }
	#public #menuSec .btnDetaillant{ clear:left; padding:8px 0; }
	#public #menuSec .btnGotrick{ margin-left:12px; }
}

@media only screen and (max-width: 950px) {
	#menuSec{ height:84px; }
	#menuSec .btnDetaillant{ clear:left; padding:8px 0; }
	#menuSec .btnGotrick{ margin-left:12px; }
}


/* Champ de recherche
--------------------------------------------------------------------------------------- */
#formSearch{
	position: relative;
	clear:right;
	float:right;
	border:1px solid #5a5858;
	background-color: #000;
}

#formSearch input{
	max-width: 466px;
	width: 466px;
	padding-right: 50px;
	border:0;
	background-color: #000;
	color:#fff;
}
/*
#gotrick #formSearch input, #demco #formSearch input{ max-width: 274px; width: 274px; }
*/
#formSearch input{ max-width: 274px; width: 274px; }
#formSearch input::-webkit-input-placeholder{ color:#fff; }
#formSearch input::-moz-placeholder{ color:#fff; }
#formSearch input:-ms-input-placeholder{ color:#fff !important; }

#formSearch button{
	position: absolute;
	top:0;
	right:0;
	display:block;
	width: 38px;
	height: 36px;
	color:#000;
	background-color: #000;
}
#formSearch button:before{
	content:'\e805';
	font:normal normal 22px/30px "icons";
	color:#fff;
	-webkit-transition:color 0.15s linear 0s;
	transition:color 0.15s linear 0s;
}
#formSearch button:hover:before, #formSearch button:focus:before, #formSearch button:active:before{ color:#918f90; }

/* IE8 */
/*.no-mediaqueries #public #formSearch input{ width: 371px; }*/


@media only screen and (max-width: 1220px) {
	/*#public #formSearch input{ width: 371px; }*/

}

@media only screen and (max-width: 830px) {
	/*#gotrick #formSearch input{ width: 209px; }*/

}


/* Menu principal
--------------------------------------------------------------------------------------- */
#menu{
	font:700 16px/40px "Roboto Condensed", Arial, Helvetica, sans-serif;
	color:#f8f8f8;
	text-align: center;
}
#menu{ line-height: 40px; }
/*#public #menu{ clear:both; }*/

#menu nav > ul{ float:right; margin-right:25px; }
/*#public #menu nav > ul{ margin-right:0; }*/

#menu nav > ul > li{
	position: relative;
	float:left;
	margin-left: 25px;
}
#menu nav > ul > li:first-child{ margin-left: 0; }

#menu a{ display:block; padding-bottom:17px; color: #f8f8f8; }
/*#public #menu a{ padding-bottom:7px; }*/

#menu a:hover, #menu a:focus, #menu a:active{ color:#918f90; }

#menu li:hover .sousMenu{ display: block; }

/* IE8 */
/*
.no-mediaqueries #public #menu { font-size:15px; text-align: center; }
.no-mediaqueries #public #menu nav > ul{ float:none; margin-right: 0; }
.no-mediaqueries #public #menu nav > ul > li{
	display: inline-block;
	float: none;
	margin: 0 15px;
}
.no-mediaqueries #demco #menu{ clear:both; }
*/
.no-mediaqueries #menu{ clear:both; }
/*
@media only screen and (max-width: 1220px) {
	#public #menu { font-size:15px; text-align: center; }
	#public #menu nav > ul{ float:none; margin-right: 0; }
	#public #menu nav > ul > li{
		display: inline-block;
		float: none;
		margin: 0 15px;
	}
}
*/
@media only screen and (max-width: 1150px) {
	/*#demco #menu{ clear:both; }*/
	#menu{ clear:both; }
}

@media only screen and (max-width: 950px) {
	/*#demco #menu { text-align: center; }
	#demco #menu nav > ul{ float:none; margin-right: 0; }
	#demco #menu nav > ul > li{
		display: inline-block;
		float: none;
		margin: 0 15px;
	}*/
	#menu { text-align: center; }
	#menu nav > ul{ float:none; margin-right: 0; }
	#menu nav > ul > li{
		display: inline-block;
		float: none;
		margin: 0 15px;
	}
}
/*
@media only screen and (max-width: 900px) {
	#public #menu { font-size:14px; }
	#public #menu nav > ul > li{ margin: 0 8px; }
}
*/
@media only screen and (max-width: 830px) {
	#gotrick #menu nav > ul{ margin-right:20px; }
}


/* - - - Sous menu - - - */
#menu .sousMenu{
	display:none;
	position: absolute;
	top:57px;
	left:0;
	z-index: 10000;
	border-top:4px solid #231F20;
	background-color:#fff;
	text-align: left;
	font:400 14px/20px "Roboto", Arial, Helvetica, sans-serif;
	text-transform: none;

	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.25);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
#public #menu .sousMenu{ top:47px; }

#menu .sousMenu ul{ float:left; width:200px; padding:6px 0; }

#menu .menuGauche .sousMenu{ left: auto; right:0; }

#menu .sousMenu a{ color:#231F20; }
#menu .sousMenu a:hover, #menu .sousMenu a:focus{ color:#25aae1; }

/* IE8 */
.no-boxshadow #menu .sousMenu{ border:1px solid #231F20; border-top-width: 1px; }
.no-mediaqueries #demco #menu a{ padding-bottom:7px; }
.no-mediaqueries #demco #menu .sousMenu{ top:47px; }

@media only screen and (max-width: 1150px) {
	#demco #menu a{ padding-bottom:7px; }
	#demco #menu .sousMenu{ top:47px; }
}

@media only screen and (max-width: 960px) {
	#menu .menuGauchePlus .sousMenu{ left: auto; right:0; }
}

#menu .sousMenu li{ float:none; width:100%; border:0; }

#menu .sousMenu a{ padding:4px 16px; }

#menu .sousMenu .complet { border-top:1px solid #d1d1d1; }
#menu .sousMenu .complet a:after{
	content:'\e800';
	margin-left:6px;
	vertical-align: -1px;
	font: normal 1em/0.9em "icons";
}


/* Panier
--------------------------------------------------------------------------------------- */
#panierEntete{
	display:none;
	position: absolute;
	top:42px;
	z-index: 10001;
	width:320px;
	padding:0 16px 14px;
	border:1px solid #000;
	border-top-width:0;
	background-color: #fff;
	font:400 13px/21px "Roboto", Arial, Helvetica, sans-serif;
	color: #000;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.25);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.no-mediaqueries #panierEntete{ right:0 !important; left: auto !important; }

@media only screen and (max-width: 767px) {
	#panierEntete{ top:59px; border-width:0 0 1px 1px; }
}

@media only screen and (max-width: 320px) {
	#panierEntete{ border-width:0 0 1px 0; }
}

#panierEntete a,
#panierEntete a:hover, #panierEntete a:focus, #panierEntete a:active{ color: #000; }

#panierEntete ul{ list-style: none; }
#panierEntete li{
	margin-bottom:14px;
	padding-bottom:20px;
	border-bottom:1px solid #333;
}

#panierEntete .nbArticle{
	margin-bottom:14px;
	border-bottom:1px solid #cecece;
	line-height: 36px;
	font-weight: bold;
}
#panierEntete .voir{
	float:right;
	line-height: 36px;
	text-decoration: underline;
	color:#000;
}
#panierEntete .voir:hover, #panierEntete .voir:focus, #panierEntete .voir:active{ color:#ff9e0d; }
#panierEntete .photo{ float:left; width:68px; margin:5px 10px 0 0; }

#panierEntete .col1{ float:left; width:122px; margin-right:10px; }
#panierEntete .desc{ height:42px; overflow: hidden; }

#panierEntete .col2{ float:left; width:70px; text-align: right; }
#panierEntete .remove{
	margin-bottom:7px;
	padding:0 0 18px 18px;
	background-color: #fff;
	text-align: right;
	font:normal normal 12px/1em "icons";
}

#panierEntete .remove:before{
	content:'\e806';
	color:#ff9e0d;
	-webkit-transition: color 0.15s linear 0s;
	transition: color 0.15s linear 0s;
}
#panierEntete .remove:hover:before, #panierEntete .remove:focus:before, #panierEntete .remove:active:before{ color:#000; }

#panierEntete .total{ font-weight: bold; white-space:nowrap; }

#panierEntete .button{ display:block; max-width:240px; margin:0 auto; }
#panierEntete .button:after{
	content:'\e800';
	font:normal normal 15px/46px "icons";
	margin-left:12px;
	vertical-align: -1px;
	text-transform: none;
}


/* En-tete mobile
--------------------------------------------------------------------------------------- */
.enteteMobile{
	display:none;
	min-width:320px;
	height:60px;
	border-bottom:1px solid #d1d1d1;
	color:#fff;
}

#btnMenuMobile{
	float:left;
	display:block;
	padding:0 10px;
}
#btnMenuMobile:before{
	content: '\e804';
	font:normal normal 21px/60px "icons";
	color:#fff;
}

.logoMobile{
	position:absolute;
	display:block;
	left:42px;
}

.logoMobile .mini{ display: none; }

#demco .logoMobile{ top:5px; width:120px; }
#gotrick .logoMobile{ top:3px; width:76px; }

#public .logoMobile{ top:4px }
#public .logoMobile .demco{ display: inline-block; width:120px; margin-right:20px;  }
#public .logoMobile .gotrick{ display: inline-block; width:76px; }

@media only screen and (max-width: 400px) {
	#public .logoMobile{ top:10px }
	#public .logoMobile .demco{ display: inline-block; width:80px; margin-right:10px; }
	#public .logoMobile .gotrick{ display: inline-block; width:65px; vertical-align: -7px; }
}

.enteteMobile .connexion, .enteteMobile .listeSouhaitEntete, .enteteMobile .panier{
	float:right;
	display:block;
	width:56px;
	height:60px;
	border-left:1px solid #d1d1d1;
	text-align: center;
	font:normal normal 25px/60px "icons";
	color:#fff;
	-webkit-transition:none;
	transition:none;
}
.enteteMobile .connexion:before{ content:'\e810'; }
.enteteMobile .panier{ position: relative; }
.enteteMobile .panier:before{ content:'\e80e'; }
.enteteMobile .panier.ouvert{ background-color:#fff; color:#25aae1; }

.enteteMobile .listeSouhaitEntete:before{ content:'\e811'; }

.contientItems:after{
	content:'';
	position: absolute;
	top:16px;
	right:11px;
	width:8px;
	height:8px;
	border-radius: 50%;
	background-color: #ff9e0d;
}


@media only screen and (max-width: 400px) {
	.enteteMobile .listeSouhaitEntete{ display:none; }
}

/*--------------------------------------------------------------------------------------- */
/* Menu mobile */
/*--------------------------------------------------------------------------------------- */

/* Champ de recherche
--------------------------------------------------------------------------------------- */
#formMobileSearch{
	position: relative;
	padding:16px 16px 20px 16px;
	border-bottom:1px solid #d1d1d1;
}

#formMobileSearch input{
	width: 100%;
	height:38px;
	padding:0 41px 0 5px;
	border:1px solid #d1d1d1;
	border-radius:0;
}

#formMobileSearch button{
	position: absolute;
	top:17px;
	right:17px;
	display:block;
	width: 36px;
	height: 36px;
	color:#000;
	background-color:#fff;
}
#formMobileSearch button:hover, #formMobileSearch button:focus, #formMobileSearch button:active{ background-color:#f3f3f3; }
#formMobileSearch button:before{
	content:'\e805';
	font:normal normal 22px/30px "icons";
	color:#000;
}

/*--------------------------------------------------------------------------------------- */
/* Contenu principal */
/*--------------------------------------------------------------------------------------- */
.colPrincipale{
	float:left;
	width:100%;
	margin-left:-240px;
	padding:26px 0 0 0;
}

.innerPrinc{ margin-left:280px; }

.no-mediaqueries .innerPrinc{ margin-left:260px; }

@media only screen and (max-width: 960px) {
	.innerPrinc{ margin-left:260px; }
}

.colTexte{
	float:left;
	width:65%;
	padding:26px 0;
}

@media only screen and (max-width: 767px) {
	.colPrincipale{ float:none; margin-left:0; }
	.innerPrinc{ margin-left:0; }

	.colTexte{ float:none; width:100%; padding:26px 0; }
}

/* Side Menu
--------------------------------------------------------------------------------------- */
#menuSide{
	position: relative;
	z-index: 2;
	float:left;
	width:240px;
	padding-top:28px;
	font-size:14px;
	line-height: 24px;
}

#menuSide h6{ font:700 16px/21px "Roboto", Arial, Helvetica, sans-serif; color:#000; }
#menuSide h6 a{ color:#000; }
#menuSide a{ display:block; color:#333; }
#menuSide a:hover, #menuSide a:focus, #menuSide a:active,
#menuSide h6 a:hover, #menuSide h6 a:focus, #menuSide h6 a:active{ color:#c91c1b; }

#menuSide .actif a{ font-weight:700; color:#c91c1b; }

#menuSide .fermer{ margin-top:0.3em; padding-top:0.3em; border-top:1px solid #d1d1d1; }
#menuSide .fermer a:after{
	content:'\e814';
	margin-left:10px;
	vertical-align: -2px;
	font: normal normal 20px "icons";
}

/* IE8 */
.no-mediaqueries #menuSide{ padding-left:20px; }
.no-mediaqueries #menuSide .hasCustomSelect, #menuSide .customSelect{ max-width:220px; }

@media only screen and (max-width: 1269px) {
	#menuSide{ padding-left:20px; }

	#menuSide .hasCustomSelect, #menuSide .customSelect{ max-width:220px; }
}

@media only screen and (max-width: 767px) {
	#menuSide{
		float:none;
		width:auto;
		margin: 20px 0 0;
		padding:0;
	}
}


/* Sidebar CTAs
--------------------------------------------------------------------------------------- */
#sideCta{
	float:left;
	width:32.051282%;/*375px*/
	margin-left:2.923077%;
	padding-top:70px;
	text-align: right;
}

#sideCta.cta a{ margin-bottom: 20px; }

.cta a, .cta div{
	display:block;
	width:100%;
	max-width:375px;
	transition: opacity 0.15s linear 0s;
}
.cta a:hover{ opacity:0.8; }

.no-mediaqueries #sideCta{ padding-right:20px; }

@media only screen and (max-width: 1269px) {
	#sideCta{ padding-right:20px; }
}

@media only screen and (max-width: 767px) {
	#sideCta{
		float:none;
		width:100%;
		margin:20px 0 0 0;
		padding:0 20px;
	}
	.cta a, .cta div{ margin:0 auto 20px !important; }
}

/* Fil d'Ariane
--------------------------------------------------------------------------------------- */
#filAriane{
	padding:32px 0px 10px;
	border-bottom: 1px solid #d1d1d1;
	font:12px/14px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}

#filAriane li{ display:inline; margin-right:4px; }
#filAriane li:before{
	content:'\e800';
	vertical-align: -1px;
	font:normal normal 11px "icons";
	margin-right:6px;
}
#filAriane li:first-child:before{ display:none; }

#filAriane a{ color:#000; }
#filAriane a:hover, #filAriane a:focus, #filAriane a:active{ color:#25aae1; }
#filAriane li:last-child{ color:#000; font-weight: 700; }
#filAriane li:last-child:before{ color:#000; }

.no-mediaqueries #filAriane{ padding:10px 0; }

@media only screen and (max-width: 1269px) {
	#filAriane{ padding:10px 0; }
}


/* Pagination
--------------------------------------------------------------------------------------- */
.pagination{
	clear:both;
	padding-top:20px;
	border-top:1px solid #d1d1d1;
	font:400 14px/24px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}
.paginationEntete{ padding-top:0; border-top:0; }

.module_pagination{ float:right; }
.paginationEntete .module_pagination{ margin-top:6px; }

.module_pagination_libelle{ margin-right:8px; }

.pagination a, .module_pagination_pagecourante{
	display:inline-block;
	width:24px;
	text-align:center;
	background-color:#fff;
	color:#000;
	text-decoration:none;
	-webkit-transition: all 0.15s linear 0s;
	transition: all 0.15s linear 0s;
}

.pagination .module_pagination_pagecourante{ background-color:#25aae1; color:#fff; }

.pagination .module_pagination_pagesuivante a, .pagination .module_pagination_pageprecedente a,
.pagination .module_pagination_pagepremiere a, .pagination .module_pagination_pagederniere a{
	background:transparent;
	color:#000;
}

.pagination .module_pagination_pagesuivante a:hover, .pagination .module_pagination_pagesuivante a:focus, .pagination .module_pagination_pagesuivante a:active,
.pagination .module_pagination_pageprecedente a:hover, .pagination .module_pagination_pageprecedente a:focus, .pagination .module_pagination_pageprecedente a:focus,
.pagination .module_pagination_pagepremiere a:hover, .pagination .module_pagination_pagepremiere a:focus, .pagination .module_pagination_pagepremiere a:focus,
.pagination .module_pagination_pagederniere a:hover, .pagination .module_pagination_pagederniere a:focus, .pagination .module_pagination_pagederniere a:focus,
.pagination a:hover, .pagination a:focus, .pagination a:active{ background-color:#25aae1; color:#fff; }

@media only screen and (min-width: 768px) and (max-width: 850px) {
	.paginationEntete{ display:none; }
}

@media only screen and (max-width: 767px) {
	.paginationEntete .module_pagination{ margin-bottom:1em; }
	.module_pagination{ float:none; text-align: center; }
}

@media only screen and (max-width: 479px) {
	.module_pagination_libelle{ display:none; }
}


/* 00_100 : Infolettre
--------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	#formInfolettre .separateurBouton{ margin-top:1em; }
	#formInfolettre .separateurBouton .button{ display:block; margin:20px auto 0; }
}

/* 00_200 : Service a la clientele
--------------------------------------------------------------------------------------- */
#serviceClientele .service{
	float:left;
	width:31%;
	height:180px;
	margin:0 3.5% 20px 0;
	padding:10px 16px 16px;
	border:1px solid #d1d1d1;
	background-color: #f3f3f3;
	font-size:14px;
	line-height:20px;
	-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
}

#serviceClientele h2{ margin-top:0; }
#serviceClientele .service p{ margin-bottom:0.5em; }

#serviceClientele .service{ margin-right:2.333%; }
#serviceClientele .service:nth-child(3n){ margin-right:0; }

#serviceClientele .service h2{
	font:700 18px/24px "Roboto", Arial, Helvetica, sans-serif;
}

/* IE8 */
.no-mediaqueries #serviceClientele .service{ width:48%; margin-right:4%; }
.no-mediaqueries #serviceClientele .service:nth-child(3n){ margin-right:4%; }
.no-mediaqueries #serviceClientele .service:nth-child(2n){ margin-right:0; }

@media only screen and (max-width: 960px) {
	#serviceClientele .service{ width:48%; margin-right:4%; }
	#serviceClientele .service:nth-child(3n){ margin-right:4%; }
	#serviceClientele .service:nth-child(2n){ margin-right:0; }
}

@media only screen and (max-width: 480px) {
	#serviceClientele .service{ width:100%; height:auto; margin-right:0; }
	#serviceClientele .service:nth-child(3n){ margin-right:0; }
}


/* 00_210 : FAQ
--------------------------------------------------------------------------------------- */
#faq .listeQuestions{ margin-left:20px; color:#000; }
#faq .listeQuestions a{ color:#000; }
#faq .listeQuestions a:hover, #faq .listeQuestions a:focus, #faq .listeQuestions a:active{ color:#25aae1; }

#faq .faqQuestions a{ text-decoration: none; }
#faq .question{ position: relative; padding-bottom:3em; }
#faq .question h3{ margin-top:0; }
#faq .reponse p:last-child{ margin:0; }
#faq .haut{
	position: absolute;
	bottom:1em;
	right:0;
	font-size:13px;
	text-decoration: none;
}
#faq .haut:after{ content:'\25B2'; margin-left:6px; } /* Flèche vers le haut */


/* 00_250 : Livraison
--------------------------------------------------------------------------------------- */
.tabLivraison{ margin-bottom:0.5em; }
.tabLivraison td, .tabLivraison th{ padding:5px 10px; border:1px solid #d1d1d1; }

@media only screen and (max-width: 400px) {
	.tabLivraison{ font-size:12px; line-height: 16px }
}

/* 00_888 : Plan du site
--------------------------------------------------------------------------------------- */
.plan > ul{
	float: left;
	width:20%;
	margin-right:5%;
	list-style:none;
}
.plan ul ul{ margin-left:1em; }

.plan .gap{ margin-top:1em; }

@media only screen and (max-width: 800px) {
	.plan > ul{ width:30%; margin-right:3%; }
}

@media only screen and (max-width: 767px) {
	/*.plan{ margin:0 20px; }*/
	.plan ul{ float:none; width:100%; margin:0 0 20px 0; }
}


/* 01_100 : Accueil
--------------------------------------------------------------------------------------- */
#banniere{ margin:0 -20px; padding-bottom:34.19%; text-align:center; max-width:1270px; }
#banniere.large{ max-width:1920px; }

.no-backgroundsize #banniere.large{ max-width:1270px; }

@media only screen and (min-width: 1270px) {
	#banniere{ margin:0 -50px; }
}

/* - - - Slick Slider - - - */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-loading .slick-list { background: white url('../gx/m/ajax-loader.gif') center center no-repeat; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
.slick-track:before, .slick-track:after { content: ''; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
.slick-slide img { display: block; width:100%; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }


#banniere .slick-dots{
	position: absolute;
	bottom:16px;
	z-index: 2000;
	width:100%;
	list-style: none;
	text-align: center;
}
.slick-dots li{ display:inline-block; margin:0 3px; }
.slick-dots button{
	text-indent:-9999px;
	width:12px;
	height:12px;
	border-radius:6px;
	background:#25aae1;
	opacity:0.5;
}


.no-borderradius .slick-dots button{ background: url(../gx/m/ie-sprites.png) -23px -1px no-repeat transparent; }

.slick-dots .slick-active button{ opacity:1; }
.no-borderradius .slick-dots .slick-active button{ background: url(../gx/m/ie-sprites.png) -1px -1px no-repeat transparent; }

@media only screen and (max-width: 767px) {
	#banniere{ margin-bottom:20px; }

	.slick-dots{
		bottom:-30px;
		left:0;
		width:100%;
		text-align: center;
	}
	.slick-dots li{ float:none; display:inline-block; margin:0 3px; }
}

/* Pour les bannieres qui font la largeur du viewport */
@media only screen and (min-width: 1171px) {
	.large .slick-slide{ height:400px; }
	.large .slick-slide img{ display:none; }
	.large .slick-bg{ display:block; height:400px; }
}

@media only screen and (max-width: 1269px) {
	.slick-bg{ background: none !important; }
}

/* - - - Messages - - - */
.messageAccueil{
	display:block;
	margin-top:30px;
	padding:14px 20px;
	background-color:#25AAE1;
	text-align: center;
	font:400 18px/24px "Roboto", Arial, Helvetica, sans-serif;
	color:#fff;
	-webkit-transition: all 0.15s linear 0s;
	transition: all 0.15s linear 0s;
}

a.messageAccueil:hover, a.messageAccueil:focus, a.messageAccueil:active{ color:#fff; background-color:#333; }

.messageAccueil p{ margin:0; }

@media only screen and (max-width: 767px) {
	.messageAccueil{ padding:10px 16px; font:400 14px/18px "Roboto", Arial, Helvetica, sans-serif; }
}


/* - - - Nouveautes - - - */
.nouveautes header{
	padding: 46px 0 2px;
	border-bottom:1px solid #cecece;
}
.nouveautes h1{
	display:inline-block;
	margin:0 15px 0 0;
	text-transform: uppercase;
	color:#000;
}
.nouveautes header a{ display:inline-block; }

@media only screen and (max-width: 767px) {
	.nouveautes header{ padding-top: 0; }
	.nouveautes header a{ float:right; }
	.nouveautes header a span{ display:none; }
	.nouveautes header a:before{
		content:'+';
		display:block;
		margin-top:4px;
		padding-left:10px;
		font:bold 28px/28px "Roboto", Arial, Helvetica, sans-serif;
		color:#25aae1;
	}

	.nouveautes .produits li{
		width:46.5%;
		margin:0 7% 20px 0;
	}

	.nouveautes .produits li:nth-child(2n){ margin-right:0; }
	.nouveautes .produits li:nth-child(2n+1){ clear:left; }
}

/* - - - CTAs - - - */

#accueilCta .conteneur{ padding-top: 30px; }
#accueilCta a, #accueilCta div{
	float:left;
	width:32.051282%;/*375px*/
	margin-left:1.923077%;/*22px*/
}

#accueilCta a:first-child, #accueilCta div:first-child{ margin-left:0; }

.no-mediaqueries #accueilCta .conteneur{ padding:0 20px; }

@media only screen and (max-width: 1269px){
	#accueilCta .conteneur{ padding:0 20px; }
}

@media only screen and (max-width: 767px){
	#accueilCta a, #accueilCta div{
		float:none;
		width:100%;
		margin-left:0;
	}
}


/* - - - Tendances - - - */
#tendances{ }
#tendances header{
	padding: 46px 0 2px;
	border-bottom:1px solid #cecece;
}
#tendances h2{
	display:inline-block;
	margin:0 15px 0 0;
	font:700 30px/36px "Roboto Condensed", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color:#000;
}
#tendances header a{ display:inline-block; }

@media only screen and (max-width: 767px) {
	#tendances header{ padding-top: 0; }
	#tendances header a{ float:right; }
	#tendances header a span{ display:none; }
	#tendances header a:before{
		content:'+';
		display:block;
		margin-top:4px;
		padding-left:10px;
		font:bold 28px/28px "Roboto", Arial, Helvetica, sans-serif;
		color:#25aae1;
	}
}


/* 02_100 : Liste de produits
--------------------------------------------------------------------------------------- */
#listeProduit h1{ margin-bottom:0.5em; }

/* - - - - - - Filtre - - - - - - */
#filtreProduit h4, #filtreProduit legend{
	margin-bottom:8px;
	font:700 16px/20px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}

/* - - - Bouton mobile - - - */
.btnFiltre{
	width:100%;
	height:42px;
	margin-bottom: 16px;
	border:1px solid #ccc;
	text-align: center;
	background-color: #fff;
	font:700 18px/42px "Roboto", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color:#333;
}

.btnFiltre:before{
	content:'+';
	display:inline-block;
	width:14px;
	margin-right:6px;
	vertical-align: -1px;
	text-align: center;
	font:700 26px/38px "Roboto", Arial, Helvetica, sans-serif;
	color:#25aae1;
}

.btnFiltre.ouvert:before{ content:'\2013'; vertical-align:-3px; margin-top:-3px; }


/* - - - Categories - - - */
#filtreProduit .filtreCat{ position: relative; margin-bottom: 16px; }

#filtreProduit #listeCat{
	margin-bottom:12px;
	list-style: none;
	font:400 14px/16px "Roboto", Arial, Helvetica, sans-serif;
}
#filtreProduit #listeCat ul{
	margin:0px 0 0 14px;
	list-style: none;
	font-size:13px;
}

#filtreProduit #listeCat a{ display: inline-block; color:#333; padding:4px 0; }
#filtreProduit #listeCat a:hover, #filtreProduit #listeCat a:focus,
#filtreProduit #listeCat a:active, #filtreProduit #listeCat a.actif{ color:#25aae1; }

/* - - - Nb Article - - - */
#filtreProduit .nbArticle{
	position: relative;
	padding:14px 10px 12px;
	background: url(../gx/02/border-dotted.gif) 0 0 repeat-x #f3f3f3;
	font:400 13px/18px "Roboto", Arial, Helvetica, sans-serif;
}
#filtreProduit .nbArticle:after{
	content:'';
	position: absolute;
	left:0;
	bottom:0;
	display:block;
	width: 100%;
	height:1px;
	background: url(../gx/02/border-dotted.gif) 0 0 repeat-x #f3f3f3;
}

#filtreProduit .nbArticle b{ font:700 14px/18px "Roboto", Arial, Helvetica, sans-serif; color:#000; }

#filtreProduit .retirer{ padding-top:8px; line-height: 16px; }
#filtreProduit .retirer span{ text-decoration: underline; }

#filtreProduit .retirer:before{
	content:'\e813';
	display:inline;
	margin-right:2px;
	vertical-align: -2px;
	font:normal normal 19px/19px "icons";
	color:#333;
}

#filtreProduit .retirer.mobile{ margin-top:10px; padding:10px 0; text-align: center; }

/* - - - Autres filtres - - - */
#filtreProduit .filtre{
	position: relative;
	padding:38px 0 14px;
	border-bottom:1px solid #d1d1d1;
}

#filtreProduit .filtre:last-of-type{ border-bottom:0; }

/* IE8 a un problème est incapable de séparé le legend et le border */
.ie8 #filtreProduit .filtre{ border-top:0; }

/* Legend dans un fieldset doit etre remis a sa place */
#filtreProduit .filtre legend{ position: absolute; top:10px; left:0; }

#filtreProduit .filtre label{ font-size:14px; }
#filtreProduit .filtre label span{ color:#999; }

@media only screen and (max-width: 767px) {
	#filtreProduit,
	#listeCat, #filtreMarque, #filtreCouleur, #filtreMisc, #filtrePrix,
	#filtreProduit h4, #filtreProduit legend{ display:none; }

	#menuSide.sideProduit{ margin-top:10px; }

	#filtreProduit { margin-top:1em; }
	#filtreProduit .filtre, #filtreProduit .filtreNoBorder{ margin-top:16px; padding:0; border:0; }
	#filtreProduit .filtre:first-of-type{ margin-top:0; }

	#filtreProduit select{ width:100% !important; max-width:254px; }
	#filtreProduit .customSelect{ max-width:254px; }
}


/* - - - - - - Tri - - - - - - */
#triProduit{
	height:50px;
	margin-bottom:20px;
	padding:0 20px;
	background-color:#f3f3f3;
	color:#666;
}

/* C'est un peu serré à 960, donc on laisse un petite chance à IE8 */
.ie8 #triProduit{ padding:0 10px; }

#triProduit .nbItems{ float:left; font:400 12px/50px "Roboto", Arial, Helvetica, sans-serif; }

#triProduit label{
	display:inline-block;
	margin-right:10px;
	font:700 12px/36px "Roboto", Arial, Helvetica, sans-serif;
}

#triProduit #tri, #triProduit #itemParPage{ float:right; margin-top:7px; }
#triProduit #tri{ margin-left:24px; }
.ie8 #triProduit #tri{ margin-left:12px; }

#triProduit #itemParPage select{ width:80px !important; }
#triProduit #tri select{ width:150px !important; }

@media only screen and (max-width: 960px) {
	#triProduit label{ display:none; }
}

@media only screen and (max-width: 500px) {
	#triProduit{ height:85px; }
	#triProduit .nbItems{ float:none; line-height: 40px; }
	#triProduit #tri{ float:none; margin:0; }
}

/* - - - - - - Items - - - - - - */
.produits{
	list-style:none;
	font:700 16px/20px "Roboto", Arial, Helvetica, sans-serif;
}
.produits li{
	float:left;
	width:23.5%;
	margin:0 2% 30px 0;
}

.ie8 .produits li{ margin-right:1.5%; }
.ie8 .ie8clear{ clear:left; }
.produits li:nth-child(4n){ margin-right:0; }
.produits li:nth-child(4n+1){ clear:left; }

.produits a{ display:block; }

.produits .image{ position: relative; }

.produits a img{
	max-width: 100%;
	margin:0 auto;
	-webkit-transition: opacity 0.15s linear 0s;
	transition: opacity 0.15s linear 0s;
}
.produits a:hover img{ opacity:0.8; }


/* - - - Etiquettes - - - */
.doubleTag{
	position: absolute;
	bottom:0;
	left:0;
	z-index: 2;
}

.tag{
	position: absolute;
	bottom:0;
	left:0;
	z-index: 2;
	display:block;
	padding:2px 5px 1px;
	font:700 12px/12px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color:#fff;
	white-space: nowrap;
}
.doubleTag .tag:first-child{ bottom:19px; }

.tagEpuise{ background: #666; }
.tagDiscontinue{ background: #ef8b14; }
.tagBientot{ background: #231f20; }
.tagDureeLimite{ background: #c1191f; }
.tagPromotion{ background: #ed1c24; }
.tagLiquidation{ background: #ed1c24; }
.tagCoupCoeur{ background: #ad0036; }
.tagNouveaute{ background: #66a60c; }
.tagTendances{ background: #25aae1; }
.tagSurplus{ background: #5e2807; }
.tagDisponible{ background: #231f20; }
.tagWebSeul{ background: #0e649e; }

@media only screen and (max-width: 479px) {
	.tag{
		width:120px;
		border-radius:0 11px 11px 0;
		font:400 12px/22px 'Roboto Condensed', Arial, Helvetica, sans-serif;
	}
}

.produits .infos{
	position: relative;
	padding-top:10px;
}

.produits .nom{
	margin-bottom:6px;
	text-align: center;
	color:#000;
}
.produits .nom:hover, .produits .nom:focus, .produits .nom:active{ color:#666; }

.produits .marque{
	font-family:"Roboto", Arial, Helvetica, sans-serif;
	font-weight:400;
	color:#666;
}
.produits .prix{
	margin-top:4px;
	text-align: center;
	font:700 20px/22px "Roboto Condensed", Arial, Helvetica, sans-serif;
	color:#25aae1;
}
.prixReduit{ color:#e12536; }

.prixSansSolde{
	position: relative;
	font:400 14px/20px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	white-space: nowrap;
}
.nowrap{ white-space: nowrap; }

.produits .aPartirDe{
	display:block;
	font:12px/16px "Roboto Condensed", Arial, Helvetica, sans-serif;
	color:#666;
}

.produits .avis{ margin-top:6px; }
.produits .avis .noteProduitMini{ display: inline-block; vertical-align: -2px; }
.produits .avis .note{ display: inline-block; margin-left:6px; }

/* Le line-through de FF et IE est trop bas, alors on fait un line-through custom */
.prixSansSolde:after{
	content:'';
	position: absolute;
	left:0;
	top:9px;
	display:inline-block;
	width:100%;
	height:1px;
	border-bottom:1px solid #000;
}
.produits .prixSansSolde:after{ top:8px; }


@media only screen and (max-width: 1269px) {
	/* La liste de produit est moins large que la page d'accueil */
	#listeProduit .produits li{ width:31%; margin:0 3.5% 20px 0; }
	#listeProduit .produits li:nth-child(4n){ margin-right:3.5%; }
	#listeProduit .produits li:nth-child(4n+1){ clear:none; }
	#listeProduit .produits li:nth-child(3n){ margin-right:0; }
	#listeProduit .produits li:nth-child(3n+1){ clear:left; }
}

@media only screen and (max-width: 600px) {
	#listeProduit{ padding-top:10px; }
	#listeProduit .innerPrinc{ margin-left:0; }

	#listeProduit .produits li{
		width:46.5%;
		margin:0 7% 20px 0;
	}

	#listeProduit .produits li:nth-child(3n){ margin-right:7%; }
	#listeProduit .produits li:nth-child(3n+1){ clear:none; }
	#listeProduit .produits li:nth-child(2n){ margin-right:0; }
	#listeProduit .produits li:nth-child(2n+1){ clear:left; }

	/*.produits .nom{ min-height: 38px; }*/
}

@media only screen and (max-width: 400px) {
	#listeProduit{ padding-top:10px; }
	#listeProduit .innerPrinc{ margin-left:0; }

	.produits{ font-size:14px; line-height: 18px; }
	.produits .prix { font-size:16px; line-height: 20px; }
}


/* 02_200 : Marques
--------------------------------------------------------------------------------------- */
.marqueBtn{ color:#d1d1d1; margin-bottom:30px; }

.marqueBtn button{
	display:inline-block;
	background:transparent;
	font:400 15px/21px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}

#btnMarqueMosaique{ margin-right:12px; }
#btnMarqueListe{ margin-left:12px; }

.marqueBtn button:hover, .marqueBtn button:focus, .marqueBtn button.actif{ color:#c91c1b; }

.marqueBtn button:before{
	display:inline-block;
	margin-right:6px;
	font:normal normal 1em/1em "icons";
}

#btnMarqueMosaique:before{ content:'\e80f'; font-size:18px; vertical-align: -1px;  }
#btnMarqueListe:before{ content:'\e804'; font-size:14px; }


/* - - - Mosaique(pizza) de logo - - - */
#marqueMosaique li{
	float:left;
	width:32%;
	margin:0 2% 20px 0;
}

.ie8 #marqueMosaique li{ margin-right:1.3333%; }


#marqueMosaique li:nth-child(3n){ margin-right:0; }
#marqueMosaique li:nth-child(3n+1){ clear:left; }

#marqueMosaique a{
	display:block;
	padding:19px;
	border:1px solid #f3f3f3;
	text-align:center;
	font:400 28px/36px "Roboto", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color:#000;
	-webkit-transition: border 0.15s linear 0s;
	transition: border 0.15s linear 0s;
}

#marqueMosaique a:hover, #marqueMosaique a:focus, #marqueMosaique a:active{ border-color: #c91c1b; }

#marqueMosaique .sansLogo{ position: relative; }
#marqueMosaique .sansLogo a{ padding:19px 0 50%; }
#marqueMosaique .sansLogo div{
	position: absolute;
	top:50%; /* Centrer en js avec margin-top negatif */
	text-align: center;
	width:100%;
	padding:0 19px;
}

/* - - - Liste - - - */
#marqueListe{ display:none; }

#marqueListe .listeAlpha{ float:left; width:33%; padding-right:20px; }
#marqueListe .listeAlpha li, #marqueListe .listeAlpha li li{ margin:0; list-style:none; }
#marqueListe .listeAlpha li{ margin-bottom:1em; }
#marqueListe .listeAlpha li li{ margin-bottom:0; }

#marqueListe .listeAlpha > li:first-letter{
	font:700 18px/26px "PT Serif", "Times New Roman", Times, serif;
	text-transform:uppercase;
	color:#000;
}


@media only screen and (max-width: 900px){
	#marqueMosaique li{
		width:48%;
		margin:0 4% 20px 0;
	}

	#marqueMosaique li:nth-child(3n){ margin-right:4%; }
	#marqueMosaique li:nth-child(3n+1){ clear:none; }
	#marqueMosaique li:nth-child(2n){ margin-right:0; }
	#marqueMosaique li:nth-child(2n+1){ clear:left; }
}

@media only screen and (max-width: 767px){
	#marqueMosaique a{ padding:10px; font-size:24px; line-height:28px; }
	#marqueMosaique .sansLogo a{ padding:10px 0 50%; }
}

@media only screen and (max-width: 479px){
	#marqueMosaique a{ font-size:16px; line-height:20px; }
}

@media only screen and (max-width: 360px){
	#marqueMosaique li{ margin-bottom:12px; }
}


/* 04_100 : Page produit
--------------------------------------------------------------------------------------- */
#produit{ padding-top:30px; }

/* - - - Photos - - - */
#produitPhotos{
	float:left;
	width:40%;
	margin-bottom:30px;
}

@media only screen and (max-width: 1269px) {
	/*#produitPhotos{ padding-left:20px; }*/
}

@media only screen and (max-width: 767px) {
	#produitPhotos{
		float:none;
		width:100%;
		margin-bottom:40px;
		padding:0;
	}
}

#produitPhotos figure{ position: relative; }

#galerie, #thumbnails{ max-width:468px; margin:0 auto; }
#galerie{ margin-bottom:12px; border:1px solid #d1d1d1; opacity: 1; transition: opacity 0.1s; }
.zoomImg{ cursor: pointer; }

#galerie.loadingStyle{ opacity: 0.70;}

#thumbnails{ width:100%; margin-bottom:20px; }

@media only screen and (max-width: 479px) {
	#galerie{ margin-bottom:16px; }
}

#thumbnails .image{
	float:left;
	width:23%;
	margin-left:2.666%;
}

#thumbnails div:first-child .image{ margin-left: 0; }

#thumbnails .thumbPrev, #thumbnails .thumbNext{
	display: none;
	position:absolute;
	top:50%;
	left:0;
	width:30px;
	height:30px;
	margin-top: -15px;
	background-color:#d1d1d1;
	transition: opacity 0.15s linear;
}
#thumbnails .thumbNext{ left:auto; right:0; }

#thumbnails .thumbPrev:before, #thumbnails .thumbNext:before{
	display:block;
	width:30px;
	height:30px;
	text-align: center;
	font:normal normal 14px/34px "icons";
	color:#333;
}
#thumbnails .thumbPrev:before{ content:'\e801'; }
#thumbnails .thumbNext:before{ content:'\e800'; }

#thumbnails img{
	border:1px solid #d1d1d1;
	cursor:pointer;
	opacity:1;
	-webkit-transition: opacity 0.15s linear;
	transition: opacity 0.15s linear;
}
#thumbnails img:hover, #thumbnails img:focus{ opacity:0.5; }

#thumbnails .thumbPrev:hover, #thumbnails .thumbPrev:focus, #thumbnails .thumbPrev:active,
#thumbnails .thumbNext:hover, #thumbnails .thumbNext:focus, #thumbnails .thumbNext:active{
	opacity:1;
}

/* Icon de zoom */
#galerie:before{
	content:'';
	position: absolute;
	top:0;
	right:0;
	z-index: 10;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 50px 50px 0;
	border-color: transparent #d1d1d1 transparent;
	border-color: transparent rgba(204,204,204,0.75) transparent;
}

#galerie:after{
	content:'\e805';
	position: absolute;
	top:6px;
	right:7px;
	z-index: 11;
	font:normal normal 20px/20px "icons";
	color:#000;
}

#galerie.noImage:before, #galerie.noImage:after{ display:none; }


/* - - - Infos - - - */
#produitInfos{
	float:left;
	width:56%;
	margin:0 0 30px 4%;
}

@media only screen and (max-width: 767px) {
	#produitInfos{
		float:none;
		width:100%;
		margin-left:0;
	}
}

#produitInfos header{
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid #d1d1d1;
}

.webID{ text-transform: uppercase; font:700 16px/16px "Open Sans", Arial, Helvetica, sans-serif; }
.desktop .webID{ float:right; padding-top: 15px; }
.mobile .webID{ margin-top: 8px; }

.produitHeaderMobile{
	margin: 0 0 20px 0;
	padding-bottom: 16px;
	border-bottom: 1px solid #d1d1d1;
}

#produitInfos h1,
.produitHeaderMobile .titre{ margin-bottom:4px; font:700 30px/36px "Roboto", Arial, Helvetica, sans-serif; color:#000; }

#produitInfos .prixDynamique{
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #d1d1d1;
}

#produitInfos .prixSansSolde, .produitHeaderMobile .prixSansSolde{ font-size:20px; margin-right: 24px; }
#produitInfos .prixSansSolde:after, #produitInfos .produitHeaderMobile .prixSansSolde:after{ top:11px; }

#produitInfos .prix, .produitHeaderMobile .prix{ font:700 40px/36px "Roboto", Arial, Helvetica, sans-serif; color:#25aae1; }
.produitHeaderMobile .prix{ display:block; margin-bottom:10px; }
#produitInfos .estEnSolde, .produitHeaderMobile .estEnSolde{ color:#c91c1b; }

#produitInfos .economie, .produitHeaderMobile .economie{
	display:inline-block;
	margin-top: 10px;
	padding:0 15px;
	vertical-align: 6px;
	font:700 15px/30px "Roboto", Arial, Helvetica, sans-serif;
	color:#fff;
	background: #f90000;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5MDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkODAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #f90000 0%, #d80000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f90000), color-stop(100%,#d80000));
	background: -webkit-linear-gradient(top, #f90000 0%,#d80000 100%);
	background: -o-linear-gradient(top, #f90000 0%,#d80000 100%);
	background: -ms-linear-gradient(top, #f90000 0%,#d80000 100%);
	background: linear-gradient(to bottom, #f90000 0%,#d80000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f90000', endColorstr='#d80000',GradientType=0 );
}

.produitHeaderMobile .prixMobile{ margin-top:1em; }
.produitHeaderMobile .economie{ margin:0; }

#produitInfos .noteLivraison{
	display:block;
	margin-top:20px;
	font:700 16px/20px "Roboto", Arial, Helvetica, sans-serif;
	color:#c91c1b;
}

@media only screen and (max-width: 479px) {
	.produitHeaderMobile .titre{ font-size:24px; line-height:30px; }
	.produitHeaderMobile .prixSansSolde{ font-size:16px; vertical-align: 6px; margin-right: 12px;}
	.produitHeaderMobile .prix{ font-size:30px; }

	.webID{ float:none; margin:0; }
}

/* - - - Traits - - - */
#produitInfos .messageAvertissement{ display:inline-block; }

#produitInfos h4{
	margin-top:20px;
	padding-bottom:0.5em;
	border-bottom:1px solid #ccc;
	font-family:"Roboto", Arial, Helvetica, sans-serif;
}

.trait{ list-style: none; }
.trait li{ float:left; margin:0 16px 16px 0; }
.trait button{
	position: relative;
	display:block;
	min-width:34px;
	height:34px;
	padding:0 3px;
	background-color:#d1d1d1;
	text-align: center;
	font:400 13px/32px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
	-webkit-transition: all 0.15s linear 0s;
	transition: all 0.15s linear 0s;
	overflow: visible;
}

.trait button:hover, .trait button:focus{ background-color:#666; }
.trait button.selection{ background-color:#666; color:#fff; }

.trait button.nonDisponible{
	pointer-events:none;
	border:1px dashed #959595;
	background-color: #f3f3f3;
	color:#bfbfbf;
}

#produitInfos .noteCharte{ font:400 13px/18px "Roboto", Arial, Helvetica, sans-serif; color:#333; text-decoration:underline; }
#produitInfos .noteCharte:hover, #produitInfos .noteCharte:focus, #produitInfos .noteCharte:active{ color:#000; }

/* Taille */
.taille{ }

/* Couleur */
.couleur button, .trait3 button{ padding:0; background-color:transparent; border:1px solid #d1d1d1; }
.couleur button:after, .trait3 button:after, .taille button:after{
	content: '';
	-webkit-box-sizing: content-box !important;
	-moz-box-sizing: content-box !important;
	box-sizing: content-box !important;
	position: absolute;
	top:-3px;
	left:-3px;
	width:100%;
	height:100%;
	padding:2px;
	border:1px solid transparent;
	-webkit-transition: border 0.15s linear;
	transition: border 0.15s linear;
}
.ie8 .couleur button, .ie8 .couleur button:after, .ie8 .trait3 button, .ie8 .trait3 button:after{ border:0 none; }
.ie8 .taille button{padding-left:2px; }

.couleur button:hover, .couleur button:focus,
.trait3 button:hover, .trait3 button:focus,
.taille button:hover, .taille button:focus{ border-color:#666; }

.couleur button.selection:after, .trait3 button.selection:after, .taille button.selection:after{ border:1px solid #c91c1b; }

.ie8 .couleur button.selection, .ie8 .trait3 button.selection{ width:34px; height:34px; }

#couleurSelecttionnee{ font:400 13px/18px "Roboto", Arial, Helvetica, sans-serif; color:#000; }
#couleurSelecttionnee span{ color:#333; }

.couleurNonDisponible{ position: relative; }
.couleurNonDisponible:after{
	content: '';
	position: absolute;
	top:0;
	left:0;
	z-index: 10;
	display:block;
	width:34px;
	height:34px;
	border:1px solid #d1d1d1;
	background:url(../gx/m/sprites.png) -39px -3px no-repeat;
}

/* IE8 a un stacking order pourri, alors il ne peut pas afficher le X.
On fait disparaître la couleur à la place, pour éviter la confusion. */
.ie8 .couleurNonDisponible{ display:none; }


/* - - - Form - - - */
#produitInfos form{
	position: relative;
	padding:12px;
	border:1px solid #d1d1d1;
	background-color: #f3f3f3;
}
#produitInfos form .qte{
	float:left;
	font:700 16px/40px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}
#produitInfos form select, #produitInfos form .customSelect{
	width:64px !important;
	font:700 15px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}

#produitInfos form .ajoutBoutons{ float:right; }

#produitInfos form .button{
	float:left;
	margin-right:10px;
	padding: 0 20px;
	line-height:40px;
}

#produitInfos form .button:before{
	content:'\e80e';
	margin-right:10px;
	vertical-align: -1px;
	font:normal normal 17px "icons";
	text-transform: lowercase;
	color:#000;
}

#ajoutWishlist{
	float:left;
	background-color:#f3f3f3;
	line-height:40px;
}

#ajoutWishlist:hover, #ajoutWishlist:focus, #ajoutWishlist:active{
	background-color:#fff;
}

#ajoutWishlist:before{
	content:'\e811';
	margin-right:6px;
	font:normal normal 15px "icons";
}

#ajoutWishlist.souhaitAjoute{
	-webkit-animation: souhaitPulse 2s;
	-moz-animation:    souhaitPulse 2s;
	-o-animation:      souhaitPulse 2s;
	animation:         souhaitPulse 2s;
}

@-webkit-keyframes souhaitPulse {
  0%, 100% { background-color:#f3f3f3; }
  15% { background-color:#30cc30; }
}
@-moz-keyframes souhaitPulse {
  0%, 100% { background-color:#f3f3f3; }
  15% { background-color:#30cc30; }
}
@-o-keyframes souhaitPulse {
  0%, 100% { background-color:#f3f3f3; }
  15% { background-color:#30cc30; }
}
@keyframes souhaitPulse {
  0%, 100% { background-color:#f3f3f3; }
  15% { background-color:#30cc30; }
}

#produit .note{ text-align:right; margin:1em 0 0 0;}

.no-mediaqueries #produitInfos form .qte{ margin-top:26px; }
.no-mediaqueries #produitInfos form .button{
	float:right;
	width:250px;
	margin:0 0 10px;
}
.no-mediaqueries #ajoutWishlist{
	float:right;
	clear:right;
	width:250px;
	text-align: center;
}

@media only screen and (max-width: 1269px) {
	#produitInfos form .qte{ margin-top:26px; }
	#produitInfos form .button{
		float:right;
		width:250px;
		margin:0 0 10px;
	}
	#ajoutWishlist{
		float:right;
		clear:right;
		width:250px;
		text-align: center;
	}
}

@media only screen and (max-width: 800px) {
	#produitInfos form .button{ font-size:13px; width:225px; }
	#ajoutWishlist{ font-size:12px; width:225px; }
}

@media only screen and (max-width: 767px) {
	#produitInfos form .button{ font-size:14px; width:250px; }
	#ajoutWishlist{ font-size:13px; width:250px; }
}

@media only screen and (max-width: 479px) {
	#produitInfos form .ajoutBoutons{ float:none; text-align: center;  }
	#produitInfos form .qte{ float:none; width:150px; margin:0 auto; }
	#produitInfos form .button, #ajoutWishlist{
		float:none;
		margin:12px auto 0;
		text-align: center;
	}
}

/* - - - Description - - - */
#produitInfos .lienPDF{ display: block; margin-bottom: 2em; }

#produitInfos .description { margin-bottom: 4px; }
#produitInfos .description h4{ margin:12px 0; }
#produitInfos .description h4 button{
	display: block;
	width: 100%;
	padding:0;
	background-color: transparent;
	text-align: left;
	font:700 16px/20px "Roboto", Arial, Helvetica, sans-serif;
}

#produitInfos .description h4 button:before{
	content:'+';
	float:right;
	font-size:22px;
}

#produitInfos .description h4 button.ouvert:before{ content:'-'; }
#produitInfos .description .texte{ display: none; }


/* - - - Produits associées et récement visités - - - */
.produitsAssocies section, #opinions{
	clear:left;
	padding-top: 20px;
	border-top:1px solid #d1d1d1;
}

.produitsAssocies .produits li{	width:15%;margin-right:2%; }
.ie8 .produitsAssocies .produits li{ margin-right:1.66666%; }

.produitsAssocies .produits li:nth-child(4n){ margin-right:2%; }
.produitsAssocies .produits li:nth-child(4n+1){ clear:none; }
.produitsAssocies .produits li:nth-child(6n){ margin-right:0; }

@media only screen and (max-width: 850px) {
	.produitsAssocies .produits li,
	.produitsAssocies .produits li:nth-child(4n){ width:31%; margin-right:3.5%; }
	.produitsAssocies .produits li:nth-child(3n){ margin-right:0; }
	.produitsAssocies .produits li:nth-child(3n+1){ clear:left; }
}

@media only screen and (max-width: 600px) {
	.produitsAssocies .produits li{ width:46.5%; margin:0 7% 20px 0; }
	.produitsAssocies .produits li:nth-child(3n){ margin-right:7%; }
	.produitsAssocies .produits li:nth-child(3n+1){ clear:none; }
	.produitsAssocies .produits li:nth-child(2n){ width:46.5%; margin-right:0; }
	.produitsAssocies .produits li:nth-child(2n+1){ clear:left; }
}

/* - - - Notes - - - */
.noteProduit{
	display:inline-block;
	width:140px;
	height:22px;
	overflow: hidden;
	margin-top:12px;
	background: url(../gx/m/note.png) no-repeat;
}

.produitHeaderMobile .noteProduit{ margin-top: 20px; }

.noteProduit.note1{ background-position: -116px 0; }
.noteProduit.note15{ background-position: -87px -29px; }
.noteProduit.note2{ background-position: -87px 0; }
.noteProduit.note25{ background-position: -58px -29px; }
.noteProduit.note3{ background-position: -58px 0; }
.noteProduit.note35{ background-position: -29px -29px; }
.noteProduit.note4{ background-position: -29px 0; }
.noteProduit.note45{ background-position: 0 -29px; }
.noteProduit.note5{ background-position: 0 0; }

.noteProduitMini{
	display:inline-block;
	width:87px;
	height:13px;
	overflow: hidden;
	background: url(../gx/m/note.png) no-repeat;
}

.noteProduitMini.note1{ background-position: -73px -59px; }
.noteProduitMini.note15{ background-position: -55px -77px; }
.noteProduitMini.note2{ background-position: -55px -59px; }
.noteProduitMini.note25{ background-position: -37px -77px; }
.noteProduitMini.note3{ background-position: -37px -59px; }
.noteProduitMini.note35{ background-position: -19px -77px; }
.noteProduitMini.note4{ background-position: -19px -59px; }
.noteProduitMini.note45{ background-position: 0 -77px; }
.noteProduitMini.note5{ background-position: 0 -59px; }

#produit .nbAvis{ display:inline-block; margin-left:5px; vertical-align: 6px; }

/* Styles pour appareils haute resolution */
@media (-o-min-device-pixel-ratio: 2/1),(-webkit-min-device-pixel-ratio: 2){
   	.noteProduit, .noteProduitMini{ background: url(../gx/m/note2x.png) no-repeat; background-size:256px 91px; }
}

/* - - - Commentaires - - - */
/* - Formulaire - */
#opinions h3{ margin-top:20px; }

#opinions .form{
	display:none;
	margin-bottom:20px;
	padding:20px 0;
	border-top:1px solid #d1d1d1;
	border-bottom:1px solid #d1d1d1;
}

#opinions .form.zeroNote{ margin-bottom:0; border-bottom:none; }

#opinions .noteProduit{ vertical-align: -4px; margin:0 5px; }
#opinions .nbAvis{ color:#999; }
#opinions #ouvreAvis{ margin:0 0 20px 20px; }
#opinions #ouvreAvis.zeroNote{ margin-left:0; }

#opinions label{ width:120px; }
.rang.commentaire, #commentaire{ height: 126px; }
#commentaire{ width:560px; }

.rangNote{ clear:left; height: 36px; margin-bottom: 20px; }
.rangNote label{ float:left; width:120px; }

#ratingProduit{ float:left; margin:8px 0 0 20px; }

#ratingProduit .rating{
	float:left;
	width:18px;
	height:13px;
	overflow: hidden;
	background: url(../gx/m/note.png) -91px -59px no-repeat;
	-webkit-transition: none;
	transition: none;
}
#ratingProduit .ratingOn{ background: url(../gx/m/note.png) 0 -59px no-repeat; }

/* - Liste de commentaire - */
#opinions .messageSucces{ margin:20px auto; max-width:600px; }

#listeCommentaires{
	list-style: none;
	font: 12px/20px "Roboto", Arial, Helvetica, sans-serif;
}
#listeCommentaires li{
	float:left;
	width:47.5%;
	margin:0 5% 30px 0;
}
#listeCommentaires li:nth-of-type(odd){ clear:left; }
#listeCommentaires li:nth-of-type(even){ margin-right:0; }

.no-mediaqueries #listeCommentaires li{ margin-right:2.5%; }

#listeCommentaires h4{
	margin:0 0 12px 0;
	font:700 14px/20px "Roboto", Arial, Helvetica, sans-serif;
}
#listeCommentaires .details{ clear:left; font-size:12px; color:#666; }
#listeCommentaires .nom strong{ font-size:13px; font-style: italic; color:#000; }

#listeCommentaires .commCourt{
	position: relative;
	max-height:100px;
	overflow: hidden;
}

#listeCommentaires .commCourt:after{
	content:'';
	position: absolute;
	bottom:0;
	left:0;
	z-index: 2;
	height:40px;
	width:100%;
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

#listeCommentaires .commSuite{
	display:inline;
	background: none;
	color:#c91c1b;
}

#listeCommentaires .commSuite:after{ content:'\25BC'; margin-left:6px; }

#opinions .pagination{
	padding:20px 0;
	text-align:right;
}

.no-mediaqueries #opinions { margin:0 20px; }
.no-mediaqueries #opinions .form .rang{ height:36px; margin-bottom:20px; }
.no-mediaqueries #opinions .form .rang label{ float:left; width:120px; }
.no-mediaqueries #opinions .form .rang input{ float:left; width:300px; margin-left:20px; }

@media only screen and (max-width: 1269px) {
	#opinions { margin:0 20px; }
}

@media only screen and (max-width: 960px) {
	#opinions .form .rang{ height:36px; margin-bottom:20px; }
	#opinions .form .rang label{ float:left; width:120px; }
	#opinions .form .rang input{ float:left; width:300px; margin-left:20px; }
}


@media only screen and (max-width: 767px) {
	#opinions .sommaire{ text-align: center; }
	#opinions #ouvreAvis{ display:block; margin:16px auto 30px; }

	#opinions .form .rang{ height:auto; margin-bottom:10px; }
	#opinions .form .rang label, #opinions .form .rang input, #opinions .form .rang textarea{ float:none; width:100%; margin-left:0; }

	#listeCommentaires li{
		float:none;
		width:100%;
		margin-right:0;
	}

	#opinions .form .button{ display:block; width:150px; margin:0 auto; }
}


/* 06_100 : Nous joindre
--------------------------------------------------------------------------------------- */
#contactInfos{
	float:left;
	width:47%;
	margin-right:6%;
	padding:26px 0;
}

/* Responsive Google Maps */
#carte{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; margin:2em 0; }
#carte iframe, #carte object, #carte embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#contactForm{
	float:left;
	width:47%;
	padding:86px 0 26px;
}

#contactInfos h2, #contactInfos h3, #contactInfos h4, #contactForm h2{ margin-bottom:0.1em; }

#contactForm input, #contactForm .customSelect{ max-width:100%; }

.no-mediaqueries #contactInfos{ padding-left:20px; }
.no-mediaqueries #contactForm{ padding-right:20px; }

@media only screen and (max-width: 1269px) {
	#contactInfos{ padding-left:20px; }
	#contactForm{ padding-right:20px; }
}

@media only screen and (max-width: 850px) {
	#contactInfos, #contactForm{
		float:none;
		width:100%;
		margin:0 auto;
		padding:26px 20px 0;
	}
}

@media only screen and (max-width: 767px) {
	#formContact .button{ display:block; margin:0 auto; margin-top: 20px; }
}

/* 07_100 : Créer un compte
--------------------------------------------------------------------------------------- */
#motPasse{ margin-bottom: 6px; }
.motPasseOublie{
	clear:left;
	display:block;
	margin-left:170px;
	font-size:12px;
}
.motPasseOublie a{ color:#25aae1; }
.motPasseOublie a:hover,.motPasseOublie a:focus,.motPasseOublie a:active{ color:#000; }

#avantages .incTinyMce ul { margin-bottom:1em; }

.no-mediaqueries .motPasseOublie{ margin-left:0; }

@media only screen and (max-width: 960px) {
	.motPasseOublie{ margin-left:0; }
}

/*--------------------------------------------------------------------------------------- */
/* Compte */
/*--------------------------------------------------------------------------------------- */
.formCompte .note{ margin-bottom:2em; }

.form label.long{ line-height:18px; }

.fr #creerCompte .rangee label{ width:235px; }

@media only screen and (max-width: 960px) {
	.formCompte .note{ margin-bottom:1em; }
	.formCompte label.long{ padding:10px 0; }
}

@media only screen and (max-width: 767px) {
	.formCompte .boiteCompte{ padding-left:20px; border-width:1px 0; }
}

/* - - - Compte détaillant - - - */
#compteDetaillant label{ width:155px; }
#compteDetaillant .rang{ margin-bottom: 12px; }
#compteDetaillant h2{ margin: 1em 0 0.5em 0;}
#compteDetaillant h2 + fieldset{ margin-left:20px; }
#compteDetaillant h2 + fieldset label{ width:135px; }

#compteDetaillant #typeEntrepriseAutre{
	display: none;
	clear:left;
	margin: 0.5em 0 1em 155px;
}

#compteDetaillant .reference{ margin-left: 0; }
#compteDetaillant .reference h3{ margin-top: 1em; }
#compteDetaillant .reference .rang{ margin-left: 20px; }
#compteDetaillant .reference label{ width:130px; }

#compteDetaillant .noteCompte{ clear:left; margin-top: 1.5em; }

/* IE8 */
.no-mediaqueries #compteDetaillant .formCompte .note { margin-bottom: 2em; }
.no-mediaqueries #compteDetaillant .formCompte label.long { padding:0; }
.no-mediaqueries #compteDetaillant .rang{ height:36px; }
.no-mediaqueries #compteDetaillant .rang label{ float:left; width:150px; }
.no-mediaqueries #compteDetaillant h2 + fieldset .rang label{ width:130px; }
.no-mediaqueries #compteDetaillant #typeEntrepriseAutre{ margin-left: 150px; }
.no-mediaqueries #compteDetaillant .rang input, #compteDetaillant .rang .wrapper{ float:left; width:300px; margin-left:20px; }
.no-mediaqueries #compteDetaillant .rang select{ width:300px; }


@media only screen and (max-width: 960px) {
	#compteDetaillant .formCompte .note { margin-bottom: 2em; }
	#compteDetaillant .formCompte label.long { padding:0; }
	#compteDetaillant .rang{ height:36px; }
	#compteDetaillant .rang label{ float:left; width:150px; }
	#compteDetaillant h2 + fieldset .rang label{ width:130px; }
	#compteDetaillant #typeEntrepriseAutre{ margin-left: 150px; }
	#compteDetaillant .rang input, #compteDetaillant .rang .wrapper{ float:left; width:300px; margin-left:20px; }
	#compteDetaillant .rang select{ width:300px; }
}

@media only screen and (max-width: 550px) {
	#compteDetaillant .formCompte .note { margin-bottom: 1em; }
	#compteDetaillant .formCompte label.long { padding:10px 0; }
	#compteDetaillant .rang{ height:auto; margin-bottom:10px; }
	#compteDetaillant .rang label, #compteDetaillant .rang input, #compteDetaillant .rang .wrapper{ float:none; width:100%; margin-left:0; }
	#compteDetaillant .rang select{ width:100%; }

	#compteDetaillant h2 + fieldset{ margin-left:0; }
	#compteDetaillant h2 + fieldset .rang label{ width:100%; }

	#compteDetaillant h2 + .reference h3{ margin-top: 0; }
	#compteDetaillant .reference .rang{ margin-left: 0; }
	#compteDetaillant .reference label{ width:100%; }

	#compteDetaillant .radiocheck{ margin-bottom: 0; }

	#compteDetaillant #typeEntrepriseAutre{ margin:0.5em 0 0; }

	#compteDetaillant .jumper { display: none; }
}


/* 09_100 : Mon compte
--------------------------------------------------------------------------------------- */
.messageSuivi{ text-align: left; }
.messageSuivi div{ margin-left:20px; }


/* 09_200 : Informations personnelles
--------------------------------------------------------------------------------------- */


/* 09_300 : Mes adresses
--------------------------------------------------------------------------------------- */
.btnNouvAdresse{ margin-top: 30px; }

/* 09_400 : Historique de commandes
--------------------------------------------------------------------------------------- */
#historique table{
	width: 100%;
	border:1px solid #d1d1d1;
}

#historique h3{ margin:40px 0 16px; }
#historique h3:first-child{ margin-top:0; }

#historique thead th{ background-color:#f3f3f3; font-weight:bold; color:#000; }
#historique td, #historique th{ padding:5px 10px; }
#historique th{ vertical-align: bottom; }
#historique tr:nth-child(even) td{ background-color:#f3f3f3; }

#historique .confirmation{ width:20%; }
#historique .article{ white-space: nowrap; }
#historique th.total{ text-align: center; }
#historique .total{ text-align: right; white-space: nowrap; }
#historique .details{ text-align: center; }

#historique .date .court{ display:none; }

.statut .annule{ color:#c00; }

.transaction{ padding:20px 0; }

.vieilleFacture{
	position: relative;
	max-height:295px;
	overflow:hidden;
}

.vieilleFacture .vieilleFactureAnim{ height:295px; overflow:hidden; }

.vieilleFacture .btnPlus{
	position: absolute;
	bottom:0;
	z-index: 2;
	width:100%;
	height:100px;
	padding-top:40px;
	font:700 16px/20px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}
.vieilleFacture .btnPlus:hover, .vieilleFacture .btnPlus:focus, .vieilleFacture .btnPlus:active{ color:#c91c1b; }

.ie9only .vieilleFacture .btnPlus{ filter:none; }

/* IE8 */
.no-mediaqueries #historique{ font-size:13px; line-height:18px; }
.no-mediaqueries #historique td, #historique th{ padding:10px 7px; }

@media only screen and (max-width: 960px) {
	#historique{ font-size:13px; line-height:18px; }
	#historique td, #historique th{ padding:10px 7px; }
}

@media only screen and (min-width: 768px) and (max-width: 850px) {
	#historique .date .court{ display:inline; }
	#historique .date .long{ display:none; }
	#historique td, #historique th{ padding:10px; }
}


@media only screen and (max-width: 767px) {
	/* Force table to not be like tables anymore */
	#historique table, #historique thead, #historique tbody,
	#historique th, #historique td, #historique tr{ display: block; }

	/* Hide table headers (but not display: none;, for accessibility) */
	#historique thead tr { position: absolute; top: -9999px; left: -9999px; }
	#historique tr { border-bottom:5px solid #d1d1d1; }

	/* Behave like a "row" */
	#historique td {
		position: relative;
		padding-left: 53%;
		border-bottom: 1px solid #d1d1d1;
		line-height:18px;
	}

	/* Now behave like a table header */
	#historique td:before {
		content: attr(data-title); /* Label the data */
		position: absolute;
		top: 5px;
		left: 10px;
		width: 48%;
		padding-right: 10px;
		font-weight:bold;
		color:#000;
	}

	/* Border-right */
	#historique td:not(.details):after {
		content:'';
		display:block;
		position: absolute;
		top:0;
		left:50%;
		width:1px;
		height:104%;
		background-color:#d1d1d1;
	}

	#historique .date, #historique .confirmation{ width: auto; }
	#historique .total{ text-align: left; }
	#historique .details{ padding:0; font-weight:bold; }
	#historique .details a{ display:block; padding:5px 0; }

	/* IE9 doesn't like when you turn a table into a block. Still slightly broken(too large), but acceptable) */
	.ie9 #historique table{ display:table; }
	.ie9 #historique thead{ display:table-header-group; }
	.ie9 #historique tbody{ display:table-row; }
	.ie9 #historique tr{ display:table-row; position:static; border:0; }
	.ie9 #historique th{ display:table-header; }
	.ie9 #historique td{ display:table-cell; }

	.ie9 #historique td:before, .ie9 #historique td:after{ display:none; }
	.ie9 #historique td {
		position: static;
		min-height:0;
		padding:5px;
		border-bottom:0;
	}

}

@media only screen and (max-width: 479px) {
	#historique .confirmation, #historique .confirmation:before { height:48px; }
}

/* 09_500 : Liste de souhaits
--------------------------------------------------------------------------------------- */
#panier.listeSouhaits .prixAjouter{
	float:right;
	text-align: right;
	font:700 20px/34px "Roboto", Arial, Helvetica, sans-serif;
	color:#c91c1b;
}

#panier.listeSouhaits .button{ display: inline-block; margin-top:2px; font:700 12px/30px "Roboto", Arial, Helvetica, sans-serif; }
#panier.listeSouhaits .button:before{
	content:'\e80e';
	margin-right:8px;
	vertical-align: -1px;
	font:normal normal 17px "icons";
	color:#000;
	text-transform: lowercase;
}

.souhaitND{
	display: inline-block;
	padding:0 10px;
	border:1px solid #c00;
	border-radius:5px;
	background-color:#fdd;
	text-align: center;
	font:700 14px/34px "Roboto", Arial, Helvetica, sans-serif;
	color:#c00;
	text-transform: uppercase;
}

#panier.listeSouhaits .note { margin-right:0; }

/* IE8 */
.no-mediaqueries #panier.listeSouhaits .quantite{ margin-left:20px; }
.no-mediaqueries #panier.listeSouhaits .prix { margin-top: 10px; }

@media only screen and (max-width: 1050px) {
	#panier.listeSouhaits .quantite{ margin-left:20px; }
}

@media only screen and (max-width: 1000px) {
	#panier.listeSouhaits .prix { margin-top: 10px; }
}


@media only screen and (max-width: 850px) {
	#panier.listeSouhaits .infos{ margin-bottom:10px; }
	#panier.listeSouhaits .quantite, #panier.listeSouhaits .prix{ clear:left; float:none; margin-left:90px; }
}

@media only screen and (max-width: 767px) {
	#panier.listeSouhaits .prixAjouter{
		clear: left;
		float: none;
		margin-left: 90px;
		text-align: left;
	}
}

/*--------------------------------------------------------------------------------------- */
/* Panier */
/*--------------------------------------------------------------------------------------- */

/* Conteneurs
--------------------------------------------------------------------------------------- */
#headerPanier{ min-height: 100px; }
#headerPanier h1{ margin:0; padding:32px 0; }

.colPanier{
	float:left;
	width:100%;
	margin-right:-300px;
}
.innerPanier{ margin-right:300px; }

.colPanier button{ margin-top:20px; }

@media only screen and (max-width: 850px) {
	#headerPanier{ min-height: 80px; }
}

@media only screen and (max-width: 767px) {
	.colPanier, .innerPanier{ float:none; margin:0; }
 	.colPanier{ width:100%; }
	.colPanier button{ display:block; margin:20px auto 0; }
	.innerPanier{ margin-bottom:18px; border-width:1px 0; }
}


/* Sidebar Panier
--------------------------------------------------------------------------------------- */
.sidePanier{
	float:left;
	width:270px;
	margin-left:30px;
}

.boiteCompte{ padding:20px; border:1px solid #d1d1d1; }
.boiteCaisse{ border:1px solid #d1d1d1; }
.boiteSection{ padding:20px 0; border-top:1px solid #d1d1d1; }
.separateurBouton{ border-top:1px solid #d1d1d1; }
.separateurBouton .button{ margin-top:20px; }
.boitePadding{ padding:16px 20px 20px; }

.sidePanier h3{ margin-bottom:20px; }

.sidePanier.incTinyMce ul{ margin:0; line-height: 22px; }
.sidePanier.incTinyMce li{ margin:0 0 1.25em 15px; }

.sidePanier .button{ display:block; margin-top:10px; }

.no-mediaqueries .sidePanier{ width:250px; margin-right:20px; }

@media only screen and (max-width: 1269px) {
	.sidePanier{ width:250px; margin-right:20px; }
}

@media only screen and (max-width: 767px) {
	.sidePanier{ float:none; width: 320px; margin:20px auto 0; padding:0; }
	.boiteCompte .buttonSec{
		display: block;
		width: 160px;
		margin: 0 auto;
		text-align: center;
	}
	.en .buttonSec{ width: 180px; }
	.fr #creerCompte .buttonSec{ width: 200px; }
}

@media only screen and (max-width: 479px) {
	.sidePanier{ width: 100%; border-width:1px 0; }
	.sidePanier .button{ margin:10px 20px 0; }
	.sidePanier .boiteCompte{ border-width:1px 0; }
}

/* - - - Caisse - - - */

#caisse h3{margin:0 0 14px;}

#promoCode{ display:inline-block; width:100px; margin-right:4px; }
#formPromo label{ margin-bottom:3px; }
.en #formPromo .buttonSec{ width:auto; }

#caisse .listeProduit{
	list-style:none;
	background-color:#f3f3f3;
	font:400 13px/21px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}
#caisse .listeProduit li{ padding:12px 16px; border-bottom:1px solid #fff; }
#caisse .listeProduit .prix{ float: right; font-weight: 700; }

.boiteTotaux{ padding:12px 20px; }
.totaux{ width:100%; line-height:28px; }
.totaux th{ width:60%; }
.totaux td{ width:40%; text-align: right; }
.sousTotal th, .sousTotal td{ font-weight:700; color:#000; }

.grandTotal th{ width:35%; font-size:18px; color:#000; }
.grandTotal td{ width:65%; font-size:20px; font-weight:700; color:#000; }
.grandTotal td span{ font-size:15px;}

#caisse .note{ margin:1em 0 0; text-align: right; }

#caisse .button{ max-width:220px; margin:18px auto 0; }


@media only screen and (max-width: 767px) {
	#promoCode{ width:150px; }
	#caisse .boiteSection, #caisse .boiteTotaux{ padding-left:0; padding-right:0; margin:0 20px; }

	#commDetails{ display:none; }
}

@media only screen and (max-width: 479px) {
	#caisse .boiteCaisse{ margin-top:0; border-width:1px 0; }
	#caisse .boiteSection:first-child{ padding-top:0 }
}

/* - - - Transport gratuit - - - */
.transportGratuit {
	margin-top:10px;
	padding:10px;
	border:1px solid #ffce93;
	border-radius:4px;
	text-align:center;
	background-color:#fff4c6;
	font:400 14px/20px "Roboto", Arial, Helvetica, sans-serif;
	color:#f7941d;
}
.transportGratuit strong{
	font:700 20px/28px "Roboto", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color:#f7941d;
}
.transportGratuit .conditions{
	color:#f7941d;
	font-size: 11px;
	text-decoration: underline;
	vertical-align: 9px;
}

.transportGratuit .retour{ color:#000; }
.transportGratuit .retour:before{
	content:'\e801';
	margin-right:6px;
	font:normal normal 14px "icons";
	vertical-align: -1px;
}


/* Etapes en-tete
--------------------------------------------------------------------------------------- */
#etapes{
	width:100%;
	padding-top:26px;
	list-style: none;
	height:50px;
}

#etapes li{
	float:left;
	width:25%;
	vertical-align: top;
}

#etapes li:before{
	content:attr(data-etape);
	float:left;
	display:block;
	width:48px;
	height:48px;
	margin:0 10px;
	border-radius:48px;
	text-align: center;
	background-color:#d1d1d1;
	font:700 35px/48px "Roboto", Arial, Helvetica, sans-serif;
	color:#fff;
}

.no-borderradius #etapes li:before{ background:url(../gx/m/ie-sprites.png) -148px -1px no-repeat transparent; }

#etapes .etapeBg{
	padding:0 10px 0 68px;
	background-color: #fff;
}

#etapes .nomEtape{
	padding-top:11px;
	white-space: nowrap;
	font:700 20px/20px "Roboto", Arial, Helvetica, sans-serif;
	color:#d1d1d1;
}

#etapes a{
	display:block;
	margin-top:2px;
	font:400 12px/12px "Roboto", Arial, Helvetica, sans-serif;
	text-decoration: underline;
}

#etapes .actif:before{ background-color:#000; }
#etapes .actif .nomEtape{ color:#000; }
.no-borderradius #etapes .actif:before{ background:url(../gx/m/ie-sprites.png) -98px -1px no-repeat transparent; }

#etapes .passe:before{
	content:'\e80c';
	font:normal normal 29px/48px "icons";
	background-color:#7fcea4;
}
#etapes .passe .nomEtape{ color:#7fcea4; }
.no-borderradius #etapes .passe:before{ background:url(../gx/m/ie-sprites.png) -48px -1px no-repeat transparent; }

#etapes .panier .etapeBg{ padding-left:58px; }
#etapes .panier:before{ content:'\e80e'; font-size:25px; margin-left:0; }

#etapes .adresse.actif:before{ letter-spacing: 3px; }
#etapes .passe:before{ letter-spacing: 1px; }

#etapes .justify{ width:100%;}
#etapes .justify:before{ display:none; }

@media only screen and (max-width: 850px) {
	#etapes{ height:48px; padding-top:16px; border:0; }
	#etapes li{ width: auto; }
}

@media only screen and (max-width: 767px) {
	#etapes li{ display:none; }
	#etapes .actif{
		display:block;
		margin:0 auto;
	}
	#etapes .actif:before{ margin-left:0; }
	#etapes .actif .etapeBg{ padding-left:58px; }
}


/* 10_100 : Panier
--------------------------------------------------------------------------------------- */
#panier header{
	padding:0 20px;
	background-color: #f3f3f3;
	font:700 16px/44px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}

#panier ul{ list-style: none; }
#panier li{ padding:20px; border-bottom:1px solid #d1d1d1; }

#panier a{ display:block; }

#panier .photo{
	float:left;
	display:block;
	width:70px;
	border:1px solid #d1d1d1;
}

#panier .infos{
	float:left;
	max-width:54%;
	margin-left:20px;
	margin-top: -7px;
}

#panier .nom{ font-weight:bold; color:#000; }
#panier .description{ margin-bottom:0.6em; }
#panier .infoTrait b{ font-weight:normal; color:#000; }
#panier .infoTrait:before{
	content:'|';
	font-size:18px;
	margin:0 4px;
	vertical-align: 2px;
	color:#666;
}
#panier .infoTrait:first-of-type:before{ display:none; }
#panier .retirer{
	display:inline-block;
	font-size:13px;
	text-decoration: underline;
	color:#333;
}
#panier .retirer:hover, #panier .retirer:focus, #panier .retirer:active{ color:#c91c1b; }

#panier .quantite{ float:right; margin:20px 0 0 10px; }
#panier .quantite select, #panier .quantite .customSelect{ width:60px; font:700 15px Arial,Helvetica,sans-serif; color:#000; }
#panier .prix{
	float:right;
	margin-top:20px;
	font:700 20px/34px "Roboto", Arial, Helvetica, sans-serif;
	color:#c91c1b;
}
#panier .prix .prixSansSolde{ font-size:16px; }

#panier .vide{ margin:0; border:0; }

#panier .note{ float:right; margin:18px 300px 0 0; }

.continuerAchat{ display:inline-block; margin-top:12px; color:#333; }
.continuerAchat:hover, .continuerAchat:focus, .continuerAchat:active{ color:#c91c1b; }
.continuerAchat:before{
	content:'\e801';
	display:inline-block;
	margin-right:6px;
	vertical-align: -1px;
	font:normal normal 1em/1em "icons";
}

/* IE8 */
.no-mediaqueries #confirmation .continuerAchat{ margin-left:20px; }
.no-mediaqueries #panier .infoTrait{ display:block; }
.no-mediaqueries #panier .infoTrait:before{
	content:'';
	display: none;
	margin:0;
	vertical-align:0;
}

@media only screen and (max-width: 1269px) {
	#confirmation .continuerAchat{ margin-left:20px; }
}

@media only screen and (max-width: 1000px) {
	#panier .infoTrait{ display:block; }
	#panier .infoTrait:before{
		content:'';
		display: none;
		margin:0;
		vertical-align:0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1000px) {
	#panier .quantite{ margin-top:0; }
	#panier .prix{ clear:right; }
	#panier .prix span{ display:block; }
	#panier .prix .prixSansSolde{ float:right; }
}

@media only screen and (max-width: 767px) {
	#panier li{ padding:20px 0; }
	#panier .infos{ margin-bottom:20px; }
	#panier .quantite, #panier .prix{ clear:left; float:none; margin-left:90px; }
	#panier .prix{ margin-top:10px; }

	#panier .note{ float:none; margin:18px 0 0 20px; }
	.continuerAchat{ margin:20px 0 0 20px;}
}


/* 10_200 : Identification
--------------------------------------------------------------------------------------- */
#identification label h3{ margin-left:23px; }
#identification .petitH3{ display: block; }
#identification input[type=radio]{ float:left; margin-top:6px; }

.identInvite, .identCompte{ padding-left:26px; }
.identInvite .rang{ margin-bottom:0; }

@media only screen and (max-width: 767px) {
	#identification	.boitePadding, #identification .boiteSection{ padding:20px 0; margin:0; }
}

@media only screen and (max-width: 360px) {
	.identInvite, .identCompte{ padding-left:0; }
}

/* 10_300 : Adresse
--------------------------------------------------------------------------------------- */
.titreEtape{
	margin:0;
	padding:20px 0;
	font:700 22px/22px "Roboto", Arial, Helvetica, sans-serif;
	text-transform: none;
}

#adresse .boiteSection{ margin-bottom:16px; padding-bottom:0; }
.modifier{ font-size:12px; text-decoration: underline; }


/* 10_400 : Livraison
--------------------------------------------------------------------------------------- */
.resumeAdresse{ float:left; width:45%; margin-right:5%; }
#paiement .resumeAdresse{ width:30%; margin-right:3%; }
.pleineLargeur .resumeAdresse{ width:25%; }

.resumeAdresse button, #btnCommande{
	display:block;
	height:30px;
	margin:6px 0;
	background-color: transparent;
	font:700 16px/30px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}

#btnCommande{ font-size:22px; }

.resumeAdresse button:before, #btnCommande:before{
	content:'+';
	display:inline-block;
	width:14px;
	margin-right:6px;
	vertical-align: -3px;
	text-align: center;
	font:700 26px/42px "Roboto", Arial, Helvetica, sans-serif;
	color:#c91c1b;
}

.resumeAdresse button.ouvert:before, #btnCommande.ouvert:before{ content:'\2013'; vertical-align:0; margin-top:-3px; }

#livraison .radiocheck { margin-bottom:4px; }
#livraison .buttonSec{ margin-top:12px; }
.ie8 #livraison .buttonSec{ vertical-align: 1px; }

.optionsLivr{
	float:left;
	width:60%;
	margin-bottom:16px;
}
.optionsLivr label span{ white-space:nowrap; }

.infosLivr{
	float:left;
	width:40%;
	padding-left:20px;
	font-size:13px;
	line-height:18px;
}
.infosLivr a{ text-decoration: underline; }

/*select.serviceLivraison, span.serviceLivraison{width:450px;max-width:450px;}*/

.no-mediaqueries .optionsLivr, .infosLivr{ float:none; width:100%; }
.no-mediaqueries .infosLivr{ padding-left:0; }

@media only screen and (max-width: 1000px) {
	.optionsLivr, .infosLivr{ float:none; width:100%; }
	.infosLivr{ padding-left:0; }
}

@media only screen and (max-width: 900px) {
	#paiement .resumeAdresse{
		width:45%;
		margin-left:32px;
		margin:0 5% 16px 0;
	}
	#paiement .resumeAdresseFacturation{ clear:left; }
}

@media only screen and (max-width: 767px) {
	.resumeAdresse, #paiement .resumeAdresse{ float:none; width:100%; }
	#resumeFacture, #resumeLivraison, #resumeMethode{
		display:none;
		margin-left:32px;
	}
}

@media only screen and (max-width: 479px) {
	#livraison .radiocheck input { float: left; margin: 6px 12px 20px 0; }
}


/* 10_500 : Paiement
--------------------------------------------------------------------------------------- */
#resumeMethode span{ white-space:nowrap; }

.infosPaiment h4{ float:left; }
.infosPaiment .cartes{ float:right; }
.infosPaiment .cartes img{ display:inline-block; margin-right:6px; }
.infosPaiment p:last-child{ margin-bottom:0; }

.modePaiment{ position: relative; }
.modePaiment:before{
	content:'';
	position: absolute;
	top:20px;
	right:20px;
	display:block;
	width:21px;
	height:29px;
	background: url(../gx/m/sprites.png) -1px -1px no-repeat;
}

.modePaiment h4{ margin-right:90px; }

#CCCVD{ width:110px; }
.infoCVD{ margin-left:16px; line-height: 36px; text-decoration: underline; }

@media only screen and (max-width: 479px) {
	.infosPaiment h4{ float:none; }
	.infosPaiment .cartes{ float:none; margin-bottom:1em; }
	.infoCVD{ display:block; margin:0; }
}

/* 10_600 : Confirmation
--------------------------------------------------------------------------------------- */
#confirmation #headerPanier h1{ float:left; }

.colPanier.pleineLargeur{ float:none; clear:left; }
.colPanier.pleineLargeur:last-of-type{ margin-bottom:0; }
.colPanier.pleineLargeur .innerPanier{ margin-right:0; }

.btnImprimer{
	float:right;
	display:inline-block;
	margin:6px 0 0 0;
	vertical-align:-2px;
	color:#333;
}
.btnImprimer:hover, .btnImprimer:focus, .btnImprimer:active{ color:#c91c1b; }

.btnImprimer:before{
	content:'\e80d';
	font:normal normal 20px/30px "icons";
	margin-right:10px;
}

#headerPanier .btnImprimer{ margin-top:38px; }

.detailFacturation h4{ margin-bottom:0.5em; }
.detailFacturation th{ min-width:120px; font-weight:bold; padding-right:20px; }

.commandeDetail{ max-width:700px; }

.commandeDetail .totalFacture{
	float:right;
	max-width:300px;
	width:100%;
	margin:10px 11px 0 0;
}

.commandeDetail .grandTotal{ margin:10px 0; border-top:1px solid #d1d1d1; }
.commandeDetail .grandTotal th, .commandeDetail .grandTotal td{ padding-top:10px; }
.commandeDetail .note{ text-align: right; }

/* Créer un compte */
.btnCreerCompteFacture{
	width:100%;
	margin:20px 0;
	background: #ffb710;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjcxMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjg2MGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ffb710 0%, #ff860a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb710), color-stop(100%,#ff860a));
	background: -webkit-linear-gradient(top,  #ffb710 0%,#ff860a 100%);
	background: -o-linear-gradient(top,  #ffb710 0%,#ff860a 100%);
	background: -ms-linear-gradient(top,  #ffb710 0%,#ff860a 100%);
	background: linear-gradient(to bottom,  #ffb710 0%,#ff860a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb710', endColorstr='#ff860a',GradientType=0 );
	text-align: left;
	font:400 italic 21px/60px "Roboto", Arial, Helvetica, sans-serif;
	color:#000;
}

.ie9 .btnCreerCompteFacture{ filter:none; }

.btnCreerCompteFacture .icon{
	float:left;
	padding:0 16px;
	background-color: #000;
}

.btnCreerCompteFacture .icon:before{
	content: '\e810';
	font:normal normal 30px/60px "icons";
	color:#fff;
}

.btnCreerCompteFacture .texte{ padding:0 20px 0 80px; }

.btnCreerCompteFacture .texte:before{
	content:'\e803';
	float:right;
	margin-top:8px;
	font:normal normal 16px/52px "icons";
	color:#000;
}

#creerCompteFacture{ display:none; margin:10px 0 20px; }

/* IE8 */
.no-mediaqueries .colPanier.pleineLargeur .innerPanier{ margin-right:20px; }
.no-mediaqueries .btnImprimer{ margin-right:20px; }
.no-mediaqueries .paddingBtnCompte{ margin:0 20px; }

@media only screen and (max-width: 1269px) {
	.colPanier.pleineLargeur .innerPanier{ margin-right:20px; }
	.btnImprimer{ margin-right:20px; }
	.paddingBtnCompte{ margin:0 20px; }
}

@media only screen and (max-width: 900px) {
	#confirmation .resumeAdresse{ float: left; width: 30%; margin-right: 3%; }
}

@media only screen and (max-width: 767px) {
	#confirmation #headerPanier h1{ float:none; padding-bottom:0; }
	#confirmation .innerPanier{ margin-right:0; }
	#headerPanier .btnImprimer{ float:none; margin:0 0 20px 0; }

	.detailFacturation{ line-height:20px; }
	.detailFacturation th{ padding:10px 20px 10px 0; }
	.detailFacturation td{ padding:10px 0;  }
	.commandeDetail .totalFacture{ margin-right:0; }

	#confirmation .resumeAdresse{ float: none; width: 100%; margin: 0px 0px 16px; }

	.btnCreerCompteFacture{ font-size:16px; line-height:18px; }
	.btnCreerCompteFacture .texte{ padding:12px 20px 12px 80px; }
	.btnCreerCompteFacture .texte:before{ margin-top:0; line-height:48px; }
}


/*--------------------------------------------------------------------------------------- */
/* Pied de page */
/*--------------------------------------------------------------------------------------- */
#piedPage{
	margin-top:30px;
	padding-top:30px;
	border-top:1px solid #000;
	color:#666;
}

#piedPage h6{
	margin-bottom:6px;
	font:700 14px/22px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color:#000;
}
#piedPage h6 a{ color:#000; }
#piedPage h6 a:hover, #piedPage h6 a:focus, #piedPage h6 a:active{ color:#25aae1; }

#menuPied{
	width:48%;
	font:400 14px/22px Arial, Helvetica, sans-serif;
}
#menuPied ul{
	float:left;
	width:50%;
	padding-right:5%;
}

#menuPied a{ color:#666; }
#menuPied a:hover, #menuPied a:focus, #menuPied a:active{ color:#25aae1; }

#piedPage .reseaux{ float:left; width:30%; }
.reseaux a{
	display:inline-block;
	width: 32px;
	height: 32px;
	margin-right:6px;
	background-color: #000;
	text-align: center;
	font:normal normal 18px/32px "icons";
	color:#fff;
	-webkit-transition: all 0.15s linear 0s;
	transition: all 0.15s linear 0s;
}

.reseaux a:hover, .reseaux a:focus, .reseaux a:active{ background-color: #000; }

.reseaux .facebook{ background-color: #3f67c0; }
.reseaux .twitter{ background-color: #35b5eb; }
.reseaux .pinterest{ background-color: #cf1717; }
.reseaux .gplus{ background-color: #eb5b4c; }
.reseaux .linkedin{ background-color: #006699; }
.reseaux .youtube{ background-color: #cf1717; }
.reseaux .instagram{ font:normal normal 18px/32px "icons2";background-color: #b30059; }

.reseaux .facebook:before{ content:'\e807'; }
.reseaux .twitter:before{ content:'\e808'; }
.reseaux .pinterest:before{ content:'\e809'; }
.reseaux .gplus:before{ content:'\e80a'; }
.reseaux .linkedin:before{ content:'\e80b'; }
.reseaux .youtube:before{ content:'\e816'; }
.reseaux .instagram:before{ content:'\f16d'; }

.ctaInfolettre{
	float:left;
	width:22%;
	font:400 14px/21px Arial, Helvetica, sans-serif;
}

.ctaInfolettre .button{ margin-top:16px; text-transform: none; }

.no-mediaqueries #piedPage .conteneur{ padding:0 20px; width:920px; min-width:920px; }

@media only screen and (max-width: 1210px) {
	#piedPage .conteneur{ padding:0 20px; }
}

@media only screen and (max-width: 850px) {
	#menuPied .services{ width:60%; }
	#menuPied .apropos{ width:40%; }
}

@media only screen and (max-width: 800px) {
	.ctaInfolettre .button{ padding:0 25px; }
}

@media only screen and (max-width: 767px) {
	#menuPied { width:100%; }
	#menuPied .services, #menuPied .apropos, #piedPage .reseaux, .ctaInfolettre{
		float:none;
		width:280px;
		margin-bottom:24px;
		padding:0;
	}

	.ctaInfolettre{ margin-bottom:0; }
}


/* Niveau 2
--------------------------------------------------------------------------------------- */
.piedNiv2{
	margin-top: 24px;
	padding:20px 0;
}

.piedNiv2 .lienPartager{
	float:right;
	font: 700 15px/25px Arial,Helvetica,sans-serif;
	color: #666;
}

.piedNiv2 .lienPartager:before {
	content: "\e815";
	display: inline-block;
	margin-right: 8px;
	font: 15px/25px "icons";
	color: #666;
	-webkit-transition: color 0.15s linear 0s;
	transition: color 0.15s linear 0s;
}

.piedNiv2 .lienPartager:hover, .piedNiv2 .lienPartager:focus, .piedNiv2 .lienPartager:active,
.piedNiv2 .lienPartager:hover:before, .piedNiv2 .lienPartager:focus:before, .piedNiv2 .lienPartager:active:before{
	color:#25aae1;
}

.copyrights{
	display: block;
	text-align: center;
	font:13px/27px Arial, Helvetica, sans-serif;
	color:#666;
}
.copyrights a{ color:#666; }
.copyrights a:hover, .copyrights a:focus, .copyrights a:active{ color:#25aae1; }

.referencement{ margin:16px 0 0 0; font:11px "Roboto", Arial, Helvetica, sans-serif; color:#666; }

@media only screen and (max-width: 660px) {
	.piedNiv2{
		margin-top: 0;
		padding:0 0 20px 0;
		text-align: center;
	}
	.piedNiv2 .lienPartager{
		float:none;
		display: block;
		margin-bottom: 12px;
	}

	.copyrights{ line-height: 18px; }
}


.produitFormQte{
	width:64px !important;
}

.detaillantAddressLocationWp {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom:3rem;
}

@media only screen and (min-width: 767px) {
	.detaillantAddressLocationWp {
    grid-template-columns: 1fr 1fr;

}
}
