/* ========== DESIGN TOKENS ========== */
:root {
  --brown-900: #2a1f15;
  --brown-800: #3a2d20;
  --brown-700: #4a3a2c;
  --brown-600: #6b5544;
  --brown-300: #b8a99a;
  --cream-50: #faf7f1;
  --cream-100: #f1ede4;
  --cream-200: #e6dfd1;
  --cream-300: #d4cab8;
  /* Palette marron/beige neutre — pas de tonalités dorées */
  --accent: #6b5544;        /* marron mid (= brown-600) */
  --accent-dark: #4a3a2c;   /* marron foncé (= brown-700) */
  --accent-light: #d4cab8;  /* beige clair (= cream-300) */
  --green: #4a7c5e;
  --red: #c45a4a;
  --shadow-sm: 0 2px 8px rgba(42, 31, 21, 0.08);
  --shadow-md: 0 6px 24px rgba(42, 31, 21, 0.12);
  --shadow-lg: 0 12px 40px rgba(42, 31, 21, 0.16);
  --radius: 8px;
  --radius-lg: 16px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--cream-100);
  color: var(--brown-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; font-weight: 600; line-height: 1.2; color: var(--brown-900); }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -0.01em; }
h3 { font-size: 1.4rem; }
p { color: var(--brown-700); }

a { color: inherit; text-decoration: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ========== NAV ========== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cream-200);
  transition: var(--transition);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; max-width: 1280px; margin: 0 auto; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; color: var(--brown-900); }
.nav-logo-mark {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brown-800);
  flex-shrink: 0;
}
.nav-logo-mark img, .nav-logo-mark svg { width: 100%; height: 100%; display: block; object-fit: contain; }
.footer-brand .nav-logo-mark { color: var(--cream-50); }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  font-size: 0.92rem; font-weight: 500; color: var(--brown-700);
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--brown-900); }
.nav-cta {
  background: var(--brown-800); color: var(--cream-50) !important;
  padding: 10px 22px; border-radius: 999px;
  font-weight: 600 !important; font-size: 0.88rem !important;
  transition: var(--transition);
}
.nav-cta:hover { background: var(--brown-900); transform: translateY(-1px); }

.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.nav-burger span { width: 24px; height: 2px; background: var(--brown-900); transition: var(--transition); }

@media (max-width: 900px) {
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--cream-50); flex-direction: column; padding: 24px; gap: 18px; border-bottom: 1px solid var(--cream-200); box-shadow: var(--shadow-md); }
  .nav-links.open { display: flex; }
  .nav-burger { display: flex; }
}

/* ========== HERO (avec image de fond + animation Ken Burns) ========== */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 120px 24px 80px;
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  animation: kenBurns 22s ease-in-out infinite alternate;
}
.hero-bg::after {
  /* Voile sombre uniforme + renforcement dégradé en bas, pour faire ressortir les textes */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
@keyframes kenBurns {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
/* Indicateur de scroll en bas du hero */
.hero-scroll-hint {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 3;
  color: var(--cream-200); opacity: 0.7;
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  animation: scrollHintBounce 2.4s ease-in-out infinite;
}
.hero-scroll-hint::after {
  content: ''; width: 1px; height: 32px;
  background: linear-gradient(180deg, var(--cream-200), transparent);
}
@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.65; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}
/* Halo doré quand image de fond absente */
.hero:not(:has(.hero-bg img:not([src=""]))) {
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
}
.hero:not(:has(.hero-bg img:not([src=""]))) .hero-bg::after { display: none; }

/* Hero épuré style Sopra : Outfit, blanc pur, tout centré, une seule ligne */
.hero-inner { text-align: center; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

.hero h1 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.005em;
  color: #ffffff !important;
  margin-bottom: 36px;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.6),
    0 1px 4px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.hero h1 .accent {
  color: #ffffff !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
@media (max-width: 760px) {
  .hero h1 { white-space: normal; font-size: clamp(1.4rem, 5.5vw, 2rem) !important; }
}

.hero-tagline {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 300;
  color: #ffffff !important;
  opacity: 0.95;
  max-width: 620px;
  margin: 0 auto 44px;
  text-shadow:
    0 1px 14px rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero-tagline strong { color: #ffffff !important; font-weight: 500; }

.hero-cta-group { justify-content: center; }

.hero .btn-primary {
  background: #ffffff;
  color: var(--brown-900);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
  padding: 16px 36px;
  border-radius: 999px;
}
.hero .btn-primary:hover { background: var(--brown-900); color: #ffffff; transform: translateY(-1px); }

.hero .btn-secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
  padding: 16px 36px;
  border-radius: 999px;
  border-width: 1.5px;
}
.hero .btn-secondary:hover { background: #ffffff; color: var(--brown-900); border-color: #ffffff; }

/* Indicateur "Découvrir" en blanc, plus aucun doré */
.hero-scroll-hint { color: #ffffff; opacity: 0.7; font-family: 'Outfit', sans-serif; }
.hero-scroll-hint::after { background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent); }
.hero-inner { max-width: 1100px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: rgba(58, 45, 32, 0.06);
  border: 1px solid var(--cream-300);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 500; color: var(--brown-700);
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
.hero-badge-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(74, 124, 94, 0.15); }
/* Anciennes règles .hero h1 / .accent / .hero-tagline supprimées — voir bloc Hero épuré plus haut */
.hero-cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--brown-800); color: var(--cream-50);
  padding: 16px 32px; border-radius: 999px;
  font-weight: 600; font-size: 0.98rem;
  border: none; cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brown-900); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--brown-800);
  padding: 16px 32px; border-radius: 999px;
  font-weight: 600; font-size: 0.98rem;
  border: 1.5px solid var(--brown-800); cursor: pointer;
  transition: var(--transition);
}
.btn-secondary:hover { background: var(--brown-800); color: var(--cream-50); }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 720px; margin: 80px auto 0;
  padding: 32px; background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-200);
  backdrop-filter: blur(8px);
}
.hero-stat-num { font-family: 'Outfit', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--brown-900); }
.hero-stat-label { font-size: 0.85rem; color: var(--brown-600); font-weight: 500; margin-top: 4px; letter-spacing: 0.02em; }
@media (max-width: 640px) {
  .hero-stats { grid-template-columns: 1fr; gap: 16px; }
}

/* ========== SECTIONS ========== */
section { padding: 100px 0; scroll-margin-top: 80px; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-eyebrow {
  display: inline-block;
  font-size: 0.82rem; font-weight: 600;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}
.section-header h2 { margin-bottom: 16px; }
.section-header p { font-size: 1.08rem; color: var(--brown-600); }

/* ========== ABOUT ========== */
.about { background: var(--cream-50); }
.about-grid {
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 60px;
  align-items: start;
}
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }

.about-photo-wrap {
  position: relative; aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brown-800);
  box-shadow: var(--shadow-lg);
}
.about-photo {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.about-photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brown-800), var(--brown-700));
  color: var(--cream-200);
  font-family: 'Outfit', sans-serif;
  font-size: 5rem;
  letter-spacing: 0.05em;
}
.about-photo-badge {
  position: absolute; bottom: 24px; left: 24px;
  background: rgba(250, 247, 241, 0.95);
  padding: 12px 18px; border-radius: 8px;
  backdrop-filter: blur(8px);
  font-size: 0.82rem; font-weight: 600;
  color: var(--brown-900);
  display: flex; align-items: center; gap: 8px;
}
.about-photo-badge::before { content: ''; width: 8px; height: 8px; background: var(--green); border-radius: 50%; }

.about-content h2 { margin-bottom: 24px; }
.about-content p { font-size: 1.02rem; margin-bottom: 18px; line-height: 1.75; color: var(--brown-700); }
.about-content p strong { color: var(--brown-900); font-weight: 600; }

.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 760px; margin: 56px auto 0; }
@media (max-width: 600px) { .about-stats { grid-template-columns: 1fr; } }
.about-stat {
  padding: 20px;
  background: var(--cream-100);
  border-radius: var(--radius);
  border: 1px solid var(--cream-200);
}
.about-stat-num { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--brown-900); }
.about-stat-label { font-size: 0.78rem; color: var(--brown-600); margin-top: 4px; }

.about-services { margin-top: 56px; }
.about-services-title { font-size: 0.82rem; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 20px; text-align: center; }
.about-services-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; }
.about-services-list li {
  padding: 16px 18px; background: var(--cream-100);
  border-radius: var(--radius); font-size: 0.92rem; color: var(--brown-800);
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--cream-200);
  transition: var(--transition);
}
.about-services-list li:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.about-services-list li::before {
  content: '✓'; color: var(--green); font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
@media (max-width: 900px) { .about-services-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .about-services-list { grid-template-columns: 1fr; } }

.values-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 60px;
}
.value-card {
  padding: 28px 24px;
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.value-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-icon {
  width: 44px; height: 44px;
  background: var(--brown-800); color: var(--cream-50);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.value-icon svg { width: 22px; height: 22px; }
.value-card h4 { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--brown-900); }
.value-card p { font-size: 0.9rem; line-height: 1.5; color: var(--brown-600); }
@media (max-width: 880px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .values-grid { grid-template-columns: 1fr; } }

/* ========== SIMULATOR ========== */
.simulator { background: var(--cream-100); }

/* Mode selector cards */
.sim-modes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 32px;
}
.sim-modes.sim-modes-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 880px) { .sim-modes, .sim-modes.sim-modes-2 { grid-template-columns: 1fr; } }

.sim-mode-card {
  text-align: left;
  padding: 24px 22px;
  background: var(--cream-50);
  border: 2px solid var(--cream-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  display: flex; flex-direction: column; gap: 10px;
}
.sim-mode-card:hover { border-color: var(--brown-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sim-mode-card.active {
  border-color: var(--brown-800);
  background: var(--brown-800);
  color: var(--cream-50);
  box-shadow: var(--shadow-md);
}
.sim-mode-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brown-800);
}
.sim-mode-card.active .sim-mode-icon { color: var(--accent); }
.sim-mode-icon svg { width: 26px; height: 26px; }
.sim-mode-title { font-weight: 700; font-size: 1rem; color: var(--brown-900); }
.sim-mode-card.active .sim-mode-title { color: var(--cream-50); }
.sim-mode-desc { font-size: 0.85rem; color: var(--brown-600); line-height: 1.45; }
.sim-mode-card.active .sim-mode-desc { color: var(--cream-200); opacity: 0.85; }

/* Scenario-specific blocks */
.sim-scenario-block {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--cream-300);
}
.sim-scenario-divider {
  font-size: 0.78rem; font-weight: 700;
  color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.sim-hint {
  margin-top: 10px;
  font-size: 0.82rem; color: var(--brown-600);
  font-style: italic;
  line-height: 1.5;
}

/* === Progressive disclosure : groupes étapes === */
.sim-step {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px dashed var(--cream-300);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.sim-step:first-child { border-top: none; padding-top: 0; }
.sim-step.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sim-step-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brown-800);
  color: var(--accent);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  margin-top: 4px;
}
.sim-step-content { flex: 1; min-width: 0; }
.sim-step-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  color: var(--brown-900);
  margin-bottom: 16px;
}

/* === Pills (boutons radio premium) === */
.sim-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.sim-pill {
  background: var(--cream-50);
  border: 1.5px solid var(--cream-300);
  color: var(--brown-700);
  padding: 9px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.sim-pill:hover { border-color: var(--brown-300); background: var(--cream-100); }
.sim-pill.active {
  background: var(--brown-800);
  border-color: var(--brown-800);
  color: var(--cream-50);
}
.sim-pill-custom {
  display: block;
  margin-top: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--cream-300);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--cream-50);
  color: var(--brown-900);
}
.sim-pill-custom:focus { outline: none; border-color: var(--brown-800); }

/* === Hint loyer avec fourchette indicative === */
.sim-rent-hint {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(154, 123, 79, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.82rem;
  color: var(--brown-700);
  line-height: 1.55;
}
.sim-rent-hint strong { color: var(--brown-900); display: block; margin-bottom: 4px; font-size: 0.95rem; }
.sim-rent-hint a { color: var(--accent-dark); font-weight: 600; }

/* === CTA inline pour "Je ne sais pas" === */
.sim-cta-inline {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(74, 124, 94, 0.08);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.85rem;
  color: var(--brown-700);
  line-height: 1.55;
}
.sim-cta-inline a {
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
}

/* Amortization chart */
.sim-amort-header {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.sim-amort-chart {
  margin-top: 20px;
  background: rgba(250, 247, 241, 0.05);
  border: 1px solid rgba(250, 247, 241, 0.1);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
}
.sim-amort-chart svg { width: 100%; height: auto; display: block; }
.sim-amort-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 12px;
  font-size: 0.78rem; color: var(--cream-200); opacity: 0.85;
  position: relative;
}
.sim-amort-legend > span { display: flex; align-items: center; gap: 6px; }
.sim-amort-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.simulator-wrap {
  background: var(--cream-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-200);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.simulator-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 1000px) { .simulator-grid { grid-template-columns: 1fr; } }

.sim-form { padding: 40px; border-right: 1px solid var(--cream-200); }
@media (max-width: 1000px) { .sim-form { border-right: none; border-bottom: 1px solid var(--cream-200); } }

.sim-form h3 {
  font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 700;
  color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 24px;
}
.sim-row { margin-bottom: 22px; }
.sim-row-double { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sim-label {
  display: block; font-size: 0.85rem; font-weight: 600;
  color: var(--brown-800); margin-bottom: 8px;
}
.sim-label-hint { font-weight: 400; color: var(--brown-600); font-size: 0.78rem; margin-left: 4px; }
.sim-input, .sim-select {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--cream-300);
  border-radius: var(--radius);
  background: var(--cream-50);
  font-family: inherit; font-size: 0.95rem; color: var(--brown-900);
  transition: var(--transition);
}
.sim-input:focus, .sim-select:focus {
  outline: none; border-color: var(--brown-800);
  box-shadow: 0 0 0 3px rgba(58, 45, 32, 0.1);
}
.sim-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a3a2c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

.sim-toggle {
  display: flex; gap: 0; padding: 4px;
  background: var(--cream-200); border-radius: var(--radius);
}
.sim-toggle button {
  flex: 1; padding: 10px 12px;
  border: none; background: transparent;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--brown-700); cursor: pointer;
  border-radius: 6px;
  transition: var(--transition);
}
.sim-toggle button.active {
  background: var(--cream-50); color: var(--brown-900);
  box-shadow: var(--shadow-sm);
}

.sim-market-note {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(154, 123, 79, 0.12);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--brown-800);
  line-height: 1.5;
}
.sim-market-note strong { color: var(--brown-900); }

.sim-results {
  padding: 40px;
  background: var(--brown-800);
  color: var(--cream-100);
  position: relative;
}
.sim-results::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(154, 123, 79, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.sim-results h3 {
  font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 24px; position: relative;
}
.sim-result-block { margin-bottom: 28px; position: relative; }
.sim-result-headline {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 20px;
  background: rgba(250, 247, 241, 0.05);
  border: 1px solid rgba(250, 247, 241, 0.1);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.sim-result-big {
  font-family: 'Outfit', sans-serif;
  font-size: 2.2rem; font-weight: 700; color: var(--cream-50);
  line-height: 1;
}
.sim-result-big-label {
  font-size: 0.78rem; color: var(--cream-200); opacity: 0.8;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.sim-result-big.green { color: #8ed5a8; }

.sim-result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(250, 247, 241, 0.08);
  font-size: 0.92rem;
}
.sim-result-row:last-child { border-bottom: none; }
.sim-result-label { color: var(--cream-200); opacity: 0.85; }
.sim-result-value { font-weight: 600; color: var(--cream-50); }
.sim-result-value.accent { color: var(--accent); }

.sim-results-tabs {
  display: flex; gap: 8px;
  margin-bottom: 16px; padding-bottom: 0;
  border-bottom: 1px solid rgba(250, 247, 241, 0.1);
  position: relative;
}
.sim-results-tab {
  background: transparent; border: none;
  color: var(--cream-200); opacity: 0.7;
  padding: 10px 16px; font-family: inherit; font-size: 0.85rem;
  font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.sim-results-tab.active { color: var(--accent); opacity: 1; border-bottom-color: var(--accent); }

.sim-disclaimer {
  font-size: 0.75rem; color: var(--cream-200); opacity: 0.6;
  margin-top: 24px; line-height: 1.5;
  padding-top: 20px; border-top: 1px solid rgba(250, 247, 241, 0.08);
  position: relative;
}

.sim-cta-result {
  margin-top: 24px;
  display: flex; gap: 12px; flex-wrap: wrap;
  position: relative;
}
.sim-cta-result button {
  flex: 1; min-width: 140px;
  padding: 12px 16px;
  background: var(--accent); color: var(--brown-900);
  border: none; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 0.88rem;
  cursor: pointer; transition: var(--transition);
}
.sim-cta-result button:hover { background: var(--accent-dark); color: var(--cream-50); }
.sim-cta-result button.outline { background: transparent; color: var(--cream-50); border: 1.5px solid rgba(250, 247, 241, 0.3); }
.sim-cta-result button.outline:hover { background: rgba(250, 247, 241, 0.1); }

/* ========== GLOSSARY ========== */
.glossary { background: var(--cream-50); }
.glossary-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 40px;
}
.glossary-tab {
  padding: 10px 22px;
  background: var(--cream-100);
  border: 1.5px solid var(--cream-200);
  border-radius: 999px;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--brown-700); cursor: pointer;
  transition: var(--transition);
}
.glossary-tab.active { background: var(--brown-800); color: var(--cream-50); border-color: var(--brown-800); }
.glossary-tab:hover:not(.active) { border-color: var(--brown-300); }

.glossary-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (max-width: 760px) { .glossary-grid { grid-template-columns: 1fr; } }

.glossary-item {
  padding: 22px 24px;
  background: var(--cream-100);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-200);
  transition: var(--transition);
}
.glossary-item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.glossary-term {
  font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 600;
  color: var(--brown-900); margin-bottom: 4px;
}
.glossary-acronym {
  font-size: 0.78rem; color: var(--accent-dark);
  font-weight: 600; letter-spacing: 0.05em;
  margin-bottom: 10px; display: block;
}
.glossary-def { font-size: 0.93rem; color: var(--brown-700); line-height: 1.6; }

/* ========== INSTITUTIONS ========== */
.institutions { background: var(--cream-100); }
.institutions-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 900px) { .institutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .institutions-grid { grid-template-columns: 1fr; } }

.inst-card {
  padding: 28px 24px;
  background: var(--cream-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-200);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.inst-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.inst-acronym {
  display: inline-block;
  font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 700;
  color: var(--brown-900);
  padding: 6px 14px;
  background: var(--cream-200);
  border-radius: 6px;
  margin-bottom: 16px;
}
.inst-name { font-size: 0.95rem; font-weight: 600; color: var(--brown-900); margin-bottom: 10px; }
.inst-desc { font-size: 0.9rem; color: var(--brown-700); line-height: 1.6; margin-bottom: 12px; }
.inst-role {
  font-size: 0.8rem; color: var(--accent-dark); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ========== PRIVATE CLUB (WhatsApp) ========== */
.club { background: var(--cream-50); position: relative; overflow: hidden; }
.club-card {
  max-width: 1000px; margin: 0 auto;
  background: linear-gradient(135deg, var(--brown-800) 0%, var(--brown-900) 100%);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  color: var(--cream-50);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.club-card::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(154, 123, 79, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.club-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; position: relative; }
@media (max-width: 880px) { .club-grid { grid-template-columns: 1fr; gap: 32px; } .club-card { padding: 40px 28px; } }

.club-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.club-card h2 { color: var(--cream-50); margin-bottom: 16px; }
.club-card p { color: var(--cream-200); opacity: 0.9; font-size: 1rem; line-height: 1.65; margin-bottom: 24px; }
.club-benefits { list-style: none; margin: 24px 0; }
.club-benefits li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  font-size: 0.95rem; color: var(--cream-100);
}
.club-benefits li::before {
  content: '✓'; color: var(--accent); font-weight: 700; font-size: 1.1rem;
  flex-shrink: 0;
}
.club-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: white;
  padding: 16px 28px; border-radius: 999px;
  font-weight: 700; font-size: 1rem;
  transition: var(--transition);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}
.club-cta:hover { transform: translateY(-2px); background: #1fb957; box-shadow: 0 8px 28px rgba(37, 211, 102, 0.4); }

.club-mockup {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 24px;
  backdrop-filter: blur(10px);
}
.club-mockup-header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
}
.club-mockup-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--brown-900);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: 'Outfit', sans-serif;
  font-size: 1.2rem; overflow: hidden;
}
.club-mockup-avatar img { width: 100%; height: 100%; object-fit: cover; }
.club-mockup-meta { flex: 1; }
.club-mockup-name { font-weight: 700; color: var(--cream-50); font-size: 0.95rem; }
.club-mockup-status { font-size: 0.78rem; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.club-mockup-status::before { content: ''; width: 6px; height: 6px; background: #25D366; border-radius: 50%; }
.club-msg {
  background: rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: 12px 12px 12px 4px;
  margin-bottom: 10px;
  font-size: 0.88rem;
  color: var(--cream-100);
  line-height: 1.5;
  max-width: 90%;
}
.club-msg-time { font-size: 0.72rem; color: var(--cream-200); opacity: 0.6; margin-top: 6px; }

/* ========== CLUB — 3 piliers refonte ========== */
.cl-intro-wrap { background: var(--cream-50); padding: 70px 0 50px; }
.cl-intro { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.cl-intro-eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 14px;
}
.cl-intro h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--brown-900); letter-spacing: -0.015em;
  margin-bottom: 18px; line-height: 1.18;
}
.cl-intro p {
  font-size: 1.05rem; line-height: 1.7;
  color: var(--brown-700);
}

