/* ============================================================
   REDREALTY — main.css
   All colours flow through :root variables.
   Swap the block below to retheme the entire site.
   ============================================================ */

:root {
  --color-primary:       #9f1d22;
  --color-primary-dark:  #7a1519;
  --color-primary-light: #fdf0f0;
  --color-primary-panel: #7a1519;
  --color-accent:        #e8384f;
  --color-accent-dark:   #c92d41;
  --color-text:          #1a1a1a;
  --color-text-soft:     #6b7280;
  --color-border:        #999999;
  --color-bg:            #f9fafb;
  --color-white:         #ffffff;

  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.12);

  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-step:   300ms ease;

  --navbar-h: 82px;
  --bottombar-h: 72px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--navbar-h);
  background: var(--color-white);
  border-bottom: 0px solid var(--color-border);
  display: flex;
  box-shadow: 0px 0px 10px 0 #ccc;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}
.navbar__logo {
  height: 50px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  /* 44px, not the visually-implied 42px — this is also the link's own
     touch-target height (the <a> wraps the <img> tightly, no extra
     padding), so it doubles as the design.md §4 44px-minimum fix for the
     logo link. */
  .navbar__logo { height: 44px; }
}
.navbar__links { display: flex; align-items: center; gap: 28px; }
/* This link used to be hardcoded red+bold on the 3 Immobilier-neuf pages
   only (correct there, wrong once the navbar was unified across all 5
   pages — index.php/demande.php showed it in this neutral color instead).
   A later current-page-active state (.navbar__link--active) tried to keep
   the red+bold treatment for those 3 pages while defaulting to neutral
   elsewhere, but that just reintroduced the same page-dependent color
   difference from the other direction — reported as still wrong, twice.
   Removed: this is a plain nav link, same style on every page, always.
   A soft rounded background pill was tried next (referencing Yakeey's
   navbar) but measured 52px tall against .navbar__cta's 44px (the pill
   wrapper's own padding stacked on top of this link's already-44px
   min-height) and had no border where the CTA has one — two similarly-
   shaped pills that didn't actually match, reported as looking out of
   place. Reverted: no background container, just this link's own
   padding/radius (still real — the §4 44px touch-target width, and a
   self-contained rounded hover highlight, see :hover below), so its
   height is simply its own 44px, automatically matching the CTA. */
.navbar__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  font-weight: 600; font-size: .875rem; color: var(--color-text);
  white-space: nowrap; text-decoration: none;
  transition: background var(--transition-normal), color var(--transition-normal);
}
/* Hover is a background shift, not a text-color change — restrained
   feedback for a link with no resting-state shape of its own, rather
   than the flat-page-link color-swap convention used elsewhere on this
   site. The underline suppression below is unrelated pre-existing
   history: it leaks in from the generic `a:hover { text-decoration:
   underline; }` reset (main.css's base rules, meant for body-content
   links), which nothing here had overridden — same reasoning .navbar__cta
   and .navbar__logo's link already follow. */
.navbar__link:hover { text-decoration: none;
  border-color: var(--color-primary);
  color: var(--color-primary); 

}
/* §4 Navbar "known gap": logo + .navbar__link + .navbar__cta had no
   collapse behavior and overflowed horizontally below ~363px (confirmed
   live via headless-browser scrollWidth checks, not assumed). Fix chosen:
   drop the secondary "Immobilier neuf" text link and tighten the navbar's
   own padding — the logo (already a link to home) and the CTA (the actual
   primary action) are enough on their own below the breakpoint.
   white-space:nowrap above stops the link/CTA text from wrapping onto a
   second line instead of respecting this breakpoint — without it, text
   silently wraps in a narrow band *above* the collapse width instead of
   overflowing or (correctly) triggering the collapse, which is exactly
   what happened here: measured live, .navbar__cta wraps to 2 lines between
   ~500-539px specifically for the longest CTA text on this site ("Je veux
   aller plus vite", demande.php) — 480px wasn't wide enough once every
   page shares one navbar and has to account for that worst case, not just
   the shorter "Vendre mon bien". 640px is picked with real margin above
   that empirically-found 539px danger line, not just past it. */
