/* ============================================================
   HYLEMI Real Estate — Local Font Faces
   ============================================================ */
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel/cinzel-v26-latin-regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel/cinzel-v26-latin-500.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel/cinzel-v26-latin-600.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel/cinzel-v26-latin-700.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/cormorant-garamond-v21-latin-regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/cormorant-garamond-v21-latin-italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/cormorant-garamond-v21-latin-500.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond/cormorant-garamond-v21-latin-600.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/inter-v20-latin-300.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/inter-v20-latin-regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/inter-v20-latin-500.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/inter-v20-latin-600.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/inter-v20-latin-700.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/inter-v20-latin-800.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ============================================================
   HYLEMI Real Estate — Design Tokens
   ============================================================ */
:root {
  --gold: #C8932B;
  --gold-highlight: #E8C56A;
  --gold-deep: #A6741A;
  --champagne: #F4E4BC;
  --ink: #0A0908;
  --off-black: #1A1612;
  --gray-warm: #4A453C;
  --gray-soft: #8A8479;
  --ivory: #F8F4EB;
  --white: #FFFFFF;
  --hairline: #D9CFB8;
  --success: #0F7B5C;
  --danger: #B8341A;
  --gold-gradient: linear-gradient(135deg, #A6741A 0%, #C8932B 40%, #E8C56A 70%, #C8932B 100%);
  --shadow-sm: 0 4px 12px rgba(10, 9, 8, 0.08);
  --shadow-md: 0 12px 32px rgba(10, 9, 8, 0.12);
  --shadow-lg: 0 24px 56px rgba(10, 9, 8, 0.18);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; overflow-x: hidden; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
/* iOS Safari auto-zooms into any form field with font-size < 16px on focus.
   Force min 16px on touch viewports — !important to beat per-form rules below. */
@media (max-width: 768px) {
  input, select, textarea,
  .auth-form input, .auth-form select, .auth-form textarea {
    font-size: 16px !important;
  }
}
/* iPhone notch / Android gesture-bar safe areas — body padding + capture pages full-bleed */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  body.capture-page { padding-top: 0; padding-bottom: 0; }
  .capture-header { padding-top: calc(16px + env(safe-area-inset-top)); }
  .capture-main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Typography classes */
.display { font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.05; }
.heading { font-family: 'Cormorant Garamond', serif; font-weight: 500; line-height: 1.15; }
.eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }
.body { font-family: 'Inter', sans-serif; }

/* Container */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* ============================================================
   TOP NAVIGATION
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(10, 9, 8, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  border-bottom: 1px solid rgba(216, 207, 184, 0.12);
  transition: background .3s;
}
.nav.scrolled { background: rgba(10, 9, 8, 0.96); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 92px;
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  color: var(--white);
}
.nav-logo-img {
  display: block;
  height: 72px;
  width: auto;
  /* Logo file has a dark background — match nav so it disappears into the bar */
  background: transparent;
  transition: transform .25s;
}
.nav-logo:hover .nav-logo-img { transform: scale(1.04); }
@media (max-width: 768px) {
  .nav-logo-img { height: 58px; }
}
.nav-logo .mark {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.32em;
  color: var(--white);
}
.nav-logo .sub {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.5em;
  color: var(--gold);
  margin-top: 2px;
}
.nav-links {
  display: flex; align-items: center; gap: 36px;
  list-style: none;
}
.nav-links a {
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--gold);
  transition: width .25s;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.lang-currency-switch {
  display: flex; align-items: center; gap: 16px;
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lang-currency-switch select {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(216, 207, 184, 0.3);
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.lang-currency-switch select option { background: var(--ink); color: var(--white); }

.btn-mobile-menu {
  display: none;
  color: var(--white);
  width: 44px; height: 44px;
  font-size: 22px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(216, 207, 184, 0.3);
  border-radius: var(--radius-md);
  transition: all .2s;
}
.btn-mobile-menu:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 968px) {
  .nav-links, .lang-currency-switch, .nav-right .btn { display: none; }
  .btn-mobile-menu { display: flex; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed; top: 0; right: 0;
  width: min(380px, 100%);
  height: 100dvh;
  background: var(--ink);
  border-left: 1px solid rgba(216, 207, 184, 0.15);
  z-index: 200;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  padding: 28px;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 9, 8, 0.7);
  backdrop-filter: blur(4px);
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.mobile-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(216, 207, 184, 0.15);
}
.drawer-head .mark {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.32em;
  color: var(--white);
}
.drawer-logo-img {
  display: block;
  height: 64px;
  width: auto;
}
.drawer-close {
  width: 40px; height: 40px;
  color: var(--white);
  font-size: 24px;
  border: 1px solid rgba(216, 207, 184, 0.3);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.drawer-close:hover { border-color: var(--gold); color: var(--gold); }
.drawer-links {
  list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 28px;
}
.drawer-links a {
  display: block;
  padding: 16px 0;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(216, 207, 184, 0.08);
}
.drawer-links a:hover { color: var(--gold); }
.drawer-selects {
  display: flex; gap: 12px; margin-bottom: 28px;
}
.drawer-selects select {
  flex: 1;
  background: var(--off-black);
  color: var(--white);
  border: 1px solid rgba(216, 207, 184, 0.3);
  padding: 12px 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.drawer-selects select option { background: var(--ink); }
.drawer-cta { display: flex; flex-direction: column; gap: 12px; }
.drawer-cta .btn { width: 100%; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: var(--white); }
.btn-primary:hover { background: var(--gold-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline-gold { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-outline-gold:hover { background: var(--gold); color: var(--white); }
.btn-outline-white { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--ink); }
.btn-ghost { padding: 14px 0; color: var(--ink); }
.btn-ghost::after {
  content: ''; display: block; width: 100%; height: 1px; background: var(--gold);
  margin-top: 4px;
}
.btn-sm { padding: 10px 22px; font-size: 11px; }
.btn-lg { padding: 18px 40px; font-size: 13px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.5) 0%, rgba(10, 9, 8, 0.7) 100%),
    linear-gradient(135deg, #2a1d10 0%, #5a3d1e 30%, #8c5e2c 60%, #c8932b 100%);
  color: var(--white);
  overflow: hidden;
  padding-top: 92px;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232, 197, 106, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200, 147, 43, 0.2) 0%, transparent 50%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  text-align: center;
  max-width: 920px;
  padding: 0 32px;
}
.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.5em;
  color: var(--gold);
  margin-bottom: 28px;
  font-weight: 500;
}
.hero-headline {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 84px);
  letter-spacing: 0.16em;
  line-height: 1.05;
  margin-bottom: 24px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.hero-subhead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  color: var(--champagne);
  margin-bottom: 56px;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
  line-height: 1.4;
}
.hero-divider {
  width: 64px; height: 1px;
  background: var(--gold);
  margin: 0 auto 56px;
}


/* ============================================================
   SECTION BASE — Responsive padding
   ============================================================ */
.section { padding: clamp(64px, 10vw, 120px) 0; }
.section-dark { background: var(--ink); color: var(--ivory); }
.section-ivory { background: var(--ivory); }
.section-white { background: var(--white); }

.section-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 72px);
  padding: 0 16px;
}
.section-header .eyebrow { display: block; margin-bottom: 16px; }
.section-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-header .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--gray-warm);
  max-width: 580px;
  margin: 0 auto;
}
.section-dark .section-header .lead { color: var(--champagne); }
.hairline-center {
  width: 48px; height: 1px;
  background: var(--gold);
  margin: 24px auto 0;
}

/* ============================================================
   THE COLLECTION (property grid)
   ============================================================ */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 968px) { .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 640px) { .collection-grid { grid-template-columns: 1fr; } }

