/* ══════════════════════════════════════════════════════════════
   estimation.css - Page estimation AB Home
   Utilise uniquement les variables de variables.css
   Compatible zoom 200% / 400% (RGAA), mobile, dark mode
══════════════════════════════════════════════════════════════ */

/* Common base for repeated estimation components (DRY for cards, options, recap, etc.) */
.est-card,
.est-prix-card,
.est-analyse-ia,
.estimation-option {
  background: var(--c-card-bg);
  border: 1px solid var(--c-card-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

/* ── EN-TÊTE DE PAGE (vente / hub estimation) ─────────────
   Aligné sur le reste du site : fond standard + contenu dans le container. */
.page-hero {
  background: var(--c-bg);
  padding: var(--sp-12) var(--sp-4) var(--sp-10);
  border-bottom: var(--border-thin) solid var(--c-border);
}
.page-hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}
.page-hero h1 {
  font-size: var(--fs-4xl);
  margin-bottom: var(--sp-3);
  text-align: left;
}
.page-hero-lead {
  font-size: var(--fs-md);
  color: var(--c-text-secondary);
  max-width: 640px;
  margin: 0;
}

/* ── BANDEAU « CONNAISSANCE DU QUARTIER » ──────────────── */
.estimation-banner {
  position: relative;
  padding: var(--sp-16) var(--sp-4);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(90deg, rgba(36, 29, 51, 0.82) 0%, rgba(36, 29, 51, 0.55) 42%, rgba(36, 29, 51, 0.1) 75%),
    url('/abhome/images/photos/drone_view.jpg');
  background-size: cover;
  background-position: center;
}
.estimation-banner-content {
  max-width: var(--container-max);
  margin: 0 auto;
}
.estimation-banner-content > * {
  max-width: 520px;
}
.estimation-banner h2 {
  color: #FFFFFF;
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-5);
}
.estimation-banner-list {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.estimation-banner-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-md);
}
.estimation-banner-list svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--c-accent);
}
.estimation-banner-note {
  /* common .ui-label in global/reset.css */
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-wide);
  font-size: var(--fs-sm);
  margin: 0;
}

/* ── BANDEAU CTA VIOLET ─────────────────────────────────── */
.estimation-cta-strip {
  background: var(--c-brand);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}
.estimation-cta-strip h3 {
  color: var(--c-text-on-brand);
  font-size: var(--fs-xl);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  margin: 0;
}

/* ── LES DEUX PARCOURS D'ESTIMATION ────────────────────── */
.estimation-options {
  padding: var(--sp-16) 0;
  background: var(--c-bg);
}
.estimation-options .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}
@media (min-width: 768px) {
  .estimation-options .container {
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
  }
}
.option-divider {
  display: none;
  background: var(--c-border-strong);
  align-self: stretch;
  min-height: 100%;
}
@media (min-width: 768px) {
  .option-divider { display: block; }
}
.estimation-option {
  /* styles carte = sélecteur commun .est-card en tête de fichier */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 100%;
  box-sizing: border-box;
}
.estimation-option:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.estimation-option h3 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-2);
}
.estimation-option .btn {
  margin-top: auto;
}
/* Filet doré sous le titre de chaque parcours - même signature visuelle
   que les title-bar du reste du site. */
.estimation-option blockquote {
  margin: 0 0 var(--sp-6);
  padding: 0;
  border: none;
  font-style: italic;
  color: var(--c-text-secondary);
  line-height: var(--lh-relaxed);
  max-width: 440px;
}

/* ── PAGE WIZARD (page dédiée, même présentation que la page Contact :
   rectangle blanc centré sur le fond standard du site) ──────────── */
.est-page-wrap {
  background: var(--c-bg);
  padding: var(--sp-12) var(--sp-4) var(--sp-20);
}
.est-page-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.est-title-block { margin-bottom: var(--sp-8); }
.est-title-block h1 {
  font-size: var(--fs-3xl);
  text-transform: uppercase;
  letter-spacing: var(--letter-tight);
  margin-bottom: var(--sp-4);
}
.est-title-block p {
  color: var(--c-text-secondary);
  max-width: 640px;
  margin: 0;
}

