/*** Couleurs ***/

@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&family=Carrois+Gothic+SC&family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");

/* Couleurs */
:root {
  /* Palette verte (votre charte) */
  --color-yellow-light: #ecf2dd;
  --color-green-light-bright: #a4cf96;
  --color-green-light-light2: #ecffe5;
  --color-green-light-light: #d6e8d0;
  --color-green-light: #b7ceb0;
  --color-green: #869681;
  --color-green2: #838981;
  --color-green-rgb: 134, 150, 129;
  --color-green-dark: #555f52;
  --color-green-dark2: #525d4a;
  --color-green-dark3: #343932;
  --body-bg: #e6ebe3;
  --color-font: #444;

  /* Or (accent prestige) */
  --color-gold: #9b7a2f;
  --color-gold-light: #c5a24e;
  --color-gold-pale: #e8d9b0;

  /* Typographie */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Jost", system-ui, sans-serif;
  --font-logo: "Alumni Sans Pinstripe", sans-serif;

  /* Espacements */
  --section-v: 80px;
  --content-max: 1100px;
  --gutter: 48px;

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur: 0.35s;
}

/* CSS reset */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  /* border: solid 1px rgba(0, 0, 0, 0.1); */
}

html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--body-bg);
  font-family: var(--font-serif);
  color: var(--color-font);
  position: relative;
}
main {
  z-index: 1;
}
h1 {
  text-wrap: balance;
  font-family: "Alumni Sans Pinstripe", sans-serif;
}
h2 {
  letter-spacing: 0.1ch;
  text-wrap: balance;
  color: #605f5f;
  margin: 0 auto 0.5rem;
  font-family: "Sofia Sans Condensed";
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  padding-block: 1rem;
}
h4 {
  font-size: 1.3rem;
  font-weight: 600;
  padding-inline: 2rem;
}
p,
li,
figcaption {
  text-wrap: balance;
}
p {
  margin: 12px auto;
  font-size: 1rem;
  text-align: left;
  line-height: 1.75;
  letter-spacing: 0.1ch;
  max-width: 96%;
}
@media (max-width: 600px) {
  p {
    line-height: 1.5;
  }
}
li {
  margin: 6px auto;
  font-size: 1.2rem;
  text-align: left;
}
a {
  color: inherit;
}

