body{
  font-family: Sora;
  margin: 0px;
}

.nav_bar{
 width: 100%;
 display: flex;
  flex-wrap: wrap; 
 margin: 0;
 padding: 0;
 box-shadow: 0px 0px 50px rgb(46, 46, 46);
}

.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;
} 

.partie1_intro{
 width: 100%;
 height: auto;
 display: flex;
 flex-wrap: wrap;
 text-align: center;
 color: rgb(46, 46, 46);
 overflow: hidden;
}

.texte_p1{
 width: 50vw;
 height: auto;
 margin-left: 3vw;
 margin-top: 10vh;
 margin-bottom: 10vh;
}

.titre{
 font-size: 4.5vw;
 font-weight: bolder;
 padding: 2vw;
}

.description{
 padding: 1vw;
}

.etat_projet{
 padding-top: 2vw;
 padding-left: 2vw;
 font-weight: bold;
}

.date_projet{
 padding-left: 2vw;
 font-weight: bold;
}

.image_p1{
 width: 40vw;
 height: auto;
 margin-left: 20px;
 margin-right: 20px;
 margin-top: 10vh;
 margin-bottom: 5vh;
}


/* Conteneur pour la galerie */
.conteneur-galerie {
 width: 100%;
 height: auto;
 background-color: #ff0dd7;
 overflow: hidden;
 box-shadow: 0px 0px 50px rgb(46, 46, 46);
 z-index: 1000;
}
 
/* Cacher les diapos par défaut */
.diapo {
 display: none;
}
 
.imagediapo{
 text-align: center;
 height: 100%;
}

/* Boutons Précédent et Suivant */
.precedent, .suivant {
 cursor: pointer;
 position: absolute;
 top: 150%;
 width: auto;
 margin-top: -22px;
 padding: 18px;
 color: white;
 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:#ff7be9;
}
 
/* 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;
 z-index: 0;
}

.petit-conteneur-projet{
 background-color: white;
 height: auto;
 margin: 0 10% 0 10%;
 padding: 80px 50px 50px 50px;
 box-shadow: 0px 0px 50px rgb(46, 46, 46);
 z-index: 1;
}

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

.image-galerie{
 height: 55vh;
 width: auto;
 background-color: hotpink;
 margin: 10px;
}

/* .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; */
 /* background-color: hotpink; */
 /* margin: 10px; */
/* } */



/* .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-retour{
 width: 100%;
 height: 30vh;
 background-color: rgb(34, 34, 34);
 padding: 14vh 0 0 0;  
}

.bloc-texte{
 width: 100%;
 color: rgb(46, 46, 46);
 text-align: center;
 z-index: 10;
 text-decoration: none;
 font-size: 18px;
 margin: 10vh 0 0 0;
}

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



/* 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;
 }

 .nav_bar{
  width: 100%;
  display: flex;
   flex-wrap: wrap; 
  margin: 0;
  padding: 0;
  background-color: hotpink;
  box-shadow: 0px 0px 0px rgb(46, 46, 46);
 }


 .texte_p1{
   width: auto;
   height: auto;
   margin-left: 8vw;
   margin-right: 8vw;
   margin-top: 10vh;
   margin-bottom: 10vh;
}
 .partie1_intro{
 width: 100%;
 margin: 0;
 padding: 0;
  display: block;
}

.image_p1{
 width: auto;
}
.image_p1 img{
width: 100%;
}




.conteneur-projet{
background-color: hotpink;
width: 100%;
height: auto;
margin: 0;
z-index: 0;
overflow-x: hidden;
}

.petit-conteneur-projet{
background-color: white;
height: auto;
margin: 0 10% 0 10%;
padding: 0;
box-shadow: 0px 0px 50px rgb(46, 46, 46);
z-index: 1;
}

.projets{
background-color: white;
height: auto;
display: block;
}

.image-galerie{
width: auto;
height: auto;
margin: 10px;
line-height: 0;

}
.image-galerie img{
width: 100%;
}
}