@font-face {
   font-family: 'HeydingsControlsRegular';
   src: url('../uploads/police/Heydings-Controls.ttf.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}


.enfant{
display: block;
margin-left: 1em;
padding-bottom: 1em;
}

.enfant2{
display: block;
margin-left: 1em;
padding-bottom: 1em;
}

.enfant3{
display: block;
margin-left: 1em;
padding-bottom: 1em;
}

.enfant4{
display: block;
margin-left: 1em;
padding-bottom: 1em;
}
.enfant5{
display: block;
margin-left: 1em;
padding-bottom: 1em;
}

.enfant6{
display: block;
margin-left: 1em;
padding-bottom: 1em;
}

.enfant7{
display: block;
margin-left: 1em;
padding-bottom: 1em;
}

.enfant8{
display: block;
margin-left: 1em;
padding-bottom: 1em;
}


.enfant9{
display: block;
margin-left: 1em;
padding-bottom: 1em;
}
.barredeson {
 visibility: hidden;
width: 210px;
height: 35px;
border: grey solid 0px;
background-color : rgba(220,220,220,0.5);
background-color : hsla(0,0%,90%,1);
display: flex;
position: relative;
margin-left: 1 em;

}

.barredeson .temps {
  font-size: 16px;
  text-align: center;
  display: flex;
  align-items: center;   /* centrage vertical */
  justify-content: center;
}



.rond1 {
background-color : rgba(220,220,220,0.5);
background-color : hsla(0,0%,90%,1);
border: 0px solid blue;
border-radius: 50%;
height: 35px;
width: 35px;
left: -17.5px;
position: absolute;

}

.rond2 {
background-color : rgba(220,220,220,0.5);
background-color : hsla(0,0%,90%,1);
border: 0px solid blue;
border-radius: 50%;
height: 35px;
width: 35px;
position: absolute;
right: -17.5px;
}


.arret, .temps, .barretemps, .volume, .lecture {
border: transparent 0px solid;

}



.lecture, .arret, .volumeson {
width: 35px;
font-family: HeydingsControlsRegular;
font-size: 25px;

}


.lecture {
margin-top: -2px;
}
.arret {
margin-top: -2px;

}
.barrevolume {
width: 40px;
}

.barredeson button {
border: none;
border-radius:50%;
background-color : rgba(220,220,220,0.5);
background-color : hsla(0,0%,90%,1);
}

.temps {
  width: 50px;
  height: 35px;            /* même hauteur que la barre */
  display: flex;
  align-items: center;     /* centre verticalement */
  justify-content: center; /* centre horizontalement */
  padding: 0;              /* on enlève le padding */
}


.barretemps {
  width: 100px;           /* longueur totale de la barre */
  position: absolute;
  height: 35px;
  left: 120px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: transparent;   /* pas de fond plein, juste la ligne */
}

.lignetemps {
  background: green;
  border-radius: 5px;
  height: 10px;
  width: 0%;                /* départ à 0, le JS passe à 0–100% */
  border-left: 2px green solid;
}



.lecture2:before, .arret2:before, .volume2:before{
  font-family: HeydingsControlsRegular;
  font-size: 20px;
  position: relative;
  content: attr(data-icon);
background-color : rgba(220,220,220,0.5);
background-color : hsla(0,0%,90%,1);


}

.lecture2:hover, .arret2:hover, .volume2:hover{
color: green;

}