/* ==========================================================================
   Lisière — feuille commune (jetons, base, styles du document rendu)
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:      #f1efe8;
  --paper-2:    #e7e3d9;
  --paper-3:    #dcd7c9;
  --ink:        #1f2320;
  --ink-2:      #575d54;
  --ink-3:      #62665d;
  --rule:       #cec8b7;
  --accent:     #0e5b4a;
  --accent-2:   #0a4437;
  --accent-pale:#d5e3dd;
  --mark:       #f0d072;
  --shadow:     0 1px 0 rgba(31, 35, 32, .08);

  --font-ui:    "Instrument Sans Variable", "Instrument Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-doc:   "Newsreader Variable", "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --measure:    64ch;
  --radius:     3px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --paper:      #161917;
  --paper-2:    #1d211e;
  --paper-3:    #272c28;
  --ink:        #e9e7de;
  --ink-2:      #a3a99e;
  --ink-3:      #83897e;
  --rule:       #333a35;
  --accent:     #74c4a6;
  --accent-2:   #9bd7bf;
  --accent-pale:#22332c;
  --mark:       #8a6d17;
  --shadow:     none;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

::selection { background: var(--accent-pale); color: var(--ink); }

/* --------------------------------------------------------------------------
   Le document rendu
   -------------------------------------------------------------------------- */

.doc {
  font-family: var(--font-doc);
  font-size: 1.175rem;
  line-height: 1.68;
  font-variant-numeric: oldstyle-nums;
  max-width: var(--measure);
  color: var(--ink);
}

.doc > *:first-child { margin-top: 0; }

.doc p { margin: 0 0 1.15em; }

.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
  scroll-margin-top: 5rem;
  position: relative;
}

.doc h1 { font-size: 2.05rem; margin: 0 0 .8em; letter-spacing: -.025em; }
.doc h2 {
  font-size: 1.45rem;
  margin: 2.2em 0 .7em;
  padding-bottom: .3em;
  border-bottom: 1px solid var(--rule);
}
.doc h3 { font-size: 1.16rem; margin: 1.9em 0 .55em; }
.doc h4 { font-size: 1rem;    margin: 1.7em 0 .5em; }
.doc h5, .doc h6 { font-size: .9rem; margin: 1.5em 0 .5em; color: var(--ink-2); }

.doc .anchor {
  position: absolute;
  left: -1.1em;
  width: 1.1em;
  text-align: center;
  color: var(--ink-3);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
}
.doc h1:hover .anchor, .doc h2:hover .anchor, .doc h3:hover .anchor,
.doc h4:hover .anchor, .anchor:focus-visible { opacity: 1; }

.doc ul, .doc ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.doc li { margin: .3em 0; }
.doc li > ul, .doc li > ol { margin-bottom: .2em; }
.doc li::marker { color: var(--ink-3); }

.doc li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.35em; }
.doc input[type="checkbox"] {
  margin-right: .5em;
  accent-color: var(--accent);
  width: .95em; height: .95em;
  vertical-align: -1px;
}

.doc blockquote {
  margin: 1.5em 0;
  padding: .1em 0 .1em 1.2em;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-style: italic;
}
.doc blockquote p:last-child { margin-bottom: 0; }

.doc code {
  font-family: var(--font-mono);
  font-size: .845em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .1em .32em;
  font-variant-numeric: normal;
}

.doc pre {
  margin: 1.5em 0;
  padding: 1rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow-x: auto;
  position: relative;
}
.doc pre code {
  background: none; border: 0; padding: 0;
  font-size: .82rem; line-height: 1.6;
  display: block;
}

.code-copy {
  position: absolute;
  top: .45rem; right: .45rem;
  padding: .2rem .5rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.doc pre:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--accent); border-color: var(--accent); }

.doc .table-scroll { overflow-x: auto; margin: 1.6em 0; }
.doc table {
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: .9rem;
  width: 100%;
}
.doc th, .doc td {
  text-align: left;
  padding: .5em .8em;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.doc thead th {
  border-bottom: 2px solid var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}
.doc tbody tr:hover { background: var(--paper-2); }

.doc img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 1.6em 0; }
.doc figure { margin: 1.6em 0; }
.doc figcaption, .doc img + em { font-size: .85rem; color: var(--ink-2); }

.doc .img-missing {
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  display: block;
  margin: 1.6em 0;
}

.doc kbd {
  font-family: var(--font-mono);
  font-size: .78em;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: var(--radius);
  padding: .05em .35em;
  background: var(--paper-2);
}

.doc mark { background: var(--mark); color: var(--ink); padding: 0 .1em; border-radius: 2px; }
.doc mark.is-current { outline: 2px solid var(--accent); }

.doc .mermaid { margin: 1.8em 0; text-align: center; }
.doc .mermaid svg { max-width: 100%; height: auto; }

/* Notes de bas de page */
.doc .fn-ref { font-size: .72em; font-family: var(--font-ui); }
.doc .fn-ref a { text-decoration: none; padding: 0 .1em; }
.doc .footnotes {
  margin-top: 3.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .95rem;
  color: var(--ink-2);
}
.doc .footnotes ol { padding-left: 1.2em; }
.doc .fn-back { font-family: var(--font-ui); font-size: .75rem; margin-left: .4em; text-decoration: none; }

/* Cartouche d'en-tête YAML */
.front-matter {
  margin-bottom: 2.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.front-matter h1 {
  font-family: var(--font-ui);
  font-size: 2.1rem;
  line-height: 1.12;
  letter-spacing: -.028em;
  margin: 0 0 .35rem;
}
.front-matter dl {
  margin: .6rem 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .15rem .9rem;
  font-size: .82rem;
  color: var(--ink-2);
}
.front-matter dt { color: var(--ink-3); }
.front-matter dd { margin: 0; }

/* Coloration syntaxique (palette maison) */
.hljs-comment, .hljs-quote { color: var(--ink-3); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: #8a3b8f; font-weight: 500; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #1c6b4f; }
.hljs-number, .hljs-symbol, .hljs-bullet { color: #a05a12; }
.hljs-title, .hljs-section, .hljs-name, .hljs-title.function_ { color: #1f5b96; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #9a5b0b; }
.hljs-type, .hljs-built_in, .hljs-class .hljs-title { color: #2a6f8e; }
.hljs-meta, .hljs-deletion { color: #a03434; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

[data-theme="dark"] .hljs-keyword, [data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-literal, [data-theme="dark"] .hljs-doctag { color: #d6a2e0; }
[data-theme="dark"] .hljs-string, [data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-addition { color: #90cfae; }
[data-theme="dark"] .hljs-number, [data-theme="dark"] .hljs-symbol,
[data-theme="dark"] .hljs-bullet { color: #e0ac6b; }
[data-theme="dark"] .hljs-title, [data-theme="dark"] .hljs-section,
[data-theme="dark"] .hljs-name, [data-theme="dark"] .hljs-title.function_ { color: #8fbde8; }
[data-theme="dark"] .hljs-attr, [data-theme="dark"] .hljs-attribute,
[data-theme="dark"] .hljs-variable { color: #e2b872; }
[data-theme="dark"] .hljs-type, [data-theme="dark"] .hljs-built_in { color: #8ec9d8; }
[data-theme="dark"] .hljs-meta, [data-theme="dark"] .hljs-deletion { color: #e58c8c; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}