/* Quote questionnaire (/sites-web/devis/) — builds on the tokens in styles.css.
   A glass sheet floating over the same aurora as the homepage. */

.site-header { background: rgb(8 8 10 / 60%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom-color: var(--line); }
.dv { position: relative; z-index: 2; padding-block: 72px 96px; }
.dv-wrap { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: 24px; }

/* Language toggle */
.dv-lang { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 3%); }
.dv-lang-btn { min-width: 46px; min-height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-family: var(--mono); font-size: 12px; transition: background .2s, color .2s; }
.dv-lang-btn:hover { color: var(--fg); }
.dv-lang-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* Intro */
.dv-intro h1 { margin-bottom: 18px; font-family: var(--display); font-size: clamp(44px, 7vw, 88px); font-weight: 300; line-height: .96; letter-spacing: -.035em; font-stretch: 85%; font-variation-settings: "opsz" 96; }
.dv-lead { max-width: 56ch; margin-bottom: 44px; font-size: 18px; color: var(--soft); }
.dv-noscript { padding: 16px 20px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); }
.dv-noscript a, .dv-alt a { text-decoration: underline; text-underline-offset: 3px; }

/* Progress */
.dv-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.dv-progress li { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.dv-progress li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--line-2); transition: background .4s var(--ease); }
.dv-progress li.is-done::before { background: var(--peach); }
.dv-progress li.is-current::before { background: var(--grad); }
.dv-progress li.is-current { color: var(--fg); }
.dv-progress span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Step labels are buttons: earlier steps jump back, later ones are inert. */
.dv-jump { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.dv-jump:disabled { cursor: default; }
.dv-progress li.is-done .dv-jump:hover span { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.dv-jump:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; border-radius: 4px; }
.dv-progress li { position: relative; }
.dv-progress li .dv-jump::after { content: ""; position: absolute; inset: -10px 0 -6px; }
.dv-restart-row { display: flex; justify-content: flex-end; margin: -8px 0 16px; }
.dv-restart { padding: 4px 0; border: 0; background: none; color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dv-restart:hover { color: var(--fg); }
.dv-restart:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; border-radius: 4px; }
.dv-restart[hidden] { display: none; }

/* The sheet */
.dv-form, .dv-done { position: relative; padding: 40px; border: 1px solid var(--line-2); border-radius: 28px; background: rgb(18 18 23 / 75%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 80%); }

/* Steps */
.dv-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.dv-step[hidden] { display: none; }
.dv-step-head { display: flex; align-items: baseline; gap: 14px; width: 100%; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.dv-step-num { font-family: var(--serif); font-size: 40px; font-style: italic; line-height: 1; color: var(--peach); }
.dv-step-title { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
.dv-step-note { margin: -14px 0 24px; font-size: 14.5px; color: var(--dim); }

.dv-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.dv-field[hidden] { display: none; }
.dv-label { font-size: 15px; font-weight: 500; color: var(--fg); }
.dv-req { margin-inline-start: 2px; color: var(--coral); }
.dv-hint { margin-top: -4px; font-size: 13.5px; color: var(--dim); }

.dv-input { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgb(255 255 255 / 4%); color: var(--fg); font: inherit; font-size: 16px; transition: border-color .2s, background .2s, box-shadow .2s; }
textarea.dv-input { min-height: 110px; resize: vertical; line-height: 1.5; }
.dv-input:hover { border-color: rgb(255 255 255 / 30%); }
.dv-input:focus { outline: none; border-color: var(--peach); background: rgb(255 255 255 / 6%); box-shadow: 0 0 0 4px rgb(255 179 107 / 16%); }
.dv-input[aria-invalid="true"] { border-color: #ff6b6b; }

/* Choice tiles (checkbox / radio) */
.dv-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dv-choices.is-wide { grid-template-columns: 1fr; }
.dv-choices.is-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dv-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgb(255 255 255 / 3%); cursor: pointer; font-size: 15px; line-height: 1.35; transition: border-color .2s, background .2s; }
.dv-choice:hover { border-color: rgb(255 255 255 / 30%); background: var(--surface-2); }
.dv-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dv-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.5px solid rgb(255 255 255 / 40%); border-radius: 6px; transition: background .15s, border-color .15s; }
.dv-choice input[type="radio"] + .dv-mark { border-radius: 50%; }
.dv-mark svg { width: 12px; height: 12px; opacity: 0; color: #160704; }
.dv-choice:has(input:checked) { border-color: var(--peach); background: rgb(255 179 107 / 10%); }
.dv-choice input:checked + .dv-mark { background: var(--peach); border-color: var(--peach); }
.dv-choice input:checked + .dv-mark svg { opacity: 1; }
.dv-choice input:focus-visible + .dv-mark { outline: 2px solid var(--lime); outline-offset: 3px; }
.dv-choices.is-scale .dv-choice { justify-content: center; font-family: var(--mono); }

.dv-consent { margin-top: 8px; }
.dv-consent .dv-choice { font-size: 14px; color: var(--soft); }

.dv-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dv-error { margin: 0 0 20px; padding: 12px 16px; border: 1px solid rgb(255 107 107 / 40%); border-radius: 12px; background: rgb(255 107 107 / 10%); color: #ffb4a8; font-size: 14.5px; }

/* Navigation */
.dv-nav { display: flex; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.dv-count { flex: 1; font-family: var(--mono); font-size: 12px; text-align: center; color: var(--dim); }
.dv-nav .btn[hidden] { display: none; }
.dv-nav .btn:disabled { opacity: .6; cursor: progress; transform: none; }

/* Done */
.dv-done:focus { outline: none; }
.dv-done:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }
.dv-done h2 { margin-bottom: 16px; font-family: var(--serif); font-size: clamp(32px, 4.4vw, 48px); font-style: italic; font-weight: 400; line-height: 1.1; }
.dv-done p { max-width: 56ch; margin-bottom: 28px; color: var(--soft); }

.dv-alt { margin-top: 36px; font-size: 14.5px; text-align: center; color: var(--dim); }
.dv-alt a { color: var(--soft); }
.dv-alt a:hover { color: var(--fg); }

@media (max-width: 640px) {
  .dv { padding-block: 40px 64px; }
  .dv-wrap { padding-inline: 16px; }
  .dv-form, .dv-done { padding: 24px 18px; border-radius: 22px; }
  .dv-choices { grid-template-columns: 1fr; }
  .dv-choices.is-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dv-progress span { display: none; }
  /* Labels are hidden here, so the step numbers become the tap targets. */
  .dv-jump { min-height: 24px; text-align: center; }
  .dv-jump::before { content: attr(data-num); }
  .dv-count { display: none; }
  .dv-nav .btn { flex: 1; padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-progress li::before, .dv-input, .dv-choice, .dv-mark { transition: none; }
}

/* Light page (the main element carries .light): a white sheet on warm paper. */
.dv.light { min-height: calc(100vh - var(--header-height)); }
.light .dv-lead { color: var(--soft); }
.light .dv-form, .light .dv-done { background: #fff; border-color: var(--line); box-shadow: 0 2px 4px rgb(29 23 18 / 5%), 0 40px 80px -40px rgb(29 23 18 / 30%); -webkit-backdrop-filter: none; backdrop-filter: none; }
.light .dv-input { background: var(--paper); border-color: var(--line-2); }
.light .dv-input:hover { border-color: rgb(29 23 18 / 32%); }
.light .dv-input:focus { background: #fff; border-color: #b4501d; box-shadow: 0 0 0 4px rgb(224 70 42 / 14%); }
.light .dv-choice { background: #fff; border-color: var(--line-2); }
.light .dv-choice:hover { background: var(--paper); border-color: rgb(29 23 18 / 32%); }
.light .dv-mark { border-color: rgb(29 23 18 / 40%); }
.light .dv-mark svg { color: #fff; }
.light .dv-choice:has(input:checked) { border-color: #cc3d22; background: #fff4f0; }
.light .dv-choice input:checked + .dv-mark { background: #cc3d22; border-color: #cc3d22; }
.light .dv-choice input:focus-visible + .dv-mark { outline-color: #1d1712; }
.light .dv-progress li::before { background: var(--line-2); }
.light .dv-progress li.is-done::before { background: #d0702a; }
.light .dv-error { background: #fdecea; border-color: #f2b8b0; color: #8c1d18; }
.light .dv-req { color: #cc3d22; }