/* ============================================================
   LES ENFANTS DE LA NEIGE — Typographie du lecteur
   ============================================================ */

:root{
  --ink:#070a10;
  --ink-2:#0c1220;
  --bone:#e7e3d8;
  --bone-2:#cfc9b7;
  --bone-3:#8a8572;
  --frost:#aac3d6;
  --blood:#6b1212;
  --blood-bright:#9a1a1a;
  --parch:#f1ead7;
  --parch-ink:#1b1a14;
  --parch-ink-2:#3b3a2f;
  --rule:rgba(231,227,216,.22);

  --serif:'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --display:'Cinzel', serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;

  --measure: 64ch;
  --leading: 1.72;
}

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

html,body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--serif);
  font-size:19px;
  line-height:var(--leading);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1, "liga" 1, "onum" 1;
}

html[data-theme="light"] body{
  background:var(--parch);
  color:var(--parch-ink);
}

/* ------------------------------------------------------------
   Nuit étoilée et grain, couches de fond
   ------------------------------------------------------------ */
.page-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1400px 900px at 50% 110%, #13202e 0%, #070b12 40%, #02040a 100%);
}
html[data-theme="light"] .page-bg{
  background:
    radial-gradient(1200px 800px at 50% 100%, #ecdfbd 0%, #efe6cb 40%, #e9dfc4 100%);
}

.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  mix-blend-mode:overlay;opacity:.18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-theme="light"] .grain{opacity:.12;mix-blend-mode:multiply}

/* Flocons silencieux */
.flakes{position:fixed;inset:0;z-index:-1;pointer-events:none}
.flakes span{
  position:absolute;top:-5%;
  width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.5) 45%, transparent 72%);
  filter:blur(.35px);
  animation:fall linear infinite;
  opacity:0;
}
html[data-theme="light"] .flakes span{
  background:radial-gradient(circle, #fff 0%, rgba(80,70,50,.22) 50%, transparent 75%);
  filter:blur(.4px);
}
@keyframes fall{
  0%{transform:translate3d(0,-8vh,0);opacity:0}
  10%{opacity:.7}
  90%{opacity:.7}
  100%{transform:translate3d(var(--dx,0),110vh,0);opacity:0}
}

/* ------------------------------------------------------------
   Barre haute — navigation discrète
   ------------------------------------------------------------ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  font-family:var(--display);
  color:#aeb7c0;
  letter-spacing:.28em;
  font-size:10px;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(3,6,12,.86) 0%, rgba(3,6,12,.5) 60%, transparent 100%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
}
html[data-theme="light"] .topbar{
  color:#6e6651;
  background:linear-gradient(180deg, rgba(239,230,203,.92) 0%, rgba(239,230,203,.5) 60%, transparent 100%);
}
.topbar > *{pointer-events:auto}
.topbar .brand{display:flex;align-items:center;gap:10px}
.topbar .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blood-bright);
  box-shadow:0 0 14px var(--blood-bright);
}
.topbar .actions{display:flex;gap:18px;align-items:center}
.topbar a,.topbar button{
  background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:4px 2px;border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.topbar a:hover,.topbar button:hover{color:var(--bone);border-bottom-color:rgba(231,227,216,.35)}
html[data-theme="light"] .topbar a:hover,html[data-theme="light"] .topbar button:hover{color:var(--parch-ink)}

/* Barre de progression */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:81;
  background:transparent;
}
.progress::before{
  content:"";display:block;height:100%;
  width:var(--p,0%);
  background:linear-gradient(90deg, var(--blood), var(--blood-bright));
  box-shadow:0 0 12px rgba(154,26,26,.5);
  transition:width .1s linear;
}

/* ------------------------------------------------------------
   Couloir central — une colonne, des marges, du silence
   ------------------------------------------------------------ */
.book{
  max-width:var(--measure);
  margin:0 auto;
  padding:140px 28px 160px;
  position:relative;
  z-index:1;
}

