/* Flipbook Viewer v6 — Canvas drag */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --bg:#0f0d0b; --surf:#1a1612; --panel:#221e19; --brd:#332a1e;
  --gold:#c89030; --red:#d45050; --txt:#e8ddd0; --muted:#7a6e62;
  --r:5px; --ui:'DM Sans',sans-serif; --serif:'Crimson Pro',Georgia,serif;
}
#fb-root,#fb-root *{ box-sizing:border-box; margin:0; padding:0; }
#fb-root{
  font-family:var(--ui); color:var(--txt); background:var(--bg);
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}

/* ── Header ────────────────────────────────────────────────── */
#fb-header{
  display:flex; align-items:center; justify-content:space-between;
  height:50px; padding:0 20px; gap:10px; flex-shrink:0;
  background:var(--panel); border-bottom:1px solid var(--brd);
}
#fb-back{ color:var(--muted); text-decoration:none; font-size:13px; transition:color .2s; }
#fb-back:hover{ color:var(--gold); }
#fb-title{ font-family:var(--serif); font-size:19px; flex:1; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-hbtn{
  padding:5px 12px; border:1px solid var(--brd); border-radius:var(--r);
  background:transparent; color:var(--txt); font-size:12px; text-decoration:none;
  white-space:nowrap; transition:all .15s;
}
.fb-hbtn:hover{ background:var(--gold); border-color:var(--gold); color:#0f0d0b; }

/* ── Toolbar ────────────────────────────────────────────────── */
#fb-toolbar{
  display:flex; align-items:center; gap:3px; flex-shrink:0;
  height:42px; padding:0 12px; background:var(--surf);
  border-bottom:1px solid var(--brd); overflow-x:auto; scrollbar-width:none;
}
#fb-toolbar::-webkit-scrollbar{ display:none; }
.fb-sep{ width:1px; height:20px; background:var(--brd); margin:0 5px; flex-shrink:0; }
.fb-tbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:28px; padding:0 7px; border-radius:var(--r);
  border:1px solid transparent; background:transparent; color:var(--txt);
  font-size:15px; cursor:pointer; transition:all .12s; flex-shrink:0; font-family:var(--ui);
}
.fb-tbtn:hover{ background:rgba(200,144,48,.18); border-color:var(--gold); color:var(--gold); }
.fb-tbtn:active{ transform:scale(.92); }
.fb-tinfo{ display:flex; align-items:center; gap:5px; font-size:13px; white-space:nowrap; }
#fb-pnum{
  width:42px; height:28px; background:var(--panel); border:1px solid var(--brd);
  border-radius:var(--r); color:var(--txt); font-size:13px; text-align:center;
  outline:none; font-family:var(--ui);
}
#fb-pnum:focus{ border-color:var(--gold); }
#fb-zval{ font-size:12px; color:var(--muted); min-width:36px; text-align:center; }
#fb-scnt{ font-size:11px; color:var(--gold); font-weight:600; min-width:38px; text-align:center; }
#fb-sq{
  height:28px; width:150px; background:var(--panel); border:1px solid var(--brd);
  border-radius:var(--r); color:var(--txt); font-size:12px; padding:0 8px;
  outline:none; font-family:var(--ui);
}
#fb-sq:focus{ border-color:var(--gold); }
#fb-sq::placeholder{ color:var(--muted); }

/* ── Progress ───────────────────────────────────────────────── */
#fb-prog{ height:3px; background:var(--brd); flex-shrink:0; }
#fb-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--gold),#e8b85a); transition:width .25s, opacity 1s; }

/* ── Body ───────────────────────────────────────────────────── */
#fb-body{ display:flex; flex:1; overflow:hidden; min-height:0; }

