/* ==========================================================================
   Hôtel Vernet — Home · feuille de styles
   --------------------------------------------------------------------------
   Reproduction fidèle de https://www.hotelvernet-paris.com/fr/
   Structure pensée pour Webflow :
     - classes façon Client-First : section_*, composant_element, combos is-*
     - breakpoints Webflow (desktop-first) :
         desktop ≥ 992 px · tablette ≤ 991 · mobile paysage ≤ 767 · mobile portrait ≤ 479
     - états posés par js/vernet.js : is-scrolled, is-open, is-active, is-left, is-revealed
   Polices : Gotham + Austerlitz Pro Affiche (licences du client).
   Montserrat / Playfair Display ne servent que de secours.
   ========================================================================== */

:root {
  --vx-gold: #b48750;
  --vx-ink: #171717;
  --vx-black: #000000;
  --vx-white: #ffffff;
  --vx-beige: #f8f4f1;
  --vx-border: #d4d4d4;
  --vx-nav-h: 85px;
  --vx-sans: "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --vx-serif: "Austerlitz Pro Affiche", "Playfair Display", Georgia, serif;
  --vx-ease: cubic-bezier(.4, 0, .2, 1);
  --vx-ease-out: cubic-bezier(0, 0, .2, 1);
  --vx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --vx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  --vx-shadow-text-md: 0 1px 2px rgba(30, 29, 39, .19), 1px 2px 4px rgba(54, 64, 147, .18);
  --vx-shadow-text-lg: 3px 3px 6px rgba(0, 0, 0, .26), 0 0 5px rgba(15, 3, 86, .22);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--vx-nav-h);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--vx-sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--vx-ink);
  background-color: var(--vx-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vx-locked, .vx-locked body { overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

img, video, svg { display: block; }
img, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, button, select { font: inherit; color: inherit; }
strong, b { font-weight: 700; }

h1, h2, h3 { margin-top: 0; font-family: var(--vx-sans); font-weight: 300; }
h1, h2 { font-size: 2.3rem; line-height: 1.25; }
h1 { margin-bottom: 2.5rem; }
h2 { margin-bottom: 2rem; }
h3 { font-size: 1.75rem; line-height: 1; margin-bottom: 1.25rem; }
h1 em, h2 em { font-family: var(--vx-serif); font-weight: 300; font-style: italic; color: var(--vx-gold); line-height: 0; }
p { margin-top: 0; margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Blocs de texte & titres
   -------------------------------------------------------------------------- */
.text-block {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  font-size: .875rem;
  line-height: 1.5rem;
}
.text-block.is-center { text-align: center; }

.text-rich { font-size: .875rem; line-height: 1.5rem; }
.text-rich > :last-child { margin-bottom: 0; }
.text-rich a { text-decoration: underline; text-underline-offset: 4px; transition: color .3s var(--vx-ease); }
.text-justify { text-align: justify; }

.heading-intro { font-size: 2.3rem; line-height: 1; margin-bottom: 2.5rem; }

.heading-section { font-size: 2.3rem; line-height: 1.15; margin-bottom: 23px; }
.heading-section.is-spaced { margin-bottom: 2rem; }
.heading-section.is-flush { margin-bottom: 0; }
.heading-section.is-footer { font-size: 1.625rem; margin-bottom: 0; }

.heading-kicker { font-size: 26px; }
.heading-kicker.is-28 { font-size: 28px; }

.heading-accent {
  font-family: var(--vx-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--vx-gold);
  line-height: 0;
}
.heading-accent.is-36 { font-size: 36px; }
.heading-accent.is-footer { font-size: 1.8rem; }
.heading-accent.is-light { color: var(--vx-white); }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.button {
  display: block;
  width: max-content;
  padding: .75rem 1.75rem .625rem;
  border: 2px solid var(--vx-gold);
  background-color: var(--vx-gold);
  color: var(--vx-white);
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.25rem;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--vx-ease), background-color .3s var(--vx-ease), border-color .3s var(--vx-ease);
}
.button:hover, .button:focus-visible { background-color: transparent; color: var(--vx-gold); }

.button-line {
  position: relative;
  display: block;
  width: max-content;
  color: var(--vx-black);
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.25rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.button-line::after {
  content: "";
  display: block;
  height: .125rem;
  background-color: var(--vx-gold);
  transform-origin: left;
  transition: transform .3s var(--vx-ease-out);
}
.button-line:hover::after, .button-line:focus-visible::after { transform: scaleX(0); }
.button-line.is-light { color: var(--vx-white); }
.button-line.is-inherit { color: inherit; }
.button-line + .button { transform: translateY(-.125rem); }

.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.button-group.is-left { justify-content: flex-start; }
.button-group.is-card { gap: 1.5rem; margin-top: 0; flex-wrap: nowrap; }
.button-group.is-offer { gap: 3.5rem; flex-wrap: nowrap; }
.button-group.is-service { justify-content: space-around; gap: .75rem; margin-top: 1.25rem; }

/* Flèches de carrousel */
.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: block;
  padding: .75rem 0;
  color: var(--vx-gold);
  transform: translateY(-50%);
}
.slider-arrow svg { width: 2.75rem; height: auto; transition: transform .3s var(--vx-ease-out); }
.slider-arrow.is-prev svg { transform: scaleX(-1); }
.slider-arrow.is-prev:hover svg, .slider-arrow.is-prev:focus-visible svg { transform: scaleX(-1) translateX(.375rem); }
.slider-arrow.is-next:hover svg, .slider-arrow.is-next:focus-visible svg { transform: translateX(.375rem); }
.slider-arrow.is-light { color: var(--vx-white); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav_component {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 667;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  align-items: center;
  column-gap: 2.25rem;
  width: 100%;
  height: var(--vx-nav-h);
  padding: 0 2rem;
  transition: background-color .3s var(--vx-ease), box-shadow .3s var(--vx-ease);
}
.nav_component.is-scrolled { background-color: var(--vx-white); box-shadow: var(--vx-shadow-md); }

.nav_left {
  position: relative;
  z-index: 40;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav_burger { display: block; }
.nav_burger-lines { position: relative; width: 1.75rem; height: 23px; }
.nav_burger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--vx-white);
  transition: all .3s var(--vx-ease-out);
}
.nav_burger-line.is-top { top: 0; }
.nav_burger-line.is-mid-a, .nav_burger-line.is-mid-b { top: 9px; }
.nav_burger-line.is-bottom { top: 18px; width: 80%; }
.nav_component.is-scrolled .nav_burger-line,
.nav_component.is-open .nav_burger-line { background-color: var(--vx-black); }
.nav_component.is-open .nav_burger-line.is-top,
.nav_component.is-open .nav_burger-line.is-bottom { top: 9px; left: 50%; width: 0; }
.nav_component.is-open .nav_burger-line.is-mid-a { transform: rotate(45deg); }
.nav_component.is-open .nav_burger-line.is-mid-b { transform: rotate(-45deg); }

.nav_home { display: block; color: var(--vx-white); transition: transform .3s var(--vx-ease-out), color .3s var(--vx-ease-out); }
.nav_home:hover, .nav_home:focus-visible { transform: scale(1.1); }
.nav_home-icon { width: 2rem; height: 2rem; }
.nav_component.is-scrolled .nav_home,
.nav_component.is-open .nav_home { color: var(--vx-black); }

.nav_logo-link {
  position: relative;
  align-self: center;
  width: 133px;
  height: 0;
  transform: translateY(-2rem);
}
.nav_logo-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
  transition: all .3s var(--vx-ease-out);
}
.nav_component.is-scrolled .nav_logo-full { opacity: 0; transform: translateY(-1.25rem) scale(.5); }
.nav_component.is-open .nav_logo-full { opacity: 0; transform: none; }
.nav_logo-mark {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  max-width: none;
  height: 60px;
  opacity: 0;
  transform: translateX(-50%);
  transition: all .3s var(--vx-ease-out);
}
.nav_component.is-scrolled .nav_logo-mark,
.nav_component.is-open .nav_logo-mark { opacity: 1; }

.nav_right { justify-self: end; display: flex; gap: 1rem; }
.nav_actions { display: flex; align-items: center; gap: 1rem; }

.nav_mobile-actions { display: none; }
.nav_icon-btn {
  display: grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--vx-white);
  color: var(--vx-white);
  transition: color .3s var(--vx-ease), border-color .3s var(--vx-ease);
}
.nav_icon-btn svg { width: 1rem; height: auto; }
.nav_icon-btn.is-contact { align-self: flex-end; }
.nav_icon-btn.is-contact svg { width: 1.25rem; }
.nav_component.is-scrolled .nav_icon-btn { border-color: var(--vx-black); color: var(--vx-black); }
.nav_component.is-scrolled .nav_icon-btn.is-location { display: none; }

