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



		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.



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




/* Polices locales via font-face
--------------------------------------------------------------------------------------- */
	/* Utilisé pour les icônes */
	@font-face {
		font-family: 'guifx';
		src: url('font/guifx_v2_transports-webfont.eot');
		src: url('font/guifx_v2_transports-webfont.eot?#iefix') format('embedded-opentype'),
			 url('font/guifx_v2_transports-webfont.woff2') format('woff2'),
			 url('font/guifx_v2_transports-webfont.woff') format('woff'),
			 url('font/guifx_v2_transports-webfont.ttf') format('truetype'),
			 url('font/guifx_v2_transports-webfont.svg#guifx_v2_transportsregular') format('svg');
		font-weight: normal;
		font-style: normal;
	}


/* Styles généraux
--------------------------------------------------------------------------------------- */
	/* Animation du menu vertical */
	.vAnimationMargin .menuMobile_nav {
		-webkit-transition: -webkit-transform 0.5s ease;
		transition: transform 0.5s ease;
	}


/* Conteneurs
--------------------------------------------------------------------------------------- */
	/* Overlay sur le site */
	.vMenuFiltre body:before {
		content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBoAAAAhQCBuMOYEwAAAABJRU5ErkJggg==);
		background: rgba(0,0,0,0.5);
		opacity: 0; visibility: hidden;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.vMenuFiltre.vMenu-open body:before {opacity: 1; visibility: visible;}


	@media only screen and (min-width: 1200px) {
		.vMenuFiltre body:before {display: none;}
	}


