/* Import des polices */
@font-face {
  font-family: "TANAEGEAN-Regular";
  src: url("../fonts/TANAEGEAN-Regular.woff2") format("woff2"),
    url("../fonts/TANAEGEAN-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

:root {
  --margin-default: 150px;
  --margin-image-droite: 100px;
}

/* Styles généraux du site */
html,
body {
  scroll-behavior: auto !important; /* Force le défilement instantané */
}

body {
  padding-top: 0; /* Suppression du padding pour coller le header en haut */
  font-family: "Montserrat", sans-serif;
  color: rgb(102, 115, 128);
  line-height: 1.8; /* Augmentation de l'interlignage global */
}

/* Styles du menu burger */
.navbar-transparent {
  background-color: transparent !important;
  position: fixed;
  width: 100%;
  z-index: 1030;
}

.navbar-toggler {
  border: none;
  padding: 10px;
  margin-right: 15px;
  margin-top: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.navbar-brand {
  color: rgb(102, 115, 128) !important;
}

.offcanvas {
  max-width: 300px;
}

.offcanvas-header {
  border-bottom: 1px solid #e9ecef;
}

.offcanvas-body .nav-link,
.offcanvas-body .submenu-title {
  padding: 0.8rem 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  color: rgb(102, 115, 128);
  line-height: 2; /* Augmentation de l'interlignage dans le menu */
}

.offcanvas-body .nav-link:hover,
.offcanvas-body .submenu-title:hover {
  background-color: #f8f9fa;
  border-radius: 4px;
  color: rgb(102, 115, 128);
}

/* Styles pour les sous-menus */
.has-submenu {
  position: relative;
}

.submenu-title {
  cursor: pointer;
  display: block;
}

.has-submenu .submenu {
  display: none;
  list-style: none;
  padding-left: 1.5rem;
  margin: 0;
}

.has-submenu.submenu-active .submenu {
  display: block;
}

.submenu li {
  margin: 0;
}

.submenu a {
  display: block;
  padding: 0.6rem 1rem;
  color: rgb(102, 115, 128);
  text-decoration: none;
  transition: all 0.3s ease;
}

.submenu a:hover {
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* Styles pour le header */
.header-container {
  position: relative;
  width: 100%;
  margin-bottom: 0;
}

.header-image {
  background-image: url("../img/header.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.header-content {
  color: white;
  z-index: 2;
}

.header-logo {
  max-width: 25%;
  height: auto;
  margin-bottom: 20px;
}
.header-content > h1 {
  font-size: 3.5rem;
}
/* Style des sections */
section {
  min-height: auto;
  padding: 0 0;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  margin-top: var(--margin-default);
}

/* Style pour la section sur deux colonnes */
.section-image {
  width: 100%;
  height: auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* Styles communs pour les sections avec image pleine largeur */
.image-gauche,
.image-droite {
  padding: 0;
}

.image-gauche .container,
.image-droite .container {
  max-width: 100%;
  padding: 0;
}

.image-gauche .row,
.image-droite .row {
  margin: 0;
  display: flex;
}

.image-gauche .col-lg-6:first-child {
  padding: 0;
}

.image-gauche .col-lg-6:last-child {
  padding: 0;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* Style spécifique pour les images de type image-droite */
.image-droite .col-lg-6:first-child {
  padding: 0;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.image-droite .col-lg-6:last-child {
  padding: 0;
}

/* Styles communs pour les conteneurs d'images */
.image-gauche .image-container,
.image-droite .image-container {
  padding: 0;
}

/* Règle JS personnalisée pour égaliser les hauteurs */
.equal-height-js {
  height: 100%;
}

.image-gauche .image-container img,
.image-droite .image-container img {
  width: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Styles spécifiques pour le contenu */
p {
  margin-bottom: 1.5rem; /* Plus d'espace entre les paragraphes */
}

h2 {
  margin-bottom: 2rem; /* Plus d'espace sous les titres */
  line-height: 1.5; /* Interlignage des titres */
}

.section-image:hover {
  transform: scale(1.02);
}

.image-container {
  padding: 15px;
}

/* Styles pour les images empilées de la section activités */
.stacked-images {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-start; /* Aligner à gauche au lieu du centre */
}

.image-stack-compact {
  display: flex;
  flex-direction: column;
  width: 100%; /* Utiliser toute la largeur disponible */
  line-height: 0; /* Élimine tout espace blanc entre les images */
  max-width: 500px; /* Limiter la largeur maximale pour le contrôle */
}

.stack-image-nomargin {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

.image-stack-compact a {
  display: block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.align-self-start {
  text-align: center;
}
/* Supprime les espaces blancs entre les images */
.image-stack-compact a + a {
  margin-top: -1px; /* Compense la possible ligne de pixel entre les images */
}

/* Styles pour les sections restauration et menu avec images pleine hauteur */
.combined-sections {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Cas spécial pour deux combined-sections qui se suivent */
.combined-sections + .combined-sections {
  margin-top: -1px; /* Élimine l'espace entre deux combined-sections */
}
.combined-sections:first-child,
:not(.combined-sections) + .combined-sections {
  margin-top: var(--margin-default);
  margin-bottom: 0px;
}
.full-height-image {
  position: relative;
  height: 100%;
  min-height: 600px;
  overflow: hidden;
  vertical-align: top; /* Assurer un alignement parfait des images */
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* Image positions spécifiques pour l'effet de jonction au centre */
.right-image img {
  object-position: right center; /* L'image de droite s'aligne exactement à droite */
}

.left-image img {
  object-position: center center; /* L'image de gauche est centrée horizontalement */
}

/* Éliminer tout espace entre les sections */
#restauration,
#menu {
  margin: 0;
  padding: 0;
  position: relative;
  display: block; /* Bloc normal */
}

/* S'assurer que chaque section est exactement moitié-moitié */
#restauration .row,
#menu .row {
  margin: 0; /* Éliminer toute marge qui pourrait créer un espacement */
}

/* Style pour la section parallax */
.parallax-section {
  margin: var(--margin-default) 0 0 0; /* Ajouter un espace au-dessus */
  padding: 0;
  overflow: hidden;
  position: relative;
  height: 85vh; /* 70% de la hauteur de la fenêtre (viewport height) */
  width: 100%;
}

.parallax-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* L'effet "fenêtre/volet" où l'image reste fixe pendant que la page défile */
  background-attachment: fixed;
  /* Position exacte au centre */
  background-position: center center;
  background-repeat: no-repeat;
  /* Cover pour maintenir le ratio et remplir l'espace */
  background-size: cover;
  z-index: 1;
}

.parallax-content {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px;
}

.parallax-content h2 {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.parallax-content .content {
  max-width: 800px;
  margin: 0 auto;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Style pour la section parallax */
.parallax-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* L'effet "fenêtre/volet" où l'image reste fixe pendant que la page défile */
  background-attachment: fixed;
  /* Position exacte au centre */
  background-position: center center;
  background-repeat: no-repeat;
  /* Cover pour maintenir le ratio et remplir l'espace */
  background-size: cover;
  z-index: 1;
}

/* Pour les appareils qui ne prennent pas en charge background-attachment: fixed */
@supports (-webkit-overflow-scrolling: touch) {
  /* Sur iOS, on utilise l'effet JavaScript */
  .parallax-container {
    background-attachment: scroll;
    transition: transform 0.05s linear;
    will-change: transform;
  }
}

/* Adaptations responsive */
@media (max-width: 991px) {
  .col-lg-6 {
    margin-bottom: 30px;
  }

  /* Ajustements pour la section parallax sur tablette */
  .parallax-section {
    height: 50vh; /* Maintenir 50% de la hauteur de la fenêtre même sur tablette */
    margin-bottom: 60px;
  }

  .full-height-image {
    min-height: 400px;
    position: relative;
    height: 400px;
  }

  /* Style mobile pour les sections combinées */
  .combined-sections {
    flex-direction: column;
    margin-bottom: 0; /* Suppression de la marge */
  }

  /* Sur mobile, les images sont empilées donc on peut les centrer */
  .right-image img,
  .left-image img {
    object-position: center; /* Sur mobile, centrer les images */
  }

  /* Assurer que le contenu reste visible sur mobile */
  #restauration,
  #menu {
    overflow: visible;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* Inverser l'ordre sur mobile pour menu (texte en haut, image en bas) */
  #menu .row {
    flex-direction: column-reverse;
  }

  /* Ajouter un petit espacement entre les sections sur mobile pour meilleure lisibilité */
  .combined-sections section {
    margin-bottom: 0;
  }
}

/* Garantir la jonction exacte au centre */
.right-image::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: transparent;
  z-index: 3;
}

.left-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background-color: transparent;
  z-index: 3;
}

/* Assurer que les sections sont collées sans espace */
.combined-sections section {
  min-height: auto;
  padding: 0;
  margin: 0;
  margin-bottom: 0;
}

/* Toutes les sections ont un fond blanc */
section {
  background-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.offcanvas-title {
  font-family: "TANAEGEAN-Regular", serif;
  color: rgb(102, 115, 128);
}

h1 {
  font-size: 2.5rem;
}
h2 {
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 10px;
  line-height: 4rem;
  font-size: 2.5rem;
}

/* Style par défaut pour les titres h2 avec soulignement */
/*h2:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: rgb(102, 115, 128);
}
*/
/* Titre des sections standard - centré sans trait */
.standard-title {
  text-align: center;
  padding-bottom: 0;
}

.standard-title:after {
  display: none; /* Supprime la ligne de soulignement */
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Styles pour les carousels */
.carousel-item {
  height: 560px; /* 350px * 1.6 = 560px (augmentation de 60%) */
  overflow: hidden;
  /* Utiliser position relative/absolute pour le centrage au lieu de flex qui interfère avec Bootstrap */
  position: relative;
}

.carousel-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: center; /* Centre verticalement l'image */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrage parfait */
}

.carousel-item a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 10px;
  width: 3rem !important;
  height: 3rem !important;
}

.carousel-container {
  margin-top: 30px;
  margin-bottom: 0px;
}

.bungalow-card,
.carousel-slide {
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  margin-bottom: 0px;
  border-radius: 8px;
  overflow: hidden;
}

.bungalow-card:hover {
  transform: translateY(-5px);
}

.bungalow-title {
  font-family: "TANAEGEAN-Regular", serif;
  color: rgb(102, 115, 128);
  text-align: center;
  font-size: 2rem;
  margin-top: 20px;
  margin-bottom: 15px;
  width: 100%;
}
.bungalow {
  margin-top: var(--margin-default);
}

.activites-gallery {
  margin-top: 0px;
  //margin-top: var(--margin-default);
}
- a {
  color: rgb(102, 115, 128);
  text-decoration: none;
}

/* Bouton personnalisé */
.btn-dune {
  color: rgb(102, 115, 128);
  background-color: transparent;
  border: 2px solid rgb(102, 115, 128);
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 5px;
}

.btn-dune:hover,
.btn-dune:focus {
  background-color: #afaaa1;
  color: white;
  border-color: #afaaa1;
}

/* Style pour la galerie photo */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Exactement 3 colonnes */
  grid-gap: 12px;
  grid-auto-flow: dense;
  margin-bottom: 30px;
}

/* Galerie d'activités - style spécial sans titre */
.activities-gallery {
  margin-top: 0px;
  //border-top: 1px solid #f0f0f0;
  padding-top: 30px;
  /* Conserver la grille standard de 3 colonnes pour toute la largeur */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  /* S'assurer que les premières images s'alignent avec la pile */
  grid-auto-flow: dense;
}

/* Style pour la galerie photo horizontale du yoga */
.yoga-gallery-container {
  position: relative;
  margin-bottom: 40px;
  padding: 0 40px; /* Espace pour les flèches */
  overflow: hidden; /* Masque tout débordement */
}

.yoga-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden; /* On cache le défilement natif */
  gap: 12px;
  padding-bottom: 20px;
  scroll-behavior: auto !important; /* Force le défilement instantané même ici */
  -webkit-overflow-scrolling: touch; /* Pour l'inertie sur iOS */
}

.yoga-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  gap: 15px; /* Espace uniforme entre les éléments - légèrement augmenté */
  padding-bottom: 20px;
  scroll-behavior: auto !important; /* Force le défilement instantané */
  -webkit-overflow-scrolling: touch;
  align-items: center; /* Alignement vertical des éléments */
}

.yoga-gallery .gallery-item {
  flex: 0 0 auto;
  height: 200px; /* Hauteur fixe pour la ligne */
  transition: transform 0.3s ease;
  overflow: hidden;
  margin: 0; /* Supprime toutes les marges */
  box-sizing: border-box; /* Garantit que le padding est inclus dans la largeur */
}

/* Style pour les liens dans tous les éléments de galerie */
.yoga-gallery .gallery-item a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style masonry pour respecter les ratios */
.yoga-gallery .gallery-item.portrait {
  width: 150px; /* Plus étroit pour les images portrait */
}

.yoga-gallery .gallery-item.landscape {
  width: 300px; /* Plus large pour les images paysage */
}

.yoga-gallery .gallery-item.square {
  width: 200px; /* Intermédiaire pour les images carrées */
}

.yoga-gallery .gallery-item img {
  border-radius: 4px;
  background-color: #f8f8f8; /* Fond léger pour les images qui ne remplissent pas leur conteneur */
}

/* Styles spécifiques pour chaque type d'image */
.yoga-gallery .gallery-item.portrait img {
  object-fit: contain; /* Affiche l'image entière en conservant son ratio */
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
  margin: auto;
}

.yoga-gallery .gallery-item.landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit le conteneur en recadrant si nécessaire */
  object-position: center; /* Centre l'image dans son conteneur */
}

.yoga-gallery .gallery-item.square img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit le conteneur */
  object-position: center; /* Centre l'image dans son conteneur */
}

.yoga-gallery .gallery-item:hover {
  transform: translateY(-5px);
}

/* Flèches de navigation du carousel */
.yoga-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-70%); /* Ajusté pour aligner avec la galerie */
  width: 40px;
  height: 40px;
  background-color: rgba(102, 115, 128, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.yoga-nav-arrow:hover {
  background-color: rgba(102, 115, 128, 1);
  transform: translateY(-70%) scale(1.1);
}

.yoga-nav-arrow:focus {
  outline: none;
}

.yoga-nav-next {
  right: 40px;
}

/* Les styles pour les points de navigation ont été supprimés */

/* Style spécial pour section yoga */
.yoga-section .content {
  margin-bottom: 30px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

.gallery-item a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  /* Évite que les liens agissent comme des liens normaux */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 250px; /* Hauteur fixe pour toutes les images standard */
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img,
.gallery-item:hover video {
  transform: scale(1.03);
}

/* Style pour le badge vidéo */
.gallery-item.video-item::after {
  content: "";
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>')
    no-repeat center center rgba(0, 0, 0, 0.5);
  background-size: 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* Position relative nécessaire pour le badge vidéo */
.gallery-item {
  position: relative;
  overflow: hidden;
}

/* Variations de tailles pour créer une mosaïque intéressante */
.gallery-item:nth-child(5n) {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item:nth-child(5n) img {
  height: 512px; /* Plus grande hauteur pour les images importantes */
}

.gallery-item:nth-child(9n) {
  grid-column: span 1;
  grid-row: span 2;
}

.gallery-item:nth-child(9n) img {
  height: 512px;
}

/* Responsive tablette */
@media (max-width: 992px) {
  .photo-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item:nth-child(5n) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gallery-item:nth-child(5n) img,
  .gallery-item:nth-child(9n) img {
    height: 350px;
  }

  .gallery-item:nth-child(9n) {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Ajustements pour la galerie yoga sur tablette */
  .yoga-gallery-container {
    padding: 0 30px;
  }

  .yoga-gallery .gallery-item {
    height: 165px;
  }

  .yoga-gallery .gallery-item.portrait {
    width: 120px;
  }

  .yoga-gallery .gallery-item.landscape {
    width: 220px;
  }

  .yoga-gallery .gallery-item.square {
    width: 165px;
  }
}

/* Responsive mobile */
@media (max-width: 576px) {
  .photo-gallery {
    grid-template-columns: 1fr;
  }

  /* Ajustements pour la section parallax sur mobile */
  .parallax-section {
    height: 40vh; /* Légèrement réduite sur mobile mais toujours proportionnelle */
    margin-top: 60px;
    margin-bottom: 0;
  }

  .gallery-item,
  .gallery-item:nth-child(5n),
  .gallery-item:nth-child(9n) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery-item img,
  .gallery-item:nth-child(5n) img,
  .gallery-item:nth-child(9n) img {
    height: 250px;
  }

  /* Ajustements pour la galerie yoga sur mobile */
  .yoga-gallery-container {
    padding: 0 25px;
  }

  .yoga-nav-arrow {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .yoga-gallery .gallery-item {
    height: 120px;
  }

  .yoga-gallery .gallery-item.portrait {
    width: 90px;
  }

  .yoga-gallery .gallery-item.landscape {
    width: 160px;
  }

  .yoga-gallery .gallery-item.square {
    width: 120px;
  }
  /* Les styles mobiles pour les points de navigation ont été supprimés */
}

/* Styles lightbox personnalisés pour GLightbox */
.glightbox-clean .gslide-description {
  display: none !important;
}

.glightbox-container .gslide-description {
  display: none !important;
}

.glightbox-open {
  overflow: hidden;
}

.goverlay {
  background-color: rgba(0, 0, 0, 0.9);
}

.gbtn {
  color: #ffffff;
  font-size: 24px;
  width: 50px;
  height: 50px;
}

.glightbox-container .gslide img {
  border-radius: 0;
  box-shadow: none;
  max-height: 90vh;
}

/* Style pour les carrousels avec lightbox */
.carousel-item a {
  cursor: zoom-in;
  display: block;
  overflow: hidden;
  position: relative;
}

.carousel-item a::after {
  content: "\1F50D"; /* Icône de loupe (Unicode) */
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #666;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.carousel-item a:hover::after {
  opacity: 1;
}

/* Styles pour la modale CGV */
.modal-content {
  border-radius: 8px;
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.modal-header {
  border-bottom: 1px solid #f0f0f0;
  padding: 1.5rem;
}

.modal-header .modal-title {
  font-family: "TANAEGEAN-Regular", serif;
  color: rgb(102, 115, 128);
  font-size: 1.8rem;
}

.modal-body {
  padding: 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
}

/* Styles pour les modales */
.modal {
  padding-right: 0 !important;
}

/* Style standard Bootstrap pour le blocage du scroll sous la modale */
.modal-open {
  overflow: hidden;
}

.modal-body h3 {
  font-size: 1.4rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: rgb(102, 115, 128);
}

.modal-body h3:first-child {
  margin-top: 0;
}

.modal-body p {
  margin-bottom: 1.2rem;
}

.modal-body ul {
  margin-bottom: 1.2rem;
  padding-left: 1.5rem;
}

.modal-footer {
  border-top: 1px solid #f0f0f0;
  padding: 1.2rem;
}

/* Styles du nouveau footer */
.footer-main {
  background-color: rgb(176, 170, 160);
  color: white;
  padding: 50px 0;
  margin-top: var(--margin-default);
}

.footer-column {
  margin-bottom: 25px;
}

.footer-logo {
  max-width: 150px;
  height: auto;
  margin-bottom: 15px;
}

.footer-title {
  color: white;
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.footer-heading {
  color: white;
  font-size: 1.4rem;
  margin-bottom: 20px;
  font-family: "TANAEGEAN-Regular", serif;
}

.footer-menu,
.footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li,
.footer-social li {
  margin-bottom: 10px;
}

.footer-menu a,
.footer-social a,
.footer-links a,
.footer-submenu-title {
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.footer-menu a:hover,
.footer-social a:hover,
.footer-links a:hover,
.footer-submenu-title:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Styles des sous-menus dans le footer */
.footer-has-submenu {
  position: relative;
}

.footer-submenu-title {
  cursor: pointer;
  display: inline-block;
}

.footer-has-submenu .footer-submenu {
  display: none;
  list-style: none;
  padding-left: 15px;
  margin: 5px 0 0 0;
}

.footer-has-submenu.submenu-active .footer-submenu {
  display: block;
}

.footer-submenu li {
  margin-top: 5px;
  margin-bottom: 5px;
}

.footer-submenu a {
  font-size: 0.95rem; /* Légèrement plus petit que le texte du menu parent */
}

.footer-contact {
  color: white;
}

.footer-contact p {
  margin-bottom: 10px;
}

.footer-contact a {
  color: white;
  text-decoration: none;
}

/* Force la couleur blanche sur tous les éléments du footer contact */
.footer-contact,
.footer-contact p,
.footer-contact span,
.footer-contact * {
  color: white !important;
}

.btn-dune-footer {
  color: white;
  background-color: transparent;
  border: 2px solid white;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 5px;
  display: inline-block;
  margin-top: 10px;
}

.btn-dune-footer:hover {
  background-color: white;
  color: rgb(176, 170, 160);
}

.copyright {
  font-size: 0.9rem;
  margin-top: 20px;
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-column {
    margin-bottom: 30px;
  }

  .footer-logo {
    max-width: 120px;
  }

  .footer-heading {
    margin-bottom: 15px;
  }
  h1,
  h2 {
    font-size: 2.5rem;
  }
  .header-content h1 {
    font-size: 3.5rem;
  }
  .image-droite .col-lg-6:first-child {
    padding: 0 20px;
  }
  .image-gauche .col-lg-6:last-child {
    padding: 0 20px;
  }
  section {
    padding: 30px 0;
    margin-top: 30px;
    margin-bottom: 0;
  }

  .carousel-item {
    height: 350px; /* 220px * 1.6 = 352px (arrondis à 350px) */
    position: relative;
  }

  .bungalow-title {
    font-size: 1.4rem;
    text-align: center;
  }
  .bungalow {
    margin-top: 60px;
  }
  /* Ajustements pour la section activités sur mobile */
  .image-stack-compact {
    width: 100%;
    margin-bottom: 30px;
  }

  /* Assurer que le texte s'affiche correctement sur mobile */
  #activites .col-lg-6.align-self-start {
    padding-top: 0;
  }
  .combined-sections:first-child,
  :not(.combined-sections) + .combined-sections {
    margin-top: 0px;
  }
}
//