/* Parcours d'estimation — implémentation de DESIGN.md (Phase 21).
   Thème clair unique (arbitrage B6) : aucune palette sombre.
   Compatibilité visée : Safari 15+ / iOS 15+ (pas d'imbrication CSS, pas de
   container queries). */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/silkscreen-latin.woff2") format("woff2");
}

/* --- Tokens (DESIGN.md §2.3) ------------------------------------------- */

:root {
  color-scheme: light;

  --navy: #172442;
  --navy-pressed: #0e1830;
  --white: #ffffff;
  --muted: #52597a;
  --border-decorative: #e4e6ee;
  --border-field: #6b7694;
  --pastel-yellow: #f6e9b9;
  --pastel-lilac: #e6e0f5;
  --pastel-mint: #d9efe4;
  --pastel-pink: #f4dce3;
  --success: #2e7d5b;
  --error: #b3261e;
  --error-bg: #fdecea;
  --warning: #9a6b00;

  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pixel: "Silkscreen", monospace;

  --radius-field: 12px;
  --radius-card: 14px;
  --gutter: 16px;
  --focus-ring: 0 0 0 3px var(--white), 0 0 0 6px var(--navy);

  /* Partie 3 (décision #17) : dégradés expressifs des grandes cartes.
     Texte navy uniquement : contraste minimal calculé sur toute la surface
     (WCAG 2) — rose 6,55:1, bleu 6,41:1, violet 6,54:1. Le texte blanc y
     échouerait partout (2,4:1 au mieux) : jamais de texte clair sur ces fonds. */
  --grad-rose: linear-gradient(135deg, #f28aa6 0%, #fbb27e 100%);
  --grad-bleu: linear-gradient(135deg, #82a6f8 0%, #7fd6ee 100%);
  --grad-violet: linear-gradient(135deg, #b79af4 0%, #f09ccb 100%);
  --radius-hero: 28px;
  --shadow-card: 0 1px 2px rgba(23, 36, 66, 0.06), 0 16px 32px -14px rgba(23, 36, 66, 0.35);
  --shadow-panel: 0 1px 2px rgba(23, 36, 66, 0.08), 0 8px 20px -10px rgba(23, 36, 66, 0.25);
}

/* --- Base --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--navy);
  text-underline-offset: 3px;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

[tabindex="-1"]:focus {
  box-shadow: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 13px;
  font-weight: 500;
}

/* --- Mise en page ------------------------------------------------------- */

.app {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px var(--gutter) 48px;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  padding-bottom: max(48px, env(safe-area-inset-bottom));
}

/* --- Barre supérieure : personnage, identité et progression -----------
   (DESIGN.md §3.1 et §3.6). Personnage en haut à gauche (choix de Léo du
   16/10/2026), dans le flux de l'en-tête : jamais fixe, collant ni absolu.
   La bulle prend la place de la ligne d'identité, dans un emplacement de
   hauteur réservée : le formulaire ne bouge pas quand une réaction apparaît
   ou disparaît, et rien ne recouvre une question, un champ ou un bouton. */

.topbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 2px 0 16px;
}

.avatar {
  flex: none;
  width: auto;
  height: 72px;
}

.topbar__side {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar__slot {
  display: flex;
  align-items: flex-end;
  min-height: 46px;
}

.topbar__name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
}

.topbar__name strong {
  color: var(--navy);
  font-weight: 700;
}

.bubble {
  padding: 5px 10px;
  border: 1px solid var(--border-field);
  border-radius: 12px 12px 12px 4px;
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  animation: feedback-in 180ms ease-out;
}

.progress {
  margin-top: 8px;
}

.progress__label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}

.progress__counter {
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.progress__track {
  height: 8px;
  border-radius: 4px;
  background: var(--border-decorative);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 100%;
  background: var(--navy);
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms ease-out;
}

.avatar--nod {
  animation: avatar-nod 640ms steps(2, end) 2;
}

@keyframes avatar-nod {
  0% { transform: translateY(0); }
  50% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@keyframes feedback-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Écrans d'au moins 360 px (iPhone courant) : personnage plus présent. */
@media (min-width: 360px) {
  .topbar {
    gap: 12px;
  }

  .avatar {
    height: 86px;
  }
}

/* --- Écrans ------------------------------------------------------------- */

.screen {
  animation: screen-in 200ms ease-out;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
  /* Un mot plus large que l'écran (zoom 200 % sur 320 px) se coupe au lieu de
     déborder ; sans effet aux tailles normales. */
  overflow-wrap: break-word;
}

.screen__lead {
  color: var(--muted);
  margin-bottom: 20px;
}

.screen__body {
  margin-top: 20px;
}

.context-address {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.context-address strong {
  color: var(--navy);
  font-weight: 600;
}

/* --- Composants communs de la Partie 3 (décision #17) ------------------- */

/* Tuile d'icône : carré arrondi, pictogramme navy au trait. */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--navy);
}

/* Bouton clair, pour une action posée sur un fond coloré. */
.btn--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-panel);
}

.btn--light:active {
  background: var(--border-decorative);
}

/* --- Accueil (écran 0, DESIGN.md §3.2) ------------------------------------ */

/* Marge haute : la maison de la carte 1 déborde de 56 px au-dessus de la
   carte (64 px sur grand écran) et ne doit jamais sortir de la page. */
.screen--home {
  display: grid;
  gap: 20px;
  padding-top: 52px;
}

.home-card {
  position: relative;
  padding: 20px;
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-card);
  color: var(--navy);
}