.cl-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cl-pillar {
  background: #fff; border: 1px solid var(--cream-200);
  border-radius: 22px;
  padding: 36px 32px 32px;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.cl-pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(42,31,21,0.10);
  border-color: var(--accent-light);
}
.cl-pillar-num {
  position: absolute; top: 24px; right: 28px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--cream-200);
}
.cl-pillar-ico {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(155deg, var(--brown-900), #3a2c1e);
  color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.cl-pillar-ico svg { width: 28px; height: 28px; }
.cl-pillar-tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-dark);
  margin-bottom: 10px;
}
.cl-pillar h3 {
  font-size: 1.35rem; color: var(--brown-900);
  margin-bottom: 14px; line-height: 1.2;
  letter-spacing: -0.01em;
}
.cl-pillar p {
  font-size: 0.95rem; line-height: 1.65;
  color: var(--brown-700); margin-bottom: 18px;
}
.cl-pillar-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cream-200); padding-top: 16px; }
.cl-pillar-list li {
  position: relative; padding-left: 22px; padding-top: 8px; padding-bottom: 8px;
  font-size: 0.88rem; line-height: 1.5; color: var(--brown-700);
}
.cl-pillar-list li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 12px; height: 2px; background: var(--accent);
}
@media (max-width: 900px) {
  .cl-pillars { grid-template-columns: 1fr; gap: 18px; }
  .cl-intro-wrap { padding: 50px 0 30px; }
}

/* ========== CLUB — Ce que ça change ========== */
.cl-gains { background: var(--cream-100); padding: 70px 0 90px; }
.cl-gains-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.cl-gain-card {
  background: #fff; border: 1px solid var(--cream-200);
  border-radius: 18px; padding: 28px 24px; text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cl-gain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cl-gain-num {
  font-size: 2.6rem; font-weight: 700;
  color: var(--accent-dark); letter-spacing: -0.02em;
  line-height: 1; margin-bottom: 14px;
}
.cl-gain-ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(155deg, var(--brown-900), #3a2c1e);
  color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.cl-gain-ico svg { width: 24px; height: 24px; }
.cl-gain-title {
  font-size: 1rem; font-weight: 700;
  color: var(--brown-900); letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.cl-gain-lbl {
  font-size: 0.88rem; line-height: 1.55;
  color: var(--brown-700);
}
@media (max-width: 900px) {
  .cl-gains-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cl-gains { padding: 50px 0 70px; }
}
@media (max-width: 520px) {
  .cl-gains-grid { grid-template-columns: 1fr; }
}

/* ========== AMBASSADEUR ========== */
.ambassadeur { background: var(--cream-100); }
.amba-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  max-width: 1100px; margin: 0 auto;
  align-items: center;
}
@media (max-width: 900px) { .amba-grid { grid-template-columns: 1fr; gap: 32px; } }

.amba-content h3 {
  font-family: 'Outfit', sans-serif; font-size: 1.6rem;
  color: var(--brown-900); margin-bottom: 16px;
}
.amba-content p { font-size: 1rem; line-height: 1.7; color: var(--brown-700); margin-bottom: 16px; }
.amba-steps { margin: 28px 0; }
.amba-step { display: flex; gap: 16px; margin-bottom: 20px; }
.amba-step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--brown-800); color: var(--cream-50);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: 'Outfit', sans-serif;
}
.amba-step-content h4 { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; color: var(--brown-900); margin-bottom: 4px; }
.amba-step-content p { font-size: 0.92rem; color: var(--brown-700); margin-bottom: 0; line-height: 1.5; }

.amba-highlight {
  background: linear-gradient(135deg, var(--brown-800) 0%, var(--brown-900) 100%);
  color: var(--cream-50);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.amba-highlight::before {
  content: ''; position: absolute; top: -80px; left: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(154, 123, 79, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.amba-percent {
  font-family: 'Outfit', sans-serif;
  font-size: 5rem; font-weight: 700;
  color: var(--accent);
  line-height: 1; margin-bottom: 8px;
  position: relative;
}
.amba-percent-label { font-size: 0.85rem; color: var(--cream-200); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 24px; position: relative; }
.amba-example {
  background: rgba(255, 255, 255, 0.08);
  padding: 20px;
  border-radius: var(--radius);
  margin: 24px 0;
  position: relative;
}
.amba-example-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 0.92rem;
  color: var(--cream-100);
}
.amba-example-row.highlight { color: var(--accent); font-weight: 700; border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 8px; padding-top: 12px; font-size: 1.05rem; }
.amba-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--brown-900);
  padding: 14px 28px; border-radius: 999px;
  font-weight: 700; font-size: 0.98rem;
  cursor: pointer; transition: var(--transition);
  border: none; font-family: inherit;
  position: relative;
}
.amba-cta:hover { background: var(--cream-50); transform: translateY(-2px); }
.amba-ctas { display: flex; flex-direction: column; gap: 10px; }
.amba-cta.secondary {
  background: transparent; color: var(--cream-50);
  border: 1px solid rgba(255,255,255,0.35);
}
.amba-cta.secondary:hover { background: rgba(255,255,255,0.08); border-color: var(--cream-50); }
.amba-cta-sub {
  font-size: 0.78rem; color: var(--cream-200); opacity: 0.85;
  text-align: center; margin-top: 12px; line-height: 1.5;
}
.amba-mode {
  display: flex; gap: 6px; background: var(--cream-100);
  padding: 6px; border-radius: 999px; margin-bottom: 22px;
}
.amba-mode-btn {
  flex: 1; padding: 11px 14px; border: none; background: none;
  border-radius: 999px; font-family: inherit; font-size: 0.86rem;
  font-weight: 600; color: var(--brown-600); cursor: pointer;
  transition: var(--transition);
}
.amba-mode-btn:hover { color: var(--brown-900); }
.amba-mode-btn.active { background: var(--brown-900); color: var(--cream-50); }

/* ========== CONTACT FORM (multi-step) ========== */
.contact { background: linear-gradient(180deg, var(--brown-800) 0%, var(--brown-900) 100%); color: var(--cream-50); position: relative; overflow: hidden; }
.contact::before {
  content: ''; position: absolute; top: -100px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(154, 123, 79, 0.12) 0%, transparent 70%);
}
.contact .section-header h2 { color: var(--cream-50); }
.contact .section-eyebrow { color: var(--cream-200); opacity: 0.85; }
.contact .section-header p { color: var(--cream-200); opacity: 0.9; }

.form-wrap {
  max-width: 720px; margin: 0 auto;
  background: var(--cream-50);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: var(--brown-900);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.form-progress {
  display: flex; gap: 8px;
  margin-bottom: 32px;
}
.form-progress-bar {
  flex: 1; height: 4px;
  background: var(--cream-200);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.form-progress-bar.active::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  animation: fill 0.4s ease forwards;
}
.form-progress-bar.complete { background: var(--accent); }
@keyframes fill { from { width: 0; } to { width: 100%; } }

.form-step { display: none; animation: fadeIn 0.4s ease; }
.form-step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.form-step h3 {
  font-family: 'Outfit', sans-serif; font-size: 1.6rem;
  margin-bottom: 8px;
}
.form-step-desc { color: var(--brown-600); margin-bottom: 28px; font-size: 0.95rem; }

.form-row { margin-bottom: 18px; }
.form-row-double { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .form-row-double { grid-template-columns: 1fr; } }

.form-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--brown-800); margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--cream-300);
  border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem; color: var(--brown-900);
  background: var(--cream-50);
  transition: var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--brown-800);
  box-shadow: 0 0 0 3px rgba(58, 45, 32, 0.1);
}
.form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a3a2c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.form-textarea { min-height: 100px; resize: vertical; font-family: inherit; }

.form-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 540px) { .form-radio-group { grid-template-columns: 1fr; } }
.form-radio {
  position: relative;
}
.form-radio input { position: absolute; opacity: 0; pointer-events: none; }
.form-radio label {
  display: block; padding: 14px 16px;
  border: 1.5px solid var(--cream-300);
  border-radius: var(--radius);
  cursor: pointer; transition: var(--transition);
  font-size: 0.92rem; font-weight: 500;
  color: var(--brown-700);
  background: var(--cream-50);
}
.form-radio label:hover { border-color: var(--brown-300); }
.form-radio input:checked + label {
  border-color: var(--brown-800);
  background: var(--brown-800);
  color: var(--cream-50);
  font-weight: 600;
}

.form-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px; gap: 16px;
}
.btn-back {
  background: transparent; color: var(--brown-700);
  padding: 12px 24px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 0.92rem;
  transition: var(--transition);
}
.btn-back:hover { color: var(--brown-900); }
.btn-next, .btn-submit {
  background: var(--brown-800); color: var(--cream-50);
  padding: 14px 32px; border: none; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: var(--transition);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-next:hover, .btn-submit:hover { background: var(--brown-900); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-submit { background: var(--accent-dark); }
.btn-submit:hover { background: var(--accent); color: var(--brown-900); }

.form-recap { background: var(--cream-100); padding: 20px; border-radius: var(--radius); margin-bottom: 20px; }
.form-recap-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.9rem; border-bottom: 1px solid var(--cream-200); }
.form-recap-row:last-child { border-bottom: none; }
.form-recap-label { color: var(--brown-600); }
.form-recap-value { color: var(--brown-900); font-weight: 600; text-align: right; }

.form-success { display: none; text-align: center; padding: 40px 20px; }
.form-success.show { display: block; }
.form-success-icon {
  width: 64px; height: 64px;
  background: var(--green); color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 24px;
}
.form-success h3 { color: var(--brown-900); margin-bottom: 12px; }
.form-success p { color: var(--brown-600); margin-bottom: 24px; }

/* ========== PROMOTEURS PARTENAIRES (bannière défilante) ========== */
.partners-banner {
  margin-top: 70px;
  text-align: center;
  position: relative;
  padding-top: 40px;
  border-top: 1px solid rgba(250, 247, 241, 0.12);
}
.partners-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cream-200);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 32px;
}
.partners-marquee {
  overflow: hidden;
  width: 100%;
  /* fondu progressif sur les bords gauche/droit */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.partners-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: partnersScroll 34s linear infinite;
}
.partners-track:hover { animation-play-state: paused; }
.partners-track img {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  flex-shrink: 0;
  /* transforme n'importe quel logo (couleur, noir, etc.) en blanc cassé */
  filter: brightness(0) invert(0.96);
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.partners-track img:hover {
  opacity: 1;
  transform: scale(1.08);
}
@keyframes partnersScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .partners-track { gap: 56px; }
  .partners-track img { height: 44px; max-width: 150px; }
  .partners-banner { margin-top: 50px; padding-top: 30px; }
}

/* ========== FOOTER ========== */
footer { background: var(--brown-900); color: var(--cream-200); padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-brand { font-family: 'Outfit', sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: 0.02em; color: var(--cream-50); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.footer-tagline { font-size: 0.9rem; color: var(--cream-200); opacity: 0.7; margin-bottom: 20px; max-width: 400px; line-height: 1.6; }
.footer-col h5 { font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--cream-50); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 0.92rem; color: var(--cream-200); opacity: 0.7; transition: var(--transition); }
.footer-col a:hover { opacity: 1; color: var(--accent); }
.footer-bottom { padding-top: 24px; border-top: 1px solid rgba(250, 247, 241, 0.1); font-size: 0.82rem; color: var(--cream-200); opacity: 0.6; text-align: center; }

/* ========== MANIFESTE DISCRET (intégré au texte À propos) ========== */
.about-manifesto {
  margin-top: 24px;
  padding: 18px 22px 18px 24px;
  border-left: 2px solid var(--accent);
  font-family: 'Outfit', sans-serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--brown-800);
  line-height: 1.65;
  background: rgba(154, 123, 79, 0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ========== HAMBURGER MENU + DRAWER ========== */
.menu-toggle {
  background: transparent; border: 1.5px solid var(--cream-300);
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer;
  transition: var(--transition);
  margin-left: 12px;
}
.menu-toggle:hover { border-color: var(--brown-800); background: var(--cream-100); }
.menu-toggle span {
  width: 18px; height: 2px; background: var(--brown-900);
  transition: var(--transition);
}

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(42, 31, 21, 0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 100vw);
  background: var(--cream-50);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -10px 0 40px rgba(42, 31, 21, 0.15);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  padding: 24px;
  border-bottom: 1px solid var(--cream-200);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-title { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--brown-900); }
.drawer-close {
  background: transparent; border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brown-700); font-size: 1.4rem;
  transition: var(--transition);
}
.drawer-close:hover { background: var(--cream-200); color: var(--brown-900); }

.drawer-body { padding: 16px; overflow-y: auto; flex: 1; }
.drawer-item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1.5px solid var(--cream-200);
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  background: var(--cream-50);
  width: 100%;
  font-family: inherit;
}
.drawer-item:hover { border-color: var(--accent); background: var(--cream-100); transform: translateX(-4px); }
.drawer-item-icon {
  width: 44px; height: 44px;
  background: var(--brown-800); color: var(--cream-50);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.drawer-item-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.drawer-item-text { flex: 1; }
.drawer-item-title { font-weight: 700; color: var(--brown-900); font-size: 0.98rem; margin-bottom: 2px; }
.drawer-item-desc { font-size: 0.82rem; color: var(--brown-600); }
.drawer-item-arrow { color: var(--brown-300); font-size: 1.2rem; }
.drawer-item:hover .drawer-item-arrow { color: var(--accent-dark); }

/* ========== MODAL ========== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(42, 31, 21, 0.7);
  backdrop-filter: blur(8px);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--cream-50);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.modal-overlay.open .modal { transform: scale(1); }

.modal-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--cream-200);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-title { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--brown-900); }
.modal-body { padding: 32px; overflow-y: auto; flex: 1; }

/* ========== EXCHANGE RATES ========== */
.fx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 540px) { .fx-grid { grid-template-columns: 1fr; } }
.fx-card {
  padding: 24px;
  background: var(--cream-100);
  border-radius: var(--radius);
  border: 1px solid var(--cream-200);
}
.fx-pair { font-size: 0.82rem; color: var(--brown-600); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 8px; text-transform: uppercase; }
.fx-rate { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--brown-900); line-height: 1; }
.fx-label { font-size: 0.82rem; color: var(--brown-600); margin-top: 4px; }
.fx-update { text-align: center; font-size: 0.82rem; color: var(--brown-600); margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cream-200); }
.fx-update-time { font-weight: 600; color: var(--brown-900); }

/* ========== TRANSACTIONS DLD ========== */
.tx-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--cream-200); }
.tx-tab {
  background: transparent; border: none;
  padding: 12px 20px;
  font-family: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--brown-600); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.tx-tab.active { color: var(--brown-900); border-bottom-color: var(--accent); }
.tx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 600px) { .tx-stats { grid-template-columns: 1fr; } }
.tx-stat {
  padding: 20px;
  background: var(--cream-100);
  border-radius: var(--radius);
  border: 1px solid var(--cream-200);
}
.tx-stat-label { font-size: 0.78rem; color: var(--brown-600); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; font-weight: 600; }
.tx-stat-value { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--brown-900); }
.tx-stat-trend { font-size: 0.85rem; margin-top: 6px; }
.tx-stat-trend.up { color: var(--green); }
.tx-stat-trend.down { color: var(--red); }
.tx-source { font-size: 0.78rem; color: var(--brown-600); text-align: right; padding-top: 12px; border-top: 1px solid var(--cream-200); }
.tx-source a { color: var(--accent-dark); text-decoration: underline; }

/* ========== DUBAI 2040 ========== */
.d2040-hero {
  background: linear-gradient(135deg, var(--brown-800), var(--brown-900));
  color: var(--cream-50);
  padding: 32px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  text-align: center;
}
.d2040-hero h3 { color: var(--cream-50); font-size: 1.8rem; margin-bottom: 12px; }
.d2040-hero p { color: var(--cream-200); opacity: 0.9; }
.d2040-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 600px) { .d2040-pillars { grid-template-columns: 1fr; } }
.d2040-pillar {
  padding: 20px;
  background: var(--cream-100);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.d2040-pillar h4 { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; color: var(--brown-900); margin-bottom: 6px; }
.d2040-pillar p { font-size: 0.9rem; color: var(--brown-700); line-height: 1.55; }

/* ========== INTERACTIVE MAP ========== */
.map-section { background: var(--cream-50); }
#dubaiMap {
  height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--cream-200);
  box-shadow: var(--shadow-md);
  z-index: 1;
}
.map-legend { display: flex; gap: 16px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.map-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--brown-700); }
.map-legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.map-legend-dot.premium { background: #c45a4a; }
.map-legend-dot.family { background: #4a7c5e; }
.map-legend-dot.luxe { background: #9a7b4f; }

/* ========== LEAFLET LAYER CONTROL — look DXBIZ ========== */
.leaflet-control-layers {
  background: var(--cream-50) !important;
  border: 1px solid var(--brown-300, #d8c9b4) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(58,45,32,0.14), 0 2px 6px rgba(58,45,32,0.08) !important;
  padding: 4px !important;
  font-family: 'Outfit', sans-serif !important;
  backdrop-filter: blur(6px);
}
.leaflet-control-layers-expanded {
  padding: 14px 16px 14px 14px !important;
  min-width: 200px;
}
.leaflet-control-layers-expanded::before {
  content: "Couches de la carte";
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown-600, #7a5d3f);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--cream-200, #ece2d0);
}
.leaflet-control-layers-list { margin: 0 !important; }
.leaflet-control-layers-overlays label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 2px -6px !important;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--brown-800, #3a2d20);
  cursor: pointer;
  transition: background .18s ease;
}
.leaflet-control-layers-overlays label:hover {
  background: var(--cream-100, #f6efe1);
}
.leaflet-control-layers-overlays label > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.leaflet-control-layers-selector {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid var(--brown-400, #a3855e) !important;
  border-radius: 5px !important;
  background: #fff !important;
  cursor: pointer;
  position: relative;
  flex: 0 0 18px;
  margin: 0 !important;
  transition: all .15s ease;
}
.leaflet-control-layers-selector:hover {
  border-color: var(--brown-700, #5a4530) !important;
}
.leaflet-control-layers-selector:checked {
  background: var(--brown-800, #3a2d20) !important;
  border-color: var(--brown-800, #3a2d20) !important;
}
.leaflet-control-layers-selector:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%233a2d20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 22 8.5 12 15 2 8.5 12 2'/><polyline points='2 15.5 12 22 22 15.5'/></svg>") !important;
  background-size: 22px 22px !important;
  background-position: center !important;
}

.quartier-modal-content { padding: 0; }
.quartier-hero {
  background: linear-gradient(135deg, var(--brown-800), var(--brown-900));
  color: var(--cream-50);
  padding: 32px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.quartier-hero h3 { color: var(--cream-50); font-size: 2rem; font-family: 'Outfit', sans-serif; margin-bottom: 6px; }
.quartier-hero-meta { font-size: 0.9rem; color: var(--cream-200); opacity: 0.9; }
.quartier-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 24px 32px; background: var(--cream-100);
}
@media (max-width: 600px) { .quartier-stats { grid-template-columns: 1fr 1fr; } }
.quartier-stat-label { font-size: 0.74rem; color: var(--brown-600); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.quartier-stat-value { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--brown-900); }
.quartier-body { padding: 24px 32px 32px; }
.quartier-body h4 { font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-dark); margin-bottom: 10px; margin-top: 22px; }
.quartier-body h4:first-child { margin-top: 0; }
.quartier-body p { color: var(--brown-700); font-size: 0.95rem; line-height: 1.65; }
.quartier-mix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.quartier-mix-item { text-align: center; padding: 14px; background: var(--cream-100); border-radius: var(--radius); }
.quartier-mix-pct { font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--brown-900); }
.quartier-mix-label { font-size: 0.78rem; color: var(--brown-600); margin-top: 2px; }

/* ========== TIMELINE ========== */
.timeline-wrap { max-width: 880px; margin: 0 auto; position: relative; }
.timeline-wrap::before {
  content: ''; position: absolute;
  left: 28px; top: 28px; bottom: 28px;
  width: 2px; background: var(--cream-300);
  z-index: 0;
}
.timeline-step {
  position: relative;
  display: flex; gap: 24px;
  padding: 16px 0 32px 0;
  z-index: 1;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step-num {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: var(--brown-800); color: var(--cream-50);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: 'Outfit', sans-serif; font-size: 1.5rem;
  box-shadow: 0 0 0 6px var(--cream-50);
  position: relative; z-index: 1;
}
.timeline-step-content {
  flex: 1;
  background: var(--cream-100);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  transition: var(--transition);
}
.timeline-step-content:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.timeline-step-duration {
  display: inline-block;
  font-size: 0.78rem; font-weight: 600;
  color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.timeline-step-content h3 {
  font-family: 'Outfit', sans-serif; font-size: 1.25rem;
  margin-bottom: 8px; color: var(--brown-900);
}
.timeline-step-content p { font-size: 0.94rem; line-height: 1.65; color: var(--brown-700); }

/* ========== FAQ ========== */
.faq-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.faq-tab {
  padding: 10px 22px;
  background: var(--cream-50);
  border: 1.5px solid var(--cream-200);
  border-radius: 999px;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--brown-700); cursor: pointer;
  transition: var(--transition);
}
.faq-tab.active { background: var(--brown-800); color: var(--cream-50); border-color: var(--brown-800); }
.faq-tab:hover:not(.active) { border-color: var(--brown-300); }

.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item {
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: var(--transition);
}
.faq-item.open { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq-question {
  padding: 18px 24px;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  font-weight: 600; color: var(--brown-900);
  font-size: 0.98rem;
  transition: var(--transition);
}
.faq-question:hover { background: var(--cream-100); }
.faq-toggle {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cream-200); color: var(--brown-800);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  transition: transform 0.3s ease, background 0.25s ease;
}
.faq-item.open .faq-toggle { background: var(--accent); color: var(--brown-900); transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 24px;
}
.faq-item.open .faq-answer { max-height: 600px; padding: 0 24px 22px; }
.faq-answer p { color: var(--brown-700); font-size: 0.94rem; line-height: 1.7; }
.faq-answer p + p { margin-top: 10px; }

/* ========== DXB INTERACT IFRAME ========== */
.tx-iframe-wrap {
  margin-top: 24px;
  position: relative;
  background: var(--cream-100);
  border-radius: var(--radius);
  border: 1px solid var(--cream-200);
  overflow: hidden;
}
.tx-iframe-wrap iframe {
  width: 100%;
  height: 480px;
  border: none;
  display: block;
}
.tx-iframe-fallback {
  display: none;
  padding: 24px;
  text-align: center;
  color: var(--brown-700);
  font-size: 0.92rem;
}
.tx-iframe-fallback.show { display: block; }
.tx-iframe-fallback a {
  display: inline-block;
  margin-top: 12px;
  background: var(--brown-800); color: var(--cream-50);
  padding: 10px 22px; border-radius: 999px;
  font-weight: 600; font-size: 0.9rem;
}

/* ========== GUIDE SECTION ========== */
.guide-section { background: var(--cream-50); padding: 100px 0; }
.guide-card {
  max-width: 1100px; margin: 0 auto;
  background: linear-gradient(135deg, var(--brown-800) 0%, var(--brown-900) 100%);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  color: var(--cream-50);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.guide-card::before {
  content: ''; position: absolute; top: -120px; right: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(154, 123, 79, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.guide-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; position: relative; }
@media (max-width: 880px) { .guide-grid { grid-template-columns: 1fr; gap: 32px; } .guide-card { padding: 40px 28px; } }

.guide-content h2 { color: var(--cream-50); margin-bottom: 16px; }
.guide-lead { color: var(--cream-200); opacity: 0.95; font-size: 1.02rem; line-height: 1.65; margin-bottom: 24px; }
.guide-bullets { list-style: none; margin: 24px 0; padding: 0; }
.guide-bullets li {
  padding: 12px 0;
  font-size: 0.95rem;
  color: var(--cream-100);
  border-bottom: 1px solid rgba(250, 247, 241, 0.08);
  display: flex; align-items: center; gap: 12px;
}
.guide-bullets li svg { color: var(--accent); flex-shrink: 0; }
.guide-bullets li:last-child { border-bottom: none; }
.guide-note {
  margin-top: 20px;
  font-size: 0.88rem; color: var(--cream-200); opacity: 0.75;
  font-style: italic;
}

.guide-form-wrap { background: var(--cream-50); border-radius: var(--radius-lg); padding: 32px 28px; color: var(--brown-900); }
.guide-form h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem; margin-bottom: 20px;
  color: var(--brown-900);
}
.guide-form-row { margin-bottom: 14px; }
.guide-form-row label {
  display: block; font-size: 0.85rem; font-weight: 600;
  color: var(--brown-800); margin-bottom: 6px;
}
.guide-form-row input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--cream-300);
  border-radius: var(--radius);
  background: var(--cream-50);
  font-family: inherit; font-size: 0.95rem; color: var(--brown-900);
  transition: var(--transition);
}
.guide-form-row input:focus {
  outline: none; border-color: var(--brown-800);
  box-shadow: 0 0 0 3px rgba(58, 45, 32, 0.1);
}
.guide-submit {
  width: 100%; margin-top: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #25D366; color: white;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 700; font-size: 0.98rem;
  border: none; cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}
.guide-submit:hover { background: #1fb957; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37, 211, 102, 0.4); }
.guide-form-note { margin-top: 14px; font-size: 0.78rem; color: var(--brown-600); text-align: center; line-height: 1.5; }

/* ========== GUIDE CHECKBOX ========== */
.form-guide-box {
  margin: 24px 0;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(154, 123, 79, 0.12), rgba(154, 123, 79, 0.05));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  display: flex; gap: 14px;
}
.form-guide-box input[type="checkbox"] {
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--accent-dark);
  cursor: pointer;
  flex-shrink: 0;
}
.form-guide-box label {
  font-size: 0.92rem; color: var(--brown-800); line-height: 1.5;
  cursor: pointer;
}
.form-guide-box label strong { color: var(--brown-900); }

/* ========== ACTUALITÉS ========== */
.news-section {
  background: var(--cream-50);
  padding: 100px 0;
  overflow: hidden;
  border-top: 1px solid var(--cream-200);
}
.news-marquee {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}
.news-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding: 8px 0 24px;
  animation: newsScroll 70s linear infinite;
}
.news-track:hover { animation-play-state: paused; }
@keyframes newsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.news-card {
  flex-shrink: 0;
  width: 360px;
  min-height: 280px;
  background: var(--cream-100);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-200);
  padding: 24px 24px 20px;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: var(--transition);
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.news-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.news-cat {
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.news-cat.marche       { background: rgba(74, 124, 94, 0.15); color: var(--green); }
.news-cat.reglement    { background: rgba(154, 123, 79, 0.22); color: var(--accent-dark); }
.news-cat.projets      { background: rgba(127, 63, 191, 0.15); color: #7f3fbf; }
.news-cat.lifestyle    { background: rgba(196, 90, 74, 0.15); color: var(--red); }
.news-date {
  font-size: 0.78rem;
  color: var(--brown-600);
  font-weight: 500;
}

.news-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  color: var(--brown-900);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 12px;
}
.news-card-excerpt {
  font-size: 0.9rem;
  color: var(--brown-700);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 16px;
}
.news-card-cta {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Modale détail news */
.news-detail { padding: 28px 32px 32px; }
.news-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.news-detail-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  color: var(--brown-900);
  margin-top: 12px; margin-bottom: 4px;
  line-height: 1.25;
}
.news-detail-content {
  font-size: 0.96rem;
  color: var(--brown-700);
  line-height: 1.75;
  margin-top: 16px;
}
.news-detail-content p { margin-bottom: 14px; }
.news-detail-content strong { color: var(--brown-900); }
.news-detail-content ul, .news-detail-content ol { margin: 12px 0 14px; padding-left: 22px; }
.news-detail-content li { margin-bottom: 6px; }
.news-detail-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* ========== PROJETS DU MOMENT ========== */
.projects-section {
  background: var(--cream-100);
  padding: 100px 0;
  overflow: hidden;
}
.projects-marquee {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}
.projects-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 8px 0 24px;
  animation: projectsScroll 80s linear infinite;
}
.projects-track:hover { animation-play-state: paused; }
@keyframes projectsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.project-card {
  flex-shrink: 0;
  width: 340px;
  background: var(--cream-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cream-200);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }

.project-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brown-700), var(--brown-900));
}
.project-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.project-card:hover .project-card-image img { transform: scale(1.05); }
.project-card-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  color: var(--cream-100); padding: 24px;
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem; text-align: center;
  background: linear-gradient(135deg, var(--brown-700) 0%, var(--brown-900) 100%);
}
.project-card-placeholder::before {
  content: ''; width: 40px; height: 40px;
  background: var(--accent); opacity: 0.3;
  border-radius: 8px; margin-bottom: 14px;
}
.project-card-badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(250, 247, 241, 0.95);
  color: var(--brown-900);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  backdrop-filter: blur(8px);
}

