*{

    box-sizing: border-box;

    margin: 0

}



html {

    scroll-behavior: smooth;

    

}

/******************** BODY ***********************/

body {

   /* background-color: #F9F9F9;*/

    background-color: #F9F9F9;

    font-family: 'Jost', sans-serif;   

    color: #F9F9F9;

}



.bg-body {

    background-color: #0e2b44;

} 





/******************** SCROLLBAR DISPLAY: NONE ******************/



/* GOOGLE */

::-webkit-scrollbar {

    display: none;

}

/* FIREFOX */

@-moz-document url-prefix() {

    html,body{scrollbar-width: none;}

}



/**************************************************/



/***** A *****/

a {

    text-decoration: none;

    color: #fff;

}



/***** LIST-STYLE:NONE *****/

ul li {

    list-style: none;

}



/*** -WEBKIT-TAP-HIGHLIGHT-COLOR ***/

a, ul li, svg, svg g, div {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 

}



/******************** LOADING **********************/



/*** LOADING ***/

.loading {

    background-color: #F9F9F9;

    position: fixed;

    height: 120%;

    width: 120%; 

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 200;

    overflow: hidden;

}



/*** ANIM-LOADING ***/

.anim-loading {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -85%);

    height: 50vh;

    width: 50%;

    opacity: 0;

}





/********************** PAYSAGE **********************/



/*** PAYSAGE ***/

.paysage {     

    display: none;

    height: auto;

    width: 100%; 

}



#bg_accueil_1, #bg_accueil_2, #bg_accueil_3, #foret, #foret_2, #foret_3, #sol-arbre, #sol-arbre_2, #sol-arbre_3, #sol-arr, #sol-arr_2, #sol-arr_3, #branches, #branches_2, #branches_3, #tronc, #tronc_2, #tronc_3, #tronc-ombre, #tronc-ombre_2, #tronc-ombre_3, #souche, #souche_2, #souche_3, #souche-ombre, #souche-ombre_2, #souche-ombre_3, #montagne, #montagne_2, #montagne_3, #lune, #lune_2, #lune_3 {

    display: none;

}



#bg_accueil_1.active, #bg_accueil_2.active, #bg_accueil_3.active,  #foret.active, #foret_2.active, #foret_3.active, #sol-arbre.active, #sol-arbre_2.active, #sol-arbre_3.active, #sol-arr.active, #sol-arr_2.active, #sol-arr_3.active, #branches.active, #branches_2.active, #branches_3.active, #tronc.active, #tronc_2.active, #tronc_3.active, #tronc-ombre.active, #tronc-ombre_2.active, #tronc-ombre_3.active, #souche.active, #souche_2.active, #souche_3.active, #souche-ombre.active, #souche-ombre_2.active, #souche-ombre_3.active, #montagne.active, #montagne_2.active, #montagne_3.active,  #lune.active, #lune_2.active, #lune_3.active {

    display: block;

}



/* OISEAU */



#oiseau {

    transform: translate(1151.54px, -5458.054px);

    animation:  30s linear 3s infinite anim-oiseau;

}



@keyframes anim-oiseau {

    0% {

        transform: translate(1151.54px, -5458.054px);

    }



    100% {

        transform: translate(5151.54px, -5458.054px);

    }



}



#portfolio-oiseau {

    transform: translateX(-20%);

    animation:  15s linear 3s infinite anim-portfolio-oiseau;

}



@keyframes anim-portfolio-oiseau {

    0% {

        transform: translateX(-20%);

    }



    100% {

        transform: translateX(120%);

    }



}



#aile-d, #aile-g, #portfolio-oiseau-aile-d, #portfolio-oiseau-aile-g, #aile-doigts-2 {

    transform-origin: bottom;

    transform-box: fill-box;   

}

#aile-d, #aile-g, #portfolio-oiseau-aile-d, #portfolio-oiseau-aile-g {

    animation:  5s linear infinite anim-aile;

}/*

#aile-doigts-2 {

    animation:  5s linear infinite anim-aile-doigt-d;

}

*/

@keyframes anim-aile {

    0% {

        transform : rotateX(0deg);

    }



    50% {

        transform: rotateX(160deg);

    }



    100% {

        transform : rotateX(0deg);

    }

}

