/* ── Flipbook container ─────────────────────────────────────────────── */
#flipbook-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 2rem auto;
  width: 100%;
}

#flipbook-loader {
  font-style: italic;
  color: #888;
  padding: 2rem;
}

/* ── Stages ─────────────────────────────────────────────────────────── */
.flipbook-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: visible;
}

#flipbook-normal-stage {
  max-width: 992px;
}

#flipbook-fullscreen-stage {
  display: none;
  max-width: none;
}

.flipbook {
  box-shadow: 0 4px 24px rgb(0 0 0 / 25%);
  flex-shrink: 0;
}

/* ── Contrôles ──────────────────────────────────────────────────────── */
#flipbook-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

#flipbook-controls button {
  padding: 0.5rem 1.25rem;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  border-radius: 4px;
  transition: background 0.2s;
}

#flipbook-controls button:hover {
  background: #f0f0f0;
}

#btn-prev:disabled,
#btn-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #f5f5f5;
}

#btn-prev:disabled:hover,
#btn-next:disabled:hover {
  background: #f5f5f5;
}

#flipbook-page-info {
  font-size: 0.9rem;
  min-width: 60px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #555;
  white-space: nowrap;
}

#flipbook-page-input {
  width: 4.2rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  font: inherit;
}

/* ── Bouton téléchargement ──────────────────────────────────────────── */
#btn-download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid #2c72c1;
  background: #2c72c1;
  color: #fff;
  font-size: 0.95rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  margin-left: 1rem;
}

#btn-download:hover {
  background: #003f7a;
  border-color: #003f7a;
}

/* ── Slider de navigation ───────────────────────────────────────────── */
#flipbook-slider-wrap {
  width: min(100%, 992px);
  padding: 0 0.25rem;
}

#flipbook-page-slider {
  --slider-progress: 0%;
  --slider-color: #2c72c1;
  --slider-track: #fff;
  --slider-border: #2c72c1;

  width: 100%;
  height: 16px;
  cursor: pointer;
  appearance: none;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-appearance: none;
  background: transparent;
}

/* Chrome / Edge / Brave / Vivaldi / Opera / Safari */
#flipbook-page-slider::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid var(--slider-border);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--slider-color) 0%,
    var(--slider-color) var(--slider-progress),
    var(--slider-track) var(--slider-progress),
    var(--slider-track) 100%
  );
}

#flipbook-page-slider::-webkit-slider-thumb {
  appearance: none;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--slider-color);
}

/* Firefox */
#flipbook-page-slider::-moz-range-track {
  height: 8px;
  border: 1px solid var(--slider-border);
  border-radius: 999px;
  background: var(--slider-track);
}

#flipbook-page-slider::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--slider-color);
}

#flipbook-page-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--slider-color);
}

#flipbook-page-slider:focus {
  outline: none;
}

#flipbook-page-slider:focus-visible {
  outline: 2px solid var(--slider-color);
  outline-offset: 3px;
}

/* ── Mode plein écran ───────────────────────────────────────────────── */
/* stylelint-disable selector-no-vendor-prefix, selector-pseudo-class-no-unknown */
#flipbook-container:fullscreen,
#flipbook-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 1.5rem 1.5rem 8rem;
  background: #fff;
  justify-content: center;
  overflow: hidden;
}

#flipbook-container:fullscreen #flipbook-normal-stage,
#flipbook-container:-webkit-full-screen #flipbook-normal-stage {
  display: none;
}

#flipbook-container:fullscreen #flipbook-fullscreen-stage,
#flipbook-container:-webkit-full-screen #flipbook-fullscreen-stage {
  display: flex;
  width: 100%;
}

#flipbook-container:fullscreen #flipbook-controls,
#flipbook-container:-webkit-full-screen #flipbook-controls {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  padding: 0.75rem;
  background: rgb(255 255 255 / 96%);
  border-radius: 6px;
}

#flipbook-container:fullscreen #flipbook-slider-wrap,
#flipbook-container:-webkit-full-screen #flipbook-slider-wrap {
  position: fixed;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 5.6rem;
  z-index: 1000;
  width: auto;
  padding: 0.6rem 0.9rem;
  background: rgb(255 255 255 / 96%);
  border-radius: 6px;
}