/* Bandeau Sold Out diagonal en coin haut-droit */
.project-card-soldout {
  position: absolute;
  top: 22px;
  right: -46px;
  background: var(--brown-900);
  color: var(--cream-50);
  padding: 6px 56px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: rotate(35deg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  pointer-events: none;
  z-index: 2;
}
.project-card.is-sold-out .project-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(42, 31, 21, 0.22);
  pointer-events: none;
}

.project-card-body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column;
  flex: 1;
}
.project-card-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  color: var(--brown-900);
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.25;
}
.project-card-promoter {
  font-size: 0.85rem;
  color: var(--brown-600);
  margin-bottom: 14px;
}
.project-card-info {
  display: flex; flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--cream-200);
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.project-card-info-row {
  display: flex; justify-content: space-between;
  color: var(--brown-700);
}
.project-card-info-row strong { color: var(--brown-900); font-weight: 600; }
.project-card-cta {
  margin-top: auto;
  width: 100%;
  background: var(--brown-800); color: var(--cream-50);
  border: none; border-radius: 999px;
  padding: 11px 18px;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.project-card-cta:hover { background: var(--brown-900); }
.project-card-ctas { display: flex; flex-direction: column; gap: 8px; }
.project-card-analysis {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; padding: 9px 14px;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--accent-dark); background: var(--cream-100);
  border: 1px solid var(--cream-300); border-radius: 8px;
  transition: var(--transition);
}
.project-card-analysis:hover { background: var(--cream-50); border-color: var(--accent); color: var(--accent); }
.project-card-analysis svg { flex-shrink: 0; }

/* ===================== Page fondateur — sections enrichies ===================== */
.fd-section { max-width: 920px; margin: 56px auto; }
.fd-eyebrow {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-dark);
  margin-bottom: 10px;
}
.fd-section h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.95rem); color: var(--brown-900);
  line-height: 1.22; margin-bottom: 26px;
}

.fd-method-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.fd-method-card {
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 16px; padding: 24px 22px;
  transition: border-color var(--transition), transform var(--transition);
}
.fd-method-card:hover { border-color: var(--accent-light); transform: translateY(-2px); }
.fd-method-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brown-900); color: var(--cream-50);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; margin-bottom: 16px;
  letter-spacing: 0;
}
.fd-method-card h3 {
  font-size: 1.08rem; color: var(--brown-900); margin-bottom: 8px;
}
.fd-method-card p {
  font-size: 0.92rem; color: var(--brown-700); line-height: 1.55; margin: 0;
}

.fd-engagements {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.fd-engagements li {
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 18px 24px;
  font-size: 1rem; color: var(--brown-700); line-height: 1.55;
}

.fd-target {
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 18px; padding: 28px 30px;
}
.fd-target p {
  font-size: 1rem; line-height: 1.7; color: var(--brown-700); margin-bottom: 18px;
}
.fd-target-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.fd-target-list li {
  font-size: 0.94rem; color: var(--brown-900);
  padding: 12px 16px; background: var(--cream-100);
  border-radius: 10px; display: flex; align-items: center; gap: 10px;
}
.fd-target-list li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

.fd-cta-card {
  background: linear-gradient(135deg, var(--brown-900), var(--brown-700));
  color: var(--cream-50); border-radius: 22px;
  padding: 40px 36px; text-align: center;
  max-width: 760px; margin: 56px auto;
}
.fd-cta-card h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--cream-50);
  margin-bottom: 14px; line-height: 1.3;
}
.fd-cta-card p {
  font-size: 1rem; line-height: 1.65; color: var(--accent-light);
  max-width: 540px; margin: 0 auto 26px;
}
.fd-cta-card .btn-primary {
  background: var(--cream-50); color: var(--brown-900);
}
.fd-cta-card .btn-primary:hover { background: var(--cream-200); color: var(--brown-900); }

/* Modale détail projet */
.project-detail { padding: 0; }
.project-detail-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--brown-700), var(--brown-900));
  overflow: hidden;
}
.project-detail-gallery img {
  width: 100%; height: 100%; object-fit: cover;
  display: none;
}
.project-detail-gallery img.active { display: block; }
.project-detail-gallery-nav {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  background: rgba(42, 31, 21, 0.55);
  padding: 5px 8px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.project-detail-gallery-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(250, 247, 241, 0.5);
  border: none; cursor: pointer;
  transition: var(--transition);
}
.project-detail-gallery-dot.active { background: var(--accent); transform: scale(1.3); }

.project-detail-header { padding: 24px 32px 16px; }
.project-detail-name {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  color: var(--brown-900);
  margin-bottom: 4px;
}
.project-detail-subtitle { font-size: 0.95rem; color: var(--brown-600); }

.project-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 32px;
  background: var(--cream-100);
}
@media (max-width: 720px) { .project-detail-stats { grid-template-columns: repeat(2, 1fr); } }
.project-detail-stat { text-align: center; padding: 12px; }
.project-detail-stat-label {
  font-size: 0.72rem;
  color: var(--brown-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.project-detail-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brown-900);
  line-height: 1.2;
}

.project-detail-content { padding: 28px 32px; }
.project-detail-section { margin-bottom: 28px; }
.project-detail-section h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem; font-weight: 700;
  color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.project-detail-section p {
  font-size: 0.95rem;
  color: var(--brown-700);
  line-height: 1.7;
}
.project-detail-list {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 600px) { .project-detail-list { grid-template-columns: 1fr; } }
.project-detail-list li {
  padding: 10px 14px;
  background: var(--cream-100);
  border-radius: var(--radius);
  border: 1px solid var(--cream-200);
  font-size: 0.9rem;
  color: var(--brown-800);
  display: flex; align-items: flex-start; gap: 10px;
}
.project-detail-list li::before {
  content: ''; width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: 8px; flex-shrink: 0;
}

.project-detail-actions {
  display: flex; gap: 12px;
  padding: 16px 32px 32px;
  border-top: 1px solid var(--cream-200);
  margin-top: 16px;
  flex-wrap: wrap;
}
.project-detail-actions button {
  flex: 1; min-width: 200px;
  padding: 13px 20px;
  border: none; border-radius: 999px;
  font-family: inherit; font-size: 0.92rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.project-detail-actions .btn-brochure { background: var(--accent); color: var(--brown-900); }
.project-detail-actions .btn-brochure:hover { background: var(--accent-dark); color: var(--cream-50); }
.project-detail-actions .btn-contact { background: var(--brown-800); color: var(--cream-50); }
.project-detail-actions .btn-contact:hover { background: var(--brown-900); }

.brochure-form-body { padding: 24px 28px 28px; }
.brochure-form-body .form-row { margin-bottom: 14px; }
.brochure-form-body label {
  display: block; font-size: 0.84rem; font-weight: 600;
  color: var(--brown-800); margin-bottom: 6px;
}
.brochure-form-body input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--cream-300);
  border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem;
  background: var(--cream-50); color: var(--brown-900);
}
.brochure-form-body input:focus { outline: none; border-color: var(--brown-800); }

/* ========== ESPACE CLIENT ========== */
.account-modal {
  position: fixed; inset: 0;
  background: rgba(42, 31, 21, 0.7);
  backdrop-filter: blur(8px);
  z-index: 300;
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  transition: opacity 0.3s ease;
}
.account-modal.open { opacity: 1; pointer-events: auto; }
.account-modal-card {
  background: var(--cream-50);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 460px;
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.account-modal.open .account-modal-card { transform: scale(1); }
.account-modal-close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: none;
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; font-size: 1.4rem;
  color: var(--brown-600);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.account-modal-close:hover { background: var(--cream-200); color: var(--brown-900); }
.account-tabs {
  display: flex; gap: 4px;
  background: var(--cream-200);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 24px;
}
.account-tab {
  flex: 1; padding: 10px;
  border: none; background: transparent;
  font-family: inherit; font-weight: 600; font-size: 0.92rem;
  color: var(--brown-700); cursor: pointer;
  border-radius: 7px;
  transition: var(--transition);
}
.account-tab.active { background: var(--cream-50); color: var(--brown-900); box-shadow: var(--shadow-sm); }
.account-form-row { margin-bottom: 14px; }
.account-form-row label {
  display: block; font-size: 0.84rem; font-weight: 600;
  color: var(--brown-800); margin-bottom: 6px;
}
.account-form-row input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--cream-300);
  border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem;
  background: var(--cream-50); color: var(--brown-900);
  transition: var(--transition);
}
.account-form-row input:focus { outline: none; border-color: var(--brown-800); box-shadow: 0 0 0 3px rgba(58, 45, 32, 0.1); }
.account-form-row-double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-error {
  background: rgba(196, 90, 74, 0.1);
  color: #a04030;
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 0.88rem; margin-bottom: 14px;
  display: none;
}
.account-error.show { display: block; }
.account-submit {
  width: 100%; margin-top: 8px;
  background: var(--brown-800); color: var(--cream-50);
  padding: 13px; border: none; border-radius: 999px;
  font-family: inherit; font-weight: 700; font-size: 0.95rem;
  cursor: pointer; transition: var(--transition);
}
.account-submit:hover { background: var(--brown-900); }
.account-modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem; color: var(--brown-900);
  margin-bottom: 4px; text-align: center;
}
.account-modal-sub {
  text-align: center; color: var(--brown-600);
  font-size: 0.9rem; margin-bottom: 24px;
}

/* Dashboard section */
.dashboard-section {
  background: var(--cream-50);
  padding: 100px 0;
  display: none;
}
.dashboard-section.active { display: block; }
.dashboard-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: 40px;
}
.dashboard-greeting h2 { font-family: 'Outfit', sans-serif; font-size: 2.2rem; color: var(--brown-900); }
.dashboard-greeting p { color: var(--brown-600); font-size: 1rem; margin-top: 4px; }
.dashboard-actions { display: flex; gap: 12px; }
.dashboard-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 40px;
}
@media (max-width: 600px) { .dashboard-stats { grid-template-columns: 1fr; } }
.dashboard-stat {
  background: var(--cream-100);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.dashboard-stat-label {
  font-size: 0.78rem; font-weight: 600;
  color: var(--brown-600);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.dashboard-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem; font-weight: 700;
  color: var(--brown-900);
  line-height: 1;
}

/* Property cards grid */
.properties-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.property-card {
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  cursor: pointer;
  transition: var(--transition);
}
.property-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.property-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px;
}
.property-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--brown-900);
  line-height: 1.3;
}
.property-card-quartier { font-size: 0.85rem; color: var(--brown-600); margin-top: 2px; }
.property-status {
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.06em;
  flex-shrink: 0;
}
.property-status.delivered-rented { background: rgba(74,124,94,0.15); color: var(--green); }
.property-status.delivered-vacant { background: rgba(196,90,74,0.15); color: var(--red); }
.property-status.offplan { background: rgba(154,123,79,0.18); color: var(--accent-dark); }
.property-card-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--cream-200);
}
.property-meta-label { font-size: 0.72rem; color: var(--brown-600); text-transform: uppercase; letter-spacing: 0.05em; }
.property-meta-value { font-size: 0.92rem; color: var(--brown-900); font-weight: 600; }

.empty-state {
  text-align: center; padding: 60px 24px;
  background: var(--cream-100);
  border: 1.5px dashed var(--cream-300);
  border-radius: var(--radius-lg);
}
.empty-state-icon {
  width: 60px; height: 60px;
  background: var(--cream-200); color: var(--brown-700);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.empty-state h3 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; color: var(--brown-900); margin-bottom: 8px; }
.empty-state p { color: var(--brown-600); margin-bottom: 20px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* Property detail modal */
.property-modal-body { padding: 0; }
.property-detail-hero {
  background: linear-gradient(135deg, var(--brown-800), var(--brown-900));
  color: var(--cream-50);
  padding: 28px 32px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.property-detail-hero h3 { color: var(--cream-50); font-size: 1.6rem; font-family: 'Outfit', sans-serif; margin-bottom: 4px; }
.property-detail-hero-meta { font-size: 0.9rem; color: var(--cream-200); opacity: 0.85; }
.property-detail-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px;
  padding: 24px 32px;
}
.property-detail-grid > div {
  display: flex; flex-direction: column; gap: 4px;
}
.property-actions {
  padding: 16px 32px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.property-action-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--cream-50);
  border: 1.5px solid var(--cream-200);
  border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  color: var(--brown-900);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.property-action-btn:hover { border-color: var(--accent); background: var(--cream-100); transform: translateX(2px); }
.property-action-btn span:last-child { color: var(--brown-300); font-size: 1.2rem; }
.property-action-btn.danger { border-color: rgba(196,90,74,0.3); }
.property-action-btn.danger:hover { background: rgba(196,90,74,0.05); border-color: var(--red); }

/* Form add property */
.add-prop-form { padding: 28px 32px 32px; }
.add-prop-form .form-row { margin-bottom: 16px; }
.add-prop-form label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--brown-800); margin-bottom: 6px; }
.add-prop-form input, .add-prop-form select {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--cream-300); border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem; background: var(--cream-50); color: var(--brown-900);
}
.add-prop-form input:focus, .add-prop-form select:focus { outline: none; border-color: var(--brown-800); }
.add-prop-form .form-row-double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.add-prop-form .checkbox-row {
  display: flex; gap: 10px; align-items: center; margin: 14px 0;
  padding: 10px 12px; background: var(--cream-100); border-radius: var(--radius);
}
.add-prop-form .checkbox-row input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--brown-800); }
.add-prop-form .checkbox-row label { margin: 0; cursor: pointer; }
.add-prop-form .conditional-block {
  background: var(--cream-100);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* Payment plan tracker */
.payment-tracker {
  margin-top: 16px;
  border-top: 1px solid var(--cream-200);
  padding-top: 16px;
}
.payment-tracker-header {
  font-size: 0.82rem; font-weight: 700; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.payment-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.payment-summary-item {
  background: var(--cream-100);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.payment-summary-label { font-size: 0.72rem; color: var(--brown-600); text-transform: uppercase; }
.payment-summary-value { font-size: 1rem; font-weight: 700; color: var(--brown-900); margin-top: 2px; }
.payment-progress {
  height: 8px; background: var(--cream-200); border-radius: 999px;
  overflow: hidden; margin-bottom: 14px;
}
.payment-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 999px; }
.payment-list { max-height: 240px; overflow-y: auto; padding-right: 4px; }
.payment-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius);
  margin-bottom: 6px;
  font-size: 0.88rem;
}
.payment-item.paid { background: rgba(74,124,94,0.06); border-color: rgba(74,124,94,0.25); }
.payment-item-date { color: var(--brown-700); }
.payment-item-amount { font-weight: 700; color: var(--brown-900); }
.payment-item-toggle {
  background: transparent; border: 1.5px solid var(--cream-300);
  width: 24px; height: 24px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--brown-600);
  transition: var(--transition);
}
.payment-item.paid .payment-item-toggle { background: var(--green); border-color: var(--green); color: white; }

/* ========== ASSISTANT IA (chat widget) ========== */
.chat-bubble {
  position: fixed; bottom: 24px; right: 24px; z-index: 150;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--brown-800); color: var(--cream-50);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(42,31,21,0.35);
  transition: var(--transition);
}
.chat-bubble:hover { transform: scale(1.06); background: var(--brown-900); }
.chat-bubble svg { width: 28px; height: 28px; }
.chat-bubble-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: chatPulse 2.4s ease-out infinite;
  opacity: 0.6; z-index: -1;
}
@keyframes chatPulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}