/* ── Thumbs ─────────────────────────────────────────────────── */
#fb-thumbs{
  width:82px; min-width:82px; background:#0b0908;
  border-right:1px solid var(--brd);
  overflow-y:auto; overflow-x:hidden; padding:6px 4px;
  display:flex; flex-direction:column; gap:4px;
  scrollbar-width:thin; scrollbar-color:var(--brd) transparent;
}
.fb-th{
  cursor:pointer; border-radius:3px; border:2px solid transparent;
  overflow:hidden; opacity:.5; transition:opacity .15s, border-color .15s;
}
.fb-th:hover{ opacity:.8; border-color:var(--brd); }
.fb-th.on{ border-color:var(--gold); opacity:1; }
.fb-th canvas{ display:block; width:100%; height:auto; }
.fb-th b{ display:block; text-align:center; font-size:9px; color:var(--muted); padding:2px; font-weight:400; }

/* ── Stage ──────────────────────────────────────────────────── */
#fb-stage{
  flex:1; display:flex; align-items:center; justify-content:center;z-index:1;
  overflow:hidden; position:relative;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, #1a130a 0%, #060402 100%);
}

/* ── Book wrap ──────────────────────────────────────────────── */
#fb-book-wrap{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:center;
}

/* ── Canvas principal ───────────────────────────────────────── */
#fb-canvas{
  display:block;
  cursor:grab;
  border-radius:2px;
  /* Ombre externe du livre */
  box-shadow:
    0 60px 120px rgba(0,0,0,.95),
    0 20px 40px  rgba(0,0,0,.8),
    0 0    0 1px rgba(255,255,255,.03);
  touch-action:none;  /* IMPORTANT : désactive le scroll natif pendant le drag */
}
#fb-canvas:active{ cursor:grabbing; }

/* ── Hint drag ──────────────────────────────────────────────── */
#fb-hint{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.6); color:rgba(255,255,255,.7);
  font-size:12px; padding:6px 16px; border-radius:20px;
  pointer-events:none; display:flex; align-items:center; gap:6px;
  backdrop-filter:blur(4px);
  transition:opacity .5s;
}

/* ── Loader ─────────────────────────────────────────────────── */
#fb-loader{
  position:absolute; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:rgba(6,4,2,.9); transition:opacity .5s;
}
.fb-spin{
  width:42px; height:42px; border:3px solid var(--brd);
  border-top-color:var(--gold); border-radius:50%;
  animation:spin .75s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
#fb-ltxt{ font-size:13px; color:var(--muted); }

/* ── Sidebar ────────────────────────────────────────────────── */
#fb-sidebar{
  position:absolute; right:0; top:0; bottom:0; z-index:50;
  width:0; overflow:hidden; background:var(--surf);
  border-left:0 solid var(--brd);
  display:flex; flex-direction:column;
  transition:width .25s, border-left-width .25s;
}
#fb-sidebar.open{ width:240px; border-left-width:1px; }
.fb-sbh{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; font-size:11px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--brd);
}
#fb-sbclose{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; }
#fb-sbclose:hover{ color:var(--red); }
#fb-rlist{ flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--brd) transparent; }
.fb-ri{
  padding:8px 13px; border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer; font-size:12px; color:var(--muted); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:background .12s;
}
.fb-ri:hover{ background:rgba(200,144,48,.08); }
.fb-ri.act{ background:rgba(200,144,48,.16); border-left:3px solid var(--gold); color:var(--txt); }
.fb-ri em{
  display:inline-block; background:var(--gold); color:#0f0d0b;
  font-style:normal; font-size:10px; font-weight:700;
  border-radius:10px; padding:1px 7px; margin-right:5px;
}
.fb-nores{ padding:20px; text-align:center; color:var(--muted); font-size:13px; }

/* ── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--brd); border-radius:3px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:700px){ #fb-thumbs{ display:none; } #fb-sq{ width:100px; } }
@media(max-width:480px){ #fb-toolbar{ gap:1px; padding:0 6px; } .fb-tbtn{ min-width:24px; } }


/* Styles spécifiques pour le mode Plein Écran */
/* Force l'affichage du viewer en mode plein écran */
#fb-root:fullscreen {
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #0f0d0b !important;
}

/* Pour Safari / Chrome */
#fb-root:-webkit-full-screen {
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* S'assurer que le stage prend toute la place restante */
#fb-root:fullscreen #fb-body {
    flex: 1;
}