body{
    font-family: 'Saira', sans-serif;
    background-color: #F2F2F2;
    margin: 0;
    cursor: url("images/cursor.png"), pointer;
    max-width: 100vw;
}
h1{
    font-family: rock-salt-pro, sans-serif;
    font-weight: 400;
}
/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------BTN MENU-------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/
.menu-complet{
    position: relative;
}
.menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 50px;
    border-radius: 200px;
    cursor: url("images/cursorHover.png"), pointer;
    transition: all .5s ease-in-out;
    padding-top: 10px;
    background-color: #F2F2F2;
    position: absolute;
    top:20px;
    right: 24px;
    z-index: 10000;
}
.menu-btn__burger {
    width: 32px;
    height: 3px;
    background: #F2F2F2;
    transition: all .5s ease-in-out;
    padding-top: 5px;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 3px;
    background: #3861A7;
    transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
    transform: translateY(-10px);
}
.menu-btn.open .menu-btn__burger {
    transform: translateY(-7px);
    background: transparent;
    /*padding-top: 0;*/
    /*padding-bottom: 5px;*/
}
.menu-btn.open .menu-btn__burger::before {
    transform: rotate(45deg);
}
.menu-btn.open .menu-btn__burger::after {
    transform: rotate(-45deg);
}



/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------MENU OUVRANT---------------------------------------*/
/*---------------------------------------------------------------------------------------------*/
.menu-ouvrant{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(to bottom, #3861A7 0%,  #010873 100%);
    clip-path: circle(1px at calc(100% - 2%) 6%);
    transition: all 0.3s ease-in-out;
}
.menu-ouvrant ul{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    list-style: none;
    text-align: center;
    width: 90%;
}



/*---------------------------------------------------------------------------------------------*/

.menu-ouvrant ul li{
    margin:15px 0;
    width: 100%;
    transition: all 0.3s ease-in-out;
}
.menu-ouvrant ul li:hover{
    background-color: #F2F2F2;
    color:#010873;
    cursor: url("images/cursorHover.png"), pointer;
}
/*---------------------------------------------------------------------------------------------*/
.menu-ouvrant ul li .liensMenu{
    font-family: rock-salt-pro, sans-serif;
    color:#F2F2F2;
    text-decoration: none;
    font-size: 40px;
    padding: 5px 40px;
    position: relative;
    width: 100%;
}
.menu-ouvrant ul li .liensMenu:hover{
    color:#010873;
    cursor: url("images/cursorHover.png"), pointer;
}

/*---------------------------------------------------------------------------------------------*/
#active:checked ~ .menu-ouvrant{
    clip-path: circle(75%);
}
input{
    display: none;
}
/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------HEADER---------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/
.header-page{
    position: fixed;
    width: 100vw;
    top:0;
    left: 0;
    z-index: 200;
}
.header-page .logo{
    position: absolute;
    width: 64px;
    height: 64px;
    background-image: url("images/accueil/desktop/logo.png");
    background-repeat: no-repeat;
    background-position: center;
    top:20px;
    left: 14px;
}
.header-page .logo:hover{
    background-image: url("images/accueil/desktop/logoHover.png");
    cursor: url("images/cursorHover.png"), pointer;
}
/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------ACCUEIL--------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/
.hero{
    background-image: url("images/accueil/desktop/heroDesktop.png");
    background-size: 121%;
    background-repeat: no-repeat;
    background-position: 70% 100%;
    height: 1046px;
    color:#F2F2F2;;
    background-color: #3861A7;
}
.hero section{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.hero section h1{
    font-size: 60px;
    margin: 13% 0 0 0;

}
.hero section h2{
    font-size: 48px;
    font-weight: 400;
}
.hero section a{
    font-size: 24px;
    text-decoration: none;
    color:#F2F2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 206px;
    height: 56px;
    border: 1px solid #F2F2F2;
	border-radius: 50px;
}
.hero section a:hover{
    background-color: #F2F2F2;
    color:#010873;
    cursor: url("images/cursorHover.png"), pointer;
}

/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------Projets--------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/

/************Recettes en pot****************************************************************************/
.potSnip {
    width: 470px;
    height: 470px;
    background-image: url("images/projets/desktop/imageprincipalePot.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: spin 8s linear infinite;
    -moz-animation: spin 8s linear infinite;
    animation: spin 8s linear infinite;
}

.potContenu{
    z-index: 9;
    display: none;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position:absolute;
    width: 400px;
    height: 400px;
    border-radius: 2000px;
}
.potComplet{
    width: 460px;
    height: 460px;
    color:white;
    top:0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2000px;
    right: 0;
}
.potComplet h3{
    font-size: 36px;
    margin-top: 90px;
    margin-bottom: 0;
}
.potComplet p{
    font-size: 24px;
    margin: 0;
}
.potComplet .typeDeProjet{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
}
/************QuickPlay*********************************************************************************/
.quickSnip {
    width: 470px;
    height: 470px;
    background-image: url("images/projets/desktop/imageprincipaleQuick.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: spin 12s linear infinite;
    -moz-animation: spin 12s linear infinite;
    animation: spin 12s linear infinite;
}

.quickContenu{
    z-index: 9;
    display: none;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position:absolute;
    width: 400px;
    height: 400px;
    border-radius: 2000px;
}
.quickComplet{
    width: 460px;
    height: 460px;
    color:white;
    top:0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2000px;
    right: 0;
}
.quickComplet h3{
    font-size: 36px;
    margin-top: 90px;
    margin-bottom: 0;
}
.quickComplet p{
    font-size: 24px;
    margin: 0;
}
.quickComplet .typeDeProjet{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
}
/************Playdate******************************************************************************/
.playSnip {
    width: 470px;
    height: 470px;
    background-image: url("images/projets/desktop/imageprincipaleJetball.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: spin 10s linear infinite;
    -moz-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
}

.playContenu{
    z-index: 9;
    display: none;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position:absolute;
    width: 400px;
    height: 400px;
    border-radius: 2000px;
}
.playComplet{
    width: 460px;
    height: 460px;
    color:white;
    top:0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2000px;
    right: 0;
}
.playComplet h3{
    font-size: 36px;
    margin-top: 90px;
    margin-bottom: 0;
}
.playComplet p{
    font-size: 24px;
    margin: 0;
}
.playComplet .typeDeProjet{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
}
/************Verre***************************************************************************************/
.verreSnip {
    width: 470px;
    height: 470px;
    background-image: url("images/projets/desktop/imageprincipaleVerre.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: spin 11s linear infinite;
    -moz-animation: spin 11s linear infinite;
    animation: spin 11s linear infinite;
}
.verreContenu{
    z-index: 9;
    display: none;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position:absolute;
    width: 400px;
    height: 400px;
    border-radius: 2000px;
}
.verreComplet{
    width: 460px;
    height: 460px;
    color:white;
    top:0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2000px;
    right: 0;
}
.verreComplet h3{
    font-size: 36px;
    margin-top: 90px;
    margin-bottom: 0;
}
.verreComplet p{
    font-size: 24px;
    margin: 0;
}
.verreComplet .typeDeProjet{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
}
/************Beigne***************************IMPORTANT**********************************************************/
.beigneSnip {
    width: 470px;
    height: 470px;
    background-image: url("images/projets/desktop/imageprincipaleBeigne.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: spin 9s linear infinite;
    -moz-animation: spin 9s linear infinite;
    animation: spin 9s linear infinite;
}
@-webkit-keyframes spin {
    100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    100%{-webkit-transform: rotate(360deg);}
}
@keyframes spin {
    100%{-webkit-transform: rotate(360deg);}
}
.beigneContenu{
    z-index: 9;
    display: none;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position:absolute;
    width: 400px;
    height: 400px;
    border-radius: 2000px;
}
.beigneComplet{
    width: 460px;
    height: 460px;
    color:white;
    top:0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2000px;
    right: 0;
}
.beigneComplet h3{
    font-size: 36px;
    margin-top: 90px;
    margin-bottom: 0;
}
.beigneComplet p{
    font-size: 24px;
    margin: 0;
}
.beigneComplet .typeDeProjet{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

/************AUTRES MODIFS*************************************************************************************/


.lienBehance{
    width: 264px;
    height: 100px;
    background-image: url("images/projets/desktop/logicielsBehance/behance2.png");
    background-repeat: no-repeat;
    background-position: center;
}
.lienBehance:hover{
    background-image: url("images/projets/desktop/logicielsBehance/behanceHover2.png");
    cursor: url("images/cursorHover.png"), pointer;
}


.projets{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}

.mesProjets{
    margin: 60px auto;
    width: 80%;
    height: 100%;
}

.mesProjets h2{
    color:#010873;
    font-weight: bold;
    font-size: 48px;
    text-align: center;
    padding-right: 40%;
}


/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------À propos-------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/
.aPropos{
    background-color: #A8B8D9;
    background-image: url("images/propos/desktop/flechesQualites.png");
    background-repeat: no-repeat;
    background-position: 0 48%;
    padding-left: 15%;
}
.aPropos h2{
    color:#F2F2F2;
    font-weight: bold;
    font-size: 48px;
    text-align: center;
    padding-right: 38%;
    padding-top: 120px;
    margin: 0;
}
.qualites{
    width: 100%;

    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
/*-------------------------------------------------------------------------------------------------------------*/
.proposComplet{
    display: flex;
    align-items: center;
    margin: 0;
    background-image: url("images/propos/desktop/photoMoi.png");
    background-repeat: no-repeat;
    background-position: 95% 0;
    background-size: 35%;
    height: 960px;
}
.proposComplet .flechesPropos{
    margin: 0;
}
.contenuPropos{
    height: 800px;
}
/*-------------------------------------------------------------------------------------------------------------*/
.qua{
    display: flex;
    margin: 0 0 20px 0;
}
.qua p{
    align-self: center;
    font-size: 24px;
    color:#010873;

}
.qua h3{
    font-family: rock-salt-pro, sans-serif;
    font-weight: 400;
    font-size: 40px;
    margin: 0 15px 0 0;
}
.passione h3{
    color:#010873;

}
.creatif{
    margin-bottom: 30px;
}
.creatif h3{
    color:#F2F2F2;
    margin-right: 70px;
}
.curieux h3{
    color:#3854A7;
    margin-right: 115px;
}
.amical{
    margin-bottom: 30px;
}
.amical h3{
    color:#7487BF;
    margin-right: 100px;
}
.calme h3{
    color:#F2F2F2;
    margin-right: 130px;
}



/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------COMPÉTENCES----------------------------------------*/
/*---------------------------------------------------------------------------------------------*/
.competence h2{
    color:#3854A7;
    font-weight: bold;
    font-size: 48px;
    text-align: center;
    padding-right: 38%;
    padding-top: 70px;
}
.competence{
    background-image: url("images/competences/competencesDesktop.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
    height: 1100px;
}


/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------CONTACT--------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/

.contact{
    background-color: #7487BF;
}
.contact h2{
    color:#010873;
    font-weight: bold;
    font-size: 48px;
    text-align: center;
    padding-right: 38%;
    padding-top: 70px;
}

.contactContenu{
    width: 100%;
    background-image: url('images/contact/desktop/flecheContact.png');
    background-repeat: no-repeat;
    background-position: 0 40%;
    display: flex;
}

.approcheContact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin-left: 100px;

}
.approcheContact h3{
    font-size: 36px;
    color:#F2F2F2;
    font-weight: 400;
    text-align: left;
    width: 80%;
    align-self: center;
    margin-bottom: 100px;
}
.reseauxContact{
    display: flex;
    align-self: center;
    justify-content: center;
    align-items: center;
}
.reseauxContact div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: 5%;
}
.reseauxContact div p{
    color:#F2F2F2;
    font-size: 24px;
    text-align: center;
    width: 250px;
}
.video{
    margin: 0;
    padding-left: 150px;
}

.video iframe{
    width: 660px;
    height: 415px;
}



.reseauxContact .phone a{
    width: 88px;
    height: 88px;
    background-image: url("images/contact/desktop/phoneContact.png");
    background-repeat: no-repeat;
    background-position: center;
}
.reseauxContact .phone a:hover{
    background-image: url("images/contact/desktop/phoneContactHover.png");
    cursor: url("images/cursorHover.png"), pointer;
}

.reseauxContact .mail a{
    width: 88px;
    height: 88px;
    background-image: url("images/contact/desktop/mailContact.png");
    background-repeat: no-repeat;
    background-position: center;
}
.reseauxContact .mail a:hover{
    background-image: url("images/contact/desktop/mailContactHover.png");
    cursor: url("images/cursorHover.png"), pointer;
}

.reseauxContact .linkledin a{
    width: 88px;
    height: 88px;
    background-image: url("images/contact/desktop/linkledinContact.png");
    background-repeat: no-repeat;
    background-position: center;
}
.reseauxContact .linkledin a:hover{
    background-image: url("images/contact/desktop/linkledinContactHover.png");
    cursor: url("images/cursorHover.png"), pointer;
}


/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------FOOTER---------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/

footer{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7487BF;
    width: 100%;
    margin: 0;
}
footer p{
    color:#010873;
    font-size: 12px;
}




/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------NAVBAR---------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/
::-webkit-scrollbar{
    width:15px;
}


::-webkit-scrollbar-track{
    border:7px solid #F2F2F2;
    background: #F2F2F2;
}

::-webkit-scrollbar-thumb{
    background: #7487BF;
}
/*---------------------------------------------------------------------------------------------*/
/*------------------------------------------MEDIA---------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/


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





    .aPropos{
        background-position: -180px 48%;
        padding-left: 8%;
    }
    .proposComplet{
        background-size: 29%;
        background-position: 100% 24%;
    }

    .contactContenu{
        background-position: -40% 40%;
    }
    .video iframe{
        width: 560px;
        height: 315px;
    }
    .video{
        margin: 0;
        padding-left: 0;
    }

}

@media only screen and (max-width: 1366px) {
    .aPropos{
        background-position: -200px 48%;
        padding-left: 6%;
    }
    .proposComplet{
        background-size: 29%;
        background-position: 100% 24%;
    }
}

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

/***************************HEADER**********************************************************************/
    .menu-btn{
        width: 44px;
        height: 35px;
    }
    .menu-btn__burger{
        padding-top: 3px;
    }
    .menu-btn__burger::before,
    .menu-btn__burger::after {
        width: 20px;
        height: 2px;
        margin-left: 4px;
        padding-left: 4px;

    }
    .header-page .logo{
        width: 44px;
        height: 44px;
        background-image: url("images/accueil/mobile/logoMobile.png");
        background-size: 100%;
    }
    .header-page .logo:hover{
        background-image: url("images/accueil/mobile/logoMobileHover.png");
        background-size: 100%;
    }
    .hero{
        background-image: url("images/accueil/mobile/heroMobile.png");
        background-position:  center bottom;
        background-size: 173%;
        height: 690px;
    }
    .hero section h1{
        font-size: 28px;
        text-align: center;
        margin: 20% 0 0 0 ;
    }
    .hero section h2{
        font-size: 24px;
    }
    .hero section a{
        font-size: 14px;
        width: 128px;
        height: 40px;
    }
    /***************************MENU************************************************************************/
    .menu-ouvrant ul li .liensMenu{
        font-size: 24px;
        padding-left: 0;
    }
    .menu-ouvrant ul{
        padding-bottom: 100px;
    }

    .menu-ouvrant{
        clip-path: circle(1px at calc(100% - 10%) 5%);
    }
    /***************************PROJETS************************************************************************/
    .mesProjets h2{
        font-size: 24px;
        text-align: left;
        white-space: nowrap;
        padding-top: 40px;
        padding-bottom: 15px;
        padding-left: 70px;
    }

    .lienBehance{
        background-image: url("images/projets/mobile/behanceMobile.png");
        background-size: 100%;
        width: 154px;
        height: 40px;
    }
    .lienBehance:hover{
        background-image: url("images/projets/mobile/behanceMobileHover.png");
    }

    .projets{
        width: 375px;
    }

    .mesProjets{
        width: 100vw;
        margin: 0;
    }



    /***************************BEIGNE************************************************************************/
    .beigneComplet{
        width: 100vw;
        height: 200px;
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        flex-direction: row;
    }
    /*********image**********/

    .beigneSnip {
        width: 165px;
        height: 165px;
        background-size: 100%;
    }
    /*********contenu**********/

    .beigneContenu{
        z-index: 9;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
        position:static;
        width: 165px;
        height: 165px;
    }
    .beigneComplet h3{
        margin: 0;
        font-size: 18px;
        color:#010873;
        white-space: nowrap;
    }
    .beigneComplet .typeDeProjet{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:0;
    }
    .beigneComplet img{
        width: 49px;
        height: 40px;
        margin-bottom: 15px;
    }
    .beigneComplet p{
        font-size: 14px;
        color:#3854A7;
    }



    /***************************VERRE************************************************************************/
    .verreComplet{
        width: 100vw;
        height: 200px;
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        flex-direction: row;
    }
    /*********image**********/

    .verreSnip {
        width: 165px;
        height: 165px;
        background-size: 100%;
    }
    /*********contenu**********/

    .verreContenu{
        z-index: 9;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
        position:static;
        width: 165px;
        height: 165px;
    }
    .verreComplet h3{
        margin: 0;
        font-size: 18px;
        color:#010873;
        white-space: nowrap;
    }
    .verreComplet .typeDeProjet{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:0;
    }
    .verreComplet img{
        width: 45px;
        height: 46px;
        margin-bottom: 15px;
    }
    .verreComplet p{
        font-size: 14px;
        color:#3854A7;
    }

    /***************************POT************************************************************************/
    .potComplet{
        width: 100vw;
        height: 200px;
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        flex-direction: row;
    }
    /*********image**********/

    .potSnip {
        width: 165px;
        height: 165px;
        background-size: 100%;
    }
    /*********contenu**********/

    .potContenu{
        z-index: 9;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
        position:static;
        width: 165px;
        height: 165px;
    }
    .potComplet h3{
        margin: 0;
        font-size: 18px;
        color:#010873;
        white-space: nowrap;
    }
    .potComplet .typeDeProjet{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:0;
    }
    .potComplet img{
        width: 48px;
        height: 48px;
        margin-bottom: 15px;
    }
    .potComplet p{
        font-size: 14px;
        color:#3854A7;
    }

    /***************************QUICK************************************************************************/
    .quickComplet{
        width: 100vw;
        height: 200px;
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        flex-direction: row;
    }
    /*********image**********/

    .quickSnip {
        width: 165px;
        height: 165px;
        background-size: 100%;
    }
    /*********contenu**********/

    .quickContenu{
        z-index: 9;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
        position:static;
        width: 165px;
        height: 165px;
    }
    .quickComplet h3{
        margin: 0;
        font-size: 18px;
        color:#010873;
        white-space: nowrap;
    }
    .quickComplet .typeDeProjet{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:0;
    }
    .quickComplet img{
        width: 48px;
        height: 48px;
        margin-bottom: 15px;
    }
    .quickComplet p{
        font-size: 14px;
        color:#3854A7;
    }

    /***************************PLAY************************************************************************/
    .playComplet{
        width: 100vw;
        height: 200px;
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        flex-direction: row;
    }
    /*********image**********/

    .playSnip {
        width: 165px;
        height: 165px;
        background-size: 100%;
    }
    /*********contenu**********/

    .playContenu{
        z-index: 9;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
        position:static;
        width: 165px;
        height: 165px;
    }
    .playComplet h3{
        margin: 0;
        font-size: 18px;
        color:#010873;
        white-space: nowrap;
    }
    .playComplet .typeDeProjet{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:0;
    }
    .playComplet img{
        width: 48px;
        height: 48px;
        margin-bottom: 15px;
    }
    .playComplet p{
        font-size: 14px;
        color:#3854A7;
    }








    /***************************À PROPOS************************************************************************/
    .aPropos{
        background-image: none;
        padding: 0;
    }
    .aPropos h2{
        font-size: 24px;
        text-align: left;
        white-space: nowrap;
        padding-top: 40px;
        padding-bottom: 15px;
        padding-left: 70px;
    }
    .proposComplet{
        background-image: url("images/propos/mobile/photoMoiMobile.png");
        background-position: center top;
        background-size: 208px 272px;
        height: 900px;
    }
    .contenuPropos{
        height: 900px;
        width: 100vw;
        display: flex;
    }
    .qualites{
        padding-top: 290px;
        width: 100vw;
        align-items: center;
    }
    .qua{
        margin: 0;
        flex-direction: column;
        align-items: center;
    }
    .qua p{
        font-size: 14px;
        text-align: center;
        width: 200px;
    }
    .qua h3{
        font-size: 20px;
    }

    .creatif h3{
        margin-right: 0;
    }
    .curieux h3{
        margin-right: 0;
    }
    .amical h3{
        margin-right: 0;
    }
    .calme h3{
        margin-right: 0;
    }
    .passione{
        background-image: url("images/propos/mobile/1.png");
        background-repeat: no-repeat;
        width: 375px;
        background-position: center left;
        background-size: 20%;
    }
    .creatif{
        margin-bottom: 0;

        background-image: url("images/propos/mobile/2.png");
        background-repeat: no-repeat;
        width: 375px;
        background-position: top right ;
        background-size: 20%;
    }
    .curieux{
        background-image: url("images/propos/mobile/3.png");
        background-repeat: no-repeat;
        width: 375px;
        background-position: top left;
        background-size: 20%;
    }
    .amical{
        margin-bottom: 0;
        background-image: url("images/propos/mobile/4.png");
        background-repeat: no-repeat;
        width: 375px;
        background-position: top right;
        background-size: 20%;
    }
    .calme{
        background-image: url("images/propos/mobile/5.png");
        background-repeat: no-repeat;
        width: 375px;
        background-position: top left;
        background-size: 20%;
    }
    /***************************COMPÉTENCES************************************************************************/
    .competence h2{
        font-size: 24px;
        text-align: left;
        white-space: nowrap;
        padding-top: 40px;
        padding-bottom: 15px;
        padding-left: 70px;
    }
    .competence{
        background-image: url("images/competences/competencesMobile.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 85%;
        height: 770px;
    }
    /***************************CONTACT************************************************************************/
    .contact{
        background-image: url("images/contact/mobile/flecheContactMobile.png");
        background-position: 300px 0 ;
        background-repeat: no-repeat;
        background-size: 10%;
    }
    .contact h2{
        font-size: 24px;
        text-align: left;
        white-space: nowrap;
        padding-top: 40px;
        padding-bottom: 15px;
        padding-left: 70px;
    }
    .contactContenu{
        background-image: none;
        flex-direction: column;
        align-items: center;
    }
    .approcheContact{
        margin: 0;
        width: 70%;
    }
    .approcheContact h3{
        font-size: 18px;
        align-self: flex-start;
        margin-bottom: 30px;
    }
    .reseauxContact{
        flex-direction: column;
    }
    .reseauxContact div{
        flex-direction: row;
        margin-bottom: 20px;
    }
    .reseauxContact div p{
        font-size: 18px;
        text-align: left;
        padding-left: 15px;
    }
    .video{
        padding: 0;
    }
    .video iframe{
        width: 375px;
        height: 211px;
    }
    /***************************ICONES CONTACT************************************************************************/
    .reseauxContact .phone a{
        width: 57px;
        height: 57px;
        background-image: url("images/contact/mobile/phoneMobile.png");
    }
    .reseauxContact .phone a:hover{
        background-image: url("images/contact/mobile/phoneMobileHover.png");
    }
    .reseauxContact .mail a{
        width: 57px;
        height: 57px;
        background-image: url("images/contact/mobile/mailMobile.png");
    }
    .reseauxContact .mail a:hover{

        background-image: url("images/contact/mobile/mailMobileHover.png");
    }
    .reseauxContact .linkledin a{
        width: 57px;
        height: 57px;
        background-image: url("images/contact/mobile/linkedinMobile.png");
    }
    .reseauxContact .linkledin a:hover{
        background-image: url("images/contact/mobile/linkedinMobileHover.png");
    }
    /***************************FOOTER************************************************************************/
    footer p{
        font-size: 10px;
    }
}