/**
 * Responsive overrides for /obtenir-un-devis/.
 *
 * The compiled global stylesheet (global-DKFZaTqA.css) defines the
 * desktop layout with `.is-devis .X` selectors (specificity 0,2,0) but
 * the responsive breakpoint rules with `.X` selectors (specificity 0,1,0),
 * so the mobile rules lose and the two-column layout never collapses.
 *
 * All rules below re-assert the responsive behavior at matching or
 * higher specificity. This file loads after the global bundle so ties
 * also resolve in our favor.
 */

/* ── Main 2-col → 1-col at <=1000px ─────────────────────── */
@media (max-width: 1000px) {
  body.is-devis .odv-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.is-devis .odv-side {
    position: static;
    top: auto;
  }
}

/* ── Hero + main padding on small phones ────────────────── */
@media (max-width: 720px) {
  body.is-devis .odv-hero {
    padding: 120px 22px 56px;
  }
  body.is-devis .odv-hero-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1.08;
  }
  body.is-devis .odv-hero-lead {
    font-size: 15px;
    line-height: 1.55;
  }
  body.is-devis .odv-main {
    padding: 48px 20px 64px;
    margin-top: -32px;
  }
  /* Tighten cards & form wrapper on phones */
  body.is-devis .odv-side-card {
    padding: 22px 20px;
    border-radius: 14px;
  }
  body.is-devis .qw-root,
  body.is-devis .blt-devis-form .form-wrap {
    padding: 24px 18px 22px;
    border-radius: 14px;
  }
  body.is-devis .odv-proof {
    grid-template-columns: repeat(3, 1fr);
    padding: 14px 8px;
  }
  body.is-devis .odv-proof-stat strong {
    font-size: 19px;
  }
  body.is-devis .odv-quote {
    padding: 20px 18px;
    border-radius: 14px;
  }
}

/* ── Form internals at <=640px ──────────────────────────── */
@media (max-width: 640px) {
  /* Two-col rows inside the quote wizard */
  body.is-devis .qw-row {
    grid-template-columns: 1fr;
  }
  body.is-devis .qw-chip-grid {
    grid-template-columns: 1fr;
  }
  body.is-devis .qw-review > div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
  /* Same for the legacy "blt-devis-form" variant */
  body.is-devis .blt-devis-form .field-grid.two-col {
    grid-template-columns: 1fr;
  }
  body.is-devis .blt-devis-form .service-grid {
    grid-template-columns: 1fr;
  }
  /* Stepper: numbers-only on small screens so the pills don't overflow */
  body.is-devis .blt-devis-form .stepper {
    gap: 8px;
    margin-bottom: 28px;
    flex-wrap: nowrap;
  }
  body.is-devis .blt-devis-form .step-pill {
    padding: 7px 10px;
    font-size: 12px;
    min-width: 0;
  }
  body.is-devis .blt-devis-form .step-divider {
    max-width: 16px;
  }
  /* Nav buttons: wrap to stack on narrow widths so they don't overlap */
  body.is-devis .qw-nav,
  body.is-devis .blt-devis-form .form-nav {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
  }
  body.is-devis .blt-devis-form .btn {
    padding: 12px 18px;
    font-size: 14px;
  }
  /* Ensure all inputs stay inside their rounded container on iOS */
  body.is-devis .qw-input,
  body.is-devis .qw-select,
  body.is-devis .qw-textarea,
  body.is-devis .blt-devis-form .field-input,
  body.is-devis .blt-devis-form .field-select,
  body.is-devis .blt-devis-form .field-textarea {
    font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
  }
}

/* ── Success screen grid at <=560px ─────────────────────── */
@media (max-width: 560px) {
  body.is-devis .qw-success-meta {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  body.is-devis .qw-success {
    padding: 44px 22px;
  }
}

/* ── Bottom-bar breathing room ──────────────────────────── */
/* The floating mobile bottom bar (see mobile-nav.css) is ~84px tall.
   Without extra room the form's "Envoyer" button sits under the bar
   and users can't reach it comfortably. Add space at the tail of the
   main section so the last CTA always clears the bar. */
@media (max-width: 900px) {
  body.is-devis .odv-main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 24px);
  }
}

/* ── Safety: kill any horizontal overflow on <=900px ────── */
@media (max-width: 900px) {
  body.is-devis {
    overflow-x: hidden;
  }
  body.is-devis .odv-main-grid,
  body.is-devis .odv-side,
  body.is-devis .form-wrap,
  body.is-devis .qw2-scope {
    max-width: 100%;
    min-width: 0;
  }
}