h3 {
  font-size: 2.2rem;
  text-align: center;
  font-weight: 500;
  position: relative;
  text-wrap: balance;
  width: fit-content;
  margin-block: 2rem;
  margin-inline: auto;
}
.center {
  text-align: center;
}
section {
  overflow: auto;
  position: relative;
}
section.dark {
  background: linear-gradient(165deg, var(--color-green), #687464);
  background: linear-gradient(
    165deg,
    var(--color-green),
    var(--color-green-dark)
  );
  color: white;
}
section.grey {
  background: linear-gradient(#b1b1b1, var(--color-gray));
  color: white;
}
section.green {
  background: var(--color-green);
  color: white;
}
section.light {
  background: var(--body-bg);
  color: var(--color-font);
}
.section-description {
  margin: 2rem auto;
  font-weight: 300;
  position: relative;
  width: fit-content;
  max-width: min(100ch, 96%);
}
.section-description h3 {
  margin-block: 0 1rem;
}
.section-description ul {
  padding-inline: 2rem 1rem;
  line-height: 1.35;
}
.section-description ul li {
  padding-left: 1.35rem;
  position: relative;
}
.section-description ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}
.section-description ul.plus li::before {
  content: "+";
}

/* Bouton  */
a.open-details {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: #555;
  color: var(--color-green-dark);
  border-bottom: 0.5px solid var(--color-gold);
  padding-bottom: 3px;
  margin: 1rem auto;

  cursor: pointer;
  transition: all 0.25s ease;
}
.dark a.open-details,
.green a.open-details {
  color: white;
  border-bottom: 0.5px solid var(--color-gold-pale);
}
/* Hover */
a.open-details:hover,
.green a.open-details {
  transform: translateY(-5px);
}

a.call-to-action {
  display: inline-block;
  width: fit-content;
  min-height: 45px;
  margin: 1rem auto;
  padding: 0.4rem 1.4rem;
  border-radius: 2px;
  font-size: 1.1rem;
  letter-spacing: 1px;
  font-weight: 400;
  color: white;

  text-decoration: none;
  text-transform: uppercase;

  cursor: pointer;
  min-width: 100px;
  background-color: var(--color-gold);
  color: #333;
  color: #fff;
  text-align: center;
  transition: 0.2s ease-in-out;
  font-family: var(--font-sans);
  vertical-align: middle;
}
.call-to-action span {
  display: block;
  text-transform: none;
  font-size: 0.9rem;
}
.call-to-action:hover {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
  transform: translate(0, -4px);
  background-color: var(--color-gold-light);
}

.discover {
  display: block;
  width: fit-content;
  margin: 0.5rem auto;
  margin-inline: auto;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  text-decoration: none;

  cursor: pointer;
  border: solid 1px rgba(255, 255, 255, 0.7);
  min-width: 100px;

  background-color: var(--color-gold);
  color: #fff;
  transition: 0.2s ease-in-out;
}
.discover:hover {
  background-color: var(--color-gold-light);
  border: solid 1px var(--color-gold);
  color: var(--color-green2);
}

.hide {
  opacity: 0;
}

.photo-panorama {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.photo-panorama img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/**** HEADER****/
header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  padding-block: 0;

  opacity: 0;
  animation: fade-in 1s 1s ease-out forwards;
  z-index: 10;
}

.titre h1 {
  opacity: 0;
  transition: opacity 2s 0.5s ease;
}
.titre {
  width: fit-content;
  margin: 1rem auto;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
}
body.fonts-loaded .titre {
  opacity: 1;
}
body.fonts-loaded .titre h1 {
  opacity: 1;
}
.titre .logo {
  position: relative;
  font-size: clamp(3rem, 1.75rem + 4vw, 4rem);
  font-family: var(--font-logo);
  color: var(--color-gray-darker);
  line-height: clamp(3.5rem, 1.625rem + 6vw, 5rem);
  font-weight: 700;
  text-align: center;
  transition: 0.3s ease-in-out;
}
.titre .logo img {
  display: inline-block;
  height: clamp(3.75rem, 0rem + 12vw, 7.5rem);
  height: clamp(3.5rem, 1.8333rem + 6.6667vw, 6rem);
  width: auto;
  /* margin-inline: clamp(0.5rem, -0.5rem + 3.2vw, 1.5rem); */
  margin-inline: 0 clamp(0.5rem, -0.5rem + 3.2vw, 1.5rem);
  max-width: 200px;
  display: inline-block;
  vertical-align: text-top;
  transform: translateY(0.5rem);
  transition: 0.3s ease-in-out;
}

.titre .logo a + img {
  display: none;
  opacity: 0;
  margin-inline: clamp(0.5rem, -0.5rem + 3.2vw, 1.5rem) 0;
}
.home .titre {
  display: none;
}

.titre .logo a {
  text-decoration: none;
  display: inline-block;
}
.titre h1 {
  letter-spacing: 0.1ch;
  text-wrap: balance;
  color: #605f5f;
  font-family: "Sofia Sans Condensed";
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: right;
  line-height: 1;
  transform: translateY(-1rem);
  color: var(--color-green-dark);
}
/* séparateur */
.separateur {
  position: relative;
  width: 100%;
  margin: 2rem 0;
}
.separateur img {
  height: 45px;
  width: auto;
  display: block;
  margin: 0 auto;
}
.separateur::before,
.separateur::after {
  content: "";
  height: 2px;
  width: 30%;
  background-color: red;
  background-color: var(--color-gold);
  position: absolute;
  top: 50%;
}
.separateur::before {
  left: calc(50% - 50px);
  transform: translateX(-100%);
  background: linear-gradient(to left, var(--color-gold), transparent);
}
.separateur::after {
  right: calc(50% - 50px);
  transform: translateX(100%);
  background: linear-gradient(to right, var(--color-gold), transparent);
}

.dark .separateur::before,
.green .separateur::before {
  background: linear-gradient(to left, var(--color-gold-pale), transparent);
}
.dark .separateur::after,
.green .separateur::after {
  background: linear-gradient(to right, var(--color-gold-pale), transparent);
}
.dark .separateur img,
.green .separateur img {
  filter: brightness(2) saturate(0.3);
}
.separateur2 {
  width: 100%;

  overflow: visible;
  margin-inline: auto;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    #687464 0%,
    #687464 50%,
    var(--body-bg) 50%,
    var(--body-bg) 100%
  );
}
.separateur3 {
  width: 100%;
  overflow: visible;
  margin-inline: auto;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    var(--body-bg) 0%,
    var(--body-bg) 50%,
    var(--body-green) 50%,
    var(--body-green) 100%
  );
}

.separateur2 img,
.separateur3 img {
  width: 150px;
  height: auto;
  margin-inline: auto;
  display: block;
}
.dark .separateur2 img,
.separateur3 img {
  width: 150px;
  height: auto;
  margin-inline: auto;
  display: block;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}
/* titre page d'accueil */
header {
  position: relative;
  margin: auto;
  width: 100%;
  min-height: 2rem;
}
.home header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
@media screen and (max-width: 800px) {
  .home header {
    background: none;
  }
}
header.scroll {
  height: 50px;
  min-height: 50px;
  background-color: transparent;
  background-image: none;
  transition: none;
}
header.scroll .titre img {
  transform: scale(0);
  max-width: 0;
  margin-top: 0;
}
header.scroll .header-titre {
  font-size: 1.4rem;
  color: #666;
}

