/* GENERAL */





            /* BANDEAU */

    /* propriete du header */
header{
    width: 100vw;
    height: 27vw;
}

.banner-wrapper{
    width: 100vw;
    height: 27vw;
    overflow: hidden;
}

    /* IMAGE PROPRIETE */
.banner{
    width: 100vw;
    position: relative;
    top: 0vw;
}

    /* TITRE JULIETTE PAOLUCCI */
.NOM{
    color: white;
    text-align: center;
    font-family: "Dream Avenue";
    font-weight: 500;
    font-size: 5vw;
    font-style: normal;
    display: flex;
    position: relative;
    top: -24.5vw;
    justify-content:center;
}

    /*SOUS TITRE ANIMATION 2D */
.ANIM{
    color: white;
    text-align: center;
    font-family: "Dream Avenue";
    font-weight: 500;
    font-size: 3.5vw;
    font-style: normal;
    display: flex;
    position: relative;
    top: -28.5vw;
    justify-content:center;
}

    /*LISTE DE LIENS*/
nav{
    width: 100vw;
    position: relative;
    top: -26vw;
}

    /*PROPRIETE DES ELEMENTS DE LA LISTE*/
nav ul{
    display:flex;
    flex-direction:row;
    justify-content:center;
    gap: 5vw;
    padding: 0;
}

li{
    list-style: none;
}

nav a{
    color: white;
    text-decoration: none;
    font-size: 1.5vw;
    font-family: "Julius Sans One", sans-serif;
    font-weight: 700;
    font-style: normal; 
    justify-content:center;  
}

a{
    text-decoration: none;
}


.ESPACE{
    height: 3vw;
    width: 100%;
}






                /*  MARGES  */

    /* RETIRER LES MARGES BLANCHES */
body{
    overflow-x: hidden;
    width: 100vw;
    margin: 0;
    background-color: rgb(14, 14, 22);
}

    /* MARGE GENERALE */
main{
    padding: 0vw 7vw;
}










                 /* PROPRIETE ELEMENTS DE MISE EN PAGE*/

         /*TEXTE DES PAGES*/

    /* FONT TITRE*/
@font-face {
    font-family: "Dream Avenue";
    src: url(Dream-Avenue.ttf);
}

    /* VARIABLES */
:root{
    --TITRE-PAGE:3vw;
    --SOUS-TITRE-PAGE: 1.5vw;
    --PIED-DE-PAGE:1vw;
    --LEGENDE:1vw;
    --MARGES: 5vw;
    --LIENS:1vw;
    --COLOR:rgb(241, 238, 231);
    --FONT-SIZE-lien_contact:1vw;
    --FONT-SIZE-CV:0.8vw;
    --FONT-SIZE-TITRE_PROJET_CV:1vw;
    --FONT-SIZE-RUBRIQUES:2vw;


}


    /* GROS TITRE DES PAGES*/
.TITRE-PAGE{
    color: white;
    text-align: center;
    font-size: var(--TITRE-PAGE);
    font-family: "Julius Sans One", sans-serif;
    font-weight: 500;
    font-style: normal; 
}

    /* SOUS LES GROS TITRES*/

.DESCRIPTION{
    color: white;
    text-align: center;
    font-size: var(--LEGENDE);
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    justify-content:center;  
}



    /* LEGENDES DES IMAGES */
.Legende{
    color: white;
    text-align: center;
    font-size: var(--LEGENDE);
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 100;
    font-style: normal;
    justify-content:center;  
    position: relative;
    top: -3vw;
}

    /*FOOTER*/
.PdP{
    color: white;
    text-align: center;
    font-size: var(--PIED-DE-PAGE);
    font-family: "Julius Sans One", sans-serif;
    font-weight: 500;
    font-style: normal; 
    margin-top: 5vw;
    margin-bottom: 2vw;
}





    /* SPECIFIQUE POUR LA PAGE PORTFOLIO*/

.SOUS-TITRE-PAGE{
    color: white;
    text-align: center;
    font-size: var(--SOUS-TITRE-PAGE);
    font-family: "Julius Sans One", sans-serif;
    font-weight: 500;
    font-style: normal; 
    margin-bottom: 5vw;
}













                /*FORMAT IMAGE ET VIDEO */

    /*IMAGE*/
.IMAGE{
    width: 75vw;
    display: block;
    margin: auto;
    margin-bottom: 5vw;
    margin-top: 5vw;
}

    /*VIDEO*/
