/*
 * pdf2bcard — interface styling.
 *
 * The visual idea is a proofing sheet: paper stock, ink, and a single accent in
 * cut-mark red. Numbers are set in a monospace face because every one of them
 * is a measurement the user may need to compare against a ruler.
 *
 * No web fonts, no external anything — the page has to work from a file:// URL
 * on a machine with the network unplugged, which is also the point of the
 * privacy claim.
 */

:root {
  --paper:   #f6f4ef;
  --paper-2: #fffefb;
  --ink:     #16150f;
  --ink-2:   #5b584c;
  --ink-3:   #767162;   /* 4.83:1 sur --paper-2. #8d8879 donnait 3.51:1 : AA échoué,
                           signalé par Lighthouse le 2026-08-03. Ne pas éclaircir. */
  --rule:    #d9d4c6;
  --rule-2:  #ebe7dc;
  --cut:     #b23a2c;
  --ok:      #2f6b46;
  --focus:   #2f5fa8;
  --shadow:  0 1px 2px rgba(22, 21, 15, .06), 0 8px 24px -12px rgba(22, 21, 15, .18);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #16161a;
    --paper-2: #1e1e23;
    --ink:     #eceae4;
    --ink-2:   #a8a49a;
    --ink-3:   #918d85;   /* 5.02:1 sur le fond sombre ; #7b776e donnait 3.72:1 */
    --rule:    #34343c;
    --rule-2:  #26262c;
    --cut:     #e07a68;
    --ok:      #6fc294;
    --focus:   #7aa7e8;
    --shadow:  0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 20px; }

/* ------------------------------------------------------------- masthead -- */
.masthead {
  padding: clamp(36px, 7vw, 72px) 0 clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--rule);
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, var(--rule-2) 39px 40px),
    var(--paper-2);
}
.eyebrow {
  margin: 0 0 10px;
  font: 600 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cut);
}
.masthead h1 {
  margin: 0;
  font: 600 clamp(2.2rem, 6vw, 3.4rem)/1.05 var(--mono);
  letter-spacing: -.03em;
}
.tagline { margin: 12px 0 0; font-size: clamp(1.05rem, 2.4vw, 1.3rem); max-width: 34em; }
.lede { margin: 14px 0 0; max-width: 46em; color: var(--ink-2); }

main { padding: clamp(24px, 4vw, 40px) 0 80px; }

