.bandeau img{
    width: 100%;
}
.gymnase{
    margin-top: 5vh;
    display: flex;
    justify-content: center;
}
.texte_gymnase{
    color: var(--gris3);
    width: 80%;
    font-family: var(--typo2);
    line-height: var(--hauteurligne);
    text-align: justify;
    border: var(--cadrebleu);
    padding: 2vw;
}
.texte_gymnase a{
    color: var(--bleu);
}
.liste_sport{
    margin-top: 5vh;
}
.container_sport{
    display: flex;
    flex-direction: row;
}
.sample_sport{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.sport{
    display: flex;
    flex-direction: column;
    background-color: var(--gris1);
    width: 40%;
    margin: 2vw;
    padding: 2vw 0;
    border-radius: 10px;
    box-shadow: var(--ombre2);
}
.visuel_sport{
    width: 90%;
    align-self: center;
    height: 17vw;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.visuel_sport img{
    width: 100%;
}
.texte_sport{
    width: 100%;
    padding: 3vw;
}
.texte_sport a{
    color: var(--bleu);
}
.nom_sport{
    color: var(--bleu);
    font-family: var(--typo1);
    font-size: calc(30*var(--res));
}
.infos_pratique li{
    color: var(--gris3);
    font-family: var(--typo2);
    padding-top: 1vw;
}
.liens{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.bouton{
    background-color: var(--jaune);
    color: white;
    font-family: var(--typo1);
    font-size: calc(25*var(--res));
    padding: 1vw;

}
.bouton:hover{
    background-color: var(--bleu);
    border-radius: 10px;
}
@media screen and (max-width: 840px) {
    .sample_sport{
        flex-direction: column;
    }
    .sport{
        width: 95%;
    }
    .visuel_sport{
        height: 48vw;
    }
    .texte_gymnase{
        width: 100%;
    }
}
@media screen and (max-width: 500px) {
    .nom_sport{
        font-size: calc(40*var(--res));
    }
    .liens{
        flex-direction: column;
    align-items: center;
    }
    .liens a{
        margin: 2vw 0;
    }
}