/* Orderflow Atlas — feuille de style unique.
   Mêmes jetons que la DA des planches (tools/atlas-render/lib/theme.js) :
   papier chaud, encre pétrole, une teinte de marque, un ocre d'annotation. */

:root {
  --paper: #FCFBF8;
  --plate: #FFFFFF;
  --ink: #16323D;
  --ink-soft: #5E7078;
  --ink-faint: #93A3A9;
  --rule: #D9E1E4;
  --rule-soft: #EDF1F2;
  --brand: #0E7C86;
  --brand-deep: #0A5A62;
  --brand-wash: #EAF3F4;
  --accent: #B5701C;
  --accent-soft: #F7EEE1;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10222A; --plate: #16303A; --ink: #E8EFF1; --ink-soft: #A9BCC3;
    --ink-faint: #7E9199; --rule: #2A4650; --rule-soft: #1E3B45;
    --brand: #4FB3BC; --brand-deep: #7FCBD2; --brand-wash: #17383F;
    --accent: #D99B4A; --accent-soft: #33281A;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 "Inter", "Segoe UI", -apple-system, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ── Entête / pied ─────────────────────────────────────────────────────── */
header.site {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
  justify-content: space-between;
  max-width: var(--measure); margin: 0 auto; padding: 1.5rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.brand { font-weight: 650; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
header.site nav a { margin-left: 1rem; font-size: 0.94rem; color: var(--ink-soft); }
header.site nav a:first-child { margin-left: 0; }

footer.site {
  max-width: var(--measure); margin: 0 auto; padding: 1.75rem 1.25rem 3rem;
  border-top: 1px solid var(--rule); color: var(--ink-faint); font-size: 0.86rem;
}
footer.site p { margin: 0.4rem 0; }
.disclaimer { color: var(--ink-soft); }

/* Les trois pages légales doivent être atteignables depuis la navigation de
   CHAQUE page : c'est une exigence écrite de la revue de domaine du prestataire
   de paiement, pas une convention esthétique. D'où le pied, et pas une page
   « mentions » isolée. */
footer.site nav.legal {
  margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule-soft);
}
footer.site nav.legal a { margin-right: 1.1rem; color: var(--ink-soft); }

/* ── Typographie ───────────────────────────────────────────────────────── */
h1 { font-size: 1.95rem; line-height: 1.2; letter-spacing: -0.02em; margin: 2rem 0 0.75rem; }
h2 { font-size: 1.2rem; line-height: 1.3; margin: 2.25rem 0 0.5rem; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
a { color: var(--brand-deep); text-underline-offset: 2px; }
a:hover { color: var(--accent); }
code { font: 0.9em/1 "JetBrains Mono", Consolas, monospace; background: var(--rule-soft); padding: 0.1em 0.3em; border-radius: 3px; }
strong { font-weight: 650; }

.lede { font-size: 1.1rem; color: var(--ink-soft); }
.crumb { font-size: 0.86rem; margin: 1.5rem 0 0; }
.aka { font-size: 0.9rem; color: var(--ink-faint); margin-top: -0.4rem; }
.small { font-size: 0.86rem; }
.updated { font-variant-numeric: tabular-nums; }

/* ── Le bloc-réponse : autonome, extractible, en tête ───────────────────── */
.answer {
  background: var(--brand-wash);
  border-left: 3px solid var(--brand);
  padding: 1rem 1.15rem; margin: 1.25rem 0 2rem; border-radius: 0 4px 4px 0;
}
.answer p { margin: 0; font-size: 1.05rem; }

/* ── L'encadré « le piège » — la signature éditoriale du produit ────────── */
.trap {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  padding: 0.4rem 1.15rem 1rem; margin: 2rem 0; border-radius: 4px;
}
.trap h2 { margin-top: 1rem; color: var(--accent); font-size: 1.05rem; }
.trap p:last-child { margin-bottom: 0; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
dl.faq { margin: 0.5rem 0 0; }
dl.faq dt { font-weight: 650; margin-top: 1.1rem; }
dl.faq dd { margin: 0.35rem 0 0; color: var(--ink-soft); }

/* ── Listes ────────────────────────────────────────────────────────────── */
ul { padding-left: 1.1rem; margin: 0 0 1rem; }
li { margin: 0.35rem 0; }
ul.index, ul.related { list-style: none; padding-left: 0; }
ul.index li, ul.related li {
  padding: 0.5rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.96rem;
}
ul.index a, ul.related a { font-weight: 600; }

/* ── Impression ────────────────────────────────────────────────────────── */
@media print {
  header.site nav, footer.site .small { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .answer, .trap { border: 1px solid #999; background: none; }
}