.property-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .35s ease;
  cursor: pointer;
}
.property-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.property-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--p-gradient, linear-gradient(135deg, #3a2d1e 0%, #6a4a2c 50%, #c8932b 100%));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Featured properties — real photos override the per-card gradient */
/* 🇧🇯 Cotonou (6) */
.property-photo[data-id="h001"] { background-image: url('assets/properties/h001.jpg'); }
.property-photo[data-id="h003"] { background-image: url('assets/properties/h003.jpg'); }
.property-photo[data-id="h005"] { background-image: url('assets/properties/h005.jpg'); }
.property-photo[data-id="v001"] { background-image: url('assets/properties/v001.jpg'); }
.property-photo[data-id="v003"] { background-image: url('assets/properties/v003.jpg'); }
.property-photo[data-id="t002"] { background-image: url('assets/properties/t002.jpg'); }
/* 🇧🇫 Ouagadougou (2) */
.property-photo[data-id="h020"] { background-image: url('assets/properties/h020.jpg'); }
.property-photo[data-id="v010"] { background-image: url('assets/properties/v010.jpg'); }
/* 🇹🇬 Lomé (2) */
.property-photo[data-id="h021"] { background-image: url('assets/properties/h021.jpg'); }
.property-photo[data-id="v011"] { background-image: url('assets/properties/v011.jpg'); }
/* 🇳🇬 Lagos (2) */
.property-photo[data-id="h022"] { background-image: url('assets/properties/h022.jpg'); }
.property-photo[data-id="v012"] { background-image: url('assets/properties/v012.jpg'); }
/* 🇳🇪 Niamey (2) */
.property-photo[data-id="h023"] { background-image: url('assets/properties/h023.jpg'); }
.property-photo[data-id="t010"] { background-image: url('assets/properties/t010.jpg'); }

@media (max-width: 768px) {
  /* 🇧🇯 Cotonou (6) */
  .property-photo[data-id="h001"] { background-image: url('assets/properties/h001-mobile.jpg'); }
  .property-photo[data-id="h003"] { background-image: url('assets/properties/h003-mobile.jpg'); }
  .property-photo[data-id="h005"] { background-image: url('assets/properties/h005-mobile.jpg'); }
  .property-photo[data-id="v001"] { background-image: url('assets/properties/v001-mobile.jpg'); }
  .property-photo[data-id="v003"] { background-image: url('assets/properties/v003-mobile.jpg'); }
  .property-photo[data-id="t002"] { background-image: url('assets/properties/t002-mobile.jpg'); }
  /* 🇧🇫 Ouagadougou (2) */
  .property-photo[data-id="h020"] { background-image: url('assets/properties/h020-mobile.jpg'); }
  .property-photo[data-id="v010"] { background-image: url('assets/properties/v010-mobile.jpg'); }
  /* 🇹🇬 Lomé (2) */
  .property-photo[data-id="h021"] { background-image: url('assets/properties/h021-mobile.jpg'); }
  .property-photo[data-id="v011"] { background-image: url('assets/properties/v011-mobile.jpg'); }
  /* 🇳🇬 Lagos (2) */
  .property-photo[data-id="h022"] { background-image: url('assets/properties/h022-mobile.jpg'); }
  .property-photo[data-id="v012"] { background-image: url('assets/properties/v012-mobile.jpg'); }
  /* 🇳🇪 Niamey (2) */
  .property-photo[data-id="h023"] { background-image: url('assets/properties/h023-mobile.jpg'); }
  .property-photo[data-id="t010"] { background-image: url('assets/properties/t010-mobile.jpg'); }
}
.property-photo::after {
  content: 'HYLEMI';
  position: absolute;
  bottom: 12px; right: 14px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.property-tag {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(10, 9, 8, 0.85);
  color: var(--gold);
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.property-fav {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  font-size: 16px;
  transition: all .2s;
}
.property-fav:hover { background: var(--gold); color: var(--white); }
.property-fav.is-fav { background: var(--gold); color: var(--white); }
.property-fav { cursor: pointer; border: none; }
.property-body { padding: 26px 28px 28px; }
.property-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.property-price .unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-warm);
  font-style: italic;
}
.property-address {
  font-size: 14px;
  color: var(--gray-warm);
  margin-bottom: 18px;
}
.property-specs {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.property-specs .spec { display: flex; align-items: center; gap: 6px; }
.property-specs .dot { color: var(--hairline); }

/* ============================================================
   CITY TILES
   ============================================================ */
.city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 968px) { .city-grid:not(.city-grid--bento) { grid-template-columns: 1fr; } }

/* Bento layout: primary city as hero (left) + 4 satellites in 2×2 cluster (right) */
.city-grid--bento {
  grid-template-columns: 1.4fr 1fr 1fr;
}
.city-grid--bento .city-tile--hero {
  grid-column: 1;
  grid-row: 1 / span 2;
  aspect-ratio: auto;
  height: 100%;
}
.city-grid--bento .city-tile--hero .name {
  font-size: clamp(36px, 3.6vw, 52px);
  letter-spacing: 0.14em;
}
.city-grid--bento .city-tile--hero .label {
  font-size: 11px;
  letter-spacing: 0.45em;
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.city-grid--bento .city-tile--hero .meta {
  font-size: 16px;
  margin-top: 12px;
}
.city-grid--bento .city-tile--hero .city-tile-content {
  bottom: 40px; left: 40px; right: 40px;
}
/* Mobile (≤968): tout en stack vertical pour la lisibilité (noms longs comme "OUAGADOUGOU").
   Le hero garde une typo + grande pour préserver la hiérarchie. */
@media (max-width: 968px) {
  .city-grid--bento { grid-template-columns: 1fr; }
  .city-grid--bento .city-tile--hero {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 11;
    height: auto;
  }
  .city-grid--bento .city-tile--hero .city-tile-content {
    bottom: 28px; left: 28px; right: 28px;
  }
  .city-grid--bento .city-tile--hero .name {
    font-size: clamp(32px, 5vw, 44px);
  }
  .city-grid--bento .city-tile--hero .label {
    font-size: 10px;
    letter-spacing: 0.4em;
    margin-bottom: 14px;
  }
}
.city-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background-color: #2a1d10;
  background-size: cover;
  background-position: center;
  transition: transform .4s ease;
}
/* Dark overlay for text readability (sits above the photo, below the content) */
.city-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.2) 30%, rgba(10, 9, 8, 0.75) 100%);
  pointer-events: none;
}
.city-tile-content { z-index: 1; }
/* City background photos come from inline style="background-image:..." set by app.js renderCityTile(). */
/* When a city has no photo yet (Benin, Burkina, etc.), the background-color fallback above shows through. */
.city-tile:hover { transform: scale(1.02); }
.city-tile-content {
  position: absolute;
  bottom: 32px; left: 32px; right: 32px;
}
.city-tile .label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold);
  display: inline-block;
  margin-bottom: 14px;
}
.city-tile .name {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.city-tile .meta {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--champagne);
  margin-top: 8px;
}

/* ============================================================
   PROCESS (HOW IT WORKS)
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
@media (max-width: 968px) { .process-grid { grid-template-columns: 1fr; gap: 32px; } }
.process-step { text-align: center; }
.process-number {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-bottom: 16px;
}
.process-icon {
  width: 72px; height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 28px;
  position: relative;
}
.process-icon::before, .process-icon::after {
  content: ''; position: absolute;
  width: 12px; height: 1px; background: var(--gold);
}
.process-icon::before { left: -16px; top: 50%; }
.process-icon::after { right: -16px; top: 50%; }
.process-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 12px;
}
.process-desc {
  font-size: 15px;
  color: var(--gray-warm);
  line-height: 1.7;
  max-width: 320px;
  margin: 0 auto;
}
.section-dark .process-desc { color: var(--champagne); opacity: 0.85; }

/* ============================================================
   FEATURED CTA STRIP (full-bleed black)
   ============================================================ */
.cta-strip {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  text-align: center;
}
.cta-strip::before, .cta-strip::after {
  content: '';
  position: absolute;
  width: 240px; height: 1px;
  background: var(--gold-gradient);
  top: 50%;
}
.cta-strip::before { left: 5%; }
.cta-strip::after { right: 5%; }
.cta-strip h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(36px, 5vw, 64px);
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.15;
}
.cta-strip h2 .gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.08em;
}
.cta-strip p {
  color: var(--champagne);
  max-width: 540px;
  margin: 0 auto 40px;
  font-size: 17px;
  line-height: 1.65;
}

/* ============================================================
   TESTIMONIALS (dark)
   ============================================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 968px) { .testimonial-grid { grid-template-columns: 1fr; gap: 32px; } }
.testimonial {
  text-align: left;
  padding: 40px 36px;
  background: var(--off-black);
  border: 1px solid rgba(216, 207, 184, 0.15);
  border-radius: var(--radius-lg);
  transition: border-color .3s;
}
.testimonial:hover { border-color: var(--gold); }
.testimonial-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ivory);
  margin-bottom: 24px;
}
.testimonial-attr {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 16px;
  border-top: 1px solid rgba(216, 207, 184, 0.15);
}
.testimonial-attr .role { color: var(--gray-soft); display: block; margin-top: 4px; font-weight: 400; letter-spacing: 0.2em; }

/* ============================================================
   STATS
   ============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 968px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat {
  text-align: center;
  padding: 32px 16px;
  border-left: 1px solid var(--hairline);
}
.stat:first-child { border-left: none; }
@media (max-width: 968px) { .stat { border-left: none; border-top: 1px solid var(--hairline); padding: 24px 8px; } .stat:nth-child(-n+2) { border-top: none; } }
.stat-number {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  background: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-warm);
}

/* ============================================================
   APP DOWNLOAD SECTION
   ============================================================ */
.app-section {
  background: var(--ink);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 10vw, 120px) 0;
}
@media (display-mode: standalone) {
  .app-section { display: none; }
}
.app-section::before {
  content: '';
  position: absolute;
  top: 0; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 147, 43, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.app-section::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 197, 106, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.app-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 968px) {
  .app-inner { grid-template-columns: 1fr; gap: 56px; }
}

.app-content { text-align: left; }
.app-content .eyebrow { display: block; margin-bottom: 16px; color: var(--gold); }
.app-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--white);
}
.app-content h2 .gold {
  background: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.app-content p.lead {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: var(--champagne);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 480px;
}

.app-features {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.app-features li {
  font-size: 14px;
  color: var(--ivory);
  padding-left: 28px;
  position: relative;
  letter-spacing: 0.02em;
}
.app-features li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 9px;
  top: 5px;
}

.store-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 580px) { .store-buttons { flex-direction: column; gap: 12px; } }

