html {
  overflow-x: hidden;
}

body {
    font-family: 'Titre1', sans-serif;
    margin: 0;
    background:#F9DEC9;
   
  
}

@font-face {
    font-family: 'Titre1';
    src: url('Biko_Regular.otf');
    font-display: swap; /* Ajoutez cette ligne */
  }
  
.navbar{
    margin-top: 10vh;
    border-radius: 18px;
  height: 8vh;
  position: fixed;
  z-index: 9999;
  -webkit-box-shadow: 0px 19px 50px -2px #000000; 
  box-shadow: 0px 19px 50px -2px #000000c5;
}

.qui {
  margin-top: 4rem;
}
.contactlink{

    margin-left: 4em;
    margin-right:0.4em;
    background-color:#3A405A;
    border-radius: 15px;
    color: white;
    padding: 15px 15px;

}
.contactlink:hover {
  scale: 1.1;
  color:white;

}
.header {
    position: relative;
    height: 100vh;
}
.circle {
    position: absolute;
    border-radius: 50%;

}

/* Styles pour les couleurs des cercles */
.circle-1 {
    width: 42%; /*Ajustez la taille des cercles en pourcentage */
    padding-top: 42%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
    background-color: #3a405ade;
    position: absolute;
    left: -15%; /* Ajustez la position en pourcentage */
    top: -15%; /* Ajustez la position en pourcentage */
}

.circle-2 {
    width: 15%; /* Ajustez la taille des cercles en pourcentage */
    padding-top: 15%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
    background-color: #3a405a69;
    position: absolute;
    left: 42%; /* Ajustez la position en pourcentage */
    top: 35%; /* Ajustez la position en pourcentage */
}

.circle-3 {
    width: 20%; /* Ajustez la taille des cercles en pourcentage */
    padding-top: 20%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
    background-color: #3a405a90;
    position: absolute;
    left: 75%; /* Ajustez la position en pourcentage */
    top: 47%; /* Ajustez la position en pourcentage */
}
.circle-4 {
    width: 23%; /* Ajustez la taille des cercles en pourcentage */
    padding-top: 23%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
    background-color: #3a405a69;
    position: absolute;
    left: 73.5%; /* Ajustez la position en pourcentage */
    top: 44.2%; /* Ajustez la position en pourcentage */
}

  

  
.circle-5 {
  width: 10%; /* Ajustez la taille des cercles en pourcentage */
  padding-top: 10%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
  background-color: #3a405a5c;
  position: absolute;
  top: 13%;
  left: 13%; 
}

.circle-6 {
  width: 19%; /* Ajustez la taille des cercles en pourcentage */
  padding-top: 19%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
  background-color: #3a405a5c;
  position: absolute;
  top:-3vh;
  right:6%;

}
.circle-7 {
  width: 17%;
  padding-top: 17%;
  background-color: #3a405a5c;
  position: absolute;
  top:25%;
  right:14%;

}

.circle-8 {
  width: 25%;
  padding-top: 25%;
  background-color: #3a405a5c;
  position: absolute;
  top:-16vh;
right:0;
z-index: -1;

}

.circle-9 {
  width: 21%;
  padding-top: 21%;
  background-color: #3a405a5c;
  position: absolute;
  top:-12vh;
  right:2%;
  z-index: -1;

}

.circle-10 {
  width: 10%;
  padding-top: 10%;
  background-color: #3a405a5c;
  position: absolute;
  bottom:6%;
  left:6%;
  z-index: -1;

}
.circle-11 {
 
  padding-top: 17%;
  background-color: #3a405a5c;
  position: absolute;
  width: 17%;
  bottom:13%;
left:-5%;
z-index: -1;

}




.titre6 {
  color: #3A405A;
  font-family: 'Titre1', sans-serif;
  font-size: 5em;
  font-weight: bold;

  letter-spacing: 0.1em; /* Ajustez la valeur pour l'espace entre les lettres */
}

