* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "eina";

}
/*Scrolling animation_*/

@keyframes appear{
    from{
        opacity: 0;
        scale : 0.5;
    }
    to{
        opacity : 1;
        scale: 1;
    }
}
@keyframes appear-2{
    from{
        opacity: 0;
        transform: translateX(-100px);
    }
    to{
        opacity : 1;
        transform: translateX(0px);
    }
}
@keyframes appear-3{
    from{
        opacity: 0;
        transform: translateX(100px);
    }
    to{
        opacity : 1;
        transform: translateX(0px);
    }
}


@font-face {
    font-family: "eina2";
    src: url(Fonts/Eina-bold2.otf);
}

@font-face {
    font-family: "eina";
    src: url(Fonts/Eina.otf);
}
html{
    scroll-behavior: smooth;
}
header{
    padding: 10px 5%;

}
header a {
    color: #fff;
    text-decoration: none;
}

body {
    color: #fff;
    background: rgb(18,14,31);
    background: linear-gradient(90deg, rgba(18,14,31,1) 0%, rgba(17,17,19,1) 100%); 
}

#acceuil {
    width: 100%;
    height: 100vh;
}

#acceuil .container {
    padding: 10px 5%;
}

.text-logo {
    font-family: 'eina2';
    font-size: 40px;
    transition: 0.5s;
}
.text-logo:hover{
    transform: translateY(-8px);
}
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    
}

nav ul li {
    list-style: none;
    display: inline-block;
    margin: 42px;
}

nav ul li a {
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    position: relative;
    font-family: "eina2";
}

nav ul li a::after {
    content: '';
    width: 0;
    height: 1px;
    background: #714BC8;
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: 0.5s;
}

nav ul li a:hover::after {
    width: 100%;
}

.content {
    display: flex; 
    align-items: center; 
    margin-top: 20% ;
    }

.text-header {
    font-size: 25px;
    flex-direction: column;
    text-align: left; /* Alignement à gauche du texte */
    margin-left: 20px; /* Espace entre les icônes et le texte */
}

.text-header h1 {
    font-size: 50px;
    margin-top: 20px;
    font-family: "eina2";
}

span {
    color: #BDA0FF;
    font-family: "eina2";
}

.text-header p {
    opacity: 0.6;
    font-family: "eina2";
    font-style: italic;
    font-size: 22px;
}

.social_icon img {
    height: 30px;
    margin: 10px 0; /* Marges verticales entre les icônes */
    opacity: 0.7;
    transition: 0.5s;
}

.social_icon:hover img {
    opacity: 1;
    transform: translateY(-8px);
}

.icon {
    display: flex; 
    flex-direction: column; /* Aligne les éléments en colonne */
    align-items: flex-start; /* Aligne les éléments à gauche */
    gap: 20px; /* Espace entre les icônes */
    margin-right: 20px; 
}




/*About________________*/
.underline-about {
    position: relative;
}

.underline-about::after {
    content: '';
    position: absolute;
    left: -10px; /* Ajuster cette valeur pour décaler la ligne à gauche */
    bottom: -12px; /* Ajuster cette valeur pour décaler la ligne vers le bas */
    width: calc(100% - 10px); /* Ajuster cette valeur pour la longueur de la ligne */
    border-bottom: 3.5px solid #BDA0FF; /* Ajuster la couleur et l'épaisseur de la ligne */
}
#about{
    padding: 150px 0;
    color: #fff;
}

#about .container{
    width: 60%;
    margin: auto;
}

.row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-col1{
    flex-basis: 35%;
    animation : appear-2 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}
.about-col1 img{
    width: 110%;
    border-radius: 5%;
    opacity: 0.95;
    margin-top: 70px;
}

.about-col2{
    flex-basis: 55%;
    animation : appear-3 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}

.about-title{
    font-size: 30px;
    font-weight: 600;
    color: #BDA0FF;
    margin-left: 55%;
    margin-bottom: 20px;
    font-family: 'eina2';
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}

