/* ==================================================================
   Ruban Pro — page « Demande de devis » (formulaire [ruban_pro_devis]
   de l'extension configurateur). Maquette validée :
   maquettes/j-nouveau-style/devis.css. Complète pages.css (préfixe j-dv-).
   ================================================================== */

/* ------------------------------------------------------------ mise en page */
.j-dv { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.j-dv-carte { padding: 30px 32px; }

/* Blocs numérotés du formulaire */
.j-dv-form { gap: 0; margin-top: 0; }
.j-dv-bloc { min-width: 0; margin: 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--j-trait); }
.j-dv-bloc + .j-dv-bloc { margin-top: 26px; }
.j-dv-form > .j-dv-bloc:first-of-type { padding-top: 0; border-top: 0; }
.j-dv-config ~ .j-dv-bloc:first-of-type { padding-top: 24px; border-top: 1px solid var(--j-trait); }
.j-dv-bloc legend { float: left; display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 16px; padding: 0; color: var(--j-encre); font: 800 19px/1.2 var(--j-police); letter-spacing: -.015em; }
.j-dv-bloc legend + * { clear: both; }
.j-dv-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--j-bleu); color: #fff; font-size: 13.5px; font-weight: 800; }

/* Champs : textarea et petites aides */
.j-dv-form .j-champ--tiers { grid-column: span 2; }
.j-dv-form .j-coche { display: flex; gap: 10px; color: var(--j-texte); cursor: pointer; }
.j-dv-form .j-coche input { width: 18px; height: 18px; margin: 0; accent-color: var(--j-bleu); }
.j-dv-form .j-champ { align-content: start; }
.j-dv-form textarea { width: 100%; min-height: 130px; padding: 10px 12px; border: 1px solid var(--j-trait-2); border-radius: 4px; font: inherit; font-size: 14.5px; resize: vertical; }
.j-dv-form .j-champ > span b { font-weight: inherit; }
.j-dv-form .j-champ > span small { color: var(--j-gris-2); font-size: 12px; }
.j-dv-form .j-champ input[type="date"] { padding: 0 10px; }

