/* Fenaison · page Devis (/devis)
   Le formulaire du brief et, à côté, une estimation qui se recalcule à chaque
   saisie (le prix glisse vers sa nouvelle valeur). Démonstration : rien
   n’est envoyé ni stocké. */

:root { --brique: #A0281C; --bord: #7A8982; }

/* ---------- Introduction ---------- */
.d-intro { padding-top: clamp(40px, 6vw, 88px); }
.d-intro-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; }
.d-intro-in .titre-page { grid-column: 1 / 7; font-size: clamp(40px, 4.45vw, 64px); }
.d-intro-corps { grid-column: 7 / 13; padding-bottom: 6px; }
.d-tel { margin-top: 14px; font-size: 16px; color: var(--encre-douce); }
.d-tel a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--regain); font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  font-variant-numeric: proportional-nums lining-nums; transition: text-decoration-color .25s var(--ease);
}
.d-tel a:hover { text-decoration-color: currentColor; }

/* ---------- Formulaire ---------- */
.d-zone { padding-top: 64px; }
.d-form {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 30px;
  align-items: start; background: var(--pre); border-radius: 32px;
  padding: 48px clamp(28px, 4vw, 56px) 52px;
}
.d-form > * { grid-column: 1 / 8; }
.d-form > .d-estim { grid-column: 8 / 13; grid-row: 1 / span 9; align-self: stretch; }
.d-estim-carte { position: sticky; top: calc(var(--hdr) + 24px); margin-left: clamp(0px, 2vw, 32px); }

.d-champ { margin: 0; padding: 0; border: 0; min-width: 0; }
.d-label { display: block; padding: 0; margin-bottom: 10px; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--encre); }
.d-input {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 13px 16px;
  border: 1.5px solid var(--bord); border-radius: 16px; background: var(--porcelaine);
  font: inherit; font-size: 16.5px; line-height: 1.4; color: var(--encre);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease);
}
.d-input::placeholder { color: #5E6E67; opacity: 1; }
.d-input:hover { border-color: var(--encre-douce); }
.d-input:focus { border-color: var(--regain); }
.d-input:focus, .d-input:focus-within { outline: 3px solid var(--encre); outline-offset: 2px; }
.d-input[aria-invalid="true"] { border-color: var(--brique); }
.d-input:disabled { background: var(--lin); color: var(--encre-douce); border-color: #A9B4AE; }
textarea.d-input { min-height: 128px; resize: vertical; }
input[type="date"].d-input { width: auto; min-width: 220px; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.d-nombre { max-width: 220px; }
.d-nombre::-webkit-outer-spin-button, .d-nombre::-webkit-inner-spin-button { opacity: .6; }

.d-select { position: relative; }
.d-select::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: rotate(45deg); pointer-events: none;
}
.d-select select { padding-right: 48px; cursor: pointer; }

.d-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.d-pill, .d-case { position: relative; }
.d-pill input, .d-case input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.d-pill span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--porcelaine); box-shadow: inset 0 0 0 1.5px var(--bord);
  font-size: 16px; font-weight: 560; line-height: 1.2;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.d-pill:hover span { box-shadow: inset 0 0 0 1.5px var(--encre-douce); }
.d-pill input:checked + span { background: var(--regain); color: #fff; box-shadow: inset 0 0 0 1.5px var(--regain); }
.d-pill input:focus-visible + span { outline: 3px solid var(--encre); outline-offset: 2px; }
.d-type[aria-invalid="true"] .d-pill span { box-shadow: inset 0 0 0 1.5px var(--brique); }

.d-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.d-case { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; font-weight: 520; cursor: pointer; }
.d-case-boite {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--porcelaine); box-shadow: inset 0 0 0 1.5px var(--bord); color: #fff;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.d-case-boite .ico { width: 18px; height: 18px; opacity: 0; transition: opacity .2s var(--ease); }
.d-case input:checked + .d-case-boite { background: var(--regain); box-shadow: inset 0 0 0 1.5px var(--regain); }
.d-case input:checked + .d-case-boite .ico { opacity: 1; }
.d-case input:focus-visible + .d-case-boite { outline: 3px solid var(--encre); outline-offset: 2px; }

.d-aide { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--encre-douce); max-width: 60ch; }
.d-erreur { margin-top: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--brique); }
.d-erreur[hidden] { display: none; }

.d-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.d-contact .d-sous:first-child { grid-column: 1 / -1; max-width: calc(50% - 8px); }

