:root {
  --couleur-principal: #000000;
  --couleur-secondaire: #ffffff;
  --body-principal : #000000;
}
@font-face {
    font-family: "montserrat-extrabold";
    src: url('./font/montserrat/static/Montserrat-ExtraBold.ttf');
  }
@font-face {
    font-family: "montserrat-bold";
    src: url('./font/montserrat/static/Montserrat-Bold.ttf');
}
@font-face {
    font-family: "montserrat-semibold";
    src: url('./font/montserrat/static/Montserrat-SemiBold.ttf');
}
@font-face {
    font-family: "montserrat-medium";
    src: url('./font/montserrat/static/Montserrat-Medium.ttf');
}
html {
  font-size: 16px; /* ou la taille de police que vous souhaitez */
  background-color: var(--couleur-transparent);
}
html,body{
  scroll-behavior: smooth;
  max-width: 100vw;
  overflow-x: hidden;
}
  * {
    margin: 0;
    padding: 0px;
    font-family: "montserrat-extrabold";
    box-sizing: border-box;
    /* overflow-x: hidden; */
  }
  li {
    list-style: none;
  }
  a,
  a:visited {
    color: var(--couleur-secondaire);
    text-decoration: none;
    transition: 0.3s;
    font-size: 1.7vw;
  }
  nav a:hover {
    font-size: 2vw;
    /* color: #80808b; */
  }

  body {
    background-color: var(--body-principal);
    color: var(--couleur-secondaire);
    min-height: 100vh;
    max-width: 100vw;
    transition: all .5s ease-in-out;
    overflow-x: hidden;
  }
  nav {
    padding: 1.5vw 4vw;
    height: 7vw;
    position: fixed;
    width: 100vw;
    /* mix-blend-mode: difference; */
    background-color: transparent;
    z-index: 25;
  }
  nav ul {
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
  }

  nav li {
    /* mix-blend-mode: difference; */
    transition: all 0.3s;
  }

  .nav-min{
    display: none;
    transition: all .5s ease-in-out;
  }
  .btn-burger{
    display: flex;
    width: 15vw;
    align-items: center;
    justify-content: center;
  }

  .burger{
    display: flex;
    width: 9vw;
    height: 7vw;
    flex-direction: column;
    align-items: center;
  }
  .burger span{
    display: flex;
    width: 100%;
    height: 1vw;
    flex-grow: 1;
    background-color: var(--couleur-secondaire);
    border-radius: 1vw;
    transition: 1s;
  }
  .burger-top{
    margin-bottom: 2vw;
    transform-origin: top left;
    /* transform: rotate(45deg); */
  }
  .burger-bottom{
    bottom: 0;
    margin-top: 2vw;
    transform-origin: bottom left;
    /* transform: rotate(-45deg); */
  }


  .btn-toggle{
    width: 15vw;
  }



.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex; 
    justify-content: center;
    align-items: center;
    z-index: 100;
    overflow: hidden;
    white-space: nowrap;
}
.lettre {
    color: #ffffff;
    font-size: 7vw;
    letter-spacing: 1vw;
    margin-bottom: 10vw;
    opacity: 0;
    transform: translateY(100%);
    display: inline-block;
    /* margin-right: -5rem; */
}

.lettre:nth-child(7){
    margin-right: 4vw;
}




.ball {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 1.3s ease-in-out, opacity 1s linear;
  opacity: 1;
}