header.scroll h1 {
  text-shadow: none;
  font-weight: 300;
  letter-spacing: normal;
  color: inherit;
  font-size: clamp(1rem, 0.6727rem + 1.4545vw, 1.4rem);
  line-height: 3rem;
  opacity: 0;
}
header.scroll div h1 span {
  font-size: clamp(1.3rem, 0.55rem + 3.3333vw, 1.8rem);
  color: #666;
}

/* Animation keyframes */
@keyframes h2-slide-in {
  0% {
    opacity: 0;
    transform: translateY(200%);
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Le texte revient à sa position normale */
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes h2-background {
  0% {
    background: rgba(0, 0, 0, 0.4);
  }
  100% {
    background: rgba(0, 0, 0, 0.1);
  }
}

.header-content-image {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: -1;

  background-position: center center;
  background-size: cover;
}

.header-content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.welcome {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

.welcome video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 110%;
  height: 110%;
}
.welcome .video-content {
  opacity: 0; /* vidéo invisible au départ */
  transition: opacity 1.5s ease-in-out; /* durée du fondu */
  width: 110%;
  height: 110%;
  object-fit: cover; /* recouvre la div proprement */
}
.welcome .video-content.visible {
  opacity: 1; /* devient visible */
}
.welcome-logo {
  width: fit-content;
  margin: 0 auto;
}
.welcome-logo img {
  height: 80px;
  width: auto;
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; /* couvre tout le calque */
  background-position: center; /* centré */
  background-repeat: no-repeat;
  opacity: 1; /* visible au départ */
  transition: opacity 1.5s ease-in-out; /* fondu progressif */
  pointer-events: none; /* laisse passer les clics sur la vidéo si besoin */
  z-index: -1;
  transform: scale(1);
  animation: zoomBackground 5s ease-out forwards;
}
.video-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.video-overlay.hidden {
  opacity: 0;
  transition: opacity 1s ease;
}
@keyframes zoomBackground {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08); /* zoom léger */
  }
}

/** Titre page d'accueil **/
.titre-bastidedesgrandschenes {
  font-size: 4rem;
  font-family: "Alumni Sans Pinstripe", sans-serif;
  margin: 0;
  letter-spacing: normal;
  text-align: center;
}
.titre-accueil {
  position: absolute;
  top: 25svh;
  left: 50%;
  translate: -50%;
  text-align: center;
  z-index: 2;
  width: 94%;
}
.titre-accueil img {
  width: 80px;
  margin-inline: auto;

  opacity: 0;
  animation: slideUp 2s 3s ease-in-out forwards; /* slideUp dans _styles-menu.css */
}
.titre-accueil p {
  color: white;
  text-align: center;
  opacity: 1;
}
.titre-accueil a {
  text-decoration: none;
}

.titre-accueil h2 {
  color: white;
  font-weight: 400;
  text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0);
  border: solid 0px rgba(255, 255, 255, 0.2);
  font-family: "Source Sans 3", sans-serif;
  width: fit-content;
  padding: 0.75rem 1.5rem;
  margin: 2rem auto;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  /* animation: slideUp 2s 3.6s ease-in-out forwards; */ /* slideUp dans _styles-menu.css */
  line-height: 1;
  opacity: 0;
  animation: slideUp 3s 1s ease-in-out forwards; /* slideUp dans _styles-menu.css */
}

h1.titre-accueil-titre {
  font-size: clamp(3rem, 1rem + 6.4vw, 5rem);
  text-transform: uppercase;
  font-weight: 700;
  margin-block: 0;
  margin-inline: auto;
  /* animation: slideUp 2s 3.3s ease-in-out forwards; */ /* slideUp dans _styles-menu.css */
  animation: appear 2s 0.5s ease-in-out forwards;
  font-family: "Alumni Sans Pinstripe", sans-serif;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
  text-shadow: 
  /* 1. L'épaisseur (le "Faux Bold" en blanc) */ 1px 0 0 white,
    -1px 0 0 white, 0 1px 0 white, 0 -1px 0 white,
    /* 2. L'ombre portée (en noir) */ 0px 0px 4px rgba(0, 0, 0, 0.8);
  line-height: 1.5;
  color: white;
  opacity: 0;
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.titre-accueil-texte {
  margin-top: 0;
  line-height: 1.5;
  text-align: center;
}
.titre-complement {
  position: absolute;
  bottom: 20%;
  left: 50%;
  translate: -50%;
  color: white;
  z-index: 2;
  width: 100%;

  font-size: 1.5rem;
  text-align: center;
}
.titre-complement img {
  width: 80px;
  margin-inline: auto;
  filter: brightness(1.5) drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.5));
}
.title-lines p {
  text-align: center;
}
/* .title-lines::after,
.title-lines::before {
  border-bottom: 1px solid;
  content: "";
  display: inline-block;
  margin: 8px 2rem 0;
  width: 0;
  vertical-align: middle;
  transition: 1.5s 0.4s ease-in-out;
}

.title-lines.visible::after,
.title-lines.visible::before {
  width: 15%;
} */