.store-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--off-black);
  border: 1px solid rgba(216, 207, 184, 0.25);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  min-width: 200px;
  color: var(--white);
  transition: all .25s ease;
  cursor: pointer;
}
.store-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(200, 147, 43, 0.25);
}
.store-btn.recommended {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(200, 147, 43, 0.12) 0%, rgba(232, 197, 106, 0.08) 100%);
  position: relative;
}
.store-btn.recommended::after {
  content: 'Recommandé pour vous';
  position: absolute;
  top: -10px; right: 12px;
  background: var(--gold);
  color: var(--white);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
html[lang="en"] .store-btn.recommended::after { content: 'Recommended for you'; }
.store-btn-icon {
  font-size: 28px;
  flex-shrink: 0;
  color: var(--gold);
  transition: color .25s;
}
.store-btn:hover .store-btn-icon { color: var(--white); }
.store-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.store-btn-text .small {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
  transition: color .25s;
}
.store-btn:hover .store-btn-text .small { color: rgba(255, 255, 255, 0.85); }
.store-btn-text .big {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.app-qr-note {
  margin-top: 24px;
  display: flex; align-items: center; gap: 12px;
  color: var(--gray-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.app-qr-note .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* Phone mockup */
.app-phone {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 9 / 19;
  background: linear-gradient(180deg, #1a1612 0%, #0a0908 100%);
  border: 4px solid #2a2520;
  border-radius: 44px;
  padding: 14px;
  box-shadow:
    0 40px 80px rgba(10, 9, 8, 0.6),
    0 0 0 1px rgba(216, 207, 184, 0.1),
    inset 0 0 0 1px rgba(216, 207, 184, 0.05);
}
.app-phone::before {
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #0a0908;
  border-radius: 0 0 18px 18px;
  z-index: 2;
}
.app-phone-screen {
  width: 100%; height: 100%;
  background: var(--ivory);
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
.phone-status {
  height: 36px;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 24px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.phone-status .signals { color: var(--ink); font-size: 10px; }
.phone-header {
  padding: 6px 18px 14px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--hairline);
}
.phone-header .mark {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--ink);
}
.phone-header .icons {
  display: flex; gap: 12px;
  font-size: 14px;
  color: var(--gold);
}
.phone-body {
  padding: 14px;
  flex: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.phone-search {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--gray-warm);
  display: flex; align-items: center; gap: 8px;
}
.phone-search::before { content: '⌕'; color: var(--gold); font-size: 14px; }
.phone-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(10, 9, 8, 0.04);
}
.phone-card .ph {
  height: 90px;
  background: linear-gradient(135deg, #3a2d1e 0%, #8c5e2c 50%, #c8932b 100%);
  background-image: url('assets/properties/h001-mobile.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}
.phone-card .ph::after {
  content: 'HYLEMI';
  position: absolute; bottom: 6px; right: 8px;
  font-family: 'Cinzel', serif;
  font-size: 6px; letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.7);
}
.phone-card .ph .tag {
  position: absolute; top: 8px; left: 8px;
  background: rgba(10, 9, 8, 0.85);
  color: var(--gold);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 7px;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
}
.phone-card .info { padding: 10px 12px 12px; }
.phone-card .price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.phone-card .addr { font-size: 10px; color: var(--gray-warm); margin-top: 2px; }
.phone-card .specs {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  text-transform: uppercase;
}
.phone-card-2 .ph {
  background: linear-gradient(135deg, #1a2638 0%, #4a5570 50%, #a89bb0 100%);
  background-image: url('assets/properties/v003-mobile.jpg');
  background-size: cover;
  background-position: center;
}

@media (max-width: 968px) {
  .app-phone { max-width: 260px; }
}

/* ============================================================
   RESPONSIVE — tablet & mobile refinements
   ============================================================ */

/* Tablet (768-1024) */
@media (max-width: 1024px) {
  .container { padding: 0 28px; }
  .nav-links { gap: 24px; }
  .nav-links a { font-size: 11px; letter-spacing: 0.14em; }
  .hero-search { grid-template-columns: 1.2fr 1fr 1fr auto; }
  .hero-search .segment:nth-child(4) { display: none; } /* hide beds on tablet */
}

/* Mobile (≤ 768) */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .nav-inner { height: 64px; }
  .nav-logo .mark { font-size: 18px; letter-spacing: 0.28em; }
  .nav-logo .sub { font-size: 8px; letter-spacing: 0.4em; }

  .hero { min-height: 88vh; min-height: 88dvh; padding-top: 64px; }
  .hero-content { padding: 0 20px; }
  .hero-eyebrow { font-size: 10px; letter-spacing: 0.4em; margin-bottom: 20px; }
  .hero-headline { letter-spacing: 0.14em; line-height: 1.08; }
  .hero-divider { margin-bottom: 36px; }
  .hero-subhead { margin-bottom: 36px; padding: 0 8px; }
  .hero-search { padding: 6px; grid-template-columns: 1fr; }
  .hero-search .segment { padding: 12px 14px; border-right: none; border-bottom: 1px solid var(--hairline); }
  .hero-search .segment:last-of-type { border-bottom: none; }
  .hero-search .segment label { font-size: 9px; letter-spacing: 0.25em; }
  .hero-search .segment input, .hero-search .segment select { font-size: 14px; }
  .hero-search-submit { padding: 16px; font-size: 11px; letter-spacing: 0.18em; width: 100%; margin-top: 8px; }

  .section-header h2 { line-height: 1.2; }
  .section-header .lead { font-size: 17px; }

  .process-grid { gap: 40px; }
  .process-icon { width: 60px; height: 60px; font-size: 22px; }
  .process-icon::before, .process-icon::after { display: none; }
  .process-title { font-size: 24px; }

  .collection-grid { gap: 20px; }
  .property-body { padding: 22px 22px 24px; }
  .property-price { font-size: 26px; }

  .city-grid { gap: 20px; }
  .city-tile { aspect-ratio: 16 / 11; }
  .city-tile-content { bottom: 24px; left: 24px; right: 24px; }
  .city-tile .name { font-size: 26px; }

  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stat-number { font-size: 44px; }
  .stat-label { font-size: 10px; letter-spacing: 0.22em; }

  .cta-strip { padding: 64px 0; }
  .cta-strip::before, .cta-strip::after { display: none; }
  .cta-strip h2 { line-height: 1.15; padding: 0 12px; }

  .testimonial { padding: 28px 24px; }
  .testimonial-quote { font-size: 17px; }

  .footer { padding: 56px 0 32px; }
  .footer-top { gap: 36px; padding-bottom: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Small mobile (≤ 480) */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-eyebrow { letter-spacing: 0.32em; }
  .hero-headline { letter-spacing: 0.1em; }
  .section-header .lead { font-size: 16px; }
  .property-card { border-radius: var(--radius-md); }
  .property-photo { aspect-ratio: 16 / 11; }
  .property-tag { padding: 5px 10px; font-size: 9px; }
  .property-specs { gap: 10px; font-size: 9px; letter-spacing: 0.18em; }
  .testimonial-quote { font-size: 16px; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-strip h2 { font-size: clamp(26px, 8vw, 34px); padding: 0 8px; }
  .cta-strip h2 .gold-text { letter-spacing: 0.04em; }
  .btn-lg { padding: 14px 20px; font-size: 11px; letter-spacing: 0.14em; max-width: 100%; white-space: normal; line-height: 1.4; text-align: center; }
}

/* Touch device tweaks */
@media (hover: none) and (pointer: coarse) {
  .property-card:hover { transform: none; box-shadow: none; }
  .city-tile:hover { transform: none; }
  .nav-links a::after { display: none; }
  /* Ensure tap targets ≥ 44px */
  .nav-links a, .footer-col a, .drawer-links a { padding: 14px 0; min-height: 44px; display: flex; align-items: center; }
  .property-fav { width: 44px; height: 44px; }
}

/* ============================================================
   MODAL (auth, generic)
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 9, 8, 0.7);
  backdrop-filter: blur(8px);
  z-index: 300;
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  transition: opacity .25s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 460px;
  max-height: 90vh; max-height: 90dvh;
  overflow-y: auto;
  padding: 44px 40px 36px;
  position: relative;
  transform: translateY(20px);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--ink);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.modal-close:hover { background: var(--ivory); color: var(--gold); }
.modal-head { text-align: center; margin-bottom: 32px; }
.modal-head .mark {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.32em;
  color: var(--ink);
  margin-bottom: 6px;
}
.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
.modal-lead {
  font-size: 14px;
  color: var(--gray-warm);
  line-height: 1.5;
}
.modal-divider {
  text-align: center;
  margin: 24px 0;
  position: relative;
}
.modal-divider::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--hairline);
}
.modal-divider span {
  position: relative; background: var(--white);
  padding: 0 16px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-soft);
}
.modal-footer-text {
  text-align: center;
  font-size: 13px;
  color: var(--gray-warm);
}
.modal-footer-text a {
  color: var(--gold-deep);
  font-weight: 600;
  margin-left: 4px;
  border-bottom: 1px solid var(--gold);
}

/* Auth tabs */
.auth-tabs {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  padding: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-warm);
  border-radius: var(--radius-sm);
  transition: all .2s;
  background: transparent;
}
.auth-tab.active {
  background: var(--ink);
  color: var(--white);
}

/* Forms */
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="number"],
.auth-form input[type="date"],
.auth-form textarea,
.auth-form select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--white);
  transition: border-color .2s;
  margin-bottom: 20px;
}
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus {
  outline: none; border-color: var(--gold);
}
.auth-form .hidden { display: none; }
.hidden { display: none; }
.btn-block { width: 100%; }
.phone-input { display: flex; gap: 8px; margin-bottom: 20px; }
.phone-input .country-code { width: 110px; margin-bottom: 0; }
.phone-input input { flex: 1; margin-bottom: 0; }
.otp-input {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 24px;
}
.otp-input input {
  width: 48px; height: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  font-family: 'Cormorant Garamond', serif;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  margin-bottom: 0;
}
.otp-input input:focus { border-color: var(--gold); outline: none; }
.btn-ghost-small {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--gray-warm);
  margin: 16px auto 0;
  background: transparent;
}
.btn-ghost-small:hover { color: var(--gold); }

/* "Bientôt" badge on the disabled phone tab */
.auth-tab-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(200, 147, 43, 0.18);
  color: var(--gold-deep);
  font-size: 8px;
  letter-spacing: 0.18em;
}
/* Phone-tab "coming soon" panel + email-sent success panel */
.auth-soon-panel, .auth-sent-panel {
  text-align: center;
  padding: 24px 8px 8px;
}
.auth-soon-icon, .auth-sent-icon {
  font-size: 36px;
  margin-bottom: 14px;
}
.auth-soon-panel h4, .auth-sent-panel h4 {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}
.auth-soon-panel p, .auth-sent-panel p {
  font-size: 13px;
  color: var(--gray-warm);
  line-height: 1.6;
  margin: 0 0 12px;
}
.auth-sent-panel strong {
  color: var(--ink);
  font-weight: 600;
  word-break: break-all;
}
.auth-sent-help {
  font-size: 11px !important;
  color: var(--gray-warm);
  font-style: italic;
}

/* Signed-in user chip in the nav (replaces the "Connexion" button) */
.user-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink);
  background: var(--white);
  transition: border-color .2s;
}
.user-chip:hover, .user-chip:focus { border-color: var(--gold); outline: none; }
.user-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
}
.user-chip-email {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.user-chip-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(10, 9, 8, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
  z-index: 100;
}
.user-chip:hover .user-chip-menu,
.user-chip:focus-within .user-chip-menu {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.user-chip-menu-email {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 11px;
  color: var(--gray-warm);
  word-break: break-all;
}
.user-chip-signout {
  display: block;
  width: 100%;
  padding: 10px 10px;
  margin-top: 4px;
  text-align: left;
  background: transparent;
  border: none;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-warm);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.user-chip-signout:hover { background: rgba(10, 9, 8, 0.04); color: var(--ink); }
.user-chip-link {
  display: block;
  padding: 10px 10px;
  margin-top: 4px;
  text-align: left;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
}
.user-chip-link:hover { background: rgba(200, 147, 43, 0.08); color: var(--gold-deep); }

/* Page hero (smaller for non-home pages) */
.page-hero {
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.6) 0%, rgba(10, 9, 8, 0.85) 100%),
              linear-gradient(135deg, #2a1d10 0%, #5a3d1e 50%, #8c5e2c 100%);
  color: var(--white);
  padding: 140px 0 80px;
  text-align: center;
}
.page-hero .eyebrow { color: var(--gold); margin-bottom: 18px; display: block; }
.page-hero h1 {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.page-hero .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--champagne);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.4;
}
.page-hero-divider {
  width: 64px; height: 1px; background: var(--gold);
  margin: 24px auto 0;
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  margin-top: 48px;
}
@media (max-width: 968px) {
  .search-layout { grid-template-columns: 1fr; gap: 32px; }
  .filters-sidebar { position: static !important; }
}

