/* --- OVERRULE SÉCURITÉ COULEUR PRINCIPALE --- */
:root {
  /* Remplace #007bff par le code HEX de ta propre couleur (ex: un beau bleu marine ou vert) */
  --bs-primary: #4884a2;
  --bs-primary-rgb:
    72, 132, 162; /* Version RGB obligatoire pour les effets de transparence de Bootstrap */
}
/* Liens et thèmes de texte primary */
.text-primary,
.text-cauri-blue {
  color: var(--bs-primary) !important;
}

/* Boutons Bootstrap */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(0.9); /* Assombrit légèrement au survol automatiquement */
}

/* Boutons contours (outline) */
.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

/* Badges et fonds clairs (Subtle) */
.bg-primary-subtle,
.bg-light-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  color: var(--bs-primary) !important;
}

/* Onglets actifs (Pills) */
.nav-pills .nav-link.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* bento grid */
/* Layout Bento Grid (uniquement sur Desktop) */
@media (min-width: 768px) {
  .bento-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* La grande image prend plus de largeur */
    grid-template-rows: repeat(2, 240px); /* Deux lignes de hauteur égale */
    gap: 16px; /* Espace moderne entre les cases */
  }

  .bento-main {
    grid-column: 1 / 2;
    grid-row: 1 / 3; /* Prend toute la hauteur (les 2 lignes) */
  }

  .bento-secondary-1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .bento-secondary-2 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}

/* Fallback & Style pour mobile */
@media (max-width: 767px) {
  .bento-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* Sur mobile, on peut cacher la 3ème image pour accélérer le chargement si besoin */
  .bento-secondary-2 {
    display: none;
  }
}

/* Styles communs pour les images (Sécurité CLS et design) */
.bento-item {
  overflow: hidden;
  border-radius: 16px; /* Coins arrondis style Apple/Airbnb */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  background-color: #eaeaea; /* Fond gris neutre pendant le chargement */
}

.bento-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Évite de déformer les photos */
  transition: transform 0.4s ease;
}

/* Petit effet premium au survol */
.bento-item:hover .bento-img {
  transform: scale(1.03);
}

/* header */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}
/* --- COMPORTEMENT STICKY --- */
.site-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1050;
  padding: 16px 0; /* Légèrement réduit pour atténuer l'écart initial */
  background-color: rgba(255, 255, 255, 0); /* Écrit explicitement en RGBA transparent */
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
  
  /* On cible uniquement les propriétés fluides au lieu de 'all' */
  transition: background-color 0.4s ease, padding 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  will-change: background-color, padding; /* Indique au navigateur de pré-optimiser l'animation */
}

/* Version Laptop/Desktop : Liens blancs quand le fond est transparent */
@media (min-width: 992px) {
  .nav-links-list a, .btn-lang {
    color: #ffffff;
    transition: color 0.3s ease;
  }
  .btn-lang {
    border-color: rgba(255, 255, 255, 0.3);
    transition: border-color 0.3s ease, color 0.3s ease;
  }
}

/* --- ÉTAT LORS DU SCROLL (Activé par le JS) --- */
.site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Pour une meilleure compatibilité Safari */
  padding: 12px 0; /* Transition plus douce (de 16px à 12px au lieu de 18px à 10px) */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Retour des couleurs sombres de tes liens au scroll */
.site-header.scrolled .nav-links-list a,
.site-header.scrolled .btn-lang {
  color: #4a5568;
}
.site-header.scrolled .btn-lang {
  border-color: #e2e8f0;
}

/* On garde la couleur active même au scroll */
.nav-links-list li.active a,
.site-header.scrolled .nav-links-list li.active a {
  color: var(--bs-primary) !important;
}

/* --- STRUCTURE DESKTOP PAR DÉFAUT --- */
.main-navbar {
  min-height: 60px;
}
.nav-links-list {
  list-style: none;
}
.nav-links-list a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.nav-links-list a:hover,
.nav-links-list li.active a {
  color: var(--bs-primary);
}

