/* ═══════════════════════════════════════════════════════════
   Sol y Sombra — Feuille de styles principale
   Design méditerranéen : terracotta · bleu mer · blanc chaud
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --col-primary    : #C4763A;   /* Terracotta */
  --col-primary-dk : #A85E28;
  --col-secondary  : #1B4F72;   /* Bleu mer profond */
  --col-accent     : #E8C547;   /* Or / soleil */
  --col-bg         : #FDFAF6;   /* Blanc chaud */
  --col-bg-alt     : #F5EFE7;   /* Beige clair */
  --col-dark       : #1a1a1a;
  --col-text       : #2C3E50;
  --col-text-light : #6B7C8D;
  --col-border     : #E8E0D5;
  --col-white      : #ffffff;

  --font-serif     : 'Playfair Display', Georgia, serif;
  --font-sans      : 'Inter', system-ui, sans-serif;

  --radius-sm      : 8px;
  --radius-md      : 14px;
  --radius-lg      : 22px;
  --shadow-sm      : 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md      : 0 8px 30px rgba(0,0,0,0.10);
  --shadow-lg      : 0 20px 60px rgba(0,0,0,0.15);
  --transition     : 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width      : 1280px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family   : var(--font-sans);
  background    : var(--col-bg);
  color         : var(--col-text);
  line-height   : 1.65;
  overflow-x    : hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
.hidden { display: none !important; }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  position : fixed;
  top      : 0;
  left     : 0;
  right    : 0;
  z-index  : 1000;
  padding  : 20px 0;
  transition: var(--transition);
}

.navbar.scrolled {
  background  : rgba(253, 250, 246, 0.96);
  backdrop-filter: blur(12px);
  padding     : 12px 0;
  box-shadow  : var(--shadow-sm);
}

.nav-container {
  max-width : var(--max-width);
  margin    : 0 auto;
  padding   : 0 32px;
  display   : flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family  : var(--font-serif);
  font-size    : 1.6rem;
  font-weight  : 700;
  letter-spacing: -0.01em;
}
.logo-sol    { color: var(--col-primary); }
.logo-y      { color: var(--col-text); }
.logo-sombra { color: var(--col-secondary); }

.nav-right {
  display    : flex;
  align-items: center;
  gap        : 32px;
}

.nav-links {
  display : flex;
  gap     : 28px;
}

.nav-links a {
  font-size  : 0.9rem;
  font-weight: 500;
  color      : var(--col-text);
  transition : color var(--transition);
  position   : relative;
}

.nav-links a::after {
  content   : '';
  position  : absolute;
  bottom    : -3px;
  left      : 0;
  width     : 0;
  height    : 2px;
  background: var(--col-primary);
  transition: width var(--transition);
}

.nav-links a:hover { color: var(--col-primary); }
.nav-links a:hover::after { width: 100%; }

/* Navbar sur fond hero : texte blanc */
.hero ~ .navbar .nav-links a,
.navbar:not(.scrolled) .nav-links a { color: var(--col-white); }
.navbar:not(.scrolled) .nav-links a::after { background: var(--col-white); }

/* Lang switcher */
.lang-switcher {
  display : flex;
  gap     : 4px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding : 4px;
}

.navbar.scrolled .lang-switcher {
  background: var(--col-bg-alt);
}

.lang-btn {
  font-size    : 0.75rem;
  font-weight  : 600;
  padding      : 4px 9px;
  border-radius: 5px;
  color        : var(--col-white);
  transition   : var(--transition);
  letter-spacing: 0.05em;
}

.navbar.scrolled .lang-btn { color: var(--col-text-light); }

.lang-btn.active,
.lang-btn:hover {
  background: var(--col-primary);
  color     : var(--col-white) !important;
}