.filters-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.filters-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.filter-group { margin-bottom: 28px; }
/* Direct child only — sinon l'uppercase se propage à .filter-checkbox et .amenity-check
   qui sont eux aussi des <label> imbriqués */
.filter-group > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.filter-group input, .filter-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-size: 14px;
  background: var(--white);
}
/* Select désactivé contextuellement (ex: Chambres quand seul Studio est coché en Type) */
.filter-group select:disabled,
.filter-group select.is-disabled-by-type {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--ivory);
  color: var(--gray-warm);
}
.filter-checkboxes { display: flex; flex-direction: column; gap: 10px; }
.filter-checkbox {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}
.filter-checkbox input { width: auto; }

/* Filtre Équipements & services — version sidebar (réutilise .amenities-group + .amenity-check
   de owner.html pour cohérence visuelle, mais avec padding/typo réduits car le sidebar est étroit) */
.filter-group--amenities .amenities-group {
  margin-bottom: 14px;
}
.filter-group--amenities .amenities-group-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}
.filter-group--amenities .amenities-checkbox-grid {
  gap: 6px 8px;
}
.filter-group--amenities .amenity-check {
  padding: 7px 10px;
  font-size: 12.5px;
  gap: 8px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}
.filter-group--amenities .amenity-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
}
/* État désactivé contextuel (quand seul Terrain est coché en Type de bien) */
.filter-group--amenities.is-disabled-by-type .amenities-group-title {
  color: var(--gray-soft);
}
.filter-group--amenities.is-disabled-by-type .amenity-check {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--ivory);
}
.filter-group--amenities.is-disabled-by-type .amenity-check input,
.filter-group--amenities.is-disabled-by-type .amenity-check span {
  cursor: not-allowed;
}
.filter-group--amenities.is-disabled-by-type .amenity-check:hover {
  border-color: var(--hairline); /* annule le hover gold */
}
.filter-amenities-more[open] > summary { margin-bottom: 8px; }
.filter-range {
  display: flex; gap: 10px;
}
.filter-range input { flex: 1; }
.filter-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.results-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.results-count {
  font-size: 13px;
  color: var(--gray-warm);
}
.results-count strong { color: var(--ink); font-weight: 600; }
.results-sort {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
}
.results-sort select {
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 640px) { .results-grid { grid-template-columns: 1fr; } }

/* Smart empty-state — city suggestion chips when a location yields 0 results */
.empty-city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto;
}
.empty-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--ivory);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.empty-city-chip:hover {
  border-color: var(--gold);
  background: var(--white);
  color: var(--gold-deep);
  transform: translateY(-1px);
}
.empty-city-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.empty-city-chip-flag {
  font-size: 16px;
  line-height: 1;
}

/* View toggle (Liste / Carte) — Étape 10 */
.results-view-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-btn {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--gray-warm);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.view-btn + .view-btn { border-left: 1px solid var(--hairline); }
.view-btn:hover { background: var(--ivory); color: var(--ink); }
.view-btn.active {
  background: var(--ink);
  color: var(--gold);
}

/* Conteneur carte sur search.html */
.results-map-wrap {
  position: relative;
  margin-top: 8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

/* Map draw bar (Étape 17) — overlay sur la carte, en haut à gauche */
.map-draw-bar {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: calc(100% - 24px);
}
.map-draw-bar > * { pointer-events: auto; }
.map-draw-btn {
  background: var(--white);
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(10,9,8,0.12);
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  font-weight: 600;
}
.map-draw-btn:hover { background: var(--gold); color: var(--ink); }
.map-draw-btn-active { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.map-draw-btn-active:hover { background: var(--gold-deep); color: var(--ink); border-color: var(--gold-deep); }
.map-draw-clear { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.map-draw-clear:hover { background: #b8341a; border-color: #b8341a; color: white; }
.map-draw-active {
  background: rgba(248, 244, 235, 0.98);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(10,9,8,0.12);
  max-width: 320px;
  flex-wrap: wrap;
}
.map-draw-status {
  font-weight: 600;
  color: var(--ink);
}
.map-draw-hint {
  background: var(--ink);
  color: var(--ivory);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
  box-shadow: 0 2px 6px rgba(10,9,8,0.12);
}
@media (max-width: 480px) {
  .map-draw-bar { top: 8px; left: 8px; right: 8px; max-width: none; }
  .map-draw-btn { font-size: 12px; padding: 8px 10px; }
  .map-draw-active, .map-draw-hint { font-size: 11px; }
}
.results-map {
  width: 100%;
  height: 600px;
  background: var(--ivory);
}
@media (max-width: 768px) { .results-map { height: 480px; } }
.results-map-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248, 244, 235, 0.95);
  color: var(--gray-warm);
  font-size: 14px;
  z-index: 1000;
  pointer-events: none;
}

/* Popup Leaflet — override pour s'aligner sur la charte */
.hylemi-popup .leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  overflow: hidden;
}
.hylemi-popup .leaflet-popup-content {
  margin: 0;
  width: 240px !important;
}
.hylemi-popup .leaflet-popup-tip {
  background: var(--white);
}
.map-popup-card:hover .map-popup-photo { opacity: 0.92; }
.map-popup-card { transition: transform .15s; }
.map-popup-card:hover { transform: translateY(-2px); }

@media (max-width: 640px) {
  .results-toolbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .results-view-toggle { width: 100%; justify-content: stretch; }
  .view-btn { flex: 1; justify-content: center; }
  .results-sort { width: 100%; justify-content: space-between; }
  .results-sort select { flex: 1; max-width: 220px; }
}

.pagination {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-top: 56px;
}
.pagination button, .pagination .ellipsis {
  min-width: 40px; height: 40px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  padding: 0 12px;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.pagination button.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pagination button:hover:not(.active) { border-color: var(--gold); color: var(--gold); }
.pagination .ellipsis { border: none; background: transparent; cursor: default; }

/* ============================================================
   PROPERTY DETAIL PAGE
   ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 8px;
  margin-bottom: 56px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gallery-cell {
  position: relative;
  background: linear-gradient(135deg, #3a2d1e 0%, #8c5e2c 50%, #c8932b 100%);
  cursor: pointer;
  overflow: hidden;
  transition: opacity .2s;
}
.gallery-cell:hover { opacity: 0.92; }
.gallery-cell.main {
  grid-row: 1 / 3;
}
.gallery-cell-2 { background: linear-gradient(135deg, #1a2638 0%, #4a5570 50%, #a89bb0 100%); }
.gallery-cell-3 { background: linear-gradient(135deg, #38241a 0%, #8a5e30 50%, #d8a85a 100%); }
.gallery-cell-4 { background: linear-gradient(135deg, #1e3a2d 0%, #4a7a5e 50%, #c8b56a 100%); }
.gallery-cell-5 { background: linear-gradient(135deg, #2a1d10 0%, #6a4530 50%, #b8825a 100%); }
/* Cellule contenant une vraie photo : background-image en cover + center. */
.gallery-cell.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-cell::after {
  content: 'HYLEMI';
  position: absolute; bottom: 14px; right: 18px;
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
/* Filigrane HYLEMI : un peu plus contrasté sur vraie photo (sinon illisible sur clair). */
.gallery-cell.has-photo::after {
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  color: rgba(255, 255, 255, 0.85);
}
.gallery-more {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(10, 9, 8, 0.85);
  color: var(--gold);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px; }
  .gallery-cell.main { grid-row: 1 / 2; grid-column: 1 / -1; }
  .gallery-cell.cell-5 { display: none; }
}

/* ===== Lightbox plein écran ===== */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(10, 9, 8, 0.94);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  z-index: 9999;
  padding: 40px 20px 80px;
  -webkit-tap-highlight-color: transparent;
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
  flex: 1;
  width: 100%;
  max-width: 1400px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  color: var(--ivory, #F8F4EB);
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  transition: color .15s;
}
.lightbox-close:hover { color: var(--gold, #C8932B); }
.lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(10,9,8,0.6);
  border: 1px solid rgba(200, 147, 43, 0.4);
  color: var(--gold, #C8932B);
  width: 56px; height: 56px;
  border-radius: 50%;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  font-family: 'Cinzel', serif;
}
.lightbox-nav:hover {
  background: rgba(200, 147, 43, 0.15);
  border-color: var(--gold, #C8932B);
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-meta {
  position: absolute;
  bottom: 24px; left: 0; right: 0;
  text-align: center;
  color: var(--ivory, #F8F4EB);
}
.lightbox-caption {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  color: var(--gold, #C8932B);
  margin-bottom: 6px;
  min-height: 18px;
}
.lightbox-counter {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(248, 244, 235, 0.6);
}
@media (max-width: 768px) {
  .lightbox { padding: 24px 8px 70px; }
  .lightbox-close { top: 8px; right: 12px; font-size: 32px; }
  .lightbox-nav { width: 44px; height: 44px; font-size: 26px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-meta { bottom: 16px; }
}

.property-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
}
@media (max-width: 968px) { .property-layout { grid-template-columns: 1fr; gap: 40px; } }

.property-header-block {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 28px;
  margin-bottom: 32px;
}
.property-header-block .eyebrow { display: block; margin-bottom: 12px; color: var(--gold); }
.property-header-block h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 12px;
}
.property-header-block .addr {
  font-size: 16px; color: var(--gray-warm); margin-bottom: 20px;
}
.property-big-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 600;
  color: var(--gold-deep);
}
.property-big-price .unit { font-size: 16px; font-weight: 400; color: var(--gray-warm); font-style: italic; margin-left: 6px; }

.property-key-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
  padding: 24px;
  background: var(--ivory);
  border-radius: var(--radius-lg);
}
@media (max-width: 640px) { .property-key-specs { grid-template-columns: repeat(2, 1fr); } }
.spec-item { text-align: center; }
.spec-item .icon {
  font-size: 22px; color: var(--gold); margin-bottom: 6px;
}
.spec-item .v {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 600; color: var(--ink);
}
.spec-item .lbl {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gray-warm); margin-top: 4px;
}

.property-section { margin-bottom: 40px; }
.property-section h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.property-section p {
  color: var(--gray-warm);
  line-height: 1.75;
  font-size: 15px;
  margin-bottom: 14px;
}
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.amenity-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px;
  color: var(--ink);
}
.amenity-item .dot { color: var(--gold); font-size: 8px; }

/* Room dimensions grid (shown when owner provides salon/cuisine/chambres/sdb m²) */
.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.dimension-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.dimension-icon {
  color: var(--gold);
  font-size: 18px;
  text-align: center;
}
.dimension-label {
  font-size: 14px;
  color: var(--ink);
}
.dimension-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: 0.03em;
}
@media (max-width: 640px) {
  .dimensions-grid { grid-template-columns: 1fr; }
}

/* Amenities checkbox grid — used on owner.html and admin.html modal */
.amenities-group {
  margin-bottom: 18px;
}
.amenities-group-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
  font-weight: 600;
}
.amenities-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}
.amenity-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.amenity-check:hover {
  border-color: var(--gold);
}
.amenity-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}
.amenity-check input[type="checkbox"]:checked + span {
  color: var(--gold-deep);
  font-weight: 500;
}
.amenity-check:has(input:checked) {
  background: rgba(200, 147, 43, 0.08);
  border-color: var(--gold);
}
@media (max-width: 640px) {
  .amenities-checkbox-grid { grid-template-columns: 1fr; }
}

