/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!---------------------------------------------------------DESKTOP-----------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/



/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!--------------------------------------------------------- - MAIN - --------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/


* {
    /* reset */
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    font-family: 'sen', sans-serif;
}

/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!--------------------------------------------------------- - HTML - --------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/

html {
    background-color: #000000;
    /* font de coulelur pour l'html éviter les bord blanc (si il devait y avoir un scrool) */
}

/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!--------------------------------------------------------- - BODY - --------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/

body {
    width: 100%;
    /* taille relative a son élément parent */
    height: 100vh;
    /* Vh relative à la hauteur du viewport*/
    background-color: #0D0D0D;
    position: relative;
    overflow: hidden;
    /* overflow hidden, le contenu est coupé quand il dépasse, ou en l'occurence si il sort comme ici, de la div. Ce qui me permet de ne pas avoir de scroll à la sortie des différents shutter */
}

/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!--------------------------------------------------------- - ASIDE - --------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/
.btnLogin{
    position: relative;
    top: 50px;
}

aside {
    background-color: #1F1F1F;
    width: 8.4%;
    /* représente une colonne et une goutière */
    height: 100vh;
    z-index: 1;

}

/*?_____________________________________- - HEADER - -_____________________________________*/
header {
    height: 76.3vh;
    /* hauteur du header */
    text-align: center;
    /* alligne le texte */
    color: #ffffff;
    /* couleur du texte */
    font-size: 0.9vw;
    /* taille du texte */
}

/*?___________________________________- - BLOCK LOGO - -___________________________________*/
.logo {
    margin-top: 4.3vh;
    /* marge suppérieure du logo */
    width: 5vw;
    /* largeur du logo */
}

.block-logo {
    background-color: black;
    /* couleur de fond du bloc logo */
    height: 31.8vh;
    /* hauteur du bloc logo */
    font-size: 0.9vw;
    /* taille du texte  */
    line-height: 2;
    /* espacement entre les lignes de texte */
}


h1 {
    letter-spacing: -0.2vw;
    font-size: 1.9vw;
    font-weight: bold;
}

/*?_______________________________________- - NAV - -_______________________________________*/
nav ul li a {
    display: block;
    line-height: 8.78vh;
    /* espaceent entre les lignes de texte */
    border-bottom: 1px solid #0D0D0D;
    /* rajoute un bordure supérieur  */
    color: #ffffff;
    /* couleur du texte */
    font-size: 1.3vw;
    /* taille du texte */

}

ul {
    /* regarder */
    margin-top: 8.78vh;
    /* marge supérieur du ul */
    border-top: 1px solid #0D0D0D;
    /* bordure supérieur */
}

.curent {
    background-color: #3AA09A;
    /* couleur du A au click, pour indiqué la page où nous sommes  */
}

.p:hover {
    background-color: #3AA09A;
    /* couleur du survole */
}

/*?_____________________________________- - FOOTER - -_____________________________________*/
footer {
    height: 23vh;
    /* hauteur du footer */
    background-color: #1F1F1F;
    /* couleur fond  */
    padding-top: 2vh;
    /* marge interne supérieur */
}

#social {
    width: 100%;
    /* largeur */
    display: flex;
    align-items: center;
    /* centre au centre de la div */
    justify-content: space-evenly;
    /* espacements des a répartis dans la div => flex/space-evenly*/
}

.copyright {
    width: 100%;
    height: 3vh;
    /* largeur */
    margin-top: 13vh;
    padding-left: 10%;
}

.date {

    position: relative;
    top: -42px;
    left: 10%;
    color: white;
}

.email {
    width: 100%;
    /* largeur mise pour qu'il diminue en retrecissent la page  */
}

.facebook {
    width: 100%;
    /* largeur mise pour qu'il diminue en retrecissent la page  */
}

.instagram {
    width: 100%;
    /* largeur mise pour qu'il diminue en retrecissent la page  */
}






/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!--------------------------------------------------------- - SECTION - -----------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/






section {
    width: 91.4%;
    /* largeur de la section */
    height: 100vh;
    /* hauteur de la section */
    position: absolute;
    /* positionnement */
    top: 0;
    /* position  */
    left: 8.4%;
    /* position */
    background-color: #3aa09900;
    /* couelur de fond */
    overflow: hidden;
    /* overflow hidden, le contenu est coupé pquand il dépasse, ou en l'occurence si il sort comme ici, de la div. Ce qui me permet de ne pas avoir de scroll à la sortie de différents shutter */
}