/**** Page d'accueil Bienvenue ****/

h2.accueil-intertitre {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 1rem 2rem;
  font-size: 2.6rem;
  text-align: center;
  width: 96%;
  font-weight: 500;
  color: var(--color-green-dark);
}
.dark h2.accueil-intertitre {
  color: white;
}

.section-container {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 400px;
  overflow: hidden;
  width: min(96%, 1200px);
  aspect-ratio: 5/3;
  margin-inline: auto;
}
.section-accueil-illustration {
  width: 100%;
  overflow: hidden;
  min-height: 60vh;
  max-height: 100vh;
  aspect-ratio: 4 / 5;
  position: relative;
}
.section-accueil-illustration > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  /* État initial : flou et invisible */
  filter: blur(20px);
  opacity: 0.7;
  transition: 0.8s ease-out;
}
.section-accueil-illustration > img.visible {
  filter: blur(0);
  opacity: 1;
  animation: zoomBackground 5s ease-out forwards;
}
.section-accueil-illustration > .section-accueil-texte {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  color: white;
}
.section-accueil-texte {
  width: min(96%, 700px);
  padding: 1rem 1.5rem;

  margin: 0 auto;

  text-wrap: balance;
  position: relative;
  z-index: 2;
  border-radius: 0;
  transition: 1s ease-out;
}
.section-accueil-texte strong {
  font-weight: 500;
}
.section-accueil-texte.visible {
  opacity: 1;
  padding-top: 1rem;
}

.section-accueil-texte p {
  line-height: 1.85;
  color: inherit;
  padding: 0.5rem 0;
  margin: 0 auto;
  opacity: 0;
  transition: 1s ease-out;
  color: inherit;
}
.section-accueil-texte.visible p {
  opacity: 1;
}
/*** Accueil Bienvenue ***/
#accueil-bienvenue {
  padding-block: 2rem 0;
}
#accueil-bienvenue > p {
  padding: 0;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/*** Accueil Introduction ***/
#accueil-introduction {
  padding-top: 0;
}
#accueil-introduction .section-accueil-texte {
  padding-block: 1rem;
}

/**** Page d'accueil Chambres d'hôtes ****/

#accueil-chambresdhotes {
  background: linear-gradient(
    to bottom,
    var(--color-green),
    var(--color-green-dark)
  );
  padding-block: 0;
  color: white;
  background: var(--color-green);
  background: linear-gradient(
    165deg,
    var(--color-green),
    var(--color-green-dark2)
  );
}
#accueil-chambresdhotes h2 {
  color: inherit;
}
.accueil-container-chambresdhotes {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2rem 1rem;
}
.accueil-container-chambresdhotes p {
  padding-inline: 1rem;
}

.accueil-chambre {
  position: relative;
  width: calc(30% - 10px);
  min-width: 350px;
}
.accueil-chambre a {
  aspect-ratio: 4/3;
  /* box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 4px rgba(255, 255, 255, 0.75); */
  display: block;
  text-decoration: none;
}
/* .accueil-chambre h4 {
  color: white;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50%;
  background: linear-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.25) 20%,
    rgba(0, 0, 0, 0.5)
  );
  width: 100%;
  text-align: center;
  z-index: 2;
  transition: 0.2s ease-in-out;
  border: solid 1px #ffffff55;
  padding: 0.75rem 1.5rem;
  margin-bottom: 1rem;
  width: auto;
} */
/* .accueil-chambre h4 {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);

  color: #fff;
  font-weight: 500;
  letter-spacing: 0.04em;

  padding: 0.6rem 1.4rem;
  margin: 0;

  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);

  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

  text-align: center;
  z-index: 2;

  transition: all 0.25s ease;
} */
.accueil-chambre h4 {
  position: relative;

  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;

  padding: 0.6rem 0.2rem 0.1rem;
  margin: 0 auto;
  width: fit-content;

  text-align: center;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0);

  transition: all 0.35s ease;
}
.accueil-chambre h4::after {
  content: "";
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(8px);
  transition: all 0.35s ease;
}
.accueil-chambre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  outline: 1px rgba(255, 255, 255, 0) solid;
}
.accueil-chambre a:hover img {
  outline: 1px rgba(255, 255, 255, 0.6) solid;
  border: 1px solid var(--color-gold-pale);
}
.accueil-chambre a:hover h4::after {
  background: var(--color-gold-pale);
  transform: translateY(2px);
}
/**** Page d'accueil Parc ****/
#accueil-parc {
  padding-block: 2rem;
  padding: 0;
}
/**** Page d'accueil Provence ****/
#accueil-provence {
  padding-block: 4rem;
  padding: 0;
}
#accueil-provence .section-accueil-texte {
  bottom: auto;
  top: 0;
}