/* Carte Leaflet — quartier */
.property-map {
  height: 320px;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  overflow: hidden;
  z-index: 0;
}
.property-map-fallback {
  height: 280px;
  background: linear-gradient(135deg, #e8dcc8 0%, #d4c4a0 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.18em;
  font-size: 13px;
  text-align: center;
  padding: 0 24px;
}
/* Marker doré custom */
.hylemi-marker { background: transparent; border: none; }
.hylemi-marker-pin {
  width: 22px; height: 22px;
  background: var(--gold);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 2px var(--gold);
  position: relative;
}
.hylemi-marker-pin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: hylemi-pulse 2s ease-out infinite;
  background: var(--gold);
  opacity: 0.5;
  z-index: -1;
}
@keyframes hylemi-pulse {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Paywall card (sticky aside) */
.paywall-card {
  position: sticky;
  top: 100px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  align-self: start;
}
.paywall-card .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.paywall-card h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--ink);
}
.paywall-card .commission {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 4px;
}
.paywall-card .commission-detail {
  font-size: 12px;
  color: var(--gray-warm);
  font-style: italic;
  margin-bottom: 24px;
}

.paywall-locked {
  background: var(--ivory);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
  border: 1px dashed var(--hairline);
}
.paywall-locked .icon {
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 8px;
}
.paywall-locked .name { filter: blur(6px); user-select: none; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.paywall-locked .phone { filter: blur(5px); user-select: none; font-size: 15px; color: var(--gray-warm); }
.paywall-locked .hint { margin-top: 10px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }

.paywall-actions {
  display: flex; flex-direction: column; gap: 12px;
}

.trust-strip {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 10px;
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--gray-warm);
}
.trust-item .check { color: var(--gold); }

/* ============================================================
   CALENDAR (visit page)
   ============================================================ */
.calendar {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.calendar-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.calendar-head h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
}
.calendar-head button {
  width: 36px; height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
}
.calendar-head button:hover { border-color: var(--gold); color: var(--gold); }
.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.calendar-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-warm);
  padding: 8px 0;
}
.calendar-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}
.calendar-day:hover:not(.disabled):not(.empty) { background: var(--ivory); border-color: var(--hairline); }
.calendar-day.selected { background: var(--gold); color: var(--white); border-color: var(--gold); font-weight: 600; }
.calendar-day.disabled { color: var(--gray-soft); cursor: not-allowed; opacity: 0.4; }
.calendar-day.empty { cursor: default; pointer-events: none; }
.calendar-day.today { border-color: var(--gold); }

.time-slots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 24px;
}
.time-slot {
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.time-slot:hover { border-color: var(--gold); color: var(--gold); }
.time-slot.selected { background: var(--ink); color: var(--white); border-color: var(--ink); }
.time-slot.taken { opacity: 0.4; pointer-events: none; text-decoration: line-through; }

/* ============================================================
   PAYMENT PAGE
   ============================================================ */
.payment-tabs {
  display: flex; gap: 8px;
  margin-bottom: 28px;
}
.payment-tab {
  flex: 1;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  display: flex; align-items: center; gap: 14px;
  transition: all .2s;
}
.payment-tab.active { border-color: var(--gold); background: rgba(200, 147, 43, 0.04); }
.payment-tab .icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--gold);
}
.payment-tab .name {
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink);
}
.payment-tab .desc {
  font-size: 12px; color: var(--gray-warm); margin-top: 2px;
}
@media (max-width: 640px) {
  .payment-tabs { flex-direction: column; gap: 10px; }
  .payment-tab { flex: none; padding: 14px 16px; }
  .payment-tab .icon { width: 40px; height: 40px; font-size: 18px; }
  .mobile-money-providers { grid-template-columns: repeat(2, 1fr); }
}

.mobile-money-providers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.provider-btn {
  padding: 16px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all .2s;
}
.provider-btn:hover { border-color: var(--gold); }
.provider-btn.selected { border-color: var(--gold); background: rgba(200, 147, 43, 0.06); color: var(--gold-deep); }

.summary-card {
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.summary-card h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  margin-bottom: 20px;
  color: var(--white);
}
.summary-row {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(216, 207, 184, 0.15);
  font-size: 14px;
}
.summary-row:last-of-type { border-bottom: none; }
.summary-row .label { color: var(--champagne); }
.summary-row .val { font-weight: 600; }
.summary-total {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--gold);
  display: flex; justify-content: space-between; align-items: baseline;
}
.summary-total .label { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.summary-total .val { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; color: var(--white); }

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.admin-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
@media (max-width: 968px) { .admin-layout { grid-template-columns: 1fr; } }

.admin-sidebar {
  background: var(--ink);
  color: var(--ivory);
  padding: 32px 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}
@media (max-width: 968px) { .admin-sidebar { position: static; height: auto; padding: 24px; } }
.admin-sidebar .brand {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(216, 207, 184, 0.15);
}
.admin-sidebar .brand .mark {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.32em;
  color: var(--white);
}
.admin-sidebar .brand .sub {
  font-size: 10px; letter-spacing: 0.4em; color: var(--gold); margin-top: 4px;
}
.admin-nav { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.admin-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--ivory);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: all .2s;
}
.admin-nav a:hover { background: var(--off-black); color: var(--gold); }
.admin-nav a.active { background: rgba(200, 147, 43, 0.15); color: var(--gold); border-left: 2px solid var(--gold); }
.admin-nav .icon { font-size: 16px; }

.admin-main {
  padding: 40px 48px;
  background: var(--ivory);
}
@media (max-width: 640px) { .admin-main { padding: 28px 20px; } }
.admin-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap; gap: 16px;
}
.admin-head h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 500;
}
.admin-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 968px) { .admin-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .admin-cards { grid-template-columns: 1fr; } }
.admin-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
}
.admin-card .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray-warm);
  margin-bottom: 12px;
}
.admin-card .val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.admin-card .trend {
  font-size: 12px;
  color: var(--success);
  font-weight: 600;
}
.admin-card .trend.down { color: var(--danger); }

/* Admin view tabs — switch between Soumissions and Annonces */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0;
}
.admin-tab {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gray-warm);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.active {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}
.admin-tab-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.admin-view[hidden] { display: none; }

/* Property admin list rows */
.properties-admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prop-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color .2s, box-shadow .2s;
}
.prop-row:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(10, 9, 8, 0.04);
}
.prop-row-thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
}
.prop-row-main { min-width: 0; }
.prop-row-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prop-row-meta {
  font-size: 12px;
  color: var(--gray-warm);
  margin-bottom: 6px;
}
.prop-row-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.prop-row-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.prop-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .prop-row {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "thumb main"
      "price price"
      "actions actions";
  }
  .prop-row-thumb { grid-area: thumb; width: 60px; height: 60px; }
  .prop-row-main { grid-area: main; }
  .prop-row-price { grid-area: price; }
  .prop-row-actions { grid-area: actions; }
}

/* Stat cards (my-listings.html top dashboard) — sober ivory cards with gold accent on numbers */
.prop-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 968px) { .prop-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .prop-stats { grid-template-columns: 1fr 1fr; gap: 8px; } }
.stat-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  text-align: center;
  transition: border-color .2s;
}
.stat-card:hover { border-color: var(--gold); }
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
.stat-label {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-warm);
}

/* Inline analytics line on each owner row (Étape 16) */
.prop-row-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--hairline);
  font-size: 12px;
  color: var(--ink);
}
.prop-row-stats span { display: inline-flex; align-items: center; gap: 4px; }
.prop-row-stats .lbl { color: var(--gray-warm); font-size: 11px; }
@media (max-width: 480px) {
  .prop-row-stats { gap: 10px; font-size: 11px; }
  .prop-row-stats .lbl { display: none; }
}

