html {
  font-display: swap;
}
body {
  font-family: 'Raleway', sans-serif !important;
    font-weight: 200;
}
.poem,
blockquote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

/* PAS DE LIEN EN BLEU*/

/* === RESET DES LIENS : AUCUN BLEU, AUCUN SOULIGNEMENT === */
a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* HEADER PLUS FIN + OVERLAY HERO */

#header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;

  background: transparent !important;
  padding: 10px 0;
}

.navbar {
  min-height: auto !important;
}

.navbar-brand img {
  max-height: 20px; /* ajuste si besoin */
}

.navbar-section {
  padding: 0 !important;
}
/* =========================
   BURGER ICON
========================= */

.menu-toggle {
  position: fixed;
  top: 70px;
  left: 40px;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 10000;
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: white;
  margin: 6px 0;
  transition: all 0.3s ease;
}

/* =========================
   MENU OVERLAY
========================= */

/* base menu */
.menu-overlay nav {
  text-align: left;
}

/* liens principaux */
.menu-overlay nav > a {
  display: block;
  margin: 18px 0;
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #111;
}

/* sous-liens (chambres) */
.menu-overlay nav a.small {
  font-size: 1rem;
  opacity: 0.7;
  letter-spacing: 0.08em;
  margin: 8px 0;
}
.menu-overlay {
  position: fixed;
  inset: 0;
  background: #f6f2ec;
  display: flex;
  justify-content: left;
  align-items: left;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.5s ease;
  z-index: 90;
}
/* =========================
   MENU LINKS
========================= */

.menu-overlay nav {
  text-align: left;
}

.menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   LEFT MENU
========================= */

.menu-left {
  position: absolute;
  top: 170px;
  left: 150px;
}

.menu-left ul {
  list-style: none;
  padding: 0;
}

.menu-left li {
  font-family: 'Raleway';
  font-weight: 200;
  font-size: 1.1rem;

  margin-bottom: 18px;
  cursor: pointer;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  opacity: 0.6;
  transition: all 0.3s ease;
}

/* hover propre (SANS layout shift) */
.menu-left li:hover {
  opacity: 1;
  letter-spacing: 0.22em;
}

.menu-left li::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: #111;
  margin-top: 6px;
  transition: width 0.4s ease;
}

.menu-left li:hover::after {
  width: 40px;
}

/* =========================
   RIGHT MENU
========================= */

.menu-right {
  position: absolute;
  top: 185px;
  left: 500px;

  opacity: 0;
  transform: translateX(20px);
  transition: all 0.6s ease;
}

.menu-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* =========================
   PREVIEW LAYOUT
========================= */

.menu-preview {
  position: relative;
  display: grid;
  grid-template-columns: 280px 260px;
  gap: 30px;
  width: 560px;
  cursor: pointer;
}


/* =========================
   IMAGE
========================= */

.menu-image-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
}

.menu-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 1s ease-in-out, transform 6s ease;
}

.menu-img.active {
  opacity: 1;
  transform: scale(1.04);
}
.menu-preview img { 
   width: 220px;
   height: 220px; 
   object-fit: cover; 
   filter: grayscale(100%); 
   transition: all 0.8s ease; } 
.menu-preview:hover img { 
   filter: grayscale(0); }

/* =========================
   TEXT
========================= */

.menu-caption {
  width: 260px;
}

.menu-caption h3 {
  font-family: 'Playfair Display';
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.menu-caption p {
  font-size: 0.95rem;
  opacity: 0.8;
}

/* =========================
   NAV ARROWS (FIXED)
========================= */

.menu-preview .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;

  opacity: 0.5;
  transition: opacity 0.3s ease;

  z-index: 3;
}

.menu-preview .nav:hover {
  opacity: 1;
}

.menu-preview .prev {
  left: -60px;
}

.menu-preview .next {
  right: -60px;
}

/* =========================
   CLOSE BUTTON
========================= */

.menu-close {
  position: fixed;
  top: 50px;
  right: 40px;

  font-size: 2rem;
  font-weight: 200;
  cursor: pointer;

  color: #111;
  z-index: 110;

  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.menu-close:hover {
  opacity: 1;
}

/* =========================
   LOGO MINIMAL ROSE
========================= */
.logo {
  position: fixed;
  width: 60px;
  top: 0px;
  left: 25px;
  opacity: 0.7;
  z-index: 9999;
}
.logo-link {
  display: block;
}
-----------------------------------
/* Switch langues */
-------------------------------------
/*.language-switcher {
  position: fixed;
  top: 0px;
  right: 30px;
  z-index: 999999; /* Au-dessus de tout */

  /* Fond semi-transparent (comme votre bouton "Réserver") */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px); /* Flou léger (optionnel) */
  padding: 10px 0px 0px 10px; /* Espacement interne */

  /* Texte en noir (lisible sur fond clair) */
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  /*text-transform: uppercase;*/
  color: #222; /* Noir */
  text-decoration: none; /* Supprime le soulignement */

  /* Style du conteneur */
  border-radius: 0; /* Coins carrés (comme "Réserver") */
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.language-switcher:hover {
  opacity: 0.7; /* Effet de survol subtil */
}

.language-switcher span {
  font-size: 0.6rem;
  opacity: 0.7; /* Légère transparence pour la partie secondaire */
}
/* Lien actuel (FR) */
.language-current {
  text-decoration: none;
  color: #222;
  display: inline-block; /* Permet de cliquer sur toute la zone */
}

