@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}
    
    
    .colonne-galerie{
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    #decalage{
        margin-top:3vw;
    }
    #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 {
        font-size: 2.4rem;
        line-height: 3rem;
        padding: 0 5px;
    }

    .demi-section {
        width: 100%;
        padding-bottom: 100%;
    }
    #section2 .entete, #section4 .entete, #section5 .entete{
        position: relative;
        margin-top: 10%;
        left: 10%;
        right: 10%;
        width: 80%;
        min-width: 0px;
        height: auto;
        margin-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;
    }
    body{
        padding-bottom: 60px;
    }
    .home{
        top: auto;
        bottom: 5px;
    }
    .cv{
        top: auto;
        bottom: 5px;
    }
    
}
/* 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}
    
    
    .colonne-galerie{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
    #decalage{
        margin-top: 3vw;
    }
    #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 {
        font-size: 2.4rem;
        line-height: 3rem;
        padding: 0 5px;
    }

    .demi-section {
        width: 100%;
        padding-bottom: 100%;
    }
    #section2 .entete, #section4 .entete, #section5 .entete{
        position: relative;
        margin-top: 10%;
        left: 10%;
        right: 10%;
        width: 80%;
        min-width: 0px;
        height: auto;
        margin-bottom: 10%;
        transform: initial;
    }
    .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: 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;
    }
    body{
        padding-bottom: 60px;
    }
    

    
}/* 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-galerie{
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
    }
    #decalage{
        margin-top: 3vw;
    }
    .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 {
        font-size: 2.4rem;
        line-height: 3rem;
        padding: 0 5px;
    }
     .titre-projet{
        width: 100%;
        left: 0!important;
        top: 130px;
        bottom: inherit;
    }
    .demi-section {
        width: 100%;
        padding-bottom: 100%;
    }
    #section2 .entete, #section4 .entete{
        position: relative;
        margin-top: 25%;
        left: 25%;
        right: 25%;
        width: 50%;
        height: auto;
        margin-bottom: 25%;
        transform: initial;
    }
    .section-projet {
        height: 80vw;
        overflow: hidden
    }
    .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;
    }
    .home{
        top: auto;
        bottom: 5px;
    }
    .cv{
        top: auto;
        bottom: 5px;
    }
    body{
        padding-bottom: 60px;
    }
    
}/* 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{
        display: none;
    }
    .titre-projet{
        width: 100%;
        left: 0!important;
        top: 20px;
        bottom: inherit;
    }
    .titre-projet h2 {
        padding: 0 5px;
    }
     .titre-projet{
        width: 100%;
        left: 0!important;
        top: 130px;
        bottom: inherit;
    }
    
    section2 .entete, #section4 .entete{
        position: relative;
        margin-top: 25%;
        left: 25%;
        right: 25%;
        width: 50%;
        height: auto;
        margin-bottom: 25%;
        transform: initial;
    }
    .section-projet {
        height: 80vw;
        overflow: hidden
    }
    .lien-galerie h5{
        text-align: left;
        font-size: 1.4rem;
        padding-top: 85px;
        padding-left: 15px;
        padding-right: 15px;
    }
}/* 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;
    }
    .taille-img {
        top: 60px;
    }
    .lien-galerie h5{
        text-align: left;
        padding-top: 100px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
}/*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*/