/* R5 — nos-ventes.css. Page « Nos ventes » (page-templates/nos-ventes.php),
   maquette work/nos-ventes-lab.html validée par Gary le 14/08.
   Tokens : base.css. Classes vte-* (nv-* = simulateur Net Vendeur). */

/* ═══════════════════════════════════════════════════════════════════
   MAQUETTE — page « Nos ventes ». ~200 biens vendus (Apimo : catégorie
   Vente, étape Terminé, biens isolés — lots de programmes exclus).
   Objectifs : réassurance massive + SEO/GEO n°1.
   1. hero « chiffres vivants » + preuve FAO
   2. dernières ventes en grand (fraîcheur : Vendu · Mois Année)
   3. LES VENTES en cartes éditoriales 2 col., 10 par 10 + filtres
   4. bloc « Vous envisagez de vendre ? » + bouton ESTIMER flottant
   5. CTA vendeur « Votre bien pourrait être le prochain »
   6. FAQ microdata
   Pas de prix individuels (règle d'or) · pas de NocoDB · pas d'avis.
   ═══════════════════════════════════════════════════════════════════ */
.vte-k { font-size: 10px; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 14px; }

/* ═══ 1. HERO chiffres vivants ═══ */
.nh { position: relative; padding: 150px 80px 70px; overflow: hidden;
  background: radial-gradient(130% 110% at 88% 6%, rgba(26,74,128,0.25) 0%, transparent 52%),
    linear-gradient(135deg, var(--green-800), var(--green-700) 45%, var(--green) 80%, var(--green-mid)); }
.nh-inner { max-width: 1280px; margin: 0 auto; }
.nh-kicker { display: block; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 16px; }
.nh h1 { font-family: var(--font); font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; color: white; max-width: 30ch; }
.nh h1 em { font-style: italic; color: var(--gold-light); }
/* Équilibre (Gary 14/08) : texte et compteurs côte à côte, plus de
   colonne maigre ni de vide à droite. */
.nh-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px 72px; margin-top: 30px; align-items: center; }
.nh-proof { font-size: 13.5px; color: rgba(255,255,255,0.62); line-height: 1.8; max-width: 72ch; }
.nh-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 34px 60px; justify-content: start; }
.nh-stat strong { display: block; font-family: var(--font); font-size: clamp(34px, 3.4vw, 50px); font-weight: 400; color: white; line-height: 1; }
.nh-stat span { display: block; margin-top: 8px; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* ═══ 2. Dernières ventes ═══ */
.nl { background: var(--cream); padding: 72px 80px 56px; }
.nl-inner { max-width: 1280px; margin: 0 auto; }
.nl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.nl-head h2 { font-family: var(--font); font-size: clamp(24px, 3vw, 38px); font-weight: 400; color: var(--green); }
.nl-note { font-size: 12px; color: var(--text-light); }
.nl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nl-card { position: relative; display: block; overflow: hidden; background: var(--green); aspect-ratio: 4 / 3; text-decoration: none; }
.nl-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 3s ease-out; display: block; }
.nl-card:hover img { transform: scale(1.05); }
.nl-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,8,20,0.75) 0%, rgba(2,8,20,0.12) 55%); }
.nl-seal { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; padding: 6px 13px; background: rgba(2,8,20,0.4); }
.nl-seal::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); }
.nl-copy { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.nl-city { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); display: block; margin-bottom: 6px; }
.nl-name { font-family: var(--font); font-size: 19px; color: white; line-height: 1.25; }
.nl-type { display: block; margin-top: 5px; font-size: 11px; color: rgba(255,255,255,0.55); }

/* ═══ 4. LES VENTES — cartes éditoriales 2 colonnes, 10 par 10 ═══ */
.nr { background: var(--cream); padding: 72px 80px; }
.nr-inner { max-width: 1280px; margin: 0 auto; }
.nr-head { margin-bottom: 30px; }
.nr-head h2 { font-family: var(--font); font-size: clamp(26px, 3.2vw, 42px); font-weight: 400; color: var(--green); }
.nr-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.nr-chip { background: var(--white); border: 1px solid var(--border); color: var(--text-muted); font-size: 11.5px;
  letter-spacing: 0.04em; padding: 9px 18px; border-radius: 50px; cursor: pointer; font-family: var(--font-sans); transition: all .25s; }