.button.is-nav { font-size: 1rem; line-height: 1.5rem; padding: .5rem 1.75rem .375rem; }
.button.is-nav:hover, .button.is-nav:focus-visible { background-color: var(--vx-white); }

.nav_lang { position: relative; width: 3rem; }
.nav_lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  width: 3rem;
  height: 2.5rem;
  color: var(--vx-white);
  text-transform: uppercase;
  text-align: center;
  transition: color .3s var(--vx-ease);
}
.nav_lang-toggle svg { width: 10px; height: 10px; }
.nav_component.is-scrolled .nav_lang-toggle { color: var(--vx-black); }
.nav_lang-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  overflow: hidden;
  transition: all .3s var(--vx-ease);
}
.nav_lang:hover .nav_lang-dropdown,
.nav_lang.is-active .nav_lang-dropdown { grid-template-rows: 1fr; }
.nav_lang-inner { display: flex; flex-direction: column; min-height: 0; background-color: var(--vx-white); }
.nav_lang-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.5rem;
  border: 1px solid var(--vx-black);
  color: var(--vx-black);
  transition: color .3s var(--vx-ease), background-color .3s var(--vx-ease);
}
.nav_lang-link:hover, .nav_lang-link:focus-visible { color: var(--vx-white); background-color: var(--vx-black); }

/* --------------------------------------------------------------------------
   Menu plein écran
   -------------------------------------------------------------------------- */
.menu_component {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(406px, 0) 1fr;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--vx-white);
  opacity: 0;
  transform: scale(.95);
  pointer-events: none;
  transition: opacity .3s var(--vx-ease-out), transform .3s var(--vx-ease-out);
}
.nav_component.is-open .menu_component { opacity: 1; transform: scale(1); pointer-events: auto; }

.menu_left { position: relative; display: flex; flex-direction: column; height: 100vh; max-height: 100vh; }
.menu_links-wrap {
  display: flex;
  flex: 0 1 auto;
  height: 100%; /* comme l'original : 100 % + barre du bas, puis rétrécissement proportionnel */
  flex-direction: column;
  justify-content: center;
  padding: 90px 2rem 0;
  overflow-y: auto;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.menu_list { display: flex; flex-direction: column; gap: 1.75rem; font-size: 1.25rem; line-height: 1.75rem; }
.menu_link { display: block; transition: color .3s var(--vx-ease); }
.menu_link:hover, .menu_link:focus-visible { color: var(--vx-gold); }
.menu_bottom {
  display: flex;
  align-items: center;
  height: var(--vx-nav-h);
  margin-top: auto;
  padding: 0 2rem;
  transform: translateY(-.25rem);
}
.menu_socials { display: flex; align-items: flex-end; gap: .75rem; }
.menu_social-link { display: block; }
.menu_social-icon { width: 1.5rem; height: 1.5rem; transition: transform .3s var(--vx-ease-out); }
.menu_social-link:hover .menu_social-icon, .menu_social-link:focus-visible .menu_social-icon { transform: translateY(-.5rem); }

.menu_images { position: relative; height: 100vh; }
.menu_images::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, .4); }
.menu_image-item { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--vx-ease); }
.menu_image-item.is-active { opacity: 1; }
.menu_image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Hero vidéo
   -------------------------------------------------------------------------- */
.hero_component { position: relative; height: 100vh; margin-bottom: 3rem; }
.hero_video-wrap { position: absolute; inset: 0; height: 100%; overflow: hidden; } /* height : écrase les 500 px par défaut du Background Video Webflow */
.hero_video { width: 100%; height: 100%; object-fit: cover; }
.hero_scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--vx-white);
  font-size: 1.225rem;
  line-height: 1.5rem;
  transform: translate(-50%, 2.5rem);
}
.hero_scroll-text { display: block; animation: vx-bounce 1s infinite; }
.hero_scroll-line { display: block; width: 1px; height: 2.5rem; }
.hero_scroll-line.is-white { margin-top: .5rem; background-color: var(--vx-white); }
.hero_scroll-line.is-gold { background-color: var(--vx-gold); }

@keyframes vx-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */
.section_intro { padding: 76px 0 70px; }
.intro_logo { width: 78px; height: 78px; margin: 0 auto 2rem; }

/* --------------------------------------------------------------------------
   Chambres & suites (carrousel)
   -------------------------------------------------------------------------- */
.section_rooms { padding: 0; }
.rooms_slider-wrap { position: relative; max-width: 1185px; margin-left: auto; margin-right: auto; }
.rooms_swiper { max-width: 1050px; margin-left: auto; margin-right: auto; }
.rooms_spacer { display: none; }

.room-card { position: relative; height: 490px; overflow: hidden; }
.room-card_image { width: 100%; height: 100%; object-fit: cover; transition: all .3s var(--vx-ease); }
.room-card_label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--vx-white);
  text-shadow: var(--vx-shadow-text-lg);
  transition: all .3s var(--vx-ease);
}
.room-card:hover .room-card_label { opacity: 0; }
.room-card_title {
  margin: 0 0 2rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: center;
  text-transform: uppercase;
}
.room-card_hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1.25rem;
  color: var(--vx-white);
  background-color: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: all .3s var(--vx-ease);
}
.room-card:hover .room-card_hover { opacity: 1; }

.rooms_prev { left: 0; }
.rooms_next { right: 0; }
.rooms_text { margin-top: 70px; }

/* --------------------------------------------------------------------------
   Visuel collage (dégradé beige)
   -------------------------------------------------------------------------- */
.section_gallery { padding: 56px 0 70px; background-image: linear-gradient(to top, var(--vx-beige), var(--vx-white)); }
.gallery_wrap { display: flex; justify-content: center; }
.gallery_item { position: relative; display: flex; align-items: center; width: 100%; max-width: 1024px; min-height: 400px; }
.gallery_image { width: 100%; height: 600px; object-fit: cover; }
.gallery_hover {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity .3s var(--vx-ease);
}
.gallery_item:hover .gallery_hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Séjours en famille (texte + 3 photos superposées)
   -------------------------------------------------------------------------- */