.titre7 {
  letter-spacing: .15em;
  text-shadow: 1px 1px 0 rgba(118, 118, 118, 0.5), 2px 2px 1px rgba(115, 114, 114, 0.5), 4px 4px 2px rgba(118, 116, 116, 0.5), 6px 6px 2px rgba(120, 119, 119, 0.5), 8px 8px 2px rgba(123, 122, 122, 0.5), 10px 10px 2px rgba(127, 125, 125, 0.5), 12px 12px 2px rgba(130, 129, 129, 0.5), 14px 14px 2px rgba(134, 133, 133, 0.5);
    color: #3A405A;
  font-family: 'Titre1', sans-serif;
  font-size: 5em;
  font-weight: bolder;
transform: rotate(-2deg);
  letter-spacing: 0.1em; /* Ajustez la valeur pour l'espace entre les lettres */
}
.titre {
  color: #3A405A;
  font-family: 'Titre1', sans-serif;
  font-size: 5em;
  font-weight: bolder;
  position: absolute;
  top: 35%;
  right: 15%;
  letter-spacing: 0.1em; /* Ajustez la valeur pour l'espace entre les lettres */
}
.titre2 {
    color: #3A405A;
    font-family: 'Titre1', sans-serif;
    font-size: 3em;
    position: absolute;
    top: 40%;
    right: 28%;
}
.titre3 {
    color: #3A405A;
    font-family: 'Titre1', sans-serif;
    font-size: 3em;
    font-weight: bolder;
}


.bureau {
    height:100vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image:url(img/ecran.webp);
    -webkit-clip-path: polygon(10% 90%, 23% 13%, 100% 3%, 100% 97%);
clip-path: polygon(10% 90%, 23% 13%, 100% 3%, 100% 97%);
 
}

.about {
    background-color: white;
    overflow-x: hidden;
}

article {
    width:70%;
}

#drawingGroup2 path {
  stroke: #3A405A;
  stroke-width: 3;
  fill: transparent; /* Remplissage initial transparent */
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  transform-origin: center;
 
  animation: drawPath 4s ease-in-out forwards, fillPath 6s ease-in-out 4s forwards;
}

@keyframes drawPath {
  to {
   
    stroke-dashoffset: 0;
  }
}

@keyframes fillPath {
  0% {
    fill: transparent; /* Remplissage initial transparent */
  }
  100% {
    fill: #3A405A; /* Remplir le SVG avec la couleur souhaitée */
  }
}


  ::-webkit-scrollbar {
    width: 0; /* Largeur de la barre de défilement, ajustez selon vos besoins */
  }
  
  ::-webkit-scrollbar-track {
    background: transparent; /* Couleur de fond de la piste de défilement */
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: transparent; /* Couleur du "thumb" de la barre de défilement */
  }

  .projet {
    background-color: #3A405A;
    border-radius: 30px;

  }

  .language {

    color: orange;
  }

  .carousel-control-next-icon{
    border: 6px solid #3A405A;
   margin-top: 10vh;
    margin-left: 6vw;
    height:5em;
    width:5em;
    background-color: rgb(255, 255, 255);
    border-radius: 50px;
    background-image: url('img/droite.png');
    background-size: 60% 60%; /* Ajustez la taille de l'image si nécessaire */

  }
  .carousel-control-next, .carousel-control-prev {
    opacity: 1;
}

.carousel-control-next:hover, .carousel-control-prev:hover {
    opacity: 1;
}

.carousel-control-next:active, .carousel-control-prev:active,
.carousel-control-next:focus, .carousel-control-prev:focus {
    opacity: 1;
}
  .carousel-control-prev-icon {
    border: 6px solid #3A405A;

    margin-right: 6vw;
    margin-top: 10vh;
    height:5em;
    width:5em;
    background-color: rgb(255, 255, 255);
    border-radius: 50px;
    background-image: url('img/gauche.png');
    background-size: 60% 60%; /* Ajustez la taille de l'image si nécessaire */
  
  }

  a {
    text-decoration: none;
    color: white;
  }

  .btnProjet {
   
    border-radius: 15px;

  }
  .btnProjet:hover {
    scale: 1.1;
 
  }
  .btnProjet>a {
    
   color:#3A405A;
  }


  .titre4 {
    background-color: white;
    color: #3A405A;
    border-radius: 15px;
    width:30%;
    font-size: 3em;
    font-weight: bolder;
    padding: 10px 0 10px 0;
  }

  .flag-container {
    position: absolute;
    top: 2%;
    right: 3%;
    display: flex;
    align-items: center;
    z-index: 99;
}

