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



		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
--------------------------------------------------------------------------------------- */
	/* Animation du menu vertical */
	.vAnimationMargin #vPage,
	.vAnimationMargin #menuMobile {
		-webkit-transition: -webkit-transform 0.5s ease;
		transition: transform 0.5s ease;
		right: 0;
	}


/* Conteneurs
--------------------------------------------------------------------------------------- */
	#vPage {position: relative; height: 100%; width: 100%; left:0; margin-left: 0;}
	.no-fixed #vPage {height: auto; background: #fff;}


	/* Overlay sur le site */
	.vMenuFiltre #vPage:before {
		content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
		margin-right: 100%;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBoAAAAhQCBuMOYEwAAAABJRU5ErkJggg==);
		background: rgba(0,0,0,0.5);
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.vMenuFiltre.vMenu-open #vPage:before {margin-right: 0;}

	.vMenuFiltre.vMenu-droit #vPage:before {margin-right: 0; margin-left: 100%;}
	.vMenuFiltre.vMenu-droit.vMenu-open #vPage:before {margin-left: 0;}


/* Icônes
--------------------------------------------------------------------------------------- */
	#menuMobile li.avecSousMenu > a:before,
	#menuMobile li a.vRetour:before {font-family: "ubald"; display: inline-block;}

	/* Flèche du sous-menu */
	#menuMobile li.avecSousMenu > a:before {content: "\e903";}
	#menuMobile li.avecSousMenu.actif > a:before {content: "\e902";}


/* Menu mobile
--------------------------------------------------------------------------------------- */
	#menuMobile {
		position: fixed; left: 0; top: 100px; bottom: 0;
		width: 80%; margin-left: -80%;
		overflow-x: hidden; overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* 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);

		background: #fff; border-left: 1px solid #002b5c;
	}
	#menuMobile > ul {padding-bottom: 40px;}

	/* Ouverture à droite */
	.vMenu-droit #menuMobile {margin-left: auto; margin-right: -80%; left: auto; right: 0;}

	#menuMobile li {position: relative;}
	#menuMobile li a {
		display: block; padding: 14px; position: relative;
		font-size: 1em; font-weight: 700; line-height: 1.25em; text-decoration: none; outline: none;
		font-family: "PT Serif";
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent;

		color: #002b5c;
		border-bottom: 1px solid #002b5c;
	}
	/*#menuMobile li a:hover  {outline: none;}*/
	#menuMobile li a:active {background: #002b5c; color: #fff; outline: none;}
	#menuMobile li a.actif  {background: #002b5c; color: #fff; outline: none;}

	/* Lien avec flèche */
	#menuMobile li.avecSousMenu > a {padding-right: 45px;}
	#menuMobile li.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; font-weight: 400;}
	/* Deuxième niveau */
	#menuMobile ul ul ul a {padding-left: 60px;}


	/* 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%;}


/* 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;
		right: 20px; top: 0;
		height: 50px; width: 50px;
		padding: 15px 13px;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		cursor: pointer; outline: none;
		background: #fff;
		-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;
	}
	#iconeMenu:selection {background: transparent;}

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

	#iconeMenu > span span:before,
	#iconeMenu > span span:after,
	#iconeMenu > span span {
		height: 3px; width: 100%;
		background-color: #002b5c; 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 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 {right:0; left: auto;}
			.android.vMenu-open #vPage {left:50%;}
			.no-fixed.android.vMenu-open #vPage {left:0%;}
			.android.vMenu-droit.vMenu-open #vPage {left:-50%;}
			.no-fixed.android.vMenu-droit.vMenu-open #vPage {left: auto;}

	}

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

		/* Conteneurs
		--------------------------------------------------------------------------------------- */
			/* Overlay sur le site */
			.vMenuFiltre #vPage:before {display: none;}


		/* Menu bureau
		--------------------------------------------------------------------------------------- */
			#menuBureau > ul {display: block;}


		/* Menu mobile
		--------------------------------------------------------------------------------------- */
			/* Effet hover seulement sur bureau pour éviter des problèmes sur mobile | Utiliser seulement si nécessaire */
			/*#menuMobile li a:hover  {background: #383838; outline: none;}*/


		/* 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;}
	}