/* ------------------------------------------------------------
   Titre du livre (TOC)
   ------------------------------------------------------------ */
.cover-title{
  text-align:center;
  padding-top:40px;
  padding-bottom:60px;
}
.cover-title .small{
  font-family:var(--display);
  font-size:11px;letter-spacing:.5em;
  color:var(--bone-3);
  text-transform:uppercase;
  margin-bottom:24px;
}
.cover-title h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(42px, 7vw, 74px);
  line-height:.96;
  color:#f3eedd;
  letter-spacing:-.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.35), 0 0 40px rgba(140,170,190,.12);
}
html[data-theme="light"] .cover-title h1{color:#1b1a14;text-shadow:none}
.cover-title .the{
  display:block;
  font-style:italic;font-weight:400;
  font-size:.42em;letter-spacing:.18em;
  margin:8px 0;
  color:var(--bone-2);
}
html[data-theme="light"] .cover-title .the{color:var(--parch-ink-2)}
.cover-title .author{
  font-family:var(--display);
  font-size:12px;letter-spacing:.42em;
  color:var(--bone-2);
  margin-top:36px;
  text-transform:uppercase;
}
html[data-theme="light"] .cover-title .author{color:var(--parch-ink-2)}
.cover-title .tag{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px, 2vw, 19px);
  color:var(--bone-2);
  max-width:44ch;margin:36px auto 0;
  line-height:1.5;
}
html[data-theme="light"] .cover-title .tag{color:#4a4636}

.rule-center{
  display:block;width:120px;height:1px;
  margin:28px auto;
  background:linear-gradient(90deg, transparent, rgba(231,227,216,.5), transparent);
}
html[data-theme="light"] .rule-center{background:linear-gradient(90deg, transparent, rgba(27,26,20,.4), transparent)}

/* ------------------------------------------------------------
   Table des matières
   ------------------------------------------------------------ */
.toc{
  margin-top:80px;
  padding-top:40px;
  border-top:1px solid var(--rule);
}
html[data-theme="light"] .toc{border-top-color:rgba(27,26,20,.25)}
.toc h2{
  font-family:var(--display);
  font-size:11px;letter-spacing:.4em;
  color:var(--bone-3);
  text-transform:uppercase;
  text-align:center;
  margin-bottom:36px;
}
.toc ol{list-style:none;counter-reset:ch;display:flex;flex-direction:column;gap:2px}
.toc li{counter-increment:ch}
.toc a{
  display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;
  gap:18px;
  padding:16px 8px;
  color:inherit;text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:background .3s, color .3s, padding-left .3s;
}
html[data-theme="light"] .toc a{border-bottom-color:rgba(27,26,20,.15)}
.toc a:hover{
  background:rgba(231,227,216,.03);
  padding-left:16px;
}
html[data-theme="light"] .toc a:hover{background:rgba(27,26,20,.03)}
.toc .num{
  font-family:var(--display);
  font-size:11px;letter-spacing:.3em;
  color:var(--bone-3);
  text-transform:uppercase;
}
.toc .num::before{content:"Ch. "counter(ch, decimal-leading-zero)}
.toc .name{
  font-family:var(--serif);
  font-weight:500;font-size:22px;
  color:#f0e9d3;font-style:italic;
}
html[data-theme="light"] .toc .name{color:#1b1a14}
.toc .date{
  font-family:var(--display);
  font-size:10px;letter-spacing:.3em;
  color:var(--bone-3);
  text-transform:uppercase;
}

/* ------------------------------------------------------------
   Chapitre — typographie du texte
   ------------------------------------------------------------ */
.chapter-head{
  text-align:center;
  padding:60px 0 40px;
}
.chapter-head .num{
  font-family:var(--display);
  font-size:11px;letter-spacing:.5em;
  color:var(--bone-3);
  text-transform:uppercase;
}
.chapter-head .ornament{
  display:block;width:40px;height:1px;
  margin:22px auto;
  background:var(--bone-3);
  position:relative;
}
.chapter-head .ornament::before,
.chapter-head .ornament::after{
  content:"";position:absolute;top:50%;width:6px;height:6px;
  background:var(--bone-3);border-radius:50%;transform:translateY(-50%);
}
.chapter-head .ornament::before{left:-16px}
.chapter-head .ornament::after{right:-16px}
.chapter-head h1{
  font-family:var(--serif);
  font-weight:500;font-style:italic;
  font-size:clamp(32px, 5vw, 46px);
  line-height:1.08;
  color:#f3eedd;
  letter-spacing:-.005em;
}
html[data-theme="light"] .chapter-head h1{color:#14130d}
.chapter-head .date-place{
  font-family:var(--display);
  font-size:10px;letter-spacing:.4em;
  color:var(--bone-3);
  text-transform:uppercase;
  margin-top:24px;
}

/* Corps */
.prose{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  font-size:19px;
  line-height:1.78;
  color:var(--bone);
}
html[data-theme="light"] .prose{color:var(--parch-ink)}

.prose p{margin-bottom:1.15em}
.prose p + p{text-indent:1.4em}
.prose p.noindent{text-indent:0}

/* Lettrine */
.prose .dropcap::first-letter{
  font-family:var(--serif);
  font-weight:500;
  font-size:5.4em;
  float:left;
  line-height:.9;
  padding:.05em .12em 0 0;
  margin-top:.02em;
  color:#f0e6c8;
  font-style:normal;
}
html[data-theme="light"] .prose .dropcap::first-letter{color:#1b1a14}

/* Citation / flashback / passage de mémoire */
.prose blockquote{
  margin:2em 2em;
  padding:.2em 0 .2em 1.2em;
  border-left:1px solid var(--bone-3);
  font-style:italic;
  color:var(--bone-2);
  font-size:.96em;
}
html[data-theme="light"] .prose blockquote{color:#3b3a2f;border-left-color:#8a8572}

/* Flashback : texte centré, léger, présent narratif */
.prose .flashback{
  margin:2.2em auto;
  max-width:42ch;
  text-align:center;
  font-style:italic;
  color:var(--bone-2);
  font-size:.98em;
  line-height:1.5;
}
html[data-theme="light"] .prose .flashback{color:#4a4636}

/* Ligne de dialogue à l'ancienne, tiret cadratin */
.prose .dash::before{content:"— "}

/* Ornement de section */
.prose .ornament{
  display:block;
  margin:2.6em auto;
  text-align:center;
  color:var(--bone-3);
  font-size:18px;letter-spacing:1.2em;
  padding-left:1.2em;
  font-family:var(--display);
}
.prose .ornament::after{content:"◆ ◆ ◆"}

/* Italique accentué */
.prose em{color:#efe7cd;font-style:italic}
html[data-theme="light"] .prose em{color:#0f0e08}

/* Souligné à la plume */
.prose .strike{color:#efe7cd;font-weight:600;font-style:italic}
html[data-theme="light"] .prose .strike{color:#0f0e08}

/* Pied de chapitre */
.chapter-foot{
  margin-top:90px;
  padding:40px 0;
  border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;
}
html[data-theme="light"] .chapter-foot{border-top-color:rgba(27,26,20,.2)}
.chapter-foot a{
  font-family:var(--display);
  font-size:10px;letter-spacing:.35em;
  color:var(--bone-2);
  text-decoration:none;text-transform:uppercase;
  display:flex;flex-direction:column;
  transition:color .25s;
  gap:6px;
}
.chapter-foot a:hover{color:#fff}
html[data-theme="light"] .chapter-foot a{color:#4a4636}
html[data-theme="light"] .chapter-foot a:hover{color:#1b1a14}
.chapter-foot .label{color:var(--bone-3);font-size:9px;letter-spacing:.42em}
.chapter-foot .title{
  font-family:var(--serif);
  font-style:italic;
  text-transform:none;
  font-size:14px;letter-spacing:.01em;
}
.chapter-foot .prev{text-align:left}
.chapter-foot .next{text-align:right}
.chapter-foot .toc-link{text-align:center}
.chapter-foot .toc-link .label{display:block}
.chapter-foot .toc-link .title{font-size:11px;letter-spacing:.35em;font-family:var(--display);text-transform:uppercase;font-style:normal;color:inherit}

/* ------------------------------------------------------------
   Menu TOC flottant
   ------------------------------------------------------------ */
.toc-panel{
  position:fixed;top:0;right:0;bottom:0;width:min(420px, 88vw);
  background:#06090e;
  border-left:1px solid rgba(231,227,216,.12);
  box-shadow:-40px 0 80px -20px rgba(0,0,0,.9);
  z-index:90;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
  padding:28px 26px 40px;
}
html[data-theme="light"] .toc-panel{background:#f4ebcf;border-left-color:rgba(27,26,20,.15)}
.toc-panel[open="true"]{transform:translateX(0)}
.toc-panel h3{
  font-family:var(--display);
  font-size:11px;letter-spacing:.4em;color:var(--bone-3);
  text-transform:uppercase;margin-bottom:22px;
}
.toc-panel ol{list-style:none;counter-reset:cp}
.toc-panel li{counter-increment:cp}
.toc-panel a{
  display:grid;grid-template-columns:42px 1fr;
  gap:10px;padding:10px 0;
  color:var(--bone-2);text-decoration:none;
  border-bottom:1px dashed rgba(231,227,216,.12);
  font-size:15px;
}
html[data-theme="light"] .toc-panel a{color:var(--parch-ink);border-bottom-color:rgba(27,26,20,.15)}
.toc-panel a:hover{color:#fff}
html[data-theme="light"] .toc-panel a:hover{color:#000}
.toc-panel a span.k{
  font-family:var(--display);font-size:10px;letter-spacing:.25em;color:var(--bone-3);
}
.toc-panel a span.k::before{content:counter(cp,decimal-leading-zero)}
.toc-panel a span.t{font-family:var(--serif);font-style:italic;font-size:16px}

.toc-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);z-index:85;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.toc-overlay[open="true"]{opacity:1;pointer-events:auto}

/* ------------------------------------------------------------
   Epigraphe du livre
   ------------------------------------------------------------ */
.epigraph{
  margin:80px auto;
  max-width:48ch;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:var(--bone-2);
  line-height:1.55;
}
html[data-theme="light"] .epigraph{color:#3b3a2f}
.epigraph cite{
  display:block;
  margin-top:16px;
  font-style:normal;
  font-family:var(--display);
  font-size:10px;letter-spacing:.38em;
  color:var(--bone-3);
  text-transform:uppercase;
}

/* ------------------------------------------------------------
   Responsive / lisibilité
   ------------------------------------------------------------ */
@media (max-width:720px){
  html,body{font-size:17.5px}
  .book{padding:110px 18px 120px}
  .prose{font-size:17.5px;line-height:1.75}
  .chapter-head h1{font-size:28px}
  .cover-title h1{font-size:44px}
  .toc a{grid-template-columns:48px 1fr auto;gap:12px;padding:14px 4px}
  .toc .name{font-size:18px}
}
@media print{
  .topbar,.progress,.toc-panel,.toc-overlay,.chapter-foot,.flakes,.grain,.page-bg{display:none !important}
  html,body{background:#fff;color:#111}
  .prose{font-size:12pt;line-height:1.5;color:#111}
  .book{max-width:none;padding:0;margin:0}
  .chapter-head{page-break-before:always}
  .chapter-head h1{color:#111}
}

/* Focus visible */
a:focus-visible,button:focus-visible{
  outline:1px solid var(--frost);
  outline-offset:4px;
}

/* Sélection */
::selection{background:rgba(154,26,26,.55);color:#fff}
html[data-theme="light"] ::selection{background:rgba(27,26,20,.25)}