/* Overlay plein écran */
:root {
    --reading-scale: 1;
    --book-reading-scale: 1;
    --reading-font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}



.sla-book-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 10, 0.96);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.sla-book-overlay.is-visible {
    display: block;
    opacity: 1;
}
body.sla-book-open {
    overflow: hidden;
}

/* =============================
   SURBRILLANCE DES MOTS
   ============================= */

   .reading-word,
   .book-reading-word {
       position: relative;
   }
   
   /* Style du mot en cours de lecture (article + livre) */
   .reading-word-active,
   .book-reading-word-active {
       background: #ffe66d;              /* jaune chaud très visible */
       color: #000000;                   /* texte noir = contraste max */
       padding-inline: 2px;
   
       /* contour net + halo léger pour bien détacher le mot */
       box-shadow:
           0 0 0 2px #000000,
           0 0 8px rgba(0, 0, 0, 0.7);
       text-decoration: none;
   }

#slaBookOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.06) 0, transparent 55%),
        radial-gradient(circle at bottom right, rgba(255,180,0,0.08) 0, transparent 50%),
        #050405;
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
}

#slaBookOverlay.is-visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Wrapper global */
.sla-book-wrapper {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    color: #f8f5e9;
}

/* Barre top : titre + bouton fermeture + toggle TOC */
.sla-book-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

/* Conteneur principal TOC + contenu livre */
.sla-book-layout {
    flex: 1;
    display: flex;
    gap: 24px;
    min-height: 0;
}


/* Conteneur interne */
.sla-book-inner {
    max-width: 1200px;
    height: 90vh;
    margin: 4vh auto;
    background: #121214;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.8);
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Bouton fermeture */
.sla-book-close {
    position: absolute;
    top: 14px;
    right: 18px;
    border: none;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    color: #f5f1e6;
    cursor: pointer;
}

/* Structure: TOC + livre */
.sla-book-shell {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    height: 100%;
}

/* TOC */
.sla-book-toc {
    flex: 0 0 260px;
    max-width: 280px;
    border-radius: 18px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(18px);
    padding: 18px 16px;
    overflow-y: auto;
    transition: transform .3s ease, opacity .3s ease, max-width .3s ease;
    overflow-y: auto;
    overflow-x: hidden;  /* important */
}

.sla-book-toc-sub {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 10px;
}
.sla-book-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    margin: 0;
    padding-right: 0.25rem;
}
.sla-book-toc-item {
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 0.92rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color .2s ease, transform .15s ease;
    display: flex;
    align-items: center;
    width: 100%;      /* prend toute la largeur disponible */
    min-width: 0;     /* annule toute min-width qui forcerait un scroll */
    box-sizing: border-box;
}

.sla-book-toc-item .sla-book-toc-index {
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    opacity: 0.7;
}

.sla-book-main {
    flex: 1 1 auto;
    border-radius: 22px;
    background: radial-gradient(circle at top, #2c220c, #0c0803 60%);
    box-shadow: 0 18px 60px rgba(0,0,0,0.75);
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sla-book-toc-item.is-current {
    background: linear-gradient(90deg, #ffc62a, #ff7a1a);
    color: #101010;
}

.sla-book-toc-item.is-current .sla-book-toc-index {
    opacity: 0.95;
}

/* Vue livre */
.sla-book-view {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #18181c;
}

/* BookBlock page */
.sla-book-page {
    width: 100%;
    height: 100%;
    padding: 28px 32px;
    box-sizing: border-box;
}
.sla-book-page-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.sla-book-page-heading {
    font-family: var(--reading-font-family);
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: #f5f1e6;
}
.sla-book-page-content {
    font-family: var(--reading-font-family);
    font-size: calc(1.5rem * var(--book-reading-scale, 1));
    line-height: 1.6;
    color: #e4e0d6;
}

.sla-book-page-content p {
    margin-bottom: 0.9rem;
}

#slaBookBlock {
    flex: 1;
    position: relative;
}

#slaBookBlock .bb-item {
    padding: 0px 40px;
    font-size: 1rem;
    line-height: 1.7;
}

/* Navigation */
.sla-book-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding: 6px 4px 0;
}

