@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 100;
    src: local('Lora'), url('fontes/Lora-VariableFont_wght.ttf') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: Lora, TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
  scroll-behavior: smooth;
}

h1,
h2,
h3 {
  text-align: center;
  font-weight: 100;
}

img {
  max-width: 100%;
  height: auto;
}

.titre-tirets {
  font-family: sans-serif;
  font-weight: normal;
  color: #78c6d9;
  text-transform: uppercase;
}

.titre-tirets::before {
  content: "— ";
}

.titre-tirets::after {
  content: " —";
}

.incassable {
  white-space: nowrap;
}

.align-vert {
  vertical-align: bottom;
}

.etroit {
  max-width: 640px;
  padding: 1.5em;
  margin: 2em auto;
}

.etroit h2 {
  margin-top: 2em;
}

#banniere {
  width: 100%;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: url("images/tour-du-Bec-Hellouin.webp") center / cover;
}

#banniere-haut {
  display: flex;
  justify-content: space-between;
}

#banniere-centre {
  text-align: center;
  color: white;
  flex-grow: 1;
  padding-bottom: 2vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

body.page #banniere {
  height: 75svh;
}

#banniere-bas {
  padding: 1em;
  background: rgb(255 255 255 / 60%);
  text-align: center;
  width: 90%;
  margin: 0 auto;
}

@media screen and (max-width: 960px) {
  #banniere-bas {
    width: 100%;
  }
}

#banniere-haut > div {
  display: flex;
  gap: 1em;
  align-items: center;
  margin: 1em;
}

#banniere-haut #langues {
  gap: 0;
  /* pour les très petits écrans */
  margin-right: 0;
}

#langues img {
  /* supprime le blanc sous les pictos */
  display: block;
}

#langues div {
  padding: 1em;
}

#langues .langue-select {
  background: rgb(255 255 255 / 50%);
  border-radius: 10px;
}

.chambre .reservez {
  grid-area: bouton;
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  background: #9fc4ce;
  padding: 1em 2em;
}

#banniere-haut .reservez {
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #a0b9d5;
  background: white;
  padding: 1em 2em;
}

footer a,
#banniere a {
  color: white;
  text-decoration: none;
}

#temoignages-source a {
  color: #9c9d9c;
}

#contacts a {
  font-size: 2em;
  color: #78c6d9;
}

#acces a {
  color: black;
}

#pied-de-page-texte a {
  color: white;
}

#legal a {
  display: block;
  margin: 0 auto;
  text-decoration: none;
}

#banniere-haut .bouton a {
  color: #a4bed7;
  text-decoration: none;
}

#banniere h1 {
  font-size: max(3.3vw, 28px);
  margin: 0;
}

#banniere h2 {
  margin: 5px;
  font-size: max(2.4vw, 22px);
}

#presentation {
  text-align: center;
  font-size: max(2.5vh, 16px);
  text-shadow: 1px 1px 3px white;
  max-width: 75%;
  margin: 1vh auto 4vh;
}

#galerie {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: space-between;
  margin: 0 auto 2vh;
  max-width: 1600px;
}

#galerie img {
  height: 8vw;
  width: auto;
}

.agrandir {
  font-size: 0.8rem;
  color: #333;
  text-align: center;
}

#description {
  max-width: 90%;
  margin: 0 auto;
  padding: 2em 3vw;
  background: #9fc4ce;
  text-align: center;
  font-family: sans-serif;
  font-size: 1.2em;
}

#description p {
  max-width: 50em;
  margin: 1em auto;
  line-height: 1.6;
}

#description p:first-child {
  margin-top: 0;
}

#description p:last-child {
  margin-bottom: 0;
}

#chambres,
#reservation {
  max-width: 1300px;
  margin: 8em auto;
  padding: 0 20px;
  text-align: center;
}

.chambre {
  margin: 5em 0;
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 1.4fr;
  grid-template-areas:
  "titre        img"
  "description  img"
  "bouton       img";
}

.chambre h3,
#reservation h3 {
  grid-area: titre;
  font-size: max(2.5vw, 2em);
  margin: 0.5em;
}

#chambres .chambre img {
  grid-area: img;
}

.chambre .descr {
  grid-area: description;
}

.chambre .bouton {
  text-align: center;
}

