:root{

    --color-gradient: linear-gradient(180deg, #121319 28.13%, #252833 100%) no-repeat;
    --color-primaire: rgba(161, 2, 216, 1);
    --color-secondaire: rgba(171, 210, 250, 1);
    --color-tertiaire: white;
    --color-fond-no-gradient: rgba(18, 19, 25, 1);

    /* NAV COLOR */

    --color-nav-btn-ham : rgba(18, 19, 25, 1); 
    --color-fond-nav: linear-gradient(180deg, #121319 28.13%, #252833 100%) no-repeat;


    /* TIMELINE NO JS */

    --color-fond-timeline: #F8F8F8;


    /* TAILLE CIRCLE HEADER*/

    --circle-one-size: 500px; 
    --circle-two-size: 600px; 
    --circle-three-size: 700px; 


    /* PROJET */

    --color-border-card: linear-gradient(180deg, rgba(161, 2, 216, 1) 28.13%, rgb(97, 176, 255) 100%) no-repeat;
    --color-card-box: rgb(0, 0, 0);
    --color-card: #252833;



}

body{

    margin: auto;
    width: 100%;

    background: var(--color-gradient);
    color: white;

    font-family: 'Poppins', sans-serif;
    font-weight: 200;
}


/* _______________________________ TRANSITION _______________________________ */



body, *{

    padding: 0;
    margin: 0;

}


#transition-block{

    width: 100vw;
    height: 100vh;
    background: var(--color-gradient);

    overflow: hidden;


    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    transition: 0.5s;

}



.rounded-content{
    width: 30vw;
    height: 30vw;
    border-radius: 100%;

    border: 3px dotted var(--color-primaire);

}

.content-rond-relative{
   
    width: 100%;
    height: 100%;
    border-radius: 100%;



    animation: 5s linear infinite loading;
    -webkit-animation: 5s linear infinite loading;

}


.rond{
    
    width: 2vw;
    height: 2vw;

    border-radius: 100%;
    background-color: var(--color-secondaire);

    
    
}

.rond-1{
    
    position: relative;
    left: calc(50% - 1vw);
    top: -1vw;
    
    animation: 3s linear infinite alternate rounded;
    -webkit-animation: 3s linear infinite alternate rounded;

}

.rond-2{

    position: relative;
    left: calc(93% - 1vw);
    top: 20vw;

    animation: 3s linear infinite alternate rounded-2;
    -webkit-animation: 3s linear infinite alternate rounded-2;

}

.rond-3{

    position: relative;
    left: calc(10% - 1vw);
    top: 19vw;

    animation: 3s linear infinite alternate rounded-3;
    -webkit-animation: 3s linear infinite alternate rounded-3;

}

#texte-loading{

    width: 100%;
    height: 100%;
    top: -100%;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;

    color: white;

    font-size: 25px;



}

@keyframes loading {


    0%{

        transform: rotate(0deg);

    }


    100%{

        transform: rotate(360deg);

    }



}

@-webkit-keyframes loading {


    0%{

        transform: rotate(0deg);

    }


    100%{

        transform: rotate(360deg);

    }



}



@keyframes rounded{ 


    0%{
        box-shadow: 0px 0px 0px 0px var(--color-secondaire);
    }    


    100%{
        box-shadow: 0px 0px 0px 10px var(--color-secondaire);
    }


}

@keyframes rounded-2{ 


    0%{
        box-shadow: 0px 0px 0px 0px var(--color-secondaire);
    }    


    75%{
        box-shadow: 0px 0px 0px 10px var(--color-secondaire);
    }


    100%{
        box-shadow: 0px 0px 0px 0px var(--color-secondaire);
    }


}


@keyframes rounded-3{ 


    0%{
        box-shadow: 0px 0px 0px 0px var(--color-secondaire);
    }    

    50%{
        box-shadow: 0px 0px 0px 10px var(--color-secondaire);
    }


    75%{
        box-shadow: 0px 0px 0px 0px var(--color-secondaire);
    }


    100%{
        box-shadow: 0px 0px 0px 0px var(--color-secondaire);
    }


}


/* _______________________________ FIN TRANSITION _______________________________ */

