/* R5 — home.css. Styles de la page d'accueil (extraits d'index.html #page-home + composants home-*/stat-*/testi-*/geo-about/hero, découpage automatisé le 12/08/2026, à revalider visuellement). */

.hero h1 em { font-style: italic; color: var(--gold-light); display: block; font-size: 42px; }

/* geo-about / communes-seo : styles globaux dans base.css depuis le
   13/08 (bandeau SEO/GEO rendu par footer.php sur toutes les pages). */

.stat-card,
.testi-card {
    border-radius: 24px !important;
  }

.stat-card,
.testi-card {
    overflow: hidden;
  }

.testi-fao {
    border-radius: 999px;
  }

.hero { background: var(--green); display: grid; grid-template-columns: 1fr 1fr; }

.hero h1 { font-family: var(--font); font-size: 36px; color: var(--white); font-weight: normal; line-height: 1.25; margin-bottom: 20px; }

.hero p { color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.7; margin-bottom: 36px; max-width: 420px; }

.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 28px; }

.stat-card { background: var(--white); padding: 24px 20px; border-bottom: 3px solid var(--gold); }

.home-est-shortcut {
    background:
      radial-gradient(circle at top left, rgba(196,168,130,0.12), transparent 28%),
      var(--cream);
    padding: 64px 80px 72px;
  }

.home-est-shortcut-inner { max-width: 1280px; margin: 0 auto; }

.home-est-shortcut-panel {
    background: linear-gradient(135deg, #07152f 0%, #0b2244 58%, #102c55 100%);
    border-radius: 36px;
    padding: 36px 38px 34px;
    box-shadow: 0 28px 64px rgba(8,25,56,0.14);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
  }

.home-est-shortcut-panel::after {
    content: "";
    position: absolute;
    inset: auto -120px -160px auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,168,130,0.16) 0%, rgba(196,168,130,0) 72%);
    pointer-events: none;
  }

.home-est-shortcut-kicker {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
    font-family: var(--font-sans);
    position: relative;
    z-index: 1;
  }

.home-est-shortcut-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 360px);
    gap: 28px;
    align-items: stretch;
    position: relative;
    z-index: 1;
  }

.home-est-shortcut-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

.home-est-shortcut-title {
    margin: 0 0 14px;
    max-width: 13ch;
    font-family: var(--font);
    font-size: clamp(32px, 3.5vw, 50px);
    font-weight: normal;
    line-height: 0.98;
    color: var(--white);
  }

.home-est-shortcut-text {
    margin: 0;
    max-width: 700px;
    font-size: 15px;
    line-height: 1.78;
    color: rgba(255,255,255,0.72);
  }

.home-est-shortcut-proof {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 26px;
  }

.home-est-shortcut-proof-item {
    padding: 14px 14px 15px;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
  }

.home-est-shortcut-proof-item strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font);
    font-size: 28px;
    line-height: 0.95;
    font-weight: normal;
    color: var(--white);
  }

.home-est-shortcut-proof-item span {
    display: block;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.64);
    font-family: var(--font-sans);
  }

.home-est-shortcut-actions {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
    padding: 24px;
    border-radius: 28px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    min-height: 100%;
  }

.home-est-shortcut-action-copy {
    display: grid;
    gap: 10px;
  }

.home-est-shortcut-action-label {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-light);
    font-family: var(--font-sans);
  }

.home-est-shortcut-action-title {
    margin: 0;
    font-family: var(--font);
    font-size: 34px;
    line-height: 0.95;
    font-weight: normal;
    color: white;
  }

.home-est-shortcut-action-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255,255,255,0.68);
    font-family: var(--font-sans);
  }

.home-est-shortcut-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--white);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-sans);
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  }

.home-est-shortcut-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(139,111,71,0.28);
    opacity: 0.96;
  }

.home-est-shortcut-note {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.48);
    font-family: var(--font-sans);
    text-align: left;
  }

.home-est-shortcut-seo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    position: relative;
    z-index: 1;
  }

.home-est-shortcut-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    font-family: var(--font-sans);
  }

.home-est-shortcut-chip strong {
    color: var(--gold-light);
    font-weight: 600;
  }

.cta-final { background: var(--green); padding: 80px; }

.cta-final-inner { max-width: 1280px; margin: 0 auto; text-align: center; }

.cta-final h2 { font-family: var(--font); font-size: 36px; font-weight: normal; color: var(--white); margin-bottom: 16px; }

.cta-final p { color: rgba(255,255,255,0.65); font-size: 16px; line-height: 1.7; max-width: 560px; margin: 0 auto 40px; }

.testi-card { background: var(--cream); border-left: 3px solid var(--gold); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; }

.testi-quote { font-family: var(--font); font-size: 17px; font-weight: normal; color: var(--green); line-height: 1.6; font-style: italic; }

.testi-quote::before { content: "“"; color: var(--gold); font-size: 28px; line-height: 0; vertical-align: -0.4em; margin-right: 3px; }

.testi-meta { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }

.testi-who { font-size: 12px; font-weight: 600; color: var(--green); letter-spacing: 0.04em; font-family: var(--font-sans); }

.testi-context { font-size: 11px; color: var(--text-muted); font-family: var(--font-sans); letter-spacing: 0.03em; }

.testi-fao { display: inline-block; margin-top: 6px; font-size: 10px; background: rgba(8,25,56,0.08); color: var(--green); padding: 2px 8px; letter-spacing: 0.04em; }

#page-home .hero {
  display: block !important;
  position: relative !important;
  height: calc(100vh - 68px) !important;
  min-height: 520px !important;
  overflow: hidden !important;
}

#page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(4,8,22,0.92) 0%,
      rgba(4,8,22,0.70) 36%,
      rgba(4,8,22,0.24) 60%,
      transparent 100%
    ),
    linear-gradient(to top,
      rgba(4,8,22,0.55) 0%,
      transparent 40%
    );
  pointer-events: none;
}

#page-home .hero-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  min-height: unset !important;
}

#page-home .hero-content {
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  width: 52% !important;
  max-width: 720px !important;
  padding: 0 40px 0 80px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

#page-home .hero-supertitle {
  font-size: 9px !important;
  letter-spacing: 0.32em !important;
  color: rgba(255,255,255,0.52) !important;
  margin-bottom: 18px !important;
  text-transform: uppercase !important;
  font-family: var(--font-sans) !important;
  animation: r5-in 1s ease both !important;
  animation-delay: 0.06s !important;
}

#page-home .hero h1 {
  font-size: clamp(46px, 5.4vw, 80px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.022em !important;
  margin-bottom: 24px !important;
  animation: r5-in 1s ease both !important;
  animation-delay: 0.18s !important;
}

#page-home .hero h1 span { display:block !important; color: white !important; }

#page-home .hero h1 em {
  display: block !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.87em !important;
  margin-top: 5px !important;
}

#page-home .hero p {
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.75 !important;
  margin-bottom: 20px !important;
  max-width: 360px !important;
  letter-spacing: 0.005em !important;
  animation: r5-in 1s ease both !important;
  animation-delay: 0.32s !important;
}

#page-home .hero-market-signal {
  animation: r5-in 1s ease both !important;
  animation-delay: 0.46s !important;
  border-radius: 24px !important;
  border-color: rgba(255,255,255,0.11) !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(6px) !important;
  width: fit-content !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  row-gap: 8px !important;
}

#page-home .hero-market-signal > a:last-child {
  margin-left: auto;
}

#page-home .hero-market-dot {
  animation: r5-pulse 3.2s ease-in-out infinite !important;
}

#page-home .hero-ctas {
  flex-direction: row !important;
  gap: 8px !important;
  max-width: none !important;
  flex-wrap: wrap !important;
  animation: r5-in 1s ease both !important;
  animation-delay: 0.58s !important;
}

#page-home .hero-mobile-intents {
  display: none !important;
}

#page-home .hero-mobile-intent {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-family: var(--font-sans) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

#page-home .hero-mobile-intent.primary {
  background: var(--gold) !important;
  color: white !important;
  border: 1px solid var(--gold) !important;
}

#page-home .hero-mobile-intent.secondary {
  background: rgba(255,255,255,0.06) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(6px) !important;
}

#page-home .hero-mobile-intent:hover {
  transform: translateY(-1px) !important;
}

#page-home .btn-primary {
  padding: 15px 34px !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}

#page-home .btn-primary:hover {
  background: var(--gold-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(139,111,71,0.38) !important;
}

#page-home .btn-secondary {
  padding: 14px 30px !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  border-color: rgba(255,255,255,0.32) !important;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease !important;
}

