/* ******************************************************************************************************************************* 
* menu css circulaire
**********************************************************************************************************************************/

#accueil{
	margin-left:240px;
}

#accueil .diagram{
	margin-left:200px;
	transition: margin-left 0.2s;
}

ul.radial, ul.radial ul, ul.radial ul li ul {
	padding:0;
	margin:0;
	list-style:none;
}

ul.radial {
	/* width:80px;
	height:80px; */
	top:260px;
	position:relative;
	z-index:100;
	right:450px;
	/* margin:300px 300px; */
}

ul.radial > a {
	display:block;
	width:80px;
	height:80px; 
	background:#ddd;
	border-radius:80px;
	overflow:hidden;
	text-align:center;
	background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	background-image: -o-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	background-image: radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}
/*ajustement première bulle*/
ul.radial ul, ul.radial ul li ul, ul.radial ul li ul li ul, ul.radial ul li ul li ul li ul, ul.radial ul li ul li ul li ul li ul, ul.radial ul li ul li ul li ul li ul li ul {
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
	width:80px;
	height:80px;
}

/*ajustement deuxième bulle*/
ul.radial ul li .bulle{
	position:absolute;
	left:-40px;
	top:-40px;
	z-index:-1;
	width:80px;
	height:80px;
}

/* ul.radial ul li, ul.radial ul li ul li, ul.radial ul li ul liul li, ul.radial ul li ul li ul li ul li,  ul.radial ul li ul li ul li ul li ul li,  ul.radial ul li ul li ul li ul li ul li ul li{ */
ul.radial li {
	width:0;
	height:1px;
	position:absolute;
	left:50%;
	top:50%;
	background:#999;
	border-left:0px solid #999;
	-webkit-transform-origin:0px 0px;
	-moz-transform-origin:0px 0px;
	-ms-transform-origin:0px 0px;
	-o-transform-origin:0px 0px;
	transform-origin:0px 0px;
}

ul.radial li a{
	text-decoration: none;
	display:block; 	
	width:50px;
	height:50px;
	position:absolute;
	left:-25px;
	top:-25px;
	border-radius:50px;
	color:#fff;
	background:#999;
	/* overflow:hidden; */
	text-align:center;
	background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	background-image: -o-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	background-image: radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}

ul.radial #commandes a:hover{
	background-color:#ddd;
}

ul.radial li a img{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

ul.radial li a #com{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

ul.radial li a #con{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

ul.radial li a #bon{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

ul.radial li a #pre{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

ul.radial li a #fac{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

ul.radial li a #pay{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

ul.radial li a #ent{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

ul.radial li a #int{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

ul.radial li a #sta{
	border:0;
	position:absolute;
	width:96%;
	height:96%;
	top:50%;
	left:50%;
	margin-top:-41px;
	margin-left:-146px;
}

/**************************************************************************************
* Orientation 
**************************************************************************************/
ul.radial ul #commandes:nth-child(1) {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}


ul.radial ul #contrats:nth-child(1) {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}
	
ul.radial ul #releveheures:nth-child(1) {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}

ul.radial ul #preparationpaye:nth-child(1) {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}

ul.radial ul #facturation {
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	transform: rotate(-60deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}

ul.radial ul #sagepaye:nth-child(1) {
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	transform: rotate(120deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #entreprises {
	-webkit-transform: rotate(-120deg);
	-moz-transform: rotate(-120deg);
	-ms-transform: rotate(-120deg);
	-o-transform: rotate(-120deg);
	transform: rotate(-120deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}

ul.radial ul #interimaires:nth-child(1) {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}

ul.radial ul #jonction_1 {
	-webkit-transform: rotate(-139deg);
	-moz-transform: rotate(-139deg);
	-ms-transform: rotate(-139deg);
	-o-transform: rotate(-139deg);
	transform: rotate(-139deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}

ul.radial ul #jonction_2 {
	-webkit-transform: rotate(-160deg);
	-moz-transform: rotate(-160deg);
	-ms-transform: rotate(-160deg);
	-o-transform: rotate(-160deg);
	transform: rotate(-160deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}

ul.radial ul #jonction_3 {
	-webkit-transform: rotate(139deg);
	-moz-transform: rotate(139deg);
	-ms-transform: rotate(139deg);
	-o-transform: rotate(139deg);
	transform: rotate(139deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}

ul.radial ul #jonction_4 {
	-webkit-transform: rotate(160deg);
	-moz-transform: rotate(160deg);
	-ms-transform: rotate(160deg);
	-o-transform: rotate(160deg);
	transform: rotate(160deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}

ul.radial ul #statistiques {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;

}