/* Burger mobile */
.burger-btn {
  display       : none;
  flex-direction: column;
  gap           : 5px;
  padding       : 6px;
}
.burger-btn span {
  display   : block;
  width     : 24px;
  height    : 2px;
  background: var(--col-white);
  border-radius: 2px;
  transition: var(--transition);
}
.navbar.scrolled .burger-btn span { background: var(--col-text); }
.burger-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mobile-menu {
  display       : none;
  flex-direction: column;
  gap           : 0;
  background    : var(--col-white);
  padding       : 0;
  max-height    : 0;
  overflow      : hidden;
  transition    : max-height 0.4s ease, padding 0.3s ease;
  box-shadow    : var(--shadow-md);
}
.mobile-menu.open {
  display    : flex;
  max-height : 400px;
  padding    : 12px 0 16px;
}
.mobile-menu a {
  padding    : 14px 32px;
  font-weight: 500;
  color      : var(--col-text);
  border-bottom: 1px solid var(--col-border);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-lang {
  display : flex;
  gap     : 8px;
  padding : 14px 32px 0;
}
.mobile-lang .lang-btn { color: var(--col-text-light); background: var(--col-bg-alt); }
.mobile-lang .lang-btn.active { background: var(--col-primary); color: var(--col-white); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position  : relative;
  height    : 100vh;
  min-height: 600px;
  display   : flex;
  align-items: center;
  justify-content: center;
  overflow  : hidden;
}

.hero-bg {
  position  : absolute;
  inset     : 0;
  background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1920&q=85') center/cover no-repeat;
  transform : scale(1.05);
  transition: transform 8s ease;
}
.hero:hover .hero-bg { transform: scale(1.0); }

.hero-overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 30, 50, 0.55) 0%,
    rgba(10, 30, 50, 0.35) 50%,
    rgba(10, 30, 50, 0.65) 100%
  );
}

.hero-content {
  position   : relative;
  z-index    : 2;
  text-align : center;
  color      : var(--col-white);
  padding    : 0 24px;
  max-width  : 780px;
}

.hero-tagline {
  font-size    : 0.85rem;
  font-weight  : 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity      : 0.85;
  margin-bottom: 16px;
}

.hero-title {
  font-family  : var(--font-serif);
  font-size    : clamp(2.4rem, 6vw, 4.2rem);
  font-weight  : 700;
  line-height  : 1.15;
  margin-bottom: 20px;
  text-shadow  : 0 2px 20px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size    : clamp(1rem, 2vw, 1.2rem);
  opacity      : 0.9;
  margin-bottom: 40px;
  font-weight  : 300;
}

.hero-cta {
  display        : inline-block;
  background     : var(--col-primary);
  color          : var(--col-white);
  padding        : 16px 40px;
  border-radius  : 50px;
  font-weight    : 600;
  font-size      : 0.95rem;
  letter-spacing : 0.04em;
  transition     : var(--transition);
  box-shadow     : 0 8px 30px rgba(196, 118, 58, 0.5);
}
.hero-cta:hover {
  background  : var(--col-primary-dk);
  transform   : translateY(-2px);
  box-shadow  : 0 12px 40px rgba(196, 118, 58, 0.6);
}

.hero-scroll {
  position : absolute;
  bottom   : 32px;
  left     : 50%;
  transform: translateX(-50%);
  z-index  : 2;
}
.hero-scroll-dot {
  width    : 24px;
  height   : 40px;
  border   : 2px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  position : relative;
}
.hero-scroll-dot::after {
  content  : '';
  position : absolute;
  top      : 6px;
  left     : 50%;
  transform: translateX(-50%);
  width    : 4px;
  height   : 8px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  animation: scrollDot 2s infinite;
}
@keyframes scrollDot {
  0%   { opacity: 1; top: 6px; }
  100% { opacity: 0; top: 20px; }
}