/* ── CONTENEUR WIZARD (carte blanche, même famille que .contact-card) ── */
#est-modal {
  background: var(--c-card-bg);
  border-radius: var(--r-xl);
  border: var(--border-thin) solid var(--c-card-border);
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  /* Scrollbar stylée */
  scrollbar-width: thin;
  scrollbar-color: var(--c-brand-tint-2) transparent;
}

/* ── LAYOUT MODAL : main + récap ──────────────────────── */
.est-modal__layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 0;
  flex: 1;
  min-height: 0;
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
}

/* ── CONTENU PRINCIPAL ─────────────────────────────────── */
.est-modal__main {
  min-width: 0;
  padding-right: var(--sp-8);
  border-right: 1px solid var(--c-bg-strong);
  display: flex;
  flex-direction: column;
}

/* ── STEPPER HORIZONTAL (mobile) ──────────────────────── */
.est-stepper-h {
  display: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0;
  margin-bottom: var(--sp-6);
  scrollbar-width: none;
}
.est-stepper-h::-webkit-scrollbar { display: none; }
.est-stepper-h__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  position: relative;
  padding-top: var(--sp-3);
}
.est-stepper-h__item:not(:first-child)::before {
  content: '';
  position: absolute;
  top: calc(var(--sp-3) + 14px);
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--c-bg-strong);
  z-index: 0;
}
.est-stepper-h__item.active::before,
.est-stepper-h__item.done::before { background: var(--c-brand); }
.est-stepper-h__dot {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  border: 2px solid var(--c-bg-strong);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  position: relative;
  z-index: 1;
  transition: all var(--t-base) var(--ease-out);
}
.est-stepper-h__item.active .est-stepper-h__dot {
  border-color: var(--c-brand);
  background: var(--c-brand);
  color: white;
  box-shadow: 0 0 0 4px var(--c-brand-tint);
}
.est-stepper-h__item.done .est-stepper-h__dot {
  border-color: var(--c-brand);
  background: var(--c-brand);
  color: white;
}
.est-stepper-h__label {
  font-size: 0.65rem;
  font-weight: var(--fw-medium);
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  margin-top: var(--sp-1);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}
.est-stepper-h__item.active .est-stepper-h__label { color: var(--c-brand); }

/* ── ÉTAPES ────────────────────────────────────────────── */
/* :not([hidden]) indispensable : un display:flex inconditionnel ici
   l'emporterait sur le [hidden]{display:none} natif du navigateur (une
   règle auteur bat toujours l'agent utilisateur, à spécificité égale ou
   non) - la zone étapes resterait visible même une fois .hidden=true
   passé en JS après soumission (bug constaté : résultat affiché ET
   étapes encore visibles en même temps). */
.est-etapes:not([hidden]) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.est-etape[hidden] { display: none; }

/* Le titre reste fixé en haut sur toutes les étapes (comme la nav est
   fixée en bas) : l'étape visible s'étire sur toute la hauteur dispo,
   le titre garde sa taille naturelle, seul .est-etape__body (ci-dessous)
   se centre dans l'espace restant. */
.est-etape:not([hidden]) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── ÉTAPE 8 (coordonnées) : mise en page "page Contact" ──── */
/* Le récap latéral (.est-recap) n'a pas de sens sur cette étape (juste
   des champs de contact, rien à récapituler visuellement) - masqué via
   la classe posée par allerEtape() sur .est-modal__layout, la colonne
   principale reprend alors toute la largeur de la modale. Déclaré APRÈS
   .est-etape:not([hidden]) ci-dessus : même spécificité, seul l'ordre
   dans la cascade permet à display:block de l'emporter sur display:flex. */
.est-modal__layout.est-modal__layout--contact {
  grid-template-columns: 1fr;
}
.est-modal__layout--contact .est-recap { display: none; }
.est-modal__layout--contact .est-modal__main {
  border-right: none;
  padding-right: 0;
}
.est-etape--contact:not([hidden]) { display: block; }
.contact-card--embed {
  /* À l'intérieur de la modale (déjà une carte) : pas de second cadre
     ni d'ombre - juste le fond, les espacements et les champs. */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: var(--sp-2) 0 0;
}
.contact-card--embed .contact-intro {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: none;
}
.contact-card--embed .contact-intro i { color: var(--c-brand); font-size: 1.1rem; }
.est-etape__titre {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-brand-darker);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.est-etape__num {
  width: 36px; height: 36px;
  background: var(--c-brand);
  color: white;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.est-etape__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-6);
  min-height: 0;
}

