/**
 * Page Estimation — maquette work/estimation-lab.html validée par Gary
 * le 18/08 (parcours en 3 étapes de ses captures : Identification →
 * Caractéristiques → Vos informations, teaser verrouillé CHF *** — ***,
 * écran de calcul animé, carrousel des 3 dernières ventes).
 * Sections : eh hero · ev carrousel ventes · ew wizard · er résultat ·
 * em méthode · eq FAQ.
 */

/* ═══════════════════════════════════════════════════════════════════
   MAQUETTE — page Estimation (/estimation-et-expertise, URL du live).
   Parcours défini par Gary (captures 18/08) :
   3 étapes — Identification du bien → Caractéristiques (adaptées
   appartement/villa) → Vos informations, avec :
   - teaser VERROUILLÉ « CHF *** — *** » au-dessus des coordonnées,
   - écran de calcul animé (« Analyse des critères → Recherche de
     biens similaires → Calcul de l'estimation »),
   - carrousel des 3 dernières ventes à côté (la confiance par ceux
     qui vendent),
   puis résultat : fourchette IA + détail du calcul + le push
   « estimation d'expert sous 24 h ».
   ═══════════════════════════════════════════════════════════════════ */
.k-es { font-size: 10px; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 14px; }

/* ═══ 1. HERO ═══ */
.eh { background: var(--green); padding: calc(var(--r5-header-h, 96px) + 44px) 80px 56px; text-align: center; }
.eh .k-es { color: var(--gold-light); }
.eh h1 { font-family: var(--font); font-weight: 400; font-size: clamp(28px, 3.6vw, 46px); color: white; line-height: 1.15; max-width: 24ch; margin: 0 auto; }
.eh h1 em { font-style: italic; color: var(--gold-light); }
.eh p { margin: 16px auto 0; font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.8; max-width: 54ch; }
.eh-badges { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.eh-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-light); border: 1px solid rgba(168,139,99,0.35); border-radius: 50px; padding: 8px 16px; }
.eh-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); }

/* ═══ 2. LE WIZARD + carrousel ═══ */
.ew { background: var(--cream); padding: 0 80px 72px; }
.ew-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 28px; align-items: start; }
.ew-card { background: var(--white); border: 1px solid var(--border); margin-top: 40px; }

/* Carrousel « Vendus récemment » */
.ev { margin-top: 40px; position: sticky; top: 90px; overflow: hidden; background: var(--green-800); }
.ev-slide { position: relative; aspect-ratio: 4 / 5; display: none; }
.ev-slide.on { display: block; }
.ev-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,8,20,0.9) 0%, rgba(2,8,20,0.25) 55%, rgba(2,8,20,0.15) 100%); }
.ev-copy { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 2; }
/* Le badge « Vendu en juin 2026 » : or plein, coche, posé au-dessus du
   titre — on doit comprendre en un regard que ce bien n'est PAS à vendre. */
.ev-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: 999px; margin-bottom: 14px;
  background: var(--gold); color: #fff;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}
.ev-badge i {
  width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.22);
  position: relative; flex: none;
}
.ev-badge i::after {
  content: ""; position: absolute; left: 4px; top: 3px; width: 4px; height: 7px;
  border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg);
}
.ev-title { font-family: var(--font); font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; color: white; line-height: 1.25; }
.ev-city { display: inline-block; margin-top: 12px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: white; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; padding: 6px 14px; }
.ev-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); z-index: 3; }
.ev-nav { position: absolute; right: 20px; bottom: 88px; z-index: 3; display: flex; gap: 8px; }
.ev-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
  background: rgba(2,8,20,0.4); color: white; font-size: 15px; cursor: pointer; transition: background .25s; }
.ev-nav button:hover { background: var(--gold); border-color: var(--gold); }
.ev-dots { position: absolute; left: 26px; top: 22px; z-index: 3; display: flex; gap: 7px; }
.ev-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); transition: background .25s; }
.ev-dot.on { background: var(--gold-light); }
.ev-foot { padding: 14px 26px; background: var(--green); font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.6; }
.ev-foot a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(168,139,99,0.5); }

/* Jauge */
.ew-prog { padding: 22px 40px 0; }
.ew-prog-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ew-prog-label { font-size: 12px; font-weight: 600; color: var(--green); }
.ew-prog-pct { font-size: 12px; color: var(--text-light); }
.ew-prog-track { height: 4px; background: var(--cream); border-radius: 50px; overflow: hidden; }
.ew-prog-fill { height: 100%; background: var(--gold); border-radius: 50px; transition: width .4s; width: 33%; }

