/* Flipbook – styles du lecteur (généré par Flipbook Builder).
   Pour changer le fond ou les couleurs, modifier assets/theme.css (pas ce fichier). */
:root {
  --flipbook-bg: radial-gradient(ellipse at 50% 45%, #2b2927, #1c1b1a 70%);
  --flipbook-bg-color: #1c1b1a;
  --flipbook-ui: #a49d95;
  --flipbook-ui-hover: #ffffff;
  --flipbook-arrow: #ffffff;
  --flipbook-accent: #2bafb8;
  --flipbook-accent-text: #ffffff;
  --flipbook-strip-bg: rgba(128, 128, 128, .45);
  --flipbook-strip-width: 56px;
  --flipbook-bar-bg: transparent;
  --flipbook-edge-arrow: #ffffff;
  --flipbook-edge-arrow-bg: rgba(255, 255, 255, .12);
  --flipbook-spine-line: .22;
  --flipbook-spine-shadow: .30;
  --flipbook-header-bg: #141312;
  --flipbook-header-text: #ffffff;
  --flipbook-header-height: 56px;
  --flipbook-logo-height: 36px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--flipbook-bg-color);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.viewer {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--flipbook-bg);
  background-color: var(--flipbook-bg-color);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.viewer:fullscreen { width: 100vw; height: 100vh; }

/* ---------- barre du haut (logo) ---------- */
.topbar {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--flipbook-header-height); padding: 8px 20px;
  background: var(--flipbook-header-bg); color: var(--flipbook-header-text);
}
.topbar .logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.topbar .logo img { display: block; height: var(--flipbook-logo-height); width: auto; max-width: 240px; object-fit: contain; }
.topbar .logo-text { font-weight: 800; font-size: 20px; letter-spacing: .04em; }

/* ---------- livre ---------- */
/* marge latérale = flèche ronde (16 + 48 px) + bande grise (56 px) */
.stage { position: relative; min-height: 0; display: flex; padding: 24px 124px 8px; overflow: hidden; }
/* la bibliothèque donne au wrapper une hauteur calculée sur le ratio : il débordait sur la barre du bas */
.book .stf__wrapper { padding-bottom: 0 !important; height: 100% !important; }
.book-wrap { flex: 1; height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.book { width: 100%; height: 100%; }
.book:not(.ready) { visibility: hidden; }
.book .page { background: #fff; overflow: hidden; }
.book .page img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.book .page.loaded img { opacity: 1; }
.book .page:not(.loaded) {
  background: #fff linear-gradient(100deg, #fff 30%, #f1ece6 50%, #fff 70%) 0 0 / 300% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- pliure centrale : trait + ombres de reliure (bombé) ---------- */
.book .page::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1;
  width: 14%; pointer-events: none;
}
.book .page.--left::after {
  right: 0;
  background: linear-gradient(to left,
    rgba(0, 0, 0, var(--flipbook-spine-line)) 0, rgba(0, 0, 0, var(--flipbook-spine-line)) 1px,
    rgba(0, 0, 0, var(--flipbook-spine-shadow)) 1px,
    rgba(0, 0, 0, calc(var(--flipbook-spine-shadow) * .45)) 12%,
    rgba(0, 0, 0, calc(var(--flipbook-spine-shadow) * .12)) 40%,
    rgba(0, 0, 0, 0) 100%);
}
.book .page.--right::after {
  left: 0;
  background: linear-gradient(to right,
    rgba(0, 0, 0, var(--flipbook-spine-line)) 0, rgba(0, 0, 0, var(--flipbook-spine-line)) 1px,
    rgba(0, 0, 0, var(--flipbook-spine-shadow)) 1px,
    rgba(0, 0, 0, calc(var(--flipbook-spine-shadow) * .45)) 12%,
    rgba(0, 0, 0, calc(var(--flipbook-spine-shadow) * .12)) 40%,
    rgba(0, 0, 0, 0) 100%);
}
/* reflet léger sur le bord extérieur, pour le volume */
.book .page::before {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 3%; pointer-events: none;
}
.book .page.--left::before { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0)); }
.book .page.--right::before { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0)); }
/* pas de pliure en mode une page (mobile), ni sur la couverture seule */
.book.is-portrait .page::after, .book.is-portrait .page::before,
.book .page.page-cover::after, .book .page.page-cover::before { display: none; }

/* curseur normal sur le flipbook */
.book, .book * { cursor: default; }

/* zones cliquables reprises du PDF */
.hot { position: absolute; z-index: 2; display: block; cursor: pointer !important; border-radius: 4px; transition: background .15s, box-shadow .15s; }
.hot:hover, .hot:focus-visible { background: color-mix(in srgb, var(--flipbook-accent) 12%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--flipbook-accent) 70%, transparent); outline: none; }

/* repli sans bibliothèque */
.book.static { overflow-y: auto; }
.book.static .page { position: relative; max-width: 700px; margin: 0 auto 16px; }
.book.static .page img { height: auto; }