/* ── CHAMPS ────────────────────────────────────────────── */
.est-field { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Un .est-field masqué via [hidden] (bascule Maison/Appartement) doit
   RESTER masqué : sans ce correctif, le display:flex ci-dessus (règle
   auteur) l'emporte sur le display:none du [hidden] natif (règle agent
   utilisateur) quelle que soit la spécificité - bug qui laissait les
   champs Maison ET Appartement affichés en même temps. */
.est-field[hidden] { display: none; }

/* Champs mis côte à côte sur une même ligne (surface habitable/terrain,
   étage ou nombre d'étages + ascenseur). Chaque zone de saisie est
   réduite à ~1/3 de la largeur pleine (inutile pour un nombre à 3-4
   chiffres), au lieu d'étirer l'input sur toute la largeur du formulaire. */
.est-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-end;
}
.est-field-row .est-field { flex: 1 1 0; min-width: 140px; }
.est-field-row__item .est-input-unit { max-width: 220px; }
.est-label {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-darker);
}
.est-required { color: var(--c-brand); }
.est-hint {
  font-size: 0.8rem;
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
}
.est-input,
.est-select,
.est-textarea {
  border: var(--border-thin) solid var(--c-bg-strong);
  font-family: 'Montserrat', sans-serif;
  color: var(--c-brand-darker);
  background: white;
}
.est-input.error,
.est-select.error,
.est-textarea.error,
#est-modal input.error,
#est-modal textarea.error,
#est-modal select.error {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

/* Erreurs champ contact (étape coordonnées - classes contact-*) */
#est-modal .contact-field-error,
.est-field-error {
  margin: 0.25rem 0 0.75rem 0.25rem;
  font-size: var(--fs-xs, 0.8rem);
  color: #b02a37;
  line-height: 1.35;
}
#est-modal .contact-field-icon.is-invalid input,
#est-modal .contact-field-message.is-invalid textarea {
  border-color: #b02a37 !important;
  box-shadow: 0 0 0 2px rgba(176, 42, 55, 0.12);
}
.est-input:focus,
.est-select:focus,
.est-textarea:focus {
  border-color: var(--c-brand);
  box-shadow: var(--shadow-glow);
}

/* Adresse avec icône */
.est-adresse-wrap {
  position: relative;
}
.est-field__icon {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-brand-light);
  pointer-events: none;
  font-size: 1rem;
}
.est-adresse-wrap .est-input {
  padding-left: calc(var(--sp-4) + 1.2rem + var(--sp-2));
}

/* Input unité (m², €) */
.est-input-unit {
  display: flex;
  align-items: stretch;
}
.est-input-unit .est-input {
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.est-unit {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  background: var(--c-bg-subtle);
  border: var(--border-thin) solid var(--c-bg-strong);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  white-space: nowrap;
}

/* ── CARTE ─────────────────────────────────────────────── */
.est-map {
  /* Hauteur explicite obligatoire pour MapLibre (canvas = taille conteneur
     à l'init ; flex seul peut laisser 0px un instant → carte grise vide). */
  height: 240px;
  min-height: 240px;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-bg-strong);
  background: var(--c-bg-subtle);
  position: relative;
  flex-shrink: 0;
}

/* Étape 1 : la carte peut s'étirer si de la place reste sous le champ adresse,
   sans jamais descendre sous 240px (sinon canvas MapLibre illisible). */
/* Étapes adresse : en ligne = #etape-1, collaborateur = #etape-2 */
#etape-1 .est-map,
#etape-2 .est-map {
  flex: 1 1 240px;
  min-height: 240px;
  /* garder une hauteur calculable pour MapLibre (pas height:auto vide) */
  height: 240px;
}

/* Autocomplétion adresse dropdown */
.est-suggestions {
  top: 100%;
  background: white;
  border: 1px solid var(--c-bg-strong);
  max-height: 240px;
}
.est-suggestion-item {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--c-brand-darker);
  transition: background var(--t-fast);
}
.est-suggestion-item:hover,
.est-suggestion-item[aria-selected="true"] {
  background: var(--c-brand-tint);
}