/*** Accueil - Avis ***/
#accueil-avis {
  padding-block: 0;
  background: var(--color-green);
}
#accueil-avis h2.accueil-intertitre {
  color: white;
}

.avis-accueil {
  max-width: min(1000px, 96%);
  margin: 1.5rem auto;
  background: linear-gradient(
    45deg,
    var(--color-green-light-light),
    var(--color-green-light-bright)
  );
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  background: var(--color-yellow-light);
  translate: 15%;
  opacity: 0;
  transition: 1s ease-in-out;
  font-family: sans-serif;
}
.avis-accueil:nth-child(2n + 1) {
  translate: -15%;
}
.avis-accueil.visible {
  translate: 0;
  opacity: 1;
}

.avis-texte {
  position: relative;
  font-style: italic; /* Optionnel : souvent plus joli pour une citation */
  quotes: "« " " »"; /* Définit les types de guillemets (Français ici) */
  color: var(--color-font);
  font-size: 1.2rem;
  text-align: left;
  line-height: 1.75;
  letter-spacing: 0.1ch;
}

/* Guillemet ouvrant */
.avis-texte::before {
  content: open-quote;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--color-green); /* Utilise ta variable pour le style */
  vertical-align: middle;
  line-height: 0;
  translate: -0.5rem -0.2rem;
  display: inline-block;
}

/* Guillemet fermant */
.avis-texte::after {
  content: close-quote;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--color-green);
  vertical-align: middle;
  line-height: 0;
}
.avis-accueil h4 {
  max-width: 85ch;
  position: relative;
  padding-inline: 1.5rem;
  color: var(--color-green);
  font-weight: 500;
}
.avis-accueil h4::before {
  content: "";
  width: 40px;
  height: 40px;
  background-image: url(images/bastidedesgrandschenes-logo.500.png);
  background-size: contain;
  position: absolute;
  right: 0px;
}
.avis-accueil p {
  max-width: 100ch;
  line-height: 1.4;
}
.avis-signature {
  font-weight: 600;
  text-align: right;
  margin-right: 2rem;
  color: var(--color-green-dark);
}
/*** Bouton RESERVER ***/
.reserver-hebergement {
  position: sticky;
  right: 1rem;
  top: 2.5rem;
  width: fit-content;
  margin-inline: auto 0;
}

/*** Espacement et mise en forme***/

.center {
  text-align: center !important;
}

/**************  CHAMBRES  ****************/

/* Carrousel */
.carrousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  width: min(1200px, 96%);
  height: 94vh;
  margin: auto;
}

.photos-carrousel {
  display: flex;
  transition: transform 2s ease-in-out;
  scroll-behavior: smooth;
  height: 100%;
}

.photos-carrousel img {
  width: 100%;
  height: 100%;

  flex-shrink: 0;
  object-fit: cover;
}
.photos-carrousel div {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.carrousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(2);
  z-index: 1;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  cursor: pointer;
  padding: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.2s ease;
  color: white;
}

.carrousel button:hover {
  transform: translateY(-50%) scale(2.2);
}
.carrousel .prev {
  left: 1.25rem;
}

.carrousel .next {
  right: 1.25rem;
}
/* *** */

.chambres > .reservation {
  /* pas de CTA Reservation sur la page Chambres d'hôtes */
  display: none;
}
.chambre {
  padding-block: 0 50px;
  text-align: center;
  position: relative;
  color: white;
}

.chambre .section-description::before {
  content: "";
  width: 3px;
  background-color: var(--color-or-light);
  position: absolute;
  left: -1.75rem;
  top: 0.5rem;
  bottom: 0.5rem;
}
.chambre .dark .section-description::before {
  background-color: var(--color-or-light-light);
  width: 1px;
}

.nb-pers {
  width: fit-content;
  display: inline-block;
  position: absolute;
  font-size: 1.5rem;
  font-weight: 400;
  padding: 2rem 1.5rem;
  position: absolute;
  right: 0;
  top: 0;
}
.nb-pers img {
  vertical-align: middle;
  filter: invert(1);
}
.nb-pers {
  color: white;
}
.light .nb-pers {
  color: #666;
}
.nb-pers img {
  filter: invert(0);
}
.light .nb-pers img {
  filter: invert(0.7);
}
.chambre .call-to-action,
.chambre .open-details {
  display: inline-block;
  margin-inline: 0.5rem;
}

.chambre h3.sous-titre {
  margin-block: 4rem;
}

