.personnels_liste {
  display:flex;
  margin-bottom:10px;
  width:100%;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:10px;
  align-items: flex-start;
}
.personnel {
    width:calc(33% - 10px);
    display:flex;
    flex-direction:column;
    gap:0;
}



.personnel_photo {
    background-color:#bbb;
    width:180px;
    height:220px;
    
    
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;

    border-radius: 5px;
    
    position:relative;
    margin:auto;
    margin-bottom:10px;
}


.personnel_titre {
    text-align:center;
    margin:5px auto;
    font-weight:600;
    color: var(--red-base);
}
.personnel_role {
    text-align:center;
    color:#555;
    font-size:1rem;
    margin:0 auto 2px auto;
    line-height: normal;
}


@media (max-width: 700px) {
  .personnel {
    width:calc(100% - 15px);
    flex: initial;
  }
  


}