/* ── TYPE BIEN ─────────────────────────────────────────── */
.est-type-grid {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  border: none;
  padding: 0; margin: 0;
}
.est-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 196px;
  height: 172px;
  border: 2px solid var(--c-bg-strong);
  border-radius: var(--r-xl);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  background: white;
}
.est-type-card i { font-size: 2.75rem; }
.est-type-card:hover {
  border-color: var(--c-brand-light);
  color: var(--c-brand);
  background: var(--c-brand-tint);
}
.est-type-card.selected {
  border-color: var(--c-brand);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  box-shadow: var(--shadow-glow);
}

/* ── COMPTEUR ──────────────────────────────────────────── */
.est-counter {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.est-counter__btn {
  /* Base styles (flex, cursor, transition etc.) now from .seg-btn in global/boutons.css.
     Only specifics kept: size, border, radius full, colors, font size/weight, min tap, focus. */
  width: 40px; height: 40px;
  border: 2px solid var(--c-brand);
  border-radius: var(--r-full);
  background: white;
  color: var(--c-brand);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
}
.est-counter__btn:hover {
  background: var(--c-brand);
  color: white;
}
.est-counter__btn:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
}
.est-counter__val {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-brand-darker);
  min-width: 3ch;
  text-align: center;
}

/* ── CHOICE GROUP (radio pills) ────────────────────────── */
.est-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.est-choice-group--sm .est-choice { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.est-choice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--c-bg-strong);
  /* Même forme que le bouton Suivant (.btn), plus la capsule pleine
     d'avant - cohérence visuelle entre les choix et la navigation. */
  border-radius: var(--r-md);
  font-family: 'Montserrat', sans-serif;
  color: var(--c-brand-dark);
  background: white;
  transition: all var(--t-fast);
  /* Hauteur mini conservée à --tap-min (44px, cible tactile RGAA/WCAG
     2.5.5) même si le texte/padding sont réduits. */
  min-height: var(--tap-min);
  user-select: none;
}
.est-choice:hover {
  border-color: var(--c-brand-light);
  background: var(--c-brand-tint);
}
.est-choice.selected {
  /* Violet plus clair qu'avant (--c-brand-light plutôt que --c-brand) -
     texte blanc conservé : contraste mesuré ~6:1, largement conforme
     RGAA/WCAG AA (mini 4.5:1) sur ce fond. */
  border-color: var(--c-brand-light);
  background: var(--c-brand-light);
  color: white;
}
.est-choice--refuse.selected {
  border-color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  background: var(--c-bg-subtle);
  color: var(--c-brand-dark);
}

/* ── ÉTAT GÉNÉRAL ──────────────────────────────────────── */
.est-etat-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.est-etat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.est-etat-row[hidden] { display: none; } /* même correctif que .est-field[hidden] */
.est-etat-row__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-dark);
  /* Assez large pour « Réseau électrique » (le plus long libellé) sans
     retour à la ligne, pour que tous les groupes de boutons à droite
     démarrent alignés à la même position, quel que soit le libellé. */
  min-width: 168px;
  flex-shrink: 0;
}

/* ── DPE / GES (si connu) ──────────────────────────────────
   Composant réutilisé tel quel depuis public/abhome/css/pages/recherche.css
   (.energy-scale / .energy-letter), mais piloté en sélection UNIQUE côté
   JS (estimation.js) plutôt qu'en filtre multi-sélection. ────────────── */
.est-energy-row {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.energy-scale {
  margin-top: var(--sp-1);
  border: var(--border-thin) solid var(--c-bg-strong);
}
.energy-letter {
  border: 2px solid transparent;
  font-family: 'Montserrat', sans-serif;
}
.energy-letter.is-active {
  border-color: var(--c-brand-darker);
}
.dpe-a { background: var(--c-dpe-A); }
.dpe-b { background: var(--c-dpe-B); }
.dpe-c { background: var(--c-dpe-C); color: var(--c-text); }
.dpe-d { background: var(--c-dpe-D); color: var(--c-text); }
.dpe-e { background: var(--c-dpe-E); }
.dpe-f { background: var(--c-dpe-F); }
.dpe-g { background: var(--c-dpe-G); }
.ges-a { background: var(--c-ges-A); color: var(--c-text); }
.ges-b { background: var(--c-ges-B); color: var(--c-text); }
.ges-c { background: var(--c-ges-C); }
.ges-d { background: var(--c-ges-D); }
.ges-e { background: var(--c-ges-E); }
.ges-f { background: var(--c-ges-F); }
.ges-g { background: var(--c-ges-G); }

/* ── CHECKBOX ──────────────────────────────────────────── */
.est-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm);
  color: var(--c-brand-dark);
  line-height: var(--lh-relaxed);
}
.est-checkbox-label input[type="checkbox"] {
  width: 20px; height: 20px;
  flex-shrink: 0;
  accent-color: var(--c-brand);
  margin-top: 2px;
}
.est-checkbox-label a {
  color: var(--c-brand);
  text-decoration: underline;
}
.est-checkbox-label--highlight {
  background: var(--c-brand-tint);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  border: 1px solid var(--c-brand-tint-2);
}

