/* ---------------------------------------------------------------------------------------



		CSS DU PLUGIN
		¯¯¯¯¯¯¯¯¯¯¯¯¯

		MODE VERTICAL


		Ce CSS écrase certaines données du stylesheet général.
		Vous pouvez le changer manuellement.
		
		Android supporte mal les transitions.
		La class "android" règle le problème.
		Android 2.3 supporte mal position: fixed; et overflow: scroll;
		La classe "no-fixed" règle le problème.



--------------------------------------------------------------------------------------- */





/* Styles généraux
--------------------------------------------------------------------------------------- */

	
	/* Si Position: fixed; n'est pas supporté | Donne l'illusion que le menu mobile prend toute la hauteur */	
	.no-fixed body {background: #3B3B3B;}
	
	/* Animation du menu vertical */
	.vAnimationMargin #vPage, 
	.vAnimationMargin #menuMobile {
		-webkit-transition: -webkit-transform 0.5s ease;
		transition: transform 0.5s ease;
		right: 0;
	}


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

	#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,
	#menuMobile a.vRetour:before {font: 400 20px/100% "guifx"; color: #fff; display: inline-block;}
	
	/* Flèche du sous-menu */
	#menuMobile .avecSousMenu > a:before {content: ">";}
	#menuMobile .avecSousMenu.actif > a:before {content: ",";}

	/* Flèche de retour | Type 3 */
	#menuMobile a.vRetour:before,
	.i-vFlecheRetour:before {content: "<"; position: relative; top: 1px; margin-right: 5px;}


/* Menu mobile
--------------------------------------------------------------------------------------- */
	#menuMobile {	
		position: fixed; left: 0; top: 0;
		height: 100%; width: 80%; margin-left: -80%;
		overflow-x: hidden; overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #2c2f32;	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 li {position: relative;}

	#menuMobile a {
		display: block; padding: 16px; position: relative;
		font: bold 15px "Lato", Arial; text-decoration: none; color: #fff;
		border-bottom: 1px solid #212325; border-top: 1px solid #373b3f;   
		background: #2c2f32; outline: none;	 border-left: 0; border-right: 0;
		text-transform: uppercase;	
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent;
	}
	#menuMobile a:hover {/*background: #383838;*/ outline: none;}
	#menuMobile a:active {/*background: #000;*/ outline: none;}
	#menuMobile a.actif { color: #9ec1c8;}

	/* Lien avec flèche */
	#menuMobile .avecSousMenu > a {padding-right: 45px;}
	#menuMobile .avecSousMenu > a:before {
		position: absolute; top: 50%; margin-top: -0.5em; right: 17px;	
	}
	
	/* Sous-menu */	
	/* Premier niveau */
	#menuMobile ul ul {display: none;}
	#menuMobile ul ul a {padding-left: 40px; background: #232528; font-weight: normal;}	
	/* Deuxième niveau */
	#menuMobile ul ul ul a {padding-left: 60px; background: #232528; border-top-color: #313131; border-bottom-color: #141414;}
	

	/* Si Position: fixed; n'est pas supporté */
	.no-fixed #menuMobile {overflow-x: initial; overflow-y: initial; position: absolute;}
	/* 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 */


/* Type 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 {
		display: block; content: "+"; font-family: "Courier"; font-weight: 700; font-size: 30px; 
		position: absolute; top: 50%; margin-top: -16px; left: 50%; margin-left: -9.5px;
	}
	.vMenu-v-2 .actif > .vWrapType2 > a.vAfficherSousMenu span:before {content: "-";}


	/* Menu mobile
	--------------------------------------------------------------------------------------- */
	/* Lien avec + */
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 {position: relative;}
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 > a {margin-right: 50px; padding-right: 0;}
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 > a.vAfficherSousMenu {
		position: absolute; top: 0; right: 0; bottom: 0;
		width: 50px; display: block; margin: 0; padding-left: 0;
		border-left: 1px dashed #616365; text-align: center; vertical-align: middle;
	}
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 > a.vAfficherSousMenu span {position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
	


/* 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 {right:0; left: auto;}
	.android.vMenu-open #vPage {left:80%;}
	.no-fixed.android.vMenu-open #vPage {left:0%;}
	.android.vMenu-droit.vMenu-open #vPage {left:-80%;}
	.no-fixed.android.vMenu-droit.vMenu-open #vPage {left: auto;}


/* Icone hamburger 
--------------------------------------------------------------------------------------- */
	#iconeMenu {
		position: absolute;
		left: 0; top: 0;
		height: 60px; width: 60px;
		padding: 16px 18px;
		margin-right: 2px;
		/*-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;*/
		cursor: pointer; outline: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none; 
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-webkit-tap-highlight-color: transparent;
	}
	.vMenu-droit #iconeMenu {left: auto; right: 0;}
	#iconeMenu:selection {background: transparent;}

	#iconeMenu > span {padding: 7px 0; display: block; position: relative;}

	#iconeMenu > span span:before,
	#iconeMenu > span span:after,
	#iconeMenu > span span {
		height: 3px; width: 100%;
		background-color: #000; content: "";
		border: none; display: block;
		-webkit-transition: transform 0.5s ease;
		transition: transform 0.5s ease;
	}
	
	#iconeMenu > span span:before {position: absolute; top: 0;}
	#iconeMenu > span span:after {position: absolute; bottom: 0;}
	#iconeMenu > span span {}
	
	/* Animation de l'icône */
	.csstransforms.vMenu-open #iconeMenu > span {position: relative; top: -1px;}
	.csstransforms.vMenu-open #iconeMenu > span span:before {
		top: 50%;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.csstransforms.vMenu-open #iconeMenu > span span:after {
		top: 50%; bottom: auto;
		-ms-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.csstransforms.vMenu-open #iconeMenu > span span {background: none;}


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

	/* Tablette portrait
	--------------------------------------------------------------------------------------- */
	@media 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 screen and (min-width: 1000px) {
		/* Menu bureau
		--------------------------------------------------------------------------------------- */
			#menu > ul {display: block;}
			#menuSec > 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;}
	}