/***********************************************************************************
* Gere la taille des bulles 
***********************************************************************************/

	
ul.radial ul #contrats:nth-child(1) a {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}
ul.radial ul #releveheures:nth-child(1) a {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #preparationpaye:nth-child(1) a {
	-webkit-transform: rotate(210deg);
	-moz-transform: rotate(210deg);
	-ms-transform: rotate(210deg);
	-o-transform: rotate(210deg);
	transform: rotate(210deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #facturation:nth-child(3) a {
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #sagepaye:nth-child(1) a {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #entreprises:nth-child(1) a {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #interimaires:nth-child(1) a {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #jonction_1:nth-child(1) a {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #jonction_2:nth-child(3) a {
	-webkit-transform: rotate(53deg);
	-moz-transform: rotate(53deg);
	-ms-transform: rotate(53deg);
	-o-transform: rotate(53deg);
	transform: rotate(53deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #jonction_3:nth-child(1) a {
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #jonction_4:nth-child(3) a {
	-webkit-transform: rotate(-53deg);
	-moz-transform: rotate(-53deg);
	-ms-transform: rotate(-53deg);
	-o-transform: rotate(-53deg);
	transform: rotate(-53deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial ul #statistiques:nth-child(4) a {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}


ul.radial li ul {
	width:300px;
	height:300px;
	left:-110px;
	top:-110px;
}

/********************************************************************************
*animation et distance de positionnement des bulles
********************************************************************************/


ul.radial #contrats:nth-child(1) {
	border-left-width:120px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #releveheures:nth-child(1) {
	border-left-width:220px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #preparationpaye:nth-child(1) {
	border-left-width:260px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #facturation{
	border-left-width:260px;
-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #sagepaye:nth-child(1) {
	border-left-width:240px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #entreprises{
	border-left-width:620px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #interimaires:nth-child(1) {
	border-left-width:380px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #jonction_1 {
	border-left-width:200px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #jonction_2 {
	border-left-width:300px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #jonction_3 {
	border-left-width:200px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #jonction_4 {
	border-left-width:300px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #statistiques {

	border-color: RGBa(255, 255, 255);
	border-left-width:240px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}


/******************************************************************************
* taille des bulles 
******************************************************************************/
ul.radial #commandes a {
	position: relative;
	width:300px; 
	height:86px; 
	left:-108px; 
	top:-20px;
	border-radius:10px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #contrats a {
	width:300px; 
	height:86px;  
	left:-150px; 
	top:-43px;
	border-radius:10px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #releveheures a {
	width:300px; 
	height:86px;  
	left:-150px; 
	top:-43px;
	border-radius:10px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #preparationpaye a {
	width:300px; 
	height:86px;  
	left:-150px; 
	top:-43px;
	border-radius:10px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #facturation a {
	width:300px; 
	height:86px;  
	left:-150px; 
	top:-43px;
	border-radius:10px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #sagepaye a {
	width:300px; 
	height:86px;  
	left:-150px; 
	top:-43px;
	border-radius:10px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #entreprises a {
	width:300px; 
	height:86px;  
	left:-150px; 
	top:-43px;
	border-radius:10px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #interimaires a {
	width:300px; 
	height:86px;  
	left:-150px; 
	top:-43px;
	border-radius:10px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #jonction_1 a {
	width:20px;
	height:20px;
	left:-10px; 
	top:-10px;
	border-radius:20px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #jonction_2 a {
	width:20px;
	height:20px;
	left:-10px; 
	top:-10px;
	border-radius:20px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #jonction_3 a {
	width:20px;
	height:20px;
	left:-10px; 
	top:-10px;
	border-radius:20px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #jonction_4 a {
	width:20px;
	height:20px;
	left:-10px; 
	top:-10px;
	border-radius:20px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial #statistiques:nth-child(2) a {
	width:70px;
	height:70px;
	left:-35px; 
	top:-35px;
	border-radius:70px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}

ul.radial > li > a {
	background-color:#bbb;
	-webkit-transition: 0s;
	-moz-transition: 0s;
	-ms-transition: 0s;
	-o-transition: 0s;
	transition: 0s;
}

ul.radial li:hover ul li a:hover {
	background-color:#bbb;
	-webkit-transition: 0s;
	-moz-transition: 0s;
	-ms-transition: 0s;
	-o-transition: 0s;
	transition: 0s;
}


/***********************************************************************************************************
* Orientation de la fléche
***********************************************************************************************************/

.radial li ul #fleche_1 {
	width:220px;
	height:220px;
	position:absolute; 
	left:40px; 
	top:40px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.radial li ul #fleche_2 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-64px; 
	top:-70px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.radial li ul li ul #fleche_3 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-69px; 
	top:-69px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(150deg);
	-moz-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	-o-transform: rotate(150deg);
	transform: rotate(150deg);
}