.admin-section {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
}
.admin-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.admin-section h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
}

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.admin-table th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pill-success { background: rgba(15, 123, 92, 0.12); color: var(--success); }
.pill-pending { background: rgba(200, 147, 43, 0.12); color: var(--gold-deep); }
.pill-danger { background: rgba(184, 52, 26, 0.12); color: var(--danger); }

/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--hairline);
  padding: 24px 0;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.faq-q .toggle { color: var(--gold); font-size: 20px; transition: transform .25s; }
.faq-item.open .toggle { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  color: var(--gray-warm);
  line-height: 1.7;
  font-size: 15px;
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding-top: 16px;
}

/* Owner form */
.form-section {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 720px;
  margin: 0 auto;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }
.form-section .auth-form input,
.form-section .auth-form select,
.form-section .auth-form textarea { margin-bottom: 4px; }
.field-group { margin-bottom: 20px; }
.help-text { font-size: 12px; color: var(--gray-warm); margin-top: 4px; }

/* ============================================================
   TRANSACTION PILL on property cards (Rent / Sale indicator)
   ============================================================ */
.property-photo { position: relative; }
.property-tx-pill {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.property-tx-pill.tx-rent {
  background: rgba(255, 255, 255, 0.92);
  color: var(--gold-deep);
  border: 1px solid rgba(200, 147, 43, 0.4);
}
.property-tx-pill.tx-sale {
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--gold);
}
.spec-land {
  font-style: italic;
  color: var(--gold-deep);
}

/* ============================================================
   ADDITIONAL ADJUSTMENTS for sub-pages
   ============================================================ */
/* Contact page two-column → single column on mobile */
@media (max-width: 968px) {
  .contact-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* Active nav link */
.nav-links a.active, .drawer-links a.active { color: var(--gold); }

/* FAQ first item open by default for visual hint */
.faq-item .faq-q { user-select: none; }

/* Better disabled state for pagination */
.pagination button[disabled] { opacity: 0.35; cursor: not-allowed; }
.pagination button[disabled]:hover { border-color: var(--hairline); color: var(--ink); }

/* Property card on dark backgrounds */
.section-dark .property-card { background: var(--white); }

/* Visit page: smaller property layout columns on tablet */
@media (max-width: 1100px) and (min-width: 969px) {
  .property-layout { grid-template-columns: 1fr 340px; gap: 36px; }
}

/* Owner form vertical rhythm */
.form-section .field-group { margin-bottom: 18px; }

/* ============================================================
   CAPTURE PAGES (submit-facade.html, submit-photos.html)
   ============================================================ */
body.capture-page {
  background: var(--ivory);
  min-height: 100vh;
}

.capture-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  color: var(--white);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(216, 207, 184, 0.15);
}
.capture-logo-img { height: 44px; display: block; }
.capture-step {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne);
}
.capture-step strong { color: var(--gold); font-size: 14px; margin: 0 2px; }

.capture-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.capture-screen { display: none; }
.capture-screen.active { display: block; animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.capture-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.capture-ref {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.capture-owner {
  font-size: 14px;
  color: var(--gray-warm);
}

.capture-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.2;
}
.capture-title-sm {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 18px;
}
.capture-lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--gray-warm);
  margin-bottom: 28px;
  line-height: 1.45;
}

.capture-guide {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.capture-guide-collapsible summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink);
}
.capture-guide-collapsible summary::-webkit-details-marker { display: none; }
.capture-guide-collapsible summary:hover { color: var(--gold-deep); }
.capture-guide-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.capture-guide-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 14px;
}
.capture-guide-list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.capture-guide-list .g-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.capture-gps-note {
  display: flex; align-items: center; gap: 12px;
  background: rgba(200, 147, 43, 0.08);
  border: 1px solid rgba(200, 147, 43, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--ink);
}
.capture-gps-note .dot { color: var(--gold); font-size: 8px; }

.capture-cta { font-size: 14px; padding: 20px; }

/* Preview screen */
.preview-image-wrap {
  margin-bottom: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
  position: relative;
  box-shadow: var(--shadow-md);
}
.preview-image-wrap img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

.quality-checks {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 4px 0;
  margin-bottom: 18px;
}
.quality-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.quality-row:last-child { border-bottom: none; }
.q-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
.q-value { color: var(--gray-warm); font-size: 13px; }
.q-status {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.q-status.ok { background: rgba(15, 123, 92, 0.15); color: var(--success); }
.q-status.warn { background: rgba(200, 147, 43, 0.15); color: var(--gold-deep); }
.q-status.fail { background: rgba(184, 52, 26, 0.12); color: var(--danger); }

.gps-info { margin-bottom: 18px; }
.gps-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.gps-row.ok { border-color: rgba(15, 123, 92, 0.35); }
.gps-row.fail { border-color: rgba(184, 52, 26, 0.35); background: rgba(184, 52, 26, 0.04); }
.gps-icon { font-size: 20px; }
.gps-coords { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--ink); }
.gps-acc { font-size: 12px; color: var(--gray-warm); margin-top: 2px; }

.quality-errors, .quality-warnings {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.quality-errors {
  background: rgba(184, 52, 26, 0.07);
  border-left: 3px solid var(--danger);
  color: var(--danger);
}
.quality-warnings {
  background: rgba(200, 147, 43, 0.08);
  border-left: 3px solid var(--gold);
  color: var(--gold-deep);
}
.quality-errors ul, .quality-warnings ul { margin: 8px 0 0 18px; }
.quality-errors li, .quality-warnings li { margin-bottom: 4px; }
.quality-errors strong, .quality-warnings strong { display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

.capture-actions {
  display: flex; flex-direction: column; gap: 10px;
}

/* Loader screen */
.loader { text-align: center; padding: 60px 20px; }
.loader-spinner {
  width: 56px; height: 56px;
  border: 3px solid var(--hairline);
  border-top-color: var(--gold);
  border-radius: 50%;
  margin: 0 auto 24px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}
.loader-sub { color: var(--gray-warm); font-size: 14px; }

.progress-bar {
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 24px;
  max-width: 320px;
  margin-left: auto; margin-right: auto;
}
.progress-bar-fill {
  height: 100%;
  background: var(--gold);
  width: 0;
  transition: width .4s ease;
}

/* Success / Error marks */
.success-mark, .error-mark {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  font-weight: 700;
  margin: 30px auto 24px;
}
.success-mark { background: rgba(15, 123, 92, 0.15); color: var(--success); }
.error-mark { background: rgba(184, 52, 26, 0.12); color: var(--danger); }

.capture-next-step {
  background: var(--ivory);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-top: 24px;
  text-align: left;
}

.capture-footer {
  text-align: center;
  padding: 24px;
  font-size: 12px;
  color: var(--gray-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Categories list (submit-photos.html) */
.categories-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.cat-item {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  cursor: pointer;
  transition: all .2s;
}
.cat-item:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cat-status {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.cat-item.cat-ok .cat-status { background: rgba(15, 123, 92, 0.15); color: var(--success); }
.cat-item.cat-required .cat-status { background: rgba(200, 147, 43, 0.15); color: var(--gold-deep); border: 1px dashed var(--gold); }
.cat-item.cat-optional .cat-status { background: var(--ivory); color: var(--gray-soft); }
.cat-info { flex: 1; }
.cat-name { font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.cat-meta { font-size: 12px; color: var(--gray-warm); }
.cat-cta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

.progress-summary {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.progress-summary-text { font-size: 13px; color: var(--gray-warm); margin-bottom: 10px; }
.progress-summary-text strong { color: var(--gold-deep); font-family: 'Cormorant Garamond', serif; font-size: 20px; }
.progress-summary .progress-bar { margin: 0; max-width: none; }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: none;
  color: var(--gold-deep);
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  cursor: pointer;
}
.back-link:hover { color: var(--gold); }

.cat-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.cat-photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink);
}
.cat-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-photo-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.7);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cat-photo-remove:hover { background: var(--danger); }

/* ============================================================
   ADMIN DASHBOARD — submission list
   ============================================================ */
.admin-empty {
  text-align: center;
  padding: 60px 24px;
  background: var(--ivory);
  border-radius: var(--radius-md);
}

.submissions-list {
  display: flex; flex-direction: column; gap: 14px;
}
.submission-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: border-color .2s;
}
.submission-card:hover { border-color: var(--gold); }
.submission-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.submission-ref {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: 0.04em;
}
.submission-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  margin-top: 2px;
}
.submission-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 24px;
  margin-bottom: 16px;
}
@media (max-width: 640px) { .submission-info { grid-template-columns: 1fr; } }
.submission-info > div {
  display: flex; flex-direction: column;
  font-size: 13px;
}
.submission-info .lbl {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 2px;
}
.submission-info .val { color: var(--ink); }
.submission-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.setup-banner {
  background: rgba(200, 147, 43, 0.08);
  border-left: 3px solid var(--gold);
}

/* ============================================================
   Annonces similaires (Étape 18) — section en bas de property.html
   ============================================================ */
.similar-section {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--hairline);
}
.similar-head {
  margin-bottom: 28px;
  text-align: center;
}
.similar-head .eyebrow {
  display: block;
  margin-bottom: 10px;
}
.similar-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.01em;
}
@media (max-width: 768px) {
  .similar-section { margin-top: 56px; padding-top: 40px; }
  .similar-head h2 { font-size: 28px; }
}

/* ============================================================
   Profil unifié (Étape 14) — page profile.html
   ============================================================ */
.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(200,147,43,0.08), rgba(232,197,106,0.05));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
}
.profile-header-main { display: flex; align-items: center; gap: 18px; }
.profile-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A6741A, #C8932B, #E8C56A);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.profile-user-meta .label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
}
.profile-user-meta .email {
  font-size: 16px; color: var(--ink); font-weight: 500;
  margin-top: 2px;
  word-break: break-all;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
.profile-stat {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
}
.profile-stat .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  color: var(--gold-deep);
  line-height: 1;
}
.profile-stat .lbl {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray-warm); margin-top: 6px;
}
@media (max-width: 640px) {
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-header { padding: 22px; }
}