.ew-body { padding: 28px 40px 40px; }
.ew-step { display: none; }
.ew-step.on { display: block; }
.ew-q { display: flex; align-items: center; gap: 14px; font-family: var(--font); font-size: clamp(20px, 2.4vw, 27px); font-weight: 400; color: var(--green); line-height: 1.25; }
.ew-q .n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: white;
  font-family: var(--font-sans); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.ew-sub { margin-top: 8px; font-size: 12.5px; color: var(--text-light); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }

/* Champs */
.ew-label { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  margin: 18px 0 8px; font-weight: 600; }
.ew-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.ew-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.ew-input, .ew-select, .ew-textarea { width: 100%; padding: 13px 18px; border: 1px solid var(--border); border-radius: 50px;
  background: var(--white); color: var(--text); font-size: 13.5px; font-family: var(--font-sans); }
.ew-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B6F47' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 38px; cursor: pointer; }
.ew-input[readonly] { background: var(--cream); color: var(--text-muted); }
.ew-textarea { border-radius: 20px; min-height: 80px; resize: vertical; }
.ew-input:focus, .ew-select:focus, .ew-textarea:focus { outline: none; border-color: var(--gold); }
.ew-hint { font-size: 11px; color: var(--text-light); margin-top: 6px; line-height: 1.6; }
.ew-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ew-chip { background: var(--cream); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px;
  padding: 10px 18px; border-radius: 50px; cursor: pointer; font-family: var(--font-sans); transition: all .22s; user-select: none; }
.ew-chip:hover { border-color: rgba(139,111,71,0.5); }
.ew-chip.on { background: var(--green); border-color: var(--green); color: white; }

/* ═══ Teaser verrouillé (étape 3) ═══════════════════════════════
   Refonte du 28/08 (Gary : « rends-le moderne, et que ça donne envie
   de découvrir la data »). L'ancien montrait « CHF *** — *** » dans
   deux encadrés en pointillés : le vocabulaire de la CENSURE, alors
   que le message est « votre chiffre est prêt ».

   Ce qui change, et pourquoi :
   · fond NAVY. C'est le prix qui se cache : il mérite la couleur
     d'autorité de la marque, pas le crème des formulaires. Le bloc
     se détache de la page au lieu de s'y fondre.
   · des blocs qui SCINTILLENT au lieu d'astérisques. Le balayage doré
     dit « la donnée arrive » ; les astérisques disaient « interdit ».
     Aucun faux chiffre n'est affiché, même flouté — on ne suggère pas
     un montant qu'on n'a pas encore calculé.
   · le cadenas est un SVG, plus un emoji : un emoji change de dessin
     à chaque système et jure avec une typographie soignée.
   ═══════════════════════════════════════════════════════════════ */
.ew-lock {
  position: relative; overflow: hidden;
  margin-bottom: 26px; padding: 30px 32px 28px; border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(139,111,71,0.30) 0%, rgba(139,111,71,0) 58%),
    linear-gradient(160deg, #0E2246 0%, var(--green, #081938) 62%);
  box-shadow: 0 18px 44px -28px rgba(8,25,56,0.75);
}
/* Un liseré doré en haut : la même signature que les cartes premium
   du site, et il annonce la couleur avant même la lecture. */
.ew-lock::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light, #A88B63) 30%, #C7B08A 50%, var(--gold-light, #A88B63) 70%, transparent);
}

