/* Flipbook PDF — charte : blanc #ffffff / bleu #008ac6 / gris #464646
   La police hérite de ton site (--fb-font pour en imposer une). */
.fb {
    --fb-bg: #ffffff;
    --fb-primary: #008ac6;
    --fb-primary-dark: #00709f;
    --fb-text: #464646;
    --fb-muted: #8a8f94;
    --fb-line: #e3e8ec;
    --fb-tint: #eef6fa;          /* fond très léger dérivé du bleu */
    --fb-radius: 12px;
    --fb-font: inherit;
    --fb-height: clamp(440px, 78vh, 900px);

    box-sizing: border-box;
    width: 100%;
    color: var(--fb-text);
    font-family: var(--fb-font);
    font-size: 16px;
    line-height: 1.4;
}
.fb *, .fb *::before, .fb *::after { box-sizing: border-box; }
.fb [hidden] { display: none !important; }
.fb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Bibliothèque ---------- */
.fb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; }
.fb-title { margin: 0; font-size: 1.6em; font-weight: 700; color: var(--fb-text); position: relative; padding-bottom: 10px; }
.fb-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 4px; border-radius: 2px; background: var(--fb-primary); }

.fb-search { position: relative; display: block; flex: 1 1 260px; max-width: 380px; }
.fb-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fb-primary); pointer-events: none; }
.fb-search input {
    width: 100%; height: 44px; padding: 0 16px 0 44px;
    border: 2px solid var(--fb-line); border-radius: 999px; background: var(--fb-bg);
    color: var(--fb-text); font: inherit; outline: none; transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none; appearance: none;
}
.fb-search input:focus { border-color: var(--fb-primary); box-shadow: 0 0 0 4px rgba(0, 138, 198, .15); }

.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 26px 22px; }
.fb-card {
    display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0;
    background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.fb-cover {
    position: relative; aspect-ratio: 3 / 4; border-radius: 4px 10px 10px 4px; overflow: hidden;
    background: var(--fb-tint); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 20px -6px rgba(70,70,70,.28);
    transition: transform .25s ease, box-shadow .25s ease;
}
.fb-cover::before { /* reliure */
    content: ""; position: absolute; inset: 0 auto 0 0; width: 9px; z-index: 2;
    background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.18) 55%, rgba(0,0,0,0));
}
.fb-cover canvas { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s; }
.fb-cover canvas.is-ready { opacity: 1; }
.fb-cover .fb-ph { position: absolute; color: var(--fb-primary); opacity: .55; }
.fb-cover .fb-ph svg { width: 44px; height: 44px; stroke-width: 1.5; }
.fb-card:hover .fb-cover, .fb-card:focus-visible .fb-cover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 16px 28px -8px rgba(0,138,198,.4); }
.fb-card:focus-visible { outline: none; }
.fb-card:focus-visible .fb-cover { outline: 3px solid var(--fb-primary); outline-offset: 3px; }
.fb-card-title { font-weight: 600; font-size: .95em; line-height: 1.3; color: var(--fb-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fb-card:hover .fb-card-title { color: var(--fb-primary); }
.fb-card-meta { font-size: .8em; color: var(--fb-muted); margin-top: -8px; }
.fb-empty { text-align: center; color: var(--fb-muted); padding: 40px 0; margin: 0; }

/* ---------- Visionneuse ---------- */
.fb-viewer { background: var(--fb-tint); border-radius: var(--fb-radius); overflow: hidden; border: 1px solid var(--fb-line); display: flex; flex-direction: column; }
.fb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 60px; background: var(--fb-bg); border-bottom: 1px solid var(--fb-line); }
.fb-doc-title { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-tools { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fb-foot { position: relative; z-index: 3; display: flex; justify-content: center; padding: 10px 14px; background: var(--fb-bg); border-top: 1px solid var(--fb-line); }
.fb-sep { width: 1px; height: 22px; background: var(--fb-line); margin: 0 4px; }
.fb-zoomval { min-width: 58px; padding: 0 8px; font-size: .85em; font-variant-numeric: tabular-nums; }
.fb-counter { min-width: 76px; text-align: center; font-variant-numeric: tabular-nums; font-size: .9em; color: var(--fb-text); }

.fb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px;
    border: 0; border-radius: 999px; background: transparent; color: var(--fb-text); font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: background .15s, color .15s, transform .1s;
}
.fb-btn:hover { background: var(--fb-tint); color: var(--fb-primary); }
.fb-btn:active { transform: scale(.94); }
.fb-btn:focus-visible { outline: 3px solid var(--fb-primary); outline-offset: 1px; }
.fb-btn.fb-icon { width: 40px; padding: 0; }
.fb-back { background: var(--fb-primary); color: #fff; }
.fb-back:hover { background: var(--fb-primary-dark); color: #fff; }
.fb-btn[disabled] { opacity: .35; pointer-events: none; }

.fb-stage { position: relative; overflow: hidden; height: var(--fb-height); padding: 16px 10px; display: flex; scrollbar-width: thin; }
.fb-stage.is-zoomed { overflow: auto; }
.fb-book { flex: none; width: 100%; height: auto; margin: auto; }
.fb-book .stf__parent { margin: 0 auto; }
.fb-page { background: #fff; overflow: hidden; }
.fb-page canvas { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }
.fb-page.fb-rendering::after { content: ""; position: absolute; inset: 0; background: #fff; }

.fb-loading { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--fb-tint); }
.fb-spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(0,138,198,.2); border-top-color: var(--fb-primary); animation: fb-spin .8s linear infinite; }
.fb-loading-text { font-size: .95em; text-align: center; padding: 0 16px; }
.fb-loading-hint { font-size: .85em; color: var(--fb-muted); text-align: center; padding: 0 16px; }
.fb-progress { width: 180px; height: 6px; border-radius: 3px; background: rgba(0,138,198,.18); overflow: hidden; }
.fb-progress span { display: block; height: 100%; width: 0; background: var(--fb-primary); transition: width .2s; }
@keyframes fb-spin { to { transform: rotate(360deg); } }
.fb-error { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: var(--fb-tint); color: var(--fb-text); }

/* Plein écran */
.fb-viewer:fullscreen { border-radius: 0; border: 0; width: 100vw; height: 100vh; }
.fb-viewer:fullscreen .fb-stage { flex: 1; height: auto; padding: 20px; min-height: 0; }
.fb-viewer:-webkit-full-screen { border-radius: 0; border: 0; width: 100vw; height: 100vh; }
.fb-viewer:-webkit-full-screen .fb-stage { flex: 1; height: auto; padding: 20px; }

@media (max-width: 640px) {
    .fb-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
    .fb-back span { display: none; }
    .fb-back { width: 40px; padding: 0; }
    .fb-search { max-width: none; }
    .fb-stage { padding: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .fb-cover, .fb-btn, .fb-spinner { transition: none; animation: none; }
}