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


		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
--------------------------------------------------------------------------------------- */
	/* Si Position: fixed; n'est pas supporté | Donne l'illusion que le menu mobile prend toute la hauteur */
	.no-fixed body {background: #343f48;}

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

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


/* Icônes
--------------------------------------------------------------------------------------- */
	#menuMobile li.avecSousMenu > a:before,
	#menuMobile li a.vRetour:before {font: 500 18px/100% "guifx"; color: #168ea0; 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: 0;
		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);

		background: #FDFDFD;
		z-index: 5;
		/*padding-top: 20px;*/
		text-align: center;
		text-transform: uppercase;
	}
	/* Ouverture à droite .vMenu-droit */

	#menuMobile {margin-left: auto; margin-right: -80%; left: auto; right: 0;}

	#menuMobile ul.menuGeneral{ }
	#menuMobile li a br{ display: none;}

	#menuMobile li {position: relative;}
	#menuMobile li a {
		display: block; padding: 12px 25px; position: relative; outline: none;
		text-align: left; text-decoration: none; text-transform: none;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent;

		color: #333;
		font:bold 18px/1.1 Roboto;
		text-transform: uppercase;
	}

	#menuMobile li.menuLogo{ display: none;}
	#menuMobile #btUrgence{ display: none;}

	/*#menuMobile li a:hover  {background: #383838; outline: none;}*/
	#menuMobile .menuGeneral li:first-child a{ border-top: none;}
	#menuMobile li a:active { outline: none;}
	/*#menuMobile li a:hover  { background: #000; outline: none;}*/
	#menuMobile li a.actif{ color:#168ea0;}

	#menuMobile li.btLangue{ display: none;}

	#menuMobile .blocNum{background: none; border-bottom:1px solid #e6e7e8; display:block; margin-bottom:10px; padding:10px;}


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

	/* Sous-menu */
	/* Premier niveau */
	#menuMobile ul ul {
		display: none; 
		background: #ffffff;
		background: -moz-radial-gradient(center, ellipse cover,  #ffffff 25%, #ffffff 25%, #eaeaea 100%);
		background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 25%,#ffffff 25%,#eaeaea 100%);
		background: radial-gradient(ellipse at center,  #ffffff 25%,#ffffff 25%,#eaeaea 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 );
		
		/*background: #dadada;
		background: -moz-linear-gradient(top,  #dadada 0%, #EEE 66%);
		background: -webkit-linear-gradient(top,  #dadada 0%,#EEE 66%);
		background: linear-gradient(to bottom,  #dadada 0%,#EEE 66%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadada', endColorstr='#EEE',GradientType=0 );*/
	}

	#menuMobile ul ul a {
		color: #168ea0; font:bold 16px/1 Roboto;
	}
	#menuMobile ul ul a:active, #menuMobile ul ul a.actif{ }

	#menuMobile .sousCat{ min-height: 0; padding: 0;}

	/* 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
--------------------------------------------------------------------------------------- */
	/* 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 {
		color: #168ea0; display: block; content: ">"; font: 500 18px/100% guifx; line-height: 50px;
		position: absolute; /*top: 20%; margin-top: -8px;*/ left: 59%; margin-left: -9.5px;
	}
	.vMenu-v-2 #menuMobile li.actif > .vWrapType2 > a.vAfficherSousMenu span:before { content: ","; left: 53%;}


	/* 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: 1px dashed #d5d7db;
	}
	.vMenu-v-2 #menuMobile li.avecSousMenu > .vWrapType2 > a.vAfficherSousMenu span {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;

		border-left: 1px dashed #d5d7db;
	}


/* 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 {
		position: absolute;
		left: 20px; top: 22px;
		height: 20px; width: 33px;
		padding: 0;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		cursor: pointer; outline: none;
		background: 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: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: #000; content: "";
		border: none; border-radius: 4px; display: block;
		-webkit-transition: transform 0.5s ease;
		transition: transform 0.5s ease;
	}

	#iconeMenu > span span:before {
		position: absolute; top: 0; 
		background: #8abc3f;
		background: -moz-linear-gradient(-45deg,  #8abc3f 0%, #56ab6c 100%);
		background: -webkit-linear-gradient(-45deg,  #8abc3f 0%,#56ab6c 100%);
		background: linear-gradient(135deg,  #8abc3f 0%,#56ab6c 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abc3f', endColorstr='#56ab6c',GradientType=1 );
	}
	#iconeMenu > span span:after {
		position: absolute; bottom: 0; 
		background: #53a971;
		background: -moz-linear-gradient(-45deg,  #53a971 0%, #1f989f 100%);
		background: -webkit-linear-gradient(-45deg,  #53a971 0%,#1f989f 100%);
		background: linear-gradient(135deg,  #53a971 0%,#1f989f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53a971', endColorstr='#1f989f',GradientType=1 );
	}
	#iconeMenu > span span {
		background: #72b454;
		background: -moz-linear-gradient(-45deg,  #72b454 0%, #37a089 100%);
		background: -webkit-linear-gradient(-45deg,  #72b454 0%,#37a089 100%);
		background: linear-gradient(135deg,  #72b454 0%,#37a089 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72b454', endColorstr='#37a089',GradientType=1 );
	}

	/* 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
		--------------------------------------------------------------------------------------- */
			#iconeMenu{ top: 55px; left: 40px;}
			.vMenu-droit #iconeMenu { /*right: 40px;*/}

			#menuMobile {width: 50%; margin-left: -50%;}
			.vMenu-droit #menuMobile {margin-right: -50%;}
			#menuMobile .btAccesMembre { display: none;}

			/* 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: 1025px) {
		/* Menu bureau
		--------------------------------------------------------------------------------------- */
			#menuBureau > 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;}
	}