html, body {
	width: 100%;
	margin: auto;
	height: 100%;
	padding: 0;
}

body {
	position: relative;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 1em;
	margin: 0;
	padding: 0;
	color: #111;
	background-image: url(/images/pattern-etui.jpg);
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
}

nav, ul, li, a { margin: 0; padding: 0; }
ul {
	list-style-type: none;
	list-style: none; /* Pour enlever les puces sur IE7 */
}

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; } /* IE 6 et 7 */

article, aside, figcaption, figure, footer, header, hgroup, nav, section { display: block; } /* Pour navigateurs ne supportant pas par défaut ces éléments HTML5 : Androïd browser, ...) */

h1 { font-family: 'Roboto', sans-serif; margin-bottom: 25px; background: rgba(0, 0, 0, 0.8); padding: 10px 20px; font-size: 1.9em; text-shadow: 0px 0px 5px #BBB; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #444; }
h2, h3 { font-family: 'Roboto', sans-serif; margin: 10px 0 25px 0; /* border-left: 10px solid #FFF; padding: 0 0 0 20px; */ text-shadow: 2px 2px #000;  }
/* main .content h1:first-child, main .content h2:first-child, main .content h3:first-child { margin-top: 0; } */
h1.marque, h2.marque, h3.marque { background: none; border: none; padding: 0; margin: 0 0 5px 0; font-size: 1.4em; /* color: #2EB8E8; */ color: #DDD; font-weight: normal; text-shadow: 0px 0px 8px #FFF; }
h1.article, h2.article, h3.article { background: none; border: none; padding: 0; margin: 0 0 5px 0; font-size: 1.8em; color: #EE6D1C; text-shadow: none; }
h1.detail, h2.detail, h3.detail { background: none; border: none; padding: 0; margin-left: 0; color: #EE6D1C; text-shadow: none; }
h1.commande, h2.commande, h3.commande { background: none; border: none; padding: 0; margin: 5px 0 25px 0; font-size: 1.8em; color: #EE6D1C; text-shadow: none; }
/* h1 { font-size: 2.5em; } */
h2 { font-size: 1.7em; }
h3 { font-size: 1.5em; }


header, footer {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #D05114;
	background: -webkit-linear-gradient(to bottom, #AB310A, #F06E1C);
	background: -moz-linear-gradient(to bottom, #AB310A, #F06E1C);
	background: -ms-linear-gradient(to bottom, #AB310A, #F06E1C);
	background: -o-linear-gradient(to bottom, #AB310A, #F06E1C);
	background: linear-gradient(to bottom, #AB310A, #F06E1C);
}
header { background-image: url(/images/pattern-spotlights.png); box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3); }


header .content, footer .content, main .content { width: 100%; max-width: 1200px; padding: 15px 0; margin: auto; }
main .content { position: relative; z-index: 0; padding: 20px; background: linear-gradient(to bottom, #1C1C1C, #373635); /* background: url(/images/TEMPORAIRE/fond_ecran_wallpaper_couleur_149.jpg); */ color: #FFF; box-shadow: 0px 0px 15px 0px #000; }


header #logo {
	position: relative;
	display: inline-block;
	width: 390px;
	height: 90px;
	background: url(/images/logo.png) no-repeat;
	text-align: center;
}
header #logo span { position: absolute; display: block; bottom: 0; left: 0; text-align: center; width: 100%; color: #FFF; font-weight: bold; font-family: 'Roboto', sans-serif; font-size: 1.25em; }

header #client {
	float: right;
	width: 300px;
	text-align: center;
	padding-top: 5px;
	color: #FFF;
}
header #client a {
	display: inline-block;
	width: 150px;
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	transition: background 0.3s;
	padding: 15px;
}
header #client i.fa {
	color: #FFF;
	font-size: 1.8em;
	margin-bottom: 5px;
}
header #client a:hover {
	color: #FFECCD;
	background: #F77117;
}
header #client a:hover i.fa { color: #FFECCD; }

header table { display: none; visibility: hidden; position: fixed; top: 0; width: 100%; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8); z-index: 10; }


/************************************/
/**** CLASSES SPECIALES : RADIUS ****/
/************************************/

.radius5 {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

.radius5top {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.radius5b {
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

.radius10 {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}

.radius10top {
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	-o-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
}

.radius10b {
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	-o-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}

/******************************/
/******************************/
/******************************/

/*********************************************/
/**** CLASSES SPECIALES : IMAGES EN BIAIS ****/
/*********************************************/

img.biais {
	display: block;
	width: 80%;

	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;

	margin: 0 auto 20px auto;
	border-radius: 5px;

	-moz-box-shadow: 0px 3px 5px 0px #333;
	-webkit-box-shadow: 0px 3px 5px 0px #333;
	-o-box-shadow: 0px 3px 5px 0px #333;
	-ms-box-shadow: 0px 3px 5px 0px #333;
	box-shadow: 0px 3px 5px 0px #333;
}
img.biais.moins2 {
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}
img.biais.moins5 {
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
img.biais.plus3 {
	-moz-transform: rotate(+3deg);
	-o-transform: rotate(+3deg);
	-webkit-transform: rotate(+3deg);
	-ms-transform: rotate(+3deg);
	transform: rotate(+3deg);
}
img.biais.plus5 {
	-moz-transform: rotate(+5deg);
	-o-transform: rotate(+5deg);
	-webkit-transform: rotate(+5deg);
	-ms-transform: rotate(+5deg);
	transform: rotate(+5deg);
}

/******************************/
/******************************/
/******************************/


/****************************/
/**** CLASSES GENERIQUES ****/
/****************************/

.center { text-align: center; }

a.btn, span.btn, div.btn {
	display: inline-block;
	text-align: center;
	padding: 10px 30px;
	font-size: 1.1em;
	color: #FFF;
	background: rgba(255, 119, 9, 0.8);
	text-decoration: none;
	transition: background 0.3s;
	line-height: 30px;
}
/* a.btn:hover, span.btn:hover, div.btn:hover { background: rgba(255, 119, 9, 1); } */
a.btn:hover, span.btn:hover, div.btn:hover { background: #499549; }
a.btn.block, span.btn.block, div.btn.block { display: block; }
a.btn strong, span.btn strong, div.btn strong { font-size: 1.2em; }

a.btn.vert, span.btn.vert, div.btn.vert { background: rgba(50, 160, 50, 0.8); }
a.btn.vert:hover, span.btn.vert:hover, div.btn.vert:hover { background: rgba(50, 160, 50, 1); }

a.btn.bleu, span.btn.bleu, div.btn.bleu { background: rgba(0, 126, 198, 0.8); }
a.btn.bleu:hover, span.btn.bleu:hover, div.btn.bleu:hover { background: rgba(0, 126, 198, 1); }

p.erreur, p.succes { color: #FFF; font-weight: bold; text-align: center; padding: 10px; margin-bottom: 25px; }
p.erreur { background: #D41900; }
p.succes { background: #009600; }
p.erreur.algauche { text-align: left; padding: 15px 20px; }

p.lh25 { line-height: 25px; } /* LINE-HEIGHT 25px pour meilleure lisibilité */
p.lh30 { line-height: 30px; } /* LINE-HEIGHT 30px pour meilleure lisibilité */

/* LABELS cliquables liés aux RADIOS et CHECKBOXES */
/*
p.labels_for label {
	display: block;
	margin: 3px 0;
	padding: 5px;
	border-radius: 5px;
	transition: background 0.2s;
	cursor: pointer;
}
p.labels_for label input { margin-right: 8px; }
p.labels_for label:hover { background: rgba(248, 162, 22, 0.8); }
*/
p.pcb, a.pcb { /* PARAGRAPHES AVEC CHECKBOX pour fond de couleur au passage de la souris + LIENS DU système de filtrage interne aux rubriques "Neuf" et "Occasion" */
	display: block;
	position: relative;
	margin: 4px 0;
	padding: 5px 10px;
	border: 1px solid transparent;
	border-radius: 5px;
	transition: all 0.2s;
}
p.pcb:hover, a.pcb:hover { /* border: 1px solid rgba(248, 162, 22, 0.85); */ background: rgba(248, 162, 22, 0.85); }
p.pcb.selectionne, a.pcb.selectionne { /* border: 1px solid rgba(248, 162, 22, 1); */ background: rgba(248, 162, 22, 0.4); }
a.pcb { color: #FFF; text-decoration: none; font-weight: bold; }
a.pcb.secondaire { font-size: 0.85em; padding-left: 25px; font-weight: normal; margin: 1px 0; }
a.pcb i.fa { position: absolute; right: 10px; top: 8px; }
b.prenom { display: block; margin-bottom: 15px; font-size: 1.5em; font-family: 'Roboto', sans-serif; text-shadow: 2px 2px #000; }

div.loading { margin: 50px 0; text-align: center; }
div.loading i.fa { color: #AAA; }

a.cta_accueil { display: block; float: left; width: 48%; height: 50px; padding: 12px 0; text-align: center; text-decoration: none; color: #FFF; margin: 0 1%; font-size: 1.1em; transition: all 0.3s; }
a.cta_accueil:hover { font-size: 1.12em; padding: 11px 0; }
a.cta_accueil i.fa { font-size: 0.8em; margin-left: 15px; }
a.cta_accueil.neuf { background: #000; background: linear-gradient( #444 20%, #000 100%); }
a.cta_accueil.occasion { background: #ED8F1D; background: linear-gradient( #F2AF68 20%, #F78B17 100%); }

p.avertissement, span.avertissement { font-size: 0.8em; color: #D80000; }

/******************************/
/******************************/
/******************************/

/****************************************/
/**** CLASSES SPECIALES : PAGINATION ****/
/****************************************/

a.pagine, span.pagine {
	padding: 3px 8px;
	background: rgba(216, 143, 24, 0.7);

	color: #FFF;
	margin: 0 3px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	transition: all 0.3s;
	font-size: 0.9em;
	text-decoration: none;
}
a.pagine:hover { background: rgba(216, 143, 24, 1);  }
span.pagine { color: rgba(247, 135, 3, 1); background: #FFF; } /* = version "active" non cliquable (cause ref. nat.) pour les numéros de page */

/******************************/
/******************************/
/******************************/

/*****************************************/
/**** CLASSES SPECIALES : FANCY BOXES ****/
/*****************************************/

body.fancies {
	margin: auto;
	background: #FFF;
	color: #000;
	min-width: 0;
	/* width: 850px; */
	text-align: center;
	padding: 0;
}
#page.fancies {
	/* width: 780px; */
	padding: 0;
	font-size: 1em;
}

/******************************/
/******************************/
/******************************/

/*********************/
/**** FORMULAIRES ****/
/*********************/

/* form.dot { border: 1px solid #80A9D9; padding: 15px; background: rgba(128, 169, 217, 0.1); font-size: 0.95em; } */

form p label:first-child {
	float: left;
	width: 30%;
	text-align: right;
	margin-right: 3%;
	padding-top: 5px;
}

form p input, form p textarea {
	font-family: 'Open Sans', Arial, sans-serif;
	padding: 5px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #CCC;
}
form p select { padding: 5px; border: 1px solid #CCC; font-size: 0.9em; }
/*
form p select optgroup:before {
    content: attr(label);
    display: block;
    margin: 5px 3px;
    color: #CFA665;
    font-size: 1.15em;
    font-style: normal;
    font-weight: bold;
    padding-left: 5px;
}
*/
form p textarea { width: 60%; height: 120px; font-size: 0.85em; }

form input[type="submit"], a.action {
	display: inline-block;
	padding: 15px 45px;
	/* width: 100%; */
	color: #FFF;
	font-size: 1.1em;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
	border: none;
	/* box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); */
	cursor: pointer;
	/*
	background-color: #F59812;
	background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0));
	*/
	background: rgba(255, 119, 9, 0.8);
	transition: background-color 0.3s;
}

form input[type="submit"]:hover, a.action:hover {
	/*
	background-color: #3386AF;
	background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0));
	*/
	background: #499549;
}
form input[type="submit"]:active { box-shadow: 1px 1px 10px #1E516B inset, 0 1px 0 rgba(255, 255, 255, 0.4); }

/**** Supression des LABELS en basse résolution ****/

form p input[type="text"], form p input[type="email"], form p input[type="password"], form p input[type="tel"], form p select, form p textarea { min-width: 30%; }

@media screen and (max-width: 650px), (min-width: 871px) and (max-width: 980px) {
	form p label:first-child { display: block; width: 100%; text-align: left; margin-bottom: 10px; background: #EEE; padding: 4px 0 4px 10px; }
	form p label:first-child { display: none; }
	form p input[type="text"], form p input[type="email"], form p input[type="password"], form p input[type="tel"], form p select, form p textarea, #mr_nom, #mr_nom_resultats { width: 100%; margin-left: 0; }
}


/****/
/**** FORMULAIRES : checkboxes stylées ****/
/****/

[type="checkbox"]:not(:checked), [type="checkbox"]:checked { /* on cache la case à cocher */
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { /* on prépare le label */
  position: relative; /* permet de positionner les pseudo-éléments */
  padding-left: 30px; /* fait un peu d'espace pour notre case à venir */
  cursor: pointer;    /* affiche un curseur adapté */
}
[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { /* Aspect des checkboxes - :before sert à créer la case à cocher */
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 16px; height: 17px; /* dim. de la case */
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 0; /* angles arrondis */
  /* box-shadow: inset 0 1px 3px rgba(0,0,0,.3); */ /* légère ombre interne */
}
[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { /* aspect général de la coche */
  /* background: red;
  content: 'X'; */
  font: 12pt FontAwesome;
  content: "\00f00c";
  position: absolute;
  top: 3px; left: 1px;
  /* color: #09ad7e; */
  /* color: rgba(248, 162, 22, 1); */
  color: #FFF;
  background: rgba(0, 140, 23, 1);
  box-shadow: none;
  transition: all .1s; /* on prévoit une animation */
}
[type="checkbox"]:not(:checked) + label:after { /* aspect si "pas coché" */
  opacity: 0; /* coche invisible */
  transform: scale(0); /* mise à l'échelle à 0 */
}
[type="checkbox"]:checked + label:after { /* aspect si "coché" */
  opacity: 1; /* coche opaque */
  transform: scale(1); /* mise à l'échelle 1:1 */
}
[type="checkbox"]:disabled:not(:checked) + label:before, [type="checkbox"]:disabled:checked + label:before { /* aspect si désactivé */
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after { /* styles de la coche (si coché/désactivé) */
  color: #999;
}
[type="checkbox"]:disabled + label { /* on style aussi le label quand désactivé */
  color: #aaa;
}
 
/* aspect au focus de l'élément */
/*
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}
*/

/****/
/**** FORMULAIRES : spécifique Vinstage (placeholders mouvants au focus) ****/
/****/

	form.vinstage { padding: 25px; background: url(/images/pattern-etui.jpg); box-shadow: 0px 0px 7px 0px #AAA; }
	form.vinstage.sansfond { background: none; box-shadow: none; }

	form.vinstage div.inp { position: relative; }
	form.vinstage div.inp span.lab { position: absolute; left: 10px; top: 9px; color: #999; font-family: sans-serif; z-index: 40; }
	form.vinstage input[type="text"], form.vinstage input[type="email"], form.vinstage input[type="number"], form.vinstage input[type="password"], form.vinstage select, form.vinstage textarea {
		position: relative;
		padding: 10px;
		border: 1px solid #c4c4c4;
		font-size: 1em;
		font-family: Arial;
		transition: all 0.3s;
		border-radius: 5px;
		background: transparent;
		z-index: 50;
		color: #FFF;
		width: 100%;
		margin-bottom: 15px;
	}
	form.vinstage input[type="text"]:focus, form.vinstage input[type="email"]:focus, form.vinstage input[type="number"]:focus, form.vinstage input[type="password"]:focus, form.vinstage input[type="text"].focusse, form.vinstage input[type="email"].focusse, form.vinstage input[type="number"].focusse, form.vinstage input[type="password"].focusse, form.vinstage textarea:focus, form.vinstage textarea.focusse, form.vinstage select:focus, form.vinstage select.focusse {
		padding: 30px 10px 10px 10px;
		border-color: #08c;
		-webkit-box-shadow: 0 0 6px rgba(0, 136, 204, 0.4);
		-moz-box-shadow: 0 0 6px rgba(0, 136, 204, 0.4);
		box-shadow: 0 0 6px rgba(0, 136, 204, 0.4);
	}
	form.vinstage input[type="text"]:focus + span.lab, form.vinstage input[type="email"]:focus + span.lab, form.vinstage input[type="number"]:focus + span.lab, form.vinstage input[type="password"]:focus + span.lab, form.vinstage input[type="text"].focusse + span.lab, form.vinstage input[type="email"].focusse + span.lab, form.vinstage input[type="number"].focusse + span.lab, form.vinstage input[type="password"].focusse + span.lab, form.vinstage textarea:focus + span.lab, form.vinstage textarea.focusse + span.lab, form.vinstage select:focus + span.lab, form.vinstage select.focusse + span.lab { font-size: 0.8em; color: #AAA; }

	form.vinstage textarea {
		box-sizing: border-box;
		resize: none;
		height: 120px;
	}

	form.vinstage select {
		display: inline-block;
		outline:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    color: #FFF;
	}
	form.vinstage select option { background: #222; }
	/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		form.vinstage select {padding-right:18px}
	}
/*
	form.vinstage label {position:relative}
	form.vinstage label:after {
		content:'<>';
		font:19px "Consolas", monospace;
		color:#aaa;
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		transform:rotate(90deg);
		right:8px; top:2px;
		padding:0 0 2px;
		border-bottom:1px solid #ddd;
		position:absolute;
		pointer-events:none;
	}
	form.vinstage label:before {
		content:'';
		right:6px; top:0px;
		width:20px; height:20px;
		background:#f8f8f8;
		position:absolute;
		pointer-events:none;
		display:block;
	}
*/
	form.vinstage input[name="nom"], form.vinstage input[name="prenom"], form.vinstage input[name="telephone"] { max-width: 300px; }
	form.vinstage input[name="email"] { max-width: 450px; }
	form.vinstage input[name="password"] { max-width: 250px; }
	form.vinstage input[name="reference"] { max-width: 600px; }
	form.vinstage select[name="type"] { max-width: 350px; }
	form.vinstage select[name="sexe"] { max-width: 120px; }
	form.vinstage input[name="destinataire"], form.vinstage input[name="adresse_1"], form.vinstage input[name="adresse_2"], form.vinstage input[name="societe"] { max-width: 450px; }
	form.vinstage input[name="cp"] { max-width: 150px; }
	form.vinstage input[name="ville"], form.vinstage select[name="pays"] { max-width: 450px; }
	form.vinstage input[type="submit"] { width: 100%; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }

	form.vinstage input[type="radio"] {
		width: auto;
		margin-bottom: 0;
	}

/****/
/**** FORMULAIRES APPELES SOUS MAGNIFIC POPUPS ****/
/****/

#password-oublie-form { padding: 20px; background: #FFF; font-size: 0.9em; }
#password-oublie-form h3 { padding: 7px 0 7px 15px; margin: 0 0 20px 0; font-size: 1.5em; background: #000; color: #FFF; }

/******************************/
/******************************/
/******************************/

/**********************/
/**** FIL D'ARIANE ****/
/**********************/

#ariane { position: relative; z-index: 10; margin-top: 0; padding: 0; color: #AAA; font-size: 0.85em; margin-bottom: 15px; }
#ariane div[itemtype="http://data-vocabulary.org/Breadcrumb"] { display: inline; margin: 0; padding: 0; font-size: 0.9em; color: #CCC; }
#ariane div[itemtype="http://data-vocabulary.org/Breadcrumb"] > a { color: #CCC; margin-right: 5px; text-decoration: none; transition-duration: 0.2s; }
#ariane div[itemtype="http://data-vocabulary.org/Breadcrumb"] > a:hover { border: none; text-decoration: none; color: #EFA349; }
#ariane div[itemprop="child"] { margin-left: 5px; }

/**********************/
/**********************/
/**********************/

/*******************************************************************/
/**** spécifique ACCUEIL : slider + "à découvrir cette semaine" ****/
/*******************************************************************/

#slider { float: left; padding: 0; margin-bottom: 30px; max-width: 800px; max-height: 400px; }
#slider .interieur { position: relative; margin: 0 auto; top: 0px; left: 0px; width: 800px; height: 400px; overflow: hidden; visibility: hidden; }

#decouverte-accroche {
	display: none;
	padding-left: 20px;
	border-left: 5px solid #E98B1A;
	font-weight: bold;
	margin-top: 0;
}

#decouverte {
	position: relative;
	float: right;
	width: 330px;
	height: 400px;
	background: #000;
	padding: 15px;
	cursor: pointer;
	transition: box-shadow 0.3s;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#decouverte .offre {position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.85); text-align: center; overflow: hidden; }
#decouverte div.offre a.panier { position: relative; display: inline-block; background: #F77117; color: #FFF; padding: 8px 20px; font-size: 0.9em; text-decoration: none; text-align: center; transition: background 0.3s; }

@media screen and (max-width: 1180px) {
	#decouverte { display: none; }
	#slider, #slider .interieur { float: none; width: 100%; max-width: none; max-height: none; }
}

@media screen and (max-width: 800px) {
	#slider, #slider .interieur { display: none; }
	#decouverte-accroche { display: block; }
}

@media screen and (max-width: 600px) {
	#decouverte { display: block; float: none; width: 100%; max-width: none; max-height: none; }
}

/**********************/
/**********************/
/**********************/

/*****************************/
/**** spécifique : FOOTER ****/
/*****************************/

footer .bandeau.reassurance { background: #F78F1B; box-shadow: 0px 0px 10px 0px #000; font-size: 0.8em; position: relative; z-index: 10; }
footer .bandeau.reassurance .content { padding: 0; }
footer .bandeau.reassurance .content div { float: left; width: 25%; text-align: center; padding: 20px 10px; min-height: 235px; border-right: 1px dotted #FFF; cursor: pointer; transition: background 0.3s; }
footer .bandeau.reassurance .content div:hover { background: #EE7C20; }
footer .bandeau.reassurance .content div:first-child { border-left: 1px dotted #FFF; }
footer .bandeau.reassurance .content div b { display: block; margin: 10px 0; font-size: 1.25em; }



footer .bandeau.infos { background-image: url(/images/pattern-spotlights.png); }
footer .bandeau.infos p { float: left; width: 30%; margin-right: 3%; font-size: 1em; text-align: center; color: #FFF; }
footer .bandeau.infos strong { font-family: 'Roboto', sans-serif; font-size: 1.7em; display: block; margin-bottom: 20px; text-align: center; background: #F09A66; padding: 7px; border-radius: 30px; background: #EA6A1B; border: 1px solid #F09A66; }
footer .bandeau.infos p a { display: block; margin-bottom: 20px; text-align: center; border: 4px solid #F09A66; background: #EC8648; padding: 7px; border-radius: 10px; line-height: 28px; text-decoration: none; color: #FFF; }
footer .bandeau.infos p i.fa { margin-right: 8px; }
footer .bandeau.infos p span.numero { display: block; padding: 5px 25px 5px 15px; width: 190px; border-radius: 30px; background: #499549; color: #FFF; margin: 10px auto; }
footer .bandeau.infos p span.numero_horaires { font-size: 0.85em; color: #DDD; }
footer .bandeau.infos ul li {
	display: inline-block;
	width: 24%;
}
footer .bandeau.infos ul li a {
	text-decoration: none;
	color: #FFF;
	font-size: 0.8em;
}
footer .bandeau.infos ul li a i { margin-right: 10px; font-size: 0.8em; transition: margin 0.3s; }
footer .bandeau.infos ul li a:hover i { margin-left: 5px; margin-right: 5px; }

footer .bandeau.pied { background: #000; text-align: center; color: #FFF; font-size: 0.8em; }

footer .bandeau.pied span.sepelt { margin: 0 10px; } /** séparateur des éléments du pied de page **/
footer .bandeau.pied span.sepelt:before { content: '|'; }

@media screen and (max-width: 800px) {
	footer .bandeau.pied span.sepelt { display: block; margin: 10px 0; }
	footer .bandeau.pied span.sepelt:before { content: ''; }

	footer .bandeau.reassurance .content div { float: none; width: 100%; text-align: center; padding: 10px 0 20px 0; min-height: 0; height: auto; border-right: none; border-bottom: 1px dotted #FFF; }
	footer .bandeau.reassurance .content div:last-child { border: none; }
	footer .bandeau.reassurance .content div img { display: none; }
	footer .bandeau.infos p { float: none; width: 100%; margin: 10px 0; font-size: 0.9em; }
}

/**********************/
/**********************/
/**********************/


/***********************************/
/**** spécifique : POPUP PANIER ****/
/***********************************/

body.panier { background: #000; color: #FFF; }
body.panier .entete { position: relative; height: 50px; padding: 12px 0 0 0; margin-bottom: 15px; background: #F5781C; font-weight: bold; color: #FFF; font-size: 1.2em; }
body.panier .entete a#retour { position: absolute; left: 0; bottom: 0; height: 50px; width: 80px; padding: 10px 0 0 0; color: #000; background: #FFF; transition: all 0.3s; }
body.panier .entete a#retour:hover { background: #F49C5C; color: #FFF; }
body.panier .entete a#retour.invisible { display: none; }

body.panier #corps { padding: 20px; text-align: left; }
body.panier div.article, body.paiement div.article {
	margin-bottom: 10px;
	padding: 15px;
	color: #AAA;
	font-size: 0.9em;
	line-height: 28px;
	border: 2px solid #F77117;
}
body.panier div.article div.img, body.paiement div.article div.img, body.paiement table.paiement div.img {
	float: left;
	margin-right: 15px;
	width: 100px;
	height: 80px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
body.paiement table.paiement div.img { float: none; margin: 0; }
body.panier div.article a, body.paiement div.article a, body.paiement table.paiement a { display: block; color: #FFF; font-weight: bold; text-decoration: none; }

body.panier a.cta, body.panier span.cta { display: block; padding: 15px 0; text-align: center; text-decoration: none; color: #FFF; margin: 20px 0; background: #8CC63F; transition: all 0.3s; cursor: pointer; }
body.panier a.cta:hover, body.panier span.cta:hover { background: #6C9A2E; }
body.panier a.cta { background: #F88A40; }
body.panier a.cta:hover { background: #F77117; }
body.panier a.cta i.fa { margin-right: 10px; }

body.panier div.article div.actions { clear: both; margin-top: 10px; }
/*
body.panier div.article_actions select { padding: 5px; background: #F3F3F3; border: 1px solid #AAA; margin-right: 10px; }
body.panier div.article_actions .supprimer { padding: 6px 15px; background: #F3F3F3; font-size: 0.8em; border: 1px solid #AAA; cursor: pointer; }
body.panier div.article_actions .supprimer:hover { background: #EEE; }
*/
body.panier div.article div.actions select { padding: 5px; background: #000; color: #FFF; border: 1px solid #999; margin-right: 10px; }
body.panier div.article div.actions .supprimer { padding: 6px 15px; background: #000; color: #FFF; font-size: 0.8em; border: 1px solid #999; cursor: pointer; transition: all 0.3s; }
body.panier div.article div.actions .supprimer:hover { background: #F3F3F3; color: #000; }

body.panier p.total, body.paiement p.total { margin: 0; padding: 5px 0; }
body.panier p.total.bold, body.paiement p.total.bold { font-size: 1.1em; font-weight: bold;  border-bottom: 1px dotted gray; border-top: 1px dotted gray; margin-top: 5px; }
body.panier span.prix, body.paiement span.prix { float: right; }

/**********************/
/**********************/
/**********************/


/*****************************************/
/**** spécifique : TUNNEL DE COMMANDE ****/
/*****************************************/

table.transport, table.paiement_mode {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #AAA;
}
table.transport tr td, table.paiement_mode tr td { border: 1px solid #AAA; }
table.transport tr td:first-child, table.paiement_mode tr td:first-child { width: 50px; text-align: center; }
table.transport tr td:last-child { width: 120px; text-align: right; }
table.transport tr:hover, table.paiement_mode tr:hover { background: #555; cursor: pointer; }
table.transport tr.actif, table.paiement_mode tr.actif { background: #499549; }
a.cgv { color: #F5781C; text-decoration: underline; }

table.paiement {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #AAA;
	margin-bottom: 25px;
}
table.paiement tr td, table.paiement tr th { border: 1px solid #AAA; }

table.paiement thead, table.paiement tfoot { background: #000; }
table.paiement tbody { background: #333; }

table.paiement thead tr th { font-weight: normal; }
table.paiement tfoot tr td:first-child { text-align: right; }
table.paiement tfoot tr td:last-child { text-align: center; }

@media screen and (max-width: 950px) { #mobile { display: block; } #desktop { display: none; } }
@media screen and (min-width: 949px) { #mobile { display: none; } #desktop { display: block; } }

ul.ariane-tunnel-commande li {
	display: inline-block;
	width: 33.3%;
	padding: 8px 0;
	text-align: center;
	font-size: 1em;
	background: #555;
	color: #FFF;
	border-right: 1px solid #000;
	transition: background 0.3s;
}
ul.ariane-tunnel-commande li.actif { background: #5BB35B; }
ul.ariane-tunnel-commande li.cliquable { cursor: pointer; }
ul.ariane-tunnel-commande li.cliquable:hover { background: #FF923A; }

@media screen and (max-width: 650px) { ul.ariane-tunnel-commande li { font-size: 0.85em; } }
@media screen and (max-width: 550px) {
	ul.ariane-tunnel-commande li:first-child { width: 40%; }
	ul.ariane-tunnel-commande li:nth-child(2), ul.ariane-tunnel-commande li:nth-child(3) { width: 30%; }
	ul.ariane-tunnel-commande li { font-size: 0.75em; }
}
@media screen and (max-width: 500px) { ul.ariane-tunnel-commande li { font-size: 0.6em; overflow: hidden; white-space: nowrap; } }

/**********************/
/**********************/
/**********************/

/*
.connexes_a_droite #contenu {
	float: left;
	width: 840px;
	margin-right: 20px;
}
.connexes_a_droite #connexes { overflow: hidden; }
*/
.connexes_a_gauche #contenu { overflow: hidden; }
.connexes_a_gauche #connexes { float: left; width: 300px; margin-right: 20px; }


.connexes_a_droite #contenu, #connexes { float: left; }

.connexes_a_droite #contenu {
	position: relative;
	width: 100%;
	padding-right: 330px;
	margin-right: -330px;
	margin-bottom: 10px;
	/* z-index: -1; */ /* APPAREMMENT INDISPENSABLE si l'on utilise "box-sizing: border-box;" : sinon, les liens de #connexe ne sont plus clicables ???!!!!! */
	text-align: justify;
}

#connexes {
	position: relative;
	width: 300px;
	margin-left: 30px;
	margin-bottom: 10px;
}

#bandeau-mobiles-articles { display: none; }

@media screen and (max-width: 900px) {
	.connexes_a_droite #contenu, #connexes { float: none; }
	.connexes_a_droite #contenu {
		padding-right: 0;
		margin-right: 0;
	}
	#connexes {
		width: 100%;
		margin-left: 0;
	}

	#bandeau-mobiles-articles {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99999;
		width: 100%;
		padding: 15px;
		background: #000;
		color: #FFF;
	}
}

/************************************************************/
/**** PAGES CATALOGUE (neuf, occasion + listes filtrées) ****/
/************************************************************/

.connexes_a_gauche #contenu ul.liste-articles li { width: 30%; margin: 0 1.65% 20px 1.65%; }

@media screen and (max-width: 1050px) {
	.connexes_a_gauche #connexes { display: none; }
}

/**********************/
/**********************/
/**********************/

/***************************/
/**** LISTES D'ARTICLES ****/
/***************************/

ul.liste-articles li { position: relative; display: inline-block; width: 23%; margin: 0 1% 20px 1%; height: 350px; border: 2px solid #F77117; background: #000; padding: 15px; transition: box-shadow 0.3s; overflow: hidden; }
ul.liste-articles li:hover { box-shadow: 0px 0px 15px 0px rgba(247, 113, 23, 0.7); }
ul.liste-articles li a.photo { background-repeat: no-repeat; background-size: contain; background-position: center center; display: block; height: 150px; }
ul.liste-articles li div.produit { position: relative; height: 100%; min-height: 100%; } /* Nécessaire pour la largeur du bouton d'achat en position absolue (sinon : pas de respect du padding parent) */
ul.liste-articles li span.marque { display: block; margin: 10px 0; font-family: 'Roboto', sans-serif; font-size: 1.25em; color: #FFF; text-align: center; font-variant: small-caps; }
ul.liste-articles li a.libelle, #decouverte div.offre a.libelle { display: block; color: #F77117; font-family: 'Roboto', sans-serif; font-size: 1.1em; text-decoration: none; text-align: center; font-weight: bold; }
ul.liste-articles li span.prix, #decouverte div.offre span.prix { display: block; margin: 10px 0; font-size: 1.3em; color: #FFF; text-align: center; font-weight: bold; }
ul.liste-articles li a.panier, ul.liste-articles li span.indispo { position: absolute; display: block; bottom: 0; width: 100%; background: #F77117; color: #FFF; padding: 7px; font-size: 0.9em; text-decoration: none; text-align: center; transition: background 0.3s; }
ul.liste-articles li a.panier:hover, #decouverte div.offre a.panier:hover, #connexes #achat span.panier:hover, #connexes #achat a.panier:hover, #bandeau-mobiles-articles a.panier.panier_mobile:hover { background: #499549; }
ul.liste-articles li a.panier i.fa { display: none; }
ul.liste-articles li a.panier:before { content: "AJOUTER AU PANIER"; }
ul.liste-articles li span.indispo { background: transparent; border: 1px solid #F0000C; color: #F0000C; }

/**** Bandeaux "NEUF" ou "OCCASION" ****/

div.info-produit {
	position: absolute;
	color: #FFF;
	width: 150%;
	top: -48px;
	left: -15px;
	padding: 25px 0 10px 17px;
	z-index: 1;
	font-size: 1.2em;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
	-ms-transform: rotate(-15deg); /* IE 9 */
	-webkit-transform: rotate(-15deg); /* Safari */
	-o-transform: rotate(-15deg); /* IE 9 */
	transform: rotate(-15deg);
	transition: top 0.3s;
}
div.info-produit.occasion { /* background: #44A5AC; */ background: rgba(246, 147, 27, 0.95); }
div.info-produit.neuf { /* background: #FF9900; */ background: rgba(0, 0, 0, 0.95); }

ul.liste-articles li:hover div.info-produit { top: -120px; }




@media screen and (max-width: 1050px) {
	ul.liste-articles li, .connexes_a_gauche #contenu ul.liste-articles li { width: 30%; margin: 0 1.65% 20px 1.65%; }
	div.info-produit { top: -55px; }
}
@media screen and (max-width: 790px) {
	ul.liste-articles li, .connexes_a_gauche #contenu ul.liste-articles li { width: 45%; margin: 0 2.5% 20px 2.5%; }
	ul.liste-articles li span.marque, .connexes_a_gauche #contenu ul.liste-articles li span.marque { font-size: 1.1em; }
	ul.liste-articles li a.libelle, .connexes_a_gauche #contenu ul.liste-articles li a.libelle { font-size: 1em; }
	ul.liste-articles li span.prix, .connexes_a_gauche #contenu ul.liste-articles li span.prix { font-size: 1.1em; }
	div.info-produit { font-size: 1em; top: -60px; }
}
@media screen and (max-width: 500px) {
	ul.liste-articles li, .connexes_a_gauche #contenu ul.liste-articles li { display: block; width: 100%; margin: 10px 0; height: 150px; }
	ul.liste-articles li a.photo, .connexes_a_gauche #contenu ul.liste-articles li a.photo { float: left; height: 120px; width: 120px; margin-right: 20px; }
	ul.liste-articles li span.marque, .connexes_a_gauche #contenu ul.liste-articles li span.marque { margin: 0 0 10px 0; text-align: left; }
	ul.liste-articles li a.libelle, .connexes_a_gauche #contenu ul.liste-articles li a.libelle { text-align: left; }
	ul.liste-articles li span.prix, .connexes_a_gauche #contenu ul.liste-articles li span.prix { margin: 10px 0; text-align: left; }
	ul.liste-articles li a.panier, .connexes_a_gauche #contenu ul.liste-articles li a.panier { position: absolute; display: block; bottom: -5px; right: -5px; width: auto; padding: 12px 18px; border-radius: 5px 0 5px 0; }
	ul.liste-articles li a.panier i.fa, .connexes_a_gauche #contenu ul.liste-articles li a.panier i.fa { display: block; }
	ul.liste-articles li a.panier:before, .connexes_a_gauche #contenu ul.liste-articles li a.panier:before { content: ""; }
	ul.liste-articles li span.indispo { display: none; } /* en cas d'indispo ou d'occasion déjà vendue, on n'affiche rien dans les listes d'articles */
	div.info-produit {
		width: 50%;
		top: -30px;
		left: -15px;
		padding: 25px 0 10px 17px;
		z-index: 1;
		-ms-transform: rotate(-15deg); /* IE 9 */
		-webkit-transform: rotate(-15deg); /* Safari */
		-o-transform: rotate(-15deg); /* IE 9 */
		transform: rotate(-15deg);
	}
	ul.liste-articles li:hover div.info-produit, .connexes_a_gauche #contenu ul.liste-articles li:hover div.info-produit { top: -120px; }
}

/**********************/
/**********************/
/**********************/


/*************************/
/**** FICHES ARTICLES ****/
/*************************/

#contenu #entete {
	background: rgba(0, 0, 0, 1);
	padding: 10px 0 5px 20px;
	margin-bottom: 20px;
}

#contenu #galerie-bloc {
	float: left;
	width: 300px;
	margin: 0 20px 20px 0;
}
/*
#contenu #galerie, #contenu #galerie-bloc .galerie-suite {
	position: relative;
	width: 100%;
	height: 300px;
	background-image: url(/images/TEMPORAIRE/photo-defaut.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	cursor: pointer;
}

#contenu #galerie span { position: absolute; bottom: 15px; right: 15px; display: block; background: rgba(247, 113, 23, 0.9); color: #FFF; font-size: 1em; padding: 7px 20px; cursor: pointer; transition: background 0.3s; border-radius: 10px; }
#contenu #galerie span:hover { background: rgba(247, 113, 23, 1); }
#contenu #galerie span b { margin-right: 8px; }

#contenu #galerie-bloc .galerie-suite {
	float: left;
	width: 30%;
	height: 100px;
	margin: 15px 1.5% 0 1.5%;
	border: 1px solid #888;
}
*/
#contenu #galerie-bloc a.photo-principale, #contenu #galerie-bloc a.photos-secondaires {
	position: relative;
	display: block;
	width: 100%;
	height: 300px;
	background-image: url(/images/TEMPORAIRE/photo-defaut.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	cursor: pointer;
}

#contenu #galerie-bloc a.photo-principale span { position: absolute; bottom: 15px; right: 15px; display: block; background: rgba(247, 113, 23, 0.9); color: #FFF; font-size: 1em; padding: 7px 20px; cursor: pointer; transition: background 0.3s; border-radius: 10px; }
#contenu #galerie-bloc a.photo-principale span:hover { background: rgba(247, 113, 23, 1); }
#contenu #galerie-bloc a.photo-principale span b { margin-right: 8px; }

#contenu #galerie-bloc a.photos-secondaires {
	float: left;
	width: 30%;
	height: 100px;
	margin: 15px 1.5% 0 1.5%;
	border: 1px solid #888;
}

@media screen and (max-width: 600px) {
	#contenu #galerie-bloc { float: none; width: 100%; }
}

ul.caracteristiques li { padding: 5px 0; border-bottom: 1px dotted #BBB; margin: 0; }
ul.caracteristiques li span { float: right; }



#connexes #achat { text-align: center; padding: 15px; background: #000; }
#connexes #achat span.prix, #bandeau-mobiles-articles span.prix { display: block; border: 2px solid #F6931B; color: #F6931B; font-size: 1.6em; font-weight: bold; padding: 10px; margin-bottom: 15px; }
#bandeau-mobiles-articles span.prix { display: inline-block; width: auto; margin-bottom: 0; font-size: 1em; padding: 5px 10px; }
#connexes #achat ul.caracteristiques li { text-align: left; font-size: 0.75em; }
#connexes #achat ul.caracteristiques li span.spe { font-weight: bold; font-size: 1.3em; }
#connexes #achat ul.caracteristiques li span.enstock, table tr td.enstock { color: #00A820; }
#connexes #achat ul.caracteristiques li span.indisponible { color: #FF0125; }
#connexes #achat ul.caracteristiques li span.delai, table tr td.delai { color: #FF9A09; }
/*
#connexes #achat p { text-align: left; font-size: 0.75em; padding: 5px 0; border-bottom: 1px dotted #BBB; margin: 0; }
#connexes #achat p span { float: right; font-weight: bold; }
#connexes #achat p span.enstock { color: #00A820; }
*/
#connexes #achat span.panier, #connexes #achat span.indispo, #connexes #achat a.panier, #bandeau-mobiles-articles span.panier, #bandeau-mobiles-articles span.indispo, #bandeau-mobiles-articles a.panier { display: block; background: #F77117; padding: 10px; margin-top: 15px; cursor: pointer; transition: background 0.3s; color: #FFF; text-decoration: none; }
#bandeau-mobiles-articles span.panier.panier_mobile, #bandeau-mobiles-articles span.indispo, #bandeau-mobiles-articles a.panier.panier_mobile { display: inline-block; width: auto; margin-bottom: 0; font-size: 1em; padding: 7px 20px; text-align: center; margin-top: 0; }
#connexes #achat span.indispo, #bandeau-mobiles-articles span.indispo { background: transparent; border: 1px solid #F0000C; color: #F0000C; cursor: default; }


#connexes span.titre { display: block; width: 300px; text-align: center; padding: 15px; overflow: hidden; background: #000; margin: 15px 0; }

#connexes ul.liste-articles { font-size: 0.9em; color: #BBB; height: auto; }
#connexes ul.liste-articles li { display: block; width: 100%; border: none; background: none; margin: 0 0 15px 0; padding: 0; height: auto; cursor: default; }
#connexes ul.liste-articles li:hover { box-shadow: none; }
#connexes ul.liste-articles li img { float: left; margin-right: 10px; width: 50px; height: 50px; }
#connexes ul.liste-articles li a { color: #F77117; text-decoration: none; font-weight: bold; }

/**********************/
/**********************/
/**********************/


/**********************/
/**** PAGE MAGASIN ****/
/**********************/

#magasin_col_gauche, #magasin_col_droite { float: left; }

#magasin_col_gauche {
	position: relative;
	width: 100%;
	padding-right: 530px;
	margin-right: -530px;
	margin-bottom: 10px;
	/* z-index: -1; */ /* APPAREMMENT INDISPENSABLE si l'on utilise "box-sizing: border-box;" : sinon, les liens de #connexe ne sont plus clicables ???!!!!! */
	text-align: justify;
}

#magasin_col_droite {
	position: relative;
	width: 500px;
	margin-left: 30px;
	margin-bottom: 10px;
}

@media screen and (max-width: 1000px) {
	#magasin_col_gauche, #magasin_col_droite { float: none; }
	#magasin_col_gauche {
		padding-right: 0;
		margin-right: 0;
	}
	#magasin_col_droite {
		width: 100%;
		margin-left: 0;
		margin-top: 50px;
	}
}

/**********************/
/**********************/
/**********************/










/***********************************/
/**** NAVIGATION + MENU !!!!!!! ****/
/***********************************/

nav {
	display: block;
	position: relative;
	width: 100%;
	z-index: 10;
	color: #FFF;
	background: #000;
	-moz-box-shadow: 1px 2px 10px rgba(247, 148, 22, 0.2);
	-webkit-box-shadow: 1px 2px 10px rgba(247, 148, 22, 0.2);
	-o-box-shadow: 1px 2px 10px rgba(247, 148, 22, 0.2);
	box-shadow: 1px 2px 10px rgba(247, 148, 22, 0.2);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#F79416, Direction=180, Strength=3);
}
ul.nav {
	width: 100%;
	max-width: 1200px;
	margin: auto;
	*zoom: 1;
}

ul.nav a {
	text-decoration: none;
	padding: 8px 0;
	color: #FFF;
	transition: background 0.4s;
}


ul.nav a:hover, ul.nav a.actif, ul.nav > li.top:hover > .parent { background: #FF9900; }

/*
ul.nav a.sorties:hover, ul.nav a.sorties.actif, ul.nav > li.sorties.top:hover > .parent { background: #FF9900; }
ul.nav a.communaute:hover, ul.nav a.communaute.actif, ul.nav > li.top.communaute:hover > .parent { background: #44A5AC; }
ul.nav a.forums:hover, ul.nav a.forums.actif, ul.nav > li.forums.top:hover > .parent { background: #45A775; }
ul.nav a.asso:hover, ul.nav a.asso.actif, ul.nav > li.asso.top:hover > .parent { background: #E64315 }
*/

ul.nav li {
	width: 22.5%;
	text-align: center;
	border-left: 1px solid #404040;
	/* overflow: hidden; */ /* OVERFLOW HIDDEN + NOWRAP pour l'animate horizontale sur mobile ! */
	/* white-space: nowrap; */
}
ul.nav li:last-child { border-right: 1px solid #404040; }
ul.nav li.home { width: 10%; }
ul.nav li.home span { display: none; }
/* ul.nav li:hover, ul.nav li.actif { background: #404040; } */
/* ul.nav li:hover, ul.nav li.actif { background: #FFF; } */
ul.nav li { display: inline-block; }
ul.nav li a { display: block; }

ul.nav li.fermer { display: none; visibility: hidden; text-align: left; padding-left: 15px; line-height: 55px; cursor: pointer; } /**** BOUTON DE FERMETURE SUR VERSION MOBILE ****/
ul.nav li.fermer:hover { color: #F78703; }


/********************************* SOUS-MENUS ! *********************************/

/* Nouvelle classe invisible pour les sous-menus, dans le cas d'une utilisation tactile : */
ul.invisible {
	display: none;
	visibility: hidden;
	opacity: 0;
}

ul.nav > li > ul.sousmenu {
	position: absolute;
	/* display: none; */
	visibility: hidden;
	opacity: 0;
	margin: 0;
	padding: 0;
	left: 0;
	top: 37px; /* ATTENTION ! Normalement, 40 pixels, mais il en faut 35 pour IE11 (et sans doute aussi pour les précédents). PROBLEME : à partir de IE10 ou 11, MS a décidé de ne plus prendre en compte les commentaires conditionnels (if IE) et je n'ai pas trouvé de hack pour toutes les versions d'IE. Merci qui ???! */
	width: 100%;
	/* background-color: #F5F5F5; */
	background: #FFD695;
/* transition: opacity 0.9s linear; */
	z-index: 9999;
	/* border-bottom: 4px solid #3F99E5; */
	-moz-box-shadow: 0px 3px 2px 0px #333;
	-webkit-box-shadow: 0px 3px 2px 0px #333;
	-o-box-shadow: 0px 3px 2px 0px #333;
	box-shadow: 0px 3px 3px 0px #333;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#333, Direction=180, Strength=2);
}

/*
ul.nav li.rencontres a:hover, ul.nav > li.rencontres.actif a, ul.nav > li.rencontres.top:hover > .parent, ul.nav > li.rencontres > ul.sousmenu { border-color: #B5104A; }
ul.nav li.club a:hover, ul.nav > li.club.actif a, ul.nav > li.club.top:hover > .parent, ul.nav > li.club > ul.sousmenu { border-color: #00A796; }
ul.nav li.day a:hover, ul.nav > li.day.actif a, ul.nav > li.day.top:hover > .parent, ul.nav > li.day > ul.sousmenu { border-color: #7E6AB6; }
*/

ul.nav > li > ul.sousmenu > li.content { width: 100%; max-width: 1200px; padding: 15px 0; margin: auto; }

ul.nav > li > ul.sousmenu > li i { display: inline-block; /*visibility: visible;*/ } /* Les icônes des sous-menus, contrairement aux icônes principales, doivent être visibles ici... */


ul.nav > li:hover > ul.sousmenu {
	/* display: block; */
	visibility: visible;
	opacity: 1;
	transition: all 0.2s ease 0.3s;
}
ul.nav > li > ul.sousmenu > li {
/*
	width: 87%;
	margin: 0 3% 0 10%;
*/
	width: 100%;
	padding-bottom: 5px;
	border: none;
	text-align: left;
}
ul.nav > li > ul.sousmenu > li:hover { background: none; }
/*ul.nav > li > ul.sousmenu > li i { margin-right: 5px; font-size: 0.92em; }
ul.nav > li > ul.sousmenu > li b { display: block; margin: 5px 0; border-bottom: 1px dotted #444; color: #444; }
*/
ul.nav > li > ul.sousmenu > li a {
	padding: 0;
	color: #000;
	border: none;
	font-variant: normal;
}
ul.nav > li > ul.sousmenu > li a:hover { background: none; border: none; color: #BC8900; }
ul.nav > li > ul.sousmenu > li a:after { content: ""; display: block; height: 1px; }

/****/
/**** PERSONNALISATION DES ELEMENTS DE SOUS-MENU ****/
/****/

ul.nav > li > ul.sousmenu > li.content > ul li {
	display: block;
	border: none;
	font-size: 0.9em;
	padding: 3px 0;
	text-align: left;
	width: auto;
}
ul.nav > li > ul.sousmenu > li.content > ul li a span { font-size: 0.85em; font-style: italic; }
ul.nav > li > ul.sousmenu > li.content > ul li i.fa { font-size: 0.9em; margin-right: 8px; }

/*
ul.nav > li > ul.sousmenu > li a.sm-actu, ul.nav > li > ul.sousmenu > li a.sm-temoignages { position: relative; float: left; width: 25%; margin-right: 3%; height: 200px; background-repeat: no-repeat; background-cover: contain; opacity: 1; transition: opacity 0.3s; }
ul.nav > li > ul.sousmenu > li a.sm-actu:hover, ul.nav > li > ul.sousmenu > li a.sm-temoignages:hover { opacity: 0.85; }
ul.nav > li > ul.sousmenu > li a.sm-actu, ul.nav > li > ul.sousmenu > li a.sm-actu:hover { background-image: url(/images/bulle-actu-des-solos.png); }
ul.nav > li > ul.sousmenu > li a.sm-temoignages, ul.nav > li > ul.sousmenu > li a.sm-temoignages:hover { background-image: url(/images/bulle-temoignages.png); }
*/


/* ul.sousmenu li.content ul.base { float: left; display: inline-block; margin: 0 1% 0 0; font-size: 0.95em; width: 15.6%; min-width: 180px; } */
ul.sousmenu li.content ul.base { float: left; display: inline-block; margin: 0 1% 0 0; font-size: 0.95em; width: 31.2%; min-width: 180px; }
ul.sousmenu li.content ul.base li a { display: block; margin: 0; padding: 3px 5px 3px 15px; border-radius: 10px; }
ul.sousmenu li.content ul.base li:first-child a { color: #FFF; text-align: center; padding: 7px; background: #F57F1C; }
ul.sousmenu li.content ul.base li a:hover { background: rgba(255, 153, 0, 0.8); color: #FFF; }
ul.sousmenu li.content ul.base li:first-child { padding: 0; margin-bottom: 10px; font-weight: bold; font-size: 1.15em; font-family: 'Roboto', sans-serif; }

/****************************************/
/****************************************/
/****************************************/


/*************************************/
/**** MENU UTILISATEUR SUR MOBILE ****/
/*************************************/


ul#identifie-menu {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;
		width: 235px;
		height: 100%;

	color: #FFF;
	background: #1C0D00;
	-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#555, Direction=180, Strength=3);
}

ul#identifie-menu li {
		display: block;
		width: 100%;
		text-align: left;
		border: none;
		border-bottom: 1px solid #666;
		white-space: nowrap;
		overflow: hidden;
margin: 0;
}
ul#identifie-menu li a, ul#identifie-menu li.fermer {
	display: block;
	padding: 10px 40px 10px 15px;
	text-decoration: none;

	color: #FFF;
	background: #000;
	transition: background 0.4s;
}
ul#identifie-menu li a:hover { background: #444; }
ul#identifie-menu li a i.fa { margin-right: 7px; }
ul#identifie-menu li a span { /* Nombre de nouveaux messages, de sorties à venir, ... */
	display: inline-block;
	padding: 1px 8px;
	color: #34DE00;
	border: 2px solid #34DE00;
	border-radius: 50%;
	margin-left: 8px;
}


ul#identifie-menu #menu_ident_hide {
	display: block;
	line-height: 35px;
	color: #FFF;
	padding-left: 20px;
	border-bottom: 1px solid #666;
	cursor: pointer;
}
ul#identifie-menu #menu_ident_hide:hover { color: #F78703; }

ul#identifie-menu li.fermer { line-height: 55px; cursor: pointer; } /**** BOUTON DE FERMETURE SUR VERSION MOBILE ****/
ul#identifie-menu li.fermer:hover { color: #F78703; }

/****************************************/
/****************************************/
/****************************************/



/*********************************************************************************************************/
/**************************************** MEDIA QUERIES GENERALES ****************************************/
/*********************************************************************************************************/

@media screen and (max-width: 1250px) {
	header .content, footer .content, main .content { max-width: none; padding: 15px; }
	ul.nav { width: 100%; max-width: none; }
	ul.nav li:first-child { border-left: none; }
	ul.nav li:last-child { border-right: none; }
	ul.nav > li > ul.sousmenu > li.content { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 870px) {
	ul.nav li { font-size: 0.85em; }
}

@media screen and (max-width: 780px) { /****************************** LE MENU VIRE A GAUCHE POUR LES RESOLUTIONS < 800 pixels !!!! ******************************/
	nav {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;
		width: 235px;
		height: 100%;
	}
	ul.nav li, ul.nav li.home {
		display: block;
		width: 100%;
		text-align: left;
		border: none;
		border-bottom: 1px solid #666;
		white-space: nowrap;
		overflow: hidden;
	}
	ul.nav li.home span { display: inline; margin-left: 10px; }
	ul.nav li a { padding: 10px 40px 10px 15px; }
	ul.nav > li > ul.sousmenu { display: none; visibility: hidden; }
	ul.nav li.fermer { display: block; visibility: visible; }

	header .content { display: none; visibility: hidden; }
	header table { display: table; visibility: visible; }
	header table tr td { padding: 8px 5px; text-align: left; background: #000; color: #FFF; }
	header table tr td:nth-child(2), header table td:nth-child(3), header table td:nth-child(4) { width: 60px; text-align: center; }
	/* header table tr td:last-child { padding-right: 20px; text-align: right; } */
	header table tr td i { padding: 10px; border: 2px solid #FFF; border-radius: 5px; cursor: pointer; color: #FFF; transition: all 0.2s; }
	header table tr td:nth-child(4) i { padding: 10px 7px; }
	header table tr td i:hover { border-color: #F78703; background: #F78703; }

	main .content { padding-top: 85px; }
}


/*********************************************************************************************************/
/*********************************************************************************************************/
/*********************************************************************************************************/

/*****************************/
/**** Moteur de recherche ****/
/*****************************/

#moteur_recherche {
	position: relative;
	padding: 0;
	border: 2px solid #FFF;
	margin-bottom: 20px;
}
#moteur_recherche i.fa {
	position: relative;
	display: inline-block;
	float: left;
	color: #000;
	background: #FFF;
	padding: 10px;
	width: 10%;
	/* min-width: 55px; */
	margin: 0;
	text-align: center;
	font-size: 1.5em;
}
#moteur_recherche input {
	position: relative;
	display: inline-block;
	float: left;
	width: 90%;
	padding: 8px 15px;
	background: #AAA;
	border: none;
	margin: 0;
	height: 44px;
	font-size: 1.1em;
	color: #FFF;
}
#moteur_recherche_resultat {
	position: absolute;
	z-index: 9999;
	margin-bottom: 20px;
	width: 97%;
	/* max-width: 1158px; */
	margin: 0;
	border: 2px solid #FFF;
	background: #000;
	padding: 15px;
	display: none;
}

@media screen and (max-width: 780px) {
	#moteur_recherche_resultat { width: 93%; }
}

@media screen and (max-width: 600px) {
	/* #moteur_recherche_resultat { width: 92%; } */
	#moteur_recherche i.fa { width: 20%; }
	#moteur_recherche input { width: 80%; }
}

/****************************************/
/****************************************/
/****************************************/