:root{
  --bg: #0b0c10;
  --card: #121317;
  --surface: #171922;
  --text: #e8eaf0;
  --muted: #a8adbd;
  --primary: #2fd27b;
  --primary-ink: #0b1e14;
  --ring: rgba(47,210,123,.35);
  --radius: 16px;
  --shadow: 0 10px 25px rgba(0,0,0,.25);
  /* Variable pour iOS viewport fix */
  --vh: 1vh;
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* CORRECTION POUR LE FOND - Sans toucher à votre mise en page */
body {
  font-family: system-ui, sans-serif;
  color: var(--text);
  /* FOND SUPPRIMÉ DU BODY - sera géré par .background-wrapper */
  line-height: 3.5;
  position: relative; /* Ajouté pour le wrapper */
  min-height: 100vh; /* Ajouté pour mobile */
}

.background-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  object-fit: cover;
  object-position: center;
}

/* Supprime ou commente toutes tes règles background actuelles sur body et .background-wrapper */

/* CORRECTION MOBILE RADICALE - Force le bon comportement sur iOS */
@media (max-width: 768px) {
  /* Retour à la méthode background sur body pour mobile */
  body {
    background-image: url("93-IMG_6518.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* SCROLL au lieu de fixed */
    overflow-x: hidden;
    min-height: 100vh;
    min-height: -webkit-fill-available; /* iOS Safari fix */
    width: 100%;
  }
  
  html {
    height: 100%;
    height: -webkit-fill-available; /* iOS Safari fix */
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  /* Désactiver le wrapper sur mobile */
  .background-wrapper {
    display: none !important;
  }
  
  /* Force les dimensions correctes */
  * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* FIX SPÉCIFIQUE POUR ORIENTATION PORTRAIT iOS */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    background-size: cover !important;
    background-position: center center !important;
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
    height: auto;
  }
  
  html {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

/* FIX SPÉCIFIQUE POUR ORIENTATION PAYSAGE iOS */
@media (max-width: 768px) and (orientation: landscape) {
  body {
    background-size: cover !important;
    background-position: center center !important;
    min-height: 100vh !important;
    width: 100vw !important;
  }
}

/* S'assurer que tout le contenu reste au-dessus du fond */
.site-header,
.section,
.container,
main {
  position: relative;
  z-index: 1;
}

/* Layout - INCHANGÉ */
.container{ width:min(1120px, 92vw); margin:auto; }
.section{ padding:64px 0; }
.section-alt{ background: #ffffff; padding:64px 0; }
.section-intro{color: rgb(255, 255, 255);}
.card-body{
  background: #fff;
  color: #111;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.card-body h3{ color:#000000; }
.card-body p{ color:#000000; }
.card-feats{ color:#000000; }

/* Header - INCHANGÉ */
.site-header{ position:sticky; top:0; background:rgba(255,255,255,.16); backdrop-filter:blur(10px); z-index:50; }
.nav-wrap{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; }
.logo{ font-weight:700; color:var(--text); text-decoration:none; }
.logo span{ color:var(--primary); }
.nav-list{ list-style:none; display:flex; gap:14px; }
.nav a{ color:black; text-decoration:none; padding:10px; border-radius:8px; }
.nav a:hover{ background:rgba(255,255,255,.16); }

/* Logo - INCHANGÉ */
.logo-img {
  height: 100px;
  width: auto;
  margin-left: 20px;
}

/* Dropdown - INCHANGÉ */
.has-dropdown{ position:relative; }
.dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--surface);
  border-radius:12px;
  margin-top:6px;
  min-width:200px;
  border:1px solid rgba(255,255,255,.16);
}
.has-dropdown:hover .dropdown{ display:block; }

.dropdown a{
  display:block;
  padding:10px 14px;
  color:var(--text);
  text-decoration:none;
}
.dropdown a:hover{
  background:rgba(255,255,255,.16);
}

/* Mobile nav - INCHANGÉ */
.nav-toggle{ display:none; font-size:1.4rem; background:transparent; color:var(--text); border:1px solid rgba(255, 255, 255, 0.16); border-radius:10px; padding:6px 10px; cursor:pointer; }
@media(max-width:860px){
  .nav-toggle{ display:block; }
  .nav{ display:none; }
  .nav.open{ display:block; }
  .nav-list{ flex-direction:column; background:white; padding:10px; border-radius:12px; }
  .dropdown{ position:static; border:0; box-shadow:none; margin:0; }
  .dropdown a{ padding-left:28px; }
}

/* === INTRO VIDEO - INCHANGÉ === */
#video-intro {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#video-intro video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}
#video-intro .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}
#video-intro h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}
#scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -15px); }
}

/* Hero - INCHANGÉ */
.hero{ padding:96px 0 72px; text-align:center; }
.hero h1{ font-size:2.5rem; margin-bottom:10px; }
.hero p{ color:black; margin:0 auto 20px; max-width:1000px; }

/* Bloc blanc semi-transparent sous le texte - INCHANGÉ */
.overlay-text {
  background: rgba(255, 255, 255, 0.8);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  display: inline-block;
  text-align: center;
}
.overlay-text h1, 
.overlay-text h2, 
.overlay-text p {
  color: #000;
}

.hero-cta {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Buttons - INCHANGÉ */
.btn{ display:inline-block; padding:10px 16px; border-radius:12px; font-weight:600; text-decoration:none; }
.btn.primary{ background:orange; color:rgb(0, 0, 0); box-shadow:0 4px 13px orange; }
.btn.secondary{ border:1px solid rgba(0, 0, 0, 0.16); color:var(--text); }
.btn.small{ font-size:.9rem; padding:6px 10px; }
.btn.ghost{ border:1px solid rgba(255,255,255,.16); color:black; }

/* Cards dans card-body - INCHANGÉ */
.card-body .btn.secondary{
  color: #111;
  border-color: #111;
  background: #fff;
}
.card-body .btn.secondary:hover{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Cards (lodges) - INCHANGÉ */
.cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
}
@media(max-width:620px){ .cards{ grid-template-columns:1fr; } }

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  overflow:hidden;
  display:block; flex-direction:column;
  border: 4px solid black;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  background: black;
}
.card-media{ aspect-ratio:16/8; line-height: 0; }
.card-media img{ width:100%; height:100%; object-fit:cover; display: block; }
.card-body{ padding:14px; display:block; flex-direction:column; gap:10px; }
.card-feats{ margin:0; padding-left:18px; color:var(--muted); }
.card-actions{ display:block; gap:10px; flex-wrap:wrap; }
.card-full .card-media{ aspect-ratio: 16/5; }

/* Si le fond sombre de la carte remonte, neutralise-le - INCHANGÉ */
.card{ background: transparent; }

/* FORCER 1 colonne dans la section Lodges - INCHANGÉ */
#lodges .cards{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 40px;
}

/* Taille des cartes - INCHANGÉ */
#lodges .cards > .card{
  width: min(560px, 100%);
  margin-bottom: 470px;
}

/* Annuler la pleine largeur éventuelle - INCHANGÉ */
#lodges .cards > .card-full{
  grid-column: auto;
}

/* Position carte par carte - INCHANGÉ */
#lodge-Timis{ justify-self: end; position: relative; top: 200px; }
#lodge-Guddi{ justify-self: start; position: relative; top: 200px; }
#lodge-Suba{ justify-self: end; position: relative; top: 200px; }
#lodge-Fajar{ justify-self: start; position: relative; top: 200px; }
#residence-complete{ justify-self: start; position: relative; top: 200px; }

#lodges .phrase-intro {
  text-align: center !important;
  color: black !important;
  font-weight: bold;
  font-size: 1rem;
  margin: 5px 0 15px;
}

