@page {
  size: A4;
  margin: 0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--doc-font);
  font-size: 9pt;
  font-weight: 300;
  color: #111;
  line-height: 1.35;
}

.doc-page {
  --page-top-gap: 6mm;
  --logo-size: 23.75mm;
  /* Blue tip of logo ≈ 9.7% of logo height ≈ 2.3mm — keep clear of page edge */
  --logo-tip: 2.4mm;
  page-break-after: always;
  min-height: 297mm;
  position: relative;
  /* Top gap keeps the logo tip on-page; sides inset; band still bleeds full width */
  padding: var(--page-top-gap) 10mm 12mm;
}

.doc-page:last-child {
  page-break-after: auto;
}

/*
 * Band + logo
 * Logo square at --logo-size. Top blue ≈ 9.7% of height, then white shield.
 * Stripe top = white top → logo pulled up by ~0.097 × logo size into the page-top gap.
 * Stripe height ≈ white shield height (~0.55 × logo).
 */
.doc-band {
  position: relative;
  background: var(--doc-brand, #00304B);
  color: #fff;
  height: calc(var(--logo-size) * 0.55);
  margin: 0 -10mm 4mm;
  width: calc(100% + 20mm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.doc-band-title {
  font-family: Arial Black, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 14pt;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1;
  z-index: 1;
}

/* Optical slot ~7/8 (right, slight inset from corner) */
.doc-band-logo {
  position: absolute;
  /* Explicit mm — Chromium was flaky with calc(var(--logo-size) * -0.097) */
  top: calc(-1 * var(--logo-tip));
  right: 3.5%;
  width: var(--logo-size);
  height: auto;
  display: block;
  z-index: 2;
}

.doc-workshop-header.is-full,
.doc-workshop-header.is-cont {
  position: relative;
  margin-bottom: 2mm;
}

.doc-masthead-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8mm;
  width: 100%;
}

.doc-workshop-block {
  text-align: left;
  font-size: 9pt;
  font-weight: 300;
  color: #111;
  flex: 1 1 auto;
  max-width: 55%;
  line-height: 1.3;
  padding-top: 1mm;
}

.doc-workshop-block.is-address-only {
  max-width: 100%;
  margin-bottom: 2mm;
}

.doc-workshop-brand {
  font-size: 11pt;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5mm;
}

.doc-workshop-name {
  font-weight: 300;
}

.doc-workshop-spacer {
  height: 2mm;
}

.doc-workshop-legal {
  font-size: 8pt;
  font-style: normal;
  font-weight: 300;
  line-height: 1.3;
}

/* Client in masthead row — bottom-aligned with workshop block */
.doc-masthead-row > .doc-client {
  position: static;
  flex: 0 0 40%;
  width: 40%;
  text-align: right;
  font-size: 9pt;
  font-weight: 300;
  margin: 0;
  max-width: none;
  align-self: flex-end;
}

.doc-client-id {
  font-size: 8pt;
  font-style: italic;
  font-weight: 300;
  color: #111;
}

.doc-client-name {
  font-size: 11pt;
  font-weight: 700;
  margin-top: 0.8mm;
  color: #111;
}

.doc-client-line {
  font-size: 9pt;
  font-weight: 300;
}

.doc-subject {
  text-align: left;
  clear: both;
  margin: 8mm 0 4mm;
  max-width: 58%;
  font-weight: 300;
}

.doc-subject.is-cont {
  max-width: 100%;
  margin: 4mm 0 8mm;
}

.doc-subject-line1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.5mm 2.5mm;
  margin-bottom: 1.5mm;
}

.doc-subject-title,
.doc-subject-doc,
.doc-subject-ffin {
  font-size: 16pt;
  font-weight: 700;
  color: #111;
  text-transform: none;
}

.doc-subject-page {
  font-size: 8pt;
  font-style: italic;
  font-weight: 300;
  color: #111;
}

.doc-subject-line2,
.doc-subject-line3,
.doc-subject-doc-ref {
  font-size: 9pt;
  font-weight: 300;
  margin-top: 0.8mm;
}

/* Cont: left = Facture + Document + OR (unchanged spacing); party bottom-aligned
   so it rises beside Facture and OR aligns with the last car line. */
.doc-cont-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8mm;
  width: 100%;
}