/* Menu déroulant (masqué par défaut) */
.language-dropdown {
  position: absolute;
  top: 150%; /* Positionne sous le switcher */
  right: 0;
  background: rgba(255, 255, 255, 0.6); /* Fond légèrement moins opaque */
  backdrop-filter: blur(4px);
  padding: 10px 10px;
  border-radius: 0;
  min-width: 40px; /* Largeur minimale pour éviter les sauts */

  /* Masquage initial */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px); /* Légère animation */
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;

  /* Style des liens dans le dropdown */
  display: flex;
  flex-direction: column;
  gap: 4px; /* Espacement entre les liens */
}

/* Affichage du dropdown au survol */
.language-switcher:hover .language-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.language-dropdown a,
.language-dropdown a:visited,
.language-dropdown a:hover,
.language-dropdown a:active {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  padding: 4px 0; /* Espacement vertical */
  white-space: nowrap; /* Évite les retours à la ligne */
}*/
/* ========== SWITCHER DE LANGUE - VERSION FINALE ========== */
/* ========== SWITCHER DE LANGUE - VERSION PERSONNALISÉE ========== */
.custom-lang-switcher {
    position: fixed !important;
    top: 0 !important;
    right: 30px !important;
    z-index: 999999 !important;

    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    padding: 10px 10px 0px 10px !important;
    margin: 0 !important;

    font-family: 'Raleway', sans-serif !important;
    font-weight: bold !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.2em !important;
    color: #222 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

.custom-lang-switcher:hover {
    opacity: 0.7 !important;
}

.custom-lang-current {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: #222 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.custom-lang-arrow {
    font-size: 0.6rem !important;
    opacity: 0.7 !important;
    margin-left: 4px !important;
}

/* Menu déroulant vers le BAS */
.custom-lang-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    padding: 8px !important;
    border-radius: 0 !important;
    min-width: 60px !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

.custom-lang-switcher:hover .custom-lang-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Style des liens dans le dropdown */
.custom-lang-item {
    display: flex !important;
    align-items: center !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    color: #222 !important;
    text-decoration: none !important;
}

.custom-lang-triangle {
    font-size: 0.5rem !important;
    margin-right: 6px !important;
    opacity: 0.7 !important;
}

.custom-lang-item:hover {
    opacity: 0.7 !important;
    background: rgba(255, 255, 255, 0.3) !important;
}
/* ========== SWITCHER DE LANGUE - VERSION CLIQUE ========== */
.custom-lang-switcher {
    position: fixed !important;
    top: 0 !important;
    right: 30px !important;
    z-index: 999999 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    padding: 10px 10px 0px 10px !important;
    margin: 0 !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: bold !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.2em !important;
    color: #222 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

.custom-lang-current {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.custom-lang-arrow {
    font-size: 0.6rem !important;
    opacity: 0.7 !important;
    margin-left: 4px !important;
}

/* Menu déroulant (masqué par défaut) */
.custom-lang-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    padding: 8px !important;
    border-radius: 0 !important;
    min-width: 60px !important;

    /* Masquage initial */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

/* Style des liens dans le dropdown */
.custom-lang-item {
    display: flex !important;
    align-items: center !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    color: #222 !important;
    text-decoration: none !important;
}

.custom-lang-triangle {
    font-size: 0.5rem !important;
    margin-right: 6px !important;
    opacity: 0.7 !important;
}

.custom-lang-item:hover {
    opacity: 0.7 !important;
    background: rgba(255, 255, 255, 0.3) !important;
}
/* =========================
   LOGO MINIMAL CLEAN
========================= */
{#
.logo {
  position: fixed;
  top: 20px;
  left: 25px;
  z-index: 9999;
  width: 60px;
}
#}
/* image du logo */
.logo img {
  width: 100%;
  height: auto;
  display: block;
  visibility: hidden;
  opacity: 0;

  /* état initial (invisible, lumineux) */
  
  transform: translateY(-10px);
  filter: brightness(15) blur(4px);

  transition:
    opacity 1.8s ease,
    transform 1.8s ease,
    filter 2.5s ease;
}

/* hover subtil */
.burger:hover {
  background: rgba(246,242,236,0.9);
}
/* état après reveal */
.hero-ready .logo img {
  opacity: 0.9;
  visibility: visible;

  transform: translateY(0);
  filter: brightness(1) blur(0);
}
/* =========================
   HERO STRUCTURE (CORRIGÉE)
========================= */

.hero {
  position: relative;
  margin-top: -110px !important;
  padding-top: 0px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #f6f2ec;
}

/* =========================
   IMAGE / VIDEO
========================= */
/* =========================
   IMAGE (fond initial)
========================= */
#hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: 1;
  opacity: 0;
  filter: blur(16px) brightness(0.95);

  transition:
    opacity 2.5s ease,
    filter 5s ease;
}

/* apparition */
.hero.media-visible #hero-image {
  opacity: 0.9;
  filter: blur(0px) brightness(0.9);
}

/* =========================
   VIDEO (au-dessus)
========================= */

#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: 2;

  opacity: 0;

  transition: opacity 2s ease;
}


/* =========================
   OVERLAYS
========================= */

.hero-dark-overlay {
  z-index: 3;
}

.hero-white {
  z-index: 4;
}


/* =========================
   TEXTE
========================= */

.hero-text {
  position: relative;
  z-index: 5;
}


/* =========================
   IMPORTANT : désactive zoom
========================= */

.hero video {
  transform: none !important;
}
/* =========================
   OVERLAY IMAGE (lisibilité)
========================= */

.hero-dark-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 3s ease;
}

