/******************/
/* image du début */
/******************/
.entree-img {
  position: relative;
  width: 100vw;
  height: 56.25vw;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.entree-img .arrow {
  position: absolute;
  bottom: 0vw;
  width: 100vw;
  height: 7vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.entree-img .arrow .img {
  height: calc(1vw + 1rem);
  aspect-ratio: 1/1;
}

.entree-img h1 p {
  z-index: 0;
  position: absolute;
  font-size: 13vw;
  font-weight: var(--light);
  text-transform: uppercase;
  color: rgba(var(--gray-01), 70%);
}

.entree-img .image-debut {
  z-index: -1;
  position: relative;
  aspect-ratio: 16/9;
  left: 0;
  top: 0;
  width: 100vw;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.entree-img .image-debut img {
  position: absolute;
  z-index: -2;
  /* display: none; */
  top: 0;
  left: 0;
  height: 100%;
}

.entree-img .cache {
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  background: rgba(var(--gray-07), 0.2);
  backdrop-filter: blur(1.5vw);
}

/************************/
/* première description */
/************************/
.description {
  margin: 7vw 0 3vw 0;
  padding: 0 4vw;
}

.description .first-description {
  display: flex;
  justify-content: center;
}

.description .first-description .para-description {
  flex-basis: 80%;
  padding-left: 1vw;
  padding-right: 2vw;
}

.description .first-description .para-description h3 {
  padding: 1vw 0;
  font-size: 3rem;
  font-weight: var(--light);
}

.description .first-description .para-description p {
  font-size: 1.7rem;
  font-weight: var(--light);
}

.description .first-description .img {
  flex-basis: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.description .first-description .img img {
  width: 90%;
}

/*****************************/
/* description avec compteur */
/*****************************/
/* mais sans le compteur T_T */
.description-counter {
  padding: 0vw 15vw;
}

.description-counter .para-counter {
  padding: 2vw 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.description-counter .para-counter p {
  font-size: 1.8rem;
  font-weight: var(--light);
}

.description-counter .separator {
  width: 100%;
  height: 0.2vw;
  background-color: rgb(var(--darkest));
}

/***********************/
/* dernière description*/
/***********************/
.final-description {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5vw;
}

/* partie gauche */
.final-description .left-final {
  flex-basis: 60%;
  margin: 5vw 0 10vw 0;
}

.final-description .left-final h3 {
  padding: 1.5vw 1vw;
  font-size: 2rem;
  font-weight: var(--regular);
}

.final-description .left-final .para-final {
  padding: 2vw 2vw;
  background-color: rgba(var(--blue-matte), 25%);
  border-radius: 2vw;
}

.final-description .left-final .para-final p {
  padding: 0 0 0 1vw;
  font-size: 1.7rem;
  font-weight: var(--light);
}

.final-description .left-final .para-final .attributs {
  margin: 2vw 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.final-description .left-final .para-final .attributs p {
  margin: 0vw 1vw;
  padding: 0.7vw;
  border: 0.2vw solid rgb(var(--gray-07));
  border-radius: 1vw;
}

/* partie droite */
.final-description .right-final {
  flex-basis: 35%;
  padding-top: 2vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.final-description a p {
  font-size: 1.7rem;
  font-weight: var(--regular);
  margin: 0.5vw;
  padding: 1vw 1.5vw;
  border-radius: 1.2vw;
  background-color: rgb(var(--gray-03));
}

.final-description .thisWeb {
  position: relative;
}

.final-description .thisWeb p {
  padding-right: calc(3vw + 0.5rem);
  background-color: rgb(var(--background-main));
  border: 0.2vw solid rgb(var(--darkest));
}

.final-description .thisWeb::after {
  content: ">";
  position: absolute;
  font-size: calc(1vw + 1.5rem);
  right: 2vw;
  top: calc(1vw + 0.15rem);
}

.final-description .thisWeb:hover p {
  background-color: rgba(var(--purple), 0.2);
}

.final-description .thisWeb p::before {
  content: "Go to ";
}

.final-description .thisWeb p::after {
  content: " site";
}

@media screen and (max-width: 1215px) and (min-width: 981px) {
  .description-counter {
    padding: 0vw 10vw;
  }

  .final-description {
    flex-direction: column;
  }
  .final-description .right-final {
    flex-direction: column;
    align-items: center;
  }
  .final-description .final {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 981px) {
  .description .first-description {
    flex-direction: column-reverse;
  }
  .description .first-description .img {
    flex-basis: auto;
    width: 100%;
  }
  .description .first-description .img img {
    flex-basis: auto;
    width: 50%;
  }
  .description-counter {
    padding: 0vw 6vw;
  }
  .final-description {
    flex-direction: column;
  }
  .final-description .left-final .para-final .attributs {
    flex-direction: column;
  }

  .final-description .left-final .para-final .attributs {
    margin: 0;
  }
  .final-description .left-final .para-final .attributs p {
    text-align: center;
    width: 90%;
    margin-top: 2vw;
  }
  .final-description .right-final {
    flex-direction: column;
    align-items: center;
  }
  .final-description .final {
    flex-direction: column;
    align-items: center;
  }
}