.home-card--estimate {
  background: var(--grad-rose);
}

.home-card--about {
  background: var(--grad-bleu);
}

.home-card--reviews {
  background: var(--grad-violet);
}

/* En-tête : pastilles ou icône à gauche, illustration à droite qui déborde
   légèrement au-dessus de la carte (effet de relief, sans rien recouvrir). */
.home-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
}

.home-card__art {
  flex: none;
  height: auto;
  margin: -44px -6px -8px 0;
  pointer-events: none;
}

.home-card__art--about {
  width: 132px;
}

/* Carte 1 : la maison est dans le coin, déborde au-dessus de la carte et
   laisse au titre toute la largeur, quelle que soit la taille d'écran ; le
   champ d'adresse reste ainsi le plus haut possible (élément prioritaire). */
.home-card--estimate {
  padding-top: 52px;
}

.home-card__corner-art {
  position: absolute;
  top: -56px;
  right: 8px;
  width: 124px;
  height: auto;
  pointer-events: none;
}

.home-card__art--reviews {
  width: 104px;
  margin-top: -36px;
}

/* Carrousel d'avis (recette du 21/10/2026, point 1). Sans script : avis les
   uns sous les autres. Avec script : avis superposés dans la même cellule
   (hauteur fixée par le plus long, aucun saut de mise en page), fondu doux
   entre deux avis, immobile avec « Réduire les animations ». */
.reviews {
  margin-top: 12px;
}

.reviews__controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.reviews__arrows {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reviews__arrow,
.reviews__pause {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Icône dessinée en CSS : deux barres (pause) ou triangle (lecture). */
.reviews__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reviews__pause-icon {
  width: 12px;
  height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

.reviews__pause[data-state="paused"] .reviews__pause-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
  border-right: 0;
}

.reviews__arrow {
  font-size: 18px;
}

.reviews__position {
  min-width: 52px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.reviews__track {
  display: grid;
  gap: 12px;
}

.review {
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-card);
  background: #ffffff;
  color: var(--navy);
}

.reviews--enhanced .reviews__track {
  gap: 0;
}

.reviews--enhanced .review {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 600ms;
}

.reviews--enhanced .review.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* Étoiles dorées (recette du 22/10/2026) : dégradé or, contour ambré
   (3,3:1 sur blanc ; étoile vide 3,9:1) et légère ombre chaude. */
.reviews__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.review__stars {
  display: flex;
  gap: 4px;
}

.review__star {
  width: 24px;
  height: 24px;
  stroke-width: 1.4;
  stroke-linejoin: round;
  paint-order: stroke; /* contour derrière le remplissage : l'or reste plein */
}

.review__star--full {
  fill: url(#review-star-gold);
  stroke: #c47f00;
  filter: drop-shadow(0 1px 1.5px rgba(196, 127, 0, 0.3));
}

.review__star--empty {
  fill: #ece8f4;
  stroke: #847c98;
}

.review__title {
  margin-top: 6px;
  font-weight: 700;
  overflow-wrap: break-word;
}

/* Retours à la ligne de l'avis original conservés. */
.review__text {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.review__text p {
  margin: 0;
}

/* Avis long replié à 5 lignes (le texte intégral reste dans la page et
   s'affiche avec « Lire la suite ») : hauteur du carrousel contenue.
   Hauteur maximale plutôt que line-clamp : WebKit n'applique pas
   line-clamp aux avis masqués, ce qui faisait prendre à la carte la hauteur
   de l'avis le plus long (constaté en aperçu le 21/10/2026). Fondu en bas
   pour signaler la suite. */
.review__text--clamped p {
  max-height: 7.5em; /* 5 lignes de 1,5 */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}

.review__more {
  display: inline-block;
  margin: 2px 0 0;
  padding: 10px 0;
  min-height: 44px;
  text-decoration: underline;
}

.review__author {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

.review__author strong {
  color: var(--navy);
}

.review__author time {
  white-space: nowrap;
}

.reviews__source {
  margin: 10px 0 14px;
  font-size: 13px;
}

.home-card__title {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.home-card__heading {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.home-card__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
}

/* Photo de Léo à côté de son nom (recette du 21/10/2026, point 2). */
.home-card__identity-photo {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--white);
  object-fit: cover;
  background: var(--white);
}

/* Moment 1 (agentv2.md §3.1) : texte juridique, navy sur dégradé (≥ 6,5:1). */
.home-card__intro,
.home-card__text {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
}

.home-card .btn--light {
  margin-top: 16px;
  width: 100%;
}

/* Panneau blanc : la saisie d'adresse reste sur fond blanc uni (§3.4). */
.home-card__panel {
  margin-top: 18px;
  padding: 18px 16px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--shadow-panel);
}

.home-card__panel .nav {
  margin-top: 8px;
}

/* « Pourquoi cet estimateur existe ? » : identité discrète, puis le
   storytelling de Léo (texte définitif du 21/10/2026). */
.about {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.about__photo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--white);
  object-fit: cover;
  background: var(--white);
}

.about__identity {
  font-size: 14px;
  line-height: 1.4;
}

.about__identity strong {
  font-size: 16px;
}

.story {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--white);
}

.story__title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.story p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
}

/* Suite repliée : aucune animation (affichage direct au clic). */
.story__toggle {
  display: inline-block;
  margin: 6px 0 0;
  padding: 10px 0;
  min-height: 44px;
  text-decoration: underline;
}

.notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-field);
  background: var(--pastel-yellow);
  font-size: 14px;
}

/* --- Champs de saisie (DESIGN.md §2.4) ---------------------------------- */