.chambre-tarif {
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: normal;
  display: inline-block;
  vertical-align: middle;
  margin-inline: 1rem;
}
.chambre-tarif > span {
  letter-spacing: 0.1ch;
  font-weight: 600;
}
.chambre-details {
  display: flex;
  gap: 0;
  width: fit-content;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 900px;
  margin-top: 1rem;
  margin-inline: auto;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.8s ease-in-out, opacity 0.3s 0.4s ease-in-out;
}
.chambre-details::after {
  /* pseudo élément fantome pour ajouter un <li> dans le flex en cas de nombre impair */
}
.chambre-details li {
  /*flex: 0 0 calc(50% - 10px);  2 colonnes nettes 
  max-width: calc(50% - 10px);*/
  width: 280px;
  position: relative;
  padding-left: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  flex-shrink: 0;
}
.chambre-details li:nth-last-child(-n + 2) {
  /*flex: 0 0 calc(50% - 10px);  2 colonnes nettes 
  max-width: calc(50% - 10px);*/
  opacity: 0;
}
.chambre-details li::before {
  content: "";
  position: absolute;
  width: 2px;

  height: 1rem;
  left: 0;
  top: 0.25rem;
}
.light .chambre-details li::before {
  background-color: var(--color-gold);
}
.dark .chambre-details li::before {
  background-color: var(--color-gold-light);
}
.hide {
  opacity: 0;
}
.fade {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

/****** DOMAINE  *******/
.domaine section {
}
.domaine .sous-titre {
  margin-top: 1rem;
  border: solid 0px red;
}

.domaine .dark .sous-titre::before {
  background-color: var(--color-or-light-light);
}
.domaine .separateur {
  opacity: 0;
  padding-top: 1rem;
  transition: 1s 0.3s ease-out;
}
.domaine .separateur.visible {
  opacity: 1;
}

.domaine .section-description::before {
  content: "";
  width: 3px;
  background-color: var(--color-or-light);
  position: absolute;
  left: -1.75rem;
  top: 0.5rem;
  bottom: 0.5rem;
  opacity: 0;
  transition: 1s ease-out;
}
.domaine .dark .section-description::before {
  background-color: var(--color-or-light-light);
  width: 1px;
}
.visible.section-description::before {
  opacity: 1;
}

/*** FORMULAIRE ***/
/**** RESERVATION ****/

/* Formulaire élégant avec couleurs */
.formulaire {
  max-width: min(96%, 600px);
  margin: 1rem auto 2rem;
  background: white;
  padding-block: 1rem 0;
  /* fond doux */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  color: #333;
}

/* Fieldset et legend */
.formulaire fieldset {
  border: none;
  margin: 0;
  padding: 0 1rem;
}

.formulaire legend {
  font-size: 1.4rem;
  font-weight: 600;
  width: 100%;
  text-align: center;
  font-weight: 500;
  padding: 0.5rem 1rem 0;
  max-width: none;
}

/* Grid pour les champs */
.formulaire .form-group {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.3rem 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.formulaire label {
  font-weight: 500;
  color: #2c3e50;
  /* gris profond */
}
.formulaire p {
  font-size: 1rem;
  letter-spacing: normal;
  padding-inline: 1rem;
}

/* Champs et textarea */
.formulaire input,
.formulaire textarea {
  padding: 0.7em;
  font-size: 1em;
  border: 1px solid var(--color-green);
  border-bottom: 1px solid var(--color-green-dark);
  border-radius: 8px;
  width: 100%;
  max-width: 450px;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  background: #fff;
}

/* Masquer le placeholder au focus */
.formulaire input:focus::placeholder,
.formulaire textarea:focus::placeholder {
  color: transparent;
}

/* Restaurer le placeholder si le champ est vide après le focus */
.formulaire input:not(:placeholder-shown)::placeholder,
.formulaire textarea:not(:placeholder-shown)::placeholder {
  color: transparent;
  /* placeholder invisible si champ rempli */
}

.formulaire input:placeholder-shown::placeholder,
.formulaire textarea:placeholder-shown::placeholder {
  color: #999;
  /* couleur du placeholder par défaut */
}

/* Focus visuel */
.formulaire input:focus,
.formulaire textarea:focus {
  border-color: #1e4b6b;
  box-shadow: 0 0 8px rgba(30, 75, 107, 0.3);
  outline: none;
  background: #f0f8ff;
}

/* Bouton élégant */

.formulaire button:hover {
  background: linear-gradient(
    145deg,
    var(--color-green-light),
    var(--color-green-dark)
  );
  transform: translateY(-2px);
}

/* Responsive mobile */
@media (max-width: 600px) {
  .formulaire .form-group {
    grid-template-columns: 1fr;
  }

  .formulaire button {
    grid-column: 1 / 2;
    width: 100%;
  }
}

/* champ antispam */
input#remarque {
  margin: 0;
  padding: 0;
  z-index: -1;
  position: absolute;
  top: 0;
  height: 0;
  border: 0;
}
input#remarque {
  display: none;
}