/* Ajoutez une classe pour désactiver le défilement */
.disable-scroll {
  overflow: hidden;
}











  section {
    display: flex;
    padding-top: 9vw;
    margin-left: 1.5vw;
  }
  .main-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:baseline;
    margin-left: 1vw;
    color: var(--couleur-secondaire);
  }
  #name {
    font-size: 18vw;
    font-family: 'montserrat-bold';
    line-height: 0.9;
    color: var(--couleur-secondaire);
    /* transition: 1s; */
  }
  #surname {
    font-size: 21vw;
    font-family: 'montserrat-bold';
    line-height: 0.9;
    margin-bottom: 40px;
    color: var(--couleur-secondaire);
    /* transition: 1s; */
  }
  h2{
    font-family: 'montserrat-medium';
    font-size: 3rem;
    padding-left: 20px;
  }
  #cv{
    font-family: 'montserrat-semibold';
    font-size: 2.5vw;
    padding-left: 30px;
    /* text-decoration: underline; */
  }

  #cv {
    display: inline;
    position: relative;
    color: var(--couleur-secondaire);
   
  }

  #cv:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 2px;
    width: 0%;
    left: 30px;
    top: 3vw;
    height: 0.3vw;
    transition: 0.25s cubic-bezier(0.72,-0.01, 0.19, 0.92);
    background-color: #C31DBD;
    border-radius: 10px;
}


  #cv:hover:after {
    width: 15vw;
  }


  



  #about{
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    opacity: 0;
    transition: 0.2s;
    border-radius: 2rem;
    background-color: var(--couleur-principal);
    color: var(--couleur-secondaire);
  }
  #about h1 {
    font-size: 5vw;
    margin: 2vw;
    margin-bottom: 2vw;
  }


  .about-content{
    display: flex;
    width: 100%;
    
  }

  .about-left{
    margin: 2vw;
    width: 50%;
    border-right: 3px solid;
    /* font-size: 2vw; */
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 3vw;
    padding-right: 3vw;
    place-items: center;
  }

  .about-left p {
    font-size: 2vw;
    text-align: center;
  }
  .about-right{
    width: 50%;
    /* display: flex; */
    justify-content: center
  }

  .title{
    /* font-size: 2.5vw; */
    display: flex;
    justify-content: center;
    margin: 2vw;
    border-bottom: 3px solid;
  }
  .title p {
    font-size: 2.5vw;
  }
  .interets{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .interets p{
    padding: 1vw;
    margin: 1vw;
    font-size: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 3px solid;
    /* border-left: 3px solid white; */
    border-top: 3px solid;
    /* border-bottom: 3px solid white; */
    border-top-right-radius: 2vw;
    border-bottom-right-radius: 2vw;
    border-radius: 2vw;
  }



  


  #video{
    width: 100%;
    position: relative;
    padding-right: 7%;
    /* padding-bottom: 10%; */
    padding-left: 7%;
    z-index: -1;
  }

  #video-container{
    width: 100%;
    height: 100%;
    float: right;
    clear: left;
    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
    border-radius: 2rem;
    padding-top: 56.25%;
    position: relative;
    margin-top: 15vw;
    bottom: auto;
    left: auto;
    right: 0%;
    will-change: transform, opacity;
    transform: translate3d(15%, -10%, 0px) scale3d(0.7, 0.7, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    opacity: 0.8;

  }

  #animation{
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: 50%;
    background-size: cover;
    margin: auto;
    position: absolute;
    top: -100%;
    bottom: -100%;
    left: -100%;
    right: -100%;
    border-radius: 2rem;
  }









  #container {
    margin: 0%;
    position: fixed;
    right: 0;
    bottom: -350px;
    
    }

  #littlecircle{
    position: relative;
    padding-bottom: 100%;
  }

  text{
    fill : var(--couleur-secondaire);
  }
  
  #littlecircle text {
    font-family: 'montserrat-medium'; 
    font-size: 18.5px;
  }
  
  #littlecircle svg{
    width: 100%;
  
    -webkit-animation-name: rotate;
       -moz-animation-name: rotate;
        -ms-animation-name: rotate;
         -o-animation-name: rotate;
            animation-name: rotate;
    -webkit-animation-duration: 5s;
       -moz-animation-duration: 5s;
        -ms-animation-duration: 5s;
         -o-animation-duration: 5s;
            animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
        -ms-animation-timing-function: linear;
         -o-animation-timing-function: linear;
            animation-timing-function: linear;
  
  }
  
  @-webkit-keyframes rotate {
      from { -webkit-transform: rotate(0); }
      to { -webkit-transform: rotate(360deg); }
  }
  @-moz-keyframes rotate {
      from { -moz-transform: rotate(0); }
      to { -moz-transform: rotate(360deg); }
  }
  @-ms-keyframes rotate {
      from { -ms-transform: rotate(0); }
      to { -ms-transform: rotate(360deg); }
  }
  @-o-keyframes rotate {
      from { -o-transform: rotate(0); }
      to { -o-transform: rotate(360deg); }
  }
  @keyframes rotate {
      from { transform: rotate(0); }
      to { transform: rotate(360deg); }
  }


section.home{
    padding: 0;
    padding-left: 20px;
}

.home .home-text p{
	margin:0;
	overflow: hidden;
}
.home .home-text p span{
    font-size: 3.1vw;
    color:#C31DBD;
    font-weight: 700;
    display: inline-block;
    line-height: 5vw;
    display: none;
}