/* Icônes
--------------------------------------------------------------------------------------- */
	.menuMobile_nav li.avecSousMenu > a:after,
	.menuMobile_nav li a.vRetour:before {font: 400 22px/100% "guifx"; color: #00AAD1; display: inline-block;}

	/* Flèche du sous-menu */
	.menuMobile_nav li.avecSousMenu > a:after {content: ">"; position:relative; top:3px; margin:0 0 0 17px;}
	.menuMobile_nav li.avecSousMenu.actif > a:after {content: ",";}

	.vMenu-v-3 .menuMobile_nav li.avecSousMenu.actif > a:after {content: ">";}

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


/* Menu mobile
--------------------------------------------------------------------------------------- */
	.menuMobile_nav {
		position: fixed; left: 0; top: 0; bottom: 0; z-index: 110;

		/* Padding ajouté pour y ajouter le bouton de fermeture */
		padding-top: 80px;

		width: 100%; margin-left: -100%;
		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);
	}
	/* Ouverture à droite */
	.vMenu-droit .menuMobile_nav {margin-left: auto; margin-right: -100%; left: auto; right: 0;}

	.menuMobile_nav li {position: relative;}
	.menuMobile_nav li a {
		display: block; padding: 14px; position: relative; color:#fff !important; 
		font:700 1.571em/1.318em 'lato';/*22-29/14*/ line-height: 1.25em; text-decoration: none; outline: none;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent;

		background: #336498; color: #fff;
		border-bottom: 1px solid rgba(255,255,255,.1);
		/*border-top: 1px solid #484848;*/
	}
	.menuMobile_nav li a:hover  {background: #0089C2; outline: none;}
	.menuMobile_nav li a:active {background: #0089C2; outline: none;}
	.menuMobile_nav li a.actif  {background: #0089C2; outline: none;}

	/* Lien avec flèche */
	.menuMobile_nav li.avecSousMenu > a {padding-right: 45px;}
	.menuMobile_nav li.avecSousMenu > a:before {position: absolute; top: 50%; margin-top: -0.5em; right: 17px;}

	/* Sous-menu */
	/* Premier niveau */
	.menuMobile_nav ul ul {display: none;}
	.menuMobile_nav ul ul a {padding-left: 40px; background: #2d2d2d;}
	/* Deuxième niveau */
	.menuMobile_nav ul ul ul a {padding-left: 60px; background: #1e1e1e; border-top-color: #313131; border-bottom-color: #141414;}


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


	@media only screen and (min-width: 768px) {
		.menuMobile_nav {width: 100%; margin-left: -100%;}
		.vMenu-droit .menuMobile_nav {margin-right: -100%;}

		/* Si CSS3 est supporté */
		.csstransforms3d .menuMobile_nav {width: 100%; margin-left: 0; left: -100%;}
		.csstransforms3d.vMenu-droit .menuMobile_nav {margin-left: auto; margin-right: 0; left: auto; right: -100%;}
	}
	@media only screen and (min-width: 1023px) {
		/* Effet hover seulement sur bureau pour éviter des problèmes sur mobile | Utiliser seulement si nécessaire */
		/*.menuMobile_nav li a:hover  {background: #383838; outline: none;}*/
	}


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

	/* Icône du + */
	.vMenu-v-2 .menuMobile_nav li .vWrapType2 a.vAfficherSousMenu span:before {
		display: block; content: "+"; font-family: "Courier"; font-weight: 700; font-size: 30px;
		position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -9.5px;
	}
	.vMenu-v-2 .menuMobile_nav li.actif > .vWrapType2 > a.vAfficherSousMenu span:before {content: "-";}


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

		border-left: 1px dashed #777;
	}
	.vMenu-v-2 .menuMobile_nav li.avecSousMenu > .vWrapType2 > a.vAfficherSousMenu span {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;

		border-left: 1px dashed #484848;
	}


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

	.vMenu-v-3 .menuMobile_nav .btnMenuMobile {z-index: 5;}

	/* Premier niveau */
	.vMenu-v-3 .menuMobile_nav ul {
		position: absolute; top: 54px; left: 0; bottom: 0; width: 100%; display: block;
		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%;

		/* Padding ajouté pour y ajouter le bouton de fermeture */
		/*padding-top: 55px;*/

		background: #336498;
	}

	@media only screen and (min-width: 768px) {
		.vMenu-v-3 .menuMobile_nav ul {top:80px;}
	}

	@media only screen and (min-width: 1024px) {
		.vMenu-v-3 .menuMobile_nav ul {top:0;}
	}

	.vMenu-v-3 .menuMobile_nav ul a span.i-vFlecheRetour {margin-right: 10px;}

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

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

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

	/* Si Position: fixed; n'est pas supporté */
	.vMenu-v-3.no-fixed .menuMobile_nav ul {bottom: auto;}


	/* Sous-menu */
	/* Premier niveau */
	.vMenu-v-3 .menuMobile_nav ul.niv1 {background: #801212;}
	.vMenu-v-3 .menuMobile_nav ul.niv1 a {background: #801212; border-bottom: 1px solid rgba(255,255,255,.1);}
	.vMenu-v-3 .menuMobile_nav ul.niv1 a:hover {background: #0089C2;}
	.vMenu-v-3 .menuMobile_nav ul.niv1 a:active {background: #0089C2;}

	/* Deuxième niveau */
	.vMenu-v-3 .menuMobile_nav ul.niv2 {background: #6e1010;}
	.vMenu-v-3 .menuMobile_nav ul.niv2 a {padding-left: 20px; background: #6e1010; border-bottom: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1);}
	.vMenu-v-3 .menuMobile_nav ul.niv2 a:hover {background: #0089C2; outline: none;}
	.vMenu-v-3 .menuMobile_nav ul.niv2 a:active {background: #0089C2; outline: none;}

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


/* Ouverture du menu
--------------------------------------------------------------------------------------- */
	.vMenu-open body {overflow: hidden; position: absolute;}
	.no-fixed.vMenu-open body {overflow: inherit;}

	/* Menu */
	.vMenu-open .menuMobile_nav {margin-left: 0;}
	.vMenu-droit.vMenu-open .menuMobile_nav {margin-left: auto; margin-right: 0;}

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

	/* Android hack */
	.android.vMenu-open .menuMobile_nav, .android.vMenu-droit.vMenu-open .menuMobile_nav {
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	.android.vMenu-open .menuMobile_nav {left:0;}
	.android.vMenu-droit.vMenu-open .menuMobile_nav {right:0; left: auto;}


	@media only screen and (min-width: 768px) {
		/* Android hack */
		.android.vMenu-open .menuMobile_nav, .android.vMenu-droit.vMenu-open .menuMobile_nav {
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}
		.android.vMenu-open .menuMobile_nav {left:0;}
		.android.vMenu-droit.vMenu-open .menuMobile_nav {right:0; left: auto;}
	}
	@media only screen and (min-width: 1200px) {
		.vMenu-open body {overflow: inherit; position: relative;}

		/* Menu */
		.vMenu-open .menuMobile_nav {display: none;}
		.vMenu-open.vMenu-droit .menuMobile_nav {display: none;}
	}


/* Icone hamburger
--------------------------------------------------------------------------------------- */
	.btnMenuMobile {
		display: block;
		height: 55px; width: 55px;
		padding: 15px 13px;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		cursor: pointer; outline: none;
		background: #336498;
		-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;
	}
	.btnMenuMobile:selection {background: transparent;}

	.btnMenuMobile > span {padding: 8px 0; display: block; position: relative;}

	.btnMenuMobile > span span:before,
	.btnMenuMobile > span span:after,
	.btnMenuMobile > span span {
		height: 3px; width: 100%;
		background-color: #fff; content: "";
		border: none; display: block;
		-webkit-transition: transform 0.5s ease;
		transition: transform 0.5s ease;
	}

	.btnMenuMobile > span span:before {position: absolute; top: 0;}
	.btnMenuMobile > span span:after {position: absolute; bottom: 0;}
	.btnMenuMobile > span span {}

	/* Animation de l'icône */
	.csstransforms.vMenu-open .btnMenuMobile > span,
	.csstransforms .btnMenuMobile.ferme > span {position: relative; top: -1px;}
	.csstransforms.vMenu-open .btnMenuMobile > span span:before,
	.csstransforms .btnMenuMobile.ferme > span span:before {
		top: 50%; background-color: #fff;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.csstransforms.vMenu-open .btnMenuMobile > span span:after,
	.csstransforms .btnMenuMobile.ferme > span span:after {
		top: 50%; bottom: auto; background-color: #fff;
		-ms-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.csstransforms.vMenu-open .btnMenuMobile > span span,
	.csstransforms .btnMenuMobile.ferme > span span {background: none;}


	/* Dispositions */
	.entete .btnMenuMobile {position: absolute; right: 0; top: -1px;}
	.vMenu-droit .entete .btnMenuMobile {left: auto; right:0;}
	.menuMobile_nav .btnMenuMobile {position: absolute; left: 0; top: 0;}
	.vMenu-droit .menuMobile_nav .btnMenuMobile {left: auto; right: 0;}


	@media only screen and (min-width: 767px) {
		.btnMenuMobile {height:80px; width: 80px; padding: 31px 26px;}
		.menuMobile_nav li a.vRetour {line-height:52px;}
	}

	@media only screen and (min-width: 1023px) {
		.btnMenuMobile {height:97px; width: 97px; padding: 31px 26px;}
		.menuMobile_nav li a.vRetour {line-height:69px;}
	}

	@media only screen and (min-width: 1200px) {
		.entete .btnMenuMobile {display: none;}
	}