/* 🎨 PALETTE & TYPO */
:root{
  --beige:#f7f3ef;
  --terre-cuite:#b65c3c;
  --terre-cuite-dark:#8d442a;
  --text-dark:#3a2e2a;
  --white:#ffffff;
  --font-title:"Playfair Display",serif;
  --font-body:"Poppins",sans-serif;

  /* pour les flèches & effets */
  --ivory:#F7F2EA;
  --gold:#BFA36A;
  --graphite:#4A403A;
}

/* RESET DE BASE */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-body);
  background-color:var(--beige);
  color:var(--text-dark);
  line-height:1.6;
}

/* ---------- HEADER ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  padding:15px 60px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(247,243,239,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.logo{height:42px;margin-right:10px}
.logo-container{display:flex;align-items:center}
.brand{font-family:var(--font-title);font-size:1.4rem}
.nav a{
  margin:0 12px;text-decoration:none;font-weight:500;color:var(--text-dark)
}
.nav a:hover{color:var(--terre-cuite)}
.btn-reserve{
  background:var(--terre-cuite);color:#fff;padding:8px 16px;border-radius:25px;text-decoration:none
}
/* Forcer le style du bouton Réservation dans le header (tous états) */
.header .nav a.btn-reserve,
.header .nav a.btn-reserve:visited,
.header .nav a.btn-reserve:focus,
.header .nav a.btn-reserve:active {
  color: #ffffff !important;
  background: var(--terre-cuite) !important;
  text-decoration: none !important;
}
/* ---------- HERO ACCUEIL ---------- */
.hero{
  height:100vh;position:relative;display:flex;justify-content:center;align-items:center;text-align:center;
  background:url("images/hero.jpg") center/cover no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(0,0,0,.40);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(1200px 600px at 50% 40%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.55) 100%),
    rgba(0,0,0,.10);
}
.hero-content{
  position:relative;z-index:1;max-width:820px;padding:0 22px;
}
.hero h1{
  font-family:var(--font-title);
  font-size:2.9rem;font-style:italic;
  color:var(--white);
  text-shadow:
    0 0 1px #fff,
    0 0 3px #fff,
    0 0 6px rgba(255,255,255,.95),
    0 0 14px rgba(255,255,255,.75);
}
.hero p{
  margin-top:16px;font-size:1.2rem;color:var(--white);
  text-shadow:
    0 0 1px #fff,
    0 0 2px #fff,
    0 0 8px rgba(255,255,255,.65);
}
.cta{
  display:inline-block;margin-top:24px;padding:12px 24px;border-radius:30px;
  background:var(--terre-cuite);color:#fff;text-decoration:none;transition:.25s;
  box-shadow:0 6px 18px rgba(182,92,60,.3);
}
.cta:hover{background:var(--terre-cuite-dark);transform:translateY(-1px)}

/* ---------- SECTIONS GÉNÉRALES ---------- */
.section{max-width:1000px;margin:100px auto;padding:0 20px;text-align:center}
.section h2{font-family:var(--font-title);font-size:2rem;color:var(--text-dark)}
.sub{font-style:italic;color:#666;margin-bottom:20px}

.property-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px
}
.property-card{
  background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);
  font-style:italic;color:#666
}

/* --- Infos sous les cartes de biens --- */
.property-info {
  margin-top: 8px;
  font-size: 0.95rem;
  color: #444;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.property-price {
  font-weight: 600;
  color: var(--terre-cuite);
  font-family: var(--font-body);
}
.property-icons {
  display: flex;
  gap: 10px;
  color: #777;
  font-size: 1.05rem;
}
.property-icons i { display:inline-block; }

