/*# sourceMappingURL=main.css.map*/
@font-face{
    font-family: impact;
    src: url(../font/impact.ttf);
}

@font-face {
    font-family: abel;
    src: url(../font/Abel.ttf);
}

body{
overflow-x: hidden;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

img{
    width: 100%;
}

button{
  font-family: Abel;
  font-size: 1rem;
}

video{
  width: 100%;
}

.page_preloader{
  background-color: #0B1020;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header_desktop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5rem;
    position: fixed;
    width: 100%;
    z-index: 100;
    backdrop-filter: blur(20px);
}

.header_burger{
    display: none;
}

.logo{
    width: 100px;
}

.menu_list {
    display: flex;
    font-size: 1.3rem;
    align-items: center;
}

.header_list {
    list-style: none;
    font-family: 'Oswald', sans-serif;
    width: 10rem;
}

/*help site : https://www.30secondsofcode.org/css/s/hover-underline-animation*/
.header_list a {
    text-decoration: none;
    color: #fff;
    display: inline-block;
    position: relative;
    letter-spacing: 0.3rem;
    width: 9rem;
    text-align: center;
    padding-bottom: 0.5rem;
}

.header_list a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #F6EAB2;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.header_list a:hover {
    color: #F6EAB2;
}

.header_list a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.button_music{
    background-color: transparent;
    border: none;
    margin: 0 4rem;
    cursor: pointer;
}

.button_music:active + embed{ 
    display: block; 
}

embed{ 
    display: none; 
}

.webgl {
    position: absolute;
    top: 0;
    left: 0;
    outline: none;
    mix-blend-mode: exclusion;
    z-index: 1;
    width: 100%;
}

.banner-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    position: relative;
}

.banner-container h1 {
    font-family: 'impact';
    font-size: 8rem;
    letter-spacing: 8px;
}

.banner-container p {
    font-family: 'abel';
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 5rem;
    margin: 1.5rem 0;
}

.contact_button{
    position: absolute;
    font-family: abel;
    color: #fff;
    background-color: transparent;
    border-style: solid 0.5px;
    border-color: #fff;
    border-radius: 45px;
    height: 45px;
    width: 163px;
    margin-top: 600px;
    transition: .2s;
    cursor: pointer;

}

.contact_button:hover{
  background-color: #fff;
  color: #000;
  transition: .2s;
}

.body_content{
    background-color: #0B1020;
}

.container{
    width: 70vw;
    margin: 0 auto;
}

/* .content{
    width: 70vw;
    margin: 0 auto;
} */

h2{
    color: #F6EAB2;
    font-family: Impact;
    font-size: 2.5rem;
}

h3{
    color: #fff;
    font-family: abel;
    font-size: 1.2rem;
    text-align: center;
    line-height: 2.5rem;
    margin: 2rem 0 1rem 0;
}

h4{
    color: #fff;
    font-family: impact;
    font-size: 2rem;
    line-height: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.button_inter{
    background-color: #F6EAB2;
    border: none;
    height: 45px;
    width: 163px;
    border-radius: 15px;
    margin-top: 3rem;
}

p, li{
    color: #fff;
    font-family: abel;
    line-height: 1.5rem;
}

.underline1{
    height: 0.05rem;
    background-color: #F6EAB2;
    width: 30%;
    margin-top: 1rem;
}

.underline2{
    height: 0.05rem;
    background-color: #F6EAB2;
    width: 40%;
    margin-top: 1rem;
}

.underline3{
    height: 0.05rem;
    background-color: #F6EAB2;
    width: 20%;
    margin-top: 1rem;
}

.underline4{
    height: 0.05rem;
    background-color: #F6EAB2;
    width: 35%;
    margin-top: 1rem;
}

/*section 1*/

.content_sect1{
    display: flex;
    height: 100vh;
    align-items: center;
}

.section_presentation{
    display: grid;
    grid-template: 4rem 1fr auto/ 1fr 2fr;
    column-gap: 2rem;
    row-gap: 16px;
    /* width: 83vw; */
    /* margin-right: 0; */
    height: 80vh;
}

.title_li_pres{
    grid-row: 1;
    grid-column: 2;
}

.img_li_pres{
    grid-row: 1/4;
    grid-column: 1;
    /* margin-top: 3vw; */
    width: 85%;
    /* display: flex; */
}

.img_pres2{
    display: none;
}

.bg_pres{
    grid-row: 2/3;
    grid-column: 2;
    font-family: Impact;
}

.bg_word{
    font-size: 10rem;
    color: rgb(255 255 255 / 10%);
    line-height: 0.8;
}

.bg_word:first-child{
    margin-left: 5rem;
    font-family: Impact;
}

.bg_word:nth-child(2){
    margin-left: 10rem;
    font-family: Impact;
}

.bg_word:nth-child(3){
    margin-left: 15rem;
    font-family: Impact;
}

.para_pres{
    grid-row: 3;
    grid-column: 2;
    width: 50%;
    align-self: flex-end;
}

.line_end_pres{
    grid-row: 4;
    grid-column: 1/3;
    width: 70%;
    margin-top: 2%;
}

/*section 2*/
.content_sect2{
    display: flex;
    height: 100vh;
    align-items: center;
    /* justify-content: flex-start; */
}

.serv_content{
    display: flex;
    column-gap: 2rem;
    margin-bottom: 10rem;
}

.serv_content p{
  text-align: center;
 }

/*section 3*/
.title_li_proj{
    display: flex;
    flex-direction: column;
}

.proj_content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    z-index: 50;
}