.profile-section {
  margin-bottom: 48px;
}
.profile-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-section-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  color: var(--ink);
  margin: 0;
}
.profile-section-head a {
  color: var(--gold-deep);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.profile-section-head a:hover { color: var(--gold); }

.profile-empty {
  background: var(--ivory);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  color: var(--gray-warm);
  font-size: 14px;
}

/* Compact visit / saved-search rows */
.profile-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.profile-row-main { flex: 1 1 280px; min-width: 0; }
.profile-row-title {
  font-weight: 600; color: var(--ink); font-size: 15px;
  margin-bottom: 4px;
}
.profile-row-meta {
  color: var(--gray-warm); font-size: 13px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.profile-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-row-stats {
  display: flex; gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink);
}
.profile-row-stats span { display: inline-flex; align-items: center; gap: 4px; }
.profile-row-badge {
  display: inline-flex; align-items: center;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 99px;
  margin-left: 8px;
}

/* ============================================================
   Recherches sauvegardées — bouton sur search.html + modale
   ============================================================ */
.results-save-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.results-save-btn:hover { background: var(--gold); color: var(--ink); }
.results-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.save-search-modal-body { padding: 0 4px; }
.save-search-modal-body .field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 16px 0 6px;
}
.save-search-modal-body input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--white);
}
.save-search-modal-body input:focus {
  outline: none;
  border-color: var(--gold);
}
.save-search-filters-summary {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--gray-warm);
  margin-top: 14px;
  line-height: 1.6;
}
.save-search-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px;
}

.hylemi-toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink);
  color: var(--ivory);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  border: 1px solid var(--gold);
  max-width: 90vw;
}
.hylemi-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   FLOOR PLANS / Plans d'étage (Étape 15)
   ============================================================ */
.floorplans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.floorplan-tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.floorplan-tile:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 16px rgba(10, 9, 8, 0.08);
  transform: translateY(-2px);
}
.floorplan-tile img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: var(--white);
}
.floorplan-tile-label {
  display: block;
  padding: 8px 12px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  border-top: 1px solid var(--hairline);
  background: var(--white);
}

/* ============================================================
   REVIEWS / AVIS (Étape 13)
   ============================================================ */
.reviews-section {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.reviews-head { margin-bottom: 32px; }
.reviews-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 500;
  margin: 8px 0 12px;
  color: var(--ink);
}
.reviews-summary {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
}
.reviews-rating {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--ink);
}
.reviews-stars {
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 2px;
}
.reviews-count { font-size: 14px; color: var(--gray-warm); }

.reviews-list {
  display: flex; flex-direction: column; gap: 18px;
}
.reviews-empty {
  padding: 32px 24px;
  text-align: center;
  background: var(--ivory);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
  color: var(--gray-warm);
  font-size: 14px;
}
.review-item {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.review-item-head {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.review-item-author {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}
.review-item-stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 1px;
}
.review-item-date {
  font-size: 12px;
  color: var(--gray-warm);
  margin-left: auto;
}
.review-item-body {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
}

.reviews-cta {
  margin-top: 28px;
  text-align: center;
}
.reviews-cta-help {
  font-size: 13px;
  color: var(--gray-warm);
  margin: 10px 0 0;
}

/* Stars input in review modal */
.review-stars-input {
  display: flex; gap: 6px;
  margin: 6px 0 18px;
}
.review-star {
  background: transparent;
  border: none;
  font-size: 32px;
  color: var(--hairline);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s, transform 0.1s;
}
.review-star:hover { transform: scale(1.1); }
.review-star.is-on { color: var(--gold); }

/* ============================================================
   INBOX / MESSAGING (Étape 12)
   ============================================================ */
.inbox-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: stretch;
  min-height: 520px;
}
.inbox-list {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  max-height: 70vh;
}
.inbox-loading, .inbox-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--gray-warm);
  font-size: 14px;
}
.inbox-item {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  position: relative;
}
.inbox-item:hover { background: var(--ivory); }
.inbox-item.is-active { background: var(--ivory); border-left: 3px solid var(--gold); padding-left: 13px; }
.inbox-item-photo {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--ivory);
}
.inbox-item-photo-fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  color: var(--gold-deep);
  font-size: 20px;
  background: linear-gradient(135deg, #A6741A, #C8932B, #E8C56A);
  color: var(--ink);
}
.inbox-item-body { flex: 1; min-width: 0; }
.inbox-item-row1 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 2px;
}
.inbox-item-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-item-time { font-size: 11px; color: var(--gray-warm); flex-shrink: 0; }
.inbox-item-title {
  font-size: 12px;
  color: var(--gold-deep);
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-item-last {
  font-size: 13px; color: var(--gray-warm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-item-last.is-unread { color: var(--ink); font-weight: 600; }
.inbox-item-badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  border-radius: 99px;
}

.inbox-thread {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.inbox-thread-placeholder {
  flex: 1;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-warm);
}
.inbox-thread-active { flex: 1; display: flex; flex-direction: column; }
.inbox-thread-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  gap: 12px;
}
.inbox-thread-property { display: flex; align-items: center; gap: 12px; color: inherit; min-width: 0; flex: 1; }
.inbox-thread-photo {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background-size: cover; background-position: center;
  background-color: var(--ivory);
  flex-shrink: 0;
}
.inbox-thread-photo-fallback {
  background: linear-gradient(135deg, #A6741A, #C8932B, #E8C56A);
}
.inbox-thread-title {
  font-weight: 600; color: var(--ink); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-thread-meta { font-size: 12px; color: var(--gray-warm); }
.inbox-thread-back {
  display: none;
  background: transparent; border: none;
  color: var(--gold-deep); font-size: 13px; cursor: pointer;
  padding: 6px 10px;
}
.inbox-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--ivory);
  display: flex; flex-direction: column; gap: 10px;
}
.inbox-msg { display: flex; flex-direction: column; max-width: 78%; }
.inbox-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.inbox-msg.is-other { align-self: flex-start; align-items: flex-start; }
.inbox-msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px; line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.inbox-msg.is-mine .inbox-msg-bubble {
  background: var(--gold);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}
.inbox-msg.is-other .inbox-msg-bubble {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 4px;
}
.inbox-msg-meta { font-size: 10px; color: var(--gray-warm); margin-top: 4px; padding: 0 6px; }
.inbox-reply {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--hairline);
  background: var(--white);
}
.inbox-reply textarea {
  flex: 1; resize: vertical;
  min-height: 44px; max-height: 200px;
  padding: 10px 12px;
  font-family: inherit; font-size: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
.inbox-reply textarea:focus { outline: none; border-color: var(--gold); }

/* Mobile: stack list / thread; show only one at a time */
@media (max-width: 768px) {
  .inbox-layout { grid-template-columns: 1fr; min-height: auto; }
  .inbox-list { max-height: none; }
  .inbox-thread { display: none; max-height: 80vh; }
  .inbox-layout.thread-open .inbox-list { display: none; }
  .inbox-layout.thread-open .inbox-thread { display: flex; }
  .inbox-thread-back { display: inline-block; }
}

/* Inbox badge pill (drawer + user-chip-menu link) */
.inbox-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Small red-gold dot on user-chip avatar when unread (does not show count, just visual hint) */
.user-chip-avatar { position: relative; }
.user-chip-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  background: var(--gold);
  border: 2px solid var(--white);
  border-radius: 50%;
  font-size: 0;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   EDITORIAL REDESIGN — added 2026-05-23
   New patterns from skill hylemi-design (split hero, process line).
   The old hero / process CSS above is now orphan and can be cleaned up.
   ============================================================ */

/* --- A11Y baseline (skip link + global focus-visible) --------- */

/* Skip link — hidden until focused, then jumps to top-left */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--ivory);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold);
  transform: translateY(-110%);
  transition: transform .15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

/* Global focus-visible ring — only shows for keyboard users, not mouse */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Specific reinforcement for our editorial CTA */
.link-underline:focus-visible {
  outline-offset: 6px;
}

/* Touch target minimum 44px on mobile for any interactive element */
@media (max-width: 768px) {
  .link-underline,
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Editorial split hero ------------------------------------ */
.hero-editorial {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  min-height: 100vh;
  padding: 144px 64px 96px;
  background: var(--ivory);
}

.hero-split-text {
  max-width: 520px;
}

.hero-split-text .eyebrow {
  display: block;
  margin-bottom: 32px;
}

.hero-split-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 32px;
}
.hero-split-headline em {
  font-style: italic;
  color: var(--gray-warm);
}

.hero-split-lead {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--gray-warm);
  max-width: 42ch;
  margin: 0 0 40px;
}

/* Gold underline CTA — the default HYLEMI link style */
.link-underline {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 6px;
  transition: color .2s, border-color .2s, padding-bottom .2s;
}
.link-underline:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
  padding-bottom: 9px;
}
.link-underline span { transition: transform .2s; display: inline-block; margin-left: 4px; }
.link-underline:hover span { transform: translateX(4px); }

/* Photo column — keep the photo rotation system (hero-slide cycling) */
.hero-split-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 80vh;
  overflow: hidden;
}
.hero-editorial .hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
  /* Reset old fullbleed positioning side-effects */
  z-index: auto;
}
.hero-editorial .hero-slide.active { opacity: 1; z-index: 1; }
.hero-editorial .hero-slide::before,
.hero-editorial .hero-slide::after { display: none; }