/*?____________________________________- - TITRE H2 - -____________________________________*/
h2 {
    width: 100%;
    /* largeur */
    position: absolute;
    /* position */
    top: 17vh;
    /* position */
    left: 8.4%;
    /* position */
    font-size: 3.6vw;
    /* taille de texte */
    z-index: 1;

    /* animation du h2 */
    background: radial-gradient(#2A5451 20%, #327A76 50%, #42FFF4 100%);
    background-clip: text;
    color: transparent;
    animation: h2 20s linear infinite;
    background-size: 13%;
    /* ici un background à été attribué au h2, le radial-gradient crée une image avec un dégradé entre plusieurs couleurs. 
    Ensuite avec background-clip text je dis que la zone est à l'intérieur du texte, et la couleur transparente pour pouvoir voir mon background  */
}

@keyframes h2 {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/*?__________________________________- - SECTION PAGE 1 - -__________________________________*/

/**__________________- - IMAGE PAGE 1 - -__________________*/
.photo-of-me {
    position: absolute;
    /* position */
    width: 40%;
    /* largeur */
    height: auto;
    /* hauteur */
    top: 17vh;
    /* position */
    left: 20%;
    /* position */
    transform: rotate(15deg);
    /* rotation de la photo */
    z-index: 1;
    border: 10px solid rgba(12, 143, 141, 0.076);
    /* bordure autour de la photo */
}

/**__________________- - TEXTE  PAGE 1 - -__________________*/
.col-4-12 {
    position: absolute;
    /* position */
    background-color: #0D0D0D;
    border: 1px #1F1F1F solid;
    color: #FFFFFF;
    /* couleur texte */
    width: 32.8%;
    /* largeur */
    top: 18.5vh;
    /* position */
    height: 55vh;
    left: 67.2%;
    /* position */
    font-size: 1.2vw;
    /* taille du texte */
    text-align: center;
    /* aligne le texte */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.empty-home {
    position: absolute;
    /* position */
    background-color: rgba(255, 192, 203, 0);
    width: 58%;
    /* largeur */
    height: 30vh;
    /* hauteur */
    top: 57vh;
    /* position */
}

/**_______________- - TEXTE ANIME PAGE 1 - -_______________*/
.block-anime {
    position: absolute;
    /* position */
    width: 80%;
    /* largeur */
    height: 6vh;
    /* hauteur */
    top: 87vh;
    /* position */
    font-size: 3vw;
    /* taille du texte */
    font-weight: bold;
    /* gras du texte */
    color: #FFFFFF;
    /* couleur du texte */
    z-index: 1;
    padding-left: 8.8%;
    /* marge interne à gauche  */


    animation: block-anime 3s ease-in 1;
    /*  block-anime est le nom de l'animation / 3s est le temps de l'animation / ease-in est le le timming sur le quel elle se deplace / 1 = l'animation se produira 1fois /  */
}

@keyframes block-anime {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0px);
    }
}

/*?___________________________________- - SECTION PAGE 2 - -___________________________________*/

/* -----------------------------Block compétences en conception */
.introduction-of-me {
    z-index: 1;
    position: absolute;
    /* position */
    left: 8.4%;
    /* position */
    top: 40vh;
    /* position */
    color: #FFFFFF;
    /* couleur du texte */
    line-height: 4vh;
    /* espacement entre le sligne de texte */
    text-align: center;
    /* alignement du texte */
    background-color: #0D0D0D;
    /* couleur de fond */
    border: 1px #0D0D0D solid;
    /* bordure de contour */
    height: 27vh;
    /* hauteur */
    border-top: #1f1f1f 1px solid;
    border-bottom: #1F1F1F 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    /* aligne les items dans son parent */
}

.h3-design-skills {
    z-index: 2;
    /* position */
    position: absolute;
    /* position */
    top: 21vh;
    /* position */
    left: 50.4%;
    /* position */
    color: #FFFFFF;
    /* couleur texte */
}

.design-skills {
    z-index: 1;
    /* position */
    position: absolute;
    /* position */
    top: 24vh;
    /* position */
    left: 50.4%;
    /* position */
    background-color: #0D0D0D;
    border: 1px #1F1F1F solid;
    color: #FFFFFF;
    /* couleur texte */
    height: 27vh;
    /* hauteur */
    z-index: 1;
    /* position */
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}

.chart-container {
    /* div des graphiques */
    width: 90%;
    /* largeur */
    height: 1vh;
    /* hauteur */
    border: 1px solid #1F1F1F;
}

.rod1 {
    width: 60%;
    /* largeur */
    height: 1vh;
    /* hauteur */
    background-color: #42FFF4;
}

.rod2 {
    width: 50%;
    /* largeur */
    height: 1vh;
    /* hauteur */
    background-color: #42FFF4;
}

.rod3 {
    width: 50%;
    /* largeur */
    height: 1vh;
    /* hauteur */
    background-color: #42FFF4;
}

.rod4 {
    width: 50%;
    /* largeur */
    height: 1vh;
    /* hauteur */
    background-color: #42FFF4;
}

/* modifie le texte  */
.label-skills {
    /* modifie les différent titre des compétences */
    margin-top: 0.5vh;
    text-align: right;
    font-size: 1.6vw;
}

/* ---------------------------block compétences code */
.h3-coding {
    z-index: 2;
    /* position */
    position: absolute;
    /* position */
    top: 57vh;
    /* position */
    left: 50.4%;
    /* position */
    color: #FFFFFF;
    /* couleur texte */
}


.code {
    z-index: 1;
    /* position */
    position: absolute;
    /* position */
    top: 60vh;
    /* position */
    left: 50.4%;
    /* position */
    background-color: #0D0D0D;
    border: 1px #1F1F1F solid;
    color: #FFFFFF;
    height: 27vh;
    z-index: 1;
    /* position */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.picture-code {
    width: 12%;
}

.p-code1 {
    position: absolute;
    /* position */
    top: 17vh;
    /* position */
    left: 6%;
    /* position */
    font-size: 1.2vw;
    left: -1%;

}

.p-code2 {
    position: absolute;
    /* position */
    top: 17vh;
    /* position */
    left: 23%;
    /* position */
    font-size: 1.2vw;
    left: 16%;

}

.p-code3 {
    position: absolute;
    /* position */
    top: 17vh;
    /* position */
    left: 38%;
    /* position */
    font-size: 1.2vw;
    left: 32%;

}

.p-code4 {
    position: absolute;
    /* position */
    top: 17vh;
    /* position */
    left: 54%;
    /* position */
    font-size: 1.2vw;
    left: 48%;

}

.p-code5 {
    position: absolute;
    /* position */
    top: 17vh;
    /* position */
    left: 71%;
    /* position */
    font-size: 1.2vw;
    left: 64%;

}

.p-code6 {
    position: absolute;
    /* position */
    top: 17vh;
    /* position */
    left: 87%;
    /* position */
    font-size: 1.2vw;
    left: 80%;

}

/* --------------------block interet */
.h3-interest {
    z-index: 2;
    /* position */
    position: absolute;
    /* position */
    top: 57vh;
    /* position */
    left: 75.6%;
    /* position */
    color: #FFFFFF;
}


.interest {
    z-index: 1;
    /* position */
    position: absolute;
    /* position */
    top: 60vh;
    /* position */
    left: 75.6%;
    /* position */
    background-color: #0D0D0D;
    border: 1px #1F1F1F solid;
    color: #FFFFFF;
    height: 27vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.picture-interest {
    width: 18%;
}


/*?________________________________- - SECTION works PAGE 3 - -________________________________*/

.work1 {
    position: absolute;
    /* position */
    top: 29vh;
    /* position */
    left: 8.4%;
    /* position */
    background-color: #0D0D0D;
    height: 27vh;
    border: 1px #1f1f1f solid;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /* position */
}

.work2 {
    position: absolute;
    /* position */
    top: 29vh;
    /* position */
    left: 33.6%;
    /* position */
    background-color: #0D0D0D;
    height: 27vh;
    border: 1px #1f1f1f solid;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /* position */
}

.work3 {
    position: absolute;
    /* position */
    top: 29vh;
    /* position */
    left: 58.8%;
    /* position */
    background-color: #0D0D0D;
    height: 27vh;
    border: 1px #1f1f1f solid;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /* position */
}

.work4 {
    position: absolute;
    /* position */
    top: 62vh;
    /* position */
    left: 8.4%;
    /* position */
    background-color: #0D0D0D;
    height: 27vh;
    border: 1px #1f1f1f solid;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /* position */
}

.work5 {
    position: absolute;
    /* position */
    top: 62vh;
    /* position */
    left: 33.6%;
    /* position */
    background-color: #0D0D0D;
    height: 27vh;
    border: 1px #1f1f1f solid;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /* position */
}

.work6 {
    position: absolute;
    /* position */
    top: 62vh;
    /* position */
    left: 58.8%;
    /* position */
    background-color: #0D0D0D;
    height: 27vh;
    border: 1px #1f1f1f solid;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /* position */

}

.mywork {
    /* class des images */
    max-width: 90%;
    max-height: 90%;
    border-radius: 50%;

}

/**_________________- - SURVOL IMAGES - -_________________*/
/* div de l'overlay */
.overlay {
    position: absolute;
    /* position */
    top: 0;
    /* position */
    bottom: 0;
    /* position */
    left: 0;
    /* position */
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #2A5451;
    z-index: 3;
    /* position */
}

.work1:hover .overlay {
    opacity: 1;
}

.work2:hover .overlay {
    opacity: 1;
}

.work3:hover .overlay {
    opacity: 1;
}

.work4:hover .overlay {
    opacity: 1;
}

.work5:hover .overlay {
    opacity: 1;
}

.work6:hover .overlay {
    opacity: 1;
}

/* div du texte  */
.text {
    color: white;
    font-size: 1vw;
    text-align: center;
    position: absolute;
    /* position */
    top: 50%;
    /* position */
    left: 50%;
    /* position */
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}



/*?_______________________________- - SECTION SERVICE PAGE 4 - -_______________________________*/
.coding {
    /* logo dans les div */
    width: 15%;
    /* largeur */
}

.block-service1,
.block-service2,
.block-service3,
.block-service4,
p {
    padding: 15px;
}

.h1-service {
    color: #42FFF4;
    font-size: 1.4vw;
    letter-spacing: 0;
    line-height: 2.5vh;
    font-weight: 200;
    margin-bottom: 0%;
    margin-top: 0%;
}

.block-service1 {
    color: #FFFFFF;
    font-size: 1vw;
    position: absolute;
    /* position */
    height: 27vh;
    top: 29vh;
    /* position */
    left: 16%;
    /* position */
    text-align: center;
    background-color: #0D0D0D;
    border: 1px #1F1F1F solid;
    z-index: 1;
    /* position */
}


.block-service2 {
    color: #FFFFFF;
    font-size: 1vw;
    position: absolute;
    /* position */
    height: 27vh;
    top: 29vh;
    /* position */
    left: 58.8%;
    /* position */
    text-align: center;
    background-color: #0D0D0D;
    border: 1px #1F1F1F solid;
    z-index: 1;
}

.block-service3 {
    color: #FFFFFF;
    font-size: 1vw;
    position: absolute;
    /* position */
    height: 27vh;
    top: 62vh;
    /* position */
    left: 16%;
    /* position */
    text-align: center;
    background-color: #0D0D0D;
    border: 1px #1F1F1F solid;
    z-index: 1;
    /* position */
}

.block-service4 {
    color: #FFFFFF;
    font-size: 1vw;
    position: absolute;
    /* position */
    height: 27vh;
    top: 62vh;
    /* position */
    left: 58.8%;
    /* position */
    text-align: center;
    background-color: #0D0D0D;
    border: 1px #1F1F1F solid;
    z-index: 1;
    /* position */
}

/*?_____________________________________- - SECTION CONTACT PAGE 5 - -_____________________________________*/


/**_____________________- - FORMULAIRE DE CONTACT - -_____________________*/
.contact-form {
    background-color: #0D0D0D;
    color: #42FFF4;
    padding: 1%;
    width: 32.8%;
    margin: 0 auto;
    position: absolute;
    /* position */
    top: 30vh;
    /* position */
    left: 8.4%;
    /* position */
    border: 1px #1F1F1F solid;
    z-index: 3;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    background-color: transparent;
    color: #42FFF4;
    border: none;
    border-bottom: 1px solid #42fff6;
    margin-bottom: 3%;
    width: 100%;
    padding: 2%;
    box-sizing: border-box;
}

/* boutton envoyer */
.contact-form input[type="submit"] {
    background-color: #42FFF4;
    color: #0D0D0D;
    border: none;
    padding: 2%;
    cursor: pointer;
    font-weight: bold;
}






/**_______________________________- - MAP - -_______________________________*/
.map {
    position: absolute;
    /* position */
    top: 20vh;
    /* position */
    left: 50.4%;
    /* position */
    background-color: #0D0D0D;
    /* height: 75vh; */
    border-radius: 10px;
    z-index: 1;
    /* position */
}

iframe {
    width: 100%;
    height: 75vh;
}


/*?_____________________________________- - VOLETS - -_____________________________________*/
#shutter {
    z-index: 2;
    /* position */
    width: 100%;
    height: 100vh;
    position: absolute;
    /* position */
    display: flex;
    justify-content: space-around;
    background-color: #00000000;
    overflow: hidden;
    /* overflow hidden, le contenu est coupé quand il dépasse, ou en l'occurence si il sort comme ici, de la div. Ce qui me permet de ne pas avoir de scroll à la sortie de différents shutter */
}

.shutter1 {
    width: 20%;
    height: 100vh;
    background-color: #1F1F1F;
    border-left: 4px solid #1F1F1F;
    /* ressert tout les volets et permet de retirer les écarts entre eux */
    animation: bottom 0.8s ease-out 1 forwards;
    /* ease-out, spécifie l'animation avec une fin lente / la valeur forwards permet de conserver la dernière images clé ( dernière position)  */
    animation-delay: 1.2s;
    /* délais avant que l'animation ne démarre */
}

.shutter2 {
    width: 20%;
    height: 100vh;
    background-color: #1F1F1F;
    animation: top 1s linear 1 forwards;
    /* la valeur linear permet d'avoir une vitesse d'animation identique du début à la fin */
    animation-delay: 0.3s;
}

.shutter3 {
    width: 20%;
    height: 100vh;
    background-color: #1F1F1F;
    animation: bottom 0.7s ease-in 1 forwards;
    animation-delay: 0s;
}

.shutter4 {
    width: 20%;
    height: 100vh;
    background-color: #1F1F1F;
    animation: top 1s linear 1 forwards;
    animation-delay: 0.3s;
}

.shutter5 {
    width: 20%;
    height: 100vh;
    background-color: #1F1F1F;
    animation: bottom 0.8s ease-out 1 forwards;
    animation-delay: 1.2s;
}

/* paramètre de l'animation SHUTTER VERS LA BAS  */
@keyframes bottom {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

/* paramètre de l'animation SHUTTER VERS LE HAUT */
@keyframes top {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}


/*?______________________________- - SEPARATION DES VOLETS - -______________________________*/
/* #separation {
    width: 100%;
    height: 100vh;
    position: absolute;
    display: flex;
    propriété qui rend flexible un élément a fin de remplir l'espace du conteneur
    justify-content: space-evenly;
    répartis uniformément dans le conteneur sur l'axe principal
    background-color: #00000000;
    z-index: 0;
} 

.separation1 {
    border: 1px solid #1f1f1f;
}

.separation2 {
    border: 1px solid #1f1f1f;
}

.separation3 {
    border: 1px solid #1f1f1f;
}

.separation4 {
    border: 1px solid #1f1f1f;
} */


/*?___________________________________- - BALISE HTML - -___________________________________*/
.tagss {
    width: 100%;
    height: 100vh;
    position: absolute;
    /* position */

}

.tags {
    display: inline;
    color: #1f1f1f;
    font-family: 'Gloria Hallelujah', sans-serif;
    font-size: 0.9vw;
}

#one {
    position: absolute;
    /* position */
    top: 3vh;
    /* position */
    left: 6.8%;
    /* position */
}

#two {
    position: absolute;
    /* position */
    top: 5vh;
    /* position */
    left: 7.6%;
    /* position */
}

#three {
    position: absolute;
    /* position */
    top: 15.5vh;
    /* position */
    left: 7.6%;
    /* position */
}