/* ---------------------------------------------------------------------------------------



		CSS DU DÉMO
		¯¯¯¯¯¯¯¯¯¯¯

		N'est pas nécessaire au fonctionnement du plugin.
		Par contre, il contient le CSS pour le sticky footer

		Utilisez le CSS du plugin :
		Js/vMenuMobile/jquery.vMenuMobile_v.css



--------------------------------------------------------------------------------------- */




/* Styles généraux
--------------------------------------------------------------------------------------- */
	/* - - - - - Box-model - - - - - */
	*, *:before, *:after {
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	}

	html {}
	body {background: #fff;}

	h1 {font-size: 30px;}
	h2 {margin-bottom: 1em; font-size: 25px;}
	#menuMobile hr {margin: 1em 0; border-top: 1px solid #999;}

	h2.titreMode {margin-bottom: 5px;}
	h3.gifAnime {display: inline-block; margin-right: 20px;}
	h3.gifAnime a {display: inline-block; height: 280px; width: 276px;}
	h3.gifAnime a img {display: block; margin-top: 10px;}

	/* Présentation du code seulement. N'est pas nécessaire au fonctionnement. */
	.divBlocCode {margin: 2em 0; display: none;}
	.divBlocCode h2 {margin-top: 1em;}
	.divBlocCode h2:first-child {margin-top: 0;}


/* Conteneurs
--------------------------------------------------------------------------------------- */
	#entete {/*text-align: center; */}

	.contenu {max-width: 960px; margin: 0 auto; position: relative;}

	/* Si l'entête est fixe */
	/* La classe est seulement utilisée pour le démo et est inutile au plugin. */
	.enteteFixe #entete {position: fixed; top: 0;}
	.enteteFixe main {padding-top: 70px;}

	/* Empêche l'entête de ne pas suivre le menu */
	.vMenu-open.enteteFixe #entete {position: absolute;}

	/* Si l'entête est fixe */
	.enteteFixe #entete {position: fixed; top: 0;}
	.enteteFixe main {padding-top: 70px;}

	/*
		La classe "enteteFixe" est ajouté au HTML en JS pour le Démo
		Vous devrez créer votre propre entête fixe
	*/

	/* Si Position: fixed; n'est pas supporté */
	.no-fixed.enteteFixe #entete {position: relative;}
	.no-fixed.enteteFixe main {padding-top: 0;}

	/*
		La classe "no-fixed" est ajouté au HTML par le plugin.
		Permet de détecter Android 2.3 qui supporte mal position: fixed.
		De cette manière vous pourrez corriger l'entête.
	*/


	

	


/* Menu bureau
--------------------------------------------------------------------------------------- */
	#menuBureau > ul {width: 100%; background: #666; display: none;}
	#menuBureau > ul > li {display: inline-block; position: relative; text-align: left;}
	#menuBureau > ul > li > a {}
	#menuBureau > ul > li > ul {position: absolute; left: 0; top: 100%; width: 100%; background: #999; display: none;}
	#menuBureau > ul > li > ul > li {position: relative;}
	#menuBureau > ul > li > ul > li > a {}
	#menuBureau > ul > li > ul > li > ul {position: absolute; left: 100%; top: 0; min-width: 100px; background: #ccc; display: none;}
	#menuBureau > ul > li > ul > li > ul > li {}
	#menuBureau > ul > li > ul > li > ul > li > a {}

	#menuBureau > ul > li:hover > ul {display: block;}
	#menuBureau > ul > li:hover > ul > li:hover > ul {display: block;}

	#menuBureau a {display: block; padding: 10px; font-size: 12px; color: #fff; text-decoration: none; position: relative;}
	#menuBureau a:hover {text-decoration: underline;}


	/* Flèche du sous-menu bureau */
	#menuBureau .avecSousMenu > a {padding-right: 25px;}
	#menuBureau .avecSousMenu > a:before {
		content: ","; font: 400 20px/12px "guifx";
		position: absolute; top: 50%; margin-top: -6px; right: 3px; color: #fff;
	}




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

	/* Code pour le Sticky footer */
	/*	.wrapContenu {	min-height: 100%;	height: auto !important;	height: 100%;margin: 0 auto -78px;		}
		footer, .push {height: 78px;}*/

	@media screen and (min-width: 480px) {
		/* Code pour le Sticky footer */
		/*.wrapContenu {margin: 0 auto -64px;	}
		footer, .push {height: 64px;}*/
	}

	/* Tablette portrait
	--------------------------------------------------------------------------------------- */
	@media screen and (min-width: 768px) {
		#iconeMenu {padding: 40px 18px;}
	}

	/* Tablette paysage et desktop
	--------------------------------------------------------------------------------------- */
	@media screen and (min-width: 1000px) {

		#menu ul ul .avecSousMenu > a {position: relative; display: inline-block; width: 100%;}
		#menu ul ul .avecSousMenu > a:after {
			content: ">"; font-family: "guifx"; position: absolute; top: 1px; right: -2px; color: #777; font-weight: 400;
		}

		/* Styles generaux
		--------------------------------------------------------------------------------------- */
			/* Présentation du code seulement. N'est pas nécessaire au fonctionnement. */
			.divBlocCode {display: block;}

		/* Conteneurs
		--------------------------------------------------------------------------------------- */
			.enteteFixe main {padding-top: 110px;}

			/* Si Position: fixed; n'est pas supporté */
			.no-fixed.enteteFixe main {padding-top: 0;}
	}