.section_family { padding: 0 0 76px; background-color: var(--vx-beige); }
.family_wrap { display: flex; gap: 60px; max-width: 1024px; margin-left: auto; margin-right: auto; }
.family_content { display: grid; place-content: center; width: 40%; padding: 0 20px; }
.family_text { max-width: 36rem; font-size: .875rem; line-height: 1.5rem; }
.family_images { position: relative; display: flex; flex-direction: column; width: 60%; height: 460px; }
.family_img { display: block; max-width: none; object-fit: cover; }
.family_img.is-1 { position: relative; z-index: 1; width: 308px; height: 220px; }
.family_img.is-2 { position: absolute; top: 230px; left: 0; z-index: 0; width: 210px; height: 228px; }
.family_img.is-3 {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  width: 420px;
  height: 358px;
  border: 10px solid var(--vx-white);
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   Services 5 étoiles (3 cartes)
   -------------------------------------------------------------------------- */
.section_services { padding: 56px 0; }
.services_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 1024px;
  margin: 1.8rem auto 42px;
}
.services_item { min-width: 0; }
.service-card { position: relative; aspect-ratio: 328 / 490; overflow: hidden; }
.service-card_image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-card_gradient {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 11rem;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
.service-card_overlay { position: absolute; inset: 0; transition: background-color .5s var(--vx-ease-out); }
.service-card:hover .service-card_overlay,
.service-card.is-active .service-card_overlay { background-color: rgba(0, 0, 0, .6); }
.service-card_content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: var(--vx-white);
  font-size: .875rem;
  line-height: 1.5rem;
}
.service-card_inner { text-align: center; text-shadow: var(--vx-shadow-text-md); }
.service-card_title { margin: 0 0 1.25rem; font-size: 1.25rem; line-height: 1.75rem; text-align: center; }
.service-card_toggle { display: none; position: relative; width: 1.5rem; height: 1.5rem; margin: 0 auto; }
.service-card_toggle-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--vx-white);
  transform: rotate(-90deg);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1);
}
.service-card_toggle-bar.is-h { width: 1.5rem; height: .25rem; margin: -.125rem 0 0 -.75rem; }
.service-card_toggle-bar.is-v { width: .25rem; height: 1.5rem; margin: -.75rem 0 0 -.125rem; }
.service-card.is-active .service-card_toggle-bar { transform: rotate(90deg); }
.service-card.is-active .service-card_toggle-bar.is-h { opacity: 0; }
.service-card_collapse {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: all .5s var(--vx-ease-out);
}
.service-card:hover .service-card_collapse,
.service-card.is-active .service-card_collapse { grid-template-rows: 1fr; }
.service-card_collapse-inner { min-height: 0; }
.service-card_collapse-inner p { margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Offres (carrousel plein écran en fondu + parallaxe)
   -------------------------------------------------------------------------- */
.section_offers { padding: 0 0 70px; }
.offers_slider-wrap { position: relative; }
.offer-card { position: relative; height: 676px; overflow: hidden; }
.offer-card_media { position: relative; overflow: hidden; }
.offer-card_image { width: 100%; height: 750px; object-fit: cover; }
.offer-card_overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1.25rem;
  color: var(--vx-white);
  background-color: rgba(0, 0, 0, .5);
}
.offer-card_content { max-width: 645px; }
.offer-card_text { font-size: .875rem; line-height: 1.5rem; text-align: center; }
.offer-card_kicker { margin-bottom: 1rem; font-size: 1.125rem; line-height: 1.75rem; text-transform: uppercase; }
.heading-offer { margin: 1.75rem 0; font-size: 2.3rem; line-height: 1.15; color: var(--vx-white); }
.offer-card_details > :last-child { margin-bottom: 0; }
.offer-card_note { font-size: 11px; font-style: italic; }
.offers_prev { left: 3rem; }
.offers_next { right: 3rem; }

/* --------------------------------------------------------------------------
   Guide / articles
   -------------------------------------------------------------------------- */
.section_journal { padding: 0 0 70px; }
.journal_wrap { margin-top: 28px; }
.journal_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.journal-card { display: flex; flex-direction: column; }
.journal-card_link { display: block; }
.journal-card_media { position: relative; }
.journal-card_image { display: block; width: 341px; max-width: none; height: 24rem; object-fit: cover; }
.journal-card_hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 341px;
  height: 24rem;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity .3s var(--vx-ease);
}
.journal-card_link:hover .journal-card_hover { opacity: 1; }
.journal-card_title {
  margin: 1rem 0 0;
  font-size: 1.4rem;
  line-height: 1;
  text-transform: uppercase;
  transition: color .3s var(--vx-ease);
}
.journal-card_link:hover .journal-card_title { color: var(--vx-gold); }
.journal-card_meta, .journal-card_excerpt { margin-top: 1rem; }
.journal-card_more { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Footer — Instagram
   -------------------------------------------------------------------------- */
.instagram_wrap { position: relative; min-height: 330px; margin-top: 42px; cursor: none; }
.instagram_wrap * { cursor: none; }
.instagram_slide { width: 300px; }
.instagram_item { position: relative; display: block; width: 300px; height: 300px; }
.instagram_image { width: 100%; height: 100%; object-fit: cover; }
.instagram_handle {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  color: var(--vx-white);
}
.instagram_handle svg { width: 15px; height: 15px; }
.instagram_cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
  place-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--vx-white);
  color: var(--vx-gold);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--vx-ease);
}
.instagram_cursor.is-active { display: grid; }
.instagram_cursor.is-left { transform: translate(-50%, -50%) rotate(-180deg); }
.instagram_cursor svg { width: 1.25rem; height: auto; }

/* --------------------------------------------------------------------------
   Footer — colonnes
   -------------------------------------------------------------------------- */
.footer_main { padding: 1.75rem 2rem; background-color: var(--vx-beige); }
.footer_container { max-width: 1024px; margin-left: auto; margin-right: auto; }
.footer_grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: 3rem;
  padding: .5rem 0;
  color: var(--vx-ink);
  font-size: .75rem;
  line-height: 1rem;
  text-align: left;
}
.footer_col { display: flex; grid-column: span 3; justify-self: start; }
.footer_col.is-narrow { grid-column: span 2; }
.footer_brand { display: flex; flex-direction: column; }
.footer_logo-link { display: flex; justify-content: center; }
.footer_logo { width: 75px; }
.footer_labels { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.footer_label { width: 56px; }
.footer_title { margin-bottom: .75rem; font-weight: 900; text-transform: uppercase; }
.footer_row { display: flex; align-items: flex-start; gap: .75rem; }
.footer_row.is-address { margin-bottom: 2rem; }
.footer_row.is-phone { margin-bottom: .75rem; }
.footer_row svg { width: .75rem; height: auto; flex-shrink: 0; transition: transform .3s var(--vx-ease); }
.footer_row.is-address svg { padding-top: .25rem; width: .75rem; }
.footer_row.is-phone svg, .footer_row.is-mail svg { margin-top: .125rem; }
.footer_row:hover svg { transform: scale(1.25); }
.footer_row.is-address:hover svg { transform: none; }

.footer_lang { position: relative; width: 190px; margin-top: 3rem; }
.footer_lang-toggle, .footer_lang-link {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  border: 1px solid var(--vx-black);
  color: var(--vx-black);
  text-align: left;
  text-transform: uppercase;
}
.footer_lang-toggle { position: relative; }
.footer_lang-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .75rem;
  border: 4px solid transparent;
  border-bottom: 0;
  border-top-color: var(--vx-black);
  transform: translateY(-50%);
}
.footer_lang-list {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--vx-ease);
}
.footer_lang:hover .footer_lang-list { opacity: 1; pointer-events: auto; }
.footer_lang-link { background-color: var(--vx-white); transition: color .3s var(--vx-ease), background-color .3s var(--vx-ease); }
.footer_lang-link:hover, .footer_lang-link:focus-visible { color: var(--vx-white); background-color: var(--vx-black); }