/* ------------------------------------------------------------- drop zone -- */
.drop {
  border: 2px dashed var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  padding: clamp(28px, 5vw, 48px) 24px;
  text-align: center;
  cursor: pointer;
  color: var(--ink-3);
  transition: border-color .15s, background .15s, color .15s;
}
.drop:hover, .drop:focus-visible, .drop.over {
  border-color: var(--cut);
  color: var(--cut);
  background: var(--paper-2);
  outline: none;
}
.drop svg { display: block; margin: 0 auto 16px; }
.drop-title { margin: 0 0 4px; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.drop-hint  { margin: 0; font-size: .92rem; }

/* --------------------------------------------------------------- columns -- */
.columns {
  display: grid;
  gap: 20px;
  margin-top: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .columns { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
  .preview-panel { position: sticky; top: 20px; }
}

.panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(18px, 3vw, 26px);
  box-shadow: var(--shadow);
}
.panel h2 {
  margin: 0 0 18px;
  font: 600 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- fields -- */
.field { margin: 0 0 18px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; margin: 0 0 6px; font-size: .9rem; font-weight: 600; }

select, input[type="number"] {
  width: 100%;
  font: 15px/1.4 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 10px;
}
input[type="number"] { font-family: var(--mono); }
select:focus-visible, input:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.field.row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.field.row label { display: block; margin: 0 0 6px; font-size: .78rem; color: var(--ink-2); font-weight: 500; }

.field.check { display: flex; gap: 9px; align-items: flex-start; }
.field.check input { width: auto; margin-top: 3px; }
.field.check label { font-weight: 400; font-size: .9rem; margin: 0; }

.help { margin: 7px 0 0; font-size: .82rem; line-height: 1.55; color: var(--ink-3); }
.help.warn { color: var(--cut); }
.help:empty { display: none; }

.advanced { margin-top: 22px; border-top: 1px solid var(--rule-2); padding-top: 16px; }
.advanced summary {
  cursor: pointer;
  font: 600 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.advanced[open] summary { color: var(--ink-2); }

/* --------------------------------------------------------------- preview -- */
.preview {
  display: flex;
  justify-content: center;
  /* La place de l'aperçu est réservée AVANT que le script ne le dessine. Sans
     ça le panneau passait de 0 à ~424 px après le chargement — l'autre moitié
     du CLS de 0,437 mesuré le 2026-08-03. Le rapport est celui d'une A4 ; les
     autres formats de feuille en sont assez proches pour que le reliquat soit
     sous le seuil. */
  aspect-ratio: 210 / 297;
  max-width: 300px;
  margin: 0 auto;
}
svg.sheet {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .12));
}
.p-sheet { fill: var(--paper-2); stroke: var(--rule); stroke-width: .6; }
.p-card  { fill: none; stroke: var(--ink-3); stroke-width: .5; }
.p-mark  { stroke: var(--cut); stroke-width: .6; }
@media (prefers-color-scheme: dark) { .p-sheet { fill: #101014; } }

.figure {
  margin: 14px 0 0;
  text-align: center;
  font: 13px/1.5 var(--mono);
  color: var(--ink-2);
}

/* --------------------------------------------------------------- results -- */
.results { display: grid; gap: 12px; margin-top: 24px; }
.results:empty { display: none; }

.result {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-3);
  border-radius: 4px;
  padding: 16px 18px;
}
.result.ok { border-left-color: var(--ok); }
.result.ko { border-left-color: var(--cut); }
.result-head { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; }
.result-name  { margin: 0; font-weight: 600; word-break: break-all; }
.result-state { margin: 0; font: 13px/1.5 var(--mono); color: var(--ink-2); }
.result .notes { margin: 12px 0 0; padding-left: 18px; font-size: .86rem; color: var(--ink-2); }
.result .notes li { margin: 5px 0; }
.result details { margin-top: 10px; font-size: .82rem; color: var(--ink-3); }
.result details p { font-family: var(--mono); word-break: break-word; }

.btn {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper-2);
  font: 600 .9rem/1.4 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
/* Stated again on a.btn so the colour survives any context rule that is one
   class more specific than .btn alone. */
a.btn { color: var(--paper-2); }
.btn:hover { opacity: .88; }
a.btn-quiet { color: var(--ink); }
.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

/* --------------------------------------------------------------- banners -- */
.banner {
  border: 1px solid var(--cut);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0 0 20px;
  font-size: .9rem;
  color: var(--cut);
}
.banner.soft {
  margin: 18px 0 0;
  border-color: var(--rule);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- notice -- */
.notice { margin-top: 24px; }
.notice ol { margin: 0; padding-left: 20px; }
.notice li { margin: 0 0 10px; color: var(--ink-2); }
.notice li:last-child { margin-bottom: 0; }
.notice p { margin: 0 0 10px; color: var(--ink-2); }
.notice p:last-child { margin-bottom: 0; }

.rebuild-row { margin: 20px 0 0; text-align: center; }
.rebuild-row:has(button[hidden]) { display: none; }

/* A setting the user has not made yet is not an error in their file. Point at
   the control rather than explaining where it is. */
.field.needs-attention > label { color: var(--cut); }
.field.needs-attention select,
.field.needs-attention input {
  border-color: var(--cut);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cut) 18%, transparent);
}


/* Save and Open sit side by side under a result. */
.result .btn + .btn { margin-left: 10px; }

/* ------------------------------------------------------------------ foot -- */
.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: clamp(32px, 5vw, 56px) 0 clamp(28px, 4vw, 44px);
  margin-top: clamp(32px, 5vw, 64px);
}
.foot-grid { display: grid; gap: 36px; }
@media (min-width: 780px) {
  .foot-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; }
}
.site-foot h2 {
  margin: 0 0 10px;
  font: 600 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.foot-contact p { margin: 0 0 18px; color: var(--ink-2); font-size: .95rem; }
.foot-contact .field > label { display: block; margin: 0 0 6px; font-size: .9rem; font-weight: 600; }
.foot-contact .field > label em { font-weight: 400; font-style: normal; color: var(--ink-3); }
.foot-contact textarea {
  width: 100%;
  font: 15px/1.5 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 10px;
  resize: vertical;
}
.foot-contact input[type="text"],
.foot-contact input[type="email"] {
  width: 100%;
  font: 15px/1.4 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 10px;
}

/* The honeypot. Off-screen rather than display:none — some bots skip fields
   that are not rendered at all, and aria-hidden keeps it out of screen readers. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.foot-status { margin: 12px 0 0; font-size: .9rem; min-height: 1.4em; }
.foot-status.ok { color: var(--ok); }
.foot-status.ko { color: var(--cut); }
.foot-status:empty { min-height: 0; }

.foot-brand { margin: 0 0 6px; font: 600 1rem/1.3 var(--mono); letter-spacing: -.02em; }
.foot-about p { color: var(--ink-2); font-size: .95rem; margin: 0 0 14px; }
.foot-links { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.foot-links li { margin: 0 0 6px; }
/* Links in running text take the accent colour. The :not(.btn) matters: these
   rules sit after .btn in the file and are one class more specific, so without
   it a link styled as a button inside .legal got the link colour on the button
   background — dark blue on near-black, about 2.9:1, which reads as invisible.
   Component styling must not be overridable by a generic element rule. */
a { color: inherit; }
.foot-about a:not(.btn),
.legal a:not(.btn) { color: var(--focus); }

/* ----------------------------------------------------------------- legal -- */
.legal { max-width: 760px; padding-bottom: 40px; }
.legal .notice h2 { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-family: var(--sans); }
.legal ul { margin: 0 0 10px; padding-left: 20px; color: var(--ink-2); }
.legal li { margin: 0 0 8px; }
.legal code { font: .85em var(--mono); background: var(--rule-2); padding: 1px 5px; border-radius: 3px; }
.legal-back { margin: 28px 0 0; font-size: .95rem; }


.notice h3.sub {
  margin: 22px 0 10px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}
.notice ul { margin: 0 0 12px; padding-left: 20px; }
.notice ul li { margin: 0 0 8px; color: var(--ink-2); }

/* ------------------------------------------------------- reference table -- */
/* A wide table must scroll inside its own box; the page body never does. */
.table-wrap { overflow-x: auto; margin: 0 0 14px; }
table.sizes { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 640px; }
table.sizes th, table.sizes td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--rule-2); }
table.sizes thead th {
  border-bottom: 1px solid var(--rule);
  font: 600 11px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
table.sizes td.num { font-family: var(--mono); white-space: nowrap; }
table.sizes tbody tr:hover { background: var(--rule-2); }
.cta { margin: 18px 0 8px; }