body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	color: #fff;
	
}
div#invisible {
      visibility:hidden;
}
.image {
	width: 50px;
	height: 50px;
}

div#conteneur
{
	
	width: auto;
	height: 4000px;
	/*overflow:auto;*/
	/*margin: 30px;*/
	text-align: center;
	background: -webkit-linear-gradient(90deg, #2e4d5c 10%, #3A6073 90%); /* Chrome 10+, Saf5.1+ */
  	background:    -moz-linear-gradient(90deg, #2e4d5c 10%, #3A6073 90%); /* FF3.6+ */
  	background:     -ms-linear-gradient(90deg, #2e4d5c 10%, #3A6073 90%); /* IE10 */
  	background:      -o-linear-gradient(90deg, #2e4d5c 10%, #3A6073 90%); /* Opera 11.10+ */
  	background:         linear-gradient(90deg, #2e4d5c 10%, #3A6073 90%); /* W3C */
	text-align: center ;
	color: #fff;
	/*display:flex*/

}
div#header
{
	position: fixed;
	top: 0px;
	left: 2.5%;
  	width: 95%;
  	height: 15px;
	color: #000 ;
	background:#FFF933;
	border-radius: 10px;
  	box-shadow: 8px 8px 12px #aaa;
	z-index: 10;
}
div#contenu
{
	position: sticky;
	left: 15%;
	width: 70%;
	height:150px;
	color: #9b2 ;
	background: #3A6073;
	text-align: left ;
	color: #fff;
	word-wrap: break-word;/*retour a la ligne automatique*/
	padding:5px;
}
div#contenu_centre
{
	
	position: sticky;
	
	left: 15%;
	width: 70%;
	height:150px;
	color: #fff;
	background: #3A6073;
	text-align: center ;
	color: #fff;
	word-wrap: break-word;/*retour a la ligne automatique*/
}
div#contenu_extensible_centre
{
	
	position: sticky;
	
	left: 15%;
	width: 70%;
	height:auto;
	color: #9b2 ;
	background: #3A6073;
	text-align: center ;
	color: #fff;
	word-wrap: break-word;/*retour a la ligne automatique*/
	
}

div#footer
{
	bottom: 0;
	position: fixed;
	right: 400px;

  
  width: auto;
  height: auto;
	
	color: #8a0 ;
	
}
div#trait_montant_gauche
{
background:linear-gradient(
    to bottom left, 
    transparent  calc(50% - 1px), 
    black        calc(50% - 1px), 
    black        calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
div#trait_montant_droite
{
top:230px;
left:200px;
width:100px;
height:70PX;
position:absolute;
background:linear-gradient(
    to bottom left, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}

/*DEBUT TEST NOUVEAU DEASING*/

.parent2 {
  top:40%;
  left:0%;
  position:fixed;
 display:block;
  width:100px;
  height:100px;
  background-color:transparent;
  border-radius:50%;
  z-index:20;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.menu0 {
  width:70%;
  height:70%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550).1s;
}

.menu1 {
  width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:30%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550).2s;
}
.menu2 {
 width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550).3s;
}
.menu3 {
 width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;
}
  .menu4 {
  width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .5s;
}
  .menu5 {
  width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;
}
  .menu6 {
  width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .7s;
}
  .menu7 {
  width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .8s;
  
}
   .menu8 {
  width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .9s;
 
}
   .menu9 {
  width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) 1s;
  
}
   .menu10 {
  width:200%;
  height:30%;
  background-color:Gainsboro;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:30px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) 1.1s;
  
}

.diagonale_1
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom right, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
.diagonale_2
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom right, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
.diagonale_3
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom right, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
.diagonale_4
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom right, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
.diagonale_5
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom right, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
.diagonale_6
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom left, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
.diagonale_7
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom left, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
.diagonale_8
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom left, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
.diagonale_9
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom left, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}
.diagonale_10
{
top:50px;
left:50px;
position:absolute;
background:linear-gradient(
    to bottom left, 
    transparent  calc(50% - 1px), 
    white        calc(50% - 1px), 
    white		calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

}



.mask2 {
  top:40%;
  left:0%;
  width:100px;
  height:100px;
  background:GhostWhite;
  border-radius:50%;
  position:absolute;
  z-index:21;
  color:white;
  text-align:center;
  line-height:120px;
  cursor:pointer;
  position:fixed;
  word-wrap: break-word;/*retour a la ligne automatique*/
  
}
/* icones metier*/

/*DEBUT TEST NOUVEAU DEASING*/

.parent3 {
  top:17%;
  left:0%;
  position:fixed;
 display:block;
  width:100px;
  height:100px;
  background-color:transparent;
  border-radius:50%;
  z-index:20;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
.menu0metier {
  width:70%;
  height:70%;
  background-color:#71EDDC;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550).1s;
}

.menu1metier {
  width:70%;
  height:70%;
  background-color:#71EDBC;
  border-radius:50%;
  position:absolute;
  color:black;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550).2s;
}
.menu2metier {
 width:70%;
  height:70%;
  background-color:#98ED71;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550).3s;
}
.menu3metier {
 width:70%;
  height:70%;
  background-color:#E7ED71;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;
}
  .menu4metier {
  width:70%;
  height:70%;
  background-color:#EDC771;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .5s;
}
  .menu5metier {
  width:70%;
  height:70%;
  background-color:#EDAD71;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;
}
  .menu6metier {
  width:70%;
  height:70%;
  background-color:#D13026;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .7s;
}
  .menu7metier {
  width:70%;
  height:70%;
  background-color:#2686D1;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .8s;
  
}
   .menu8metier {
  width:70%;
  height:70%;
  background-color:#2E26D1;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  line-height:70px;
  cursor:pointer;
  top:25%;
  left:25%;
  z-index:19;
  transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .9s;
 
}
.mask3 {
  top:17%;
  left:0%;
  width:100px;
  height:100px;
  background:GhostWhite;
  border-radius:50%;
  position:absolute;
  z-index:21;
  color:white;
  text-align:center;
  line-height:120px;
  cursor:pointer;
  position:fixed;
  word-wrap: break-word;/*retour a la ligne automatique*/
  
}
.bouton_urgence
{
  width:100px;
  height:100px;
  background-color:red;
  border-radius:50%;
  position:absolute;
  color:white;
  text-align:center;
  font: 1.8em "Trebuchet MS", helvetica, sans-serif ;
  line-height:100px;
  cursor:pointer;
  top:5%;
  left:60%;
  z-index:19;
  transition: all 2500ms cubic-bezier(0.680, -0.550, 0.265, 1.550) 1.0s;
  
}