.about-col2 p{
    font-size: 16px;
    
}

.about-col2 a{
    padding: 25px;
}
.a-link {
    color: #BDA0FF;
    font-family: "eina2";
    cursor: pointer;
    text-decoration: underline;
    transition: 0.5s;
}
.a-link:hover{
    font-size: 17px;

}
/*Compétences_*/
.underline-competences {
    position: relative;
}

.underline-competences::after {
    content: '';
    position: absolute;
    left: -10px; /* Ajuster cette valeur pour décaler la ligne à gauche */
    bottom: -12px; /* Ajuster cette valeur pour décaler la ligne vers le bas */
    width: calc(100% - 10px); /* Ajuster cette valeur pour la longueur de la ligne */
    border-bottom: 3.5px solid #BDA0FF; /* Ajuster la couleur et l'épaisseur de la ligne */
}
.competences-box{
    padding: 1px 0;
    
}

.row2{
    display: flex;
    justify-content: space-between;
    width: 60%;
    margin: auto;
}
.row2 .box{
    position: relative;
    width: 340px;
    height: 400px;
    padding: 40px;
    background: #120E1F;
    box-shadow: black 0px 5px 15px;    
    border-radius: 4px;
    margin: 50px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    transition: 1s;
    
}
.row2 .box:hover{
    transform: translateY(-40px);



}
.row2 .box .icon-box{
    position: relative;
    width: 70px;
    height: 70px;
    background: #4B2E88;
    display: flex;
    justify-content: center;
    margin: auto;
    border-radius: 50%;
    transition: 1s;
}
.row2 .box .icon-box{
    box-shadow: 0 0 0 0 #714BC8;
    background: #714BC8;

}

.row2 .box:hover .icon-box{
    box-shadow: 0 0 0 400px #714BC8;
    background: #714BC8;
}
.row2 .box .icon-box img{
    width: 35px;
    height: 35px;
    margin-top: 17px;
}

.row2 .box .contenu-box{
    position: relative;
    z-index: 1;
    transition: 0.5s;
    opacity: 0.7;

}
.row2 .box:hover .contenu-box{
    color: #fff;
    opacity: 1;

}

.row2 .box .contenu-box h1{
    font-size: 16px;
    margin: 10px 0 ;
    padding: 0;
    font-family: 'eina2';

}

.row2 .box .contenu-box ul li{
    list-style: disc;
    list-style-position: inside;
    padding: 10px;
    font-family: 'eina2';
    font-size: 12px;

}

.competences-title{
    color: #BDA0FF;
    margin-left: 25%;
    padding-bottom: 60px;
    font-family: 'eina2';
    font-size: 30px ;
    animation : appear-2 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%; 
}
.box{
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}
/*Compétences_Languages______*/
.languages{
    padding: 40px 0;
    text-align: center;
}
.row3 {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    flex-wrap: wrap; /* Permet de passer à la ligne pour plusieurs éléments */
    padding: 40px 0;
    gap: 90px; /*  espace entre les éléments*/

}
.logo p{
    opacity: 0;
    transition: 1s;
}

.logo:hover p{
    opacity: 1;
    color: #B2B3BD;
}



.logo img{
    width: 60px;
    transition: 0.5s;
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}

.logo:hover img{
    transform: translateY(-20px);

}
.languages-title{
    color: #BDA0FF;
    font-size: 24px;
    font-family: 'eina2';
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}

.php-text{
    margin-top: 14px;
}

/*BTS SIO______*/
.underline-bts {
    position: relative;
}

.underline-bts::after {
    content: '';
    position: absolute;
    left: -12px; /* Ajuster cette valeur pour décaler la ligne à gauche */
    bottom: -12px; /* Ajuster cette valeur pour décaler la ligne vers le bas */
    width: calc(100% - 15px); /* Ajuster cette valeur pour la longueur de la ligne */
    border-bottom: 3.5px solid #BDA0FF; /* Ajuster la couleur et l'épaisseur de la ligne */
}

