/**
 * HOMEPAGE STYLES - Life'Scape
 * Styles propres extraits du thème WordPress original
 * Date: 2026-02-08
 */

/* ========================================
   HOMEPAGE FIRST SECTION
   ======================================== */

.homepage-first-section {
  padding-top: 250px;
  padding-bottom: 100px;
  position: relative;
}

/* Images de fond gauche et droite */
.homepage-first-section .left-picture {
  position: absolute;
  width: 1516px;
  left: -450px;
  right: 450px;
  top: 0px;
  z-index: 10;
}

.homepage-first-section .left-picture img {
  width: 1200px;
  height: auto;
  object-fit: cover;
}

@media (max-width: 768px) {
  .homepage-first-section .left-picture {
    display: none;
  }
}

.homepage-first-section .right-picture {
  position: absolute;
  width: 800px;
  left: auto;
  right: -100px;
  top: -50px;
  z-index: 10;
}

.homepage-first-section .right-picture img {
  width: 800px;
  height: auto;
  object-fit: cover;
}

@media (max-width: 768px) {
  .homepage-first-section .right-picture {
    display: none;
  }
}

/* Container principal */
.homepage-first-section .container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 20;
}

.homepage-first-section .container .middle-container {
  width: 40%;
  z-index: 21;
}

/* Section texte */
.homepage-first-section .container .middle-container .text-section {
  margin: 1rem 0 0 0;
}

.homepage-first-section .container .middle-container .text-section h1 {
  font-family: "Gelasio", serif;
  font-size: 2.8125rem; /* 45px */
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  color: #483C3C;
}

.homepage-first-section .container .middle-container .text-section p {
  text-align: center;
  font-family: "Work Sans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #483C3C;
}

.homepage-first-section .container .middle-container .text-section .buttons {
  width: 100%;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 50;
  margin-bottom: 50px !important;
}

.homepage-first-section .container .middle-container .text-section .buttons a {
  z-index: 50;
  padding: 1rem 40px;
  background-color: #483C3C;
  border: none;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  font-family: "Work Sans", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-radius: 2rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.homepage-first-section .container .middle-container .text-section .buttons a:hover {
  background-color: #A8813F;
  color: #ffffff;
}

/* ========================================
   KEY NUMBERS SECTION
   ======================================== */

.homepage-first-section .container .middle-container .key-numbers {
  padding-bottom: 50px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 22;
}

.homepage-first-section .container .middle-container .key-numbers h2 {
  font-family: "Abril Fatface", serif;
  font-size: 1.875rem; /* 30px */
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #483C3C;
}

.homepage-first-section .container .middle-container .key-numbers .key-numbers-container {
  width: 45rem !important;
  height: 12rem;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 2rem 0 0 0;
  padding: 2rem 1rem 0 1rem;
  z-index: 23;
}

.homepage-first-section .container .middle-container .key-numbers .key-numbers-container .background-frame {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 24;
}

.homepage-first-section .container .middle-container .key-numbers .key-numbers-container .background-frame .frame {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 25;
}

.homepage-first-section .container .middle-container .key-numbers .key-numbers-container .key-number {
  margin-top: 20px;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 26;
}

.homepage-first-section .container .middle-container .key-numbers .key-numbers-container .key-number .icon-container {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.homepage-first-section .container .middle-container .key-numbers .key-numbers-container .key-number .icon-container img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.homepage-first-section .container .middle-container .key-numbers .key-numbers-container .key-number p {
  font-size: 0.875rem; /* 14px */
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  width: 100%;
  max-width: 100px;
  color: #483C3C;
}

/* ========================================
   HOMEPAGE OVERLAY (petite image)
   ======================================== */

.homepage-overlay {
  width: 100vw;
  max-height: 270px;
  height: 100%;
  background-image: url(../images/general/paper_origin_croped.webp);
  background-size: cover;
  position: absolute;
  left: 0;
  transform: translateY(-110px) scale(-1);
  z-index: 30;
}

.homepage-overlay .small-image {
  position: absolute;
  width: 300px;
  height: 350px;
  transform: rotate(-20deg) scale(-1);
  z-index: 50;
  top: 0;
  left: 50px;
}

.homepage-overlay .small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 50;
}

/* ========================================
   SLIDER SECTION (Nos Expériences)
   ======================================== */

.slider-container {
  position: relative;
  /* 150px laissaient un large vide entre la montre a gousset en surimpression
     et le titre. 110px resserrent sans que la bande de papier de la section
     precedente ne vienne mordre sur « Nos Experiences ». */
  padding-top: 110px;
  padding-bottom: 0;
  background: #DEDBC3;
}

.slider-container .container .buttons-and-title {
  width: 100%;
  display: flex;
  /* position: relative est indispensable — sans elle, le z-index d'un element
     statique est ignore et la bande de papier (z-index 30) recouvrait le titre. */
  position: relative;
  z-index: 40;
}

.slider-container .container .buttons-and-title h2 {
  position: relative;
  /* Les fleches ne partagent plus cette ligne : le titre reprend toute la largeur. */
  width: 100%;
  text-align: flex-start;
  font-family: "Abril Fatface", serif;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #483C3C;
}

.slider-container .container .buttons-and-title h2::after {
  content: "";
  background-image: url("../images/general/Decoration.svg");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  max-width: 970px;
  height: 3rem;
}

/* Les fleches encadrent les cartes au lieu d'etre empilees au-dessus du titre.
   Elles sont posees en absolu dans la gouttiere, de part et d'autre du
   carrousel, et NON dans le flux : les diapositives sont figees a 400px dans
   slider-fix.css, leur retirer de la largeur ferait deborder les cartes. */
.slider-container .container .slider-row {
  position: relative;
  width: 100%;
}

.slider-container .container .slider-row #left-button,
.slider-container .container .slider-row #right-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  background-color: #C19A59 !important;
  cursor: pointer;
  width: 2.5rem !important;
  height: 2.5rem !important;
  font-size: 1.2rem !important;
  color: #ffffff !important;
  border-radius: 50%;
  opacity: 1 !important;
  visibility: visible !important;
  /* Au-dessus des cartes : la diapositive suivante affleure le bord droit et
     passerait sinon par-dessus la fleche. */
  z-index: 60;
  transition: background-color 0.2s ease;
}

