.medecin-bar {
  height: 30px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

#zero-medecin:checked ~ .medecin > .medecin-bar {
  width: 20%;
  background-color: #7c7b79;
}

#one-medecin:checked ~ .medecin > .medecin-bar {
  width: 42%;
  background-color: #f2b01e;
}

#two-medecin:checked ~ .medecin > .medecin-bar {
  width: 63%;
  background-color: #1e2cec;
}

#three-medecin:checked ~ .medecin > .medecin-bar {
  width: 95%;
  background-color: #30c41d;
}

 
.optique-bar {
  height: 30px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

#zero-optique:checked ~ .optique > .optique-bar {
  width: 20%;
  background-color: #7c7b79;
}

#one-optique:checked ~ .optique > .optique-bar {
  width: 42%;
  background-color: #f2b01e;
}

#two-optique:checked ~ .optique > .optique-bar {
  width: 63%;
  background-color: #1e2cec;
}

#three-optique:checked ~ .optique > .optique-bar {
  width: 95%;
  background-color: #30c41d;
}
 
.dentaire-bar {
  height: 30px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

#zero-dentaire:checked ~ .dentaire > .dentaire-bar {
  width: 20%;
  background-color: #7c7b79;
}

#one-dentaire:checked ~ .dentaire > .dentaire-bar {
  width: 42%;
  background-color: #f2b01e;
}

#two-dentaire:checked ~ .dentaire > .dentaire-bar {
  width: 63%;
  background-color: #1e2cec;
}

#three-dentaire:checked ~ .dentaire > .dentaire-bar {
  width: 95%;
  background-color: #30c41d;
}

 
.pharmacie-bar {
  height: 30px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

#zero-pharmacie:checked ~ .pharmacie > .pharmacie-bar {
  width: 20%;
  background-color: #7c7b79;
}

#one-pharmacie:checked ~ .pharmacie > .pharmacie-bar {
  width: 42%;
  background-color: #f2b01e;
}

#two-pharmacie:checked ~ .pharmacie > .pharmacie-bar {
  width: 63%;
  background-color: #1e2cec;
}

#three-pharmacie:checked ~ .pharmacie > .pharmacie-bar {
  width: 95%;
  background-color: #30c41d;
}

 
.chambre-bar {
  height: 30px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

#zero-chambre:checked ~ .chambre > .chambre-bar {
  width: 20%;
  background-color: #7c7b79;
}

#one-chambre:checked ~ .chambre > .chambre-bar {
  width: 42%;
  background-color: #f2b01e;
}

#two-chambre:checked ~ .chambre > .chambre-bar {
  width: 63%;
  background-color: #1e2cec;
}

#three-chambre:checked ~ .chambre > .chambre-bar {
  width: 95%;
  background-color: #30c41d;
}

 
.auditive-bar {
  height: 30px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

#zero-auditive:checked ~ .auditive > .auditive-bar {
  width: 20%;
  background-color: #7c7b79;
}

#one-auditive:checked ~ .auditive > .auditive-bar {
  width: 42%;
  background-color: #f2b01e;
}

#two-auditive:checked ~ .auditive > .auditive-bar {
  width: 63%;
  background-color: #1e2cec;
}

#three-auditive:checked ~ .auditive > .auditive-bar {
  width: 95%;
  background-color: #30c41d;
}

 
.cure-bar {
  height: 30px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

#zero-cure:checked ~ .cure > .cure-bar {
  width: 20%;
  background-color: #7c7b79;
}

#one-cure:checked ~ .cure > .cure-bar {
  width: 42%;
  background-color: #f2b01e;
}

#two-cure:checked ~ .cure > .cure-bar {
  width: 63%;
  background-color: #1e2cec;
}

#three-cure:checked ~ .cure > .cure-bar {
  width: 95%;
  background-color: #30c41d;
}

 
.douce-bar {
  height: 30px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

#zero-douce:checked ~ .douce > .douce-bar {
  width: 20%;
  background-color: #7c7b79;
}

#one-douce:checked ~ .douce > .douce-bar {
  width: 42%;
  background-color: #f2b01e;
}

#two-douce:checked ~ .douce > .douce-bar {
  width: 63%;
  background-color: #1e2cec;
}

#three-douce:checked ~ .douce > .douce-bar {
  width: 95%;
  background-color: #30c41d;
}
.radio-hide {
  display: none;
}
.medecin,.optique,.dentaire,.chambre,.auditive,.cure,.douce,.pharmacie{
  margin-top: -35px;
  width: 95%;
  margin-left: 10px;
}
.label-text {
  display: inline-block;
  margin: 0 0px 5px;
  padding: 3px 22px;
  color: #aaa;
  border-radius: 3px;
  cursor: pointer;
}

.radio-hide:checked + .label-text {
  color: white;

} 

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