.footer_heading { margin-bottom: .75rem; font-weight: 900; text-transform: uppercase; }
.footer_links { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.footer_link:hover, .footer_link:focus-visible { text-decoration: underline; }

.footer_more { display: block; }
.footer_more-inner { min-height: 0; }
.footer_dest { line-height: 2; }
.footer_dest-title { margin: 0 0 .25rem; font-size: .75rem; line-height: 1rem; font-weight: 900; text-transform: uppercase; }
.footer_dest p { margin-bottom: 1rem; }
.footer_dest p + .footer_dest-title { margin-top: 2rem; }
.footer_dest a { color: var(--vx-black); }
.footer_dest a:hover { text-decoration: underline; }

.footer_toggle-wrap { display: none; }
.footer_toggle { position: relative; display: block; width: 2.5rem; height: 2.5rem; margin: 0 auto; border-radius: 50%; background-color: var(--vx-gold); }
.footer_toggle .service-card_toggle-bar { background-color: var(--vx-white); }
.footer_toggle.is-active .service-card_toggle-bar { transform: rotate(90deg); }
.footer_toggle.is-active .service-card_toggle-bar.is-h { opacity: 0; }

/* Groupe B Signature */
.footer_group { padding: 2.5rem 1.25rem; border-top: 1px solid var(--vx-black); background-color: var(--vx-white); }
.footer_group-inner { display: flex; align-items: center; gap: 2rem; max-width: 1280px; margin-left: auto; margin-right: auto; }
.footer_group-brand { display: flex; align-items: center; gap: 1.25rem; }
.footer_group-logo { width: 40px; max-width: none; height: auto; flex-shrink: 0; } /* 40 × 121 comme l'original ; max-width:none l'empêche d'être écrasé par le flex */
.footer_group-text { margin: 0; text-transform: uppercase; }
.footer_group-text em { font-family: var(--vx-serif); font-size: 1.5rem; line-height: 1; text-transform: none; }
.footer_hotels { display: flex; align-items: center; gap: 2rem; }
.footer_hotel-link { display: block; transition: transform .5s var(--vx-ease-out); }
.footer_hotel-link:hover, .footer_hotel-link:focus-visible { transform: scale(1.1); }
.footer_hotel-logo { width: auto; max-width: none; height: 6rem; }

/* Bas de page */
.footer_bottom { padding: 1.25rem 1.25rem 5rem; border-top: 1px solid var(--vx-black); background-color: var(--vx-white); }
.footer_bottom-inner {
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  font-size: .75rem;
  line-height: 1rem;
  text-align: left;
}
.footer_bottom-inner p { margin: 0; }
.footer_bottom-inner a { color: var(--vx-black); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Boutons flottants & widget contact
   -------------------------------------------------------------------------- */
.float-location {
  position: fixed;
  left: 2rem;
  bottom: 1.25rem;
  z-index: 10;
  display: grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--vx-white);
  color: var(--vx-white);
  transition: background-color .3s var(--vx-ease), box-shadow .3s var(--vx-ease), color .3s var(--vx-ease);
}
.float-location svg { width: 1rem; height: auto; }
.float-location.is-scrolled { background-color: var(--vx-white); box-shadow: var(--vx-shadow-md); color: var(--vx-black); }

.contact-widget {
  position: fixed;
  left: 5rem;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 175px;
  transform: translateY(calc(100% - 48px));
  transition: all .5s cubic-bezier(.4, 0, .2, 1);
}
.contact-widget.is-active { max-width: 24rem; transform: translateY(0); }
.contact-widget_toggle {
  display: flex;
  align-self: flex-end;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  border: 1px solid var(--vx-white);
  transform: translateY(-.75rem);
  transition: all .3s var(--vx-ease);
}
.contact-widget.is-active .contact-widget_toggle { transform: translateY(0); }
.contact-widget_toggle.is-scrolled { background-color: var(--vx-white); box-shadow: var(--vx-shadow-md); }
.contact-widget_label {
  padding: 0 1rem;
  color: var(--vx-white);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
  text-transform: uppercase;
  transition: color .3s var(--vx-ease);
}
.contact-widget_toggle.is-scrolled .contact-widget_label { color: var(--vx-black); }
.contact-widget_label.is-close,
.contact-widget.is-active .contact-widget_label.is-open { display: none; }
.contact-widget.is-active .contact-widget_label.is-close { display: block; }

.contact-widget_form-block { margin: 0; }
.contact-widget_form { display: flex; flex-direction: column; gap: .5rem; padding: 2rem 2rem 1rem; background-color: var(--vx-white); }
.contact-widget.is-active .contact-widget_form { box-shadow: var(--vx-shadow-lg); }
.contact-widget_input {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: .5rem 1rem;
  border: 1px solid var(--vx-border);
  border-radius: 0;
  background-color: var(--vx-white);
  font-size: 1rem;
  line-height: 1.5rem;
}
.contact-widget_input:focus { outline: none; border-color: var(--vx-gold); }
.contact-widget_input::placeholder { font-size: .875rem; font-style: italic; color: #737373; }
.contact-widget_input.is-textarea { min-height: 6rem; resize: vertical; }
.contact-widget_submit { margin: 0 auto; font-family: inherit; }
.contact-widget_gdpr-toggle { display: block; font-size: .75rem; line-height: 1rem; font-style: italic; text-align: center; text-decoration: underline; cursor: pointer; }
.contact-widget_gdpr-toggle .is-less,
.contact-widget_gdpr-toggle.is-active .is-more { display: none; }
.contact-widget_gdpr-toggle.is-active .is-less { display: inline; }
.contact-widget_gdpr {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  font-size: .75rem;
  line-height: 1rem;
  font-style: italic;
  text-align: justify;
  transition: all .3s var(--vx-ease);
}
.contact-widget_gdpr.is-active { grid-template-rows: 1fr; }
.contact-widget_gdpr-inner { min-height: 0; }
.contact-widget_gdpr-inner p { margin: 0; }
.contact-widget_done, .contact-widget_fail { display: none; padding: 1.25rem; background-color: var(--vx-gold); color: var(--vx-white); text-align: center; }

/* --------------------------------------------------------------------------
   Apparition au scroll (équivalent AOS fade-up) — activée par js/vernet.js
   -------------------------------------------------------------------------- */
.vx-reveal-ready [data-vx-reveal] {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: cubic-bezier(.47, 0, .745, .715);
}
.vx-reveal-ready [data-vx-reveal].is-revealed { opacity: 1; transform: translateZ(0); transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .vx-reveal-ready [data-vx-reveal] { opacity: 1; transform: none; transition: none; }
  .hero_scroll-text { animation: none; }
}

/* ==========================================================================
   ≥ 1280 px et entre 992 et 1279 px
   ========================================================================== */
@media (max-width: 1279px) {
  .rooms_prev { left: .5rem; }
  .rooms_next { right: .5rem; }
}

/* ==========================================================================
   Tablette ≤ 991 px
   ========================================================================== */
@media (max-width: 991px) {
  .nav_component { padding: 0 1rem; }
  .nav_mobile-actions { display: flex; flex-direction: row; gap: 1rem; }
  .button.is-nav { position: fixed; left: 0; bottom: 0; z-index: 20; width: 100%; padding: .75rem 1.75rem; }
  .button.is-nav:hover, .button.is-nav:focus-visible { background-color: var(--vx-gold); color: var(--vx-white); }

  .hero_component { height: 85vh; }

  .rooms_prev { left: 1rem; }
  .rooms_next { right: 1rem; }

  .gallery_image { height: 24rem; }

  .family_wrap { flex-direction: column-reverse; }
  .family_content { width: 100%; margin-top: 1.25rem; }
  .family_images { width: 100%; height: 400px; }
  .family_img.is-1 { margin: 0 auto; }
  .family_img.is-2 { left: 40%; top: 230px; z-index: 3; }
  .family_img.is-3 { top: 240px; }

  .services_grid { display: flex; flex-direction: column; gap: 2rem; margin: 1.8rem auto 42px; }
  .service-card { height: 24rem; aspect-ratio: auto; }

  .offers_slider-wrap .slider-arrow { top: auto; bottom: 1rem; }

  .journal_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-card_image, .journal-card_hover { width: 100%; }

  .instagram_wrap { min-height: 0; cursor: auto; }
  .instagram_wrap * { cursor: auto; }
  .instagram_cursor { display: none !important; }

  /* Colonnes empilées, ajustées à leur contenu, contenu centré dans chaque colonne */
  .footer_grid { display: block; padding: .5rem 1.25rem; text-align: center; }
  .footer_col { display: block; width: fit-content; margin-top: 1rem; }
  .footer_brand { align-items: center; }
  .footer_labels, .footer_row { justify-content: center; }
  .footer_lang { margin-left: auto; margin-right: auto; }
  .footer_links { align-items: center; }
  .footer_group { display: none; }
  .footer_bottom { padding-bottom: 8rem; }
  .footer_bottom-inner { flex-direction: column; gap: 1.25rem; text-align: center; }

  .float-location, .contact-widget_toggle { display: none; }
  .contact-widget { transform: translateY(100%); }
  .contact-widget.is-active { transform: translateY(-3rem); }
}

/* ==========================================================================
   Mobile paysage ≤ 767 px
   ========================================================================== */
@media (max-width: 767px) {
  h1, h2 { font-size: 1.6rem; }
  h3 { font-size: 1.4rem; line-height: 1.5rem; }
  h1 em, h2 em { line-height: inherit; }
  .heading-intro, .heading-section, .heading-offer { font-size: 1.6rem; }
  .heading-accent { line-height: inherit; }

  .text-block { padding-left: 20px; padding-right: 20px; }

  .nav_component { column-gap: 0; }
  .nav_mobile-actions { flex-direction: column; gap: .5rem; }
  .nav_home { display: none; }
  .nav_component.is-open .nav_home { display: block; }
  .nav_logo-link { width: 0; }
  .nav_logo-full { top: var(--vx-nav-h); width: 133px; transform: translateX(-50%); }
  .nav_component.is-scrolled .nav_logo-full { transform: translate(-50%, -1.25rem) scale(.5); }
  .nav_component.is-open .nav_logo-full { transform: translateX(-50%); }

  .menu_component { grid-template-columns: 1fr; }
  .menu_links-wrap { padding: 90px 1rem 0; }
  .menu_bottom { padding: 0 1rem; }
  .menu_images { display: none; }

  /* Chambres : bande à faire défiler au doigt (comme le HTML mobile d'origine) */
  .rooms_slider-wrap { max-width: none; }
  .rooms_swiper { max-width: none; padding: 0 1rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rooms_swiper::-webkit-scrollbar { display: none; }
  .rooms_swiper > .swiper-wrapper { gap: 1rem; transform: none !important; }
  .rooms_slide { flex: 1 0 95%; width: auto; }
  .rooms_spacer { display: block; flex: 1 0 1px; }
  .room-card { height: 26rem; }
  .room-card_label { opacity: 0; }
  .room-card_hover { opacity: 1; background-color: rgba(0, 0, 0, .3); }
  .rooms_prev, .rooms_next { display: none; }
  .rooms_text { margin-top: 57px; } /* 28 px + la ligne vide en tête du titre sur l'original */

  .gallery_wrap { padding: 0 1rem; }

  .family_wrap { gap: 15px; }
  .family_content { margin-top: 0; }
  .family_images { height: 440px; padding: 0 1rem; }
  .family_img.is-1 { width: 100%; height: auto; aspect-ratio: 380 / 280; }
  .family_img.is-2 { top: 233px; left: 1.75rem; z-index: 3; width: 240px; height: 180px; }
  .family_img.is-3 { top: 250px; right: 1.5rem; width: 200px; height: 150px; }

  .services_grid { flex-direction: row; flex-wrap: nowrap; gap: 1rem; margin: 2rem 0 42px; padding: 0 1rem; overflow-x: auto; }
  .services_item { flex: 1 0 95%; }
  .service-card { height: 26rem; }
  .service-card:hover .service-card_overlay { background-color: transparent; }
  .service-card.is-active .service-card_overlay { background-color: rgba(0, 0, 0, .6); }
  .service-card:hover .service-card_collapse { grid-template-rows: 0fr; }
  .service-card.is-active .service-card_collapse { grid-template-rows: 1fr; }
  .service-card_toggle { display: block; }

  .offer-card { height: 24rem; }
  .offer-card_image { height: 24rem; }
  .offer-card_details { display: none; }
  .offers_prev { left: 50%; transform: translate(calc(50% - 5rem), -50%); }
  .offers_next { right: 50%; transform: translate(calc(-50% + 5rem), -50%); }

  .journal_wrap { padding: 0 1rem; }
  .journal_grid { grid-template-columns: 1fr; }
  .journal_grid > :nth-child(n+2) { display: none; } /* l'original n'affiche qu'un article sur mobile */
  .journal-card_title { line-height: 1.5rem; }

  .instagram_slide { width: 200px; }
  .instagram_item { width: 200px; height: 200px; }

  .footer_main { padding-top: 0; padding-bottom: 0; }
  .footer_col { margin-left: auto; margin-right: auto; }
  .footer_more { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: all .5s var(--vx-ease); }
  .footer_more.is-active { grid-template-rows: 1fr; padding: .5rem 0; }
  .footer_toggle-wrap { display: block; padding: 0 2rem 2.75rem; background-color: var(--vx-beige); }

  .contact-widget { left: 0; }
}

/* ==========================================================================
   Mobile portrait ≤ 479 px
   ========================================================================== */
@media (max-width: 479px) {
  .offer-card_content { max-width: 100%; }
}

/* ==========================================================================
   SITE COMPLET — pages intérieures
   Valeurs relevées sur le site d'origine (1440 px et 390 px).
   ========================================================================== */

/* Pages sans hero : nav blanche d'emblée, contenu décalé de la hauteur de nav */
.is-no-hero .main-wrapper { padding-top: var(--vx-nav-h); }
.is-no-hero .nav_component { background-color: var(--vx-white); }
.is-no-hero .nav_burger-line { background-color: var(--vx-black); }
.is-no-hero .nav_home, .is-no-hero .nav_lang-toggle { color: var(--vx-black); }
.is-no-hero .nav_icon-btn { border-color: var(--vx-black); color: var(--vx-black); }
.is-no-hero .nav_logo-full { opacity: 0; transform: translateY(-1.25rem) scale(.5); }
.is-no-hero .nav_logo-mark { opacity: 1; }

/* Sections et jetons d'espacement (valeurs fixes, identiques à toutes les tailles) */
.section { position: relative; }
.section.is-beige { background-color: var(--vx-beige); }
.section.is-gradient { background-image: linear-gradient(to top, var(--vx-beige), rgba(248, 244, 241, 0)); }
.section.is-white { background-color: var(--vx-white); }
.pt-big { padding-top: 76px; }
.pb-big { padding-bottom: 76px; }
.pt-big-wl { padding-top: 70px; }
.pb-big-wl { padding-bottom: 70px; }
.pt-big-first { padding-top: 105px; }
.pb-small { padding-bottom: 42px; }
.mb-big { margin-bottom: 76px; }
.mb-big-wl { margin-bottom: 70px; }
.space-y-small > * + * { margin-top: 42px; }
.space-y-small-wl > * + * { margin-top: 32px; }
.space-y-big-wl > * + * { margin-top: 70px; }

/* Blocs de texte (vue « text » de l'original) */
.text-block.text-rich { text-align: center; }
.text-block.is-wide { max-width: 1024px; }
.text-rich h1 { font-size: 2.3rem; line-height: 1; margin-bottom: 2.5rem; }
.text-rich h2 { font-size: 2.3rem; line-height: 1.15; margin-bottom: 23px; }
.text-rich h3 { font-size: 1.75rem; line-height: 1; margin-bottom: 1.25rem; }
.text-rich h1 em, .text-rich h2 em, .text-rich h3 em { font-family: var(--vx-serif); font-style: italic; font-weight: 300; color: var(--vx-gold); line-height: 0; }
.text-rich ul:not(.list-pills) { margin: 0 0 1rem; padding: 0; list-style: disc inside; }
.text-rich ol { margin: 0 0 1rem; padding: 0; list-style: decimal inside; }
.text-rich .button-group { margin-top: 32px; }
.text-rich .button-line, .text-rich .button { text-decoration: none; }
.text-rich .button-line { color: var(--vx-black); }
.text-rich .button { color: var(--vx-white); }
.text-rich .button:hover, .text-rich .button:focus-visible { color: var(--vx-gold); }
.text-icon { width: 78px; margin: 0 auto 2rem; }
.text-image { width: 100%; height: auto; margin-bottom: 1rem; }
html[lang="ar"] .text-rich { direction: rtl; }

/* Pastilles (listes de services) */
.list-pills { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.list-pills li { padding: .25rem .75rem; border: 1px solid var(--vx-gold); }

/* Hero image plein écran */
.hero_component.is-image { position: relative; }
.hero_image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Carrousel photos (vue slider/simple) */
.gallery-slider_component { position: relative; display: grid; grid-template-columns: min-content minmax(0, 1024px) min-content; align-items: center; justify-content: center; }
.gallery-slider_swiper { grid-column: 2; width: 100%; max-width: 1024px; }
.gallery-slider_item { position: relative; }
.gallery-slider_image { width: 100%; height: 600px; max-width: none; object-fit: cover; }
.gallery-slider_caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; color: var(--vx-white); text-align: center; background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent); }
.gallery-slider_component .slider-arrow { position: static; transform: none; }
.gallery-slider_component .slider-arrow.is-prev { grid-column: 1; grid-row: 1; margin: 0 28px 0 56px; }
.gallery-slider_component .slider-arrow.is-next { grid-column: 3; grid-row: 1; margin: 0 56px 0 28px; }

/* Cartes « autres hébergements » (vue slider/other-rooms) */
.room-tiles_component { position: relative; max-width: 1024px; margin-left: auto; margin-right: auto; }
.section .room-tiles_component { margin-top: 28px; }
.room-tile { position: relative; }
.room-tile_image { width: 100%; height: 26rem; max-width: none; object-fit: cover; }
.room-tile_overlay { position: absolute; inset: 0; display: grid; place-content: center; padding: 1.25rem; color: var(--vx-white); text-align: center; background-color: rgba(0, 0, 0, .35); }
.room-tile_title { font-size: 1.75rem; line-height: 1; margin-bottom: 0; }
.button-group.is-tile { margin-top: 2rem; }
.room-tiles_component .slider-arrow.is-prev { left: -56px; }
.room-tiles_component .slider-arrow.is-next { right: -56px; }

/* Colonnes descriptif / services */
.columns_component { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 76px; max-width: 1024px; margin-left: auto; margin-right: auto; padding-top: 5px; }
.columns_col { text-align: justify; }
.columns_col h2 { font-size: 28px; line-height: 1; margin-bottom: 34px; }

/* Bloc « Réservez sur notre site » */
.booking_component { display: flex; flex-direction: column; gap: 32px; max-width: 1024px; margin: 0 auto; padding: 42px 0; text-align: center; }
.section.is-beige > .booking_component:only-child { padding-top: calc(42px + 24px); padding-bottom: calc(42px + 36.8px); }
.booking_intro h2 { margin-bottom: 23px; }
.booking_perks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 64px; }
.booking_perk { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.booking_perk-icon { width: 48px; height: auto; transition: transform .3s var(--vx-ease-out); }
.booking_perk:hover .booking_perk-icon { transform: scale(1.1); }
.booking_perk-label { max-width: 110px; font-size: .875rem; line-height: 1.25rem; color: var(--vx-gold); text-align: center; }
.button-group.is-flush { margin-top: 0; }

/* Fil d'Ariane */
.breadcrumb_list { display: flex; flex-wrap: wrap; gap: 0 1rem; max-width: 1024px; margin: 0 auto; }
.breadcrumb_link { color: var(--vx-gold); transition: color .3s var(--vx-ease); }
.breadcrumb_link:hover { color: #d9c3a8; }

/* Article (guide) */
.section:has(> .article_component) { max-width: 1024px; margin-left: auto; margin-right: auto; padding-top: 76px; padding-bottom: 76px; }
.article_component { margin-top: 28px; }
.article_component::after { content: ""; display: table; clear: both; }
.article_image { float: left; width: 50%; height: auto; margin: 0 2rem 2rem 0; }
.article_title { font-size: 1.8rem; line-height: 1; text-align: center; text-transform: uppercase; margin-bottom: 2.5rem; }
.article_meta { margin: 1rem 0 0; text-align: center; }
.article_meta a { text-decoration: underline; }
.article_body { margin-top: 1rem; text-align: justify; }
.article_body h2 { font-size: 1.6rem; line-height: 1.15; text-align: center; margin-bottom: 2rem; }
.article_body h2 em { font-size: 26px; }
.article_body h3 { font-size: 1.4rem; }
.article_body img { width: 100%; height: auto; margin-right: 1rem; }
.article_body a { text-decoration: underline; }

/* Page PDF (menus, carte des soins, fiche technique) */
.pdf_frame { display: block; width: 100%; height: 100vh; border: 0; }

/* Intégrations (carte Google, etc.) */
.embed iframe { display: block; width: 100%; min-height: 450px; border: 0; }

/* FAQ */
.faq_component { max-width: 1024px; margin: 0 auto; }
.faq_title { text-align: center; }
.faq_item { border-bottom: 1px solid var(--vx-border); }
.faq_question { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-size: 1rem; }
.faq_icon { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.faq_icon::before, .faq_icon::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background-color: var(--vx-gold); transition: transform .3s var(--vx-ease); }
.faq_icon::after { transform: rotate(90deg); }
.faq_item.is-active .faq_icon::after { transform: rotate(0); }
.faq_answer { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .4s var(--vx-ease); }
.faq_item.is-active .faq_answer { grid-template-rows: 1fr; }
.faq_answer-inner { min-height: 0; }
.faq_answer-inner > p { padding-bottom: 1.25rem; text-align: justify; }

/* Grilles et blocs génériques */
.grid_component { display: grid; gap: 2.5rem; max-width: 1024px; margin: 0 auto; }
.grid_component.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid_component.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid_component.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.generic_images { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; max-width: 1024px; margin: 2rem auto 0; }
.generic_image { width: 100%; height: 100%; object-fit: cover; }

/* Modale du moteur de réservation D-Edge */
.book-modal { position: fixed; inset: 0; z-index: 999; overflow: auto; padding-top: 5rem; background-color: var(--vx-white); opacity: 0; pointer-events: none; transition: opacity .3s var(--vx-ease-out); }
.book-modal.is-active { opacity: 1; pointer-events: auto; }
.book-modal_close { position: absolute; top: 1.25rem; right: 1.25rem; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .3s var(--vx-ease-out); }
.book-modal_close:hover, .book-modal_close:focus-visible { transform: scale(1.1); }
.book-modal_close svg { width: 100%; height: 100%; }
@media (min-width: 992px) { .book-modal { display: flex; justify-content: center; } }
@media (min-width: 992px) and (min-height: 800px) { .book-modal { align-items: center; padding-top: 0; } }

@media (max-width: 991px) {
  .columns_component { grid-template-columns: 1fr; gap: 28px; padding: 5px 20px 0; }
  .booking_component { padding-left: 20px; padding-right: 20px; }
  .gallery-slider_component { grid-template-columns: minmax(0, 1fr); }
  .gallery-slider_component .slider-arrow { display: none; }
  .gallery-slider_swiper { grid-column: 1; }
  .room-tiles_component .slider-arrow { display: none; }
  .grid_component.is-3, .grid_component.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq_component { padding: 0 20px; }
}
@media (max-width: 767px) {
  .gallery-slider_image { height: 24rem; }
  .room-tiles_component { padding: 0 20px; }
  .section:has(> .article_component) { padding: 42px 0; }
  .article_image { float: none; width: 100%; margin: 0 0 2rem; }
  .article_content { padding: 0 20px; }
  .article_title { line-height: 1.25; }
  .breadcrumb_component { display: none; }
  .grid_component.is-2, .grid_component.is-3, .grid_component.is-4 { grid-template-columns: 1fr; padding: 0 20px; }
}

/* ==========================================================================
   SITE COMPLET — vues des pages uniques
   ========================================================================== */

/* FAQ : cartes blanches ombrées, question en or (vue faq-quicktext) */
.faq_component { display: flex; flex-direction: column; gap: 1rem; }
.faq_title { margin-bottom: 1.75rem; }
.faq_item { border-bottom: 0; background-color: var(--vx-white); box-shadow: var(--vx-shadow-lg); }
.faq_question { padding: .75rem 1.25rem; color: var(--vx-gold); }
.faq_answer-inner > p { padding: 1.25rem; margin: 0; font-size: .875rem; }

/* Boutons-filtres (catégories du guide, galerie, hébergements) */
.button.is-filter { background-color: transparent; color: var(--vx-gold); font-size: .875rem; padding-left: 1.75rem; padding-right: 1.75rem; }
.button.is-filter:hover, .button.is-filter:focus-visible, .button.is-filter.is-active { background-color: var(--vx-gold); color: var(--vx-white); }
.filters_component { max-width: 1024px; margin: 0 auto; }
.filters_list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0 auto 1.75rem; }

/* Rangée image / texte */
.split_component { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 2.5rem; max-width: 1024px; margin: 0 auto; }
.split_component.is-media-only { grid-template-columns: 1fr; }
.split_text { display: flex; justify-content: center; }
.split_text-inner { max-width: 390px; text-align: justify; }
.split_text-inner h2, .split_text-inner h3 { text-align: left; }
.split_text-inner .button-group { justify-content: flex-start; gap: 2.8rem; }
.split_media { position: relative; }
.split_image { width: 100%; height: 600px; max-width: none; object-fit: cover; }
.split_zoom { display: block; }
.split_media.is-slider .slider-arrow.is-prev { left: 1rem; }
.split_media.is-slider .slider-arrow.is-next { right: 1rem; }
.split_media.is-stack { position: relative; height: 600px; }
.split_stack-img { position: absolute; object-fit: cover; box-shadow: var(--vx-shadow-lg); }
.split_stack-img.is-1 { top: 0; left: 0; width: 70%; height: 60%; }
.split_stack-img.is-2 { right: 0; top: 30%; width: 50%; height: 45%; z-index: 2; }
.split_stack-img.is-3 { left: 10%; bottom: 0; width: 45%; height: 35%; z-index: 3; }

/* Cartes (liste du guide, presse, hébergements, offres, services) */
.cards_component { display: grid; gap: 2.5rem; max-width: 1024px; margin: 0 auto; }
.cards_component.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
.cards_component.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards_component.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1rem; }
.card_item { display: flex; flex-direction: column; gap: 1rem; }
.card_item[hidden] { display: none; }
.card_media { position: relative; display: block; overflow: hidden; }
.card_media::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(0, 0, 0, .4), transparent); opacity: 0; transition: opacity .3s var(--vx-ease); }
a.card_media:hover::after { opacity: 1; }
.card_image { width: 100%; height: 384px; max-width: none; object-fit: cover; }
.cards_component.is-2 .card_image { height: 350px; }
.cards_component.is-4 .card_image { height: 290px; }
.card_body { text-align: center; }
.card_body h2, .card_body h3 { font-size: 1.4rem; line-height: 1.25; text-transform: uppercase; margin-bottom: .75rem; transition: color .3s var(--vx-ease); }
.cards_component.is-2 .card_body h2, .cards_component.is-2 .card_body h3 { font-size: 1.75rem; line-height: 1; margin-bottom: 2rem; text-transform: none; }
.cards_component.is-4 .card_body h2, .cards_component.is-4 .card_body h3 { font-size: 1.25rem; }
.card_item:hover .card_body h2, .card_item:hover .card_body h3 { color: var(--vx-gold); }
.card_body ul:not(.list-pills) { display: flex; justify-content: center; margin-bottom: 2rem; font-size: 1.5rem; list-style: none; }
.card_body ul:not(.list-pills) li + li::before { content: "-"; padding: 0 1.25rem; color: rgba(0, 0, 0, .5); }
.card_body .button-group { margin-top: 2rem; }

