@media screen and (max-width:959px) {  
    .page-level-2 .mention-usages {
        margin-left:5px;
    }    
    .page-level-2 #middle {}
    #main.page-level-2 #middle h1.h1 {
        padding:0!important;
        margin: 10px 0 0 5px!important;
    }



    .sectionBYORANGE .mid .content {
        width:90%;
        max-width:none;
        margin:0 5%;
    }

    #sectionBYORANGE .mid#sectionGRISE,
    #sectionBYORANGE .mid#sectionGRISE .content{
        height:auto;
    }

    .rond {
        display:none;
    }
    .picto-illustration {
        display:none;
    }
    #sectionCHEMIN {
        display:none;
    }

    #sectionBYORANGE h2 {
        font-size:20px;
    }


    .blocSECTION {
        position:relative;
        top:0!important;
        left:0!important;
        width:100%!important;
        margin-bottom:40px;
    }


    .blocSECTION.blocLEFT .bullePICTO, .blocSECTION.blocLEFT .bullePICTOWHITE {
        position:relative;
    }
    .blocSECTION.blocLEFT p, .blocSECTION.blocLEFT h3 {
        position:relative!important;
        top:0!important;
        left:0!important;
        width:50%;
    }

    .blocSECTION.blocRIGHT .bullePICTO, .blocSECTION.blocRIGHT .bullePICTOWHITE {
        position:relative;
    }    
    .blocSECTION.blocRIGHT p, .blocSECTION.blocRIGHT h3 {
        position:relative!important;
        top:0!important;
        left:0!important;
        width:50%;
    }


    .blocSECTION h3.bigTITLE {
        width:100%;
        float:none;
        font-size: 24px;
        margin-bottom:30px;
    }

    .blocSECTION p {
        line-height:18px;
    }   

    #sectionBYORANGE .mid#sectionBLEUE .blocSECTION h3.bigTITLE {
        padding-top:30px;
    }



    #bloc1 .bullePICTO {
        margin-left:-40px;
    }


    #picto1.picto-illustration {
        display:block;
        top:10px;
        right:-20px;
    }
    #picto1.picto-illustration img {
        width:60px;
    }


    #bloc1.blocSECTION {
        width:100%;
        margin-bottom:10px;
    }
    #bloc1 .bullePICTO {
        float:left;
        margin-left:-30px;
        margin-right:-30px;
        width:55%;
    }    
    #bloc1 h3 {
        width:100%;
    }
    #bloc1 p {
        width:100%;
    }
    #bloc1 .img1 {
        top:14px;
        left:30px;
        z-index:20;
    }
    #bloc2 {
        width:100%;
    }
    #bloc2 .bullePICTOWHITE {
        float:right;
        margin-left:10px;
    }
    #bloc2 h3 {
        width:100%;
    }
    #bloc2 p {
        width:100%;
    }
    #bloc3 {
        width:100%;
    }
    #bloc3 .bullePICTOWHITE {
        float:left;
        margin-right:40px;
    }    
    #bloc3 h3 {
        width:100%;
    }
    #bloc3 p {
        width:100%;
    }
    #bloc4 {
        width:100%;
    }
    #bloc4 .bullePICTOWHITE {
        float:right;
        margin-left:10px;
    }        
    #bloc4 h3 {
        width:100%;
        right:238px;
    }
    #bloc4 p {
        top:68px;
        right:238px;
    }
    





}


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


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



}

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

}
@media screen and (max-width:639px) {  
    /*///////////////////////////////////
    CLASSES POUR SMARTPHONE 
    ///////////////////////////////////*/
    .hidden-smarphone {
        display:none;
    }
    .hidden-desktop {
        display:block;
    }
    /*///////////////////////////////////
    FIN CLASSES POUR SMARTPHONE 
    ///////////////////////////////////*/

    #bloc3 .bullePICTOWHITE {
        float:left;
        margin-right:20px;
    }        


    /*///////////////////////////////////
    RESET LAYOUT POUR SMARTPHONE 
    ///////////////////////////////////*/    
    #main.page-level-2 #middle h1.h1 {
        margin:0;
        color: #000000;
        font-size:18px;
        text-transform: uppercase;
    }
    .page-level-2 #middle {
        padding:20px 0 0 0;
    }    
    .page-level-2 .mention-usages {
        top: 0;
        margin: 5px 0 0 5px;
    }  





}

@media screen and (max-width:640px) {  
    #bloc1 h3 {
        font-size:18px;
    }
    #bloc1 h3 span {
        font-size:34px;
    }
    #bloc1 .bullePICTO {
        margin-right:-10px;
    }      
    
    #picto1.picto-illustration {
        right:0px;
    }
    #picto1.picto-illustration img {
        width:50px;
    }    
    

    .blocSECTION .bullePICTOWHITE.bulle126 {
        width:126px;
        height:126px;
    }
    .blocSECTION .bullePICTOWHITE.bulle184 {
        width:100px;
        height:100px;
    }
    .blocSECTION .bullePICTOWHITE.bulle188 {
        width:100px;
        height:100px;
    }
    .blocSECTION .bullePICTOWHITE.bulle194 {
        width:100px;
        height:100px;
    }
    .blocSECTION .bullePICTOWHITE.bulle198 {
        width:100px;
        height:100px;
    }
    .blocSECTION .bullePICTOWHITE.bulle204 {
        width:100px;
        height:100px;
    }    

    .blocSECTION {
        margin-bottom:30px!important;
    }
    .blocSECTION p {
        width:50%!important;
        float:left;
    }   
    

    #bloc2 .img1 {
        top:10px;
        left:48px;
        z-index:20;
        width:70%;
    }
    #bloc2 .img2 {
        top:20px;
        left:-8px;
        z-index:20;
        width:70%;
    }
    #bloc3 .img1 {
        top:24px;
        left:-12px;
        width:60%;
    }
    #bloc3 .img2 {
        top:74px;
        left:30px;
        width:50px;
    }
    #bloc3 .img3 {
        top:18px;
        left:50px;
        width:80px;
    }
    #bloc3 .img4 {
        top:-4px;
        left:40px;
        width:24px;
    }
    #bloc4 .img1 {
        top:-10px;
        left:10px;
        z-index:20;
    }
    #bloc4 .img2 {
        top:30px;
        left:80px;
        width:40px;
    }    

}

@media screen and (max-width:320px) {  
    
   #bloc1.blocSECTION {
        margin-bottom:20px;
    }    
    
    #bloc1 h3 {
        font-size:15px;
    }
    #bloc1 h3 span {
        font-size:26px;
    }
    #picto1.picto-illustration img {
        width:40px;
    }   


}