@media (max-width: 640px) {
  .navbar { padding: 0 16px; }
  .navbar__link { display: none; }
}
.navbar__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--color-text);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap; text-decoration: none;
  transition: border-color var(--transition-normal), color var(--transition-normal);
}
/* Same generic a:hover underline leak as .navbar__link (see there) — this
   is the "Vendre mon bien" variant of the CTA, an <a> tag on 4 of the 5
   pages, so it was exposed to the exact same reset rule. */
.navbar__cta:hover {
  text-decoration: none;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.navbar__cta svg { flex-shrink: 0; }

/* Below 640px the link is gone, but logo + CTA alone can still overflow at
   the narrowest phones — measured live: at 320px the logo alone renders
   ~168px wide (this is a wide horizontal wordmark, not a compact icon) and
   the CTA's longest text ("Je veux aller plus vite", nowrap) needs more
   room than what's left. Shrinking the logo below 44px would fail the §4
   touch-target minimum on its own, so .navbar__logo-link gets the same
   invisible-padded-hit-area treatment used elsewhere on this site for
   compact icon buttons (e.g. .vite-modal__close) instead of just accepting
   a sub-44px logo tap target. */
.navbar__logo-link { position: relative; }
@media (max-width: 420px) {
  .navbar { padding: 0 12px; }
  .navbar__logo { height: 34px; }
  .navbar__logo-link::before { content: ''; position: absolute; inset: -5px; }
  .navbar__cta { font-size: .78rem; padding: 7px 12px; gap: 5px; }
  .navbar__cta svg { width: 14px; height: 14px; }
}

/* ── Two-column wrapper (vendre page) ───────────────────── */
.vendre-layout {
  display: grid;
  grid-template-columns: 1fr 35%;
  height: calc(100vh - var(--navbar-h));
}

/* Left panel */
.vendre-left {
  padding: 40px 40px calc(var(--bottombar-h) + 40px);
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vendre-left > * {
  flex-shrink: 0;
  width: 100%;
}

/* Centering wrapper — constrains form content to 520px and centres it */
.form-col {
  max-width: 520px;
  width: 100%;
}

/* Step headings sit inside .form-col so they align with inputs */
.step__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.step__subtitle {
  font-size: .9375rem;
  color: var(--color-text-soft);
  margin-bottom: 32px;
  line-height: 1.5;
}

/* Progress bar — same width cap, full width on smaller containers */
.progress-bar {
  max-width: 680px;
  width: 100%;
}

/* Right panel */
.vendre-right {
  position: sticky;
  top: var(--navbar-h);
  height: calc(100vh - var(--navbar-h));
  background: var(--color-primary-panel);
  overflow: hidden;
}

/* Map placeholder (step 1) */
.panel-map {
  width: 100%;
  height: 100%;
  background: #7a1519;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.4);
  font-size: .875rem;
  letter-spacing: .05em;
}
.panel-map::after {
  content: '🗺';
  font-size: 3rem;
  opacity: .3;
}

/* Decorative shapes (steps 2-4) */
.panel-shapes {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.panel-shapes::before,
.panel-shapes::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.panel-shapes::before {
  width: 320px; height: 320px;
  top: -60px; right: -60px;
  background: rgba(255,255,255,.07);
}
.panel-shapes::after {
  width: 220px; height: 220px;
  bottom: 40px; right: 20px;
  background: rgba(255,255,255,.05);
}
.panel-shapes .shape-extra {
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  top: 50%; left: -40px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.04);
}

/* ── Progress bar ───────────────────────────────────────── */
.progress-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin-bottom: 48px;
}

/* Real track element — injected by JS, sits between first and last dot centres.
   For N dots each in a flex:1 column, the first dot centre is at 100%/(2N) from
   the left, and the track spans 100% - 2×(100%/2N) = 100% × (N-1)/N of the bar. */
.progress-bar__track {
  position: absolute;
  top: 13px;                        /* vertically centred on the 28px dots */
  left:  calc(100% / 10);           /* centre of dot 1  (N=5 → 10%) */
  right: calc(100% / 10);           /* centre of dot 5  (same from right) */
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

/* Fill is a child of .progress-bar__track so width:X% is relative to the track */
.progress-bar__fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  transition: width 400ms ease;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

.progress-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-normal), border-color var(--transition-normal);
  font-size: .7rem;
  color: var(--color-white);
  font-weight: 700;
}
.progress-dot--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.progress-dot--done {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
/* No ::after here — JS sets textContent = '✓' directly, one checkmark only */

.progress-label {
  font-size: .72rem;
  color: var(--color-text-soft);
  text-align: center;
  line-height: 1.3;
  max-width: 90px;
}
.progress-label--active { color: var(--color-primary); font-weight: 600; }

/* ── Step container & transitions ───────────────────────── */
.steps-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.step {
  display: none;
  animation: none;
  width: 100%;
}
.step.step--active {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step.slide-in-right {
  display: flex; flex-direction: column; align-items: center;
  animation: slideInRight var(--transition-step) forwards;
}
.step.slide-in-left {
  display: flex; flex-direction: column; align-items: center;
  animation: slideInLeft var(--transition-step) forwards;
}
.step.slide-out-left {
  display: flex; flex-direction: column; align-items: center;
  animation: slideOutLeft var(--transition-step) forwards;
  position: absolute; top: 0; left: 0; width: 100%;
}
.step.slide-out-right {
  display: flex; flex-direction: column; align-items: center;
  animation: slideOutRight var(--transition-step) forwards;
  position: absolute; top: 0; left: 0; width: 100%;
}

/* ── Substeps ────────────────────────────────────────────── */
/* Each .step holds multiple .substep panels.
   Only .substep--active is shown. Transitions use the same
   slide keyframes as steps. */
.substep {
  display: none;
  width: 100%;
  animation: none;
}
.substep.substep--active {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.substep.slide-in-right {
  display: flex; flex-direction: column; align-items: center;
  animation: slideInRight var(--transition-step) forwards;
}
.substep.slide-in-left {
  display: flex; flex-direction: column; align-items: center;
  animation: slideInLeft var(--transition-step) forwards;
}
.substep.slide-out-left {
  display: flex; flex-direction: column; align-items: center;
  animation: slideOutLeft var(--transition-step) forwards;
  position: absolute; top: 0; left: 0; width: 100%;
}
.substep.slide-out-right {
  display: flex; flex-direction: column; align-items: center;
  animation: slideOutRight var(--transition-step) forwards;
  position: absolute; top: 0; left: 0; width: 100%;
}

/* ── Upload zone ─────────────────────────────────────────── */
.upload-zone {
  width: 100%;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--transition-normal), background var(--transition-normal);
}
.upload-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.upload-zone__icon { font-size: 2.5rem; margin-bottom: 12px; }
.upload-zone__text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.upload-zone__sub {
  font-size: .8125rem;
  color: var(--color-text-soft);
}

/* ── Confirmation screen ─────────────────────────────────── */
.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 0;
  width: 100%;
}
.confirmation__icon {
  margin-bottom: 20px;
}
.confirmation__check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 2rem;
  font-weight: 800;
  margin: 0 auto;
}
.confirmation__title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-text);
  margin-bottom: 16px;
}
.confirmation__text {
  font-size: 1rem;
  color: var(--color-text-soft);
  line-height: 1.6;
  max-width: 400px;
  margin-bottom: 20px;
}
.confirmation__ref {
  display: inline-block;
  background: var(--color-primary-light);
  border: 1px solid rgba(159,29,34,.2);
  border-radius: var(--radius-full);
  padding: 8px 20px;
  font-size: .875rem;
  color: var(--color-primary-dark);
}
.confirmation > .btn { margin-top: 32px; }

