/* Styles généraux
--------------------------------------------------------------------------------------- */
	html, body {width: 100%; height: 100%;}
	body { overflow-x: hidden; }
	
	/* Fixe android 4.2 */
	.android4-2 body {position: relative; border: 1px solid transparent;}
	
	/* Si Position: fixed; n'est pas supporté | Donne l'illusion que le menu mobile prend toute la hauteur */	
	.no-fixed body {background: #fff;}
	
	/* Animation du menu vertical */
	.vAnimationMargin #vPage, 
	.vAnimationMargin #menuMobile {
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}


/* Conteneurs
--------------------------------------------------------------------------------------- */
	#entete {position: relative; left: 0; width: 100%; }

	#vPage { position: relative; height: 100%; left:0; margin-left: 0; width: 100%;
		/* Règle un problème sur iPhone */
		/* http://webdesign.tutsplus.com/tutorials/css3-animations-the-hiccups-and-bugs-youll-want-to-avoid--webdesign-4867 */
		-webkit-transform: translateZ(0);
	}
	.no-fixed #vPage {height: auto;}
	#vPage main {z-index: 1;}


/* Icônes
--------------------------------------------------------------------------------------- */
	#menuMobile .avecSousMenu > a:before,
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 > a.vAfficherSousMenu,
	#menuMobile a.vRetour:before {font: 400 22px/100% "icons"; /*color: #000;*/ display: inline-block;}
	
	/* Flèche du sous-menu */
	#menuMobile .avecSousMenu > a:before, 
	#menuMobile .avecSousMenu.couleurCat1 > a:before, 
	#menuMobile .avecSousMenu.couleurCat2 > a:before {content: ""; /*\25BE*/}
	#menuMobile .avecSousMenu.actif > a:before {content: "\25BE"; /*\25BE*/ line-height: 12px;}

	#menuMobile .avecSousMenu > a:before {background: url(../gx/m/sprite-flecheMenu.png) -30px 0 no-repeat;}
	#menuMobile .avecSousMenu.couleurCat1 > a:before {background: url(../gx/m/sprite-flecheMenu.png) 0 0 no-repeat;}
	#menuMobile .avecSousMenu.couleurCat2 > a:before {background: url(../gx/m/sprite-flecheMenu.png) -15px 0 no-repeat;}

	/* Flèche de retour | Type 3 */
	#menuMobile a.vRetour:before,
	.i-vFlecheRetour:before {content: "\e801"; position: relative; top: 4px;}


/* Menu mobile
--------------------------------------------------------------------------------------- */
	#menuMobile {	
		display:none; /* Empeche le menu de flasher quand on load la page, avant que le JS embarque */
		background: #3d3d3d;
		color: #000;
		position: fixed; left: 0; top: 0;
		height: 100%;
		width: 80%;
		margin-left: -80%;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		outline: 0;
		/* Règle un problème sur iPhone */
		/* http://webdesign.tutsplus.com/tutorials/css3-animations-the-hiccups-and-bugs-youll-want-to-avoid--webdesign-4867 */
		-webkit-transform: translateZ(0);
	}
	/* Ouverture à droite */
	.vMenu-droit #menuMobile {margin-left: auto; margin-right: -80%; left: auto; right: 0;}

	#menuMobile > ul{ margin-bottom: 24px; }

	#menuMobile li {position: relative; border-bottom: 1px solid #2e2e2e; border-top: 1px solid #4c4c4c; }
	#menuMobile li:first-child {border-top-color: #3d3d3d;}

	#menuMobile a {
		display: block; padding:14px; position: relative;
		/*font: 1.000em/1.250em Arial;*/ text-decoration: none; /*color: #000;*/
		outline: none;
	}
	#menuMobile a:hover,
	#menuMobile a:focus {color: #dcddde; outline: none;}
	#menuMobile a:active {background: #fff; color: #333; outline: none;}

	/* Lien avec flèche */
	#menuMobile .avecSousMenu > a {padding-right: 45px;}
	#menuMobile .avecSousMenu > a:before {
		display: block; /*width: 45px; height: 100%;*/width:8px; height:7px; 
		position: absolute; top: 22px; right: 18px; text-align: center; padding-top: 17px;
	}		

	/* - - - Sous-menu - - - */
	/* Premier niveau */
	#menuMobile ul ul {display: none;}
	#menuMobile ul ul a {padding-left: 40px; background: #e8e8e8;}	
	/* Deuxième niveau */
	#menuMobile ul ul ul a {padding-left: 60px; background: #ddd; }
	

	/* Si Position: fixed; n'est pas supporté */
	.no-fixed #menuMobile {overflow-x: initial; overflow-y: initial; position: absolute; height: auto;}
	/* Si CSS3 est supporté */
	.csstransforms3d #menuMobile {margin-left: 0; left: -80%;}
	/* Ouverture à droite */
	.csstransforms3d.vMenu-droit #menuMobile {margin-left: auto; margin-right: 0; left: auto; right: -80%;}

	
	/* Certaines de ces règles sont écrasées par les règles ci-dessous */

