/* ==========================================================================
   mavaleur.fr — parcours d'estimation
   Design tokens repris du fichier Claude Design « MaValeur Estimation ».
   ========================================================================== */

:root {
  /* Fonds */
  --bg:            #FAFAF8;
  --surface:       #ffffff;
  --surface-warm:  #F7F5F0;
  --surface-head:  #F9F8F4;
  --surface-sunk:  #FCFBF8;
  --surface-hover: #F4F2EC;
  --surface-step:  #F2F0E9;

  /* Texte */
  --ink:      #0E0F10;
  --ink-2:    #2C2C28;
  --ink-3:    #3A3A36;
  --muted:    #57564F;
  --muted-2:  #6A695F;
  --muted-3:  #8E8D84;
  --faint:    #A5A399;

  /* Accent */
  --accent:        #2E5E52;
  --accent-hover:  #234A41;
  --accent-deep:   #1C4038;
  --accent-soft:   #E8EFEA;
  --accent-line:   #D3DED8;
  --warn:          #8A5C36;

  /* Traits */
  --line:    #E6E3DB;
  --line-2:  #E2E0DA;
  --line-3:  #EDEAE2;
  --line-4:  #F3F1EB;
  --line-5:  #DAD7CE;
  --line-6:  #C6C3B9;

  /* États inertes */
  --track:       #E7E4DC;
  --disabled-bg: #E7E4DC;
  --disabled-fg: #9B998F;

  /* Bloc sombre */
  --dark:          #0E0F10;
  --dark-card:     #17181A;
  --dark-line:     #2A2B2C;
  --dark-box:      #1F2022;
  --dark-box-on:   #1E2A25;
  --dark-edge:     #3A3B3D;
  --dark-edge-on:  #3A7263;
  --dark-fill-on:  #6E9C8E;
  --dark-cta:      #25262A;
  --dark-cta-ink:  #E4E2D9;
  --on-dark:       #F3F1EB;
  --on-dark-2:     #C9C7BE;
  --on-dark-3:     #9C9A90;
  --on-dark-4:     #9A988F;

  /* Typographie */
  /* Des formes familières et humanistes : l'interface ressemble davantage à
     un service immobilier accessible qu'à un produit tech éditorialisé. */
  --sans:  'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --display: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Une seule coque sur tout le site. Les écrans de formulaire gardent une
     colonne de lecture plus étroite, mais navbar, page et footer ne changent
     plus de largeur entre la landing et le tunnel. */
  --wide:  1200px;
  --shell: 900px;
  --header-height: 72px;
  --header-gutter: 20px;
  --page-gutter: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

input { font-family: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
}
button:disabled { cursor: not-allowed; }

p  { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

::placeholder { color: var(--faint); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes rise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes turn  { to { transform: rotate(1turn); } }

/* --------------------------------------------------------------------------
   Coque
   -------------------------------------------------------------------------- */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Le tunnel ne révèle jamais son contenu statique ni un écran de chargement
   intermédiaire. `boot.js` pose la classe avant le premier rendu ; app.js la
   retire seulement lorsque l'adresse et les données du premier écran sont
   prêtes. Sans JavaScript, la classe n'existe pas et le repli reste visible. */
html.tunnel-boot .app { opacity: 0; }
html.tunnel-ready .app { animation: fade .22s ease both; }

.main {
  flex: 1;
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--page-gutter) 80px;
}

.noscript {
  margin: 0;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 15.5px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   En-tête + rail de progression
   -------------------------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 250, 248, .86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.hdr__inner {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--header-gutter);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  /* Sans cette limite, les trois blocs additionnent leurs largeurs
     intrinsèques et poussent « Quitter » hors de l'écran sur mobile. */
  overflow: hidden;
}

.logo {
  display: flex;
  align-items: center;
  gap: 1px;
  color: var(--ink);
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: -0.01em;
}
.logo::before {
  content: '';
  width: 30px;
  height: 30px;
  margin-right: 8px;
  flex: 0 0 30px;
  background: url("favicon.svg?v=20260813c") center / contain no-repeat;
}
.logo:hover { color: var(--ink); }
.logo__tld { color: var(--accent); }

.hdr__quit {
  flex-shrink: 0;
  font-size: 13.5px;
  color: var(--muted-2);
  white-space: nowrap;
}
.hdr__quit:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Navigation principale

   Elle vivait dans landing.css, donc sur l'accueil et nulle part ailleurs :
   les pages communales n'affichaient qu'un logo et un bouton, sans aucun moyen
   d'aller voir la méthode ou la précision. C'est un composant partagé, il est
   donc dans la feuille partagée. `.hdr` reste réservé au tunnel, dont l'en-tête
   porte un rail de progression au lieu de liens.
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px) saturate(140%);
  background: rgba(250, 250, 248, .86);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--header-gutter);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.logo--lg { font-size: 27px; }

.nav__links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 30px);
  font-size: 15px;
  font-weight: 450;
  white-space: nowrap;
  overflow: hidden;
}
.nav__links a { color: var(--ink-3); }
.nav__links a:hover { color: var(--accent); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 9px;
  transition: background .16s ease;
}
.nav__cta:hover { background: var(--accent-hover); color: #fff; }

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .logo--lg { font-size: 23px; }
  .logo::before { width: 28px; height: 28px; flex-basis: 28px; margin-right: 7px; }
}