/* right panel variant for confirmation */
.panel-shapes--confirm::before { background: rgba(255,255,255,.1); }
.panel-shapes--confirm::after  { background: rgba(255,255,255,.07); }

@keyframes slideInRight {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideOutLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-60px); opacity: 0; }
}
@keyframes slideOutRight {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(60px); opacity: 0; }
}

/* ── Radio cards (liste) ────────────────────────────────── */

.radio-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition-normal),
              transform var(--transition-normal),
              box-shadow var(--transition-normal);
  user-select: none;
}
.radio-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #c5d5d2;
}
.radio-card--selected {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-light);
}
.radio-card input[type="radio"] { display: none; }
.radio-card__label {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text);
}
.radio-card--selected .radio-card__label { color: var(--color-primary); }

.radio-circle {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition-normal);
}
.radio-card--selected .radio-circle {
  border-color: var(--color-primary);
}
.radio-circle__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform var(--transition-normal);
}
.radio-card--selected .radio-circle__dot { transform: scale(1); }

/* ── Floating label inputs ──────────────────────────────── */
.field {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
}
.field input,
.field select {
  width: 100%;
  height: 56px;
  padding: 20px 16px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: .9375rem;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-normal);
  appearance: none;
}
/* Do NOT set background on select — it bleeds into the native dropdown popup */
.field input:focus,
.field select:focus { border-color: var(--color-primary); }
.field label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9375rem;
  color: var(--color-text-soft);
  pointer-events: none;
  transition: top var(--transition-normal), font-size var(--transition-normal), color var(--transition-normal);
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field select:focus ~ label,
.field--has-value label {
  top: 10px;
  font-size: .72rem;
  color: var(--color-primary);
  transform: none;
}
.field input::placeholder { color: transparent; }