.ew-lock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ew-lock-kicker { display: block; margin-bottom: 8px; font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #C7B08A; }
.ew-lock-head h3 { font-family: var(--font); font-size: clamp(21px, 2.6vw, 27px); font-weight: 400;
  color: #fff; line-height: 1.2; }

.ew-lock-badge { display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #E7D6B4; background: rgba(199,176,138,0.12);
  border: 1px solid rgba(199,176,138,0.34); border-radius: 50px; padding: 9px 16px; }
.ew-lock-badge svg { width: 13px; height: 13px; flex: none; }

/* Rappel du bien saisi — rempli par le script. Le visiteur reconnaît
   SON bien : « Appartement · 120 m² · Cologny », pas un gabarit. */
.ew-lock-recap { margin-top: 14px; font-family: var(--font-sans); font-size: 12.5px;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.62); }
.ew-lock-recap[hidden] { display: none; }

.ew-lock-range { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px 16px; margin: 24px 0 4px; }
.ew-lock-cur { font-family: var(--font); font-size: clamp(22px, 2.8vw, 30px); color: rgba(255,255,255,0.9);
  letter-spacing: 0.02em; }
.ew-lock-sep { color: rgba(199,176,138,0.7); font-size: clamp(20px, 2.4vw, 26px); line-height: 1; }

/* Les chiffres masqués : trois blocs par montant, comme trois groupes
   de milliers. La hauteur suit la casse du texte voisin pour que la
   ligne reste une ligne. */
.ew-lock-mask { display: inline-flex; align-items: center; gap: 7px; }
.ew-lock-mask i {
  display: block; width: clamp(26px, 3.4vw, 38px); height: clamp(30px, 3.6vw, 40px);
  border-radius: 8px;
  /* Un doré translucide sur du navy vire au gris : à 30 % d'opacité le
     mélange donne rgb(110,108,105), soit un gris chaud. On pose donc
     des valeurs pleines — bronze en haut, ombre en bas — pour que le
     bloc lise « une valeur en or est là-dessous », pas « case vide ».
     Assez sourd, cependant, pour ne pas rivaliser avec le bouton
     d'envoi : c'est un voile, pas un appel à l'action. */
  background: linear-gradient(180deg, #9A8055 0%, #6E5837 100%);
  border: 1px solid rgba(231,214,180,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  position: relative; overflow: hidden;
}
/* Le balayage. Décalé d'un bloc à l'autre pour que la lumière traverse
   la fourchette de gauche à droite plutôt que de clignoter en bloc. */
.ew-lock-mask i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,0.62) 50%, transparent 82%);
  transform: translateX(-130%);
  animation: ew-lueur 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
.ew-lock-mask i:nth-child(2)::after { animation-delay: .13s; }
.ew-lock-mask i:nth-child(3)::after { animation-delay: .26s; }
.ew-lock-range .ew-lock-mask:last-of-type i:nth-child(1)::after { animation-delay: .39s; }
.ew-lock-range .ew-lock-mask:last-of-type i:nth-child(2)::after { animation-delay: .52s; }
.ew-lock-range .ew-lock-mask:last-of-type i:nth-child(3)::after { animation-delay: .65s; }
@keyframes ew-lueur {
  0%   { transform: translateX(-130%); }
  55%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

.ew-lock-note { margin-top: 16px; text-align: center; font-family: var(--font-sans);
  font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,0.58); }

@media (max-width: 600px) {
  .ew-lock { padding: 24px 20px 22px; border-radius: 16px; }
  .ew-lock-head { gap: 12px; }
  /* La fourchette doit tenir sur UNE ligne : coupée, le tiret restait
     orphelin en fin de première ligne et la lecture se cassait. Mesuré
     sur un écran de 375 px — 253 px disponibles pour 270 nécessaires ;
     on resserre les blocs et les écarts jusqu'à 236 px. */
  .ew-lock-range { gap: 8px; margin-top: 20px; flex-wrap: nowrap; }
  .ew-lock-mask { gap: 4px; }
  .ew-lock-mask i { width: 22px; height: 28px; border-radius: 6px; }
}
@media (max-width: 360px) {
  .ew-lock-mask i { width: 19px; height: 25px; }
  .ew-lock-cur { font-size: 20px; }
}

/* Le scintillement est un agrément, jamais l'information : sans lui,
   les blocs restent parfaitement lisibles comme « valeur masquée ». */
@media (prefers-reduced-motion: reduce) {
  .ew-lock-mask i::after { animation: none; transform: translateX(-130%); }
}

/* Consentement + navigation */
.ew-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.65; margin-top: 18px; }
.ew-consent input { margin-top: 3px; accent-color: var(--gold); }
.ew-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px;
  padding-top: 22px; border-top: 1px solid var(--border); }
.ew-back { background: none; border: 0; color: var(--text-light); font-size: 12px; letter-spacing: 0.08em;
  cursor: pointer; font-family: var(--font-sans); padding: 10px 0; }
.ew-back:hover { color: var(--green); }
.ew-next { display: inline-flex; align-items: center; min-height: 52px; background: var(--gold); color: white;
  padding: 15px 34px; border: 0; border-radius: 50px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; font-family: var(--font-sans); transition: background .3s, transform .3s; }