/* Menu Secondaire
--------------------------------------------------------------------------------------- */
	/*#menuMobile .gap{ margin-top:12px; }
	#menuMobile .mSec a{ line-height:20px; border:0; }
	#menuMobile .mSec a, .vMenu-v-2 #menuMobile .mSec  a > span.vTexte{ padding:5px 14px; }*/


/* Type 2
--------------------------------------------------------------------------------------- */

	.vMenu-v-2 {}

	/* Flèche du sous-menu */
	.vMenu-v-2 #menuMobile .avecSousMenu a:before {display: none;}

	/* Icône du + */
	
	.vMenu-v-2 a.vAfficherSousMenu span:before {content: "\e800"; font-family: "icons"; font-weight: 400; font-size: 20px; line-height: 24px;}
	.vMenu-v-2 .actif > .vWrapType2 > a.vAfficherSousMenu span:before {content: "\e803"; line-height: 24px;}


	/* Menu mobile
	--------------------------------------------------------------------------------------- */

	/* On doit retirer le CSS du <a> et l'ajouter sur le <span class="texte"> et le <span class="vFlecheSousMenu"> */

	.vMenu-v-2 #menuMobile a { background: none;}

	.vMenu-v-2 #menuMobile a:hover,
	.vMenu-v-2 #menuMobile a:focus,
	.vMenu-v-2 #menuMobile a:active {background: none;}

	.vMenu-v-2 #menuMobile a > span:hover,
	.vMenu-v-2 #menuMobile a > span:focus {color: #C91C1B; outline: none;}
	.vMenu-v-2 #menuMobile a > span:active {background: #fff; color: #C91C1B; outline: none;}


	/* Lien avec flèche */
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 {position: relative;}
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 > a {margin-right: 45px; padding-right: 0;}
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 > a.vAfficherSousMenu {
		position: absolute; top: 0; right: 0; bottom: 0;
		width: 45px; display: block; margin: 0; padding-left: 0;
		border-left: 1px solid #d1d1d1; text-align: center; vertical-align: middle;
	}

	/* - - - Sous-menu - - - */
	/* Premier niveau */
	.vMenu-v-2 #menuMobile ul ul a {background: #e8e8e8;}

	/* Deuxième niveau */
	.vMenu-v-2 #menuMobile ul ul ul a {background: #ddd;}


/* Type 3
--------------------------------------------------------------------------------------- */

	.vMenu-v-3 {}

	/* Menu mobile
	--------------------------------------------------------------------------------------- */
	.vMenu-v-3 #menuMobile {overflow-x: hidden; overflow-y: initial; height: 100%;}

	/* Premier niveau */
	.vMenu-v-3 #menuMobile ul {
		position: absolute; top: 0; left: 0; bottom: 0;
		width: 100%; display: block;
		background: #3d3d3d; margin-left: 0;
		
		overflow-x: hidden; overflow-y: auto;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
		-webkit-overflow-scrolling: touch;
		z-index: 1;
		margin-left: 100%;
	}

	.vMenu-v-3 #menuMobile ul .vRetour:before {margin-right: 6px;}

	/* Place le menu principal au dessus */
	.vMenu-v-3 #menuMobile ul:first-child {z-index: 2; margin-left: 0;}

	/* Cache le menu précédent */
	.vMenu-v-3 #menuMobile ul.menuPrec,
	.vMenu-v-3 #menuMobile ul.menuPrec.actif {margin-left: -100%; z-index: 1;}

	/* Affiche le menu choisi */
	.vMenu-v-3 #menuMobile ul.actif {z-index: 2; margin-left: 0;}


	/* Sous-menu */	
	/* Premier niveau */
	.vMenu-v-3 #menuMobile ul.niv1 {background: #3d3d3d;}
	.vMenu-v-3 #menuMobile ul.niv1 a {background: #3d3d3d;}
	.vMenu-v-3 #menuMobile ul.niv1 a:hover,
	.vMenu-v-3 #menuMobile ul.niv1 a:focus {background: #4c4c4c; outline: none;}
	.vMenu-v-3 #menuMobile ul.niv1 a:active {color:#333; background: #fff; outline: none;}

	/* Deuxième niveau */
	.vMenu-v-3 #menuMobile ul.niv2 {background: #ddd;}
	.vMenu-v-3 #menuMobile ul.niv2 a {padding-left: 20px; background: #ddd;/* border-top-color: #313131; border-bottom-color: #141414;*/}
	.vMenu-v-3 #menuMobile ul.niv2 a:hover,
	.vMenu-v-3 #menuMobile ul.niv2 a:focus {background: #f3f3f3; outline: none;}
	.vMenu-v-3 #menuMobile ul.niv2 a:active {background: #fff; outline: none;}

	/* Si CSS3 est supporté */
	.vMenu-v-3.csstransforms3d #menuMobile ul.menuPrec {
		margin-left: 0;
		-webkit-transform: translate3d(-100%,0,0);
		-ms-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0);
	}
	/* Android hack */
	.android.vMenu-v-3 #menuMobile ul.menuPrec{
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		left:-100%;
	}