.radial li ul li ul #fleche_4 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-70.5px; 
	top:-69px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
}

.radial li ul li ul #fleche_5 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-70.5px; 
	top:-69px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(210deg);
	-moz-transform: rotate(210deg);
	-ms-transform: rotate(210deg);
	-o-transform: rotate(210deg);
	transform: rotate(210deg);
}

.radial li ul li ul #fleche_6 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-69.5px; 
	top:-69px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

.radial li ul li ul #fleche_7 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-69px; 
	top:-69px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.radial li ul li ul #fleche_8 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-70.5px; 
	top:-69px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(-49deg);
	-moz-transform: rotate(-49deg);
	-ms-transform: rotate(-49deg);
	-o-transform: rotate(-49deg);
	transform: rotate(-49deg);
}

.radial li ul li ul #fleche_9 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-69.5px; 
	top:-69px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;	
	-webkit-transform: rotate(-70.2deg);
	-moz-transform: rotate(-70.2deg);
	-ms-transform: rotate(-70.2deg);
	-o-transform: rotate(-70.2deg);
	transform: rotate(-70.2deg);
}

.radial li ul li ul #fleche_10 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-70.5px; 
	top:-69px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(229deg);
	-moz-transform: rotate(229deg);
	-ms-transform: rotate(229deg);
	-o-transform: rotate(229deg);
	transform: rotate(229deg);
}

.radial li ul li ul #fleche_11 {
	width:220px;
	height:220px;
	position:absolute; 
	left:-69.5px; 
	top:-69px; 
	background:#555;
	background-color: rgba(255, 255, 255, 0.01);
	z-index: -100;
	border-radius:200px;
	-webkit-transform-origin:110px 110px;
	-moz-transform-origin:110px 110px;
	-ms-transform-origin:110px 110px;
	-o-transform-origin:110px 110px;
	transform-origin:110px 110px;
	-webkit-transform: rotate(250deg);
	-moz-transform: rotate(250deg);
	-ms-transform: rotate(250deg);
	-o-transform: rotate(250deg);
	transform: rotate(250deg);
}

.radial li ul #fleche_1 img {
	position:absolute;
	left:101.5px; top:29.5px; 
	width:18px;
	border:0;
}

.radial li ul #fleche_2 img {
	position:absolute;
	left:101.5px; top:-64px; 
	width:18px;
	border:0;
}

.radial li ul li ul #fleche_3 img {
	position:absolute;
	left:101.5px; top:-65px; 
	width:18px;
	border:0;
}

.radial li ul li ul #fleche_4 img {
	position:absolute;
	left:101.5px; top:-67px;  
	width:18px;
	border:0;
}
.radial li ul li ul #fleche_5 img {
	position:absolute;
	left:101.5px; top:-89.5px; 
	width:18px;
	border:0;
}

.radial li ul li ul #fleche_6 img {
	position:absolute;
	left:101.33px; top:-471.5px;  
	width:18px;
	border:0;
}

.radial li ul li ul #fleche_7 img {
	position:absolute;
	left:100.4px; top:-229px;  
	width:18px;
	border:0;
}
.radial li ul li ul #fleche_8 img {
	position:absolute;
	left:102.5px; top:-15px; 
	width:18px;
	border:0;
}

.radial li ul li ul #fleche_9 img {
	position:absolute;
	left:102.4px; top:-136.5px;  
	width:18px;
	border:0;
}

.radial li ul li ul #fleche_10 img {
	position:absolute;
	left:102.5px; top:-15.8px; 
	width:18px;
	border:0;
}

.radial li ul li ul #fleche_11 img {
	position:absolute;
	left:102.6px; top:-136.8px;  
	width:18px;
	border:0;
}

@media only screen and (max-width:1800px) {
	#accueil .diagram{
		margin-left:300px;
		transition: margin-left 0.2s;
	}
}

@media only screen and (max-width:1600px) {
	#accueil .diagram{
		margin-left:500px;
		transition: margin-left 0.2s;
	}
}

@media only screen and (max-width:1400px) {
	#accueil .diagram{
		margin-left:650px;
		transition: margin-left 0.2s;
	}
}