.hero.media-visible .hero-dark-overlay {
  opacity: 0.9;
}


/* =========================
   ÉCRAN BLANC INITIAL
========================= */

.hero-white {
  position: absolute;
  inset: 0;
  background: #f6f2ec;
  z-index: 5;
}


/* =========================
   TEXTE HERO
========================= */

.hero-text {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  text-align: center;
  z-index: 6;
  padding: 20px;
}


/* =========================
   TEXTE CONCEPT (PHASE 1)
========================= */
#concept {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;

  font-size: 2.4rem;
  line-height: 1.5;
  max-width: 720px;

  letter-spacing: 0.02em;
  text-align: center;

  opacity: 0;
  transform: translateY(2px);
  filter: blur(2px);

  transition:
    opacity 2.2s ease,
    transform 2.2s ease,
    filter 2.2s ease;
}

/* apparition douce */
#concept.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* disparition douce */
#concept.hide {
  opacity: 0;
  transform: translateY(-2px);
  filter: blur(2px);
}
/* =========================
   HALO LUMIÈRE (EFFET ÉBLOUISSEMENT)
========================= */
/* état visible + halo */
#concept.visible {
  opacity: 0,9;
  transform: scale(1);

  text-shadow:
    0 0 20px rgba(255,255,255,0.8),
    0 0 40px rgba(255,255,255,0.6),
    0 0 80px rgba(255,255,255,0.4);
}


/* =========================
   TEXTE SUR IMAGE (PHASE 2)
========================= */

.hero.media-visible #concept {
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}


/* =========================
   SIGNATURE
========================= */

.signature {
  margin-top: 30px;

  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;

  text-transform: uppercase;
  letter-spacing: 0.4em;

  font-size: 1.1rem;

  opacity: 0;
  transition: opacity 3s ease;
}

/* =========================
   STORY TELLING
========================= */
.story {
  padding: 100px 20px;
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.story-intro {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 40px;
}

/* =========================
   POEM
========================= */
.poem {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.6;
}
.autor-poem {
  font-family: 'Playfair Display', serif;
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: right;
}

/* =========================
   MENU EN NOIR
========================= */
.menu-toggle.dark span {
  background: #111;
}
body:not(.home) .menu-toggle span {
  background: #111;
}
/* =========================
   FLOORS EXPERIENCE
========================= */

.floors {
  padding: 120px 20px;
  background: #f6f2ec;
}

.floor {
  margin-bottom: 120px;
}

.floor h2 {
  text-align: center;
  margin-bottom: 60px;
  font-weight: 200;
  font-size: 2rem;
}

/* ROOM */

.room {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 80px;
}

.room.reverse {
  direction: rtl;
}

.room.reverse .room-text {
  direction: ltr;
}

/* IMAGE */

.room img {
  width: 100%;
  height: auto;
  display: block;
}

/* TEXT */

.room-text {
  max-width: 400px;
}

.room-text h3 {
  font-weight: 300;
  margin-bottom: 15px;
}

/* POEM */

.room-text .poem {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.6;
  opacity: 0.8;
}

/* HISTORY */

.room-text .history {
  margin-top: 15px;
  font-size: 1rem;
  opacity: 1;
}
.floor {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.2s ease;
}

.floor.visible {
  opacity: 1;
  transform: translateY(0);
}

/* IMAGES AVEC TRANSITION NB VERS COULEUR */

/*.room-image img {
  inset: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}*/
.room-image {
  position: relative;

  width: 100%;
  max-width: 360px;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  margin: 0 auto;

  background: #f6f2ec;
}
/* images superposées */
.room-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* noir & blanc */
.img-bw {
  filter: grayscale(100%) brightness(1.05);
  z-index: 1;
}

/* couleur */
.img-color {
  opacity: 0;
  z-index: 2;
  transition: opacity 2.2s ease;
}

/* overlay */
.room-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(246,242,236,0.25);
  z-index: 3;
  transition: opacity 2.2s ease;
  pointer-events: none;
}

/* hover */
.room-link:hover .img-color,
.room-image.is-revealed .img-color {
  opacity: 1;
}

.room-link:hover .room-image::after,
.room-image.is-revealed::after {
  opacity: 0;
}

.room-tag {
  position: absolute;
  bottom: 15px;
  left: 15px;

  padding: 6px 10px;

  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 0.75rem;

  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: #222;

  background: rgba(246,242,236,0.6);
  backdrop-filter: blur(4px);

  z-index: 4;

  transition: all 0.4s ease;
}
.room-tag {
  opacity: 0.4;
  direction: ltr; /* 👈 AJOUT CLÉ */
}
.room-tag span {
  direction: ltr;
  unicode-bidi: isolate;
}

.room-image:hover .room-tag {
  opacity: 1;
  transform: translateY(-2px);
}
.room-tag span {
  font-size: 0.65rem;
  opacity: 0.7;
}
.room-link,
.room-link:visited,
.room-link:hover,
.room-link:active {
  color: inherit;
  text-decoration: none;
}
.room-text {
  transition: transform 0.5s ease;
}