.slider-container .container .slider-row #left-button {
  left: -60px;
}

.slider-container .container .slider-row #right-button {
  right: -60px;
}

/* Sous 1400px la page n'a plus de gouttiere : les fleches rentrent au ras du
   carrousel plutot que de sortir de l'ecran. */
@media (max-width: 1400px) {
  .slider-container .container .slider-row #left-button {
    left: 0;
  }

  .slider-container .container .slider-row #right-button {
    right: 0;
  }
}

/* clip et non hidden : hidden sur un seul axe force l'autre a « auto » et
   creerait une zone defilante, ce qui rognerait le bas des cartes. clip autorise
   le melange des deux axes. La marge de 25px laisse respirer le carton pivote a
   5 degres, qui deborde legerement de sa diapositive, sans laisser paraitre la
   carte suivante — elle est a 30px de la. */
.slider-container .container .slider-section.swiper-cards {
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 25px;
}

.slider-container .container .slider-section.swiper-cards .swiper-wrapper {
  align-items: stretch;
}

/* Cartes du slider */
.slider-container .swiper-slide {
  position: relative !important;
  height: auto !important;
  min-height: 550px !important; /* Augmenté pour afficher les cartes en entier */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 0 !important;
  isolation: isolate !important;
}
/* Carte paper droite comme support */
.slider-container .slide-background {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.slider-container .slide-background img {
  width: 28rem !important; /* Augmenté pour afficher en entier */
  height: 35rem !important; /* Augmenté pour afficher en entier */
  object-fit: contain !important;
}

/* Carte d'arrière-plan gérée dans slider-fix.css */

.slider-container .card-link {
  display: block !important;
  text-decoration: none !important;
  width: 100% !important;
  position: relative !important;
  z-index: 10 !important; /* Au-dessus de tout */
}

.card-elements {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider-container .slider-picture {
  margin-bottom: 15px !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 200px !important;
}

.slider-container .slider-picture img {
  width: 100% !important;
  height: auto !important;
  max-height: 150px !important;
  object-fit: contain !important;
  transition: transform 0.3s ease;
}

.card-link:hover .slider-picture img {
  transform: scale(1.05);
}

.title-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Corriger la font - PROBLÈME #7 */
.title-icons h3 {
  font-size: 1.125rem;
  margin: 0 0 10px 0;
  color: #483C3C;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
}

.slider-container .icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 15px !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Icônes à côté du texte - PROBLÈME #6 */
.slider-container .slider-icon {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.75rem !important;
  color: #483C3C !important;
  font-family: "Work Sans", sans-serif !important;
}

.slider-container .slider-icon img {
  width: 17px !important;
  height: 17px !important;
}

.slider-container .slider-icon p {
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 0.75rem !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
  .homepage-first-section .container .middle-container .key-numbers .key-numbers-container {
    height: 20rem;
    margin: 0;
  }

  .homepage-first-section .container .middle-container .key-numbers .key-numbers-container .background-frame .frame {
    height: 20rem;
  }
}

@media (max-width: 992px) {
  .homepage-first-section .container .middle-container {
    width: 60%;
  }

  .homepage-first-section .container .middle-container .text-section h1 {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .homepage-first-section .container .middle-container .key-numbers .key-numbers-container {
    width: 35rem !important;
  }
}

@media (max-width: 768px) {
  .homepage-first-section .left-picture,
  .homepage-first-section .right-picture {
    display: none;
  }

  .homepage-first-section .container .middle-container .text-section .buttons {
    padding-bottom: 100px;
  }

  .homepage-first-section .container .middle-container .key-numbers h2 {
    margin-top: -100px;
  }

  .homepage-overlay .small-image {
    display: none;
  }

  .slider-container {
    padding-top: 80px;
  }

  .slider-container .container .buttons-and-title h2 {
    width: 100%;
    text-align: center;
    padding-bottom: 50px;
    padding-left: 30px;
  }

  /* Sous 768px le carrousel n'affiche qu'une carte : deux fleches lui
     prendraient 120px de large sur 375. Le balayage tactile suffit. */
  .slider-container .container .slider-row #left-button,
  .slider-container .container .slider-row #right-button {
    display: none !important;
  }

  .slider-container .container .slider-row {
    gap: 0;
  }
}

@media (max-width: 576px) {
  .homepage-first-section .container .middle-container {
    margin: -5rem 0 0 0;
    width: 90%;
    height: 45rem;
  }

  .homepage-first-section .container .middle-container .text-section p {
    text-align: left;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .homepage-first-section .container {
    margin-top: 50px;
    margin-bottom: 400px;
  }

  .homepage-first-section .container .middle-container .key-numbers {
    padding-top: 50px;
  }

  .homepage-first-section .container .middle-container .key-numbers h2 {
    flex-wrap: wrap;
  }

  .homepage-first-section .container .middle-container .key-numbers .key-numbers-container {
    margin-top: 50px;
    flex-wrap: wrap;
  }

  .homepage-first-section .container .middle-container .key-numbers .key-numbers-container .background-frame {
    display: none;
  }
}

/* ========================================
   THREE PARTS SECTION
   ======================================== */

.three-parts-container {
  padding-top: 50px;
  position: relative;
}

.three-parts-container .container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  position: relative;
}

.three-parts-container .container .three-parts-item {
  display: flex;
  padding-bottom: 100px;
}

.three-parts-container .container .three-parts-item.odd {
  flex-direction: row-reverse;
}

.three-parts-container .container .three-parts-item.even {
  flex-direction: row;
}

.three-parts-container .container .three-parts-item .three-parts-picture {
  width: 45%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.three-parts-container .container .three-parts-item .three-parts-picture::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 150%;
  z-index: 1;
  right: -170px;
  background-image: url("../images/general/Smoke.webp");
  background-repeat: no-repeat;
  background-size: contain;
  transform: scaleX(-1);
}

.three-parts-container .container .three-parts-item .three-parts-picture img {
  object-fit: contain;
  width: 100%;
  z-index: 5;
}

.three-parts-container .container .three-parts-item .three-parts-text {
  width: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.three-parts-container .container .three-parts-item .three-parts-text h2,
.three-parts-container .container .three-parts-item .three-parts-text h3,
.three-parts-container .container .three-parts-item .three-parts-text p {
  width: 80%;
}

.three-parts-container .container .three-parts-item .three-parts-text h2 {
  font-size: 2.8125rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: "Gelasio", sans-serif;
}

.three-parts-container .container .three-parts-item .three-parts-text h3 {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-family: "Montserrat", sans-serif;
  padding-bottom: 15px;
}

.three-parts-container .container .three-parts-item .three-parts-text a {
  z-index: 50;
  padding: 1rem 40px;
  background-color: #483C3C;
  border: none;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  font-family: "Work Sans";
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-radius: 2rem;
  align-self: flex-start;
  margin: 2rem 0 0 4rem;
}

.three-parts-container .container::after {
  content: url("../images/general/verticalsmoke.svg");
  position: absolute;
  right: -600px;
  top: -300px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ========================================
   SCHEDULE GENERAL SECTION
   ======================================== */

.schedule-section {
  padding-top: 0;
  position: relative;
  padding-bottom: 150px;
}

.schedule-section .container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.schedule-section .container h2 {
  font-family: "Abril Fatface", sans-serif;
  font-size: 2.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-bottom: 20px;
  z-index: 5;
}

.schedule-section .container .time-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.schedule-section .container .time-container .decoration-line {
  margin: 1rem 0;
}

.schedule-section .container .time-container .schedule-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  padding-top: 10px;
}

.schedule-section .container .time-container .schedule-container .schedule-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
}

.schedule-section .container .time-container .schedule-container .schedule-item .schedule-time {
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-family: "Abril Fatface", sans-serif;
}

.schedule-section .container .time-container .schedule-container .schedule-item::after {
  content: "";
  background-image: url("../images/general/square.svg");
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 30px;
  width: 2rem;
  height: 2rem;
}

.schedule-section .container .time-container .schedule-container .schedule-item:last-child::before {
  content: "";
  background-image: url("../images/general/square.svg");
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 30px;
  width: 2rem;
  height: 2rem;
}

.schedule-section .container .time-container .schedule-specials-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  padding-top: 10px;
}

.schedule-section .container .time-container .schedule-specials-container .schedule-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
}