.VIDEO{
    width: 87.5%;
    aspect-ratio: 16/9;
}

.CINEMA{
    aspect-ratio: 2530/1065;
}


.CARRE{
    aspect-ratio: 2/1;
}


.BOITE-VIDEO{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 5vw;
    margin-top: 5vw;
}




          


                        
                            /*PAGES*/


            /* PAGE ACCUEIL */

    /*VIDEO*/

.DEMOREEL-VIDEO{
    width: 80%;
    aspect-ratio: 16/9;
}

.DEMOREEL-BOITE{
    width: 100%;
    display: flex;
    justify-content: center;
}


                /* PAGE PORTFOLIO */



.DECO_PORTFOLIO{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2vw;
}

.deco_portfolio{
    height: 2.5vw;
}

        /* GRILLE */


    /* Boite des 4 premières cases */           
.GALLERIE{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--MARGES);
    margin-bottom: var(--MARGES);
}

    /*case qui contient chaque image */ 
.CASE{
    width: calc((100% - 3*var(--MARGES)) / 4);
    aspect-ratio: 1/1;
    position : relative;
}

    /*taille de l'image par rapport à la case*/ 
.CASE img{
    width: 100%;
}

    /*propriete des titres en survol*/ 
.SURVOL{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(14, 14, 22, 0.8) ;
    color: white;
    padding: 0.5vw;
    box-sizing: border-box;
    opacity: 0;
    transition: 0.2s ease-out; 
    font-size: var(--TITRE-PAGE);
    font-family: "Julius Sans One", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

    /*animation de l'apparition des titres en survol*/
.CASE:hover .SURVOL{
    opacity: 1;
}

   /*lien vers les projets annexes*/
p{
    color: white;
    text-align: center;
    font-size: var(--LEGENDE);
    font-family: "Julius Sans One", sans-serif;
    font-weight: 500;
    font-style: normal; 
}



  /* LIENS_ANNEXES */




    /* Boite des 4 premières cases */           
.GALLERIE2{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--MARGES);
    margin-bottom: var(--MARGES);
}

    /*case qui contient chaque image */ 
.CASE2{
    display: flex;
    align-items: flex-start;
    width: calc((100% - var(--MARGES)) / 2);
    gap: 0;
    background-color: rgb(25, 27, 39) ;
}


    /*taille de l'image par rapport à la case*/ 
.IMAGECONTAINER{
    position: relative;
    display: inline-block;
    width: calc((100% - var(--MARGES)) / 2);
    aspect-ratio: 1/1;
}

.LIENS{
    width: calc(100% / 2 + var(--MARGES) / 2);
    height: 100%;
    box-sizing: border-box;
    padding: 1.5vw;
}