/* Carrousel de cartes services / salons (vue slider/services) */
.service-slider_component { position: relative; max-width: 1185px; margin: 0 auto; }
.service-slider_swiper { max-width: 1050px; margin: 0 auto; }
.service-tile { position: relative; height: 490px; overflow: hidden; }
.service-tile_image { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.service-tile_label { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; color: var(--vx-white); text-shadow: var(--vx-shadow-text-lg); transition: opacity .3s var(--vx-ease); }
.service-tile_title { margin-bottom: 2rem; font-size: 1.25rem; line-height: 1.75rem; text-align: center; text-transform: uppercase; }
.service-tile_hover { position: absolute; inset: 0; display: grid; place-content: center; padding: 1.25rem; color: var(--vx-white); text-align: center; background-color: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s var(--vx-ease); }
.service-tile:hover .service-tile_hover { opacity: 1; }
.service-tile:hover .service-tile_label { opacity: 0; }
.service-slider_component .slider-arrow.is-prev { left: 0; }
.service-slider_component .slider-arrow.is-next { right: 0; }

/* Carrousel pleine largeur, texte en bas (vue slider/full-width-txt-bottom) */
.fullwidth_component { position: relative; }
.fullwidth_slide { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 676px; padding-top: 3.5rem; }
.fullwidth_image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fullwidth_content { width: 100%; padding: 76px 3.5rem; color: var(--vx-white); text-align: center; background-image: linear-gradient(to top, rgba(0, 0, 0, .55), transparent); }
.fullwidth_content h2 em { color: var(--vx-white); }
.fullwidth_content .button-line { color: var(--vx-white); }

/* Carrousel texte + photo avec vidéo de fond (vue slider/text-photo-video) */
.text-photo_component { position: relative; max-width: 1185px; margin: 1.7rem auto 0; }
.text-photo_swiper { position: relative; max-width: 1050px; margin: 0 auto; }
.text-photo_video { position: absolute; top: 0; right: 0; width: 313px; height: 100%; max-width: none; object-fit: cover; }
.text-photo_slide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; padding-bottom: 1.25rem; }
.text-photo_text-inner { max-width: 412px; text-align: justify; }
.text-photo_text-inner h3 { margin-bottom: 32px; }
.text-photo_text-inner h3 em { color: var(--vx-gold); font-family: var(--vx-serif); font-style: italic; }
.text-photo_text-inner .button-group { justify-content: flex-start; gap: 1.25rem; }
.text-photo_media { position: relative; display: flex; align-items: center; height: 520px; }
.text-photo_image { width: 460px; height: auto; max-width: 100%; box-shadow: var(--vx-shadow-lg); }
.text-photo_component .slider-arrow.is-prev { left: 0; }
.text-photo_component .slider-arrow.is-next { right: 0; }

