:root{
  --controls-bg: rgba(25,25,55,0.75); /* couleur du rectangle */
  --controls-radius: 10px;            /* arrondi des angles */
  --controls-pad-y: 2px;              /* padding vertical */
  --controls-pad-x: 8px;              /* padding horizontal */
  --controls-gap: 4px;                /* espace entre boutons */
  --controls-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* ===== Barre de contrôle centrée, compacte ===== */
#controls{
  display:flex;              /* occupe toute la largeur */
  justify-content:center;    /* centre horizontalement */
  margin:8px 0;
}
#controls .inner{
  display:inline-flex;       /* bloc compact centré */
  align-items:center;
  gap: var(--controls-gap);
  padding: var(--controls-pad-y) var(--controls-pad-x);
  background: var(--controls-bg);
  border-radius: var(--controls-radius);
  box-shadow: var(--controls-shadow);
  line-height:1;             /* évite la hauteur inutile */
  border:1px solid rgba(255,255,255,0.25); /* liseré si désiré */
}
#controls button {
  padding: 4px 6px;          /* compact */
  font-size: 14px;
  line-height: 1;            /* évite d’augmenter la hauteur */
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform .05s ease;
}
#controls button:hover { background: rgba(255,255,255,0.25); }
#controls button:active { transform: translateY(1px); }

#page-display {
  padding: 0 8px;            /* réduit fortement la hauteur */
  min-width: 68px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  text-align:center;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body {
  margin:0; padding:0; height:100%; width:100%;
  background:#0e1226; /* fond général discret, peut être modifié */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Mise en page : barre de contrôle en haut, flipbook prend le reste */
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Zone flipbook = occupe tout l’espace restant (PAS de 100vh ici) */
#flipbook {
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  background:#000; /* fond derrière les pages (optionnel) */
}

/* ===== Pages (min vital) ===== */
#pages { position:absolute; left:-10000px; top:-10000px; visibility:hidden; } /* important: pas display:none */
.page { width:800px; height:1130px; }
.page .page-content {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:#111;
}
.page .page-content img {
  width:100%; height:100%;
  object-fit:contain; display:block;
}

/* ========= PATCH ANTI-LIGNE NOIRE (simple, stable, sans bande) ========= */
/* Ajout du 12 octobre 2025 - Cela tténue un peu .... plus de noir mais un léger gris quand on zoome  */
/* Si tu vois une ligne noire → garde #fff. Si tu vois une ligne claire → mets #000. ou #fff*/
:root { --gutter-mask: #eee; }

/* A) Fond homogène entre conteneur, page et image */
#flipbook,
#flipbook .page {
  background: var(--gutter-mask) !important;
}
#flipbook .page img {
  display: block;
  background: var(--gutter-mask) !important;
}

/* B) Micro-ajustement opposé pour coller les deux pages au pixel près */
#flipbook .stf__item:nth-child(odd)  .page img {
  transform: translateX(0.25px);
}
#flipbook .stf__item:nth-child(even) .page img {
  transform: translateX(-0.25px);
}

/* C) Stabilisation graphique */
#flipbook .page img {
  backface-visibility: hidden;
  transform-origin: center center;
  image-rendering: -webkit-optimize-contrast;
  will-change: transform;
}