.ContentEquipe{display: grid; grid-template-columns: repeat(4, 1fr);gap: 20px;}

.ContentEquipe .UnMembre{border-radius: 5px; border: 1px solid #ffd935; padding: 10px; text-align: center;  color:rgba(83, 105, 66, 1);cursor: pointer;
  transition: all 0.35s ease;}
.ContentEquipe .UnMembre a{text-align: center;  color:rgba(83, 105, 66, 1);}
.ContentEquipe .UnMembre .portrait_img{width: 80px; height: 80px; border-radius: 80px; display: inline-block; overflow: hidden;}
.ContentEquipe .UnMembre .portrait_img img{width: 100%;  height: 100%; object-fit: cover;object-position: center;}
.ContentEquipe .UnMembre h3{ width: 100%; text-align: center; margin-bottom: 0px; font-weight: 700;}
.ContentEquipe .UnMembre .age{font-size: 14px;}
.ContentEquipe .UnMembre .fonction{font-size: 18px;}
.ContentEquipe .UnMembre .portrait_presentation{ 
	text-align: left;
	max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: 
    max-height 0.5s ease,
    opacity 0.3s ease;}

.UnMembre.active {
  grid-column: 1 / -1; /* prend toute la ligne */
}

.UnMembre.active .portrait_presentation {
  max-height: 1000px; /* valeur large */
  opacity: 1;
}
@media screen and (max-width: 980px) 
{
	.ContentEquipe{display: grid; grid-template-columns: repeat(2, 1fr);gap: 20px;}
}
@media screen and (max-width: 780px) 
{
	.ContentEquipe{display: grid; grid-template-columns: repeat(1, 1fr);gap: 20px;}
}
@media screen and (min-width: 780px) 
{
	.UnMembre.active .portrait_global{width: 35%; float: left;}
	.UnMembre.active .portrait_presentation{width: 60%; padding-left: 5%; float: left;}
}