.field {
  margin-top: 20px;
}

.field:first-child {
  margin-top: 0;
}

.field__label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  /* Même convention que les intitulés de questions à choix et les titres. */
  text-wrap: balance;
}

.field__hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
}

.field__status {
  min-height: 1.4em;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.field__status--ok {
  color: var(--success);
}

.input {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-field);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.input:focus,
.input:focus-visible {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

.input--code {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-field);
  background: var(--white);
  overflow: hidden;
}

.input-group:focus-within {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.input-group--invalid,
.input-group--invalid:focus-within {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

.input-group .input {
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  flex: 1;
}

.input-group__addon {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--white);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.input-group__addon--prefix {
  color: var(--navy);
  border-right: 1px solid var(--border-decorative);
}

/* Stepper (nombre de pièces, étages…) */

.stepper {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.stepper .input,
.stepper__button {
  height: 52px;
}

.stepper .input {
  text-align: center;
  font-weight: 600;
}

.stepper__button {
  flex: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  width: 52px;
  min-height: 52px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-field);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.stepper__button:active {
  background: var(--border-decorative);
}

/* --- Autocomplétion d'adresse (combobox) -------------------------------- */

.combobox {
  position: relative;
}

/* Liste dans le flux de la page (plus de positionnement absolu) : jamais
   coupée par une carte ni recouvrante, entièrement visible en défilant,
   y compris clavier ouvert sur petit écran (DESIGN.md §3.2). */
.suggestions {
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-field);
  box-shadow: 0 1px 2px rgba(23, 36, 66, 0.08), 0 10px 24px rgba(23, 36, 66, 0.12);
  max-height: 300px;
  overflow-y: auto;
}

.suggestions li {
  padding: 12px 10px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
}

.suggestions li[aria-selected="true"],
.suggestions li:hover {
  background: var(--pastel-lilac);
}

.address-field--recognized .input {
  border-color: var(--success);
}

.assist {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-card);
}

.assist__title {
  font-weight: 700;
  margin-bottom: 6px;
}

.assist .result-section {
  margin-top: 16px;
  padding-top: 16px;
}

/* --- Cartes de choix (DESIGN.md §2.4) ----------------------------------- */

.choices {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Intitulé d'une question à choix (règle unique, recettes des 24/10/2026).
   Un paragraphe ordinaire (`.choices__question`), premier élément de la
   grille, qui nomme le groupe (`aria-labelledby`) : plus de <legend> visible,
   dont la mise en page à part différait selon les navigateurs (largeur
   ajustée au texte, ou enfermé dans la première colonne). Il couvre toutes
   les colonnes, garde 16 px, tient sur une ligne quand la place le permet.
   Sans mot isolé, même sans `text-wrap: balance` (non appliqué par le
   moteur de Safari 17.6 mesuré) : le dernier mot du texte est lié au
   précédent par une espace insécable (convention de COPY.md) ;
   `text-wrap: balance` équilibre en plus les deux lignes là où il est
   pris en charge. L'écart avec les réponses est celui de la grille. */
.choices__question {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Note d'un groupe de réponses (reprise d'un ancien brouillon) : sous
   l'intitulé, sur toutes les colonnes. */
.choices__note {
  grid-column: 1 / -1;
  margin: 0;
}

/* Lignes de choix (DESIGN.md §3.7, d'après R02-B) : fond blanc, tuile
   d'icône teintée éventuelle, sélection par bordure navy 2 px ET coche. */
.choices--rows {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.choice__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pastel-lilac);
}

.choice__tile img {
  width: 40px;
  height: 40px;
}

.choices + .choices {
  margin-top: 24px;
}

.choice {
  position: relative;
  display: flex;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.choice__body {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 14px 44px 14px 16px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-card);
  background: var(--white);
  font-weight: 600;
  line-height: 1.3;
}


/* Libellé : peut rétrécir et passer à la ligne ; la tuile passe au-dessus
   quand le libellé ne tient plus à côté (texte agrandi, zoom), sans jamais
   déborder de la carte ni passer sous la coche. */
.choice__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.choice__check {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 1px solid var(--border-field);
  border-radius: 50%;
  background: var(--white);
}


/* Sélection : bordure navy 2 px + coche explicite, jamais le pastel seul. */
.choice input:checked + .choice__body {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.choice input:checked + .choice__body .choice__check {
  border-color: var(--navy);
  background: var(--navy);
}

.choice input:checked + .choice__body .choice__check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Focus clavier : halo décalé, distinct de la bordure de sélection. */
.choice input:focus-visible + .choice__body {
  box-shadow: var(--focus-ring);
}

.choice input:checked:focus-visible + .choice__body {
  box-shadow: inset 0 0 0 1px var(--navy), var(--focus-ring);
}

.choices--invalid .choice__body {
  border-color: var(--error);
}

/* Écrans de détails facultatifs (décision #23) : les mêmes cartes de choix,
   sur deux colonnes au plus (largeur minimale d'une colonne : la moitié de
   la grille, jamais moins de 9rem ; sinon une seule colonne : petit écran,
   zoom fort), et les lettres du DPE sur quatre colonnes ; une carte « Je ne
   sais pas » occupe toute la ligne. */
.choices--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9rem, calc((100% - 10px) / 2))), 1fr));
  gap: 10px;
}

.choices--letters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.choice--wide {
  grid-column: 1 / -1;
}