.bts-sio {
    text-align: center;
    width: 90%;
    margin: auto;
    padding: 50px 0;
}
.bts-sio span{
    color: #BDA0FF;

}
.bts-sio h1 {
    color: #BDA0FF;
    font-family: 'eina2';
    font-size: 30px;
}

.bts-title{
    color: #fff;
    font-family: 'eina2';
    font-size: 30px;
    margin-right: 40%;
    animation : appear-2 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}

.bts-sio p {
    width: 65%;
    margin: auto;
    margin-bottom: 40px;
    font-size: 14px;
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}

.bts-box {
    display: flex;
    justify-content: center;
    gap: 50px; /* Espace entre les deux colonnes */
    margin-top: 100px;
}

.sisr-box, .slam-box {
    width: 400px;
    height: 250px;
    box-shadow: 0px 5px 10px black;
    padding: 20px;
    background-color: #120E1F;
    border-radius: 8px;
    transition: 1s;
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}
.slam-box:hover{
    background: #714BC8;
    height: 250px;
    transform: translateY(-25px);

}
.sisr-box:hover{
    background: #714BC8;
    height: 250px;
    transform: translateY(-25px);

}


.sisr-box h1, .slam-box h1 {
    color: #fff;
    font-family: 'eina2';
    font-size: 24px;
    margin-bottom: 10px;
    opacity: 0.8;
    transition: 1s;
}

.sisr-box:hover h1, .slam-box:hover h1{
    color: #fff;
    opacity: 1;

}

.sisr-box p, .slam-box p{
    opacity: 0.5;
    transition: 1s;
    width: 95%;
    margin-top: 25px;   
}

.sisr-box:hover p, .slam-box:hover p{
    color: #fff;
    opacity: 1;
    transform: translateY(-5px);


}
/*---------Parcours---------*/
.underline-parcours {
    position: relative;
}

.underline-parcours::after {
    content: '';
    position: absolute;
    left: -12px; /* Ajuster cette valeur pour décaler la ligne à gauche */
    bottom: -12px; /* Ajuster cette valeur pour décaler la ligne vers le bas */
    width: calc(100% ); /* Ajuster cette valeur pour la longueur de la ligne */
    border-bottom: 3.5px solid #BDA0FF; /* Ajuster la couleur et l'épaisseur de la ligne */
}

.parcours-title{
    color: #BDA0FF;
    font-family: 'eina2';
    font-size: 32px;
    text-align: center;
    margin-left: 55%;
    animation : appear-3 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
    
}

.parcours{
    padding: 200px 0;
    margin: auto;
    width: 80%;
}

.parcours-items{
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    max-width: 1000px;
    
}
.parcours-items::before{
    content: "";
    position: absolute;
    width: 3px;
    height: 100%;
    background-color: #BDA0FF;
    left: calc(50%);

}

.item{
    margin-bottom: 40px;
    width: 100%;
    position: relative;
}
.item:last-child{
    margin-bottom: 0;
    
}
.item:nth-child(odd){
    padding-right: calc(50% + 30px);
    text-align: right;
}

.item:nth-child(even){
    padding-left: calc(50% + 30px);

}
.item1{
    animation : appear-2 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}
.item2{
    animation : appear-3 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}
.parcours-dot{
    height: 21px;
    width: 21px;
    background-color: #BDA0FF;
    position: absolute;
    left: calc(50% - 8px);
    border-radius: 50%;
    top: 10px;
}

.parcours-date{
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 6px 0 15px;
}

.parcours-contenu{
    background-color: #120E1F;
    border: 3px solid #BDA0FF;
    padding: 30px 50px;
    border-radius: 50px;
    box-shadow: 0 5px 10px #120E1F;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.parcours-contenu:hover{
    transform: scale(1.05);
    box-shadow: 0 0 5px #19142B ;
    background-color: #19142B;

}
.parcours-contenu h3{
    font-size: 16px;
    color: #fff;
    margin: 0 0 10px;
    font-weight: 500;
    font-family: 'eina2';
}

