/* Recueil des planches — typographie et encres partagées avec l’accueil. */
.top-nav {
  position:sticky; top:0; z-index:100; min-height:88px;
  padding:12px var(--gutter); display:flex; align-items:center;
  justify-content:space-between; gap:24px; background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.top-nav-logo { display:flex; align-items:center; gap:12px; font:400 25px/1.1 var(--serif); letter-spacing:-.04em; white-space:nowrap; min-height:44px; }
.top-nav-links { display:flex; align-items:center; gap:28px; font:400 12px/1.4 var(--sans); text-transform:uppercase; letter-spacing:.12em; }
.top-nav-links a { display:flex; align-items:center; min-height:44px; }
.top-nav-links .active { color:var(--accent-ink); text-decoration:underline; }
a:hover { color:var(--accent-ink); }
.page-wrapper { display:grid; grid-template-columns:250px minmax(0,1fr) 210px; max-width:1480px; margin-inline:auto; }
.sidebar { position:sticky; top:88px; height:calc(100dvh - 88px); overflow-y:auto; padding:32px 18px 36px; border-right:1px solid var(--rule); scrollbar-width:thin; scrollbar-color:var(--rule) var(--paper); counter-reset:chapter; }
.sidebar-home { display:block; min-height:44px; padding:4px 10px 16px; border-bottom:1px solid var(--ink); font:400 25px/1.2 var(--serif); }
.nav-category { margin-top:24px; }
.nav-cat-label { display:block; margin-bottom:8px; padding-inline:10px; font:400 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.nav-item { display:grid; grid-template-columns:30px 1fr; gap:8px; align-items:center; min-height:44px; padding:10px 8px; border-left:2px solid var(--clear); font:400 13px/1.5 var(--sans); counter-increment:chapter; }
.nav-item::before { content:counter(chapter,upper-roman); font-size:10px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.nav-item.active { border-left-color:var(--accent-ink); color:var(--accent-ink); background:var(--paper-2); }
.nav-item.active::before { color:var(--accent-ink); }
.main-content { min-width:0; padding:36px clamp(28px,3vw,48px) 64px; overflow-wrap:anywhere; }
.main-content>p,.main-content>ul,.main-content>ol,.main-content>blockquote { max-width:70ch; }
.chapter-header { margin-bottom:36px; }
.chapter-plate { display:flex; align-items:center; gap:20px; margin-bottom:32px; color:var(--ink-soft); font:400 11px/1.5 var(--sans); letter-spacing:.14em; }
.chapter-plate>span:first-child { min-width:46px; padding:5px 12px; border:1px solid var(--ink-soft); text-align:center; color:var(--ink); }
.chapter-plate::after { content:''; flex:1; border-top:1px solid var(--rule); }
.main-content h1 { font-size:clamp(38px,3.7vw,56px); line-height:1.07; letter-spacing:-.04em; margin-bottom:24px; }
.meta-info { border-bottom:1px solid var(--ink); padding-bottom:18px; color:var(--ink-soft); font:400 11px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.1em; }
.main-content h2 { font-size:clamp(29px,2.5vw,36px); letter-spacing:-.025em; margin:44px 0 20px; padding-top:20px; border-top:1px solid var(--rule); }
.main-content h3 { font-size:25px; margin:32px 0 16px; line-height:1.25; }
.main-content h4 { font:700 17px/1.5 var(--sans); margin:26px 0 12px; }
.main-content p { margin-bottom:20px; }
.main-content ul,.main-content ol { padding-left:24px; margin:16px 0 24px; }
.main-content li { padding-left:4px; margin-bottom:10px; }
.main-content li::marker { color:var(--ink-soft); }
.main-content a { text-decoration:underline; }
.main-content strong { font-weight:700; }
.main-content blockquote { border-left:2px solid var(--ink-soft); padding:16px 24px; margin:24px 0; background:var(--paper-2); }
.main-content blockquote p:last-child { margin-bottom:0; }
/* Horizontal scrolling belongs to the table/code, never to the document. */
.table-scroll { max-width:100%; overflow-x:auto; margin:24px 0; }
.main-content table { width:100%; border-collapse:collapse; font:400 14px/1.6 var(--sans); font-variant-numeric:tabular-nums; }
.main-content th { padding:12px 14px; text-align:left; vertical-align:bottom; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; border-block:1px solid var(--ink); }
.main-content td { padding:12px 14px; vertical-align:top; border-bottom:1px solid var(--rule); min-width:120px; }
.main-content td:first-child,.main-content th:first-child { padding-left:0; }
.main-content code { font:400 .82em/1.65 var(--mono); background:var(--paper-2); padding:.12em .25em; overflow-wrap:anywhere; }
.code-block { margin:24px 0; border-top:3px double var(--ink-soft); }
.main-content pre { overflow-x:auto; max-width:100%; padding:24px; background:var(--night); color:var(--paper); font:400 14px/1.7 var(--mono); tab-size:2; }
.main-content pre code { background:var(--clear); padding:0; font:inherit; overflow-wrap:normal; }
.code-block .k,.code-block .nt { color:var(--code-accent); }
.code-block .na,.code-block .p,.code-block .w { color:var(--code-muted); }
.code-block .s2,.code-block .s,.code-block .ge { color:var(--code-string); }
.code-block .gh,.code-block .gu { color:var(--paper); font-weight:700; }
.code-block :focus-visible,.main-content pre:focus-visible { outline-color:var(--ink); }
.toc-rail { padding:36px 16px 30px 4px; min-width:0; }
.toc { position:sticky; top:120px; max-height:calc(100dvh - 148px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--rule) var(--paper); }
.toc-title { display:block; padding:0 12px 16px; font:400 10px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.toc-link { display:flex; align-items:center; min-height:44px; padding:9px 12px; border-left:1px solid var(--rule); font:400 12px/1.5 var(--sans); color:var(--ink-soft); overflow-wrap:anywhere; }
.toc-h3 { padding-left:24px; font-size:11px; }
.toc-link.toc-active { border-left:2px solid var(--accent-ink); padding-left:11px; color:var(--accent-ink); }
.toc-h3.toc-active { padding-left:23px; }
.prev-next { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; padding-top:24px; border-top:1px solid var(--ink); }
.prev-next-link { display:flex; flex-direction:column; justify-content:center; min-height:80px; padding-block:12px; text-decoration:none!important; }
.prev-next-link.next { text-align:right; }
.prev-next-dir { color:var(--ink-soft); font:400 10px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.13em; margin-bottom:8px; }
.prev-next-title { font-size:21px; line-height:1.25; }
.prev-next-link:hover .prev-next-title { text-decoration:underline; }
.page-footer { padding:30px var(--gutter); border-top:1px solid var(--rule); background:var(--paper-2); color:var(--ink-soft); font:400 12px/1.7 var(--sans); text-align:center; }
.page-footer a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; }
.footer-coordinate { display:flex; justify-content:center; align-items:center; gap:20px; font-size:10px; letter-spacing:.13em; margin-bottom:14px; }
.footer-scale { width:100px; height:7px; border:1px solid var(--ink-soft); border-left-width:25px; border-right-width:25px; }
.sidebar-toggle { display:none; position:fixed; bottom:20px; left:22px; z-index:201; width:48px; height:48px; border:1px solid var(--ink); background:var(--paper); color:var(--ink); }
.sidebar-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; }
.sidebar-toggle[aria-expanded=true] { color:var(--accent-ink); border-color:var(--accent-ink); }
.sidebar-overlay { display:none; }
/* Index: the same twelve chapter links become the table of plates. */
.guide-index .page-wrapper { grid-template-columns:minmax(270px,360px) minmax(0,1fr) 190px; }
.guide-index .sidebar { position:static; height:auto; padding:36px 24px; }
.guide-index .sidebar-home { font-size:32px; }
.guide-index .nav-item { font:400 21px/1.3 var(--serif); padding-block:16px; border-bottom:1px solid var(--rule); grid-template-columns:32px 1fr; }
.guide-index .nav-item::before { font:400 11px/1.5 var(--sans); }
@media(min-width:1600px) { .main-content { padding-inline:48px; } }
@media(max-width:1200px) {
 .page-wrapper { grid-template-columns:230px minmax(0,1fr); }
 .toc-rail { display:none; }
 .guide-index .page-wrapper { grid-template-columns:300px minmax(0,1fr); }
}
@media(max-width:768px) {
 .top-nav { min-height:72px; padding:10px 22px; gap:8px; flex-wrap:wrap; }
 .top-nav-logo { font-size:23px; }
 .top-nav-links { gap:20px; font-size:11px; }
 .page-wrapper,.guide-index .page-wrapper { display:block; }
 .main-content { max-width:100%; padding:30px 22px 48px; }
 .main-content h1 { font-size:40px; }
 .main-content h2 { font-size:29px; }
 .main-content h3 { font-size:25px; }
 .chapter-plate { margin-bottom:28px; gap:14px; }
 .main-content th,.main-content td { padding-inline:12px; }
 .main-content pre { padding:18px; font-size:13px; }
 .sidebar { display:none; position:fixed; top:0; left:0; z-index:200; width:min(320px,85vw); height:100dvh; padding:28px 18px 88px; background:var(--paper); }
 .sidebar.open { display:block; }
 body.sidebar-open { overflow:hidden; }
 .sidebar-toggle { display:grid; place-items:center; }
 .sidebar-overlay.open { display:block; position:fixed; inset:0; z-index:199; background:var(--night); opacity:.45; }
 .guide-index .sidebar { display:block; width:100%; border-right:0; border-bottom:1px solid var(--ink); padding:30px 22px; }
 .guide-index .nav-category { margin-top:24px; }
 .guide-index .nav-item { padding-block:14px; }
 .guide-index .sidebar-toggle { display:none; }
 .page-footer { padding-bottom:90px; }
 .guide-index .page-footer { padding-bottom:30px; }
}
@media(max-width:480px) {
 .top-nav { padding-block:8px 4px; }
 .top-nav-links { width:100%; justify-content:space-between; border-top:1px solid var(--rule); gap:12px; }
 html { scroll-padding-top:132px; }
 .main-content h1 { font-size:36px; }
 .prev-next { gap:16px; }
 .prev-next-title { font-size:18px; }
 .footer-coordinate { gap:12px; }
 .footer-scale { width:60px; border-left-width:15px; border-right-width:15px; }
}