.sla-book-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sla-book-nav-btn i {
    font-size: 1.6rem;
    color: #fdfdfd;
    text-shadow:
        0 0 6px rgba(80, 184, 255, 0.9),
        0 0 14px rgba(0, 0, 0, 0.85);
}

.sla-book-view {
    position: relative;
}

/* Le wrapper du bookblock sert de référence */
#slaBookBlockWrapper.bb-custom-wrapper {
    position: relative;
}

/* Barre invisible qui occupe toute la hauteur du livre */
.sla-book-view .sla-book-nav {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    display: flex;
    align-items: center;          /* centre verticalement */
    justify-content: space-between;
    padding: 0 32px;              /* marge intérieure gauche/droite */
    pointer-events: none;         /* seuls les boutons prennent les clics */
    z-index: 40;
}

/* Boutons flèches : intégrés aux bords du livre */
.sla-book-view #slaBookPrev,
.sla-book-view #slaBookNext {
    pointer-events: auto;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.9);
    color: #f9fafb;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.9),
        0 0 16px rgba(15, 118, 210, 0.7);
    text-shadow:
        0 0 4px rgba(0, 0, 0, 1);

    transition:
        transform 0.12s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
    margin-left: -15px;
    margin-right: -15px;
}

/* Effet hover subtil */
.sla-book-view #slaBookPrev:hover,
.sla-book-view #slaBookNext:hover {
    transform: translateY(-1px);
    border-color: rgba(248, 250, 252, 0.95);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 1),
        0 0 24px rgba(59, 130, 246, 0.9);
}

/* Sur mobile : un peu plus petits, légèrement plus bas
   sans sortir du livre */
@media (max-width: 768px) {
    .sla-book-view .sla-book-nav {
        padding: 0 18px;
    }

    .sla-book-view #slaBookPrev,
    .sla-book-view #slaBookNext {
        width: 48px;
        height: 48px;
        font-size: 1.9rem;
    }
}

/* Boutons flèches LED très visibles */
.sla-book-nav-btn {
    position: relative;
    z-index: 0;
    width: 34px;
    height: 44px;
    padding: 0 0px;
    border-radius: 999px;
    border: 1px solid rgba(80, 184, 255, 0.5);
    background: radial-gradient(circle at 30% 0, rgba(80, 184, 255, 0.42), rgba(6, 8, 16, 0.98));
    color: #f4f7ff;              /* flèche bien blanche */
    font-size: 1.4rem;           /* un peu plus grosse */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(2, 6, 23, 0.9),
        0 10px 26px rgba(0, 0, 0, 0.85),
        0 0 14px rgba(80, 184, 255, 0.8);
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease,
        border-color 0.18s ease;
}

/* Halo LED derrière la flèche (z-index -1 sinon ça cache le texte) */
.sla-book-nav-btn::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 0 0, rgba(80, 184, 255, 0.45), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(255, 198, 42, 0.35), transparent 60%);
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: -1;
}

/* Contenu (flèche) au-dessus de tout */
.sla-book-nav-btn span,
.sla-book-nav-btn i {
    position: relative;
    z-index: 1;
}

/* Hover → gros effet LED futuriste */
.sla-book-nav-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(138, 230, 255, 1);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 1),
        0 0 22px rgba(138, 230, 255, 1),
        0 0 38px rgba(255, 198, 42, 0.7);
}

.sla-book-nav-btn:hover::before {
    opacity: 1;
}

/* Active (clic) */
.sla-book-nav-btn:active {
    transform: translateY(0);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 1),
        0 0 12px rgba(80, 184, 255, 0.8);
}


/* Bouton TOC mobile */
.sla-book-toc-toggle {
    position: absolute;
    bottom: 14px;
    left: 14px;
    border: none;
    background: rgba(10, 10, 12, 0.88);
    color: #f5f1e6;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
}


.sla-book-nav-btn:hover {
    background: rgba(255,198,42,0.18);
    border-color: rgba(255,198,42,0.6);
    transform: translateY(-1px);
}