/* Langues Desktop */
.btn-lang {
  background: none;
  border: 1px solid #e2e8f0;
  padding: 6px 12px;
  border-radius: 30px;
  font-weight: 600;
  color: #4a5568;
  cursor: pointer;
}
.lang-switcher-wrapper:hover .lang-dropdown {
  opacity: 1;
  visibility: visible;
}
.lang-dropdown {
  position: absolute;
  top: 110%;
  right: -10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}
.lang-dropdown a {
  color: #64748b;
  text-decoration: none;
  padding: 6px 12px;
}
.lang-dropdown a:hover {
  background-color: #f1f5f9;
  color: #0d6efd;
}

/* Burger Icon */
.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}
.burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #1e293b;
  border-radius: 2px;
}

/* --- RESPONSIVE : GESTION DE L'OVERLAY MOBILE --- */
@media (max-width: 991.98px) {
  .navbar-navigation {
    position: fixed;
    top: 0;
    right: -100%; /* Caché par défaut à droite */
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background-color: #1e293b; /* Fond sombre premium pour l'overlay mobile */
    padding: 80px 40px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Animation fluide */
    z-index: 1100;
  }

  /* Style des liens dans l'overlay mobile */
  .nav-links-list a {
    color: #f8fafc !important;
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }

  .generic-lang-mobile a {
    font-size: 1rem !important;
    width: auto;
  }

  /* Bouton fermer (X) de l'overlay */
  .close-menu-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    color: #f8fafc;
    cursor: pointer;
  }

  /* LA MAGIE DU CSS : Si la checkbox est cochée, on affiche l'overlay */
  #menu-toggle-check:checked ~ .navbar-navigation {
    right: 0;
  }
}

.site-logo {
  width: auto;
  height: 60px;
}