/* suffix (m², DH) */
.field--suffix input { padding-right: 52px; }
.field__suffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .875rem;
  color: var(--color-text-soft);
  pointer-events: none;
}

/* select custom arrow */
.field--select::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-soft);
  pointer-events: none;
}
.field--select select { padding-right: 44px; cursor: pointer; }

/* ── Stepper ─────────────────────────────────────────────── */
.stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  margin-bottom: 10px;
  width: 100%;
}
.stepper-row__label {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text);
}
.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stepper__btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--color-text);
  transition: border-color var(--transition-normal), color var(--transition-normal), background var(--transition-normal);
  line-height: 1;
}
.stepper__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.stepper__btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.stepper__value {
  font-size: 1rem;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
  color: var(--color-text);
}

/* ── Checkbox toggle cards ───────────────────────────────── */
.checkbox-cards { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.radio-cards    { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.checkbox-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition-normal),
              transform var(--transition-normal),
              box-shadow var(--transition-normal);
  user-select: none;
  width: 100%;
}
.checkbox-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #c5d5d2;
}
.checkbox-card--selected {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-light);
}
/* no hidden inputs in checkbox-cards anymore — state managed purely by JS */
.checkbox-card__label {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text);
}
.checkbox-card--selected .checkbox-card__label { color: var(--color-primary); }

.checkbox-box {
  width: 22px; height: 22px;
  border-radius: 4px;
  border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}
.checkbox-card--selected .checkbox-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.checkbox-box__check {
  color: white;
  font-size: .7rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.checkbox-card--selected .checkbox-box__check { opacity: 1; }

/* ── Prix input ─────────────────────────────────────────── */
.prix-wrapper {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
}
.prix-wrapper input {
  width: 100%;
  height: 56px;
  padding: 8px 52px 8px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-normal);
}
.prix-wrapper input:focus { border-color: var(--color-primary); }
.prix-wrapper label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9375rem;
  color: var(--color-text-soft);
  pointer-events: none;
  transition: top var(--transition-normal), font-size var(--transition-normal), color var(--transition-normal);
}
.prix-wrapper input:focus ~ label,
.prix-wrapper input:not(:placeholder-shown) ~ label {
  top: 10px;
  font-size: .72rem;
  color: var(--color-primary);
  transform: none;
}
.prix-wrapper input::placeholder { color: transparent; }
.prix-suffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text-soft);
  pointer-events: none;
}