/* ── CONSENTEMENT IA ───────────────────────────────────── */
.est-consentement-ia {
  display: flex;
  gap: var(--sp-4);
  background: linear-gradient(135deg, var(--c-brand-tint) 0%, var(--c-accent-tint) 100%);
  border: 1px solid var(--c-brand-tint-2);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}
.est-consentement-ia__icon {
  font-size: 2rem;
  color: var(--c-brand);
  flex-shrink: 0;
  padding-top: 2px;
}
.est-consentement-ia__content h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-brand-darker);
  margin-bottom: var(--sp-2);
}
.est-consentement-ia__content p {
  font-size: var(--fs-sm);
  color: var(--c-brand-dark);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-3);
}
.est-consentement-ia__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

/* ── BADGE OPTIONNEL ───────────────────────────────────── */
.est-badge-optionnel {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  background: var(--c-bg-strong);
  border-radius: var(--r-full);
  padding: 2px 8px;
  margin-left: var(--sp-2);
  vertical-align: middle;
}

/* ── DROPZONE PHOTOS ───────────────────────────────────── */
.est-dropzone {
  border: 2px dashed var(--c-bg-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-base);
  background: var(--c-bg-subtle);
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
}
.est-dropzone:hover,
.est-dropzone:focus-visible,
.est-dropzone.dragover {
  border-color: var(--c-brand);
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
.est-dropzone:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.est-dropzone i { font-size: 2.5rem; display: block; margin-bottom: var(--sp-3); }
.est-dropzone span { color: var(--c-brand); text-decoration: underline; }
.est-photos-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.est-photo-thumb {
  position: relative;
  width: 80px; height: 80px;
}
.est-photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 2px solid var(--c-brand-tint-2);
}
.est-photo-remove {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  background: var(--c-brand);
  color: white;
  border: none;
  border-radius: var(--r-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  padding: 0;
}

/* ── CONTACT INTRO ─────────────────────────────────────── */
.est-contact-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-bg-subtle);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--c-brand);
  margin-bottom: var(--sp-2);
}
.est-contact-intro i { color: var(--c-brand); font-size: 1.2rem; flex-shrink: 0; padding-top: 2px; }
.est-contact-intro p { font-size: var(--fs-sm); color: var(--c-brand-dark); margin: 0; line-height: var(--lh-relaxed); }

/* ── GRILLE CHAMPS CONTACT ─────────────────────────────── */
.est-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

/* ── PRÉ-ESTIMATION ────────────────────────────────────── */
.est-preestim { margin-top: var(--sp-2); }

/* ── NAVIGATION BAS ────────────────────────────────────── */
/* :not([hidden]) même raison que .est-etapes ci-dessus : sinon la barre
   de nav reste affichée (display:flex) même quand JS met .hidden = true
   après soumission (résultat affiché en plus de la nav, superposés). */
.est-nav:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-6);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  border-top: 1px solid var(--c-bg-strong);
  gap: var(--sp-4);
}
.est-nav__prev,
.est-nav__next,
.est-nav__submit {
  min-height: var(--tap-min);
  min-width: 140px;
}
.est-nav__next,
.est-nav__submit { margin-left: auto; }
.est-nav__submit[hidden],
.est-nav__next[hidden],
.est-nav__prev[hidden] { display: none; }