#four {
    position: absolute;
    /* position */
    top: 23.5vh;
    /* position */
    left: 7.6%;
    /* position */
}

#five {
    position: absolute;
    /* position */
    top: 93vh;
    /* position */
    left: 7.6%;
    /* position */
}

#six {
    position: absolute;
    /* position */
    top: 95vh;
    /* position */
    left: 6.8%;
    /* position */
}

#seven {
    position: absolute;
    /* position */
    left: 7.6%;
    /* position */
    top: 27vh;
    /* position */

}

#heigth {
    position: absolute;
    /* position */
    left: 7.6%;
    /* position */
    top: 88vh;
    /* position */

}


/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!--------------------------------------------------------- - SPAN - --------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/

span {
    color: #42FFF4;
}


/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!--------------------------------------------------------- - COLONNES 12 - -------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/


/*? une colonne = 7.6% /
/*? une goutière = 0.8% */


.col {
    float: left;
    margin: 0 0.8% 0 0;
}



.col-1-12 {
    width: 8.4%;
    /* une colone et une goutière !  */
}

.col-2-12 {
    width: 16%;
}

.col-3-12 {
    width: 24.3%;
}

.col-4-12 {
    width: 32.8%;
}

.col-5-12 {
    width: 41.2%;
}

.col-6-12 {
    width: 49.6%;
}

