.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}








/* .form_eval_cap1{
 position:absolute;top:24%;left:20%;

 }
 .bande1{
  height: 100px;
  opacity: 0.2;
  background-color: #00008B;
 }
 .bande1{
  height: 100px;
  opacity: 0.2;
  background-color: yellow;
 }*/
input [type=number]{
  -moz-appearance: textfield;
}



 .span_joueur1{
  z-index: 4;
 }
 .div_form1{
  position: absolute;top: 20%;left: 86.5%;
width: 10%;
height: 20px;
 }
.trait_vertical1{
  width: 4px;
 height:  535px;
 position: absolute;top: 1%;left: 28%;
 
 background-color:#999;
 border: inset 0.5px #999;
 color: #999;  
 z-index: 2;
}
.trait_vertical2{
  width: 4px;
 height:  535px;
 position: absolute;top: 1%;left: 57%;
 
 background-color:#999;
 border: inset 0.5px #999;
 color: #999;  
 z-index: 2;
}
.trait_vertical3{
  width: 4px;
 height:  535px;
 position: absolute;top: 1%;left: 87%;
 
 background-color:#999;
 border: inset 0.5px #999;
 color: #999;  
 z-index: 2;
}
 .div_plateforme_jeu{
  width: 80%;
  height: 550px;
 position: absolute;top: 200px;left: 10%; 
 background-color: #FAF0E6;
 border: solid 5px #999;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 12px 12px 18px #999;

 }
 .but_joueur1{
 position: absolute;top: 55%;left: 80%; 
 }
  .but_joueur2{
 position: absolute;top: 55%;left: 80%; 
 }
 .nom_du_joueur1{
position: absolute;top: 60%;left: 89%;
width: 75px;
height: 20px;
background-color: white;
border: inset #808000;
text-align: center;
font-size: 20px; 
color: red; 
font-weight: bold;

 }
 .nom_du_joueur2{
position: absolute;top: 70%;left: 89%;
width: 100px;
height: 20px;
background-color: white;
border: inset #808000;
text-align: center;
font-size: 20px; 
color: blue; 
font-weight: bold;

 }
 .cache_led_blanc1{
position: absolute;top: 5%;left: 7.8%;
 height: 100px;
  width: 100px;
  
  background-color: white;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,#A9A9A9);
 }
.cache_led_blanc2{
position: absolute;top: 5%;left: 37%; 
 height: 100px;
  width: 100px;
  
  background-color: white;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,#A9A9A9);
 }
 .cache_led_blanc3{
  position: absolute;top: 5%;left: 67%;
 height: 100px;
  width: 100px;
  
  background-color: white;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,#A9A9A9);
 }
 .cache_led_blanc4{
  position: absolute;top: 40%;left: 7.8%;
 height: 100px;
  width: 100px;
  
  background-color: white;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,#A9A9A9);
 }
 .cache_led_blanc5{
   position: absolute;top: 40%;left:37%; 
 height: 100px;
  width: 100px;
  
  background-color: white;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,#A9A9A9);
 }
 .cache_led_blanc6{
   position: absolute;top: 40%;left: 67%;
 height: 100px;
  width: 100px;
  
  background-color: white;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,#A9A9A9);
 }
 .cache_led_blanc7{
  position: absolute;top: 75%;left: 7.8%; 
 height: 100px;
  width: 100px;
  
  background-color: white;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,#A9A9A9);
 }
 .cache_led_blanc8{
    position: absolute;top: 75%;left: 37%; 
 height: 100px;
  width: 100px;
  
  background-color: white;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,#A9A9A9);
 }
 .cache_led_blanc9{
   position: absolute;top: 75%;left: 67%;
 height: 100px;
  width: 100px;
  
  background-color: white;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,#A9A9A9);
 }

/************************************************************************************************/
.cache_led_bleu1{
position: absolute;top: 5%;left: 7.8%;
 height: 100px;
  width: 100px;
  
  background-color: blue;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px blue;
-webkit-box-shadow: 4px 4px 4px blue;
box-shadow: 4px 4px 4px blue;
 }
.cache_led_bleu2{
position: absolute;top: 5%;left: 37%; 
 height: 100px;
  width: 100px;
  
  background-color: blue;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px blue;
-webkit-box-shadow: 4px 4px 4px blue;
box-shadow: 4px 4px 4px blue;
 }
 .cache_led_bleu3{
 position: absolute;top: 5%;left: 67%;
 height: 100px;
  width: 100px;
  
  background-color: blue;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px blue;
-webkit-box-shadow: 4px 4px 4px blue;
box-shadow: 4px 4px 4px blue;
 }
 .cache_led_bleu4{
 position: absolute;top: 40%;left: 7.8%;
 height: 100px;
  width: 100px;
  
  background-color: blue;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px blue;
-webkit-box-shadow: 4px 4px 4px blue;
box-shadow: 4px 4px 4px blue;
 }
 .cache_led_bleu5{
 position: absolute;top: 40%;left: 37%;
 height: 100px;
  width: 100px;
  
  background-color: blue;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px blue;
-webkit-box-shadow: 4px 4px 4px blue;
box-shadow: 4px 4px 4px blue;
 }
 .cache_led_bleu6{
 position: absolute;top: 40%;left: 67%;
 height: 100px;
  width: 100px;
  
  background-color: blue;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px blue;
-webkit-box-shadow: 4px 4px 4px blue;
box-shadow: 4px 4px 4px blue;
 }
 .cache_led_bleu7{
  position: absolute;top: 75%;left: 7.8%; 
 height: 100px;
  width: 100px;
  
  background-color: blue;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px blue;
-webkit-box-shadow: 4px 4px 4px blue;
box-shadow: 4px 4px 4px blue;
 }
 .cache_led_bleu8{
  position: absolute;top: 75%;left: 37%; 
 height: 100px;
  width: 100px;
  
  background-color: blue;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px blue;
-webkit-box-shadow: 4px 4px 4px blue;
box-shadow: 4px 4px 4px blue;
 }
 .cache_led_bleu9{
  position: absolute;top: 75%;left: 67%; 
 height: 100px;
  width: 100px;
  
  background-color: blue;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px blue;
-webkit-box-shadow: 4px 4px 4px blue;
box-shadow: 4px 4px 4px blue;
 }
/*********************************************************************************************/
.cache_led_rouge1{
position: absolute;top: 5%;left: 7.8%;
 height: 100px;
  width: 100px;
  
  background-color: red;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px red;
-webkit-box-shadow: 4px 4px 4px red;
box-shadow: 4px 4px 4px red;
 }
.cache_led_rouge2{
position: absolute;top: 5%;left: 37%; 
 height: 100px;
  width: 100px;
  
  background-color: red;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px red;
-webkit-box-shadow: 4px 4px 4px red;
box-shadow: 4px 4px 4px red;
 }
 .cache_led_rouge3{
 position: absolute;top: 5%;left: 67%;
 height: 100px;
  width: 100px;
  
  background-color: red;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px red;
-webkit-box-shadow: 4px 4px 4px red;
box-shadow: 4px 4px 4px red;
 }
 .cache_led_rouge4{
 position: absolute;top: 40%;left: 7.8%;
 height: 100px;
  width: 100px;
  
  background-color: red;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px red;
-webkit-box-shadow: 4px 4px 4px red;
box-shadow: 4px 4px 4px red;
 }
 .cache_led_rouge5{
 position: absolute;top: 40%;left: 37%;
 height: 100px;
  width: 100px;
  
  background-color: red;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px red;
-webkit-box-shadow: 4px 4px 4px red;
box-shadow: 4px 4px 4px red;
 }
 .cache_led_rouge6{
 position: absolute;top: 40%;left: 67%;
 height: 100px;
  width: 100px;
  
  background-color: red;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px red;
-webkit-box-shadow: 4px 4px 4px red;
box-shadow: 4px 4px 4px red;
 }
 .cache_led_rouge7{
  position: absolute;top: 75%;left: 7.8%; 
 height: 100px;
  width: 100px;
  
  background-color: red;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px red;
-webkit-box-shadow: 4px 4px 4px red;
box-shadow: 4px 4px 4px red;
 }
 .cache_led_rouge8{
  position: absolute;top: 75%;left: 37%; 
 height: 100px;
  width: 100px;
  
  background-color: red;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px red;
-webkit-box-shadow: 4px 4px 4px red;
box-shadow: 4px 4px 4px red;
 }
 .cache_led_rouge9{
  position: absolute;top: 75%;left: 67%; 
 height: 100px;
  width: 100px;
  
  background-color: red;
  
z-index: 2;
margin: 0;
display: block;
border: solid 1.5px grey;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;

-moz-box-shadow: 4px 4px 4px red;
-webkit-box-shadow: 4px 4px 4px red;
box-shadow: 4px 4px 4px red;
 }
/****************************************************************************************************/
.bouton_rouge1{
position: absolute;top: 12%;left: 3%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,red);
 }

.bouton_rouge2{
 position: absolute;top: 12%;left: 32.5%; 
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,red);
 }
 .bouton_rouge3{
 position: absolute;top: 12%;left: 62.1%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,red);
 }
 .bouton_rouge4{
  position: absolute;top: 46%;left: 3%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,red);
 }
 .bouton_rouge5{
 position: absolute;top: 46%;left: 32.5%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,red);
 }
 .bouton_rouge6{
  position: absolute;top: 46%;left: 62.1%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,red);
 }
 .bouton_rouge7{
position: absolute;top: 82%;left: 3%; 
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,red);
 }
 .bouton_rouge8{
  position: absolute;top: 82%;left: 32.5%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,red);
 }
 .bouton_rouge9{
 position: absolute;top: 82%;left: 62.1%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,red);
 }

  .cadre_bouton_rouge1{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 11%;left: 2.6%;
  z-index: 3;
 }
  .cadre_bouton_rouge2{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 11%;left: 32%;
  z-index:3;
 }
  .cadre_bouton_rouge3{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 11%;left: 61.7%;
  z-index: 3;
 }
  .cadre_bouton_rouge4{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 45%;left: 2.6%;
 }
  .cadre_bouton_rouge5{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 45%;left: 32%;
 }
  .cadre_bouton_rouge6{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 45%;left: 61.7%;
 }
  .cadre_bouton_rouge7{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 81%;left: 2.6%;
 }
  .cadre_bouton_rouge8{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 81%;left: 32%;
 }
  .cadre_bouton_rouge9{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 81%;left: 61.7%;
 }
/*****************************************************************************************************/
.bouton_bleu1{
position: absolute;top: 12%;left: 21.5%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,blue);
 }

.bouton_bleu2{
 position: absolute;top: 12%;left: 50.7%; 
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,blue);
 }
 .bouton_bleu3{
 position: absolute;top: 12%;left: 81%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,blue);
 }
 .bouton_bleu4{
  position: absolute;top: 46%;left: 21.5%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,blue);
 }
 .bouton_bleu5{
 position: absolute;top: 46%;left: 50.7%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,blue);
 }
 .bouton_bleu6{
  position: absolute;top: 46%;left: 81%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,blue);
 }
 .bouton_bleu7{
position: absolute;top: 82%;left: 21.5%; 
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,blue);
 }
 .bouton_bleu8{
  position: absolute;top: 82%;left: 50.7%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,blue);
 }
 .bouton_bleu9{
 position: absolute;top: 82%;left: 81%;
 height: 30px;
  width: 30px;
  
  background-color: white;
  
z-index: 500;
margin: 0;
display: block;
border: solid 1px;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFFAF0 ,blue);
 }

  .cadre_bouton_bleu1{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 11%;left: 21%;
  z-index: 3;
 }
  .cadre_bouton_bleu2{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 11%;left: 50.2%;
  z-index:3;
 }
  .cadre_bouton_bleu3{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 11%;left: 80.5%;
  z-index: 3;
 }
  .cadre_bouton_bleu4{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 45%;left: 21%;
 }
  .cadre_bouton_bleu5{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 45%;left: 50.2%;
 }
  .cadre_bouton_bleu6{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 45%;left: 80.5%;
 }
  .cadre_bouton_bleu7{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 81%;left: 21%;
 }
  .cadre_bouton_bleu8{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 81%;left: 50.2%;
 }
  .cadre_bouton_bleu9{
  height: 40px;
  width: 40px;
  background-color: grey;
  border: solid 1px;
  position: absolute;top: 81%;left: 80.5%;
 }



/*************************************************************************************************/


 .bande3{
  height: 2px;
  width: 54%;
  background-color: red;
   position:absolute; top:360px;left:32%;
 }
 .info_courant_contacteur{
  width: 15px;
    height: 15px;
    background: green;
    text-align: center;
    -webkit-border-radius: 7.5px / 7.5px;
    -moz-border-radius:    7.5px / 7.5px; 
    border-radius:         7.5px / 7.5px;
   position: absolute;top: 498px;left: 63%; 
    z-index: 500;
    opacity: 0.5;
 }

 .text_info_courant_contacteur{
   border: dashed 1px;
 font-size: 14px;
  margin: auto;
  background-color: #FFFFF0;
  width: 200px;
  padding: 4px;
  position: absolute;top: 555px;left: 64%; 
  z-index: 500;
 }
.info_courant_chauffe_eau{
  width: 15px;
    height: 15px;
    background: green;
    text-align: center;
    -webkit-border-radius: 7.5px / 7.5px;
    -moz-border-radius:    7.5px / 7.5px; 
    border-radius:         7.5px / 7.5px;
  position: absolute;top: 592px;left: 82.5%; 
    z-index: 500;
    opacity: 0.5;
 }

 .text_info_courant_chauffe_eau{
   border: dashed 1px;
 font-size: 14px;
  margin: auto;
  background-color: #FFFFF0;;
  width: 200px;
  padding: 4px;
  position: absolute;top: 555px;left: 64%; 
  z-index: 500;
 }
.info_courant_general_installation{
  width: 15px;
    height: 15px;
    background: green;
    text-align: center;
    -webkit-border-radius: 7.5px / 7.5px;
    -moz-border-radius:    7.5px / 7.5px; 
    border-radius:         7.5px / 7.5px;
    position: absolute;top: 106px;left: 23%; 
    z-index: 500;
    opacity: 0.5;
 }

 .text_info_courant_general_installation{
  border: dashed 1px;
 font-size: 14px;
  margin: auto;
  background-color: #FFFFF0;
  width: 200px;
  padding: 4px;
  position: absolute;top: 50px;left:24.5%; 
  z-index: 500;
 }