/*

@keyframes anim-aile-doigt-d {

    0% {

        transform : rotateX(-90deg);

    }



    50% {

        transform: rotateX(90deg);

    }



    100% {

        transform : rotateX(-90deg);

    }

}

*/

/********************** HEADER **********************/



/*****  *****/

header {

    position: absolute;

    margin: 3% 5%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 90%;

    font-size: 18px;

    letter-spacing: 2px;

}

.home {

    text-transform: uppercase;

}



.menu li {

    position: relative;

}

header ul{

    display: flex; 

    justify-content: space-between;   

    padding: 0;

    width: 25%;

   

}



/************************* MAIN ***********************/

/*

main {

    margin: 0% 10% 5%;

}

*/

/*** INTRO ***/

.intro {

    position: relative;

    padding: 4rem 0 2rem;

    font-size: 30px;

     

}

.intro-etoiles {

    position: absolute;

    height: auto;

    width: 90%;

    top: 85%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.intro strong {   

    font-size: 34px;

}

.texte {

    margin: auto;

    width: max-content;

}



/********** HAMBURGER *********/

.hamburger {

    display: none;

    position: relative;

    margin-left: auto;

    height: 2rem;

    width: max-content;

}



/*** HAMBURGER LIGNES ***/

.ligne-1, .ligne-2 {

    position: absolute;

    right: 0%;

    height: 2px;

    width: 3rem;

    background-color: #F9F9F9;

    transition: 0.5s ease-out;

}

.ligne-1 {

    top: 20%;

}

.ligne-2 {

    top: 60%;

}



/*** HAMBURGER.TRANSITION ***/

.ligne-1.transition, .ligne-2.transition{

    top: 0%;

    right: -0.5%;

    width: 1.5rem;

    transition: 0.5s linear;

    background-color: #f0f0f0;

}

.ligne-1.transition {

    transform: rotate(45deg);

   

}

.ligne-2.transition { 

    transform: rotate(-45deg);    

} 





/******** NAV **********/

.nav { 

    display: none;

    line-height: 1;

    margin-bottom: 1rem;

}

.nav ul {

    display: flex;

    justify-content: space-between;

    padding: 0;

    margin: 0;

}

.nav ul li a {

    position: relative;

    opacity: 0;

    letter-spacing: 2px;

    left: -450%;

    width: max-content;

    transition: 1s ease-in-out;   

    font-weight: 400;

    text-align: justify;

    text-transform: uppercase;

    color: #F9F9F9;

}

.menu li a {

    position: relative;

    transition: 1s ease-in-out; 

}



/*** NAV ET MENU LI A:AFTER***/

.nav li a:after, .menu li a:after {

    content: "";

    width: 0%;

    height: 0.5px;

    background: #FFFFFF;

    position: absolute;

    left: 50%;

    top: 105%;

    transition: 0.3s linear;

    transform: translate(-50%, -50%);

}

.menu li:hover a:after {

    background-color: #F9F9F9;

    width: 100%;

}



/*** NAV LI.TRANSITION ***/

.nav li a.transition, .menu li a.transition {

    opacity: 1;

    left: 0%;

    transition: 1s ease-in-out;

}



/*** NAV LI.SELECTED ***/

.selected {

    transition: 0.5s ease-in;

    opacity: 1;  

}



/*** SCROLL-NAV ***/

.scroll-nav {

    display: none;

    position: fixed;

    top: 50%;

    right: 3%;

    z-index: 100;

    transform: translate(0%, -50%)

}

.scroll-nav ul {

    padding: 0;

    text-align: center;

}

.scroll-nav a {

    display: inline-block;

    margin: 1rem 0;

    height: 10px;

    width: 10px;

    rotate: 45deg;

    background-color: #FBF5C2;

}

.scroll-nav .scroll-nav_top {

    background-color: #01C6AB;

}

/***** PORTFOLIO *****/

.portfolio {

    position: relative;

}

/*

.portfolio_bg {

    width: 90%;

    background-color: #001734;

    position: absolute;

    height: 23rem;

    top: -10%;

    left: 5%;

    z-index: -1;

}

*/

.portfolio-foret-haut {

    display: block;

    height: auto;

    width: 100%;

}

.portfolio-foret-bas {

    background: #040b12;

    background: -moz-linear-gradient(top,  #040b12 0%, #050e16 40%, #0d2236 100%);

    background: -webkit-linear-gradient(top,  #040b12 0%,#050e16 40%,#0d2236 100%);

    background: linear-gradient(to bottom,  #040b12 0%,#050e16 40%,#0d2236 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#040b12', endColorstr='#0d2236',GradientType=0);

    height: 300px;

    width: 100%;

    transform: translateY(-1px);

}

.portfolio-foret-sol {

    background: #163c5d;

    background: -moz-linear-gradient(top,  #163c5d 0%, #0e2438 20%, #081521 70%, #06131e 100%);

    background: -webkit-linear-gradient(top,  #163c5d 0%,#0e2438 20%,#081521 70%,#06131e 100%);

    background: linear-gradient(to bottom,  #163c5d 0%,#0e2438 20%,#081521 70%,#06131e 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#163c5d', endColorstr='#06131e',GradientType=0 );

    height: 250px;

    width: 100%;

}

.sapin {

    position: absolute;

    top: 70%;

    left: 100%;

    transform: translate(-100%,-100%);

    z-index: 1;

    width: auto;

    height: auto;

}



.portfolio-lumiere {

    display: block;

    height: auto;

    width: auto;

    margin: auto;

}



.portfolio .lune {

    position: absolute;

    transform: translate(-50%, -50%);

    left: 50%;

    top: 30%;

    height: 375px;

}



/* CATEGORIE */

.categorie {

    /*

    position: relative;

    width: 10rem;

    padding: 2rem;

    margin-bottom: 2rem;

    */

    margin: auto;

    width: max-content;

    padding-bottom: 4rem;



}



.categorie h1, .categorie h2 {

    font-size: 32px;;

    font-weight: 400;

    color: #FBF5C2;

    text-transform: uppercase;

    width: max-content;

}



/* TRAVAUX */

.groupe-travaux {

    position: absolute;

    left: 50%;

    top: 65%;

    width: 100%;

    transform: translate(-50%, -50%);

    padding-top: 1rem

}

.travaux {

    position: relative;

    width: 100%;

    margin: 0 auto;

    height: 375px;

    overflow: hidden;

}

.travaux svg {

    width: 100%;

}

.travaux img {

    vertical-align: middle;

}

/******************** Slider *************************/

  .slider {

    overflow: hidden;

    margin: auto;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -10%);

    opacity: 0;

    transition: all 1s ease;

    padding-top: 0.5rem;

}

.slider.selected {

    opacity: 1;

    transition: all 1s ease;

}

.slider ul {

    display: flex;

    justify-content: space-between;

    position: relative;

    margin: 0;

    padding: 0;

    list-style: none;

}

.slider ul li {

    display: block;

    position: relative; 

    height: 280px;

    width: 225px;

    padding: 1rem;

    transition: 0.5s all linear;

    margin-bottom: 4.5rem;

}

/* SLIDER LI PROJET */

.slider ul li .projet {

    background-color: #001F3A;

    position: relative;

    height: 100%;

    width: 100%;

    transition: 0.3s all ease-in-out;

    overflow: hidden;

}

/* SLIDER LI PROJET IMAGE */

.slider .image {

    position: absolute;

    height: 100%;    

    width: 100%;   

    top: 50%;

    left: 50%;  

    transform: translate(-50%, -50%);

    transition: 1s all ease-in-out;

    z-index: 1;  

}

.slider .image img {

    position: absolute;
    height: inherit;
    width: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: 1s all ease-in-out;
    object-fit: cover;
}
 
/* SLIDER LI TITRE */

.slider ul li .titre {

    opacity: 0;

    font-size: 13px;

    text-align: center;

    transition: 0.5s all ease-in-out;

}

.slider ul li .titre h3 {

    padding: 0.5rem 0;

    width: max-content;

    margin: auto;

}

.slider ul li .titre img {

    width: 55%;

}

/* SLIDER LI NTH-OF-TYPE(2) */

.slider ul li:nth-of-type(2) {

    transition: 0.5s all ease-in-out;

    padding: 0;

}





.slider ul li:nth-of-type(2) .image {

    position: absolute;

    height: 100%;

    width: 100%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    transition: 1s all ease-in-out;

    z-index: 1;

    overflow: hidden;

}

.slider ul li:nth-of-type(2) .titre {

    opacity: 1;

    transition: 0.5s all ease-in-out;

}

.slider_next, .slider_prev {

    position: absolute;

    color: #fff;

    text-decoration: none;

    font-weight: 500;

    font-size: 40px;

    cursor: pointer;

    transition: all 0.5s ease;

    transform: translate(-50%,-50%);

    transform-origin: center;

}

.slider_prev {

    left: -10%;

}

.slider_next {

    left: 110%;

}

/* ARROW */

.arrow {

    position: relative;

    width: 184px;

    margin: auto;

}

/********* END Slider **********/



/***** À PROPOS *****/

.a_propos  {

    position: relative;

    text-align: center;

    padding-bottom: 3rem;

    background: #06131e;

    /*background: -moz-linear-gradient(left,  #102b43 0%, #112a41 20%, #0b1d2d 50%, #06131e 100%);

    background: -webkit-linear-gradient(left,  #102b43 0%,#112a41 20%,#0b1d2d 50%,#06131e 100%);

    background: linear-gradient(to right,  #102b43 0%,#112a41 20%,#0b1d2d 50%,#06131e 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#102b43', endColorstr='#06131e',GradientType=1 );*/

}

.apropos-eau-haut {

    display: block;

    transform: translateY(-40px);

    width: 100%;

    height: auto;

}





/*

.a_propos_bg {

    width: 90%;

    background-color: #00142c;

    position: absolute;

    height: 105%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -1;

}

*/

.a_propos h2 {

    text-align: center;

    text-transform: uppercase;

    font-weight: 400;

    margin-bottom: 2rem;

    color: #FBF5C2;

}

.competences, .experiences {

    width: 80%;

    margin: 0 auto 4rem;

    text-align: center;

}

/* COMPETENCES */

.competences {

    position: relative;

}

.competences img {

    height: 38rem;

}

.competences svg {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -40%);

    height: 20rem;

    opacity: 0.1;

}

/* EXPERIENCES */

.experiences span {

    color: #FBF5C2;

}

.experiences div {

    font-size: 22px;

    margin-bottom: 3rem;

}

.description {

    margin: 1rem auto;

    width: 50%;

} 

.description p {

    margin-bottom: 1rem;

}

/***** CONTACT *****/



.contact {

    position: relative;

    background-color: #06131e;

}

.contact_bg {

    width: 90%;

    background-color: #030e1b;

    position: absolute;

    height: 105%;

    top: -10%;

    left: 5%;

    z-index: -1;

}

.contact_a, .contact-img {

    text-align: center;

    width: 90%;

    margin: 0 auto;

    padding-bottom: 2rem;

    width: max-content;

}

.contact_a a {

    display: block;

    font-size: 32px;

    margin: 0 auto 2rem;

}

.contact-img img {

    height: 15rem;

    

}





/*********************************************************************************/



/*** CURSOR: POINTER ***/

.hamburger, .back-to-top, [id^=branches], #feuilles, #lumiere, a  {

    cursor: pointer;

}



/*** DISPLAY: NONE ***/

#comete_1, #comete_2, #comete_3, #comete_4, #bloc-cerf, #cerf-tete-2 {

    display: none;

}



/*** OPACITY: 0 ***/



/*#m, #a, #t, #t2, #e, #o, #b, #r, #u, #c, #c2, #o2, #l, #e2, #r2, #i, */

[id*='trajet'] {

    opacity: 0;

}







/*** BG CATEGORIE ***/

/*

.portfolio .categorie, .contact .categorie, .a_propos .categorie {

    background-color: #002d58;

}

*/

.anim, .competences, .experiences {

    opacity: 0;

    transition: 1s ease-out;

}



.competences, .experiences {

    transform: translateY(30%);

}

/*

.experiences {

    transform: translate(-100%);

}

*/

.anim-x {

    transform: translateX(0%);

    opacity: 1;

}

.anim-y {

    transform: translateY(0%);

    opacity: 1;

    transition: all 1s ease;

}

.anim-slider {

    opacity: 1;

    transform: translate(-50%, -50%);

}

.anim-opacity {

    opacity: 1;

    transition: all 1s ease;

}





/*****************************************************************************/

/************************      RESPONSIVE      ******************************/

/***************************************************************************/



@media all and (max-width: 2560px) { 



    .intro-etoiles {

        top: 100%;

    }



}



@media all and (max-width: 1920px) { 



    .intro-etoiles {

        top: 85%;

    }



}



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

    .groupe-travaux {

        top: 62%;

    }

}



@media all and (max-width: 1600px) {

    .portfolio-foret-bas {

        height: 350px;

    }

}

@media all and (max-width: 1500px) {

    .groupe-travaux {

        top: 62%;

    }

}





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

    /* HEADER UL */

    header ul {

        width: 35%;

    }

    /*INTRO TEXTE */

    .intro-etoiles {

        top: 70%;

    }

    .texte strong {

        font-size: 30px;

    }

    .texte {

        font-size: 22px;

    }

    .sapin {

        display: none;

    }

    /* PORTFOLIO */



    /* COMPETENCES */

    .competences img {

        height: 32rem;

    }

    .competences svg {

            height: 18rem;

    }

    .description {  

        width: 60%;

    } 

}



@media all and (max-width: 1280px) {

    .groupe-travaux {

        top: 58%;

    }

    .portfolio-foret-bas {

        height: 400px;

    }

}



@media all and (max-width: 1024px) { 

    /* HEADER UL */

    header ul {

        font-size: 16px;

        width: 40%;

    }

    /* INTRO */

    .intro-etoiles {

        top: 60%;

    }

    /* PORTFOLIO */

    .categorie {

        padding-bottom: 2rem;

    }

    .texte strong {

        font-size: 30px;

    }

    .texte {

        font-size: 22px;

        width: 80%;

    }

    .portfolio-lumiere {

        width: 100%;

    }

}



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

    /* HEADER UL */

    header ul {

        font-size: 14px;

        width: 45%;

    }  

    /* INTRO */

    .intro-etoiles {

        top: 70%;

    }

    .texte {

        font-size: 22px;

    }

    .intro strong {

        font-size: 26px;

    }

    /* PORTFOLIO */

    .categorie {

        padding-bottom: 1rem;

    }

    .groupe-travaux {

        top: 48%;

    }

    /* EXPERIENCE */

    .description {  

        width: 100%;

    } 

    /* COMPETENCES */ 

    .competences img {

        height: 24rem;

    }

    .competences svg {

        height: 14rem;

    }

    /* CONTACT */

    .contact_a a  {

        font-size: 25px;

    }

}



