:root {
  --bg: #f7f4ee;
  --paper: #fffdf8;
  --ink: #23201b;
  --muted: #6b645a;
  --line: #e2dccf;
  --accent: #8c2f1d;      /* rouge brique : marqueurs, mémoire */
  --accent-2: #2f5d62;    /* vert-bleu Manche */
  --quote-bg: #f1ebdf;
  --table-head: #ece5d7;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 42rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a; --paper: #1b1e22; --ink: #e8e4dc; --muted: #a39c90;
    --line: #2f343a; --accent: #e07a5f; --accent-2: #7fb3b8;
    --quote-bg: #22262b; --table-head: #262b31;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.125rem/1.7 var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-underline-offset: .15em; }
img { max-width: 100%; }
article, .chapo, .credits { overflow-wrap: break-word; }
@media (max-width: 40rem) {
  .table-wrap, figure.fig, .credits { max-width: 100% !important; }
  body { font-size: 1.05rem; }
}

#progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 50; }

/* En-tête */
.hero {
  position: relative; min-height: min(78vh, 46rem); display: flex; align-items: flex-end;
  color: #fff; background: #1d1f22 var(--hero, none) center/cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.82) 100%);
}
.hero-inner { position: relative; max-width: 60rem; margin: 0 auto; padding: 4rem 1.25rem 3.5rem; width: 100%; }
.kicker { font: 600 .8rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin: 0 0 1rem; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.02; margin: 0 0 1rem; font-weight: 700; letter-spacing: -.01em; }
.subtitle { font-size: clamp(1.1rem, 2.4vw, 1.45rem); max-width: 40rem; margin: 0; opacity: .92; font-style: italic; }
.hero-credit { position: absolute; right: .75rem; bottom: .5rem; margin: 0; font: .7rem var(--sans); opacity: .6; }

/* Mise en page */
.layout { display: grid; grid-template-columns: 1fr; max-width: 74rem; margin: 0 auto; padding: 0 1.25rem; gap: 3rem; }
@media (min-width: 64rem) { .layout { grid-template-columns: 15rem minmax(0, 1fr); } }

main { min-width: 0; max-width: calc(var(--measure) + 8rem); padding: 3rem 0 4rem; }
.chapo { font: 400 .95rem/1.6 var(--sans); color: var(--muted); border-left: 3px solid var(--line); padding-left: 1rem; max-width: var(--measure); }
.chapo p { margin: 0; }

article > * { max-width: var(--measure); }
article h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.2; margin: 4.5rem 0 1.25rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line); letter-spacing: -.005em;
}
article h3 { font: 600 1.15rem/1.35 var(--sans); margin: 2.5rem 0 .75rem; color: var(--accent-2); }
article p { margin: 0 0 1.15rem; hyphens: auto; }
article ul, article ol { padding-left: 1.3rem; margin: 0 0 1.25rem; }
article li { margin: .35rem 0; }
article hr { display: none; } /* les chapitres (h2) ont déjà leur filet */
article strong { font-weight: 600; }
article h2:first-child { margin-top: 1.5rem; }

blockquote {
  margin: 2rem 0; padding: 1.25rem 1.5rem; background: var(--quote-bg);
  border-left: 4px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 1.05rem;
}
blockquote p:last-child { margin-bottom: 0; }

/* Tableaux */
.table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; max-width: calc(var(--measure) + 8rem) !important; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font: .88rem/1.45 var(--sans); background: var(--paper); }
th, td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-bottom: 1px solid var(--line); }
th { background: var(--table-head); font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Figures */
figure.fig { margin: 2.5rem 0; max-width: calc(var(--measure) + 8rem) !important; }
figure.fig.narrow { max-width: 26rem !important; }
figure.fig.portrait { max-width: 20rem !important; float: right; margin: .5rem 0 1.5rem 2rem; }
@media (max-width: 40rem) { figure.fig.portrait { float: none; margin: 2rem 0; max-width: 100% !important; } }
figure.fig img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--line); }
figure.fig a.zoom { cursor: zoom-in; display: block; }
figcaption { font: .85rem/1.5 var(--sans); color: var(--muted); margin-top: .6rem; }
figcaption .credit { display: block; font-size: .75rem; opacity: .8; margin-top: .2rem; }
figcaption .credit a { color: inherit; }
article::after { content: ""; display: table; clear: both; }
article h2, article h3 { clear: both; }

/* Sommaire */
#toc { position: sticky; top: 1.5rem; align-self: start; max-height: calc(100vh - 3rem); overflow: auto; padding: 3rem 0 2rem; font: .85rem/1.4 var(--sans); }
.toc-title { font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); margin: 0 0 .75rem; }
#toc ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
#toc li { margin: 0; }
#toc a { display: block; padding: .38rem .6rem; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; }
#toc a:hover { color: var(--ink); }
#toc a.active { color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }

#toc-toggle {
  display: none; position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  font: 600 .85rem var(--sans); padding: .7rem 1.1rem; border-radius: 99px; border: 0;
  background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer;
}
@media (max-width: 63.99rem) {
  #toc-toggle { display: block; }
  #toc {
    position: fixed; inset: auto 0 0 0; top: auto; max-height: 70vh; z-index: 45;
    background: var(--paper); border-top: 1px solid var(--line); padding: 1.25rem 1.25rem 4.5rem;
    transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -8px 24px rgba(0,0,0,.2);
  }
  #toc.open { transform: none; }
}

/* Crédits et pied */
.credits { margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font: .8rem/1.55 var(--sans); color: var(--muted); max-width: calc(var(--measure) + 8rem); }
.credits h2 { font: 600 1rem var(--sans); color: var(--ink); }
.credits li { margin: .35rem 0; }
footer { text-align: center; font: .8rem/1.6 var(--sans); color: var(--muted); padding: 2rem 1.25rem 4rem; border-top: 1px solid var(--line); }

/* Visionneuse */
#lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(10,10,10,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 100%; max-height: 85vh; object-fit: contain; }
#lightbox p { color: #ddd; font: .9rem var(--sans); max-width: 50rem; text-align: center; }

@media print {
  .hero { min-height: auto; color: var(--ink); background: none; }
  .hero::before, #toc, #toc-toggle, #progress, .hero-credit { display: none; }
  .layout { display: block; }
  body { background: #fff; font-size: 11pt; }
  figure.fig { break-inside: avoid; }
}