/* ============================================================
   CONTACT — formulaire de demande de devis
   ------------------------------------------------------------
   Épuré le 29/07/2026 : la maquette BIM isométrique cliquable a
   été retirée. Les lots restent sélectionnables — ils l'ont
   toujours été par ces cases, la maquette n'était qu'un second
   chemin vers elles.
   ============================================================ */

.devis{ display:block; padding-block:0 var(--section-y); }

/* ---------- Les lots concernés ---------- */
.lots{ border:0; margin:0; padding:0; }
.lots legend{
  font-family:var(--f-cote); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--beton); padding:0 0 .9rem;
}
/* neuf lots : trois colonnes de trois, pas cinq puis quatre */
.lots__grille{
  display:grid; gap:.5rem;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .lots__grille{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .lots__grille{ grid-template-columns:1fr; } }
.lot{
  display:flex; align-items:center; gap:.65rem;
  border:1px solid var(--trait); padding:.65rem .85rem;
  cursor:pointer; transition:border-color .2s, background .2s;
  font-size:.92rem;
}
.lot:hover{ border-color:var(--trait-fort); }
.lot input{ accent-color:var(--accent); width:16px; height:16px; flex:none; }
.lot:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent); }
.lot:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Champs ---------- */
.devis__champs{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--trait);
}
/* deux colonnes, et une largeur de lecture : un formulaire étalé sur
   1 240 px se remplit moins bien qu'un formulaire cadré */
.champs{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,300px), 1fr));
  max-width:860px;
}
.champ{ margin:0; display:grid; gap:.4rem; }
.champ--large{ grid-column:1 / -1; }
.champ label{
  font-family:var(--f-cote); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--beton);
}
.champ abbr{ color:var(--accent); text-decoration:none; }
.champ input, .champ select, .champ textarea{
  font:inherit; font-size:.98rem; color:var(--graphite);
  background:var(--blanc);
  border:1px solid var(--trait-fort); border-radius:var(--rayon);
  padding:.72rem .85rem; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.champ textarea{ resize:vertical; min-height:120px; }
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline:none; border-color:var(--graphite);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--graphite) 10%, transparent);
}
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"]{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.champ--case{ display:flex; align-items:flex-start; gap:.7rem; }
.champ--case input{ width:18px; height:18px; margin-top:.15rem; flex:none; accent-color:var(--accent); }
.champ--case label{
  font-family:var(--f-texte); font-size:.9rem; line-height:1.55;
  letter-spacing:0; text-transform:none; color:var(--beton-fonce);
}
.erreur{
  font-family:var(--f-cote); font-size:.66rem; letter-spacing:.06em;
  color:var(--accent); margin:0;
}
.piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.envoi{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:2rem; }
.envoi__note{
  margin:0; font-family:var(--f-cote); font-size:.68rem;
  letter-spacing:.06em; color:var(--beton); max-width:32ch;
}
.retour{
  margin:1.2rem 0 0; padding:.9rem 1.1rem;
  font-size:.94rem; display:none;
  border-left:2px solid var(--accent); background:var(--chaux);
}
.retour[data-etat]{ display:block; }
.retour[data-etat="ok"]{ border-color:#1F7A4A; }

/* ---------- Coordonnées ---------- */
.joindre{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0 clamp(1.5rem,4vw,4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.joindre > li{
  padding:1.35rem 0;
  border-top:1px solid var(--trait);
}
.joindre h3{ margin:0 0 .35rem; }
.joindre p{ margin:0; font-size:.98rem; }
.joindre a{ color:var(--graphite); text-decoration:none; border-bottom:1px solid var(--accent); }
.joindre a:hover{ color:var(--accent-fonce); }
@media (max-width:700px){
  .joindre{ grid-template-columns:1fr; }
}