.rail {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rail__step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rail__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 600;
  background: transparent;
  color: var(--muted-3);
  border: 1.5px solid var(--line-5);
}
.rail__step.is-done .rail__mark    { background: var(--accent); color: #fff; border-color: var(--accent); }
.rail__step.is-current .rail__mark { background: #fff; color: var(--accent); border-color: var(--accent); }

.rail__label {
  font-size: 13px;
  font-weight: 450;
  color: var(--muted-2);
  white-space: nowrap;
}
.rail__step.is-current .rail__label { font-weight: 600; color: var(--ink); }

.rail__line {
  width: 18px;
  height: 1.5px;
  background: var(--line-5);
  border-radius: 99px;
}
.rail__step.is-done .rail__line { background: var(--accent); }
.rail__step:last-child .rail__line { background: transparent; }

@media (max-width: 760px) {
  .rail__label { display: none; }
}

@media (max-width: 880px) {
  .logo { font-size: 23px; }
}

/* En-tête sur petit écran : le rail se réduit avant tout le reste, et il peut
   défiler s'il ne tient toujours pas. Le logo et la sortie ne bougent jamais —
   ce sont les deux repères qui permettent de savoir où l'on est et d'en sortir. */
@media (max-width: 560px) {
  .hdr__inner { gap: 12px; }

  .rail {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__step { flex: 0 0 auto; }
  .rail__mark { width: 20px; height: 20px; font-size: 11px; }
  .rail__line { width: 10px; }

  .hdr__quit { font-size: 12.5px; }
}

/* Sous 380 px, la sortie reste accessible par le logo : on libère la place. */
@media (max-width: 379px) {
  .hdr__quit { display: none; }
}

/* --------------------------------------------------------------------------
   Blocs communs
   -------------------------------------------------------------------------- */

.screen {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}
.screen.is-enter        { animation: rise .5s cubic-bezier(.2, .7, .3, 1) both; }
.screen--calc.is-enter  { animation: fade .4s both; }

/* Bloc, et non `span` inline : le lien de retour qui la précède est en
   `inline-flex`, les deux se retrouvaient donc sur la même ligne. Tant que la
   sur-titre tenait en deux mots, le défaut passait pour une intention ; avec
   une phrase plus longue, elle s'enroulait autour du lien. */
.eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--accent);
}

.display {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.lede {
  margin: 14px 0 0;
  max-width: 600px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
}
.lede strong { font-weight: 600; color: var(--ink); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.card__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.card__sub {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}

/* Boutons ------------------------------------------------------------------ */

.btn {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 28px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 16.5px;
  font-weight: 600;
  transition: background .16s ease;
}
.btn:hover:not(:disabled) { background: var(--accent-hover); }
.btn:disabled { background: var(--disabled-bg); color: var(--disabled-fg); }

.btn-back {
  font-size: 15px;
  color: var(--muted);
  padding: 10px 0;
  transition: color .16s ease;
}
.btn-back:hover { color: var(--accent); }

.btn-ghost {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .16s ease, color .16s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hint {
  font-size: 13.5px;
  color: var(--muted-2);
}

/* Pastilles de choix ------------------------------------------------------- */

.pill {
  flex: 1;
  text-align: center;
  padding: 11px 10px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 450;
  background: var(--surface);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  transition: border-color .14s ease, background .14s ease;
}
.pill:hover:not(.is-on) { border-color: var(--line-6); background: var(--surface-sunk); }
.pill.is-on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}

.pill--mono { font-family: var(--mono); padding: 11px 0; }
.pill--dpe  { font-family: inherit; font-size: 13.5px; border-radius: 9px; padding: 11px 0; }
.pill--opt  { flex: 0 0 auto; padding: 11px 16px; }

/* --------------------------------------------------------------------------
   Étape 1 — Adresse
   -------------------------------------------------------------------------- */

.addr {
  margin-top: 30px;
  position: relative;
  max-width: 620px;
}

.addr__field {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  height: 62px;
  padding: 0 20px;
  box-shadow: 0 1px 2px rgba(20, 20, 16, .04);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.addr__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(46, 94, 82, .12);
}

.addr__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16.5px;
  color: var(--ink);
  min-width: 0;
}

.addr__pop {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(20, 20, 16, .13);
  padding: 6px;
  animation: fade .14s both;
}

.addr__sug {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--ink);
}
.addr__sug:hover { background: var(--surface-hover); }

.trust {
  margin: 44px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13.5px;
  color: var(--muted-2);
  list-style: none;
}
.trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trust__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Étape 2 — Votre bien
   -------------------------------------------------------------------------- */

.link-inline {
  font-size: 16.5px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-inline:hover { color: var(--accent-deep); }

.bien {
  margin-top: 28px;
  border-radius: 18px;
  overflow: hidden;
}

.bien__grid {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.field__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted-2);
}

.field__row {
  margin-top: 9px;
  display: flex;
  gap: 7px;
}
.field__row--tight { gap: 6px; }
.field__row--dpe   { gap: 5px; }

.input-box {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 0 14px;
  height: 44px;
  background: var(--surface-sunk);
  transition: border-color .16s ease;
}
.input-box:focus-within { border-color: var(--accent); }

.input-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  min-width: 0;
}

.input-box__unit {
  font-size: 14px;
  color: var(--muted-2);
}

.feats {
  padding: 0 24px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 450;
  background: var(--surface);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  transition: border-color .14s ease, background .14s ease;
}
.chip:hover:not(.is-on) { border-color: var(--line-6); }
.chip.is-on {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: var(--accent);
  font-weight: 600;
}

.chip__box {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid var(--line-6);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chip__box svg { opacity: 0; }
.chip.is-on .chip__box     { border-color: var(--accent); background: var(--accent); }
.chip.is-on .chip__box svg { opacity: 1; }

/* --------------------------------------------------------------------------
   Étape 3 — Précisions
   -------------------------------------------------------------------------- */

.qs {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.q {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  transition: border-color .16s ease;
}
.q.is-answered { border-color: var(--accent-line); }

.q__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.q__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-2);
}