@media all and (max-width: 425px){

    /* HEADER */

    .home {

        font-size: 10px;

    }

    .menu {

        display: none;

    } 

    /* MAIN */

    

    main {

        margin-top: 5%;

    }    

    .hamburger, .nav {

        display: block;

    }

    .hamburger {

        margin-right: 5%;

    }

    .nav {

        margin: 0 5%;

    }

    

    /* INTRO */

    .intro {

        padding: 4rem 0 2rem;

    }

    .intro-etoiles {

        top: 90%;

    }

    .texte {

        width: 90%;

        font-size: 20px;

    }

    /* PORTFOLIO */

    .portfolio-foret-bas {

        height: 500px;

    }

    .groupe-travaux {

        top: 45%;

    }



    /* COMPETENCES */

    .competences img {

        width: inherit;

        height: inherit;

    }

    .competences svg {

        height: 14rem;

        transform: translate(-50%, -35%);

    }

    /* CONTACT */

    .contact_a {

        width: 100%;

    }

    .contact-img img {

        height: 12rem;

        

    }



    /* FONT-SIZE */

    .contact_a a, .experiences div  {

        font-size: 20px;

    }

    /* MARGIN BOTTOM*/

    /*.portfolio, .a_propos {

        margin-bottom: 8rem;

    }*/



}



@media all and (max-width: 375px) {

    /*.paysage {

        scale: 1.2;

    }*/

    .nav ul li { 

        font-size: 14px;

    }

    .intro svg {

        height: 15rem;

    }   

    /* PORTFOLIO */

    .groupe-travaux {

        top: 42%;

    }

    .competences svg {

        transform: translate(-50%, -30%);

        height: 10rem;

    }

}