/* ---------- CONTACT ---------- */
.contact-section{padding:80px 20px;background:#f8f6f4;text-align:center}
.contact-form{max-width:700px;margin:auto}
.form-row{display:flex;gap:15px;margin-bottom:15px}
.form-row input, textarea{
  width:100%;padding:12px;border:1px solid #d2c4b8;border-radius:8px
}
textarea{resize:none}

/* ---------- FOOTER ---------- */
.footer{padding:30px;text-align:center;background:#faf7f2;color:#777;font-size:.9rem}

/* ---------- ANIMATIONS ---------- */
.fade-up{opacity:0;transform:translateY(30px);animation:fadeUp 2.2s ease-out forwards}
.fade-up.delay{animation-delay:.5s}
.fade-up.delay2{animation-delay:1.0s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* ---------- MOBILE GLOBAL ---------- */
@media (max-width:768px){
  .header{padding:10px 20px}
  .hero h1{font-size:2.2rem}
  .hero p{font-size:1.05rem}
  .nav a{margin:0 8px}
  .hero h1{
    text-shadow:
      0 0 1px #fff,
      0 0 3px #fff,
      0 0 8px rgba(255,255,255,.85),
      0 0 16px rgba(255,255,255,.7);
  }
}

/* ===================== PAGE PROPRIÉTÉ (HERO + LAYOUT) ===================== */

/* Hero plein-largeur pour un bien (Prestigia, Riad, etc.) */
.property-hero{
  margin-top: 72px;
  position: relative;
  height: 52vh;
  min-height: 360px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.property-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(transparent 40%, rgba(0,0,0,.35) 100%);
}
.property-hero__content{
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 24px;
}
.property-hero__content h1{
  font-family: var(--font-title);
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  text-shadow:
    0 0 1px #fff,
    0 0 8px rgba(255,255,255,.85),
    0 0 18px rgba(255,255,255,.55),
    0 10px 24px rgba(0,0,0,.45);
}
.prop-icons{
  margin-top: 12px;
  display: flex; gap: 18px; justify-content: center;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  font-weight: 600;
}

/* Layout 2 colonnes : texte + galerie / réservation */
.prop-layout{
  max-width: 1200px;
  margin: 40px auto 90px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  padding: 0 20px;
}
.prop-left h2{ font-family: var(--font-title); margin-bottom: .3rem; }
.prop-left h3{ margin: 1.2rem 0 .5rem; }
.prop-list{ padding-left: 1rem; }
.prop-list li{ margin: .35rem 0; }

/* Prix du bien */
.prop-price {
  font-size: 1.1rem;
  color: #3a2e2a;
  background: #fff9f4;
  border-left: 4px solid var(--terre-cuite);
  padding: 10px 14px;
  margin-bottom: 1.2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.prop-price strong {
  color: var(--terre-cuite-dark);
}

/* Colonne droite : galerie + réservation */
.reserve-box{ margin-top: 22px; }
.reserve-form{
  display: grid; gap: 12px;
  background: #fff; padding: 18px; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.reserve-form .row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reserve-form input, .reserve-form textarea{
  width: 100%; padding: 11px 12px; border-radius: 8px;
  border: 1px solid #d7cdc5;
}

/* Responsive propriété */
@media (max-width: 992px){
  .prop-layout{ grid-template-columns: 1fr; }
  .reserve-box{ margin-top: 18px; }
}

/* ===================== GALERIE PROPRIÉTÉ (photo principale + vignettes) ===================== */

.gallery {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
  margin-bottom: 10px;
}
#gal-main,
.gallery img#gal-main {
  width:100%;
  max-height:400px;
  display:block;
  object-fit:cover;
  border-radius:10px;
  transition:opacity 0.4s ease;
}

/* Flèches de cette galerie */
.gal-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background: rgba(255,255,255,0.75);
  border:none;
  border-radius:50%;
  width:42px;
  height:42px;
  font-size:18px;
  color:#4a2e14;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,0.15);
  transition:background 0.25s ease, transform 0.25s ease, color 0.25s ease;
  z-index:10;
}
.gal-nav.prev{ left:12px; }
.gal-nav.next{ right:12px; }
.gal-nav:hover{
  background:#fff;
  transform:translateY(-50%) scale(1.07);
  color:#8b5e3c;
}

/* Petits points ou boutons éventuels sous la galerie */
.gal-dots{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:8px;
}
.gal-dots button{
  border:0;
  background:none;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  opacity:.7;
}
.gal-dots button.active{ opacity:1; }

/* Vignettes */
.thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(80px,1fr));
  gap:6px;
}
.thumbs img,
.g-thumbs img,
.thumb{
  width:100%;
  height:60px;
  object-fit:cover;
  border-radius:6px;
  opacity:0.7;
  cursor:pointer;
  transition:opacity 0.3s, transform 0.2s, box-shadow 0.2s;
}
.thumbs img:hover,
.g-thumbs img:hover,
.thumb:hover{
  opacity:1;
  transform:scale(1.03);
}
.thumbs img.is-active,
.g-thumbs img.is-active,
.thumb.is-active{
  border:2px solid #c98b4c;
  opacity:1;
}

/* ===================== CARROUSELS "NOS BIENS" (horizontal) ===================== */