/* _______________________________ LOGO DU SITE _________________________________*/

.logo_du_site{
    position: fixed;
    top: 20px;
    left: 10px;
    z-index: 9998;
}

.logo_du_site img{
    width: 30px;
}


/* ________________________________HEADER_____________________________________ */

header{
    
    margin: auto;
    width: 90%;
    height: 100vh;
    overflow: hidden;

}



/* CIRCLE ONE */

.circle-one{

    position: relative;
    left: calc(50% - calc(var(--circle-one-size) / 2));
    top: calc(50% - calc(var(--circle-one-size) / 2));

    max-width: var(--circle-one-size);
    min-width: var(--circle-one-size);
    min-height: var(--circle-one-size);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border: 2px dotted var(--color-primaire);

}

.content-point-circle-one{
    min-height: var(--circle-one-size);
    border-radius: 100%;
    position: relative;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    animation: 6s linear circle-one-anim infinite;
    -webkit-animation: 6s linear circle-one-anim infinite;
}

.point-circle-one{
    box-sizing: border-box;
    background: var(--color-primaire);
    height: 30px;
    width: 30px;
    position: relative;
    left: calc(50% - 15px);
    top: -15px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}


@keyframes circle-one-anim{

    0%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }


    100%{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }


}


/* CIRCLE TWO*/


.circle-two{

    position: relative;
    left: calc(50% - calc(var(--circle-two-size) / 2));
    top: calc((50% - (calc(var(--circle-two-size) / 2)) - var(--circle-one-size)));

    max-width: var(--circle-two-size);
    min-width: var(--circle-two-size);
    min-height: var(--circle-two-size);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border: 2px dotted var(--color-secondaire);

}

.content-point-circle-two{
    min-height: var(--circle-two-size);
    border-radius: 100%;
    position: relative;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    animation: 10s linear circle-two-anim infinite;
    -webkit-animation: 10s linear circle-two-anim infinite;
}

.point-circle-two{
    box-sizing: border-box;
    background: var(--color-secondaire);
    height: 30px;
    width: 30px;
    position: relative;
    left: calc(50% - 15px);
    top: -15px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}


@keyframes circle-two-anim{

    0%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }


    100%{
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
    }


}

/* CIRCLE THREE */

/* CIRCLE TWO*/


.circle-three{

    position: relative;
    left: calc(50% - calc(var(--circle-three-size) / 2));
    top: calc((50% - (calc(var(--circle-three-size) / 2)) - ( var(--circle-two-size) + var(--circle-one-size))));

    max-width: var(--circle-three-size);
    min-width: var(--circle-three-size);
    min-height: var(--circle-three-size);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border: 2px dotted var(--color-primaire);

}

.content-point-circle-three{
    min-height: var(--circle-three-size);
    border-radius: 100%;
    position: relative;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    animation: 14s linear circle-three-anim infinite;
    -webkit-animation: 14s linear circle-three-anim infinite;
}

.point-circle-three{
    box-sizing: border-box;
    background: var(--color-primaire);
    height: 30px;
    width: 30px;
    position: relative;
    left: calc(50% - 15px);
    top: -15px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}


@keyframes circle-three-anim{

    0%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }


    100%{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
}


}

/* NOM PRENOM POSTE */


.content-name-detail{

    

    min-height: 200px;

    color: white;
    text-align: center;
    
    position: relative;
    top: calc( 50% - 150px - var(--circle-one-size) - var(--circle-two-size) - var(--circle-three-size) );

}

.logo_header{
    width: 100px;
}

h1{
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
}

.detail-h1{

    padding: 0;
    margin: 0;
    font-size:  28px;

}


/* ________________________________ FIN HEADER_____________________________________ */


/* __________________________________ MAIN ________________________________________ */

main{
    margin: auto;
    max-width: 1920px;

}

/*____________________________________FIN MAIN ____________________________________ */


/* _________________________________A PROPOS________________________________________*/


