#modal-container-julien, #modal-container-remi, #modal-container-claire, #modal-container-fanny {
  position:absolute;
  height:99%;
  width:100%;
  opacity:0;
  visibility:hidden;
  z-index:1;

  &.four {
    z-index:0;
    opacity:1;
    visibility:visible;
    transition: all 0.1s ease;
    + .content {
      z-index:1;
    }
    &.out {
          opacity:0;
          visibility:hidden;
    }
  }

    .modal {
        background: var(--blanc);
        position: absolute;
        height:99%;
        width:100%;
        display:flex;
        flex-direction: column;
        align-items: center;
        margin: 10px 0;
        & button{
            width:240px;
        }
    }
  }


  .modale__content{
    display:flex;
    padding:50px;
    gap:50px;
    height:100%;
  }

  .modale__left{
    width:30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:20px;
    & card__name{
        width:80%;
    }
    & .card__socials{
        display:flex;
        gap: 5px;
        padding: 20px 0;
    }
        & img{
        width:100%;
    }
    & 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: 'PoppinsMedium';
        padding: 0;
        margin: 0;
        color: var(--noir);
        font-size: 1rem;
        line-height:1.2;
        text-align:center;
    }
  }

  .modale__right{
    width:70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap:20px;
        .card__citation{
        font-family:'PoppinsLight';
    }
    & p{
        font-size:0.9rem;
        margin:0;
    }
  }



@media screen and (max-width:1280px){
  .modale__content{
    padding: 50px 20px 30px;
    & .modale__left{
      width:25%;
    }
    & .modale__right{
      width:75%;
    }
  }
}

@media screen and (max-width:1024px){
  #modal-container-julien, #modal-container-remi, #modal-container-claire, #modal-container-fanny{
    & .modal{
    justify-content: space-around;
    height:100%;
  }
  }
  .modale__content{
    padding: 50px 20px 30px;
    & .modale__left{
      width:25%;
    }
    & .modale__right{
      width:75%;
    }
  }
}

@media screen and (max-width:768px){
    #modal-container-julien, #modal-container-remi, #modal-container-claire, #modal-container-fanny{
    & .modal{
    justify-content: flex-start;
  }
  }
  .modale__content{
    flex-direction: column;
    padding:30px;
    & .modale__left{
      width:100%;
      gap:10px;
      & img{
        max-width:130px;
      }
    }
    & .modale__right{
      width:100%;
      align-items: center;
    }
  }
}

@media screen and (max-width:480px){
    #modal-container-julien, #modal-container-remi, #modal-container-claire, #modal-container-fanny{
    & .modal{
    justify-content: space-between;
  }
  }
  .modale__content{
    padding:20px;
    gap:30px;
    & .modale__left{
      & h3{
        line-height:1;
        font-size:1.2rem;}
      & h5{
        line-height:1;
        font-size:0.9rem;
      }
      & .card__socials{
        padding:0;}}

      & .modale__right{
        & p{
        font-size:0.8rem;}}
  }
}