/* 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
--------------------------------------------------------------------------------------- */
	/* 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; z-index: 8000;}

	#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: 400 20px/100% "guifx"; color: #464648; display: inline-block;}

	/* Fl�che du sous-menu */
	#menuMobile li.avecSousMenu > a:before {content: ">";}
	#menuMobile li.avecSousMenu.actif > a:before {content: ",";}

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


/* Menu mobile
--------------------------------------------------------------------------------------- */
	#menuMobile {
		position: fixed; left: 0; top: 0px;
		height: 100%; 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);
		border-left:1px solid #dddddd;
		background: #ffffff;
	}
	/* Ouverture � droite */
	.vMenu-droit #menuMobile {margin-left: auto; margin-right: -80%; left: auto; right: 0;}

	#menuMobile li {
		position: relative;
		list-style-type: none;
	}
	#menuMobile li a {
		display: block; padding:15px 14px; position: relative;
		font-size: 15px; line-height: 1.25em; text-decoration: none; outline: none;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent;
		text-transform: uppercase;
		background: #ffffff;
		color: #464648;
		border-bottom: 1px solid #eeeeee;
		border-top: 1px solid #f1f2f2;
	}
	/*#menuMobile li a:hover { background: #383838; outline: none;}
	#menuMobile li a:active { } */
	#menuMobile li a.actif { color: #fff; background: #464648; border-bottom: 1px solid #464648; 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; background: #ffffff;}
	/* Deuxi�me niveau */
	#menuMobile ul ul ul a { padding-left: 60px; background: #ffffff;}


	/* 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 li.avecSousMenu a:before {display: none;}

	/* Ic�ne du + */
	.vMenu-v-2 #menuMobile 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 li.actif > .vWrapType2 > a.vAfficherSousMenu span:before {content: "-";}


	/* Menu mobile */
	/* Lien avec + */
	.vMenu-v-2 #menuMobile li.avecSousMenu > .vWrapType2 {position: relative;}
	.vMenu-v-2 #menuMobile li.avecSousMenu > .vWrapType2 > a {margin-right: 50px; padding-right: 0;}
	.vMenu-v-2 #menuMobile 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:none;
	}
	.vMenu-v-2 #menuMobile li.avecSousMenu > .vWrapType2 > a.vAfficherSousMenu span {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		border-left:none;
	}

	.vMenu-v-2 #menuMobile li.avecSousMenu > .vWrapType2 > a.actif + a.vAfficherSousMenu { background: #464648; color:#ffffff; border-bottom:1px solid #464648;}


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

		background: #3B3B3B;
	}

	.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;}

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


	/* 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 {background: #383838;}
	.vMenu-v-3 #menuMobile ul.niv1 a:active {background: #000;}

	/* 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 {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);
	}
	/* Android hack */
	.vMenu-v-3.android #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 {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 {
		border:2px solid #464648;
		position: absolute;
		left: auto;
		right: 20px;
		top: 20px;
		height: 37px; width: 37px;
		padding: 10px 4px;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		cursor: pointer; outline: none;
		background: #ffffff;
		-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: 20px;}
	#iconeMenu:selection {background: transparent;}

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

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

	@media only screen and (min-width: 768px) {
		#iconeMenu {
			top: 25px;
			height: 50px;
			width: 50px;
			padding: 15px 10px;
		}
		#iconeMenu > span { padding: 8px 0;}
		#iconeMenu > span span:before,
		#iconeMenu > span span:after,
		#iconeMenu > span span { height: 3px;}
	}

	@media only screen and (min-width: 768px) {

	}

	#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: 30%; margin-left: -30%;}
			.vMenu-droit #menuMobile {margin-right: -30%;}

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


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

			/* Si CSS3 est support� */
			.csstransforms3d.vMenu-open #vPage {
				margin-left: 0;
				-webkit-transform: translate3d(30%,0,0);
				-ms-transform: translate3d(30%,0,0);
				transform: translate3d(30%,0,0);
			}
			.csstransforms3d.vMenu-droit.vMenu-open #vPage {
				margin-left: 0;
				-webkit-transform: translate3d(-30%,0,0);
				-ms-transform: translate3d(-30%,0,0);
				transform: translate3d(-30%,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:30%;}
			.no-fixed.android.vMenu-open #vPage {left:0%;}
			.android.vMenu-droit.vMenu-open #vPage {left:-30%;}
			.no-fixed.android.vMenu-droit.vMenu-open #vPage {left: auto;}

	}

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

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


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


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