/* TOC replié → livre plein écran */
.sla-book-layout--toc-hidden .sla-book-toc {
    transform: translateX(-110%);
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

.sla-book-layout--toc-hidden .sla-book-main {
    flex-basis: 100%;
}

/* Bouton toggle TOC actif */
#slaBookTocToggle.is-active {
    background: rgba(255,198,42,0.18);
    border-color: rgba(255,198,42,0.6);
}

/* ================================
   BOOKBLOCK - STRUCTURE DE BASE
   ================================ */

/* Le wrapper autour du bookblock */
.bb-custom-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Le conteneur principal du flipbook */
.bb-bookblock {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1600px;
    perspective: 1600px;
    transform-style: preserve-3d;
}

/* Chaque page */
.bb-bookblock .bb-item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background: transparent;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* La première page est visible au départ */
.bb-bookblock .bb-item:first-child {
    position: relative;
}

/* Pour garantir qu'on voit bien quelque chose même si BookBlock ne fait rien */
#slaBookBlock {
    width: 100%;
    height: 100%;
}

/* On force la vue livre à prendre toute la hauteur dispo */
.sla-book-view {
    position: relative;
    height: 100%;
}

/* Le wrapper interne doit aussi occuper la hauteur */
#slaBookBlockWrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* La zone qui contient vraiment les pages */
#slaBookBlock .bb-item .sla-book-page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Scroll interne propre dans la page */
.sla-book-page-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

/* (Optionnel) Debug visuel temporaire pour vérifier qu'on a bien des pages */
.bb-bookblock .bb-item {
    /* border: 1px solid rgba(255,255,255,0.2); */
}

/* Barre de contrôle lecture dans le mode livre */
.reading-controls-book {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.reading-controls-book .reading-controls-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reading-controls-book .reading-controls-helper {
    font-size: 0.8rem;
    opacity: 0.7;
}

.reading-controls-book .reading-controls-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.reading-controls-book .reading-btn {
    padding: 4px 8px;
    font-size: 0.8rem;
}

/* ================================
   BARRE D'OUTILS LIVRE – LOOK LED
   ================================ */

   .sla-book-tools-bar {
    margin-bottom: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(10, 10, 16, 0.95), rgba(10, 10, 24, 0.98)),
        radial-gradient(circle at top left, rgba(255, 198, 42, 0.08), transparent 60%),
        radial-gradient(circle at bottom right, rgba(80, 184, 255, 0.10), transparent 55%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 12px 40px rgba(0, 0, 0, 0.85),
        0 0 12px rgba(80, 184, 255, 0.35);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.reading-controls-book-right .reading-controls-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
    font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow:
        0 0 6px rgba(80, 184, 255, 0.9),
        0 0 18px rgba(0, 0, 0, 0.9);
}

/* Boutons LED génériques dans le livre */
.sla-book-tools-bar .reading-btn {
    position: relative;
    border-radius: 999px;
    border: 1px solid rgba(80, 184, 255, 0.4);
    background: radial-gradient(circle at 20% 0, rgba(80, 184, 255, 0.32), rgba(5, 7, 15, 0.96));
    color: #f4f7ff;
    font-size: 0.8rem;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(2, 6, 23, 0.8),
        0 0 12px rgba(80, 184, 255, 0.6);
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease,
        border-color 0.18s ease;
}

.sla-book-tools-bar .reading-btn i {
    font-size: 0.9rem;
}

.sla-book-tools-bar .reading-btn span {
    position: relative;
    z-index: 1;
}

/* Petit halo LED autour des boutons */
.sla-book-tools-bar .reading-btn::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 0 0, rgba(80, 184, 255, 0.45), transparent 65%),
        radial-gradient(circle at 100% 100%, rgba(255, 198, 42, 0.35), transparent 60%);
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 0;
}

.sla-book-tools-bar .reading-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(138, 230, 255, 0.9);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 1),
        0 0 20px rgba(80, 184, 255, 0.9),
        0 0 40px rgba(255, 198, 42, 0.5);
}

.sla-book-tools-bar .reading-btn:hover::before {
    opacity: 1;
}

.sla-book-tools-bar .reading-btn:active {
    transform: translateY(0);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 1),
        0 0 10px rgba(80, 184, 255, 0.7);
}

/* Bouton A / –A / +A : on renforce un peu le texte */
#fontMinusBook span,
#fontPlusBook span,
#fontResetBook span {
    font-weight: 600;
}