/* Deux colonnes : coche plus petite, en haut à droite, pour laisser la
   largeur au libellé. Pas de césure automatique (recette du 24/10/2026) :
   elle coupait des mots qui tiennent entiers sur la ligne suivante
   (« cha-leur », « granu-lés ») ; la largeur minimale des colonnes suffit
   aux mots les plus longs. */
.choices--two .choice__body {
  padding: 14px 30px 14px 12px;
}

.choices--two .choice__label {
  -webkit-hyphens: manual;
  hyphens: manual;
}

.choices--two .choice__check {
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  margin-top: 0;
}

.choices--two input:checked + .choice__body .choice__check::after {
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
}

/* Phase 25 (décision #34) : précision courte sous un libellé (vue,
   standing), sur sa propre ligne, en texte secondaire. */
.choice__desc {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  /* Pas de césure : une phrase passe à la ligne entre deux mots. */
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Précisions des atouts cochés (écran 6) : regroupées sous les cases, un
   champ par atout, sur toute la largeur. */
.annexes {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.annexes .field {
  margin: 0;
}

.annexes + .choices,
.field + .choices {
  margin-top: 24px;
}

.choices--letters .choice:not(.choice--wide) .choice__body {
  justify-content: center;
  padding: 14px 8px;
  font-size: 18px;
}

.choices--letters .choice:not(.choice--wide) .choice__label {
  flex: none;
}

.choices--letters .choice:not(.choice--wide) .choice__check {
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  margin-top: 0;
}

.choices--letters .choice:not(.choice--wide) input:checked + .choice__body .choice__check::after {
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
}

@media (max-width: 299px) {
  .choices--letters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Boutons et navigation ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.btn--primary:active {
  background: var(--navy-pressed);
  border-color: var(--navy-pressed);
}

.btn--secondary {
  background: var(--white);
  border-color: var(--border-field);
  color: var(--navy);
}

.btn--secondary:active {
  background: var(--border-decorative);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--border-decorative);
  border-color: var(--border-decorative);
  color: var(--muted);
}

.btn-link {
  display: inline;
  padding: 12px 4px;
  margin: -12px -4px;
  border: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: none;
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.btn[aria-busy="true"],
.btn[aria-busy="true"][disabled] {
  cursor: progress;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  opacity: 0.85;
}

.btn--secondary[aria-busy="true"],
.btn--secondary[aria-busy="true"][disabled] {
  background: var(--white);
  border-color: var(--border-field);
  color: var(--navy);
}

.btn[aria-busy="true"]::after,
.btn-link[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  background: currentColor;
  box-shadow: 10px 0 0 currentColor, 20px 0 0 currentColor;
  margin-right: 20px;
  animation: pixel-blink 900ms steps(1, end) infinite;
}

@keyframes pixel-blink {
  0% { opacity: 1; }
  33% { opacity: 0.25; }
  100% { opacity: 0.25; }
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:not([disabled]):hover {
    background: var(--navy-pressed);
    border-color: var(--navy-pressed);
  }

  .btn--secondary:not([disabled]):hover,
  .stepper__button:hover {
    border-color: var(--navy);
  }

  .choice:hover .choice__body {
    border-color: var(--navy);
  }
}

.btn-link[disabled] {
  color: var(--muted);
  text-decoration: none;
  cursor: default;
}

/* Navigation : côte à côte dans la proportion 1 : 1,6 ; quand un libellé ne
   tient plus (texte agrandi, zoom), les boutons passent l'un sous l'autre au
   lieu de déborder (retour à la ligne décidé par la largeur minimale de leur
   contenu, ordre du document et du clavier inchangé). */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.nav .btn {
  flex: 1 1 0;
}

.nav .btn--primary {
  flex-grow: 1.6;
}

/* Écrans étroits (320 px) : marges intérieures horizontales réduites pour que
   « ← Retour » tienne sur une ligne (la flèche est déjà liée au mot par une
   espace insécable) ; hauteur tactile de 52 px inchangée. */
@media (max-width: 359px) {
  .nav {
    gap: 10px;
  }

  .nav .btn {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Petits écrans (iPhone jusqu'à 412 px de large) : carte d'estimation plus
   compacte pour que le champ d'adresse arrive plus haut (21/10/2026) ; le
   texte du moment 1 reste entier. La maison du coin reste hors du titre. */
@media (max-width: 413px) {
  .screen--home {
    padding-top: 40px;
  }

  .home-card--estimate {
    padding-top: 40px;
  }

  .home-card__corner-art {
    top: -46px;
    width: 100px;
  }

  .home-card__title {
    font-size: 24px;
  }

  .home-card__panel {
    margin-top: 14px;
  }
}

/* --- Messages ----------------------------------------------------------- */

.alert {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: var(--radius-field);
  border-left: 4px solid var(--error);
  background: var(--error-bg);
  color: var(--error);
  font-size: 15px;
  font-weight: 600;
}

.alert--warning {
  border-left-color: var(--warning);
  background: var(--white);
  border-top: 1px solid var(--border-decorative);
  border-right: 1px solid var(--border-decorative);
  border-bottom: 1px solid var(--border-decorative);
  color: var(--warning);
}

.success-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  font-weight: 600;
}

.success-line::before {
  content: "";
  flex: none;
  width: 6px;
  height: 11px;
  margin: 0 4px 3px 4px;
  border: solid var(--success);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- Transition (écran 7) ----------------------------------------------- */

.next-steps {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: next-step;
}

.next-steps li {
  position: relative;
  padding: 12px 0 12px 48px;
  border-bottom: 1px solid var(--border-decorative);
  counter-increment: next-step;
  font-weight: 600;
}

.next-steps li:last-child {
  border-bottom: 0;
}

.next-steps li::before {
  content: counter(next-step);
  position: absolute;
  left: 0;
  top: 9px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--pastel-lilac);
  font-family: var(--font-pixel);
  font-size: 13px;
  line-height: 32px;
  text-align: center;
}

/* --- Téléphone / OTP ---------------------------------------------------- */

.phone-preview {
  margin-top: 8px;
  min-height: 1.4em;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.resend {
  margin-top: 16px;
  font-size: 14px;
}

.resend__status {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* --- Récapitulatif (écran 10) ------------------------------------------- */

/* Récapitulatif (écran 10, DESIGN.md §3.8) : trois sections sobres sur
   fond blanc ; chaque ligne « libellé — valeur » passe sur deux lignes quand
   la place manque (texte agrandi, zoom, adresse longue). Seules les lignes
   apparaissent progressivement ; le texte juridique et le bouton, jamais
   animés, sont lisibles et utilisables immédiatement. */
.recap {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.recap__section {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border-decorative);
  border-radius: var(--radius-card);
  background: var(--white);
}

.recap__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.recap__list {
  margin: 0;
}

.recap__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--border-decorative);
  /* Fondu lent et doux (recette du 21/10/2026, point 7) : 700 ms par ligne,
     110 ms d'écart, courbe très amortie. Seules les lignes sont animées : le
     texte juridique et le bouton sont visibles et actifs immédiatement. */
  animation: recap-row-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

.recap__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.recap__row dt {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.recap__row dd {
  min-width: 0;
  margin: 0;
  font-weight: 600;
  text-align: right;
  overflow-wrap: break-word;
}

/* Valeurs courtes : césure française si un mot ne tient plus (zoom fort).
   Jamais sur l'adresse (ligne empilée), où un nom propre ne se coupe pas. */
.recap__row:not(.recap__row--stacked) dd {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.recap__row--stacked {
  display: block;
}

.recap__row--stacked dd {
  margin-top: 2px;
  text-align: left;
}

.recap__empty {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.recap__phone {
  margin: 0;
  font-weight: 600;
  overflow-wrap: break-word;
}

@keyframes recap-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.legal-text {
  /* service-recap-v3 : les retours à la ligne font partie du texte validé. */
  white-space: pre-line;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background: var(--pastel-lilac);
  font-size: 15px;
}

/* --- Résultat (écran 11) ------------------------------------------------ */

/* Attente de l'estimation (recette du 21/10/2026, point 6) : plus de mise
   en scène dédiée. Le bloc suit le bouton « Estimation en cours… »
   (récapitulatif ou « Réessayer ») ; seuls les messages de 20 s et 60 s
   s'affichent, sans animation. */
.estimate-wait__late {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-field);
  background: var(--pastel-lilac);
  font-size: 15px;
  font-weight: 600;
}

/* Introduction des options de contact (60 s) : simple phrase, l'encadré
   restant réservé au message d'attente. */
.estimate-wait__assist {
  margin-top: 14px;
  font-size: 15px;
}

/* Résultat (DESIGN.md §3.10) : révélation douce du seul bloc de succès ;
   illustration « volume doux » sur un dégradé du projet ; confettis légers,
   présents uniquement dans ce bloc (donc jamais sans succès réel). */
.result-success:not([hidden]) {
  animation: result-reveal 320ms ease-out both;
}

@keyframes result-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-visual {
  position: relative;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--grad-bleu);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Visuels définitifs de Léo (PNG 1744 × 902, transparents, 21/10/2026) :
   cadre aux proportions des fichiers, sur toute la largeur (360 px au
   plus) ; image contenue sans déformation ni recadrage, jamais recompressée. */
.result-visual__property {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 1744 / 902;
  object-fit: contain;
  opacity: 0; /* révélé par l'animation en deux temps, ci-dessous */
}

/* Confettis (PNG transparent) derrière le bien, sur tout le cadre : une
   explosion festive en arrière-plan qui ne masque jamais la façade
   (recette iPhone du 22/10/2026) ; leur centre vide encadre le bâtiment. */
.result-visual__confetti {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 55%;
}

/* Animation en deux temps (recette du 22/10/2026), lancée par le script une
   fois les images chargées (classe is-revealed) : 1) le bien apparaît seul ;
   2) les confettis jaillissent derrière lui avec un léger dépassement, puis
   se posent. Courte (environ 1,1 s au total), jamais répétée ; le prix et les
   boutons sont affichés sans attendre. */
.result-visual.is-revealed .result-visual__property {
  animation: property-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result-visual.is-revealed .result-visual__confetti {
  animation: confetti-burst 650ms cubic-bezier(0.22, 1, 0.36, 1) 420ms both;
}

@keyframes property-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Jaillissement : part de 80 % (jamais d'amas sur le bien), dépasse
   légèrement puis se pose. */
@keyframes confetti-burst {
  0% { opacity: 0; transform: scale(0.8); }
  55% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

.result-title {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.price-main {
  margin-top: 6px;
  /* 40 px dès 320 px CSS de large ; plus petit seulement sous un zoom fort
     (le prix, insécable par typographie, ne déborde pas) ; coupure en
     dernier recours seulement. */
  font-size: clamp(24px, 12.5vw, 40px);
  overflow-wrap: anywhere;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.price-range,
.price-sqm {
  margin-top: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.price-range {
  font-weight: 600;
}

.price-sqm {
  color: var(--muted);
}

/* Trois infos rapides (type, surface, adresse) : pastilles qui passent à la
   ligne, jamais tronquées. */
.result-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
}

.result-facts__item {
  min-width: 0;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--border-decorative);
  border-radius: 999px;
  text-align: center;
}

.result-facts__item dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.result-facts__item dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: break-word;
}

/* Adresse complète du bien (décision #22) : sur sa propre ligne, en pleine
   largeur, coins moins arrondis pour qu'une adresse longue reste lisible sur
   plusieurs lignes, jamais coupée. */
.result-facts__item[data-fact="address"] {
  flex-basis: 100%;
  border-radius: 16px;
}

.result-note {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}

/* Avertissement « peu de ventes » (Phase 26, DESIGN.md §3.17) : bandeau
   jaune pâle, texte navy, pastille décorative. */
.result-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: var(--pastel-yellow);
  color: var(--navy);
  text-align: left;
}

.result-warning[hidden] {
  display: none;
}

.result-warning p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.result-warning__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--warning);
  color: var(--white);
  font-size: 17px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
}

.callback {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background: var(--pastel-mint);
  font-weight: 600;
}

.result-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-decorative);
}

.result-section__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Bloc conseiller : vraie photo, nettement séparée de l'univers pixel
   (DESIGN.md §2.6) — aucun filtre, cadrage simple. */
.advisor {
  display: flex;
  align-items: center;
  gap: 14px;
}

.advisor__photo {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pastel-lilac);
}

.advisor__name {
  font-size: 17px;
  font-weight: 700;
}

/* Message de fin (succès seulement), avant le rendez-vous et les
   coordonnées : texte définitif de Léo, sur fond pastel sobre. */
.result-closing {
  margin-top: 24px;
  padding: 18px 16px;
  border-radius: var(--radius-card);
  background: var(--pastel-lilac);
}

.result-closing__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.result-closing p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
}

.advisor__role,
.advisor__area {
  font-size: 14px;
  color: var(--muted);
}

/* Fond blanc (DESIGN.md §3.18) : la page Google Agenda intégrée est
   transparente et laisserait voir le rose de la carte de fin. */
.booking__frame {
  position: relative;
  min-height: 680px;
  margin-top: 12px;
  border: 1px solid var(--pastel-pink);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
}

/* Visible tant que Google n'a rien affiché ; le calendrier le recouvre. */
.booking__placeholder {
  padding: 24px 16px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.booking__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--white);
}

.booking__fallback {
  margin-top: 14px;
  font-size: 14px;
}

.booking__fallback a {
  font-weight: 700;
  color: var(--navy);
}

.result-section .btn {
  margin-top: 14px;
}

.email-copy__form {
  margin-top: 14px;
}

.email-copy__status {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}

.email-copy__status--ok {
  color: var(--success);
}

.email-copy__status--error {
  color: var(--error);
}

.failure__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.failure__message {
  margin-top: 12px;
}

.contact-line {
  font-size: 15px;
}

.contact-line a {
  font-weight: 700;
}

/* --- Écrans plus larges -------------------------------------------------- */

@media (min-width: 640px) {
  .app {
    padding-top: 28px;
  }

  .avatar {
    height: 104px;
  }

  .topbar {
    gap: 16px;
  }

  .topbar__slot {
    min-height: 52px;
  }

  .topbar__name,
  .bubble {
    font-size: 14px;
  }

  .screen--home {
    gap: 24px;
  }

  .home-card {
    padding: 28px;
  }

  .home-card__title {
    font-size: 36px;
  }

  .home-card--estimate {
    padding-top: 72px;
  }

  .home-card__corner-art {
    width: 150px;
    top: -64px;
    right: 16px;
  }

  .home-card__art--about {
    width: 176px;
  }

  .home-card__panel {
    padding: 22px 20px;
  }

}

/* --- Refonte visuelle « vive » (DESIGN.md §3.16, décision #36) ----------
   Le parcours reprend le langage de l'accueil : grand cadre en dégradé par
   groupe d'écrans, carte blanche des questions posée dessus, boutons en
   pilule qui flottent. Texte toujours navy ; sélection jamais signalée par
   la couleur seule (bordure navy + coche) ; champs de saisie blancs.
   Contrastes calculés (WCAG 2) : navy ≥ 6,5:1 sur chaque dégradé, ≥ 10:1 sur
   chaque teinte de sélection ; bordure de champ ≥ 3,1:1 sur chaque teinte ;
   accents ≥ 5,4:1 sur blanc. */

body {
  --theme-cadre: var(--grad-violet);
  --theme-selection: #ddd2fa;
  --theme-accent: #5b4bb7;
  --ombre-carte: 0 1px 2px rgba(23, 36, 66, 0.05), 0 18px 40px -18px rgba(23, 36, 66, 0.28);
  --ombre-choix: 0 1px 2px rgba(23, 36, 66, 0.06), 0 6px 14px -8px rgba(23, 36, 66, 0.22);
  --ombre-bouton: 0 2px 4px rgba(23, 36, 66, 0.18), 0 14px 26px -10px rgba(23, 36, 66, 0.55);
  --ombre-bouton-clair: 0 1px 2px rgba(23, 36, 66, 0.08), 0 10px 20px -10px rgba(23, 36, 66, 0.35);
}

body[data-theme="projet"] {
  --theme-cadre: linear-gradient(135deg, #7fd6b4 0%, #9fe0d0 100%);
  --theme-selection: #c9ecd9;
  --theme-accent: #1f6b4e;
}

body[data-theme="verification"] {
  --theme-cadre: var(--grad-bleu);
  --theme-selection: #d6e4fd;
  --theme-accent: #2f5fb8;
}

body[data-theme="demande"],
body[data-theme="resultat"] {
  --theme-cadre: linear-gradient(160deg, #f28aa6 0%, #fbb27e 100%);
  --theme-selection: #fde3d6;
  --theme-accent: #b0446a;
}

/* Grand cadre arrondi jusqu'en bas de l'écran, carte blanche posée dessus. */
.theme-cadre .app {
  width: calc(100% - 16px);
  min-height: calc(100vh - 16px);
  margin: 8px auto;
  padding: 12px 12px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-radius: var(--radius-hero);
  background: var(--theme-cadre);
  box-shadow: var(--shadow-card);
}

.theme-cadre .screen {
  padding: 22px 14px 24px;
  border-radius: 26px;
  background: var(--white);
  box-shadow: var(--ombre-carte);
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Sur le dégradé, l'identité passe en navy (le gris tomberait à 2,9:1). */
.theme-cadre .topbar__name {
  color: var(--navy);
}

.theme-cadre .progress__track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}

.theme-cadre .progress__fill {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--theme-accent) 100%);
}

/* Intitulés des questions : pastille de l'accent. */
.choices__question {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
}

.choices__question::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--theme-accent);
  transform: translateY(-2px);
}

/* Cartes de choix qui flottent ; choisie : teinte du groupe EN PLUS de la
   bordure navy et de la coche. */
.choice__body {
  border-radius: 18px;
  box-shadow: var(--ombre-choix);
  transition: background-color 160ms ease-out, transform 120ms ease-out, box-shadow 160ms ease-out;
}

.choice:active .choice__body {
  transform: translateY(1px) scale(0.99);
}

.choice input:checked + .choice__body {
  background: var(--theme-selection);
  box-shadow: inset 0 0 0 1px var(--navy), var(--ombre-choix);
}

.choice input:focus-visible + .choice__body {
  box-shadow: var(--focus-ring);
}

.choice input:checked:focus-visible + .choice__body {
  box-shadow: inset 0 0 0 1px var(--navy), var(--focus-ring);
}

.choice__tile {
  border-radius: 14px;
  background: var(--theme-selection);
}

/* Lettres du DPE teintées du vert (A) au rouge (G), en plus de la lettre. */
.choices--letters .choice:not(.choice--wide):nth-of-type(1) .choice__body { background: #d7f2e3; }
.choices--letters .choice:not(.choice--wide):nth-of-type(2) .choice__body { background: #e4f4d6; }
.choices--letters .choice:not(.choice--wide):nth-of-type(3) .choice__body { background: #f1f6d2; }
.choices--letters .choice:not(.choice--wide):nth-of-type(4) .choice__body { background: #fcf3c9; }
.choices--letters .choice:not(.choice--wide):nth-of-type(5) .choice__body { background: #fde6c8; }
.choices--letters .choice:not(.choice--wide):nth-of-type(6) .choice__body { background: #fbd9c9; }
.choices--letters .choice:not(.choice--wide):nth-of-type(7) .choice__body { background: #f8cdcd; }

/* Boutons en pilule qui flottent. */
.btn {
  border-radius: 999px;
  transition: transform 120ms ease-out, box-shadow 160ms ease-out;
}

.btn--primary {
  background: linear-gradient(180deg, #24365f 0%, var(--navy) 100%);
  box-shadow: var(--ombre-bouton);
}

.btn--primary:active {
  background: var(--navy-pressed);
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 2px 6px -2px rgba(23, 36, 66, 0.45);
}

.btn--secondary {
  box-shadow: var(--ombre-bouton-clair);
}

.btn--secondary:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: none;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--border-decorative);
  box-shadow: none;
  transform: none;
}

.stepper__button {
  border-radius: 50%;
  box-shadow: var(--ombre-bouton-clair);
}

.input {
  border-radius: 14px;
}

/* --- Résultat ----------------------------------------------------------- */

.result-visual {
  border-radius: 20px;
}

.result-title {
  margin-top: 16px;
  font-size: 15px;
  color: var(--muted);
}

.price-main {
  margin-top: 2px;
  font-size: clamp(24px, 14vw, 54px);
  letter-spacing: -0.02em;
}

.price-scale {
  margin: 18px 4px 0;
}

.price-scale__bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #82a6f8 0%, #b79af4 50%, #f09ccb 100%);
}

.price-scale__marker {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 4px solid var(--white);
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 4px 10px -2px rgba(23, 36, 66, 0.45);
}

.price-scale__bounds {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.price-scale__bounds strong {
  display: block;
  font-size: 15px;
  color: var(--navy);
}

.price-scale__bounds span:last-child {
  margin-left: auto;
  text-align: right;
}

.price-sqm {
  margin-top: 14px;
  font-weight: 600;
  color: var(--navy);
}

.result-facts__item {
  border: 0;
  background: #fde8e0;
}

.result-facts__item[data-fact="address"] {
  background: #f6eef7;
}

.callback {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 18px;
}

.callback::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Plus de filets gris : des espacements et des cartes. */
.result-section {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
}

/* Message de fin + rendez-vous : une même carte. Dégradé vertical qui finit
   sur la teinte unie du bloc de rendez-vous, posé par-dessus le bas arrondi
   du message (aucun sélecteur récent : Safari 15). */
.result-closing {
  padding: 22px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #efe8fd 0%, #fbe6ef 100%);
}

#screen-result .result-closing:not([hidden]) + #booking-block:not([hidden]) {
  position: relative;
  margin-top: -22px;
  padding: 22px 18px 22px;
  border-radius: 0 0 22px 22px;
  background: #fbe6ef;
}

/* Conseiller + coordonnées : une même carte (au résultat seulement ; ailleurs
   les coordonnées restent seules). */
#screen-result #advisor-block:not([hidden]) {
  padding: 18px 18px 0;
  border: 1px solid var(--border-decorative);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: var(--white);
}

#screen-result #advisor-block:not([hidden]) + #contact-block:not([hidden]) {
  margin-top: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--border-decorative);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background: var(--white);
  box-shadow: var(--ombre-choix);
}

.advisor__photo {
  width: 76px;
  height: 76px;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px #f28aa6;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.contact-actions .btn {
  min-height: 48px;
  font-size: 15px;
  overflow-wrap: anywhere;
}

#email-copy-block {
  padding: 18px;
  border-radius: 22px;
  background: #f7f5fc;
}

/* Ligne de note des avis, sous « Estimer mon bien » (accueil). Étoiles
   décoratives ; la note est écrite en navy. */
.home-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin-top: 14px;
  padding: 6px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}

.home-rating__stars {
  color: #e0a100;
  font-size: 15px;
  letter-spacing: 1px;
}

.home-rating__text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Ordinateur : largeur du contenu (recette du 22/10/2026) ------------
   Environ deux tiers de la fenêtre, centrés, 1 280 px au plus. Uniquement
   avec une souris ou un pavé tactile (jamais l'iPhone, même en paysage) et
   à partir de 840 px, largeur à laquelle les deux tiers valent exactement
   les 560 px du conteneur mobile : l'élargissement est continu, sans saut. */

@media (min-width: 840px) and (hover: hover) and (pointer: fine) {
  .app {
    max-width: min(66.667vw, 1280px);
  }

  /* Lecture confortable : les textes courants gardent des lignes de
     70 à 80 caractères environ ; cartes, encadrés colorés et boutons suivent la
     largeur du cadre. Le message de fin, dans son encadré coloré, va jusqu'au
     bord de l'encadré (essai de Léo sur Safari, 02/11/2026 : le vide à
     droite faisait négligé). */
  .home-card__intro,
  .home-card__text,
  .story p,
  .review__text p,
  .screen__lead,
  .failure__message {
    max-width: 60ch;
  }

  /* Champs à valeur courte (surface, compteurs, année, téléphone, code,
     e-mail) : largeur adaptée au contenu, alignés sous leur libellé. Le
     champ d'adresse de l'accueil garde toute la largeur (adresses longues,
     liste de suggestions). */
  .screen:not(.screen--home) .field > .input,
  .stepper,
  .input-group,
  .email-copy__form {
    max-width: 480px;
  }
}

/* --- Mouvement réduit (DESIGN.md, Partie 2) ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reviews--enhanced .review,
  .reviews--enhanced .review.is-active {
    transition: none;
  }

  /* Résultat : bien et confettis affichés directement, sans mouvement ni
     délai (la règle générale raccourcit la durée, pas le délai). */
  .result-visual .result-visual__property,
  .result-visual .result-visual__confetti,
  .result-visual.is-revealed .result-visual__property,
  .result-visual.is-revealed .result-visual__confetti {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* La règle ci-dessus raccourcit la durée mais pas le délai : sans ceci,
     les lignes du récapitulatif resteraient invisibles pendant leur délai. */
  .recap__row {
    animation: none;
  }

  /* Refonte visuelle (§3.16) : aucune pression animée des boutons et cartes. */
  .btn:active,
  .choice:active .choice__body {
    transform: none;
  }
}

/* Bandeau de la recette locale simulée (recette_simulee.py) : absent du
   parcours normal. Navy sur jaune : 11,1:1 (WCAG 2). */
.recette-banner {
  padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: #ffd84d;
  color: #172442;
  font-weight: 700;
  font-size: 0.875rem;
  text-align: center;
}

/* Phase 30 : phrase d'usage sous le champ de la copie e-mail. */
.email-copy__usage {
  margin: 8px 0 12px;
}

/* --- Phase 30 : pied de page et pages juridiques (variante A « sobre »,
   choisie par Léo le 06/11/2026, DESIGN.md §3.19) ----------------------- */
.site-footer {
  max-width: 560px;
  margin: 8px auto 0;
  padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.site-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page {
  background: var(--white);
}

.legal__top,
.legal {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  color: var(--navy);
}

.legal__top {
  padding-top: 16px;
}

.legal {
  padding-bottom: 24px;
}

.legal__back {
  display: inline-block;
  margin: 4px 0 16px;
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__title {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 8px;
}

.legal h2 {
  font-size: 17px;
  margin: 24px 0 6px;
  padding-top: 18px;
  border-top: 1px solid var(--border-decorative);
}

.legal p,
.legal li,
.legal dt,
.legal dd {
  font-size: 15px;
  line-height: 1.6;
}

.legal p {
  margin: 0 0 10px;
  white-space: pre-line;
}

.legal ul {
  margin: 0 0 10px;
  padding-left: 20px;
}

.legal li {
  margin-bottom: 6px;
}

.legal a {
  color: var(--navy);
}

.legal__usages {
  margin: 0 0 12px;
}

.legal__usage {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-decorative);
}

.legal__usage dt {
  font-weight: 600;
}

.legal__usage dd {
  margin: 2px 0 0;
  color: var(--muted);
}

.legal__pending {
  background: var(--error-bg);
  color: var(--error);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
}

.legal__updated {
  color: var(--muted);
  font-size: 13px;
  margin-top: 28px;
}