/* Variante avec #listings .property-grid horizontal */
.listing-row {
  position: relative;
  margin: 26px 0 44px;
}
#listings .property-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 12px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
#listings .property-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}
.property-thumb {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}
#listings .property-grid::-webkit-scrollbar { height: 8px; }
#listings .property-grid::-webkit-scrollbar-track { background: transparent; }
#listings .property-grid::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
.listing-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  color: #3a2e2a;
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 2;
}
.listing-arrow:hover { background: #fff; }
.listing-arrow.prev { left: -12px; }
.listing-arrow.next { right: -12px; }
.listing-label {
  font-family: var(--font-title);
  font-size: 1.3rem;
  text-align: left;
  margin: 18px 0 8px 4px;
  color: var(--text-dark);
}

/* Variante .slider */
.category { margin: 36px 0 48px; text-align: left; }
.category h3 { font-family: var(--font-title); margin: 0 0 14px 4px; }

.slider {
  position: relative;
  padding: 0 44px;
}
.slider-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.slider-track::-webkit-scrollbar { height: 0; }
.slider-track { scrollbar-width: none; }
.slider-track .property-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

/* Variante .carousel */
.category-block {
  margin: 60px 0;
  text-align: left;
}
.category-title {
  font-family: var(--font-title);
  font-size: 1.8rem;
  color: var(--text-dark);
  margin-bottom: 15px;
}
.carousel {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}
.carousel-track {
  display: flex;
  gap: 20px;
  scroll-behavior: smooth;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel .property-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}
.carousel-btn {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  transition: background 0.3s;
}
.carousel-btn:hover { background: #fff; }
.carousel-btn.prev { left: 5px; }
.carousel-btn.next { right: 5px; }

/* ===================== STYLE GLOBAL DES FLÈCHES (tous carrousels) ===================== */
/* JS : #prevPic / #nextPic / .slider .prev/.next / .carousel-btn.prev/.next */

#prevPic, #nextPic,
.slider .prev, .slider .next,
.carousel-btn.prev, .carousel-btn.next {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: none;
  background: rgba(247,243,239,0.95);
  color: transparent;
  font-size: 0;
  line-height: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 2;
}

/* Chevron (→ par défaut) */
#prevPic::before, #nextPic::before,
.slider .prev::before, .slider .next::before,
.carousel-btn.prev::before, .carousel-btn.next::before {
  content:"";
  width:8px;
  height:8px;
  border-top: 2px solid var(--terre-cuite-dark);
  border-right: 2px solid var(--terre-cuite-dark);
  transform: rotate(45deg);
  display:inline-block;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

/* Variante gauche */
#prevPic::before,
.slider .prev::before,
.carousel-btn.prev::before {
  transform: rotate(-135deg);
}

/* Hover / active */
#prevPic:hover, #nextPic:hover,
.slider .prev:hover, .slider .next:hover,
.carousel-btn.prev:hover, .carousel-btn.next:hover {
  background: var(--beige);
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.22);
}
#prevPic:active, #nextPic:active,
.slider .prev:active, .slider .next:active,
.carousel-btn.prev:active, .carousel-btn.next:active {
  transform: scale(0.96);
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);
}

/* Focus clavier */
#prevPic:focus-visible, #nextPic:focus-visible,
.slider .prev:focus-visible, .slider .next:focus-visible,
.carousel-btn.prev:focus-visible, .carousel-btn.next:focus-visible {
  outline: 2px solid var(--terre-cuite);
  outline-offset: 3px;
}

/* Responsive flèches carrousels */
@media (max-width:768px){
  #prevPic, #nextPic,
  .slider .prev, .slider .next,
  .carousel-btn.prev, .carousel-btn.next {
    width: 36px;
    height: 36px;
  }

  #listings .property-card { flex: 0 0 260px; }
  .property-thumb { height: 170px; }
  .listing-arrow { display:none; }
  .slider { padding: 0 36px; }
  .slider-track .property-card { flex: 0 0 260px; }
}/* ===========================================
   ATLAS LIVING – Style unifié des flèches
   Pour : .carousel-btn (home) + .gal-nav (Prestigia)
   =========================================== */

.carousel-btn,
.gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* cercle */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  /* palette Atlas Living */
  background: rgba(247, 243, 239, 0.95); /* proche de var(--beige) */
  color: #8d442a; /* proche de var(--terre-cuite-dark) */
  /* centrage de l’icône (◀️ / ▶️) */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* ombre douce */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  /* transition fluide */
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
  z-index: 5; /* au-dessus des images */
}