#chambres .chambre p {
  color: #6a6a6a;
  font-family: sans-serif;
  line-height: 1.7;
}

#temoignages {
  background:
  linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)),
  url("images/coucher-de-soleil.webp") center 70% / cover;
  padding: 8em 0;
  color: white;
}

#temoignages .titre-tirets {
  color: white;
}

#temoignages h3 {
  font-size: max(2.5vw, 2em);
}

#temoignages-fond {
  max-width: 1450px;
  margin: 0 auto;
  padding: 4em 2vw;
  background: rgb(255 255 255 / 60%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3em;
}

#temoignages-fond > div {
  max-width: 200px;
  text-align: center;
  color: black;
  font-size: max(0.8vw, 1rem);
}

#temoignages-fond h4 {
  width: fit-content;
  margin: 1.5em auto 0;
  padding-top: 0.5em;
  border-top: 2px solid #ccc;
  font-family: sans-serif;
}

#temoignages-fond .date {
  font-family: sans-serif;
}

#temoignages-source {
  text-align: center;
  font-family: sans-serif;
  font-size: 0.7rem;
  color: #aea7a3;
  margin-top: 5em;
}

@media (max-width: 1450px) {
  #temoignages {
    padding: 1em 1.5em;
  }

  #temoignages-source {
    margin-top: 1em;
  }
}

#reservation {
  scroll-margin-top: 5em;
}

#reservation #booking {
  font-size: 1.6em;
  margin-top: 1.3em;
}

#acces {
  margin-top: 3em;
  display: flex;
  justify-content: center;
  align-items: end;
  flex-wrap: wrap;
  gap: 3em;
  font-family: sans-serif;
  line-height: 1.5;
  color: #555;
}

footer {
  display: flex;
  flex-direction: column;
  color: white;
  text-align: center;
  font-family: sans-serif;
}

#pied-de-page-texte {
  padding: 0 3em 5em;
  background: linear-gradient(#82b5cb, #cadfe9);
}

#pied-de-page-texte h1 {
  font-family: Lora, serif;
  font-size: max(3vw, 1.5rem);
  margin-bottom: 0;
}

#pied-de-page-texte h2 {
  font-family: Lora, serif;
  margin-top: 0;
  font-size: max(2vw, 1.2rem);
}

#adresse {
  font-size: max(1.2vw, 1rem);
}

#meta {
  display: flex;
  gap: 1em;
  justify-content: center;
}

#legal {
  margin: 4em auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5em;
  max-width: 1000px;
}

#helixo {
  vertical-align: middle;
}

@media (hover: none), (max-width: 1024px) {
  .agrandir .pc {
    display: none;
  }

  .agrandir small::before {
    content: "Appuyez";
  }

  .agrandir.english small::before {
    content: "Tap";
  }
}

@media screen and (max-width: 1024px) {
  #banniere h1,
  #banniere h2 {
    font-weight: 700;
  }

  #banniere-bas {
    width: 100vw;
    padding-top: 2em;
  }

  #galerie {
    width: 100%;
    justify-content: center;
  }

  #description {
    max-width: none;
  }

  #chambres {
    margin: 5em auto;
  }

  .chambre {
    gap: 1em;
    grid-template-columns: 1fr;
    grid-template-areas:
    "titre"
    "img"
    "description"
    "bouton";
  }

  .chambre h3 {
    margin-bottom: 0;
  }
}

#galerie-mobiles {
  display: none;
}

@media screen and (max-width: 640px) {
  #banniere-bas {
    padding-top: 1em;
  }

  #presentation {
    font-size: 16px;
    max-width: none;
  }

  #galerie img {
    height: 14vh;
  }

  #galerie .pc {
    display: none;
  }

  #galerie-mobiles {
    display: block;
    text-align: center;
  }

  #galerie-mobiles .flex {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 1em;
  }

  #galerie-mobiles .flex a {
    flex: 1;
    width: 0;
  }

  #galerie-mobiles .flex a img {
    height: auto;
  }
}

@media screen and (max-width: 390px) {
  body:not(.page) #banniere {
    background-size: 1400px;
  }

  #langues div,
  #banniere-haut .reservez {
    font-size: 0.8em;
  }

  #presentation {
    font-size: 14px;
  }
}

@media screen and (max-width: 360px) {
  #banniere-bas {
    padding: 0.3em;
  }
}