/******** PERSONNEL **************/

.nophone{
  display: revert;
}

.recherche-repertoire{
  margin-bottom: 75px;
}

.form-personnel{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr ; 
  grid-gap: 15px;
  margin-bottom: 20px;
  align-items: self-end;
}

.form-personnel h2{
  font-size: 22px;
}

.tableauPersonnel{
  width: 100%;
  table-layout: fixed;
  background-color: white;
  border-collapse: collapse;
}

.tableauPersonnel tr{
    border: 1px solid grey;
}

 .tableauPersonnel tr td:first-child {
    width: 125px;
}

 .tableauPersonnel tr th:first-child {
    width: 125px;
}

.tableauPersonnel tr td:not(:first-child) {
      width: 15%;
      overflow: hidden;
      text-overflow: ellipsis;
  }

.tableauPersonnel tr td{
  padding: 1%;
}

.tableauPersonnel th{
  padding: 1%;
  background-color: #0099cc;
  color: white;
}

.form-control-personnel{
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

#img-repertoire{
    width: 15%;
    margin-top: 2%;
}

.photo-profil_utilisateurs_repertoire{
  width: 100px;
  object-fit: contain;
  border-radius: 50%;
}

.photo-profil_inconnue_repertoire{
  width: 50px;
  object-fit: contain;
  border-radius: 50%;
}

@media only screen and (max-width: 1175px){

  .form-personnel{
    display: flex;
    flex-direction: column;
    align-items: unset;
  }

  #img-repertoire{
    width: 20%;
  }
  
}

@media only screen and (max-width: 900px){

  .form-personnel{
    display: flex;
    flex-direction: column;
    align-items: unset;
  }

  #img-repertoire{
    width: 20%;
  }

  .nophone{
    display: none;
  }
  
}

@media only screen and (max-width: 700px){

  #img-repertoire{
    width: 25%;
  }

}