/* Position gauche/droite (commune) */
.carousel-btn.prev,
.gal-nav.prev {
  left: 10px;
}

.carousel-btn.next,
.gal-nav.next {
  right: 10px;
}

/* Hover : léger zoom + couleur un peu plus “terre cuite” */
.carousel-btn:hover,
.gal-nav:hover {
  background: #ffffff;
  color: #b65c3c; /* var(--terre-cuite) */
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* Active (clic enfoncé) */
.carousel-btn:active,
.gal-nav:active {
  transform: translateY(-50%) scale(0.96);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
}

/* Focus clavier (Tab) – accessibilité */
.carousel-btn:focus-visible,
.gal-nav:focus-visible {
  outline: 2px solid rgba(182, 92, 60, 0.8); /* terre cuite */
  outline-offset: 3px;
}

/* Ajustement mobile : flèches un peu plus petites */
@media (max-width: 768px) {
  .carousel-btn,
  .gal-nav {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
}/* ============================
   FLÈCHES ATLAS LIVING — FINALES
   ============================ */

.carousel-btn,
.gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(247,243,239,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 10;
  transition: 0.25s;
}

/* CHEVRON visible */
.carousel-btn::before,
.gal-nav::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--terre-cuite-dark);
  border-right: 2px solid var(--terre-cuite-dark);
  transform: rotate(45deg);
}

/* Gauche = rotation différente */
.carousel-btn.prev::before,
.gal-nav.prev::before {
  transform: rotate(-135deg);
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
.gal-nav.prev { left: 10px; }
.gal-nav.next { right: 10px; }

/* Hover */
.carousel-btn:hover,
.gal-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}

/* Mobile */
@media(max-width:768px){
  .carousel-btn,
  .gal-nav {
    width: 36px;
    height: 36px;
  }
}/* Supprimer le texte/emoji dans les flèches */
.gal-nav,
.carousel-btn {
  font-size: 0 !important;
  color: transparent !important;
}
/* ================================
   COMING SOON AUTOMATIQUE
   Pour toutes les cartes .muted
   ================================ */

/* Carte vide : même style que les autres, mais avec visuel "Coming soon" */
.property-card.muted {
  position: relative;
  background: #f7f3ef;
  border-radius: 18px;
  border: 1px solid #e1d2c1;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  padding: 1rem 1.2rem 1.4rem;
  overflow: hidden;
  opacity: 1;
}

/* Image "COMING SOON" fluide, responsive */
.property-card.muted::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;            /* carré fluide selon la largeur */
  background: url("images/coming-soon.jpg") center/contain no-repeat;
  border-radius: 14px;
  margin-bottom: 0.9rem;
}

/* On cache complètement l’ancien contenu visuel */
.property-card.muted .placeholder,
.property-card.muted img {
  display: none !important;
}

/* Légers réglages de texte sous l’image */
.property-card.muted .property-title {
  font-weight: 600;
}

.property-card.muted .property-price {
  color: #b86a3c;
  font-size: 0.9rem;
}

.property-card.muted .property-icons span {
  color: #b0a397;
  font-size: 0.85rem;
}
/* ----------------------------------------------------
   BOUTON INSTAGRAM FLOTTANT – THEME ATLAS LIVING
---------------------------------------------------- */
.floating-ig {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;

  background: #b66a3a; /* terracotta Atlas Living */
  border-radius: 16px; /* angle arrondi comme tes cards */
  padding: 8px;

  color: #f5f0eb; /* beige du site */
  font-size: 1.8rem;

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

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);

  text-decoration: none;
  z-index: 999;

  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Effet hover */