/* Bouton audio du livre : LED spéciale */
#readingAudioBookBtn {
    border-color: rgba(255, 198, 42, 0.9);
    background: radial-gradient(circle at 20% 0, rgba(255, 198, 42, 0.4), rgba(10, 8, 2, 0.98));
    box-shadow:
        0 0 0 1px rgba(15, 10, 0, 0.9),
        0 0 18px rgba(255, 198, 42, 0.9);
}

/* Quand la lecture du livre est en cours */
#readingAudioBookBtn[data-state="playing"] {
    border-color: rgba(138, 230, 255, 1);
    background: radial-gradient(circle at 0 0, rgba(138, 230, 255, 0.6), rgba(5, 10, 18, 1));
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 1),
        0 0 24px rgba(138, 230, 255, 1),
        0 0 42px rgba(80, 184, 255, 0.9);
}

/* On garde les barres audio, mais plus "néon" */
#readingAudioBookBtn .reading-audio-icon .bar {
    background: linear-gradient(180deg, #ffffff, #ffe08a);
    box-shadow: 0 0 8px rgba(255, 198, 42, 0.9);
}

/* ============================
   TOC MODE LIVRE – FUTURISTE & ACCESSIBLE
   ============================ */

   .sla-book-toc {
    background: #060813;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.75rem 1.5rem;
}

.sla-book-toc-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 1.5rem;
}

.sla-book-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Bouton de chapitre : base commune */
.sla-book-toc-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(circle at 0 0, rgba(91, 231, 196, 0.12), transparent 55%),
                linear-gradient(135deg, rgba(24, 32, 64, 0.96), rgba(7, 11, 28, 0.98));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);

    color: #f7f7ff;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;

    transition:
        background 0.18s ease-out,
        border-color 0.18s ease-out,
        box-shadow 0.18s ease-out,
        transform 0.12s ease-out;
}

/* Gros bouton cliquable pour les troubles visuels */
.sla-book-toc-item {
    min-height: 2.8rem;
}

/* Numéro de page : pastille bien visible */
.sla-book-toc-index {
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    background: rgba(0, 0, 0, 0.65);
    color: #e8f9ff;
    border: 1px solid rgba(91, 231, 196, 0.65);
    box-shadow: 0 0 0 2px rgba(4, 14, 26, 0.9);
    flex: 0 0 auto;
    margin-right: 0.6rem;
}

/* Titre : tronqué proprement si très long */
.sla-book-toc-title {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Hover : feedback net mais pas agressif */
.sla-book-toc-item:hover {
    border-color: rgba(91, 231, 196, 0.8);
    box-shadow:
        0 0 0 1px rgba(91, 231, 196, 0.55),
        0 0 18px rgba(91, 231, 196, 0.35);
    transform: translateX(2px);
}

/* État actif (chapitre en cours) */
.sla-book-toc-item.is-current {
    border-color: #ffffff;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.85),
        0 0 32px rgba(92, 189, 255, 0.75);
    color: #050612;
}

.sla-book-toc-item.is-current .sla-book-toc-index {
    background: #050612;
    color: #5be7c4;
    border-color: rgba(255, 255, 255, 0.85);
}

.sla-book-toc-item.is-current .sla-book-toc-title {
    font-weight: 600;
}

/* Focus clavier bien visible (accessibilité) */
.sla-book-toc-item:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    box-shadow:
        0 0 0 2px rgba(5, 6, 18, 0.95),
        0 0 0 4px rgba(91, 231, 196, 0.85);
}

/* Sur mobile, on aère encore un peu */
@media (max-width: 991.98px) {
    .sla-book-toc {
        padding: 1.25rem 1rem;
    }
    .sla-book-toc-item {
        padding: 0.65rem 0.9rem;
        font-size: 0.94rem;
    }
}


/* Responsive */
@media (max-width: 900px) {
    .sla-book-layout {
        flex-direction: column;
    }
    .sla-book-toc {
        flex: 0 0 auto;
        max-height: 200px;
    }
    .sla-book-layout--toc-hidden .sla-book-toc {
        max-height: 0;
    }
}