.room-link:hover .room-text {
  transform: translateY(-3px);
}
.room-text h3 {
  position: relative;
  display: inline-block;
}
.room-text h3::before {
  content: "";

  position: absolute;

  left: -0px;
  top: 110%;

  width: 24px;
  height: 1px;

  background: rgba(0,0,0,0.25);

  transform: translateY(-50%);

  transition: all 0.4s ease;
}
.room-link:hover .room-text h3::before {
  width: 34px;
  background: rgba(0,0,0,0.6);
}
.cta-block {
  text-align: center;
  margin-top: 60px;
}

/* mobile */
@media (max-width: 768px) {
  .booking-cta {
    bottom: 20px;
    right: 20px;
    padding: 12px 14px;
    font-size: 0.65rem;
  }
}

.cta-button,
.cta-button:visited,
.cta-button:active,
.cta-button:focus {
  font-family: 'Raleway';
  font-weight: 200;

  letter-spacing: 0.3em;
  text-transform: uppercase;

  padding: 14px 28px;

  border: 1px solid #222;
  color: #222;
  text-decoration: none;

  background: transparent;

  transition: all 0.4s ease;
}

/* hover uniquement */
.cta-button:hover {
  background: #222;
  color: white;
}

/* Menu Réserver - Version Desktop + Mobile */
.booking-vertical {
  position: fixed;
  right: 30px;
  bottom: 0; /* Positionne le bas du rectangle au bas de l'écran */

  /* Style du texte */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  letter-spacing: 0.35em;
  font-size: 0.75rem;
  text-decoration: none;
  color: #000;

  /* Background transparent */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  padding: 40px 15px 20px; /* 40px en HAUT (pour le trait), 6px horizontal, 20px en bas */
  display: inline-block;
  z-index: 50;
  transition: all 0.4s ease;
}

/* Trait noir en BAS du rectangle (après rotation) */
.booking-vertical::before {
  content: "";
  position: absolute;
  top: 0; /* En haut AVANT rotation = en bas APRÈS rotation */
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 35px;
  background: rgba(0, 0, 0, 0.8);
}

/* États */
.booking-vertical:visited,
.booking-vertical:active,
.booking-vertical:hover {
  color: #000;
}

.booking-vertical:hover {
  letter-spacing: 0.45em;
}

/* Version Mobile */
@media (max-width: 768px) {
  .booking-vertical {
    writing-mode: initial;
    transform: none;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 12px 18px;
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
  .booking-vertical::before {
    display: none;
  }
}

@media (hover: none) {
  .img-color {
    opacity: 0;
  }

  .room-image.is-revealed .img-color {
    opacity: 1;
  }
}
/* FOOTER*/

/* =========================
   PRE-FOOTER IMAGE
========================= */

.pre-footer {
  margin-top: 120px;
}

.pre-footer-image img {
  width: 100%;
  height: auto;
  display: block;
}
.pre-footer-image {
  max-width: 700px;   /* 👈 limite propre */
  margin: 80px auto;  /* 👈 centrage + respiration */
  padding: 0 20px;    /* 👈 sécurité mobile */
}

.pre-footer-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ligne prestations */

.pre-footer-features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;

  padding: 30px 20px;

  font-family: 'Raleway';
  font-weight: 200;
  font-size: 0.8rem;

  letter-spacing: 0.15em;
  text-transform: uppercase;

  background: #f6f2ec;
}

.pre-footer-features span {
  opacity: 0.7;
}

/* =========================
   FOOTER MINIMAL SIGNATURE
========================= */

.site-footer-minimal {
  background: #222;
  color: #f6f2ec;

  padding: 0px 10px;

  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 0.65rem;

  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* structure */

.footer-line {
  max-width: 1000px;
  margin: auto;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* alignements */

.footer-line div {
  text-align: center;
}

.footer-line div:first-child {
  text-align: left;
}

.footer-line div:last-child {
  text-align: right;
}

/* liens */

.footer-line a {
  color: #f6f2ec;
  text-decoration: none;

  border-bottom: 1px solid rgba(246,242,236,0.3);
  padding-bottom: 2px;

  transition: all 0.3s ease;
}

.footer-line a:hover {
  border-color: #f6f2ec;
  opacity: 0.8;
}

/* signature */

.footer-center {
  letter-spacing: 0.4em;
}

/* mobile */

@media (max-width: 768px) {
  .footer-line {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }

  .footer-line div {
    text-align: center !important;
  }
}

.seo-text {
  font-size: 1rem;
  opacity: 0.8;
  text-align: center;
  margin-top: 20px;
}

/* ============================= */
/* ROOM TEMPLATE – RESET QUARK   */
/* ============================= */

/* sortir du container Quark */
.room #body-wrapper,
.room .container,
.room #page-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* footer pleine largeur */
.room footer {
  max-width: 100% !important;
  width: 100% !important;
}


/* ============================= */
/* HERO (PLEIN ÉCRAN)            */
/* ============================= */

.room-hero {
  position: relative;
  height: 100vh;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}

.room-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 9998;
}
.room-hero-text {
  position: absolute;
  bottom: 60px;
  left: 80px;

  background: rgba(246,242,236,0.85);
  backdrop-filter: blur(6px);

  padding: 25px 30px;

  max-width: min(90vw, 520px);

  color: #111;
}

.room-hero-text h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;

  font-size: clamp(2.2rem, 5vw, 3.8rem);

  line-height: 1.05;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  margin: 0;
}