/* Galerie photos en mosaïque (vue gallery/masonry-unstructured) */
.masonry_component { max-width: 1024px; margin: 0 auto; }
.masonry_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 1rem; }
.masonry_item { position: relative; display: block; overflow: hidden; }
.masonry_item[hidden] { display: none; }
.masonry_item:nth-child(9n-3), .masonry_item:nth-child(9n-8) { grid-row: span 2; }
.masonry_image { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s var(--vx-ease-out); }
.masonry_item:hover .masonry_image { transform: scale(1.05); }

/* Grille « engagements » (vue content/grid-details) */
.details_component { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 1024px; margin: 0 auto 70px; }
.details_item { position: relative; display: block; padding: 0; border: 0; background: none; color: var(--vx-white); text-align: center; cursor: pointer; aspect-ratio: 1; }
.details_image { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.details_overlay { position: absolute; inset: 0; display: grid; place-content: center; padding: 1.25rem; font-size: 1.125rem; line-height: 1.75rem; background-color: rgba(0, 0, 0, .35); }
.details_title { display: block; text-transform: uppercase; }
.details_more { display: grid; grid-template-rows: 0fr; overflow: hidden; font-size: .875rem; line-height: 1.5rem; transition: grid-template-rows .5s var(--vx-ease-out); }
.details_more-inner { min-height: 0; display: block; padding-top: .75rem; }
.details_item:hover .details_more, .details_item.is-active .details_more { grid-template-rows: 1fr; }

/* Sélecteur d'hébergements (vue custom/rooms-selector) */
.rooms-selector_component { max-width: 1024px; margin: 0 auto; padding: 70px 0 76px; text-align: center; }
.rooms-selector_title { margin-bottom: 0; }
.rooms-selector_buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-top: 2.5rem; }