.col-7-12 {
    width: 58%;
}

.col-8-12 {
    width: 66.4%;
}

.col-9-12 {
    width: 74.8%;
}

.col-10-12 {
    width: 83.2%;
}

.col-11-12 {
    width: 91.6%;
}

.col-12-12 {
    width: 100%;
}


/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!--------------------------------------------------------- - CACHE BURGER DESKTOP - ---------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/

/* enleve la petite puce */
label,
#toggle {
    display: none;

}


/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!-----------------------------------------------------------TABLETTE / MOBILE-----------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/
/*!---------------------------------------------------------------------------------------------------------------------------------------*/





/* !--------------------------------------------------------------------------------------------------------------------------------------*/
/* !-------------------------------------------------------DE 768 A 991-------------------------------------------------------------------*/
/* !--------------------------------------------------------------------------------------------------------------------------------------*/

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



    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - NAV - -----------------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/


    /*?____________________________________- - TITRE H2 - -____________________________________*/
    h2 {
        font-size: 5vw;
    }

    /*?___________________________________- - BLOCK LOGO - -___________________________________*/
    .logo {
        margin-top: 2vh;
        width: 12vw;
    }

    .block-logo {
        background-color: black;
        height: 30vh;
        font-size: 2vh;
        line-height: 1;
        position: relative;
        top: -7.4vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .main_pages h1 {
        font-size: 4vw;
    }

    .main_pages p {
        font-size: 3vw;
    }


    h1 {
        letter-spacing: -0.2vw;
        font-size: 4vw;
        font-weight: bold;
    }

    /* retire le survole de couleur sur la nav  */
    .p:hover {
        background-color: #3aa09900;
    }

    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE HOME - -----------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    /**__________________- - IMAGE PAGE 1 - -__________________*/
    .photo-of-me {
        position: absolute;
        /* position */
        width: 40%;
        /* largeur */
        height: auto;
        /* hauteur */
        top: 25vh;
        /* position */
        left: 15%;
        /* position */
        transform: rotate(15deg);
        /* rotation de la photo */
        z-index: 1;
        border: 10px solid rgba(12, 143, 141, 0.076);
        /* bordure autour de la photo */
    }

    /**__________________- - TEXTE  PAGE 1 - -__________________*/
    .presentation {
        left: 55%;
        width: 40%;
        height: 40vh;
    }


    /**_______________- - TEXTE ANIME PAGE 1 - -_______________*/
    .block-anime {
        top: 80vh;
        /* position */
    }

    .block-anime p {
        font-size: 4vw;
        /* taille du texte */
    }



    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE PRESENTATION - ---------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    /*?___________________________________- - SECTION PAGE 2 - -___________________________________*/


    .introduction-of-me {

        left: 8.4%;
        /* position */
        top: 27vh;
        /* position */
        line-height: 4vh;
        /* espacement entre le sligne de texte */
        height: 30vh;
    }

    /* -----------------------------Block compétences en conception */
    .h3-design-skills {
        /* titre CONCEPTION */

        top: 24vh;
        /* position */
        left: 50.4%;
        /* position */

    }

    .design-skills {
        /* div complète de CONCEPTION */

        top: 27vh;
        /* position */
        left: 50.4%;
        /* position */
        height: 30vh;
    }

    /* modifie le texte  */
    .label-skills {
        /* modifie les différent titre des compétences de CONCEPTION */
        margin-top: 0.5vh;
        text-align: right;
        font-size: 1.7vw;
    }

    /* ------------------------------------block compétences code */
    .h3-coding {
        /* titre de la div compétence en code */

        top: 63vh;
        /* position */
        left: 8.4%;
        /* position */
    }


    .code {
        /* div compétence en code */

        top: 66vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 20vh;
        width: 55%;
    }

    .picture-code {
        /* taille des images html css mysql... */

        width: 12%;
    }

    .p-code1 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 2%;
        /* position */
    }

    .p-code2 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 19%;
        /* position */
    }

    .p-code3 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 35%;
        /* position */
    }

    .p-code4 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 51%;
        /* position */
    }

    .p-code5 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 67%;
        /* position */
    }

    .p-code6 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 83%;
        /* position */
    }

    /* -----------------------------block interet */

    .h3-interest {
        /* titre de la div mes intérêts */

        top: 63vh;
        /* position */
        left: 65%;
        /* position */
        color: #FFFFFF;
    }


    .interest {
        /* div intérêts */


        top: 66vh;
        /* position */
        left: 65%;
        /* position */
        height: 20vh;
        /* hauteur */
        width: 27%;
        /* largeur */
    }

    .picture-interest {
        width: 20%;
    }


    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE PORTFOLIO - ------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    .work1 {

        top: 29vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 27vh;
        width: 27%;

    }

    .work2 {

        top: 29vh;
        /* position */
        left: 36.2%;
        /* position */
        height: 27vh;
        width: 27%;

    }

    .work3 {

        top: 29vh;
        /* position */
        left: 64%;
        /* position */
        height: 27vh;
        width: 27%;

    }

    .work4 {

        top: 62vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 27vh;
        width: 27%;

    }

    .work5 {

        top: 62vh;
        /* position */
        left: 36.2%;
        /* position */
        height: 27vh;
        width: 27%;

    }

    .work6 {

        top: 62vh;
        /* position */
        left: 64%;
        /* position */
        height: 27vh;
        width: 27%;

    }

    .mywork {
        /* class des images */
        max-width: 90%;
        max-height: 90%;
        border-radius: 50%;

    }

    /**_________________- - SURVOL IMAGES - -_________________*/



    .text {
        /* div du texte  */

        font-size: 2vw;
    }





    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE SERVICE - --------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    .coding {
        /* logo dans les div */
        width: 15%;
        /* largeur */
    }

    .block-service1,
    .block-service2,
    .block-service3,
    .block-service4,
    p {
        /* affecte le texte dans les div services */

        padding: 15px;
        font-size: 1.6vw;
        line-height: 1.5;
    }

    .h1-service {
        /* titre de chque div services */

        color: #42FFF4;
        font-size: 2vw;
    }

    .block-service1 {

        font-size: 1vw;
        position: absolute;
        /* position */
        height: 27vh;
        width: 37%;
        top: 29vh;
        /* position */
        left: 8.4%;
        /* position */
        text-align: center;
    }


    .block-service2 {

        font-size: 1vw;
        position: absolute;
        /* position */
        height: 27vh;
        width: 37%;
        top: 29vh;
        /* position */
        left: 51%;
        /* position */
        text-align: center;

    }

    .block-service3 {
        font-size: 1vw;
        position: absolute;
        /* position */
        height: 27vh;
        width: 37%;
        top: 62vh;
        /* position */
        left: 8.4%;
        /* position */
        text-align: center;

    }

    .block-service4 {
        font-size: 1vw;
        position: absolute;
        /* position */
        height: 27vh;
        width: 37%;
        top: 62vh;
        /* position */
        left: 51%;
        /* position */
        text-align: center;

    }

    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE CONTACT - --------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/


    /**_____________________- - FORMULAIRE DE CONTACT - -_____________________*/

    .contact-form {
        /* div du formulaire */

        padding: 2%;
        width: 32.8%;
        height: 50vh;
        top: 30vh;
        /* position */
        left: 8.4%;
        /* position */

    }

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        /* affecte les différents input du formulalire */

        margin-bottom: 3%;
        width: 100%;
        padding: 2%;
        line-height: 6vh;
    }

    /**_______________________________- - MAP - -_______________________________*/
    .map {
        position: absolute;
        /* position */
        top: 20vh;
        /* position */
        left: 50.4%;
        /* position */
        background-color: #0D0D0D;
        /* height: 75vh; */
        border-radius: 10px;
        z-index: 1;
        /* position */
    }

    iframe {
        width: 99%;
        height: 64vh;
    }


    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - BALISE HTML - ---------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    .tags {
        display: inline;
        color: #1f1f1f;
        font-family: 'Gloria Hallelujah', sans-serif;
        font-size: 1.2vw;
    }


    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - MENU BURGER - ---------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    /* reset */
    * {
        margin: 0;
        padding: 0;
    }

    footer {
        display: none;
    }

    aside {
        background: #0D0D0D;
        height: 0;
        width: 0;
    }

    section {
        width: 100%;
        left: 0;
    }

    /* permet de ne pas rester dans le mode mobile au passage de plus de 991px*/
    label,
    #toggle {
        display: none;
        /* enleve la petite puce */
    }



    /* ! ICONE BURGER */
    label {
        width: 30px;
        /* largeur de la zone d'ouverture */
        display: flex;
        /* organisation du menu */
        float: right;
        /* positionnement du menu sur la marge droite */
        font-size: 50px;
        /* taille de l'écriture */
        color: #ffffff;
        /* couleur de l'écriture et du logo burger */
        cursor: pointer;
        /* curseur indiquant les liens */
        position: absolute;
        top: 7vh;
        left: 87%;
        z-index: 101;
    }


    /* ! DIV QUI CONTIENT TOUT */
    .main_pages {
        display: none;
        /* activation du menu */
        flex-direction: column;
        /* positionnement en collone du contenue */
        background: #141414fd;
        /* couleur de fond */
        backdrop-filter: blur(50px);
        height: 90vh;
        /* longueur du menu déroulant */
        width: 95%;
        /* largeur du menu déroulant */
        position: absolute;
        /* positionnement du menu déroulant */
        margin: 0 2.5%;
        /* centrer la div */
        top: 6vh;
        /* positionnement de l'ouverture du menu */
        justify-content: center;
        z-index: 100;
    }




    .main_pages ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        border-top: 0px;
        z-index: 100;
    }



    /* disposition des li, pour les écarter les un des autres */
    nav .main_pages ul li {
        font-size: 2.5em;
        width: 70%;
        z-index: 100;
    }




    nav .main_pages a {
        width: 100%;
        /* posiotionnement de la zone cliquable */
        z-index: 100;
        font-size: 4vw;
        /* taille du texte */
        font-weight: bold;
        /* gras du texte */
        z-index: 100;
        /* animation des a */
        background: radial-gradient(#2A5451 20%, #327A76 50%, #42FFF4 100%);
        background-clip: text;
        color: transparent;
        animation: h2 20s linear infinite;
        background-size: 13%;
    }



    #toggle:checked+.main_pages {
        display: flex;
        /* organisation du menu déroulant */
        z-index: 100;
    }



    nav ul li {
        text-align: center;
        /* allignement au centre du contenu */
        list-style-type: none;
        /* enleve  les puces */
        padding: 10px 0 10px 0;
        /* éloignemment des liens */
        z-index: 100;
    }

}