.room-hero-text .subtitle {
  font-family: 'Raleway';
  font-weight: 200;

  letter-spacing: 0.28em;

  font-size: 0.75rem;

  text-transform: uppercase;

  margin-top: 12px;
}

/* ============================= */
/* INTRO (POEM + CONTEXTE)       */
/* ============================= */

.room-intro {
  max-width: 800px;
  margin: 120px auto;
  padding: 0 20px;
  text-align: center;
}

.room-intro blockquote {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-style: italic;
  margin-bottom: 40px;
}

.room-context,
.room-story {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 20px;
}


/* ============================= */
/* IMAGE IMMERSIVE               */
/* ============================= */

.room-immersive {
  max-width: 900px;
  margin: 120px auto;
  padding: 0 20px;
}

.room-immersive img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ============================= */
/* CTA                           */
/* ============================= */

.room-cta {
  text-align: center;
  margin: 120px 0;
}

.room-cta a {
  font-family: 'Raleway';
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;

  border: 1px solid #111;
  padding: 12px 28px;

  text-decoration: none;
  color: #111;

  transition: all 0.4s ease;
}

.room-cta a:hover {
  background: #111;
  color: #fff;
}


/* ============================= */
/* GALERIE ALTERNÉE              */
/* ============================= */

.room-gallery {
  max-width: 900px;
  margin: 120px auto;
  padding: 0 20px;
}

.room-block {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 120px;
}

.room-block.reverse {
  flex-direction: row-reverse;
}

.room-block img {
  width: 55%;
  display: block;
}

.room-block p {
  width: 45%;

  font-family: 'Raleway', sans-serif;
  font-weight: 200;

  letter-spacing: 0.05em;
  font-size: 0.95rem;
  line-height: 1.6;
}
.room-details {
  text-align: center;
  margin: 120px auto;

  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  letter-spacing: 0.15em;
  font-size: 0.9rem;
}
.room #page-wrapper {
  max-width: 100% !important;
}
.room-specs {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin: 80px 0;
  opacity: 0.7;
}
/* =============================
   FOOTER PLEINE LARGEUR (TOUTES LES PAGES)
============================= */
footer {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Conteneur du footer (si nécessaire pour le contenu interne) */
footer .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

/* 🔴 SORTIE DU CONTAINER POUR LES PAGES "ROOM" */
body.room #body-wrapper > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Assure que le footer n'est pas limité par #page-wrapper */
#page-wrapper + footer {
  width: 100%;
  margin-left: 0;
  position: relative;
  left: 0;
}
/*LIEN PLUS... VERS STORY*/
.toggle-story-link {
  color: #111;
  cursor: pointer;
  font-size: 0.8rem;
  padding-left: 5px;
  text-decoration: none; /* Désactive le soulignement par défaut */
  position: relative;
  display: inline-block;
}

/* Soulignement fin et discret (uniquement via ::after) */
.toggle-story-link::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Positionne la ligne sous le texte */
  left: 0;
  width: 100%;
  height: 1px; /* Épaisseur de la ligne */
  background-color: black;
  transition: all 0.2s ease;
}

/* Effet au survol */
.toggle-story-link:hover::after {
  width: 100%; /* Étend le soulignement (déjà à 100%, mais peut être animé) */
  background-color: #333; /* Couleur légèrement plus foncée */
}

.room-story {
  margin-top: 10px;
  padding: 10px;
  background-color: #f9f9f9; /* Fond léger pour le texte révélé */
}

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

@media (max-width: 768px) {

  .room-hero {
    height: 70vh;
  }

  .room-immersive img {
    height: 60vh;
  }

  .room-block {
    flex-direction: column;
    gap: 30px;
  }

  .room-block.reverse {
    flex-direction: column;
  }

  .room-block img,
  .room-block p {
    width: 100%;
  }

  .room-hero-text {
    left: 20px;
    bottom: 40px;
  }
}

/* =============================================
   CORRECTIONS SPÉCIFIQUES POUR LES PAGES ROOM
   (à ajouter en fin de fichier CSS)
============================================= */

/* 1. Sortir le footer des conteneurs parents pour les pages room */
body.room #page-wrapper + footer,
body.room footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: 0 !important;
}

/* 2. Assurer que le conteneur interne du footer reste centré */
body.room #footer .footer-line {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 3. Forcer le footer à ignorer les styles des conteneurs parents */
body.room .container + footer,
body.room #body-wrapper + footer {
  width: 100% !important;
  margin-left: 0 !important;
}
/* =============================================
   FOOTER PAGES ROOM (même style que la home)
============================================= */

/* Fond gris pleine largeur pour le footer */
body.room #footer {
  background: #f6f2ec; /* Fond gris clair (comme la home) */
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  padding: 20px 20px 0; /* Espacement en haut, 0 en bas */
  box-sizing: border-box;
}

/* Footer minimal (noir) */
body.room .site-footer-minimal {
  background: #222;
  color: #f6f2ec;
  padding: 0px 0px;
  width: calc(100% - 40px); /* 20px de chaque côté */
  max-width: calc(100% - 40px);

  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  width: 100%; /* Pleine largeur */
  margin: 0 auto;
}

/* Structure du footer-line (centré) */
body.room .footer-line {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Alignements */
body.room .footer-line div {
  text-align: center;
}

body.room .footer-line div:first-child {
  text-align: left;
}

body.room .footer-line div:last-child {
  text-align: right;
}

/* Liens dans le footer */
body.room .footer-line a {
  color: #f6f2ec;
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 242, 236, 0.3);
  padding-bottom: 2px;
  transition: all 0.3s ease;
}