.chat-panel {
  position: fixed; bottom: 96px; right: 24px; z-index: 151;
  width: min(400px, calc(100vw - 48px));
  height: min(620px, calc(100vh - 130px));
  background: var(--cream-50);
  border-radius: 18px;
  box-shadow: 0 16px 60px rgba(42,31,21,0.25);
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(0.95);
  opacity: 0; pointer-events: none;
  transition: var(--transition);
  overflow: hidden;
}
.chat-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.chat-header {
  background: linear-gradient(135deg, var(--brown-800), var(--brown-900));
  color: var(--cream-50);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
}
.chat-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--brown-900);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.chat-avatar svg { width: 22px; height: 22px; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-header-text { flex: 1; min-width: 0; }
.chat-name { font-weight: 700; font-size: 0.98rem; }
.chat-status {
  font-size: 0.78rem; color: var(--cream-200); opacity: 0.85;
  display: flex; align-items: center; gap: 6px;
}
.chat-status::before {
  content: ''; width: 7px; height: 7px;
  background: #4ade80; border-radius: 50%;
  flex-shrink: 0;
}
.chat-close {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--cream-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1;
  transition: var(--transition);
}
.chat-close:hover { background: rgba(250,247,241,0.12); }

.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--cream-100);
}
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  font-size: 0.92rem; line-height: 1.5;
  border-radius: 14px;
  word-wrap: break-word;
}
.chat-msg.bot {
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  color: var(--brown-800);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  background: var(--brown-800);
  color: var(--cream-50);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-msg strong { color: var(--brown-900); }
.chat-msg.user strong { color: var(--accent); }
.chat-msg p { margin: 0; }
.chat-msg p + p { margin-top: 8px; }
.chat-msg ul, .chat-msg ol { margin: 6px 0 0; padding-left: 20px; }
.chat-msg li { margin-bottom: 3px; }
.chat-msg a { color: var(--accent-dark); text-decoration: underline; }

.chat-typing {
  align-self: flex-start;
  padding: 12px 14px;
  background: var(--cream-50);
  border-radius: 14px;
  display: flex; gap: 4px;
  border: 1px solid var(--cream-200);
}
.chat-typing span {
  width: 7px; height: 7px;
  background: var(--brown-300);
  border-radius: 50%;
  animation: typingDot 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.chat-suggestions {
  padding: 0 16px 8px;
  background: var(--cream-100);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.chat-suggestion {
  font-size: 0.82rem;
  padding: 6px 12px;
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: 999px;
  cursor: pointer;
  color: var(--brown-800);
  font-family: inherit;
  transition: var(--transition);
}
.chat-suggestion:hover { border-color: var(--accent); background: var(--cream-100); }

.chat-input-row {
  display: flex; gap: 8px;
  padding: 10px 12px;
  background: var(--cream-50);
  border-top: 1px solid var(--cream-200);
}
.chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--cream-300);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--brown-900);
  background: var(--cream-50);
}
.chat-input:focus { outline: none; border-color: var(--brown-800); }
.chat-send {
  background: var(--brown-800); color: var(--cream-50);
  border: none; cursor: pointer;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.chat-send:hover { background: var(--brown-900); }
.chat-send svg { width: 18px; height: 18px; }
.chat-footer {
  padding: 8px 14px;
  background: var(--cream-100);
  text-align: center;
  font-size: 0.74rem;
  color: var(--brown-600);
  border-top: 1px solid var(--cream-200);
}
.chat-footer a { color: var(--accent-dark); text-decoration: underline; font-weight: 600; }

/* Actions cards (mode hub) */
.chat-action-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.chat-action-card {
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 10px; padding: 12px 10px;
  cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: var(--transition); text-align: center;
}
.chat-action-card:hover { border-color: var(--accent); background: var(--cream-100); }
.chat-action-card-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--brown-800); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.chat-action-card-icon svg { width: 18px; height: 18px; }
.chat-action-card-title { font-size: 0.82rem; font-weight: 700; color: var(--brown-900); line-height: 1.2; }
.chat-action-card-desc { font-size: 0.7rem; color: var(--brown-600); line-height: 1.3; }

/* Démarche card / steps */
.chat-demarche-card {
  background: var(--cream-100); border-radius: 12px;
  padding: 14px 16px; margin: 8px 0;
}
.chat-demarche-meta { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 12px; font-size: 0.75rem; }
.chat-demarche-meta span { color: var(--brown-600); }
.chat-demarche-meta strong { color: var(--brown-900); }
.chat-demarche-step {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px dashed var(--cream-300);
}
.chat-demarche-step:last-child { border-bottom: none; }
.chat-demarche-step-num {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brown-800); color: var(--cream-50);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.chat-demarche-step-body { flex: 1; }
.chat-demarche-step-title { font-size: 0.85rem; font-weight: 700; color: var(--brown-900); }
.chat-demarche-step-desc { font-size: 0.82rem; color: var(--brown-700); margin-top: 2px; line-height: 1.45; }
.chat-pitfalls {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(196, 90, 74, 0.08);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  font-size: 0.82rem;
}
.chat-pitfalls-title {
  font-size: 0.72rem; font-weight: 700;
  color: var(--red); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* Tableau comparaison */
.chat-compare-table {
  width: 100%; margin-top: 8px;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.chat-compare-table th, .chat-compare-table td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--cream-200);
}
.chat-compare-table th {
  background: var(--brown-800); color: var(--cream-50);
  font-weight: 700; font-size: 0.78rem;
}
.chat-compare-table td:first-child {
  font-weight: 700; color: var(--brown-900);
  background: var(--cream-100);
}

/* Recommandation profil */
.chat-profile-result {
  background: linear-gradient(135deg, var(--brown-800), var(--brown-900));
  color: var(--cream-50);
  padding: 16px 18px; border-radius: 12px;
  margin: 10px 0;
}
.chat-profile-result h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem; color: var(--accent);
  margin-bottom: 4px;
}
.chat-profile-result-desc { font-size: 0.85rem; color: var(--cream-200); margin-bottom: 10px; }
.chat-profile-result-block { margin: 10px 0; font-size: 0.85rem; }
.chat-profile-result-block strong { color: var(--accent); }
.chat-profile-tags {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
}
.chat-profile-tag {
  background: rgba(154, 123, 79, 0.18); color: var(--accent);
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
}

/* ========== SCROLL REVEAL (animations premium) ========== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Stagger : éléments enfants apparaissent en cascade */
.reveal.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal.stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal.stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.reveal.stagger.in > *:nth-child(3) { transition-delay: 0.19s; }
.reveal.stagger.in > *:nth-child(4) { transition-delay: 0.26s; }
.reveal.stagger.in > *:nth-child(5) { transition-delay: 0.33s; }
.reveal.stagger.in > *:nth-child(6) { transition-delay: 0.40s; }
.reveal.stagger.in > *:nth-child(7) { transition-delay: 0.47s; }
.reveal.stagger.in > *:nth-child(8) { transition-delay: 0.54s; }
.reveal.stagger.in > *:nth-child(n+9) { transition-delay: 0.60s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.stagger > * { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Hero content : apparition immédiate en cascade */
.hero-badge, .hero h1, .hero-tagline, .hero-cta-group, .hero-stats {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero h1 { animation-delay: 0.2s; }
.hero-tagline { animation-delay: 0.4s; }
.hero-cta-group { animation-delay: 0.6s; }
.hero-stats { animation-delay: 0.8s; }
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Hover sur les liens nav : ligne dorée fine */
.nav-links a:not(.nav-cta) {
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }


/* === AJOUTS MULTI-PAGES : nav deroulante + pages ressources === */

/* --- NAV : sous-menu Ressources --- */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit; font-size: 0.92rem; font-weight: 500; color: var(--brown-700);
  display: flex; align-items: center; gap: 5px; transition: color var(--transition);
}
.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle { color: var(--brown-900); }
.nav-caret { font-size: 0.6rem; transition: transform var(--transition); }
.nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown::after { content: ''; position: absolute; top: 100%; left: -24px; right: -24px; height: 24px; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 8px; min-width: 242px; display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition); z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500; color: var(--brown-700);
  white-space: nowrap; transition: background var(--transition), color var(--transition);
}
.nav-dropdown-menu a:hover { background: var(--cream-100); color: var(--brown-900); }
.nav-dropdown-menu a.active { background: var(--accent); color: var(--cream-50); }
@media (max-width: 900px) {
  .nav-dropdown { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-dropdown::after { display: none; }
  .nav-caret { display: none; }
  .nav-dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: none; background: transparent;
    padding: 8px 0 0 14px; min-width: 0; gap: 3px;
  }
  .nav-dropdown-menu a { padding: 6px 0; }
  .nav-dropdown-menu a.active { background: transparent; color: var(--accent-dark); }
}

/* --- Accent taupe clair sur les fonds fonces --- */
.club-card, .club-mockup, .amba-highlight, .guide-card, footer {
  --accent: var(--accent-light);
  --accent-dark: var(--accent-light);
}

/* --- Sections des pages ressources --- */
.res-section { padding: 84px 0; }
.res-section.alt { background: var(--cream-50); }

/* --- Carte quartier --- */
.qtr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 22px; }
.qtr-card {
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); padding: 26px; transition: var(--transition);
}
.qtr-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.qtr-card-cat {
  display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.qtr-card-cat.Premium { background: rgba(196, 90, 74, 0.14); color: #a8442f; }
.qtr-card-cat.Family { background: rgba(74, 124, 94, 0.16); color: #3a6b4d; }
.qtr-card-cat.Ultra-luxe { background: rgba(154, 123, 79, 0.20); color: var(--accent-dark); }
.qtr-card h3 { font-size: 1.2rem; margin-bottom: 4px; }
.qtr-card-dev { font-size: 0.8rem; color: var(--brown-600); margin-bottom: 14px; }
.qtr-card p { font-size: 0.89rem; line-height: 1.6; color: var(--brown-700); margin-bottom: 18px; }
.qtr-card-stats { display: flex; gap: 16px; border-top: 1px solid var(--cream-200); padding-top: 14px; }
.qtr-card-stats > div { flex: 1; }
.qtr-card-stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brown-600); margin-bottom: 2px; }
.qtr-card-stat-value { font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: var(--brown-900); font-weight: 600; }

/* --- Grille actualites --- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.news-grid .news-card { width: auto; min-width: 0; }

/* --- Etat vide (tutos) --- */
.empty-state { text-align: center; max-width: 580px; margin: 0 auto; padding: 50px 24px; }
.empty-state-icon {
  width: 88px; height: 88px; margin: 0 auto 26px; border-radius: 50%;
  background: var(--cream-100); display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark);
}
.empty-state h2 { margin-bottom: 14px; }
.empty-state p { font-size: 1rem; color: var(--brown-700); margin-bottom: 30px; line-height: 1.7; }

/* --- Formulaire de candidature --- */
.apply-form {
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); padding: 32px;
}
.apply-form .field { margin-bottom: 16px; }
.apply-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--brown-700); margin-bottom: 6px; }
.apply-form input, .apply-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--cream-300);
  border-radius: var(--radius); font-family: inherit; font-size: 0.95rem;
  color: var(--brown-900); background: #fff;
}
.apply-form input:focus, .apply-form textarea:focus { outline: none; border-color: var(--accent); }
.apply-form textarea { min-height: 110px; resize: vertical; }
.apply-form-note { font-size: 0.8rem; color: var(--brown-600); margin-top: 12px; text-align: center; }

/* --- Mot rotatif du hero --- */
.rotate-word {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease, width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform, width;
}
.rotate-word.swapping { opacity: 0; transform: translateY(-8px); }

/* === EN-TETE COMPACT DES PAGES RESSOURCES === */
/* Image de fond : definie page par page via
   style="background-image: url('header-xxx.jpg')" sur <header class="page-head">.
   Sans image, l'en-tete reste sur un fond marron fonce. */
.page-head {
  position: relative;
  padding: 110px 0 52px; /* avant : 150 0 62 — réduit pour rapprocher le contenu de la nav */
  text-align: center;
  background-color: var(--brown-900);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,20,12,0.50) 0%, rgba(28,20,12,0.80) 100%);
}
.page-head .container { position: relative; z-index: 1; }
.page-head-eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent-light);
  margin-bottom: 14px;
}
.page-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 14px; color: #ffffff; }
.page-head p {
  max-width: 600px; margin: 0 auto;
  font-size: 1.04rem; color: rgba(255,255,255,0.86); line-height: 1.7;
}
@media (max-width: 700px) { .page-head { padding: 90px 0 40px; } }

/* --- Bloc CTA bas de page ressource --- */
.faq-cta {
  margin-top: 44px; text-align: center;
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); padding: 40px 32px;
}
.faq-cta h3 { font-size: 1.4rem; margin-bottom: 10px; }
.faq-cta p { color: var(--brown-700); margin-bottom: 22px; max-width: 460px; margin-left: auto; margin-right: auto; }

/* === BANDEAU GROUPE WHATSAPP === */
.join-cta {
  padding: 80px 0 0;
  background: linear-gradient(to bottom,
    var(--cream-100) 0, var(--cream-100) 175px,
    var(--brown-900) 175px, var(--brown-900) 100%);
}
/* Variante "fond sombre continu" : appliquee automatiquement quand la
   section juste au-dessus est deja marron foncé (cas du bloc Contact
   sur l'accueil). Le bandeau se fond avec la section precedente et le
   pied de page, la carte creme flotte elegamment au milieu. */
.join-cta.join-on-dark {
  padding: 90px 0 100px;
  background: var(--brown-900);
  position: relative;
}
.join-cta.join-on-dark::before {
  content: "";
  position: absolute; left: 50%; top: 38px; transform: translateX(-50%);
  width: 56px; height: 1px; background: var(--accent); opacity: 0.5;
}
.join-cta.join-on-dark .join-card {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.join-card {
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(42, 31, 21, 0.30);
  padding: 52px 56px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 48px;
  align-items: center;
}
.join-visual { display: flex; justify-content: center; }
.join-phone {
  width: 100%; max-width: 320px;
  background: #fff; border: 1px solid var(--cream-200);
  border-radius: 22px; padding: 18px;
  box-shadow: 0 18px 44px rgba(42, 31, 21, 0.16);
}
.join-phone-top { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--cream-200); margin-bottom: 13px; }
.join-phone-avatar { width: 42px; height: 42px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.join-phone-avatar svg { width: 22px; height: 22px; }
.join-phone-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.84rem; color: var(--brown-900); }
.join-phone-status { font-size: 0.71rem; color: #1fa855; }
.join-msg {
  background: var(--cream-100); border-radius: 13px 13px 13px 4px;
  padding: 9px 12px; font-size: 0.8rem; color: var(--brown-800);
  line-height: 1.45; margin-bottom: 8px; max-width: 90%;
}
.join-msg-me { background: #dcf6d3; border-radius: 13px 13px 4px 13px; margin-left: auto; }
.join-eyebrow {
  display: inline-block; font-family: 'Outfit', sans-serif;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent-dark); margin-bottom: 14px;
}
.join-text h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.25; margin-bottom: 14px; }
.join-text p { color: var(--brown-700); font-size: 0.96rem; line-height: 1.65; margin-bottom: 16px; }
.join-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff;
  padding: 15px 30px; border-radius: 999px;
  font-weight: 700; font-size: 0.97rem;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.34);
  transition: var(--transition);
}
.join-btn svg { width: 20px; height: 20px; }
.join-btn:hover { background: #1fb957; transform: translateY(-2px); }
@media (max-width: 880px) {
  .join-cta { padding-top: 56px; background: linear-gradient(to bottom, var(--cream-100) 0, var(--cream-100) 128px, var(--brown-900) 128px, var(--brown-900) 100%); }
  .join-card { grid-template-columns: 1fr; gap: 30px; padding: 36px 26px; }
}

/* --- formulaire bandeau --- */
.join-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.join-form-row.full { grid-template-columns: 1fr; }
.join-form input, .join-form select {
  width: 100%; padding: 12px 13px;
  border: 1px solid var(--cream-300); border-radius: var(--radius);
  font-family: inherit; font-size: 0.89rem; color: var(--brown-900); background: #fff;
}
.join-form select { cursor: pointer; }
.join-form input::placeholder { color: var(--brown-600); }
.join-form input:focus, .join-form select:focus { outline: none; border-color: #25D366; }
.join-submit { width: 100%; justify-content: center; border: none; cursor: pointer; font-family: inherit; margin-top: 4px; }
.join-form-note { font-size: 0.76rem; color: var(--brown-600); margin-top: 12px; margin-bottom: 0; }
@media (max-width: 880px) { .join-form-row { grid-template-columns: 1fr; } }

/* --- menu deroulant personnalise (bandeau WhatsApp) --- */
.jc-select { position: relative; }
.jc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--cream-300); border-radius: var(--radius);
  font-family: inherit; font-size: 0.89rem; color: var(--brown-600);
  cursor: pointer; text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.jc-trigger:hover { border-color: var(--brown-300); }
.jc-select.open .jc-trigger { border-color: #25D366; box-shadow: 0 0 0 3px rgba(37,211,102,0.12); }
.jc-select.filled .jc-label { color: var(--brown-900); }
.jc-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--brown-600); transition: transform var(--transition); }
.jc-select.open .jc-chevron { transform: rotate(180deg); color: #25D366; }
.jc-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--cream-200); border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(42,31,21,0.20);
  padding: 6px; max-height: 244px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.jc-select.open .jc-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.jc-option {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: none; border-radius: 6px;
  font-family: inherit; font-size: 0.875rem; color: var(--brown-800); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.jc-option:hover { background: var(--cream-100); color: var(--brown-900); }
.jc-option.selected { background: rgba(37,211,102,0.12); color: var(--brown-900); font-weight: 600; }
.jc-menu::-webkit-scrollbar { width: 6px; }
.jc-menu::-webkit-scrollbar-thumb { background: var(--cream-300); border-radius: 3px; }

/* --- A propos : bloc engagement --- */
.about-engagement {
  margin-top: 50px;
  background: var(--brown-900);
  border-radius: var(--radius-lg);
  padding: 46px 50px;
}
.about-engagement h3 { color: var(--cream-50); font-size: 1.45rem; line-height: 1.3; margin-bottom: 26px; }
.about-engagement-list { list-style: none; display: grid; gap: 14px; }
.about-engagement-list li {
  display: flex; gap: 13px; align-items: flex-start;
  color: var(--cream-200); font-size: 1.01rem; line-height: 1.6;
}
.about-engagement-list li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent-light); margin-top: 3px; }
@media (max-width: 700px) { .about-engagement { padding: 34px 26px; } }