/* ---------- bandes latérales : fond gris de la hauteur du catalogue + flèche ----------
   Positionnées par le script contre le bord extérieur des pages ; invisibles
   tant que la souris ne passe pas sur le côté de la page ou sur la bande. */
.arrow {
  position: absolute; top: 0; left: 0; z-index: 10;
  width: var(--flipbook-strip-width); height: 0;
  border: 0; padding: 0; cursor: default;
  background: var(--flipbook-strip-bg); color: var(--flipbook-arrow);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s;
}
.arrow svg { width: 26px; height: 52px; stroke-width: 2.6; transition: transform .2s; }
.arrow.prev { border-radius: 4px 0 0 4px; }
.arrow.next { border-radius: 0 4px 4px 0; }
.arrow:hover, .arrow:focus-visible,
.stage.hover-prev .arrow.prev, .stage.hover-next .arrow.next { opacity: 1; outline: none; }
.arrow.prev:hover svg, .stage.hover-prev .arrow.prev svg { transform: translateX(-3px); }
.arrow.next:hover svg, .stage.hover-next .arrow.next svg { transform: translateX(3px); }
.arrow:disabled, .arrow.unplaced { opacity: 0 !important; pointer-events: none; }

/* ---------- flèches rondes sur les bords de l'écran (toujours visibles) ---------- */
.edge-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 11;
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
  background: var(--flipbook-edge-arrow-bg); color: var(--flipbook-edge-arrow);
  display: grid; place-items: center; transition: background .15s, color .15s, opacity .15s;
}
.edge-arrow svg { width: 26px; height: 26px; }
.edge-arrow:hover { background: var(--flipbook-accent); color: #fff; }
.edge-arrow.prev { left: 16px; }
.edge-arrow.next { right: 16px; }
.edge-arrow:disabled { opacity: .2; pointer-events: none; }

/* ---------- barre du bas ---------- */
/* 3 zones : [Télécharger] à gauche | navigation au centre | plein écran à droite */
.dock {
  position: relative; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 8px 16px; color: var(--flipbook-ui); background: var(--flipbook-bar-bg);
}
.dock-left { justify-self: start; }
.dock-nav { display: flex; align-items: center; gap: 2px; }
.dock-right { justify-self: end; }
/* numéro de page modifiable : taper 24 + Entrée pour aller à la page 24 */
.counter { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px; font-variant-numeric: tabular-nums; }
#page-input {
  width: 64px; height: 32px; padding: 0 6px; text-align: center;
  font: inherit; font-variant-numeric: tabular-nums; color: inherit;
  background: rgba(127, 127, 127, .14); border: 1px solid rgba(127, 127, 127, .45); border-radius: 6px;
}
#page-input:hover { border-color: currentColor; }
#page-input:focus { outline: none; border-color: var(--flipbook-accent); box-shadow: 0 0 0 2px var(--flipbook-accent); }
/* bouton Télécharger : en haut à droite, plein, couleur de la marque */
.download {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; flex: none;
  border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; border: 0;
  background: var(--flipbook-accent); color: var(--flipbook-accent-text);
  transition: filter .15s, transform .15s;
}
.download:hover { filter: brightness(1.1); }
.download:active { transform: translateY(1px); }
.tool {
  display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 8px;
  background: transparent; color: var(--flipbook-ui);
}
.tool:hover { background: rgba(127, 127, 127, .18); color: var(--flipbook-ui-hover); }
.tool:disabled { opacity: .3; pointer-events: none; }
.sep { width: 1px; height: 20px; background: currentColor; opacity: .3; margin: 0 8px; }

/* ---------- zoom ---------- */
.zoom { position: absolute; inset: 0; z-index: 30; background: rgba(15, 14, 13, .97); }
.zoom[hidden] { display: none; }
.zoom-scroll { width: 100%; height: 100%; overflow: auto; cursor: zoom-out; text-align: center; overscroll-behavior: contain; }
.zoom-scroll img { display: inline-block; width: min(1400px, 250vw); max-width: none; height: auto; background: #fff; user-select: none; -webkit-user-drag: none; }
.zoom-close {
  position: absolute; top: 14px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center;
}
.zoom-close:hover { background: var(--flipbook-accent); }

/* écrans tactiles : pas de survol, bandes toujours visibles mais discrètes */
@media (hover: none) {
  .arrow { opacity: .6; }
}
@media (max-width: 700px) {
  .stage { padding: 10px 6px 4px; }
  .edge-arrow { display: none; } /* sur téléphone : les bandes latérales suffisent */
  .arrow svg { width: 18px; height: 36px; }
  .dock { gap: 4px; padding: 6px 8px 10px; }
  .tool { width: 32px; }
  .counter { font-size: 14px; margin: 0 2px; gap: 4px; }
  #page-input { width: 56px; font-size: 16px; }   /* 16 px : évite le zoom auto d'iOS au focus */
  .download { padding: 0 10px 0 8px; gap: 5px; font-size: 13px; }
  .topbar { padding: 6px 12px; min-height: 48px; }
  .topbar .logo img { height: calc(var(--flipbook-logo-height) * .85); }
}