.LISTE-LIENS{
    height: calc(100% - 3vw);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.IMAGECONTAINER img{
    display: block;
    width: 100%
}

    /*propriete des titres en survol*/ 
.SURVOL2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5vw;
    box-sizing: border-box;
    background-color: rgba(25, 27, 39, 0.8) ;
    color: white;
    opacity: 0;
    transition: 0.2s ease-out; 
    font-size: var(--TITRE-PAGE);
    font-family: "Julius Sans One", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

    /*animation de l'apparition des titres en survol*/
.IMAGECONTAINER:hover .SURVOL2{
    opacity: 1;
}

.TITRE-LIENS{
    font-size: var(--SOUS-TITRE-PAGE);
    font-family: "Julius Sans One", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    box-sizing: border-box;
    color: white;
    margin: 0;
    margin-bottom: 1.5vw;

}

.LISTE-LIENS{
    font-size: var(--LIENS);
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 100;
    font-style: normal;
    text-align: left;
    box-sizing: border-box;
    color: white;
}




                     /*PAGE CONTACT*/


            /*DECORATION ET MISE EN PAGE*/

.MAIN_CV{
    position: relative;
}

/*Paramètres généraux des images feuilles VARIABLE TAILLES DES FEUILLES et MARGES HAUTES*/
.feuilles{
    width: 2.05vw;
    position: absolute;
    top: 4vw;
}

/*images feuilles apparition et position VARIABLE MARGES COTES*/
.MAIN_CV .feuilles:nth-child(1), .MAIN_CV .feuilles:nth-child(3){
    left: 5vw;
}

.MAIN_CV .feuilles:nth-child(2), .MAIN_CV .feuilles:nth-child(4){
    right: 5vw;
}

.MAIN_CV .feuilles:nth-child(3), .MAIN_CV .feuilles:nth-child(4){
    display: none;
}


            /*CV*/

/*la boite qui contient tout le CV, paramétrage des marges générales*/
.CV{
    padding-top: 4vw;
    padding-bottom: 1vw;
    margin: 0 5vw;
}

/*la boite qui contient les deux colonnes EXPERIENCE ET A PROPOS FORMATION LOGICIEL*/
.COLONNES{
    display: flex;
    flex-direction:row;
    gap: var(--MARGES);
}

/*la boite qui contient EXPERIENCE*/
.COLONNE1{
    display: flex;
    flex-direction:column;
    gap: 0.5vw;
    width: 110vw;
    
}
/*la boite qui contient A PROPOS LOGICIELS ET FORMATION*/
.COLONNE2{
    display: flex;
    flex-direction:column;
    gap: 0.7vw;
}

/*les différentes boites qui contiennent les informations*/
.BOITE_CV{
    display: flex;
    flex-direction:column;
}

/*GROS TITRES*/
.RUBRIQUES{
    font-family: "Dream Avenue";
    font-weight: 500;
    font-size: var(--FONT-SIZE-RUBRIQUES);
    color:rgb(212, 151, 101);
    margin-bottom: 0.5vw;
    margin-top: 0;
}

/*DATES*/
.DATES{
    font-family: "Teachers", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: var(--FONT-SIZE-TITRE_PROJET_CV);
    font-weight: 100;
    color:var(--COLOR);
    margin-bottom: 0;
    margin-top: 0;
}

/*Les différentes expériences*/
.TITRE_PROJET{
    font-size: var(--FONT-SIZE-TITRE_PROJET_CV);
    font-family: "Teachers", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color:var(--COLOR);
    margin-bottom: 0.5vw;
    margin-top: 0.5vw;
}

/*Les petits détails*/
.texte{
    font-size: var(--FONT-SIZE-CV);
    font-family: "Teachers", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    color: var(--COLOR);
    margin-top: 0.5vw;
}

.gras{
    font-weight: 600;
    color: rgb(212, 151, 101);
}

    /*A PROPOS*/

/*boite à propos*/
.PROFIL{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vw;
    
}

/*Image de la photo de profil (contenu dans la div IMAGE_PROFIL*/
.profil{
    width: 10vw;
    position: relative;
    top: -0.5vw;
}

/*Div qui contient les paragraphe du texte*/
.TEXTE_PROFIL{
    gap: 0;
}

/*texte de présentation*/
.texte_profil{
    font-size: var(--FONT-SIZE-CV);
    font-family: "Teachers", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    color: var(--COLOR);
    margin-top: 0;
    margin-bottom: 0.4vw;
}

    /*LOGICIELS*/

/*boite qui contient l'image logiciels */
.LOGICIELS{
    display: flex;
    justify-content: center;
}

/*image logiciels */
.logiciels{
    margin-top: 1vw;
    width: 28vw;

}






            /*CONTACT */

/*boite CONTACT */
.LIENS_CONTACT{
    margin-top: 1vw;
    text-align: center;
}

/*boite qui contient les div icones*/
.LISTES_LIENS_CONTACT{
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/*boite qui contient icone + contact*/
.icones{
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction:row;
    justify-content: center;
    margin: 1vw;
    gap: 1vw;
}

/*contenants de la div icones :*/
.lien_contact{
    font-size: var(--FONT-SIZE-lien_contact);
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    color:var(--COLOR);
    text-align: center;
    margin: 0;
}
.lien_contact2{
    font-size: var(--FONT-SIZE-lien_contact);
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    color:var(--COLOR);
    text-align: center;
    margin: 0;
}
.image_icones{
    aspect-ratio: 1/1;
    width: 2vw;
}
:hover.lien_contact2{
    text-decoration: underline;
}







                                     /*////////ADAPTATION TAILLE ECRAN////////*/

       /*////////moitié écran moitié laptop////////*/

@media only screen and (max-width: 1186px) {  
    :root{
        --TITRE-PAGE:3.5vw;
        --SOUS-TITRE-PAGE: 1.5vw;
        --LEGENDE:1.5vw;
        --LIENS:1.1vw;
        --MARGES: 3vw;
        --PIED-DE-PAGE:1.2vw;
        --FONT-SIZE-lien_contact:1.2vw;
        --FONT-SIZE-CV:1vw;
        --FONT-SIZE-TITRE_PROJET_CV:1.2vw;
        --FONT-SIZE-RUBRIQUES:2.2vw;
    }

    .COLONNE1{
        width: 180vw;
    }

    .profil{
    width: 14vw;
    position: relative;
    }

    



}



                        



        /*////////laptop////////*/

@media only screen and (max-width: 1024px) {  
    :root{
        --TITRE-PAGE:3.5vw;
        --SOUS-TITRE-PAGE: 1.5vw;
        --LEGENDE:1.5vw;
        --LIENS:1.1vw;
        --MARGES: 3vw;
        --PIED-DE-PAGE:1.2vw;
        --FONT-SIZE-lien_contact:1.3vw;
        --FONT-SIZE-CV:1.3vw;
        --FONT-SIZE-TITRE_PROJET_CV:1.5vw;
        --FONT-SIZE-RUBRIQUES:3vw;
    }

    .PROFIL{
        flex-direction: row;
        margin-bottom: 4vw;
        gap: 3.5vw;
    }

    .texte_profil{
        margin-top: 2vw;
    }

    .profil{
    width: 20vw;
    position: relative;
    }

    
    .logiciels{
    margin-top: 4vw;
    margin-bottom: 3vw;
    width: 50vw;
    }

    .COLONNE1{
        width: auto;
    }

    .LISTES_LIENS_CONTACT{
        margin-top: 3vw;
    }


    .LISTE-LIENS{
        gap: 0.5vw;
    }
    .TITRE-LIENS{
        margin-bottom: 1vw;
    }
    .LIENS{
        padding: 1.5vw;
        box-sizing: border-box;
    }
    

    .COLONNES{
        flex-direction: column;
    }

    .MAIN_CV .feuilles:nth-child(3), .MAIN_CV .feuilles:nth-child(4){
        display: block;
        top: 52vw;
    }

} 




        /*////////tablette////////*/


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

        :root{
        --TITRE-PAGE:4vw;
        --SOUS-TITRE-PAGE: 2.2vw;
        --LEGENDE:1.8vw;
        --LIENS:1.8vw;
        --PIED-DE-PAGE:1.5vw;
        --MARGES:5vw;
        --FONT-SIZE-lien_contact:2vw;
        --FONT-SIZE-CV:2vw;
        --FONT-SIZE-TITRE_PROJET_CV:2.2vw;
        --FONT-SIZE-RUBRIQUES:4vw;
    }

    /*CV*/
    .COLONNE1{
        gap: 2vw;
        width:80vw;
        
    }

    .PROFIL{
        flex-direction: row;
        margin-bottom: 6vw;
        gap: 5vw;
    }

    .texte_profil{
        margin-top: 3vw;
    }

    .profil{
    width: 30vw;
    position: relative;
    }

    .logiciels{
    margin-top: 2vw;
    margin-bottom: 3vw;
    width: 60vw;
    }

    .LIENS_CONTACT{
        text-align: left;
    }

    .LISTES_LIENS_CONTACT{
        flex-direction: column;
        margin-top: 3vw;
    }

    .image_icones {
    aspect-ratio: 1/1;
    width: 3vw;
    }



         /* header*/

    header{
        width: 100vw;
        height: 42vw;
    }
    .NOM{
        font-size: 7vw;
        top: -35vw;
    }
    .ANIM{
        font-size: 6vw;
        top: -43vw;
    }
    nav{
        top: -43vw;
    }
    nav a{
        font-size: 2vw;  
    }
    .banner-wrapper{
        height: 40vw;
    }



        /* gallerie*/

    .CASE{
        width: calc((100% - var(--MARGES)) / 2);
        aspect-ratio: 1/1;
        position : relative;
    }
    .CASE2{
        flex-direction: column;
    }

    .IMAGECONTAINER{
        width: 100%;
    }
    /* SPECIFIQUE POUR LA PAGE PORTFOLIO*/
    .SOUS-TITRE-PAGE{
        margin-bottom: 5vw;
    }

    /* gallerie partie stage / annexes */
    .LIENS{
        width: 100%;
        box-sizing: border-box;
        padding: 3vw;
    }
    .LISTE-LIENS{
        height: initial;
        gap: 3vw;
    }
    .TITRE-LIENS{
        margin-bottom: 3vw;
    }

}






            /*////////MOBILE LARGE////////*/

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

        :root{
        --TITRE-PAGE:5.5vw;
        --SOUS-TITRE-PAGE: 3vw;
        --LEGENDE:2.5vw;
        --LIENS:2.5vw;
        --PIED-DE-PAGE:2.2vw;
        --FONT-SIZE-lien_contact:3vw;
        --FONT-SIZE-CV:2.8vw;
        --FONT-SIZE-TITRE_PROJET_CV:3vw;
        --FONT-SIZE-RUBRIQUES:5vw;

    }

    .PROFIL{
        flex-direction: column;
        margin-bottom: 6vw;
        gap: 5vw;
    }

    .profil{
    width: 40vw;
    position: relative;
    }

    .logiciels{
    margin-top: 1vw;
    margin-bottom: 3vw;
    width: 70vw;
    }




        /* header*/
    header{
        width: 100vw;
        height: 42vw;
    }
    .NOM{
        font-size: 9vw;
        top: -37vw;
    }
    .ANIM{
        font-size: 7vw;
        top: -45vw;
    }
    nav{
        top: -48vw;
    }
    nav a{
        font-size: 2.5vw;  
    }
    .banner-wrapper{
        height: 40vw;
    }
       
        /* pages */
    /* LEGENDES DES IMAGES */
    .Legende{
        top: -3vw;
    }

        /* gallerie */
    .CASE{
        width: calc((100% - var(--MARGES)) / 2);
        aspect-ratio: 1/1;
        position : relative;
    }
    .CASE2{
        flex-direction: column;
    }
    .IMAGECONTAINER{
        width: 100%;
    }

    /* SPECIFIQUE POUR LA PAGE PORTFOLIO*/
    .SOUS-TITRE-PAGE{
        margin-bottom: 5vw;
    }
    /* gallerie partie stage / annexes */
    .LIENS{
        width: 100%;
        box-sizing: border-box;
        padding: 3vw;
    }
    .LISTE-LIENS{
        height: initial;
        gap: 3vw;
    }
    .TITRE-LIENS{
        margin-bottom: 3vw;;
    }

        /*FOOTER*/
    .PdP{
        margin-top: 7vw;
        margin-bottom: 2vw;
    }

}





            /*////////MOBILE SMALL////////*/