#page-home .btn-secondary:hover {
  border-color: rgba(255,255,255,0.65) !important;
  background: rgba(255,255,255,0.08) !important;
  transform: translateY(-2px) !important;
}

#page-home .stats-section {
  padding: 96px 80px 80px !important;
  border-top: 1px solid var(--gold) !important;
}

#page-home .stats-section .section-title {
  font-size: clamp(26px, 2.8vw, 38px) !important;
  letter-spacing: -0.014em !important;
  line-height: 1.12 !important;
  margin-bottom: 6px !important;
}

#page-home .section-subtitle {
  font-size: 11px !important;
  letter-spacing: 0.012em !important;
  color: var(--text-muted) !important;
  margin-bottom: 52px !important;
}

#page-home .stats-grid {
  gap: 0 !important;
  border-bottom: 1px solid rgba(8,25,56,0.09) !important;
  margin-bottom: 18px !important;
}

#page-home .stat-card {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(8,25,56,0.09) !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  padding: 48px 36px 40px !important;
  position: relative !important;
  overflow: hidden !important;
}

#page-home .stat-card:last-child {
  border-right: none !important;
}

#page-home .stat-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: var(--gold) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.50s cubic-bezier(0.4,0,0.2,1) !important;
}

#page-home .stat-card:hover::before { transform: scaleX(1) !important; }

#page-home .stat-number {
  font-size: clamp(58px, 6.8vw, 96px) !important;
  line-height: 0.90 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 18px !important;
  font-weight: normal !important;
}

#page-home .stat-card--market {
  background: var(--green) !important;
  border-right: none !important;
  transition: opacity 0.24s !important;
}

#page-home .stat-card--market:hover { opacity: 0.88 !important; }

#page-home .stat-card--market::before { background: var(--gold-light) !important; }

#page-home .stat-label {
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  line-height: 1.70 !important;
  text-transform: uppercase !important;
}

#page-home .estimation { padding: 96px 80px !important; }

#page-home .buyer { padding: 96px 80px !important; }

#page-home .confier { padding: 100px 80px !important; }

#page-home .connaissances { padding: 96px 80px !important; }

#page-home .recherches { padding: 96px 80px !important; }

#page-home .pourquoi { padding: 96px 80px !important; }

#page-home .estimation-text h2,
#page-home .buyer h2,
#page-home .confier h2,
#page-home .connaissances .section-title,
#page-home .recherches h2,
#page-home .pourquoi .section-title,
#page-home .section-title {
  font-size: clamp(24px, 2.6vw, 38px) !important;
  letter-spacing: -0.013em !important;
  line-height: 1.12 !important;
}

#page-home .prop-card {
  border: 1px solid rgba(8,25,56,0.10) !important;
  overflow: hidden !important;
  transition: transform 0.34s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.34s ease,
              border-color 0.34s ease !important;
}

#page-home .prop-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 26px 60px rgba(8,25,56,0.11) !important;
  border-color: rgba(8,25,56,0.22) !important;
}

#page-home .prop-card-image { overflow: hidden !important; }

#page-home .prop-card-image img,
#page-home .prop-card-image [style*="background"] {
  transition: transform 0.58s cubic-bezier(0.4,0,0.2,1) !important;
}

#page-home .prop-card:hover .prop-card-image img,
#page-home .prop-card:hover .prop-card-image [style*="background"] {
  transform: scale(1.05) !important;
}

#page-home .commune-card,
#page-home .recherche-card {
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.28s ease !important;
}

#page-home .stats-grid > *,
#page-home .communes-grid > *,
#page-home .estimation-inner > *,
#page-home .home-est-shortcut-layout > *,
#page-home .home-est-shortcut-proof > * {
  min-width: 0 !important;
}

#page-home .commune-card:hover { transform:translateY(-4px) !important; box-shadow:0 14px 36px rgba(8,25,56,0.10) !important; }

/* Le survol des cartes de recherche vit désormais avec le reste du bloc,
   plus bas dans cette feuille. La règle qui était ici portait un
   « !important » et un sélecteur d'identifiant : elle gagnait toujours,
   et le survol refondu le 31/08/2026 n'avait donc aucun effet — ni la
   levée, ni l'ombre dorée, ni le liseré qui s'épaissit. Retirée plutôt
   que surenchérie : deux règles qui se battent en finissent par se
   contredire. */

#page-home .estimation-text h2 { max-width: 12ch !important; }

#page-home .estimation-form { border-left: none !important; }

#page-home .estimation-form { width: min(100%, 520px) !important; margin-left: auto !important; }

#page-home .estimation-text p { max-width: 52ch !important; }

#page-home .btn-full:hover {
  background: var(--gold-light) !important;
  transform: translateY(-2px) !important;
}

#page-home .stat-number--market {
  font-size: clamp(16px, 2.2vw, 22px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
}

#page-home .hero-mobile-intent:focus-visible,
#page-home .btn-primary:focus-visible,
#page-home .btn-secondary:focus-visible,
#page-home .btn-full:focus-visible,
#page-home .home-est-shortcut-cta:focus-visible,
#page-home .commune-card:focus-visible,
#page-home .stat-card[role="button"]:focus-visible {
  outline: 3px solid rgba(196,168,130,0.88) !important;
  outline-offset: 3px !important;
}

.stat-hero-cell { transition: background 0.3s ease, transform 0.3s ease; cursor: default; }

.stat-hero-cell:hover { background: rgba(139,111,71,0.22) !important; transform: translateY(-4px); }

.stat-hero-cell:hover .stat-num { color: white !important; text-shadow: 0 0 22px rgba(230,190,100,0.55); }

.stat-hero-cell:hover .stat-label { color: rgba(255,255,255,0.8) !important; }

#page-home .ventes { padding: 96px 80px !important; }

#page-home .ventes-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 16px !important;
}

#page-home .vente-card:first-child {
  grid-row: span 2 !important;
}

#page-home .vente-card:first-child .vente-img {
  height: 100% !important;
  min-height: 420px !important;
}

#page-home .vente-img {
  overflow: hidden !important;
  position: relative !important;
}

#page-home .vente-img > div:first-child {
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.60s cubic-bezier(0.4,0,0.2,1) !important;
  transform-origin: center !important;
}

#page-home .vente-card:hover .vente-img > div:first-child {
  transform: scale(1.06) !important;
}

#page-home .vente-img::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(4,8,22,0.72) 0%, rgba(4,8,22,0.18) 45%, transparent 75%) !important;
  opacity: 0.65 !important;
  transition: opacity 0.40s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#page-home .vente-card:hover .vente-img::after {
  opacity: 1 !important;
}

#page-home .vente-badge {
  z-index: 2 !important;
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
}

#page-home .vente-card:first-child .vente-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 3 !important;
  padding: 28px 28px 32px !important;
  background: transparent !important;
  transform: translateY(12px) !important;
  transition: transform 0.40s cubic-bezier(0.4,0,0.2,1) !important;
}

#page-home .vente-card:first-child:hover .vente-content {
  transform: translateY(0) !important;
}

#page-home .vente-card:first-child {
  position: relative !important;
}

#page-home .vente-card {
  transition: box-shadow 0.40s ease !important;
  cursor: pointer !important;
}

#page-home .vente-card:hover {
  box-shadow: 0 24px 64px rgba(0,0,0,0.28) !important;
}

#page-home .vente-card:not(:first-child) .vente-img { height: 160px !important; }

#page-home .prop-img {
  overflow: hidden !important;
  transition: none !important;
}

#page-home .prop-img > * {
  transition: transform 0.60s cubic-bezier(0.4,0,0.2,1) !important;
  transform-origin: center !important;
  width: 100% !important;
  height: 100% !important;
}

#page-home .prop-card:hover .prop-img > * {
  transform: scale(1.05) !important;
}

#page-home .vente-card.r5-reveal,
#page-home .r5-commune-item.r5-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.64s cubic-bezier(0.4,0,0.2,1),
              transform 0.64s cubic-bezier(0.4,0,0.2,1) !important;
}

#page-home .vente-card.r5-reveal.r5-in,
#page-home .r5-commune-item.r5-reveal.r5-in {
  opacity: 1;
  transform: translateY(0) !important;
}

#page-home .hero-image img {
  will-change: transform;
  transition: none !important;
}

#page-home .guide-card {
  cursor: pointer !important;
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.26s ease,
              border-color 0.26s ease !important;
  position: relative;
}

#page-home .guide-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(8,25,56,0.09) !important;
  border-color: var(--gold) !important;
}

#page-home .guide-card .arrow {
  color: var(--gold) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  transition: letter-spacing 0.22s ease !important;
}

#page-home .guide-card:hover .arrow {
  letter-spacing: 0.10em !important;
}