/* ── Phone input ─────────────────────────────────────────── */
.phone-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
}
.phone-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.phone-col--code   { flex: 0 0 90px; }
.phone-col--number { flex: 1; }
.phone-col__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.phone-col input {
  height: 44px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 12px;
  font-size: .9375rem;
  font-family: inherit;
  color: var(--color-text);
  width: 100%;
  transition: border-color var(--transition-normal);
}
.phone-col input::placeholder { color: var(--color-text-soft); }
.phone-col input:focus { outline: none; border-color: var(--color-primary); }
.phone-col--code input { text-align: center; }
.phone-row--error .phone-col input { border-color: var(--color-error, #e74c3c); }

/* ── CGU checkbox ────────────────────────────────────────── */
.cgu-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 28px;
  width: 100%;
}
.cgu-row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.cgu-row label {
  font-size: .875rem;
  color: var(--color-text-soft);
  cursor: pointer;
  line-height: 1.5;
}
.cgu-row a { font-weight: 500; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-size: .9375rem;
  font-weight: 600;
  border: none;
  transition: background var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-white);
  width: 100%;
}
.btn-accent:hover { background: var(--color-accent-dark); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-soft);
  border: none;
  padding: 14px 8px;
}
.btn-ghost:hover { color: var(--color-text); background: transparent; box-shadow: none; transform: none; }

/* ── Bottom bar (vendre page) ───────────────────────────── */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--bottombar-h);
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
}
.bottom-bar__progress-mini {
  position: absolute;
  bottom: var(--bottombar-h);
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-border);
}
.bottom-bar__progress-mini-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 400ms ease;
  width: 0%;
}

/* ── Section labels ──────────────────────────────────────── */
.section-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 12px;
  margin-top: 28px;
}
.section-label:first-child { margin-top: 0; }

/* ── Step 4 final card ───────────────────────────────────── */
.final-promo {
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 28px;
  border: 1px solid rgba(159,29,34,.15);
  width: 100%;
}
.final-promo__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}
.final-promo__text {
  font-size: .875rem;
  color: var(--color-primary);
  line-height: 1.5;
}

.login-link {
  text-align: center;
  font-size: .875rem;
  color: var(--color-text-soft);
  margin-top: 16px;
}
.login-link a { font-weight: 600; }

/* ── Index page ─────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100vh - var(--navbar-h));
  overflow: hidden;
  /* background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-white) 60%); */
}
.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 64px;
  max-width: 580px;
}
.hero__image {
  height: 100%;
  overflow: hidden;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__eyebrow {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}
.hero__title {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 20px;
}
.hero__title em {
  font-style: normal;
  color: var(--color-primary);
}
.hero__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-soft);
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 460px;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  text-decoration: none;
  transition: background var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
}
.hero__cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

/* site footer */
.site-footer {
  background: var(--color-primary);
  color: rgba(255,255,255,.75);
  padding: 20px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  flex-shrink: 0;
}

.step__hint {
  font-size: .875rem;
  color: var(--color-text-soft);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ── Address search ──────────────────────────────────────── */
.address-search {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.address-search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 56px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.address-search__field:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(159,29,34,.1);
}
.address-search__icon {
  flex-shrink: 0;
  color: var(--color-text-soft);
}
.address-search__input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  font-size: .9375rem;
  color: var(--color-text);
  background: transparent;
}
.address-search__input::placeholder { color: var(--color-text-soft); }
.address-search__clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  color: var(--color-text-soft);
  padding: 4px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.address-search__clear:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Suggestions dropdown */
.address-search__suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  z-index: 200;
  display: none;
  overflow: hidden;
  max-height: 420px;
  overflow-y: auto;
}
.address-search__suggestions--open { display: block; }

