@import url("general.css");



#construction {
  
  .header-video{
    min-height:1300px;
    position:relative;
    z-index:1;
  }
  .bloc-video{
    position:sticky;
    top:0;
    left:0;
    height:120vh;
    overflow:hidden;
    margin: 0 50px 0 50px;
    @media screen and (max-width: 500px) {
      margin:0;
    }
    .video-overlay {
      position: absolute; 
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; 
      background-color: rgba(0, 0, 0, 0.45); 
      z-index: 0; 
    }
    video{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height:95vh; 
      object-fit: cover; 
      z-index: -1; 
    }
  }
  .zone_video{
    width: 100%; 
    max-width: 100%;
    position: sticky; 
    z-index: 1;
    height:150vh;
    h1 {
      position: relative;
      max-width: calc(100% - 50px);
      box-sizing: border-box; 
      left:50px;
      z-index:0;
      margin-bottom: 600px;
      margin-top:-70vh;

      &:before {
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          right: 50px;
          border-top: 77px solid var(--vertfluo);
          border-left: 87px solid transparent;
      }

      @media screen and (max-width: 900px) {
          position: static;
          margin: 0 50px 0 50px;

          &::before {
              border-bottom: 52px solid var(--vertfluo);
              border-left: 46px solid transparent;
              border-top: none;
          }
      }
      @media screen and (max-width: 500px) {

          &::before {
              border-bottom: none;
              border-left: none;
              border-top: none;
          }
      }
      .yellowGreen{
        color:var(--vertfluo);
      }
  }
  .sousTexte{
    position:relative;
    width:100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 64.75%);
    .container{
      display:flex;
      justify-content: flex-end;
      flex-wrap:wrap;
    }
    h2{
      margin-right:132px;
      margin-bottom:40px;
      width:100%;
      text-align:right;
    }
    p{
      color:white;
      width:50%;
      padding-bottom:70px;
    }
    .triangleDouble{
      position:absolute;
      top:282px;
      left:30%;
    }
  }
  }
    
.yellowBloc{
  position:relative;
  z-index:11;
  background-color: var(--vertfluo);
  padding:70px 0 85px 0;
}
.yellowBloc .container-small{
  display: flex;
  justify-content: flex-end;
}
.yellowBloc .container-small .text{
  width:50%;
}
.yellowBloc .container-small .text p{
  color: #000;
}
.yellowBloc .container-small .text p strong{
  font-weight: 600;
}
.triangleDouble{
  position:absolute;
  top:-1px;
  left:30%;
}


.backgroundSection {
        background-color: black;
        position: relative;
        margin-top: -2px;
}
   