@media (max-width: 1024px) {
.home-est-shortcut { padding: 48px 32px 56px; }

.home-est-shortcut-layout { grid-template-columns: 1fr; align-items: start; }

.home-est-shortcut-title { max-width: none; }

.home-est-shortcut-actions { min-height: 0; }

#page-home .hero-content {
    width: 82% !important;
    padding: 0 20px 0 40px !important;
  }

#page-home .hero-market-signal {
    max-width: min(100%, 460px) !important;
  }

#page-home .hero h1 {
    font-size: clamp(36px, 5.5vw, 58px) !important;
  }

#page-home .stat-number {
    font-size: clamp(44px, 5.5vw, 72px) !important;
  }

#page-home .stat-card {
    padding: 36px 22px 28px !important;
  }

#page-home .stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

#page-home .stat-card--market {
    grid-column: auto !important;
  }

#page-home .stats-section,
#page-home .estimation,
#page-home .buyer,
#page-home .confier,
#page-home .connaissances,
#page-home .recherches,
#page-home .pourquoi {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

#page-home .estimation-inner {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

#page-home .estimation-text {
    max-width: none !important;
  }

#page-home .estimation-form {
    max-width: 760px !important;
  }

#page-home .communes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

#page-home .home-est-shortcut-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

#page-home .home-est-shortcut-actions {
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
.home-est-shortcut { padding: 36px 20px 44px; }

.home-est-shortcut-panel { padding: 28px 22px; border-radius: 28px; }

.home-est-shortcut-proof { grid-template-columns: 1fr; }

.home-est-shortcut-cta { width: 100%; }

.home-est-shortcut-seo { gap: 8px; }

.home-est-shortcut-chip { width: 100%; justify-content: flex-start; }

.home-est-shortcut-actions { padding: 20px; border-radius: 24px; }

.hero { min-height: 80vh !important; }

.stats-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

#page-home .ventes-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

#page-home .vente-card:first-child {
    grid-row: auto !important;
  }

#page-home .vente-card:first-child .vente-content {
    position: static !important;
    transform: none !important;
    padding: 20px !important;
    background: var(--white) !important;
  }

#page-home .vente-card:first-child .vente-img {
    height: 180px !important;
    min-height: 180px !important;
  }

#page-home .vente-card:not(:first-child) .vente-img {
    height: 180px !important;
  }

#page-home .hero {
    height: calc(100vh - 60px) !important;
    min-height: 580px !important;
  }

#page-home .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 20px 0 !important;
    height: 100% !important;
    justify-content: flex-start !important;
    transform: translateY(-10px) !important;
    gap: 18px !important;
  }

#page-home .hero::before {
    
    background:
      rgba(4,8,22,0.80),
      linear-gradient(to top, rgba(4,8,22,0.65) 0%, transparent 50%) !important;
  }

#page-home .hero-supertitle {
    margin-bottom: 22px !important;
  }

#page-home .hero h1 {
    font-size: clamp(28px, 8.5vw, 44px) !important;
    line-height: 1.15 !important;
    margin-bottom: 22px !important;
  }

#page-home .hero h1 em {
    margin-top: 8px !important;
  }

#page-home .hero p {
    max-width: 94% !important;
    font-size: 12.5px !important;
    line-height: 2.0 !important;
    margin-bottom: 28px !important;
  }

#page-home .hero-market-signal {
    padding: 10px 16px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    max-width: none !important;
    align-items: flex-start !important;
  }

#page-home .hero-market-signal > a:last-child {
    margin-left: 0 !important;
  }

#page-home .hero-mobile-intents {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: -4px 0 2px !important;
  }

#page-home .hero-mobile-intent {
    min-height: 46px !important;
    padding: 0 10px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
  }

#page-home .hero-ctas {
    display: none !important;
  }

#page-home .hero-ctas {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

#page-home .btn-primary,
#page-home .btn-secondary {
    width: 100% !important;
    text-align: center !important;
  }

#page-home .btn-primary {
    padding: 16px 22px !important;
  }

#page-home .btn-secondary {
    padding: 15px 22px !important;
  }

#page-home .stats-section {
    padding: 52px 20px 44px !important;
  }

#page-home .stats-section .section-title {
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }

#page-home .stats-section .section-subtitle {
    line-height: 1.7 !important;
    margin-bottom: 28px !important;
  }

#page-home .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    border-bottom: none !important;
  }

#page-home .stat-card {
    border-right: 1px solid rgba(8,25,56,0.09) !important;
    border-bottom: 1px solid rgba(8,25,56,0.09) !important;
    padding: 28px 18px 24px !important;
  }

#page-home .stat-card:nth-child(2n) {
    border-right: none !important;
  }

#page-home .stat-number {
    font-size: clamp(40px, 11vw, 60px) !important;
    margin-bottom: 10px !important;
  }

#page-home .stat-card[style*="green"] {
    grid-column: 1 / -1 !important;
    border-right: none !important;
    padding: 28px 20px !important;
  }

#page-home .estimation,
#page-home .buyer,
#page-home .confier,
#page-home .connaissances,
#page-home .recherches,
#page-home .pourquoi {
    padding: 56px 20px !important;
  }

#page-home .stats-section .section-title,
#page-home .estimation-text h2,
#page-home .buyer h2,
#page-home .confier h2,
#page-home .connaissances .section-title,
#page-home .section-title {
    font-size: clamp(22px, 6vw, 30px) !important;
  }

#page-home .estimation-kicker {
    margin-bottom: 14px !important;
  }

#page-home .estimation-form {
    padding: 24px 18px 20px !important;
    border-radius: 24px !important;
  }

#page-home .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

#page-home .form-group input,
#page-home .form-group select,
#page-home .btn-full {
    min-height: 54px !important;
  }

#page-home .communes {
    padding: 56px 20px !important;
  }

#page-home .communes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

#page-home .commune-card {
    padding: 18px 18px 20px !important;
  }

#page-home .commune-card h3 {
    padding-right: 18px;
    line-height: 1.3;
  }

#page-home .home-est-shortcut-title {
    font-size: clamp(28px, 7vw, 40px) !important;
    max-width: 12ch !important;
  }

#page-home .home-est-shortcut-text,
#page-home .home-est-shortcut-action-text {
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

#page-home .home-est-shortcut-note,
#page-home .estimation-form-note,
#page-home .form-link {
    text-align: left !important;
  }

#page-home .home-est-shortcut-action-title {
    font-size: 30px !important;
  }

#page-home .home-est-shortcut-proof {
    grid-template-columns: 1fr !important;
  }

#page-home .home-est-shortcut-proof-item {
    padding: 16px 16px 17px !important;
  }

#page-home .home-est-shortcut-chip {
    line-height: 1.45;
    white-space: normal;
  }

#page-home .hero-content {
    width: 100% !important;
    padding: 0 20px !important;
    justify-content: center !important;
  }

#page-home .ventes {
    padding: 72px 20px !important;
  }

#page-home .ventes-inner {
    width: 100% !important;
    max-width: none !important;
  }

#page-home .ventes-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 18px !important;
    width: 100% !important;
  }

#page-home .ventes-grid .vente-card {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

#page-home .ventes-grid .vente-card:first-child {
    grid-row: auto !important;
  }

#page-home .ventes-grid .vente-card:first-child .vente-img,
#page-home .ventes-grid .vente-card:not(:first-child) .vente-img {
    height: 180px !important;
    min-height: 180px !important;
  }

#page-home .ventes-grid .vente-card:first-child .vente-content {
    position: static !important;
    padding: 20px !important;
    transform: none !important;
    background: rgba(255,255,255,0.07) !important;
  }

#page-home .ventes-grid .vente-card .vente-content {
    padding: 20px 20px 22px !important;
  }

#page-home .ventes-grid .vente-card .vente-content h3 {
    font-size: 26px !important;
    line-height: 1.02 !important;
    margin-bottom: 10px !important;
  }

#page-home .ventes-grid .vente-card .vente-content .type {
    margin-bottom: 8px !important;
  }

#page-home .ventes-grid .vente-card .btn-ghost-white {
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr !important; }

#page-home .ventes-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }

#page-home .vente-card:first-child { grid-row: auto !important; }

#page-home .vente-card:first-child .vente-content { position: static !important; transform: none !important; padding: 20px !important; background: var(--white) !important; }

#page-home .vente-card:first-child .vente-img { height: 180px !important; min-height: 180px !important; }

#page-home .vente-card:not(:first-child) .vente-img { height: 180px !important; }

#page-home .hero-mobile-intents {
    grid-template-columns: 1fr !important;
  }