/* === Galerie Déroulante - INCHANGÉ === */
.gallery-scroll {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}
.gallery-scroll img {
  flex: 0 0 auto;
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  scroll-snap-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.3s ease;
}
.gallery-scroll img:hover {
  transform: scale(1.05);
}

/* === Lightbox améliorée - INCHANGÉ === */
.lightbox {
  display: none; 
  position: fixed; 
  z-index: 2000; 
  padding-top: 60px; 
  left: 0; 
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto;
  background: rgba(0,0,0,0.9); 
}

.lightbox-content {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.lightbox .close:hover {
  color: #bbb;
}

/* Flèches Lightbox améliorées - INCHANGÉ */
.prev-lightbox, .next-lightbox {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  color: transparent !important;
  font-weight: bold;
  font-size: 0;
  transition: all 0.3s ease;
  user-select: none;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.3);
  text-indent: -9999px;
}

.prev-lightbox { 
  left: 20px; 
}
.next-lightbox { 
  right: 20px; 
}

.prev-lightbox:hover, .next-lightbox:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.6);
  transform: scale(1.1);
}

/* Flèches CSS pures - INCHANGÉ */
.prev-lightbox::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #fff;
  display: block;
  margin-left: -2px;
}

.next-lightbox::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  display: block;
  margin-right: -2px;
}