/* !--------------------------------------------------------------------------------------------------------------------------------------*/


/* !--------------------------------------------------------------------------------------------------------------------------------------*/
/* !-------------------------------------------------------DE 576 A 767-------------------------------------------------------------------*/
/* !--------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 576px) and (max-width: 767px) {


    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - NAV - -----------------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*?____________________________________- - TITRE H2 - -____________________________________*/
    h2 {
        font-size: 6vw;
    }

    .h2-home {
        /* modifie le h2 hors des 12 colonnes */
        width: 200px;
    }

    /*?___________________________________- - BLOCK LOGO - -___________________________________*/
    .logo {
        margin-top: 2vh;
        width: 12vw;
    }

    .block-logo {
        background-color: black;
        height: 30vh;
        font-size: 2vw;
        line-height: 1;
        position: relative;
        top: -7.4vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .main_pages h1 {
        font-size: 5vw;
    }

    .main_pages p {
        font-size: 4vw;
    }


    h1 {
        letter-spacing: -0.2vw;
        font-size: 4vw;
        font-weight: bold;
    }

    /* retire le survole de couleur sur la nav  */
    .p:hover {
        background-color: #3aa09900;
    }

    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE HOME - -----------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    /**__________________- - IMAGE PAGE 1 - -__________________*/
    .photo-of-me {
        position: absolute;
        /* position */
        width: 60%;
        /* largeur */
        height: auto;
        /* hauteur */
        top: 25vh;
        /* position */
        left: 2%;
        /* position */
        transform: rotate(15deg);
        /* rotation de la photo */
        z-index: 1;
        border: 10px solid rgba(12, 143, 141, 0.076);
        /* bordure autour de la photo */
    }

    /**__________________- - TEXTE  PAGE 1 - -__________________*/
    .presentation {
        left: 55%;
        width: 40%;
        height: 50vh;
    }

    .presentation p {
        font-size: 1.8vw;
    }


    /**_______________- - TEXTE ANIME PAGE 1 - -_______________*/
    .block-anime {
        top: 80vh;
        /* position */
    }

    .block-anime p {
        font-size: 4vw;
        /* taille du texte */
    }



    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE PRESENTATION - ---------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*?___________________________________- - SECTION PAGE 2 - -___________________________________*/


    .introduction-of-me {

        left: 8.4%;
        /* position */
        top: 27vh;
        /* position */
        line-height: 4vh;
        /* espacement entre le sligne de texte */
        height: 30vh;
        width: 35%;
    }

    .introduction-of-me p {
        /* cible le texte de ma petite présentation */

        font-size: 2.5vw;
    }

    /* -----------------------------Block compétences en conception */
    .h3-design-skills {
        /* titre CONCEPTION */

        top: 24vh;
        /* position */
        left: 50.4%;
        /* position */
    }


    .design-skills {
        /* div complète de CONCEPTION */

        top: 27vh;
        /* position */
        left: 50.4%;
        /* position */
        height: 30vh;
    }

    /* modifie le texte  */
    .label-skills {
        /* modifie les différent titre des compétences de CONCEPTION */
        font-size: 2.3vw;
    }

    /* ------------------------------------block compétences code */
    .h3-coding {
        /* titre de la div compétence en code */

        top: 63vh;
        /* position */
        left: 8.4%;
        /* position */
    }


    .code {
        /* div compétence en code */

        top: 66vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 20vh;
        width: 55%;
    }

    .picture-code {
        /* taille des images html css mysql... */

        width: 12%;
    }

    .p-code1 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 2%;
        /* position */
        font-size: 2.3vw;
    }

    .p-code2 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 19%;
        /* position */
        font-size: 2.3vw;
    }

    .p-code3 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 35%;
        /* position */
        font-size: 2.3vw;
    }

    .p-code4 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 51%;
        /* position */
        font-size: 2.3vw;
    }

    .p-code5 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 67%;
        /* position */
        font-size: 2.3vw;
    }

    .p-code6 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 83%;
        /* position */
        font-size: 2.3vw;
    }

    /* -----------------------------block interet */

    .h3-interest {
        /* titre de la div mes intérêts */

        top: 63vh;
        /* position */
        left: 65%;
        /* position */
        color: #FFFFFF;
    }


    .interest {
        /* div intérêts */

        top: 66vh;
        /* position */
        left: 65%;
        /* position */
        height: 20vh;
        /* hauteur */
        width: 27%;
        /* largeur */
    }

    .picture-interest {
        width: 30%;
    }


    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE PORTFOLIO - ------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    .work1 {

        top: 29vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 17vh;
        width: 42%;
        overflow: hidden;

    }

    .work2 {

        top: 29vh;
        /* position */
        left: 52%;
        /* position */
        height: 17vh;
        width: 42%;
        overflow: hidden;

    }

    .work3 {

        top: 47vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 17vh;
        width: 42%;
        overflow: hidden;

    }

    .work4 {

        top: 47vh;
        /* position */
        left: 52%;
        /* position */
        height: 17vh;
        width: 42%;
        overflow: hidden;

    }

    .work5 {

        top: 65vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 17vh;
        width: 42%;
        overflow: hidden;

    }

    .work6 {

        top: 65vh;
        /* position */
        left: 52%;
        /* position */
        height: 17vh;
        width: 42%;
        overflow: hidden;

    }

    .mywork {
        /* class des images */
        max-width: 90%;
        max-height: 90%;
        border-radius: 50%;

    }

    .mywork {
        /* class des images */
        max-width: 130%;
        max-height: 90%;
        border-radius: 50%;


    }

    /**_________________- - SURVOL IMAGES - -_________________*/



    .text {
        /* div du texte  */

        font-size: 2vw;
    }





    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE SERVICE - --------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    .coding {
        /* logo dans les div */
        width: 15%;
        /* largeur */
    }

    .block-service1,
    .block-service2,
    .block-service3,
    .block-service4,
    p {
        /* affecte le texte dans les div services */

        padding: 15px;
        font-size: 1.9vw;
        line-height: 1.5;
    }

    .h1-service {
        /* titre de chque div services */

        color: #42FFF4;
        font-size: 2vw;
    }

    .block-service1 {

        font-size: 1vw;
        position: absolute;
        /* position */
        height: 27vh;
        width: 37%;
        top: 29vh;
        /* position */
        left: 8.4%;
        /* position */
        text-align: center;
    }


    .block-service2 {

        font-size: 1vw;
        position: absolute;
        /* position */
        height: 27vh;
        width: 37%;
        top: 29vh;
        /* position */
        left: 51%;
        /* position */
        text-align: center;

    }

    .block-service3 {
        font-size: 1vw;
        position: absolute;
        /* position */
        height: 27vh;
        width: 37%;
        top: 62vh;
        /* position */
        left: 8.4%;
        /* position */
        text-align: center;

    }

    .block-service4 {
        font-size: 1vw;
        position: absolute;
        /* position */
        height: 27vh;
        width: 37%;
        top: 62vh;
        /* position */
        left: 51%;
        /* position */
        text-align: center;

    }

    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE CONTACT - --------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    /**_____________________- - FORMULAIRE DE CONTACT - -_____________________*/

    .contact-form {
        /* div du formulaire */

        padding: 2%;
        width: 32.8%;
        height: 50vh;
        top: 30vh;
        /* position */
        left: 8.4%;
        /* position */

    }

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        /* affecte les différents input du formulalire */

        margin-bottom: 3%;
        width: 100%;
        padding: 2%;
        line-height: 6vh;
    }

    /**_______________________________- - MAP - -_______________________________*/
    .map {
        position: absolute;
        /* position */
        top: 20vh;
        /* position */
        left: 50.4%;
        /* position */
        background-color: #0D0D0D;
        /* height: 75vh; */
        border-radius: 10px;
        z-index: 1;
        /* position */
    }

    iframe {
        width: 99%;
        height: 64vh;
    }

    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - BALISE HTML - ---------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/

    .tags {
        display: inline;
        color: #1f1f1f;
        font-family: 'Gloria Hallelujah', sans-serif;
        font-size: 1.5vw;
    }


    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - MENU BURGER - ---------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /* reset */
    * {
        margin: 0;
        padding: 0;
    }

    footer {
        display: none;
    }

    aside {
        background: #0D0D0D;
        height: 0;
        width: 0;
    }

    section {
        width: 100%;
        left: 0;
    }

    /* permet de ne pas rester dans le mode mobile au passage de plus de 991px*/
    label,
    #toggle {
        display: none;
        /* enleve la petite puce */
    }



    /* ! ICONE BURGER */
    label {
        width: 30px;
        /* largeur de la zone d'ouverture */
        display: flex;
        /* organisation du menu */
        float: right;
        /* positionnement du menu sur la marge droite */
        font-size: 50px;
        /* taille de l'écriture */
        color: #ffffff;
        /* couleur de l'écriture et du logo burger */
        cursor: pointer;
        /* curseur indiquant les liens */
        position: absolute;
        top: 7vh;
        left: 87%;
        z-index: 101;
    }


    /* ! DIV QUI CONTIENT TOUT */
    .main_pages {
        display: none;
        /* activation du menu */
        flex-direction: column;
        /* positionnement en collone du contenue */
        background: #141414;
        /* couleur de fond */
        backdrop-filter: blur(50px);
        height: 90vh;
        /* longueur du menu déroulant */
        width: 95%;
        /* largeur du menu déroulant */
        position: absolute;
        /* positionnement du menu déroulant */
        margin: 0 2.5%;
        /* centrer la div */
        top: 6vh;
        /* positionnement de l'ouverture du menu */
        justify-content: center;
        z-index: 100;
    }




    .main_pages ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        border-top: 0px;
        z-index: 100;
    }



    /* disposition des li, pour les écarter les un des autres */
    nav .main_pages ul li {
        font-size: 2.5em;
        width: 70%;
        z-index: 100;
    }




    nav .main_pages a {
        width: 100%;
        /* posiotionnement de la zone cliquable */
        z-index: 100;
        font-size: 4vw;
        /* taille du texte */
        font-weight: bold;
        /* gras du texte */
        z-index: 100;
        /* animation des a */
        background: radial-gradient(#2A5451 20%, #327A76 50%, #42FFF4 100%);
        background-clip: text;
        color: transparent;
        animation: h2 20s linear infinite;
        background-size: 13%;
    }



    #toggle:checked+.main_pages {
        display: flex;
        /* organisation du menu déroulant */
        z-index: 100;
    }



    nav ul li {
        text-align: center;
        /* allignement au centre du contenu */
        list-style-type: none;
        /* enleve  les puces */
        padding: 10px 0 10px 0;
        /* éloignemment des liens */
        z-index: 100;
    }

}