body.room .footer-line a:hover {
  border-color: #f6f2ec;
  opacity: 0.8;
}
/* Signature */
body.room .footer-center {
  letter-spacing: 0.4em;
}
/* Supprimer les bordures ou lignes indésirables */
.room-details,
.room-details p {
  border: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}

/* Si la ligne vient d'un <hr> ou d'une bordure inférieure */
.room-details hr {
  display: none !important;
}

/* Adaptation mobile */
@media (max-width: 768px) {
  body.room .footer-line {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  body.room .footer-line div {
    text-align: center !important;
  }
}

/* Signature */
body.room .footer-center {
  letter-spacing: 0.4em;
}
#page-wrapper {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Adaptation mobile */
@media (max-width: 768px) {
  body.room .footer-line {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  body.room .footer-line div {
    text-align: center !important;
  }
}
/* =========================
   HERO MAP
========================= */

.map-hero {
  position: relative;
  height: 100vh;
  margin-top: -110px; /* Pour passer sous le bandeau Grav */
  overflow: hidden;
  background: #f6f2ec;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 1;
  padding: 0 40px 80px 40px; /* Espacement interne */
}

/* Iframe de la carte */
.map-hero iframe {
  position: absolute;
  top: -60px; /* Masque le bandeau Google */
  left: 0;
  width: 100%;
  height: calc(100% + 80px);
  border: 0;
  filter: contrast(1.01) brightness(1.01);
  z-index: 1;
}

/* Voile doux sur la carte */
.map-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(246, 242, 236, 0.10),
    rgba(246, 242, 236, 0.03) 35%,
    rgba(246, 242, 236, 0) 60%
  );
  pointer-events: none;
  z-index: 2;
}

=========================
   COLONNE ÉDITORIALE (FILTRES)
========================= */
.map-filters {
  position: relative;
  z-index: 10; /* Doit être supérieur à la carte */
  font-family: 'Raleway', sans-serif;
  margin-top: 10px; /* Espacement entre la carte et les filtres */
  padding: 0 0 40px 0; /* Espacement interne */
}

.guide-kicker,
.map-filters h2 {
  font-weight: 200;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 70px; /* Agrandi pour allèger */
}

.map-filters details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.map-filters summary {
  list-style: none;
  cursor: pointer;
  font-weight: 200;
  color: #111; 
  letter-spacing: 0.08em;
  transition: opacity 0.8s ease;
  opacity: 1;
  padding: 10px 0; /* Déplacez le padding ici */
  position: relative; /* Déjà présent plus bas, mais on le répète pour clarté */
}

.map-filters summary:hover {
  opacity: 0.9;
}

/* Supprime le triangle natif */
.map-filters summary::-webkit-details-marker {
  display: none;
}

/* Liens des filtres */
.filter-links {
  margin-top: 15px;
  padding-left: 10px;
}

.filter-links a {
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
  color: #111;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.filter-links a:hover {
  opacity: 0.5;
}
/* =========================
   TRAIT PERMANENT SOUS LES SUMMARY (30px → 40px au hover)
========================= */

.map-filters summary,
.guide-hero summary {
  position: relative; /* Nécessaire pour le positionnement du trait */
  padding-bottom: 10px; /* Espace pour le trait */
}

/* Trait permanent de 40px */
.map-filters summary::after,
.guide-hero summary::after {
  content: "";
  position: absolute;
  left: 0; /* À gauche */
  bottom: 0; /* En dessous du texte */
  width: 40px; /* Longueur initiale */
  height: 1.5px;
  background: #111;
  transition: width 0.4s ease; /* Animation douce */
}

/* Trait qui s'allonge à 50px au survol */
.map-filters summary:hover::after,
.guide-hero summary:hover::after {
  width: 50px; /* Longueur au survol */
}

/* =========================
   ALIGNEMENT DES DISTANCES DANS LES FILTRES
========================= */

/* Conteneur pour les éléments de localisation (nom + distance) */
.location-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 6px 0;
}

/* Style du nom (à gauche) */
.location-name {
  flex: 1;
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Style de la distance (à droite) */
.location-distance {
  flex: 0 0 auto;
  margin-left: 20px;
  font-size: 0.8rem;
  opacity: 0.7;
  white-space: nowrap;
  text-align: right;
}

/* Style des liens dans les noms */
.location-name a {
  color: #222;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.location-name a:hover {
  opacity: 0.7;
}

/* Ajustement pour les détails fermés/ouverts */
.map-filters details[open] .filter-links {
  padding-top: 10px;
}
/* =========================
   NAVIGATION LATÉRALE (FLÈCHES)
========================= */

.nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  border-radius: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 1.2rem;
  color: #222;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease;
  z-index: 1000;
}

.nav-arrow:hover {
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.8);
}

.nav-arrow-right {
  right: 0;
}

.nav-arrow-left {
  left: 0;
}
/* =========================
   CORRECTION TEMPORAIRE POUR LES FLÈCHES
========================= */
.nav-arrow-left,
.nav-arrow-right {
  display: flex !important; /* Force l'affichage */
  z-index: 9999 !important; /* Met au premier plan */
  pointer-events: auto !important; /* Active les clics */
  cursor: pointer !important; /* Affiche un curseur "main" */
  opacity: 1 !important; /* Rend visible */
  background: rgba(255, 255, 255, 0.5) !important; /* Fond visible pour test */
}