.schedule-section .container .time-container .schedule-specials-container .schedule-item .schedule-time {
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-family: "Abril Fatface", sans-serif;
}

.schedule-section .container .time-container .schedule-specials-container .schedule-item::after {
  display: none;
}

.schedule-section .container .min-image {
  position: absolute;
  top: 200px;
  left: -200px;
  z-index: 2;
}

.schedule-section .container .min-image img {
  width: 564px;
  height: 550px;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (max-width: 768px) {
  .schedule-section .container .min-image {
    display: none;
  }
}

.schedule-section::before {
  content: url("../images/general/smoke-single.webp");
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 1;
}

.schedule-section::after {
  content: url("../images/general/whitesmoke.svg");
  position: absolute;
  left: -100px;
  top: 250px;
  height: 100%;
  z-index: 1;
}

.schedule-overlaybot {
  width: 100vw;
  max-height: 270px;
  height: 100%;
  background-image: url(../images/general/paper_origin_croped.webp);
  background-size: cover;
  position: absolute;
  left: 0;
  transform: translateY(-20px) scale(-1);
  z-index: 30;
}

/* ========================================
   REVIEWS SLIDER SECTION
   ======================================== */

.reviews-slider {
  position: relative;
  padding-top: 150px;
  padding-bottom: 100px;
}

.reviews-slider .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Ce bloc portait deja un z-index: 2, mais sur un element statique — donc
   ignore. Resultat : la bande de papier dechire de la section precedente
   (z-index 30) passait devant le portrait et lui tranchait le haut du chapeau,
   et aucun z-index pose sur le portrait lui-meme n'y changeait rien.
   C'est ici que l'empilement doit se jouer, avec le position: relative sans
   lequel la valeur reste lettre morte. */
.reviews-slider .container .static-part {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 50px;
  position: relative;
  z-index: 40;
}

.reviews-slider .container .static-part .reviews-title {
  width: 60%;
  display: flex;
  flex-direction: column;
  /* Centre verticalement, le bloc de texte tombait au milieu des 40rem de la
     rangee, tres bas par rapport au portrait. Cale en haut, il remonte d'une
     centaine de pixels. Ces 120px ne sont pas negociables a la baisse : la
     bande de papier dechire de la section precedente descend jusque-la, et le
     titre repassait dessous, purement et simplement invisible. */
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 120px;
  /* Ceinture et bretelles : si la mise en page bouge encore, le texte restera
     devant la bande de papier (z-index 30) au lieu de disparaitre. */
  position: relative;
  z-index: 40;
}

.reviews-slider .container .static-part .reviews-title .title {
  width: 100%;
  position: relative;
}

.reviews-slider .container .static-part .reviews-title .title h2 {
  font-family: "Abril Fatface", sans-serif;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.reviews-slider .container .static-part .reviews-title .title .title-underline {
  width: 100%;
  position: absolute;
  top: 1rem;
}

.reviews-slider .container .static-part .reviews-title .text .reviews-subtitle {
  font-family: "Montserrat", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  /* La frise decorative du titre est en position absolue a 1rem du haut : sans
     cette marge, elle barrait le sous-titre en plein milieu. */
  margin-top: 22px;
  margin-bottom: 6px;
}

.reviews-slider .container .static-part .reviews-title .text .reviews-textarea {
  font-family: "Montserrat", sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Le portrait doit passer DEVANT les deux bandes de papier dechire qui
   encadrent la section (.schedule-overlaybot au-dessus, .reviews-overlay en
   dessous, toutes deux en z-index 30) : son chapeau et ses epaules mordent sur
   leur emprise. 60 le place au-dessus sans toucher au reste de la page. */
.reviews-slider .container .static-part .reviews-picture {
  position: relative;
  width: 40%;
  height: 40rem;
  right: 0;
  z-index: 60;
}

.reviews-slider .container .static-part .reviews-picture img {
  position: absolute;
  object-fit: contain;
  width: 1200px;
  height: 707px;
  left: -200px;
}

/* Le carrousel s'affranchit du conteneur (1240px) pour tenir toute la largeur
   de la page, et deborde meme de 60px de chaque cote : les cartes des deux
   bords sont coupees par l'ecran, ce qui montre que la liste continue.
   Le debordement horizontal ne cree pas de barre de defilement, body et html
   portent overflow-x: hidden (global.css). */
.reviews-slider .container .swiper-reviews {
  position: relative;
  margin-top: -200px;
  width: calc(100vw + 120px);
  margin-left: calc(50% - 50vw - 60px);
  overflow: visible;
  z-index: 50;
}

.reviews-slider .container .swiper-reviews .swiper-wrapper {
  width: 100%;
  padding: 0 0 0 1rem;
}

.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide {
  min-height: 14rem;
  position: relative;
  display: flex;
  justify-content: center;
}

.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content {
  z-index: 3;
  padding: 20px;
  width: 100%;
}

.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content .name-rating .name {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #000000;
}

/* Logo de la plateforme d'origine (Google, Facebook, TripAdvisor). Le parent
   .name est en space-between : le logo est donc poussé à droite du prénom.
   Le thème d'origine ne bornait pas sa taille, ce qui laissait les SVG
   s'afficher à leur taille intrinsèque — jusqu'à déformer la carte. */
.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content .name-rating .name .source-logo {
  width: auto;
  height: 20px;
  max-width: 90px;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: 10px;
}

.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content .name-rating .rating-stars {
  padding-top: 10px;
  /* Sert de currentColor aux demi-étoiles (dégradé) et au contour des vides. */
  color: #C19A59;
}

.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content .name-rating .rating-stars .star {
  fill: #C19A59;
}

/* Une note inférieure à 5 reste possible si le filtre de l'API change un jour.
   Ces deux règles reprennent le sélecteur complet à dessein : `fill` déclaré
   en CSS l'emporte sur l'attribut fill="none" du SVG, une règle plus courte
   serait battue par celle ci-dessus et les étoiles vides paraîtraient pleines. */
.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content .name-rating .rating-stars .star.empty {
  fill: none;
}

.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content .name-rating .rating-stars .star.half {
  fill: none;
}

.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content .reviews-text {
  color: #000;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  /* line-height chiffre, indispensable : c'est lui qui donne sa hauteur au
     bloc tronque. Avec « normal », la reserve de 3 lignes n'est pas calculable. */
  line-height: 1.45;
  padding-top: 10px;
  /* Tronque a 3 lignes avec points de suspension. Un avis de 640 caracteres
     etirait sa carte, et toutes les autres de la meme rangee avec elle. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* N'apparait que sur les avis reellement tronques (classe posee par le JS). */
.reviews-slider .reviews-card-content .reviews-more {
  display: none;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #483C3C;
  text-decoration: underline;
  cursor: pointer;
}

.reviews-slider .reviews-card-content.is-truncated .reviews-more {
  display: inline-block;
}

.reviews-slider .reviews-card-content.is-truncated .reviews-more:hover {
  color: #C19A59;
}

/* ========================================
   FENETRE D'AVIS COMPLET
   ======================================== */

.reviews-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(30, 24, 24, 0.72);
}

.reviews-modal.is-open {
  display: flex;
}

.reviews-modal__box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 30px 28px 28px;
  background-color: #F4F2E8;
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.reviews-modal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding-right: 30px;
}

.reviews-modal__name {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
}

.reviews-modal__source {
  width: auto;
  height: 20px;
  max-width: 90px;
}

.reviews-modal__stars {
  padding: 6px 0 14px;
  color: #C19A59;
}

.reviews-modal__stars .star {
  fill: #C19A59;
}

.reviews-modal__text {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #000;
  white-space: pre-line;
}

.reviews-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: #483C3C;
  cursor: pointer;
}

.reviews-modal__close:hover {
  color: #C19A59;
}

.reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide::after {
  content: "";
  background-image: url(../images/general/reviewbg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.reviews-overlay {
  width: 100vw;
  max-height: 270px;
  height: 100%;
  background-image: url(../images/general/paper_origin_croped.webp);
  background-size: cover;
  position: absolute;
  left: 0;
  transform: translateY(110px);
  z-index: 30;
}

.reviews-overlay .small-image-reviews {
  position: absolute;
  width: 400px;
  height: 450px;
  transform: scaleX(1) rotate(95deg);
  z-index: 50;
  top: -150px;
  left: -50px;
}

.reviews-overlay .small-image-reviews img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 50;
}

/* ========================================
   TEXT LOGO SECTION
   ======================================== */

.text-logo-section {
  position: relative;
  padding-top: 200px;
  margin-bottom: -50px;
}

.text-logo-section .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: relative;
}

.text-logo-section .container .text-logo-content {
  width: 60%;
  z-index: 5;
  display: flex;
  flex-direction: column;
}

.text-logo-section .container .text-logo-content h3 {
  font-family: "Abril Fatface", sans-serif;
  font-size: 2.8125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-bottom: 15px;
}

.text-logo-section .container .text-logo-content .logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 100px;
  padding-top: 10px;
}