.address-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--color-border);
}
.address-suggestion:last-child { border-bottom: none; }
.address-suggestion:hover,
.address-suggestion--active {
  background: var(--color-primary-light);
}
.address-suggestion__icon {
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: .55;
}
.address-suggestion__texts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.address-suggestion__main {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.address-suggestion__detail {
  font-size: .8rem;
  color: var(--color-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Confirmed address chip */
.address-confirmed {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-primary-light);
  border: 1px solid rgba(159,29,34,.2);
  border-radius: var(--radius-md);
  font-size: .8125rem;
  color: var(--color-primary-dark);
  margin-bottom: 16px;
  line-height: 1.4;
}
.address-confirmed svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primary); }
.address-confirmed > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.address-coords {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  letter-spacing: .03em;
}

/* Mobile map (shown only when right panel is hidden) */
.map-mobile {
  display: none;
  width: 100%;
  height: 240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  border: 1.5px solid var(--color-border);
}

/* ── Map pin tooltip ─────────────────────────────────────── */
.map-pin-tooltip {
  position: relative;
  background: rgba(20,20,20,.82);
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 5px;
  white-space: normal;
  max-width: 200px;
  text-align: center;
  margin-bottom: 8px;
  pointer-events: none;
  line-height: 1.4;
  transition: opacity 200ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.map-pin-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(20,20,20,.82);
}
.map-pin-tooltip--hidden,
.map-crosshair--dragging .map-pin-tooltip { opacity: 0; }


/* ── Leaflet crosshair (fixed centre pin) ───────────────── */
.map-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  /* translate so pin-tip sits exactly at centre */
  transform: translate(-50%, calc(-100% - 4px));
  z-index: 1000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* NO transition on the container — avoids snap on class toggle */
}

/* Lift wrapper animates up/down — separate from the pin's own transform */
.map-crosshair__lift {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(0);
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
}
.map-crosshair--dragging .map-crosshair__lift {
  transform: translateY(-8px);
}

/* The diamond pin shape — rotate is set here and never touched again */
.map-crosshair__ring {
  width: 32px; height: 32px;
  border-radius: 50% 50% 50% 0;
  background: var(--color-primary);
  border: 3px solid var(--color-white);
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  transform: rotate(-45deg);   /* fixed — never overridden */
}

/* White dot inside the diamond */
.map-crosshair__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-white);
  position: absolute;
  top: 12px; left: 12px;
  pointer-events: none;
}

/* Shadow below the pin */
.map-crosshair__shadow {
  width: 12px; height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  margin-top: 3px;
  filter: blur(2px);
  transform: scaleX(1);
  transition: transform 200ms cubic-bezier(.4,0,.2,1),
              opacity   200ms cubic-bezier(.4,0,.2,1);
}
.map-crosshair--dragging .map-crosshair__shadow {
  transform: scaleX(1.5);
  opacity: .15;
}

/* ── Extra map control buttons (satellite + fullscreen) ──── */
/* These sit in a leaflet-bar below the zoom control.
   .leaflet-bar a already supplies width:26px, height:26px,
   border, background, hover — we just add flex centering. */
