/* ===== Lot C3 : offre commerciale et bon de commande, rendu papier de l'actuel =====
   Rendu à l'écran du `DocumentVente` (crates/ui/src/ecrans/fiche/document_vente.rs).
   Le papier reste BLANC à encre sombre en clair comme en sombre (c'est une feuille) ;
   seul le fond autour change. Largeur A4 au plus, le papier se réduit sur téléphone
   (375 px) sans défilement horizontal de la page ; seul un tableau très large défile
   dans son propre cadre. Aucun !important. */

.c3d-document {
  --c3d-encre: #19191e;
  --c3d-encre-douce: #4a5160;
  --c3d-encre-pale: #767d8c;
  --c3d-navy: #16304f;
  --c3d-or: #b8954a;
  --c3d-trait: #d9dee8;
  --c3d-fond-doux: #f5f7fa;
  --c3d-vert: #15803d;
  --c3d-fond: hsl(var(--background, 213 62% 95%));
  container-type: inline-size;
  background: var(--c3d-fond);
  border-radius: 8px;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 14px 0;
  max-width: 100%;
  min-width: 0;
}

@media (prefers-color-scheme: dark) {
  .c3d-document { --c3d-fond: #0f1724; }
  .c3d-document .c3d-papier { box-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
}

.c3d-papier {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 210mm;
  min-height: min(297mm, 141cqw);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--c3d-encre);
  box-shadow: 0 2px 12px rgba(16, 32, 56, 0.16);
  border-radius: 2px;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(10px, 1.55cqw, 12.5px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.c3d-accent { height: 5px; background: linear-gradient(90deg, var(--c3d-navy), #285a87); }
.c3d-interieur { flex: 1; padding: clamp(14px, 5.5cqw, 46px) clamp(12px, 5.5cqw, 46px) 10px; position: relative; z-index: 1; }

/* Filigrane : diagonal, très pâle, sur chaque page. */
.c3d-filigrane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transform: rotate(-32deg);
  font-size: clamp(16px, 5cqw, 40px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(181, 56, 56, 0.11);
  white-space: nowrap;
}
.c3d-mention-essai { margin: 0; padding: 3px 12px 6px; font-size: 0.75em; color: #b5513a; text-align: center; letter-spacing: 0.06em; }

/* En-têtes. */
.c3d-entete { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--c3d-trait); }
.c3d-lettrine { font-weight: 900; font-size: 1.45em; letter-spacing: 0.03em; color: var(--c3d-encre); text-transform: uppercase; flex-shrink: 0; max-width: 45%; }
.c3d-entete-coord { font-size: 0.82em; color: var(--c3d-encre-douce); line-height: 1.5; min-width: 0; }
.c3d-entete-coord > div:first-child { color: var(--c3d-navy); font-weight: 650; }
.c3d-entete-bdc { border-bottom: 0; margin-bottom: 4px; }
.c3d-entete-mini { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.8em; color: var(--c3d-encre-douce); border-bottom: 1px solid var(--c3d-trait); padding-bottom: 6px; margin-bottom: 14px; }
.c3d-entete-ref { font-style: italic; }
.c3d-emetteur { font-size: 0.85em; color: var(--c3d-encre-douce); line-height: 1.55; border-bottom: 1px solid var(--c3d-trait); padding-bottom: 8px; margin-bottom: 12px; }

/* Titre. */
.c3d-titre { text-align: center; margin: 4px 0 14px; }
.c3d-titre h1 { font-size: 1.7em; margin: 0; color: var(--c3d-navy); letter-spacing: -0.01em; }
.c3d-filet { width: 46px; height: 2px; background: var(--c3d-or); margin: 6px auto; }
.c3d-meta { font-size: 0.85em; color: var(--c3d-encre-douce); }

/* Parties. */
.c3d-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.c3d-carte { border: 1px solid var(--c3d-trait); border-radius: 4px; padding: 9px 11px; min-width: 0; }
.c3d-carte h2 { margin: 0 0 4px; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c3d-encre-pale); }
.c3d-carte-nom { font-weight: 700; font-size: 1.05em; margin-bottom: 2px; }
.c3d-carte-ligne { font-size: 0.88em; color: var(--c3d-encre-douce); }

/* Bandeau véhicule. */
.c3d-vehicule { background: var(--c3d-navy); color: #fff; border-radius: 4px; padding: 11px 13px; margin-bottom: 12px; }
.c3d-vehicule-modele { font-size: 1.3em; font-weight: 750; }
.c3d-vehicule-finition { color: #c9d6e6; margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.c3d-badge { background: #ace7e1; color: var(--c3d-navy); border-radius: 3px; padding: 1px 6px; font-size: 0.8em; font-weight: 700; }
.c3d-vehicule-caracs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; margin-top: 9px; }
.c3d-vehicule-caracs span { display: block; font-size: 0.75em; color: #a9bbd1; }
.c3d-vehicule-caracs strong { font-size: 0.92em; font-weight: 650; }
.c3d-vehicule-refs { font-size: 0.75em; color: #a9bbd1; margin-top: 8px; }

/* Sections. */
.c3d-section { font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c3d-navy); margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--c3d-navy); }

/* Grilles. */
.c3d-grille { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 3px 10px; font-size: 0.9em; }
.c3d-lbl { color: var(--c3d-encre-pale); }
.c3d-val { font-weight: 650; }
.c3d-lignes { display: grid; gap: 0; font-size: 0.9em; }
.c3d-lignes-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #eef0f4; }
.c3d-lignes-ligne strong { text-align: right; }
.c3d-lignes-titre { font-weight: 700; margin: 8px 0 2px; }

/* Tableau de prix. */
.c3d-prix-cadre { max-width: 100%; overflow-x: auto; }
.c3d-prix { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.c3d-prix th { text-align: left; font-size: 0.8em; font-weight: 650; color: var(--c3d-encre-pale); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--c3d-navy); padding: 5px 6px; }
.c3d-prix td { padding: 5px 6px; border-bottom: 1px solid #eef0f4; vertical-align: top; }
.c3d-prix .c3d-montant { text-align: right; white-space: nowrap; }
.c3d-prix-tva td, .c3d-prix-tva th { font-size: 0.92em; }
.c3d-l-detail td { padding-left: 18px; color: #666; font-style: italic; font-size: 0.9em; }
.c3d-l-sous-total td { font-weight: 700; background: var(--c3d-fond-doux); }
.c3d-l-deduction td { color: var(--c3d-vert); }
.c3d-l-total td { font-weight: 800; font-size: 1.12em; color: #fff; background: var(--c3d-navy); border-bottom: 0; }
.c3d-l-solde td { font-weight: 750; border-top: 2px solid var(--c3d-navy); }
.c3d-l-dont-tva td { font-size: 0.85em; color: var(--c3d-encre-pale); font-style: italic; }
.c3d-l-encart > td { padding: 2px 6px 6px; }
.c3d-encart { background: var(--c3d-fond-doux); border-left: 2px solid var(--c3d-or); padding: 5px 9px; font-size: 0.86em; color: var(--c3d-encre-douce); }
.c3d-encart-titre { font-style: italic; margin-bottom: 2px; }
.c3d-encart-ligne { display: flex; justify-content: space-between; gap: 10px; }
.c3d-encart-ligne span:last-child { white-space: nowrap; }

/* Paragraphes. */
.c3d-p { margin: 0 0 6px; white-space: pre-line; }
.c3d-p-mention { font-size: 0.86em; color: var(--c3d-encre-douce); }
.c3d-p-note { font-weight: 650; color: #444; }
.c3d-p-italique { font-style: italic; }
.c3d-p-encadre { border-left: 2px solid var(--c3d-encre); padding: 4px 9px; }
.c3d-mention { font-size: 0.82em; color: var(--c3d-encre-pale); margin-top: 4px; }

.c3d-encadre { border: 1px solid #bbb; border-radius: 4px; background: #f7f7f4; padding: 8px 11px; margin: 10px 0; }
.c3d-encadre-titre { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.86em; margin-bottom: 3px; }
.c3d-encadre-ligne { display: flex; justify-content: space-between; gap: 12px; }

.c3d-liste { font-size: 0.92em; margin: 6px 0; }
.c3d-liste-titre { font-weight: 700; }
.c3d-liste ul { margin: 3px 0 4px 18px; padding: 0; }
.c3d-mentions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 0.86em; color: var(--c3d-encre-douce); }

/* Signatures. */
.c3d-signatures { border: 1px solid var(--c3d-trait); border-radius: 4px; padding: 10px 12px; font-size: 0.9em; }
.c3d-sig-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.c3d-sig-cadre { min-width: 0; }
.c3d-sig-etiquette { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c3d-encre-pale); font-weight: 700; }
.c3d-sig-nom { font-weight: 700; }
.c3d-sig-mention { font-size: 0.85em; color: var(--c3d-encre-douce); }
.c3d-sig-zone { margin-top: 6px; height: 64px; border: 1px dashed #aab; border-radius: 3px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-size: 0.78em; color: #999; background: #fafbfc; }

.c3d-champs { display: grid; gap: 10px; margin: 8px 0; }
.c3d-champ { display: grid; gap: 2px; }
.c3d-trait { display: block; height: 16px; border-bottom: 1px solid #999; }

/* CGV. */
.c3d-cgv-entete { text-align: center; margin-bottom: 8px; }
.c3d-cgv-entete h2 { font-size: 1.12em; margin: 0 0 2px; color: #222; }
.c3d-cgv-entete div { font-size: 0.8em; color: #666; }
.c3d-cgv { column-count: 2; column-gap: 16px; font-size: 0.8em; line-height: 1.38; color: #333; text-align: justify; }
.c3d-cgv-article { break-inside: avoid-column; margin-bottom: 6px; }
.c3d-cgv-article h3 { font-size: 1em; font-weight: 650; color: #222; margin: 0 0 2px; padding-bottom: 1px; border-bottom: 1px solid #dde3f0; }
.c3d-cgv-article p { margin: 0 0 3px; }
.c3d-encadre-legal { border: 1px solid #8a929e; border-radius: 3px; padding: 10px 12px; margin-top: 8px; }
.c3d-encadre-legal h4 { margin: 0 0 6px; font-size: 0.95em; }
.c3d-encadre-legal-texte { column-count: 2; column-gap: 16px; font-size: 0.86em; line-height: 1.42; text-align: justify; }
.c3d-encadre-legal-texte p { margin: 0 0 4px; }
.c3d-cgv-signature { text-align: center; margin-top: 10px; font-size: 0.86em; }
.c3d-cgv-signature p { margin: 0 0 3px; color: #555; }
.c3d-cgv-signature .c3d-sig-zone { max-width: 220px; margin: 6px auto 0; }

/* Pied. */
.c3d-pied { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px clamp(12px, 5.5cqw, 46px); border-top: 1px solid var(--c3d-trait); font-size: 0.72em; color: var(--c3d-encre-pale); position: relative; z-index: 1; }

/* Téléphone : une colonne, CGV sur une colonne. */
@container (max-width: 560px) {
  .c3d-parties, .c3d-sig-grille, .c3d-mentions { grid-template-columns: 1fr; }
  .c3d-vehicule-caracs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c3d-grille { grid-template-columns: auto minmax(0, 1fr); }
  .c3d-cgv, .c3d-encadre-legal-texte { column-count: 1; }
  .c3d-entete { flex-direction: column; align-items: flex-start; gap: 6px; }
  .c3d-lettrine { max-width: 100%; }
}

/* Impression : une feuille par page, sans ombre ; le filigrane reste. */
@media print {
  .c3d-document { display: block; padding: 0; gap: 0; background: none; }
  .c3d-papier { max-width: none; width: 210mm; min-height: 297mm; box-shadow: none; border-radius: 0; break-after: page; font-size: 9pt; }
  .c3d-papier:last-child { break-after: auto; }
  .c3d-l-total td, .c3d-vehicule, .c3d-accent { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}