/* Version mobile : flèches plus discrètes */
@media (max-width: 768px) {
  .nav-arrow {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
}
/* =========================
   PAGES GUIDES LOCAUX : TEXTE + IMAGE
========================= */
.guide-hero {
  display: flex;
  align-items: center;
  gap: 60px; /* Espacement augmenté entre texte et image */
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 60px; /* Padding vertical augmenté pour plus d'espace */
  position: relative;
  z-index: 10;
}

.guide-editorial {
  flex: 1;
  max-width: 60%; /* Légèrement élargi pour mieux équilibrer avec l'image */
}

.guide-kicker {
  font-family: 'Raleway', sans-serif;
  font-size: 1.3rem; /* Taille augmentée pour plus de visibilité */
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #222;
  opacity: 0.9; /* Moins transparent pour mieux le voir */
  margin-bottom: 30px; /* Espacement augmenté sous le kicker */
  line-height: 1.4;
}

.guide-editorial h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  font-size: 2rem; /* Taille augmentée pour plus d'impact */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 25px; /* Espacement augmenté sous le titre */
  color: #222;
}

.guide-intro {
  font-family: 'Raleway', sans-serif;
  font-size: 1rem; /* Légèrement agrandi */
  line-height: 1.8;
  color: #222;
  opacity: 0.9;
  margin-bottom: 30px; /* Espacement ajouté avant l'image */
}

.guide-image {
  flex: 0 0 300px; /* Image légèrement plus grande */
  height: 300px;
  overflow: hidden;
  border-radius: 0;
  margin-left: 20px; /* Petit espacement supplémentaire */
}

.guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1) contrast(1.05);
}

/* Container pour les iframes Google 360° */
/* Container pour l'iframe */
.google-360-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 6rem 30px 1rem 30px;
  height: 100vh; /* Hauteur maximale = hauteur de l'écran */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Iframe */