/* ── RÉCAP VERTICAL ────────────────────────────────────── */
.est-recap {
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: sticky;
  top: 0;
  align-self: start;
  /* Taille réservée dès l'étape 1 = celle mesurée une fois toutes les
     étapes remplies (~655px), pour que la modale ne change plus de
     hauteur au fil de la saisie. Plafonnée par max-height sur les petits
     écrans (min() évite qu'elle dépasse la fenêtre). */
  min-height: min(670px, calc(100vh - 120px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
/* Masqué pendant l'affichage du résultat final (voir afficherLoader() en
   JS) : sinon sa hauteur réservée (670px) étire toute la ligne de la
   grille alors que .est-modal__main est vide, laissant un grand blanc
   au-dessus du résultat. */
.est-recap[hidden] { display: none; }
.est-recap__titre {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--c-brand-darker);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-bg-strong);
}

/* ── STEPPER VERTICAL ──────────────────────────────────── */
.est-stepper-v {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.est-stepper-v__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  position: relative;
  padding-bottom: var(--sp-4);
}
.est-stepper-v__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: var(--c-bg-strong);
  transition: background var(--t-slow) var(--ease-out);
}
.est-stepper-v__item.done::after { background: var(--c-brand); }
.est-stepper-v__item.active::after { background: var(--c-brand-tint-2); }

.est-stepper-v__dot {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  border: 2px solid var(--c-bg-strong);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  font-family: 'Montserrat', sans-serif;
  transition: all var(--t-base) var(--ease-out);
  position: relative;
  z-index: 1;
}
.est-stepper-v__item.active .est-stepper-v__dot {
  border-color: var(--c-brand);
  background: var(--c-brand);
  color: white;
  box-shadow: 0 0 0 4px var(--c-brand-tint);
}
.est-stepper-v__item.done .est-stepper-v__dot {
  border-color: var(--c-brand);
  background: var(--c-brand);
  color: white;
}
.est-stepper-v__dot i { font-size: 1rem; }

.est-stepper-v__content {
  flex: 1;
  min-width: 0;
  padding-top: 5px;
}
.est-stepper-v__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  transition: color var(--t-base);
  line-height: var(--lh-tight);
  margin-bottom: 3px;
}
.est-stepper-v__item.active .est-stepper-v__label { color: var(--c-brand); }
.est-stepper-v__item.done .est-stepper-v__label { color: var(--c-brand-dark); }

.est-stepper-v__val {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--c-brand-darker);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}
.est-stepper-v__val:empty { display: none; }

/* ── RÉCAP INFOS ───────────────────────────────────────── */
.est-recap__infos { display: flex; flex-direction: column; gap: var(--sp-2); }
.est-recap__empty {
  font-size: 0.75rem;
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  font-style: italic;
  text-align: center;
  padding: var(--sp-4);
}
.est-recap-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg-subtle);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--c-brand-darker);
  animation: fadeSlideIn var(--t-base) var(--ease-out);
}
.est-recap-item i {
  color: var(--c-brand);
  flex-shrink: 0;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ZONE RÉSULTAT ─────────────────────────────────────────
   Vit dans .est-modal__main (déjà sur fond blanc de la card) : pas de fond
   propre, pas de padding latéral supplémentaire - même cadre que .est-etapes. */
.est-resultat {
  flex: 1;
  min-height: 0;
}
.est-resultat[hidden] { display: none; }

/* Loader */
.est-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-12) 0;
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  font-size: var(--fs-sm);
}
.est-loader__ring {
  width: 48px; height: 48px;
  border: 3px solid var(--c-brand-tint);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* Variante compacte : spinner dans un bouton (envoi de la demande) */
.est-loader__ring--btn {
  display: inline-block;
  width: 16px; height: 16px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: white;
  vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── CONFIRMATION (demande transmise / dossier envoyé) ───── */
.est-confirm {
  text-align: center;
  padding: var(--sp-6) 0 var(--sp-4);
}
.est-confirm__icon i {
  font-size: 3rem;
  color: var(--c-success);
}
.est-confirm__titre {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-brand-darker);
  margin: var(--sp-4) 0 var(--sp-2);
}
.est-confirm__texte {
  color: var(--c-text-secondary);
  font-size: var(--fs-base);
  max-width: 520px;
  margin: var(--sp-3) auto 0;
  line-height: var(--lh-normal);
}
.est-confirm__texte--muted {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.est-resultat-ctas--center { justify-content: center; }

/* ── ERREUR (échec API) ───────────────────────────────────── */
.est-erreur {
  text-align: center;
  padding: var(--sp-8);
  color: var(--c-error);
}
.est-erreur i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--sp-4);
}
.est-erreur__titre { font-weight: var(--fw-semibold); }
.est-erreur__detail { font-size: var(--fs-sm); margin-top: var(--sp-2); }
.est-erreur .btn { margin-top: var(--sp-6); }

