#accueil{
  position: relative;
  min-height:100%;
  .bloc1 {
    position: relative; 
    width: 100%; 
    z-index:2;

    video {
      position: relative;
      right: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      /* filter: brightness(65%); */
      margin-bottom: 20vh;
      @media screen and (max-width: 1024px) {
        margin-bottom: -5px;
      }
  }

  .container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;

      .contenu {
          position: sticky;
          top: 0;
          padding-top: 70vh;
          @media screen and (max-width: 1024px) {
            padding-top:45vh;
          }

          h1{
            color: #fff;
            z-index:2;
            font-weight: 200;
            br{
              @media screen and (max-width: 500px) {
                display: none;
              }
            }
          }
      }
  }
  }
  .bloc2 {
    position: relative;
    background-color: var(--bleu); 
    margin-top: -20vh;
    z-index: 2; 
    width:100%;
    @media screen and (max-width: 1512px) {
      margin-top:-21vh;
    }
    @media screen and (max-width: 1280px) {
      margin-top:-22vh;
    }
    @media screen and (max-width: 1024px) {
      margin-top:0;
    }
    .container {
      padding:80px 0;
      @media screen and (max-width: 500px) {
        padding:60px 0;
      }
      .intellinox-red-finit.top{
        width:48%;
        @media screen and (max-width: 1024px) {
          width:49%;
        }
        @media screen and (max-width: 1000px) {
          width:100%;
        }
        .span{
          margin-bottom:5px;
        }
      }
      .contenu{
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap;
        .boutonBloc{
          width:100%;
          text-align: center;
          display: flex;
          justify-content: center;
          a {
            background-color: white;
            border-radius:4px;
            margin-top:8px;
            p {
                color: var(--bleu);
            }
        }
        }
      }
      .left, .right{
        width:47%;
        @media screen and (max-width: 1024px) {
          width:49%;
        }
        @media screen and (max-width: 1000px) {
          width:100%;
        }
        p{
          padding:15px 0 0 0;
          @media screen and (max-width: 1024px) {
            padding:10px 0 0 0;
          }
        }
      }
      p.intellinox-red-finit {
        color: white;
        padding: 48px 0 0 0;
        @media screen and (max-width: 1024px) {
          padding:0;
        }
        .span{
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          line-height: 28px;
          margin-bottom:48px; 
          @media screen and (max-width: 1024px) {
            font-size:18px;
            line-height:22px;
          }
          @media screen and (max-width: 500px) {
            font-size:17px;
            line-height: 20px;
          }
        }
        }
        .text-wrapper-4{
          display: block;
          color: #FFF;
          font-size: 20px;
          font-style: normal;
          font-weight: 200;
          line-height: 28px;
          letter-spacing: -0.4px;
          margin-bottom: 20px;
          @media screen and (max-width: 1024px) {
            font-size:18px;
            line-height:22px;
          }
          @media screen and (max-width: 500px) {
            font-size:17px;
            line-height: 20px;
          }
        }
        }
        .span{
          display: block;
          margin-bottom:20px;
        }
      }
    }
  .bloc3{
    position:relative;
    z-index:1;
    @media screen and (max-width: 1024px) {
      display: none;
    }
    #myVideo {
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      height:100vh;
      width:100vh;
      object-fit: cover;
      z-index:-1;
    }
    a {
      background-color: var(--bleu);
      border-radius:4px;
      p {
          color: white;
      }
  }
   .contenu{
      padding-top:200px;
      margin-bottom:400px;
      hr {
        width: 100%;
        border: 1px solid var(--gris);
        margin-bottom: 5px;
      }
      h2{
        color:#fff;
        font-weight: 200;
        margin-top:28px;
      }
     
    }
    .DecouvrezEcoazur{
      position:relative;
      margin-bottom:250px;
      .text-elements {
          position: sticky;
          top: 0;
          
          
      }
      .text-container{
        min-height: 236px;
      }
      .bloctxtEcoazur.cache{
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease-in-out;
      }
      .bloctxtEcoazur{
        position: relative;  
        top: 80px; 
        opacity: 1;
        visibility: visible;
        z-index:5;
        .left{
          width:35%;
          p.txt{
            color:#fff;
            margin-top:28px;
            width:80%;
          }
        }
       
      }
      .txtConfort{
        z-index:3;
        .bloctxtConfort{
          position: relative;  
          top: 100px;
          opacity: 1;
          visibility: visible;
          .right{
            width:35%;
            margin-left:62%;
            p.txt{
              color:#fff;
              margin-top:28px;
              width:80%;
            }
          }
        }
      }
      
      .center{
        text-align: center;
        margin-top:160px;
        position: sticky;
        top:400px;
        margin-bottom:60px;
        z-index:1;
        img{
          margin-top:60px;
        }
      }
      .arrowRed{
        text-align:center;
        position:sticky;
        top:80px;
        z-index:2;
        height:862px;
        transition: transform 0.5s ease;
        pointer-events: none;
      }
      .arrowRed.animate {
        transform: translateY(100px); 
        transition: transform 0.5s ease;
      }
      .arrowBleu{
        position:sticky;
        width:100%;
        top:0;
        z-index:2;
        height:250px;
        @media screen and (max-width: 1280px) {
          top:-100px;
        }
        .conteneur-image { 
          position: relative; 
          width: 100%; 
          .image-wrapper {
            position: absolute;
            top: 10%; 
            left: 48%; 
            width: 274.56px; 
            height: 857.63px; 
            img{
              max-width: 100%;
              max-height: 100%;
            }
          }
        }
        #vidAirAcc{
          position: fixed;
          right: 0;
          bottom: 0;
          min-width: 45.5%;
          min-height: 100%;
          height:100vh;
          width:43vh;
          object-fit: cover;
          z-index:-1;
          opacity: 0; /* Initialement invisible */
          transition: opacity 0.5s ease; /* Transition pour l'opacité */
          @media screen and (max-width: 1900px) {
            min-width:43.9%;
          }
          @media screen and (max-width: 1512px) {
            min-width:42.5%;
          }
          @media screen and (max-width: 1440px) {
            min-width: 42%;
          }
          @media screen and (max-width: 1280px) {
            min-width: 41%;
          }
        }
        #vidAirAcc.visible{
          opacity:1;
        }
        
      }
      .arrowBleu.sticky-active {
        position: sticky;
        top: 0;
        left: 0; /* ou la valeur souhaitée */
        width: 100%;
        z-index: 3;
      }
      
    }
    .DecouvrezNetZeroHood{
      position:relative;
      min-height:100vh;
      margin-bottom:160px;
      .text-elements {
          position: sticky;
          top: 0; 
          height:760px;
          z-index:3; 
      }
      .text-container{
        min-height: 236px;
      }
      .bloctxtEcoazur.cache{
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
      }
      .bloctxtEcoazur{
        position: relative;  
        top: 120px; 
        opacity: 1;
        visibility: visible;
        .left{
          width:30%;
          p.txt{
            color:#fff;
            margin-top:28px;
          }
        }
       
      }
      .center{
        text-align: center;
        margin-top:160px;
        position: sticky;
        top:450px;
        margin-bottom:60px;
        img{
          margin-top:60px;
        }
      }
      .arrowZeroHood{
        text-align:center;
        position:sticky;
        top:80px;
        z-index:2;
        height:760px;
        img{
          margin-left:10%;
        }
      }
    }
    
  }
  .bloc3-Mobile{
    display: none;
    background-color: #000;
    @media screen and (max-width: 1024px) {
      display: block;
    }
    a {
      background-color: var(--bleu);
      border-radius:4px;
      p {
          color: white;
      }
  }
    .contenu{
      padding:100px 0;
      hr {
        width: 100%;
        border: 1px solid var(--gris);
        margin-bottom: 5px;
      }
      h2{
        color:#fff;
        font-weight: 200;
        margin-top:28px;
      }
     
    }
    .DecouvrezEcoazur, .DecouvrezConfortChef, .DecouvrezNetZeroHood{
      .left{
        width:50%;
        @media screen and (max-width: 1000px) {
          width:60%;
        }
        @media screen and (max-width: 500px) {
          width:100%;
        }
        p.txt{
          color:#fff;
          margin-top:28px;
          width:100%;
        }
      }
      .right{
        img{
          width:100%;
          margin-top:-50px;
          @media screen and (max-width: 1000px) {
            margin-top:0;
          }
          @media screen and (max-width: 500px) {
            margin:50px 0;
          }
        }
      }
    }
    .DecouvrezConfortChef, .DecouvrezNetZeroHood{
      .right{
        img{
          @media screen and (max-width: 768px) {
            margin-top:10px;
          }
          @media screen and (max-width: 500px) {
            margin:50px 0;
          }
        }
      }
    }

  }
  .bloc4{
    background-color: #fff;
    z-index:2;
    position:relative;
    .container {
      padding: 125.5px 0 131.91px 0;
      @media screen and (max-width: 1024px) {
        padding:100px 0;
      }
      @media screen and (max-width: 500px) {
        padding:80px 0;
      }
      hr {
          width: 100%;
          border: 1px solid var(--gris);
          margin: 48px 0;
          @media screen and (max-width: 1024px) {
            margin:30px 0;
          }
      }

      h2 {
          margin: 28px 0 87px 0;
          color: var(--gris);
      }

      .solutions {
          display: flex;
          gap: 125px;
          margin-top:20px;
          @media screen and (max-width: 1024px) {
            gap:75px;
            margin-top:50px;
          }
          @media screen and (max-width: 1000px) {
            flex-wrap:wrap;
          }
          
          .gauche, .droite{
            width:45%;
            @media screen and (max-width: 1000px) {
              width:100%;
              display: flex;
              flex-flow:column;
              align-items: center;
            }
            img{
              width:auto;
            }
          }
          .contenu {
              h3 {
                  margin-bottom: 28px;
                  margin-top:50px;
              }

              p {
                  color: var(--gris);
                  width: 85%;
                  @media screen and (max-width: 1024px) {
                    width:100%;
                  }
              }

              a {
                  background-color: var(--bleu);
                  border-radius:4px;
                  @media screen and (max-width: 500px) {
                    width:auto;
                  }
                  p {
                      color: white;
                      width:100%;
                      @media screen and (max-width: 500px) {
                        line-height:1.4;
                      }
                  }
              }
          }
      }
  }
  }
  .bloc5{
    background-color: var(--gris-blanc);
    z-index:2;
    position:relative;
        .container {
            padding: 125.5px 0 131.91px 0;
            @media screen and (max-width: 1024px) {
              padding:100px 0;
            }
            @media screen and (max-width: 500px) {
              padding:80px 0;
            }
            hr {
                width: 100%;
                border: 1px solid var(--gris);
                margin: 48px 0;
                @media screen and (max-width: 1024px) {
                  margin:30px 0;
                }
            }

            h2 {
                margin: 28px 0 87px 0;
                color: var(--gris);
                @media screen and (max-width: 500px) {
                  margin:28px 0 40px 0;
                }
            }

            .ressources {
                display: flex;
                gap: 125px;
                @media screen and (max-width: 1024px) {
                  gap:75px;
                  margin-top:50px;
                }
                @media screen and (max-width: 1000px) {
                  flex-wrap:wrap;
                  justify-content: center;
                }
                @media screen and (max-width: 500px) {
                  gap:40px;
                }
                img{
                  border-radius:16px;
                  @media screen and (max-width: 1000px) {
                    width:70%;
                  }
                  @media screen and (max-width: 500px) {
                    width:100%;
                  }
                }
                .contenu {
                  display: flex;
                  flex-flow:column;
                  justify-content: center;
                  @media screen and (max-width: 1000px) {
                    flex-wrap:wrap;
                  }
                    h3 {
                        margin-bottom: 28px;
                    }

                    p {
                        color: var(--gris);
                        width: 75%;
                        @media screen and (max-width: 1280px) {
                          width:85%;
                        }
                        @media screen and (max-width: 1024px) {
                          width:100%;
                        }
                    }

                    a {
                        background-color: var(--bleu);
                        border-radius:4px;
                        p {
                            color: white;
                        }
                    }
                }
            }
        }
  }
  .bloc6{
    background-color: var(--bleu);
    position:relative;
    z-index:2;
    .container{
      padding:80px 0;
      display: flex;
      flex-flow:column;
      align-items: center;
      h2, p {
        color:#fff;
      }
      h2{
        margin-bottom:24px;
      }
      p.intro{
        text-align: center;
        font-weight: 200;
        margin-bottom:33px;
        br{
          @media screen and (max-width: 500px) {
            display: none;
          }
        }
      }
      a {
        background-color: #fff;
        border-radius:4px;
        p {
            color: var(--bleu);
        }
      }
      .logos{
        display: flex;
        align-items: center;
        gap:88px;
        margin-bottom:55px;
        @media screen and (max-width: 1024px) {
          gap:68px;
          margin-bottom:40px;
        }
        @media screen and (max-width: 1000px) {
          gap:40px;
        }
        @media screen and (max-width: 500px) {
          flex-wrap:wrap;
        }
        @media screen and (max-width: 360px) {
          gap:30px;
        }
      }
    }
  }
  .bloc7 {
    margin-top:-2px;
    position: relative;
    height: 180vh;
    z-index:2;
    @media screen and (max-width: 1024px) {
      height:100vh;
    }
    @media screen and (max-width: 1000px) {
      height:auto;
    } 
    img {
        position: sticky;
        top: 0;
        width: 100%;
        height: 111vh;
        object-fit:cover;
        @media screen and (max-width: 1024px) {
          width:100%;
          height:100vh;
        }
        @media screen and (max-width: 1000px) {
          position:relative;
          height:auto;
        }  
    }

    .bloc8 {
      @media screen and (max-width: 1024px) {
        top:8%;
        position:absolute;
      }
      @media screen and (max-width: 1000px) {
        top:unset;
        position:relative;
      }
        .container {
          @media screen and (max-width: 1000px) {
            margin-left:0;
            margin-right:0;
            margin-top:-5px;
            max-width:100%;
            width:100%;
          }
            .contenu {
                width: 554.291px;
                border-radius: 8px;
                background-color: var(--bleu);
                color: white;
                padding: 70px 48px 105px 39px;
                position: relative;
                top: -150px;
                @media screen and (max-width: 1024px) {
                  top:0;
                  width:55%;
                }
                @media screen and (max-width: 1000px) {
                  top:unset;
                  width:90%;
                  padding:70px 5%;
                  border-radius: unset;
                }
                .surtitre {
                    color: white;
                }

                hr {
                    width: 100%;
                    border: 1px solid white;
                    margin-bottom: 8px;
                }

                h2 {
                    margin: 28px 0 164px 0;
                    @media screen and (max-width: 1000px) {
                      margin:28px 0 50px 0;
                  }
                }

                a {
                    background-color: white;

                    p {
                        color: var(--bleu);
                    }
                }
            }
        }
    }
}