@media screen and (max-width: 700px) {
    .br-mobile{
        display: block;
    }
    .br-desktop{
        display: none;
    }
}

@media screen and (max-width: 550px) {
    .dark-button{
        background-color: var(--sideBtn-bg-clr);
      }
      
      .dark-button:hover{
        background-color: var(--sideBtn-bg-clr);
      }
    .dark-button:hover::after{
        content: '';
        font-size: 0;
        width: 0;
        padding: 0;
        border-radius: 0;
        background-color: none;
        color: none;
    }
    .main-accueil div h2{
        font-size: 1.5em;
    }
    .scrollup{
        background-color: var(--sideBtn-bg-clr);
    }
    .scrollup:hover{
        background-color: var(--sideBtn-bg-clr);
    }
}

@media screen and (max-width: 500px) {
    #menu ul li a{
        font-size: 2.5em;
    }
    .searchForm{
        width: calc(100% - 60px);
      }
    #titre-projets span{
        width: 99%;
    }
    .projets-container .projets-box{
        width: 300px;
    }
    .competences .cptContainer .cptBox{
        width: 60vw;
        height: 80vw;
    }
    .competences .cptContainer .cptBox .cptImg{
        max-width: 36vw;
    }
    .competences .cptContainer .cptBox::after{
        font-size: 6vw;
    }
    .competences .cptContainer .cptBox .cptName{
        font-size: 6vw;
    }
    .mainAPropos{
        flex-direction: column;
        width: 90vw;
    }
    .mainAPropos img{
        width: 70%;
        margin: 0 auto;
    }
    .mainAPropos .sectionTextAPropos h3{
        text-align: center;
    }
    .mainAPropos .sectionTextAPropos h3 i{
        display: none;
    }
    .mainFormations{
        width: 90vw;
    }
    .mainFormations img{
        height: 25vw;
      }
}