/* Formulaires (devis événements, contact) */
.form_component { max-width: 768px; margin: 0 auto; }
.form_form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
.form_field.is-wide, .form_actions, .form_gdpr-wrap { grid-column: 1 / -1; }
.form_input { display: block; width: 100%; height: auto; margin: 0; padding: .5rem 1rem; border: 1px solid var(--vx-black); border-radius: 0; background-color: transparent; font-size: 1rem; line-height: 1.5rem; }
.form_input:focus { outline: none; border-color: var(--vx-gold); }
.form_input.is-textarea { min-height: 8rem; resize: vertical; }
.form_input::placeholder { color: #737373; }
.form_actions { display: flex; justify-content: center; }
.form_gdpr-wrap .contact-widget_gdpr { padding-top: 42px; }
.form_done, .form_fail { display: none; padding: 1.25rem; background-color: var(--vx-gold); color: var(--vx-white); text-align: center; }

/* Lightbox (photos des carrousels et de la galerie) */
.vx-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background-color: rgba(0, 0, 0, .9); opacity: 0; pointer-events: none; transition: opacity .3s var(--vx-ease); }
.vx-lightbox.is-active { opacity: 1; pointer-events: auto; }
.vx-lightbox_image { max-width: 90vw; max-height: 85vh; width: auto; height: auto; box-shadow: var(--vx-shadow-lg); }
.vx-lightbox_btn { position: absolute; padding: 1rem; border: 0; background: none; color: var(--vx-white); cursor: pointer; }
.vx-lightbox_btn svg { width: 2.75rem; height: auto; }
.vx-lightbox_btn.is-close { top: 1rem; right: 1rem; font-size: 2rem; line-height: 1; }
.vx-lightbox_btn.is-prev { left: 1rem; top: 50%; transform: translateY(-50%) scaleX(-1); }
.vx-lightbox_btn.is-next { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 991px) {
  .split_component { grid-template-columns: 1fr; gap: 1.75rem; padding: 0 20px; }
  .split_component.is-media-last .split_media { order: -1; }
  .split_text-inner { max-width: none; }
  .cards_component.is-3, .cards_component.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 20px; }
  .service-slider_component .slider-arrow, .text-photo_component .slider-arrow { display: none; }
  .text-photo_slide { display: flex; flex-direction: column-reverse; }
  .text-photo_media { height: auto; margin-bottom: .5rem; }
  .text-photo_video { width: 100%; opacity: .3; }
  .text-photo_text { padding: 1.75rem 1rem; }
  .details_component { gap: .5rem; padding: 0 .5rem; }
  .form_component { padding: 0 1rem; }
}
@media (max-width: 767px) {
  .split_image, .split_media.is-stack { height: 24rem; }
  .cards_component.is-2, .cards_component.is-3, .cards_component.is-4 { grid-template-columns: 1fr; gap: 2rem; }
  .cards_component.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .cards_component.is-4 .card_image { height: 160px; }
  .card_image, .cards_component.is-2 .card_image { height: 26rem; }
  .service-tile { height: 26rem; }
  .service-tile_hover { opacity: 1; background-color: rgba(0, 0, 0, .3); }
  .service-tile_label { opacity: 0; }
  .fullwidth_slide { min-height: 600px; }
  .fullwidth_content { padding: 2rem 1.25rem; }
  .masonry_grid { grid-auto-rows: 124px; gap: .25rem; padding: 0 .5rem; }
  .details_overlay { font-size: 1rem; padding: .5rem; }
  .form_form { grid-template-columns: 1fr; }
  .rooms-selector_buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 1rem; }
  .rooms-selector_buttons .button { width: 100%; }
}
.faq_page { max-width: 1024px; margin: 0 auto; padding: 0 20px; }
.faq_page .faq_title { text-align: center; margin-bottom: 1.75rem; }
@media (min-width: 1280px) { .faq_page { padding: 0; } }