@media only screen and (max-width: 320px) {
    
    :root{
        --TITRE-PAGE:6.5vw;
        --SOUS-TITRE-PAGE: 4vw;
        --LEGENDE:2.8vw;
        --LIENS:2.8vw;
        --PIED-DE-PAGE:2.5vw;
        --FONT-SIZE-lien_contact:4vw;
        --FONT-SIZE-CV:3.5vw;
        --FONT-SIZE-TITRE_PROJET_CV:4vw;
        --FONT-SIZE-RUBRIQUES:6vw;
    }
    

    /*CV*/
    .COLONNE1{
        gap: 2vw;
        width:80vw;
        
    }

    .PROFIL{
        flex-direction: column;
        margin-bottom: 6vw;
        gap: 5vw;
    }

    .profil{
    width: 50vw;
    position: relative;
    }

    .logiciels{
    margin-top: 1vw;
    margin-bottom: 3vw;
    width: 80vw;
    }

    .LIENS_CONTACT{
        text-align: left;
    }

    .LISTES_LIENS_CONTACT{
        flex-direction: column;
        margin-top: 3vw;
    }

    .image_icones {
    aspect-ratio: 1/1;
    width: 3vw;
    }






    /* LEGENDES DES IMAGES */
    .Legende{
        top: -2vw;
    }




            /* gallerie */

    /* SPECIFIQUE POUR LA PAGE PORTFOLIO*/
    .SOUS-TITRE-PAGE{
        margin-bottom: 7vw;
    }
    /* gallerie partie stage / annexes */
    .LIENS{
        width: 100%;
        box-sizing: border-box;
        padding: 3vw;
    }
    .LISTE-LIENS{
        height: initial;
        gap: 3vw;
    }
    .TITRE-LIENS{
        margin-bottom: 4vw;
        margin-top: 1vw;
    }
    .PdP{
    margin-top: 10vw;
    margin-bottom: 2vw;
    }
}