.parcours-contenu p{
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    line-height: 22px;
}

::-webkit-scrollbar-thumb{
    background-color: #BDA0FF;

}
::-webkit-scrollbar-track{
    background-color: black;
    width: 50px;
}

/*---------Projets---------*/
.underline-projet {
    position: relative;
}

.underline-projet::after {
    content: '';
    position: absolute;
    left: -12px; /* Ajuster cette valeur pour décaler la ligne à gauche */
    bottom: -12px; /* Ajuster cette valeur pour décaler la ligne vers le bas */
    width: calc(100% - 15px); /* Ajuster cette valeur pour la longueur de la ligne */
    border-bottom: 3.5px solid #BDA0FF; /* Ajuster la couleur et l'épaisseur de la ligne */
}

.projet-title{
    color: #BDA0FF;
    font-family: 'eina2';
    font-size: 32px;
    text-align: center;
    margin-left: 70%;
    animation : appear-3 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
    
}
.slider{
    width: 80%;
    margin: auto;
    padding: 100px 0;
}

.slider-container{
    align-items: center;
    display: flex;
    height: 400px;
    margin: 0 auto;
    max-width: 1800px;
    position: relative;
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}

.slider-image{
    cursor: pointer;  /* Pour indiquer que l'image est cliquable */
    height: 150px;
    opacity: 0;
    position: absolute;
    transition: all 0.5s ease-in-out;
    width: 300px;
    z-index: 0;
    border-radius: 15px;
    background-size: contain;
    
    
}

.slider-image:hover {
    
    transform: translateX(-60%);
    opacity: 0.5;
}

.image-1{
    left: 15%;
    opacity: 0.4;
    transform: translateX(-50%);
}

.image-2, .image-4{
    height: 180px;
    opacity: 0.8;
    width: 320px;
    z-index: 1;
}

.image-2{
    left: 30%;
    transform: translateX(-50%);
}

.image-3{
    box-shadow: -2px 5px 33px 6px black;
    height: 230px;
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
    width: 370px;
    z-index: 2;
}

.image-4{
    left: 70%;
    transform: translateX(-50%);
}

.image-5{
    left: 85%;
    opacity: 0.4;
    transform: translateX(-50%);
}

.slider-controls{
    display: flex;
    justify-content: center;
    height: 100px;
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}

.slider-controls button{
    background-color: transparent;
    border: 0;
    cursor: pointer;
    font-size: 30px;
    margin: 0 50px ;
    padding: 0 12px;
    text-transform: capitalize;
}

.slider-controls-button:focus{
    outline: none;
}

.slider-controls-previous{
    position: relative;
}

.slider-controls-previous::before{
    border: solid #fff;
    border-width: 0 5px 5px 0;
    content: '';
    display: inline-block;
    height: 5px;
    left: -30px;
    padding: 10px;
    position: absolute;
    top: 25%;
    transform: rotate(135deg) translateY(-50%);
    transition: left 0.15s ease-in-out;
    width: 5px;
    opacity: 0.5;
    
}

.slider-controls-previous:hover::before{
    left: -40px;
}

.slider-controls-next{
    position: relative;
}

.slider-controls-next::before{
    border: solid #fff;
    border-width: 0 5px 5px 0;
    content: '';
    display: inline-block;
    height: 5px;
    right: -30px;
    padding: 10px;
    position: absolute;
    top: 46%;
    transform: rotate(-45deg) translateY(-50%);
    transition: right 0.15s ease-in-out;
    width: 5px;
    opacity: 0.5;
}

.slider-controls-next:hover::before{
    right: -40px;
}

.slider-nav{
    bottom: -15px;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    position: absolute;
    width: 100%;
}

.slider-nav li{
    background: #ccc;
    border-radius: 50%;
    height: 10px;
    margin: 0 16px;
    width: 10px;
}

.slider-nav li.slider-image-slected{
    background: #555;
}

/*-------Contact------*/
#contact{
    padding: 150px 0;
}
.underline-contact {
    position: relative;
}