.home .home-text p span.text-in{
	display: block;
	animation: textIn .5s ease;
}
.home .home-text p span.text-out{
	animation: textOut .5s ease;
}
@keyframes textIn{
	0%{
		transform: translateY(100%);
	}
	100%{
		transform: translateY(0%);
	}
}
@keyframes textOut{
	0%{
		transform: translateY(0%);
	}
	100%{
		transform: translateY(-100%);

	}
}




  #experience{
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 1vw;
    margin-top: 80vw;
    /* transition: opacity 1s ease-in-out; */
  }
  #experience h1{
    font-size: 6vw;
  }

#experience_carrousel{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30vw;
  max-width: 100%;
  overflow: hidden;
}

.container_work a{
    text-decoration: none;
}

.container_work input {
    display: none;
}

.container_work {
    width: 90vw;
    height: 150vw;
    max-width: 600px;
    max-height: 600px;
    display: flex;
    transform-style: preserve-3d;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cards {
    position: relative;
    height: 450px;
    width: 430px;
    margin-bottom: 20px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.cards label {
    position: absolute;
    width: 430px;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    transition: transform 0.55s ease;
}

.cards .card{
  position: relative;
  height: 100%;
  border-radius: 10px;
  margin: 30px 35px;
  padding: 10px;
  padding-bottom: 130px;
  background-size: cover;
  background-position: center;
}

.card:hover{
  background-color: #0000009a;
}

.card .image{
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.card .image img{
    border-radius: 5px;
    margin-top: 23px;
    width: 70%;
    height: 150px;
    object-fit: cover;
}


.card .infos{

    display: block;
    text-align: end;
    padding-top: 60px;
}

.infos span{

    display: block;
}

.infos .name{

    font-size: 30px;
    color: var(--current-color1);
    letter-spacing: 8px;
    margin-bottom: 20px;
    padding-left: 25%;
    transition: all .6s ease;
}

.infos .lorem{
    font-size: 15.5px;
    color: #ECEAED;
    letter-spacing: 3px;
    border-radius: 10px;
    padding:  5px;
}

.infos{
  color: white;
}

.card .btn-contact{

    width: 100%;
    height: 60px;
    margin: 35px auto;
    border-radius: 5px;
    background-color: var(--current-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 25px;
    letter-spacing: 10px;
    font-weight: 700;
    transition: all .7s ease;
}



.slide {
  transition: 0.3s;
}

.slide::before {
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  z-index: 1;

}

.slide:hover::before {
  z-index: -1;
  transition: 0.3s;
}

#slide1::before{
  background-image: url('./autres/worker-6322085_1920.jpg');
}

#slide2::before{
  background-image: url('./autres/pate-fruit.jpg');
}

#slide3::before{
  background-image: url('./autres/carton.jpg');
}

#slide4::before{
  background-image: url('./autres/mise-en-rayon.jpg');
}

#slide5::before{
  background-image: url('./autres/worker-6322085_1920.jpg');
}








#s1:checked~.cards #slide4,
#s2:checked~.cards #slide5,
#s3:checked~.cards #slide1,
#s4:checked~.cards #slide2,
#s5:checked~.cards #slide3 {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(-150%, 0, -220px);
    --current-color1: #ECEAED;
    --current-color2: #ECEAED;
    filter: blur(5px);
}


#s1:checked~.cards #slide5,
#s2:checked~.cards #slide1,
#s3:checked~.cards #slide2,
#s4:checked~.cards #slide3,
#s5:checked~.cards #slide4 {
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(-70%, 0, -120px);
    --current-color1: #ECEAED;
    --current-color2: #ECEAED;
    filter: blur(5px);
}

#s1:checked~.cards #slide1,
#s2:checked~.cards #slide2,
#s3:checked~.cards #slide3,
#s4:checked~.cards #slide4,
#s5:checked~.cards #slide5 {
    box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 50%);
    transform: translate3d(0, 0, 0);
    --current-color1: #fe3434;
    --current-color2: #ECEAED;
}

#s1:checked~.cards #slide2,
#s2:checked~.cards #slide3,
#s3:checked~.cards #slide4,
#s4:checked~.cards #slide5,
#s5:checked~.cards #slide1 {
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(70%, 0, -120px);
    --current-color1: #ECEAED;
    --current-color2: #ECEAED;
    filter: blur(5px);
}

#s1:checked~.cards #slide3,
#s2:checked~.cards #slide4,
#s3:checked~.cards #slide5,
#s4:checked~.cards #slide1,
#s5:checked~.cards #slide2 {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
    transform: translate3d(150%, 0, -220px);
    --current-color1: #ECEAED;
    --current-color2: #ECEAED;
    filter: blur(5px);
}











