#formulaire_livreOr {
  width: 100%;
  height: 230px;
  border-bottom: #5E3023 solid 1px;
  padding-right: 10px;
  padding-left: 10px;
  margin-right: 10px;
  margin-left: -10px;
  box-shadow: 5px 5px 5px #5e30236e;
}

#livre_or {
  width: 100%;
  height: calc(100% - 251px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 10px;
  margin-right: 10px;
  margin-left: -10px;
}

.image_etoile {
  width: 150px;
  margin-top: 5px;
  margin-bottom: 5px;;
  margin-left: 10px;
  margin-right: 10px;
  filter: drop-shadow(5px 5px 5px #5e30236e);
}

.etoile_note {
  width: 75px;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #5E3023;
  padding: 5px;
  border-radius: 10px;
}

.etoiles {
  display: flex;
  align-items:center;
}

hr {
  color: #5e3023;
  background-color: #5e3023;
  overflow: visible;
  text-align: center;
  height: 2px;
  width: 100%;
}

.note {
  position:relative;
  right:185px;
  z-index:2;
  font-size:17px;
  font-weight: bold;
  font-family: initial;
}

.note_etoile {
  position:relative;
  right:237px;
  margin-bottom: 5px;
  z-index:2;
  font-size:17px;
  font-weight: bold;
  font-family: initial;
}

.barre_note {
  position: absolute;
  background:  #c08552;
  right: 108px;
  border-radius: 5px;
  height: 10px;
  width: 60px;
  z-index: 2;
}

.niveau_barre {
  background: linear-gradient(#5e3023, #dab49d, #5e3023);
  border-radius: 5px;
  height: 10px;
  z-index: 3;
}

.commentaire {
  background-color: #dab49d;
  border-radius: 10px;
  padding: 10px;
  padding-right: 0px;
  margin-left: 100px;
  margin-right: 10px;
  margin-bottom: 15px;
  width: 750px;
  max-height: 75px;
  filter: drop-shadow(5px 5px 5px #5e30236e);
  border-style: solid;
  border-color: #5e3023;
  border-width: 1px;
  div {
    font-family: initial;
    font-size: initial;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 75px;
    padding-right: 10px;
  }
}

.login {
  width: 100px;
}

.anonyme {
  font-style: italic;
  color: #c08552;

}

a {
  color: #5E3023;
  text-decoration: none;
}

a:hover
{
  color: #dab49d;
  text-decoration: none;
}

#formulaire_commentaire textarea {
  color: #5E3023;
  background: #dab49d;
  border-radius: 10px;
  border-style: solid;
  border-color: #5e3023;
  border-width: 1px;
  box-shadow: 3px 3px 3px #5e30236e;
}

#formulaire_commentaire textarea:focus {
  color: #dab49d;
  background: #5E3023;
  border-radius: 10px;
  border-style: solid;
  border-color: #dab49d;
  border-width: 1px;
  box-shadow: 3px 3px 3px #5e30236e;
}

.etoiles_form {
  display: flex;
  flex-direction: row-reverse;
  width: 250px;
  margin-top: -30px;
        
  input {
    display: none;
  }

  label {
    cursor: pointer;
      
    svg {
      fill: #f0ede6;
      transition: 0.3s all ease-in-out;
      filter: drop-shadow(5px 5px 5px #5e30236e);
    }
  }

}

.etoiles_form input:checked ~ label,
.etoiles_form label:hover, 
.etoiles_form label:hover ~ label {
  svg {
    fill: #f5e50b;
    filter: drop-shadow(5px 5px 5px #5e30236e);
   }
}