.explications {
  position:relative;
        @media screen and (max-width: 900px) {
            padding-bottom: 92px;
        }

        hr {
            border-top: 1px solid var(--gris-medium);
            height: 0;
            margin-bottom: 27px;
        }

        .text {
            display: flex;
            justify-content: space-between;
            @media screen and (max-width: 900px) {
                flex-flow: column;
            }

            .surtitre {
                width: 25%;
                text-align: left;
                @media screen and (max-width: 900px) {
                    width: 100%;
                }
            }

            p {
                width: 60%;
                @media screen and (max-width: 900px) {
                    width: 90%;
                    margin-top: 30px;
                  
                }
            }

        }
        .tri1, .tri2, .tri3 {
          opacity: 0; /* Caché au départ, GSAP gérera l'apparition */
          position: absolute; /* Positionné par rapport à .explications */
          top: 0; /* Ancré en haut de .explications */
          z-index: 50; /* Doit être au-dessus de tout le reste */
          width: 44px; /* Largeur de votre SVG */
          height: 39px; /* Hauteur de votre SVG */
          pointer-events: none; /* Pour ne pas bloquer les clics sous le triangle */
          z-index: 9999;
        }
        .tri1{
          left:50% !important;
          transform: translateX(calc(-50% - 670px + 25px)) !important;
        }
        .tri2{
          left:50% !important;
          transform: translateX(calc(-50% - 550px)) !important;
        }
        .tri3{
          left:50% !important;
          transform: translateX(calc(-50% - 430px)) !important;
        }
        .faireStick{
          position: relative;
          min-height: 300vh;
        }
        .ranger1{
          background-image: url('../../../uploads/2025/10/imgBG_carteModel3D.png');
          background-size: cover;
          background-repeat: no-repeat;
          height: 100vh;
          position:sticky;
          top:0;
          z-index:1;
          overflow: hidden;

        }
        .ranger5{
          min-height: 112vh;
          background-color: black;
          background-image: url('../../../uploads/2025/10/BG-mesureVolCalTerras.png');
          background-position: center bottom;
          background-repeat: no-repeat;
          background-size: contain; 
        }
        .ranger .container svg {
          margin-top: 0;
          padding-top: 0;
          display: block;
          width: 100%;
          max-width: 100%;  
          height: 2px; 
          line-height: 0;
        }
        .ranger {
          padding-top: 0;
        }
        .ranger .container {
          margin-top: 0; 
          padding-top: 0;
        }
        .vidModelisation{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 10; 
          
        }
        .vidModelisation.active {
          opacity: 1; 
        }
        .vidModelisation video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .bottomText-wrap {
          position: absolute;
          top: 50%; /* Place le bord supérieur à 50% de la hauteur du parent (.ranger1) */
          transform: translateY(-50%); /* Remonte l'élément de 50% de sa PROPRE hauteur pour un centrage parfait */
          width: 100%;
          z-index: 20; 
          left: 0;
          right: 0;
          margin-left: auto;
          margin-right: auto;
        }
        .bottomText {
          display: flex;
          justify-content: space-between;
          margin: 79px 0 100px 0;
          position:relative;
          z-index:111;
          @media screen and (max-width: 900px) {
              flex-flow: column;
          }
          .gauche{
            width: 30.5%;
            text-align: left;
            @media screen and (max-width: 900px) {
              width: 60%;
              margin-bottom: 30px;
              }
              @media screen and (max-width: 400px) {
                  width: 100%;
                  }
              p{
                color:#808080;
                margin-top:21px;
                max-width:340px;
              }    
          }
          .surtitre {
              color: var(--vertfluo);
              
          }

          .sixty {
              width:66%;
              margin-top:10px;
              @media screen and (max-width: 900px) {
                  width: 100%;
                  }
              .full {
                  width: 100%;
              }

              .second {
                  margin-top: 30px;
              }
              ul{
                list-style: none; 
                padding-left: 0;  
                margin-left: 0;
              }
              li{
                position: relative;
                padding-left: 20px; 
                text-align: left;
                margin-bottom: 5px; 
              }
              li::before {
                content: "\2022"; 
                color: #fff; 
                font-weight: bold;
                display: inline-block; 
                position: absolute; 
                left: 0;
                top: 0;
                width: 10px; 
              }

          }



      }
        
    }

  .yellowBloc.joindre{
    position:relative;
    height: 70vh;
    padding:0;
    .container{
      display: flex;
      align-items: center;
      flex-flow: column;
      justify-content: center;
      height:100%;
      .text{
        margin-top:57px;
      }
    }
    h3{
      color:#000;
      width:100%;
    }
    .triangleDoubleBottom{
      position:absolute;
      bottom:0;
      left:calc(30% + 202px);
      line-height:0;
    }
    .triangleDouble{
      position: absolute; 
      top: -1px;
      left: 30%; 
      z-index: 10;
      width: 202px;
      height: calc(100% - 83px);
      padding: 0;
      svg{
        position:sticky;
        top:86px;
        z-index:11;
        display: block; 
      } 
  }
    
  } 
  .spacerWhite{
    height:193px;
    background-color: white;
    position:relative;
    margin-top:-2px;
    .trianglesVert{
      position: absolute;
      top: 0;
      left: 30%;
     
    }
  }
    .certification {
        background-color: var(--vertfluo);

        .container {
            height: 100%;
            display: flex;
            flex-flow: wrap;
            justify-content: space-between;
            align-items: center;
            padding:100px 0;
            h2{
        margin-bottom:15px;
    }
            h2,
            span {
                color: black;
                text-transform: uppercase;
            }
        }
    }

}
@media (max-width: 1900px) {
    #construction  .certification .container {
      padding:135px 0;
    }
}
@media (max-width: 1512px) {
  #construction .zone_video{
    height:160vh;
  }
}
@media (max-width: 1512px) and (max-height: 800px){
  #construction .zone_video {
    height: 185vh;
  }
  #construction .zone_video h1{
    margin-top: -80vh;
  }
  #construction .explications .ranger5{
    min-height:125vh;
  }
}
@media (max-width: 1512px) and (max-height: 750px){
  #construction .zone_video {
    height: 205vh;
  }
  #construction .zone_video h1{
    margin-top: -85vh;
  }
  #construction .explications .ranger5{
    min-height:140vh;
  }
  #construction .yellowBloc.joindre{
    min-height:90vh;
  }
}
@media (max-width: 1440px) {
  #construction .zone_video {
    height: 165vh;
  }
}