.list_proj{
    display: flex;
    margin: 3rem 1rem;
}

.list_proj li{
    padding: 0 2rem;
    justify-content: space-between;
}

.filter_link{
    text-decoration: none;
    color: #fff;
    position: relative;
}

.filter_link:hover{
    color: #F6EAB2;
}

/* .filter_link:visited{
    color: rgb(255, 0, 179);
} */

.list_proj_filter{
  width: 12rem;
  text-align: center;
}

.filter_link{
  width: 12rem;
  display: inline-block;
}

.filter_link_active:after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(1);
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: #F6EAB2;
  transform-origin: bottom right;
}

.filter_link_active:after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(1);
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: #F6EAB2;
  transform-origin: bottom right;
}


.filter_proj{
    display: flex;
    /* flex-direction: row; */
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.5rem;
    width: 80vw;
}

.art_proj{
    width: 30vw;
    margin-top:1.5rem;
    position: relative;
    cursor: pointer;
}

.img_pro{
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.proj_hover{
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    width:60%;
}

.art_proj:hover .img_pro{
    filter: blur(5px) brightness(0.5);
}

.art_proj:hover .proj_hover {
    opacity: 1;
}

.proj_text_para{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.proj_text p{
    color: #0B1020;
    padding: 0.5rem 1rem;
    margin: 1.5rem;
    border-radius: 20px;
    background-color: #F6EAB2;
}


/*Section 4*/
.content_sect4{
    height: 100vh;
    display: flex;
    align-items: center;
    /* justify-content: center; */
}

.section_formulaire{
    width: 80vw;
}

.form{
    width: 70%;
}

.form_coord{
    display: flex;
    column-gap: 3.5rem;
    align-items: center;
}

.form_P1, .form_P2{
    display: flex;
    justify-content: space-between;
    column-gap: 1rem;
}

/* .l1, .l4{
    width: 59%;
}

.l2, .l3{
    width: 39%;
} */


.label{
    width: 100%;
    color: #fff;
    font-family: abel;
    margin: 2.5rem 0;
    font-size: 1rem;
}

input, textarea{
    width: 100%;
    background-color: #0B1020;
    border-style: none none solid none;
    border-color: #F6EAB2;
    color: rgb(204, 204, 204);
    font-family: abel;
    padding: 1.5rem;
    font-size: 0.8rem;
}

input:focus, textarea:focus{
    background-color: transparent;
    outline-color:none;
    outline-style: none;
}

.button{
    display: flex;
    justify-content: flex-end;
}

.button_form{
    margin-top: 1rem;
}


.coord{
    color: #fff;
    font-family: abel;
    width: 30%;
}

.coord p{
    margin: 1.5rem 0;
}

.network_list{
    display: flex;
    width: 80%;
    margin-top: 3rem;
    justify-content: space-between;
}

.network_list img{
    width: 60px;
}


/*footer*/
footer{
    background-color: #0B1020;
    font-family: abel;
    font-size: 0.8rem;
    color: #fff9e0;
    text-align: center;
    width: 100vw;
    padding: 1rem 0;
    letter-spacing: 0.15rem;
}


/*page projet général*/
.page_project_content{
  background-color: #0B1020;
  width: 100vw;
}

.Project_container{
  width: 80vw;
  margin: 0 auto;
}

.project_header{
  padding: 3rem 0;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 100;
  width: 80vw;
}

.close_popup{
  width: 40px;
  height: 40px;
  display: block;
  background-image: url(../img/close.svg);
  background-size: cover;
}

.close_popup:hover{
  background-image: url(../img/close_hover.svg);
}

.project_section{
  height: 100vh;
  width: 80vw;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h5{
  font-family: impact;
  color: rgba(255, 255, 255, 0.10);
  font-size: 7rem;
  position: absolute;
  top: 3rem;
  left: -20vw;
  width: 50vw;
}

.SectProj_bg{
  position: absolute;
  top: 5rem;
}

.ProjSectTop{
  padding-top: 8rem;
}

.list_ProjStyle{
  display: flex;
  column-gap: 16px;
}

.list_ProjStyle p{
  color: #F6EAB2;
}

/*projet grille paire*/
.GridSect_proj_img_L img{
  height: 600px;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.GridSect_proj_img_R img{
  height: 600px;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.GridSect_project{
  display: grid;
  z-index: 5;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 600px;
  column-gap: 1rem;
}

.GridSect_proj_img_L{
  grid-column: 1/4;
}

.GridSect_proj_para_R{
  grid-column: 4/5;
  display: flex;
  row-gap: 16px;
  align-items: center;
  object-fit: cover;
}

.GridSect_proj_img_R{
  grid-column: 2/5;
}

.GridSect_proj_para_L{
  grid-column: 1;
  grid-row: 1/3;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  justify-content: center;
  object-fit: cover;
}


/*page grille impaire*/
.GridSect_proj_img_L_imp img{
  height: 80vh;
  /* width: 100%; */
  object-fit: cover;
  object-position: top;
}

.GridSect_proj_img_R_imp img{
  height: 80vh;
  /* width: 100%; */
  object-fit: cover;
  object-position: top;
}

.GridSect_project_imp{
  display: grid;
  height: 80vh;
  z-index: 5;
  grid-template-columns: repeat(8, 1fr);
  /* grid-template-rows: 600px; */
  column-gap: 1rem;
}

.GridSect_proj_img_L_imp{
  grid-column: 1/3;
}

.GridSect_proj_para_R_imp{
  grid-column: 3/9;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 60vw;
  justify-content: center;
  /* object-fit: cover; */
}

.GridSect_proj_img_R_imp{
  grid-column: 7/9;
  grid-row: 1;
}

.GridSect_proj_para_L_imp{
  grid-column: 1/7;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  justify-content: center;
  /* object-fit: contain; */
}

.ImgProj_illustration_imp img{
  height:74vh;
  object-fit: contain;
}

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

.GridSect_proj_img_R_imp img, .GridSect_proj_img_R_imp video, .GridSect_proj_img_R img, .GridSect_proj_img_R img, .GridSect_proj_img_L_imp img, .GridSect_proj_img_L_imp video, .GridSect_proj_img_L img, .GridSect_proj_img_L video{
  border-radius: 25px;

}

/*orbita image position */
.img_position_orbita img{
  object-position: 0 -650px;
}

.img_position_clovis img{
  object-position: 0 -1380px;
}


/*Version tel*/

@media screen and (max-width: 360px){
.header_desktop{
    display: none;
}

/*header (inspiration site :https://alvarotrigo.com/blog/hamburger-menu-css/*/

.header_burger{
    display: flex;
    position: fixed;
    z-index: 100;
    backdrop-filter: blur(20px);
    height: 110px;
}

.burger {
    max-width: 400px;
    width: 100vh;
    height: 20px;
    margin: auto;
  }
  
  .navbar {
    width: 100%;
    /* box-shadow: 0 1px 4px rgba(41, 116, 190, 0.15); */
  }
  
  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .navbar .menu-items {
    display: flex;
  }
  
  .navbar .nav-container li {
    list-style: none;
  }
  
  .navbar .nav-container a {
    text-decoration: none;
    color: #F6EAB2;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 0.7rem;
  }
  
  .navbar .nav-container a:hover{
    font-weight: bolder;
  }
  
  .nav-container {
    display: block;
    position: relative;
    height: 60px;
  }
  
  .nav-container .checkbox {
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    top: 40px;
    left: 40px;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
  }
  
  .nav-container .hamburger-lines {
    display: block;
    height: 26px;
    width: 32px;
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .nav-container .hamburger-lines .line {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 10px;
    background: #F6EAB2;
  }
  
  .nav-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }
  
  .nav-container .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }
  
  .nav-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }
  
  .navbar .menu-items {
    padding-top: 180px;
    background-color: #0B1020;
    height: 100vh;
    width: 100%;
    transform: translate(-150%);
    display: flex;
    flex-direction: column;
    margin-left: -40px;
    padding-left: 50px;
    transition: transform 0.5s ease-in-out;
    text-align: center;
  }
  
  .navbar .menu-items li {
    margin-bottom: 2.5rem;
    font-size: 1.5rem;
    font-weight: 500;
  }
  
  .burger_logo {
    position: absolute;
    top: 5px;
    right: 35%;
    font-size: 1.2rem;
    color: #0e2431;
    transform: translateX(-50%);
    z-index: 500;
    width: 80px;
  }

  .burger_logo img{
      width: 100%;
  }

  .burger_music{
    position: absolute;
    top: 15px;
    right: 0;
    z-index: 500;
  }
  
  .nav-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
  }
  
  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
  }
  
  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }
  
  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
  }
  
  .nav-container input[type="checkbox"]:checked ~ .logo{
    display: none;
  }

  /* bannière */

  /* .banner-container{
    width: 100vw;
    display: flex;
    justify-content: center;
  } */
  .banner-container h1{
    font-size: 3.5rem;
    line-height: 4rem;
    text-align: center;
    letter-spacing: 2px;
  }

  .banner-container p{
      font-size: 1.5rem;
      letter-spacing: 8px;
  }

  .contact_button{
    position: absolute;
    font-family: abel;
    color: #fff;
    background-color: transparent;
    border-style: solid 0.5px;
    border-color: #fff;
    border-radius: 45px;
    margin-top: 400px;
  }

  /*general*/
  /* .body_content{
    width: 100vw;
    padding: 0 2px;
  } */

  .container{
      width: 85vw;
  }

  h2{
      font-size: 1.2rem;
  }

  h4{
      font-size: 2rem;
  }

  p, li{
      font-size: 1rem;
      line-height: 1.5rem;
  }

  .underline1{
      width: 70%;
      margin-top: 0.5rem;
  }

  .underline2{
    width: 50%;
    margin-top: 0.5rem;
  }

  .underline3{
    width: 45%;
    margin-top: 0.5rem;
  }

  .underline4{
    width: 50%;
    margin-top: 0.5rem;
  }


  .button{
    height: 54px;
    width: 180px;
    border-radius: 15px;
    margin-top: 1rem;
  }
  /*section 1*/

  .content_sect1{
    height: auto;
  }

  .section_presentation{
      display: flex;
      flex-direction: column;
      margin-top: 1rem;
      /* align-items: center; */
  }

  .content_sect1{
      height: auto;
  }

  .img_li_pres{
      display: flex;
      width: 100%;
      justify-content: center;
  }

  .img_pres1{
      display: none;
  }

  .img_pres2{
      display: flex;
      width: 45vw;
  }

  .bg_pres{
      display: none;
  }

  .para_pres{
      width: 100%;
      font-size: small;
      line-height: 0.8rem;
      text-align: justify;
  }

  .sect_pres_butt{
    display: flex;
    justify-content: center;
}

  /*section 2*/

  .content_sect2{
    margin-top: 16rem;
    height: auto;
  }

  .serv_content{
      flex-wrap: wrap;
      margin-bottom: 5rem;
  }


  /*section 3*/
  .list_proj{
      flex-direction: column;
      align-items: center;
      margin: 2rem 0.1rem;
  }

  .list_proj li{
    padding: 0.5rem 5rem;
    margin: 0.3rem 0;
  }

  .filter_proj{
      flex-direction: column;
      align-items: center;
      width: 85vw;
  }

  .art_proj{
      width: 100%;
  }

  .proj_text_para{
      width: 90%;
  }

  .proj_text p{
      margin: 0.5rem 0.2rem;
  }

  /*section 4*/
  .content_sect4{
      height: auto;
      margin-top: 3rem;
      flex-direction: column;
      align-items: flex-start;
  }

  .section_formulaire{
      width: 85vw;
  }

  .title_li_form{
      margin-bottom: 1rem;
  }

  .form{
      width: 100%;
  }

  .form_coord{
      flex-direction: column;
      align-items: flex-start;
  }

  .form_P1, .form_P2{
      flex-direction: column;
  }

  .label{
      margin: 1rem 0;
  }

  input, textarea{
      padding:1rem;
  }

  textarea{
      height: 150px;
  }

  .coord{
      margin-top: 2rem;
      width: 100%;
  }

  .coord p{
    margin: 1rem 0;
  }

  .network_list{
      width: 100%;
      margin: 2rem 0;
  }

  /*pages projets*/
  .SectProj_bg{
    display: none;
  }

  .SectProj_illustration_imp{
    height: 60rem;
  }

  .GridSect_project{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  }

  .GridSect_proj_img_R img, .GridSect_proj_img_L img{
  height: 204px;
  object-fit: cover;
  }

  .GridSect_proj_para_R, .GridSect_proj_para_L, .GridSect_proj_para_R_imp, .GridSect_proj_para_L_imp{
    width: 85vw;
    margin: 0 auto;
    margin-top: 1rem;
    column-gap: 1rem;
  }

  .list_ProjStyle{
    margin-top: 2rem;
    display: flex;
    column-gap: 1rem;
  }

  .GridSect_project_imp{
    display: flex;
    flex-direction: column;
    width: 100vw;
    align-items: center;
    }

  .GridSect_proj_img_R_imp img, .GridSect_proj_img_L_imp img{
  width: 85vw;
  margin: 0 auto;
  height: 450px;
  object-fit: cover;
  /* object-position: 80%; */
  }

  .GridProj_illustration_imp{
    height: 500rem;
  }

  .ImgProj_illustration_imp img{
    height: 550px;
  }


}

