/* section notre équipe : 4 cards qui se développent à l'ouverture d'une pop-up */
.equipe{
    display: flex;
    flex-direction: column;
    align-items: center;
    & h2{
        font-family: 'PoppinsBlack';
        padding: 10px 0;
        margin: 0;
        width: 80%;
        color: var(--orange);
        font-size: 2.5rem;
    }
}

.equipe__container{
    width:80%;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    position:relative;
}

.equipe__card{
    display:flex;
    background-color:var(--blanc);
    width: 45%;
    padding: 20px;
    gap: 20px;
    margin: 10px 0;
}

.equipe__card__left{
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:30px;
    & img{
        width:100%;
        max-width:260px;
    }
    & h3{
        font-family: 'PoppinsExtraBold';
        padding: 0;
        margin: 0;
        color: var(--noir);
        font-size: 1.4rem;
        line-height:1.2;
        text-align:center;
    }
    & h5{
        font-family: 'PoppinsRegular';
        padding: 0;
        margin: 0;
        color: var(--noir);
        font-size: 1.2rem;
        line-height:1.2;
        text-align:center;
    }
}

.equipe__card__right{
    width:50%;
    display: flex;
    flex-direction: column;

    align-items: center;
    .card__citation{
        font-family:'PoppinsLight';
    }
}

.card__person{
    display: flex;
    flex-direction: column;
    gap:15px;
    height: 100%;
    align-items: center;
}

.card__socials{
    & img{
        width:30px;
        height:30px;
    }
}

.card__name{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.equipe__button{
  background:none;
  border: 1px solid var(--noir);
  padding:15px;
  margin:10px 0;
  border-radius:50px;
  font-family: 'PoppinsMedium';
  color: var(--noir);
  font-size: 16px;
  width:180px;
  transition: all 0.2s ease;
  display:none;
}

.equipe__button:hover, .equipe__button:focus{
  background:white;
  border:1px solid white;
  font-family:'PoppinsExtraBold';
  color:var(--orange);
  cursor:pointer;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
  transition:all 0.2s ease;
}

.equipe__button:active{
  background:var(--orange);
  border:1px solid var(--orange);
  font-family:'PoppinsExtraBold';
  color:white;
  cursor:pointer;
  transition:all 0.2s ease;
  box-shadow:none;
}


/* medias queries */
@media screen and (max-width:1280px){
    .equipe__card{
        width:43%;
        & p{
            font-size:0.9rem;
        }
    }
    .equipe__card__left{
        justify-content: flex-start;
        gap:30px;
    }
}


@media screen and (max-width:1024px){
    .equipe__card{
        width:41%;
        gap:10px;
        flex-direction: column;
        & p{
            font-size:0.9rem;}
    }

    .equipe__card__left{
        gap:15px;
        width:100%;
        & img{
            max-width:150px;}
        & h3{
            font-size:1.2rem;}
        & h5{
            font-size:1rem;}
    }

    .equipe__card__right{
        width:100%;
        height:100%;
        & p{
            margin: 5px 0;}
    }

    .equipe__button{
        font-size:0.8rem;
    }

    .card__person{
        gap:10px;
    }
}



@media screen and (max-width:768px){
    .equipe__container{
        gap:10px;
    }

    .equipe__card{
        width:100%;
    }
    
    .equipe__card__left{
        flex-direction: row;
        & img{
            max-width:130px;}
    }

    .equipe__button{
        padding: 12Px;
        margin: 20px 0 10px 0;
    }

    .card__person{
        justify-content: center;
    }
}




@media screen and (max-width:480px){
    .equipe__container{
        gap:0;}

    .card__name{
        gap:3px;}

    .equipe__card__left{
        flex-direction: row;
        & h3{
            line-height:1;}
        & h5{
            line-height:1;}
        & img{
            max-width:130px;}
    }

    .equipe__button{
        width:180px !important;
    }

    .modale__right{
        align-items:center;
    }
}