.flag {
    margin-left: 10px;
    border:3px solid #ffffff;
    border-radius: 500px;
    cursor: pointer;
}




.rec1 {
position: absolute;
z-index: -1;
bottom: 0;
width: 100%;

}

.rec2 {
position: relative;
z-index: -22;
bottom: 0;
width: 95%;

}
.techno {
 
  position: relative;
 
}
.tech {
  position: absolute;
  bottom: 0;
}

.cv {

  height:100vh;
  position: relative;
}


/* Ajoute une bordure grise de 1 pixel à tous les champs input et textarea */
.form-control {
  border: 3px solid #3A405A;
  border-radius: 15px;

}

input {
  height:6vh;
}

label {
  color:#3A405A;
}

.send {
  background-color: #3A405A;
  color: white;
  padding: 15px 20px 15px 20px;
  font-size: 1.5em;
  border-radius: 18px;
}
.send:hover {
  scale: 1.1;
  background-color: #3A405A;
  color: white;
}
h4 {
  color: #3A405A;
}

.contact {
  position: relative;
 
}


.foot {
background-color: #3A405A;


}

.copyright {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #ffffff;
}

.rgpd {
 

  color: white;
}

.politique {


  color: white;
}

/* This only changes this particular animation duration and makes it infinite */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
  animation-iteration-count: infinite;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
/* Masquer visuellement les indicateurs du carousel */
.carousel-indicators {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 576px) {
  .photo {
    width:60%;
    position: absolute;
    bottom: -10%;
    left:0;
    z-index: 2;
}
.photo2 {
  width:60%;
  position: absolute;
  bottom: -9%;
  left:-0.5%;
  z-index: 1;
}

.tech {
  width:50%;
}




.pdf {
  width: 25%;
}
.titre5 {
  color: #F9DEC9;
  font-family: 'Titre1', sans-serif;
  font-size: 5em;
  font-weight: bolder;
  position: absolute;
  margin-top: 3rem;

}

.mon_logo {

  width: 20%;
}

}