/* Formulaires : champ piège (invisible) et anti-spam Turnstile */
.form_hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form_turnstile:empty { display: none; }
.form_turnstile { display: flex; justify-content: center; grid-column: 1 / -1; }
.contact-widget_form, .form_form { position: relative; }

/* Cartes à titre posé sur la photo (restaurant, services, séjour en famille) */
.cards_component.is-3:has(.card_item.is-overlay) { gap: 2rem; }
.card_item.is-overlay { gap: 0; }
.card_media.is-overlay { position: relative; display: block; overflow: hidden; }
.card_media.is-overlay::after { content: none; }
.card_item.is-overlay .card_image { height: auto; aspect-ratio: auto; }
.card_gradient { position: absolute; left: 0; bottom: 0; width: 100%; height: 11rem; background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); transition: opacity .5s var(--vx-ease-out); }
.card_overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; color: var(--vx-white); text-align: center; transition: background-color .5s var(--vx-ease-out); }
.card_overlay h2, .card_overlay h3 { margin-bottom: 42px; font-size: 1.25rem; line-height: 1.15; color: var(--vx-white); text-transform: none; }
.card_overlay h2 em, .card_overlay h3 em { font-size: 1.75rem; color: currentColor; }
.card_overlay p { display: none; }
.card_overlay .button-group { display: grid; grid-template-rows: 0fr; margin-top: 0; overflow: hidden; transition: grid-template-rows .5s var(--vx-ease-out); }
.card_overlay .button-group > * { min-height: 0; }
.card_overlay .button-line { color: var(--vx-white); }
.card_media.is-overlay:hover .card_overlay { background-color: rgba(0, 0, 0, .75); }
.card_media.is-overlay:hover .card_gradient { opacity: 0; }
.card_media.is-overlay:hover .card_overlay .button-group { grid-template-rows: 1fr; }
.card_icon { display: flex; justify-content: center; margin: -48px 0 48px; }
.card_icon-img { width: 78px; height: auto; }
@media (max-width: 991px) {
  .card_icon { display: none; }
  .card_item.is-overlay .card_image { height: 24rem; object-fit: cover; }
}
@media (max-width: 767px) {
  .card_item.is-overlay .card_image { height: 26rem; }
  .card_overlay { justify-content: center; background-color: rgba(0, 0, 0, .3); }
  .card_gradient { display: none; }
  .card_overlay .button-group { grid-template-rows: 1fr; }
}