/*** Page CONTACT ***/
section#reserver {
  width: fit-content;
  margin-inline: auto;
  padding-inline: 2rem;
}
#page-contact #btn-reservation {
  display: none;
}

/*** FORMULAIRE ***/
.form-container {
  max-width: 1000px;
  margin: 1rem auto 3rem;
}
form#form-contact {
  max-width: min(96%, 650px);
  margin: 1rem auto 2rem;
  color: #333;
}

/* Fieldset et legend */
#form-contact fieldset {
  border: none;
  margin: 0 0 2em;
  padding: 0;
}

#form-contact legend {
  font-size: 1.3em;
  font-weight: 600;
  margin-bottom: 1em;
  background: var(--color-green);
  width: 100%;
  padding-bottom: 0.3em;
  color: white;
  text-align: center;
  font-weight: 500;
  padding: 0.5rem 1rem;
  max-width: none;
  margin: 1rem 1%;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}

/* Grid pour les champs */
#form-contact .form-group {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.3rem 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

#form-contact label {
  font-weight: 500;
  color: #2c3e50;
  /* gris profond */
}

/* Champs et textarea */
#form-contact input,
#form-contact textarea {
  padding: 0.7em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-bottom: 1px solid #999;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  background: #fff;
}

/* Masquer le placeholder au focus */
#form-contact input:focus::placeholder,
#form-contact textarea:focus::placeholder {
  color: transparent;
}

/* Restaurer le placeholder si le champ est vide après le focus */
#form-contact input:not(:placeholder-shown)::placeholder,
#form-contact textarea:not(:placeholder-shown)::placeholder {
  color: transparent;
  /* placeholder invisible si champ rempli */
}

#form-contact input:placeholder-shown::placeholder,
#form-contact textarea:placeholder-shown::placeholder {
  color: #999;
  /* couleur du placeholder par défaut */
}

/* Focus visuel */
#form-contact input:focus,
#form-contact textarea:focus {
  border-color: #1e4b6b;
  box-shadow: 0 0 8px rgba(30, 75, 107, 0.3);
  outline: none;
  background: #f0f8ff;
}

/* Bouton submit  */
#form-contact button {
  grid-column: 2 / 3;
  padding: 0.8em 1.2em;
  border: none;
  border-radius: 10px;
  background: var(--color-green);
  color: #fff;
  font-weight: 400;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.3s, transform 0.2s;
}

#form-contact button:hover {
  background: var(--color-green-dark);
  transform: translateY(-2px);
}

/* Responsive mobile */
@media (max-width: 600px) {
  #form-contact .form-group {
    grid-template-columns: 1fr;
  }

  #form-contact button {
    grid-column: 1 / 2;
    width: 100%;
  }
}

/* champ antispam */
input#remarque {
  margin: 0;
  padding: 0;
  z-index: -1;
  position: absolute;
  top: 0;
  height: 0;
  border: 0;
}
input#remarque {
  display: none;
}

/****** Venir  *******/
.contact-venir {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 1rem auto;
}
.contact-venir p {
  max-width: fit-content;
  width: fit-content;
  text-align: center;
}
.svg {
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1rem;
  fill: white;
}

.map {
  border: 0;
  width: 100%;
  height: 80vh;
  max-width: min(1000px, 96%);
  margin-inline: auto;
  display: block;
  margin-bottom: 4rem;
}

/****** CARTE DE VISITE  *******/
#footer {
  width: 100%;
  background: var(--color-green-dark3);

  position: top center;
  padding: 2rem 0 1.5rem;
  color: #fff;
  overflow: visible;
  margin: 0;
  text-align: center !important;
  position: relative;
  border: 0;
}
div.before-footer {
  padding: 0;
  margin: 0;
  margin-bottom: -2px;
  position: relative;
}

#footer > div {
  max-width: 96%;
  margin-inline: auto;
}

#footer p {
  margin: 8px auto;
  font-size: 1.2em;
  text-align: center !important;
}

.footer-titre {
  font-size: 3rem !important;
  font-weight: normal;
  padding-block: 0;
  margin: 0 auto !important;
  line-height: 1;
  letter-spacing: normal;
  font-family: "Alumni Sans Pinstripe", sans-serif;
  text-transform: uppercase;
  width: fit-content;
  position: relative;
  /* translate: 50px; */
}
/* .footer-titre::before {
  content: "";
  background-image: url(images/bastidedesgrandschenes-logo-blanc.500.png);
  background-size: cover;
  width: 110px;
  height: 100px;
  position: absolute;
  left: -125px;
  top: -10px;
} */

