@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --bg:#0c0b09; --surface:#111009; --text:#cec3aa; --muted:#7a7264;
  --accent:#8b7355; --gold:#c9a84c; --divider:#2a2820;
  --fs:1.12rem;
}
html[data-theme="sepia"]{
  --bg:#f3ead8; --surface:#ece1cb; --text:#43382a; --muted:#8a7a62;
  --accent:#8b6f4e; --gold:#9a7a2c; --divider:#d8cbb2;
}
html[data-theme="clair"]{
  --bg:#fbf8f2; --surface:#f3efe6; --text:#2b2620; --muted:#8c8478;
  --accent:#7c6248; --gold:#8d6f1f; --divider:#e4ddd0;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:'EB Garamond', Georgia, serif;
  font-size:var(--fs); line-height:1.85;
  transition:background .4s ease, color .4s ease;
}
::selection{background:var(--gold); color:var(--bg)}

/* barre de progression */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);z-index:60;transition:width .1s linear}

/* entête */
header.bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1.1rem;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--divider);
}
header.bar a, header.bar button{
  color:var(--muted);background:none;border:none;cursor:pointer;
  font-family:'EB Garamond',serif;font-size:.95rem;text-decoration:none;
  letter-spacing:.06em; padding:.2rem .5rem;
}
header.bar a:hover, header.bar button:hover{color:var(--gold)}
.bar-title{font-family:'Playfair Display',serif;font-size:.85rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}

/* panneau réglages */
#settings{
  position:fixed;top:3.2rem;right:.8rem;z-index:55;display:none;
  background:var(--surface);border:1px solid var(--divider);border-radius:8px;
  padding:1rem 1.2rem;min-width:240px;box-shadow:0 12px 40px rgba(0,0,0,.45);
}
#settings.open{display:block}
#settings h4{font-family:'Playfair Display',serif;font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin:.6rem 0 .45rem}
#settings h4:first-child{margin-top:0}
.seg{display:flex;gap:.4rem}
.seg button{
  flex:1;background:none;border:1px solid var(--divider);border-radius:6px;color:var(--text);
  font-family:'EB Garamond',serif;font-size:1rem;padding:.3rem 0;cursor:pointer;
}
.seg button:hover{border-color:var(--gold)}
.seg button.on{border-color:var(--gold);color:var(--gold)}

/* contenu */
#content{max-width:700px;margin:0 auto;padding:7rem 1.4rem 4rem}
.chapter-number{font-family:'Playfair Display',serif;text-align:center;color:var(--muted);
  letter-spacing:.5rem;font-size:.95rem;text-transform:uppercase;margin-bottom:.8rem}
h1.chapter-title{font-family:'Playfair Display',serif;text-align:center;font-weight:400;
  font-size:clamp(1.6rem,3.5vw,2.5rem);line-height:1.3;margin-bottom:1rem;color:var(--text)}
.chapter-ornament{text-align:center;color:var(--gold);font-size:1.2rem;margin:1.4rem 0 3rem;letter-spacing:.8rem}
.para{margin:0 0 1.15em;text-align:justify;hyphens:auto;text-indent:1.6em}
.para.dialogue{font-style:italic;text-indent:0;padding-left:1.1em;border-left:2px solid var(--divider);text-align:left}
blockquote.quote{
  font-family:'Playfair Display',serif;font-style:italic;color:var(--gold);
  margin:2.4rem auto;padding:1.5rem 1.4rem;max-width:94%;
  border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);
}
blockquote.quote p{margin:0 0 1em;text-align:left;line-height:1.9;font-size:.98em}
blockquote.quote p:last-child{margin-bottom:0}
.inscription{font-family:'Playfair Display',serif;text-align:center;letter-spacing:.22em;
  color:var(--text);margin:2.6rem 0;font-size:.98rem;line-height:2}
.scene-break{text-align:center;color:var(--gold);letter-spacing:.8rem;margin:2.6rem 0;font-size:1rem}
.scene-break.tiret{letter-spacing:0;font-size:1.3rem;color:var(--accent)}
h2.section{font-family:'Playfair Display',serif;font-weight:400;text-align:center;
  font-size:1.05rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  margin:3rem 0 2rem}