/* Le logo ne doit jamais etre comprime ni rogne par un parent flex trop court :
   Safari iOS ecrase les images d'un item flex dont la hauteur est contrainte. */
.text-logo-section .container .text-logo-content .logos img {
  flex-shrink: 0;
  width: 206px;
  max-width: 100%;
  height: auto;
}

.text-logo-section .container .text-logo-picture {
  position: relative;
  width: 40%;
  height: 40rem;
  right: 0;
  z-index: 50;
}

.text-logo-section .container .text-logo-picture img {
  position: absolute;
  object-fit: contain;
  width: 1200px;
  height: 707px;
  left: -200px;
}

/* ========================================
   RESPONSIVE - NEW SECTIONS
   ======================================== */

@media (max-width: 1024px) {
  .reviews-overlay {
    transform: translateY(-80px);
  }
}

@media (max-width: 992px) {
  .schedule-section .container .time-container {
    width: 100%;
  }
}

@media (max-width: 895px) {
  .three-parts-container .container .three-parts-item .three-parts-text h2,
  .three-parts-container .container .three-parts-item .three-parts-text h3,
  .three-parts-container .container .three-parts-item .three-parts-text p {
    padding-bottom: 20px;
    position: relative;
    z-index: 5;
  }
}

@media (max-width: 769px) {
  .reviews-slider .container .static-part .reviews-title {
    padding-top: 150px;
    width: 100%;
    padding-bottom: 200px;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .three-parts-container {
    padding-top: 0;
  }

  .three-parts-container .container .three-parts-item {
    padding-bottom: 0;
  }

  .three-parts-container .container .three-parts-item.odd {
    flex-direction: column;
  }

  .three-parts-container .container .three-parts-item.even {
    flex-direction: column;
  }

  .three-parts-container .container .three-parts-item .three-parts-picture {
    width: 100%;
    display: none;
  }

  .three-parts-container .container .three-parts-item .three-parts-text {
    width: 100%;
    margin: 5rem 0 0 0;
  }

  .schedule-section {
    padding-bottom: 0;
  }

  .schedule-section .container {
    padding-top: 20px;
  }

  .schedule-section .container .time-container .schedule-container .schedule-item::after,
  .schedule-section .container .time-container .schedule-container .schedule-item:last-child::before {
    display: none;
  }

  .schedule-section::before,
  .schedule-section::after {
    display: none;
  }

  .reviews-slider .container .swiper-reviews .swiper-wrapper {
    padding: 0;
  }

  .reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content {
    width: 60%;
  }

  .reviews-slider .container .static-part .reviews-title .title .title-underline {
    display: none;
  }

  .reviews-slider .container .static-part .reviews-picture {
    display: none;
  }

  .reviews-slider .container .static-part .reviews-picture img {
    display: none;
  }

  /* min-height et non height : a 320px fixes le contenu (338px) debordait, et
     le footer (z-index 100) recouvrait le bas du logo Cheque-Vacances. */
  .text-logo-section .container {
    flex-direction: column;
    top: 0rem;
    min-height: 20rem;
  }

  .text-logo-section .container .text-logo-content h3 {
    text-align: center;
  }

  .text-logo-section .container .text-logo-picture {
    display: none;
  }

  .text-logo-section .container .text-logo-picture img {
    display: none;
  }
}

@media (max-width: 576px) {
  .three-parts-container .container .three-parts-item .three-parts-picture::after {
    left: 2rem;
    top: -5rem;
  }

  .schedule-section .container .time-container .schedule-container {
    width: 100%;
    flex-direction: column;
  }

  .schedule-section .container .time-container .schedule-container .schedule-item {
    width: 80%;
    flex-direction: column;
  }

  .schedule-section .container .time-container .schedule-specials-container {
    width: 100%;
    flex-direction: column;
  }

  .schedule-section .container .time-container .schedule-specials-container .schedule-item {
    width: 80%;
    flex-direction: column;
  }

  .reviews-slider .container .swiper-reviews {
    margin-top: 0;
  }

  .reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content {
    width: 80%;
    padding: 2rem 0;
  }

  .reviews-slider .container .swiper-reviews .swiper-wrapper .swiper-slide .reviews-card-content .name-rating .name {
    margin: 0.1rem 0;
    padding: 0.1rem 0;
  }
}

@media (max-width: 480px) {
  .reviews-slider .container .static-part .reviews-title {
    padding-bottom: 20px;
  }

  .text-logo-section {
    margin-bottom: 200px;
  }

  .text-logo-section .container .text-logo-content .logos {
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  .reviews-overlay .small-image-reviews {
    display: none;
  }

  .homepage-overlay .small-image {
    display: none;
  }
}

/* ========================================
   CORRECTIONS SPÉCIFIQUES WORDPRESS
   ======================================== */

/* Enlever le border de la petite image (montre) */
.homepage-overlay .small-image img,
.small-image img {
  border: none !important;
  outline: none !important;
}

/* Règles responsive pour le slider */
@media (max-width: 768px) {
  .slider-container .container .slider-section.swiper-cards .swiper-wrapper .swiper-slide::before {
    width: 20rem;
    height: 20rem;
  }

  .slide-background img {
    width: 20rem !important;
    height: 25rem !important;
  }
}

/* Decoration lines dans les sections */
.slider-container .container .decoration-line {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-container .container .decoration-line img {
  object-fit: contain;
  width: 100%;
  max-width: 600px;
}

/* Couleur du titre Escape Box */
.three-parts-container .container .three-parts-item .three-parts-text h2 {
  color: #483C3C !important;
}

/* ========================================
   NOUVELLE PROPOSITION: GRILLE MODERNE DES SALLES
   ======================================== */

.rooms-grid-modern {
  background: linear-gradient(135deg, #E0DDC7 0%, #F5F3E8 100%);
  padding: 80px 0;
  position: relative;
}

.rooms-grid-modern .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.rooms-grid-modern .section-header {
  text-align: center;
  margin-bottom: 60px;
}

.rooms-grid-modern .section-header h2 {
  font-family: "Abril Fatface", serif;
  font-size: 2.5rem;
  color: #483C3C;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.rooms-grid-modern .section-header h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #C19A59, #8B7355);
  border-radius: 2px;
}

.rooms-grid-modern .section-header .subtitle {
  font-family: "Work Sans", sans-serif;
  font-size: 1.1rem;
  color: #666;
  margin-top: 20px;
}

.rooms-grid-modern .rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  margin-bottom: 50px;
}

.rooms-grid-modern .room-card {
  perspective: 1000px;
  height: 100%;
}

.rooms-grid-modern .room-card-inner {
  display: block;
  text-decoration: none;
  position: relative;
  height: 100%;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.rooms-grid-modern .room-card:hover .room-card-inner {
  transform: translateY(-10px);
}

.rooms-grid-modern .room-card-front {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rooms-grid-modern .room-card:hover .room-card-front {
  box-shadow: 0 20px 50px rgba(193, 154, 89, 0.3);
}

.rooms-grid-modern .room-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.rooms-grid-modern .room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.rooms-grid-modern .room-card:hover .room-image img {
  transform: scale(1.1);
}

.rooms-grid-modern .room-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(193, 154, 89, 0.9), rgba(72, 60, 60, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rooms-grid-modern .room-card:hover .room-overlay {
  opacity: 1;
}

.rooms-grid-modern .view-details {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "Work Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 15px 30px;
  border: 2px solid #fff;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.rooms-grid-modern .room-card:hover .view-details {
  background: #fff;
  color: #483C3C;
  transform: scale(1.05);
}

.rooms-grid-modern .room-info {
  padding: 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rooms-grid-modern .room-info h3 {
  font-family: "Gelasio", serif;
  font-size: 1.5rem;
  color: #483C3C;
  margin-bottom: 15px;
  font-weight: 600;
}

.rooms-grid-modern .room-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.rooms-grid-modern .room-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #666;
  font-family: "Work Sans", sans-serif;
}

.rooms-grid-modern .room-meta i {
  color: #C19A59;
  font-size: 1rem;
}

.rooms-grid-modern .room-excerpt {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
  font-family: "Work Sans", sans-serif;
}

.rooms-grid-modern .view-all-rooms {
  text-align: center;
  margin-top: 40px;
}

.rooms-grid-modern .btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 18px 40px;
  background: linear-gradient(135deg, #C19A59, #8B7355);
  color: #fff;
  text-decoration: none;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(193, 154, 89, 0.3);
}

.rooms-grid-modern .btn-view-all:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(193, 154, 89, 0.5);
}

.rooms-grid-modern .btn-view-all i {
  transition: transform 0.3s ease;
}

.rooms-grid-modern .btn-view-all:hover i {
  transform: translateX(5px);
}

/* Responsive */
@media (max-width: 768px) {
  .rooms-grid-modern {
    padding: 50px 0;
  }

  .rooms-grid-modern .section-header h2 {
    font-size: 2rem;
  }

  .rooms-grid-modern .rooms-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .rooms-grid-modern .room-image {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .rooms-grid-modern .section-header h2 {
    font-size: 1.75rem;
  }

  .rooms-grid-modern .room-info h3 {
    font-size: 1.3rem;
  }

  .rooms-grid-modern .btn-view-all {
    padding: 15px 30px;
    font-size: 1rem;
  }
}

/* === Variantes mobiles des images de fond (généré) === */
/* Un téléphone n'a pas besoin d'une image de 1600 px de large.
   Seule l'URL change : taille, position et répétition restent celles
   de la règle d'origine, donc le rendu est identique.
   Généré par _docs/tooling/css-mobile-backgrounds.py — ne pas éditer. */
@media (max-width: 768px) {
    .homepage-overlay {
        background-image: url(../images/general/paper_origin_croped-800w.webp);
    }
    .three-parts-container .container .three-parts-item .three-parts-picture::after {
        background-image: url("../images/general/Smoke-800w.webp");
    }
    .schedule-overlaybot {
        background-image: url(../images/general/paper_origin_croped-800w.webp);
    }
    .reviews-overlay {
        background-image: url(../images/general/paper_origin_croped-800w.webp);
    }
}