/* !--------------------------------------------------------------------------------------------------------------------------------------*/


/* !--------------------------------------------------------------------------------------------------------------------------------------*/
/* !------------------------------------------------------DU MIN A 575--------------------------------------------------------------------*/
/* !--------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 575px) {


    section {
        height: 100%;
    }

    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - NAV - -----------------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*?____________________________________- - TITRE H2 - -____________________________________*/
    h2 {
        font-size: 11vw;
        left: 8.4%;
        z-index: 5;
    }

    .h2-home {
        /* modifie le h2 hors des 12 colonnes */
        width: 200px;
    }

    /*?___________________________________- - BLOCK LOGO - -___________________________________*/
    .logo {
        margin-top: 2vh;
        width: 12vw;
    }

    .block-logo {
        background-color: black;
        height: 30vh;
        font-size: 2vw;
        line-height: 1;
        position: relative;
        top: -7.4vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .main_pages h1 {
        font-size: 5vw;
    }

    .main_pages p {
        font-size: 4vw;
    }


    h1 {
        letter-spacing: -0.2vw;
        font-size: 4vw;
        font-weight: bold;
    }

    /* retire le survole de couleur sur la nav  */
    .p:hover {
        background-color: #3aa09900;
    }




    /*!------------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE HOME - ------------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /**__________________- - IMAGE PAGE 1 - -__________________*/
    .photo-of-me {
        position: absolute;
        /* position */
        width: 90%;
        /* largeur */
        height: auto;
        /* hauteur */
        top: 9vh;
        /* position */
        left: -3%;
        /* position */
        transform: rotate(15deg);
        /* rotation de la photo */
        z-index: 1;
        border: 10px solid rgba(12, 143, 141, 0.076);
        /* bordure autour de la photo */
    }

    /**__________________- - TEXTE  PAGE 1 - -__________________*/
    .presentation {
        left: 8.4%;
        width: 82.5%;
        height: 29vh;
        top: 60vh;

    }

    .presentation p {
        font-size: 3.3vw;
        line-height: 1;
        position: relative;
        top: 0vh;

    }


    /**_______________- - TEXTE ANIME PAGE 1 - -_______________*/
    .block-anime {
        top: 88vh;
        /* position */
    }

    .block-anime p {
        font-size: 4vw;
        /* taille du texte */
    }



    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE PRESENTATION - ---------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    .body-presentation {
        height: 1900px;
        overflow: scroll;
    }

    /*?___________________________________- - SECTION PAGE 2 - -___________________________________*/


    .introduction-of-me {

        left: 8.4%;
        /* position */
        top: 35vh;
        /* position */
        height: 45vh;
        width: 82.5%;
    }

    .introduction-of-me p {
        /* cible le texte de ma petite présentation */

        font-size: 4vw;
        /* taille du texte */
        line-height: 6vh;
        /* espacement entre le sligne de texte */
        position: relative;
        top: 0vh;
    }

    /* -----------------------------Block compétences en conception */
    .h3-design-skills {
        /* titre CONCEPTION */

        top: 107vh;
        /* position */
        left: 8.4%;
        /* position */
    }


    .design-skills {
        /* div complète de CONCEPTION */

        top: 110vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 30vh;
        width: 82.5%;
    }

    /* modifie le texte  */
    .label-skills {
        /* modifie les différent titre des compétences de CONCEPTION */
        font-size: 4vw;
    }

    /* ------------------------------------block compétences code */
    .h3-coding {
        /* titre de la div compétence en code */

        top: 145vh;
        /* position */
        left: 8.4%;
        /* position */
    }


    .code {
        /* div compétence en code */

        top: 148vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 20vh;
        width: 82.5%;
    }

    .picture-code {
        /* taille des images html css mysql... */

        width: 12%;
    }

    .p-code1 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 2%;
        /* position */
        font-size: 4vw;
    }

    .p-code2 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 19%;
        /* position */
        font-size: 4vw;
    }

    .p-code3 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 35%;
        /* position */
        font-size: 4vw;
    }

    .p-code4 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 51%;
        /* position */
        font-size: 4vw;
    }

    .p-code5 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 67%;
        /* position */
        font-size: 4vw;
    }

    .p-code6 {
        /* texte % des images html css mysql... */

        top: 13vh;
        /* position */
        left: 83%;
        /* position */
        font-size: 4vw;
    }

    /* -----------------------------block interet */

    .h3-interest {
        /* titre de la div mes intérêts */

        top: 173vh;
        /* position */
        left: 8.4%;
        /* position */
        color: #FFFFFF;
    }


    .interest {
        /* div intérêts */

        top: 176vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 20vh;
        /* hauteur */
        width: 82.5%;
        /* largeur */
    }

    .picture-interest {
        width: 20%;
    }


    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - page portfolio - ------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    .body-portfolio {
        height: 1350px;
        overflow: scroll;
    }

    .work1 {

        top: 35vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 17vh;
        width: 82.5%;
        overflow: hidden;

    }

    .work2 {

        top: 55vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 17vh;
        width: 82.5%;
        overflow: hidden;

    }

    .work3 {

        top: 75vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 17vh;
        width: 82.5%;
        overflow: hidden;

    }

    .work4 {

        top: 95vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 17vh;
        width: 82.5%;
        overflow: hidden;

    }

    .work5 {

        top: 115vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 17vh;
        width: 82.5%;
        overflow: hidden;

    }

    .work6 {

        top: 135vh;
        /* position */
        left: 8.4%;
        /* position */
        height: 17vh;
        width: 82.5%;
        overflow: hidden;

    }

    .mywork {
        /* class des images */
        max-width: 90%;
        max-height: 90%;
        border-radius: 50%;

    }

    .mywork {
        /* class des images */
        max-width: 130%;
        max-height: 90%;
        border-radius: 50%;


    }

    /**_________________- - SURVOL IMAGES - -_________________*/



    .text {
        /* div du texte  */

        font-size: 2vw;
    }





    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - page service - --------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    .body-service {
        height: 2050px;
        overflow: scroll;
    }

    .coding {
        /* logo dans les div */
        width: 15%;
        /* largeur */
        position: relative;
        top: 0vh;
    }

    .block-service1,
    .block-service2,
    .block-service3,
    .block-service4,
    p {
        /* affecte le texte dans les div services */

        padding: 15px;
        font-size: 4.5vw;
        line-height: 1.3;
        position: relative;
        top: 5vh;
    }

    .h1-service {
        /* titre de chque div services */

        color: #42FFF4;
        font-size: 5vw;
    }

    .block-service1 {


        position: absolute;
        /* position */
        height: 45vh;
        width: 74.5%;
        top: 35vh;
        /* position */
        left: 8.4%;
        /* position */
        text-align: center;
    }


    .block-service2 {

        font-size: 1vw;
        position: absolute;
        /* position */
        height: 45vh;
        width: 74.5%;
        top: 86vh;
        /* position */
        left: 8.4%;
        /* position */
        text-align: center;

    }

    .block-service3 {
        font-size: 1vw;
        position: absolute;
        /* position */
        height: 45vh;
        width: 74.5%;
        top: 137vh;
        /* position */
        left: 8.4%;
        /* position */
        text-align: center;

    }

    .block-service4 {
        font-size: 1vw;
        position: absolute;
        /* position */
        height: 45vh;
        width: 74.5%;
        top: 188vh;
        /* position */
        left: 8.4%;
        /* position */
        text-align: center;

    }

    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - PAGE CONTACT - --------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    .body-contact {
        height: 900px;
        overflow: scroll;
    }


    /**_____________________- - FORMULAIRE DE CONTACT - -_____________________*/

    .contact-form {
        /* div du formulaire */

        padding: 2%;
        width: 79%;
        height: 30vh;
        top: 35vh;
        /* position */
        left: 8.4%;
        /* position */

    }

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        /* affecte les différents input du formulalire */

        margin-bottom: 3%;
        width: 100%;
        padding: 2%;
        line-height: 2vh;
    }

    /**_______________________________- - MAP - -_______________________________*/
    .map {
        position: absolute;
        /* position */
        top: 68vh;
        /* position */
        left: 8.4%;
        /* position */
        background-color: #0D0D0D;
        /* height: 75vh; */
        border-radius: 10px;
        z-index: 1;
        /* position */
        width: 82.5%;
    }

    iframe {
        width: 100%;
        height: 29vh;
    }


    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /*!--------------------------------------------------------- - MENU BURGER - ---------------------------------------------------------*/
    /*!-----------------------------------------------------------------------------------------------------------------------------------*/
    /* reset */
    * {
        margin: 0;
        padding: 0;
    }

    footer {
        display: none;
    }

    aside {
        background: #0D0D0D;
        height: 0;
        width: 0;
    }

    section {
        width: 100%;
        left: 0;
    }

    /* permet de ne pas rester dans le mode mobile au passage de plus de 991px*/
    label,
    #toggle {
        display: none;
        /* enleve la petite puce */
    }



    /* ! ICONE BURGER */
    label {
        width: 30px;
        /* largeur de la zone d'ouverture */
        display: flex;
        /* organisation du menu */
        float: right;
        /* positionnement du menu sur la marge droite */
        font-size: 50px;
        /* taille de l'écriture */
        color: #ffffff;
        /* couleur de l'écriture et du logo burger */
        cursor: pointer;
        /* curseur indiquant les liens */
        position: fixed;
        top: 7vh;
        left: 87%;
        z-index: 101;
    }


    /* ! DIV QUI CONTIENT TOUT */
    .main_pages {
        display: none;
        /* activation du menu */
        flex-direction: column;
        /* positionnement en collone du contenue */
        background: #141414;
        /* couleur de fond */
        backdrop-filter: blur(50px);
        height: 90vh;
        /* longueur du menu déroulant */
        width: 95%;
        /* largeur du menu déroulant */
        position: fixed;
        /* positionnement du menu déroulant */
        margin: 0 2.5%;
        /* centrer la div */
        top: 6vh;
        /* positionnement de l'ouverture du menu */
        justify-content: center;
        z-index: 100;
    }




    .main_pages ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        border-top: 0px;
        z-index: 100;
    }



    /* disposition des li, pour les écarter les un des autres */
    nav .main_pages ul li {
        font-size: 2.5em;
        width: 70%;
        z-index: 100;
    }




    nav .main_pages a {
        width: 100%;
        /* posiotionnement de la zone cliquable */
        z-index: 100;
        font-size: 4vw;
        /* taille du texte */
        font-weight: bold;
        /* gras du texte */
        z-index: 100;
        /* animation des a */
        background: radial-gradient(#2A5451 20%, #327A76 50%, #42FFF4 100%);
        background-clip: text;
        color: transparent;
        animation: h2 20s linear infinite;
        background-size: 13%;
    }



    #toggle:checked+.main_pages {
        display: flex;
        /* organisation du menu déroulant */
        z-index: 100;
    }



    nav ul li {
        text-align: center;
        /* allignement au centre du contenu */
        list-style-type: none;
        /* enleve  les puces */
        padding: 10px 0 10px 0;
        /* éloignemment des liens */
        z-index: 100;
    }


    /*?_____________________________________- - VOLETS - -_____________________________________*/
    #shutter {
        display: none;
    }

    /*?___________________________________- - BALISE HTML - -___________________________________*/
    .tagss {
        display: none;
        /* cache les balise html */

    }


}

/* !--------------------------------------------------------------------------------------------------------------------------------------*/









/*!- - UTILES - -*/
/* 
une colonne = 7.6%
une goutière = 0.8%
font-size 1px = 0.05625vw

VH 
(taille relative a la hauteur du viewport 1vh = 1% de la hauteur du viewport)

VW
(taille relative à la largeur du viewport 1vw = 1% de la largeur du viewport)

% 
(taille relative à son élément parent.)

*/