/* === ESPACE INVESTISSEUR & ADMIN === */
.ec-wrap { padding: 124px 0 90px; min-height: 72vh; }
.ec-wrap .container { max-width: 1080px; }
.ec-login { max-width: 430px; margin: 24px auto 0; }
.ec-login-card { background: var(--cream-50); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: 42px 38px; box-shadow: var(--shadow-md); }
.ec-login-card h1 { font-size: 1.6rem; margin-bottom: 6px; }
.ec-login-card .ec-sub { color: var(--brown-700); font-size: 0.95rem; margin-bottom: 26px; }
.ec-field { margin-bottom: 16px; }
.ec-field label { display:block; font-size:0.82rem; font-weight:600; color:var(--brown-700); margin-bottom:6px; }
.ec-field input { width:100%; padding:12px 14px; border:1px solid var(--cream-300); border-radius:var(--radius); font-family:inherit; font-size:0.95rem; color:var(--brown-900); background:#fff; }
.ec-field input:focus { outline:none; border-color: var(--accent); }
.ec-error { color: var(--red); font-size:0.85rem; margin-top:12px; display:none; }
.ec-hint { font-size:0.8rem; color:var(--brown-600); margin-top:20px; line-height:1.6; }
.ec-dash-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:30px; }
.ec-dash-head h1 { font-size: clamp(1.6rem,3vw,2.2rem); }
.ec-dash-head p { color:var(--brown-600); font-size:0.95rem; margin-top:4px; }
.ec-logout { font-size:0.85rem; font-weight:600; color:var(--brown-700); border:1px solid var(--cream-300); padding:9px 16px; border-radius:999px; cursor:pointer; background:#fff; transition: var(--transition); }
.ec-logout:hover { border-color:var(--accent); color:var(--brown-900); }
.ec-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
@media(max-width:760px){ .ec-kpis{ grid-template-columns:repeat(2,1fr); } }
.ec-kpi { background:var(--cream-50); border:1px solid var(--cream-200); border-radius:var(--radius-lg); padding:20px; }
.ec-kpi-label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--brown-600); margin-bottom:8px; }
.ec-kpi-value { font-size:1.45rem; font-weight:700; color:var(--brown-900); }
.ec-next { background: var(--brown-900); color: var(--cream-50); border-radius: var(--radius-lg); padding: 26px 32px; margin-bottom:30px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.ec-next-label { font-size:0.74rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent-light); margin-bottom:8px; }
.ec-next h3 { color:var(--cream-50); font-size:1.2rem; }
.ec-next-meta { color:var(--cream-200); font-size:0.88rem; margin-top:5px; }
.ec-next-count { text-align:center; flex-shrink:0; }
.ec-next-count-num { font-size:2.4rem; font-weight:700; line-height:1; color:var(--cream-50); }
.ec-next-count-lbl { font-size:0.76rem; color:var(--cream-200); margin-top:5px; }
.ec-bien { background:var(--cream-50); border:1px solid var(--cream-200); border-radius:var(--radius-lg); padding:26px 28px; margin-bottom:20px; }
.ec-bien-head h3 { font-size:1.2rem; }
.ec-bien-unite { font-size:0.82rem; color:var(--brown-600); margin-top:3px; }
.ec-progress { margin:18px 0 20px; }
.ec-progress-info { display:flex; justify-content:space-between; font-size:0.82rem; color:var(--brown-700); margin-bottom:7px; }
.ec-progress-track { height:9px; background:var(--cream-200); border-radius:999px; overflow:hidden; }
.ec-progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-dark)); border-radius:999px; transition:width 1s cubic-bezier(0.22,1,0.36,1); }
.ec-ech-list { display:flex; flex-direction:column; }
.ec-ech { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--cream-200); }
.ec-ech:first-child { border-top:none; }
.ec-ech-main { flex:1; min-width:0; }
.ec-ech-lib { font-size:0.92rem; color:var(--brown-900); font-weight:500; }
.ec-ech-date { font-size:0.8rem; color:var(--brown-600); margin-top:2px; }
.ec-ech-mt { font-weight:700; color:var(--brown-900); font-size:0.95rem; white-space:nowrap; }
.ec-badge { font-size:0.71rem; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.ec-badge.paye { background:rgba(74,124,94,0.16); color:#3a6b4d; }
.ec-badge.attente { background:var(--cream-200); color:var(--brown-700); }
.ec-badge.retard { background:rgba(196,90,74,0.16); color:#a8442f; }
.ec-section-title { font-size:1.15rem; margin:36px 0 14px; }
.adm-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
@media(max-width:760px){ .adm-kpis{ grid-template-columns:repeat(2,1fr); } }
.adm-filters { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.adm-filters select, .adm-filters input { padding:10px 13px; border:1px solid var(--cream-300); border-radius:var(--radius); font-family:inherit; font-size:0.86rem; color:var(--brown-900); background:#fff; }
.adm-table-wrap { overflow-x:auto; border:1px solid var(--cream-200); border-radius:var(--radius-lg); background:var(--cream-50); }
.adm-table { width:100%; border-collapse:collapse; font-size:0.86rem; }
.adm-table th { text-align:left; padding:13px 14px; background:var(--cream-100); color:var(--brown-700); font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; }
.adm-table td { padding:13px 14px; border-top:1px solid var(--cream-200); color:var(--brown-800); }
.adm-table tr.retard td { background:rgba(196,90,74,0.07); }
.adm-empty { text-align:center; padding:38px; color:var(--brown-600); font-size:0.9rem; }

/* === PORTEFEUILLE INVESTISSEUR (espace client libre-service) === */
.pf-wrap { padding: 124px 0 90px; min-height: 74vh; }
.pf-wrap .container { max-width: 1060px; }
.pf-auth { max-width: 440px; margin: 20px auto 0; }
.pf-auth-card { background: var(--cream-50); border: 1px solid var(--cream-200); border-radius: 20px; padding: 38px 36px; box-shadow: var(--shadow-md); }
.pf-auth-card h1 { font-size: 1.55rem; margin-bottom: 4px; }
.pf-auth-card .pf-lead { color: var(--brown-600); font-size: 0.92rem; margin-bottom: 24px; }
.pf-auth-tabs { display:flex; gap:5px; background:var(--cream-100); padding:5px; border-radius:999px; margin-bottom:22px; }
.pf-auth-tab { flex:1; padding:10px; border:none; background:none; border-radius:999px; font-family:inherit; font-size:0.86rem; font-weight:600; color:var(--brown-600); cursor:pointer; transition:var(--transition); }
.pf-auth-tab.active { background:var(--brown-900); color:var(--cream-50); }
.pf-field { margin-bottom:14px; }
.pf-field label { display:block; font-size:0.8rem; font-weight:600; color:var(--brown-700); margin-bottom:6px; }
.pf-field input, .pf-field select { width:100%; padding:12px 14px; border:1px solid var(--cream-300); border-radius:10px; font-family:inherit; font-size:0.95rem; color:var(--brown-900); background:#fff; }
.pf-field input:focus, .pf-field select:focus { outline:none; border-color:var(--accent); }
.pf-msg { font-size:0.84rem; margin-top:10px; display:none; }
.pf-msg.err { color:var(--red); display:block; }
.pf-msg.ok { color:var(--green); display:block; }
.pf-switch { font-size:0.85rem; color:var(--brown-600); margin-top:18px; padding-top:16px; border-top:1px solid var(--cream-200); text-align:center; }
.pf-switch + .pf-switch { border-top:none; padding-top:0; margin-top:7px; }
.pf-switch a { color:var(--accent-dark); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.pf-switch a:hover { color:var(--accent); }
.pf-reset-intro { font-size:0.86rem; color:var(--brown-600); line-height:1.6; margin-bottom:16px; }
.pf-demo-btn { display:block; width:100%; margin-top:16px; padding:12px 14px; background:none; border:1px dashed var(--cream-300); border-radius:11px; font-family:inherit; font-size:0.86rem; font-weight:600; color:var(--accent-dark); cursor:pointer; transition:var(--transition); }
.pf-demo-btn:hover { background:var(--cream-100); border-color:var(--accent); }
.pf-demo-banner { display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap; background:var(--brown-900); color:var(--cream-100); padding:14px 20px; border-radius:14px; margin-bottom:22px; font-size:0.88rem; line-height:1.5; }
.pf-demo-banner button { background:var(--cream-50); color:var(--brown-900); border:none; padding:8px 16px; border-radius:999px; font-family:inherit; font-weight:600; font-size:0.82rem; cursor:pointer; white-space:nowrap; }
.pf-demo-banner button:hover { background:#fff; }

/* ---- Services & demandes par bien ---- */
.pf-card-top { cursor:pointer; }
.pf-liv-badge { display:inline-block; margin-top:8px; padding:3px 10px; border-radius:999px; font-size:0.66rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
.pf-liv-badge.construction { background:#efe3cf; color:#8a6a32; }
.pf-liv-badge.livre { background:#dfeadd; color:#3f6b43; }
.pf-svc-open { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin:2px 0 14px; padding:13px; background:var(--brown-900); color:var(--cream-50); border:none; border-radius:12px; font-family:inherit; font-size:0.9rem; font-weight:600; cursor:pointer; transition:var(--transition); }
.pf-svc-open:hover { background:var(--accent-dark); }
.pf-svc-open svg { width:18px; height:18px; }
.pf-modal-svc { position:relative; max-width:560px; }
.svc-close { position:absolute; top:14px; right:18px; background:none; border:none; font-size:1.8rem; line-height:1; color:var(--brown-600); cursor:pointer; padding:0; z-index:5; }
.svc-close:hover { color:var(--brown-900); }

/* ===== Coffre Documents ===== */
.pf-modal-docs { position:relative; max-width:640px; padding:36px 32px 32px; }
.docs-head { margin-right: 32px; margin-bottom: 18px; }
.docs-head h2 { font-size: 1.35rem; color: var(--brown-900); margin-bottom: 4px; letter-spacing: -0.005em; }
.docs-intro {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--cream-100); border-radius: 12px;
  margin-bottom: 22px;
  font-size: 0.85rem; line-height: 1.5; color: var(--brown-700);
}
.docs-intro svg { color: var(--accent-dark); flex-shrink: 0; margin-top: 1px; }
.docs-sections { display: flex; flex-direction: column; gap: 16px; }
.docs-cat {
  background: #fff; border: 1px solid var(--cream-200);
  border-radius: 16px; padding: 18px 20px;
}
.docs-cat-head {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 14px;
  align-items: center; margin-bottom: 14px;
}
.docs-cat-ico {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(155deg, var(--brown-900), #3a2c1e);
  color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
}
.docs-cat-ico svg { width: 22px; height: 22px; }
.docs-cat-titles h3 {
  font-size: 0.98rem; color: var(--brown-900); margin: 0 0 2px;
  font-weight: 700; letter-spacing: -0.005em;
}
.docs-cat-titles p {
  font-size: 0.76rem; color: var(--brown-600); margin: 0; line-height: 1.4;
}
.docs-add-btn {
  background: var(--accent); color: var(--brown-900); border: none;
  padding: 8px 14px; border-radius: 99px;
  font-family: inherit; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.02em;
  transition: var(--transition);
  white-space: nowrap;
}
.docs-add-btn:hover { background: var(--accent-light); }

.docs-list { display: flex; flex-direction: column; gap: 8px; }
.docs-loading, .docs-empty {
  padding: 14px 16px;
  background: var(--cream-50); border: 1px dashed var(--cream-300);
  border-radius: 10px;
  font-size: 0.84rem; color: var(--brown-600); text-align: center;
}
.docs-item {
  display: grid; grid-template-columns: 38px 1fr auto auto; gap: 12px;
  align-items: center; padding: 12px 14px;
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 12px;
  transition: var(--transition);
}
.docs-item:hover { border-color: var(--accent-light); background: #fff; }
.docs-item-ico {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--cream-100); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.docs-item-ico svg { width: 20px; height: 20px; }
.docs-item-body { min-width: 0; }
.docs-item-name {
  font-size: 0.9rem; font-weight: 600; color: var(--brown-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docs-item-meta {
  font-size: 0.74rem; color: var(--brown-600); margin-top: 2px;
}
.docs-act-btn {
  width: 34px; height: 34px; border-radius: 9px;
  background: transparent; border: 1px solid var(--cream-200);
  color: var(--brown-700);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--transition);
}
.docs-act-btn:hover {
  background: var(--brown-900); color: var(--cream-50);
  border-color: var(--brown-900);
}
.docs-act-btn.danger:hover {
  background: #c14a3e; border-color: #c14a3e;
}
@media (max-width: 540px) {
  .pf-modal-docs { padding: 30px 22px 26px; }
  .docs-cat-head { grid-template-columns: 38px 1fr; gap: 12px; }
  .docs-add-btn { grid-column: 1 / 3; justify-self: flex-start; }
  .docs-item { grid-template-columns: 34px 1fr auto; }
  .docs-act-btn.danger { display: none; }
}
.svc-grid { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.svc-item { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px 16px; background:var(--cream-50); border:1px solid var(--cream-200); border-radius:13px; cursor:pointer; font-family:inherit; transition:var(--transition); }
.svc-item:hover { border-color:var(--accent); background:#fff; transform:translateX(2px); }
.svc-ico { flex-shrink:0; width:42px; height:42px; border-radius:11px; background:var(--cream-100); display:flex; align-items:center; justify-content:center; color:var(--accent-dark); }
.svc-ico svg { width:21px; height:21px; }
.svc-txt { display:flex; flex-direction:column; gap:2px; flex:1; }
.svc-lbl { font-size:0.95rem; font-weight:600; color:var(--brown-900); }
.svc-desc { font-size:0.8rem; color:var(--brown-600); line-height:1.45; }
.svc-arrow { color:var(--accent); font-size:1.1rem; flex-shrink:0; font-weight:600; }
.svc-note { font-size:0.78rem; color:var(--brown-600); line-height:1.6; margin-top:18px; text-align:center; }

/* ---- Services partenaires (espace investisseur) ---- */
.pf-partners { display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px; margin-bottom:40px; }
.pf-partner-card {
  display:grid; grid-template-columns:auto 1fr auto; gap:22px;
  align-items:center; padding:24px 28px;
  background:var(--cream-50); border:1px solid var(--cream-200);
  border-radius:16px; transition:border-color var(--transition), transform var(--transition);
}
.pf-partner-card:hover { border-color:var(--accent-light); transform:translateY(-2px); }
.pf-partner-ico {
  width:56px; height:56px; border-radius:14px;
  background:var(--brown-900); color:var(--cream-50);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pf-partner-ico svg { width:28px; height:28px; }
.pf-partner-title { font-weight:700; color:var(--brown-900); font-size:1.05rem; }
.pf-partner-desc { font-size:0.88rem; color:var(--brown-600); margin-top:5px; line-height:1.55; }
.pf-partner-cta {
  border:none; cursor:pointer; padding:13px 24px;
  background:var(--brown-900); color:var(--cream-50);
  font-family:inherit; font-size:0.88rem; font-weight:600;
  border-radius:99px; white-space:nowrap;
  transition:background var(--transition), transform var(--transition);
}
.pf-partner-cta:hover { background:var(--accent-dark); transform:translateY(-1px); }
@media (max-width:640px){
  .pf-partner-card { grid-template-columns:1fr; text-align:center; padding:24px; }
  .pf-partner-ico { margin:0 auto; }
}

/* ---- Plan rapide (générateur d'échéances) ---- */
.pf-plan-actions { display:flex; gap:8px; flex-wrap:wrap; }
.pf-plan-quick {
  border:1px solid var(--accent); background:var(--cream-50); color:var(--accent-dark);
  padding:8px 16px; border-radius:99px; font-family:inherit;
  font-size:0.84rem; font-weight:600; cursor:pointer;
  transition:var(--transition);
}
.pf-plan-quick:hover { background:var(--accent); color:var(--cream-50); }
.mp-quick {
  background:var(--cream-100); border:1px dashed var(--cream-300);
  border-radius:14px; padding:18px 20px; margin-bottom:16px;
}
.mp-quick-intro { font-size:0.84rem; color:var(--brown-600); margin-bottom:14px; line-height:1.5; }

/* ---- Assistant pas-à-pas du plan de paiement ---- */
.mp-plan-title { margin-bottom:16px; color:var(--brown-900); font-size:1.05rem; }
.mp-wizard {
  background:var(--cream-50); border:1px solid var(--cream-200);
  border-radius:14px; padding:22px 22px 18px; margin-bottom:16px;
}
.mp-wiz-steps {
  display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap;
  position:relative;
}
.mp-wiz-step {
  flex:1; min-width:120px;
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:99px;
  background:var(--cream-100); border:1px solid var(--cream-200);
  color:var(--brown-600); font-size:0.74rem; font-weight:600;
  letter-spacing:0.02em; transition:var(--transition);
}
.mp-wiz-step b {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:var(--cream-200);
  color:var(--brown-700); font-size:0.78rem;
}
.mp-wiz-step.active {
  background:var(--brown-900); border-color:var(--brown-900);
  color:var(--cream-50);
}
.mp-wiz-step.active b { background:var(--accent); color:var(--brown-900); }
.mp-wiz-step.done { background:var(--cream-50); border-color:var(--accent-light); color:var(--accent-dark); }
.mp-wiz-step.done b { background:var(--accent-light); color:var(--brown-900); }
.mp-wiz-step span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mp-wiz-body { min-height:160px; margin-bottom:16px; }
.mp-wiz-question {
  font-family:'Outfit', sans-serif; font-size:1.1rem; font-weight:700;
  color:var(--brown-900); margin-bottom:8px;
}
.mp-wiz-help { font-size:0.86rem; color:var(--brown-600); line-height:1.55; margin-bottom:18px; }
.mp-wiz-radios { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.mp-wiz-radios label {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:12px 14px; background:#fff; border:1px solid var(--cream-200);
  border-radius:10px; font-size:0.9rem; color:var(--brown-900);
  transition:var(--transition);
}
.mp-wiz-radios label:hover { border-color:var(--accent-light); }
.mp-wiz-radios input[type="radio"] { accent-color:var(--accent); }

.mp-wiz-if { padding-top:6px; }

.mp-wiz-line {
  background:#fff; border:1px solid var(--cream-200); border-radius:11px;
  padding:14px 16px; margin-bottom:12px;
}
.mp-wiz-line:last-child { margin-bottom:0; }
.mp-wiz-label {
  font-size:0.82rem; font-weight:700; letter-spacing:0.04em;
  color:var(--accent-dark); text-transform:uppercase; margin-bottom:10px;
}

.mp-wiz-nav {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding-top:14px; border-top:1px solid var(--cream-200);
}
.mp-wiz-nav .pf-mini-btn { padding:10px 18px; }
.mp-wiz-nav .btn-primary { padding:11px 22px; }

.mp-review-head {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; margin-bottom:14px;
}
.mp-review-intro { font-size:0.86rem; color:var(--brown-600); margin:0; }
.mp-review-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ---- Mes objectifs ---- */
.pf-goals {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px; margin-top:18px; margin-bottom:18px;
}
.pf-goal {
  background:var(--cream-50); border:1px solid var(--cream-200);
  border-radius:14px; padding:18px 20px;
  transition:border-color var(--transition);
}
.pf-goal:hover { border-color:var(--accent-light); }
.pf-goal.done { border-color:#9bb89c; background:#f5f8f3; }
.pf-goal-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.pf-goal-ico {
  width:42px; height:42px; border-radius:11px;
  background:var(--cream-100); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pf-goal-ico svg { width:22px; height:22px; }
.pf-goal-body { flex:1; min-width:0; }
.pf-goal-name {
  font-size:0.86rem; font-weight:700; color:var(--brown-900);
  letter-spacing:0.02em;
}
.pf-goal-amt { font-size:0.79rem; color:var(--brown-700); margin-top:3px; }
.pf-goal-of { color:var(--brown-600); font-weight:500; }
.pf-goal-hint { color:var(--brown-600); font-style:italic; }
.pf-goal-pct {
  font-size:1.1rem; font-weight:700; color:var(--accent-dark);
  flex-shrink:0;
}
.pf-goal.done .pf-goal-pct { color:#3f6b43; }
.pf-goal-bar {
  height:8px; background:var(--cream-200); border-radius:99px;
  overflow:hidden;
}
.pf-goal-bar i {
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), var(--accent-dark));
  border-radius:99px;
  transition:width 0.9s cubic-bezier(0.22,1,0.36,1);
}
.pf-goal.done .pf-goal-bar i {
  background:linear-gradient(90deg, #7ea683, #5a9d63);
}

/* ---- Mon Burj Khalifa (gamification) ---- */
.pf-burj {
  background: linear-gradient(135deg, var(--brown-900) 0%, var(--brown-700) 100%);
  color: var(--cream-50);
  border-radius: 20px;
  padding: 28px 32px;
  margin: 28px 0;
  position: relative;
  overflow: hidden;
}
.bk-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:14px; flex-wrap:wrap; }
.bk-head h2 { color: var(--cream-50); font-size:1.4rem; margin:0; }
.bk-badge {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: var(--brown-900);
  padding: 9px 18px; border-radius: 99px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(154,123,79,0.4);
}
.bk-wrap { display:grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center; }
.bk-vis { display:flex; justify-content:center; }
.bk-vis svg { width:100%; max-width:220px; height:auto; display:block; border-radius:14px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.bk-side { display:flex; flex-direction:column; gap:18px; }
.bk-stats { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-stat { background: rgba(255,255,255,0.07); padding: 16px 18px; border-radius: 12px; }
.bk-stat-num { font-size: 1.9rem; font-weight: 700; color: var(--cream-50); line-height:1; }
.bk-stat-lbl { font-size: 0.7rem; color: var(--accent-light); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.bk-progress-lbl { font-size: 0.82rem; color: var(--accent-light); margin-bottom: 8px; }
.bk-progress-bar { background: rgba(255,255,255,0.1); border-radius: 99px; height: 8px; overflow: hidden; }
.bk-progress-bar i { display:block; height:100%; background: var(--accent); border-radius: 99px; transition: width 0.6s; width:0; }
.bk-btn {
  width: 100%; padding: 14px 18px;
  background: var(--accent); color: var(--brown-900);
  border: none; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; font-weight: 700;
  border-radius: 99px;
  transition: background var(--transition), transform var(--transition);
}
.bk-btn:hover:not(:disabled) { background: var(--accent-light); transform: translateY(-1px); }
.bk-btn:disabled { background: rgba(255,255,255,0.12); color: var(--accent-light); cursor: default; }
.bk-hint { font-size: 0.78rem; color: rgba(255,255,255,0.55); text-align: center; margin: 0; }
@media (max-width: 720px) {
  .bk-wrap { grid-template-columns: 1fr; }
  .bk-vis { order: -1; }
}
.pf-head { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.pf-head h1 { font-size:clamp(1.6rem,3vw,2.2rem); }
.pf-head .pf-sub { color:var(--brown-600); font-size:0.93rem; margin-top:2px; }
.pf-logout { font-size:0.84rem; font-weight:600; color:var(--brown-700); border:1px solid var(--cream-300); padding:9px 16px; border-radius:999px; cursor:pointer; background:#fff; transition:var(--transition); }
.pf-logout:hover { border-color:var(--accent); color:var(--brown-900); }
/* ============ DASHBOARD ESPACE CLIENT — refonte compact, look produit ============ */
.pf-summary {
  background: linear-gradient(135deg, var(--brown-900) 0%, #3a2c1e 100%);
  border-radius: 18px;
  padding: 22px 28px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-bottom: 26px;
  color: var(--accent-light);
  position: relative; overflow: hidden;
}
.pf-summary::before {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(154,123,79,0.18), transparent 70%);
  pointer-events: none;
}
.pf-donut { flex-shrink:0; position:relative; width:110px; height:110px; z-index:1; }
.pf-donut svg { transform:rotate(-90deg); display:block; }
.pf-donut-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pf-donut-pct { font-size:1.5rem; font-weight:700; color:var(--cream-50); line-height:1; }
.pf-donut-cap { font-size:0.6rem; color:var(--cream-200); text-transform:uppercase; letter-spacing:0.09em; margin-top:4px; }
.pf-summary-stats { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; min-width:240px; position:relative; z-index:1; }
.pf-stat-lbl { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent-light); margin-bottom:4px; opacity:0.85; }
.pf-stat-val { font-size:1.1rem; font-weight:700; color:var(--cream-50); }
.pf-sec { display:flex; justify-content:space-between; align-items:center; margin:32px 0 16px; flex-wrap:wrap; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--cream-200); }
.pf-sec h2 { font-size:1.1rem; color:var(--brown-900); letter-spacing:-0.005em; }
.pf-add-btn { display:inline-flex; align-items:center; gap:7px; background:var(--brown-900); color:var(--cream-50); border:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:0.82rem; padding:9px 16px; border-radius:99px; transition:var(--transition); }
.pf-add-btn:hover { background:#3a2c1e; transform:translateY(-1px); }
.pf-add-btn svg { width:14px; height:14px; }

/* ===== Grille de biens : carte compact + look produit ===== */
.pf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.pf-card {
  background:#fff;
  border:1px solid var(--cream-200);
  border-radius:14px;
  padding:18px 20px;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  display:flex; flex-direction:column;
}
.pf-card:hover { box-shadow: 0 8px 24px rgba(42,31,21,0.07); border-color: var(--cream-300); }

/* Header carte : ring + titres, compact */
.pf-card-top { display:flex; gap:14px; align-items:center; }
.pf-card-ring { flex-shrink:0; width:58px; height:58px; position:relative; color:var(--brown-800); }
.pf-card-ring svg { transform:rotate(-90deg); display:block; }
.pf-card-ring-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:800; color:var(--brown-900); letter-spacing:-0.01em; }
.pf-card-titles { flex:1; min-width:0; }
.pf-card-titles h3 { font-size:1.02rem; margin-bottom:2px; line-height:1.25; color:var(--brown-900); letter-spacing:-0.01em; }
.pf-card-meta { font-size:0.78rem; color:var(--brown-600); margin-bottom:4px; }
.pf-liv-badge { display:inline-block; font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:2px 8px; border-radius:99px; }
.pf-liv-badge.construction { background: rgba(154,123,79,0.15); color: var(--accent-dark); }
.pf-liv-badge.livre { background: rgba(74,124,94,0.15); color: #3a6b4d; }

/* Figures : 3 stats compactes en ligne, séparées */
.pf-card-figs {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:0;
  margin:14px 0 0;
  padding: 12px 0;
  border-top: 1px solid var(--cream-200);
  border-bottom: 1px solid var(--cream-200);
}
.pf-card-figs > div { padding: 0 12px; border-right: 1px solid var(--cream-200); text-align: center; }
.pf-card-figs > div:last-child { border-right: 0; }
.pf-card-figs > div:first-child { padding-left: 0; }
.pf-card-fig-lbl { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--brown-600); }
.pf-card-fig-val { font-size:0.92rem; font-weight:700; color:var(--brown-900); margin-top:3px; letter-spacing:-0.01em; }

/* Actions : ligne propre avec un bouton primaire + secondaires + icônes */
.pf-card-actions {
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:12px;
  align-items: center;
}
.pf-mini-btn {
  background:#fff; border:1px solid var(--cream-300); border-radius:8px;
  padding:8px 12px; font-family:inherit; font-size:0.78rem; font-weight:600;
  color:var(--brown-700); cursor:pointer; transition:var(--transition);
  white-space:nowrap; display:inline-flex; align-items:center;
}
.pf-mini-btn:hover { border-color:var(--brown-700); color:var(--brown-900); }
.pf-mini-btn-primary {
  background: var(--brown-900); color: var(--cream-50); border-color: var(--brown-900);
}
.pf-mini-btn-primary:hover { background: #3a2c1e; color: var(--cream-50); }
.pf-mini-btn.danger { border-color:var(--cream-300); color:var(--brown-600); }
.pf-mini-btn.danger:hover { border-color:#c44; color:#c44; }
.pf-icon-btn {
  background:#fff; border:1px solid var(--cream-300); border-radius:8px;
  width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--brown-600); cursor:pointer; transition:var(--transition);
  margin-left: auto;
}
.pf-icon-btn + .pf-icon-btn { margin-left: 4px; }
.pf-icon-btn:hover { border-color:var(--brown-700); color:var(--brown-900); }
.pf-icon-btn.danger:hover { border-color:#c44; color:#c44; }

/* Liste des échéances : header de section + lignes condensées + scroll si trop long */
.pf-ech-list {
  margin-top:14px;
  display:none;
  background: var(--cream-50);
  border-radius: 10px;
  border: 1px solid var(--cream-200);
  overflow: hidden;
}
.pf-ech-list.open { display:block; }
.pf-ech-list-head {
  background: var(--cream-100);
  padding: 8px 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown-700);
  border-bottom: 1px solid var(--cream-200);
}
.pf-ech {
  display:grid;
  grid-template-columns: 24px 1fr auto;
  align-items:center; gap:12px;
  padding:10px 14px;
  border-bottom: 1px solid var(--cream-200);
  transition: background 0.15s ease;
}
.pf-ech:last-child { border-bottom: 0; }
.pf-ech:hover { background: #fff; }
.pf-ech-check {
  width:22px; height:22px; border-radius:6px;
  border:1.5px solid var(--cream-300);
  flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#fff; transition:var(--transition);
  padding:0;
}
.pf-ech-check.done { background:var(--brown-900); border-color:var(--brown-900); }
.pf-ech-check svg { width:12px; height:12px; color:#fff; display:none; }
.pf-ech-check.done svg { display:block; }
.pf-ech-body { flex:1; min-width:0; }
.pf-ech-lib { font-size:0.85rem; color:var(--brown-900); font-weight:600; letter-spacing:-0.005em; }
.pf-ech-lib.done { text-decoration:line-through; color:var(--brown-500, #8a7558); font-weight:500; }
.pf-ech-date { font-size:0.72rem; color:var(--brown-600); margin-top:1px; }
.pf-ech-amt { font-weight:700; font-size:0.85rem; color:var(--brown-900); white-space:nowrap; font-variant-numeric: tabular-nums; }
.pf-ech-badge {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px;
  vertical-align: 2px;
  margin-left: 4px;
}
.pf-ech-badge.paid  { background: rgba(74,124,94,0.16);  color: #3a6b4d; }
.pf-ech-badge.early { background: rgba(74,124,94,0.22);  color: #2b5740; border: 1px solid rgba(74,124,94,0.45); }
.pf-ech-badge.late  { background: rgba(196,90,74,0.16);  color: #a8442f; }

/* ===== Modale Mise en vente / Mise en location ===== */
.vl-section { margin-top: 18px; }
.vl-section + .vl-section { padding-top: 16px; border-top: 1px solid var(--cream-200); }
.vl-section-title {
  font-size: 0.95rem; font-weight: 700; color: var(--brown-900);
  margin-bottom: 8px; letter-spacing: -0.005em;
}
.vl-section-desc {
  font-size: 0.82rem; color: var(--brown-600); margin-bottom: 10px; line-height: 1.5;
}
.vl-label-mini {
  display: block;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--brown-600); margin-bottom: 5px; font-weight: 600;
}
.pf-input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--cream-300); border-radius: 10px;
  font-family: inherit; font-size: 0.92rem; color: var(--brown-900);
  background: #fff;
  transition: var(--transition);
  box-sizing: border-box;
}
.pf-input:focus { outline: none; border-color: var(--brown-700); }
.vl-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-top: 6px;
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 10px; cursor: pointer; font-size: 0.88rem;
  color: var(--brown-800); line-height: 1.4;
  transition: var(--transition);
}
.vl-check:hover { border-color: var(--brown-600); }
.vl-check input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--brown-900);
}
.vl-check input[type="checkbox"]:checked + span strong {
  color: var(--brown-900);
}
.pf-empty { text-align:center; background:var(--cream-50); border:1.5px dashed var(--cream-300); border-radius:18px; padding:54px 30px; }
.pf-empty-icon { width:76px; height:76px; margin:0 auto 20px; border-radius:50%; background:var(--cream-100); display:flex; align-items:center; justify-content:center; color:var(--accent-dark); }
.pf-empty h3 { font-size:1.2rem; margin-bottom:8px; }
.pf-empty p { color:var(--brown-600); margin-bottom:22px; max-width:380px; margin-left:auto; margin-right:auto; }
.pf-modal-ov { position:fixed; inset:0; background:rgba(42,31,21,0.55); display:none; align-items:flex-start; justify-content:center; padding:40px 18px; z-index:300; overflow-y:auto; }
.pf-modal-ov.open { display:flex; }
.pf-modal { background:var(--cream-50); border-radius:20px; width:100%; max-width:580px; padding:32px; }
.pf-modal h2 { font-size:1.3rem; margin-bottom:4px; }
.pf-modal-sub { color:var(--brown-600); font-size:0.88rem; margin-bottom:22px; }
.pf-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pf-plan-head { display:flex; justify-content:space-between; align-items:center; margin:24px 0 10px; }
.pf-plan-head h4 { font-size:1rem; }
.pf-plan-add { background:none; border:1px solid var(--cream-300); border-radius:8px; padding:7px 12px; font-family:inherit; font-size:0.8rem; font-weight:600; color:var(--brown-700); cursor:pointer; }
.pf-plan-add:hover { border-color:var(--accent); color:var(--brown-900); }
.pf-plan-row { display:grid; grid-template-columns:1fr 0.95fr 0.78fr 30px; gap:8px; margin-bottom:8px; align-items:center; }
.pf-plan-row input, .pf-plan-row select { padding:10px; border:1px solid var(--cream-300); border-radius:8px; font-family:inherit; font-size:0.84rem; color:var(--brown-900); background:#fff; width:100%; }
.pf-plan-row input:focus, .pf-plan-row select:focus { outline:none; border-color:var(--accent); }
.pf-plan-row .mp-val { display:flex; gap:6px; }
.pf-plan-row .mp-val .mp-amt { flex:1; min-width:0; }
.pf-plan-row .mp-val .mp-unit { width:64px; flex-shrink:0; padding:10px 6px; }
.pf-ech-pct { font-weight:700; color:var(--accent-dark); }
.pf-plan-del { background:none; border:none; color:var(--brown-600); cursor:pointer; font-size:1.3rem; line-height:1; padding:0; }
.pf-plan-del:hover { color:var(--red); }
.pf-modal-actions { display:flex; gap:10px; margin-top:26px; }
.pf-modal-actions .btn-primary, .pf-modal-actions .pf-mini-btn { flex:1; justify-content:center; }

/* === PAGE DUBAI 2040 (enrichie) === */
.d2040-title { font-size: 1.35rem; margin: 42px 0 16px; }
.d2040-intro { color: var(--brown-700); font-size: 0.97rem; line-height: 1.7; margin-bottom: 20px; max-width: 730px; }
.d2040-figs { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.d2040-fig { background:var(--brown-900); border-radius:var(--radius-lg); padding:26px 18px; text-align:center; }
.d2040-fig-num { font-size:1.9rem; font-weight:700; color:var(--accent-light); line-height:1; }
.d2040-fig-txt { font-size:0.8rem; color:var(--cream-200); margin-top:9px; line-height:1.45; }
.d2040-centres { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.d2040-centre { background:var(--cream-50); border:1px solid var(--cream-200); border-radius:var(--radius-lg); padding:24px; transition:var(--transition); }
.d2040-centre:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.d2040-centre-tag { display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--accent-dark); background:var(--cream-100); padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.d2040-centre h4 { font-size:1.1rem; margin-bottom:8px; }
.d2040-centre p { font-size:0.88rem; color:var(--brown-700); line-height:1.6; }
@media(max-width:760px){ .d2040-figs{ grid-template-columns:repeat(2,1fr); } }

/* === GRAPHIQUES DUBAI 2040 === */
.g-chart { background:var(--cream-50); border:1px solid var(--cream-200); border-radius:var(--radius-lg); padding:32px 34px; }
.g-bar { margin-bottom:20px; }
.g-bar:last-child { margin-bottom:0; }
.g-bar-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.g-bar-lbl { font-size:0.92rem; font-weight:600; color:var(--brown-900); }
.g-bar-val { font-size:1.1rem; font-weight:700; color:var(--accent-dark); }
.g-bar-track { height:15px; background:var(--cream-200); border-radius:999px; overflow:hidden; }
.g-bar-fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#b89668,var(--accent-dark)); transition:width 1.3s cubic-bezier(0.22,1,0.36,1); }
.g-caption { font-size:0.82rem; color:var(--brown-600); margin-top:20px; font-style:italic; line-height:1.6; }
.g-donut-block { display:flex; align-items:center; gap:42px; flex-wrap:wrap; background:var(--brown-900); border-radius:var(--radius-lg); padding:38px 44px; }
.g-donut { flex-shrink:0; }
.g-donut-text { flex:1; min-width:250px; }
.g-donut-text h3 { color:var(--cream-50); font-size:1.4rem; margin-bottom:12px; }
.g-donut-text p { color:var(--cream-200); font-size:0.96rem; line-height:1.75; }
.g-radial { max-width:430px; width:100%; height:auto; margin:6px auto 0; display:block; }

/* === PAGE TRANSACTIONS (ventes DLD) === */
.tx-control { display:flex; align-items:center; gap:14px; margin:6px 0 22px; flex-wrap:wrap; }
.tx-control label { font-size:0.85rem; font-weight:600; color:var(--brown-700); }
.tx-control select { padding:11px 15px; border:1px solid var(--cream-300); border-radius:var(--radius); font-family:inherit; font-size:0.92rem; color:var(--brown-900); background:#fff; min-width:230px; cursor:pointer; }
.tx-chart-card { background:var(--cream-50); border:1px solid var(--cream-200); border-radius:var(--radius-lg); padding:28px 30px; margin-top:8px; }
.tx-chart-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.tx-chart-head h3 { font-size:1.1rem; }
.tx-chart-hint { font-size:0.78rem; color:var(--brown-600); }
.tx-bars { display:flex; align-items:flex-end; gap:4px; height:190px; }
.tx-bar { flex:1 1 0; min-width:0; background:var(--cream-300); border-radius:4px 4px 0 0; cursor:pointer; transition:background var(--transition); }
.tx-bar:hover { background:var(--accent-light); }
.tx-bar.sel { background:linear-gradient(180deg,#b89668,var(--accent-dark)); }
.tx-axis { display:flex; justify-content:space-between; margin-top:10px; font-size:0.73rem; color:var(--brown-600); }

.tx-line { width:100%; height:auto; display:block; }

/* === HARMONISATION PAGE D ACCUEIL === */
/* Rythme vertical regulier et alternance propre des fonds */
#about, #timeline, #projects, #news, #map { padding: 100px 0; }
#about    { background: var(--cream-50); }
#timeline { background: var(--cream-100); }
#projects { background: var(--cream-50); }
#news     { background: var(--cream-100); }
#map      { background: var(--cream-50); }
@media (max-width: 700px) {
  #about, #timeline, #projects, #news, #map { padding: 66px 0; }
}
.timeline-cta { text-align: center; margin-top: 46px; }

/* ===================== ANALYSES DE PROJETS (vidéos) ===================== */
.av-h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--brown-900); margin: 54px 0 6px; }
.av-h2:first-of-type { margin-top: 40px; }

.av-criteres { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
               gap: 18px; margin-top: 26px; }
.av-critere { background: var(--cream-50); border: 1px solid var(--cream-200);
              border-radius: 16px; padding: 24px 22px; }
.av-crit-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--cream-100);
               display: flex; align-items: center; justify-content: center;
               color: var(--accent-dark); margin-bottom: 14px; }
.av-crit-ico svg { width: 24px; height: 24px; }
.av-critere h4 { font-size: 1.02rem; color: var(--brown-900); margin-bottom: 6px; }
.av-critere p { font-size: 0.88rem; line-height: 1.5; color: var(--brown-600); }

.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
           gap: 24px; margin-top: 26px; }
.av-grid-empty { grid-template-columns: 1fr; }
.av-card { background: var(--cream-50); border: 1px solid var(--cream-200);
           border-radius: 18px; overflow: hidden; cursor: pointer;
           transition: transform var(--transition), box-shadow var(--transition); }
.av-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.av-thumb { position: relative; aspect-ratio: 16 / 9; background-size: cover;
            background-position: center; background-color: var(--cream-200); }
.av-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
           width: 66px; height: 66px; border-radius: 50%;
           background: rgba(42, 31, 21, 0.78); color: var(--cream-50);
           display: flex; align-items: center; justify-content: center;
           transition: transform var(--transition), background var(--transition); }
.av-card:hover .av-play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-dark); }
.av-play svg { width: 26px; height: 26px; margin-left: 3px; }
.av-dur { position: absolute; right: 12px; bottom: 12px; font-size: 0.76rem; font-weight: 600;
          color: var(--cream-50); background: rgba(42, 31, 21, 0.82);
          padding: 4px 10px; border-radius: 99px; }
.av-card-body { padding: 18px 20px 22px; }
.av-card-title { font-size: 1.06rem; font-weight: 600; color: var(--brown-900); }
.av-card-meta { font-size: 0.85rem; color: var(--brown-600); margin-top: 4px; }

.av-empty { text-align: center; padding: 56px 30px; background: var(--cream-50);
            border: 1px dashed var(--cream-300); border-radius: 18px; }
.av-empty-ico { width: 66px; height: 66px; border-radius: 16px; background: var(--cream-100);
                display: flex; align-items: center; justify-content: center;
                color: var(--accent-dark); margin: 0 auto 18px; }
.av-empty-ico svg { width: 32px; height: 32px; }
.av-empty h3 { font-size: 1.2rem; color: var(--brown-900); margin-bottom: 8px; }
.av-empty p { font-size: 0.92rem; line-height: 1.6; color: var(--brown-600);
              max-width: 480px; margin: 0 auto; }

.av-modal-ov { position: fixed; inset: 0; background: rgba(42, 31, 21, 0.78);
               display: none; align-items: center; justify-content: center;
               padding: 24px; z-index: 400; }
.av-modal-ov.open { display: flex; }
.av-modal { width: 100%; max-width: 960px; position: relative; }
.av-modal-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.av-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.av-modal-close { position: absolute; top: -52px; right: 0; width: 40px; height: 40px;
                  border-radius: 50%; border: none; cursor: pointer;
                  background: var(--cream-50); color: var(--brown-900);
                  font-size: 1.5rem; line-height: 1; }

/* ===== Cartes PDF (bibliothèque téléchargements) ===== */
.pdf-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 18px; overflow: hidden; color: inherit;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.pdf-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
  border-color: var(--accent-light);
}
.pdf-cover {
  position: relative; padding: 26px 24px 22px;
  background: linear-gradient(155deg, var(--cream-100) 0%, var(--cream-200) 100%);
  border-bottom: 1px solid var(--cream-200);
  min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end;
}
.pdf-tag {
  position: absolute; top: 16px; right: 16px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-dark);
  background: var(--cream-50); padding: 5px 10px; border-radius: 99px;
  border: 1px solid var(--cream-300);
}
.pdf-cover-doc {
  position: absolute; top: 18px; left: 22px;
  width: 36px; height: 36px; color: var(--accent-dark); opacity: 0.55;
}
.pdf-cover-doc svg { width: 100%; height: 100%; }
.pdf-cover-name {
  font-size: 1.5rem; font-weight: 700; color: var(--brown-900);
  line-height: 1.2; letter-spacing: -0.01em;
}
.pdf-cover-sub {
  font-size: 0.86rem; color: var(--brown-600); margin-top: 4px;
  letter-spacing: 0.02em;
}
.pdf-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.pdf-title { font-size: 0.98rem; font-weight: 600; color: var(--brown-900); line-height: 1.4; }
.pdf-meta { font-size: 0.82rem; color: var(--brown-600); }
.pdf-dl {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 700; color: var(--accent-dark);
  letter-spacing: 0.01em;
}
.pdf-dl span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--cream-50);
  font-size: 0.8rem; font-weight: 700;
}
.pdf-card:hover .pdf-dl span { background: var(--accent-dark); }

/* ===== Cartes "Note d'analyse" — magazine web ===== */
.ana-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 20px; overflow: hidden; color: inherit;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.ana-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
  border-color: var(--accent-light);
}
.ana-card-cover {
  position: relative; padding: 30px 28px 26px;
  background: linear-gradient(155deg, var(--brown-900) 0%, #3a2c1e 100%);
  color: var(--cream-50);
  min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.ana-card-cover::before {
  content: ""; position: absolute; right: -90px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(154,123,79,0.22), transparent 70%);
  pointer-events: none;
}
.ana-card-cover::after {
  content: ""; position: absolute; left: -70px; bottom: -110px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(154,123,79,0.12), transparent 70%);
  pointer-events: none;
}
.ana-card-tag {
  position: absolute; top: 18px; left: 22px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-light);
  z-index: 2;
}
.ana-card-score {
  position: absolute; top: 18px; right: 22px;
  display: flex; align-items: baseline; gap: 2px;
  /* Avant : accent (marron mid) + brown-900 = marron sur marron, illisible. */
  background: var(--cream-50); color: var(--brown-900);
  padding: 6px 14px; border-radius: 99px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.ana-card-score-num {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--brown-900);
}
.ana-card-score-out {
  font-size: 0.72rem; font-weight: 700; opacity: 0.7;
  color: var(--brown-700);
}
.ana-card-project {
  position: relative; z-index: 1;
  font-size: 1.7rem; font-weight: 700; color: var(--cream-50);
  line-height: 1.15; letter-spacing: -0.015em;
}
.ana-card-loc {
  position: relative; z-index: 1;
  font-size: 0.85rem; color: var(--accent-light);
  margin-top: 6px; letter-spacing: 0.02em;
}
.ana-card-body {
  padding: 22px 26px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.ana-card-verdict {
  display: inline-block; align-self: flex-start;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-dark);
  background: var(--cream-100); padding: 5px 12px; border-radius: 99px;
  border: 1px solid var(--cream-200); margin-bottom: 4px;
}
.ana-card-title {
  font-size: 1.02rem; font-weight: 600; color: var(--brown-900);
  line-height: 1.4;
}
.ana-card-date {
  font-size: 0.82rem; color: var(--brown-600);
}
.ana-card-cta {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 700; color: var(--accent-dark);
  letter-spacing: 0.01em;
}
.ana-card-cta span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--cream-50);
  font-size: 0.82rem; font-weight: 700;
  transition: transform var(--transition), background var(--transition);
}
.ana-card:hover .ana-card-cta span {
  background: var(--accent-dark); transform: translateX(3px);
}

/* ===================== À PROPOS — refonte boutique ===================== */
.ab-hero {
  display: grid; grid-template-columns: 0.78fr 1fr; gap: 56px;
  align-items: center; margin: 50px 0 70px;
}
.ab-portrait { position: relative; }
.ab-portrait-img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 22px; box-shadow: 0 30px 70px rgba(42,31,21,0.20);
  display: block;
}
.ab-portrait-placeholder {
  width: 100%; aspect-ratio: 4/5; border-radius: 22px;
  background: linear-gradient(160deg, var(--brown-700), var(--brown-900));
  color: var(--cream-50); font-family: 'Outfit', sans-serif;
  font-size: 5rem; font-weight: 700; letter-spacing: 0.05em;
  align-items: center; justify-content: center;
  box-shadow: 0 30px 70px rgba(42,31,21,0.20);
}
.ab-portrait-meta {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(42, 31, 21, 0.92); color: var(--cream-50);
  padding: 12px 18px; border-radius: 14px;
}
.ab-portrait-name { font-size: 0.96rem; font-weight: 700; letter-spacing: 0.01em; }
.ab-portrait-role {
  font-size: 0.72rem; color: var(--accent-light); margin-top: 3px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.ab-quote-block { position: relative; padding-left: 8px; }
.ab-quote-mark {
  font-size: 5.5rem; line-height: 0.8; color: var(--accent);
  opacity: 0.45; position: absolute; left: -14px; top: -22px;
  font-family: 'Outfit', sans-serif; font-weight: 700;
}
.ab-quote {
  font-size: clamp(1.25rem, 2.3vw, 1.85rem); line-height: 1.4;
  font-weight: 300; color: var(--brown-900); margin: 14px 0 32px;
  font-style: italic; letter-spacing: -0.005em;
}
.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ab-stat {
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 14px; padding: 20px 18px;
}
.ab-stat-num {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 700;
  color: var(--brown-900); letter-spacing: -0.01em; line-height: 1.1;
}
.ab-stat-lbl {
  font-size: 0.72rem; color: var(--brown-600); margin-top: 8px;
  text-transform: uppercase; letter-spacing: 0.09em; line-height: 1.4;
}

.ab-story {
  position: relative; max-width: 820px; margin: 30px auto 60px;
  padding-left: 38px;
}
.ab-story::before {
  content: ""; position: absolute; left: 5px; top: 30px; bottom: 30px;
  width: 1px; background: var(--cream-300);
}
.ab-chapter { position: relative; padding: 22px 0; }
.ab-chapter:not(:last-child) { border-bottom: 1px dashed var(--cream-200); }
.ab-chapter::before {
  content: ""; position: absolute; left: -38px; top: 34px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--cream-50);
  box-shadow: 0 0 0 1px var(--cream-300);
}
.ab-chapter-tag {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-dark);
  margin-bottom: 8px;
}
.ab-chapter h3 {
  font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--brown-900);
  margin-bottom: 10px;
}
.ab-chapter p {
  font-size: 1rem; line-height: 1.7; color: var(--brown-700); margin: 0;
}

.ab-manifesto {
  background: linear-gradient(135deg, var(--brown-900) 0%, var(--brown-700) 100%);
  color: var(--cream-50); border-radius: 24px;
  padding: 36px 50px; text-align: center;
  max-width: 820px; margin: 30px auto 70px;
  position: relative;
}
.ab-manifesto::before, .ab-manifesto::after {
  content: ""; position: absolute; top: 50%; width: 36px; height: 1px;
  background: var(--accent); opacity: 0.6;
}
.ab-manifesto::before { left: 30px; }
.ab-manifesto::after  { right: 30px; }
.ab-manifesto span {
  font-size: clamp(1.05rem, 1.9vw, 1.35rem); font-weight: 500;
  font-style: italic;
}

.ab-values { margin: 30px 0; }
.ab-values-head { text-align: center; margin-bottom: 36px; }
.ab-values-head h3 {
  font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--brown-900);
  margin-top: 12px;
}
.ab-values-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.ab-values-grid .ab-value {
  flex-direction: column; gap: 14px;
  padding: 22px 20px;
}
.ab-values-grid .ab-value-num { font-size: 1.5rem; }
.ab-values-grid .ab-value-body h4 { font-size: 0.95rem; line-height: 1.3; }
.ab-values-grid .ab-value-body p { font-size: 0.84rem; line-height: 1.5; }
@media (max-width: 1180px) {
  .ab-values-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-values-grid .ab-value:last-child { grid-column: 1 / -1; max-width: calc(50% - 7px); justify-self: center; }
}
@media (max-width: 640px) {
  .ab-values-grid { grid-template-columns: 1fr; }
  .ab-values-grid .ab-value:last-child { max-width: none; }
}
.ab-value {
  display: flex; gap: 18px; padding: 24px 26px;
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 18px;
  transition: transform var(--transition), border-color var(--transition);
}
.ab-value:hover { transform: translateY(-3px); border-color: var(--accent-light); }
.ab-value-num {
  font-size: 1.6rem; font-weight: 700; color: var(--accent);
  flex-shrink: 0; letter-spacing: -0.02em; line-height: 1;
}
.ab-value-body h4 {
  font-size: 1.02rem; font-weight: 700;
  color: var(--brown-900); margin-bottom: 6px;
}
.ab-value-body p {
  font-size: 0.92rem; line-height: 1.55;
  color: var(--brown-600); margin: 0;
}

.ab-signature {
  text-align: center; margin: 60px auto 0; max-width: 380px;
}
.ab-sign-line { height: 1px; background: var(--cream-300); margin-bottom: 20px; }
.ab-sign-name {
  font-size: 1.3rem; font-weight: 500; font-style: italic;
  color: var(--brown-900); letter-spacing: 0.01em;
}
.ab-sign-role {
  font-size: 0.8rem; color: var(--brown-600); margin-top: 8px;
  letter-spacing: 0.06em; text-transform: uppercase;
}

@media (max-width: 880px) {
  .ab-hero { grid-template-columns: 1fr; gap: 32px; margin: 30px 0 50px; }
  .ab-portrait-img, .ab-portrait-placeholder { aspect-ratio: 3/4; }
  .ab-stats { grid-template-columns: 1fr; }
  .ab-manifesto::before, .ab-manifesto::after { display: none; }
  .ab-manifesto { padding: 28px 24px; }
  .ab-story { padding-left: 24px; }
  .ab-chapter::before { left: -24px; }
  .ab-story::before { left: -1px; }
}

/* ===================== À propos plateforme DXBIZ ===================== */
.ab-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 50px 0 40px;
}
.ab-stat-big {
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 20px; padding: 36px 26px; text-align: center;
  transition: transform var(--transition), border-color var(--transition);
}
.ab-stat-big:hover { transform: translateY(-3px); border-color: var(--accent-light); }
.ab-stat-big-num {
  font-size: clamp(2.6rem, 5.5vw, 4rem); font-weight: 700;
  color: var(--brown-900); letter-spacing: -0.02em; line-height: 1;
  display: inline-flex; align-items: baseline; justify-content: center;
}
.ab-stat-suf {
  font-size: 0.42em; color: var(--accent-dark); margin-left: 6px;
  font-weight: 700; letter-spacing: 0;
}
.ab-stat-big-lbl {
  font-size: 0.82rem; color: var(--brown-600); margin-top: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
  font-weight: 600;
}

.ab-pf-text { max-width: 780px; margin: 0 auto 60px; }
.ab-pf-text p {
  font-size: 1.04rem; line-height: 1.78; color: var(--brown-700);
  margin-bottom: 20px;
}
.ab-pf-text p:last-child { margin-bottom: 0; }

.ab-founder {
  display: grid; grid-template-columns: auto 1fr; gap: 32px;
  align-items: center; max-width: 780px; margin: 70px auto 0;
  background: var(--cream-50); border: 1px solid var(--cream-200);
  border-radius: 22px; padding: 32px 36px;
}
.ab-founder-portrait { position: relative; width: 140px; height: 140px; }
.ab-founder-img {
  width: 140px; height: 140px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: 0 12px 30px rgba(42,31,21,0.18);
}
.ab-founder-placeholder {
  width: 140px; height: 140px; border-radius: 50%;
  background: linear-gradient(160deg, var(--brown-700), var(--brown-900));
  color: var(--cream-50); font-family: 'Outfit', sans-serif;
  font-size: 2.4rem; font-weight: 700; letter-spacing: 0.04em;
  align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(42,31,21,0.18);
}
.ab-founder-eyebrow {
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-dark);
  margin-bottom: 8px;
}
.ab-founder-body h3 {
  font-size: 1.4rem; color: var(--brown-900);
  margin-bottom: 12px; line-height: 1.2;
}
.ab-founder-body p {
  font-size: 0.96rem; line-height: 1.65; color: var(--brown-700);
  margin: 0 0 16px;
}
.ab-founder-link {
  font-size: 0.92rem; font-weight: 700; color: var(--accent-dark);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--transition), gap var(--transition);
}
.ab-founder-link:hover { color: var(--accent); gap: 10px; }

/* ===== Lettre du fondateur — carte cliquable simple ===== */
.founder-letter-card {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: var(--transition);
  max-width: 420px;
}
.founder-letter-card:hover {
  border-color: var(--brown-700);
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(42,31,21,0.08);
}
.founder-letter-text { flex: 1; min-width: 0; }
.founder-letter-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brown-600);
  margin-bottom: 4px;
}
.founder-letter-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem; font-weight: 600;
  color: var(--brown-900);
  letter-spacing: -0.005em;
}
.founder-letter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brown-900); color: var(--cream-50);
  padding: 9px 16px; border-radius: 99px;
  font-size: 0.84rem; font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.founder-letter-btn span { transition: transform var(--transition); }
.founder-letter-card:hover .founder-letter-btn { background: #3a2c1e; }
.founder-letter-card:hover .founder-letter-btn span { transform: translateX(3px); }

/* L'ancienne enveloppe — désactivée (au cas où le HTML reste quelque part) */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

.envelope-link {
  display: inline-flex; align-items: center; gap: 24px;
  text-decoration: none; color: inherit;
  margin-top: 6px;
}

.envelope {
  position: relative;
  width: 180px; height: 116px;
  background: linear-gradient(155deg, #fbf5e9 0%, #f0e8d4 100%);
  border: 1px solid #ddd2b9;
  border-radius: 4px;
  box-shadow:
    0 1px 0 #e6dfd1,
    0 12px 30px rgba(42,31,21,0.12),
    0 4px 10px rgba(42,31,21,0.06);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
  overflow: hidden;
}

/* Le rabat triangulaire en haut */
.envelope-flap {
  position: absolute; top: 0; left: 0; right: 0;
  height: 0;
  border-style: solid;
  border-width: 56px 90px 0 90px;
  border-color: #d4c8ad transparent transparent transparent;
  transform-origin: top center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.05));
}

/* Sceau de cire en accent */
.envelope-seal {
  position: absolute; left: 50%; top: 50%;
  width: 38px; height: 38px;
  transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #b08a55 0%, var(--accent-dark) 70%, #5a4128 100%);
  color: var(--cream-50);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Caveat', cursive;
  font-size: 1.45rem; font-weight: 700;
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,0.25),
    inset 0 2px 3px rgba(255,255,255,0.18),
    0 2px 5px rgba(0,0,0,0.18);
  z-index: 4;
  transition: transform 0.4s ease;
}

/* Faux timbre en haut à droite */
.envelope-stamp {
  position: absolute; top: 7px; right: 7px;
  width: 36px; height: 44px;
  background: #fff;
  border: 1px dashed #c9b18a;
  border-radius: 2px;
  font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.2;
  padding: 4px 2px;
  z-index: 5;
  text-transform: uppercase;
}
.envelope-stamp span {
  font-size: 0.4rem; font-weight: 500;
  color: var(--brown-600);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

/* Lignes adresse */
.envelope-line {
  position: absolute; left: 14px;
  height: 2px; background: var(--brown-600); opacity: 0.18;
  border-radius: 2px; z-index: 2;
}
.envelope-line { bottom: 22px; width: 80px; }
.envelope-line.short { bottom: 14px; width: 56px; }

/* Hover : l'enveloppe se soulève, le rabat s'ouvre */
.envelope-link:hover .envelope {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow:
    0 1px 0 #e6dfd1,
    0 22px 50px rgba(42,31,21,0.18),
    0 10px 20px rgba(42,31,21,0.10);
}
.envelope-link:hover .envelope-flap {
  transform: rotateX(180deg) translateY(-1px);
}
.envelope-link:hover .envelope-seal {
  transform: translate(-50%, -50%) rotate(2deg) scale(1.08);
}

.envelope-text {
  display: flex; flex-direction: column;
}
.envelope-tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brown-600);
  margin-bottom: 6px;
}
.envelope-title {
  font-family: 'Caveat', cursive;
  font-size: 2rem; font-weight: 700;
  color: var(--brown-900);
  line-height: 1;
  letter-spacing: 0.005em;
  margin-bottom: 8px;
}
.envelope-cta {
  font-size: 0.85rem; font-weight: 700;
  color: var(--accent-dark);
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--transition), gap var(--transition);
}
.envelope-cta span {
  display: inline-block;
  transition: transform var(--transition);
}
.envelope-link:hover .envelope-cta { color: var(--accent); gap: 10px; }
.envelope-link:hover .envelope-cta span { transform: translateX(3px); }