.q__label {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.q__opts {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Étape 4 — Calcul
   -------------------------------------------------------------------------- */

.screen--calc {
  padding: clamp(20px, 6vw, 70px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.spinner {
  position: relative;
  width: 56px;
  height: 56px;
  display: block;
}
.spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid var(--line-2);
  border-top-color: var(--accent);
  animation: turn 1s linear infinite;
}

.calc__title {
  margin: 26px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.calc__sub {
  margin: 12px 0 0;
  font-size: 15.5px;
  color: var(--muted);
}

.calc__list {
  margin: 34px 0 0;
  padding: 0;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  list-style: none;
}

.calc__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-radius: 12px;
  background: transparent;
  font-size: 14.5px;
  color: var(--muted-2);
  opacity: .45;
  transition: opacity .3s ease, background .3s ease;
}
.calc__item.is-active { background: var(--surface-step); color: var(--ink); opacity: 1; }
.calc__item.is-done   { color: var(--ink); opacity: 1; }

.calc__mark {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--line-6);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc__mark svg { opacity: 0; }
.calc__item.is-done .calc__mark     { border-color: var(--accent); background: var(--accent); }
.calc__item.is-done .calc__mark svg { opacity: 1; }

/* --------------------------------------------------------------------------
   Étape 5 — Rapport
   -------------------------------------------------------------------------- */

.report__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.report__title {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.report__resume {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.block { margin-top: 16px; padding: clamp(24px, 3.4vw, 32px); }
.block--price { margin-top: 26px; padding: clamp(24px, 3.4vw, 34px); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 11px;
  border-radius: 99px;
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.price {
  margin-top: 18px;
  font-family: var(--display);
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.price span { white-space: nowrap; }
.price__dash { color: var(--faint); }

.price__meta {
  margin-top: 12px;
  font-size: 15px;
  color: var(--muted);
}
.price__meta strong { font-weight: 600; color: var(--ink); }

/* Ce que borne la fourchette : des prix de vente, pas la précision du calcul.
   La distinction est la chose la plus importante du bloc — elle mérite d'être
   lue avant la jauge, pas reléguée en note de bas de carte. */
.price__couverture {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.price__couverture strong { font-weight: 600; color: var(--ink); }

.gauge {
  margin-top: 26px;
  position: relative;
  height: 10px;
  border-radius: 99px;
  background: var(--track);
}
.gauge__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  border-radius: 99px;
  background: var(--accent);
  transform-origin: left;
}
.is-enter .gauge__fill { animation: grow .8s cubic-bezier(.2, .7, .3, 1) both; }

.gauge__scale {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted-2);
}

/* Facteurs */

.factors {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.factor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-4);
}
.factor:last-child { border-bottom: none; }

.factor__label { font-size: 14.5px; color: var(--ink-2); }

.factor__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.factor__value { font-size: 13.5px; color: var(--muted-2); }

.factor__delta {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  min-width: 52px;
  text-align: right;
  color: var(--muted-2);
}
.factor__delta.is-up   { color: var(--accent); }
.factor__delta.is-down { color: var(--warn); }

/* Comparables */

.comps { margin-top: 16px; overflow: hidden; padding: 0; }

.comps__head { padding: clamp(22px, 3vw, 28px) clamp(24px, 3.4vw, 32px) 18px; }

.comps__scroll { overflow-x: auto; }
.comps__table  { min-width: 520px; }

.comps__row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.1fr 1fr;
  align-items: center;
  padding: 15px clamp(24px, 3.4vw, 32px);
  border-bottom: 1px solid var(--line-4);
  font-size: 14.5px;
}
.comps__row:hover { background: var(--surface-sunk); }

.comps__row--head {
  padding: 12px clamp(24px, 3.4vw, 32px);
  background: var(--surface-head);
  border-top: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted-2);
}
.comps__row--head:hover { background: var(--surface-head); }

.comps__addr { font-weight: 500; }
.comps__note {
  display: block;
  font-size: 12px;
  color: var(--muted-2);
  margin-top: 2px;
}
.comps__num  { font-family: var(--mono); font-size: 13.5px; }
.comps__sqm  { font-family: var(--mono); font-size: 13.5px; color: var(--accent); }
.comps__date { font-size: 13px; color: var(--muted-2); }

.comps__foot {
  margin: 0;
  padding: 16px clamp(24px, 3.4vw, 32px);
  font-size: 13.5px;
  color: var(--muted-2);
}

/* Indicateurs de marché */

.metrics {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.metric { padding: 26px; }
.metric__label { font-size: 13px; color: var(--muted-2); }

.metric__value {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.metric__value small { font-size: 13px; font-weight: 400; color: var(--muted-2); letter-spacing: 0; }

.metric__serif {
  margin-top: 8px;
  font-family: var(--display);
  font-size: 32px;
  line-height: 1.1;
}

.metric__bar {
  margin-top: 16px;
  height: 8px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
.metric__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transform-origin: left;
}
.is-enter .metric__bar span { animation: grow .9s cubic-bezier(.2, .7, .3, 1) both; }

.metric__segs {
  margin-top: 18px;
  display: flex;
  gap: 6px;
}
.metric__segs span {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: var(--track);
}
.metric__segs span.is-on { background: var(--accent); }

.metric__legend {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted-2);
}

/* Accès obligatoire au rapport */

body.a-modale { overflow: hidden; }

.modale {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modale__voile {
  position: absolute;
  inset: 0;
  background: rgba(14, 15, 16, .55);
  backdrop-filter: blur(4px);
  animation: fade .18s both;
}

.modale__boite {
  position: relative;
  width: min(100%, 440px);
  padding: clamp(24px, 5vw, 34px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(14, 15, 16, .22);
  animation: rise .25s both;
}

.modale__titre {
  margin: 10px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(25px, 5vw, 31px);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.modale__texte {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.modale__form { margin-top: 20px; }
.modale__form .lead__label { display: block; margin-bottom: 6px; color: var(--muted-2); }
.modale__form .lead__input {
  width: 100%;
  height: 50px;
  border-color: var(--line-5);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
}
.modale__form .lead__input::placeholder { color: var(--faint); }
.modale__form .lead__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46, 94, 82, .12);
}

.modale__cta {
  width: 100%;
  margin-top: 18px;
  justify-content: center;
}

/* Aperçu masqué du résultat. Le chiffre existe déjà côté navigateur : le
   montrer chiffres cachés transforme un formulaire en dernière marche. */
.modale__apercu {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  background: var(--surface-warm);
  text-align: center;
}
.modale__apercu-bien {
  display: block;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.modale__apercu-prix {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(22px, 4.6vw, 27px);
  letter-spacing: -.01em;
  color: var(--ink);
}

.modale__preuve {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-2);
  text-align: center;
}

.modale__rassure {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.modale__rassure li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.modale__fine {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-3);
}
.modale__fine a { color: var(--muted-2); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .modale { padding: 12px; align-items: flex-end; }
  .modale__boite { width: 100%; }
}

/* Bloc conseiller (sombre) */

.advisor {
  margin-top: 16px;
  position: relative;
  background: var(--dark);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 40px);
  color: var(--on-dark);
  overflow: hidden;
}
.advisor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0);
  background-size: 24px 24px;
}

.advisor__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  align-items: center;
}

.advisor__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.advisor__text {
  margin: 14px 0 0;
  font-size: 15.5px;
  color: var(--on-dark-3);
  line-height: 1.65;
}

.advisor__box {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 16px;
  padding: 22px;
}

.consent {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--dark-box);
  border: 1px solid var(--dark-edge);
  border-radius: 12px;
  padding: 15px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-dark-2);
  transition: background .16s ease, border-color .16s ease;
}
.consent.is-on { background: var(--dark-box-on); border-color: var(--dark-edge-on); }
.consent small { font-size: inherit; color: var(--on-dark-4); }

