/* cartes dans disposition normale */
@media (min-width: 600px) {
    #avCartes {
        grid-template-rows: repeat(auto-fit, minmax(245px, max-content));
        grid-template-columns: repeat(auto-fit, minmax(550px, max-content));
    }

    .containerCarteAvantage {
        width: 550px;
    }
    .avantage {
        width: 500px;
    }
    .avantageImgContainer {
        left: -10%;
    }
    .avantageImgContainer > img {
        width: 210px;
        height: 210px;
    }
}

 /* cartes dans disposition mobile */
@media (max-width: 599.9999px) {
    #avCartes {
        grid-template-rows: repeat(auto-fit, minmax(245px, max-content));
        grid-template-columns: repeat(auto-fit, minmax(320px, max-content));
    }
    .containerCarteAvantage {
        width: 320px;
    }
    .avantage {
        width: 300px;
    }
    .avantageImgContainer {
        left: calc(-10% + 10px) ;
    }
    .avantageImgContainer > img {
        width: 134px;
        height: 134px;
    }
}

#avCartes{
    height: 100%;
    padding-top: max(10px, 0.75%);
    padding-bottom: max(10px, 0.75%);
    grid-gap: 32px;
}
.containerCarteAvantage{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    animation-duration: 0.5s;
    animation-name: slidein;
}

.avantage{
    height: 245px;


    background-color: #d9d9d9;
    display: flex;
    flex-direction: row;

    box-shadow: -1px 2px rgba(0, 0, 0, 0.15), 1px 2px rgba(0, 0, 0, 0.15);


}

.avantageImgContainer{

    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 50%;


}
.avantageImgContainer > img {
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-color: #d4aa2e;

    object-fit: contain;


}

.corpsAvantage{
    margin-right: 25px;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.boxAvantageTxt{
    min-height: 212px; /* comme les 210px de l'image + pixels de bordure */
    height: fit-content; /* si jamais pas assez de place, la box doit etre resizable pour accueillir plus de texte  */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* fait que btn acceder toujours en bas, titre toujours à la meme hauteur et le reste se centre*/
}

.boxAvantageTxt >  h4 {
    font-family: JostBold, Arial, Helvetica, sans-serif;
    margin-block: 0;
}
.boxAvantageTxt > p{
    font-family: Jost, Arial, Helvetica, sans-serif;

}
    


.liensAvantage{
    height: 20%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.accederAvantage{
    justify-content: center;    
    align-items: center;
    display: flex;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    width: 50%;
    background-color: #007838;
    font-family: JostSemiBold, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #FFFFFF;
}