@media (max-width: 540px) {
  .envelope-link { flex-direction: column; align-items: flex-start; gap: 18px; }
  .envelope { width: 160px; height: 104px; }
  .envelope-flap { border-width: 50px 80px 0 80px; }
}

@media (max-width: 720px) {
  .ab-stats-row { grid-template-columns: 1fr; gap: 14px; margin: 36px 0; }
  .ab-stat-big { padding: 28px 22px; }
  .ab-founder {
    grid-template-columns: 1fr; text-align: center;
    padding: 28px 24px; gap: 22px;
  }
  .ab-founder-portrait { margin: 0 auto; }
  .ab-founder-link { justify-content: center; }
}

/* =================================================================
   MOBILE EXPERIENCE V2 — refonte juin 2026 (vraiment propre cette fois)
   Tout ce qui suit est gated par @media (max-width: 768px).
   Aucune règle n'est appliquée au-dessus de 768px : la version PC
   reste strictement inchangée.

   Principes :
   - typo et padding visiblement réduits
   - 1 colonne partout, jamais de scroll horizontal
   - cartes compactes, marges respirables mais pas grasses
   - sections moins gourmandes en air vertical
   ================================================================= */
@media (max-width: 768px) {

  /* ---- Base : reset & sizing global ---- */
  html { -webkit-text-size-adjust: 100%; font-size: 15px; }
  body { overflow-x: hidden; line-height: 1.55; }
  .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
  section { padding: 40px 0 !important; scroll-margin-top: 64px !important; }
  h1 { letter-spacing: -0.015em !important; }
  h2 { font-size: clamp(1.35rem, 5vw, 1.7rem) !important; line-height: 1.2 !important; margin-bottom: 12px !important; }
  h3 { font-size: 1.05rem !important; line-height: 1.3 !important; }
  h4 { font-size: 0.95rem !important; }
  p  { font-size: 0.94rem !important; line-height: 1.6 !important; }
  .section-header { margin-bottom: 32px !important; max-width: 100% !important; }
  .section-header h2 { font-size: clamp(1.4rem, 5.2vw, 1.8rem) !important; margin-bottom: 10px !important; }
  .section-header p { font-size: 0.92rem !important; line-height: 1.55 !important; }
  .section-eyebrow { font-size: 0.7rem !important; letter-spacing: 0.14em !important; margin-bottom: 10px !important; }

  /* ---- Nav : sticky propre + menu plein écran ---- */
  .nav { position: sticky !important; top: 0; z-index: 1000; background: var(--cream-50) !important; border-bottom: 1px solid var(--cream-200); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .nav-inner { padding: 10px 16px !important; }
  .nav-logo { font-size: 0.95rem !important; gap: 8px !important; }
  .nav-logo-mark { width: 28px !important; height: 28px !important; }
  .nav-burger { padding: 6px !important; }
  .nav-burger span { width: 22px !important; }

  .nav-links {
    display: none;
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--cream-50);
    flex-direction: column;
    padding: 20px 18px 100px !important;
    gap: 2px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none !important;
    border-bottom: none !important;
    z-index: 999;
  }
  .nav-links.open { display: flex !important; }
  .nav-links a {
    padding: 12px 10px !important;
    font-size: 0.94rem !important;
    border-bottom: 1px solid var(--cream-200);
    width: 100%;
  }
  .nav-links a.nav-cta {
    margin-top: 12px !important;
    background: var(--brown-900) !important;
    color: var(--cream-50) !important;
    border-radius: 10px !important;
    text-align: center !important;
    border-bottom: 0 !important;
    padding: 13px 14px !important;
  }

  .nav-dropdown { width: 100% !important; position: static !important; }
  .nav-dropdown-toggle {
    width: 100%; text-align: left;
    padding: 12px 10px !important;
    font-size: 0.94rem !important;
    border-bottom: 1px solid var(--cream-200);
    background: transparent !important;
    border-left: 0; border-right: 0; border-top: 0;
    color: var(--brown-700);
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
  }
  .nav-dropdown-toggle .nav-caret { transition: transform 0.25s ease; display: inline-block; }
  .nav-dropdown.open .nav-dropdown-toggle .nav-caret { transform: rotate(180deg); }
  /* On force le sous-menu en static et visible quand .nav-dropdown.open */
  .nav-dropdown-menu {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important; margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-width: 0 !important; width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height 0.3s ease, opacity 0.25s ease !important;
    visibility: visible !important;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    max-height: 800px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .nav-dropdown-menu a {
    padding: 11px 12px 11px 26px !important;
    font-size: 0.88rem !important;
    border-bottom: 1px solid var(--cream-100) !important;
    display: block !important;
    width: 100% !important;
    color: var(--brown-700) !important;
  }
  .nav-dropdown-menu a:last-child { border-bottom: 0 !important; }
  .nav-dropdown-menu a:hover, .nav-dropdown-menu a.active {
    background: var(--cream-100) !important;
    color: var(--brown-900) !important;
  }

  /* ---- Hero index ---- */
  .hero {
    min-height: auto !important;
    padding: 80px 16px 60px !important;
    display: block !important;
  }
  .hero-tagline {
    font-size: 0.92rem !important; line-height: 1.55 !important;
    margin: 22px auto 30px !important;
    max-width: 100% !important;
    opacity: 0.95 !important;
  }
  .hero-cta-group {
    flex-direction: column !important; gap: 10px !important;
    width: 100% !important; align-items: stretch !important;
    margin: 24px 0 0 !important;
  }
  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-secondary {
    width: 100% !important; justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important; font-size: 0.9rem !important;
  }
  .hero-scroll-hint { display: none !important; }

  /* ---- En-tête des pages Ressources (page-head) ---- */
  .page-head { padding: 70px 0 36px !important; }
  .page-head h1 { font-size: clamp(1.6rem, 6vw, 2rem) !important; margin-bottom: 10px !important; }
  .page-head p { font-size: 0.9rem !important; line-height: 1.55 !important; }
  .page-head-eyebrow { font-size: 0.68rem !important; margin-bottom: 10px !important; }

  /* ---- Boutons globaux ---- */
  .btn-primary, .btn-secondary {
    padding: 12px 18px !important;
    font-size: 0.9rem !important;
    border-radius: 99px !important;
  }

  /* ---- Section À propos ---- */
  .about { padding: 40px 0 !important; }
  .ab-pf-text p { font-size: 0.95rem !important; line-height: 1.6 !important; }
  .ab-values-grid, .ab-values-grid.three, .ab-values-grid.two { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ab-value { padding: 16px !important; }
  .ab-value-num { font-size: 0.9rem !important; }
  .ab-value h4 { font-size: 0.96rem !important; margin-bottom: 4px !important; }
  .ab-value p { font-size: 0.88rem !important; line-height: 1.5 !important; }
  .ab-founder { padding: 22px 18px !important; gap: 18px !important; }
  .ab-founder-img, .ab-founder-portrait { width: 90px !important; height: 90px !important; }
  .ab-founder h3 { font-size: 1.2rem !important; }
  .ab-founder p { font-size: 0.92rem !important; }
  .envelope-link { gap: 12px !important; }
  .envelope-title { font-size: 1.4rem !important; }
  /* Carte lettre du fondateur sur mobile : pleine largeur, bouton sous le texte */
  .founder-letter-card {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .founder-letter-btn {
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 16px !important;
  }
  .founder-letter-title { font-size: 0.98rem !important; }
  .founder-letter-tag { font-size: 0.66rem !important; }

  /* ---- Cartes en grille → 1 colonne partout ---- */
  .glossary-grid, .institutions-grid, .club-grid, .guide-grid,
  .partners-grid, .news-grid, .pdf-grid, .ana-grid,
  .fx-grid, .quartiers-grid, .promoteurs-grid,
  .timeline-grid, .ab-services-list, .footer-grid,
  .qz-grid, .pr-grid, .pf-grid, .av-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ---- Cartes quartiers & promoteurs (cover image + body) ---- */
  .qz-card-img, .pr-card-cover { aspect-ratio: 16/9 !important; }
  .qz-card-inner, .pr-card-inner { padding: 16px 18px 16px !important; }
  .qz-card h3, .pr-card h3 { font-size: 1.1rem !important; margin-bottom: 2px !important; }
  .qz-card-dev, .pr-card-tag { font-size: 0.72rem !important; margin-bottom: 10px !important; }
  .qz-card-pres, .pr-card-pres { font-size: 0.84rem !important; line-height: 1.5 !important; margin-bottom: 12px !important; }
  .qz-card-mini-stats, .pr-card-mini-stats { gap: 6px !important; padding-top: 10px !important; }
  .qz-card-ms-num, .pr-card-ms-num { font-size: 0.9rem !important; }
  .qz-card-ms-lbl, .pr-card-ms-lbl { font-size: 0.6rem !important; }
  .qz-card-cta, .pr-card-cta { font-size: 0.74rem !important; margin-top: 10px !important; }
  .pr-card-note strong { font-size: 1.2rem !important; }

  /* ---- Carte interactive Leaflet ---- */
  #dubaiMap { height: 320px !important; border-radius: 10px !important; }
  /* Bouton (collapsed) bien visible et petit */
  .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
    width: 38px !important; height: 38px !important;
    border-radius: 10px !important;
    padding: 0 !important;
  }
  .leaflet-control-layers-toggle {
    width: 38px !important; height: 38px !important;
    background-size: 20px 20px !important;
  }
  /* Panneau (expanded au tap) compact, max-width pour ne pas écraser la map */
  .leaflet-control-layers-expanded {
    min-width: 0 !important;
    max-width: 200px !important;
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
  }
  .leaflet-control-layers-expanded::before {
    font-size: 0.6rem !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }
  .leaflet-control-layers-overlays label { padding: 6px 8px !important; gap: 8px !important; margin: 1px -4px !important; }
  .leaflet-control-layers-selector { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; }
  .map-legend { gap: 10px !important; font-size: 0.74rem !important; margin-top: 14px !important; }
  .map-legend-dot { width: 10px !important; height: 10px !important; }

  /* ---- Formulaire de contact ---- */
  .form-wrap { padding: 18px 14px !important; border-radius: 12px !important; }
  .form-row, .form-row-double { grid-template-columns: 1fr !important; gap: 12px !important; }
  .form-step h3 { font-size: 1.05rem !important; }
  .form-step-desc { font-size: 0.86rem !important; }
  .form-label { font-size: 0.8rem !important; }
  .form-input, .form-textarea, .form-select { padding: 10px 12px !important; font-size: 0.92rem !important; }
  .form-radio-group { grid-template-columns: 1fr !important; gap: 8px !important; }
  .form-radio-label { padding: 12px !important; font-size: 0.88rem !important; }

  /* ---- Footer ---- */
  footer { padding: 36px 0 24px !important; }
  .footer-grid { gap: 22px !important; }
  .footer-col h5 { font-size: 0.88rem !important; margin-bottom: 10px !important; }
  .footer-col ul li, .footer-col ul li a { font-size: 0.88rem !important; }
  .footer-tagline { font-size: 0.88rem !important; }
  .footer-bottom { font-size: 0.78rem !important; line-height: 1.55 !important; padding-top: 18px !important; }

  /* ---- Drawer / Modale ---- */
  .modal-overlay { padding: 12px !important; align-items: flex-start !important; }
  .modal-content, .modal-content-wide { max-width: 100% !important; max-height: 92vh !important; margin-top: 30px !important; }
  .drawer { width: 92% !important; max-width: 380px !important; }
  .drawer-item { padding: 14px !important; }
  .drawer-item-title { font-size: 0.95rem !important; }
  .drawer-item-desc { font-size: 0.78rem !important; }

  /* ---- Chat bubble + panel ---- */
  .chat-bubble { width: 52px !important; height: 52px !important; bottom: 16px !important; right: 16px !important; }
  .chat-panel { width: 94% !important; right: 3% !important; left: 3% !important; bottom: 12px !important; max-height: 80vh !important; border-radius: 14px !important; }
  .chat-action-cards { grid-template-columns: 1fr !important; gap: 8px !important; }
  .chat-action-card { padding: 10px 12px !important; font-size: 0.86rem !important; }

  /* ---- Tables qui débordent : scroll horizontal contrôlé ---- */
  .ana-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .ana-table th, .ana-table td { font-size: 0.8rem !important; padding: 9px 11px !important; }

  /* ---- Page Guide (premium) ---- */
  .guide-sidebar {
    position: relative !important;
    width: 100% !important; height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--cream-200);
    padding: 12px 16px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
  }
  .guide-layout { display: block !important; }
  .guide-content { padding: 22px 16px !important; max-width: 100% !important; }
  .guide-chapter { margin-bottom: 36px !important; }
  .guide-chapter h2 { font-size: 1.25rem !important; margin-bottom: 14px !important; }
  .guide-chapter h3 { font-size: 1rem !important; margin: 18px 0 8px !important; }
  .guide-chapter p { font-size: 0.94rem !important; line-height: 1.65 !important; margin-bottom: 12px !important; }
  .guide-chapter .drop-cap { font-size: 2.8rem !important; line-height: 0.85 !important; margin-right: 6px !important; padding: 4px 0 0 !important; }
  .guide-toc a { font-size: 0.84rem !important; padding: 6px 8px !important; }
  .guide-toc-part { padding: 10px 0 !important; }
  #backToTop { width: 40px !important; height: 40px !important; bottom: 16px !important; right: 16px !important; }
  #readingProgress { height: 2.5px !important; }

  /* ---- Analyse de projet (RAW District, 113 Residences) ---- */
  .ana-hero { padding: 70px 0 30px !important; }
  .ana-hero h1 { font-size: clamp(1.7rem, 6vw, 2.1rem) !important; line-height: 1.1 !important; margin-bottom: 8px !important; }
  .ana-subtitle { font-size: 0.92rem !important; margin-bottom: 18px !important; }
  .ana-lede { font-size: 0.92rem !important; line-height: 1.55 !important; margin-bottom: 22px !important; }
  .ana-hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 22px !important; }
  .ana-stat { padding: 14px 12px !important; }
  .ana-stat-num { font-size: 1.05rem !important; }
  .ana-stat-lbl { font-size: 0.66rem !important; margin-top: 6px !important; }
  .ana-hero-actions { flex-direction: column !important; gap: 8px !important; }
  .ana-hero-actions .ana-btn { width: 100% !important; justify-content: center !important; padding: 12px 18px !important; font-size: 0.88rem !important; }
  .ana-main { padding: 40px 0 20px !important; }
  .ana-layout { grid-template-columns: 1fr !important; gap: 18px !important; }
  .ana-toc { position: relative !important; top: 0 !important; padding: 14px 16px !important; max-height: none !important; }
  .ana-toc-label { font-size: 0.65rem !important; margin-bottom: 10px !important; }
  .ana-toc a { padding: 6px 0 6px 10px !important; font-size: 0.8rem !important; }
  .ana-article section { margin-bottom: 36px !important; }
  .ana-article h2 { font-size: 1.3rem !important; margin-bottom: 16px !important; }
  .ana-article h3 { font-size: 0.96rem !important; }
  .ana-article p { font-size: 0.92rem !important; line-height: 1.6 !important; }
  .ana-verdict { padding: 22px 18px !important; border-radius: 14px !important; }
  .ana-score-card { flex-direction: column !important; gap: 8px !important; text-align: center !important; padding: 18px !important; }
  .ana-score-num { font-size: 2.4rem !important; }
  .ana-score-meta { font-size: 0.7rem !important; }
  .ana-rec-card { padding: 18px !important; }
  .ana-rec-tag { font-size: 0.62rem !important; padding: 5px 12px !important; }
  .ana-rec-title { font-size: 1.05rem !important; margin-bottom: 10px !important; }
  .ana-stats-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .ana-stat-card { padding: 12px !important; }
  .ana-stat-card-num { font-size: 0.95rem !important; }
  .ana-stat-card-lbl { font-size: 0.62rem !important; }
  .ana-numbered-card { padding: 14px !important; }
  .ana-numbered-num { font-size: 1.6rem !important; }
  .ana-numbered-title { font-size: 0.92rem !important; }
  .ana-numbered-body { font-size: 0.88rem !important; line-height: 1.55 !important; }
  .ana-kv { grid-template-columns: 1fr !important; }
  .ana-kv-k { padding: 10px 0 4px !important; border-bottom: 0 !important; font-size: 0.78rem !important; }
  .ana-kv-v { padding: 0 0 10px !important; font-size: 0.9rem !important; }
  .ana-cta-section { padding: 40px 0 !important; }
  .ana-cta-card { padding: 28px 22px !important; border-radius: 16px !important; }
  .ana-cta-card h2 { font-size: 1.3rem !important; }
  .ana-cta-card p { font-size: 0.9rem !important; }
  .ana-cta-card .ana-btn-primary { padding: 12px 22px !important; font-size: 0.9rem !important; }

  /* ---- Espace client ---- */
  .pf-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 20px !important; }
  .pf-head h1 { font-size: 1.35rem !important; }
  .pf-head .pf-sub { font-size: 0.85rem !important; }
  .pf-logout { align-self: stretch !important; text-align: center !important; padding: 9px 14px !important; font-size: 0.82rem !important; }
  .pf-summary { padding: 18px 20px !important; gap: 18px !important; flex-direction: column !important; align-items: center !important; }
  .pf-donut { width: 90px !important; height: 90px !important; }
  .pf-donut-pct { font-size: 1.25rem !important; }
  .pf-summary-stats { width: 100% !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 12px !important; text-align: center !important; }
  .pf-stat-val { font-size: 0.92rem !important; }
  .pf-stat-lbl { font-size: 0.58rem !important; }
  .pf-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pf-card { padding: 16px !important; }
  .pf-card-titles h3 { font-size: 0.96rem !important; }
  .pf-card-meta { font-size: 0.74rem !important; }
  .pf-card-figs { gap: 0 !important; padding: 10px 0 !important; }
  .pf-card-figs > div { padding: 0 8px !important; }
  .pf-card-fig-val { font-size: 0.86rem !important; }
  .pf-card-fig-lbl { font-size: 0.58rem !important; }
  .pf-card-actions { gap: 6px !important; }
  .pf-mini-btn { font-size: 0.74rem !important; padding: 7px 10px !important; }
  .pf-icon-btn { width: 30px !important; height: 30px !important; }
  .pf-sec { margin: 24px 0 14px !important; }
  .pf-sec h2 { font-size: 1rem !important; }
  .pf-add-btn { font-size: 0.78rem !important; padding: 8px 14px !important; }
  .pf-ech { padding: 9px 12px !important; gap: 10px !important; }
  .pf-ech-lib { font-size: 0.82rem !important; }
  .pf-ech-date { font-size: 0.68rem !important; }
  .pf-ech-amt { font-size: 0.8rem !important; }
  .pf-ech-list-head { padding: 7px 12px !important; font-size: 0.62rem !important; }
  .pf-modal-ov { padding: 14px 12px !important; align-items: flex-start !important; }
  .pf-modal {
    padding: 22px 18px !important;
    max-width: 95% !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }
  .pf-modal h2 { font-size: 1.15rem !important; }
  .pf-modal-sub { font-size: 0.82rem !important; }
  .pf-row2 { grid-template-columns: 1fr !important; }
  .vl-section-title { font-size: 0.9rem !important; }
  .vl-check { font-size: 0.82rem !important; padding: 9px 11px !important; }

  /* ---- Auth / connexion espace client ---- */
  .pf-auth { padding: 28px 20px !important; max-width: 100% !important; }
  .pf-auth h1 { font-size: 1.4rem !important; }

  /* ---- Burj Khalifa gamification ---- */
  .bk-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 10px !important; }
  .bk-stat-num { font-size: 1.2rem !important; }
  .bk-stat-lbl { font-size: 0.62rem !important; }
  .bk-vis svg { max-width: 170px !important; }

  /* ---- Simulateur ---- */
  .simulator-grid { grid-template-columns: 1fr !important; }
  .sim-form, .sim-results { padding: 18px 14px !important; }
  .sim-form { border-right: 0 !important; border-bottom: 1px solid var(--cream-200); }
  .sim-modes, .sim-modes.sim-modes-2 { grid-template-columns: 1fr !important; gap: 8px !important; }
  .sim-mode { padding: 12px 14px !important; font-size: 0.88rem !important; }
  .sim-label { font-size: 0.82rem !important; margin-bottom: 6px !important; }
  .sim-input { font-size: 0.92rem !important; padding: 10px 12px !important; }
  .sim-result-row { font-size: 0.88rem !important; padding: 10px 0 !important; }
  .sim-result-row .sim-result-label { font-size: 0.82rem !important; }

  /* ---- Quartiers (page liste) ---- */
  .qz-detail .qz-d-hero { padding: 26px 22px !important; border-radius: 16px !important; }
  .qz-detail .qz-d-hero h1 { font-size: 1.5rem !important; margin-bottom: 8px !important; }
  .qz-d-hero-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; }
  .qz-d-hs { padding: 12px 14px !important; }
  .qz-d-hs-num { font-size: 1rem !important; }
  .qz-d-hs-lbl { font-size: 0.6rem !important; }
  .qz-d-block { padding: 18px 16px !important; }
  .qz-d-block h2 { font-size: 1.15rem !important; }
  .qz-d-mkt { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .qz-d-mkt-card { padding: 14px 12px !important; }

  /* ---- Promoteurs (fiche détail) ---- */
  .pr-detail .pr-d-hero { padding: 26px 22px !important; border-radius: 16px !important; }
  .pr-detail .pr-d-hero h1 { font-size: 1.5rem !important; }
  .pr-detail .pr-d-hero-tag { font-size: 0.86rem !important; }
  .pr-d-hero-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pr-d-hs { padding: 12px 14px !important; }
  .pr-d-hs-num { font-size: 1rem !important; }
  .pr-d-block { padding: 18px 16px !important; }
  .pr-d-block h2 { font-size: 1.15rem !important; }
  .pr-d-bar { grid-template-columns: 90px 1fr 38px !important; gap: 8px !important; font-size: 0.72rem !important; }
  .pr-d-bar-value { font-size: 0.78rem !important; }

  /* ---- News / Actu cards ---- */
  .news-card { padding: 16px !important; }
  .news-card h3 { font-size: 1rem !important; }
  .news-card-excerpt { font-size: 0.86rem !important; line-height: 1.5 !important; }

  /* ---- Lettre fondateur ---- */
  .fl-wrap { padding: 50px 0 60px !important; }
  .fl-letter { padding: 32px 22px 44px !important; max-width: 100% !important; border-radius: 4px !important; }
  .fl-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding-bottom: 18px !important; margin-bottom: 22px !important; }
  .fl-date { text-align: left !important; }
  .fl-greeting { font-size: 1rem !important; }
  .fl-body p { font-size: 0.96rem !important; line-height: 1.7 !important; }
  .fl-sign-cursive { font-size: 2rem !important; }
  .fl-sign-role { font-size: 0.74rem !important; }
  .fl-ps { padding: 16px 18px !important; font-size: 0.88rem !important; }

  /* ---- Engagements (5 cartes alignées sur PC) ---- */
  .engagements-grid, .engagement-row, .ab-values-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ---- Partners marquee ---- */
  .partners-banner { padding-top: 28px !important; }
  .partners-title { font-size: 0.7rem !important; margin-bottom: 20px !important; }
  .partners-track { animation-duration: 38s !important; }
  .partners-track img { height: 24px !important; margin: 0 18px !important; }

  /* ---- FAQ ---- */
  .faq-question { font-size: 0.9rem !important; padding: 14px !important; line-height: 1.4 !important; }
  .faq-answer { font-size: 0.86rem !important; padding: 0 14px 14px !important; line-height: 1.55 !important; }
  .faq-category-title { font-size: 1.05rem !important; }

  /* ---- Glossaire ---- */
  .glossary-card { padding: 16px !important; }
  .glossary-term { font-size: 1rem !important; }
  .glossary-def { font-size: 0.86rem !important; line-height: 1.55 !important; }

  /* ---- Institutions ---- */
  .inst-card { padding: 16px !important; }
  .inst-acronym { font-size: 1rem !important; }
  .inst-role { font-size: 0.7rem !important; }
  .inst-name { font-size: 0.86rem !important; }
  .inst-desc { font-size: 0.82rem !important; line-height: 1.55 !important; }

  /* ---- Dubai 2040 page ---- */
  .d2040-hero h3 { font-size: 1.2rem !important; }
  .d2040-hero p { font-size: 0.92rem !important; }
  .d2040-figs { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .d2040-fig { padding: 14px 10px !important; }
  .d2040-fig-num { font-size: 1.2rem !important; }
  .d2040-fig-txt { font-size: 0.74rem !important; }
  .d2040-pillars { grid-template-columns: 1fr !important; gap: 10px !important; }
  .d2040-pillar { padding: 14px !important; }
  .d2040-pillar h4 { font-size: 0.92rem !important; }
  .d2040-pillar p { font-size: 0.82rem !important; }

  /* ---- CTA boutons en bas de section (faq-cta, etc.) ---- */
  .faq-cta { padding: 26px 18px !important; }
  .faq-cta h3 { font-size: 1.1rem !important; }
  .faq-cta p { font-size: 0.88rem !important; }

  /* =================================================================
     FILET DE SÉCURITÉ MOBILE — anti-overflow horizontal MINIMAL.
     On ne touche PAS aux grids/flex existants (sinon les stats partent
     en vrac). On bloque juste le scroll horizontal au niveau body.
     ================================================================= */
  html, body { max-width: 100vw !important; overflow-x: hidden !important; width: 100% !important; }
  img, video, iframe { max-width: 100% !important; height: auto; }
  /* Texte long qui pousse la largeur : ON cible UNIQUEMENT les p / li / td / th
     (pas les span/div sinon les badges et chiffres se cassent en plusieurs lignes) */
  p, li, td, th { word-wrap: break-word; overflow-wrap: break-word; }
  pre, code { white-space: pre-wrap !important; word-wrap: break-word; }
  .hero, .hero-bg, .hero-inner { max-width: 100vw !important; overflow-x: hidden !important; }

  /* ---- GUIDE : seul fix nécessaire = tables scrollables ---- */
  .guide-chapter table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem !important;
  }
  .guide-chapter th, .guide-chapter td { padding: 8px 10px !important; }
  /* Drop cap retiré sur mobile */
  .guide-chapter p.has-dropcap::first-letter {
    font-size: inherit !important; float: none !important;
    line-height: inherit !important; margin: 0 !important;
    padding: 0 !important; color: inherit !important;
    font-family: inherit !important;
  }

  /* ---- ANALYSE : tableaux scrollables horizontalement avec alignement préservé ---- */
  .ana-article .ana-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 14px 0 !important;
    border-radius: 10px !important;
  }
  /* On reconstruit l'alignement table à l'intérieur du bloc scrollable :
     thead/tbody deviennent display:table avec une largeur minimum, ce qui force
     les colonnes à rester alignées même quand la table est plus large que le viewport. */
  .ana-article .ana-table > thead,
  .ana-article .ana-table > tbody {
    display: table !important;
    width: auto !important;
    min-width: 100% !important;
    table-layout: auto !important;
  }
  .ana-article .ana-table > thead > tr,
  .ana-article .ana-table > tbody > tr { display: table-row !important; }
  .ana-article .ana-table > * > tr > th,
  .ana-article .ana-table > * > tr > td {
    display: table-cell !important;
    padding: 9px 10px !important;
    font-size: 0.78rem !important;
    white-space: nowrap;
  }
  /* KV en stack : clé en label, valeur en gras */
  .ana-kv { display: block !important; }
  .ana-kv > div { display: block !important; padding: 0 !important; }
  .ana-kv-k {
    padding: 10px 0 2px !important;
    border-bottom: 0 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--brown-600) !important;
    font-weight: 700;
  }
  .ana-kv-v {
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--cream-200) !important;
    font-size: 0.92rem !important;
    color: var(--brown-900) !important;
  }
  /* Callouts plus serrés */
  .ana-callout { padding: 14px !important; }
  .ana-callout-label { font-size: 0.68rem !important; margin-bottom: 6px !important; }
  .ana-callout-body { font-size: 0.86rem !important; line-height: 1.55 !important; }
  /* Barres prix — on garde la grid mais on réduit les colonnes */
  .ana-bars { gap: 8px !important; margin: 14px 0 !important; }
  .ana-bar-row { grid-template-columns: 90px 1fr 70px !important; gap: 8px !important; font-size: 0.76rem !important; }
  .ana-bar-value { font-size: 0.76rem !important; white-space: nowrap; }
  .ana-bar-legend { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; font-size: 0.7rem !important; }
  /* Hero stats : grid 2x2 garantie, pas de break sur les chiffres */
  .ana-hero-stats > .ana-stat { white-space: nowrap; }
  .ana-stat-num { white-space: nowrap !important; }
  .ana-stat-card-num { white-space: nowrap !important; }
  /* Score card du verdict : ligne unique, pas de wrap */
  .ana-score-card { white-space: normal; }
  .ana-score-num { white-space: nowrap !important; }
  .ana-score-meta { white-space: nowrap !important; }
  /* Pourcentage en vert/rouge dans les tableaux : pas de retour à la ligne */
  .ana-pct-pos, .ana-pct-neg, .ana-pct-neutral { white-space: nowrap; }

  /* ---- PROJETS COUP DE CŒUR : marquee → scroll natif horizontal ---- */
  .projects-section { padding: 40px 0 !important; }
  .projects-marquee {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding-bottom: 6px !important;
  }
  .projects-track {
    width: max-content !important;
    animation: none !important;
    padding: 4px 16px 18px !important;
    gap: 14px !important;
  }
  .projects-track:hover { animation: none !important; }
  .project-card {
    width: 260px !important;
    border-radius: 14px !important;
  }
  .project-card-image { aspect-ratio: 16/9 !important; }
  .project-card-body { padding: 14px 16px 16px !important; }
  .project-card-name { font-size: 1rem !important; }
  .project-card-loc, .project-card-meta { font-size: 0.8rem !important; }
  .project-card-cta, .project-card-price { font-size: 0.8rem !important; }
  .project-card-badge { font-size: 0.66rem !important; padding: 4px 10px !important; }
  .project-card-soldout { font-size: 0.66rem !important; padding: 5px 50px !important; }

  /* ---- ACTUALITÉS : grid 1 colonne + cards compactes ---- */
  .news-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .news-card { padding: 14px !important; border-radius: 12px !important; }
  .news-card-header { font-size: 0.66rem !important; margin-bottom: 8px !important; gap: 8px !important; }
  .news-card-title { font-size: 0.96rem !important; line-height: 1.3 !important; margin-bottom: 8px !important; }
  .news-card-excerpt { font-size: 0.82rem !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
  .news-card-cta { font-size: 0.76rem !important; }

  /* ---- ANALYSE MOBILE : on cache le TOC inline (un drawer FAB le remplace) ---- */
  .ana-toc { display: none !important; }
  .ana-layout { display: block !important; grid-template-columns: 1fr !important; gap: 0 !important; }
  .ana-article { padding: 0 !important; max-width: 100% !important; }

  /* Bouton flottant Sommaire (analyses) */
  .ana-fab-toc {
    position: fixed; top: 50%; left: 0;
    transform: translateY(-50%);
    background: var(--brown-900); color: var(--cream-50);
    border: 0; border-radius: 0 10px 10px 0;
    padding: 12px 10px;
    box-shadow: 0 6px 18px rgba(42,31,21,0.25);
    z-index: 80;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer; font-family: inherit;
  }
  .ana-fab-toc svg { width: 18px; height: 18px; display: block; }
  .ana-fab-toc-label {
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase;
    writing-mode: vertical-rl; transform: rotate(180deg);
    margin-top: 4px;
  }
  .ana-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(42,31,21,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 200;
  }
  .ana-drawer-overlay.open { opacity: 1; pointer-events: auto; }
  .ana-drawer-toc {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 86%; max-width: 340px;
    background: var(--cream-50);
    z-index: 210;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
    display: flex; flex-direction: column;
    box-shadow: 6px 0 24px rgba(42,31,21,0.20);
  }
  .ana-drawer-toc.open { transform: translateX(0); }
  .ana-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--cream-200);
  }
  .ana-drawer-head h3 {
    font-size: 0.86rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brown-900); margin: 0;
  }
  .ana-drawer-close {
    background: none; border: 0; cursor: pointer;
    color: var(--brown-700); padding: 4px;
    font-size: 1.5rem; line-height: 1;
  }
  .ana-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 32px;
  }
  .ana-drawer-body a {
    display: block;
    padding: 11px 12px;
    font-size: 0.9rem; color: var(--brown-800);
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 2px;
  }
  .ana-drawer-body a:hover,
  .ana-drawer-body a.active {
    background: var(--brown-900); color: var(--cream-50);
  }
}

/* ============== Petits écrans (iPhone SE 375px et moins) ============== */
@media (max-width: 380px) {
  html { font-size: 14.5px; }
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .hero { padding: 70px 12px 50px !important; }
  .nav-inner { padding: 8px 12px !important; }
  .nav-logo { font-size: 0.88rem !important; }
  .nav-logo-mark { width: 26px !important; height: 26px !important; }
  .ana-hero-stats { grid-template-columns: 1fr !important; }
  .pf-summary-stats { grid-template-columns: 1fr !important; text-align: left !important; }
  .pf-card-figs { grid-template-columns: 1fr 1fr !important; }
  .pf-card-figs > div:last-child { border-right: 1px solid var(--cream-200) !important; }
  .pf-card-figs > div:nth-child(3) { padding-top: 8px !important; border-top: 1px solid var(--cream-200) !important; grid-column: 1 / -1 !important; padding-right: 0 !important; border-right: 0 !important; }
  .qz-d-hero-stats { grid-template-columns: 1fr !important; }
  .ana-stats-row { grid-template-columns: 1fr !important; }
  .partners-track img { height: 22px !important; margin: 0 14px !important; }
  .d2040-figs { grid-template-columns: 1fr !important; }
}