.footer-titre span {
  font-size: 3.5rem !important;
}
.footer-sous-titre {
  font-family: "Sofia Sans Condensed", sans-serif;
  font-size: 1.5rem;

  padding-block: 0;
  margin: 0 auto !important;
  /* translate: 50px; */
  text-wrap: balance;
}

.footer-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  line-height: 180%;
  margin-block: 1rem;
  flex-wrap: wrap;
}

span.cartouche {
  border: solid 0px;
  margin: 4px 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  box-sizing: border-box;
  border: solid 1px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease-out;
  transition: 0.2s;
  white-space: nowrap;
}
span.cartouche:hover {
  background-color: rgba(0, 0, 0, 0.1);
  border: solid 1px rgba(255, 255, 255, 0.6s);
}
span.cartouche a {
  padding: 4px 16px;
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  text-decoration: none;
  letter-spacing: 0.1ch;
  color: var(--color-green-light);
}
footer span.label-cartouche {
  text-align: center;
  font-size: 0.8em;
  margin: 0;
  display: inline-block;
  line-height: 100%;
}
.footer-logo img {
  height: 100px;
}
.cartouche img {
  display: inline;
  vertical-align: middle;
  color: white;
  height: 28px;
  width: auto;
  margin-right: 0.5rem;
}
@media (max-width: 600px) {
  .cartouche img {
    display: none;
  }
}
.copyright {
  padding-block: 2rem 0.5rem;
  font-size: 1rem !important;
}
.copyright p {
  font-size: 1rem !important;
}
.VF {
  border: 1px solid #f1f1f1;
  border-radius: 50%;
  padding: 0;
  margin: 0 0.25rem;
  font-family: var(--font-sans);
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: 0.2ch;
  transition: 0.2s;
  font-size: 1rem;
  translate: 0 -3px;
}

.VF:hover {
  border: 1px solid #1f1d1c;
  background: rgba(255, 255, 255, 0.95);
  color: #1f1d1c;
}
.no-decoration {
  text-decoration: none !important;
}
@media screen and (max-width: 700px) {
  .footer-titre {
    translate: 0;
  }
  .footer-titre::before {
    position: relative;
    display: none;
    left: auto;
    top: auto;
  }
  .footer-sous-titre {
    translate: 0;
  }
}
/****/

.reservation {
  position: fixed;
  text-align: center;

  width: fit-content;

  position: absolute;
  top: calc(100svh - 52px);
  right: 0;
  z-index: 10;
  transition: top 1s ease;
}
.sticky {
  position: fixed;
  top: 0;
}
.reservation > a {
  color: white;
  display: block;
  font-weight: 300;
  text-decoration: none;
  transition: 0.15s ease-in-out;
  background-color: var(--color-gold-light);
  font-family: var(--font-sans);
}
.reservation a:hover {
  background-color: var(--color-gold);
}
.reservation span {
  display: block;
  transition: 0.15s ease-in-out;
}
.reservation span:nth-child(1) {
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.2ch;
  font-size: 1rem;
  padding: 0.8rem 1rem;
}
.reservation span:nth-child(2) {
  background-color: var(--color-green);
  font-size: 0.75rem;
  padding: 0.35rem;
}
.reservation a:hover span:nth-child(2) {
  background-color: var(--color-green-dark);
}
@media screen and (max-width: 600px) {
  .reservation {
    top: calc(100vh - 35px);
  }
  .sticky {
    position: fixed;
    top: 0;
  }
}
/*** MODIF ***/

.modif main {
  max-width: 1200px;
  margin: auto;
  padding-inline: 1rem;
}
.modif-menu {
  text-align: center;
  font-size: 1.4rem;
}

.modif .reservation {
  display: none;
}

.modif-menu a {
  display: inline-block;
  background-color: #5f5f5f;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  text-decoration: none;
  margin: 1rem 0.5rem;
}
.modif .form-group {
  margin-block: 1.5rem 2.5rem;
  position: relative;
  color: #4c4c4c;
  font-size: 1.5rem;
}
.modif .form-group > div {
  margin-top: 5px;
}
.modif .form-group div span {
  margin-inline: 1.5rem 0;
}
.lang-en {
}
.modif .language-switch-fr {
  position: absolute;
  top: -26px;
  right: 32px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 24px;
}
.modif .language-switch-en {
  position: absolute;
  top: -26px;
  right: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 24px;
  filter: grayscale(100%);
}
.modif input {
  padding: 4px 8px;
  font-size: 1.3rem;
}
.modif input[type="number"] {
  max-width: 80px;
}
.modif input[type="submit"] {
  padding: 0.35rem 0.75rem;
  font-size: 1.3rem;
  margin: 0.5rem 1rem;
  cursor: pointer;
  outline: 1px solid #aaa;
}
.modif input[type="submit"]:hover {
  outline: 1px solid #444;
  color: #333;
}