.google-360-container iframe {
  position: absolute;
  width: 90%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

-------------------------------------
/* Pied de page CTA travel light rooms */
-------------------------------------
/* ======================================================
   INVITATION - TRAVEL LIGHT
====================================================== */

.invitation-travel-light {
    max-width: 920px;
    margin: 280px auto 50px; /* 🔥 Réduit l'espace en bas (200px → 50px) */
    padding: 0 40px;
    position: relative;
    text-align: center;
    min-height: 150px; /* 🔥 Réduit pour éviter un espace inutile */
}

/* petit trait de respiration */
.invitation-travel-light::before {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    margin: 0 auto 30px; /* 🔥 Réduit l'espace sous le titre (90px → 30px) */
    background: rgba(0, 0, 0, 0.20);
}

/* titre */
.invitation-travel-light__title {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.30em;
    line-height: 2.1;
    margin: 0 auto 0px; /* 🔥 Réduit l'espace sous le titre (30px → 15px) */
    color: #111;
    text-align: center;
    white-space: pre-line;
}

/* scène : conteneur pour lignes, intro, code */
.invitation-travel-light__stage {
    position: relative;
    height: auto;
    min-height: 60px;
}

/* tous les textes (lignes, intro, code) */
.travel-stage {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 1.12rem;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: #222;
    opacity: 0;
    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
    transform: translateY(8px);
}

/* état visible */
.travel-stage.visible {
    opacity: 1;
    transform: none;
}

/* enveloppe */
.travel-stage-code::before {
    content: "✉";
    font-size: 1rem;
    opacity: 0.45;
    margin-bottom: 20px;
}
.invitation-travel-light__cta {

    margin-top: -40px;
    text-align: center;

    opacity: 0;
    transform: translateY(12px);

    transition: opacity .9s ease, transform .9s ease;
}

.invitation-travel-light__cta.visible {
    opacity: 1;
    transform: translateY(0);
}

/* bouton */
.cta-button,
.cta-button:visited,
.cta-button:active,
.cta-button:focus {

    font-family: 'Raleway';
    font-weight: 200;

    letter-spacing: 0.3em;
    text-transform: uppercase;

    padding: 14px 28px;

    border: 1px solid #222;
    color: #222;

    text-decoration: none;

    display: inline-block;

    transition: all 0.4s ease;
}

.cta-button:hover {
    background: rgba(0,0,0,1);
    color: white;
    font-weight: bold;
}
/* conclusion : positionnée juste après le stage */
.travel-stage-closing {
    position: relative !important;
    inset: auto !important;
    margin-top: 15px; /* 🔥 Espacement réduit après le stage (20px → 15px) */
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.8;
    opacity: 0;
    transition: opacity 2s ease;
}

.travel-stage-closing.visible {
    opacity: 1;
}

.menu-mobile-submenu {
  display: none;
}

/* ======================================================
   AJUSTEMENTS MOBILE - HOME, ROOMS, VISITES IMMERSIVES
====================================================== */

@media (max-width: 760px), (max-width: 900px) and (orientation: portrait) {
  /* Menu overlay mobile : version texte simple. */
  .menu-overlay {
    display: block;
    overflow-y: auto;
    background: #f6f2ec;
  }

  .menu-content {
    min-height: 100%;
    padding: 104px 18px 48px;
    text-align: left;
  }

  .menu-close {
    top: 28px;
    right: 24px;
    font-size: 1.8rem;
  }

  .menu-left {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    text-align: left;
  }

  .menu-left ul {
    margin: 0;
  }

  .menu-left > ul > li {
    margin-bottom: 26px;
    opacity: 1;
    letter-spacing: 0.14em;
    cursor: default;
  }

  .menu-left li:hover {
    letter-spacing: 0.14em;
  }

  .menu-left li::after,
  .menu-left li:hover::after {
    width: 32px;
  }

  .menu-group-label {
    display: block;
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .menu-mobile-submenu {
    display: block;
    list-style: none;
    padding: 12px 0 0 0;
    margin: 0;
  }

  .menu-mobile-submenu li {
    margin: 0;
    padding: 9px 0;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
  }

  .menu-mobile-submenu li::after {
    display: none;
  }

  .menu-mobile-submenu a {
    display: block;
  }

  .menu-mobile-title {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.08rem;
    line-height: 1.25;
  }

  .menu-mobile-text {
    display: none;
  }

  .menu-right {
    display: none;
  }

  /* Home : garder le miroir et le personnage dans la zone utile. */
  #hero-image,
  #hero-video {
    object-position: 76% center;
  }

  .hero {
    min-height: 100svh;
  }

  .pre-footer-features {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px 18px;
    text-align: center;
    padding: 24px 18px;
  }

  .pre-footer-features span {
    flex: 0 1 auto;
    max-width: 42vw;
    text-align: center;
    line-height: 1.45;
  }

  /* Pages chambres : hero en format carre, plus stable sur mobile. */
  .room-hero {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: 0;
    overflow: visible;
    margin-bottom: 96px;
  }

  .room-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  .room-hero-text {
    left: 18px;
    right: 18px;
    bottom: -54px;
    max-width: none;
    padding: 16px 18px;
    z-index: 5;
  }

  .room-hero-text h1 {
    font-size: clamp(1.35rem, 8vw, 2rem);
    line-height: 1.12;
  }

  .room-hero-text .subtitle {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    margin-top: 8px;
  }

  /* Cartouches des chambres sur la home : legerement mordants, lisibles au tactile. */
  .room-tag {
    top: 100%;
    bottom: auto;
    left: 0;
    opacity: 1;
    background: rgba(246,242,236,0.88);
    transform: translateY(0);
  }

  .room-image {
    overflow: visible;
    margin-bottom: 58px;
    max-width: min(88vw, 430px);
  }

  /* Images immersives : format carre plutot qu'une bande trop haute. */
  .room-immersive {
    margin: 72px auto;
    padding: 0 16px;
  }

  .room-immersive img {
    width: 100%;
    height: min(92vw, 520px);
    object-fit: cover;
    object-position: center center;
  }

  .travel-stage {
    font-size: 1rem;
    line-height: 1.75;
  }

  /* Visites Google 360 : format utilisable sur mobile, sans pleine hauteur. */
  .google-360-container {
    width: calc(100% - 32px);
    max-width: none;
    height: min(92vw, 520px);
    margin: 72px 16px 24px;
    border-radius: 0;
  }

  .google-360-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  /* Pages portfolio : placer l'image sous l'introduction. */
  .guide-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 42px 20px 28px;
  }

  .guide-editorial {
    max-width: none;
    width: 100%;
  }

  .guide-kicker {
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    margin-bottom: 18px;
  }

  .guide-editorial h1 {
    font-size: 1.28rem;
    letter-spacing: 0.06em;
    line-height: 1.35;
    margin-bottom: 18px;
  }

  .guide-intro {
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 0;
  }

  .guide-image {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: 0;
  }

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

  /* Pages portfolio/localisation : tableaux repliables plus lisibles sur mobile. */
  .map-filters {
    padding: 0 20px 36px;
  }

  .map-filters h2 {
    font-size: 0.95rem;
    line-height: 1.55;
    letter-spacing: 0.12em;
    margin-bottom: 34px;
  }

  .map-filters summary {
    font-size: 0.82rem;
    line-height: 1.45;
    letter-spacing: 0.06em;
    padding: 14px 0 12px;
  }

  .filter-links {
    padding-left: 0;
    margin-top: 8px;
  }

  .location-item {
    display: block;
    padding: 10px 0 12px;
  }

  .location-name,
  .location-distance {
    display: block;
    width: 100%;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .location-distance {
    margin-left: 0;
    margin-top: 3px;
    text-align: left;
    white-space: normal;
    opacity: 0.58;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Accessibility contrast adjustments. */
.menu-left li,
.menu-overlay nav > a,
.story-intro,
.seo-text,
.pre-footer-features span,
.guide-kicker,
.map-filters h2,
.travel-stage {
  font-weight: 300;
}

.menu-left li,
.menu-caption p,
.seo-text,
.room-tag,
.room-tag span,
.pre-footer-features span,
.location-distance,
.travel-stage-code::before {
  opacity: 0.9;
}

.room-tag,
.story-intro,
.seo-text,
.pre-footer-features span,
.location-name a,
.location-distance,
.travel-stage,
.travel-stage-closing {
  color: #111;
}

.hero.media-visible #concept {
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

.room-hero-text {
  background: rgba(246,242,236,0.94);
}

.room-tag {
  background: rgba(246,242,236,0.94);
}

.story-intro,
.seo-text,
.pre-footer-features span {
  opacity: 0.92;
}