.nr-chip.on { background: var(--green); border-color: var(--green); color: white; }
.nr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; margin-top: 36px; }
.vte-card { background: var(--white); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.vte-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--green); }
.vte-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88); transition: transform 3s ease-out; display: block; }
.vte-card:hover .vte-media img { transform: scale(1.04); }
.vte-seal { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; padding: 6px 13px; background: rgba(2,8,20,0.45); }
.vte-seal::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); }
.vte-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.vte-city { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 8px; }
.vte-title { font-family: var(--font); font-size: clamp(20px, 1.8vw, 25px); font-weight: 400; color: var(--green); line-height: 1.25; margin-bottom: 12px; }
/* Le titre est devenu un lien vers la fiche du bien vendu. Il garde
   exactement l'allure qu'il avait : le soulignement n'apparaît qu'au
   survol, comme sur le reste du site. */
.vte-title a { color: inherit; text-decoration: none; }
.vte-title a:hover, .vte-title a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.vte-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.8; margin-bottom: 18px; }
.vte-stats { border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-bottom: 18px; }
.vte-stat { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.vte-stat dt { color: var(--text-light); letter-spacing: 0.04em; }
.vte-stat dd { color: var(--green); font-weight: 500; }
.vte-cta { margin-top: auto; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid rgba(139,111,71,0.4); padding-bottom: 3px; align-self: flex-start; }
.vte-cta:hover { color: var(--gold-light); }
/* Carte-CTA intercalée dans la grille — même gabarit que les ventes,
   convertit au cœur de la preuve (pattern natif). */
.vte-cta-card { background: radial-gradient(130% 110% at 88% 6%, rgba(26,74,128,0.3) 0%, transparent 52%),
  linear-gradient(135deg, var(--green-800), var(--green-700) 45%, var(--green) 80%, var(--green-mid));
  border: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; justify-content: center;
  padding: 44px 40px; }
.vte-cta-card .vte-k { color: var(--gold-light); }
.vte-cta-card h3 { font-family: var(--font); font-size: clamp(22px, 2vw, 28px); font-weight: 400; color: white;
  line-height: 1.25; margin-bottom: 12px; }
.vte-cta-card h3 em { font-style: italic; color: var(--gold-light); }
.vte-cta-card p { font-size: 13.5px; color: rgba(255,255,255,0.68); line-height: 1.8; margin-bottom: 24px; }
.vte-cta-card a { display: inline-flex; align-items: center; min-height: 50px; background: var(--gold); color: white;
  padding: 14px 30px; border-radius: 50px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; align-self: flex-start; transition: background .3s, transform .3s; font-family: var(--font-sans); }
.vte-cta-card a:hover { background: var(--gold-light); transform: translateY(-2px); }

/* Commune de chaque carte = lien vers la fiche commune (maillage GEO). */
a.vte-city { text-decoration: none; }
a.vte-city:hover { color: var(--gold-light); }

.nr-more { margin-top: 40px; text-align: center; }
.nr-more button { background: none; border: 1px solid rgba(8,25,56,0.3); border-radius: 50px; color: var(--green);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 34px; cursor: pointer; font-family: var(--font-sans); transition: all .25s; }
.nr-more button:hover { border-color: var(--gold); color: var(--gold); }
.nr-count { display: block; margin-top: 10px; font-size: 11px; color: var(--text-light); }

/* ═══ Bloc « Vous envisagez de vendre ? » ═══ */
.nsell { background: var(--white); border-top: 1px solid var(--border); padding: 72px 80px; }
.nsell-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.nsell h2 { font-family: var(--font); font-size: clamp(26px, 3.2vw, 42px); font-weight: 400; color: var(--green); line-height: 1.15; margin-bottom: 16px; }
.nsell p { font-size: 14.5px; color: var(--text-muted); line-height: 1.85; max-width: 58ch; }
.nsell-points { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.nsell-points span { font-size: 10.5px; letter-spacing: 0.06em; color: var(--gold); border: 1px solid rgba(139,111,71,0.3);
  border-radius: 50px; padding: 7px 15px; }
.nsell-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.nsell-primary { display: inline-flex; align-items: center; min-height: 52px; background: var(--gold); color: white;
  padding: 15px 34px; border-radius: 50px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; transition: background .3s, transform .3s; font-family: var(--font-sans); }
.nsell-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.nsell-ghost { display: inline-flex; align-items: center; min-height: 48px; background: none; color: var(--green);
  padding: 13px 30px; border: 1px solid rgba(8,25,56,0.3); border-radius: 50px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; font-family: var(--font-sans); transition: all .3s; }
.nsell-ghost:hover { border-color: var(--gold); color: var(--gold); }
.nsell-note { font-size: 11.5px; color: var(--text-light); }

/* ═══ Bouton ESTIMER flottant (suit le scroll) ═══ */
.nfloat { position: fixed; right: 24px; bottom: 32px; z-index: 90;
  display: inline-flex; align-items: center; gap: 9px; min-height: 52px; background: var(--gold); color: white;
  padding: 15px 28px; border-radius: 50px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; font-family: var(--font-sans); box-shadow: 0 14px 40px rgba(8,25,56,0.35);
  transform: translateY(140%); opacity: 0; transition: transform .45s cubic-bezier(0.22,1,0.36,1), opacity .35s, background .3s; }
.nfloat.on { transform: translateY(0); opacity: 1; }
.nfloat:hover { background: var(--gold-light); }
.nfloat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: white; opacity: 0.85; }

/* ═══ 5. CTA vendeur ═══ */
.nc { background: radial-gradient(130% 110% at 88% 6%, rgba(26,74,128,0.25) 0%, transparent 52%),
  linear-gradient(135deg, var(--green-800), var(--green-700) 45%, var(--green) 80%, var(--green-mid));
  padding: 80px; text-align: center; }
.nc h2 { font-family: var(--font); font-size: clamp(26px, 3.4vw, 44px); font-weight: 400; color: white; }
.nc h2 em { font-style: italic; color: var(--gold-light); }
.nc p { margin: 14px auto 30px; font-size: 14px; color: rgba(255,255,255,0.7); max-width: 54ch; line-height: 1.8; }
.nc a { display: inline-flex; align-items: center; min-height: 52px; background: var(--gold); color: white;
  padding: 15px 36px; border-radius: 50px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; transition: background .3s, transform .3s; font-family: var(--font-sans); }
.nc a:hover { background: var(--gold-light); transform: translateY(-2px); }

/* ═══ 6. FAQ ═══ */
.nf { background: var(--white); padding: 64px 80px; }
.nf-inner { max-width: 860px; margin: 0 auto; }
.nf h2 { font-family: var(--font); font-size: clamp(22px, 2.8vw, 32px); font-weight: 400; color: var(--green); margin-bottom: 28px; }
.nf-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
.nf-item:first-of-type { border-top: 1px solid var(--border); }
.nf-item h3 { font-family: var(--font); font-size: 17px; font-weight: 400; color: var(--green); margin-bottom: 10px; }
.nf-item p { font-size: 13.5px; color: var(--text-muted); line-height: 1.85; }

@media (max-width: 1000px) {
  .nh, .nl, .ny, .nr, .nc, .nf { padding-left: 24px; padding-right: 24px; }
  .nh { padding-top: 120px; }
  .nh-grid { grid-template-columns: 1fr; gap: 32px; }
  .nh-stats { grid-template-columns: repeat(2, auto); gap: 24px 40px; }
  .nl-grid { grid-template-columns: 1fr; }
  .ny-track { flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
  .ny-year { flex: 0 0 calc(20% - 12px); }
  .nr-grid { grid-template-columns: 1fr; gap: 28px; }
  .nsell-inner { grid-template-columns: 1fr; gap: 32px; }
  .nfloat { right: auto; left: 50%; bottom: 18px; padding: 14px 30px;
    transform: translate(-50%, 160%); }
  .nfloat.on { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Renommages template + intégration thème */
.vte-gold { color: var(--gold-light) !important; }
.vte-cta-card .vte-k { color: var(--gold-light); }
.vte-cta { background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); }
/* Hero sous le header flottant */
.nh { padding-top: calc(var(--r5-header-h, 96px) + 54px); }
/* La bulle WhatsApp remonte au-dessus du bouton ESTIMER (desktop et mobile). */
.page-template-nos-ventes #wa-float { bottom: 100px; }
@media (max-width: 1000px) {
  .page-template-nos-ventes #wa-float { bottom: 88px; right: 16px; }
}

/* ═══ Bande audit d'annonce — vendeurs en difficulté (18/08) ═══ */
.naud { background: var(--white); padding: 0 80px 64px; }
.naud-inner { max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; padding: 26px 34px; border: 1px solid rgba(139,111,71,0.25); border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(248,245,240,0.6)); }
.naud p { margin: 0; max-width: 620px; font-size: 13px; color: var(--text-muted); line-height: 1.7; font-family: var(--font-sans); }
.naud p strong { color: var(--green); font-weight: 600; }
.naud a { display: inline-flex; align-items: center; min-height: 46px; background: var(--green); color: white;
  padding: 13px 28px; border-radius: 50px; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; font-family: var(--font-sans); white-space: nowrap; transition: background .3s; }
.naud a:hover { background: var(--gold); }
@media (max-width: 900px) {
  .naud { padding: 0 16px 48px; }
  .naud-inner { padding: 22px 20px; }
}