/*Section accueil*/

.accueil {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-left: 30px solid #0a0a0a;
  border-right: 30px solid #0a0a0a;
  border-top: 30px solid #0a0a0a;
}

.accueil::after {
  content: "";
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  left: 0;
  z-index: -50;
  background: url("../img/entete-accueil-v2.webp") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*Section promesse*/

.promesse {
  background-color: #0a0a0a;
  display: flex;
}

.promesse > div {
  width: 50%;
}

.promesse > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6em;
  padding-bottom: 6em;
}

.promesse > div .miroir {
  width: 40%;
  padding-top: 2em;
}

.paragraphe-promesse {
  padding-top: 25px;
  width: 50%;
  text-align: center;
}

/*Section caroussel promesse*/

.promesse-caroussel {
  background-color: #161616;
  height: 780px;
  overflow-x: hidden;
}

.text-nav-caroussel {
  position: relative;
  top: 50%;
  left: 65%;
  transform: translateY(-50%);
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text-nav-caroussel > p {
  width: 70%;
  text-align: center;
}

.text-nav-caroussel > .caroussel-nav-element {
  display: flex;
  padding-top: 2em;
}

.slide-caroussel {
  position: relative;
  top: 50%;
}

.caroussel-item {
  border-radius: 20px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  height: 500px;
  width: 400px;
  transition: 0.2s ease;
  cursor: pointer;
}

.caroussel-item:nth-child(1) {
  top: 50%;
  right: 50%;
  transform: translate(112.5px, -50%);
  height: 300px;
  width: 225px;
}

.caroussel-item:nth-child(2) {
  top: 50%;
  right: 50%;
  transform: translate(225px, -50%);
  height: 600px;
  width: 450px;
}

.caroussel-item:nth-child(3) {
  top: 50%;
  right: 50%;
  transform: translate(-275px, -50%);
}

.caroussel-item:nth-child(4) {
  top: 50%;
  right: 50%;
  transform: translate(-725px, -50%);
}

.caroussel-item:nth-child(n + 5) {
  opacity: 0;
  right: 2300px;
}

/*Section preuve chiffre */

.preuve-chiffre {
  background-color: #0a0a0a;
  display: flex;
  justify-content: space-around;
  padding: 6em;
}

.preuve-chiffre > div {
  display: flex;
  align-items: center;
}

.preuve-chiffre > div > .big-number {
  font-weight: bold;
  font-size: 100px;
  margin-right: 15px;
}

.preuve-chiffre > div > p:nth-child(2) {
  font-size: 24px;
  font-weight: bold;
}

/*Section Commodités*/

.commodites {
  background-image: url("../img/bg-commodites.webp");
  background-attachment: fixed;
  padding-top: 6em;
  padding-bottom: 6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.commodites-content {
  padding-top: 4em;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 100px;
}

.commodite {
  display: flex;
  justify-content: space-around;
  align-self: center;
  width: 411px;
  height: 154px;
}

.commodite > div:nth-child(1) {
  width: 25%;
  margin-right: 10px;
}

.commodite > div:nth-child(1) > img {
  width: 100%;
  height: auto;
}

/*Section mot des propriétaires*/

.hotes {
  background-image: url(../img/mot-proprietaires-bg.webp);
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6em;
}

.mot-proprietaires {
  display: flex;
  justify-content: center;
}

.mot-proprietaires > div:nth-child(1) {
  border-radius: 50%;
  width: 290px;
  height: 290px;
  overflow: hidden;
  margin-right: 4em;
}

.mot-proprietaires > div:nth-child(2) {
  width: 35%;
  font-family: "Tangerine", serif;
  font-size: 40px;
}

.signature-mot-proprietaires {
  text-align: end;
  width: 100%;
  margin-top: 1em;
}

/*Section avis*/

.avis-clients {
  padding: 6em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(../img/bg-avis.webp);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.avis-clients > h2 {
  text-align: center;
}

.avis-clients > div {
  padding-top: 4em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.avis {
  width: auto;
  height: auto;
  margin: 50px;
  padding: 2em;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.avis > p:nth-child(1) {
  text-align: center;
}

.avis > div {
  display: flex;
  justify-content: space-between;
  text-align: end;
  padding-top: 2em;
}

.star {
  width: 17px;
  padding: 2px;
}

.star > img {
  width: 100%;
  height: auto;
}

.stars {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/*Section prestations*/

.prestations {
  background-color: #161616;
  display: flex;
}

.prestations > div {
  width: 50%;
}

.prestations > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6em;
  padding-bottom: 6em;
}

/*Section alentours*/

.alentours {
  background-color: #161616;
  overflow-x: hidden;
}

.alentours > div:nth-child(1) {
  padding-top: 6em;
  text-align: center;
  display: flex;
  justify-content: center;
}

.alentours > div:nth-child(2) {
  height: 750px;
}

.slide-caroussel2 {
  position: relative;
  top: 50%;
}

.caroussel-item2 {
  border-radius: 20px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  height: 500px;
  width: 400px;
  transition: 0.2s ease;
  cursor: pointer;
}

.caroussel-item2:nth-child(1) {
  top: 50%;
  right: 50%;
  transform: translate(112.5px, -50%);
  height: 300px;
  width: 225px;
}

.caroussel-item2:nth-child(2) {
  top: 50%;
  right: 50%;
  transform: translate(225px, -50%);
  height: 600px;
  width: 450px;
}

.caroussel-item2:nth-child(3) {
  top: 50%;
  right: 50%;
  transform: translate(675px, -50%);
}

.caroussel-item2:nth-child(4) {
  top: 50%;
  right: 50%;
  transform: translate(1125px, -50%);
}

.caroussel-item2:nth-child(n + 5) {
  opacity: 0;
  position: absolute;
  right: -800px;
}

.text-nav-caroussel2 {
  position: relative;
  top: 50%;
  left: 2%;
  transform: translateY(-50%);
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text-nav-caroussel2 > p {
  width: 70%;
  text-align: center;
}

.text-nav-caroussel2 > .caroussel-nav-element2 {
  display: flex;
  padding-top: 2em;
}

/* Section transports*/

.transports {
  background-image: url("../img/bg-deplacements.webp");
  background-attachment: fixed;
  padding-top: 6em;
  padding-bottom: 6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.transport-content {
  padding-top: 4em;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 100px;
}

.transport {
  display: flex;
  justify-content: space-around;
  padding: 2em;
  width: 411px;
  height: 200px;
}

.transport > div:nth-child(1) {
  width: 25%;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.transport > div:nth-child(2) {
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.transport > div:nth-child(1) > img {
  width: 100%;
  height: auto;
}

@media (max-width: 1600px) {
  .commodites-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1500px) {
  /* Promesse Caroussel*/
  .text-nav-caroussel {
    width: 28%;
    left: 70%;
  }
  /*Caroussel Ardèche*/

  .text-nav-caroussel2 {
    left: 3%;
    transform: translateY(-50%);
    width: 28%;
  }
}

@media (max-width: 1400px) {
  .avis-clients > div {
    flex-direction: column;
    align-items: center;
    margin-top: 1em;
  }

  /*Avis*/
  .avis-clients > div {
    padding-top: 4em;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .avis {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 1250px) {
  /*Promesse*/

  .promesse > div .miroir {
    width: 60%;
  }

  /*Promesse Caroussel*/
  .text-nav-caroussel {
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
  }

  .slide-caroussel {
    top: 62%;
  }

  .slide-caroussel2 {
    top: 62%;
  }

  .promesse-caroussel {
    height: 1000px;
  }

  /*Preuve chiffre*/

  .preuve-chiffre > div {
    display: block;
  }
  /*Caroussel Ardèche*/

  .text-nav-caroussel2 {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 80%;
  }

  .alentours > div:nth-child(2) {
    height: 1050px;
    padding-bottom: 2em;
  }

  .alentours > div:nth-child(1) {
    padding-bottom: 2em;
  }

  .avis-clients {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  .transport-content {
    padding-top: 4em;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 100px;
  }
}

@media (max-width: 1000px) {
  .preuve-chiffre {
    padding-left: 1.5em;
    padding-right: 1.5em;
    flex-direction: column;
    align-items: center;
  }

  .preuve-chiffre > div {
    display: flex;
  }

  /*Commodités*/

  .commodites-content {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 50px;
  }

  /*Section mot des propriétaires*/

  .hotes {
    padding-top: 6em;
    padding-bottom: 6em;
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  .mot-proprietaires {
    flex-direction: column;
    align-items: center;
  }

  .mot-proprietaires > div:nth-child(1) {
    margin-right: 0;
    margin-bottom: 2em;
  }

  .mot-proprietaires > div:nth-child(2) {
    width: 100%;
  }

  .signature-mot-proprietaires {
    text-align: end;
    width: 100%;
    margin-top: 1em;
  }
}

@media (max-width: 900px) {
  /*Promesse*/
  .promesse {
    display: block;
  }

  .promesse > div {
    width: 100%;
  }

  .promesse > div .miroir {
    width: 50%;
  }

  /*Promesse Caroussel*/
  .text-nav-caroussel {
    width: 80%;
  }

  /*Caroussel Ardèche*/

  .text-nav-caroussel2 {
    width: 90%;
  }

  /*Prestations*/

  .prestations {
    display: block;
  }

  .prestations > div {
    width: 100%;
  }
}

@media (max-width: 750px) {
  .alentours > div:nth-child(2) {
    height: 1100px;
    padding-bottom: 0;
  }

  .accueil {
    border-left: 15px solid #0a0a0a;
    border-right: 15px solid #0a0a0a;
    border-top: 15px solid #0a0a0a;
  }
}

@media (max-width: 700px) {
  .slide-caroussel2 {
    top: 64%;
  }
}

@media (max-width: 600px) {
  /*Promesse Caroussel*/
  .caroussel-item {
    height: 330px;
    width: 264px;
  }

  .caroussel-item:nth-child(2) {
    height: 400px;
    width: 300px;
    transform: translate(150px, -50%);
  }

  .caroussel-item:nth-child(1) {
    transform: translate(74.25px, -50%);
    height: 198px;
    width: 148.5px;
  }

  .caroussel-item:nth-child(3) {
    transform: translate(-183px, -50%);
  }

  .caroussel-item:nth-child(4) {
    transform: translate(-364.5px, -50%);
  }

  .promesse-caroussel {
    height: 750px;
  }

  .slide-caroussel {
    top: 67%;
  }

  .slide-caroussel2 {
    top: 75%;
  }

  .text-nav-caroussel {
    width: 85%;
    top: 6%;
  }

  /*Caroussel Ardèche*/

  .caroussel-item2 {
    height: 330px;
    width: 264px;
  }

  .caroussel-item2:nth-child(1) {
    top: 50%;
    right: 50%;
    transform: translate(74.25px, -50%);
    height: 198px;
    width: 148.5px;
  }

  .caroussel-item2:nth-child(2) {
    top: 50%;
    right: 50%;
    transform: translate(150px, -50%);
    height: 400px;
    width: 300px;
  }

  .caroussel-item2:nth-child(3) {
    top: 50%;
    right: 50%;
    transform: translate(447px, -50%);
  }

  .caroussel-item2:nth-child(4) {
    top: 50%;
    right: 50%;
    transform: translate(744px, -50%);
  }

  .caroussel-item2:nth-child(n + 5) {
    opacity: 0;
    position: absolute;
    right: -800px;
  }

  .alentours > div:nth-child(2) {
    height: 850px;
  }

  .text-nav-caroussel2 > p {
    width: 85%;
  }

  .slide-caroussel2 {
    top: 68%;
  }
}

@media (max-width: 700px) {
  .avis {
    width: 400px;
    margin-left: 0;
    margin-right: 0;
  }

  .avis-clients > div {
    padding-top: 0;
  }
}

@media (max-width: 500px) {
  .paragraphe-promesse {
    width: 80%;
  }

  .alentours > div:nth-child(2) {
    height: 950px;
  }

  .commodite {
    width: 328.8px;
    height: 180px;
    padding: 10px;
  }

  .transport {
    width: 328.8px;
    height: 160px;
    padding: 10px;
  }

  .commodite > div:nth-child(1) {
    display: flex;
    align-items: center;
  }

  .commodite > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .commodites {
    background-attachment: inherit;
    background-size: cover;
  }

  .avis {
    width: 328.8px;
  }

  .avis-clients {
    padding-left: 0;
    padding-right: 0;
    background-attachment: inherit;
  }

  .transports {
    background-attachment: inherit;
    background-size: cover;
  }
}

@media (max-width: 400px) {
  /*Promesse Caroussel*/

  .text-nav-caroussel {
    width: 95%;
    top: 6%;
  }

  /*Caroussel Ardèche*/

  .slide-caroussel2 {
    top: 74%;
  }
}