.titre h2 {
  overflow: hidden;
}
.titre h2 mark {
  display: block;
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

@keyframes reveal {
  0% {
    transform: translate(0,100%);
  }
  100% {
    transform: translate(0,0);
  }
}

/* ---------- section hero header -------------- */
.hero-header{
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    padding: 50px 0 80px 0;
    & h1{
      font-size:1.4rem;
      font-family:'AlbertSansExtraLight';
      margin:20px 0;
      line-height:1;
      text-align:left;
      text-transform:none;
    }
    & h2{
    font-size:5vw;
    line-height:1;
    font-family:'AlbertSansBold';
    text-transform:none;
    padding:0;
    margin:0;
    text-align:left;
    color:var(--black);
    & mark{
      color:var(--black);
      background-color: var(--accent2);
      display: inline-block;
      line-height: 0.9;
  }
    }

    & .titre{
      width:75%;
    }
}

/* ----------- image parallaxe et zoom ------------- */
.zoom {
	background-size: cover;
	width: 100%;
	position: relative;
  overflow:hidden;
  bottom:150px;
  margin-bottom: -300px;
  display: flex;
  justify-content: flex-end;
}

.zoom img {
	width: 100%;
  max-width:100%;
  max-height:100%;
	position: relative;
}


.featured{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin:50px 0 100px 0;
  & h2{
    width:75%;
    text-align: center;
    font-size:4rem;
    font-family:'AlbertSansExtraBold';
    text-transform: none;
  }
  & .featured-container{
    width:75%;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  & hr{
    border:1Px solid var(--black);
    height:150px;
  }
  & .featured-box{
    width:30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    & h3{
      font-family:'AlbertSansBold';
      font-size:1.4rem;
    }
    & p{
      font-family:'AlbertSansMedium';
      font-size:1rem;
      text-align: center;
      padding:0;
      margin:0;
    }
    & button{
      border-radius: 50px;
      padding: 10px 20px;
      margin:30px 0;
      background-color:var(--accent);
      border: 2px solid var(--black);
      transition: all .25s ease;
      text-align:center;
      font-family:'AlbertSansSemiBold';
      font-size:1rem;
      color:var(--black);
      &:hover{
      background-color: var(--black);
      color:var(--accent);
      box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 5px;
      transition: all .25s ease;
      cursor:pointer;
      }
    }
  }
}



/* ---------- reponsive ---------- */

@media screen and (max-width:1280px){
  .zoom{
    bottom:110px;
    margin-bottom:-250px;
  }
}

@media screen and (max-width:1024px){
    .hero-header{
      padding:30px 0 60px 0;
      & h1{
        font-size:1.2rem;
      }
      & h2{
        font-size:3.5rem;
      }
    }

    .zoom{
      bottom: 70px;
      margin-bottom: -170px;
    }

    .featured {
      margin: 50px 0;
      & h2{
        font-size:3rem;
      }
      & .featured-box{
        height: 280px;
        justify-content: space-between;
        & button{
          font-size:0.9rem;
        }
      }
    }


}


@media screen and (max-width:768px){
    .zoom{
      bottom: 60px;
      margin-bottom: -100px;
      justify-content: center;
      & img{
        height:100% !important;
        width:100% !important;
      }
    }

    .featured{
      margin: 20px 0;
      & hr{
        width:70%;
        height:auto;
      }
      & .featured-container{
        flex-direction:column;
      }
      & .featured-box{
        height:auto;
        width:100%;
      }
    }

}


@media screen and (max-width:480px){
  .hero-header{
    padding:0;
    & h1{
      font-size: 1rem;
    }
    & h2{
      font-size: 5.2vh;
    }
  }

    .zoom{
    bottom: 0px;
    margin-bottom: 0;
    }

    .featured{
      .featured-box{
        & h3{
        font-size:1.2rem;
      }
      & p{
        font-size:0.9rem;
      }
      & button{
      padding: 7px 15px;
      }
      }
    }

}