body,html {
    margin: 0;
    padding: 0;
    font-family: Sora;
  }

.nav_bar{
  background-color: white;
  width: 100%;
  display: flex;
   flex-wrap:   wrap; 
  margin: 0;
  padding: 0;
  /* box-shadow: 0px 0px 50px rgb(46, 46, 46); */
  z-index: inherit;
}

.nav_bar_items{
  background-color: white;
  flex:1 1 40%; 
  text-align: center;
  justify-content: space-between;
  align-items: center;
  padding: 5vh 0 5.5vh 0;
  list-style-type: none;
  color: #ffffff;
  font-weight: bold;
  font-size: 25px;  
  margin: 0;
  
}

.li{
    text-decoration: none;
}

.logo{
  position: absolute;
  width: 50px;
  top: 1.8vh;
  left:calc(50% - 25px);
  padding: 0;
}

a.nounderline:link{ 
 text-decoration:none;
} 

.texte_landing_page{
  position: absolute;
  top: 37vh;
  left:calc(50% - 200px);
  padding: 0;
  font-weight: bold;
  font-size: 40px;
  color: #ffffff;
  text-align: center;
  z-index: 10;
  text-decoration: none;
}

.texte_bienvenue{
  width: 400px;
  text-align: center;
}

.bouton_projet{
  width: 70%;
  color: hotpink;
  text-align: center;
  margin: 30px auto;
  text-decoration: none;
  border: 5px solid hotpink;
  border-radius: 18px;
  padding: 5px;
}


/* Conteneur pour la galerie */
.conteneur-galerie {
  width: 100%;
  height: 86vh;
  background-color: #ff0dd7;
  overflow: hidden;
  position:relative;
}
  
/* Cacher les diapos par défaut */
.diapo{
  display: none;
  height: auto;
}
  
.imagediapo{
  text-align: center;
  height: auto;

}

/* Boutons Précédent et Suivant */
.precedent, .suivant {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 18px;
  color: hotpink;
  font-weight: bold;
  font-size: 40px;
  transition: 0.2s ease;
  border-radius: 10px 10px 10px 10px;
  user-select: none;
}
  
/* Boutons Suivant à droite */
.suivant {
  right: 0;
  border-radius: 10px 10px 10px 10px;
}
  
/* Au survol de la souris (hover), arrière-plan noir avec opacité à 80% */
.precedent:hover, .suivant:hover {
  background-color:#ff0dd7;
}
  
/* Légende */
.legende {
  color: #f2f2f2;
  font-size: 30px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  display: none;
}
  
/* Numéro (1/3 etc) */
.numero {
  color: #f2f2f2;
  font-size: 30px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  display: none;
}
  
/* Les points */
.point {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;                  /*  C'est ça qui fait un cercle */
  display: inline-block;
  transition: background-color 0.6s ease;
  display: none;
}
  
.active, .point:hover {
  background-color: #ff0dd7;
}
  
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}
  
@-webkit-keyframes fade {
  from {opacity: 1} 
  to {opacity: .7}
}
  
@keyframes fade {
  from {opacity: .7} 
  to {opacity: 1}
}

.les_points{
  text-align:center;
  display:none;
}

.conteneur-projet{
  background-color: hotpink;
  width: 100%;
  height: auto;
  margin: 0;
}

.petit-conteneur-projet{
  background-color: white;
  height: auto;
  margin: 0 10% 0 10%;
  padding: 80px 50px 50px 50px;
}

.titre-projet{
  color: rgb(46, 46, 46);
  text-align: center;
  margin: 0 0 5vh 0;
  font-weight: bold;
  font-size: 10vw;
  /* min-width: 5vw; */
}

.projets{
  background-color: white;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding: 20px 5px 5px 5px;
  justify-content: center;
}

.image-projet1, .image-projet2, .image-projet3, .image-projet4, .image-projet5, .image-projet6, .image-projet7, .image-projet8, .image-projet9, .image-projet10, .image-projet11, .image-projet12, .image-projet13, .image-projet14, .image-projet15{ 
  width: 300px;
  height: 300px;
  margin: 10px;
  border-radius: 5%;
}



.image-projet1 img, .image-projet2 img, .image-projet3 img, .image-projet4 img, .image-projet5 img, .image-projet6 img, .image-projet7 img, .image-projet8 img, .image-projet9 img, .image-projet10 img, .image-projet11 img, .image-projet12 img, .image-projet13 img, .image-projet14 img, .image-projet15 img{
  width: 100%;
}

.conteneur-contact{
  width: 100%;
  height: 115vh;
  background-color: rgb(34, 34, 34);
  padding: 14vh 0 0 0;  
}

.bloc-texte{
  width: 100%;
  color: #ffffff;
  text-align: center;
  z-index: 10;
  text-decoration: none;
}


.titre-contact{
  margin: 0 0 13vh 0;
  font-weight: bold;
  font-size: 10vw;
}

.texte-nom{
  font-size: 4vw;
  margin: 0 0 6vh 0;
}

.texte-info{
  font-size: 3vw;
}

.texte-cv{
  font-size: 3vw;
  margin: 10vh 0 6vh 0;
  font-weight: bold;
}



/* Sur très petit écran, texte plus petit */
@media screen and (max-width: 900px) {
  .precedent, .suivant, .text {font-size: 11px;}
  .logo{
    position: relative;
    width: 50px;
    top:0 ;
    left:calc(50% - 25px);
    padding: 0;
  }
}

.bloc-retour{
  width: 100%;
  text-align: center;
  z-index: 10;
  text-decoration: none;
  font-size: 18px;
  margin: 25vh 0 20vh 0;
}

.retour-maison{
  /* margin-bottom: 1vh; */
  font-size: 5vh;
}