:root{--bg:#0f1115;--panel:#171a21;--line:#272c38;--ink:#e8ecf4;--muted:#9aa3b2;--accent:#7dd3fc;--accent2:#a3e635}
*{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:16px}
body{margin:0 auto;max-width:760px;background:var(--bg);color:var(--ink);
  font:18px/1.7 ui-serif,Georgia,"Times New Roman",serif;-webkit-text-size-adjust:100%;
  padding:calc(20px + env(safe-area-inset-top)) 20px calc(80px + env(safe-area-inset-bottom))}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.nav-top{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.9rem;margin:0 0 1.5em}
.nav-top a{color:var(--muted)}
h1.title{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:1.9rem;line-height:1.2;
  letter-spacing:-.02em;margin:.2em 0 .6em}
h1,h2,h3,h4{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.25;
  letter-spacing:-.01em;margin:1.8em 0 .5em}
h1{font-size:1.55rem;border-bottom:1px solid var(--line);padding-bottom:.3em}
h2{font-size:1.28rem;color:#dfe5f0}
h3{font-size:1.1rem;color:#c7cedb}
h4{font-size:1rem;color:var(--muted)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.4em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--panel);
  padding:2px 6px;border-radius:6px}
pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto}
pre code{background:none;padding:0}
blockquote{margin:1em 0;padding:.3em 0 .3em 16px;border-left:3px solid var(--accent);color:#cdd5e3}
table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.95em;font-family:ui-sans-serif,system-ui,sans-serif}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--panel)}
hr{border:none;border-top:1px solid var(--line);margin:2.2em 0}
img{max-width:100%}
nav#TOC{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 20px;margin:1.5em 0;
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:.95rem}
nav#TOC::before{content:"Sommaire";display:block;font-weight:700;color:var(--accent);margin-bottom:6px}
nav#TOC ul{margin:.2em 0;padding-left:1.1em}
nav#TOC>ul{padding-left:0;list-style:none}
nav#TOC li{margin:.35em 0}
nav#TOC a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:1px 0}
.readbar{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:1em 0;font-family:ui-sans-serif,system-ui,sans-serif}
.readbar-row{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;margin-bottom:8px;gap:10px}
.readcount{color:var(--ink);font-weight:600}
.readbar .resume{color:var(--accent2);font-size:.85rem;white-space:nowrap;text-decoration:underline}
.readprog{height:6px;background:var(--bg);border-radius:999px;overflow:hidden}
.readprog>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s}
nav#TOC li.readli{display:flex;align-items:flex-start;gap:8px;list-style:none}
.readchk{flex:0 0 16px;width:16px;height:16px;margin-top:4px;border:1.5px solid var(--muted);border-radius:5px;cursor:pointer;position:relative}
.readchk.on{background:var(--accent2);border-color:var(--accent2)}
.readchk.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #06210f;border-width:0 2px 2px 0;transform:rotate(45deg)}
nav#TOC a.readdone{color:var(--muted)}