.education_container {
  display: flex;
  width: 100%;
  padding-bottom: 5vw;
}

.left-panel {
  /* flex: 1; */
  /* background-color: #f0f0f0; */
  display: flex;
  flex-direction: column;
  padding: 2vw;
  padding-left: 10vw;
}

.vertical-line {
  display: flex;
  align-items: center;
  padding: 4vw 0;
  position: relative;
}

.dot {
  width: 2vw;
  height: 2vw;
  background-color: var(--couleur-secondaire);
  border-radius: 50%;
  margin-right: 2vw;
}

.text {
  font-size: 1.3vw;
  /* max-width: 30rem; */
  color: var(--couleur-secondaire);
}

.education_name{
  font-size: 1.9vw;
}

.vertical-line::before {
  content: "";
  position: absolute;
  width: 0.4vw;
  background-color: var(--couleur-secondaire);
  top: 0px;
  bottom: 0px;
  left: 0.8vw;
  /* border-radius: 10px; */
}

.right-panel{
  font-size: 5vw;
  padding: 3vw;
  padding-right: 8vw;
  margin-bottom: 5vw;
  flex: 1;
  /* background-color: #f0f0f0; */
  display: flex;
  align-items: center; /* Centre verticalement */
  justify-content: center;
}

.borderRadius1::before{
  border-radius: 10vw 10vw 0px 0px;
}

.borderRadius2::before{
  border-radius: 0px 0px 10vw 10vw;
}









.projet{
  display: flex;
  margin-bottom: 20vw;
  margin-top: 10vw;
  overflow: hidden;
  width: 100vw;
}
.texte-projet{
  width: 60%;
  height: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.texte-content {
  flex-direction: column;
}
.proj-text-school{
  font-size: 6vw;
}
.proj-text-project{
  font-size: 8vw;
}

.boite-projet{
  width: 30%;
  height: 50vw;
  border-radius: 3vw;
  overflow: hidden;
}
.proj-black{
  width: 10%;
  background-color: var(--couleur-principal);
  height: 50vw;
  z-index: 2;
  position: relative;
  overflow: hidden;
  transition: all .5s ease-in-out;
  /* border-radius: 3rem; */
}


.proj-black::before {
  content: "";
  position: absolute;
  background: transparent;
  bottom: 0;
  height: 50vw;
  width: 6rem;
  left : -6rem;
  border-bottom-right-radius: 3rem;
  border-top-right-radius: 3rem;
  box-shadow: 3vw 0 0 0 var(--couleur-principal);
  transition: all .5s ease-in-out;
}
.proj-slide {
  width: 30vw;
  height: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vw;
  color: white;
  border-radius: 3rem;
  -webkit-box-shadow: inset 0px 0px 25px 6px rgba(0,0,0,0.25); 
  box-shadow: inset 0px 0px 25px 6px rgba(0,0,0,0.25);
}


.blocHorizontal {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-50vw);
  transform-origin: top left;
}
.proj-container {
  display: flex;
  width: 50vw;
  height: 100vw;
  transform: rotate(-90deg) translateX(-50vw);
  transform-origin: top left;
  overflow-x: hidden;
  border-radius: 3rem;
  

  /* pour ie et mozilla */
  -ms-overlow-style: none;
  scrollbar-width: none;
}
::-webkit-scrollbar {
  display: none;
}
.one {
  overflow: hidden;
  position: relative;
  justify-content: center;
  text-align: center;
  font-size: 4vw;
}
.one::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('./projets/design-7232420.jpg'); /* Remplacez par le chemin de votre image */
  background-size: cover;
  filter: blur(5px); /* Ajustez la valeur de flou selon vos préférences */
  z-index: -1;
  background-position: center;
}
.two {
  overflow: hidden;
  position: relative;
  margin-left: 3vw;
}
.two::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('./projets/code-1076536.jpg'); /* Remplacez par le chemin de votre image */
  background-size: cover;
  filter: blur(5px); /* Ajustez la valeur de flou selon vos préférences */
  z-index: -1;
  background-position: center;
}
.three {
  overflow: hidden;
  position: relative;
  margin-left: 3vw;
}
.three::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('./projets/ajouter-profil-imprimante-3d-cura-ultimaker.jpg'); /* Remplacez par le chemin de votre image */
  background-size: cover;
  filter: blur(5px); /* Ajustez la valeur de flou selon vos préférences */
  z-index: -1;
  background-position: center;
}
.four {
  width: 70vw;
  background: #8e835800;
}