.leaflet-bar .map-ctrl-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #444 !important;
  text-decoration: none !important;
}
.leaflet-bar .map-ctrl-btn:hover {
  color: var(--color-primary) !important;
  background: #f4f4f4 !important;
}
.leaflet-bar .map-ctrl-btn--active {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.leaflet-bar .map-ctrl-btn--active:hover {
  background: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

/* Override Leaflet attribution style to fit our design */
.leaflet-control-attribution {
  font-size: .65rem !important;
  background: rgba(255,255,255,.75) !important;
}

/* Grab cursor on map — pan affordance */
.leaflet-container { cursor: grab !important; }
.leaflet-container.leaflet-drag-target { cursor: grabbing !important; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .vendre-right { display: none; }
  .vendre-layout { grid-template-columns: 1fr; }
  .vendre-left { padding: 24px 24px calc(var(--bottombar-h) + 24px); }
  .bottom-bar { padding: 0 24px; }
  /* Show map inline on mobile */
  .map-mobile { display: block; }
}

@media (max-width: 768px) {
  /* .navbar padding used to be set here too (0 20px) — removed: it silently
     fought the dedicated navbar breakpoint rules below (same selector,
     later-in-source wins regardless of the max-width value, so this was
     overriding a supposedly-narrower 640px rule even at 320px). Navbar
     padding is now owned exclusively by those rules, not scattered across
     this unrelated hero/footer block. */
  .hero { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - var(--navbar-h)); }
  .hero__inner { padding: 48px 24px; }
  .hero__title { font-size: 2rem; }
  .hero__image { display: none; }
  .site-footer { padding: 24px; flex-direction: column; gap: 8px; text-align: center; }
}

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

/* ── Input error states ──────────────────────────────────── */
.field--error input,
.field--error select {
  border-color: var(--color-accent) !important;
}
.field--error label { color: var(--color-accent) !important; }

.prix-wrapper--error input { border-color: var(--color-accent) !important; }

.address-search__field--error {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(232,56,79,.1) !important;
}

.stepper-row--error { border-color: var(--color-accent) !important; }

.phone-field--error { border-color: var(--color-accent) !important; }

.radio-cards--error .radio-card:not(.radio-card--selected) {
  border-color: rgba(232,56,79,.45) !important;
  background: rgba(232,56,79,.03);
}

.checkbox-cards--error .checkbox-card:not(.checkbox-card--selected) {
  border-color: rgba(232,56,79,.45) !important;
  background: rgba(232,56,79,.03);
}

.cgu-row--error label { color: var(--color-accent); }

/* ── Button loading spinner ──────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

.btn-loading {
  opacity: .82;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 650ms linear infinite;
  margin-left: 10px;
  vertical-align: middle;
}

/* ── Vendre error bar ────────────────────────────────────── */
.vendre-error-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  padding: 7px 22px;
  border-radius: var(--radius-full);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* ── File upload previews ────────────────────────────────── */
.file-previews {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  width: 100%;
}
.file-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: .875rem;
}
.file-preview--loading { opacity: .6; }
.file-preview--doc     { align-items: flex-start; }
.file-preview__icon    { font-size: 1.2rem; flex-shrink: 0; }
.file-preview__thumb {
  width: 52px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-border);
}
.file-preview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.file-preview__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}
.file-preview__spinner {
  margin-left: auto;
  display: inline-block;
  animation: spin 1s linear infinite;
  font-size: 1rem;
  color: var(--color-primary);
}
.file-preview__remove {
  background: none;
  border: none;
  padding: 3px 6px;
  font-size: .75rem;
  color: var(--color-text-soft);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}
.file-preview__remove:hover { background: var(--color-bg); color: var(--color-accent); }
.file-preview__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.file-preview__type-select {
  width: 100%;
  padding: 5px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
  font-family: inherit;
}
.file-preview__type-select:focus { border-color: var(--color-primary); }

