/* =========================================================
   Mise en page A4 d'un devis / d'une facture MIRA EXPRESS.
   Partagé par facture.html (éditeur) et voir.html (lien client).
   Autonome : couleurs et polices définies ici, toujours sur papier blanc.
   ========================================================= */
.doc {
  --doc-c: #0a62e3; --doc-m: #f5058a; --doc-y: #fdb400;
  --doc-title: "Montserrat", system-ui, sans-serif;
  width: 210mm; min-height: 297mm; background: #fff; color: #1a1a22; transform-origin: top left;
  padding: 14mm 14mm 10mm; box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; font-family: "Manrope", system-ui, sans-serif;
  font-size: 10pt; line-height: 1.45; position: relative; overflow: hidden; text-align: left;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.doc *, .doc *::before, .doc *::after { box-sizing: border-box; }
.d-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.d-brand { display: flex; align-items: center; gap: 10px; }
.d-logo { display: block; height: 24mm; width: auto; }
.d-title { text-align: right; }
.d-title h1 { font-family: var(--doc-title); font-weight: 800; font-size: 22pt; margin: 0 0 6px; letter-spacing: .02em; color: #1a1a22; }
.d-meta { border-collapse: collapse; margin-left: auto; font-size: 9pt; }
.d-meta td { padding: 1.5px 0 1.5px 14px; }
.d-meta td:first-child { color: #777; }
.d-meta td:last-child { font-weight: 700; text-align: right; }
.d-bar { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--doc-y) 0 25%, var(--doc-m) 25% 50%, var(--doc-c) 50% 75%, #111 75%); opacity: .55; margin: 6mm 0 6mm; }
.d-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; margin-bottom: 6mm; }
.d-parties h3 { font-family: var(--doc-title); font-size: 7.5pt; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #888; margin: 0 0 6px; }
.d-parties p { margin: 0; }
.d-parties strong { font-size: 11pt; display: block; margin-bottom: 2px; }
.d-client { background: #f4f7fd; border-radius: 10px; padding: 12px 14px; }
.doc .muted { color: #6b6b78; }
.d-lines { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.d-lines th { background: #f1f2f6; text-align: left; font-family: var(--doc-title); font-weight: 700; font-size: 7.5pt; letter-spacing: .08em; text-transform: uppercase; color: #555; padding: 8px 10px; }
.d-lines th:first-child { border-radius: 8px 0 0 8px; } .d-lines th:last-child { border-radius: 0 8px 8px 0; }
.d-lines td { padding: 9px 10px; border-bottom: 1px solid #ececf0; vertical-align: top; }
.d-lines tr { break-inside: avoid; page-break-inside: avoid; }
.d-lines .n { width: 28px; color: #999; }
.d-lines .r { text-align: right; white-space: nowrap; }
.d-lines small { display: block; color: #777; font-size: 8.5pt; white-space: pre-line; }
.d-lines .empty td { text-align: center; color: #aaa; padding: 24px; font-style: italic; }
.d-bottom { display: grid; grid-template-columns: 1fr 76mm; gap: 8mm; margin-top: 6mm; align-items: start; break-inside: avoid; page-break-inside: avoid; }
.d-totals { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.d-totals td { padding: 5px 10px; }
.d-totals td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.d-totals .grand td { background: #1a1a22; color: #fff; font-family: var(--doc-title); font-weight: 800; font-size: 11pt; padding: 9px 10px; }
.d-totals .grand td:first-child { border-radius: 8px 0 0 8px; } .d-totals .grand td:last-child { border-radius: 0 8px 8px 0; }
.d-totals .reste td { font-weight: 800; color: var(--doc-c); font-size: 10.5pt; border-top: 1px solid #ececf0; }
.d-words { background: #fafafa; border-left: 3px solid #85b0f1; border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 9pt; }
.d-pay { margin-top: 10px; font-size: 8.5pt; color: #555; }
.d-pay p { margin: 2px 0; }
.d-bank { margin-top: 4px; padding: 5px 9px; font-size: 8pt; border: 1px solid #e3e7f0; border-radius: 8px; background: #fbfcfe; line-height: 1.5; }
.d-bank b { color: #333; }
.d-notes { margin-top: 3mm; font-size: 8.5pt; color: #555; white-space: pre-line; break-inside: avoid; page-break-inside: avoid; }
.d-notes h3 { font-family: var(--doc-title); font-size: 7.5pt; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #888; margin: 0 0 4px; }
.d-sign { display: flex; justify-content: space-between; gap: 10mm; margin-top: 5mm; break-inside: avoid; page-break-inside: avoid; }
.d-sign div { flex: 1; max-width: 75mm; border: 1px dashed #ccc; border-radius: 10px; padding: 8px 12px; height: 30mm; font-size: 8.5pt; color: #777; }
.d-sign div:only-child { margin-left: auto; }
.d-sign b { display: block; color: #333; }
/* Logo en filigrane : centré, très clair, derrière tout le contenu.
   (Pas de z-index négatif : le générateur de PDF le dessinerait sous la feuille blanche.
   Le filigrane reste au niveau 0 et le contenu passe au-dessus.) */
.d-watermark { position: absolute; left: 22mm; top: 116mm; width: 166mm; height: auto; transform: rotate(-12deg); z-index: 0; pointer-events: none; user-select: none; }
.doc > :not(.d-watermark):not(.stamp) { position: relative; z-index: 1; }
.doc > .stamp { z-index: 2; }
/* Cachet et signature de MIRA EXPRESS, apposés comme sur un document papier */
.d-sign .d-mira { position: relative; height: 42mm; overflow: visible; }
.d-cachet { position: absolute; right: 3mm; bottom: 1mm; width: 29mm; height: auto; transform: rotate(-9deg); opacity: .92; }
.d-signature { position: absolute; left: 4mm; bottom: 5mm; width: 40mm; height: auto; }
.d-foot { margin-top: auto; padding-top: 4mm; border-top: 1px solid #ececf0; text-align: center; font-size: 7.5pt; color: #888; line-height: 1.6; }
.d-foot b { color: #444; }
.stamp { position: absolute; top: 88mm; right: 22mm; transform: rotate(-14deg); border: 3px solid #1f9d55; color: #1f9d55; font-family: var(--doc-title); font-weight: 900; font-size: 22pt; letter-spacing: .1em; padding: 4px 16px; border-radius: 10px; opacity: .55; }

/* Version PDF / impression : pas d'ombre ni de mise à l'échelle */
.doc.for-pdf { box-shadow: none; transform: none !important; min-height: 288mm; } /* marge sous la hauteur A4 : évite une 2e page blanche */