.ew-next:hover { background: var(--gold-light); transform: translateY(-2px); }
.ew-err { font-size: 12px; color: var(--danger); margin-top: 10px; }

/* Écran de calcul */
.ew-calc { text-align: center; padding: 26px 10px 10px; }
.ew-calc h3 { font-family: var(--font); font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; color: var(--green); }
.ew-calc > p { margin-top: 10px; font-size: 13px; color: var(--text-muted); }
.ew-calc-steps { max-width: 340px; margin: 28px auto 10px; text-align: left; }
.ew-calc-step { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 0 12px 4px; color: var(--text-light); font-size: 13.5px; }
.ew-calc-step::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; transition: all .3s; }
.ew-calc-step.run::before { border-color: var(--gold); border-top-color: transparent; animation: ewspin 0.9s linear infinite; }
.ew-calc-step.done { color: var(--green); }
.ew-calc-step.done::before { border-color: var(--gold); background: var(--gold); content: ''; }
@keyframes ewspin { to { transform: rotate(360deg); } }

/* ═══ 3. RÉSULTAT ═══ */
.er { background: var(--green); padding: 84px 80px; display: none; }
.er.on { display: block; }
.er-inner { max-width: 880px; margin: 0 auto; }
.er-seal { width: 52px; height: 52px; border: 1px solid rgba(168,139,99,0.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--gold-light); font-size: 20px; margin-bottom: 22px; }
.er .k-es { color: var(--gold-light); }
.er h2 { font-family: var(--font); font-size: clamp(24px, 3vw, 36px); font-weight: 400; color: white; line-height: 1.2; }
.er-range { margin-top: 26px; text-align: center; padding: 30px 20px; border: 1px solid rgba(255,255,255,0.14); }
.er-range .lbl { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.er-range .num { font-family: var(--font); font-size: clamp(30px, 4.4vw, 46px); color: white; margin-top: 10px; line-height: 1.15; }
.er-range .num em { font-style: normal; color: var(--gold-light); }
.er-range .note { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.45); }
/* Le détail du calcul : la démonstration de l'IA (grilles validées,
   coefficients, décotes, extras) assumée devant le visiteur. */