#page-home .hero-mobile-intent {
    min-height: 48px !important;
    font-size: 10px !important;
  }

#page-home .hero-market-signal {
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }

#page-home .hero-market-signal span,
#page-home .hero-market-signal a {
    line-height: 1.5 !important;
  }

#page-home .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

#page-home .stat-card,
#page-home .stat-card:nth-child(2n) {
    border-right: none !important;
  }

#page-home .stat-card {
    border: 1px solid rgba(8,25,56,0.08) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.82) !important;
    box-shadow: 0 10px 28px rgba(8,25,56,0.05) !important;
  }

#page-home .stat-number {
    font-size: clamp(46px, 16vw, 64px) !important;
    line-height: 0.92 !important;
    margin-bottom: 8px !important;
  }

#page-home .stat-label {
    line-height: 1.55 !important;
  }

#page-home .hero h1 {
    font-size: clamp(26px, 9vw, 38px) !important;
  }

#page-home .communes-grid {
    grid-template-columns: 1fr !important;
  }

#page-home .commune-card {
    padding: 18px 16px 19px !important;
  }

#page-home .commune-card h3 {
    font-size: 15px !important;
  }

#page-home .home-est-shortcut-panel {
    padding: 24px 18px !important;
    border-radius: 24px !important;
  }

#page-home .home-est-shortcut-actions {
    padding: 18px !important;
  }

#page-home .home-est-shortcut-title {
    max-width: none !important;
  }
}

@media (min-width: 1281px) {
#page-home .hero-content {
    width: 50% !important;
    max-width: 760px !important;
    padding-left: 92px !important;
    padding-right: 48px !important;
  }

#page-home .hero p {
    max-width: 400px !important;
  }

#page-home .stats-section,
#page-home .estimation,
#page-home .buyer,
#page-home .confier,
#page-home .connaissances,
#page-home .recherches,
#page-home .pourquoi,
#page-home .ventes,
#page-home .home-est-shortcut {
    padding-left: 88px !important;
    padding-right: 88px !important;
  }

#page-home .estimation-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 520px) !important;
    gap: 88px !important;
  }

#page-home .communes-grid {
    gap: 16px !important;
  }

#page-home .commune-card {
    padding: 24px 24px 22px !important;
    border-radius: 24px !important;
  }

#page-home .commune-card h3 {
    margin-bottom: 10px !important;
    font-size: 16px !important;
  }

#page-home .home-est-shortcut-panel {
    padding: 40px 42px 38px !important;
  }

#page-home .home-est-shortcut-layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 380px) !important;
    gap: 34px !important;
  }

#page-home .home-est-shortcut-text {
    max-width: 58ch !important;
  }
}

@media (max-width: 1280px) {
#page-home .hero-content > *,
#page-home .estimation-inner > *,
#page-home .communes-inner > *,
#page-home .home-est-shortcut-layout > * {
    min-width: 0;
  }

#page-home .hero-content {
    width: 68% !important;
    padding: 0 30px 0 60px !important;
  }

#page-home .stats-section,
#page-home .estimation,
#page-home .buyer,
#page-home .confier,
#page-home .connaissances,
#page-home .recherches,
#page-home .pourquoi {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}
/* ─────────────────────────────────────────────────────────────────────
   Mise en page des sections d'accueil — ajoutée le 12/08/2026.
   Même raison que pour les autres gabarits : dans index.html, ces
   propriétés étaient portées par des attributs style="" sur le HTML,
   donc absentes du bloc <style> découpé automatiquement. Reconstituées
   ici en classes, avec les mêmes valeurs. Mobile-first : les media
   queries élargissent, elles ne réparent pas (règle d'or n°4).
   ───────────────────────────────────────────────────────────────────── */

/* ── Chiffres clés ────────────────────────────────────────────────── */
.stats-section { background: var(--cream); padding: 56px 24px; }
.stats-inner { max-width: 1280px; margin: 0 auto; }
.section-title { font-family: var(--font); font-size: clamp(22px, 3vw, 30px); font-weight: normal; color: var(--green); margin-bottom: 8px; }
.section-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat-card { background: var(--white); border: 1px solid var(--border); padding: 24px 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.stat-number { font-family: var(--font); font-size: clamp(28px, 4vw, 40px); color: var(--green); line-height: 1; margin-bottom: 10px; }
.stat-label { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.stat-card--market { background: var(--green); }
.stat-number--market { color: var(--white); font-size: clamp(15px, 2vw, 20px); font-family: var(--font-sans); letter-spacing: 0.04em; }
.stat-label--market { color: rgba(255,255,255,0.75); }
.data-source { margin-top: 20px; font-size: 11px; color: var(--text-light); }

/* ── Estimation ───────────────────────────────────────────────────── */
.estimation { background: var(--white); padding: 56px 24px; }
.estimation-inner { max-width: 1280px; margin: 0 auto; display: grid; gap: 40px; }
.estimation-kicker { font-size: 11px; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 14px; }
.estimation-text h2 { font-family: var(--font); font-size: clamp(22px, 3vw, 30px); font-weight: normal; color: var(--green); margin-bottom: 18px; }
.estimation-text p { font-size: 14.5px; color: var(--text); line-height: 1.75; margin-bottom: 14px; }
.estimation-form { background: var(--cream); border: 1px solid var(--border); padding: 28px; }
.estimation-form-kicker { font-size: 10px; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 18px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.form-group input, .form-group select, .confier-form input, .confier-form select {
  width: 100%; min-height: 44px; padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--border); background: var(--white); color: var(--text);
}
.form-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.estimation-form-foot { margin-top: 16px; text-align: center; }
.estimation-form-note { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 8px; }
.form-link a { font-size: 12px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ── Acquéreurs ───────────────────────────────────────────────────── */
/* ═══ Recherches d'acquéreurs ═══════════════════════════════════════
   Refonte du 31/08/2026. Les cartes ressemblaient à trois encarts
   promotionnels ; elles doivent ressembler à ce qu'elles sont — des
   fiches de mandat qu'un courtier tient vraiment.

   Ce qui les rend crédibles n'est pas un effet : c'est le chiffre de
   rareté en bas de chaque carte, compté sur les ventes réellement
   enregistrées au registre foncier. Le dessin ne fait que lui donner
   sa place — une règle, une jauge, et rien qui bouge sans raison. */

.recherches { background: var(--cream); padding: clamp(48px, 7vw, 76px) 24px; }
.recherches-inner { max-width: 1280px; margin: 0 auto; }

.recherches-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 40px; flex-wrap: wrap; margin-bottom: 30px;
}
.recherches-title { font-family: var(--font); font-size: clamp(23px, 3vw, 30px); font-weight: normal; color: var(--text); margin-bottom: 8px; line-height: 1.18; }
.recherches-subtitle { color: var(--text-muted); font-size: 14px; margin: 0; }

/* La source, alignée sur la ligne de base du sous-titre : un chiffre de
   rareté qu'on ne peut pas vérifier ne vaut rien, autant dire d'où il
   vient une fois pour les trois. */
.recherches-source {
  font-size: 12px; line-height: 1.5; color: var(--text-light);
  max-width: 34ch; margin: 0; padding-left: 15px;
  border-left: 2px solid var(--gold-light);
}
.recherches-source strong { color: var(--green); font-weight: 500; font-variant-numeric: tabular-nums; }

.recherches-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(282px, 1fr)); gap: 18px; }

/* La carte. Le liseré d'or est en pseudo-élément et non en bordure :
   il peut ainsi s'épaissir au survol sans déplacer d'un pixel ce qu'il
   y a dessous — une bordure qui grandit pousse tout le contenu. */
.recherche-card {
  position: relative; background: var(--white); border: 1px solid var(--border);
  padding: 26px 24px 22px; display: flex; flex-direction: column;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s cubic-bezier(.2,.7,.3,1), border-color .45s;
}
.recherche-card::before {
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  transition: height .45s cubic-bezier(.2,.7,.3,1);
}
.recherche-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -22px rgba(8, 25, 56, .38);
  border-color: var(--gold-light);
}
.recherche-card:hover::before { height: 5px; }

.rc-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }

.badge-active {
  display: inline-flex; align-items: center; gap: 7px; font-size: 9.5px;
  background: rgba(47, 107, 79, .09); color: #1F5138;
  padding: 5px 11px 5px 9px; border-radius: 50px;
  letter-spacing: .11em; text-transform: uppercase; font-weight: 600;
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); display: inline-block; position: relative; flex: none; }
/* Un halo qui respire, pas un clignotement : le point dit « ouvert »,
   il n'a pas à réclamer l'attention. */