.doc-cont-left {
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
}

.doc-cont-left .doc-subject-line1 {
  margin-bottom: 1.5mm;
}

.doc-cont-left .doc-subject-doc-ref,
.doc-cont-left .doc-subject-line3 {
  margin-top: 0.6mm;
}

.doc-cont-party {
  flex: 0 0 42%;
  width: 42%;
  text-align: right;
  font-size: 9pt;
  font-weight: 300;
  line-height: 1.35;
}

.doc-cont-party-line {
  font-weight: 300;
}

.doc-vehicle {
  clear: both;
  margin: 3mm 0;
}

.doc-vehicle-id {
  font-size: 8pt;
  font-style: italic;
  font-weight: 300;
  text-align: left;
  margin-bottom: 1.5mm;
}

/* —— Lines table: no fill; light header; thin black rules —— */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
  font-weight: 300;
}

.doc-lines.doc-table {
  table-layout: fixed;
}

.doc-lines.doc-table th,
.doc-lines.doc-table td {
  background: transparent;
  color: #111;
  text-align: left;
  padding: 1.5mm 1.5mm;
  vertical-align: top;
  border: none;
  font-weight: 300;
}

.doc-lines.doc-table .col-label {
  width: 40%;
}

.doc-lines.doc-table th.col-num,
.doc-lines.doc-table td.col-num {
  width: 12%;
  text-align: right;
}

/* Without rem.(%): five columns — widen numeric slots slightly */
.doc-lines.doc-table:not(.has-discount) .col-label {
  width: 44%;
}

.doc-lines.doc-table:not(.has-discount) th.col-num,
.doc-lines.doc-table:not(.has-discount) td.col-num {
  width: 14%;
}

.doc-lines.doc-table th {
  font-style: normal;
  font-weight: 300;
  border-bottom: 0.5pt solid #111;
}

.doc-lines.doc-table tbody tr:last-child td {
  border-bottom: 0.5pt solid #111;
}

.doc-line-label {
  font-weight: 300;
}

.doc-line-desc {
  color: #555;
  font-size: 7.5pt;
  font-weight: 300;
  margin-top: 0.5mm;
}

/* simple_format wraps paragraphs; keep gaps tight (no pre-line — doubles <br>) */
.doc-line-desc > div {
  margin: 0;
}

.doc-line-desc > div + div {
  margin-top: 0.8mm;
}

/* Vehicle table: no fill, no rules; labels italic 8pt; values centered.
 * Fixed layout → five equal columns so text-align:center is visible. */
.doc-vehicle-table.doc-table,
.doc-vehicle-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: none !important;
  background: transparent !important;
}

.doc-vehicle-table.doc-table th,
.doc-vehicle-table.doc-table td,
.doc-vehicle-table th,
.doc-vehicle-table td {
  background: transparent !important;
  border: none !important;
  color: #111;
  text-align: center !important;
  vertical-align: middle;
  padding: 0.8mm 1.5mm;
}

.doc-vehicle-table.doc-table th,
.doc-vehicle-table th {
  font-size: 8pt;
  font-style: italic;
  font-weight: 300;
}

.doc-vehicle-table.doc-table td,
.doc-vehicle-table td {
  font-size: 9pt;
  font-style: normal;
  font-weight: 300;
}

/* Totals: no separator lines */
.doc-totals {
  width: 45%;
  margin-left: auto;
  margin-top: 4mm;
  font-size: 9pt;
  font-weight: 300;
}

.doc-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 1mm 0;
  border: none;
}

.doc-totals-row.is-strong {
  font-weight: 700;
  font-size: 11pt;
  border: none;
  margin-top: 1mm;
}

.doc-continued {
  text-align: right;
  font-style: italic;
  font-weight: 300;
  color: #555;
  margin-top: 3mm;
}

.doc-legal-footer,
.doc-company-footer {
  position: absolute;
  left: 10mm;
  right: 10mm;
  bottom: 8mm;
  font-size: 6.5pt;
  font-weight: 300;
  color: #444;
  line-height: 1.3;
}

.doc-legal-clauses { margin-top: 1mm; }