@media only screen and (max-width:1200px) {
	#accueil .diagram{
		margin-left:800px;
		transition: margin-left 0.2s;
	}
}


@media only screen and (max-width:1080px) {
	nav{
		margin-top: 24px;
		border-bottom: 1px #666 solid;
		border-top: 1px #666 solid;
	}
	
	#arborescence{
		margin-top:0px;
		margin-left:0px;
	}
	
	#accueil{
		width:100%;
		margin:auto;
	}
	
	#accueil .diagram{
		width:90%;
		margin-left:0px;	
	}
	
	ul.radial{
		top:0px;
		right:0px;
		margin: 180px auto;
	}
}

/***********************************************************************************************************
* diag info
***********************************************************************************************************/

#affichage{
	display:none;	
	width:800px;
	height:400px;
	position: absolute;
	top: 32%;
	float: right;
	right:0%;
	
}


#affichage ul:before{
	content:"";
	position:absolute;
	z-index:200;
	background:#999;
	height:100%;
	width:40px;
	-webkit-border-radius:4px 0px 0px 4px;
	-moz-border-radius:4px 0px 0px 4px;
    border-radius:4px 0px 0px 4px;
	-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.75);        
    -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.75);
    box-shadow:0px 0px 10px rgba(0,0,0,0.75);
	 transition: height 1s;
}

#affichage ul{	
	position:relative;
	list-style: block;
	margin-top:-10px;
	float: right;
	width: 40px;
	height:400px;
	border-radius: 5px 0px 0px 5px;
	border: 1px solid #000;
	box-shadow: 0px 3px 12px 3px  RGBa(99, 99, 99, 0.60);
	background-color:#333;
	z-index:200;
	transition: height 1s;
}

#affichage ul li{
	display: none:
}

#affichage ul:hover{	
	position:relative;
	margin-top:-10px;
	float: right;
	width: 400px;
	height:400px;
	border-radius: 5px 0px 0px 5px;
	border: 1px solid #000;
	box-shadow: 0px 3px 12px 3px  RGBa(99, 99, 99, 0.60);
	background-color:#333;
	z-index:200;
    transition: height 1s;
}


#affichage ul:hover li a.menuLien{
	position:absolute;
	z-index:110;
	font-weight:bold;
	color:white;
	font-size:1.8em;
	padding-left:22px;
	display:block;
	width:160px;
	height:40px;
	text-decoration:none;
	text-shadow:0px 0px 5px rgba(0,0,0,0.5);
	letter-spacing:-1px;
}

#affichage ul:hover li div{
	width:152px;
	height:220px;
	padding:15px;
	padding-top:0px;
	background:rgba(0,0,0,0.6);
	overflow:hidden;
	color:white;
	position:absolute;
	top:0px;
	left:0;
	z-index:110;
	opacity:0;
	-webkit-transition:1s right,1s width,1s opacity;
    -moz-transition:1s right,1s width,1s opacity;
    -o-transition:1s right,1s width,1s opacity;
    transition:1s right,1s width,1s opacity;
}

#affichage ul li:hover div{
	left:182px;
	opacity:1;
	width:276px; 
	background:rgba(0,0,0,0.6);
}

/*les elements de la boite*/
/*
#affichage ul li div h5{font-size:2.8em;color:#099;text-align:right;}
#affichage ul li div p{text-indent:15px;padding-top:15px;width:276px;overflow:hidden;font-size:0.8em;font-weight:normal;text-align:justify;}
#affichage ul li div p.lien{text-align:right;}
#affichage ul li div p.lien a{color:#c10;}
*/
/*
.diaginfo li{
	list-style-type: none;
}

.ouverture{
	width:800px;
	height:380px;
}

#affichage .ouverture div{
	overflow:hidden;
	background-color: #CCC;
	margin-top:10px;
	margin-right:41px;
	float: right;
	width:10px;
	height:380px;	
	opacity:0;
	z-index:100;
    border-radius: 4px 0px 0px 4px;
	box-shadow: -3px 1px 12px 1px  RGBa(99, 99, 99, 0.60);
	transition: 1s opacity, width 1s;
}

#cacheouverture:hover .ouverture > div{
	margin-top:10px;
	margin-right:41px;
	float: right;
	margin-top:10px;
	width:800px;
	height:380px;
	background-color: #CCC;
	opacity:1;
	transition:opacity 1s, width 1s;
}

.action{
    font-size: 4px;
	display:none;
}
*/