header img{
    width: 100%;
}
.fonctionnement{
    margin-top: calc(0.5*var(--margesectiontop));
    background:  linear-gradient(
        to right,
        white 0%,
        white 50%,
        #F5F5F5 50%,
        #F5F5F5 80%
    );
}
.container_fonctionnement{
    display: flex;
    flex-direction: row;

}
.sample_fonctionnement{
    
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.texte_fonctionnement{
    border: var(--cadrebleu);
    width: 70%;
    background-color: white;
    padding: 3vw;
}
.texte_fonctionnement p{
    font-family: var(--typo2);
    color: var(--gris3);
    line-height: var(--hauteurligne);
   padding: 0.5vw;
}
.texte_fonctionnement a{
    color: var(--bleu);
}
#fonctionnement_img{
    width: 68%;
}
.info_pratique img{
    width: 60%;
    clip-path: polygon(0 0, 56% 0, 56% 31%, 84% 76%, 100% 100%, 0 100%, 0% 70%, 0% 30%);
}
.clip_texte{
    display: flex;
    flex-direction: row;
    background-color: var(--gris1);
}
.texte_pratique{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.texte_pratique ul{
    font-family: var(--typo2);
    color: var(--gris3);
    
    font-weight: bolder;
    padding: 2vw;
}
.texte_pratique li{
    font-weight: 100;
}
.texte_pratique a{
    color: var(--bleu);
}
.savoir_plus{
    margin-top: calc(0.5*var(--margesectiontop));
}
.savoir_plus h2{
  padding: 0;
}
.emprunt{
    background-color: var(--gris1);
    color: var(--jaune);
    font-family: var(--typo1);
    font-size: calc(25*var(--res));
    padding: 1vw;
}
.detail_emprunt{
    display: flex;
    flex-direction: row;
    border: var(--cadrejaune);
}
.visuel_emprunt{
    width: 50%;
}
.visuel_emprunt img{
    width: 100%;
    padding: 3vw;
}
.texte_emprunt{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.texte_emprunt li{
    color: var(--gris3);
    font-family: var(--typo2);
    line-height: var(--hauteurligne);
}
.texte_emprunt p{
    color: var(--gris3);
    font-family: var(--typo2);
    line-height: var(--hauteurligne);
    padding-right: 3vw;
}
.texte_emprunt p a{
    color: var(--bleu);
}
.equipement{
    background-color: var(--gris1);
    color: var(--jaune);
    font-family: var(--typo1);
    font-size: calc(25*var(--res));
    padding: 1vw;
    margin-top: 5vh;
}
.detail_equipement{
    display: flex;
    flex-direction: row;
    border: var(--cadrejaune);
}
.visuel_equipement{
    width: 50%;
}
.visuel_equipement img{
    width: 100%;
    padding: 3vw;
}
.texte_equipement{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: var(--gris3);
    font-family: var(--typo2);
    line-height: var(--hauteurligne);
    padding: 2vw;
}
.texte_equipement h3{
    font-family: var(--typo1);
    font-size: calc(20*var(--res));
    color: var(--bleu);
}
@media screen and (max-width: 840px){
    .texte_fonctionnement{
        width: 100%;
    }
    .clip_texte{
        flex-direction: column;
    }
    .clip_texte img{
        width: 100%;
    }
    .detail_emprunt{
        flex-direction: column;
    }
    .visuel_emprunt{
        width: 100%;
    }
    .texte_emprunt{
        width: 100%;
        padding: 1vw;
    }
    .lien_reglement{
        align-self: center;
    }
    .detail_equipement{
        flex-direction: column-reverse;
    }
    .visuel_equipement{
        width: 100%;
    }
    .texte_equipement{
        width: 100%;
    }
    .texte_equipement h3{
        padding-top: 2vw;
    }
}
@media screen and (max-width: 500px){
   .emprunt, .equipement{
    font-size : calc(40*var(--res));
}
.texte_equipement h3{
    font-size: calc(30*var(--res));
}
   }