@media (max-width: 1280px) {
  #construction .zone_video {
    height: 182vh;
  }
  #construction .zone_video .sousTexte h2{
    margin-right:90px;  
  }
  #construction .explications .ranger5 {
    min-height: 115vh;
  }
  #construction .certification .container {
    padding: 100px 0;
  }
}
@media (max-width: 1024px) {
  #construction .zone_video {
    height: 195vh;
  }
  #construction .zone_video .sousTexte .triangleDouble {
    left: 18%;
  }
  #construction .zone_video .sousTexte p{
    width:60%;
  }
  #construction .triangleDouble {
      left: 18%;
  }
  #construction .yellowBloc .container-small .text {
    width: 61%;
  }
  #construction .explications .bottomText {
    flex-wrap:wrap;
  }
  #construction .explications .bottomText .gauche{
    width:100%;
  }
  #construction .explications .bottomText .gauche .surtitre br{
    display:none;
  }
  #construction .explications .bottomText .gauche p{
    max-width:100%;
  }
  #construction .explications .bottomText .sixty {
    width: 100%;
    margin-top: 20px;
   }
  #construction .yellowBloc.joindre h3 br{
    display: none;
  }
  #construction .yellowBloc.joindre {
    height: 85vh;
  }
  #construction .zone_video h1 {
    font-size:95px;
  }
}
@media (max-width: 800px) {
  #construction .bloc-video{
    height:100vh;
  }
  #construction .zone_video {
    height: unset;
    position:absolute;
    bottom:0;
  }
  #construction .zone_video h1 {
    font-size: 65px;
    line-height:65px;
    margin-bottom:80px;
  }
  #construction .zone_video .sousTexte .triangleDouble {
    display:none;
  }
  #construction .triangleDouble {
    left: 38px;
  }
  #construction .zone_video .sousTexte h2 {
    margin-right: 10px;
  }
  #construction .zone_video .sousTexte p {
    width: 80%;
    margin-right: 10px;
  }
  #construction .yellowBloc {
    padding: 100px 0 85px 0;
  }
  #construction .yellowBloc .container-small .text {
    width: 85%;
  }
  #construction .explications .ranger1 {
    height: auto;          
    position: static;       
    top: auto;             
    overflow: visible;
    display: flex;
    flex-wrap: wrap-reverse;
    background-position: center; 
  }
  #construction .explications .faireStick {
    min-height: auto; 
  }
  #construction .explications .vidModelisation {
    position: relative;
    height: 50vh; 
    z-index: auto;
  }
  #construction .explications .vidModelisation video {
    position: relative;
    height: 100%;
  }
  #construction .explications .bottomText-wrap {
    position: relative;
    top: auto;
    transform: none; 
    padding: 20px 0; 
  }
  #construction .explications .ranger5 {
    min-height: 60vh;
  }
  #construction .explications .bottomText .surtitre{
    line-height: 25px;
  }
  #construction .yellowBloc.joindre {
    height: 40vh;
  }
  #construction .yellowBloc.joindre h3{
    font-size: 28px;
    line-height: 32px;
  }
  #construction .yellowBloc.joindre .triangleDouble{
    height:auto;
    left:10%;
  }
  #construction .yellowBloc.joindre .triangleDouble svg{
    position: relative;
    top:unset;
  }
  #construction .spacerWhite .trianglesVert {
      left: 10%;
  }
  #construction .yellowBloc.joindre .triangleDoubleBottom {
    left: calc(10% + 202px);
  }                 
}
@media (max-width: 768px) {
  #construction .header-video {
    min-height:auto;
  }
  #construction .explications .ranger5 {
    min-height: 72vh;
  }
  #construction .yellowBloc.joindre {
    height: 50vh;
  }
}
@media (max-width: 500px) {
  #construction .zone_video h1 {
    font-size: 45px;
    line-height: 50px;
    margin: 120px 5% 0 5%;
  }
  #construction .zone_video h1 br{
    display:none;
  }
  #construction .zone_video .sousTexte p {
    width: 100%;
    margin-right: 0;
    padding-bottom: 40px;
  }
  #construction .zone_video .sousTexte h2 {
    margin-right: 0;
    margin-bottom:20px;
  }
  #construction .zone_video .sousTexte h2 br{
    display: none;
  }
  #construction .zone_video {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  #construction .triangleDouble {
    left: 0;
  }
  #construction .triangleDouble svg{
    width: 80%;
    height: auto;
  }
  #construction .yellowBloc .container-small .text {
    width: 100%;
  }
  #construction .yellowBloc .container-small {
    max-width:90%;
  }
  #construction .explications .bottomText {
    margin: 60px 0;
  } 
  #construction .explications .bottomText .sixty {
    margin-top: 0;
  }
  #construction .explications .ranger5 {
    min-height: 75vh;
  } 
  #construction .explications {
      padding-bottom:40px;
  }
  #construction .yellowBloc.joindre .triangleDouble {
    left: 0;
  }
  #construction .spacerWhite .trianglesVert {
    left: 0;
  }
  #construction .yellowBloc.joindre .triangleDouble svg {
    width:80%;
  }
  #construction .yellowBloc.joindre .triangleDoubleBottom {
    left: 202px;
  }
  #construction .yellowBloc.joindre {
    height: 60vh;
  }
  #construction .certification .container span br{
    display:none;
  }
  #construction .certification .container h2{
    margin-bottom:15px;
  }
}
@media (max-width: 390px) {
  #construction .yellowBloc.joindre .triangleDoubleBottom {
    bottom: -6px;
  }
  #construction .yellowBloc.joindre .triangleDoubleBottom svg{
    width:90%;
  }
  #construction .zone_video h1 {
    max-width: 100%;
    font-size: 38px;
    line-height: 40px;
  }
  #construction .zone_video .sousTexte p {
    font-size:17px;
  }
  #construction .spacerWhite {
    height: 153px;
  }
}
@media (max-width: 360px) {
  #construction h2{
    font-size: 32px;

  }
  #construction .header-video {
    margin-top: 86px;
  }
  #construction .bloc-video {
    height: unset;
    position:static;
  }
  #construction .bloc-video video {
   position: relative;
   height: auto;
   }
   #construction .zone_video {
    height: unset;
    position: relative;
  }
  #construction .zone_video h1 {
    margin:40px 5% 20px 5%;
  }
  #construction .zone_video h1 {
    font-size: 35px;
    line-height: 40px;
  }
  #construction .zone_video .sousTexte h2 {
    text-align: left;
  }
  #construction .explications .bottomText .surtitre {
    letter-spacing:6.2px;
  }
  #construction .explications .ranger5 {
    min-height: 100vh;
  }
  #construction .yellowBloc.joindre .triangleDoubleBottom {
    bottom: -11px;
  }
  #construction .yellowBloc.joindre .container .text .button{
    letter-spacing:3.2px;
  }
}