/* Formulaire - INCHANGÉ */
.form-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr);color: rgb(0, 0, 0); }
.form-grid .full{ grid-column:1/-1; }
input,textarea{ width:100%; padding:10px; border-radius:8px; background:#0f1117; border:1px solid rgba(255,255,255,.16); color:white; }

/* Footer - INCHANGÉ */
.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding:16px 0; text-align:center; color:black; }

/* Styles de texte - INCHANGÉ */
.italique{
    font-style: italic;
}
.italique p{
    color: black;
}
h1{
    color: black;
}
h2{
    color: black;
}
li{
    color: #000000;
}

/* Responsive - INCHANGÉ + amélioré pour mobile */
@media(max-width: 768px) {
  .overlay-text {
    padding: 20px;
    margin: 20px;
  }
  
  .hero h1 {
    font-size: 2rem;
  }
  
  #video-intro h1 {
    font-size: 2rem;
  }
  
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  
  .gallery-scroll img {
    width: 250px;
    height: 170px;
  }
  
  .lightbox-content {
    max-width: 95%;
  }
  
  .prev-lightbox, .next-lightbox {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  
  .prev-lightbox { left: 10px; }
  .next-lightbox { right: 10px; }
}
#sound-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 20px;
  padding: 8px 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2000;
  transition: all 0.3s ease;
}

#sound-btn:hover {
  background: rgba(0,0,0,0.8);
  transform: scale(1.1);
}
.privacy-link {
  font-size: 0.8rem;
  text-align: center;
  margin-top: 5px;
}

.privacy-link a {
  color: rgba(255, 255, 255, 0.6); /* couleur discrète (blanc transparent) */
  text-decoration: none;
  transition: color 0.3s ease;
}

.privacy-link a:hover {
  color: #ffffff; /* devient blanc au survol */
  text-decoration: underline;
}
/* Style du texte sur fond image pour la page politique */
.page-privacy {
  color: #f5f5f5; /* gris clair lisible */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* améliore la lisibilité */
}

.page-privacy h1, 
.page-privacy h2 {
  color: #ffe680; /* un doré clair élégant pour les titres */
  text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}
#acces h2, #acces h3 {
  color: #000000; /* titres noirs */
}

#acces p, #acces li {
  color: #000000; /* texte gris foncé */
  font-weight: bold; /* rend le texte en gras */
}
#plan {
  width: 100%;
  max-width: 1120px; /* même largeur que tes sections principales */
  height: 450px;      /* hauteur similaire à ta galerie */
  margin: 0 auto;     /* centre horizontalement */
  border: none;
  border-radius: 16px; /* optionnel, pour arrondir les coins */
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
/* Pour que l'iframe Google Maps soit responsive */
/* Map */
/* Retirer le padding de la colonne pour que le titre puisse remonter */
.col-md-6:last-child {
  padding-top: 0; /* enlève l’espace par défaut */
}

/* Titre "Plan" */
.plan-title {
  position: relative;  /* permet de le déplacer librement */
  top: -110px;          /* remonte le titre de 40px */
  margin-bottom: 5px;  /* petit espace sous le titre */
}

/* Map */
.map-container {
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: -80px;  /* la map reste à sa place */
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  border: 0;
}