/* Fourchette résultat */
.est-fourchette {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.est-prix-card {
  flex: 1;
  min-width: 140px;
  text-align: center;
  padding: var(--sp-5);
}
.est-prix-card--central {
  background: var(--c-brand);
  color: white;
  box-shadow: var(--shadow-lg);
}
.est-prix-card__label {
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  margin-bottom: var(--sp-2);
}
.est-prix-card--central .est-prix-card__label { color: rgba(255,255,255,.75); }
.est-prix-card__val {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--c-brand-darker);
  line-height: 1;
}
.est-prix-card--central .est-prix-card__val { color: white; }

/* Analyse IA */
.est-analyse-ia {
  margin-top: var(--sp-6);
  border: 1px solid var(--c-brand-tint-2);
}
.est-analyse-ia__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--c-brand-darker);
}
.est-analyse-ia__header i { color: var(--c-brand); font-size: 1.2rem; }
.est-analyse-ia__body {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-brand-dark);
  white-space: pre-line;
}

/* CTA après résultat */
.est-resultat-ctas {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

/* ════════════════════════════════════════════════════════════
   RÉSULTAT - layout empilé (résumé du formulaire puis estimation)
   Le résultat vit désormais dans la colonne principale du wizard
   (.est-modal__main), à côté du panneau "Votre bien" toujours visible -
   plus assez de largeur pour 2 sous-colonnes côte à côte.
════════════════════════════════════════════════════════════ */
.est-resultat-layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.est-resultat-col--resume {
  min-width: 0;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-bg-strong);
}
.est-resultat-col--estimation {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Titre général au-dessus du layout empilé ─────────────── */
.est-resultat-titre-general {
  font-family: var(--font-display);
  font-size: 1.75rem; /* 28px - réduit vs l'ancien plein-largeur (35px) */
  font-weight: 800;
  color: var(--c-brand-darker);
  text-align: center;
  margin: 0 0 var(--sp-6);
}

/* ── Colonne gauche : résumé du bien, par section ─────────── */
.est-resultat-titre {
  font-family: var(--font-display);
  font-size: 1.875rem; /* 30px = 28px + 2px */
  font-weight: 800;
  color: var(--c-brand-darker);
  margin: 0 0 var(--sp-5);
}
.est-resume-section { margin-bottom: var(--sp-5); }
.est-resume-section:last-child { margin-bottom: 0; }
.est-resume-section__titre {
  font-family: var(--font-display);
  font-size: 1.375rem; /* 22px = 20px + 2px */
  font-weight: 800;
  color: #1A1424;
  margin: 0 0 var(--sp-2);
}
.est-resume-section__liste {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  color: var(--c-brand-dark);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── Colonne droite : base de l'estimation + prix ─────────── */
.est-resultat-base {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm);
  color: var(--c-text-muted); /* RGAA : --c-grey-pearl (2.85:1) insuffisant pour du texte sur fond clair */
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-4);
}
.est-resultat-base strong { color: var(--c-brand-darker); }
.est-resultat-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: #7a5200;
  background: #fff6e5;
  border: 1px solid #f0d494;
  border-radius: var(--radius-md, 8px);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.est-resultat-warning i { margin-top: 0.15em; flex-shrink: 0; }
.est-resultat-affine {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-2);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm);
  color: var(--c-brand);
  margin-bottom: var(--sp-5);
}
.est-resultat-affine i { flex-shrink: 0; margin-top: 2px; }

/* Le prix est LA donnée de la page : carte teintée d'origine (design inchangé).
   Si IA : deux colonnes (DVF | Gemini) dans la même carte. */
