/* Étape 3 : le devis comme une feuille, le message d'envoi et la fiche de fabrication. */
.envoi__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 20px; align-items: start; }
.envoi__cote { display: grid; gap: 16px; }

.document {
  min-width: 0; background: var(--feuille); border: 1px solid var(--filet); border-top: 5px solid var(--orange);
  border-radius: 2px; box-shadow: var(--ombre); padding: 26px 28px 28px; display: grid; gap: 16px; font-size: 14px;
}
.document__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.logo--document { height: 32px; }
.document__tete h2 { font-size: 22px; font-weight: 300; font-style: italic; color: var(--orange-titre); text-align: right; }
.document__tete p { color: var(--encre-2); font-size: 13px; text-align: right; }
.document__parties { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.document__parties div { background: var(--papier); padding: 10px 12px; border-radius: var(--rayon-petit); }
.document__parties dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2); }
.document__parties dd { margin: 4px 0 0; font-weight: 600; }
.document__profil { margin: 0; padding: 10px 14px 12px; border: 1px dashed var(--filet-fort); border-radius: var(--rayon-petit); display: grid; gap: 6px; }
.document__profil .profil { max-width: 400px; margin: 0 auto; }
.document__profil figcaption { font-size: 13px; color: var(--encre-2); text-align: center; }
.document__lignes { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.document__lignes th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); padding: 8px 6px; border-bottom: 2px solid var(--anthracite); }
.document__lignes th.nombre { text-align: right; }
.document__lignes td { padding: 8px 6px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.document__totaux { margin: 0 0 0 auto; width: min(100%, 340px); display: grid; gap: 4px; font-size: 13px; }
.document__totaux div { display: flex; justify-content: space-between; gap: 16px; }
.document__totaux dt { color: var(--encre-2); }
.document__totaux dd { margin: 0; white-space: nowrap; }
.document__ht { border-top: 2px solid var(--anthracite); padding-top: 6px; margin-top: 4px; font-size: 16px; }
.document__ht dt, .document__ht dd { color: var(--anthracite); font-weight: 700; }
.document__accord { color: var(--encre-2); font-size: 13px; border-top: 1px solid var(--filet); padding-top: 12px; }

.message__corps { padding: 14px 18px; white-space: pre-line; font-size: 14px; line-height: 1.65; }
.message__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 0 18px 16px; }
.envoi__suite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--encre-2); outline: none; }

.fabrication .panneau__titre { align-items: center; }
.fabrication .panneau__titre > span { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--commande-voile); color: var(--commande); }
.fabrication__corps { padding: 12px 18px 16px; display: grid; gap: 10px; }
.fabrication__profil .profil { max-width: 340px; margin: 0 auto; }
.fabrication__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: poste; }
.fabrication__etapes li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--filet); }
.fabrication__etapes strong { font-weight: 700; color: var(--anthracite); }

@media (max-width: 1080px) {
  .envoi__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .document { padding: 18px 16px 20px; }
  .document__tete h2, .document__tete p { text-align: left; }
  .document__parties { grid-template-columns: 1fr; }
  .fabrication__etapes li { grid-template-columns: 1fr; gap: 2px; }
}