/*
 * SecMet — démo : certificat d'effacement, réplique HTML de la mise en page
 * PDF de secmet-attest (pdf.rs) : A4, marges de 42 pt, Helvetica, mêmes
 * couleurs et mêmes blocs. Imprimable tel quel (@page A4).
 */
.cert-page {
  --c-ink: #1f2938;
  --c-title: #4a5463;
  --c-muted: #6b7380;
  --c-rule: #e3e8ed;
  --c-head: #f5f7fa;
  --c-soft: #f7f7fa;
  --c-green: #17a34a;
  --c-green-bg: #edfcf5;
  --c-red: #db2626;
  --c-red-bg: #fef2f2;
  --c-amber: #cc800d;
  --c-amber-bg: #fff7e6;
  width: 595.28pt;
  height: 841.89pt;
  box-sizing: border-box;
  padding: 42pt;
  background: #fff;
  color: var(--c-ink);
  font-family: Helvetica, 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
  font-weight: normal;
  font-size: 8.5pt;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 14pt;
  overflow: hidden;
  position: relative;
  text-align: left;
}
.cert-page * {
  box-sizing: border-box;
}
.cert-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1.6pt solid var(--c-ink);
  padding-bottom: 12pt;
  margin-bottom: 0;
  flex: none;
}
.cert-logo {
  height: 44pt;
  max-width: 45%;
  display: block;
  object-fit: contain;
  object-position: left center;
}
.cert-logo svg {
  height: 44pt;
  width: auto;
  display: block;
}
.cert-title {
  text-align: right;
  padding-top: 8pt;
}
.cert-title .t {
  font-weight: bold;
  font-size: 13pt;
  color: var(--c-title);
}
.cert-title .s {
  font-size: 8.5pt;
  color: var(--c-muted);
  margin-top: 3pt;
}

.cert-banner {
  height: 52pt;
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16pt;
  padding: 0 12pt 0 16pt;
  border-left: 4pt solid;
}
.cert-banner.ok { background: var(--c-green-bg); border-color: var(--c-green); color: var(--c-green); }
.cert-banner.ko { background: var(--c-red-bg); border-color: var(--c-red); color: var(--c-red); }
.cert-banner.warn { background: var(--c-amber-bg); border-color: var(--c-amber); color: var(--c-amber); }
.cert-banner .t {
  font-weight: bold;
  font-size: 14pt;
}
.cert-banner .s {
  font-size: 8.5pt;
  margin-top: 2pt;
  max-height: 22pt;
  overflow: hidden;
}
.cert-banner .right {
  text-align: right;
  flex: none;
}
.cert-banner .right .l {
  font-size: 8pt;
  color: var(--c-muted);
}
.cert-banner .right .v {
  font-size: 9pt;
  font-weight: bold;
  color: var(--c-ink);
  margin-top: 2pt;
}

.cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14pt;
  flex: none;
}
.cert-card {
  border: 0.8pt solid var(--c-rule);
  background: #fff;
  flex: none;
}
.cert-card-head {
  height: 24pt;
  line-height: 24pt;
  padding: 0 12pt;
  background: var(--c-head);
  border-bottom: 0.8pt solid var(--c-rule);
  font-weight: bold;
  font-size: 9pt;
  color: var(--c-ink);
}
.cert-card-body {
  padding: 12pt;
}
.cert-card-body.split {
  display: flex;
  gap: 12pt;
  align-items: center;
}
.cert-card-body.split .cert-rows {
  flex: 1;
  min-width: 0;
}
.cert-rows {
  display: flex;
  flex-direction: column;
  gap: 3.5pt;
}
.cert-row {
  display: flex;
  gap: 0;
}
.cert-row .l {
  flex: none;
  width: 92pt;
  color: var(--c-muted);
}
.cert-row .v {
  flex: 1;
  font-weight: bold;
  overflow-wrap: anywhere;
  min-width: 0;
}
.cert-row .v.mono,
.cert-lot td.mono {
  font-family: 'Courier New', Courier, 'Liberation Mono', monospace;
  font-weight: normal;
}
.cert-row .v.ok,
.cert-lot td.ok { color: var(--c-green); }
.cert-row .v.ko,
.cert-lot td.ko { color: var(--c-red); }
.cert-row .v.warn,
.cert-lot td.warn { color: var(--c-amber); }

.cert-method {
  background: var(--c-soft);
  border-left: 3pt solid var(--c-ink);
  padding: 7pt 12pt 7pt 14pt;
  font-weight: bold;
  font-size: 10pt;
  margin-bottom: 8pt;
}
.cert-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14pt;
}
.cert-cols + .cert-rows {
  margin-top: 3.5pt;
}
.cert-qr {
  flex: none;
  width: 124pt;
  height: 124pt;
}
.cert-qr svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cert-fill {
  flex: 1;
  min-height: 0;
}
.cert-footer {
  flex: none;
  border-top: 0.6pt solid var(--c-rule);
  padding-top: 8pt;
  font-size: 7pt;
  color: var(--c-muted);
  display: flex;
  flex-direction: column;
  gap: 4pt;
}
.cert-footer .row {
  display: flex;
  justify-content: space-between;
}

.cert-lot {
  width: 100%;
  border-collapse: collapse;
  border: 0.8pt solid var(--c-rule);
  font-size: 7.5pt;
  table-layout: fixed;
  flex: none;
}
.cert-lot th {
  background: var(--c-head);
  color: var(--c-muted);
  font-size: 7pt;
  font-weight: bold;
  text-align: left;
  padding: 6pt 4pt;
  border-bottom: 0.8pt solid var(--c-rule);
  border-right: 0.5pt solid var(--c-rule);
}
.cert-lot td {
  padding: 4pt;
  vertical-align: top;
  border-bottom: 0.5pt solid var(--c-rule);
  border-right: 0.5pt solid var(--c-rule);
  overflow-wrap: anywhere;
}
.cert-lot td.res {
  font-weight: bold;
}
.cert-lot th:nth-child(1) { width: 16pt; }
.cert-lot th:nth-child(2) { width: 40pt; }
.cert-lot th:nth-child(3) { width: 44pt; }
.cert-lot th:nth-child(4) { width: 96pt; }
.cert-lot th:nth-child(5) { width: 82pt; }
.cert-lot th:nth-child(6) { width: 50pt; }
.cert-lot th:nth-child(7) { width: 103pt; }
.cert-lot th:nth-child(8) { width: 38pt; }
.cert-lot th:nth-child(9) { width: 42pt; }

/* ── Impression : seules les pages du certificat ouvert ──────────────── */
#print-root {
  display: none;
}
@page {
  size: A4 portrait;
  margin: 0;
}
@media print {
  html,
  body {
    background: #fff !important;
    margin: 0;
    height: auto !important;
    overflow: visible !important;
  }
  body > *:not(#print-root) {
    display: none !important;
  }
  #print-root {
    display: block;
  }
  #print-root .cert-page {
    width: 210mm;
    height: 297mm;
    break-after: page;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #print-root .cert-page:last-child {
    break-after: auto;
  }
}