.consent__box {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  border: 1.5px solid var(--dark-edge);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.consent__box svg { opacity: 0; }
.consent.is-on .consent__box     { border-color: var(--dark-edge-on); background: var(--dark-fill-on); }
.consent.is-on .consent__box svg { opacity: 1; }

.advisor__cta {
  margin-top: 13px;
  width: 100%;
  height: 52px;
  border-radius: 12px;
  background: var(--dark-cta);
  color: var(--dark-cta-ink);
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s ease, color .16s ease;
}
.advisor__cta.is-on { background: var(--accent); color: #fff; }
.advisor__cta:disabled { opacity: .48; }

.advisor__fine {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--on-dark-4);
  line-height: 1.6;
}
.advisor__fine a { color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 2px; }
.advisor__fine a:hover { color: #fff; }

/* Formulaire de reprise de contact --------------------------------------- */

.lead { margin: 0; }

.lead__row { margin-top: 13px; }

.lead__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--on-dark-3);
  margin-bottom: 6px;
}

.lead__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--dark-edge);
  background: var(--dark-box);
  color: var(--on-dark);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.lead__input::placeholder { color: #6C6D6A; }
.lead__input:focus {
  border-color: var(--dark-edge-on);
  box-shadow: 0 0 0 3px rgba(58, 114, 99, .28);
}
select.lead__input { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #8E8F8B 50%), linear-gradient(135deg, #8E8F8B 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.lead .advisor__cta { margin-top: 16px; }

.lead__cancel {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--on-dark-4);
}
.lead__cancel:hover { color: var(--on-dark-2); }

.lead__error {
  margin: 13px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: #2A1E1A;
  border: 1px solid #6B4630;
  color: #E9C7AE;
  font-size: 13px;
  line-height: 1.55;
}

.lead__done { text-align: left; }

.lead__done-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dark-fill-on);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead__done-title {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-dark);
}

.lead__done-text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-2);
}

/* Effacement des données ------------------------------------------------- */

.erase {
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px dashed var(--line-5);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted-2);
}

.erase__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.erase__link:hover { color: var(--warn); }

.erase--confirm { border-style: solid; border-color: #DCC7B4; background: #FDF7F2; color: var(--ink-2); }

.erase__actions { display: flex; align-items: center; gap: 10px; }

.erase__go {
  padding: 9px 15px;
  border-radius: 9px;
  background: var(--warn);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.erase__go:hover:not(:disabled) { background: #744C2C; }
.erase__go:disabled { background: var(--disabled-bg); color: var(--disabled-fg); }

.erase__cancel { font-size: 13px; color: var(--muted); }
.erase__cancel:hover { color: var(--ink); }

.erase--done {
  border-style: solid;
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-deep);
  justify-content: flex-start;
}

.erase__mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.report__foot {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.report__foot button { font-size: 14.5px; color: var(--muted); }
.report__foot button:hover { color: var(--accent); }
.report__stamp { font-size: 13px; color: var(--muted-2); }

/* --------------------------------------------------------------------------
   Pages éditoriales (confidentialité, mentions légales)
   -------------------------------------------------------------------------- */

.prose { max-width: 760px; }

.prose h2 {
  margin: 44px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  scroll-margin-top: 82px;
}

.prose p,
.prose ul { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.prose p strong,
.prose li strong { color: var(--ink); font-weight: 600; }
.prose ul { padding-left: 22px; }
.prose li { margin-top: 7px; }
.prose li::marker { color: var(--line-6); }

.prose code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface-warm);
  border: 1px solid var(--line-3);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink-2);
}

/* Bloc de commandes — la page de précision invite à refaire la mesure, encore
   faut-il que la commande soit copiable sans se battre avec le retour à la ligne. */
.prose pre.code {
  margin-top: 16px;
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--surface-warm);
  border: 1px solid var(--line-3);
  border-radius: 10px;
}
.prose pre.code code {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  white-space: pre;
  line-height: 1.7;
}

.prose abbr { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

.prose__stamp {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted-2);
}

.prose__back { margin-top: 48px; font-size: 15px; }

.tldr {
  margin-top: 30px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  padding: 24px 26px;
}
.tldr h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent-deep);
}
.tldr ul { margin-top: 12px; }
.tldr li { color: var(--accent-deep); }
.tldr li strong { color: var(--accent-deep); }
.tldr li::marker { color: var(--accent); }