/* ── Stats banner ─────────────────────────────────────────── */
.stats-banner {
  background: var(--col-secondary);
  padding   : 40px 32px;
}
.stats-container {
  max-width  : var(--max-width);
  margin     : 0 auto;
  display    : flex;
  align-items: center;
  justify-content: center;
  gap        : 0;
}
.stat-item {
  flex     : 1;
  text-align: center;
  color    : var(--col-white);
}
.stat-number {
  display      : block;
  font-family  : var(--font-serif);
  font-size    : 2.5rem;
  font-weight  : 700;
  color        : var(--col-accent);
  line-height  : 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size  : 0.85rem;
  opacity    : 0.8;
  font-weight: 400;
}
.stat-divider {
  width     : 1px;
  height    : 50px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ── Section générique ────────────────────────────────────── */
.section-container,
.about-container,
.contact-container,
.footer-container {
  max-width: var(--max-width);
  margin   : 0 auto;
  padding  : 0 32px;
}

.section-header {
  text-align   : center;
  margin-bottom: 48px;
}

.section-title {
  font-family  : var(--font-serif);
  font-size    : clamp(1.9rem, 4vw, 2.8rem);
  font-weight  : 700;
  color        : var(--col-text);
  margin-bottom: 12px;
}
.section-title.light { color: var(--col-white); }

.section-subtitle {
  font-size : 1.05rem;
  color     : var(--col-text-light);
  max-width : 560px;
  margin    : 0 auto;
}
.section-subtitle.light { color: rgba(255,255,255,0.75); }

/* ── Section biens ────────────────────────────────────────── */
.properties-section {
  padding: 96px 0 80px;
  background: var(--col-bg);
}

/* Filtres */
.filters-bar {
  display    : flex;
  align-items: flex-end;
  gap        : 20px;
  flex-wrap  : wrap;
  background : var(--col-white);
  border     : 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  padding    : 28px 32px;
  margin-bottom: 48px;
  box-shadow : var(--shadow-sm);
}

.filter-group {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
  flex          : 1;
  min-width     : 150px;
}

.filter-group label {
  font-size  : 0.75rem;
  font-weight: 600;
  color      : var(--col-text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.filter-select {
  padding      : 12px 16px;
  border       : 1.5px solid var(--col-border);
  border-radius: var(--radius-sm);
  background   : var(--col-bg);
  font-family  : var(--font-sans);
  font-size    : 0.9rem;
  color        : var(--col-text);
  appearance   : none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M6 8L0 0h12z' fill='%236B7C8D'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor       : pointer;
  transition   : border-color var(--transition);
}
.filter-select:focus {
  outline     : none;
  border-color: var(--col-primary);
}

.filter-reset-btn {
  padding      : 12px 24px;
  border       : 1.5px solid var(--col-border);
  border-radius: var(--radius-sm);
  font-size    : 0.85rem;
  font-weight  : 500;
  color        : var(--col-text-light);
  transition   : var(--transition);
  align-self   : flex-end;
  white-space  : nowrap;
}
.filter-reset-btn:hover {
  border-color: var(--col-primary);
  color       : var(--col-primary);
}

/* Grille de biens */
.properties-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap                  : 28px;
}

/* État de chargement */
.loading-state {
  grid-column: 1 / -1;
  display    : flex;
  flex-direction: column;
  align-items: center;
  gap        : 20px;
  padding    : 80px 0;
  color      : var(--col-text-light);
}

.spinner {
  width       : 44px;
  height      : 44px;
  border      : 3px solid var(--col-border);
  border-top  : 3px solid var(--col-primary);
  border-radius: 50%;
  animation   : spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.no-results {
  text-align: center;
  padding   : 60px 0;
  color     : var(--col-text-light);
  font-size : 1.05rem;
}

/* ── Cartes de biens ──────────────────────────────────────── */
.property-card {
  background   : var(--col-white);
  border-radius: var(--radius-md);
  overflow     : hidden;
  box-shadow   : var(--shadow-sm);
  border       : 1px solid var(--col-border);
  transition   : var(--transition);
  animation    : fadeInUp 0.5s ease both;
  display      : flex;
  flex-direction: column;
}

.property-card:hover {
  transform : translateY(-6px);
  box-shadow: var(--shadow-lg);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.card-img-wrap {
  position    : relative;
  overflow    : hidden;
  height      : 220px;
  display     : block;
}

.card-img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.property-card:hover .card-img { transform: scale(1.05); }

.card-type-badge {
  position    : absolute;
  top         : 14px;
  left        : 14px;
  background  : rgba(10, 30, 50, 0.75);
  color       : var(--col-white);
  font-size   : 0.72rem;
  font-weight : 600;
  padding     : 5px 11px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.card-img-count {
  position : absolute;
  bottom   : 12px;
  right    : 12px;
  background: rgba(0,0,0,0.55);
  color    : var(--col-white);
  font-size: 0.75rem;
  padding  : 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

.card-body {
  padding: 20px 22px 22px;
  flex   : 1;
  display: flex;
  flex-direction: column;
}

.card-price {
  font-family  : var(--font-serif);
  font-size    : 1.4rem;
  font-weight  : 700;
  color        : var(--col-primary);
  margin-bottom: 6px;
}

.card-title {
  font-size    : 1.0rem;
  font-weight  : 600;
  color        : var(--col-text);
  margin-bottom: 4px;
  line-height  : 1.35;
}

.card-location {
  font-size    : 0.82rem;
  color        : var(--col-text-light);
  margin-bottom: 14px;
}

.card-specs {
  display    : flex;
  gap        : 12px;
  flex-wrap  : wrap;
  margin-bottom: 18px;
}

.spec-item {
  font-size  : 0.82rem;
  color      : var(--col-text-light);
  background : var(--col-bg-alt);
  padding    : 4px 10px;
  border-radius: 20px;
}

.card-cta {
  display      : block;
  text-align   : center;
  background   : var(--col-secondary);
  color        : var(--col-white);
  padding      : 11px 0;
  border-radius: var(--radius-sm);
  font-size    : 0.88rem;
  font-weight  : 600;
  margin-top   : auto;
  transition   : var(--transition);
  letter-spacing: 0.03em;
}
.card-cta:hover { background: var(--col-primary); }

/* ── Section À propos ─────────────────────────────────────── */
.about-section {
  padding   : 100px 0;
  background: var(--col-bg-alt);
}

.about-container {
  display    : grid;
  grid-template-columns: 1fr 1fr;
  gap        : 80px;
  align-items: center;
}

.about-eyebrow {
  font-size    : 0.8rem;
  font-weight  : 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color        : var(--col-primary);
  margin-bottom: 12px;
}

.about-description {
  font-size    : 1.05rem;
  color        : var(--col-text-light);
  margin-top   : 18px;
  margin-bottom: 28px;
  line-height  : 1.75;
}

.about-features {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.about-features li {
  font-size  : 0.95rem;
  color      : var(--col-text);
  font-weight: 500;
}

.about-image {
  border-radius: var(--radius-lg);
  overflow     : hidden;
  box-shadow   : var(--shadow-lg);
  aspect-ratio : 4/3;
}
.about-image img {
  width    : 100%;
  height   : 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.about-image:hover img { transform: scale(1.04); }

/* ── Section Contact ──────────────────────────────────────── */
.contact-section {
  padding   : 100px 0;
  background: var(--col-secondary);
}

.contact-grid {
  display              : grid;
  grid-template-columns: 1fr 1.6fr;
  gap                  : 60px;
  margin-top           : 56px;
}

.contact-info {
  display       : flex;
  flex-direction: column;
  gap           : 28px;
}

.contact-item {
  display    : flex;
  gap        : 16px;
  align-items: flex-start;
  color      : rgba(255,255,255,0.9);
}

.contact-icon-wrap {
  font-size  : 1.3rem;
  margin-top : 2px;
  flex-shrink: 0;
}

.contact-item strong {
  display      : block;
  font-size    : 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color        : var(--col-accent);
  margin-bottom: 4px;
  font-weight  : 600;
}

.contact-item p, .contact-item a {
  font-size: 0.95rem;
  color    : rgba(255,255,255,0.85);
}
.contact-item a:hover { color: var(--col-accent); }

/* Formulaire de contact */
.contact-form {
  background   : var(--col-white);
  border-radius: var(--radius-lg);
  padding      : 40px;
  box-shadow   : var(--shadow-lg);
}

.form-group {
  position     : relative;
  margin-bottom: 22px;
}

.form-group input,
.form-group textarea {
  width        : 100%;
  padding      : 18px 16px 8px;
  border       : 1.5px solid var(--col-border);
  border-radius: var(--radius-sm);
  font-family  : var(--font-sans);
  font-size    : 0.95rem;
  color        : var(--col-text);
  background   : var(--col-bg);
  transition   : border-color var(--transition);
  resize       : vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline     : none;
  border-color: var(--col-primary);
}

.form-group label {
  position  : absolute;
  top       : 14px;
  left      : 16px;
  font-size : 0.9rem;
  color     : var(--col-text-light);
  pointer-events: none;
  transition: var(--transition);
  transform-origin: left top;
}

.form-group input:not(:placeholder-shown) ~ label,
.form-group input:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label {
  transform : scale(0.75) translateY(-12px);
  color     : var(--col-primary);
}

.form-submit-btn {
  width        : 100%;
  padding      : 16px;
  background   : var(--col-primary);
  color        : var(--col-white);
  border-radius: var(--radius-sm);
  font-size    : 0.95rem;
  font-weight  : 600;
  letter-spacing: 0.04em;
  transition   : var(--transition);
}
.form-submit-btn:hover:not(:disabled) {
  background: var(--col-primary-dk);
  transform : translateY(-2px);
  box-shadow: 0 8px 25px rgba(196, 118, 58, 0.4);
}
.form-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--col-dark);
  padding   : 48px 0 32px;
}

.footer-container {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : 24px;
}

.footer-logo a {
  font-family  : var(--font-serif);
  font-size    : 1.4rem;
  font-weight  : 700;
}

.footer-logo p {
  font-size : 0.8rem;
  color     : rgba(255,255,255,0.4);
  margin-top: 6px;
}

.footer-links {
  display: flex;
  gap    : 24px;
}

.footer-links a {
  font-size  : 0.88rem;
  color      : rgba(255,255,255,0.5);
  transition : color var(--transition);
}
.footer-links a:hover { color: var(--col-accent); }

.footer-legal p {
  font-size : 0.8rem;
  color     : rgba(255,255,255,0.3);
}
.footer-legal a { color: rgba(255,255,255,0.4); }
.footer-legal a:hover { color: var(--col-accent); }

/* ── Bouton WhatsApp flottant ─────────────────────────────── */
.whatsapp-fab {
  position    : fixed;
  bottom      : 28px;
  right       : 28px;
  z-index     : 900;
  width       : 58px;
  height      : 58px;
  background  : #25D366;
  border-radius: 50%;
  display     : flex;
  align-items : center;
  justify-content: center;
  box-shadow  : 0 6px 24px rgba(37, 211, 102, 0.5);
  transition  : var(--transition);
}
.whatsapp-fab:hover {
  transform : scale(1.1);
  box-shadow: 0 10px 32px rgba(37, 211, 102, 0.6);
}

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox {
  display        : none;
  position       : fixed;
  inset          : 0;
  z-index        : 2000;
  background     : rgba(0,0,0,0.92);
  align-items    : center;
  justify-content: center;
}
.lightbox.open { display: flex; }

.lightbox-img {
  max-width : 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox-close {
  position  : absolute;
  top       : 20px;
  right     : 24px;
  color     : var(--col-white);
  font-size : 1.5rem;
  opacity   : 0.7;
  transition: opacity var(--transition);
}
.lightbox-close:hover { opacity: 1; }

.lightbox-prev,
.lightbox-next {
  position  : absolute;
  top       : 50%;
  transform : translateY(-50%);
  color     : var(--col-white);
  font-size : 2rem;
  opacity   : 0.7;
  padding   : 20px 16px;
  transition: opacity var(--transition);
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   PAGE DÉTAIL
   ═══════════════════════════════════════════════════════════ */

.detail-main {
  padding-top: 90px;
  min-height : 80vh;
}

.detail-wrapper {
  max-width: var(--max-width);
  margin   : 0 auto;
  padding  : 40px 32px 80px;
}

.detail-back-btn {
  display    : inline-flex;
  align-items: center;
  gap        : 6px;
  font-size  : 0.88rem;
  font-weight: 500;
  color      : var(--col-text-light);
  margin-bottom: 28px;
  transition : color var(--transition);
}
.detail-back-btn:hover { color: var(--col-primary); }

/* Header */
.detail-header {
  margin-bottom: 32px;
}

.detail-location-badge {
  display     : inline-block;
  font-size   : 0.78rem;
  font-weight : 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color       : var(--col-primary);
  background  : rgba(196, 118, 58, 0.1);
  padding     : 5px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.detail-title {
  font-family  : var(--font-serif);
  font-size    : clamp(1.8rem, 4vw, 3rem);
  font-weight  : 700;
  color        : var(--col-text);
  margin-bottom: 10px;
}

.detail-price {
  font-family: var(--font-serif);
  font-size  : 2rem;
  font-weight: 700;
  color      : var(--col-primary);
}

/* Galerie */
.detail-gallery {
  margin-bottom: 48px;
  border-radius: var(--radius-lg);
  overflow     : hidden;
}

.gallery-hero-wrap {
  position: relative;
}

.gallery-hero-img {
  width     : 100%;
  height    : 520px;
  object-fit: cover;
  cursor    : zoom-in;
  transition: filter 0.3s ease;
}
.gallery-hero-img:hover { filter: brightness(0.92); }

.gallery-expand-btn {
  position  : absolute;
  bottom    : 16px;
  right     : 16px;
  background: rgba(0,0,0,0.6);
  color     : white;
  font-size : 1.1rem;
  padding   : 8px 14px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  transition: background var(--transition);
}
.gallery-expand-btn:hover { background: var(--col-primary); }

.gallery-thumbs {
  display    : flex;
  gap        : 8px;
  flex-wrap  : wrap;
  padding    : 10px;
  background : var(--col-bg-alt);
}

.gallery-thumb {
  width       : 100px;
  height      : 72px;
  object-fit  : cover;
  border-radius: var(--radius-sm);
  cursor      : pointer;
  opacity     : 0.65;
  border      : 2.5px solid transparent;
  transition  : var(--transition);
}
.gallery-thumb:hover,
.gallery-thumb.active {
  opacity     : 1;
  border-color: var(--col-primary);
}

/* Layout détail */
.detail-content {
  display              : grid;
  grid-template-columns: 1fr 380px;
  gap                  : 48px;
  align-items          : start;
}

/* Specs card */
.detail-specs-card {
  background   : var(--col-white);
  border       : 1px solid var(--col-border);
  border-radius: var(--radius-md);
  padding      : 28px;
  margin-bottom: 32px;
}

.spec-row {
  display  : flex;
  gap      : 0;
  flex-wrap: wrap;
}

.spec-cell {
  flex      : 1;
  min-width : 120px;
  padding   : 12px 16px;
  border-right: 1px solid var(--col-border);
  text-align : center;
}
.spec-cell:last-child { border-right: none; }

.spec-label {
  display      : block;
  font-size    : 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color        : var(--col-text-light);
  font-weight  : 600;
  margin-bottom: 6px;
}

.spec-value {
  display    : block;
  font-size  : 1.1rem;
  font-weight: 700;
  color      : var(--col-text);
}

/* Blocs contenu */
.detail-block {
  margin-bottom: 36px;
}

.detail-block-title {
  font-family  : var(--font-serif);
  font-size    : 1.35rem;
  font-weight  : 600;
  color        : var(--col-text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--col-border);
}

.detail-description-text {
  font-size  : 1rem;
  color      : var(--col-text-light);
  line-height: 1.8;
  white-space: pre-line;
}

.features-list {
  display  : flex;
  flex-wrap: wrap;
  gap      : 10px;
}

.feature-tag {
  background   : var(--col-bg-alt);
  border       : 1px solid var(--col-border);
  border-radius: 20px;
  padding      : 6px 16px;
  font-size    : 0.88rem;
  color        : var(--col-text);
}

.detail-map {
  height       : 320px;
  border-radius: var(--radius-md);
  overflow     : hidden;
  border       : 1px solid var(--col-border);
}

/* Carte contact côté droit */
.detail-contact-card {
  background   : var(--col-white);
  border       : 1px solid var(--col-border);
  border-radius: var(--radius-lg);
  overflow     : hidden;
  position     : sticky;
  top          : 110px;
  box-shadow   : var(--shadow-md);
}

.agency-card {
  background : var(--col-secondary);
  padding    : 24px;
  text-align : center;
  color      : var(--col-white);
}

.agency-logo-mini {
  font-family  : var(--font-serif);
  font-size    : 1.3rem;
  font-weight  : 700;
  margin-bottom: 4px;
}

.agency-card p {
  font-size    : 0.82rem;
  opacity      : 0.7;
  margin-bottom: 16px;
}

.agency-phone-btn {
  display      : block;
  background   : rgba(255,255,255,0.15);
  color        : var(--col-white);
  padding      : 11px 16px;
  border-radius: var(--radius-sm);
  font-size    : 0.9rem;
  font-weight  : 600;
  margin-bottom: 8px;
  transition   : background var(--transition);
}
.agency-phone-btn:hover { background: rgba(255,255,255,0.25); }

.agency-whatsapp-btn {
  display      : flex;
  align-items  : center;
  justify-content: center;
  gap          : 8px;
  background   : #25D366;
  color        : var(--col-white);
  padding      : 11px 16px;
  border-radius: var(--radius-sm);
  font-size    : 0.9rem;
  font-weight  : 600;
  transition   : background var(--transition);
}
.agency-whatsapp-btn:hover { background: #1da851; }

.contact-card-title {
  font-family  : var(--font-serif);
  font-size    : 1.1rem;
  font-weight  : 600;
  color        : var(--col-text);
  padding      : 22px 24px 0;
  margin-bottom: 4px;
}

.contact-form-mini {
  padding  : 16px 24px 24px;
  box-shadow: none;
  background: none;
}
.contact-form-mini .form-group input,
.contact-form-mini .form-group textarea {
  background: var(--col-bg);
}

/* Biens similaires */
.similar-section {
  margin-top: 72px;
}

.similar-section .section-title {
  font-size    : 1.6rem;
  margin-bottom: 24px;
}

.similar-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 24px;
}

.similar-card {
  border-radius: var(--radius-md);
  overflow     : hidden;
  border       : 1px solid var(--col-border);
  transition   : var(--transition);
  display      : block;
}
.similar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.similar-card img {
  width     : 100%;
  height    : 160px;
  object-fit: cover;
}

.similar-info {
  padding: 14px 16px 16px;
}

.similar-price {
  font-family: var(--font-serif);
  font-size  : 1.1rem;
  font-weight: 700;
  color      : var(--col-primary);
}

.similar-title {
  font-size    : 0.9rem;
  font-weight  : 600;
  color        : var(--col-text);
  margin       : 4px 0;
}

.similar-specs {
  font-size: 0.8rem;
  color    : var(--col-text-light);
}

/* Not found */
.not-found {
  text-align: center;
  padding   : 80px 0;
  color     : var(--col-text-light);
}
.not-found a {
  display    : inline-block;
  margin-top : 16px;
  color      : var(--col-primary);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .detail-content { grid-template-columns: 1fr 340px; gap: 32px; }
}

@media (max-width: 900px) {
  .about-container { grid-template-columns: 1fr; gap: 40px; }
  .about-image     { max-height: 320px; }
  .contact-grid    { grid-template-columns: 1fr; }
  .detail-content  { grid-template-columns: 1fr; }
  .detail-contact-card { position: static; }
  .similar-grid    { grid-template-columns: repeat(2, 1fr); }
  .gallery-hero-img { height: 380px; }
}

@media (max-width: 768px) {
  .nav-links  { display: none; }
  .burger-btn { display: flex; }
  .nav-right .lang-switcher { display: none; }

  .stats-container { flex-direction: column; gap: 24px; }
  .stat-divider    { width: 60px; height: 1px; }

  .filters-bar { flex-direction: column; gap: 16px; }
  .filter-group { min-width: 100%; }

  .properties-grid { grid-template-columns: 1fr; }

  .spec-row { flex-direction: column; }
  .spec-cell { border-right: none; border-bottom: 1px solid var(--col-border); text-align: left; padding: 12px 0; }
  .spec-cell:last-child { border-bottom: none; }

  .similar-grid { grid-template-columns: 1fr; }
  .gallery-hero-img { height: 260px; }

  .footer-container { flex-direction: column; text-align: center; }

  .hero-title { font-size: 2rem; }
  .contact-form { padding: 28px 20px; }
}

@media (max-width: 480px) {
  .nav-container, .section-container, .about-container,
  .contact-container, .footer-container, .detail-wrapper {
    padding: 0 20px;
  }
  .contact-form { padding: 20px 16px; }
  .gallery-thumbs { display: none; }
}