/*********************************************************************
GENERAL
*********************************************************************/
*{box-sizing: border-box;}

html,body{height:100%;min-height:100%;}/*hauteur à 100% pour les CHILD*/
body{font-family: 'Open Sans', sans-serif;width:100%;}


a,a:hover{text-decoration:none!important;}
	
.navbar-secondary:before,
.navbar-secondary:after,
.navbar-right:before,
.navbar-right:after{
	display: table;
	content: " ";
	clear:both;}
		
.effetSuperposition-0 {box-shadow: 0;z-index:100;}
.effetSuperposition-1 {box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);z-index:101;}
.effetSuperposition-2 {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);z-index:102;}
.effetSuperposition-3 {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);z-index:103;}
.effetSuperposition-4 {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);z-index:104;}
.effetSuperposition-5 {box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);z-index:105;}

/*********************************************************************
MIRE D'ACCUEIL
*********************************************************************/	
.mire {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:url(../img/mire_logo.jpg);
  background-size:cover;}
  
 .mire .effetTransparence{position:absolute;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,0.8);}

.mire .blockConnexion{
  position:relative;
  width: 800px;
  height:500px;
  border-radius:10px;}
  
.mire .blockConnexion-image{display:block;float:left;width:50%;height:inherit;background:blue;border-radius:10px 0 0 10px;background-image:url(../img/mire_logo.jpg);background-size:cover}
.mire .blockConnexion-formulaire{display:block;float:right;padding:20px;width:50%;height:inherit;background:white;border-radius:0 10px 10px 0;}
.mire .blockConnexion-formulaire .logo{height:60px;width:100%;background:url(../img/logo_mire.png) center center no-repeat;}
.mire .blockConnexion-formulaire .titre{display:block;margin:20px 0 50px 0;text-align:center;font-size:20px;color:#555;}
	
/*********************************************************************
CONTENEUR
*********************************************************************/
#wrapper{
	width:100%;min-height:100%;
	padding-top:60px;
	background:#202020;}


/*********************************************************************
NAVBAR
*********************************************************************/
	/*** général ***/
	.navbar ul{list-style:none;}	

	
	/*********************************************************************
	NAVBAR SECONDAIRE
	*********************************************************************/
	.navbar-secondary{
		display:block;
		margin:0;
		width:100%;
		background: #404040;}
		.navbar-secondary .navbar-logo{display:block;float:left;height:60px;width:260px;background:url(../img/logo_application.png) left center no-repeat;background-color:inherit;}
		.navbar-secondary .navbar-right{margin:0;padding:0;float:right;}
		/* .navbar-secondary .navbar-right.navbar-nav > li{float:left!important;} */
		.navbar-secondary .navbar-right .dropdown-menu {margin:0px;right: 0!important;left: auto!important;}/*on force le positionnement pour eviter decalage a droite en petite resolution sur liste USER */
		.navbar-secondary .navbar-right .dropdown-menu > li > a > i {width:20px;color:#26A8E4;text-align:center;}/*positionnement ICO largeur fixe pour eviter decalage texte*/
		.navbar-secondary .navbar-right .dropdown-menu > li > a:hover{color:#26A8E4;}/*couleur au survol des sous menus*/		
		
		
		.navbar-secondary li{display:block;float:left;}
			.navbar-secondary a{
				display:block;
				padding:0 20px;
				line-height:60px;
				color:white;
				font-size:14px;}
				.navbar-secondary a i{
					font-size:18px;/*Taille des icones*/}
			.navbar-secondary a:hover{
				color:#26A8E4;
				background:transparent!important;/* ON SURCHARGE BOOTSTRAP ==> .nav > li > a:hover, .nav > li > a:focus */}

			
			/*le pins affichant le nombre de messages a lire*/
			.navbar-secondary .menu-top--message i{position:relative;}
			.navbar-secondary .menu-top--message .pins {
				position:absolute;
				top:-8px;right:-8px;
				display:inline-block;
				width:15px;height:15px;line-height:15px;
				font-family:verdana,arial;
				font-size:10px;
				text-align:center;
				color:white;
				background:#2bb58c;
				border-radius:50%;}
			
			/*Diviseur dans le sous menu*/
			.navbar-secondary .navbar-right .dropdown-menu .divider {
				width:100%;}/*bug; reste à largeur 0px sinon*/

	/*********************************************************************
	NAVBAR MAIN
	*********************************************************************/
	/*image user*/
	.navbar-main li.avatar{text-align:center;}
	.navbar-main li.avatar img{
		/* margin: 25px auto; */
		/* -webkit-border-radius: 10px; */
		/* -moz-border-radius: 10px; */
		/* border-radius: 10px; */
		/* max-height:170px; */
		/* max-width:170px; */
		width:100%;
		height:auto;
		}
		
	/*libellé environnement EXP ou ABO*/
	.navbar-main li.environnement{
		padding:10px 20px;
		text-align:center;
		font-size:16px;
		color:white;
		font-family:"Open Sans";
		background:#26A8E4;
		border:5px solid white!important;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);z-index:102;
		}
	.navbar-main li.environnement span.debut{padding-left:10px;color:#fff;background:;}	
	.navbar-main li.environnement span.fin{}	
		
	/*element générique de menu*/
		.navbar-main a {font-size:14px;}/*par defaut les 3 n° de menus sont à cette taille, on surcharge ensuite*/
		.navbar-main .sidebar-collapse .nav > li > a{color:#fff;background:#202020;text-shadow:none;}
		.navbar-main .sidebar-collapse > .nav > li > a{padding:15px 10px;}
		.navbar-main .sidebar-collapse > .nav > li >a > i{margin-right:15px;}
		
	/*Fleche droite de déroulement*/
		.navbar-main .arrow{float: right;text-align:right;}
		.navbar-main .fa.arrow:before{content: "\f104";}
		.navbar-main .active > a > .fa.arrow:before{content: "\f107";}	

		
	/********************/		
	/*1er niveau de menu*/
	/********************/		
		/*1er niveau : NORMAL, pas activé*/
		.navbar-main .sidebar-collapse .nav.nav-first-level > li {
			/*border-bottom: 1px solid rgba(107, 108, 109, 0.19);*/
			border-bottom: 1px solid #333;
			/*background:#000;*/} 
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a i{width:15px;color:#26A8E4;}
		
		/*1er niveau : ACTIF PERSISTANT*/
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a.active-menu{color:white;background:#26A8E4;}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a.active-menu i{color:#000;}
		
		/*1er niveau : ACTIF TEMPORAIRE*/
		.navbar-main .sidebar-collapse .nav.nav-first-level > li.active {}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li.active > a{color:white;background:#26A8E4;}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li.active > a i{color:white;}		
		
		/*1er niveau : FOCUS*/
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a:focus{background:#26A8E4;}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a:focus i{color:white;}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li.active > a:focus{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li.active > a:focus i{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a.active-menu:focus{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a.active-menu:focus i{color:#000;}
		
		/*1er niveau : HOVER*/
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a:hover{color:#fff;background:#26A8E4;}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a:hover i{color:#fff;}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li .active> a:hover{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li .active> a:hover i{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a.active-menu:hover{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a.active-menu:hover i{color:#000;}	
		
		/*1er niveau : FOCUS HOVER*/
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a:focus:hover{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a:focus:hover i{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li .active> a:focus:hover i{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a.active-menu:focus:hover{}
		.navbar-main .sidebar-collapse .nav.nav-first-level > li > a.active-menu:focus:hover i{color:#000;}		
		
		
	/*********************/		
	/*2eme niveau de menu*/
	/*********************/
		.navbar-main .nav-second-level li{border-bottom: none !important;}
		.navbar-main .nav-second-level li a{padding-left: 37px;}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li{background:#000;}
		/*signe arbo devant sous menu*/
			.navbar-main .nav-second-level  > li:last-child > a:after{height:50%;}	
			.navbar-main .nav-second-level > li > a:after{content:"";display:block;position:absolute;left:20px;width:1px;height:100%;background:#26A8E4;top:0px;z-index:10;}
			.navbar-main .nav-second-level > li > a:before {content:"";display:block;position:absolute;left:20px;width:15px;height:1px;background:#26A8E4;top:20px;}		

			
			
		/*2eme niveau : NORMAL, pas activé*/
		.navbar-main .sidebar-collapse .nav.nav-second-level > li {}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a{font-size:13px;color:#bbb;}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a i{}
		
		/*2eme niveau : ACTIF PERSISTANT*/
		/**/.navbar-main .sidebar-collapse .nav.nav-second-level > li > a.active-menu{} 
		/**/.navbar-main .sidebar-collapse .nav.nav-second-level > li > a.active-menu i{}
		
		/*2eme niveau : ACTIF TEMPORAIRE*/
		.navbar-main .sidebar-collapse .nav.nav-second-level > li.active {}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li.active > a{background:#1a76a0;}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li.active > a i{}		
		
		/*2eme niveau : FOCUS*/
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a:focus{color:#fff;background:#1a76a0;}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a:focus i{color:#fff;}
			/*AVEC sous menu LVL 3*/
			.navbar-main .sidebar-collapse .nav.nav-second-level > li.active > a:focus{color:#fff;background:#1a76a0;}/*avec sous menu LVL 3*/
			.navbar-main .sidebar-collapse .nav.nav-second-level > li.active > a:focus i{color:#fff;}
			/*SANS sous menu LVL 3*/
			.navbar-main .sidebar-collapse li.active > .nav.nav-second-level > a:focus{color:#fff;background:#1a76a0;}/*avec sous menu LVL 3*/
			.navbar-main .sidebar-collapse > li.active .nav.nav-second-level > a:focus i{color:#fff;}
			
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a.active-menu:focus{}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a.active-menu:focus i{}
		
		/*2eme niveau : HOVER*/
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a:hover{color:#fff;background:#1a76a0;}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a:hover i{color:#fff;}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li .active> a:hover{}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li .active> a:hover i{}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a.active-menu:hover{}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a.active-menu:hover i{}	
		
		/*2eme niveau : FOCUS HOVER*/
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a:focus:hover{color:#fff;}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a:focus:hover i{}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li .active> a:focus:hover i{}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a.active-menu:focus:hover{color:white;}
		.navbar-main .sidebar-collapse .nav.nav-second-level > li > a.active-menu:focus:hover i{color:white;}	


		/*************/
		/*3eme niveau*/
		/*************/
			.navbar-main .nav-third-level li{border-bottom: none !important;}
			.navbar-main .nav-third-level li a{padding-left: 45px;font-size:12px;}
			.navbar-main .nav-third-level li a i{margin-right:10px;}
			/*signe arbo devant sous menu 3°niveau*/
				.nav-third-level > li > a:before{left:70px;}
				.navbar-main .nav-third-level > li > a:after{content:"";display:block;position:absolute;left:20px;width:1px;height:100%;background:#26A8E4;top:0px;z-index:10;}
				.navbar-main .nav-third-level > li > a:before{content:"";display:none;position:absolute;left:20px;width:15px;height:1px;background:#26A8E4;top:20px;}


			.navbar-main .sidebar-collapse .nav.nav-third-level > li > a{}		
			.navbar-main .sidebar-collapse .nav.nav-third-level > li > a i{color:#26A8E4;}		
			
			.navbar-main .sidebar-collapse .nav.nav-third-level > li > a:hover{color:#fff;background:#135472}		
			.navbar-main .sidebar-collapse .nav.nav-third-level > li > a:hover i{color:#fff;}
			
			/* .navbar-main .sidebar-collapse .nav.nav-third-level > li > a:focus{color:#fff;background:#135472}		 */
			/* .navbar-main .sidebar-collapse .nav.nav-third-level > li > a:focus:hover{color:#fff;background:#135472}		 */



/*********************************************************************
	NAV-BUTTON-BURGER
*********************************************************************/
	.navbar-toggle {
		position: fixed;
		top:0;
		right:0;
		margin:10px;
		padding:0;
		height:40px;width:40px;
		color:white;
		background:#333;
		border: 2px solid white;
		border-radius: 4px;
		z-index:999;}
	.navbar-toggle i{font-size:24px!important;}
/*********************************************************************
FIL ARIANNE
*********************************************************************/
	.breadcrumb{margin-bottom:0px;padding:0px 15px;}
	.breadcrumb a{color:#26A8E4;}

	
#page-wrapper{padding: 15px 30px;height:inherit;min-height:100%;background:#F3F3F3;}

#page-inner{
	width:100%;
	margin:10px 20px 10px 0px;
	background-color:#fff !important;
	padding:10px;
	min-height:200px;}	
	
	
/*********************************************************************
MEDIA QUERY
*********************************************************************/
/*media*/	
@media(min-width:768px){
	.navbar-secondary {position:fixed;top:0px;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);z-index:102;}
	
	/*navigation verticale*/
	body.pref-nav-vertical #page-wrapper{margin: 0 0 0 260px;}
	body.pref-nav-vertical .navbar-side{z-index: 1;position: absolute;width: 260px;}
	
	/*navigation horizontale*/
	body.pref-nav-horizontal .navbar-main{position:fixed;top:60px;width:100%;background-color:inherit;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);z-index:101;}/*le menu principal est collé en dessous du menu secondaire top*/
	body.pref-nav-horizontal .navbar-main ul#main-menu{display:flex;justify-content: flex-end;}
	body.pref-nav-horizontal .navbar-main ul#main-menu li.avatar{display:none;}/*on cache l'avatar*/
	body.pref-nav-horizontal .navbar-main ul#main-menu li a{}
	body.pref-nav-horizontal .navbar-main .nav-first-level .arrow {display:none;}/*on cache la fleche du premier niveau*/
	body.pref-nav-horizontal .navbar-main .nav-second-level .arrow {display:block;}/*on affiche la fleche du 2eme niveau si presente*/
	body.pref-nav-horizontal .navbar-main ul.nav-second-level{position:absolute;min-width:200px;}
	body.pref-nav-horizontal .navbar-main .last ul.nav-second-level {right:0;}/*on corrige le décalage a droite du dernier sousmenu*/
	body.pref-nav-horizontal .navbar-main  ul.nav-second-level a{}/*les sous menu avec fond noir*/
	
	body.pref-nav-horizontal .navbar-main  .sidebar-collapse > ul#main-menu > li > a {padding-left:17px;padding-right:17px;}

	body.pref-nav-horizontal #page-wrapper{margin-top:51px;}
	
	
	.navbar{border-radius: 0px;}
}

/*media*/	
@media(max-width:1000px){
	body.pref-nav-horizontal .navbar-main  .sidebar-collapse .nav > li > a > i{display:none;}/*on cahce les icones du menu principal*/
}


/*media*/	
@media(max-width:767px){/*on passe en mode MAIN MENU= PETIT BOUTON*/
	.navbar-secondary {position:fixed;top:0;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);z-index:102;}
	.navbar-secondary .navbar-right{margin-right:50px;}/*decale le menu a gauche pour placer le bouton BURGER a droite*/
	.navbar-secondary span.username{display:none;}/*on cache le USERNAME pour éviter les debordement*/
	.navbar-main li.avatar{display:none;}/*on cache l'avatar*/
	
	.navbar-main{position:fixed;top:60px;width:100%;background-color:inherit;z-index:999;}
}
	

/*media*/
@media(max-width:550px){
	/*Gestion du menu secondaire*/
	.navbar-secondary {position:relative;box-shadow:0;}/*on remet le SECONDARY en glissant pour ne laisser que le logo en fixe*/
	.navbar-secondary .navbar-logo{
		display:block;
		float:none;
		position:fixed;top:0;
		width:100%;
		/* background-position:center center; */
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);z-index:102;		}
	.navbar-secondary .navbar-right{
		margin-right:0px;/*on remet le menu a droite, car plus de NAV-BURGER sur la ligne*/
}