::-webkit-scrollbar {
  display: none;
}

body {
  overflow-x: hidden;
}

:root {
  --hauteurHeader: 25px;
}


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

.description_projet a {
  text-decoration: none;
}



h1 {
  font-size: 2.2vw;
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-weight: 400;
  font-style: normal;
}
p, .nom_projet h1 {
  font-size: 15px;
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
}
.nom_projet h1 {margin:0}


header {
  position:fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100vw;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-content: center;

  background-color: white;
}

header h1 a {
  color: black;
  font-size: 15px;
}

nav ul li {
  display: inline;
  margin-right: 20px;
}


#no-margin {
  margin-right: 0px;
}

nav a {
  font-size: 15px;
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;

  text-decoration: none;
  color: black;
}

header a:hover {
  color: gray;
}



#headerleft {
margin-left: var(--hauteurHeader);

display: flex;
justify-content: space-between;
align-items: center;
 }

#headerright {
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-right: var(--hauteurHeader);
}





#slogan {
  margin-top: calc(25px + var(--hauteurHeader));
  position: relative; 
  z-index: 2;
  width: 40%;
  padding-left: var(--hauteurHeader);
}

#infoperso {
  margin-top: calc(25px + var(--hauteurHeader));
  overflow-y: hidden;
  position: relative; 
  z-index: 2;
  width: 60%;
  padding-left: var(--hauteurHeader);
  padding-right: var(--hauteurHeader);
  height: calc((1.5 * 100vh) - var(--hauteurHeader));

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

h2 {
  font-size: 9vw;
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-weight: 400;
  font-style: normal;
}
#degage {
  position:relative;
  width: 100%;

}

.flex {
  display: flex;
}
.container_banderole {
  z-index: 88;
}
.banderole {
  display: flex;
 /* width: fit-content;*/
  margin-left:100vw
}

.scroll {
    position: fixed;
    top: calc(25px + var(--hauteurHeader));
    left: 0;
}

.container {
  position: relative;
  padding-right: var(--hauteurHeader);
}

.texte {
  padding-top: 7px;
  
  transition: ease-in-out 0.5s;
  
  display: flex;
  justify-content: space-between;
}

.banderole img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloc {
  position: relative;
  transition: ease-in-out 0.5s;
}

.px450 {
  height: 450px;
  width: 450px;
}
:hover.px450 {
  width: 750px;
}

.px500 {
  height: 680px;
  width: 500px; 
}
:hover.px500 {
  width: 800px;
}

.px580 {
  height: 600px;
  width: 580px; 
}
:hover.px580 {
  width: 880px;
}


.main_projet {
  margin-top: calc( 25px + var(--hauteurHeader) ) ;
  padding-left: var(--hauteurHeader);
  padding-right: var(--hauteurHeader);
  width: 100%;

}



.container_info_projet {
 padding-top: var(--hauteurHeader); 
 padding-bottom: var(--hauteurHeader);
 display: flex;
 width: 100%;

}

 .description_projet {
  width: 50%;
 }

 .nom_projet {
  width: 30%;
 }
 .image_projet  {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
 }

.full {
  width: 100%;
  height: auto;
 }
 .half  {
  width: 50%;
  height: auto;
 }
 .midhalf  {
  width: 70%;
  height: auto;
 }
 .quarter {
  width: 25%;
  height: auto;
 }

 

 .container_bouton {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: var(--hauteurHeader);
 }


.bouton  a {text-decoration: none; color: black; opacity: 100%;}

.bouton  a :hover {opacity: 50%;}


@media (max-width:700px){
  .description_projet {width: 60%;}

  .nom_projet {width: 40%;}

}
/* < 540PX */
@media (max-width: 540px) { 
  .container_info_projet {display: block;}
  
  .description_projet {width: 100%;}

  .nom_projet {width: auto;}

  .flex {display: block;}

  h1 {font-size: 20px;}

#slogan {
  margin-top: calc(25px + var(--hauteurHeader));
  position: relative; 
  z-index: 2;
  width: 100%;
  padding: 0 var(--hauteurHeader);
}

#infoperso {
  margin-top: var(--hauteurHeader);
  width: 100%;
  height: auto;
}

#degage {margin-top: var(--hauteurHeader);}

.scroll {
    position: relative;
    top: var(--hauteurHeader);
    left: 0;}
  
.banderole {
    display: block;
    margin-left:0}

.banderole img {
      width: 100%;
      height: auto;}

.header {padding-right: var(--hauteurHeader);}

header h1 a{font-size:12px ;}

nav a {font-size: 12px;}

nav ul li {margin-right: 10px;}


.bloc {
    position: relative;
    height: auto;
    width: 100%;  
}


.container {
    margin-left: var(--hauteurHeader);
    padding-bottom: var(--hauteurHeader);
}




}


/* page projet */