:root{
  --ink:#0a0a0b;
  --line:rgba(200,162,74,.25);
  --hairline:rgba(255,255,255,.07);
  --cream:#f2ecdf;
  --cream-60:rgba(242,236,223,.62);
  --gold:#c8a24a;
  --gold-2:#e7cc82;
  --chrome:246px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1100px 640px at 72% -12%, #17171b 0%, var(--ink) 58%) fixed;
  background-color:var(--ink);
  color:var(--cream);
  font-family:'Jost',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- Barre supérieure ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;height:72px;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3vw,34px);
  background:rgba(10,10,11,.95);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand svg{width:30px;height:auto;flex:none;display:block}
.wordmark{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:23px;
  letter-spacing:.3em;margin-right:-.3em;white-space:nowrap;color:var(--cream);
}
.brand .sep{width:1px;height:22px;background:var(--line);flex:none}
.brand .sub{font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--cream-60);white-space:nowrap}
.tools{display:flex;align-items:center;gap:18px;flex:none}
.counter{font-size:11.5px;letter-spacing:.3em;color:var(--cream-60);white-space:nowrap}
.counter b{color:var(--gold);font-weight:500}
.counter .sl{margin:0 .55em;opacity:.55}
.iconbtn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--cream-60);display:grid;place-items:center;
  cursor:pointer;padding:0;
}
.iconbtn:hover{color:#141210;background:var(--gold);border-color:var(--gold)}
.iconbtn svg{width:15px;height:15px;display:block}
.progress{position:fixed;top:71px;left:0;right:0;height:2px;z-index:31;background:rgba(255,255,255,.05)}
#bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2))}

/* ---------- Scène ---------- */
.stage{
  position:fixed;top:74px;bottom:120px;left:0;right:0;
  display:grid;place-items:center;
  padding:16px clamp(64px,8vw,112px);
}
.book{
  width:min(100%, calc((100dvh - var(--chrome)) * 1.444));
  aspect-ratio:1400/970;
  padding:clamp(7px,1vw,13px);
  background:linear-gradient(160deg,#121214,#0b0b0d);
  border:1px solid var(--line);
  border-radius:5px;
  box-shadow:0 42px 90px -36px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.045);
}
.viewport{
  position:relative;height:100%;overflow:hidden;border-radius:3px;
  background:#0d0d0f;cursor:pointer;
}
/* La page : trois couches superposées, affichées telles quelles, sans aucun effet.
   1) #page0  : image de la page 1 codée en dur (visible par défaut)
   2) #page   : canvas — même moteur de rendu que les vignettes
   3) #pagefb : balise image de secours */
.pgel{
  position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}

.fail{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:#101013;color:var(--cream);text-align:center;
  padding:28px;z-index:6;
}
.fail strong{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fail span{font-size:13px;color:var(--cream);opacity:.85;max-width:720px;line-height:1.7;word-break:break-word}

.hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-60);
  background:rgba(12,12,14,.88);border:1px solid var(--hairline);
  padding:8px 18px 8px 20px;border-radius:99px;
  transition:opacity .8s ease;white-space:nowrap;pointer-events:none;z-index:5;
}
.hint.off{opacity:0}

.nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  border:1px solid var(--line);background:rgba(12,12,14,.78);
  color:var(--cream);display:grid;place-items:center;cursor:pointer;
  z-index:20;padding:0;
}
.nav svg{width:20px;height:20px;display:block}
.nav:hover{background:var(--gold);border-color:var(--gold);color:#141210}
.nav.prev{left:clamp(10px,2.4vw,28px)}
.nav.next{right:clamp(10px,2.4vw,28px)}
.nav[data-can="false"]{opacity:.16;pointer-events:none}

/* ---------- Rail de vignettes ---------- */
.rail{
  position:fixed;left:0;right:0;bottom:0;height:120px;z-index:30;
  background:rgba(9,9,10,.96);
  border-top:1px solid var(--hairline);
  display:flex;align-items:center;
}
#thumbswrap{
  overflow-x:auto;overflow-y:hidden;width:100%;
  padding:17px clamp(16px,3vw,34px);
  scrollbar-width:thin;scrollbar-color:rgba(200,162,74,.5) transparent;
}
#thumbswrap::-webkit-scrollbar{height:6px}
#thumbswrap::-webkit-scrollbar-track{background:transparent}
#thumbswrap::-webkit-scrollbar-thumb{background:rgba(200,162,74,.45);border-radius:99px}
#thumbs{display:flex;gap:10px;width:max-content}
.thumb{
  flex:none;height:84px;aspect-ratio:1400/970;padding:0;
  border:1px solid rgba(255,255,255,.10);border-radius:3px;overflow:hidden;
  background:#000;cursor:pointer;opacity:.45;position:relative;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .idx{
  position:absolute;right:4px;bottom:4px;
  font-size:9px;letter-spacing:.08em;color:#141210;
  background:rgba(200,162,74,.92);border-radius:99px;padding:2px 7px;
  font-weight:500;
}
.thumb:hover{opacity:.85}
.thumb.on{opacity:1;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

/* ---------- Accessibilité / divers ---------- */
.nav:focus-visible,.thumb:focus-visible,.iconbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#src,#tsrc{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:720px){
  :root{--chrome:198px}
  .topbar{height:58px;padding:0 14px}
  .progress{top:57px}
  .wordmark{font-size:18px;letter-spacing:.24em;margin-right:-.24em}
  .brand{gap:10px}
  .brand svg{width:24px}
  .brand .sep,.brand .sub{display:none}
  .tools{gap:12px}
  .counter{font-size:10.5px;letter-spacing:.24em}
  .iconbtn{width:34px;height:34px}
  .stage{top:60px;bottom:98px;padding:10px 8px}
  .book{padding:6px;border-radius:4px}
  .nav{width:44px;height:44px}
  .nav svg{width:17px;height:17px}
  .nav.prev{left:8px}
  .nav.next{right:8px}
  .rail{height:98px}
  #thumbswrap{padding:15px 14px}
  .thumb{height:64px}
  .hint{font-size:9.5px;letter-spacing:.2em;bottom:10px;padding:7px 14px 7px 16px}
}
@media (max-height:520px){
  :root{--chrome:152px}
  .topbar{height:48px}
  .progress{top:47px}
  .stage{top:50px;bottom:76px;padding:8px 56px}
  .rail{height:76px}
  #thumbswrap{padding:12px 16px}
  .thumb{height:48px}
}