.er-calc-detail { margin-top: 26px; border: 1px solid rgba(255,255,255,0.14); padding: 24px 26px; }
.er-calc-detail h3 { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; }
.er-calc-detail ol { margin: 14px 0 0; padding-left: 20px; }
.er-calc-detail li { font-size: 13.5px; color: rgba(255,255,255,0.85); line-height: 1.8; padding: 4px 0; }
.er-calc-detail li::marker { color: var(--gold-light); }
.er-expert { margin-top: 34px; padding: 28px 30px; background: rgba(255,255,255,0.04); border: 1px solid rgba(168,139,99,0.4); border-left: 3px solid var(--gold); }
.er-expert h3 { font-family: var(--font); font-size: 21px; font-weight: 400; color: white; }
.er-expert p { margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.8; }
.er-ctas { margin-top: 22px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* Le bouton de l'appel courtier. À plat sur le navy, l'aplat doré
   virait au brun et n'appelait pas le clic. Trois corrections, aucune
   sur la couleur de marque : un dégradé qui donne du volume, une ombre
   portée qui le décolle du fond, et un liseré clair en haut — la
   lumière qui manquait. Il monte de deux pixels au survol : le geste
   dit « c'est cliquable » mieux qu'un changement de teinte. */
.er-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  background: linear-gradient(180deg, var(--gold-light, #A88B63) 0%, var(--gold, #8B6F47) 100%);
  color: #fff; padding: 15px 34px; border-radius: 50px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  text-decoration: none; border: 0; cursor: pointer; font-family: var(--font-sans);
  box-shadow: 0 12px 26px -14px rgba(139,111,71,.95), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.er-cta:hover, .er-cta:focus-visible {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 18px 34px -16px rgba(168,139,99,1), inset 0 1px 0 rgba(255,255,255,.3); }
.er-cta:active { transform: translateY(0); box-shadow: 0 8px 18px -12px rgba(139,111,71,.9); }
@media (prefers-reduced-motion: reduce) {
  .er-cta, .er-cta:hover { transform: none; transition: filter .2s ease; }
}
.er-link { color: var(--gold-light); border-bottom: 1px solid rgba(168,139,99,0.5); font-size: 12.5px; text-decoration: none; cursor: pointer; }

/* ═══ 4. MÉTHODE ═══ */
.em { background: var(--cream); padding: 64px 80px 24px; }
.em-inner { max-width: 880px; margin: 0 auto; }
.em-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.em-cell { background: var(--white); padding: 30px 26px; }
.em-cell .num { font-family: var(--font); font-size: 15px; color: var(--gold); display: block; margin-bottom: 12px; }
.em-cell h3 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; font-weight: 600; }
.em-cell p { font-size: 13px; color: var(--text-muted); line-height: 1.8; }

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

@media (max-width: 1000px) {
  .eh, .ew, .er, .em, .eq { padding-left: 24px; padding-right: 24px; }
  .eh { padding-top: 100px; padding-bottom: 44px; }
  .ew-inner { grid-template-columns: 1fr; gap: 0; }
  /* relative et non static : annule le sticky du desktop SANS priver
     .ev-bar / .ev-nav / .ev-dots (absolus) de leur repère — en static,
     la barre dorée s'ancrait sur le parent et traversait le carrousel. */
  .ev { position: relative; top: auto; margin-top: 28px; }
  .ev-slide { aspect-ratio: 16 / 10; }
  .ew-card { margin-top: 20px; }
  .ew-prog { padding: 18px 20px 0; }
  .ew-body { padding: 22px 20px 28px; }
  .ew-grid-2, .ew-grid-3 { grid-template-columns: 1fr; }
  .ew-nav { flex-direction: column-reverse; align-items: stretch; }
  .ew-next { justify-content: center; }
  .ew-back { text-align: center; }
  .er { padding-top: 56px; padding-bottom: 56px; }
  .em-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Suggestions d'adresse (géocodeur fédéral) */
.ew-addr { position: relative; }
#addr-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--white); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(8,25,56,0.12);
  list-style: none; max-height: 240px; overflow-y: auto; }
#addr-suggestions li { padding: 12px 18px; font-size: 13px; color: var(--text); cursor: pointer; }
#addr-suggestions li:hover { background: var(--cream); color: var(--green); }

/* Intégration thème */
.page-template-estimation .ew-select { border-radius: 50px !important; }

/* ═══ Sections éditoriales SEO/GEO (contenu Gary 18/08) ═══ */

/* Intro service — texte + aside « pourquoi R5 » sticky */
.esi { background: var(--cream); padding: 72px 80px 56px; }
.esi-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.esi h2 { font-family: var(--font); font-size: clamp(24px, 3vw, 38px); font-weight: 400; color: var(--green); line-height: 1.2; margin-bottom: 18px; }
.esi p { font-size: 14.5px; color: var(--text-muted); line-height: 1.9; margin-bottom: 15px; }
.esi-lede > p:first-of-type { font-family: var(--font); font-size: 18px; line-height: 1.65; color: var(--green); }
.esi p a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(139,111,71,0.4); }
.esi p a:hover { color: var(--gold-light); }
.esi-aside { border: 1px solid var(--border); background: var(--white); padding: 30px; position: sticky; top: calc(var(--r5-header-h, 96px) + 16px); }
.esi-aside h3 { font-family: var(--font); font-size: 20px; font-weight: 400; color: var(--green); margin-bottom: 16px; }
.esi-aside ul { list-style: none; }
.esi-aside li { position: relative; padding: 9px 0 9px 26px; font-size: 13px; color: var(--text-muted); line-height: 1.6; border-bottom: 1px solid var(--cream); }
.esi-aside li:last-child { border-bottom: 0; }
.esi-aside li::before { content: '✓'; position: absolute; left: 0; top: 9px; color: var(--gold); font-size: 13px; }
.esi-aside .cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 18px;
  background: var(--gold); color: white; border-radius: 50px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; transition: background .3s; font-family: var(--font-sans); }
.esi-aside .cta:hover { background: var(--gold-light); color: white; }

/* En ligne vs sur place — deux cartes */
.esc { background: var(--cream); padding: 72px 80px 40px; }
.esc-inner { max-width: 1080px; margin: 0 auto; }
.esc h2 { font-family: var(--font); font-size: clamp(22px, 2.8vw, 34px); font-weight: 400; color: var(--green); margin-bottom: 8px; }
.esc-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 28px; max-width: 68ch; line-height: 1.8; }
/* ── Deux étapes, et non deux options ─────────────────────────────
   Le chapô annonçait « les deux — dans cet ordre » sans que rien ne le
   montre : deux cartes côte à côte se lisent comme un choix, pas comme
   une séquence. Le rang répare cela, dans le vocabulaire déjà posé sur
   le bloc « Les temps forts » — chiffre fantôme dans l'angle, libellé
   en petites capitales. La numérotation ici n'est pas décorative : elle
   encode un ordre réel, celui du parcours vendeur. */
