@charset "utf-8";

@media screen and (max-width:330px), screen and (max-device-width: 330px){
    

    .colonne1, .colonne2, .colonne3, .colonne4, .colonne5, .colonne6, .colonne7, .colonne8, .colonne9, .colonne10, .colonne11, .colonne12{
        margin-left: 1.5%;
        margin-right: 1.5%;
        width: 97%;
    }
    .repousse-colonne1,  .repousse-colonne2, .repousse-colonne3, .repousse-colonne4, .repousse-colonne5, .repousse-colonne6, .repousse-colonne7, .repousse-colonne8, .repousse-colonne9, .repousse-colonne10, .repousse-colonne11, .repousse-colonne12{
        margin: auto;
        margin-left: auto;
    }
    
    .visible-phone{display: block}
    .visible-tablet{display: none}
    .visible-desktop{display: none}
    .visible-large{display: none}
    .visible-touch{display: block}
    
    .hidden-phone{display: none}
    .hidden-tablet{display: block}
    .hiden-desktop{display: block}
    .hidden-large{display: block}
    .hidden-touch{display: none}
    .hidden-touchp{display: none}
    
    .entete {
        width: 80%;
        min-width: 80%;
    }
    #decalage {
        margin-top: 0;
    }
    .colonne-galerie{
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
    }
    #section3 {
        width: 100vw;
        height: auto;
        margin-left: 0;
        margin-right: 0;
    }
    .colonne-pgalerie{
        width: 50%;
        margin-left: 0;
        margin-right: 0;
    }
    .taille-img{
        display: none;
    }
    .titre-projet{
        width: 100%;
        left: 0!important;
        top: 30px;
        bottom: inherit;
    }
    .titre-projet h1 {
    font-size: 2.8em;
    }
    .titre-projet h2 {
        padding: 0 5px;
    }

    .demi-section {
        width: 100%;
        padding-bottom: 100%;
    }
    #section2 .entete, #section4 .entete{
        top: 10%;
        left: 10%;
        right: 10%;
        bottom: 10%;
        transform: initial;
    }
    
    .demi-section  .entete{
        top: 15%;
        left: 15%;
        right: 15%;
        bottom: 10%;
        transform: initial;
    }
    .fond-p1-1{
    background: linear-gradient(180deg, #C0E1D7 0%,#3F4A9A 50%);
}
.fond-p2-1{
    background: linear-gradient(180deg, #ffffff 0%,#EF7C35 50%);
}
.fond-p3-1{
    background: linear-gradient(180deg, #ffffff 0%,#8BB6D0 50%);
}
.fond-p4-1{
    background: linear-gradient(180deg, #D0EBFC 0%,#e847a5 50%);
}
.fond-p5-1{
    background: linear-gradient(180deg, #FFF487 0%,#AAC811 50%);
}
.fond-p6-1{
    background: linear-gradient(180deg, #F8E4D6 0%,#3F4A9A 50%);
}
.fond-p7-1{
    background: linear-gradient(180deg, #FFE19F 0%,#DF4E6D 50%);
}
.fond-p8-1{
    background: linear-gradient(180deg, #CAD7EF 0%,#6B4494 50%);
}
    header{
        bottom: 0;
        opacity: 0;
        padding-bottom: 5px;
        height: 80px;
    }
    .background-header-mobile{
        display: block;
        height: 40px;
    }
    background-header{
        display: none;
    }
    .fond-home{
        background: linear-gradient(0deg, rgba(21, 42, 136 ,1) 0%,rgba(146, 91, 168, 0) 100%);
    }
   
    .home{
        top:0;
    }
    .home a img{
        width: 45px;
    }
    .cv{
        top:0;
    }
    
}
/* Telephone */
@media screen and (min-width: 331px) and (max-width:580px){


    .colonne1, .colonne2, .colonne3, .colonne4, .colonne5, .colonne6, .colonne7, .colonne8, .colonne9, .colonne10, .colonne11, .colonne12{
        margin-left: 1.5%;
        margin-right: 1.5%;
        width: 97%;
    }
    .repousse-colonne1,  .repousse-colonne2, .repousse-colonne3, .repousse-colonne4, .repousse-colonne5, .repousse-colonne6, .repousse-colonne7, .repousse-colonne8, .repousse-colonne9, .repousse-colonne10, .repousse-colonne11, .repousse-colonne12{
        margin: auto;
        margin-left: auto;
    }
    
    .visible-phone{display: block}
    .visible-tablet{display: none}
    .visible-desktop{display: none}
    .visible-large{display: none}
    .visible-touch{display: block}
    
    .hidden-phone{display: none}
    .hidden-tablet{display: block}
    .hiden-desktop{display: block}
    .hidden-large{display: block}
    .hidden-touch{display: none}
    .hidden-touchp{display: none}
    
    #decalage {
        margin-top: 0;
    }
    
    .colonne-galerie{
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
    }
    #section3 {
        width: 100vw;
        height: auto;
        margin-left: 0;
        margin-right: 0;
    }
    .colonne-pgalerie{
        width: 50%;
        margin-left: 0;
        margin-right: 0;
    }
    .taille-img{
        display: none;
    }
    .titre-projet{
        width: 100%;
        left: 0!important;
        top: 55px;
        bottom: inherit;
    }
    .titre-projet h1 {
    font-size: 2.8em;
    }
    .titre-projet h2 {
        padding: 0 5px;
    }

    .demi-section {
        width: 100%;
        padding-bottom: 100%;
    }
    #section2 .entete, #section4 .entete{
        min-width: 80%;
    }
    .demi-section  .entete{
        top: 20%;
        left: 15%;
        right: 15%;
        bottom: 10%;
        transform: initial;
    }
.fond-p1-1{
    background: linear-gradient(180deg, #C0E1D7 0%,#3F4A9A 50%);
}
.fond-p2-1{
    background: linear-gradient(180deg, #ffffff 0%,#EF7C35 50%);
}
.fond-p3-1{
    background: linear-gradient(180deg, #ffffff 0%,#8BB6D0 50%);
}
.fond-p4-1{
    background: linear-gradient(180deg, #D0EBFC 0%,#e847a5 50%);
}
.fond-p5-1{
    background: linear-gradient(180deg, #FFF487 0%,#AAC811 50%);
}
.fond-p6-1{
    background: linear-gradient(180deg, #F8E4D6 0%,#3F4A9A 50%);
}
.fond-p7-1{
    background: linear-gradient(180deg, #FFE19F 0%,#DF4E6D 50%);
}
.fond-p8-1{
    background: linear-gradient(180deg, #CAD7EF 0%,#6B4494 50%);
}
    header{
        bottom: 0;
        opacity: 1;
        padding-bottom: 5px;
        height: 60px;
    }
    .fond-home{
        background: linear-gradient(0deg, rgba(21, 42, 136 ,1) 0%,rgba(146, 91, 168, 0) 100%);
    }
    
    header button a img{
        width: 30px;
        opacity: 1!important;
    }
    .home{
        top:0;
    }
    .home a img{
        width: 45px;
    }
    .cv{
        top:0;
    }
    header{
        bottom: 0;
        opacity: 0;
        padding-bottom: 5px;
        height: 80px;
    }
    .background-header-mobile{
        display: block;
        height: 40px;
    }
    background-header{
        display: none;
    }

    .home{
        top: auto;
        bottom: 5px;
    }
    .cv{
        top: auto;
        bottom: 5px;
    }
    

    
}/* Fin Telephone */








/*petite Teablette */
@media screen and (min-width: 581px) and (max-width:824px){

    
    .visible-phone{display: none}
    .visible-tablet{display: block}
    .visible-desktop{display: none}
    .visible-large{display: none}
    .visible-touch{display: block}
    
    .hidden-phone{display: block}
    .hidden-tablet{display: none}
    .hiden-desktop{display: block}
    .hidden-large{display: block}
    .hidden-touch{display: none}
    .hidden-touchp{display: none}
    
    
    .colonne-pgalerie{
        width: 33,33333333333333333333333333333333333333333%;
        margin-left: 0;
        margin-right: 0;
    }
    .taille-img{
        display: none;
    }
    .titre-projet{
        width: 100%;
        left: 0!important;
        top: 20px;
        bottom: inherit;
    }
    .titre-projet h2 {
        padding: 0 5px;
    }
    .lien-galerie h4 {
        text-align: left;
        padding-top: 55px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .demi-section {
        width: 100%;
        padding-bottom: 100%;
    }
    .section-projet {
        height: 80vw;
        overflow: hidden
    }
    .titre-projet{
        width: 100%;
        left: 0!important;
        top: 130px;
        bottom: inherit;
    }
    .fond-p1-1{
    background: linear-gradient(180deg, #C0E1D7 0%,#3F4A9A 50%);
}
.fond-p2-1{
    background: linear-gradient(180deg, #ffffff 0%,#EF7C35 50%);
}
.fond-p3-1{
    background: linear-gradient(180deg, #ffffff 0%,#8BB6D0 50%);
}
.fond-p4-1{
    background: linear-gradient(180deg, #D0EBFC 0%,#e847a5 50%);
}
.fond-p5-1{
    background: linear-gradient(180deg, #FFF487 0%,#AAC811 50%);
}
.fond-p6-1{
    background: linear-gradient(180deg, #F8E4D6 0%,#3F4A9A 50%);
}
.fond-p7-1{
    background: linear-gradient(180deg, #FFE19F 0%,#DF4E6D 50%);
}
.fond-p8-1{
    background: linear-gradient(180deg, #CAD7EF 0%,#6B4494 50%);
}
    header{
        bottom: 0;
        opacity: 1;
        padding-bottom: 5px;
        height: 60px;
    }
    .fond-home{
        background: linear-gradient(0deg, rgba(21, 42, 136 ,1) 0%,rgba(146, 91, 168, 0) 100%);
    }
    
    header button a img{
        width: 30px;
        opacity: 1!important;
    }
    .home{
        top:0;
    }
    .home a img{
        width: 45px;
    }
    .cv{
        top:0;
    }

    header{
        bottom: 0;
        opacity: 0;
        padding-bottom: 5px;
        height: 80px;
    }
    .background-header-mobile{
        display: block;
        height: 40px;
    }
    background-header{
        display: none;
    }
    .home{
        top: auto;
        bottom: 5px;
    }
    .cv{
        top: auto;
        bottom: 5px;
    }

    
}/* Fin petite Teablette */

/*grande Teablette */
@media screen and (min-width: 825px) and (max-width:1025px){

    .visible-phone{display: none}
    .visible-tablet{display: block}
    .visible-desktop{display: none}
    .visible-large{display: none}
    .visible-touch{display: block}
    
    .hidden-phone{display: block}
    .hidden-tablet{display: none}
    .hiden-desktop{display: block}
    .hidden-large{display: block}
    .hidden-touch{display: none}
    .hidden-touchp{display: block}
    
    
    .colonne-pgalerie{
        width: 33,33333333333333333333333333333333333333333%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .taille-img {
        width: 60%;
    }
    .titre-projet {
        bottom: 20%;
    }
    .demi-section {
        width: 100%;
        padding-bottom: 100%;
    }
    .section2 .entete, #section4 .entete{
        top: 10%;
        left: 25%;
        right: 25%;
        padding-bottom: 25vh;
        transform: initial;
    }
    .section-projet {
        height: 80vw;
        overflow: hidden
    }
}/* grande Teablette */








/* Petit PC */
@media screen and (min-width: 1026px) and (max-width:1299px){


    .visible-phone{display: none}
    .visible-tablet{display: none}
    .visible-desktop{display: block}
    .visible-large{display: none}
    .visible-touch{display: none}
    
    .hidden-phone{display: block}
    .hidden-tablet{display: block}
    .hiden-desktop{display: none}
    .hidden-large{display: block}
    .hidden-touch{display: block}
    

    .colonne-pgalerie{
        width: 25%;
        margin-left: 0;
        margin-right: 0;
    }
}/*Fin Petit PC */









/* HD*/
@media screen and (min-width: 1300px) {

    
    
    
    .visible-phone{display: none}
    .visible-tablet{display: none}
    .visible-desktop{display: none}
    .visible-large{display: block}
    .visible-touch{display: none}
    
    .hidden-phone{display: block}
    .hidden-tablet{display: block}
    .hiden-desktop{display: block}
    .hidden-large{display: none}
    .hidden-touch{display: block}
    
    
    
    .colonne-pgalerie{
        width: 20%;
        margin-left: 0;
        margin-right: 0;
    }
    
}/*Fin HD*/





































@media screen and (max-width:330px), screen and (max-device-width: 330px){

    .entete {
        min-width: 0px;
    }

    #section2{
        min-height: 1340px;
    }
    #section4{
        min-height: 1500px;
    }

}
@media screen and (min-width: 331px) and (max-width:400px){

    .entete {
        min-width: 80%;
    }

    #section2{
        min-height: 1140px;
    }
    #section4{
        min-height: 1300px;
    }

}

@media screen and (min-width: 401px) and (max-width:450px){

    #section2{
        min-height: 950px;
    }
    #section4{
        min-height: 920px;
    }

}

@media screen and (min-width: 451px) and (max-width:500px){

    #section2{
        min-height: 830px;
    }
    #section4{
        min-height: 900px;
    }

}

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

    #section2{
        min-height: 760px;
    }
    #section4{
        min-height: 860px;
    }

}

@media screen and (min-width: 551px) and (max-width:580px){

    #section2{
        min-height: 950px;
    }
    #section4{
        min-height: 750px;
    }

}

@media screen and (min-width: 581px) and (max-width:824px){
    #section4{
        min-height: 880px;
    }

}