/* CSS Global du menu mobile */
/* Ce CSS écrase certaines données du stylesheet global | Vous pouvez le changer manuellement */


/* ---------------------------------------------------------------------------------------
	Menu vertical
--------------------------------------------------------------------------------------- */


/* 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
--------------------------------------------------------------------------------------- */
	html, body {width: 100%; height: 100%;}
	body {overflow-x: hidden;}

	/* 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 .wrapperConteneur,
	.vAnimationMargin #menuMobile {
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}


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

	.wrapperConteneur {height: 100%; left:0; margin-left: 0; /*background: #fff;*/ width: 100%;}
	.wrapperConteneur main {z-index: 1;margin-top:30px;}

/* Icônes
--------------------------------------------------------------------------------------- */
	.iconeMenuMobile {font: 400 20px/100% "guifx"; color: #fff; display: inline-block;}

	/* Flèche du sous-menu */
	.i-vFlecheSousMenu:before {content: ">";}
	.actif > a .i-vFlecheSousMenu:before {content: ","; line-height: 12px;}

	/* Flèche de retour | Type 3 */
	.i-vFlecheRetour:before {content: "<"; position: relative; top: 1px;}

	/* Flèche du sous-menu bureau */
	#menuBureau .i-vFlecheSousMenu:before {content: ","; font: 400 20px/12px "guifx";}


/* 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: #015a9c;	outline: 0;
	}
	/* Ouverture à droite */
	.vMenu-droit #menuMobile {margin-left: auto; margin-right: -80%; left: auto; right: 0;}


	#menuMobile li:last-child {border-bottom: 1px solid #0171b5;}
	#menuMobile a {
		display: block; padding: 15px 16px; position: relative;
		font: 1.214em/1.250em Arial;/* 17/14 */ text-decoration: none; color: #fff;
		border-bottom: 1px solid #014383; border-top: 1px solid #0171b5;
		background: #015a9c; outline: none;
	}
	#menuMobile a:hover,
	#menuMobile a:focus {background: #004277; outline: none;}
	#menuMobile a:active {background: #000; outline: none;}

	/* Lien avec flèche */
	#menuMobile .avecSousMenu > a {padding-right: 45px;}
	#menuMobile .avecSousMenu > a span.vFlecheSousMenu {
		display: block; width: 45px; height: 100%;
		position: absolute; top: 0; right: 0; text-align: center;
	}
	#menuMobile .avecSousMenu > a span.vFlecheSousMenu span {
		position: absolute; top: 50%; margin-top: -0.5em; width: 100%; left: 0;
	}

	/* Sous-menu */
	/* Premier niveau */
	#menuMobile ul ul {display: none;}
	#menuMobile ul ul a {padding-left: 40px; background: #2d2d2d;}
	/* Deuxième niveau */
	#menuMobile 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 {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
--------------------------------------------------------------------------------------- */

	.vMenu-v-2 {}

	/* Flèche du sous-menu */
	.vMenu-v-2 .i-vFlecheSousMenu:before {content: "+"; font-family: "Courier"; font-weight: 700; font-size: 30px; line-height: 24px;}
	.vMenu-v-2 .actif > a .i-vFlecheSousMenu:before {content: "-"; 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 {padding: 0; background: none;}
	.vMenu-v-2 #menuMobile a > span {background: #3e3e3e;}
	.vMenu-v-2 #menuMobile a > span.vTexte {display: block; padding: 14px; padding-right: 40px;}

	.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 {background: #383838; outline: none;}
	.vMenu-v-2 #menuMobile a > span:active {background: #000; outline: none;}


	/* Lien avec flèche */
	.vMenu-v-2 #menuMobile .avecSousMenu > a {padding-right: 40px;}
	.vMenu-v-2 #menuMobile .avecSousMenu > a span.vTexte {padding-right: 0;}
	.vMenu-v-2 #menuMobile .avecSousMenu > a span.vFlecheSousMenu:before {
		position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; display: block;
		border-left: 1px dashed #484848;
	}
	.vMenu-v-2 #menuMobile .avecSousMenu > a span.vFlecheSousMenu {border-left: 1px dashed #777;}


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

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



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

	.vMenu-v-3 {}

	/* Flèche du sous-menu */
	.vMenu-v-3 .actif > a .i-vFlecheSousMenu:before {content: ">";}


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

	/* Premier niveau */
	.vMenu-v-3 #menuMobile ul {
		position: absolute; top: 0; left: 0; bottom: 0;
		width: 100%; display: block;
		background: #3B3B3B; 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 a span.i-vFlecheRetour {margin-right: 10px;}

	/* 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: #2d2d2d;}
	.vMenu-v-3 #menuMobile ul.niv1 a {background: #2d2d2d; border-bottom: 1px solid #313131;}
	.vMenu-v-3 #menuMobile ul.niv1 a:hover,
	.vMenu-v-3 #menuMobile ul.niv1 a:focus {background: #383838; outline: none;}
	.vMenu-v-3 #menuMobile ul.niv1 a:active {background: #000; outline: none;}

	/* Deuxième niveau */
	.vMenu-v-3 #menuMobile ul.niv2 {background: #1e1e1e;}
	.vMenu-v-3 #menuMobile ul.niv2 a {padding-left: 20px; background: #1e1e1e; 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: #383838; outline: none;}
	.vMenu-v-3 #menuMobile ul.niv2 a:active {background: #000; 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);
	}


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

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

	/* Si Position: fixed; n'est pas supporté */
	.no-fixed.vMenu-open .wrapperConteneur {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 .wrapperConteneur {
		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 .wrapperConteneur {
		margin-right: 0;
		-webkit-transform: translate3d(-80%,0,0);
		-ms-transform: translate3d(-80%,0,0);
		transform: translate3d(-80%,0,0);
	}


/* Icone hamburger
--------------------------------------------------------------------------------------- */
	#iconeMenu {
		position: absolute;
		left: 0; bottom: 0; right: auto; top:10px;
		height: 50px; width: 50px;
		padding: 18px 16px;
		/*-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-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;  /* i.e. Nexus5/Chrome and Kindle Fire HD 7'' */
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.vMenu-droit #iconeMenu {left: auto; right: 0;}
	#iconeMenu::selection { background: transparent; }

	#iconeMenu > span {/*width: 24px;*/ height: 14px; padding: 6px 0; display: block; position: relative;}

	#iconeMenu > span span:before,
	#iconeMenu > span span:after,
	#iconeMenu > span span {
		height: 2px; width: 17px;
		background-color: #005ba1; content: "";
		border: none; display: block;
		transition: none;
		-webkit-appearance: 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;
		-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) {
		/* Icone hamburger
		--------------------------------------------------------------------------------------- */
			#iconeMenu {display: none;}

		/* 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 .wrapperConteneur {margin-left: 50%;}
			.vMenu-droit.vMenu-open .wrapperConteneur {margin-left: -50%;}

			/* Si CSS3 est supporté */
			.csstransforms3d.vMenu-open .wrapperConteneur {
				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 .wrapperConteneur {
				margin-left: 0;
				-webkit-transform: translate3d(-50%,0,0);
				-ms-transform: translate3d(-50%,0,0);
				transform: translate3d(-50%,0,0);
			}

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



	}

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

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

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

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

	}