.a-propos{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.content-img-a-propos{
    flex: 1;
    color: var(--color-fond-photo);
    animation: 5s change_background_svg linear infinite alternate;
    -webkit-animation: 5s change_background_svg linear infinite alternate;
}


.content-img-a-propos svg{

    max-width: 900px;
    min-width: 250px;

}


@keyframes change_background_svg {

    0%{
        color: rgba(160, 108, 213, 1);
    }

    100%{
        color: var(--color-secondaire);
    }
    
}

.content-a-porpos-texte{
    padding: 20px;
    font-size: 22px;

    flex: 1;
}


.title-a-propos{
    font-weight: 500;
}

.descrip-a-propos{

    font-weight: lighter;

    max-width: 900px;
    min-width: 300px;
    text-align: justify;
    /* padding: 20px; */

}

/*_________________________________FIN A PROPOS ____________________________________*/

/* ________________________________ ROUNDED TIMELINE _______________________________*/




.rounded-time-line{
    padding: 100px 0px;
    margin: 50px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    overflow: hidden;
}


#content_texte_rounded_timeline{
    height: 300px;
    font-size: 20px;
    color: white;
    padding: 50px;
    width: 50%;
    text-align: justify;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;

}

#content_texte_rounded_timeline #titre_rounded_timeline{

    text-transform: uppercase;

}



/* ROUNDED TIME LINE */
#content-round{

    


    /* background: url("Group.png") no-repeat ;
    background-size: cover; */


    margin-right:50px;
    flex: 1;
    border: 2px solid var(--color-primaire);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;

    /* min-height: 300px; */
    height: 500px;

    /* min-width: 300px; */
    max-width: 500px;
    min-width: 500px;

}

.point-fixed{
    background-color: var(--color-secondaire);
    height: 30px;
    width: 30px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    cursor: pointer;
}

.p-position-1{
    position: relative;
    top: -15px;
    left: calc( 53% - 30px) ;
}

.p-position-2{
    position: relative;
    top: calc(26% - 1px);
    left: calc(100% - 28px);
}

.p-position-3{
    position: relative;
    top: calc(76% - 2.5px); 
    left: calc(76% + 1px);
}

.p-position-4{
    position: relative;
    top: calc(70% - 3px ); 
    left: calc(24% - 32px);
}

.p-position-5{
    position: relative;
    top: calc(9% - 8px ) ; 
    left: calc(0% - 2px );
}

#content-select{

    width: 100%;
    height: 100%;
    position: relative;
    top: calc( -30px * 5 );
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;


}


.select-point{
    box-sizing: border-box;
    border: 1px solid var(--color-secondaire);
    background-color: var(--color-fond-no-gradient);
    width: 24px;
    height: 24px;
    position: relative;
    top: -12px;
    left: calc(52% - 22px);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    
}

/* BTN PULSE */

.content-pulse-btn{

    position: relative;
    top: calc((-30px * 5) - 100% );
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    color: var(--color-fond-no-gradient);
    
}





#btn-pulse{

    background-color: var(--color-tertiaire);
    text-transform: uppercase;
    user-select: none;
    cursor: pointer;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    box-shadow: 0px 0px 0px 0px var(--color-tertiaire);
    animation: 2s  infinite  pulse;
    -webkit-animation: 2s  infinite  pulse;

}


@keyframes pulse {

    0%{
        box-shadow: 0px 0px 0px 0px var(--color-tertiaire);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

#titre_rounded_timeline{
    font-weight: 500;
}

#detail_rounded_timeline{
    font-weight: lighter;
}


/* ____________________________FIN TIMELINE ROUNDED ________________________*/


/* ____________________________TIMELINE NO JS ______________________________ */

.timeline{
    margin-top: 150px;
    display: none;
}

.title-xp{
    font-weight: bold;
    color: var(--color-fond-no-gradient);
}

.descrip-timeline-no-js{
    font-weight: 300;
    color: var(--color-fond-no-gradient);

}


.timeline-left{
    display: flex;
    justify-content: end;
    width: 49.75%;
    height: 200px;
    margin-left: auto;
    border-left: 4px solid var(--color-secondaire);
}

.content-barre-circle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.barre-timeline{
    background-color:var(--color-fond-timeline);
    width: 4px;
    height: 100%;
    margin: auto;
}

