/* ============================================================
   Viewer flipbook — Publications (adapté de Mliseuse)
   Layout : topbar 3 zones (retour+titre | nav pages | download+FS),
   zone flipbook centrée sans scrollbar, flèches latérales pleine
   hauteur, bottombar zoom uniquement quand zoom > 100 %.
   ============================================================ */

* { box-sizing: border-box; }
/* Protection globale : `[hidden]` doit toujours cacher, même quand une
   règle plus spécifique définit `display: flex`. Sans ça, le toggle
   nav ↔ zoom-controls dans la topbar ne masquerait rien. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body.flipbook-page {
    background: #0f172a;
    color: #e5e7eb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: flex; flex-direction: column;
}

/* --- Topbar en 3 zones (grid) ---------------------------------- */
.flipbook-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 8px 14px;
    /* Légèrement plus foncée que le fond charbon de la page + fine
       bordure basse un cran plus claire pour bien la détacher visuellement. */
    background: rgba(0, 0, 0, .25);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex: 0 0 auto;
    z-index: 5;
}
.flipbook-topbar-gauche  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.flipbook-topbar-centre  { display: flex; align-items: center; gap: 6px; justify-content: center; }
.flipbook-topbar-droite  { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

.flipbook-titre {
    font-size: 14px; font-weight: 600; color: #f1f5f9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.flipbook-pageinfo {
    display: inline-block; min-width: 68px; text-align: center;
    font-size: 13px; color: rgba(255, 255, 255, .85);
    font-variant-numeric: tabular-nums;
    padding: 0 4px;
}

/* --- Boutons topbar (transparents, sans bordure) --------------- */
.flipbook-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 32px; height: 32px;
    padding: 0 8px;
    background: transparent; border: 0; color: #e5e7eb;
    border-radius: 6px;
    cursor: pointer; text-decoration: none;
    font: inherit; font-size: 13.5px;
    transition: background .12s ease, color .12s ease;
}
.flipbook-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}
.flipbook-btn:disabled,
.flipbook-btn[disabled] { opacity: .3; cursor: default; }
.flipbook-btn:disabled:hover { background: transparent; }
.flipbook-btn-libelle { font-weight: 500; }
/* Sur écran étroit, le libellé « Retour » se replie derrière l'icône. */
@media (max-width: 720px) {
    .flipbook-btn-libelle { display: none; }
    .flipbook-titre { font-size: 13px; }
    .flipbook-topbar { padding: 8px 10px; }
    .flipbook-btn { min-width: 30px; height: 30px; padding: 0 6px; }
}

/* --- Zone flipbook (centrée, sans scrollbar par défaut) --------- */
.flipbook-area {
    flex: 1 1 auto; position: relative;
    overflow: hidden;   /* pas de scrollbars quand pas zoomé — sinon fond noir strié */
    display: flex;
    /* `safe center` : centre tant que le contenu tient, mais retombe en
       `start` quand ça déborde (zoom). Sans « safe », le contenu déborde
       ÉGALEMENT DES DEUX CÔTÉS d'un centre imposé — on ne peut pas
       scroller jusqu'aux coins opposés. */
    align-items: safe center;
    justify-content: safe center;
    background: #0f172a;
}
.flipbook-area.zoomed {
    overflow: auto;     /* scroll fonctionnel via pan (shield) */
    scrollbar-width: none;   /* Firefox : scrollbars invisibles */
}
.flipbook-area.zoomed::-webkit-scrollbar { display: none; }   /* WebKit/Blink */

/* --- Loader --------------------------------------------------- */
.flipbook-loader {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.flipbook-spinner {
    width: 42px; height: 42px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .1);
    border-top-color: rgba(255, 255, 255, .55);
    animation: flipbook-spin 1s linear infinite;
}
@keyframes flipbook-spin { to { transform: rotate(360deg); } }

/* --- Zoom shield (intercepte pan/wheel quand zoomé) ------------
   POSITION FIXED : le shield reste ancré à la viewport, pas au flux
   scrollable de .flipbook-area. Sans ça, dès que l'utilisateur
   scrollait un peu son zoom, le shield disparaissait de la portion
   visible et le pan ne fonctionnait plus qu'en haut de la zone. */
.flipbook-zoom-shield {
    position: fixed;
    top: 48px;           /* sous la topbar (hauteur ~48px avec padding) */
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    cursor: grab;
    background: transparent;
    display: none;
}
.flipbook-area.zoomed .flipbook-zoom-shield { display: block; }
@media (max-width: 720px) {
    .flipbook-zoom-shield { top: 44px; }
}

/* --- Flipbook lui-même ---------------------------------------- */
#flipbook { margin: 0 auto; }
/* Ombre très légère sous les pages — juste un liseré (au lieu d'un halo
   marqué qui coupait visuellement la spread au milieu quand les 2 pages
   se rejoignaient). */
#flipbook .page-wrapper {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

/* --- Flèches latérales pleine hauteur -------------------------- */
.flipbook-side {
    position: fixed;
    top: 48px;        /* sous la topbar */
    bottom: 0;
    width: 60px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0;
    color: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    z-index: 4;
}
.flipbook-side:hover {
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .95);
}
.flipbook-side:disabled,
.flipbook-side[disabled] { opacity: 0; pointer-events: none; }
.flipbook-side-prev { left: 0; }
.flipbook-side-next { right: 0; }
/* En zoom, feuilleter n'a plus de sens — on cache les flèches latérales
   pour libérer les bords (plus de zone de pan disponible). */
body.is-zoomed .flipbook-side { display: none; }
@media (max-width: 720px) {
    .flipbook-side { width: 44px; }
}

/* --- Nav pages & contrôles zoom (dans la topbar centre) -------- */
/* Les 2 blocs occupent le même espace, un seul visible à la fois :
   par défaut la nav pages, quand zoomé les contrôles zoom (toggle
   piloté par JS via [hidden]). Grâce à la règle globale
   `[hidden] { display: none !important }`, le hidden gagne toujours. */
.flipbook-nav,
.flipbook-zoom-controls {
    display: flex; align-items: center; gap: 6px;
}
.flipbook-zoom-level {
    display: inline-block; min-width: 56px; text-align: center;
    font-size: 13px; font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .9);
    padding: 0 4px;
}

/* --- Menu contextuel personnalisé (clic droit) ------------------ */
.flipbook-ctx-menu {
    position: fixed;
    padding: 8px 14px;
    background: rgba(15, 23, 42, .95);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    font-size: 12.5px; font-weight: 500;
    box-shadow: 0 6px 24px -6px rgba(0, 0, 0, .55);
    z-index: 100;
    pointer-events: none;   /* purement informatif — se ferme au premier clic ailleurs */
    white-space: nowrap;
}