.live-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--success); opacity: .55;
  animation: rc-respire 2.8s ease-out infinite;
}
@keyframes rc-respire {
  0%   { transform: scale(.6); opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.rc-lieu {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-light); white-space: nowrap;
}
.rc-pin { color: var(--gold); flex: none; }

.recherche-card .budget {
  font-family: var(--font); font-size: clamp(26px, 3.4vw, 31px); line-height: 1.05;
  color: var(--green); margin: 0 0 7px; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.recherche-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 9px; font-family: var(--font-sans); color: var(--text); }
.recherche-card .meta { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* Le bloc rareté : séparé par une règle, parce qu'il change de nature —
   au-dessus la demande d'un acquéreur, en dessous un fait du marché. */
.rc-rarete { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); margin-top: 20px; }
.rc-rarete-l { font-size: 12.5px; color: var(--text-muted); margin: 0 0 9px; line-height: 1.45; }
.rc-rarete-l strong {
  font-family: var(--font); font-size: 17px; color: var(--gold);
  font-weight: normal; font-variant-numeric: tabular-nums;
}

.rc-jauge { display: flex; align-items: center; gap: 10px; }
.rc-jauge-fond { flex: 1 1 auto; height: 3px; background: var(--border); position: relative; overflow: hidden; }
.rc-jauge-part {
  position: absolute; inset: 0 auto 0 0; width: var(--part, 2%);
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  transform-origin: left center; transform: scaleX(0);
  animation: rc-remplir 1.1s cubic-bezier(.2,.75,.25,1) .25s forwards;
}
@keyframes rc-remplir { to { transform: scaleX(1); } }
.rc-jauge-val {
  flex: none; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-light); font-variant-numeric: tabular-nums;
}

.recherches-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.recherches-cta-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px;
  background: var(--green); color: var(--white); border: 0;
  padding: 15px 34px; border-radius: 50px;
  font-size: 14px; font-family: var(--font-sans); font-weight: 500; letter-spacing: .03em;
  cursor: pointer; transition: background .3s, box-shadow .3s, transform .3s;
}
.recherches-cta-btn:hover { background: var(--green-mid); box-shadow: 0 14px 32px -16px rgba(8,25,56,.55); transform: translateY(-1px); }
.recherches-cta-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.rc-fleche { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.recherches-cta-btn:hover .rc-fleche { transform: translateX(4px); }
.recherches-cta-note { font-size: 12px; color: var(--text-light); margin: 0; text-align: center; }

@media (max-width: 620px) {
  .recherches-tete { display: block; }
  .recherches-source { margin-top: 16px; max-width: none; }
  .recherche-card { padding: 22px 20px 20px; }
  .rc-tete { flex-wrap: wrap; gap: 8px; }
  /* Pleine largeur, mais le libellé doit tenir sur UNE ligne : à 34 px
     de marge intérieure il passait à deux, et un bouton sur deux lignes
     a l'air d'un accident. */
  .recherches-cta-btn { width: 100%; justify-content: center; padding-left: 18px; padding-right: 18px; gap: 9px; }
}

/* Rien ne bouge pour qui a demandé que rien ne bouge. La jauge reste
   remplie : c'est l'information, pas l'animation. */
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; opacity: 0; }
  .rc-jauge-part { animation: none; transform: scaleX(1); }
  .recherche-card, .recherche-card::before, .recherches-cta-btn, .rc-fleche { transition: none; }
  .recherche-card:hover { transform: none; }
}

/* ── Nos ventes ───────────────────────────────────────────────────── */
.ventes { background: var(--green); padding: 56px 24px; }
.ventes-inner { max-width: 1280px; margin: 0 auto; }
.ventes-inner h2 { font-family: var(--font); font-size: clamp(22px, 3vw, 30px); font-weight: normal; color: var(--white); margin-bottom: 8px; }
.ventes-inner .subtitle { color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 32px; max-width: 640px; }
.ventes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.vente-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); overflow: hidden; }
.vente-img { position: relative; height: 200px; background: var(--green-mid); }
.vente-img img { width: 100%; height: 100%; object-fit: cover; }
.vente-badge { position: absolute; top: 12px; left: 12px; background: var(--gold); color: var(--white); font-size: 10px; padding: 4px 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.vente-content { padding: 20px; }
.vente-content .type { font-size: 11px; color: var(--gold-light); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.vente-content h3 { font-family: var(--font); font-size: 20px; color: var(--white); font-weight: normal; margin-bottom: 14px; }
.ventes-cta { margin-top: 28px; text-align: center; }

/* ── Communes ─────────────────────────────────────────────────────── */
#r5-communes-strip { background: var(--cream-dark); padding: 56px 24px; }
.r5-strip-head { max-width: 1280px; margin: 0 auto 28px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; }
.r5-strip-kicker { font-size: 10px; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 10px; }
.r5-strip-head h2 { font-family: var(--font); font-size: clamp(22px, 3vw, 28px); font-weight: normal; color: var(--green); margin-bottom: 8px; }
.r5-strip-copy { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; max-width: 620px; }
.r5-strip-head > a { font-size: 12px; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.r5-commune-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* ── La carte de clôture ──────────────────────────────────────────
   Dixième et dernière : elle porte les totaux et mène à la carte des
   transactions. Elle doit se distinguer sans rompre le rang — d'où un
   fond crème très légèrement doré et un filet supérieur, plutôt qu'une
   couleur d'accent qui l'aurait sortie de la grille. La flèche, elle,
   se remplit : c'est le seul signal « on quitte la liste ». */
#page-home .r5-commune-item-tout {
  background: linear-gradient(160deg, rgba(139,111,71,0.07) 0%, rgba(255,255,255,0.80) 60%);
  border-color: rgba(139,111,71,0.28);
}
#page-home .r5-commune-item-tout .r5-commune-name { color: var(--gold, #8B6F47); }
#page-home .r5-commune-item-tout .r5-commune-arrow {
  background: var(--gold, #8B6F47); border-color: var(--gold, #8B6F47); color: #fff;
}
#page-home .r5-commune-item-tout:hover { border-color: var(--gold, #8B6F47); }

/* La grille compte cinq colonnes sur grand écran, quatre puis trois en
   dessous : aucun nombre de cartes ne tombe juste partout. Plutôt que
   de laisser un trou selon la largeur, la carte de clôture PREND la
   place qui reste — elle devient une bande pleine largeur dès que la
   grille descend à trois colonnes ou moins. Un vide se lit comme un
   oubli ; une bande se lit comme une conclusion. */
/* Combien de colonnes selon la largeur — mesuré, pas supposé : cinq
   au-delà de 1240 px, quatre entre 1024 et 1239, trois entre 769 et
   1023, deux sous 768, une sous 520. Neuf communes plus la carte de
   clôture : la clôture PREND la place qui reste, et le compte tombe
   juste partout.

     5 colonnes → 5 + (4 communes + clôture)   = 5 · 5
     4 colonnes → 4 + 4 + (1 commune + clôture large de 3) = 4 · 4 · 4
     3 colonnes → 3 + 3 + 3 + clôture pleine largeur
     2 colonnes → 4 rangs de 2 + (1 commune + clôture) = 5 · 2
     1 colonne  → tout s'empile

   Un vide se lit comme un oubli ; une carte qui s'étend se lit comme
   une conclusion. */
/* Bornes mesurées sur la page, pas déduites : la grille fait
   min(1280, largeur − 160) et chaque colonne 240 px + 14 de gouttière.
   Elle passe donc à 4 colonnes à partir de 1162 px de fenêtre, à 5 à
   partir de 1416. Entre les deux, la clôture s'étend sur 3 colonnes et
   complète le troisième rang ; en dessous, elle prend toute la largeur. */
@media (min-width: 1162px) and (max-width: 1415px) {
  #page-home .r5-commune-item-tout { grid-column: span 3; }
}
@media (min-width: 769px) and (max-width: 1161px) {
  #page-home .r5-commune-item-tout { grid-column: 1 / -1; }
}

/* Étendue, la carte respire autrement : ses trois chiffres se rangent
   sur une ligne au lieu de s'empiler dans une colonne trop large. */
@media (min-width: 769px) and (max-width: 1415px) {
  #page-home .r5-commune-item-tout {
    background: linear-gradient(110deg, rgba(139,111,71,0.10) 0%, rgba(255,255,255,0.82) 55%);
  }
  #page-home .r5-commune-item-tout .r5-commune-stats {
    display: flex; flex-wrap: wrap; gap: 32px;
  }
  #page-home .r5-commune-item-tout .r5-commune-stat { flex: 0 0 auto; }
}
/* Cartes commune : style d'origine dans base.css (cartes translucides
   arrondies 28px, trait or animé, vedette Cologny navy par défaut). */

