/* Demande de devis page only.
   Builds on the service-detail template (service-detail.css) with page-scoped modifiers.
   Spacing, title sizes, buttons, process geometry, check badges and FAQ toggles come from style.css. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Auxiliary form field, never rendered (see app/src/PublicForm.php). */
.form-aux { display: none !important; }

/* Hero */
.quote-hero { height: 527px; }
.quote-hero .service-hero-media { width: 70%; }
.quote-hero .service-hero-media img { object-position: 62% center; }
.quote-hero .service-hero-media::after { background: linear-gradient(90deg, #002333 0%, rgb(0 35 51 / 85%) 14%, rgb(0 31 47 / 30%) 38%, rgb(0 31 47 / 5%) 65%, rgb(0 31 47 / 15%)); }
.quote-hero .service-hero-inner { padding-top: 46px; }
.quote-hero .service-breadcrumb { margin-bottom: 30px; }
.quote-hero .service-hero-text { font-size: 20px; line-height: 1.6; max-width: 650px; margin-top: 22px; }
.quote-benefits { list-style: none; margin: 32px 0 0; padding: 0; display: flex; gap: 42px; }
.quote-benefits li { display: flex; gap: 16px; align-items: center; }
.quote-benefits .icon { width: 38px; height: 38px; color: var(--cyan); stroke-width: 1.9; }
.quote-benefits span { display: grid; gap: 5px; color: #d9e6ec; font-size: 15px; }
.quote-benefits strong { color: white; font-size: 16.5px; font-weight: 700; }
/* Bottom-anchored statement tab; right edge on the content edge like every hero statement. */
.quote-hero-statement { bottom: -2px; padding: 26px 26px 20px; border-color: transparent; background: rgb(0 23 36 / 55%); font-size: 18.5px; line-height: 1.85; border-radius: 10px 10px 0 0; }
.quote-hero-statement::before { width: 40px; height: 3px; top: 0; }

/* Main quote area: light panel rises into the hero, form card + sidebar */
.quote-main { position: relative; background: var(--surface); padding-bottom: var(--space-section); }
.quote-main::before { content: ''; position: absolute; left: 0; top: -60px; height: 60px; width: calc(max(var(--gutter), (100% - var(--container-max)) / 2) + 792px); background: var(--surface); border-top-right-radius: 14px; }
.quote-layout.service-detail-inner { padding-inline: 0; }
.quote-layout { position: relative; display: grid; grid-template-columns: 782px minmax(0, 1fr); gap: 35px; align-items: start; }
.quote-form-card { margin-top: -32px; background: white; border: 1px solid #e6eef3; border-radius: 12px; box-shadow: 0 10px 30px rgb(14 48 70 / 7%); padding: 34px 44px 32px; }
.quote-form-card h2 { font-size: 40px; letter-spacing: -.03em; }
.quote-form-intro { font-size: 17.5px; line-height: 1.6; max-width: 600px; margin-top: 14px; }
#quote-form { scroll-margin-top: 24px; }
.quote-required-note { color: var(--muted); font-size: 14px; margin-top: 10px; }
.quote-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: 22px; }
.quote-field { display: grid; gap: 9px; min-width: 0; }
.is-full { grid-column: 1 / -1; }
.quote-field label { color: var(--text); font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.quote-field input, .quote-field select, .quote-field textarea, .quote-phone { width: 100%; height: 48px; border: 1px solid #d5e1e8; border-radius: 6px; background: white; color: var(--text); font: inherit; font-size: 15px; padding: 0 15px; }
.quote-field ::placeholder { color: #5e7585; opacity: 1; }
.quote-field select { appearance: none; color: #5e7585; padding-right: 40px; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a9bd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 15px center / 17px no-repeat; }
.quote-field textarea { height: 118px; padding: 13px 15px; resize: vertical; line-height: 1.5; }
.quote-field input:focus, .quote-field select:focus, .quote-field textarea:focus, .quote-phone:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--teal-ink); }
.quote-phone { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.quote-phone input { height: 100%; border: 0; border-radius: 0; outline: 0; }
.quote-phone:focus-within input:focus { outline: 0; }
.quote-phone-prefix { display: flex; align-items: center; gap: 9px; padding: 0 13px 0 16px; background: #eef3f6; color: var(--muted); font-size: 14.5px; line-height: 1; border-right: 1px solid #d5e1e8; flex-shrink: 0; }
.quote-flag { width: 26px; height: 18px; border-radius: 2px; background: #c1272d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M13 4.2 14.4 8.6H19l-3.7 2.7 1.4 4.3L13 13l-3.7 2.6 1.4-4.3L7 8.6h4.6Z' fill='none' stroke='%23006233' stroke-width='1.1'/%3E%3C/svg%3E") center / 100% no-repeat; }
.quote-caret { width: 0; height: 0; border-inline: 4px solid transparent; border-top: 5px solid #3f5566; }
.quote-upload { display: flex; align-items: center; gap: 22px; min-height: 72px; padding: 12px 22px; border: 1px solid #d5e1e8; border-radius: 6px; background: #fbfdfe; }
.quote-upload .icon { width: 34px; height: 34px; color: var(--navy); stroke-width: 2; transform: rotate(-10deg); }
.quote-upload span { display: grid; gap: 4px; color: var(--muted); font-size: 14px; }
.quote-upload strong { color: var(--text); font-size: 16px; font-weight: 550; }
/* Checkbox centred on the first text line; the label wraps without orphaning the "*". */
.quote-consent { display: flex; align-items: flex-start; gap: 12px; }
.quote-consent input { width: 18px; height: 18px; margin: calc((1.4em - 18px) / 2) 0 0; accent-color: var(--teal); flex-shrink: 0; font-size: 13px; }
.quote-consent label { color: #3b5466; font-size: 13px; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
.quote-submit { width: 100%; min-height: var(--btn-lg); font-size: 17px; border: 0; cursor: pointer; font-family: inherit; margin-top: 4px; }
.quote-whatsapp[hidden] { display: none; }
/* Optional next step after a saved request: secondary (outline) button, below its explanation. */
.quote-whatsapp .button { width: 100%; color: var(--teal-ink); background: white; }
.quote-whatsapp p { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.quote-question-card .quote-whatsapp-contact { margin-top: 12px; }

/* Interactive states added by Assets/js/main.js — the default appearance above is unchanged. */
.quote-upload { position: relative; cursor: pointer; transition: border-color .2s, background-color .2s; }
.quote-upload:hover { border-color: var(--teal); background: #f5fbfc; }
.quote-upload:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--teal-ink); }
.quote-upload .quote-upload-files { display: block; color: var(--teal-ink); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.quote-field select.has-value { color: var(--text); }
.quote-field.is-invalid input, .quote-field.is-invalid select, .quote-field.is-invalid textarea, .quote-field.is-invalid .quote-phone,
.quote-upload.is-invalid { border-color: #d64545; }
.quote-field.is-invalid .quote-phone input { border: 0; }
.quote-consent.is-invalid input { outline: 2px solid #d64545; outline-offset: 1px; }
.field-error { margin: 0; color: #c0392b; font-size: 13.5px; font-weight: 550; line-height: 1.35; }

/* International phone field (country picker: intl-tel-input, set up by main.js; the static +212 box
   above stays as the no-JavaScript fallback). Same box, border and focus ring as the other fields;
   the country button takes the place of the +212 prefix. */
.quote-phone.is-intl { display: block; overflow: visible; }
.quote-phone.is-intl .iti { display: block; width: 100%; height: 100%; z-index: 3; }
.quote-phone.is-intl .iti__country-container { padding: 0; }
.quote-phone.is-intl .iti__selected-country { border-radius: 5px 0 0 5px; background: #eef3f6; border-right: 1px solid #d5e1e8; color: var(--muted); font-size: 14.5px; cursor: pointer; }
.quote-phone.is-intl .iti__selected-country-primary { padding: 0 8px 0 14px; }
.quote-phone.is-intl .iti__selected-dial-code { margin: 0 13px 0 0; color: var(--text); }
.quote-phone.is-intl .iti__arrow { border-color: #3f5566; }
.quote-phone.is-intl .iti__selected-country:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.quote-phone.is-intl input.iti__tel-input { height: 100%; border-radius: 6px; }
.quote-field .iti__country-selector { color: var(--text); font-size: 15px; box-shadow: 0 10px 24px rgb(0 35 50 / 16%); }
.quote-field .iti__search-input { height: auto; border: 0; border-radius: 3px 3px 0 0; padding: 10px 35px 10px 37px; font-size: 15px; }
.quote-field .iti__search-input:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Flag sprite (244 flags: 39 KB, 89 KB at 2x) only once the visitor uses the phone field (main.js then adds
   .phone-flags to <html>), not with every page view. The default Moroccan flag in the button is the inline SVG
   of the no-JS box. Not scoped to .quote-phone: the library also lays out a detached copy of the button. */
html:not(.phone-flags) .iti__flag { background-image: none; }
.iti__selected-country .iti__flag.iti__ma { background: #c1272d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M13 4.2 14.4 8.6H19l-3.7 2.7 1.4 4.3L13 13l-3.7 2.6 1.4-4.3L7 8.6h4.6Z' fill='none' stroke='%23006233' stroke-width='1.1'/%3E%3C/svg%3E") center / 100% no-repeat; }
.iti__country.iti__highlight { background-color: #e3f1f4; }
.iti__dial-code { color: var(--muted); }
@media (min-width: 1101px) and (max-width: 1350px), (min-width: 641px) and (max-width: 860px) {
  .quote-phone.is-intl .iti__selected-country-primary { padding: 0 6px 0 10px; }
  .quote-phone.is-intl .iti__selected-dial-code { margin-right: 9px; }
}
.field-error-row { margin-top: -10px; }
.form-status { margin: 0; padding: 12px 16px; border-radius: 6px; font-size: 14.5px; line-height: 1.45; border: 1px solid transparent; }
.form-status[data-state="pending"] { background: var(--surface); border-color: var(--border); color: var(--muted); }
.form-status[data-state="success"] { background: #e8f7f8; border-color: #a9e0e6; color: var(--navy); }
.form-status[data-state="error"] { background: #fdf0ef; border-color: #f2c4bf; color: #a8322a; }
.form-status a { color: inherit; font-weight: 650; text-decoration: underline; }
.form-status[hidden] { display: none; }
.quote-success-line { display: block; }
.quote-success-line + .quote-success-line { margin-top: 6px; }
/* Keyboard focus on the checkbox and submit button (same ring as links site-wide). */
.quote-consent input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.quote-submit:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.quote-form.is-sending .quote-submit { opacity: .7; cursor: progress; }

/* Sidebar */
.quote-sidebar { display: grid; gap: 30px; padding-top: 35px; }
.quote-visual { position: relative; margin: 0; height: 221px; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.quote-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: brightness(.82) contrast(1.1); }
.quote-visual .service-media-keywords { right: 18px; top: 18px; bottom: 18px; display: flex; align-items: center; padding: 18px 24px; font-size: 16.5px; line-height: 1.75; }
.quote-contact-card { background: #f7fbfd; border: 1px solid #e3edf2; border-radius: 10px; padding: 34px 34px 28px; }
.quote-contact-card h2 { font-size: 24px; letter-spacing: -.02em; }
.quote-contact-card > p { font-size: 17px; margin-top: 12px; }
.quote-contact-card ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.quote-contact-card li { display: flex; align-items: center; gap: 24px; color: var(--text); font-size: 18.5px; font-weight: 500; }
.quote-contact-card .icon { width: 30px; height: 30px; color: var(--cyan); stroke-width: 2; }
.quote-question-card { background: #e2f4f8; border: 1px solid #d3edf2; border-radius: 10px; padding: 34px 34px 32px; }
.quote-question-head { display: flex; align-items: center; gap: 24px; }
.quote-info-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), #06849a); color: white; font: 700 26px/1 Georgia, 'Times New Roman', serif; }
.quote-question-card h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.02em; }
.quote-question-card > p { font-size: 17px; line-height: 1.6; margin: 16px 0 22px; }
.quote-question-card .button { color: var(--teal-ink); background: white; font-size: 17px; }
.quote-question-card .button { max-width: 100%; white-space: normal; }

/* Process: shared .method/.steps with filled navy icon badges and a connector through them.
   The connector runs from the first to the last column centre, at badge mid-height. */
.quote-process { border-top: 1px solid #e6eef3; background: var(--surface); }
.quote-process .steps { --step-icon: 70px; --step-icon-gap: 14px; --step-num: 38px; position: relative; }
.quote-process .steps::before { content: ''; position: absolute; left: calc((100% - 3 * var(--step-gap)) / 8); right: calc((100% - 3 * var(--step-gap)) / 8); top: calc(var(--step-icon) / 2); border-top: 1px solid #d3e3ea; }
.quote-step-badge { display: grid; place-items: center; border-radius: 50%; background: var(--navy-dark); position: relative; }
.quote-step-badge .icon { width: 32px; height: 32px; color: white; stroke-width: 2; }
.quote-process .steps h3 span { font-size: 17px; background: var(--navy-dark); }

/* Why us (dark brake-disc panel) + FAQ: reuses .service-advantages-faq */
.quote-why-faq { grid-template-columns: 55% 45%; }
.quote-why { --defer-bg: url('../images/quote/quote-why-us.webp'); min-height: 456px; background: linear-gradient(90deg, rgb(0 25 39 / 96%) 0%, rgb(0 25 39 / 85%) 50%, rgb(0 25 39 / 30%) 85%), var(--bg-img, none) 80% center / cover; background-color: var(--navy-dark); }
.quote-why h2 { margin-bottom: 0; }
.quote-why-intro { color: #e1eaf0; font-size: 17.5px; line-height: 1.55; margin: 12px 0 16px; }
.quote-why .check-list { font-size: 18.5px; gap: 10px; }
.quote-why .check-list li { --check: 30px; }

/* Road CTA */
.quote-cta { border-top: 0; }

.quote-page .footer-column a[aria-current] { color: var(--cyan); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1350px) and (min-width: 1101px) {
  .quote-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .quote-main::before { width: calc(var(--gutter) + 60%); }
  .quote-benefits { gap: 26px; }
  .quote-contact-card li { font-size: 16.5px; gap: 18px; }
}
@media (max-width: 1100px) {
  .quote-hero { height: auto; min-height: 560px; padding-bottom: 70px; }
  .quote-hero .service-hero-media { width: 80%; }
  .quote-hero .service-hero-media::after { background: linear-gradient(90deg, #002333 0%, rgb(0 35 51 / 92%) 25%, rgb(0 31 47 / 55%) 55%, rgb(0 31 47 / 20%)); }
  .quote-hero h1 { font-size: 48px; }
  .quote-hero .service-hero-text { font-size: 17px; max-width: 540px; }
  .quote-benefits { flex-wrap: wrap; gap: 18px 28px; max-width: 600px; }
  .quote-hero-statement { font-size: 14px; padding: 16px 18px 12px; }
  .quote-main::before { display: none; }
  .quote-main { padding-top: var(--space-section); }
  .quote-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .quote-form-card { margin-top: 0; padding: 30px 28px; }
  .quote-sidebar { padding-top: 0; grid-template-columns: 1fr 1fr; }
  .quote-visual { grid-column: 1 / -1; height: 240px; }
  .quote-contact-card, .quote-question-card { padding: 26px 24px; }
  .quote-contact-card li { font-size: 16px; gap: 16px; }
  .quote-question-card h2 br { display: none; }
  .quote-process .steps { --step-icon: 58px; --step-num: 32px; }
  .quote-process .steps h3 span { font-size: 15px; }
  .quote-why-faq { grid-template-columns: 1fr 1fr; }
  .quote-why h2 br, .quote-why-intro br { display: none; }
  .quote-why-intro { font-size: 15.5px; }
  .quote-cta p br { display: none; }
}
/* Two-column form in a narrow card (small desktops, narrow tablets): a more compact +212 prefix
   leaves the phone number field enough room (Quote and Contact forms). */
@media (min-width: 1101px) and (max-width: 1350px), (min-width: 641px) and (max-width: 860px) {
  .quote-phone-prefix { gap: 5px; padding: 0 9px 0 11px; font-size: 14px; }
  .quote-phone input { padding-inline: 12px; }
}
/* Narrow tablets: keep the benefit items clear of the bottom-right statement tab. */
@media (max-width: 860px) and (min-width: 641px) {
  .quote-benefits { max-width: calc(100% - 200px); }
}
@media (max-width: 760px) {
  .quote-why-faq { grid-template-columns: 1fr; }
  .quote-sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .quote-hero { min-height: 0; padding-bottom: 190px; }
  /* Full-width photo under full-width text: the standard mobile hero overlay (service-detail.css), not the tablet one. */
  .quote-hero .service-hero-media::after { background: linear-gradient(90deg, rgb(0 27 43 / 94%), rgb(0 27 43 / 62%)); }
  .quote-hero .service-hero-media { width: 100%; }
  .quote-hero .service-hero-media img { object-position: 78% center; }
  .quote-hero h1 { font-size: clamp(32px, 9.5vw, 44px); }
  .quote-hero .service-hero-text { font-size: 16px; }
  .quote-benefits { flex-direction: column; gap: 16px; margin-top: 26px; }
  .quote-benefits .icon { width: 32px; height: 32px; }
  .quote-hero-statement { font-size: 12.5px; bottom: 0; }
  .quote-form-card { padding: 26px 18px; }
  .quote-form-card h2 { font-size: 28px; }
  .quote-form-intro { font-size: 15.5px; }
  .quote-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .quote-upload { gap: 14px; padding: 12px 14px; }
  .quote-upload strong { font-size: 14.5px; }
  .quote-upload span { font-size: 12.5px; }
  .quote-submit { font-size: 15px; min-height: 54px; }
  .quote-visual { height: 220px; }
  .quote-visual .service-media-keywords { font-size: 12.5px; padding: 12px 16px; right: 12px; top: 12px; bottom: 12px; }
  .quote-contact-card h2, .quote-question-card h2 { font-size: 21px; }
  .quote-contact-card li { font-size: 15.5px; }
  .quote-process .steps::before { display: none; }
  .quote-cta .eyebrow { letter-spacing: .08em; }
}