em{font-style:italic}

/* révélation au défilement */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1;transform:none}
.speaking{background:color-mix(in srgb, var(--gold) 14%, transparent);border-radius:4px}

/* fin de chapitre */
.chapter-end{margin-top:4rem;text-align:center}
.chapter-end-ornament{color:var(--gold);letter-spacing:.6rem;margin-bottom:1rem}
.chapter-end-text{font-family:'Playfair Display',serif;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
nav.chapnav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.6rem}
nav.chapnav a{
  color:var(--accent);text-decoration:none;font-size:1rem;letter-spacing:.05em;
  border:1px solid var(--divider);border-radius:8px;padding:.6rem 1.1rem;flex:1;text-align:center;
  transition:border-color .3s, color .3s;
}
nav.chapnav a:hover{border-color:var(--gold);color:var(--gold)}
nav.chapnav .spacer{flex:1}

.colophon .credit{font-size:.78rem;color:var(--muted);font-style:italic}

/* lecteur audio */
#player{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  padding:.55rem 1rem;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--divider);
}
#player button{
  background:none;border:1px solid var(--divider);border-radius:999px;color:var(--text);
  font-family:'EB Garamond',serif;font-size:.95rem;padding:.35rem 1.05rem;cursor:pointer;
  letter-spacing:.05em;transition:border-color .3s,color .3s;
}
#player button:hover{border-color:var(--gold);color:var(--gold)}
#player button.on{border-color:var(--gold);color:var(--gold)}
#player .hint{color:var(--muted);font-size:.8rem;letter-spacing:.05em}
#player.native audio{width:min(560px,70vw);height:36px}
#player.native .hint{font-size:.85rem}

/* ── couverture / sommaire ── */
.cover{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}
.cover .saga{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,7vw,4.4rem);letter-spacing:.6rem;text-transform:uppercase;color:var(--text)}
.cover .tome{margin-top:1.2rem;color:var(--muted);letter-spacing:.35em;text-transform:uppercase;font-size:clamp(.7rem,1.2vw,.85rem)}
.cover .ornament{color:var(--gold);margin:2rem 0;font-size:1.4rem;letter-spacing:.8rem}
.cover .cover-title{font-family:'Playfair Display',serif;font-style:italic;
  font-size:clamp(1.4rem,3.4vw,2.2rem);color:var(--gold);margin-bottom:2.2rem;letter-spacing:.04em}
.cover .note{color:var(--muted);font-style:italic;max-width:360px;font-size:.95rem;line-height:1.7}
.cover a.enter{
  margin-top:2.6rem;color:var(--gold);text-decoration:none;border:1px solid var(--accent);
  padding:.8rem 2.2rem;border-radius:999px;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;
  transition:background .3s,color .3s;
}
.cover a.enter:hover{background:var(--gold);color:var(--bg)}
#toc{max-width:700px;margin:0 auto;padding:4rem 1.4rem 6rem}
#toc h2{font-family:'Playfair Display',serif;text-align:center;font-weight:400;letter-spacing:.35em;text-transform:uppercase;font-size:1rem;color:var(--muted);margin-bottom:2.6rem}
.toc-item{display:flex;align-items:baseline;gap:1rem;padding:.85rem .4rem;border-bottom:1px solid var(--divider);text-decoration:none;color:var(--text);transition:color .25s}
.toc-item:hover{color:var(--gold)}
.toc-item .num{font-family:'Playfair Display',serif;color:var(--muted);min-width:3.2rem;font-size:.85rem;letter-spacing:.12em}
.toc-item:hover .num{color:var(--gold)}
.toc-item .t{font-size:1.12rem}
footer.colophon{text-align:center;color:var(--muted);font-size:.8rem;letter-spacing:.12em;padding:3rem 1rem 4rem}

@media (max-width:600px){
  #content{padding:5.6rem 1.2rem 8rem}
}
#settings select{
  width:100%;background:var(--bg);color:var(--text);border:1px solid var(--divider);
  border-radius:6px;padding:.35rem .5rem;font-family:'EB Garamond',serif;font-size:.95rem;
}
#settings .tip{color:var(--muted);font-size:.78rem;line-height:1.5;margin-top:.5rem;font-style:italic}