.todo-box {
  margin-top: 28px;
  background: #FDF7F2;
  border: 1px solid #DCC7B4;
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: #6B4630;
}
.todo-box strong { color: #4E3222; }
.todo-box code { background: #F6EAE0; border-color: #DCC7B4; color: #6B4630; }

.table-wrap {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.tbl {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}
.tbl th {
  text-align: left;
  padding: 13px 18px;
  background: var(--surface-head);
  border-bottom: 1px solid var(--line-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.tbl td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-4);
  color: var(--muted);
  line-height: 1.6;
  vertical-align: top;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl td strong { color: var(--ink); font-weight: 600; }

.facts {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.facts li {
  margin: 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-4);
  font-size: 14.5px;
}
.facts li:last-child { border-bottom: none; }
.facts li span { color: var(--muted-2); }
.facts li strong { font-weight: 600; color: var(--ink); }

/* Pied de page ------------------------------------------------------------ */

.ftr {
  border-top: 1px solid var(--line);
  background: var(--surface-warm);
}
.ftr__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 22px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted-2);
}
.ftr__links { display: flex; gap: 20px; flex-wrap: wrap; }
.ftr__links a { color: var(--muted-2); }
.ftr__links a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Surfaces tactiles

   Au doigt, la zone cliquable d'un lien de pied de page valait la hauteur de
   sa ligne, seize pixels : deux liens voisins se touchaient presque, et on en
   ouvrait un pour l'autre. Le critère 2.5.8 du WCAG demande vingt-quatre
   pixels, les recommandations d'Apple et de Google quarante-quatre.

   On agrandit la **zone** sans toucher au texte : la marge négative reprend
   exactement le remplissage ajouté, si bien que la mise en page reste au
   pixel près celle d'avant. Réservé au pointeur grossier — au trackpad, ces
   rectangles élargis n'apporteraient rien et déborderaient les uns sur les
   autres.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .ftr__links { gap: 8px 20px; }
  .nav__cta { min-height: 44px; }

  .ftr__links a,
  .hdr__quit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -13px;
  }

  /* Le logo sert aussi de sortie : il mérite la même surface. */
  .logo { min-height: 44px; align-items: center; }

  /* Retour de page, liste des communes couvertes : de la navigation, pas de
     la prose. */
  .prose__back a,
  .comps__addr a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -13px;
  }
}

/* --------------------------------------------------------------------------
   Impression du rapport
   -------------------------------------------------------------------------- */

@media print {
  .hdr, .advisor, .report__foot, .btn-ghost, .erase { display: none !important; }
  body { background: #fff; }
  .main { padding: 0; max-width: none; }
  .screen { animation: none !important; }
  .card, .comps { break-inside: avoid; box-shadow: none; }
  .gauge__fill, .metric__bar span { animation: none !important; }
  .comps__scroll { overflow: visible; }

  /* Le PDF est le document que le vendeur montrera à un agent ou à un notaire :
     il doit contenir la méthode et les sources, pas seulement le chiffre. Le
     bloc « Comment ce chiffre a été obtenu » est replié à l'écran ; à
     l'impression il s'ouvre systématiquement. */
  .methode[open] > summary,
  .methode > summary { list-style: none; }
  .methode > summary::-webkit-details-marker { display: none; }
  details.methode > *:not(summary) { display: revert !important; }
  details.methode { display: block !important; }

  .risques[open] > *, details.risques > *:not(summary) { display: revert !important; }

  /* Les tableaux longs se coupent proprement d'une page à l'autre. */
  .comps__row { break-inside: avoid; }
  .card__title { break-after: avoid; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
  a[href^="#"]::after, a[href^="/"]::after { content: none; }

  @page { margin: 14mm; }
}

/* --------------------------------------------------------------------------
   Éléments ajoutés par le branchement sur les données réelles
   -------------------------------------------------------------------------- */

/* Suggestions d'adresse : la BAN renvoie un contexte (département, région)
   qui lève l'ambiguïté entre deux rues homonymes. */
.addr__sug-ctx {
  display: block;
  font-size: 12.5px;
  color: var(--muted-3);
  margin-top: 1px;
}

.addr__ok {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--accent);
}
.addr__ok strong { font-weight: 600; }


.risques {
  width: min(100%, 680px);
  margin: 18px auto 0;
  padding: 14px 16px;
  background: var(--surface-sunk);
  border: 1px solid var(--line-3);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--muted);
}
.risques summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-3);
}
.risques ul { margin: 12px 0 0; padding-left: 20px; }
.risques li { margin-bottom: 4px; }
.risques p { margin-top: 12px; font-size: 12.5px; color: var(--muted-3); }

/* Fiabilité : le badge dit ce que vaut le chiffre, il ne le décore pas. */
.badge--moyenne { color: var(--warn); background: #F8F1E8; }
.badge--moyenne .badge__dot { background: var(--warn); }
.badge--faible { color: #8A3B36; background: #F9EDEC; }
.badge--faible .badge__dot { background: #8A3B36; }

/* Jauge : la bande claire est l'intervalle de confiance, le trait fin la
   médiane du secteur, le repère plein le bien estimé. Les bornes sont les
   déciles réels des ventes comparables, pas une échelle arbitraire. */
.gauge__band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: var(--accent-line);
}
.gauge__tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--muted-3);
}
.gauge__fill {
  width: 12px;
  margin-left: -6px;
  box-shadow: 0 0 0 2.5px var(--bg);
}
.gauge__scale span:nth-child(2) { color: var(--ink-3); font-weight: 500; }

