:root{
  --ink:#111; --grey:#6b6b6b; --line:#e2e2e2; --gold:#c4a875; --bg:#f6f5f3;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
}

/* ---- barre ---- */
.bar{
  display:flex; align-items:center; gap:16px;
  padding:10px 20px; background:#fff; border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.brand{display:flex; align-items:baseline; gap:12px; min-width:0}
.mark{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); white-space:nowrap}
.doc{font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.counter{font-size:13px; color:var(--grey); font-variant-numeric:tabular-nums; margin-left:auto; white-space:nowrap}
.counter .sep{margin:0 4px; color:var(--line)}
.actions{display:flex; align-items:center; gap:10px; margin-left:auto}
button,a.dl{
  font:inherit; font-size:12px; padding:7px 12px; border-radius:3px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none;
  transition:border-color .15s,color .15s; white-space:nowrap;
}
button:hover,a.dl:hover{border-color:var(--gold); color:#8a7340}
button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---- scène ---- */
#stage{
  flex:1 1 auto; min-height:0; position:relative;
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.flip{width:100%; height:100%; position:relative}
.flip.portrait{max-width:720px; margin:0 auto}

/* pages : contenu pdf2htmlEX mis à l'échelle */
.pg{
  position:relative; overflow:hidden; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.pg .sc{
  position:absolute; top:0; left:0; transform-origin:0 0;
  background:#fff;
}
.pg .in{position:relative}
.pg .pf{box-shadow:none!important}

/* mode lecture continue */
.scroll{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  padding:24px 16px 40px; scroll-behavior:smooth; background:var(--bg);
}
.scroll .pg{margin:0 auto 18px}
.scroll .pg:last-child{margin-bottom:0}

/* ---- pied ---- */
.foot{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:8px 20px; background:#fff; border-top:1px solid var(--line);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey);
}
.foot .gold{flex:1; height:1px; background:var(--line)}

@media (max-width:640px){
  .bar{flex-wrap:wrap; gap:8px; padding:8px 12px}
  .doc{font-size:13px}
  .counter{order:3; margin-left:0}
  .actions{margin-left:auto; gap:6px}
  button,a.dl{font-size:11px; padding:6px 9px}
  #stage{padding:10px}
}