/* ============================================
   BookBlock "maison" – CSS de base
   Compatible avec ton #slaBookBlock / .bb-item
   ============================================ */

/* Conteneur principal du livre */
.bb-bookblock {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective: 2200px;
    transform-style: preserve-3d;
}

/* Chaque page */
.bb-bookblock .bb-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    opacity: 0;
    pointer-events: none;

    transform-origin: 0 50%;
    transform: translateX(40px) rotateY(12deg);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

/* Page visible */
.bb-bookblock .bb-item.bb-current {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) rotateY(0deg);
    z-index: 2;
}

/* Page “derrière” (optionnel si tu veux jouer avec z-index) */
.bb-bookblock .bb-item.bb-behind {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* Effets en fonction du sens de navigation (optionnel) */
.bb-bookblock.bb-anim-next .bb-item.bb-current {
    transform-origin: 0 50%;
}
.bb-bookblock.bb-anim-prev .bb-item.bb-current {
    transform-origin: 100% 50%;
}

/* Si tu veux accentuer l’effet de flip, tu peux ajouter : */

.bb-bookblock.bb-anim-next .bb-item.bb-out {
    transform: translateX(-40px) rotateY(-10deg);
    opacity: 0;
}

.bb-bookblock.bb-anim-prev .bb-item.bb-out {
    transform: translateX(40px) rotateY(10deg);
    opacity: 0;
}

/* Adaptation au thème (facultatif, mais harmonise avec styleslasla.css) */

.bb-bookblock .bb-item .sla-book-page {
    width: 100%;
    height: 100%;
}

.bb-bookblock .bb-item .sla-book-page-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-right: 4px;
}

/* Scrollbar plus discrète (WebKit) */
.bb-bookblock .bb-item .sla-book-page-inner::-webkit-scrollbar {
    width: 6px;
}
.bb-bookblock .bb-item .sla-book-page-inner::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.4);
}
.bb-bookblock .bb-item .sla-book-page-inner::-webkit-scrollbar-thumb {
    background: rgba(255,198,42,0.7);
    border-radius: 999px;
}

/* Responsive : assure la hauteur minimale */
@media (max-width: 900px) {
    .bb-bookblock .bb-item {
        padding: 16px;
    }
}