.one, .two, .three, .four {
  flex-direction: column;
  padding: 2vw;
  padding-right: 3vw;
  -webkit-box-shadow: inset 0px 0px 15px 10px var(--couleur-secondaire); 
  box-shadow: inset 0px 0px 15px 10px var(--couleur-secondaire);
}


.proj-title{
  font-size: 4vw;
  padding-bottom: 1vw;
}

.proj-bas .proj-year{
  font-size: 1.5vw;
  padding-bottom: 3vw;
}

.proj-bas .proj-texte{
  font-size: 2vw;
}








.haut, .bas{
  display: flex;
}



.round{
  background-color: transparent;
  border: 5px solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  font-size: 1.5vw;
}
.french{
  width: 18vw;
  height: 18vw;
  /* padding: 16px; */
  margin-left: 10vw;
}
.english{
  width: 14vw;
  height: 14vw;
  /* padding: 16px; */
  margin-left: 28vw;
  margin-top: 8vw;
}
.spanish{
  width: 11vw;
  height:11vw;
  margin-left: 19vw;
  margin-top: 18vw;
}




.skills{
  padding-bottom: 10vw;
}

.skills-text{
  font-size: 8vw;
  padding-left: 5vw;
}

.graph{
  width: 60%;
  padding-left: 8vw;
  /* padding-top: 1vw; */
}

.logiciel{
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}



.bas img {
  /* width: 10%; */
  height: 8vw;
  object-fit: cover;
  position: absolute;
  padding: 1vw;
  filter: grayscale(100%);
}

.images-logiciel{
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #C31DBD; */
}
/* 
.im1{
  transform: translateX(20%);
  background-color: red;
} */

.im2{
  transform: translateX(150%);
}

.im3{
  transform: translateX(-50%) translateY(100%);
}

.im4{
  transform: translateX(50%) translateY(100%);
}

.im5{
  transform: translateX(150%) translateY(100%);
}
.im6{
  transform:translateY(200%);
}
.im7{
  transform: translateX(120%) translateY(200%);
  border-radius: 2rem;
}

#soldChart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-column-gap: 3vw;
  align-items: end;
  position: relative;
}

#soldChart::before{
  content: "- advanced";
  font-size: 2vw;
  white-space: pre;
  font-style: italic;
  left: 0;
  bottom: 5rem;
  width: 50vw;
  height: 33vw;
  background-color: transparent;
  border-left: 3px solid ;
  border-bottom: 3px solid ;
  position: absolute;
}

.histogramItem {
  width: 100%;
  background: var(--couleur-secondaire);
  position: relative;
}

.histogramLabel {
  position: absolute;
  height: 2vw;
  bottom: -3.2vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5vw;
  text-align : center;
}

.addedStyles {
  height: 40vw;
  width: 50vw;
  /* background-image: linear-gradient(to top left, #394178, #22274E); */
  padding: 2vw;
  padding-bottom : 5em;
  border-radius: 8px;
  position: relative;
}

#histogramWrapper {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  flex-direction: column;
  width: 100vw;
  /* height: 100vh; */
}


















.contacts{
  display: flex;
  height: 90vh;
  /* width: 100vw; */
  align-items: center;
  /* justify-content: center; */
  /* padding-top: 20rem; */
  /* padding-bottom: 15rem; */
}

.contacts-gauche{
  width: 45%;
  display: inline-block;
  align-items: center;
  justify-content: center;
  margin-left: 8vw;
}

.txt-contacts{
  font-size: 7vw;
}

.txt-based{
  font-size: 2.5vw;
  margin-left: 2vw;
}

.contacts-droite a{
  font-size: 2.3vw;
}

.contacts-droite{
  height: 20vw;
  line-height: 3;
}

.back{
  display: flex;
  position: absolute;
  right: 20vw;
  padding-bottom: 2vw;
}

.back a {
  color: var(--couleur-secondaire);
}

.backToTopButton {
  /* --offset: 50px; */
  scroll-behavior: smooth;
  /* transition: 0.3s ease-in-out; */
}

.contacts-droite a{
  display: inline;
  position: relative;
  color: var(--couleur-secondaire);
  text-decoration: none;
  /* mix-blend-mode: difference; */
 
}

.contacts-droite a:after {
  content: '';
  display: block;
  position: absolute;
  /* bottom: 2; */
  width: 0%;
  /* left: 30px; */
  top: 3vw;
  height: 0.3vw;
  transition: 0.25s cubic-bezier(0.72,-0.01, 0.19, 0.92);
  background-color: #C31DBD;
  /* background-color: #ffffff; */
  border-radius: 10px;
}