/* Méthode et sources : repliées, mais présentes — et dépliées au PDF. */
.methode { margin-top: 16px; padding: 0; }
.methode > summary {
  cursor: pointer;
  padding: 22px clamp(20px, 3vw, 30px);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.methode > summary::-webkit-details-marker { display: none; }
.methode > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.8px solid var(--muted-2);
  border-bottom: 1.8px solid var(--muted-2);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
}
.methode[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.methode > summary h2 { margin: 0; }
.methode > *:not(summary) { padding: 0 clamp(20px, 3vw, 30px); }
.methode > *:last-child { padding-bottom: 24px; }

.methode__etapes {
  margin: 16px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.methode__etapes li { margin-bottom: 6px; padding-left: 4px; }

.methode__soustitre {
  margin: 22px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.methode__sources {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.methode__sources strong { color: var(--ink-3); font-weight: 600; }

.liste {
  margin: 16px 0 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.liste li { margin-bottom: 6px; }
.liste a { color: var(--accent); }

/* --------------------------------------------------------------------------
   Utilitaires

   Ces classes remplacent des attributs `style` en ligne, que la politique de
   sécurité du site interdit (`style-src 'self'`, sans `unsafe-inline`). Les
   valeurs pilotées par les données, elles, sont posées depuis JavaScript via
   le CSSOM, que la CSP ne restreint pas.
   -------------------------------------------------------------------------- */

.lede--etroit      { max-width: 600px; }
.actions--espacees { margin-top: 26px; }
.actions--centrees { justify-content: center; }
.hdr__spacer       { flex: 1; }

/* Aperçu de rapport de la page d'accueil : valeurs illustratives, figées. */
/* État initial de la jauge de la maquette : secteur bien couvert, 320–475 k€
   sur une échelle de 200 à 600 k€. `landing.js` reprend les mêmes valeurs. */
.gauge__fill--demo { left: 30%; width: 38.8%; margin-left: 0; box-shadow: none; }
.metric__bar--42   { width: 42%; }

/* --------------------------------------------------------------------------
   Préférences de mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .spinner::after { animation: turn 1.4s linear infinite !important; }
}

/* --------------------------------------------------------------------------
   Pages « prix de l'immobilier à … »
   -------------------------------------------------------------------------- */

.price__unite {
  font-family: var(--sans);
  font-size: .42em;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0;
}

/* Série semestrielle : un tableau lisible d'abord, une barre ensuite. Sans
   JavaScript, les chiffres restent tous présents. */
.serie {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.serie__ligne {
  display: grid;
  grid-template-columns: 74px 1fr 96px 84px;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
}
.serie__label { font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.serie__barre {
  height: 10px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
.serie__barre span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 99px;
  background: var(--accent);
}
.serie__valeur { font-family: var(--mono); font-size: 12.5px; color: var(--ink); text-align: right; }
.serie__ventes { font-size: 12px; color: var(--muted-3); text-align: right; }

@media (max-width: 620px) {
  .serie__ligne { grid-template-columns: 62px 1fr 82px; }
  .serie__ventes { display: none; }
}

.comps__addr a { color: var(--ink); text-decoration: none; font-weight: 600; }
.comps__addr a:hover { color: var(--accent); text-decoration: underline; }

/* Suggestion parcourue au clavier : elle doit se voir autant qu'au survol,
   sinon les flèches déplacent une sélection invisible. */
.addr__sug.is-actif { background: var(--surface-hover); }
.addr__sug b { font-weight: 700; color: var(--accent); }
.addr__sug-ctx b { font-weight: 600; color: var(--muted); }

/* Précision de la fourchette : présente, mais au second plan. En tête de
   rapport, elle installait un doute que le chiffre ne mérite pas. */
.price__note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-3);
  max-width: 620px;
}

/* --------------------------------------------------------------------------
   Ventes comparables

   Elles ne sont pas un tableau annexe : ce sont la preuve du chiffre, et la
   seule chose que les concurrents ne montrent pas. Elles avaient droit à cinq
   colonnes serrées qui débordaient sur un téléphone ; elles ont maintenant une
   ligne chacune, qui se replie proprement et situe chaque prix au m² dans la
   fourchette du secteur.
   -------------------------------------------------------------------------- */

.ventes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vente {
  padding: 18px clamp(24px, 3.4vw, 32px);
  border-top: 1px solid var(--line-4);
}

.vente__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.vente__adresse {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}
.vente__adresse > span:last-child { min-width: 0; }

.vente__prix {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vente__faits {
  margin: 7px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}
.vente__faits li {
  font-size: 12px;
  color: var(--muted-2);
  background: var(--surface-warm);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}
.vente__quand { color: var(--muted-3) !important; background: transparent !important; padding-left: 2px !important; }

/* Position du prix au m² entre les déciles du secteur : la même échelle que la
   jauge principale, pour que les deux se lisent ensemble. */
.vente__barre {
  position: relative;
  margin-top: 12px;
  height: 4px;
  border-radius: 99px;
  background: var(--track);
}
.vente__point {
  position: absolute;
  top: -3px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

.vente__ppsm {
  margin: 8px 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted-2);
}
.vente__ppsm strong {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.vente__ecart.is-up   { color: var(--accent); }
.vente__ecart.is-down { color: var(--warn); }

.ventes__plus {
  min-height: 44px;
  margin: 8px clamp(24px, 3.4vw, 32px) 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent);
}
.ventes__plus:hover { color: var(--accent-deep); }
.ventes__plus svg { transform: rotate(90deg); }

/* Précision non renseignée : visible, mais sans le poids d'une vraie mesure. */
.factor.is-inconnu .factor__value,
.factor.is-inconnu .factor__delta { color: var(--muted-3); font-style: italic; }

/* Échappatoire « je ne sais pas » : disponible, jamais mise en avant.
   Sélectionnée, elle ne prend pas la couleur d'accent des vraies réponses —
   ce serait affirmer un choix là où l'utilisateur a justement dit qu'il ne
   savait pas. Elle se marque comme retenue, en gris. */
.pill--inconnu {
  color: var(--muted-2);
  border-style: dashed;
}
.pill--inconnu.is-on {
  border-style: solid;
  background: var(--surface-step);
  border-color: var(--line-6);
  color: var(--muted);
  font-weight: 500;
}

.lien-passer {
  font-size: 14px;
  color: var(--muted-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lien-passer:hover { color: var(--accent); }

@media print {
  /* Au PDF, toutes les ventes retenues sont listées : c'est le document que le
     vendeur montrera, il doit porter la preuve complète. */
  .ventes__plus { display: none !important; }
  .vente { break-inside: avoid; padding: 12px clamp(18px, 3vw, 28px); }
  .vente__barre { display: none; }
}

/* --------------------------------------------------------------------------
   Retour, en haut d'écran

   Il vivait sous le formulaire : corriger une réponse de l'étape précédente
   demandait de faire défiler toute la page. Un retour se cherche là où l'on
   regarde en arrivant.
   -------------------------------------------------------------------------- */

.retour {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--muted-2);
}
.retour:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Bouton d'action principal

   Repris tel quel de la page d'accueil : c'est le même geste des deux côtés,
   il n'y avait pas de raison qu'il n'ait pas la même allure. `@keyframes spin`
   est redéfini ici parce que le tunnel ne charge pas landing.css.
   -------------------------------------------------------------------------- */

@keyframes spin { to { transform: translate(-50%, -50%) rotate(1turn); } }

.cta-glow {
  position: relative;
  display: inline-flex;
  isolation: isolate;
  padding: 3px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--accent-hover);
  box-shadow: 0 10px 26px rgba(46, 94, 82, .3);
}
.cta-glow__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 130deg,
    rgba(230,240,232,.8) 168deg, #fff 180deg, rgba(230,240,232,.8) 192deg,
    rgba(255,255,255,0) 232deg, rgba(255,255,255,0) 310deg,
    rgba(205,225,210,.55) 348deg, rgba(255,255,255,.9) 360deg);
  animation: spin 2.6s linear infinite;
  pointer-events: none;
}
.btn--glow {
  position: relative;
  z-index: 1;
  justify-content: center;
  border-radius: 12.5px;
}

.actions--centrees {
  justify-content: center;
  text-align: center;
}
.actions--centrees .hint { width: 100%; text-align: center; }

/* --------------------------------------------------------------------------
   Tunnel sur petit écran

   L'écran des précisions débordait : sept questions, des libellés longs, des
   pastilles dimensionnées pour le bureau. Tout est resserré d'un cran, et le
   bouton principal prend toute la largeur — c'est la seule action de l'écran.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .main { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

  /* La légende centrale de la jauge était écrasée entre les deux bornes. Elle
     occupe maintenant sa propre ligne ; les déciles restent lisibles dessous. */
  .gauge__scale {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 12px;
  }
  .gauge__scale span:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }
  .gauge__scale span:last-child { text-align: right; }

  .vente { padding: 17px 18px; }
  .vente__tete { align-items: flex-start; gap: 10px; }
  .vente__prix { padding-top: 1px; font-size: 14px; }
  .ventes__plus { margin-left: 18px; margin-right: 18px; }

  .advisor__grid { grid-template-columns: minmax(0, 1fr); }

  .factor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 5px;
  }
  .factor__right {
    width: 100%;
    justify-content: space-between;
  }

  .display { font-size: clamp(26px, 7.6vw, 34px); }
  .lede { font-size: 15.5px; }

  .pill--opt {
    padding: 10px 13px;
    font-size: 14px;
  }
  /* Le retrait vertical se resserre, le latéral reste : la question est dans
     une carte bordée, et un `padding: 16px 0` collait le numéro, le libellé et
     la première pastille contre le trait de gauche. */
  .q { padding: 16px; }
  .q__label { font-size: 15px; }
  .q__opts { gap: 7px; }

  .bien__grid { padding: 18px; gap: 16px; }
  .feats { padding: 0 18px 18px; }
  .risques { margin-top: 16px; }

  .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .actions .cta-glow { width: 100%; }
  .actions .btn { width: 100%; justify-content: center; }
  .actions .hint { text-align: center; }
  .lien-passer { align-self: center; }

  /* Les pages communales partageaient la grille large du rapport : elle
     conservait 520 px de largeur et cachait les dernières colonnes sur mobile.
     On garde les indicateurs décisifs à l'écran et retire une colonne secondaire
     par tableau, sans défilement horizontal implicite. */
  .comps--commune .comps__table { min-width: 0; }
  .comps--commune .comps__row {
    padding: 12px 14px;
    gap: 6px;
    font-size: 12px;
  }
  .comps--commune .comps__row--head { font-size: 9.5px; letter-spacing: .03em; }
  .comps--commune .comps__num,
  .comps--commune .comps__sqm,
  .comps--commune .comps__date { font-size: 11px; white-space: nowrap; }

  .comps--pieces .comps__row { grid-template-columns: minmax(82px, 1.25fr) .7fr 1fr .75fr; }
  .comps--pieces .comps__row > :nth-child(5) { display: none; }

  .comps--voies .comps__row { grid-template-columns: minmax(116px, 1.8fr) .85fr .55fr .65fr; }
  .comps--voies .comps__row > :nth-child(2) { display: none; }
}
/* Pages éditoriales : précision et prix par commune ---------------------- */

.measure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.measure-card {
  padding: 20px 0;
  border-top: 2px solid var(--accent);
}
.measure-card > span { display: block; color: var(--muted); font-size: 14px; }
.measure-card > strong { display: block; margin-top: 10px; font-family: var(--display); font-size: 38px; font-weight: 500; color: var(--accent); }
.measure-card p { margin: 13px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.measure-note { padding: 18px 20px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.precision-chart {
  margin: 34px 0 44px;
  padding: 24px 0;
  border-block: 1px solid var(--line);
}
.precision-chart h3 { margin: 0 0 20px; font-size: 18px; }
.precision-chart > div {
  display: grid;
  grid-template-columns: 150px minmax(160px, 1fr) 58px;
  align-items: center;
  gap: 16px;
  margin-top: 13px;
}
.precision-chart span { color: var(--muted); font-size: 14px; }
.precision-chart strong { color: var(--accent); text-align: right; }
.precision-chart progress {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: var(--accent-soft);
}
.precision-chart progress::-webkit-progress-bar { background: var(--accent-soft); border-radius: 99px; }
.precision-chart progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.precision-chart progress::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.precision-chart figcaption { margin-top: 18px; color: var(--muted-2); font-size: 12.5px; }
.facts--compact small { display: block; margin-top: 3px; color: var(--muted-2); font-weight: 400; }
.method-list { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: methode; }
.method-list li { position: relative; padding: 0 0 24px 52px; counter-increment: methode; }
.method-list li::before {
  content: counter(methode);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.method-list strong, .method-list span { display: block; }
.method-list span { margin-top: 5px; color: var(--muted); }
.precision-cta,
.commune-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
  padding: 24px 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.precision-cta h2 { margin: 0; color: inherit; }
.precision-cta p { margin: 6px 0 0; color: var(--muted); }
.precision-cta .btn,
.commune-cta .btn { flex-shrink: 0; }
.commune-cta { margin-block: 26px; }
.commune-cta div > strong, .commune-cta div > span { display: block; }
.commune-cta div > span { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.commune-cta--large { margin-top: 28px; }

.method-details {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.method-details summary { cursor: pointer; font-weight: 650; }
.method-details .liste { margin-bottom: 0; }
.commune-explain { margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--line); }
.commune-explain .card__sub { max-width: 820px; }
.related-communes { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.related-communes h2 { margin: 0; font-size: 20px; }
.related-communes div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.related-communes a { padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }

.commune-search { max-width: 720px; margin: 34px 0 30px; }
.commune-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: center;
  gap: clamp(34px, 6vw, 76px);
  margin-bottom: 34px;
}
.commune-intro .commune-search { margin-bottom: 0; }
.commune-map { margin: 0; }
.commune-map img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.commune-map figcaption {
  margin-top: 9px;
  color: var(--muted-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.commune-search label { display: block; margin-bottom: 9px; font-weight: 650; }
.commune-search__field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(20, 20, 16, .05);
  color: var(--accent);
}
.commune-search__field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(46, 94, 82, .1); }
.commune-search__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); }
.commune-search__count { margin: 9px 0 0; color: var(--muted-2); font-size: 13px; }
.commune-search__results {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(20, 20, 16, .09);
}
.commune-search__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.commune-search__result:last-child { border-bottom: 0; }
.commune-search__result:hover,
.commune-search__result[aria-selected="true"] { background: var(--accent-soft); }
.commune-search__result strong,
.commune-search__result small { display: block; }
.commune-search__result strong { font-size: 15px; }
.commune-search__result small { margin-top: 3px; color: var(--muted-2); font-size: 12px; }
.commune-search__action { flex-shrink: 0; color: var(--accent); font-size: 13px; font-weight: 650; }
.commune-search__empty { margin: 0; padding: 20px 16px; color: var(--muted); }
.comps__row[hidden] { display: none; }
.commune-empty { padding: 36px 24px; text-align: center; }
.commune-empty strong, .commune-empty span { display: block; }
.commune-empty span { margin: 8px 0 20px; color: var(--muted); }

.commune-live__loading { display: grid; gap: 12px; margin-top: 34px; max-width: 760px; }
.commune-live__loading span { height: 18px; border-radius: 4px; background: var(--line); }
.commune-live__loading span:nth-child(1) { width: 82%; }
.commune-live__loading span:nth-child(2) { width: 64%; }
.commune-live__loading span:nth-child(3) { width: 72%; }
.commune-live__types { display: grid; gap: 34px; margin-top: 36px; }
.commune-live__type { padding-top: 24px; border-top: 2px solid var(--accent); }
.commune-live__type-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.commune-live__type-head span,
.commune-live__type-head strong { display: block; }
.commune-live__type-head span { color: var(--muted); font-size: 14px; }
.commune-live__type-head strong { margin-top: 5px; color: var(--accent); font-family: var(--display); font-size: clamp(30px, 5vw, 46px); font-weight: 500; }
.commune-live__type-head p { max-width: 360px; margin: 0; color: var(--muted); line-height: 1.55; }
.commune-live__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 22px 0 0; background: var(--line); }
.commune-live__facts div { padding: 15px 16px; background: var(--surface); }
.commune-live__facts dt { color: var(--muted-2); font-size: 12px; }
.commune-live__facts dd { margin: 6px 0 0; font-weight: 650; }
.commune-live__pieces { margin-top: 24px; }
.commune-live__pieces h3 { margin: 0 0 12px; font-size: 17px; }
.commune-live__piece-list { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.commune-live__piece-list span { min-width: 120px; }
.commune-live__piece-list strong,
.commune-live__piece-list b,
.commune-live__piece-list small { display: block; }
.commune-live__piece-list b { margin-top: 4px; }
.commune-live__piece-list small { margin-top: 2px; color: var(--muted-2); }
.commune-live__source { margin-top: 30px; color: var(--muted-2); font-size: 12px; }
.commune-live__notice { max-width: 680px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.commune-live__notice p { color: var(--muted); line-height: 1.6; }
.commune-live__notice .text-link { margin-left: 18px; }

@media (max-width: 760px) {
  .measure-grid { grid-template-columns: 1fr; }
  .precision-chart > div { grid-template-columns: 1fr 52px; gap: 7px 12px; }
  .precision-chart progress { grid-column: 1 / -1; grid-row: 2; }
  .precision-cta,
  .commune-cta { align-items: stretch; flex-direction: column; }
  .precision-cta .btn,
  .commune-cta .btn { width: 100%; text-align: center; }

  .commune-intro { grid-template-columns: 1fr; gap: 26px; }
  .commune-map { width: 100%; max-width: 280px; margin-inline: auto; }

  .commune-index .comps__scroll { overflow: visible; }
  .commune-index .comps__table { min-width: 0; }
  .commune-index .comps__row--head { display: none; }
  .commune-index .commune-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    padding: 22px 24px;
  }
  .commune-index .commune-row > span { min-width: 0; }
  .commune-index .commune-row .comps__addr { grid-column: 1 / -1; font-size: 16px; }
  .commune-index .commune-row > span:not(.comps__addr)::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted-2);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .commune-index .commune-row > span:nth-child(2)::before { content: "Prix / m²"; }
  .commune-index .commune-row > span:nth-child(3)::before { content: "Ventes"; }
  .commune-index .commune-row > span:nth-child(4)::before { content: "Évolution"; }
  .commune-index .commune-row > span:nth-child(5)::before { content: "Surface médiane"; }

  .commune-search__result { align-items: flex-start; }
  .commune-search__action { padding-top: 2px; }
  .commune-live__type-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .commune-live__facts { grid-template-columns: 1fr; }
  .commune-live__notice .text-link { display: block; margin: 18px 0 0; }
}

/* iOS agrandit automatiquement la page quand un champ a une taille de texte
   inférieure à 16 px. On garde le zoom manuel disponible et on agit seulement
   sur la taille des contrôles, sans bloquer l'accessibilité du viewport. */
@media (max-width: 760px) {
  input,
  select,
  textarea { font-size: 16px !important; }

  .hdr__quit { display: none; }
}