* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  height: 100%;
  overflow: hidden;
}
body {
  background: #3a3a3a url('background.jpg') center center / cover no-repeat fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
}
#loading {
  color: #eee;
  font-size: 1.1em;
  text-align: center;
}
#progress-bar-wrap {
  width: 300px;
  height: 6px;
  background: #555;
  border-radius: 3px;
  margin-top: 14px;
}
#progress-bar {
  height: 100%;
  background: #4a9eff;
  border-radius: 3px;
  width: 0%;
  transition: width 0.2s;
}
#flipbook-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
/* Zone livre + flèches latérales */
#book-area {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Barre du bas : recherche + outils */
.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
#flipbook {
  position: relative;
  /*box-shadow: 0 10px 40px rgba(0,0,0,0.6);*/
  background: url('background.jpg') center center / cover;
}
.stf__parent {
  background: transparent !important;
}
.stf__block {
  /*background: #888!important;*/
}
.stf__wrapper {
  background: transparent !important;
}
/* Les pages contiennent un canvas + un calque texte superposé */
.page {
  position: relative;
  display: block;
  overflow: hidden;
  box-shadow: 10px 10px 15px rgba(0,0,0,0.6);
}
.page canvas {
  display: block;
}
/* Calque texte PDF.js transparent positionné sur le canvas */
.textLayer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.textLayer span {
  color: transparent;
  position: absolute;
  white-space: pre;
  transform-origin: 0% 0%;
}
/* Canvas de surbrillance au-dessus du textLayer */
.hl-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 3;
}
/* Flèches Précédent / Suivant : cercles flottants */
#prev, #next {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  padding: 0;
  user-select: none;
}
#prev:hover, #next:hover { background: rgba(255,255,255,0.38); transform: scale(1.1); }
/* Barre du bas */
.bottom-bar button {
  padding: 7px 16px;
  background: #555;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.88em;
  transition: background 0.2s;
}
.bottom-bar button:hover { background: #888; }
#page-info { color: #ccc; font-size: 0.88em; min-width: 70px; text-align: center; }
#search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
#search-input {
  padding: 7px 14px;
  border-radius: 20px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.88em;
  width: 160px;
  outline: none;
  transition: background 0.2s;
}
#search-input::placeholder { color: rgba(0,0,0,0.5); }
#search-input:focus { background: rgba(255,255,255,0.25); }
#search-btn {
  padding: 7px 14px;
  background: #4a9eff !important;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.88em;
  transition: background 0.2s;
}
#search-btn:hover { background: #2277dd !important; }
#search-btn:disabled { background: #555 !important; cursor: default; opacity: 0.6; }
#search-results {
  color: #aee;
  font-size: 0.8em;
  min-width: 50px;
  text-align: center;
}
#search-nav { display: none; gap: 4px; }
#search-nav button {
  padding: 5px 10px;
  background: #444 !important;
  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.82em;
}
#search-nav button:hover { background: #666 !important; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  html, body { height: auto; overflow-y: auto; overflow-x: hidden; }
  #flipbook-wrap { padding: 10px; gap: 8px; }
  #book-area { gap: 6px; }
  #prev, #next { width: 36px; height: 36px; font-size: 1em; }
  #search-input { width: 120px; }
  .bottom-bar { gap: 6px; }
  .bottom-bar button { padding: 6px 10px; font-size: 0.78em; }
}

/* ── Planches (miniatures) ────────────────────────────────── */
#thumbs-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 200;
  flex-direction: column;
  align-items: center;
}
#thumbs-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 60px;
  position: relative;
  flex-shrink: 0;
}
#thumbs-header span {
  color: #ccc;
  font-size: 0.95em;
}
#thumbs-close {
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 42px; height: 42px;
  font-size: 1.3em;
  cursor: pointer;
  transition: background 0.2s;
}
#thumbs-close:hover { background: rgba(255,255,255,0.35); }
#thumbs-grid {
  overflow-y: auto;
  padding: 10px 30px 30px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
  justify-items: center;
}
.thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.thumb-item canvas {
  border: 3px solid transparent;
  border-radius: 4px;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
  box-shadow: 0 3px 12px rgba(0,0,0,0.5);
}
.thumb-item:hover canvas {
  border-color: #4a9eff;
  transform: scale(1.04);
}
.thumb-item.active canvas { border-color: #ffcc00; }
.thumb-label {
  color: #aaa;
  font-size: 0.75em;
}
#thumbs-btn {
  padding: 7px 16px;
  background: #666;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.2s;
}
#thumbs-btn:hover { background: #888; }

/* ── Zoom modal ─────────────────────────────────────────── */
#zoom-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
#zoom-close {
  position: absolute;
  top: 16px; right: 20px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 42px; height: 42px;
  font-size: 1.3em;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
#zoom-close:hover { background: rgba(255,255,255,0.35); }
#zoom-hint {
  position: absolute;
  bottom: 16px;
  color: rgba(255,255,255,0.45);
  font-size: 0.78em;
  pointer-events: none;
  user-select: none;
}
#zoom-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
}
#zoom-wrap.grabbing { cursor: grabbing; }
#zoom-content {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  display: flex;
  gap: 0;
  user-select: none;
}
#zoom-content canvas {
  display: block;
  box-shadow: 0 6px 30px rgba(0,0,0,0.7);
}
#zoom-btn {
  padding: 7px 16px;
  background: #666;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.2s;
}
#zoom-btn:hover { background: #888; }