.underline-contact::after {
    content: '';
    position: absolute;
    left: -12px; /* Ajuster cette valeur pour décaler la ligne à gauche */
    bottom: -12px; /* Ajuster cette valeur pour décaler la ligne vers le bas */
    width: calc(100% - 15px); /* Ajuster cette valeur pour la longueur de la ligne */
    border-bottom: 3.5px solid #BDA0FF; /* Ajuster la couleur et l'épaisseur de la ligne */
}

.contact-title{
    color: #BDA0FF;
    font-family: 'eina2';
    font-size: 32px;
    margin-left: 70%;
    padding: 75px 0;
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
    
}

.contact-box{
    width: 55%;
    margin: auto;
}
.contact-row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.contact-left{
    flex-basis: 35%;
    animation : appear-2 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}
.contact-left p{
    margin-top: 35px;

}

.contact-right{
    flex-basis: 60%;
    margin-top: 15px;
    animation : appear-3 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;

}

.contact-left p i{
    color: #fff;
    margin-right: 15px;
    font-size: 25px;
}

.contact-icon{
    margin-top: 30px;

}

.contact-icon a{
    text-decoration: none;
    font-size: 30px;
    margin-right: 30px;
    color: #fff;
    display: inline-block;
    transition: 0.5s;
}
.contact-icon a:hover{
    color: #BDA0FF;
    transform: translateY(-5px);
}

.contact-right form{
    width: 100%;

}
form input , form textarea{
    width: 100%;
    border: 0;
    outline: none;
    background: #19142B;
    padding: 15px;
    margin: 15px;
    color: #fff;
    font-size: 18px;
    border-radius: 6px;
    resize: none;
}

/*Veille-techno*/

.underline-veille {
    position: relative;
}

.underline-veille::after {
    content: '';
    position: absolute;
    left: -12px; /* Ajuster cette valeur pour décaler la ligne à gauche */
    bottom: -12px; /* Ajuster cette valeur pour décaler la ligne vers le bas */
    width: calc(100% - 15px); /* Ajuster cette valeur pour la longueur de la ligne */
    border-bottom: 3.5px solid #BDA0FF; /* Ajuster la couleur et l'épaisseur de la ligne */
}
.line1{
    background: url(Images/line-1-bg2.png);
    animation : appear-2 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}
.line2{
    background: url(Images/line-2-bg.png);
    animation : appear-3 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 10%;
}
.veille-title{
    color: #BDA0FF;
    margin-left: 15%;
    font-family: 'eina2';
    font-size: 30px;
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}

.veille-techno{
    width: 80%;
    margin: auto;
    padding: 50px 0;
}

.veille-techno p{
    text-align: center;
    width: 70%;
    margin: auto;
    animation : appear 0.3s linear;
    animation-timeline: view() ;
    animation-range: entry 0% cover 40%;
}
.veille-box{
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 75%;
    margin-left: 15%;
}
.line1, .line2 {
    width: 700px;
    height: 125px;
    border-radius: 50px;
    display: flex;          
    justify-content: space-between; 
    align-items: center;    
    text-align: center;
    padding: 50px;
    cursor: pointer;
    transition: 1s;
    box-shadow: black 0px 5px 15px;    

}
.line1:hover , .line2:hover{
    width: 800px;
    transform: translateX(-35px)
    

}
.line1:hover h3 ,.line2:hover h3{
    opacity: 1;
}


.line1 h1, .line2 h1 {
    font-family: "eina2";
    letter-spacing: 12px;
    margin-left: 20px;
    color: #fff;
    text-decoration: none;
}
.line1 h3, .line2 h3 {
    font-family: "eina";
    font-size: 15px; 
    opacity: 0;
    transition: 1s;
    color: #fff;
}
.line1{
    margin-right: 120px;
}

.line2{
    margin-top: 100px;
    margin-left: 120px;
}

a{
    text-decoration: none;
}
.chevron{
    width: 40px;
    margin-left: 100px;
    
}