@media screen and (max-width: 550px)
{

    #btn_menu{
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scale(1);
        opacity: .6;
        pointer-events: all;
    }

    #navbtn:checked~#btn_menu{
       background-color: rgb(255, 255, 255);
       opacity: 1;
    }

    #navbtn:checked~#btn_menu:after{
        content: "✕";
     }

    #navbtn:checked~nav{
        transform: translate3d(0, 0, 1px);
        -webkit-transform: translate3d(0, 0, 1px);
    }

    nav{
        flex-direction: column;
        position: absolute;
        left: 0;
        top: 0;
        width: 250px;
        height: 100%;
        z-index: 2;
        transform: translate3d(-300px, 0, 1px);
        -webkit-transform: translate3d(-300px, 0, 1px);
        background-color: hsla(230, 30%, 96%, 0.95);
        overflow: hidden; 
    }

    @supports( backdrop-filter: blur(15px) ) or (-webkit-backdrop-filter: blur(15px)){
        nav{
        backdrop-filter: blur(15px) ;
        -webkit-backdrop-filter: blur(15px);
        background-color: hsla(230, 30%, 96%, 0.65);
        }
    }

    .hide_main_logo{
        height: 45px;
        opacity: 1;
        pointer-events: default;
        transform: scale(1);
    }

    nav ul {
        display: initial;
    }

    nav .svg-inline--fa{
        display: initial;
        width: 18px;
        height: 18px;
        margin: 0 6px 0 0;
        stroke: #265369;
    }

main{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        overflow: scroll;
    }

    #zone_titre p{
        font-size: 2em;
    }

#mz_app section h2{
        margin: 0;
        padding: 0;
        font-size: 1.5em;
        font-weight: 600;
        letter-spacing: 1px;
        text-align: center;
    }

    #presentation h2{
        text-align: center;
    }

    #signature_mouzas {
        padding-bottom: 35%;
    }

    #logo_site{
        width: 70%;
    }

    #parcour .container{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(3,auto-fill );
        grid-gap: 15px;
    }
    
    #parcour .container article:last-child{
        grid-column: span 1;
    }

    #domaine_expertise .container {
        grid-template-columns: repeat(auto-fit,minmax(200px,350px) );
    }

    section .container {
        margin: 30px 0 30px 0;
        padding: 0 35px 0 35px;
    }

    #domaine_expertise article {
        margin: 20px;
    }

    #apercu_video{
        width: 85%;
        max-height: 250px;
    }

}