@media (max-width: 576px) {



  .titre,.titre2,.titre3,.titre4,.titre5,.titre6,.titre7,.titre8,.titre9 {
  font-size: 2em; 
  }

.bureau {
  height:50vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image:url(img/ecran.jpg);
  -webkit-clip-path: polygon(0% 100%, 0% 34%, 100% 0%, 100% 100%);
  clip-path: polygon(0% 100%, 0% 34%, 100% 0%, 100% 100%);

}

.circle-1 {
  width: 70%; /*Ajustez la taille des cercles en pourcentage */
  padding-top: 70%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
  background-color: #3a405ade;
  position: absolute;
  left: -10%; /* Ajustez la position en pourcentage */
  top: -10%; /* Ajustez la position en pourcentage */
}

.circle-2 {
  width: 25%; /* Ajustez la taille des cercles en pourcentage */
  padding-top: 25%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
  background-color: #3a405a69;
  position: absolute;
  left: 70%; /* Ajustez la position en pourcentage */
  top: 35%; /* Ajustez la position en pourcentage */
}

.circle-3 {
  width: 55%; /* Ajustez la taille des cercles en pourcentage */
  padding-top: 55%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
  background-color: #3a405a90;
  position: absolute;
  left: auto;
  right: auto;
  top: 65%;
  margin: 0 auto;
}
.circle-4 {
  width: 60%;
  padding-top: 60%;
  background-color: #3a405a69;
  position: absolute;
  left: auto;
  right: auto;
  top: 63.5%;
  margin: 0 auto;
}

.header {
  position: relative;
  height: 80vh;
}
.photo {
  width:98%;
  position: absolute;
  bottom: -6%;
  left:2%;
  z-index: 2;
}
.photo2 {
width:98%;
position: absolute;
bottom: -5%;
left:1%;
z-index: 1;
}

.titre4 {

  width:80%;
}
.projet {

  width: 95%;
}

.rec1 {

  height:54vh;
}
.rec2 {

  height:52vh;
}
.tech {
  width:40vh;
  margin-left: 3%;
}

.titre5 {

  margin-top:10vh;
}

.frame {
  width: 90%;
  margin-top: 5vh;

}

.pdf {

  width: 50%;
}
.titre5 {
  color: #F9DEC9;
  font-family: 'Titre1', sans-serif;
 
  font-weight: bolder;
  position: absolute;

}

.about {
  padding: none;
}

.rond4 {
  position: absolute;
  z-index: -1;
  width: 35%;
  top:-12vh;
right:10%;
}

.rond5 {
  position: absolute;
  z-index: -1;
  width: 21%;
  top:-15vh;
left:10%;
}
.rond6 { 
  position: absolute;
  z-index: -1;
  width: 25%;
  bottom:5%;
left:75%;
}
.rond7 {

  position: absolute;
  z-index: -1;
  width: 35%;
  bottom:25%;
left:-10%;
}

.send {
margin: auto;
}

.mon_logo {

  width: 80%;
}


}
@media (min-width: 1000px) {
  .row.center-vertically {
    display: flex;
    align-items: center;
    
  }
  .acces {
    margin-top: 10vh;
    padding-right: 6vw;
  }
  .frame {
    width: 100%;
    height: auto;
    
  }
}
@media (max-width: 1000px) {
  .logo {
    display: none;
  }
.navbar {
  height:auto;
  padding:0;
 left: 4vw;
  top:5vh;
  margin: 0 auto; /* Ajoutez cette ligne pour centrer horizontalement */

 
 
 }
   .frame {
    width: 90%;
    margin-top: 5vh;
  
  }

 .contactlink {
   margin: 0 0 20px 0;
 }
 .navbar-collapse {
  width: 60vw;
  left: -4vw;
}

 
 .navbar-toggler {
   background-color: #ffffff;

 }
 .navbar.expanded {
  width: 100%;
  left: 0;
}
 .acces {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }

  
}
/* CSS pour les écrans entre 576px et 999px de largeur */
@media (min-width: 576px) and (max-width: 1040px) {
  .send {
    margin: auto;
    }
  .tech {
    width:40vh;
  }
  

  .photo {
    width: 95%;
    position: absolute;
    bottom: -6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  .photo2 {
    width: 95%;
    position: absolute;
    bottom: -5%;
    left: 49%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .bureau {
    -webkit-clip-path: polygon(0% 100%, 0% 34%, 100% 0%, 100% 100%);
    clip-path: polygon(0% 100%, 0% 34%, 100% 0%, 100% 100%);
   
  }
  .titre {
    color: #3A405A;
    font-family: 'Titre1', sans-serif;
    font-size: 3.4em;
    font-weight: bolder;
    position: absolute;
    top: 32%;

    letter-spacing: 0.1em; /* Ajustez la valeur pour l'espace entre les lettres */
  }
  .titre2 {
      color: #3A405A;
      font-family: 'Titre1', sans-serif;
      font-size: 3em;
      position: absolute;
      top: 37%;
 
  }
  .circle-2 {
    width: 20%; /* Ajustez la taille des cercles en pourcentage */
    padding-top: 20%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
    background-color: #3a405a90;
    position: absolute;
    left: 65%; /* Ajustez la position en pourcentage */
    top: 17%; /* Ajustez la position en pourcentage */
}
  .circle-3 {
    width: 25%; /* Ajustez la taille des cercles en pourcentage */
    padding-top: 25%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
    background-color: #3a405acd;
    position: absolute;
    left: 72%; /* Ajustez la position en pourcentage */
    top: 65%; /* Ajustez la position en pourcentage */
}
.circle-4 {
  width: 25%; /* Ajustez la taille des cercles en pourcentage */
  padding-top: 25%; /* Utilisez un padding pour définir la hauteur en fonction de la largeur */
  background-color: #3a405a90;
  position: absolute;
  left: 15%; /* Ajustez la position en pourcentage */
  top: 40%; /* Ajustez la position en pourcentage */
}
.rec1 {

  height:56vh;
}
.rec2 {

  height:54vh;
}
.titre5 {
  margin-top: 10vh;
  font-size: 3em;
}
.titre4 {

  width:60%;

}
.mon_logo {

  width: 50%;
}
}


.mention>p>a {
  color: #3A405A;
}