.contacts-droite a:hover:after {
  width: 90%;
}

  









.dark {
  /* background: #FFF;
  color: #000; */
  z-index: -1000000;
}

.toggle {
  width: 3.5vw;
  height: 2.1vw;
  background-color: var(--couleur-secondaire);
  border: none;
  border-radius: 2.1vw;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: all .5s ease-in-out;
}

.toggle::after {
  content: '';
  width: 1.68vw;
  height: 1.68vw;
  background-color: var(--couleur-principal);
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  top: 0.21vw;
  left: 0.21vw;
  transition: all .5s ease-in-out;
}

.active {
  background-color: var(--couleur-secondaire);
}

.active::after {
  left: 1.61vw;
  background-color: var(--couleur-principal);
}



  
  /* ************** Mouse effect *************** */
  /* * {
    cursor: none;
  }
  
  .circle1 {
    height: 4px;
    width: 4px;
    background-color: #ced132;
    position: absolute;
    transform: translate(-50%, -50%);
    margin: 0;
    border-radius: 50%;
  } */
  
  .circle2 {
    height: 2vw;
    width: 2vw;
    background-color: var(--couleur-secondaire);
    position: absolute;
    transform: translate(-50%, -50%);
    margin: 0;
    transition: 0.15s;
    border-radius: 50%;
    /* display: none; */
  }
  
  
  #circle{
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 1000000;
  }



    /* ************** RESPONSIVE *************** */
  
    @media (max-width: 1100px){
      #video{
        padding: 0;
      }
      #video-container{
        margin: 0;
        margin-right: 5vw;
        height: 90vw;
        width: 90vw;
        transform: translate3d(0%, 18%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
      }
      #about h1{
        font-size: 8vw;
        margin-left: 5vw;
      }
      .about-content{
        display: inline;
      }
      .about-left{
        width: 100%;
        height: 30%;
        border: none;
        margin: 0;
      }
      .about-left p{
        font-size: 3.5vw;
      }
      .about-right{
        width: 100%;
        height: 40%;
        border: none;
        margin: 0;
      }
      .about-right p{
        font-size: 4vw;
        margin: 2vw;
      }
      .title{
        border: none;
      }
      .title p{
        font-size: 4vw;
        text-decoration: underline;
      }






      #experience{
        margin-top: 120vw;
      }






      .education_container{
        display: flex;
        flex-direction: column-reverse;
      }
      .right-panel{
        justify-content: left;
        margin: 0;
        margin-left: 5vw;
        margin-bottom: 4vw;
        font-size: 8vw;
      }
      .left-panel{
        width: 90%;
      }
      .text{
        font-size: 2vw;
      }
      .education_name{
        font-size: 3vw;
      }
      .vertical-line{
        padding: 5vw 0;
      }




      #soldChart::before{
        height: 30vw;
      }






      .contacts{
        height: 70vw;
      }
    }
    @media (max-width: 800px){
      .skills-text{
        padding-bottom: 5vw;
      }
      .addedStyles {
        height: 50vw;
      }
      #soldChart::before{
        height: 40vw;
      }
      #cv{
        font-size: 5vw;
      }
      #cv:after {
        width: 25vw;
        top: 7vw;
        height: 0.8vw;
      }   
      #cv:hover:after {
        width: 25vw;
      }

      #circle{
        display: none;
      }
      .circle2{
        display: none;
      }
    }
    @media (max-width: 600px){
      .skills-text{
        padding-bottom: 5vw;
      }
      .addedStyles {
        height: 50vw;
      }
      #soldChart::before{
        height: 30vw;
      }
    }
    @media (max-width: 500px){
      #experience_carrousel .container_work {
        width: 90vw;
        /* height: 4000vw; */
        /* margin-top: 60vw; */
        margin-bottom: 150vw;
        align-items: left;
        justify-content: left;
      }
    
      #experience_carrousel .container_work .cards {
        width: 90vw;
        /* height: 100%; */
        max-width: none;
        height: auto;
      }
    
      #experience_carrousel .container_work .card {
        width: 90%;
        left: 5%;
        top: 2vw;
        margin: 0;
        margin-bottom: 8vw;
        height: 48vw;
        background-color: rgba(0, 0, 0, 0.646);
        display: flex;
        padding: 2vw;
        align-items: center;
      }
    
      #experience_carrousel .container_work input {
        display: none;
      }
    
      #experience_carrousel .container_work label {
        position: relative;
        /* width: 10px; */
        /* cursor: pointer; */
      }

      
    
      #experience_carrousel .container_work .infos {
        position:relative;
        top: 0;
        left: 0;
        width: 50%;
        text-align: center;
        padding-top: 1vw;
        font-size: 3vw;
        letter-spacing: 1vw;

      }
    
      #experience_carrousel .container_work .name {
        padding-left: 0;
        font-size: 4vw;
        margin-bottom: 0;
        letter-spacing: 1vw;
      }
    
      #experience_carrousel .container_work .lorem {
        font-size: 3vw;
        padding: 1vw;
        letter-spacing: 1vw;
      }

      .second-txt{
        color: white;
        font-size: 1vw;
        letter-spacing: 0.1vw;
      }

      .slide::before {
        z-index: -1;
        height: 52vw;
      }


      .card .image{
        display: inline;
        justify-content: space-between;
        overflow: hidden;
        align-items: left;
        width: 50%;
        height: 100%;
      }
      
      .card .image img{
          border-radius: 0;
          margin-top: 10vw;
          width: 100%;
          height: 50%;
          object-fit: cover;
      }

      #s1:checked~.cards #slide4,
      #s2:checked~.cards #slide5,
      #s3:checked~.cards #slide1,
      #s4:checked~.cards #slide2,
      #s5:checked~.cards #slide3 {
          box-shadow: 0 15px 35px 0 rgb(231, 41, 41);
          transform: translate3d(-150%, 0, -220px);
          --current-color1: #fe3434;
          --current-color2: #ECEAED;
          filter: blur(0px);
      }


      #s1:checked~.cards #slide5,
      #s2:checked~.cards #slide1,
      #s3:checked~.cards #slide2,
      #s4:checked~.cards #slide3,
      #s5:checked~.cards #slide4 {
          box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
          transform: translate3d(-70%, 0, -120px);
          --current-color1: #fe3434;
          --current-color2: #ECEAED;
          filter: blur(0px);
          pointer-events: none;
      }

      #s1:checked~.cards #slide1,
      #s2:checked~.cards #slide2,
      #s3:checked~.cards #slide3,
      #s4:checked~.cards #slide4,
      #s5:checked~.cards #slide5 {
          box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 50%);
          transform: translate3d(0, 0, 0);
          --current-color1: #fe3434;
          --current-color2: #ECEAED;
          pointer-events: none;
      }

      #s1:checked~.cards #slide2,
      #s2:checked~.cards #slide3,
      #s3:checked~.cards #slide4,
      #s4:checked~.cards #slide5,
      #s5:checked~.cards #slide1 {
          box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%);
          transform: translate3d(70%, 0, -120px);
          --current-color1: #fe3434;
          --current-color2: #ECEAED;
          filter: blur(0px);
          pointer-events: none;
      }

      #s1:checked~.cards #slide3,
      #s2:checked~.cards #slide4,
      #s3:checked~.cards #slide5,
      #s4:checked~.cards #slide1,
      #s5:checked~.cards #slide2 {
          box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%);
          transform: translate3d(150%, 0, -220px);
          --current-color1: #fe3434;
          --current-color2: #ECEAED;
          filter: blur(0px);
          pointer-events: none;
      }







      .nav-min{
        position: relative;
        display:flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 5vw;
        padding-right: 5vw;
        padding-top: 3vw;
        padding-bottom: 3vw;
        /* display: none; */
        z-index: 10;
        background-color: var(--couleur-principal);
      }
      nav{
        padding: 0;
      }
      .nav-max{
        /* display: none; */
        display: inline;
        position: absolute;
        margin: 0;
        padding: 0;
        padding-top: 5vh;
        width: 100vw;
        height: 100vh;
        background-color: var(--couleur-principal);
        transition: 1s;
        top : -100vh;
        z-index: 2;
      }
      .nav-max li {
        width: 100%;
        height: 12vh;
      }
      .nav-max a {
        font-size: 7vw;
      }
      .nav-max a:hover {
        font-size: 7vw;
      }

      



      .link1{
        font-size: 5vw;
      }
      .link1:hover{
        font-size: 5vw;
      }
      .toggle {
        width: 14vw;
        height: 8.2vw;
        border-radius: 4.2vw;
      }
      
      .toggle::after {
        width: 6.72vw;
        height: 6.72vw;
        top: 0.84vw;
        left: 0.84vw;
      }
            
      .active::after {
        left: 6.44vw;
      }
      .main-left{
        margin-top: 10vw;
      }

      .nav-max .link1{
        display: none;
      }
      #BUTTON2{
        display: none;
      }

      #nav-haut{
        z-index: 30;
        /* mix-blend-mode: difference; */
      }





      #container{
        display: none;
      }








      .projet{
        display: inline;
      }
      .texte-projet{
        width: 100%;
        height: 50vw;
        display: flex;
        justify-content: center;
        align-items:start;
        flex-direction: column;
        padding-left: 10vw;
        margin-top: 10vw;
      }
      .proj-text-school{
        font-size: 8vw;
      }
      .proj-text-project{
        font-size: 12vw;
      }
      
      .boite-projet{
        width: 100%;
        height: 100%;
        margin-bottom: 20vw;
        border-radius: 3vw;
      }
      .proj-black{
        display: none;
      }
      .proj-black::before {
        display: none;
      }
      .proj-slide {
        width: 90%;
        margin-left: 5%;
        height: 90vw;
        margin-bottom: 10vw;
      }


      .blocHorizontal {
        display: inline;
        width: 100%;
        transform: rotate(0) translateY(0);
        transform-origin: top left;
      }
      .proj-container {
        display: flex;
        width: 100%;
        height: 100%;
        transform: rotate(0) translateX(0);
      }
      .one{
        font-size: 10vw;
      }
      .four {
        display: none;
      }

      .one, .two, .three, .four {
        padding: 5vw;
      }

      .proj-title{
        font-size: 10vw;
      }
      .proj-bas .proj-year{
        font-size: 4vw;
      }
      .proj-bas .proj-texte{
        font-size: 5vw;
      }









      .haut{
        display: inline;
      }
      .bas{
        display: inline;
      }
      .skills-text{
        font-size: 15vw;
        padding-left: 10vw;
      }
      .languages{
        margin-bottom: 70vw;
        width: 100%;
      }

      .round{
        background-color: transparent;
        border: 5px solid;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: absolute;
        font-size: 3vw;
      }
      .french{
        width: 36vw;
        height: 36vw;
        /* padding: 16px; */
        margin-left: 17vw;
      }
      .english{
        width: 28vw;
        height: 28vw;
        /* padding: 16px; */
        margin-left: 53vw;
        margin-top: 16vw;
      }
      .spanish{
        width: 22vw;
        height:22vw;
        margin-left: 35vw;
        margin-top: 36vw;
      }

      #soldChart{
        width: 80vw;
        height: 90vw;
      }
      #soldChart::before{
        width: 80vw;
        height: 70vw;
      }
      .histogramLabel {
        font-size: 2.5vw;
      }

      .logiciel{
        margin-left: 45vw;
        margin-top: 20vw;
      }
      .logiciel::before{
        content: "LOGICIELS";
        position: absolute;
        display: flex;
        left: 8vw;
        font-size: 5vw;
        margin-top: 20vw;
      }
      .bas img {
        /* width: 10%; */
        height: 15vw;
        object-fit: cover;
        position: absolute;
        padding: 1vw;
        filter: grayscale(100%);
      }

      .contacts{
        /* display: inline; */
        flex-direction: column;
        align-items: start;
        height: 100vw;
        width: 100%;
        margin-top: 20vw;
        margin-bottom: 20vw;
        padding-top: 40vw;
      }
      .txt-contacts{
        font-size: 10vw;
      }
      .txt-based{
        font-size: 4vw;
      }
      .contacts-droite{
        width: 100%;
        margin-left: 15vw;
        margin-top: 8vw;
        /* padding-bottom: 50vw; */
      }
      .contacts-droite a{
        font-size: 4vw;
      }

      .contacts-droite a:after {
        width: 80%;
        top: 6vw;
        left : 1vw;
        height: 0.5vw;
      }
      .contacts-droite a:hover:after {
        width: 80%;
      }
      .backToTopButton{
        font-size: 4vw;
        margin-bottom: 3vw;
      }
    }


    @media (min-width: 501px){
      #nav{
        mix-blend-mode: difference;
        z-index: 3333350;
        transition: all .5s ease-in-out;
      }
      .background{
        background-color: rgb(255, 255, 255);
        mix-blend-mode:normal !important;
        /* z-index: 333335000000000000000000; */
        transition: all .5s ease-in-out;
        box-shadow: 0px 6px 15px 5px #0000002d;
      }
      .white-circle{
        display: none;
      }

    }