/* section le cauri (a propos) */
/* Style de la section Le Cauri */
.section-le-cauri {
  position: relative;
  overflow: hidden;
  /* Un léger padding généreux pour laisser respirer après les images du dessus */
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Style de l'accroche principale */
.section-le-cauri .lead {
  font-size: 1.25rem;
  line-height: 1.7;
  color: #1e293b !important;
}

.section-le-cauri p:not(.lead) {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #64748b;
}

/* Personnalisation des icônes d'atouts */
.bg-light-primary {
  background-color: #ebf5ff; /* Bleu très clair, s'accorde bien avec le thème marin */
}

.feature-item {
  padding: 10px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}

/* Petit effet interactif discret au survol */
.feature-item:hover {
  background-color: #f8fafc;
}

.tracking-wider {
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

/* --- LE CARROUSEL EN PUR CSS --- */
.carousel-css-wrapper {
  width: 100%;
}

.carousel-css-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Force l'image à se caler pile au centre */
  scroll-behavior: smooth;
  scrollbar-width: none; /* Cache la barre de défilement sur Firefox */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.carousel-css-container::-webkit-scrollbar {
  display: none; /* Cache la barre de défilement sur Chrome/Safari */
}

.carousel-css-slide {
  flex: 0 0 100%; /* Chaque slide prend 100% de la largeur du conteneur */
  scroll-snap-align: start;
  aspect-ratio: 4 / 3; /* Fixe un ratio strict pour éviter le CLS */
  background-color: #eaeaea;
}

.carousel-css-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- LES POINTS DE NAVIGATION (DOTS) --- */
/* Modifie ou ajoute ceci dans ton CSS existant */
.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Le point actif devient bleu et s'élargit légèrement style 2026 */
.carousel-dot.active {
  background-color: var(--bs-primary);
  width: 24px;
  border-radius: 6px;
}
.carousel-dot:hover,
.carousel-dot:focus {
  background-color: var(--bs-primary); /* Devient bleu au survol */
}

/* --- STYLISATION DE LA LISTE DE TEXTE --- */
.equipment-list li {
  font-size: 0.95rem;
  line-height: 1.5;
}

.equipment-list span:first-child {
  font-size: 1.1rem;
  line-height: 1;
}

/* Indication de swipe mobile */
.swipe-hint {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 8px;
}

/* section confort */
.section-confort-total {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

/* Customisation des boutons de pièces (pills) */
.section-confort-total .nav-pills .nav-link {
  color: #475569;
  background-color: #ffffff;
  border-color: #cbd5e1 !important;
  transition: all 0.25s ease;
  font-size: 0.95rem;
  white-space: nowrap; /* Empêche le texte de sauter à la ligne sur mobile */
}

.section-confort-total .nav-pills .nav-link:hover {
  color: var(--bs-primary);
  border-color: var(--bs-primary) !important;
  background-color: rgba(13, 110, 253, 0.02);
}

.section-confort-total .nav-pills .nav-link.active {
  color: #ffffff !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

/* Style des petits encadrés d'éléments */
.fs-7 {
  font-size: 0.92rem;
}
.font-jost {
  font-family: "Jost", sans-serif;
}

/* Cache la scrollbar du menu horizontal sur mobile tout en gardant le swipe fonctionnel */
.overflow-x-auto::-webkit-scrollbar {
  display: none;
}
.overflow-x-auto {
  scrollbar-width: none;
}

/* --- SECTION CONTACT --- */
.section-contact {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

/* Forcer la carte à prendre une belle hauteur sur mobile et s'aligner sur desktop */
.map-wrapper {
  min-height: 350px;
}

/* Stylisation des petites boîtes d'icônes */
.contact-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0; /* Évite que l'icône se déforme si le texte prend de la place */
}

/* Espacements précis */
.gap-3\.5 {
  gap: 0.88rem !important;
}

.text-primary-hover:hover {
  color: var(--bs-primary) !important;
  text-decoration: underline !important;
}

/* Sur grand écran, on s'assure que la carte et le texte font exactement la même hauteur */
@media (min-width: 992px) {
  .map-wrapper {
    min-height: 100%;
  }
}

/* transition image confort */
/* À ajouter à ton fichier CSS custom */
#dynamic-room-image {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

#dynamic-room-image.fade-out {
  opacity: 0;
}

/* section contact */
/* --- SECTION CONTACT --- */
.section-contact {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

/* Forcer la carte à prendre une belle hauteur sur mobile et s'aligner sur desktop */
.map-wrapper {
  min-height: 350px;
}

/* Stylisation des petites boîtes d'icônes */
.contact-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0; /* Évite que l'icône se déforme si le texte prend de la place */
}

/* Espacements précis */
.gap-3\.5 {
  gap: 0.88rem !important;
}

.text-primary-hover:hover {
  color: var(--bs-primary) !important;
  text-decoration: underline !important;
}

/* Sur grand écran, on s'assure que la carte et le texte font exactement la même hauteur */
@media (min-width: 992px) {
  .map-wrapper {
    min-height: 100%;
  }
}

/* section gallerie */

/* --- HARMONISATION DE LA GALERIE --- */
.section-gallery {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

/* Effets de transition sur les liens et images de la galerie */
.gallery-link {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.gallery-img {
  transition: transform 0.5s ease;
}

.gallery-overlay {
  background: rgba(0, 0, 0, 0.2); /* Voile sombre très léger */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.3s ease;
}

/* Comportement au survol */
.gallery-link:hover {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.gallery-link:hover .gallery-img {
  transform: scale(1.06); /* Léger zoom arrière/avant de l'image */
}

.gallery-link:hover .gallery-overlay {
  opacity: 1 !important; /* Rentre la loupe visible */
}

.transition-all {
  transition: all 0.3s ease-in-out;
}

.gallery-loupe-circle {
  width: 50px !important;
  height: 50px !important;
  flex-shrink: 0; /* Sécurité pour éviter toute déformation */
}

.bg-cauri-blue {
    background-color: var(--bs-primary) !important;
}

.btn-lang{
  background-color: #ffffff !important;
}

.site-blocks-cover.overlay:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3) !important;
}