/*Version tablette*/

@media only screen and (max-width: 768px) and (min-width: 361px){
    .header_desktop{
        display: none;
    }
    
    /*header (inspiration site :https://alvarotrigo.com/blog/hamburger-menu-css/*/
    
    .header_burger{
        display: flex;
        position: fixed;
        z-index: 100;
        backdrop-filter: blur(20px);
        height: 110px;
    }
    
    .burger {
        max-width: 700px;
        width: 100vh;
        height: 20px;
        margin: auto;
      }
      
      .navbar {
        width: 100vw;
        /* box-shadow: 0 1px 4px rgba(41, 116, 190, 0.15); */
      }
      
      .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .navbar .menu-items {
        display: flex;
      }
      
      .navbar .nav-container li {
        list-style: none;
      }
      
      .navbar .nav-container a {
        text-decoration: none;
        color: #F6EAB2;
        font-weight: 500;
        font-size: 1.2rem;
        padding: 0.7rem;
      }
      
      .navbar .nav-container a:hover{
          font-weight: bolder;
      }
      
      .nav-container {
        display: block;
        position: relative;
        height: 60px;
        width: 100vw;
      }
      
      .nav-container .checkbox {
        position: absolute;
        display: block;
        height: 32px;
        width: 32px;
        top: 40px;
        left: 40px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
      }
      
      .nav-container .hamburger-lines {
        display: block;
        height: 26px;
        width: 32px;
        position: absolute;
        top: 40px;
        left: 40px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      
      .nav-container .hamburger-lines .line {
        display: block;
        height: 2px;
        width: 100%;
        border-radius: 10px;
        background: #F6EAB2;
      }
      
      .nav-container .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
      }
      
      .nav-container .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
      }
      
      .nav-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
      }
      
      .navbar .menu-items {
        padding-top: 250px;
        background-color: #0B1020;
        height: 100vh;
        width: 70%;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin-left: -40px;
        padding-left: 20px;
        transition: transform 0.5s ease-in-out;
        text-align: center;
      }
      
      .navbar .menu-items li {
        margin-bottom: 5rem;
        font-size: 1.5rem;
        font-weight: 500;
      }
      
      .burger_logo {
        position: absolute;
        top: 5px;
        right: 38%;
        font-size: 1.2rem;
        color: #0e2431;
        transform: translateX(-50%);
        z-index: 500;
        width: 80px;
      }
    
      .burger_logo img{
          width: 100%;
      }
    
      .burger_music{
        position: absolute;
        top: 15px;
        right: -20px;
        z-index: 500;
      }
      
      .nav-container input[type="checkbox"]:checked ~ .menu-items {
        transform: translateX(0);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
        transform: rotate(45deg);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
        transform: scaleY(0);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
        transform: rotate(-45deg);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .logo{
        display: none;
      }

       /* bannière */
  .banner-container h1{
    font-size: 3.5rem;
    text-align: center;
    letter-spacing: 2px;
  }

  .banner-container p{
      font-size: 1.5rem;
      letter-spacing: 20px;
      margin-top: 2.5rem;
  }

  .contact_button{
    position: absolute;
    font-family: abel;
    color: #fff;
    background-color: transparent;
    border-style: solid 0.5px;
    border-color: #fff;
    border-radius: 45px;
    margin-top: 700px;
  }

  /*général*/
  .container{
      width: 88vw;
  }

  h2{
      font-size: 2rem;
  }

  .button_inter{
    height: 81px;
    width: 270px;
    border-radius: 25px;
    margin-top: 2rem;
}

.underline1{
    width: 60%;
    margin-top: 0.8rem;
}

.underline2{
    width: 40%;
    margin-top: 0.8rem;
}

.underline3{
    width: 35%;
    margin-top: 0.8rem;
}

.underline4{
    width: 35%;
    margin-top: 0.8rem;
}

  /*section 2*/
  .section_presentation{
  grid-template: 4rem 1fr auto/1fr 1fr;
  height: 85vh;
  }

  .title_li_pres{
      grid-row: 1;
      grid-column: 2;
  }

  .img_li_pres{
      grid-row: 1/3;
      grid-column: 1;
      width: 18rem;
  }

  .bg_pres{
      grid-row: 2/3;
      grid-column: 2;
      padding-top: 4rem;
  }

  .bg_word{
      font-size: 4.5rem;
      margin-top: 2rem;
  }

  .bg_word:first-child{
    margin-left: 0.5rem;
    font-family: Impact;
  }

  .bg_word:nth-child(2){
    margin-left: 1.8rem;
    font-family: Impact;
  }

  .bg_word:nth-child(3){
    margin-left: 3.8rem;
    font-family: Impact;
  }

  .sect_pres_butt{
      display: flex;
      justify-content: center;
      margin: 2rem 0 5rem 0;
  }

  .para_pres{
      grid-row: 3;
      grid-column: 1/3;
      width: 100%;
      margin-top: 11.5rem;
  }


  /*section 2*/

  .content_sect2{
      margin-top: 8rem;
      height: auto;
  }
  .serv_content{
      flex-direction: column;
      margin-bottom: 5rem;
  }

  .service_serv{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
  }

  .img_serv{
    width: 60%;
  }

  /*section 3*/
  .list_proj{
    flex-direction: column;
    align-items: center;
    margin: 2rem 0rem;
  }

  .list_proj li{
    padding: 0.1rem 0rem;
    margin: 0.5rem 0;
    /* justify-content: center; */
  }

  .filter_proj{
    flex-direction: column;
    align-items: center;
    width: 85vw;
  }

  .art_proj{
    width: 100%;
  }

  .proj_text_para{
    width: 90%;
  }

  .proj_text p{
    margin: 0.5rem 1rem;
  }

  /*section 4*/
  .content_sect4{
      margin-top: 10rem;
  }

  .form_coord{
      flex-direction: column;
  }

  .form{
    width: 100%;
  }

  .title_li_form{
      margin-bottom: 1rem;
  }

  .label{
      margin: 1rem 0;
  }

  input, textarea{
    padding: 1rem;
  }

  textarea{
      height: 10rem;
  }

  .coord{
      width: 100%;
      margin-top: 2rem;
  }

  .network_list{
      width: 100%;
  }

  .network_list img{
    width: 80px;
  }

/*pages projets*/
  h5{
      font-size: 5rem;
      width: 90vw;
      top: 6rem;
      left: -45vw;
  }

  .project_section{
    height: 95vh;
  }

  .GridSect_project{
      display: flex;
      flex-direction: column;
      width: 100vw;
      height: 100vh;
      justify-content: center;
  }

  .GridSect_proj_img_R img, .GridSect_proj_img_L img{
      height: 400px;
      object-fit: cover;
  }

  .GridSect_proj_para_R, .GridSect_proj_para_L, .GridSect_proj_para_R_imp, .GridSect_proj_para_L_imp{
      width: 90vw;
      margin: 0 auto;
      margin-top: 2rem;
      column-gap: 1rem;
  }

  .list_ProjStyle{
  margin-top: 1rem;
  display: flex;
  column-gap: 1rem;
}

.GridSect_project_imp{
  display: flex;
  flex-direction: column;
  width: 100vw;
  align-items: center;
  }

.GridSect_proj_img_R_imp img, .GridSect_proj_img_L_imp img{
width: 400px;
margin: 0 auto;
height: 709px;
object-fit: cover;
/* object-position: 80%; */
}

.ImgProj_illustration_imp img{
  height: 700px;
}

.SectProj_illustration_imp{
  height: 100vh;
}

/*orbita image position */
.img_position_orbita img{
  object-position: 0 -400px;
}

}