.upload-zone--drag {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.upload-error {
  margin-top: 8px;
  font-size: .8125rem;
  color: var(--color-accent);
  padding: 6px 12px;
  background: rgba(232,56,79,.06);
  border: 1px solid rgba(232,56,79,.2);
  border-radius: var(--radius-sm);
}

/* ── Document rows (per-type upload) ────────────────────── */
.doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  margin-bottom: 8px;
  transition: border-color var(--transition-fast);
}
.doc-row--done {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.doc-row__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-row__label svg { flex-shrink: 0; color: var(--color-text-soft); }
.doc-row--done .doc-row__label svg { color: var(--color-primary); }
.doc-row__zone {
  flex-shrink: 0;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: .8rem;
  color: var(--color-text-soft);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  cursor: default;
}
.doc-row__zone:hover,
.doc-row__zone--drag {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.doc-row__browse {
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.doc-row__file {
  align-items: center;
  gap: 8px;
}
.doc-row__filename {
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Photo thumbnail grid ────────────────────────────────── */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.photo-thumb {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-thumb__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition-fast);
}
.photo-thumb__remove:hover { background: rgba(220,38,38,.8); }
.photo-thumb--loading {
  border: 1.5px dashed var(--color-border);
  background: var(--color-bg);
}

/* ── Auth notices ────────────────────────────────────────── */
.auth-error {
  font-size: .875rem;
  color: var(--color-accent);
  padding: 8px 12px;
  background: rgba(232,56,79,.06);
  border: 1px solid rgba(232,56,79,.2);
  border-radius: var(--radius-sm);
  margin-top: 8px;
}
.auth-notice {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  margin-bottom: 16px;
  line-height: 1.5;
}
.auth-notice--info {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 1px solid rgba(159,29,34,.2);
}

/* ── Auth panel switch button ─────────────────────────────── */
.btn-switch-auth {
  display: inline-block;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: .875rem;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition-normal);
}
.btn-switch-auth:hover { opacity: .75; }

/* ── Final promo (account step) ──────────────────────────── */
.final-promo {
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 24px;
}
.final-promo__title {
  font-weight: 600;
  color: var(--color-primary-dark);
  font-size: .95rem;
}
.final-promo__text {
  font-size: .82rem;
  color: var(--color-text-soft);
  margin-top: 4px;
}

/* ── "Vite" modal overlay ────────────────────────────────── */
.vite-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 900;
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.vite-overlay.is-open { opacity: 1; pointer-events: all; }

.vite-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -47%) scale(.97);
  width: min(520px, 94vw);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
  z-index: 901;
  box-shadow: 0 24px 64px rgba(0,0,0,.16);
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  max-height: 90vh;
  overflow-y: auto;
}
.vite-modal.is-open {
  opacity: 1; pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.vite-modal__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; gap: 16px;
}
.vite-modal__title {
  font-size: 1.2rem; font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.vite-modal__sub {
  font-size: .875rem; color: var(--color-text-soft); margin-top: 4px;
}
.vite-modal__close {
  position: relative;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .95rem; color: var(--color-text-soft);
  transition: background var(--transition-normal), color var(--transition-normal);
}
.vite-modal__close:hover { background: var(--color-surface); color: var(--color-text); }
/* design.md §4: 44px touch target without growing the visible 32px circle
   — an invisible padded hit area (a common pattern for compact icon
   buttons) rather than resizing the button itself. inset is relative to
   the parent's *padding* box, not its border box, so the 1px border has
   to be added back in: (44 - (32 - 2*1border)) / 2 = 7px. Confirmed by
   directly hit-testing document.elementFromPoint() at the 44px edge, not
   just trusting the arithmetic. */
.vite-modal__close::before {
  content: '';
  position: absolute;
  inset: -7px;
}

.vite-modal__two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 420px) {
  .vite-modal__two-col { grid-template-columns: 1fr; }
}

/* Vite-modal field spacing — replaces ad hoc inline margin-top values with
   the site's spacing scale (4/8/12/16/20/24/32/48px). One outlier (a 6px
   inline value on #vite-ref) is rounded to the nearest step, 8px. */
#vite-form > .field + .field,
#vite-form > .field + .prix-wrapper,
#vite-form > .prix-wrapper + .vite-modal__two-col,
#vite-form > .vite-modal__two-col + .field {
  margin-top: 16px;
}
#vite-error { margin-top: 12px; }
#vite-form button[type="submit"] {
  width: 100%;
  margin-top: 20px;
  padding: 14px 0;
  font-size: 1rem;
}
#vite-success { text-align: center; padding: 32px 0 16px; }
.vite-success__icon { line-height: 1; }
#vite-success h3 { margin-top: 16px; font-size: 1.25rem; font-weight: 700; }
#vite-success p { margin-top: 8px; }
#vite-close-success { margin-top: 24px; }

/* ── Index fullscreen layout (PC only) ───────────────────── */
@media (min-width: 769px) {
  body.layout-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }
  body.layout-fullscreen .hero {
    flex: 1;
    min-height: 0;
    height: auto;
  }
}

/* ── Demande page background ─────────────────────────────── */
body.page-demande {
  /* background: linear-gradient(135deg, var(--color-white) 0%, var(--color-white) 60%); */
  overflow: hidden;
}