.info_courant_total_circuit{
  width: 13px;
    height: 13px;
    font-size: 12px;
    background: green;
    text-align: center;
    -webkit-border-radius: 6.5px / 6.5px;
    -moz-border-radius:    6.5px / 6.5px; 
    border-radius:         6.5px / 6.5px;
    position: absolute;top: 98.49px;left: 47%; 
    z-index: 500;
    opacity: 0.5;
 }

 .text_info_courant_total_circuit{
  border: dashed 1px;
 font-size: 14px;
  margin: auto;
  background-color: #FFFFF0;;
  width: 200px;
  padding: 4px;
  position: absolute;top: 10px;left:40%; 
  z-index: 500;
 }





.commencer{
  position:absolute; top:400px;left:35%;
  text-align: center;
  color: white;
  width: 35%;
  height: 30px;
  margin: 2px;
  
}
.commencer:hover  {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
 .titre1_hp_hc{
 position:absolute; top:300px;left:32.5%;
 font-size: 44px;
 text-align: center;
 color: white;
 }
 .titre2_hp_hc{
  position:absolute; top:450px;left:48.5%;
  font-size: 44px;
   text-align: center;
    color: white;
 }
 .label_inetr_differentiel{
width: 10.5%;
height: 50px;
font-size: 14px;
text-align: center;
  position:absolute; top:400px;left:32.5%;
  z-index: 0;
  opacity: 0.6;
 }
 .label_disjoncteur_2A{
width: 10.5%;
    height: 50px;
    font-size: 14px;
    text-align: center;
position:absolute; top:400px;left:46%;
  z-index: 0;
  opacity: 0.6;
 }
 .label_disjoncteur_25A{
width: 10.5%;
    height: 50px;
    font-size: 14px;
    text-align: center;
position:absolute; top:400px;left:59%;
  z-index: 0;
  opacity: 0.6;
 }
 .label_contacteur{
width: 10.5%;
    height: 50px;
    font-size: 14px;
    text-align: center;
position:absolute; top:400px;left:72.5%;
  z-index: 0;
  opacity: 0.6;
 }
.label_compteur_energie{
width: 10.5%;
    height: 50px;
    font-size: 14px;
    text-align: center;
position:absolute; top:366px;left:3.6%;
  z-index: 0;
  opacity: 0.6;
 }
 .label_fournisseur_energie{
width: 10.5%;
    height: 50px;
    font-size: 14px;
    text-align: center;
position:absolute; top:110px;left:3.4%;
  z-index: 500;
  opacity: 0.6;
 }
 .label_disjoncteur_edf{
width: 10.5%;
    height: 50px;
    font-size: 14px;
    text-align: center;
position:absolute; top:450px;left:18.2%;
  z-index: 0;
  opacity: 0.6;
 }
 .label_chauffe_eau{
width: 10.5%;
    height: 50px;
    font-size: 14px;
    text-align: center;
position:absolute; top:564px;left:83.7%;
  z-index: 0;
  opacity: 0.6;

 }
.div_description_inter_differentiel{
  width: 10.13%;
    height: 258px;
    position:absolute; top:122px;left:32.75%;
  z-index: 0;
  
}

 .description_inter_differentiel{
  
    font-size: 0.57em;
  width: 95%;
  height: 96%;
border: 1px solid;
    margin-left: 0px;
 }
 .div_description_inter_differentiel:hover {
-ms-transform: scale(1.5);
  -webkit-transform: scale(1.5); 
  transform: scale(1.5); 
z-index: 500;
}

 .div_description_disjoncteur_2A{
  width: 10.13%;
    height: 258px;
    position:absolute; top:122px;left:45.75%;
  z-index: 0;
  
}

 .description_disjoncteur_2A{
  
    font-size: 0.57em;
  width: 95%;
  height: 96%;
border: 1px solid;
    margin-left: 0px;
 }
 .div_description_disjoncteur_2A:hover {
-ms-transform: scale(1.5);
  -webkit-transform: scale(1.5); 
  transform: scale(1.5); 
z-index: 500;
}



 .div_description_disjoncteur_25A{
  width: 10.13%;
    height: 258px;
    position:absolute; top:122px;left:58.75%;
  z-index: 0;
  
}

 .description_disjoncteur_25A{
  
    font-size: 0.57em;
  width: 95%;
  height: 96%;
border: 1px solid;
    margin-left: 0px;
 }
 .div_description_disjoncteur_25A:hover {
-ms-transform: scale(1.5);
  -webkit-transform: scale(1.5); 
  transform: scale(1.5); 
z-index: 500;
}

 .div_description_contacteur{
  width: 10.13%;
    height: 258px;
    position:absolute; top:122px;left:72.25%;
  z-index: 0;
  
}

 .description_contacteur{
  
    font-size: 0.57em;
  width: 95%;
  height: 96%;
border: 1px solid;
    margin-left: 0px;
 }
 .div_description_contacteur:hover {
-ms-transform: scale(1.5);
  -webkit-transform: scale(1.5); 
  transform: scale(1.5); 
z-index: 500;
}

 .simul_contacteur{
  width: 9.5%;
height: 254px;
background-color: #B0C4DE;
position: absolute;top: 134px;left: 72.6%;
z-index: 500;
 }
 /*
#simul_contacteur:hover  {
 border: solid 1px blue;

}
*/





.carre1_contacteur{
 height: 16px;
  width: 16px;
   position: absolute;top: 92px;left: 34.3%;
   color: #B8860B;
  background-color: #B8860B;
  border: inset #808000;
  z-index: 2;
}
.carre2_contacteur{
 height: 16px;
  width: 16px;
   position: absolute;top: 92px;left: 56%;
   color: #B8860B;
  background-color: #B8860B;
  border: inset #808000;
  z-index: 2;
}
.carre3_contacteur{
 height: 16px;
  width: 16px;
   position: absolute;top: 168px;left: 36.4%;
   color: #B8860B;
  background-color: #B8860B;
  border: inset #808000;
  z-index: 2;
}
.carre4_contacteur{
 height: 16px;
  width: 16px;
   position: absolute;top: 168px;left: 59%;
   color: #B8860B;
  background-color: #B8860B;
  border: inset #808000;
  z-index: 2;
}




.point1_contacteur{
 height: 15px;
  width: 15px;
  
  background-color: black;
  position: absolute;top: 96px;left: 37%;
z-index: 500;
margin: 0;
display: block;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 6px 6px,#FFA500,#000);
}
.point2_contacteur{
  height: 15px;
  width: 15px;
  
  background-color: black;
  position: absolute;top: 96px;left: 58%;
z-index: 500;
margin: 0;
display: block;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 4px 4px,#FFA500,#000);
}
.point3_contacteur{
  height: 15px;
  width: 15px;
  
  background-color: black;
  position: absolute;top: 172px;left: 39%;
z-index: 500;
margin: 0;
display: block;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 4px 4px,#FFA500,#000);
}
.point4_contacteur{
 height: 15px;
  width: 15px;
  
  background-color: black;
  position: absolute;top: 172px;left: 62.5%;
z-index: 500;
margin: 0;
display: block;
-webkit-border-radius: 50% / 50%;
-moz-border-radius:    50% / 50%; 
border-radius:         50% / 50%;
background: radial-gradient(circle at 4px 4px,#FFA500,#000);
}

.vertical1_contacteur{
   height: 36px;
  width: 7px;
  color: #B8860B;
  background-color: #B8860B;
    position: absolute;top: 66px;left: 38%;
z-index: 1;
border: inset #D2691E ;
background: radial-gradient(circle at 4px 4px,#FFA500,#000);
}
.vertical2_contacteur{
   height: 36px;
  width: 7px;
  color: #B8860B;
  background-color: #B8860B;
    position: absolute;top: 66px;left: 58%;
z-index: 1;
border: inset #D2691E ;
background: radial-gradient(circle at 4px 4px,#FFA500,#000);
}
.vertical3_contacteur{
   height:38px;
  width: 7px;
  color: #B8860B;
  background-color: #B8860B;
    position: absolute;top: 174px;left: 39%;
z-index: 1;
border: inset #D2691E ;
background: radial-gradient(circle at 4px 4px,#FFA500,#000);
}
.vertical4_contacteur{
   height: 38px;
  width: 7px;
  color: #B8860B;
  background-color: #B8860B;
  position: absolute;top: 174px;left: 61.7%;
z-index: 1;
border: inset #D2691E ;
background: radial-gradient(circle at 4px 4px,#FFA500,#000);
}
.vertical5_contacteur{
   height: 70px;
  width: 3%;
  color: #B8860B;
  background-color: #B8860B;
  position: absolute;top: 95px;left: 38.7%;
z-index: 1;

border: inset #D2691E ;
}
.vertical6_contacteur{
  height: 70px;
  width: 3%;
  color: #B8860B;
  background-color: #B8860B;
  position: absolute;top: 95px;left: 62%;
z-index: 1;

border: inset #D2691E ;
}



.oblique1_contacteur{
  height: 60px;
  width: 3%;
  color: #B8860B;
  background-color: #B8860B;
  position: absolute;top: 114px;left: 33%;
z-index: 1;
transform: rotate(-24deg);
border: inset #D2691E ;
}

.oblique2_contacteur{
  height: 60px;
  width: 3%;
  color: #B8860B;
  background-color: #B8860B;
  position: absolute;top: 114px;left: 55%;
z-index: 1;
transform: rotate(-24deg);
border: inset #D2691E ;
}


.A1_simul_contacteur{
size: 16px;
position: absolute;top: 240px;left: 21%;
z-index: 500;
}
.A2_simul_contacteur{
size: 16px;
position: absolute;top: 240px;left: 66%;
z-index: 500;
}
.N_simul_contacteur{
size: 16px;
position: absolute;top: 50px;left: 24%;
z-index: 500;
}
.PH_simul_contacteur{
size: 16px;
position: absolute;top: 50px;left: 64%;
z-index: 500;
}
.bobine_simul_contacteur{
  font-size:  18px;
height: 60px;
width: 20%;
border: solid 0.5px;
position: absolute;top: 120px;left: 1%;
z-index: 500;
border-style: dashed 1px;
opacity: 0.5;
}



.anneau_1{
   width: 80%;
    height: 10%;
    border: 1px solid;
   
    -webkit-border-radius: 70% / 75%;
    -moz-border-radius:   70% / 75%; 
    border-radius:         70% / 75%;
    position: absolute;top: 7px;left: 2%;
    z-index: 2;
border-style: dashed;
}
.anneau_2{
   width: 80%;
    height: 10%;
    border: 1px solid;
   
    -webkit-border-radius: 70% / 75%;
    -moz-border-radius:   70% / 75%; 
    border-radius:         70% / 75%;
    position: absolute;top: 14px;left: 2%;
    z-index: 2;
border-style: dashed;
}
.anneau_3{
   width: 80%;
    height: 10%;
    border: 1px solid;
   
    -webkit-border-radius: 70% / 75%;
    -moz-border-radius:   70% / 75%; 
    border-radius:         70% / 75%;
    position: absolute;top: 21px;left: 2%;
    z-index: 2;
border-style: dashed;
}
.anneau_4{
   width: 80%;
    height: 10%;
    border: 1px solid;
   
    -webkit-border-radius: 70% / 75%;
    -moz-border-radius:   70% / 75%; 
    border-radius:         70% / 75%;
    position: absolute;top: 28px;left: 2%;
    z-index: 2;
border-style: dashed;
}
.anneau_5{
   width: 80%;
    height: 10%;
    border: 1px solid;
   
    -webkit-border-radius: 70% / 75%;
    -moz-border-radius:   70% / 75%; 
    border-radius:         70% / 75%;
    position: absolute;top: 35px;left: 2%;
    z-index: 2;
border-style: dashed;
}
.anneau_6{
   width: 80%;
    height: 10%;
    border: 1px solid;
   
    -webkit-border-radius: 70% / 75%;
    -moz-border-radius:   70% / 75%; 
    border-radius:         70% / 75%;
    position: absolute;top: 42px;left: 2%;
    z-index: 1;
    border-style: dashed;

}
.connexion_bobine1{
  width: 1.4%;
    height: 21.5%;
     z-index: 2;
     color: black;
     background-color: black;
      position: absolute;top: 180px;left: 3%;
}
.connexion_bobine2{
  width: 1.1%;
    height: 18.5%;
     z-index: 2;
     color: black;
     background-color: black;
      position: absolute;top: 180px;left: 15%;
}
.connexion_bobine3{
  width: 48%;
    height: 0.5%;
     z-index: 2;
     color: black;
     background-color: black;
      position: absolute;top: 226px;left: 15%;
}
.connexion_bobine4{
  width: 36%;
    height: 0.5%;
     z-index: 2;
     color: black;
     background-color: black;
      position: absolute;top: 234px;left: 3%;
}
.connexion_bobine5{
  width: 1.3%;
    height: 3%;
     z-index: 2;
     color: black;
     background-color: black;
      position: absolute;top: 234px;left: 38%;
}
.connexion_bobine6{
 width: 1.3%;
    height: 8%;
     z-index: 2;
     color: black;
     background-color: black;
      position: absolute;top: 227px;left: 62%;
}
/**********************************************************************************/
.fleche_arrivee_energie{
font-size: 30px;
  font-weight: bold;
  position: absolute;top: 113px;left: 8%;
z-index: 500;
opacity: 0.3
}

 .fleche_deuxcinq_gauche_rouge1{
  font-size: 30px;
  position: absolute;top: 368px;left: 50%;
z-index: 500;
font-weight: bold;
color: red;
opacity: 0.5;
 }
 .fleche_deuxcinq_haut_bleu1{
  font-size: 30px;
 position: absolute;top: 560px;left: 75.9%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_haut_bleu2{
  font-size: 30px;
 position: absolute;top: 500px;left: 75.9%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
  .fleche_deuxcinq_haut_bleu3{
  font-size: 30px;
 position: absolute;top: 440px;left: 75.9%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
  .fleche_deuxcinq_haut_bleu4{
  font-size: 30px;
 position: absolute;top: 380px;left: 75.9%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_haut_bleu5{
  font-size: 30px;
position: absolute;top: 120px;left: 75.4%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_haut_bleu6{
  font-size: 30px;
position: absolute;top: 386px;left: 61.4%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_haut_bleu7{
  font-size: 30px;
position: absolute;top: 116px;left: 60.2%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_haut_bleu8{
  font-size: 30px;
position: absolute;top: 124px;left: 47.6%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_haut_bleu9{
  font-size: 30px;
position: absolute;top: 124px;left: 34%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_haut_bleu10{
  font-size: 30px;
position: absolute;top: 427px;left: 20.8%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_haut_bleu11{
  font-size: 30px;
position: absolute;top: 135px;left: 21%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
  .fleche_deuxcinq_haut_bleu12{
  font-size: 30px;
position: absolute;top: 400px;left: 5.4%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
  .fleche_deuxcinq_haut_bleu13{
  font-size: 30px;
position: absolute;top: 340px;left: 5.4%;
z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 /********************************************************************/
.fleche_uncinq_haut_bleu1{
  font-size: 22px;
position: absolute;top: 380px;left: 50.3%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_haut_bleu2{
 font-size: 22px;
position: absolute;top: 430px;left: 50.3%;
   z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_haut_bleu3{
 font-size: 22px;
position: absolute;top: 124px;left: 47.5%;
   z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_haut_bleu4{
 font-size: 22px;
position: absolute;top: 124px;left: 34.3%;
   z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_haut_bleu5{
 font-size: 22px;
position: absolute;top: 427px;left: 21%;
   z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_haut_bleu6{
 font-size: 22px;
position: absolute;top: 139px;left: 21%;
   z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_haut_bleu7{
 font-size: 22px;
position: absolute;top: 404px;left: 5.6%;
   z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_haut_bleu8{
 font-size: 22px;
position: absolute;top: 350px;left: 5.6%;
   z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }

/*******************************************************************************/
.fleche_deuxcinq_bas_bleu1{
  font-size: 30px;
  position: absolute;top: 560px;left: 91.9%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu2{
  font-size: 30px;
  position: absolute;top: 140px;left: 71.4%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu3{
  font-size: 30px;
  position: absolute;top: 200px;left: 71.4%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu4{
  font-size: 30px;
  position: absolute;top: 260px;left: 71.4%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu5{
  font-size: 30px;
  position: absolute;top: 320px;left: 71.4%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu6{
  font-size: 30px;
  position: absolute;top: 382px;left: 71.4%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_bas_bleu7{
  font-size: 30px;
  position: absolute;top: 129px;left: 49.4%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu8{
  font-size: 30px;
  position: absolute;top: 126px;left: 38.4%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu9{
  font-size: 30px;
  position: absolute;top: 128px;left: 31.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu10{
  font-size: 30px;
  position: absolute;top: 188px;left: 31.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu11{
  font-size: 30px;
  position: absolute;top: 248px;left: 31.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu12{
  font-size: 30px;
  position: absolute;top: 308px;left: 31.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu13{
  font-size: 30px;
  position: absolute;top: 368px;left: 31.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_bas_bleu14{
  font-size: 30px;
  position: absolute;top: 428px;left: 31.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_bas_bleu15{
  font-size: 30px;
  position: absolute;top: 140px;left: 17%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_bas_bleu16{
  font-size: 30px;
  position: absolute;top: 206px;left: 17%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_bas_bleu17{
  font-size: 30px;
  position: absolute;top: 266px;left: 17%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_bas_bleu18{
  font-size: 30px;
  position: absolute;top: 326px;left: 17%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_bas_bleu19{
  font-size: 30px;
  position: absolute;top: 386px;left: 17%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 /*******************************************************************************/
 .fleche_uncinq_bas_bleu1{
  font-size: 22px;
  position: absolute;top: 380px;left: 75.2%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu2{
  font-size: 22px;
  position: absolute;top: 430px;left: 75.2%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_bas_bleu3{
  font-size: 22px;
  position: absolute;top: 126px;left: 38.8%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu4{
  font-size: 22px;
  position: absolute;top: 128px;left: 31.8%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu5{
  font-size: 22px;
  position: absolute;top: 188px;left: 31.8%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu6{
  font-size: 22px;
  position: absolute;top: 248px;left: 31.8%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu7{
  font-size: 22px;
  position: absolute;top: 308px;left: 31.8%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu8{
  font-size: 22px;
  position: absolute;top: 368px;left: 31.8%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu9{
  font-size: 22px;
  position: absolute;top: 428px;left: 31.8%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_bas_bleu10{
  font-size: 22px;
  position: absolute;top: 142px;left: 17%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu11{
  font-size: 22px;
  position: absolute;top: 206px;left: 17%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu12{
  font-size: 22px;
  position: absolute;top: 266px;left: 17%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu13{
  font-size: 22px;
  position: absolute;top: 326px;left: 17%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_bas_bleu14{
  font-size: 22px;
  position: absolute;top: 386px;left: 17%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }




/***************************************************************************/
.fleche_deuxcinq_gauche_bleu1{
  font-size: 30px;
  position: absolute;top: 601px;left: 88.85%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu2{
  font-size: 30px;
  position: absolute;top: 601px;left: 85%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu3{
  font-size: 30px;
  position: absolute;top: 601px;left: 81%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_gauche_bleu4{
  font-size: 30px;
  position: absolute;top: 601px;left: 77%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu5{
  font-size: 30px;
  position: absolute;top: 104px;left: 72.35%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu6{
  font-size: 30px;
 position: absolute;top: 437px;left: 67.8%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu7{
  font-size: 30px;
 position: absolute;top: 437px;left: 63.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu8{
  font-size: 30px;
position: absolute;top: 104px;left: 57.1%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu9{
  font-size: 30px;
position: absolute;top: 104px;left: 53.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu10{
  font-size: 30px;
position: absolute;top: 104px;left: 49.7%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu11{
  font-size: 30px;
position: absolute;top: 104px;left: 44%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu12{
  font-size: 30px;
position: absolute;top: 104px;left: 40.2%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu13{
  font-size: 30px;
position: absolute;top: 104px;left: 32%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu14{
  font-size: 30px;
position: absolute;top: 457px;left: 27.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu15{
  font-size: 30px;
position: absolute;top: 457px;left: 23.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
.fleche_deuxcinq_gauche_bleu16{
  font-size: 30px;
position: absolute;top: 120px;left: 18.2%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_gauche_bleu17{
  font-size: 30px;
position: absolute;top: 425px;left: 14.5%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_gauche_bleu18{
  font-size: 30px;
position: absolute;top: 425px;left: 10.35%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 .fleche_deuxcinq_gauche_bleu19{
  font-size: 30px;
position: absolute;top: 425px;left: 5.8%;
  z-index: 500;
font-weight: bold;
color: blue;
opacity: 0.5;
 }
 /*******************************************************************************/
.fleche_uncinq_gauche_bleu1{
  font-size: 22px;
 position: absolute;top: 458px;left: 73.7%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu2{
  font-size: 22px;
 position: absolute;top: 458px;left: 70%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu3{
  font-size: 22px;
 position: absolute;top: 458px;left: 66%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu4{
  font-size: 22px;
 position: absolute;top: 458px;left: 62%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu5{
  font-size: 22px;
 position: absolute;top: 458px;left: 58%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_gauche_bleu6{
  font-size: 22px;
 position: absolute;top: 458px;left: 54%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_gauche_bleu7{
  font-size: 22px;
 position: absolute;top: 458px;left: 50.5%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 
.fleche_uncinq_gauche_bleu8{
  font-size: 22px;
position: absolute;top: 110px;left: 44%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu9{
  font-size: 22px;
 position: absolute;top: 110px;left: 40.2%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu10{
  font-size: 22px;
 position: absolute;top: 110px;left: 32%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu11{
  font-size: 22px;
position: absolute;top: 465px;left: 27.5%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu12{
  font-size: 22px;
position: absolute;top: 465px;left: 23.5%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu13{
  font-size: 22px;
position: absolute;top: 126px;left: 18.7%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu14{
  font-size: 22px;
position: absolute;top: 431px;left: 15%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
.fleche_uncinq_gauche_bleu15{
  font-size: 22px;
position: absolute;top: 431px;left: 10.3%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
 .fleche_uncinq_gauche_bleu16{
  font-size: 22px;
position: absolute;top: 431px;left: 6%;
  z-index: 500;
font-weight: bold;
color: #1E90FF;
opacity: 0.5;
 }
/*********************************************************************************************************/
.fleche_tension_bloc0{
 font-size: 18px;
  color: red;
  position: absolute;top: 74px;left: 33%;
z-index: 500;
}
.fleche_tension_bloc1{
  font-size: 18px;
  color: red;
  position: absolute;top: 75px;left: 45%;
z-index: 500;
}
.fleche_tension_bloc2{
   font-size: 18px;
  color: red;
  position: absolute;top: 75px;left: 57%;
z-index: 500;
}
.fleche_tension_bloc3{
    font-size: 16px;
  color: red;
  position: absolute;top: 75px;left: 73.5%;
z-index: 500;
}
.fleche_tension_bloc4{
   font-size: 18px;
  color: red;
   position: absolute;top: 565px;left: 81%;
   z-index: 500;
}
.fleche_tension_uncinq_rouge{
   font-size: 18px;
  color: red;
position: absolute;top: 485px;left: 40%;
z-index: 500;
}
.fleche_tension_uncinq_noir{
   font-size: 18px;
  color: red;
  position: absolute;top: 528px;left: 40%;
  z-index: 500;
}
/***************************************************************************************************/


 .A1{
position: absolute;top: 368px;left: 75.1%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
 .A2{
position: absolute;top: 368px;left: 77.2%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
 .phase1{
position: absolute;top: 540px;left: 89.8%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
 .neutre1{
position: absolute;top: 540px;left: 91.3%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
 .phase2{
position: absolute;top: 348px;left: 79.7%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
 .neutre2{
position: absolute;top: 348px;left: 75.6%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
  .phase2{
position: absolute;top: 348px;left: 79.7%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
 .neutre2{
position: absolute;top: 348px;left: 75.6%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
  .neutre3{
 position: absolute;top: 410px;left: 22%;
z-index: 500;
font-size: 10px;
font-weight: bold;
opacity: 0.6
 }
  .phase3{
 position: absolute;top: 410px;left: 24.7%;
z-index: 500;
font-size: 10px;
font-weight: bold;
opacity: 0.6;
 }




  .neutre4{
position: absolute;top: 222px;left: 35.9%;
z-index: 500;
font-size: 10px;
font-weight: bold;
opacity: 0.6;
 }
 .neutre5{
position: absolute;top: 219px;left: 39%;
z-index: 500;
font-size: 10px;
font-weight: bold;
opacity: 0.6
 }
  .neutre6{
position: absolute;top: 211px;left: 49.1%;
z-index: 500;
font-size: 10px;
font-weight: bold;
opacity: 0.6;
 }
 .neutre7{
  position: absolute;top: 208px;left: 61.9%;
z-index: 500;
font-size: 10px;
font-weight: bold;
opacity: 0.6;
 }
  .neutre8{
 position: absolute;top: 228px;left: 76.5%;
z-index: 500;
font-size: 10px;
font-weight: bold;
opacity: 0.6;
 }
 .neutre9{
position: absolute;top: 347px;left: 62.2%;
z-index: 500;
font-size: 10px;
font-weight: bold;
opacity: 0.6;
 }
.neutre10{
position: absolute;top: 345px;left: 49.5%;
z-index: 500;
font-size: 10px;
font-weight: bold;
opacity: 0.6;
 }
  .C1{
position: absolute;top: 346px;left: 7.8%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
 .C2{
position: absolute;top: 346px;left: 9.8%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
 .terre{
position: absolute;top: 540px;left: 92.3%;
z-index: 500;
font-size: 10px;
font-weight: bold;

 }
.trait_terre1{
width: 1.5%;
height: 1px;
background-color: black;
position: absolute;top: 555px;left: 93.55%;
z-index: 500;
}
.trait_terre2{ 
width: 1.1%;
height: 1px;
background-color: black;
position: absolute;top: 560px;left: 93.75%;
z-index: 500;


 }
.trait_terre3{
width: 0.7%;
height: 1px;
background-color: black;
position: absolute;top: 565px;left: 93.95%;
z-index: 500;

 }
.trait_terre4{
width: 0.3%;
height: 1px;
background-color: black;
position: absolute;top: 570px;left: 94.2%;
z-index: 500;
}
.trait_terre5{
width: 1%;
height: 1px;
background-color: black;
position: absolute;top: 547px;left: 93.4%;
z-index: 500;
}
.trait_terre6{
width: 0.1%;
height: 7px;
background-color: black;
position: absolute;top: 548px;left: 94.3%;
z-index: 500;
}
 .text_activer_simulation{
  text-align: center;
  color: #5DADE2;
  width: 150px;
  height: 150px;
  position: absolute;top: 35px;left: 33%;
 }
.text_desactiver_simulation{
  text-align: center;
  color: #D35400 ;
  width: 150px;
  height: 150px;
  position: absolute;top: 35px;left: 33%;
 }
 .text_couper{
  text-align: center;
   width: 150px;
  height: 150px;
 position:absolute; top:10px;left:63%;
 }
 .text_desactiver_couper{
  text-align: center;
   width: 150px;
  height: 150px;
 position:absolute; top:10px;left:63%;
 }
 .echauffement1{
    width: 3.49%;
    height: 150px;
    background: #D35400  ;
    -webkit-border-radius: 25px / 75px;
    -moz-border-radius:    25px / 75px; 
    border-radius:         25px / 75px;
    position: absolute;top: 297px;left: 1437px;
    z-index: 5;
    opacity: 0.5;
}
.echauffement2{
    width: 5.6%;
    height: 177px;
    background: #DC7633 ;
    -webkit-border-radius: 40px / 90px;
    -moz-border-radius:    40px / 90px;
    border-radius:         40px / 90px;
    position: absolute;top: 285px;left: 1420px;
    z-index: 1;
   opacity: 0.5;
}
.echauffement3{
    width: 7.7%;
    height: 240px;
    background: #EB984E ;
    -webkit-border-radius: 55px / 120px;
    -moz-border-radius:    55px / 120px;
    border-radius:         55px / 120px;
    position: absolute;top: 256px;left: 1403px;
    z-index: 1;
   opacity: 0.5;
}
.echauffement4{
    width: 2.55%;
    height: 100px;
    background: #FF0000 ;
    -webkit-border-radius: 18px / 50px;
    -moz-border-radius:   18px / 50px;
    border-radius:         18px / 50px;
    position: absolute;top: 322px;left: 1445px;
    z-index: 1;
   
}
.echauffement5{
    width: 10.8%;
    height: 335px;
    background: #FF0000 ;
    -webkit-border-radius: 34px / 28px;
    -moz-border-radius:   34px / 28px;
    border-radius:        34px / 28px;
    position: absolute;top: 205px;left: 1374px;
    z-index: 5;
    opacity: 0.3;
   
}
 .activation_simulation{
  border: 1px solid;
  width: 80px;
  text-align: center;
position: absolute;top: 10px;left:40%;
margin: 2px;
 }
 .date_heure{
  width: 200px;
  border: inset;
  position: absolute;top: 10px;left: 83%;
  text-align: center;
 }
 .div_simulation_hc{
  position: absolute;top: 10px;left: 2%;
  
 }
 .div_hp_hc{
  position: absolute;top: 40px;left: 2%;
 }
 #heure_simulation{
  border: inset;
width: 33px;
 }
 #minute_simulation{
  border: inset;
width: 33px;
 }
 #seconde_simulation{
  border: inset;
width: 33px;
 }
 #heure_debut_hc{
border: inset;
width: 33px;
 }
 #heure_fin_hc{
  border: inset;
  width: 33px;
 }
 .trait_gauche_contact{
height: 35px;
  width: 8px;
  color: grey;
  background-color: grey;
  position: absolute;top: 320px;left: 7.8%;
z-index: 1;
 }
 .trait_droite_contact{
height: 35px;
  width: 8px;
  color: grey;
  background-color: grey;
  position: absolute;top: 320px;left: 9.9%;
z-index: 1;
 }
 .trait_oblique_contact{
height: 8px;
  width: 2.4%;
  color: grey;
  background-color: grey;
  position: absolute;top: 311px;left: 8%;
z-index: 2;
transform: rotate(30deg);
 }
 .trait_plat_contact{
height: 8px;
  width: 2.5%;
  color: grey;
  background-color: grey;
  position: absolute;top: 320px;left: 7.87%;
z-index: 2;

 }

 .manette_haut_disjoncteur_edf{
  background-color: grey;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 1.8%;
  height: 15px;
  margin: auto;
  position: absolute; top: 277px; left:25.5%;
    z-index: 500;
 }
 .manette_bas_disjoncteur_edf{
  background-color: grey;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 1.8%;
  height: 15px;
  margin: auto;
  position: absolute; top: 304px; left:25.5%;
    z-index: 500;
 }


 /*.cadre_manette_disjoncteur_edf:hover{
  background-color: grey;
  opacity: 50%;
 }*/
 .cadre_manette_disjoncteur_edf{
  width: 1.8%;;
  height: 45px;
  padding: 1px;
  background-color: green;
  position:absolute; top:275px;left:25.5%;
  border: dotted 2px black;
border: inset;
  z-index: 500;
}


.cadre_manette_inter_differentiel{
   width: 15px;
  height: 32px;
  padding: 1px;
  background-color: green;
  position:absolute; top:270px;left:37%;
  border: dotted 2px black;
border: inset;
  z-index: 500;
}
 .manette_haut_inter_differentiel{
  background-color: #212F3D;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 32px;
  height: 12px;
  margin: auto;
position:absolute; top:270px;left:36.48%;
  z-index: 500;
 }
.manette_bas_inter_differentiel{
  background-color: #212F3D;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 32px;
  height: 12px;
  margin: auto;
position:absolute; top:292px;left:36.48%;
    z-index: 500;
 }



.cadre_manette_disjoncteur_2A{
   width: 26px;
  height: 32px;
  padding: 1px;
  background-color: green;
  position:absolute; top:270px;left:50.5%;
  border: dotted 2px black;
border: inset;
  z-index: 500;
}
.manette_haut_disjoncteur_2A{
  background-color: #212F3D;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 26px;
  height: 10px;
  margin: auto;
 position:absolute; top:270px;left:50.5%;
    z-index: 500;
 }
.manette_bas_disjoncteur_2A{
  background-color: #212F3D;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 27px;
  height: 10px;
  margin: auto;
  position:absolute; top:292px;left:50.5%;
    z-index: 500;
 }


.cadre_manette_disjoncteur_25A{
  width: 2.3%;
  height: 32px;
  padding: 1px;
  background-color: green;
  position:absolute; top:270px;left:63%;
  border: dotted 2px black;
border: inset;
  z-index: 500;
}
.manette_haut_disjoncteur_25A{
  background-color: #212F3D;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 2.9%;
  height: 12px;
  margin: auto;
  position:absolute; top:270px;left:62.75%;;
    z-index: 500;
 }
.manette_bas_disjoncteur_25A{
  background-color: #212F3D;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 2.9%;
  height: 12px;
  margin: auto;
  position:absolute; top:290px;left:62.75%;
    z-index: 500;
 }



                  


.cadre_manette_contacteur{
  width: 15px;
  height: 25px;
  padding: 1px;
  background-color: #808B96;
  position:absolute; top:281px;left:77.6%;
  border: dotted 2px black;
border: inset;
  z-index: 4;
}
.cadre_manette_simul_contacteur{
  width: 15px;
  height: 25px;
  padding: 1px;
  background-color: #808B96;
  position:absolute; top:151px;left:83.2%;
  border: dotted 2px black;
border: inset;
  z-index: 4;
}
.manette_haut_contacteur{
  background-color: #273746;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 1.4%;
  height: 5px;
  margin: auto;
  position:absolute; top:281px;left:77.5%;
    z-index: 5;
 }
 .manette_haut_simul_contacteur{
  background-color: #273746;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 1.4%;
  height: 5px;
  margin: auto;
  position:absolute; top:151px;left:82.95%;
    z-index: 5;
 }
.manette_bas_contacteur{
  background-color: #273746;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 1.4%;
  height: 5px;
  margin: auto;
  position:absolute; top:300px;left:77.5%;
    z-index:5;
 }
 .manette_bas_simul_contacteur{
  background-color: #273746;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 1.4%;
  height: 5px;
  margin: auto;
  position:absolute; top:172px;left:82.95%;
    z-index:5;
 }
.manette_milieu_contacteur{
  background-color: #273746;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 1.4%;
  height: 5px;
  margin: auto;
  position:absolute; top:291px;left:77.5%;
    z-index: 5;
 }
.manette_milieu_simul_contacteur{
  background-color: #273746;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border: outset;
  width: 1.4%;
  height: 5px;
  margin: auto;
  position:absolute; top:161px;left:82.95%;
    z-index: 5;
 }
.forcer_arret_contacteur{
width: 2.5%;
  height: 7px;
  margin: auto;
  position:absolute; top:302px;left:77%;
    z-index: 500;
    
}
.forcer_arret_simul_contacteur{
width: 2.5%;
  height: 7px;
  margin: auto;
  position:absolute; top:172px;left:82.6%;
    z-index: 500;
    
}
.forcer_marche_contacteur{
width: 2.5%;
  height: 7px;
  margin: auto;
  position:absolute; top:282px;left:77%;
   z-index: 500;
   
}
.forcer_marche_simul_contacteur{
width: 2.5%;
  height: 7px;
  margin: auto;
  position:absolute; top:152px;left:82.6%;
   z-index: 500;
   
}
.auto_contacteur{
   width: 2.5%;
  height: 7px;
  margin: auto;
  position:absolute; top:292px;left:77%;
    z-index: 500;
 
}
.auto_simul_contacteur{
   width: 2.5%;
  height: 7px;
  margin: auto;
  position:absolute; top:162px;left:82.6%;
    z-index: 500;
 
}
.div_arriere_cadre_simul_contacteur{
  width: 60px;
  height: 36px;
  padding: 1px;
  position:absolute; top:145px;left:82.8%;
  border: dotted 1px black;

  z-index: 1; 
}

.label_marche_force_simul{
width: 2.5%;
  height: 7px;
   font-size: 8px;
   font-weight: bold;
  margin: auto;
  text-align: center;
  position:absolute; top:150px;left:84.8%;
   z-index: 500;
}
.label_arret_force_simul{
  width: 2.5%;
  height: 7px;
  font-size: 8px;
  font-weight: bold;
  margin: auto;
  text-align: center;
  position:absolute; top:172px;left:84.8%;
    z-index: 500;
}
.label_auto_simul{
  width: 2.5%;
  height: 7px;
   font-size: 8px;
   font-weight: bold;
   margin: auto;
  text-align: center;
  position:absolute; top:162px;left:84.8%;
    z-index: 500; 
}

/*********************************************************************************************************/
.label_i_general_i1_i2{
width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 106px;left: 15.5%;
z-index: 500;
}
.label_i_general_i1{
 width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 106px;left: 15.5%; 
z-index: 500;
}
.label_i_general_i2{
 width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 106px;left: 15.5%; 
z-index: 500;
}
.label_i_general_zero{
 width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 106px;left: 15.5%; 
z-index: 500;
}


.label_i_total_i1_i2{
width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 98px;left: 41%; 
z-index: 500;
}
.label_i_total_i1{
 width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 98px;left: 41%;  
z-index: 500;
}
.label_i_total_i2{
 width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 98px;left: 41%; 
z-index: 500;
}
.label_i_total_zero{
 width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 98px;left: 41%; 
z-index: 500;
}

.label_i1{
  width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 485px;left: 61.5%; 
z-index: 500;
}
.label_i2{
width: 6%;
height: 1%;
font-size: 14px;
text-align: center;
position: absolute;top: 592px;left: 81.5%;
z-index: 500;
   
}






.cache_misere_inter_differentiel{
   width: 50px;
  height: 35px;
 
background-color: #CCD1D1 ;
position:absolute; top:260px;left:36.20%;
  z-index: 1;
}
.cache_misere_disjoncteur_25A{
   width: 4.2%;
  height: 22px;
 
background-color: #CACFD2;
position:absolute; top:260px;left:62.3%;
  z-index: 1;
}
.cache_misere_disjoncteur_2A{
   width: 4.3%;
  height: 22px;
 
background-color: #CACFD2;
position:absolute; top:260px;left:49.3%;
  z-index: 1;
}





 .ciseaux{
  width: 40PX;
  height: 40PX;
  position:absolute; top:10px;left:58%;
  border: solid 1px red;

 }
 .lune_soleil{
  width: 100PX;
  height: 100PX;
  position:absolute; top:70px;left:88%;
  }
  .voile_lune_soleil{
  width: 100PX;
  height: 100PX;
  position:absolute; top:70px;left:88%;
  background-color: white;
  opacity: 0.5;
  z-index: 500;
  }
   .soleil{
  width: 100PX;
  height: 100PX;
  position:absolute; top:70px;left:88%;
  }
   .voile_soleil{
  width: 100PX;
  height: 100PX;
  position:absolute; top:70px;left:88%;
   background-color: white;
  opacity: 0.5;
  z-index: 500;
  }
   .croissant{
  width: 100PX;
  height: 100PX;
  position:absolute; top:70px;left:88%;
  }
   .voile_croissant{
  width: 100PX;
  height: 100PX;
  position:absolute; top:70px;left:88%;
  background-color: white;
  opacity: 0.5%;
  z-index: 500;
  }
 .couper{
  width: 100PX;
  height: 15PX;
  position:absolute; top:10px;left:56%;
  border: solid 1px red;

 }
 .span_cablage_section_fil{
  float: center; 
  vertical-align: top;


 }
.span_cablage_couleur_fil{
  display: inline;
  vertical-align: top;
  

 }
.carre1{
  position:absolute; top:1525px;left:870px;
  z-index: 500;
}
.carre2{
  position:absolute; top:1500px;left:700px;
  z-index: 500;
}
.carre3{
  position:absolute; top:1200px;left:800px;
  z-index: 500;
}

 .div_liste1_eleves_consulte_cours{

 }
 .div_liste2_eleves_consulte_cours{

 }
.div_liste3_eleves_consulte_cours{
position:absolute; top:300px;left:15%;
 }
.div_liste4_eleves_consulte_cours{
position:absolute; top:300px;left:27%;
 }
.body_deplacer_objet{
 margin:0px;
  padding:0px;

  background-image: url("contacteur_HP_HC/source/fond_d-ecran.jpg") 
  background-size: 100%;

}

.image_glisser1 {
   
    width: 127px;
    height: 250px;
    
    border: 1px solid #111;
    
    border-radius: 10px;
    transition: all 200ms linear;
position:absolute; top:500px;left:10%;

}

.deposer1 {
    
    
    width: 10.5%;
    height: 260px;
   
    border: 1px solid #111;
    
    
    transition: all 500ms linear;
position:absolute; top:130px;left:32.5%;
}

.drop_hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;
}

.appareillage1 {
    display: inline-block;
    margin: 20px 10px 10px 20px;
    padding-top: 0px;
    width: 70%;
    height: 80%;
    color: #3D110F;
    
    /*border: 4px solid #3D110F;*/
    font-size: 2em;
    cursor: move;

    transition: all 200ms linear;
   
}

.appareillage1 img:hover {
width:428px;
height:550px;
z-index: 1;
}

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

.image_glisser2 {
   
    width: 127px;
    height: 250px;
    
    border: 1px solid #111;
    
    border-radius: 10px;
    transition: all 200ms linear;
position:absolute; top:500px;left:25%;

}

.deposer2 {
    
  
    width: 10.5%;
    height: 260px;
   
    border: 1px solid #111;
    
    
    transition: all 500ms linear;
position:absolute; top:130px;left:45.5%;
}


.image_glisser3 {
   
    width: 127px;
    height: 250px;
    
    border: 1px solid #111;
    
    border-radius: 10px;
    transition: all 200ms linear;
position:absolute; top:500px;left:40%;

}

.deposer3 {
    
  
    width: 10.5%;
    height: 260px;
   
    border: 1px solid #111;
    
    
    transition: all 500ms linear;
position:absolute; top:130px;left:58.5%;
}

.image_glisser4 {
   
    width: 127px;
    height: 250px;
    
    border: 1px solid #111;
    
    border-radius: 10px;
    transition: all 200ms linear;
position:absolute; top:500px;left:55%;

}

.deposer4 {
width: 10.5%;
height: 260px;
border: 1px solid #111;
transition: all 500ms linear;
position:absolute; top:130px;left:72%;
}
.deposer4:hover  {
 
 border-color: red;  
  box-shadow:  2px 2px 2px 1px grey; 
cursor: pointer;
}
.doigt_contacteur {

position:absolute; top:175px;left:83%;
z-index: 500;
}
.cliquez_doigt1{
 position: absolute;top: 160px;left:84%; 
}
.doigt_compteur {

position:absolute; top:360px;left:2%;
z-index: 500;
}
.cliquez_doigt2{
 position: absolute;top: 340px;left:1.90%; 
 z-index: 500;
}

.drop_hove {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;
}

.drop_hove2 {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;

}
.drop_hove3 {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;

}
.drop_hove4 {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;

}

.appareillage2 {
    display: inline-block;
    margin: 20px 10px 10px 20px;
    padding-top: 0px;
    width: 70%;
    height: 90%;
    color: #3D110F;
    
    /*border: 4px solid #3D110F;*/
    font-size: 2em;
    cursor: move;

    transition: all 200ms linear;
    user-select: none;
z-index: 1;
}

.appareillage2 img:hover {
width:428px;
height:550px;
z-index: 1;
}

.appareillage3 {
    display: inline-block;
    margin: 20px 10px 10px 20px;
    padding-top: 0px;
    width: 65%;
    height: 90%;
    color: #3D110F;
    
    /*border: 4px solid #3D110F;*/
    font-size: 2em;
    cursor: move;

    transition: all 200ms linear;
    user-select: none;
}

.appareillage3 img:hover {
width:428px;
height:550px;
z-index: 1;
}


.appareillage4 {
    display: inline-block;
    margin: 20px 10px 10px 20px;
    padding-top: 0px;
    width: 70%;
    height: 90%;
    color: #3D110F;
    
    /*border: 4px solid #3D110F;*/
    font-size: 2em;
    cursor: move;

    transition: all 200ms linear;
    user-select: none;
}



/*-----------------------------------------------------------------*/
.cache{
  width: 230px;
  height: 40px;
  position: absolute;top: 670px;left: 42%;
  background-color: white;
}

/*---------------------------------------------------------*/
.fil_dix_rouge1{
  height: 25px;
  width: 8px;
  color: red;
  background-color: red;
  position: absolute;top: 425px;left: 24.8%;
z-index: 1;

}
.fil_dix_rouge2{
  height: 8px;
  width: 4%;
  color: red;
  background-color: red;
  position: absolute;top: 442px;left: 25%;
z-index: 1;
}


.fil_dix_rouge3{
  height: 360px;
  width: 8px;
  color: red;
  background-color: red;
  position: absolute;top: 90px;left: 29%;
z-index: 1;

}

.fil_dix_rouge4{
  height: 8px;
  width: 8%;
  color: red;
  background-color: red;
  position: absolute;top: 90px;left: 29%;
z-index: 1;
}
.fil_dix_rouge5{
  height: 96px;
  width: 8px;
  color: red;
  background-color: red;
  position: absolute;top: 90px;left: 36.8%;
  z-index: 1;

}
/*--------------------------------------------------------------*/

.fil_dix_bleu_depart1{
height: 90px;
  width: 10px;
  color: blue;
  background-color: blue;
  position: absolute;top: 350px;left: 6.5%;
z-index: 1;
opacity: 0.1
}
.fil_dix_bleu_depart2{
height: 10px;
  width: 9.08%;
  color: blue;
  background-color: blue;
  position: absolute;top: 430px;left: 7.2%;
z-index: 1;
opacity: 0.1
}

.fil_dix_bleu_depart3{
height: 306px;
  width: 10px;
  color: blue;
  background-color: blue;
  position: absolute;top: 134px;left: 16.25%;
z-index: 1;
opacity: 0.1
}

.fil_dix_bleu_depart4{
height: 10px;
  width: 5.85%;
  color: blue;
  background-color: blue;
  position: absolute;top: 124px;left: 16.25%;
z-index: 1;
opacity: 0.1
}

.fil_dix_bleu_depart5{
height: 62px;
  width: 10px;
  color: blue;
  background-color: blue;
  position: absolute;top: 124px;left: 22.1%;
z-index: 1;
opacity: 0.1
}




.fil_dix_rouge_depart1{
 height: 60px;
  width: 10px;
  color: red;
  background-color: red;
  position: absolute;top: 350px;left: 9%;
z-index: 1;
opacity: 0.1

}
.fil_dix_rouge_depart2{
 height: 10px;
  width: 4.16%;
  color: red;
  background-color: red;
  position: absolute;top: 400px;left: 9.71%;
z-index: 1;
opacity: 0.1
}

.fil_dix_rouge_depart3{
 height: 306px;
  width: 10px;
  color: red;
  background-color: red;
  position: absolute;top: 104px;left: 13.87%;
z-index: 1;
opacity: 0.1
}

.fil_dix_rouge_depart4{
 height: 10px;
  width: 10.98%;
  color: red;
  background-color: red;
  position: absolute;top: 94px;left: 13.86%;
z-index: 1;
opacity: 0.1
}

.fil_dix_rouge_depart5{
 height: 90px;
  width: 10px;
  color: red;
  background-color: red;
  position: absolute;top: 94px;left: 24.84%;
z-index: 1;
opacity: 0.1
}
/****************************************************************/
.fil_terre_vert_depart{
height: 775px;
  width: 6px;
  color: green;
  background-color: green;
  position: absolute;top: 2px;left: 1%;
z-index: 1;
}
.fil_terre_jaune_depart{
height: 775px;
  width: 6px;
  color: yellow;
  background-color: yellow;
  position: absolute;top: 2px;left: 1.5%;
z-index: 500;
}
.fil_terre_vert_1{
height: 212px;
  width: 4px;
  color: green;
  background-color: green;
  position: absolute;top: 554px;left: 92.8%;
z-index: 500;
}
.fil_terre_jaune_1{
height: 206px;
  width: 4px;
  color: yellow;
  background-color: yellow;
  position: absolute;top: 554px;left: 92.5%;
z-index: 500;
}
.fil_terre_vert_2{
height: 4px;
  width: 91%;
  color: green;
  background-color: green;
  position: absolute;top: 764px;left: 2%;
z-index: 500;
}
.fil_terre_jaune_2{
height: 4px;
  width: 91%;
  color: yellow;
  background-color: yellow;
  position: absolute;top: 760px;left: 2%;
z-index: 2;
}
/****************************************************************/
.fil_dix_bleu1{
 height: 45px;
  width: 8px;
  color: blue;
  background-color: blue;
  position: absolute;top: 425.5px;left: 22%;
z-index: 1;

}

.fil_dix_bleu2{
  height: 8px;
  width: 9.5%;
  color: blue;
  background-color: blue;
  position: absolute;top: 464px;left: 22%;
z-index: 1;

}
.fil_dix_bleu3{
  height: 354px;
  width: 8px;
  color: blue;
  background-color: blue;
  position: absolute;top: 118px;left: 31%;
z-index: 1;

}
.fil_dix_bleu4{
  height: 8px;
  width: 4.7%;
  color: blue;
  background-color: blue;
  position: absolute;top: 110px;left: 31%;
z-index: 1;

}
.fil_dix_bleu5{
  height: 72px;
  width: 8px;
  color: blue;
  background-color: blue;
  position: absolute;top: 110px;left: 35.3%;
  z-index: 1;

}

/*-----------------------------------------------------------*/
.fil_deux_cinq_bleu1{
 height: 66px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 112px;left: 38.2%;
z-index: 500;

}

.fil_deux_cinq_bleu2{
   height: 6px;
  width: 1%;
  color: blue;
  background-color: blue;
  position: absolute;top: 11px;left: 38.3%;
z-index: 500;

}
.fil_deux_cinq_bleu3{
  height: 60px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 112px;left: 48.3%;
z-index: 500;
}

.fil_deux_cinq_rouge1{
 height: 91px;
  width: 6px;
  color: red;
  background-color: red;
  position: absolute;top: 92px;left: 39.7%;
z-index: 500;

}

.fil_deux_cinq_rouge8{
   height: 6px;
  width: 4.7%;
  color: red;
  background-color: red;
  position: absolute;top: 420px;left: 65%;
z-index: 500;

}
.fil_deux_cinq_rouge3{
  height: 82px;
  width: 6px;
  color: red;
  background-color: red;
  position: absolute;top: 92px;left: 50.8%;
z-index: 500;
}


/*----------------------------------------------------------*/
.fil_deux_cinq_bleu4{
 height: 60px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 112px;left: 49%;
z-index: 500;

}

.fil_deux_cinq_bleu5{
   height: 6px;
  width: 12.4%;
  color: blue;
  background-color: blue;
  position: absolute;top: 112px;left: 49%;
z-index: 1;

}
.fil_deux_cinq_bleu6{
  height: 52px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 112px;left: 61.2%;
z-index: 500;
}

.fil_deux_cinq_rouge4{
 height: 82px;
  width: 6px;
  color: red;
  background-color: red;
  position: absolute;top: 92px;left: 51.5%;
z-index: 500;

}

.fil_deux_cinq_rouge5{
   height: 6px;
  width: 12%;
  color: red;
  background-color: red;
  position: absolute;top: 92px;left: 51.8%;
z-index: 500;

}
.fil_deux_cinq_rouge6{
  height: 76px;
  width: 6px;
  color: red;
  background-color: red;
  position: absolute;top: 92px;left: 63.5%;
z-index: 500;
}


/*------------------------------------------------------------*/
.fil_deux_cinq_bleu1{
 height: 68px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 112px;left: 38.2%;
z-index: 500;

}

.fil_deux_cinq_bleu2{
   height: 6px;
  width: 10.2%;
  color: blue;
  background-color: blue;
  position: absolute;top: 112px;left: 38.3%;
z-index: 1;

}
.fil_deux_cinq_bleu12{
  height: 258px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 354px;left: 76.85%;
z-index: 500;
}

.fil_deux_cinq_rouge7{
 height: 45px;
  width: 6px;
  color: red;
  background-color: red;
  position: absolute;top: 381px;left: 64.7%;
z-index: 500;

}

.fil_deux_cinq_rouge13{
   height: 6px;
  width:11.9%;
  color: red;
  background-color: red;
  position: absolute;top: 582px;left: 79%;
z-index: 500;

}
.fil_deux_cinq_rouge9{
  height: 330px;
  width: 6px;
  color: red;
  background-color: red;
  position: absolute;top: 96px;left: 69.5%;
z-index: 500;
}


/*---------------------------------------------------------------*/
.fil_deux_cinq_bleu7{
 height: 62px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 384px;left: 62.6%;
z-index: 500;

}

.fil_deux_cinq_bleu8{
   height: 6px;
  width: 9%;
  color: blue;
  background-color: blue;
  position: absolute;top: 445px;left: 62.6%;
z-index: 500;

}
.fil_deux_cinq_bleu9{
  height: 337px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 114px;left: 71.2%;
z-index: 500;
}

.fil_deux_cinq_bleu10{
  height: 6px;
  width: 5%;
  color: blue;
  background-color: blue;
  position: absolute;top: 114px;left: 71.4%;
z-index: 500;
}
.fil_deux_cinq_bleu11{
  height: 84px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 114px;left: 76.4%;
z-index: 500;
}

.fil_deux_cinq_rouge14{
 height: 28px;
  width: 6px;
  color: red;
  background-color: red;
  position: absolute;top: 560px;left: 90.5%;
z-index: 500;

}

.fil_deux_cinq_rouge2{
   height: 6px;
  width: 11.5%;
  color: red;
  background-color: red;
  position: absolute;top: 92px;left: 39.7%;
z-index: 500;

}
.fil_deux_cinq_rouge12{
  height: 234px;
  width: 6px;
  color: red;
  background-color: red;
  position: absolute;top: 354px;left: 79%;
z-index: 500;
}
.fil_deux_cinq_rouge10{
  height: 6px;
  width: 9%;
  color: red;
  background-color: red;
  position: absolute;top: 92px;left: 69.5%;
z-index: 500;
}

.fil_deux_cinq_rouge11{
  height: 105px;
  width: 6px;
  color: red;
  background-color: red;
  position: absolute;top: 92px;left: 78.1%;
z-index: 500;
}
.fil_deux_cinq_bleu13{
  height: 6px;
  width: 15.1%;
  color: blue;
  background-color: blue;
  position: absolute;top: 610px;left: 76.85%;
z-index: 500;

}

.fil_deux_cinq_bleu14{
 height: 56px;
  width: 6px;
  color: blue;
  background-color: blue;
  position: absolute;top: 560px;left: 91.6%;
z-index: 500;
}
/*----------------------------------------------------------------*/
.fil_un_cinq_rouge1{
  height: 140px;
  width: 4px;
  color: red;
  background-color: red;
  position: absolute;top: 364px;left: 10%;
z-index: 500;

}
.fil_un_cinq_rouge2{
  height: 4px;
  width: 41.8%;
  color: red;
  background-color: red;
  position: absolute;top: 502px;left: 10%;
z-index: 500;

}
.fil_un_cinq_rouge3{
  height: 126px;
  width: 4px;
  color: red;
  background-color: red;
  position: absolute;top: 380px;left: 51.7%;
z-index: 500;

}
/*------------------------------------*/
.fil_un_cinq_noir1{
  height: 186px;
  width: 4px;
  color: black;
  background-color: black;
  position: absolute;top: 364px;left: 8%;
z-index: 500;

}
.fil_un_cinq_noir2{
  height: 4px;
  width: 70.6%;
  color: black;
  background-color: black;
  position: absolute;top: 550px;left: 8%;
z-index: 1;

}
.fil_un_cinq_noir3{
  height: 174px;
  width: 4px;
  color: black;
  background-color: black;
  position: absolute;top: 380px;left: 78.5%;
z-index: 500;

}

/*-------------------------------------------------*/
.fil_un_cinq_bleu1{
  height: 100px;
  width: 4px;
  color: #00FFFF;
  background-color: #00FFFF;
  position: absolute;top: 380px;left: 49.8%;
z-index: 500;

}
.fil_un_cinq_bleu2{
  height: 4px;
  width: 26.6%;
  color: #00FFFF;
  background-color: #00FFFF;
  position: absolute;top: 480px;left: 49.8%;
z-index: 1;

}
.fil_un_cinq_bleu3{
  height: 104px;
  width: 4px;
  color: #00FFFF;
  background-color: #00FFFF;
  position: absolute;top: 380px;left: 76.2%;
z-index: 500;

}


/*-----------------------------------------------------------------*/
.interieur_chauffe_eau{
 
width: 16%;
height: 400px;
  position: absolute;top: 200px;left: 900px;
}


.chauffe_eau{
 width: 15%;
height: 400px;
  position: absolute;top: 200px;left: 1340px;
}
.compteur_energie{
 width: 10.5%;
height: 250px;
  position: absolute;top: 135px;left: 4%;

}
.disjoncteur_general{
  width: 10.5%;
height: 280px;

  position: absolute;top: 180px;left: 19%;

}

/*-----------------------------------------------------------------*/
.div_cablage1{
  width: 500px;
   position: absolute;top: 570px;left: 500px;
   border: solid 1px;
   padding: 6px;
}

/*------------------------------------------------------------*/
.point_cablage_terre_depart{
 height: 15px;
  width: 15px;
  color: orange;
  background-color: orange;
  position: absolute;top: 760px;left: 1%;
z-index: 500; 
}

/*------------------------------------------------------------*/
.point_cablage1{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 356px;left: 7.8%;
z-index: 500;
}
.point_cablage2{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 356px;left: 9.8%;
z-index: 500;
}
.point_cablage3{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 422px;left: 22%;
z-index: 500;
}
.point_cablage4{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 422px;left: 24.7%;
z-index: 500;
}
.point_cablage5{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 172px;left: 35.25%;
z-index: 500;
}
.point_cablage6{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 176px;left: 36.75%;
z-index: 500;
}
.point_cablage7{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 172px;left: 38%;
z-index: 500;
}
.point_cablage8{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 176px;left: 39.5%;
z-index: 500;
}
.point_cablage9{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 170px;left: 48%;
z-index: 500;
}
.point_cablage10{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 170px;left: 49%;
z-index: 500;
}
.point_cablage11{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 170px;left: 50.58%;
z-index: 500;
}
.point_cablage12{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 170px;left: 51.56%;
z-index: 500;
}
.point_cablage13{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 158px;left: 61.1%;
z-index: 500;
}
.point_cablage14{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 162px;left: 63.3%;
z-index: 500;
}
.point_cablage15{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 188px;left: 76.2%;
z-index: 500;
}
.point_cablage16{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 188px;left: 78%;
z-index: 500;
}
.point_cablage17{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 552px;left: 90.1%;
z-index: 500;
}
.point_cablage18{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 552px;left: 91.28%;
z-index: 500;
}
.point_cablage19{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 348px;left: 76.8%;
z-index: 500;
}
.point_cablage20{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 348px;left: 78.9%;
z-index: 500;
}
.point_cablage21{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 373px;left: 76%;
z-index: 500;
}
.point_cablage22{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 372px;left: 78.2%;
z-index: 500;
}
.point_cablage23{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 376px;left: 62.5%;
z-index: 500;
}
.point_cablage24{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 376px;left: 49.5%;
z-index: 500;
}
.point_cablage25{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 376px;left: 51.5%;
z-index: 500;
}
.point_cablage26{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 376px;left: 64.5%;
z-index: 500;
}
.point_cablage_terre_chauffe_eau{
  height: 10px;
  width: 10px;
  color: orange;
  background-color: orange;
  position: absolute;top: 552px;left: 92.5%;
z-index: 500;
}


.point_cablage_completer1{
  border: dotted 1px black;
  box-shadow:  2px 2px 2px 1px grey;
  height: 10px;
  width: 10px;
 
  background-color: green;
  position: absolute;top: 462px;left: 30.8%;
z-index: 500;
}


/*
.point_cablage1 {
    display: inline-block;
    /*border: 4px solid #3D110F;
    font-size: 2em;
   

    transition: all 200ms linear;
    user-select: none;
}
.point_cablage2  {
   
   
    transition: all 200ms linear;


}

*/
.consulter_documents_partage_prof_elec{

height: 50px;
}




.partager_documents_prof_elec{
   width: 35%;
   position:absolute;top:210px;left:60%;

}
.partager_documents_prof_elec_bis{
   width: 35%;
   position:absolute;top:200px;left:2%;

}
.partager_documents_prof_elec_3{
   width: 35%;
   position:absolute;top:480px;left:2%;

}

.partager_documents_prof_elec_4{
   width: 35%;
   position:absolute;top:660px;left:2%;

}


.mes_pages_fieldset{
   width: 35%;
   position:absolute;top:410px;left:2%;

}


.liste_cours_profs_consulter1{
  width: 20%;
   position:absolute;top:350px;left:2%;
   background: #cecece ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}
.liste_cours_profs_consulter2{
  width: 20%;
   position:absolute;top:350px;left:26%;
   background: #cecece ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}
.liste_cours_profs_consulter3{
  width: 20%;
   position:absolute;top:350px;left:50%;
   background: #cecece ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}
.liste_cours_profs_consulter4{
  width: 20%;
   position:absolute;top:350px;left:74%;
   background: #cecece ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}

.liste_cours_profs_consulter5{
  width: 20%;
  height: 50px;
   position:absolute;top:180px;left:75%;
   background: #ADD8E6;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}


.espace_profs_classes_terminale_cap_1{
  width: 20%;
   position:absolute;top:350px;left:13%;
   background: #2E8B57 ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}

.espace_profs_classes_terminale_cap_2{
  width: 20%;
   position:absolute;top:350px;left:38%;
   background: #4682B4 ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}

.espace_profs_classes_terminale_cap_3{
  width: 20%;
   position:absolute;top:350px;left:63%;
   background: #9ACD32 ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}

.espace_profs_classes_terminale_bac_1{
  width: 20%;
   position:absolute;top:350px;left:20%;
   background: #4169E1 ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}
.espace_profs_classes_terminale_bac_2{
  width: 20%;
   position:absolute;top:350px;left:50%;
   background: #87CEEB ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}

.espace_profs_classes_premiere_bac_1{
  width: 20%;
   position:absolute;top:350px;left:20%;
   background: #DEB887 ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}
.espace_profs_classes_premiere_bac_2{
  width: 20%;
   position:absolute;top:350px;left:50%;
   background: #FF7F50 ;
   box-shadow: 15px 15px 15px #708090; 
   border:2px solid grey;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}


.niv3   {
  margin: 0;
  padding: 0;
 display: none;
 left: 130px;
 top:0%;
 visibility: hidden;
 list-style-type: none;

}



 .niv3  {
padding:0;
 margin:0;
 list-style-type:none;
  max-height:0em; 
  margin: 0; padding: 0;
  background-color: #999;
  
  
  transition: 0.5s max-height 1s;
 }
 .niv3 {
padding:0;
 margin:0;
 list-style-type:none;
 }


 

.niv3 li:hover{
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);

}


 

.titre1_menu_page_modele{
  position:absolute;top:133px;left:10px;


}

.titre2_menu_page_modele{
  position:absolute;top:133px;left:140px;
  
  
}
.titre3_menu_page_modele{
  position:absolute;top:133px;left:290px;

}

.titre4_menu_page_modele{
  position:absolute;top:133px;left:430px;
 
}

.titre5_menu_page_modele{
  position:absolute;top:133px;left:560px;

 
}

.titre6_menu_page_modele{
  position:absolute;top:133px;left:750px;
 
}

.titre7_menu_page_modele{
  position:absolute;top:133px;left:900px;
 
}




#menu_deroulant_espace_eleves li li{
  background: transparent none;

}
#menu_deroulant_espace_eleves li li a{
 color: #808080;

}
#menu_deroulant_espace_eleves li li:hover{
 background: #808080;

}

#menu_deroulant_espace_eleves li{
  list-style: none;
  position: relative;
  background-color: #808080;

}
#menu_deroulant_espace_eleves li:hover{
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);

}

#menu_deroulant_espace_eleves a:hover:before { 
content:"»";
}



#menu_deroulant_espace_eleves ul{
  margin: 0;
  padding: 0;
  width: 130px;
 text-align: center;
 position: absolute;
  display: block;
  max-height:0em; 
  margin: 0; padding: 0;
  background-color: #999;
  z-index: 500;
  
  transition: 0.5s max-height 0.6s;
  /*border-radius: 0 0 8px 8px;*/

  
}

#menu_deroulant_espace_eleves ul li a {
 


  
}
#menu_deroulant_espace_eleves ul ul ul {
  position: absolute;
  visibility: hidden;
display: none;
z-index: 500;
}
#menu_deroulant_espace_eleves ul li:hover ul{
 
  visibility: visible;
max-height: 13em;
display: inline block;
}








#menu_deroulant_espace_eleves ul ul ul {
margin: 15px;
  padding: 15px;
  width: 130px;
 text-align: center;
 position: absolute;
  
  max-height:0em; 
  margin: 0; padding: 0;
  background-color: #999;
  
  z-index: 500;
  transition: 0.5s max-height 0.6s;
}

#menu_deroulant_espace_eleves ul ul:hover li ul {
  visibility: visible;
  display: inline-block;
}

 .niv2_bis:hover ul{
  display: none;
visibility: hidden;
}

 


 .fielsdset_espace_enseignants{

  /*background-color: #FFFFF0 ; */
  position:absolute;top:30%;left:1%;
 }
 
 
 .fielsdset_espace_enseignants_bis{

  /*background-color: #FFFFF0 ; */ 
  position:absolute;top:30%;left:17%;
 }
 
.fielsdset_espace_enseignants_trois{

   position:absolute;top:30%;left:33%;
}
.fielsdset_espace_enseignants_quatre{

   position:absolute;top:30%;left:49%;
}
.fielsdset_espace_enseignants_cinq{

   position:absolute;top:30%;left:65%;
}
.fielsdset_espace_enseignants_six{

   position:absolute;top:30%;left:81%;
}


.image_loi_ohm_triangle{
  position:absolute;top:280px;left:3%;
}

 .tension_quiz_maths{
position:absolute;top:34%;left:28%;
color:blue;
  font-weight: bold;
    text-align: center;
 }
 .courant_quiz_maths{
position:absolute;top:57%;left:1%;
color:green;
  font-weight: bold;
  text-align: center;
 }
 .resistance_quiz_maths{
position:absolute;top:85%;left:39%;
color:red;
  font-weight: bold;
    text-align: center;
 }
 .champs1_quiz_loi_ohm{
color: red ;
 }
 .champs2_quiz_loi_ohm{
color: blue ;
 }
 .champs3_quiz_loi_ohm{
color: green ;
 }
 .champs4_quiz_loi_ohm{
color: black;
font-size: 16px;
background-color:#FFFFF0; 
font-style: italic;
font-weight: 15px;
 }
 .champs_questions_transformation_formule{
  width: 20%;
  background-color: #FFFFF0 ;  
  position:absolute;top:230px;left:51%;
 }
 .paragraphe_reponses_transformation_formule{
  width: 20%;
  position:absolute;top:230px;left:76%;
  background-color:#FFFFF0  ;
   }
   .paragraphe_reponses_transformation_formule_entrainement{
  width: 20%;
  position:absolute;top:600px;left:1.5%;
  background-color:#FFFFF0  ;
   }
   .paragraphe_reponses_transformation_formule_entrainement_puissance{
  width: 22%;
  position:absolute;top:550px;left:1.5%;
  background-color:#FFFFF0 ;
   }
.agrandissement {
width: 320px;
height: 240px;
}
.image_enseigne {
width: 10%;
height: 10%;
 position:absolute;top:33%;left:10%;
 
}
.image_enseigne img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image_enseigne:hover img {
/* L'image est grossie de 25% */
-webkit-transform:scale(4); /* Safari et Chrome */
-moz-transform:scale(3); /* Firefox */
-ms-transform:scale(3); /* Internet Explorer 9 */
-o-transform:scale(3); /* Opera */
transform:scale(4);

}


 .h1_menu_cap_techno{
  position:absolute;top:290px;left:13%;
  font-size: 19px;
 }

 .h1_menu_cap_td{
position:absolute;top:290px;left:58%;
 font-size: 19px;
 }
 .h1_menu_cap_tp{
  position:absolute;top:290px;left:86%;
   font-size: 19px;
 }
 .h1_travaux_cap{
  position:absolute;top:290px;left:2%;
   font-size: 22px;
 }
 .h2_menu_cap{
   font-size: 17px;
 }
 .h3_menu_cap{
   font-size: 15px;
 }
.liste_cours_techno_cap{
   position:absolute;top:330px;left:2%;
   background: #F5F5F5;
   box-shadow: 11px 11px 11px #B0C4DE; 
   border:2px solid #778899;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    width: 11.7%;
}
.liste_travaux_cap{
   position:absolute;top:330px;left:2%;
   background: #F5F5F5;
   box-shadow: 11px 11px 11px #B0C4DE; 
   border:2px solid #778899;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    width: 11.7%;
}
.liste_eval_techno_cap{
   position:absolute;top:330px;left:18%;
   background: #F5F5F5;
   box-shadow: 11px 11px 11px #B0C4DE; 
   border:2px solid #778899;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    width: 11.7%;
}

.liste_cours_td_cap{
   position:absolute;top:330px;left:51.7%;
  background: #F5F5F5;
   box-shadow: 11px 11px 11px #B0C4DE; 
   border:2px solid #778899;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    width: 11.7%;
}
.liste_eval_td_cap{
   position:absolute;top:330px;left:67%;
   background: #F5F5F5;
   box-shadow: 11px 11px 11px #B0C4DE; 
   border:2px solid #778899;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    width: 11.7%;
}
.liste_tp_cap{
   position:absolute;top:330px;left:84%;
 background: #F5F5F5;
   box-shadow: 11px 11px 11px #B0C4DE; 
   border:2px solid #778899;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    width: 11.7%;
}


.h1_menu_troisieme_techno{
  position:absolute;top:290px;left:13%;
  font-size: 19px;
 }

 .h1_menu_troisieme_td{
position:absolute;top:290px;left:46%;
 font-size: 19px;
 }
 .h1_menu_troisieme_tp{
  position:absolute;top:290px;left:72%;
   font-size: 19px;
 }
 .h2_menu_troisieme{
   font-size: 17px;
 }
 .h3_menu_troisieme{
   font-size: 15px;
 }
.liste_cours_techno_troisieme{
   position:absolute;top:42%;left:2%;
   background: #F9F5E3;
   width: 11.7%;
}
.liste_eval_techno_troisieme{
   position:absolute;top:42%;left:18%;
   background: #F9F5E3;
   width: 11.7%;
}

.liste_cours_td_troisieme{
   position:absolute;top:330px;left:35%;
    background: #F5F5F5;
   box-shadow: 11px 11px 11px #B0C4DE; 
   border:2px solid #778899;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    width: 11.7%;
   
}
.liste_participation_cours{
   position:absolute;top:514px;left:35%;
    background: #F5F5F5;
   box-shadow: 11px 11px 11px #B0C4DE; 
   border:2px solid #778899;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    width: 11.7%;
   
}
.liste_eval_td_troisieme{
   position:absolute;top:42%;left:56%;
   background: #F9F5E3;
}
.liste_tp_troisieme{
   position:absolute;top:42%;left:80%;
   background: #F9F5E3;
}



.vers_humilte2{
  color:red; 
animation: clignote 4s infinite;
text-decoration: none;

}
.vers_page_accueil{
  position:absolute;top:80%;left:45%;
font-size: 24px;
  color:red; 

animation: clignote 4s infinite;
text-decoration: none;
}

.illusion{
 
animation: clignote 4s infinite;
text-decoration: none;
}
@keyframes clignote { 
30% { }
50% { color:white; } 
}


.bouton_reponse_humilite{
  background-color: #F0E68C;
}

.champs_reponse_illusion{
 
  background-color:#B0E0E6;
  text-align: justify;
}

.reponse_illusion{
  position:absolute;top:0%;left:25%;

}
.phrase_illusion1{
   position:absolute;top:85%;left:1%;
}
.phrase_illusion2{
   position:absolute;top:85%;left:70%;
}

.image_illusion1{
width: 27%;
height: 75%;
position:absolute;top:4%;left:4%;
}
.image_illusion2{
  width: 27%;
  height: 75%;
  position:absolute;top:4%;left:70%;
}

.image_illusion3{
width: 45%;
position:absolute;top:4%;left:4%;
}
.image_illusion4{
  width: 45%;
  position:absolute;top:4%;left:50%;
}

.phrase_illusion3{
  position:absolute;top:65%;left:5%;
}
.phrase_illusion4{
 position:absolute;top:65%;left:50%;
 text-align: justify;
}
.illusion1{
  position:absolute;top:4%;left:5%;
}
.illusion2{
  position:absolute;top:4%;left:67%;
}

.bouton_commentaire{
  position:absolute;top:180px;left:73%;

}

.fieldset_bouton_questions_reponses{
  position:absolute;top:230px;left:73%;
  width: 10%;
}


.bouton_voir_questions_reponses{
  position:absolute;top:50px;left:30%;

}
.bouton_question_élèves{
  position:absolute;top:220px;left:73%;

}

.texte_commentaire{
  position:absolute;top:30%;left:50%;

}
.message_questions_eleves{
  width: 97%;


}
.bouton_voir_questions_reponses{
width: 100%;

}

.modele_cap{
  font-size: 22px;
  position:absolute;top:70px;left:12%;
  color: white;
 }
 .modele_seconde{
  font-size: 22px;
  position:absolute;top:70px;left:12%;
  color: white;
 }

 .modele_troisieme{
  font-size: 22px;
  position:absolute;top:70px;left:12%;
  color: white;
 }

.modele_enseignants{
  font-size: 22px;
  position:absolute;top:70px;left:12%;
  color: white;
 }


 .texte_traitement_inscription{
  position:absolute;top:40%;left:30%;
  width: 40%;
 }

.champs_inscription{
  width:40%;
  background-color: #B0C4DE ;
  vertical-align: 20%;
}
.champs_connexion{
  width:40%;
  background-color: #B0C4DE ;
}
.champs_cours_sans_connexion{
  width:50%;
  background-color: #B0C4DE ;
}


 .recherche1{

position:absolute;top:24%;left:1%;
background-color: #87CEEB    ;
font-size: 100%;
}
 .recherche2{
  position:absolute;top:24%;left:11%;
  background-color: #87CEEB  ;
 }
  .recherche3{
  position:absolute;top:24%;left:20%;
  background-color: #87CEEB   ;
 }
  .recherche4{
  position:absolute;top:24%;left:30%;
  background-color: #87CEEB   ;
 }

 
 .titre_page_formulaire{


position:absolute;top:10%;left:40%;

 font-size: 200%;
 color: blue;
 }
 .champs_texte_formulaire_eleve{
  width: 38%;
  /*background-color: #B0C4DE ;*/
 }
 .trait_titre_page2{
  position:absolute;top:27%;left:102%;
  
  height: 2px;
  width: 100f%;
 }

 .titre_page_modele{
 position:absolute;top:50px;left:14em;
text-shadow: 12px 12px 14px black; 
 font-size:300%;
 color:white;
 font-family: serif;
 text-decoration: none;
 }
 
.champs_texte_inscription{
  width: 30%;
  background-color: #B0C4DE ;
}
.entete_page_d_accueil{
    width: 100%;
    border: 2px solid grey;
    height: 125px;
    /*background-color: #2E8B57;*/
    background-color: #58ACFA;
    box-shadow: 12px 12px 14px grey;    
}
.pied_de_page_page_modele{
  position:absolute;top:95%;left:43%;
  border-top: 1px solid grey;

}
.logo_gauche_page_modele{
  position:absolute;top:3.5%;left:3%;
}

.logo_droit_page_modele{
position:absolute;top:3.5%;left:91%;
}

/*.logo_gauche_page_menu{
  position:absolute;top:3.5%;left:3%;

}

.logo_droit_page_menu{
  position:absolute;top:3.5%;left:91%;
}*/

.entete_page_modele{
  width: 98em;
    border: 2px solid grey;
    height: 120px;
    background-color: #2E8B57;
    box-shadow:none;
    box-shadow: 12px 12px 14px grey; 
    /*background-color:#373737;*/
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;
}
/*.entete_page_menu{
  width: 100%;
    border: 2px solid grey;
    height: 120px;
    background-color: #58ACFA;
    box-shadow:none; 
    background-color: #B0C4DE;

  }
  .titre_page_menu{
    color: blue;
    position:absolute;top:8%;left:43%;

  }*/
textarea
{
  width: 40%;
  height:100px;
 }

.bouton_cap a {
position:absolute;top:52%;left:40%;
display:block;
width:20%;
line-height:300%;
text-align: center;
text-indent: middle;
background:url(bp_cap2.png) no-repeat;
color:white;
text-decoration:none;
height: 30%;
font-size:400%;
}
.bouton_cap a:hover {
background:url(bp_cap1.png) no-repeat;
}

.bouton_seconde a {
position:absolute;top:52%;left:65%;
display:block;
width:20%;
line-height:300%;
text-align: center;
text-indent: middle;
background:url(bp_cap2.png) no-repeat;
color:white;
text-decoration:none;
height: 30%;
font-size:400%;
}
.bouton_seconde a:hover {
background:url(bp_cap1.png) no-repeat;
}


.bouton_3pro a {
position:absolute;top:52%;left:15%;
display:block;
width:20%;

line-height:300%;

text-align: center;

background:url(bp_3pro1.png) no-repeat;
color:white;
text-decoration:none;
height:30%;
font-size: 400%;

}
.bouton_3pro a:hover {
background:url(bp_3pro2.png) no-repeat;
}

.presentation_cours_du_jours_cap{
 position:absolute;top:30%;left:45%; 
}

.fieldset_cours_du_jours_cap_calcul{
  width: 11%;
  height: 3%;
  background: #F5F5F5;
   box-shadow: 9px 9px 9px #AEC7CA; 
   border: none;
}


.fieldset_co_intervention_math{
  width: 17%;
position:absolute;top:190px;left:10px;
background: #FFA500;
   box-shadow: 9px 9px 9px #AEC7CA; 
text-align: center;
}
.fieldset_co_intervention_francais{
  width: 18%;
  position:absolute;top:190px;left:66%;
  background: #FF4500;
   box-shadow: 9px 9px 9px #AEC7CA; 
  text-align: center;
}
.fieldset_chef_d_oeuvre{
  width: 11%;
  position:absolute;top:190px;left:21%;
  background: #4169E1;
   box-shadow: 9px 9px 9px #AEC7CA; 
   text-align: center;
}
.fieldset_travail_domicile_cap{
  width: 13%;
  position:absolute;top:190px;left:36%;
  background: #778899;
   box-shadow: 9px 9px 9px #AEC7CA; 
   text-align: center;
}

.fieldset_discussions_cap{
  width: 7%;
  position:absolute;top:190px;left:53%;
  background: #228B22;
   box-shadow: 9px 9px 9px #AEC7CA; 
}
.fieldset_restitution_devoirs_1ELEC{
  width: _%;
  position:absolute;top:190px;left:88%;
  background: #87CEFA;
   box-shadow: 9px 9px 9px #AEC7CA; 
}



.fieldset_traitement_discussions_cap{
   width: 16%;
  position:absolute;top:190px;left:80%;
  background: #EEEFE2;
   box-shadow: 9px 9px 9px #AEC7CA; 

}


.champs_text_identification{
  width: 30%;
 background-color: #B0C4DE ;
}

.titre_page
{
  text-shadow: 12px 12px 14px black; 

}

.heure{
   position:absolute;top:1%;left:87%; 
   text-shadow:none;
}
.textelycee{
    margin-left: 30px;
}
.inscrip_identif_page_accueil{
  align-content: center;
  top:36%;
 
  width: 20%;
}
.bouton_bienvenue{
  position:absolute;top:36%;left:45%;
  font-size: 22px;  
  background-color: #D8D8D8;
  border-bottom: 4px ridge #B0C4DE  ;
  border-right:  4px ridge #B0C4DE  ;
  border-top: 2px ridge #B0C4DE ;
  border-left: 2px ridge #B0C4DE  ;
  font-style:italic;
  width: 12%;
  text-align: center;



}
.bouton_identification{
  position:absolute;top:36%;left:60%;
  font-size: 18px;  
  background-color: #D8D8D8;
  border-bottom: 4px ridge #B0C4DE  ;
  border-right:  4px ridge #B0C4DE  ;
  border-top: 2px ridge #B0C4DE ;
  border-left: 2px ridge #B0C4DE  ;
  width: 12%;
  text-align: center;


}
.façade{
    position:absolute;top:47%;left:1%;
    height: 50%;
    width: 40%;
border: 4px solid grey;
}
.presentation{
    margin: 10px;
   position:absolute;top:45%;left:45%;
   width: 45%;
   font-family: serif;
  background-color: none;
  text-align: justify;
  box-shadow: none;
  color:#0000CD;
  font-size:18px;
  line-height: 30px;
}
.introduction{
	color:red;
	font-size: 14px;
}

.compte_a_rebours{
   font-style: italic;
   font-family: serif;
   color: red ;
 background-color: transparent;
 

}


/*@keyframes clignote{
    0%{}
    25%{background-color: #006400 ;}
    50%{}
    75%{background-color: #006400;}
    100%{background-color:transparent;}
}*/
.envoyez_courriel{
  
}
.image_enveloppe{
  
}

p
{
    width: 70%;
    border: 0px solid black;
    text-align: justify;
    
    padding: 3px;
   margin: 10px;
}
article{
    color: blue;
}

h1
{
	color:red;


border: 0px solid black;
margin-top: 2px;

}

h4
{
  color:red;

border: 0px solid black;
margin-top: 2px;
position:absolute;top:170px;left:45%;

}
h2
{
color: rgb(169, 50, 380);

}

.div_co_intervention_francais1{
 border: 1px solid black; 
 position:absolute;top:230px;left:21%;
width: 25%;
height: 300px;
}
.div_co_intervention_francais2{
 border: 1px solid black; 
 position:absolute;top:230px;left:59%;
width: 25%;
height: 300px;
}
.div_co_intervention_francais3{
position:absolute;top:600px;left:49%;
width: 25%; 
}
.div_co_intervention_francais4{

 position:absolute;top:900px;left:49%;
width: 25%;
}
.div_co_intervention_francais5{
 
 position:absolute;top:1300px;left:21%;
width: 25%;
}
.div_co_intervention_francais6{
 
 position:absolute;top:1650px;left:21%;
width: 25%;
}
.p1_co_intervention_francais{
  position:absolute;top:700px;left:21%;
}
.p2_co_intervention_francais{
  position:absolute;top:900px;left:21%;
  width: 20%;
}
.p3_co_intervention_francais{
  position:absolute;top:1300px;left:49%;
  width: 20%;
}
.p4_co_intervention_francais{
  position:absolute;top:1650px;left:49%;
  width: 20%;
}


/********************************************************/

.div_cours_troisieme1{
 border: 1px solid black; 
 position:absolute;top:300px;left:60px;
width: 451px;
height: 325px;
}

/*.div_cours_troisieme1 img:hover {
width:600px;
height:450px;
}*/



.div_cours_troisieme2{
 border: 1px solid black; 
 position:absolute;top:735px;left:580px;
width: 30%;
height: 300px;
z-index: 2;
}

/*.div_cours_troisieme2 img:hover {
width:600px;
height:450px;
z-index: 1;
}*/



.image2_cours_troisieme1{
  width: 30%;
height: 380px;
}


.div_cours_troisieme3{
border: 1px solid black; 
 position:absolute;top:1060px;left:580px;
width: 30%;
height: 320px;
z-index: 1;
}

/*
.div_cours_troisieme3 img:hover {
width:428px;
height:550px;
z-index: 1;
}
*/

.div_cours_troisieme4{

 border: 1px solid black; 
 position:absolute;top:1420px;left:580px;
width: 30%;
height: 320px;
z-index: 1;
}


.div_cours3_troisieme5{
 
 border: 1px solid black; 
 position:absolute;top:1780px;left:580px;
width: 30%;
height: 300px;

}

.div_cours_troisieme5{
 
 border: 1px solid black; 
 position:absolute;top:1780px;left:580px;
width: 30%;
height: 300px;

}

.div_cours_troisieme5 img:hover {
width:428px;
height:550px;
z-index: 1;
}
.div_cours_troisieme6{
 

 border: 1px solid black; 
 position:absolute;top:2140px;left:580px;
width: 30%;
height: 300px;

}
/*.div_cours_troisieme6 img:hover {
width:428px;
height:550px;
z-index: 1;
}
*/
.div_cours_troisieme7{
 

 border: 1px solid black; 
 position:absolute;top:2490px;left:580px;
width: 30%;
height: 300px;

}
.div_cours_troisieme8{
 

 border: 1px solid black; 
 position:absolute;top:2950px;left:580px;
width: 30%;
height: 300px;

}

.p1_cours_troisieme{
  position:absolute;top:280px;left:565px;
  width: 30%;
}
.titre2_cours_troisieme{
  position:absolute;top:700px;left:50px;
  width: 451px;
}

.titre3_cours_troisieme{
  position:absolute;top:1040px;left:50px;
  width: 451px;
}

.titre4_cours_troisieme{
  position:absolute;top:1420px;left:50px;
  width: 451px;
}
.titre5_cours_troisieme{
  position:absolute;top:1810px;left:50px;
  width: 451px;
}
.titre6_cours_troisieme{
  position:absolute;top:2180px;left:50px;
  width: 451px;
}

.titre7_cours_troisieme{
  position:absolute;top:2340px;left:50px;
  width: 451px;
}




.p3_cours_troisieme{
  position:absolute;top:1500px;left:50px;
  width: 20%;
}
.p4_cours_troisieme{
  position:absolute;top:205%;left:45%;
  width: 20%;
}
.fieldset_bouton_quiz_classe_troisieme{
 width: 7%;
  background: #F5F5F5;
   box-shadow: 9px 9px 9px #AEC7CA; 
   border: none;
}
.fieldset_bouton_enregistrer_classe_troisieme{
  position:absolute;top:180px;left:30%;
  width: 170px;
  background: #F5F5F5;
   box-shadow: 9px 9px 9px #AEC7CA; 
   border: none;
   
}

.fieldset_fiche_contrat_classe_troisieme{
   position:absolute;top:180px;left:500px;
  width: 170px;
  height: 30px;
  background: #F5F5F5;
   box-shadow: 9px 9px 9px #AEC7CA; 
   border: none;
   z-index: 1;
}

/********************************************************/
.paragraphe_eval1_troisieme{
 /*border: 1px solid black; */
 
width: 900px;

}



/********************************************************/

.div_cours_cap1{
 border: 1px solid black; 
 position:absolute;top:300px;left:60px;
width: 451px;
height: 325px;
}

.div_cours2_cap1{
 border: 1px solid black; 
 position:absolute;top:300px;left:60px;
width: 451px;
height: 325px;
}

/*.div_cours_troisieme1 img:hover {
width:600px;
height:450px;
}*/



.div_cours_cap2{
 border: 1px solid black; 
 position:absolute;top:735px;left:580px;
width: 30%;
height: 300px;
z-index: 2;
}
.div_cours2_cap2{
 border: 1px solid black; 
 position:absolute;top:750px;left:580px;
width: 30%;
height: 290px;
z-index: 2;
}

/*.div_cours_troisieme2 img:hover {
width:600px;
height:450px;
z-index: 1;
}*/



.image2_cours_cap1{
  width: 30%;
height: 380px;
}

.image2_cours2_cap1{
  width: 30%;
height: 380px;
}

.div_cours_cap3{
border: 1px solid black; 
 position:absolute;top:1120px;left:580px;
width: 30%;
height: 320px;
z-index: 1;
}
.div_cours2_cap3{
border: 1px solid black; 
 position:absolute;top:1060px;left:580px;
width: 30%;
height: 320px;
z-index: 1;
}


.div_cours_cap3 img:hover {
width:428px;
height:550px;
z-index: 1;
}


.div_cours_cap4{

 border: 1px solid black; 
 position:absolute;top:1420px;left:580px;
width: 30%;
height: 320px;
}
.div_cours2_cap4{

 border: 1px solid black; 
 position:absolute;top:1520px;left:580px;
width: 30%;
height: 320px;
}

.div_cours_cap5{
 
 border: 1px solid black; 
 position:absolute;top:1950px;left:580px;
width: 30%;
height: 300px;

}
.div_cours2_cap5{
 
 border: 1px solid black; 
 position:absolute;top:1900px;left:580px;
width: 30%;
height: 300px;
z-index: 500;

}
.div_cours2_cap5 img:hover {
width:500px;
height:400px;
z-index: 500;
}
.div_cours3_cap5{
 
 border: 1px solid black; 
 position:absolute;top:1780px;left:580px;
width: 30%;
height: 300px;
z-index: 500;

}

.div_cours_cap6{
  border: 1px solid black; 
 position:absolute;top:2140px;left:580px;
width: 30%;
height: 300px;
z-index: 1;
}
.div_cours_cap6 img:hover {
width:428px;
height:550px;

}
.div_cours2_cap6{
border: 1px solid black; 
 position:absolute;top:2280px;left:580px;
width: 30%;
height: 300px;
z-index: 1;

}

.div_cours3_cap7{

  border: 1px solid black; 
 position:absolute;top:2140px;left:580px;
width: 30%;
height: 300px;
z-index: 1;
}
.div_cours3_cap7 img:hover {
width:428px;
height:300px;

}
.div_cours_cap7{

 border: 1px solid black; 
 position:absolute;top:2490px;left:580px;
width: 30%;
height: 300px;
z-index: 0;
}

.div_cours_cap7 img:hover {
width:428px;
height:550px;

}

.div_cours2_cap7{
border: 1px solid black; 
 position:absolute;top:2650px;left:580px;
width: 30%;
height: 300px;
z-index: 0;

}

.div_cours_cap8{

 border: 1px solid black; 
 position:absolute;top:2840px;left:580px;
width: 30%;
height: 300px;
z-index: -1;
}
.div_cours2_cap8{

 border: 1px solid black; 
 position:absolute;top:3000px;left:580px;
width: 30%;
height: 300px;
z-index: -1;
}

.div_cours2_cap9{

 border: 1px solid black; 
 position:absolute;top:3340px;left:580px;
width: 30%;
height: 300px;
z-index: -1;
}

.div_cours3_cap2{
 border: 1px solid black; 
 position:absolute;top:750px;left:580px;
width: 30%;
height: 290px;
z-index: 2;
}

.div_cours3_cap2 img:hover {
width:600px;
height:450px;
z-index: 1;
}







.p1_cours_cap{
  position:absolute;top:280px;left:565px;
  width: 30%;
}
.p1_cours2_cap{
  position:absolute;top:280px;left:565px;
  width: 30%;
}
.titre2_cours_cap{
  position:absolute;top:700px;left:50px;
  width: 451px;
}
.titre2_cours2_cap{
  position:absolute;top:700px;left:50px;
  width: 451px;
}
.titre2_cours3_cap{
  position:absolute;top:700px;left:50px;
  width: 451px;
}
.titre2_cours4_cap{
  position:absolute;top:630px;left:50px;
  width: 451px;
}
.titre2_cours5_cap{
  position:absolute;top:660px;left:50px;
  width: 451px;
}
.div_cours2_cap2 img:hover {

}
.titre3_cours_cap{
  position:absolute;top:1200px;left:50px;
  width: 451px;
}
.titre3_cours2_cap{
  position:absolute;top:1900px;left:50px;
  width: 451px;
}

.titre3_cours3_cap{
  position:absolute;top:1240px;left:50px;
  width: 451px;
}
.titre3_cours4_cap{
  position:absolute;top:980px;left:50px;
  width: 451px;
}
.titre3_cours5_cap{
  position:absolute;top:1120px;left:52px;
  width: 451px;
}
.titre3_cours6_cap{
  position:absolute;top:1400px;left:52px;
  width: 451px;
}
.titre4_cours_cap{
  position:absolute;top:1450px;left:50px;
  width: 451px;
}
.titre4_cours2_cap{
  position:absolute;top:2050px;left:50px;
  width: 451px;
}

.titre4_cours3_cap{
  position:absolute;top:1420px;left:50px;
  width: 451px;
}

.titre4_cours4_cap{
  position:absolute;top:1580px;left:50px;
  width: 451px;
}
.titre4_cours5_cap{
  position:absolute;top:2160px;left:50px;
  width: 451px;
}
.titre5_cours_cap{
  position:absolute;top:1820px;left:50px;
  width: 451px;
}
.titre5_cours2_cap{
  position:absolute;top:1820px;left:50px;
  width: 451px;
}

.titre5_cours3_cap{
 position:absolute;top:1420px;left:50px;
  width: 451px; 
}

.titre6_cours_cap{
  position:absolute;top:2140px;left:50px;
  width: 451px;
}
.titre6_cours2_cap{
  position:absolute;top:2140px;left:50px;
  width: 451px;
}

.titre7_cours_cap{
  position:absolute;top:2440px;left:50px;
  width: 451px;
}

.titre8_cours_cap{
  position:absolute;top:2840px;left:50px;
  width: 451px;
}

.titre9_cours_cap{
  position:absolute;top:3270px;left:50px;
  width: 850px;
}



.p3_cours_cap{
  position:absolute;top:1500px;left:50px;
  width: 20%;
}
.p4_cours_cap{
  position:absolute;top:205%;left:45%;
  width: 20%;
}
.fieldset_bouton_quiz_classe_cap{
 width: 7%;
  background: #F5F5F5;
   box-shadow: 9px 9px 9px #AEC7CA; 
   border: none;
}

.fieldset_bouton_enregistrer_classe_cap{
  position:absolute;top:180px;left:30%;
  width: 170px;
  background: #F5F5F5;
   box-shadow: 9px 9px 9px #AEC7CA; 
   border: none;
   
}

.fieldset_fiche_contrat_classe_cap{
   position:absolute;top:180px;left:500px;
  width: 170px;
  height: 30px;
  background: #F5F5F5;
   box-shadow: 9px 9px 9px #AEC7CA; 
   border: none;
   z-index: 1;
}
/********************************************************************************************************/
.fieldset_fiche_contrat_eleve
{

 position:absolute;top:180px;left:45%;
  background: #F5F5F5;
   box-shadow: 9px 9px 9px #AEC7CA; 
   border: none;
}
 
 

 
 
.fieldset_fiche_contrat_eleve span img
{
  float:left;
  margin:0px 8px 8px 0;
}
 
 
.fiche_contrat
{
  display:block;
  position:absolute;
  top:140px;
  left:0;
  z-index:1000;
   width: 96%;
  height: 600px;
  border:1px solid black;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
}

/********************************************************/
.image_organisation_installation{
  width: 50px;
height: 20px
}

.image_organisation_installation img:hover {
width:550px;
height:400px;
}

.image_organisation_installation2{
  width: 50px;
height: 20px
}

.image_organisation_installation2 img:hover {
width:550px;
height:30px;
}


.fieldset_presentation_chef_oeuvre{
  width: 35%;
position:absolute;top:25%;left:40%;
  border:4px solid #B0C4DE;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
 
}
.legende_presentation_chef_oeuvre
{
  color: #20B2AA ;
  font-size: 18px;
  margin-bottom:0px;
  margin-left:10px;
}
.fieldset_consulter_eval_cap{
  position:absolute;top:40%;left:2%;
  border:4px solid #B0C4DE;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}
.fieldset_consulter_travail_domicile_cap{
  position:absolute;top:40%;left:28%;
  border:4px solid #B0C4DE;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}
.fieldset_consulter_travail_cointervention_francais_cap{
  position:absolute;top:40%;left:52.5%;
  border:4px solid #B0C4DE;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}
.fieldset_consulter_travail_cointervention_math_cap{
  position:absolute;top:40%;left:78%;
  border:4px solid #B0C4DE;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
}
.fieldset_presentation_cours_du_jours_cap{
  position:absolute;top:25%;left:50%;
  width: 30%;
  border:4px solid #B0C4DE;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;

}
.fieldset_p1_cours_du_jours_cap{
  position:absolute;top:70%;left:40%;
  width: 30%;
  border:4px solid #B0C4DE;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    text-align: justify;
    

}
.fieldset_p2_cours_du_jours_cap{
  position:absolute;top:100%;left:40%;
  width: 30%;
  border:4px solid #B0C4DE;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;  
    border-radius:8px;
    text-align: justify;
    
}
.image1_cours_du_jour_cap{
  position:absolute;top:63%;left:5%;


  
}
/*fieldset
{
width:30%;	
}
@media screen and (max-width: 1280px)
{
   



/* Définition des polices personnalisées */

/*@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Eléments principaux de la page */

/*body
{
    background-color: auto;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    
width: 100%;
}

#bloc_page
{
    width: 900px;
    margin: auto;
}

/*section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}
/* Header */



#titre_principal
{
    display: flex;
    flex-direction: column;
}

#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img
{
    width: 59px;
    height: 60px;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;

}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

time
{
background-color: red;
}
.carre{
	width:200px;
	height:200px;
	background:#069;
    title{
        color:red;
    }
   
#fixe
{
   position: fixed;
   width: 98em;
   height: 60px;
   position: absolute;
   top: 0px;
   bottom: 0px;
  

}
.barre_navigation{
 font-style: italic;
height: 20px;
}