/* Fichiers */
.j-dv-fichiers { display: flex; gap: 14px; margin-top: 14px; padding: 16px 18px; border: 1px dashed var(--j-trait-2); border-radius: var(--j-r); background: var(--j-fond); font-size: 14px; }
.j-dv-fichiers > .j-ico { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--j-bleu); }
.j-dv-fichiers label { display: block; margin-bottom: 8px; color: var(--j-encre); }
.j-dv-fichiers label small { color: var(--j-gris-2); font-size: 12px; }
.j-dv-fichiers input { max-width: 100%; color: var(--j-gris); font: 500 13px/1.4 var(--j-police); }
/* Bouton du sélecteur de fichiers habillé comme un bouton J « cadre ». */
.j-dv-fichiers input::file-selector-button {
  min-height: 40px; margin-right: 12px; padding: 0 16px;
  border: 1px solid #b9c2cf; border-radius: 6px; background: #fff;
  color: var(--j-encre); font: 700 14px/1 var(--j-police); cursor: pointer;
}
.j-dv-fichiers input::file-selector-button:hover { border-color: var(--j-encre); background: var(--j-fond); }
.j-dv-fichiers .j-pg-petit { margin-top: 8px; }
.j-dv-fichiers.est-erreur { border-color: #d93a3a; }
.j-dv-liste { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.j-dv-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--j-trait); border-radius: 4px; background: #fff; font-size: 13px; }
.j-dv-liste small { color: var(--j-gris); white-space: nowrap; }

/* Compte, consentement, envoi */
.j-dv-compte { display: flex; gap: 10px; margin: -4px 0 14px; padding: 10px 12px; border-radius: var(--j-r); background: var(--j-bleu-voile); }
.j-dv-compte .j-ico { flex: none; width: 18px; height: 18px; color: var(--j-bleu); }
.j-dv-accord { align-items: flex-start; margin: 26px 0 18px; padding-top: 20px; border-top: 1px solid var(--j-trait); font-size: 13.5px; line-height: 1.5; }
.j-dv-accord input { flex: none; margin-top: 1px; }
.j-dv-accord a { color: var(--j-bleu); font-weight: 600; }
.j-dv-accord.est-erreur { color: #c62828; }

/* Configuration transmise par le configurateur */
.j-dv-config { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; margin-bottom: 26px; padding: 16px; border: 1px solid var(--j-bleu-pale); border-radius: var(--j-r-l); background: var(--j-bleu-voile); }
.j-dv-config[hidden] { display: none; }
.j-dv-config__vis { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--j-r); background: var(--j-fond-2); }
.j-dv-config__vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.j-dv-config--seule { grid-template-columns: minmax(0, 1fr); }
.j-dv-sur { color: var(--j-bleu); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.j-dv-config .j-h3 { margin-top: 4px; font-size: 18px; }
.j-dv-resume { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 12px 0 0; font-size: 13.5px; }
.j-dv-resume div { min-width: 0; }
.j-dv-resume dt { color: var(--j-gris); font-size: 12px; }
.j-dv-resume dd { margin: 0; color: var(--j-encre); font-weight: 600; overflow-wrap: anywhere; }
.j-dv-motif { display: flex; gap: 8px; margin: 12px 0 10px; color: var(--j-texte); font-size: 13px; line-height: 1.45; }
.j-dv-motif .j-ico { flex: none; width: 17px; height: 17px; color: var(--j-bleu); }
.j-dv-config .j-lien { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.j-dv-config .j-lien .j-ico { width: 16px; height: 16px; }

/* Demande envoyée */
.j-dv-merci { padding: 18px 0 6px; text-align: center; }
.j-dv-merci:focus { outline: none; }
.j-dv-merci__ico { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #e3f4ec; color: #0d7a55; }
.j-dv-merci__ico .j-ico { width: 30px; height: 30px; }
.j-dv-merci .j-h2 { margin-top: 16px; }
.j-dv-merci p { max-width: 52ch; margin: 10px auto 0; font-size: 15px; line-height: 1.6; }
.j-dv-merci .j-pg-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

/* Erreurs du serveur, produit concerné, envoi en cours */
.j-dv-erreurs { margin: 0 0 22px; }
.j-dv-erreurs:focus { outline: none; }
.j-dv-erreurs ul { margin: 6px 0 0; padding-left: 18px; }
.j-dv-erreurs li + li { margin-top: 3px; }
.j-dv-intro { margin-bottom: 20px; }
.j-dv-produit { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 10px 14px; border-radius: var(--j-r); background: var(--j-bleu-voile); font-size: 14px; }
.j-dv-produit .j-ico { flex: none; width: 18px; height: 18px; color: var(--j-bleu); }
.j-dv-accord--vide { margin: 8px 0 0; padding: 0; border: 0; }
.j-dv-form button[aria-busy="true"] { opacity: .7; pointer-events: none; }
.j-dv-liste[hidden] { display: none; }

/* ------------------------------------------------------------ colonne de droite */
.j-dv-aside h2 { font-size: 18px; }
.j-dv-etapes { display: grid; gap: 0; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: e; }
.j-pg-coord .j-dv-etapes li { display: block; }
.j-dv-etapes li { position: relative; padding: 0 0 16px 42px; font-size: 14px; line-height: 1.45; counter-increment: e; }
.j-dv-etapes li::before { content: counter(e); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--j-bleu-pale); color: var(--j-bleu); font-size: 13px; font-weight: 800; }
.j-dv-etapes li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--j-trait); }
.j-dv-etapes li:last-child { padding-bottom: 0; }
.j-dv-etapes b { display: block; color: var(--j-encre); }
.j-dv-etapes span { display: block; margin-top: 2px; color: var(--j-gris); font-size: 13.5px; }
.j-pg-coord .j-dv-cas { gap: 9px; }
.j-pg-coord .j-dv-cas li { align-items: flex-start; gap: 10px; font-size: 14px; }
.j-pg-coord .j-dv-cas li > .j-ico { width: 18px; height: 18px; margin-top: 2px; padding: 0; background: none; color: var(--j-vert, #0d7a55); }
.j-dv-direct .j-pg-petit { margin-top: 8px; }
.j-dv-direct .j-btn { margin-top: 14px; }
.j-dv-question { padding-inline: 4px; }

/* ------------------------------------------------------------ petits écrans */
@media (max-width: 1000px) {
  .j-dv { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .j-dv-carte { padding: 22px 18px; }
  .j-dv-form .j-champ--tiers, .j-dv-form .j-champ--moitie { grid-column: span 6; }
  .j-dv-config { grid-template-columns: minmax(0, 1fr); }
  .j-dv-config__vis { aspect-ratio: 16 / 10; }
  .j-dv-fichiers { padding: 14px; }
  .j-dv-fichiers > .j-ico { display: none; }
}