.d-envoi { padding-top: 4px; }
.d-bouton { min-height: 52px; padding: 0 26px; font-size: 16.5px; border: 0; cursor: pointer; }
.d-bouton:disabled { opacity: .55; cursor: default; }
.d-statut { margin-top: 12px; font-size: 14.5px; color: var(--encre-douce); }
.d-statut.fait { color: var(--regain-profond); font-weight: 600; }
.d-merci {
  margin-top: 20px; background: var(--regain-profond); color: var(--lin); border-radius: 24px; padding: 28px 30px 30px;
  outline: none;
}
.d-merci[hidden] { display: none; }
.d-merci:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.d-merci-titre { font-stretch: 112%; --w: 112; font-weight: 560; font-size: 21px; letter-spacing: -.01em; line-height: 1.25; }
.d-merci p + p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: #DCE7E0; }
.d-merci-lien { margin-top: 20px; }
.d-merci .btn-lin:focus-visible { outline-color: var(--regain-clair); }
@media (prefers-reduced-motion: no-preference) {
  .d-merci:not([hidden]) { animation: merci .6s var(--ease) both; }
}
@keyframes merci { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(1.02); } to { opacity: 1; transform: none; } }

/* ---------- Estimation ---------- */
.d-estim-carte { background: var(--porcelaine); border-radius: 28px; padding: 30px 30px 26px; box-shadow: var(--ombre); }
.d-estim-titre { font-size: 14.5px; font-weight: 600; color: var(--regain); }
.d-estim-contexte { margin-top: 14px; font-size: 17px; line-height: 1.45; text-wrap: balance; }
.d-estim-prix {
  margin-top: 6px; font-stretch: 116%; --w: 116; font-weight: 500; font-size: clamp(32px, 3vw, 44px);
  letter-spacing: -.02em; line-height: 1.08; font-variant-numeric: proportional-nums lining-nums;
}
.d-estim-prix:empty { display: none; }
.d-estim-detail { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--encre-douce); }
.d-estim-detail:empty { display: none; }
.d-estim-corps { transition: opacity .2s var(--ease); }
.d-estim-corps.change { opacity: 0; }
.d-estim-regle .d-estim-contexte { background: var(--pre); border-radius: 16px; padding: 14px 16px; font-weight: 520; }
.d-estim-lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d-estim-mention { margin-top: 22px; font-size: 13.5px; line-height: 1.5; color: var(--encre-douce); }

/* ---------- Ce qui se passe ensuite ---------- */
.ds-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ds-etape { padding: 28px 26px 30px; }
.ds-quand {
  display: flex; align-items: center; gap: 10px;
  font-stretch: 112%; --w: 112; font-weight: 560; font-size: 20px; letter-spacing: -.012em; line-height: 1.2; margin-bottom: 12px;
}
.ds-quand::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--regain); }
.ds-etape p:last-child { font-size: 16px; line-height: 1.55; }

/* ---------- Bon à savoir ---------- */
.dv-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; padding-block: 96px 104px; }
.dv-in > .titre { grid-column: 1 / 5; }
.dv-liste { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.dv-liste dt { font-size: 14.5px; font-weight: 600; color: var(--regain); margin-bottom: 6px; }
.dv-liste dd { margin: 0; font-size: 16px; line-height: 1.55; }

/* ---------- Est-ce une vraie entreprise ? ---------- */
.d-vraie-in { max-width: 760px; margin-inline: auto; }
.d-vraie-in { background: var(--porcelaine); border-radius: 24px; padding: 30px 32px 32px; box-shadow: var(--ombre); width: min(760px, calc(100% - 2 * var(--gut))); }
.d-vraie-titre { font-stretch: 112%; --w: 112; font-weight: 560; font-size: 22px; letter-spacing: -.012em; line-height: 1.2; margin-bottom: 10px; }
.d-vraie-in p { font-size: 16px; line-height: 1.6; }

/* ---------- Tablette ---------- */
@media (max-width: 1199px) {
  .ds-etapes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023px) {
  .d-intro-in .titre-page, .d-intro-corps { grid-column: 1 / -1; }
  .d-form > *, .d-form > .d-estim { grid-column: 1 / -1; grid-row: auto; }
  .d-estim-carte { position: static; margin-left: 0; }
  .dv-in > .titre, .dv-liste { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 759px) {
  .d-intro { padding-top: 32px; }
  .d-zone { padding-top: 40px; }
  .d-zone > .cont { width: auto; margin-inline: 10px; }
  .d-form { border-radius: 26px; padding: 30px 18px 34px; row-gap: 26px; }
  .d-contact { grid-template-columns: 1fr; }
  .d-contact .d-sous:first-child { max-width: none; }
  .d-pill span { padding: 0 16px; font-size: 15.5px; }
  input[type="date"].d-input { min-width: 0; width: 100%; }
  .d-ligne { gap: 6px 20px; }
  .d-nombre { max-width: none; }
  .d-estim-carte { padding: 24px 22px 22px; border-radius: 22px; }
  .d-bouton { width: 100%; }
  .d-merci { padding: 24px 22px 26px; }
  .d-merci-lien { width: 100%; white-space: normal; text-align: center; padding-block: 10px; }
  .ds-etapes { grid-template-columns: 1fr; gap: 14px; }
  .dv-bloc { border-radius: 26px; }
  .dv-in { padding: 64px 20px 68px; }
  .dv-liste { grid-template-columns: 1fr; gap: 22px; }
  .d-vraie-in { padding: 24px 22px 26px; width: calc(100% - 2 * var(--gut)); }
}