.floating-ig:hover {
  background: #c07a46; /* terracotta plus claire */
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

/* Mobile */
@media (max-width: 768px) {
  .floating-ig {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    bottom: 18px;
    right: 18px;
  }
}
/* ================================
   OPTIMISATION VERSION MOBILE
   ================================ */
@media (max-width: 768px) {

  /* ------ HEADER ------ */
  .header {
    padding: 0.6rem 1rem;
    gap: 0.5rem;
  }

  .logo-container {
    gap: 0.4rem;
  }

  .logo {
    width: 32px;
    height: 32px;
  }

  .brand {
    font-size: 0.9rem;
  }

  .nav {
    gap: 0.7rem;
    font-size: 0.85rem;
  }

  .lang-switch {
    gap: 0.2rem;
  }

  .lang-btn {
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
  }

  /* ------ HERO (page d'accueil) ------ */
  .hero {
    padding: 4rem 1.3rem 2.5rem;
    text-align: left;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero h1 {
    font-size: 1.8rem;
    line-height: 1.2;
  }

  .hero-long p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* ------ LISTE DES BIENS (cartes) ------ */
  .section {
    padding: 2rem 1rem;
  }

  .category-header {
    align-items: flex-start;
  }

  .category-title {
    font-size: 1.2rem;
  }

  .see-all-btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.7rem;
  }

  .carousel {
    padding-inline: 0;
  }

  .carousel-track {
    gap: 1rem;
  }

  .property-card {
    min-width: 240px;
    max-width: 260px;
  }

  .property-thumb {
    height: 160px;
    object-fit: cover;
  }

  .property-title {
    font-size: 1rem;
  }

  .property-price {
    font-size: 0.9rem;
  }

  /* ------ LAYOUT DES PAGES BIENS ------ */
  .prop-layout {
    display: block;       /* on empile les colonnes */
    padding: 1.5rem 1rem;
  }

  .prop-left,
  .prop-right {
    width: 100%;
  }

  .prop-left {
    margin-bottom: 1.5rem;
  }

  .prop-left h2 {
    font-size: 1.2rem;
  }

  .prop-left p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* ------ GALERIE & LIGHTBOX ------ */
  .gallery-box h3 {
    font-size: 1.05rem;
  }

  .gallery {
    margin-bottom: 0.8rem;
  }

  #gal-main {
    max-height: 260px;
    object-fit: cover;
  }

  .thumbs {
    gap: 0.3rem;
  }

  .thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
  }

  /* ------ FORMULAIRES DE RÉSERVATION ------ */
  .reserve-box {
    padding: 1.1rem 1rem;
  }

  .reserve-box h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
  }

  .reserve-form input,
  .reserve-form textarea {
    font-size: 0.9rem;
    padding: 0.55rem 0.6rem;
  }

  .reserve-form .row {
    flex-direction: column;
    gap: 0.6rem;
  }

  .reserve-form .row .col {
    width: 100%;
  }

  .reserve-form label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }

  .cta {
    width: 100%;                /* bouton pleine largeur */
    text-align: center;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    margin-top: 0.6rem;
  }

  /* ------ PROPERTY HERO (bannières de biens) ------ */
  .property-hero {
    min-height: 210px;
  }

  .property-hero__content h1 {
    font-size: 1.4rem;
    padding-inline: 1rem;
    text-align: left;
  }

  /* ------ FOOTER ------ */
  .footer {
    padding: 0.9rem 1rem;
    font-size: 0.8rem;
    text-align: center;
  }

  /* ------ BOUTON INSTAGRAM FLOTTANT ------ */
  .floating-ig {
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }
}

/* Encore un petit ajustement pour les très petits écrans */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.6rem;
  }

  .property-card {
    min-width: 220px;
    max-width: 230px;
  }

  #gal-main {
    max-height: 220px;
  }
}
/* ===== FIX NAV MOBILE ===== */
@media (max-width: 768px) {
  .nav a {
    font-size: 14px;        /* Réduit la taille du texte */
    margin: 0 6px;          /* Réduit l'espacement horizontal */
    white-space: nowrap;    /* Empêche le texte de passer à la ligne */
  }

  .nav {
    display: flex;
    gap: 6px;
  }

  .logo-container .brand {
    font-size: 20px;        /* Légère réduction du texte Atlas Living */
  }
}
/* ===== HEADER DES PAGES BIENS SUR MOBILE ===== */
@media (max-width: 600px) {

  /* Le menu : on autorise le retour à la ligne */
  .header .nav {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.75rem;   /* espace entre Accueil / Nos biens */
    row-gap: 0.15rem;
  }

  /* Bouton Réservation : sur une ligne à part, juste en dessous */
  .header .nav .btn-reserve {
    flex-basis: 100%;      /* prend toute la largeur sous Accueil / Nos biens */
    margin-top: 0.25rem;   /* espace au-dessus */
    text-align: center;
  }
}
/* Mode "voir tout" : on casse le carrousel et on affiche en grille fluide */
.carousel.is-list{
  overflow:visible;
}
.carousel.is-list .carousel-track{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  transform:none !important;
}
.carousel.is-list .property-card{
  min-width:260px;
  max-width:320px;
}