/* 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; left: 0;*/ width: 100%; z-index: 9999; background: #fff; }

	#vPage {
		position: relative; height: 100%; left:0; margin-left: 0; width: 100%;
		/* 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);*/
	}
	.no-fixed #vPage {height: auto;}
	/*#vPage main {z-index: 1;}*/


	.enteteMobile.conteneur { padding: 0 20px;}

	/* 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 .avecSousMenu > a:before,
	#menuMobile a.vRetour:before {font: 400 20px/100% "guifx"; color: #fff; display: inline-block;}

	.principal { margin-top:70px;}


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

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

	@media screen and (min-width: 768px) {
		.principal { margin-top:80px;}
	}


/* Menu mobile
--------------------------------------------------------------------------------------- */
	#menuMobile {
		z-index:10000;
		position: fixed; left: 0; top: 55px;
		height: 100%; width: 300px; margin-left: -300px;
		overflow-x: hidden; overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #35373b;	outline: 0;
		/* 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 {margin-left: auto; margin-right: -300px; left: auto; right: 0;}

	#menuMobile li {position: relative;}

	#menuMobile ul a {
		display: block; position: relative; padding: 12px 16px;
		font-size: 15px; text-decoration: none; color: #fff;
		outline: none;	 border-left: 0; border-right: 0;
			border-bottom: 1px solid #28292c;
			border-top: 1px solid #42454a;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-tap-highlight-color: transparent;
		transition: all 0.2s;
	}

	#menuMobile ul a:hover, #menuMobile ul a:focus, #menuMobile ul a:active {background: #3f4d5f; outline: none;}
	#menuMobile ul a.actif {background: #3f4d5f; outline: none;}
	 {/*background: #000;*/ outline: none;}

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

	#menuMobile ul {padding-bottom: 60px;}

	/* Sous-menu */
	/* Premier niveau */
	#menuMobile ul ul {display: none;}
	#menuMobile ul ul a {padding-left: 40px; background: #232528; font-weight: normal;}
	/* Deuxième niveau */
	#menuMobile ul ul ul a {padding-left: 60px; background: #232528; border-top-color: #313131; border-bottom-color: #141414;}

	#menuMobile

	/* 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: -300px;}
	/* Ouverture à droite */
	.csstransforms3d.vMenu-droit #menuMobile {margin-left: auto; margin-right: 0; left: auto; right: -300px; top:0;}





/* Type 2
--------------------------------------------------------------------------------------- */

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

	/* Icône du + */
	.vMenu-v-2 a.vAfficherSousMenu span:before {
		display: block; content: "+"; font-family: arial, sans-serif; font-weight: 400; font-size: 26px;
		position: absolute; top: 50%; margin-top: -14px; left: 50%; margin-left: -9.5px;
	}
	.vMenu-v-2 .actif > .vWrapType2 > a.vAfficherSousMenu span:before {content: "-"; margin-left: -6px; margin-top: -16px;}


	/* Menu mobile
	--------------------------------------------------------------------------------------- */
	/* Lien avec + */
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 {position: relative;}
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 > a {margin-right: 50px; padding-right: 0;}
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 > a.vAfficherSousMenu {
		position: absolute; top: 0; right: 0; bottom: 0;
		width: 50px; display: block; margin: 0; padding-left: 0;
		border-left: 1px dashed #616365; text-align: center; vertical-align: middle;
	}
	.vMenu-v-2 #menuMobile .avecSousMenu > .vWrapType2 > a.vAfficherSousMenu span {position: absolute; top: 0; right: 0; bottom: 0; left: 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 #vPage { overflow: hidden; position: fixed;}*/
	.vMenu-open .hasScroll #entete, .vMenu-open #vPage.hasScroll { padding-right: 17px;}
	/*.vMenu-droit.vMenu-open #vPage {margin-left: -300px;}*/

	/* 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(300px,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(300px,0,0);
		-ms-transform: translate3d(300px,0,0);
		transform: translate3d(300px,0,0);
	}
	.csstransforms3d.vMenu-droit.vMenu-open #vPage {
		margin-right: 0;
		-webkit-transform: translate3d(-300px,0,0);
		-ms-transform: translate3d(-300px,0,0);
		transform: translate3d(-300px,0,0);
	}*/

	/* Android hack */
	.android.vMenu-open #menuMobile, .android.vMenu-droit.vMenu-open #menuMobile,
	.android.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:0px;}
	.no-fixed.android.vMenu-open #vPage {left:0%;}
	/*.android.vMenu-droit.vMenu-open #vPage {left:-300px;}*/
	.no-fixed.android.vMenu-droit.vMenu-open #vPage {left: auto;}


	@media screen and (min-width: 768px) {
		/*#menuMobile { width: 300px;}*/

	}


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

		#menuMobile { width: 300px;}

	}

/* Icone hamburger
--------------------------------------------------------------------------------------- */
	#iconeMenu {
		display: inline-block;
		vertical-align: middle;
		height: 46px; width: 30px;
		padding: 14px 0 14px 8px;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		cursor: pointer; outline: none;
		background: transparent;
		-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: #3f4d5f; 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;}



/* Styles généraux
--------------------------------------------------------------------------------------- */


/* Conteneurs
--------------------------------------------------------------------------------------- */
	#entete {/*text-align: center; */}

	.contenu {max-width: 960px; margin: 0 auto; position: relative;}

	/* Si l'entête est fixe */
	/* La classe est seulement utilisée pour le démo et est inutile au plugin. */
	.enteteFixe #entete {position: fixed!important; top: 0; border-bottom: 1px solid #ebebeb;}
	.enteteFixe main {padding-top: 55px; }

	/* Empêche l'entête de ne pas suivre le menu */
	/*.vMenu-open.enteteFixe #entete {position: absolute;}*/

	/* Si Position: fixed; n'est pas supporté */
	/*.no-fixed.enteteFixe #entete {position: relative;}
	.no-fixed.enteteFixe main {padding-top: 0;}*/

	/*
		La classe "no-fixed" est ajouté au HTML par le plugin.
		Permet de détecter Android 2.3 qui supporte mal position: fixed.
		De cette manière vous pourrez corriger l'entête.
	*/





	.sup { padding: 8px 20px; color: #fff; text-align: right; font-size: 0;}
	.sup [class^=bouton] { display: inline-block; vertical-align: top; padding: 9px 10px 10px;}
	.fermer p, .fermer button { display: inline-block; vertical-align: middle; font-size: 15px;}
	.sup #iconeMenu > span span:before, .sup #iconeMenu > span span:after, .sup #iconeMenu > span span { background: #fff;}
	.sup #iconeMenu { height: 40px; padding: 10px 0 14px 8px;}
	.sup .ctaEntete { float: left; }
	#menuMobile li a span { display: inline-block; vertical-align: middle;}

	.sup .profil { float: left; margin: 0; padding: 0;}
	.sup .profil .identifiant p { color: #fff;}
	.sup .profil .voirAlerte.nouvelleAlerte, .sup .profil a { display: inline-block; vertical-align: middle;}

	@media screen and (min-width: 480px) {
		.enteteFixe main {padding-top: 105px;}
		.sup { padding: 33px 20px 32px;}
		/*#menuMobile { top: 105px;}*/
	}

	@media screen and (min-width: 768px) {
		.sup .ctaEntete { display: none;}
	}

	@media screen and (min-width: 1100px) {
		.enteteFixe main.interne {padding-top: 155px;}
	}