.est-resultat-prix {
  margin-top: var(--sp-4);
  padding: var(--sp-6) var(--sp-8);
  background: var(--c-brand-tint);
  border: 1px solid var(--c-brand-tint-2);
  border-radius: var(--r-lg);
  text-align: center;
}
.est-resultat-prix__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: center;
  align-items: stretch;
}
.est-resultat-prix__col {
  flex: 1 1 140px;
  min-width: 0;
}
.est-resultat-prix__col--ia {
  border-left: 1px solid var(--c-brand-tint-2);
  padding-left: var(--sp-5);
}
@media (max-width: 520px) {
  .est-resultat-prix__col--ia {
    border-left: none;
    border-top: 1px solid var(--c-brand-tint-2);
    padding-left: 0;
    padding-top: var(--sp-4);
  }
}
.est-resultat-prix__src {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-2);
}
.est-resultat-prix__col--ia .est-resultat-prix__src {
  color: #8A7020;
}
.est-resultat-prix__median {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--c-brand-darker);
  line-height: 1.1;
  margin: 0;
}
.est-resultat-prix__col--ia .est-resultat-prix__median {
  color: #8A7020;
}
.est-resultat-prix__fourchette {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  margin: var(--sp-3) 0 0;
}

/* Analyse IA sous le résumé — points forts / points faibles / avis */
.est-resultat-col--resume .est-analyse-ia { margin-top: var(--sp-6); }

/* ── Boutons : côte à côte, pilule, compacts ──────────────── */
.est-resultat-ctas--v2 {
  display: flex;
  flex-direction: row;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.est-btn-estimation {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: normal;
  text-align: center;
}
/* Bouton 1 (téléchargement / création de compte) : fond violet, texte blanc. */
.est-btn-estimation--telechargement {
  background: #5D2F89;
  color: #FFFFFF;
  border: none;
}
.est-btn-estimation--telechargement:hover,
.est-btn-estimation--telechargement:focus-visible {
  background: #4A2570;
  color: #FFFFFF;
}

/* Bouton 2 (« Faire vérifier… ») : fond quasi-noir, texte blanc. */
.est-btn-estimation--principal {
  background: #251D32;
  color: #FFFFFF;
  border: none;
}
.est-btn-estimation--principal:hover,
.est-btn-estimation--principal:focus-visible {
  background: #1A1424;
  color: #FFFFFF;
}

@media (max-width: 35em) {
  .est-resultat-ctas--v2 { flex-direction: column; gap: var(--sp-2); }
  .est-btn-estimation { font-size: var(--fs-xs); padding: var(--sp-3) var(--sp-4); }
}

@media (max-width: 56em) {
  .est-resultat-layout {
    grid-template-columns: 1fr;
  }
  .est-resultat-col--resume {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--c-bg-strong);
    padding-bottom: var(--sp-6);
    margin-bottom: var(--sp-6);
  }
  .est-resultat-col--estimation {
    padding-left: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE - mobile et zoom 200% / 400%
   (Les media-queries avec em supportent le zoom navigateur)
════════════════════════════════════════════════════════════ */

/* Zoom 200% ≈ 768px → 1 colonne, stepper horizontal */
@media (max-width: 56em) {
  .est-modal__layout {
    grid-template-columns: 1fr;
    padding: var(--sp-6) var(--sp-5);
  }
  .est-modal__main {
    padding-right: 0;
    border-right: none;
    order: 1;
  }
  .est-recap {
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--c-bg-strong);
    position: static;
    min-height: auto;
    max-height: none;
    order: 0;
  }
  .est-stepper-v { display: none; }
  .est-stepper-h { display: flex; }
  .est-recap__infos { display: none; }
}

/* Zoom 400% / très petit mobile ≈ 320-400px */
@media (max-width: 32em) {
  .est-choix { flex-direction: column; align-items: center; }
  .est-choix__card { width: 100%; }
  #est-modal { border-radius: var(--r-xl); }
  .est-fields-grid { grid-template-columns: 1fr; }
  .est-fourchette { flex-direction: column; }
  .est-type-grid { flex-direction: column; }
  .est-type-card { width: 100%; flex-direction: row; height: auto; padding: var(--sp-4); }
  .est-etat-row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .est-nav { flex-direction: row; gap: var(--sp-2); }
  .est-nav__prev,
  .est-nav__next,
  .est-nav__submit { flex: 1; min-width: 0; margin-left: 0; padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .est-hero__title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .est-consentement-ia { flex-direction: column; }
}