.circle-timeline-left{
    background-color: var(--color-secondaire);
    position: relative;
    top: -90px;
    left: -17px;
    z-index: -9997;
    width: 25px;
    height: 25px;
    margin: auto;
    border: 3px solid var(--color-secondaire);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.content-title-descrip{
    width: 100%;
    padding: 0px 20px;
}

.background-timeline-left{
    background-color: var(--color-fond-timeline);
    padding: 10px;
    border-left: 5px solid var(--color-secondaire);
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}

.background-timeline-left:hover{
    border-color: var(--color-primaire);
}

.barre-reli-left{
    width: 42px;
    z-index: -9999;
    height: 2px;
    background-color: var(--color-secondaire);
    position: relative;
    top: 12px;
    left: -41px;
}

/* DROIT */


.timeline-right{
    display: flex;
    flex-direction: row-reverse;
    width:50%;
    height: 200px;
    margin-right: auto;
    border-right: 4px solid var(--color-secondaire);
}

.barre-reli-right{
    width: 42px;
    z-index: -9999;
    height: 2px;
    background-color: var(--color-secondaire);
    position: relative;
    top: 12px;
    left: 100%;
}

.background-timeline-right{
    background-color: var(--color-fond-timeline);
    padding: 10px;
    border-right: 5px solid var(--color-secondaire);
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}

.background-timeline-right:hover{
    border-color: var(--color-primaire);
}

.circle-timeline-right{
    background-color: var(--color-secondaire);
    position: relative;
    top: -90px;
    right: -17px;
    z-index: -9997;
    width: 25px;
    height: 25px;
    margin: auto;
    border: 3px solid var(--color-secondaire);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;

}

.last{
    border: 0px;
}


/* __________________________________________________________________________ */

/* ____________________________ COMPETENCE __________________________________*/



.competence{

    padding: 100px 0px;
    margin: 50px;

}

.content-logo{


    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 70px 0px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;

}

.logo{

    width: 10%;
    min-width: 70px;

    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;


}

.logo:hover::after {

    content: attr(title);
    position: relative;
    top: -20px;
    background-color: #252833;
    border: 1px solid var(--color-tertiaire);
    font-size: 25px;

}




.logo0, .logo11{

    position: relative;
    top: 20px;

}

.logo9{

    position: relative;
    top: 40px;

}

.logo3{
    left: -100px;
}

.logo6{
    left: 100px;
}

.logo3 ,.logo6, .logo7{
    position: relative;
    top: -0px;
}

.logo12{
    position: relative;
    top: -50px;
}

.logo13{
    position: relative;
    top: -50px;
}

/* ANIM LOGO */


.logo0:hover{
    animation: 2s  infinite  docker;
    -webkit-animation: 2s  infinite  docker;
}



@keyframes docker {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(39, 46, 105, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}


.logo1:hover{
    animation: 2s  infinite  javascript;
    -webkit-animation: 2s  infinite  javascript;
}



@keyframes javascript {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(225, 170, 28, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo2:hover{
    animation: 2s  infinite  mysql;
    -webkit-animation: 2s  infinite  mysql;
}

.logo13:hover{
    animation: 2s  infinite  laravel;
    -webkit-animation: 2s  infinite  symfony;
}



@keyframes symfony {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(192, 31, 89, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}



@keyframes mysql {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(12, 116, 137, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo3:hover{
    animation: 2s  infinite  figma;
    -webkit-animation: 2s  infinite  figma;
}



@keyframes figma {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(148, 72, 188, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo4:hover{
    animation: 2s  infinite  laravel;
    -webkit-animation: 2s  infinite  laravel;
}



@keyframes laravel {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(222, 88, 87, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo5:hover{
    animation: 2s  infinite  angular;
    -webkit-animation: 2s  infinite  angular;
}



@keyframes angular {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(214, 0, 47, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo6:hover{
    animation: 2s  infinite  agile;
    -webkit-animation: 2s  infinite  agile;
}



@keyframes agile {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(157, 3, 96, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo7:hover{
    animation: 2s  infinite  scss;
    -webkit-animation: 2s  infinite  scss;
}



@keyframes scss {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(204, 102, 153, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo8:hover{
    animation: 2s  infinite  typescript;
    -webkit-animation: 2s  infinite  typescript;
}



@keyframes typescript {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(47, 117, 192, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo9:hover{
    animation: 2s  infinite  ionic;
    -webkit-animation: 2s  infinite  ionic;
}



@keyframes ionic {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(78, 142, 252, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo10:hover{
    animation: 2s  infinite  linux;
    -webkit-animation: 2s  infinite  linux;
}



@keyframes linux {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(203, 96, 148, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo11:hover{
    animation: 2s  infinite  python;
    -webkit-animation: 2s  infinite  python;
}



@keyframes python {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(121, 82, 179, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

.logo12:hover{
    animation: 2s  infinite  php;
    -webkit-animation: 2s  infinite  php;
}



@keyframes php {

    0%{
        box-shadow: 0px 0px 0px 0px rgba(97, 128, 182, 1);
    }

    50%{
        box-shadow: 0px 0px 0px 20px rgba(171, 210, 250, 0);
    }

    100%{
        box-shadow: 0px 0px 0px 0px rgba(171, 210, 250, 0);
    }
    
}

/* ___________________________________ FIN COMPETENCE ___________________________________*/

/*____________________________________ MES PROJET _______________________________________*/

.content-projet{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 7.5vw;
    margin-top: 20px;
}

.box-card{
    background: var(--color-card-box);
    width: 300px;
    height: 400px;
    overflow: hidden;
    padding: 2px;
    border-radius: 10px;
}

.back-card{
    
    position: relative;
    z-index: 1;
    width: 150px;
    top: -450px;
    left: calc( 200px - 125px );
    height: 500px;
    background: var(--color-border-card);

    

}

.active{
    animation: 2s  infinite  rotate-border-card;
    -webkit-animation: 2s  infinite  rotate-border-card;
}



.card{
    position: relative;
    background: var(--color-card);
    z-index: 2;
    margin: auto;
    width: 300px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    
    
    border-radius: 10px;
    overflow: hidden;

}


.content-img-card img{

    width: 100%;

}

.content-text-logo{
    padding-left: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: var(--color-card);
}

.card-name{
    text-transform: uppercase;
    font-weight: 500;
}

.card-logo img{
    width: 10%;
}


.link-card{
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
}

.iconify{

    padding-left: 5px;

}


@keyframes rotate-border-card {
    

    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }

}


.carte-btn-plus{
    display: none;
}


.content-btn-projet{
    padding: 50px;
    width: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#btn-plus{
    border: 1px solid var(--color-tertiaire);
    padding: 20px;
    user-select: none;
    cursor: pointer;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
   
}

#btn-plus:hover{
    background: var(--color-tertiaire);
    color: var(--color-fond-no-gradient);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}


/* _______________________________________FIN MES PROJETS______________________________________________*/


/* _______________________________________MES PHOTOS __________________________________________________*/


.content-image-mosaique{
    display: flex;
    
    justify-content: center;
    align-items: center;

}

.content-image-mosaique:nth-child(2){
    margin-left: 20px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;

}

.img-grande img , .img-petites img{

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;

}

.img-petites{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.img-grande img{

    width: 40vw;
    max-width: 800px;
    margin: 10px;
    
}

.img-petites img{

    width: 20vw;
    max-width: 377px;

    
}

/*_____________________________ FIN MES PHOTOS _________________________________*/

/* _____________________________FOOTER _________________________________________*/

footer{
    margin-top: 100px;
    border-top: 1px solid var(--color-tertiaire);
}

.content-rs{

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    gap: 20px;
    margin-top: 70px;

}

.email, .tel{

    text-align: center;
    padding: 10px;

}

.link_icon{
    color: white;
    transition: 0.1s;
}

.link_icon:hover{
    color: #C4C4C4;
}

.email a, .tel a, .download_div a{
    font-size: 20px;
    color: white;
    text-decoration: none;
    transition: 0.1s    ;

}

.download_div{
    text-align: center;
}

.download_div a:hover , .tel a:hover, .email a:hover  {
    color: #C4C4C4;
}

.tel{
    margin-bottom: 50px;
}

.credit{
    font-size: 12px;
}

/* ____________________________________FIN FOOTER ________________________________*/