/* Ouverture du menu
--------------------------------------------------------------------------------------- */
	/* Menu */	
	.vMenu-open #menuMobile {margin-left: 0;}
	.vMenu-droit.vMenu-open #menuMobile {margin-left: auto; margin-right: 0;}

	/* Page */
	.vMenu-open #vPage {margin-left: 80%; overflow: hidden; position: fixed;}
	.vMenu-droit.vMenu-open #vPage {margin-left: -80%;}

	/* Si Position: fixed; n'est pas supporté */
	.no-fixed.vMenu-open #vPage {position: relative; overflow: inherit;}

	/* Si CSS3 est supporté */
	.csstransforms3d.vMenu-open #menuMobile {
		-webkit-transform: translate3d(100%,0,0);
		-ms-transform: translate3d(100%,0,0);
		transform: translate3d(100%,0,0);
	}
	.csstransforms3d.vMenu-droit.vMenu-open #menuMobile {
		-webkit-transform: translate3d(-100%,0,0);
		-ms-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0);
	}
	.csstransforms3d.vMenu-open #vPage {
		margin-left: 0;
		-webkit-transform: translate3d(80%,0,0);
		-ms-transform: translate3d(80%,0,0);
		transform: translate3d(80%,0,0);
	}
	.csstransforms3d.vMenu-droit.vMenu-open #vPage {
		margin-right: 0;
		-webkit-transform: translate3d(-80%,0,0);
		-ms-transform: translate3d(-80%,0,0);
		transform: translate3d(-80%,0,0);
	}

	/* Android hack */
	.android.vMenu-open #menuMobile, .android.vMenu-droit.vMenu-open #menuMobile,
	.android.vMenu-open #vPage, .android.vMenu-droit.vMenu-open #vPage{
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	.android.vMenu-open #menuMobile { left:0; }
	.android.vMenu-droit.vMenu-open #menuMobile { left:0; }
	.android.vMenu-open #vPage { left:80%; }
	.no-fixed.android.vMenu-open #vPage { left:0%; }
	.android.vMenu-droit.vMenu-open #vPage { left:-80%;	}


/* ==================================================================================== */
/*  Media Queries for Responsive Design  */
/* ==================================================================================== */

	/* Tablette portrait
	--------------------------------------------------------------------------------------- */
	@media only screen and (min-width: 768px) {
		/* Menu mobile
		--------------------------------------------------------------------------------------- */
			#menuMobile {width: 50%; margin-left: -50%;}	
			.vMenu-droit #menuMobile {margin-right: -50%;}

			/* Si CSS3 est supporté */
			.csstransforms3d #menuMobile {width: 50%; margin-left: 0; left: -50%;}
			.csstransforms3d.vMenu-droit #menuMobile {margin-left: auto; margin-right: 0; left: auto; right: -50%;}


		/* Ouverture du menu
		--------------------------------------------------------------------------------------- */
			/* Page */
			.vMenu-open #vPage {margin-left: 50%;}
			.vMenu-droit.vMenu-open #vPage {margin-left: -50%;}

			/* Si CSS3 est supporté */
			.csstransforms3d.vMenu-open #vPage {
				margin-left: 0;
				-webkit-transform: translate3d(50%,0,0);
				-ms-transform: translate3d(50%,0,0);
				transform: translate3d(50%,0,0);
			}
			.csstransforms3d.vMenu-droit.vMenu-open #vPage {
				margin-left: 0;
				-webkit-transform: translate3d(-50%,0,0);
				-ms-transform: translate3d(-50%,0,0);
				transform: translate3d(-50%,0,0);
			}

			/* Android hack */
			.android.vMenu-open #menuMobile, .android.vMenu-droit.vMenu-open #menuMobile,
			.android.vMenu-open #vPage, .android.vMenu-droit.vMenu-open #vPage {
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}
			.android.vMenu-open #menuMobile {left:0;}
			.android.vMenu-droit.vMenu-open #menuMobile {left:0;}
			.android.vMenu-open #vPage {left:50%;}
			.no-fixed.android.vMenu-open #vPage {left:0%;}
			.android.vMenu-droit.vMenu-open #vPage {left:-50%;}
	}

	/* Tablette paysage et desktop
	--------------------------------------------------------------------------------------- */
	@media only screen and (min-width: 960px) {
		/* Menu bureau
		--------------------------------------------------------------------------------------- */
			#menuBureau > ul {display: block;}


		/* Ouverture du menu
		--------------------------------------------------------------------------------------- */
			/* Menu */	
			.vMenu-open #menuMobile {display: none;}
			.vMenu-open.vMenu-droit #menuMobile {display: none;}

			/* Page */
			.vMenu-open #vPage {margin-left: 0; overflow: inherit; position: relative;}
			.vMenu-droit.vMenu-open #vPage {margin-left: 0;	}

			/* Si CSS3 est supporté */
			.csstransforms3d.vMenu-open #vPage,
			.csstransforms3d.vMenu-droit.vMenu-open #vPage {
				-webkit-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
			}


		/* Icone hamburger 
		--------------------------------------------------------------------------------------- */
			#iconeMenu {display: none;}
	}