/* ── Propriétés disponibles ───────────────────────────────────────── */
.proprietes { background: var(--white); padding: 56px 24px; }
.proprietes-inner { max-width: 1280px; margin: 0 auto; }
.proprietes-title { font-family: var(--font); font-size: clamp(22px, 3vw, 28px); font-weight: normal; color: var(--green); margin-bottom: 8px; }
.proprietes-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
.proprietes-cta { margin-top: 28px; text-align: center; }

/* ── Équipe ───────────────────────────────────────────────────────── */
.team-section { background: var(--white); padding: 56px 24px; }
.team-inner { max-width: 1180px; margin: 0 auto; }
.team-head { text-align: center; margin-bottom: 36px; }
.team-kicker { font-size: 10px; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 12px; }
.team-head h2 { font-family: var(--font); font-size: clamp(24px, 3vw, 36px); font-weight: normal; color: var(--green); margin-bottom: 12px; }
.team-head p { font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 560px; margin: 0 auto; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; margin-bottom: 32px; }
.team-member a { display: block; text-align: center; padding: 16px 8px; border-radius: 12px; transition: transform .25s, background .25s; }
.team-member a:hover { transform: translateY(-5px); background: var(--green); }
.team-member a:hover .team-name { color: var(--white); }
.team-member a:hover .team-role { color: var(--gold-light); }
.team-photo { width: 110px; height: 110px; border-radius: 50%; background: var(--cream); border: 1px solid var(--border); display: block; margin: 0 auto 16px; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.team-name { display: block; font-family: var(--font); font-size: 15px; color: var(--green); margin-bottom: 4px; }
.team-role { display: block; font-size: 9.5px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; }
.team-cta { text-align: center; }

/* ── Citation éditoriale ──────────────────────────────────────────── */
#r5-statement { background: var(--green-700); padding: 64px 24px; text-align: center; }
#r5-statement-inner { max-width: 900px; margin: 0 auto; }
.r5-stmt-pre { font-size: 10px; color: var(--gold-light); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 20px; }
#r5-statement blockquote { font-family: var(--font); font-size: clamp(22px, 3.4vw, 34px); color: var(--white); line-height: 1.4; margin-bottom: 26px; }
#r5-statement blockquote em { color: var(--gold-light); font-style: italic; }
.r5-stmt-cta { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid rgba(255,255,255,0.35); color: var(--white); padding: 13px 32px; font-size: 13px; letter-spacing: 0.04em; }

/* ── Acheteurs / Off-Market ───────────────────────────────────────── */
.buyer { background: var(--cream); padding: 16px 24px 56px; }
.buyer-eyebrow-wrap { max-width: 1280px; margin: 0 auto 24px; }
.buyer-eyebrow { font-size: 11px; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.buyer-inner { max-width: 1280px; margin: 0 auto; display: grid; gap: 32px; }
.buyer-text h2 { font-family: var(--font); font-size: clamp(22px, 3vw, 28px); font-weight: normal; color: var(--green); margin-bottom: 14px; }
.buyer-text > p { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.bullet-list li { display: flex; gap: 10px; font-size: 14px; color: var(--text); margin-bottom: 10px; line-height: 1.6; }
.bullet-dot { color: var(--gold); flex-shrink: 0; }
.buyer-card-cta { display: block; width: 100%; background: var(--gold); color: var(--white); text-align: center; padding: 14px 20px; font-size: 13px; letter-spacing: 0.04em; font-weight: 500; margin-bottom: 10px; min-height: 44px; }
.buyer-disclaimer { font-size: 11px; color: var(--text-muted); text-align: center; }

/* ── Pourquoi / preuve FAO ────────────────────────────────────────── */
.pourquoi { background: var(--white); padding: 56px 24px; }
.pourquoi-inner { max-width: 1280px; margin: 0 auto; display: grid; gap: 40px; }
.pourquoi-text h2 { font-family: var(--font); font-size: clamp(22px, 3vw, 28px); font-weight: normal; color: var(--green); margin-bottom: 16px; line-height: 1.35; }
.pourquoi-text > p { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 28px; }
.proof-items { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.proof-item { display: flex; gap: 14px; align-items: flex-start; }
.proof-icon { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.proof-icon .ico { width: 18px; height: 18px; }
.proof-content h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.proof-content p { font-size: 13px; color: var(--text-muted); line-height: 1.55; }

/* ── Avis Google ──────────────────────────────────────────────────── */
.reviews-section { background: var(--white); padding: 56px 24px; border-top: 1px solid var(--border); }
.reviews-inner { max-width: 1280px; margin: 0 auto; }
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 20px; }
.reviews-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.reviews-brand-label { font-size: 13px; color: #5f6368; font-weight: 500; }
.reviews-score { display: flex; align-items: baseline; gap: 10px; }
.reviews-score-value { font-family: var(--font); font-size: 44px; color: var(--green); line-height: 1; }
.reviews-stars { color: #FBBC05; font-size: 18px; letter-spacing: 1px; }
.reviews-count { font-size: 12px; color: #5f6368; margin-top: 1px; }
.reviews-fallback-title { font-family: var(--font); font-size: clamp(22px, 3vw, 28px); font-weight: normal; color: var(--green); }
.reviews-all-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; border: 1px solid var(--border); padding: 10px 18px; font-size: 12.5px; color: var(--text); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.review-card { border: 1px solid #e8eaed; border-radius: 8px; padding: 22px; }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--white); font-weight: 500; flex-shrink: 0; }
.review-author { font-size: 13.5px; font-weight: 600; color: #202124; }
.review-date { font-size: 11px; color: #5f6368; margin-top: 1px; }
.review-source { margin-left: auto; flex-shrink: 0; display: flex; }
.review-stars { color: #FBBC05; font-size: 14px; letter-spacing: 1px; margin-bottom: 10px; }
.review-text { font-size: 13.5px; color: #3c4043; line-height: 1.65; }

/* ── Raccourci estimation ─────────────────────────────────────────── */
.home-est-shortcut { background: var(--cream); padding: 56px 24px; }
.home-est-shortcut-inner { max-width: 1280px; margin: 0 auto; }
.home-est-shortcut-panel { background: var(--white); border: 1px solid var(--border); padding: 32px 24px; }
.home-est-shortcut-kicker { font-size: 10px; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 20px; }
.home-est-shortcut-layout { display: grid; gap: 32px; }
.home-est-shortcut-title { font-family: var(--font); font-size: clamp(20px, 2.6vw, 26px); font-weight: normal; color: var(--green); margin-bottom: 12px; line-height: 1.35; }
.home-est-shortcut-text { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.home-est-shortcut-proof { display: flex; gap: 20px; flex-wrap: wrap; }
.home-est-shortcut-proof-item { display: flex; flex-direction: column; }
.home-est-shortcut-proof-item strong { font-family: var(--font); font-size: 18px; color: var(--green); }
.home-est-shortcut-proof-item span { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }
.home-est-shortcut-actions { background: var(--cream); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.home-est-shortcut-action-label { font-size: 10px; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.home-est-shortcut-action-title { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.home-est-shortcut-action-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.home-est-shortcut-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--green); color: var(--white); padding: 14px 24px; font-size: 13px; letter-spacing: 0.04em; }
.home-est-shortcut-note { font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.06em; text-align: center; }
.home-est-shortcut-seo { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.home-est-shortcut-chip { display: flex; flex-direction: column; }
.home-est-shortcut-chip strong { font-size: 12px; color: var(--green); }
.home-est-shortcut-chip span { font-size: 10.5px; color: var(--text-muted); }

/* ── Recherche acquéreur ──────────────────────────────────────────── */
.confier { background: var(--green); padding: 56px 24px; }
.confier-inner { max-width: 1280px; margin: 0 auto; display: grid; gap: 32px; }
.confier-text h2 { font-family: var(--font); font-size: clamp(22px, 3vw, 28px); font-weight: normal; color: var(--white); margin-bottom: 14px; }
.confier-text p { color: rgba(255,255,255,0.85); font-size: 14.5px; line-height: 1.7; margin-bottom: 10px; }
.confier-note { color: rgba(255,255,255,0.78); font-size: 13px; }
.confier-form { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); padding: 24px; }
.confier-form label { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.confier-form input, .confier-form select { margin-bottom: 14px; }
.confier-form-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.r5-form-status { font-size: 12.5px; color: rgba(255,255,255,0.8); margin-top: 10px; }

/* ── Centre de connaissances ──────────────────────────────────────── */
.connaissances { background: var(--cream); padding: 56px 24px; }
.connaissances-inner { max-width: 1280px; margin: 0 auto; }
.connaissances-title { font-family: var(--font); font-size: clamp(22px, 3vw, 28px); font-weight: normal; color: var(--green); margin-bottom: 8px; }
.connaissances-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
.guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.guide-card { background: var(--white); border: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.guide-card .icon { width: 36px; height: 36px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.guide-card .icon .ico { width: 17px; height: 17px; }
.guide-card h3 { font-family: var(--font); font-size: 17px; font-weight: normal; color: var(--green); }
.guide-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.guide-card .arrow { font-size: 12px; color: var(--gold); letter-spacing: 0.04em; }
.connaissances-cta { margin-top: 28px; text-align: center; }

/* ── CTA final / GEO / liens communes ─────────────────────────────── */
.cta-final { background: var(--green-700); padding: 64px 24px; text-align: center; }
.cta-final-inner { max-width: 800px; margin: 0 auto; }
.cta-final h2 { font-family: var(--font); font-size: clamp(24px, 3.2vw, 32px); font-weight: normal; color: var(--white); margin-bottom: 14px; }
.cta-final p { color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.7; margin-bottom: 28px; }
.cta-buttons { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* ── Éléments flottants ───────────────────────────────────────────── */
/* Popup flux : tout le style vient du CSS extrait (base.css — position
   d'origine : bas-droite, au-dessus du bouton WhatsApp). On ne garde ici
   que la gestion de l'attribut hidden, absent de l'original. */
.flux-popup[hidden] { display: none; }

/* ═══ Tablette ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .hero-content { padding: 120px 48px 80px; }
  .hero-mobile-intents { display: none; }
  .hero-ctas { flex-direction: row; flex-wrap: wrap; }
  .stats-section, .estimation, .recherches, .ventes, #r5-communes-strip,
  .proprietes, .team-section, .buyer, .pourquoi, .reviews-section,
  .home-est-shortcut, .confier, .connaissances { padding-left: 48px; padding-right: 48px; }
  .form-row, .confier-form-row { grid-template-columns: 1fr 1fr; }
  .estimation-inner, .buyer-inner, .pourquoi-inner, .confier-inner { grid-template-columns: 1fr 1fr; align-items: center; }
  .home-est-shortcut-layout { grid-template-columns: 1.4fr 1fr; }
  .cta-buttons { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

/* ═══ Desktop ════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .stats-section, .estimation, .recherches, .ventes, #r5-communes-strip,
  .proprietes, .team-section, .buyer, .pourquoi, .reviews-section,
  .home-est-shortcut, .confier, .connaissances,
  .cta-final { padding-left: 80px; padding-right: 80px; }
  .hero-content { padding: 140px 80px 100px; }
  .stats-grid { grid-template-columns: repeat(5, 1fr); }
    #r5-scroll-hint { display: block; margin-top: 28px; font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 0.14em; text-transform: uppercase; }
  #r5-scroll-hint-line { width: 1px; height: 40px; background: rgba(255,255,255,0.3); margin-bottom: 8px; }
}

/* Le CSS du hero (r5h-*) vit dans assets/css/hero.css — partagé entre
   la home et les pages à hero immersif (projets neufs...). */

/* ═════════════════════════════════════════════════════════════════════
   « La Vitrine » — moment signature du bloc propriétés, validé le
   13/08/2026 (prototype work/vitrine-lab.html). Une pièce à la fois,
   éclairée dans l'obscurité ; plaque gravée ; repères 01·02·03 avec
   minuterie. Rotation gérée par assets/js/home.js.
   ═════════════════════════════════════════════════════════════════════ */
/* Fond : jamais de noir sur le site (règle Gary 13/08) — le sombre,
   c'est le bleu nuit signature. Dégradé diagonal reproduisant le visuel
   de marque fourni : nuit profonde en bas-gauche, saphir qui s'éclaire
   vers le haut-droit. En CSS pur : aucune image à charger, net partout. */
.vitrine {
  position: relative;
  background:
    radial-gradient(140% 120% at 85% 8%, rgba(26,74,128,0.28) 0%, transparent 52%),
    linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 45%, var(--green) 78%, var(--green-mid) 100%);
  overflow: hidden;
}
/* Le padding « max(gouttière, (100% - 1280px) / 2) » est l'idiome du
   bandeau pleine largeur à contenu centré : le pourcentage se résout sur
   le bloc conteneur, donc sur la LARGEUR DE L'ÉCRAN. Il remplace à lui
   seul le max-width — et ne se cumule pas avec.

   Ici les deux étaient posés. Au-delà de 1280 px, la boîte restait bloquée
   à 1280 pendant que le padding continuait de grandir de la moitié du
   débordement : le contenu valait 2560 − largeur d'écran. À 1792 px il
   tombait à 768 px et l'image à 412 px de large ; à 2560 px il valait
   ZÉRO et l'image disparaissait. Plus l'écran était grand, plus la
   vitrine rétrécissait.

   .header-inner pose « max-width: none » pour exactement cette raison, et
   .r5h-inner n'en a jamais eu. La vitrine était la seule à cumuler.
   Signalé par Gary le 31/08/2026. */
.vitrine-inner {
  width: 100%;
  padding: 72px max(24px, calc((100% - 1280px) / 2)) 64px;
}

.vitrine-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; margin-bottom: 36px;
}
.vitrine-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.vitrine-kicker::before { content: ''; width: 44px; height: 1px; background: var(--gold-light); }
.vitrine-all {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-light); white-space: nowrap;
}

.vitrine-stage { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }

.vitrine-case { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.vitrine-case::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,0.14);
  pointer-events: none; z-index: 2;
}
.vitrine-case::before {
  content: ''; position: absolute; inset: -1px;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(1,3,6,0.42) 100%);
  z-index: 1; pointer-events: none;
}
.vitrine-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.vitrine-photo.is-active {
  opacity: 1;
  animation: vitrine-breathe 8s ease-out both;
}
@keyframes vitrine-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }

/* Plaques empilées : l'active définit la hauteur, les autres attendent
   en absolu, invisibles ET hors tabulation (visibility). */
.vitrine-plaques { position: relative; }
.vitrine-plaque { position: absolute; inset: 0; visibility: hidden; }
.vitrine-plaque.is-active { position: relative; visibility: visible; }

.plq { display: block; }
.plq-index { font-size: 10.5px; letter-spacing: 0.3em; color: rgba(255,255,255,0.35); margin-bottom: 26px; }
.plq-commune { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; }
.plq-title {
  font-family: var(--font); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.18;
  color: var(--white); margin-bottom: 26px;
  overflow-wrap: break-word;
}
.plq-rule { width: 44px; height: 1px; background: var(--gold); margin-bottom: 26px; }
.plq-price { font-family: var(--font); font-size: clamp(22px, 2vw, 28px); color: rgba(255,255,255,0.92); margin-bottom: 12px; }
.plq-stats { font-size: 12.5px; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); margin-bottom: 36px; }
.plq-cta {
  font-size: 13px; color: var(--white);
  border-bottom: 1px solid rgba(168,139,99,0.5); padding-bottom: 4px;
  transition: color .3s, border-color .3s;
  min-height: 44px; display: inline-flex; align-items: flex-end;
}
.plq-cta:hover { color: var(--gold-light); border-color: var(--gold-light); }

.vitrine-plaque .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s cubic-bezier(0.19,1,0.22,1), transform .9s cubic-bezier(0.19,1,0.22,1);
}
.vitrine-plaque.is-active .reveal { opacity: 1; transform: none; }
.vitrine-plaque.is-active .reveal:nth-child(2) { transition-delay: .08s; }
.vitrine-plaque.is-active .reveal:nth-child(3) { transition-delay: .16s; }
.vitrine-plaque.is-active .reveal:nth-child(4) { transition-delay: .22s; }
.vitrine-plaque.is-active .reveal:nth-child(5) { transition-delay: .28s; }
.vitrine-plaque.is-active .reveal:nth-child(6) { transition-delay: .34s; }
.vitrine-plaque.is-active .reveal:nth-child(7) { transition-delay: .42s; }

.vitrine-nav { display: flex; gap: 28px; margin-top: 40px; }
.vitrine-dot { appearance: none; background: none; border: none; cursor: pointer; padding: 8px 0; text-align: left; min-height: 44px; }
.vitrine-dot-num {
  display: block; font-size: 11px; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.38); margin-bottom: 10px;
  transition: color .4s;
}
.vitrine-dot.is-active .vitrine-dot-num { color: var(--gold-light); }
.vitrine-dot-line {
  display: block; width: 56px; height: 1px;
  background: rgba(255,255,255,0.16);
  position: relative; overflow: hidden;
}
.vitrine-dot-line::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: var(--gold-light);
  transform: translateX(-101%);
}
.vitrine-dot.is-active .vitrine-dot-line::after {
  transition: transform var(--vitrine-hold, 7s) linear;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .vitrine-photo, .vitrine-plaque .reveal, .vitrine-dot-line::after { transition: none !important; animation: none !important; }
  .vitrine-plaque .reveal { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
  .vitrine-inner { padding-left: max(48px, calc((100% - 1280px) / 2)); padding-right: max(48px, calc((100% - 1280px) / 2)); }
}
@media (min-width: 900px) {
  .vitrine-head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
  .vitrine-stage { grid-template-columns: 1.45fr 1fr; gap: 72px; min-height: 560px; }
  .vitrine-nav { margin-top: 56px; gap: 36px; }
}
@media (min-width: 1100px) {
  .vitrine-inner { padding-left: max(80px, calc((100% - 1280px) / 2)); padding-right: max(80px, calc((100% - 1280px) / 2)); }
}

/* ═════════════════════════════════════════════════════════════════════
   Corrections design 13/08 (retours Gary sur la home).
   ═════════════════════════════════════════════════════════════════════ */

/* 1. Carte « Explorer le marché » : compacte sur mobile — pleine
   largeur en bandeau horizontal, typo raisonnable (elle occupait un
   écran entier). */
@media (max-width: 767px) {
  #page-home .stat-card--market {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    min-height: 0 !important;
  }
  #page-home .stat-number--market {
    font-size: 15px !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
  }
  #page-home .stat-label--market { font-size: 10px !important; text-align: right; }
  #page-home .stat-label--market br { display: none; }
}

/* Très petits écrans (320 px) : le bandeau horizontal ne tient plus —
   « Explorer le marché → » est en nowrap (145 px) et la carte, en
   overflow:hidden, coupait purement et simplement le libellé de droite.
   On repasse en colonne : rien n'est tronqué. */
@media (max-width: 360px) {
  #page-home .stat-card--market {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 16px 18px !important;
  }
  #page-home .stat-label--market { text-align: left !important; }
}

/* 2. Carte Off-Market : montée en gamme — l'écrin bleu nuit signature,
   kicker or à trait, titre serif fin blanc, CTA pilule or. */
#page-home .buyer-card {
  background:
    radial-gradient(130% 110% at 88% 6%, rgba(26,74,128,0.30) 0%, transparent 52%),
    linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 45%, var(--green) 80%, var(--green-mid) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding: 42px 38px !important;
}
#page-home .buyer-card .tag {
  display: inline-flex !important; align-items: center; gap: 12px;
  font-size: 10.5px !important; letter-spacing: 0.28em !important;
  color: var(--gold-light) !important; text-transform: uppercase;
  margin-bottom: 16px !important;
}
#page-home .buyer-card .tag::before { content: ''; width: 36px; height: 1px; background: var(--gold-light); }
#page-home .buyer-card h2 {
  font-family: var(--font) !important; font-weight: 400 !important;
  font-size: clamp(24px, 2.4vw, 31px) !important; letter-spacing: -0.01em;
  color: var(--white) !important; margin-bottom: 12px !important;
}
#page-home .buyer-card > p { color: rgba(255,255,255,0.72) !important; font-size: 14px !important; line-height: 1.75 !important; }
#page-home .buyer-card-cta {
  border-radius: 50px !important;
  font-size: 12px !important; letter-spacing: 0.12em !important; text-transform: uppercase;
  padding: 16px 20px !important;
  transition: background .3s, transform .3s, box-shadow .3s;
}
#page-home .buyer-card-cta:hover {
  background: var(--gold-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
#page-home .buyer-disclaimer {
  color: rgba(255,255,255,0.45) !important;
  font-size: 10.5px !important; letter-spacing: 0.06em !important;
}

/* 3. Commune vedette (Cologny) : navy par défaut (style d'origine,
   restauré) — le survol garde UNIQUEMENT l'animation commune à toutes
   les cartes (lift + ombre + trait or), plus aucun changement de
   couleur. */
#page-home .r5-commune-item-featured,
#page-home .r5-commune-item-featured:hover {
  background:
    linear-gradient(160deg, var(--green-700) 0%, var(--green) 60%, var(--green-mid) 100%) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
#page-home .r5-commune-item-featured:hover {
  box-shadow: 0 18px 40px rgba(8,25,56,0.28) !important;
}
#page-home .r5-commune-item-featured .r5-commune-name { color: var(--white) !important; }
#page-home .r5-commune-item-featured .r5-commune-topline { color: rgba(255,255,255,0.55) !important; }
#page-home .r5-commune-item-featured .r5-commune-accent { color: var(--gold-light) !important; }
#page-home .r5-commune-item-featured .r5-commune-arrow { color: var(--gold-light) !important; }
#page-home .r5-commune-item-featured .r5-commune-stat strong { color: var(--white) !important; }
#page-home .r5-commune-item-featured .r5-commune-stat span { color: rgba(255,255,255,0.5) !important; }
#page-home .r5-commune-item-featured .r5-commune-stats { border-top-color: rgba(255,255,255,0.18) !important; }

/* Carte marché : couleurs garanties à TOUTES les largeurs (le blanc du
   texte ne vivait que dans une règle desktop → invisible sur mobile). */
#page-home .stat-card--market { background: var(--green) !important; }
#page-home .stat-number--market { color: var(--white) !important; }
#page-home .stat-label--market { color: rgba(255,255,255,0.75) !important; }

/* Repères de la Vitrine : pas d'anneau de focus au clic souris (retour
   Gary 13/08) — l'indicateur ne reste que pour la navigation clavier. */
.vitrine-dot:focus { outline: none; }
.vitrine-dot:focus-visible { outline: 1px solid var(--gold-light); outline-offset: 4px; }

/* ═══ Bande vendeurs — audit confidentiel d'annonce (18/08) ═══ */
.home-audit { background: var(--green); padding: 64px 80px; border-top: 1px solid rgba(255,255,255,0.07); }
.home-audit-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.home-audit-copy { max-width: 640px; }
.home-audit-kicker { display: block; margin-bottom: 12px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); font-family: var(--font-sans); }
.home-audit h2 { font-family: var(--font); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); color: white; line-height: 1.25; }
.home-audit-copy p { margin: 12px 0 0; font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.75; font-family: var(--font-sans); }
.home-audit-action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.home-audit-cta { display: inline-flex; align-items: center; min-height: 54px; background: var(--gold); color: white;
  padding: 16px 38px; border-radius: 50px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; font-family: var(--font-sans); transition: background .3s, transform .3s; white-space: nowrap; }
