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

    .main{
        max-width: auto;
    }

    .header{
        max-width: auto;
    }

}

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

    .inner{
        margin: 0px 2%;
    }

    .section4Projets,
    .footerBottom,
    .footerMenu,
    .actualiteAvant,
    .projetAvant,
    .section18Zone{
        margin: 0px 2%;
    }

    .actualite{
        .section12{
            .inner{
                max-width: 1200px;
            }
        }
    }

    .commentaires{
        .inner{
            max-width: 1200px;
        }
    }

    .section22{
        .inner{
            max-width: 1200px;
        }
    }

    .headerMenu,
    .headerAction{
        display: none;
    }

    .headerMenuMobileBtn{
        display: block;
    }

    .headerLogo{
        padding: 13px 13px 13px 0px;
    }

    .section1Left{
        h2{
            font-size: 24px;
        }
    }

}

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

    .section2{
        p{
            font-size: 30px;
            line-height:40px;
        }
    }

    .section21Col{
        width: calc(100% / 2);
        margin-bottom: 30px;
    }

    .comiteListe{
        width:calc(100% / 2);
    }

    .presseCategorie{
        width: 100%;
    }

    .projetListe{
        width: 49%;
        margin: 0px 2% 40px 0px;
        &:nth-child(2n+0){
            margin: 0px 0px 40px 0px;
        }
        &:nth-child(3n+0){
            margin: 0px 2% 40px 0px;
        }
    }

    .actualiteListe{
        width: 49%;
        margin: 0px 2% 40px 0px;
        &:nth-child(2n+0){
            margin: 0px 0px 40px 0px;
        }
        &:nth-child(3n+0){
            margin: 0px 2% 40px 0px;
        }
    }

    .section1Left{
        width: 100%;
        padding: 0px;
        margin: 0px;
        h2{
            padding: 30px 0px 15px 0px;
        }
    }

    .section1Logo{
        width: auto;
        margin: 0px auto;
    }

    .section1Right{
        width: 100%;
    }

    .section1{
        .inner{
            padding: 150px 0px 60px 0px;
        }
    }

    .section3Bloc{
        width: 100%;
    }

    .contenuTopLeft{
        h1{
            line-height:35px;
            font-size: 30px;
        }
    }

    .presentation{
        .contenuTopLeft{
            width: 100%;
            margin-bottom: 10px;
        }
        .contenuTopRight{
            width: 100%;
        }
    }

    .section17Left{
        width: 100%;
        margin-bottom: 25px;
    }

    .section17Right{
        width: 100%;
        padding-left: 100px;
    }

    .section18{
        .inner{
            padding: 30px 0px;
        }
    }

    .section18ZoneLeft{
        width: 100%;
        margin:0px 0px 20px 0px;
    }

    .section18ZoneRight{
        width: 100%;
    }

    .sliderContenu{
        padding: 20px 20px 20px 0px;
        h3{
            font-size: 25px;
        }
        p{
            font-size: 17px;
            line-height:29px;
        }
    }



    .section22Right {
        padding: 50px 90px;
    }

    .contenuTopLeft{
        width: 100%;
        margin:0px 0px 10px 0px;
    }

    .contenuTopRight{
        width: 100%;
    }

    .addProjet{
        .contenuTopLeft{
            width: 100%;
            margin-bottom: 25px;
        }
        .contenuTopRight{
            width: 100%;
        }
    }

}

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

    .section28Left,
    .section28Right{
        width: 100%;
        margin: 0px;
    }

    .section10Left,
    .section10Right{
        width: 100%;
        margin:0px;
    }

    .sidebar{
        width: 100%;
        margin:0px;
        text-align: center;
    }

    .projetLogo{
        display: inline-block;
    }

    .contenuSidebar{
        width: 100%;
    }

    .footer{
        .inner{
            padding: 30px 0px;
        }
    }

    .footerMenu{
        border:none;
        ul{
            li{
                width: 100%;
                a{
                    padding: 0px 11px;
                }
            }
        }
    }

    .footerLogo{
        padding:20px 0px;
    }

    .footerBottom{
        display: none;
    }

    .contentTopRecherche{
        .form-group{
            &.first{
                width: 100%;
                margin: 0px 0px 20px 0px;
            }
            &.last{
                width: 100%;
            }
        }
    }

    .contact{
        form{
            width: 100%;
        }
    }

}

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

    .section2{
        .inner{
            padding: 60px 0px 150px 0px;
        }
        p{
            font-size: 25px;
            line-height:35px;
        }
    }

    .projetListe{
        width: 100%;
        margin: 0px 0px 40px 0px;
        &:nth-child(2n+0){
            margin: 0px 0px 40px 0px;
        }
        &:nth-child(3n+0){
            margin: 0px 0px 40px 0px;
        }
    }

    .actualiteListe{
        width: 100%;
        margin: 0px 0px 40px 0px;
        &:nth-child(2n+0){
            margin: 0px 0px 40px 0px;
        }
        &:nth-child(3n+0){
            margin: 0px 0px 40px 0px;
        }
    }

    .section15Contenu{
        max-width: 800px;
    }

    .section4{
        h2{
            margin-bottom: 25px;
            font-size: 25px;
            padding:0px 20px;
        }
    }

    .projetAvantLogo{
        display: none;
    }

    .projetAvantContenu{
        width: 100%;
    }

    .section7Citation{
        p{
            font-size: 22px;
        }
    }

    .actualiteAvantImage{
        display: none;
    }

    .actualiteAvantContenu{
        width: 100%;
    }

    .section6{
        .inner{
            padding:35px 0px;
        }
    }

    .section8{
        .inner{
            padding:35px 0px;
        }
    }

    .actualite, .projet{
        .contenuTop{
            h1{
                line-height:35px;
            }
        }
    }

    .section3Bloc{
        padding:50px 30px;
    }

    h2{
        &.lineLeft{
            &:after{
                display: none;
            }
        }
    }

    .footer{
        padding:50px 0px 0px 0px;
    }

    .sliderContenu{
        width: 100%;
        margin-bottom: 20px;
    }

    .sliderImage{
        width: 100%;
    }

    .section20{
        .inner{
            h2{
                font-size: 27px;
                margin-bottom: 25px;
            }
        }
    }

    .section21{
        .inner{
            h2{
                font-size: 27px;
            }
        }
    }

    .section21Col{
        width: 100%;
        margin-bottom: 30px;
    }

    .section22Bloc{
        padding:50px 30px;
        width: 100%;
    }

    .section23{
        .inner{
            h2{
                font-size: 27px;
            }
        }
    }

    .section25{
        .inner{
            padding: 70px 0px;
            h2{
                font-size: 27px;
            }
        }
    }

    .section25Left{
        width: 100%;
        margin: 0px 0px 25px 0px;
    }

    .section25Right{
        width: 100%;
    }

    .comiteListe{
        width: 100%;
    }

    .section26{
        .inner{
            padding:40px 0px 0px 0px;
            h2{
                font-size: 24px;
            }
        }
    }

    .section27{
        .inner{
            padding:40px 0px 0px 0px;
        }
    }

    .comiteListeContenu{
        h3{
            font-size:22px;
            line-height:26px;
        }
    }

    .presseListe{
        width: calc(100% / 2);
    }
}