.esc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.esc-card { position: relative; overflow: hidden; background: var(--white);
  border: 1px solid var(--border); padding: 34px 30px 32px; }
.esc-card.pro { border-top: 3px solid var(--gold); }

/* Le grand chiffre : présent, jamais bruyant. Il tient l'angle et
   laisse la lecture au texte. */
.esc-rang {
  position: absolute; top: 14px; right: 22px;
  font-family: var(--font); font-size: 62px; line-height: 1; font-weight: 400;
  color: rgba(139,111,71,0.13); pointer-events: none; user-select: none;
}
.esc-card.pro .esc-rang { color: rgba(139,111,71,0.22); }

.esc-etape {
  display: block; margin-bottom: 10px;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold);
}
/* Le filet qui suit le libellé matérialise la progression : court sur
   l'étape 1, plein sur l'étape 2. */
.esc-etape::after {
  content: ''; display: block; width: 22px; height: 1px; margin-top: 8px;
  background: var(--gold); opacity: .5;
}
.esc-card.pro .esc-etape::after { width: 44px; opacity: 1; }

.esc-card h3 { font-family: var(--font); font-size: 21px; font-weight: 400; color: var(--green);
  padding-right: 54px; }
.esc-card .tag { display: inline-block; margin-top: 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(139,111,71,0.3); border-radius: 50px; padding: 5px 12px; }
.esc-card ul { list-style: none; margin-top: 16px; }
.esc-card li { position: relative; padding: 8px 0 8px 24px; font-size: 13px; color: var(--text-muted); line-height: 1.65; }
.esc-card li::before { content: '·'; position: absolute; left: 6px; color: var(--gold); font-size: 20px; line-height: 1; top: 7px; }
.esc-card .cta { display: inline-flex; align-items: center; margin-top: 16px; color: var(--gold); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(139,111,71,0.4);
  background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: var(--font-sans); padding: 0 0 2px; }

/* Le tableau de prix au m² a été remplacé le 28/08 par le bloc
   « D'un coup d'œil » (template-parts/market/coup-doeil.php), qui lit
   les ventes réelles. Ses règles .esp partaient avec lui. */

/* CTA final */
.esf { background: var(--green); padding: 72px 80px; text-align: center; }
.esf h2 { font-family: var(--font); font-size: clamp(24px, 3vw, 38px); font-weight: 400; color: white; }
.esf h2 em { font-style: italic; color: var(--gold-light); }
.esf p { margin: 14px auto 28px; font-size: 13.5px; color: rgba(255,255,255,0.7); max-width: 56ch; line-height: 1.8; }
.esf-ctas { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
.esf-cta { 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); }
.esf-cta:hover { background: var(--gold-light); transform: translateY(-2px); color: white; }
.esf-ghost { display: inline-flex; align-items: center; min-height: 52px; background: none; color: white;
  border: 1px solid rgba(255,255,255,0.3); padding: 15px 30px; border-radius: 50px; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; text-decoration: none; font-family: var(--font-sans); transition: border-color .3s; }
.esf-ghost:hover { border-color: var(--gold-light); color: white; }

@media (max-width: 1000px) {
  .esi, .esc, .esf { padding-left: 24px; padding-right: 24px; }
  .esi { padding-top: 48px; }
  .esi-inner { grid-template-columns: 1fr; gap: 28px; }
  .esi-aside { position: static; border-left: 3px solid var(--gold); }
  .esc-grid { grid-template-columns: 1fr; }
  .esf { padding-top: 56px; padding-bottom: 56px; }
  .esf-ctas { flex-direction: column; align-items: stretch; }
  .esf-cta, .esf-ghost { justify-content: center; }
}

/* Renvoi croisé vers l'audit d'annonce (18/08) */
.ew-audit-link { max-width: 980px; margin: 18px auto 0; text-align: center; font-size: 12px;
  color: var(--text-muted); font-family: var(--font-sans); line-height: 1.6; }
.ew-audit-link a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(139,111,71,0.35); transition: color .25s; }
.ew-audit-link a:hover { color: var(--green); }