:root {
  color-scheme: dark;
  --bg: #0b1015;
  --panel: rgba(13, 19, 25, .86);
  --text: #f5f7f8;
  --muted: #aeb8c1;
  --line: rgba(255,255,255,.11);
  --brand: #79b8e0;
  --blue: #2f79b7;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin:0; width:100%; height:100%; min-height:100%; background:var(--bg); color:var(--text); }
body {
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
}
button,a { font:inherit; }
button { color:inherit; }
.viewer-app { height:100vh; height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }

.viewer-toolbar {
  min-height:60px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:8px clamp(10px,2.4vw,28px);
  border-bottom:1px solid var(--line);
  background:rgba(10,15,20,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:30;
}
.toolbar-actions { justify-self:end; display:flex; align-items:center; gap:7px; }
.toolbar-title {
  min-width:0;
  max-width:36vw;
  color:#dbe3e9;
  font-size:12px;
  font-weight:760;
  letter-spacing:.07em;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.toolbar-btn {
  min-height:40px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  border-radius:999px;
  color:var(--text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease;
}
.icon-btn { width:40px; min-width:40px; padding:0; font-size:19px; }
.zoom-label { min-width:62px; font-size:11px; }
.mode-btn { min-width:78px; font-size:11px; font-weight:780; white-space:nowrap; }
.mode-btn[aria-pressed="true"] { background:rgba(47,121,183,.28); border-color:rgba(121,184,224,.44); }
.toolbar-btn:hover:not(:disabled) { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.19); }
.toolbar-btn:active:not(:disabled) { transform:scale(.96); }
.toolbar-btn:disabled { opacity:.38; cursor:not-allowed; }
.toolbar-btn:focus-visible,.nav-arrow:focus-visible,.book-viewport:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }

.reader-main {
  flex:1;
  min-height:0;
  display:grid;
  place-items:center;
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(92,119,139,.26) 0, rgba(27,36,45,.18) 37%, rgba(10,14,18,.10) 62%, rgba(7,10,13,.86) 100%),
    linear-gradient(180deg,#172029 0,#0c1116 100%);
}
/* Le message de chargement et le lecteur partagent volontairement la même
   cellule de grille. Le message ne doit jamais réduire la hauteur disponible
   pour le premier calcul du flipbook. */
.reader-main > .reader-message,
.reader-main > .reader {
  grid-area:1 / 1;
  width:100%;
  height:100%;
  min-height:0;
}

.reader-message {
  min-height:300px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:15px;
  color:var(--muted);
  text-align:center;
  padding:28px;
}
.reader-message p { margin:0; line-height:1.55; max-width:650px; }
.spinner { width:26px; height:26px; border:2px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.reader { width:100%; height:100%; min-height:0; display:block; }
.book-viewport {
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 68px 36px;
  touch-action:pan-y;
  overscroll-behavior:contain;
}
.zoom-layer {
  width:max-content;
  height:max-content;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-origin:center center;
  will-change:transform;
  transition:transform .18s ease;
}
.book-frame {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--book-w, 900px);
  height:var(--book-h, 650px);
  max-width:none;
  max-height:none;
  transition:width .18s ease,height .18s ease;
  isolation:isolate;
}
/* Ombre indépendante : on évite filter:drop-shadow sur le livre entier,
   qui pouvait aplatir/rasteriser les images et les rendre floues. */
.book-frame::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:4%; right:4%; bottom:-22px; height:42px;
  border-radius:50%;
  background:rgba(0,0,0,.42);
  filter:blur(20px);
  pointer-events:none;
}
.pageflip-root {
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0 auto;
  user-select:none;
  -webkit-user-select:none;
  background:transparent !important;
  overflow:visible;
}
/*
   StPageFlip 2.0.7 applique en mode paysage un min-height égal à
   2 × la hauteur d'une page. Dans notre lecteur ce comportement créait
   une grande zone blanche et faisait descendre le bas du livre hors écran.
   Le cadre a déjà les bonnes dimensions : on force donc le wrapper du
   moteur à les respecter exactement.
*/
.pageflip-root.stf__wrapper {
  width:var(--book-w, 900px) !important;
  min-width:var(--book-w, 900px) !important;
  max-width:var(--book-w, 900px) !important;
  height:var(--book-h, 650px) !important;
  min-height:var(--book-h, 650px) !important;
  max-height:var(--book-h, 650px) !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  transform:none;
}
.pageflip-root .stf__block {
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:transparent !important;
  overflow:visible;
}

/* Mode HTML StPageFlip : chaque page reste une vraie image WebP dans le DOM. */
.flip-page {
  position:relative;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:transparent !important;
  border:0;
  box-shadow:none;
}
.flip-page-image {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  /* Ne jamais étirer l'image : le ratio WebP d'origine est toujours conservé. */
  object-fit:contain;
  object-position:center center;
  image-rendering:auto;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}

/* Liens externes : aucun bouton n'est posé sur les images.
   Un déclencheur compact vit dans l'interface du lecteur, hors du livre. */
.links-trigger {
  position:absolute;
  right:14px;
  bottom:9px;
  z-index:28;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background: #123F66;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
 color: #ffffff;
  font-size:11px;
  font-weight:780;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:background .18s ease,border-color .18s ease,opacity .16s ease,transform .18s ease;
}
.links-trigger:hover { background: #2F79B7; border-color:rgba(121,184,224,.34); transform:translateY(-1px); }
.links-trigger:active { transform:translateY(0) scale(.98); }
.links-trigger:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.links-trigger[aria-expanded="true"] { background:rgba(47,121,183,.30); border-color:rgba(121,184,224,.48); }
.links-trigger-icon { font-size:14px; line-height:1; color:#bfe1f6; }
.links-trigger-count {
  min-width:19px;
  height:19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border-radius:999px;
  background:rgba(121,184,224,.18);
  color:#dff2ff;
  font-size:10px;
  line-height:1;
}
.links-trigger[aria-expanded="true"] {
  background: #2F79B7;
}

.links-panel {
  position:absolute;
  right:14px;
  bottom:52px;
  z-index:40;
  width:min(390px, calc(100% - 28px));
  max-height:min(64%, 520px);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:rgba(18,63,102,.97);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:#eef4f7;
}
.links-panel-head {
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;;
  gap:16px;
  padding:16px 16px 13px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(18,63,102,.97);
}
.links-panel-kicker {
  margin-bottom:3px;
  color:#8fb8d4;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.links-panel h2 { margin:0; font-size:15px; line-height:1.25; font-weight:780; }
.links-panel-close {
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:rgba(255,255,255,.055);
  color:#e8eef2;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.links-panel-close:hover { background:rgba(255,255,255,.11); }
.links-panel-close:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.links-panel-body { padding:8px 10px 12px; }
.links-panel-group { padding:8px 4px 10px; }
.links-panel-group + .links-panel-group { border-top:1px solid rgba(255,255,255,.08); }
.links-panel-page {
  margin:0 4px 7px;
  color:#aab8c3;
  font-size:10px;
  font-weight:820;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.links-panel-list { display:grid; gap:6px; }
.links-panel-link {
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#f4f8fa;
  text-decoration:none;
  font-size:12px;
  font-weight:690;
  line-height:1.3;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.links-panel-link:hover { background:rgba(47,121,183,.20); border-color:rgba(121,184,224,.30); transform:translateX(2px); }
.links-panel-link:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.links-panel-link-icon { flex:0 0 auto; color:#9bd0f0; font-size:15px; }

/* Pendant un feuilletage, les contrôles de ressources s'effacent : seule
   l'image du livre participe visuellement à l'animation. */
.reader.is-turning .links-trigger,
.reader.is-turning .links-panel { opacity:0; pointer-events:none; }

/* Les pages manipulées par StPageFlip restent transparentes : visuellement,
   seule l'image WebP se plie et se déplace. */
.pageflip-root .stf__item,
.pageflip-root .flip-page {
  background:transparent !important;
}
.pageflip-root .stf__parent,
.pageflip-root .stf__wrapper,
.pageflip-root .stf__block {
  background:transparent !important;
}
/* Pas de backface-visibility/translateZ forcé sur le livre au repos :
   cela permet au navigateur de garder le texte des WebP plus net. */

.nav-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:25;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  background:rgba(11,17,22,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.88);
  font-size:37px;
  line-height:.8;
  cursor:pointer;
  opacity:.75;
  transition:opacity .18s ease,transform .18s ease,background .18s ease;
}
.nav-prev { left:14px; }
.nav-next { right:14px; }
.nav-arrow:hover:not(:disabled) { opacity:1; background:rgba(25,36,47,.92); transform:translateY(-50%) scale(1.06); }
.nav-arrow:disabled { opacity:0; pointer-events:none; }
.page-counter {
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  z-index:25;
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(8,13,17,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#cbd3da;
  font-size:11px;
  font-weight:740;
  letter-spacing:.04em;
  white-space:nowrap;
  pointer-events:none;
}
.zoom-hint {
  position:absolute;
  left:50%;
  bottom:48px;
  transform:translateX(-50%);
  z-index:25;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(8,13,17,.70);
  color:#d3dbe1;
  font-size:11px;
  padding:7px 12px;
  pointer-events:none;
}

.book-viewport.is-pannable { cursor:grab; touch-action:none; }
.book-viewport.is-panning { cursor:grabbing; user-select:none; -webkit-user-select:none; }
.book-viewport.is-panning .zoom-layer { transition:none; }
.reader.is-turning .toolbar-btn,
.reader.is-turning .nav-arrow { cursor:wait; }

html:fullscreen .book-viewport,
html:-webkit-full-screen .book-viewport { padding-top:4px; padding-bottom:32px; }

@media (max-width:760px) {
  .viewer-toolbar {
    min-height:56px;
    grid-template-columns:auto 1fr;
    gap:7px;
    padding:7px 9px;
  }
  .toolbar-title { display:none; }
  .toolbar-actions { min-width:0; gap:5px; }
  .toolbar-btn { min-height:38px; padding:0 11px; }
  .back-btn span:last-child { display:none; }
  .back-btn { width:38px; padding:0; }
  .icon-btn { width:38px; min-width:38px; }
  .mode-btn { display:none; }
  .zoom-label { min-width:52px; padding:0 8px; }
  .book-viewport { padding:12px 18px 46px; }
  .nav-arrow { width:42px; height:42px; font-size:32px; background:rgba(11,17,22,.48); }
  .nav-prev { left:5px; }
  .nav-next { right:5px; }
  .page-counter { bottom:9px; }
  .zoom-hint { bottom:45px; max-width:86%; text-align:center; }
  .links-trigger { right:8px; bottom:8px; min-height:32px; padding:0 9px; }
  .links-panel {
    left:8px;
    right:8px;
    bottom:48px;
    width:auto;
    max-height:58%;
    border-radius:16px;
  }
  .links-panel-head { padding:14px 14px 12px; }
  .links-panel-body { padding:7px 8px 10px; }
  .links-panel-link { min-height:44px; font-size:12px; }
}

@media (max-width:390px) {
  .toolbar-actions { gap:3px; }
  .toolbar-btn { min-height:36px; }
  .icon-btn { width:35px; min-width:35px; }
  .zoom-label { min-width:48px; font-size:10px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}