.home-audit-cta:hover { background: var(--gold-light); transform: translateY(-2px); }
.home-audit-note { font-size: 11px; color: rgba(255,255,255,0.45); font-family: var(--font-sans); }

/* ── Raccord : bande « audit » → bloc « recherche » ───────────────
   Les deux sections partagent exactement le même navy et se touchaient
   sans rien entre elles : 866 px d'aplat continu, où l'œil ne distingue
   plus deux propositions — alors que l'une s'adresse au vendeur dont
   l'annonce s'éternise, et l'autre à l'acquéreur qui ne trouve pas.

   Un filet doré marque la frontière, à la largeur du contenu et éteint
   sur les bords pour ne pas couper la page en deux. L'espace se
   resserre au passage : 164 px de vide, ce n'était pas une respiration,
   c'était une absence de décision.

   Le sélecteur vise le voisinage (`+`) et non `.confier` seule : le
   filet n'a de sens qu'à CE raccord. Ailleurs, le bloc recherche garde
   sa mise en page. Sa spécificité (un id, deux classes) lui fait gagner
   la cascade contre les `!important` de la normalisation de colonnes,
   sans en ajouter un de plus. */
#page-home .home-audit { padding-bottom: 56px; }
#page-home .home-audit + .confier { padding-top: 0 !important; }
#page-home .home-audit + .confier .confier-inner {
  position: relative;
  padding-top: 64px;
}
#page-home .home-audit + .confier .confier-inner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(199,176,138,0) 0%,
    rgba(199,176,138,0.45) 18%,
    rgba(199,176,138,0.45) 82%,
    rgba(199,176,138,0) 100%);
}
@media (max-width: 900px) {
  #page-home .home-audit { padding-bottom: 44px; }
  #page-home .home-audit + .confier .confier-inner { padding-top: 48px; }
}
@media (max-width: 900px) {
  .home-audit { padding: 48px 24px; }
  .home-audit-inner { flex-direction: column; align-items: flex-start; }
}
