/* Overrides on top of vendored Pico.css. Pico styles semantic HTML;
   only project-specific pieces live here. */

/* Self-hosted fonts (site/assets/vendor/fonts/) — no external requests. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('vendor/fonts/inter-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('vendor/fonts/source-serif-4-latin-700.woff2') format('woff2');
}

/* FacturPass theme: "confiance institutionnelle" (navy/gold). Raw values
   live in --fp-* variables; --pico-* variables reference them so Pico's own
   components (buttons, forms, cards, links) pick up the theme automatically. */
/* Pico defines its own light-theme variables on the higher-specificity
   selector `:root:not([data-theme=dark])` (see pico.min.css); a plain
   `:root` here would lose that cascade fight, so we match its specificity. */
/* Fixed brand navy for the header band — stays constant across light/dark
   themes (a logo band, not a themed surface), unlike --fp-accent which
   flips to gold in dark mode. No Pico variable of this name exists, so a
   plain :root is fine here (no specificity fight to match). */
:root {
  --fp-brand-navy: #0b2545;
}

:root:not([data-theme=dark]), [data-theme=light] {
  --fp-accent: #0b2545;
  --fp-accent-hover: #163a63;
  --fp-accent-text: #ffffff;
  --fp-accent-focus-ring: rgba(201, 162, 39, 0.35);
  --fp-accent-underline: rgba(11, 37, 69, 0.5);
  --fp-ink: #10233d;
  --fp-gold: #c9a227;
  --fp-bg: #f4f6f8;
  --fp-card-bg: #ffffff;
  --fp-border: #dbe2e8;
  --fp-muted: #5b6b80;
  --fp-badge-bg: #eef1f4;
  --fp-badge-fg: #0b2545;
  --fp-badge-border: #dbe2e8;

  --pico-font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-primary: var(--fp-accent);
  --pico-primary-background: var(--fp-accent);
  --pico-primary-border: var(--fp-accent);
  --pico-primary-hover: var(--fp-accent-hover);
  --pico-primary-hover-background: var(--fp-accent-hover);
  --pico-primary-inverse: var(--fp-accent-text);
  --pico-primary-focus: var(--fp-accent-focus-ring);
  --pico-primary-underline: var(--fp-accent-underline);
  --pico-background-color: var(--fp-bg);
  --pico-color: var(--fp-ink);
  --pico-card-background-color: var(--fp-card-bg);
  --pico-card-border-color: var(--fp-border);
  --pico-border-color: var(--fp-border);
  --pico-muted-border-color: var(--fp-border);
  --pico-muted-color: var(--fp-muted);
  --pico-form-element-background-color: var(--fp-card-bg);
  --pico-form-element-border-color: var(--fp-border);
  --pico-form-element-focus-color: var(--fp-accent-focus-ring);
}

@media (prefers-color-scheme: dark) {
  /* Matches the specificity of Pico's own dark-mode selector
     `:root:not([data-theme])` (see pico.min.css) so our overrides win. */
  :root:not([data-theme]) {
    --fp-accent: #d9b64a;
    --fp-accent-hover: #e8c968;
    --fp-accent-text: #10233d;
    --fp-accent-focus-ring: rgba(217, 182, 74, 0.35);
    --fp-accent-underline: rgba(217, 182, 74, 0.5);
    --fp-ink: #e7ecf2;
    --fp-gold: #d9b64a;
    --fp-bg: #0a1830;
    --fp-card-bg: #102544;
    --fp-border: #24405f;
    --fp-muted: #93a4bb;
    --fp-badge-bg: #152a47;
    --fp-badge-fg: #cfe0f5;
    --fp-badge-border: #24405f;
  }
}

h1, h2, h3, legend {
  font-family: 'Source Serif 4', Georgia, serif;
}
/* Pico styles legend via the higher-specificity `fieldset legend` selector
   (see pico.min.css) — match it so weight/color aren't lost to the cascade. */
fieldset legend {
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fp-accent);
}

.brand {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.brand-icon { flex: 0 0 auto; }
header.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--fp-brand-navy);
  color: #ffffff;
  /* Pico's .container sets padding-left/right: 0 — invisible while the
     header had no background, but flush-against-the-edge once it does. */
  padding: 1rem 1.5rem;
  border-radius: var(--pico-border-radius);
}
header.container nav a {
  color: #ffffff;
  text-decoration: underline;
}
.lead { color: var(--pico-muted-color); }

.hero {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--fp-border);
}
.trust-badges {
  list-style: none;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.trust-badges li {
  /* Pico sets `list-style: square` directly on `li` (see pico.min.css);
     `list-style: none` on the parent `.trust-badges` alone doesn't win
     against that direct declaration, so it's repeated here too. */
  list-style: none;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--fp-badge-bg);
  color: var(--fp-badge-fg);
  border: 1px solid var(--fp-badge-border);
}

.row { display: flex; gap: .5rem; align-items: flex-end; }
.row > * { flex: 1; }
.row > button { flex: 0 0 auto; width: auto; }

#form fieldset {
  background: var(--fp-card-bg);
  border: 1px solid var(--fp-border);
  border-radius: var(--pico-border-radius);
  padding: 1.2rem 1.2rem .6rem;
  margin-bottom: 1.2rem;
}
#form button.primary {
  background: var(--fp-accent);
  color: var(--fp-accent-text);
  border-color: var(--fp-accent);
  font-weight: 600;
}

#prefill-status { min-height: 1.2em; font-size: .85rem; color: var(--pico-muted-color); margin: 0 0 .5rem; }
#form-errors {
  border: 1px solid #c0392b; color: #c0392b;
  border-radius: var(--pico-border-radius); padding: .6rem .8rem; margin-bottom: 1rem;
}

#output {
  background: var(--fp-card-bg);
  border: 1px solid var(--fp-gold);
  border-radius: var(--pico-border-radius);
  padding: 1.2rem;
}
#view-card dl {
  background: var(--fp-card-bg);
  border: 1px solid var(--fp-border);
  border-radius: var(--pico-border-radius);
  padding: 1rem;
}
pre {
  background: var(--fp-badge-bg);
  border: 1px solid var(--fp-border);
  border-radius: var(--pico-border-radius);
}

.qr { text-align: center; margin: 1rem 0; }
/* White backing so the QR stays scannable in dark theme. */
.qr svg { max-width: 320px; height: auto; background: #fff; padding: 8px; border-radius: 8px; }

.field { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.field:last-child { border-bottom: 0; }
.field dt { color: var(--pico-muted-color); font-size: .85rem; }
.field dd { margin: 0; display: flex; gap: .5rem; align-items: center; font-weight: 600; word-break: break-all; text-align: right; }
.field dd button { font-size: .8rem; padding: .25rem .5rem; width: auto; margin: 0; }
.card-name { margin-bottom: 0; }
.hint { font-size: .85rem; color: var(--pico-muted-color); }

@media print {
  header, footer, form, .hero, .hint, details, #btn-print, [data-copy] { display: none !important; }
  #output { border: 1px solid #000; border-radius: 0; page-break-inside: avoid; }
}