/* Fallback thematic gradients per property type (visible until photo loads) */
.hero-editorial .hero-slide[data-key="apartment"] { background-image: linear-gradient(135deg, #1a2638 0%, #4a5570 50%, #a89bb0 100%); }
.hero-editorial .hero-slide[data-key="house"]     { background-image: linear-gradient(135deg, #1e3a2d 0%, #4a7a5e 50%, #c8b56a 100%); }
.hero-editorial .hero-slide[data-key="villa"]     { background-image: linear-gradient(135deg, #2a1d10 0%, #5a3d1e 50%, #c8932b 100%); }
.hero-editorial .hero-slide[data-key="studio"]    { background-image: linear-gradient(135deg, #1a1418 0%, #4a3a3e 50%, #a89580 100%); }
.hero-editorial .hero-slide[data-key="terrain"]   { background-image: linear-gradient(135deg, #2a1d10 0%, #8c5e2c 50%, #c8932b 100%); }

/* Caption under photo */
.hero-split-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  z-index: 2;
  text-shadow: 0 1px 8px rgba(10, 9, 8, 0.6);
}
.hero-split-caption .hero-caption-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* Mobile : stack vertically, photo first */
@media (max-width: 900px) {
  .hero-editorial {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 116px 24px 64px;
    min-height: auto;
  }
  .hero-split-photo {
    order: -1;
    aspect-ratio: 3 / 4;
    max-height: 60vh;
  }
  .hero-split-headline {
    font-size: clamp(40px, 10vw, 64px);
  }
  .hero-split-lead {
    font-size: 17px;
  }
}

/* --- Process: one editorial line ---------------------------- */
.process-section {
  padding: clamp(96px, 14vw, 200px) 0;
  background: var(--ivory);
}
.process-line {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
}
.process-line em {
  font-style: italic;
  color: var(--gray-warm);
}

@media (max-width: 768px) {
  .process-line {
    font-size: clamp(28px, 7vw, 40px);
    max-width: 18ch;
  }
}

/* --- About page : Values list (vertical editorial) ----------- */
.values-list {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}
.values-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: baseline;
  padding: 40px 0;
  border-top: 1px solid var(--hairline);
}
.values-item:last-child {
  border-bottom: 1px solid var(--hairline);
}
.values-term {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.values-def {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
@media (max-width: 768px) {
  .values-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }
  .values-def { font-size: 19px; }
}

/* --- Owner page : Editorial numbered steps ------------------- */
.steps-list {
  list-style: none;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  counter-reset: hylemi-steps;
}
.steps-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 48px;
  align-items: baseline;
  padding: 48px 0;
  border-top: 1px solid var(--hairline);
}
.steps-item:last-child {
  border-bottom: 1px solid var(--hairline);
}
.steps-num {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 0.9;
  color: var(--gold);
  letter-spacing: 0;
}
.steps-title {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}
.steps-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  line-height: 1.45;
  color: var(--gray-warm);
  margin: 0;
  max-width: 50ch;
}
@media (max-width: 768px) {
  .steps-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 36px 0;
  }
  .steps-num { font-size: 40px; }
  .steps-desc { font-size: 19px; }
}

/* --- Editorial footer (replaces 4-column footer) ------------ */
.footer-editorial {
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(72px, 10vw, 120px) clamp(24px, 6vw, 96px) 32px;
  border-top: 1px solid rgba(216, 207, 184, 0.08);
}
.footer-ed-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(216, 207, 184, 0.08);
}
.footer-ed-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-ed-mark {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.36em;
  color: var(--ivory);
}
.footer-ed-sub {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-ed-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--champagne);
  max-width: 36ch;
  margin: 0;
}
.footer-ed-cities {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-soft);
  margin-top: 8px;
}

.footer-ed-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.footer-ed-nav a {
  color: rgba(248, 244, 235, 0.7);
  transition: color .2s, padding-left .2s;
  position: relative;
  padding-left: 0;
  display: inline-block;
  width: max-content;
}
.footer-ed-nav a:hover {
  color: var(--gold-highlight);
  padding-left: 6px;
}

.footer-ed-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-style: normal;
  color: rgba(248, 244, 235, 0.7);
}
.footer-ed-contact a {
  color: var(--ivory);
  transition: color .2s;
}
.footer-ed-contact a:hover {
  color: var(--gold-highlight);
}
.footer-ed-contact span {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-soft);
  margin-top: 8px;
}

.footer-ed-meta {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-soft);
}
.footer-ed-meta a {
  color: var(--gray-soft);
  transition: color .2s;
}
.footer-ed-meta a:hover {
  color: var(--gold-highlight);
}
.footer-ed-admin {
  opacity: 0.4;
  margin-left: 4px;
}
.footer-ed-social {
  display: flex;
  gap: 24px;
}

@media (max-width: 900px) {
  .footer-ed-grid {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-bottom: 56px;
  }
  .footer-ed-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 24px;
  }
  .footer-ed-social {
    gap: 20px;
  }
}

/* --- About page : Heritage line (replaces stats counter) ----- */
.heritage-line {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
  max-width: 30ch;
  margin: 0 auto;
}
.heritage-line em {
  font-style: italic;
  color: var(--gold-deep);
}
@media (max-width: 768px) {
  .heritage-line {
    font-size: clamp(24px, 6vw, 32px);
    max-width: 22ch;
  }
}

/* ============================================================
   EDITORIAL UTILITIES — classes extraites des inline styles
   pour cohérence visuelle + maintenabilité (audit pré-prod).
   ============================================================ */

/* Bandeau de synchronisation (favorites) */
.favorites-sync-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(200,147,43,0.08), rgba(232,197,106,0.08));
  border: 1px solid var(--hairline);
  padding: 18px 22px;
  border-radius: var(--radius-md);
  margin-bottom: 32px;
}
.favorites-sync-banner[hidden] { display: none; }
.favorites-sync-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.favorites-sync-desc { color: var(--gray-warm); font-size: 14px; }

/* Breadcrumb éditorial (property, favorites, etc.) */
.breadcrumb {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-warm);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--gray-warm); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { margin: 0 8px; color: var(--gold); }
.breadcrumb .current { color: var(--ink); }

/* Hairline divider sous un h2/h3 (about, contact, faq) */
.hairline-short {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 0 0 28px;
}
.hairline-short.is-centered { margin: 0 auto 32px; }

/* En-tête de page intérieure avec padding top pour la nav fixe */
.page-with-nav { padding-top: 110px; }

/* En-tête éditorial d'une sous-section (contact info, FAQ catégorie) */
.editorial-h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  margin-bottom: 8px;
}
.editorial-h3.is-centered { text-align: center; }
.editorial-h3.is-small {
  font-size: 22px;
  margin-bottom: 14px;
}

/* Carte info "label + value" (visit summary, contact info) */
.info-line { margin-bottom: 28px; }
.info-line:last-child { margin-bottom: 0; }
.info-line-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.info-line-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.info-line-value.is-link {
  font-size: 20px;
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
}
.info-line-value.is-link:hover { color: var(--gold-deep); }

/* Empty state (favorites, similar) — visibility géré via attribut [hidden] */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-lg);
}
.empty-state-icon {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  color: var(--gold-deep);
  margin-bottom: 16px;
  line-height: 1;
}
.empty-state h3 { margin: 0 0 8px; }
.empty-state p { color: var(--gray-warm); margin: 0 0 24px; }

/* Page header sur pages intérieures (favorites, profile) */
.page-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.page-head-row .eyebrow { display: block; margin-bottom: 8px; }
.page-head-row h1 { margin: 0; }
.page-head-row p.lead { color: var(--gray-warm); margin: 8px 0 0; }
.page-head-meta {
  color: var(--gray-warm);
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* Layout contact (2 colonnes) */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Bloc texte centré (about story) */
.editorial-text-block {
  max-width: 800px;
  margin: 0 auto;
}
.editorial-text-block p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-warm);
  margin-bottom: 20px;
}
.editorial-text-block p.is-lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1.65;
  text-align: center;
  margin-bottom: 24px;
}
.editorial-text-block p strong { color: var(--ink); }

/* FAQ catégorie wrapper */
.faq-category {
  max-width: 800px;
  margin: 0 auto 64px;
}
.faq-category:last-of-type { margin-bottom: 0; }
.faq-cta {
  text-align: center;
  margin-top: 80px;
}
.faq-cta-line {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--gray-warm);
  margin-bottom: 24px;
}

/* Visit summary card (utilise paywall-card existant) */
.visit-summary-inner {
  margin: 20px 0;
  padding: 20px;
  background: var(--ivory);
  border-radius: var(--radius-md);
}

/* Visit blocks (slots / contact form spacing) */
.visit-block { margin-top: 32px; }
.visit-pick-hint {
  font-size: 13px;
  color: var(--gray-warm);
  margin-bottom: 16px;
}

/* Contact info block (texte secondaire 15px sous label gold) */
.contact-info-text {
  font-size: 15px;
  color: var(--gray-warm);
  line-height: 1.7;
}
.contact-info-text strong { color: var(--ink); }
.contact-offices strong { display: inline; }

/* Contact form section override (pas de max-width imposé) */
.contact-form-section {
  margin: 0;
  max-width: none;
}

/* Help text centré (form submit) */
.help-text.is-centered {
  text-align: center;
  margin-top: 14px;
}

/* ============================================================
   ICON SYSTEM — SVG monoline, stroke gold/ink, 1.5px
   Réutilisé dans les boutons UI (search toolbar, property CTAs, auth modal).
   ============================================================ */
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon.is-lg { width: 22px; height: 22px; vertical-align: -5px; }
.icon.is-xl { width: 32px; height: 32px; vertical-align: -7px; }

/* Boutons qui contiennent une icône SVG + un span de texte : gap horizontal */
.btn .icon,
.view-btn .icon,
.results-save-btn .icon,
.map-draw-btn .icon {
  margin-right: 8px;
}

/* Owner.html écran de confirmation après soumission */
.confirmation-mark { margin: 0 auto 24px; }
.confirmation-title { margin-bottom: 12px; }
.confirmation-ref-line {
  text-align: center;
  color: var(--gray-warm);
  margin-bottom: 32px;
}
.confirmation-ref {
  color: var(--gold-deep);
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  letter-spacing: 0.06em;
}
.confirmation-next-block {
  background: var(--ivory);
  padding: 24px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}
.confirmation-steps {
  padding-left: 20px;
  color: var(--gray-warm);
  line-height: 1.8;
  margin: 0;
}
.confirmation-cta { text-align: center; }

/* City-tile non interactive (team about) */
.city-tile.is-static {
  cursor: default;
}
.city-tile.is-static:hover {
  transform: none;
}

/* Spec type label dans property.html spec-item */
.spec-type-label {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 6px;
}