/* Mise en page de « demande-devis » — reprise telle quelle de la maquette validée le 29/08/2026. */

/* ---------- propre à la page de demande de devis ---------- */
.dhead{padding-block:clamp(32px,5vw,72px) var(--s7)}
.dhead .lede{max-width:58ch}

/* deux colonnes : le formulaire, et ce qui se passe ensuite */
.dgrid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--s9); align-items:start}

/* groupes de champs : des cartes blanches posées sur le fond de page */
.fset{
  min-inline-size:0; margin:0 0 var(--s5); padding:var(--s6);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
}
/* le legend flotte : sans cela le navigateur le pose DANS la bordure de la
   carte et coupe le filet de 1 px en haut à gauche. */
.fset legend{
  float:left; width:100%; padding:0; margin:0;
  font-size:17px; font-weight:600; letter-spacing:-.006em; color:var(--ink);
}
.legnote{clear:both; font-size:13.5px; line-height:1.5; color:var(--ink-3); margin:var(--s2) 0 var(--s5)}
.frow{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); margin-bottom:var(--s4)}
.frow-1{grid-template-columns:1fr}
.frow:last-child{margin-bottom:0}
.opt{font-weight:400; letter-spacing:0; color:var(--ink-3)}
.hint{font-size:12.5px; line-height:1.5; color:var(--ink-3); margin:6px 0 0}
.field textarea{min-height:152px; line-height:1.55; resize:vertical}

/* case à cocher : cible tactile complète, jamais la seule case */
.check{
  display:flex; align-items:flex-start; gap:var(--s3); min-height:44px;
  padding-block:var(--s2); font-size:14px; line-height:1.5; color:var(--ink-2); cursor:pointer;
}
.check input[type="checkbox"]{
  width:20px; height:20px; min-height:20px; flex:none; padding:0; margin:3px 0 0;
  accent-color:var(--accent);
}

/* encart d'information à l'intérieur du formulaire */
.fnote{
  margin:0 0 var(--s5); padding:var(--s4) var(--s5);
  border:1px dashed var(--line); border-radius:var(--radius-card);
  font-size:14px; line-height:1.55; color:var(--ink-2);
}
.fnote p:last-child{margin:0}
.fsend{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3)}
.fsend p{margin:0}

/* colonne latérale */
.aside{position:sticky; top:calc(var(--head-h) + var(--s5))}
.steps{
  list-style:none; margin:var(--s6) 0 0; padding:0; counter-reset:s;
  display:flex; flex-direction:column;
}
.steps li{
  display:grid; grid-template-columns:30px 1fr; gap:var(--s4); align-items:baseline;
  padding:var(--s4) 0; border-top:1px solid var(--line-soft);
  font-size:14.5px; line-height:1.55; color:var(--ink-2);
}
.steps li:first-child{border-top:0; padding-top:0}
.steps li::before{
  counter-increment:s; content:"0" counter(s);
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--wood);
}
.steps b{display:block; margin-bottom:2px; font-size:15px; font-weight:600; color:var(--ink)}
.acard{
  margin-top:var(--s6); padding:var(--s5);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
}
.acard p{margin:0; font-size:14px; line-height:1.55; color:var(--ink-2)}

/* grille « ce que le devis contient » */
.cell h3{margin:0}
.cell p{margin:0}
.after{margin:var(--s6) 0 0; max-width:74ch; font-size:14.5px; line-height:1.6; color:var(--ink-2)}

/* bloc « vous préférez en parler » */
.talk{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:var(--s8); align-items:start}
.tbdlist{display:flex; flex-direction:column; gap:var(--s4); margin:0; padding:0}
.tbdlist > div{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-bottom:var(--s4); border-bottom:1px solid var(--line);
}
.tbdlist > div:last-child{padding-bottom:0; border-bottom:0}
.tbdlist dt{font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-2)}
.tbdlist dd{margin:0}
.tbd{
  display:inline-flex; align-items:center; min-height:44px; padding-inline:var(--s4);
  border:1px dashed var(--field-line); border-radius:var(--radius);
  font-size:13.5px; color:var(--ink-2); background:transparent;
}
.panel .tbd{border-color:var(--ink-3)}

/* usage des données */
.data{max-width:70ch}
.data p{font-size:15px; line-height:1.6; color:var(--ink-2)}

@media (max-width:1080px){
  .dgrid{grid-template-columns:1fr; gap:var(--s7)}
  .aside{position:static}
  .talk{grid-template-columns:1fr; gap:var(--s6)}
}
@media (max-width:640px){
  .frow{grid-template-columns:1fr}
  .fset{padding:var(--s5) var(--s4)}
  .fsend .btn{width:100%}
  .tbdlist > div{flex-direction:column; align-items:flex-start; gap:var(--s2)}
}