/**
 * Player Reader - Design fidèle à la visionneuse Figma
 * Interface de lecture immersive avec effets de flou progressif
 */

/* ==========================================================================
   VARIABLES CSS - Thème clair par défaut
   ========================================================================== */

:root {
    --reader-font-size: 18px;
    --reader-line-height: 1.8;
    
    /* Thème clair (défaut) */
    --reader-bg: #ffffff;
    --reader-text: #1f2937;
    --reader-border: rgba(0, 0, 0, 0.1);
    --reader-muted: #717182;
    --reader-hover: rgba(0, 0, 0, 0.05);
    --reader-active: rgba(0, 0, 0, 0.1);
    --reader-switch-bg: #cbced4;
    --reader-input-bg: #f3f3f5;
    
    /* Boutons */
    --reader-btn-default-bg: #030213;
    --reader-btn-default-text: #ffffff;
    --reader-btn-outline-bg: transparent;
    --reader-btn-outline-border: rgba(0, 0, 0, 0.2);
    
    /* Radius */
    --reader-radius: 0.625rem;
    --reader-radius-lg: 0.75rem;
    
    /* Transitions */
    --reader-transition: 0.3s ease;
}

/* Thème sombre */
[data-theme="dark"],
.dark {
    --reader-bg: #0e1426;
    --reader-text: #f3f4f6;
    --reader-border: rgba(255, 255, 255, 0.1);
    --reader-muted: #9ca3af;
    --reader-hover: rgba(255, 255, 255, 0.05);
    --reader-active: rgba(255, 255, 255, 0.1);
    --reader-switch-bg: #374151;
    --reader-input-bg: #1f2937;
    
    --reader-btn-default-bg: #ffffff;
    --reader-btn-default-text: #030213;
    --reader-btn-outline-border: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */

.player-interface {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--reader-bg);
    color: var(--reader-text);
    transition: background var(--reader-transition), color var(--reader-transition);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Masquer la barre de progression du layout (le scroll est sur reading-content) */
body:has(.player-interface) .progress-bar {
    display: none !important;
}

/* Header supprimé - bouton focus flottant à la place */

/* Bouton flottant Focus/Plein écran - en haut à droite */
.floating-focus-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--reader-bg);
    border: 1px solid var(--reader-border);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 50;
    color: inherit;
    transition: all var(--reader-transition);
}

.floating-focus-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

/* Bouton TOC mobile flottant */
.floating-toc-mobile-btn {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--reader-bg);
    border: 1px solid var(--reader-border);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 50;
    color: inherit;
    transition: all var(--reader-transition);
}

.floating-toc-mobile-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

@media (min-width: 1024px) {
    .floating-toc-mobile-btn {
        display: none;
    }
}

/* Boutons icône (conservé pour compatibilité) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: var(--reader-radius);
    cursor: pointer;
    transition: background var(--reader-transition);
}

.btn-icon:hover {
    background: var(--reader-hover);
}

/* ==========================================================================
   CONTAINER PRINCIPAL - Layout 3 colonnes
   ========================================================================== */

.player-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100vh;
    max-height: 100vh;
}

/* ==========================================================================
   SIDEBAR GAUCHE - TABLE DES MATIÈRES
   ========================================================================== */

.player-interface .toc-sidebar {
    width: 20rem;
    border-right: 1px solid var(--reader-border);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--reader-bg);
    padding: 1.5rem;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 60; /* Au-dessus du book-header (z-index: 50) */
    /* Fermée par défaut - slide vers la gauche */
    transform: translateX(-100%);
    transition: transform var(--reader-transition);
}

/* Sidebar ouverte */
.player-interface .toc-sidebar.open {
    transform: translateX(0);
}

/* Bouton de fermeture en haut à droite de la sidebar */
.toc-sidebar .sidebar-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--reader-active);
    border: 1px solid var(--reader-border);
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    transition: all var(--reader-transition);
    font-size: 0.875rem;
    z-index: 10; /* Au-dessus du titre */
}

.toc-sidebar .sidebar-close-btn:hover {
    background: var(--reader-btn-default-bg);
    color: var(--reader-btn-default-text);
    border-color: var(--reader-btn-default-bg);
}

.toc-sidebar .toc-title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 1.5rem 0;
    padding-right: 2.5rem; /* Espace pour le bouton de fermeture */
    opacity: 0.6;
}

.toc-sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-sidebar nav li {
    margin-bottom: 0.5rem;
}

.toc-sidebar .toc-link {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.9375rem;
    border-radius: var(--reader-radius-lg);
    cursor: pointer;
    transition: background var(--reader-transition);
    text-decoration: none;
}

.toc-sidebar .toc-link:hover {
    background: var(--reader-hover);
}

.toc-sidebar .toc-link.active {
    background: var(--reader-active);
    font-weight: 500;
}

/* ==========================================================================
   ZONE DE LECTURE PRINCIPALE
   ========================================================================== */

/* ==========================================================================
   MASQUER TOUTES LES SCROLLBARS DE LA LISEUSE
   ========================================================================== */

/* Masquer la scrollbar sur html, body et le player */
.player-interface,
.player-interface html,
.player-interface body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.player-interface::-webkit-scrollbar,
.player-interface html::-webkit-scrollbar,
.player-interface body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

.reading-content {
    flex: 1;
    overflow-y: auto;
    /* scroll-behavior géré par JavaScript pour éviter la latence du drag */
    scroll-behavior: auto;
    position: relative;
    z-index: 10; /* Au-dessus du fond d'image dynamique (z-index: 6), en dessous des blur-overlays (z-index: 15) */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    /* Optimisation touch pour éviter le délai de 300ms */
    touch-action: pan-y;
    /* Masquer la barre de scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    /* IMPORTANT: Hauteur fixe pour permettre le scroll interne */
    height: 100vh;
    max-height: 100vh;
    
    /* Pas de marges fixes - les sidebars sont fermées par défaut */
    margin-left: 0;
    margin-right: 0;
    transition: margin var(--reader-transition);
}

/* Quand les sidebars sont ouvertes, ajouter les marges sur desktop */
@media (min-width: 1024px) {
    .player-interface.toc-open .reading-content {
        margin-left: 20rem;
    }
}

@media (min-width: 1280px) {
    .player-interface.settings-open .reading-content {
        margin-right: 20rem;
    }
}

.reading-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

.reading-content:active {
    cursor: grabbing;
}

/* Image de fond du chapitre (transparente) */
.reader-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

/* Thème sombre : image plus visible */
[data-theme="dark"] .reader-background {
    opacity: 0.12;
}

/* Assurer que le contenu est au-dessus de l'image */
.chapter-container {
    position: relative;
    z-index: 1;
}

.chapter-container {
    max-width: 48rem;
    margin: 0 auto;
    padding: 25vh 1.5rem 4rem;
    isolation: isolate;
    /* Espace vide en bas pour que la dernière ligne puisse remonter au milieu */
    padding-bottom: 50vh;
}

@media (min-width: 1024px) {
    .chapter-container {
        padding: 25vh 3rem 4rem;
        padding-bottom: 50vh;
    }
}

/* En-tête du livre - positionné à 20% de la hauteur, AU-DESSUS de l'overlay de fade */
.book-header {
    position: fixed;
    top: 20vh; /* Positionné à 20% de la hauteur de l'écran */
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 1rem;
    z-index: 50; /* AU-DESSUS de l'overlay (z-index: 5) et des contrôles */
    pointer-events: none;
    transition: left var(--reader-transition), right var(--reader-transition), opacity 0.4s ease-out;
    /* Pas de fond - le header flotte au-dessus du contenu */
    background: transparent;
}

/* Thème clair - pas de fond spécifique pour le book-header */
[data-theme="light"] .book-header,
.light .book-header {
    background: transparent;
}

/* Décaler quand les sidebars sont ouvertes */
@media (min-width: 1024px) {
    .player-interface.toc-open .book-header {
        left: 20rem;
    }
}

@media (min-width: 1280px) {
    .player-interface.settings-open .book-header {
        right: 20rem;
    }
}

.book-header .book-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 0.5rem 0;
}

.book-header .book-author {
    font-size: 1rem;
    opacity: 0.6;
    margin: 0;
}

/* Chapitres */
.chapter-intro {
    position: relative;
    z-index: 1;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: clamp(2rem, 6vh, 4rem);
}

.chapter-intro--without-background {
    min-height: auto;
    padding: clamp(2rem, 8vh, 5rem) 0 clamp(1.5rem, 4vh, 3rem);
    margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.chapter-article {
    position: relative;
    z-index: 1;
    margin-bottom: 4rem;
    scroll-margin-top: 2rem;
}

.chapter-intro-background {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(92vw, 64rem);
    height: clamp(16rem, 42vh, 30rem);
    transform: translate(-50%, -50%);
    border-radius: 2rem;
    overflow: hidden;
    opacity: 0.62;
    pointer-events: none;
    background-image: var(--chapter-intro-media);
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.32);
}

.chapter-intro-background::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 0%, transparent 42%, var(--reader-bg) 92%),
        linear-gradient(to bottom, var(--reader-bg) 0%, transparent 20%, transparent 78%, var(--reader-bg) 100%),
        linear-gradient(to right, var(--reader-bg) 0%, transparent 16%, transparent 84%, var(--reader-bg) 100%);
}

.chapter-intro .chapter-title {
    position: relative;
    z-index: 1;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.6rem, 4vw, 2.75rem);
    font-weight: 500;
    line-height: 1.2;
    max-width: min(90%, 42rem);
    margin: 0;
    text-wrap: balance;
    text-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.28);
}

.chapter-article .chapter-text {
    font-size: var(--reader-font-size);
    line-height: var(--reader-line-height);
    text-align: justify;
}

.chapter-article .chapter-text p {
    margin: 0 0 1.5em 0;
    text-indent: 2em;
}

.chapter-article .chapter-text p:first-of-type {
    text-indent: 0;
}

.chapter-article .chapter-text p:first-child::first-letter {
    float: none;
    margin-right: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.chapter-article .chapter-text p:has(img) {
    position: relative;
    left: 50%;
    width: min(92vw, 64rem);
    max-width: none;
    margin: clamp(2rem, 6vh, 4rem) 0;
    transform: translateX(-50%);
    text-align: center;
    text-indent: 0;
}

.chapter-article .chapter-text img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: clamp(16rem, 42vh, 30rem) !important;
    max-height: none !important;
    margin: 0 auto;
    border-radius: 2rem;
    object-fit: cover;
    object-position: center 42%;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.18);
    filter: drop-shadow(0 0.75rem 1.5rem rgba(0, 0, 0, 0.16));
}

[data-theme="dark"] .chapter-article .chapter-text img {
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.34);
    filter: drop-shadow(0 0.75rem 1.5rem rgba(0, 0, 0, 0.28));
}

/* Séparateur de chapitres */
.chapter-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 3rem 0;
}

.chapter-separator span {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
}

/* Fin du livre */
.book-end {
    text-align: center;
    padding: 4rem 0;
}

.book-end > p {
    opacity: 0.6;
    font-style: italic;
    margin-bottom: 2rem;
}

/* Bouton retour à l'histoire */
.btn-back-to-story {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--reader-text);
    background: var(--reader-hover);
    border: 1px solid var(--reader-border);
    border-radius: 50px;
    text-decoration: none;
    transition: all var(--reader-transition);
}

.btn-back-to-story:hover {
    background: var(--reader-active);
    transform: translateY(-2px);
}

/* ==========================================================================
   FIN DE CHAPITRE - Actions pour continuer
   ========================================================================== */

.chapter-end-actions {
    text-align: center;
    padding: 3rem 0 4rem;
    margin-top: 2rem;
}

.chapter-end-actions .chapter-separator {
    margin-bottom: 2rem;
}

.chapter-end-message {
    font-size: 1rem;
    opacity: 0.5;
    margin: 0 0 1.5rem;
    font-style: italic;
}

/* Bouton Continuer vers le chapitre suivant */
.btn-next-chapter {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #0a0a12;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(243, 156, 18, 0.3),
        0 0 20px rgba(243, 156, 18, 0.1);
    animation: nextChapterPulse 3s ease-in-out infinite;
}

@keyframes nextChapterPulse {
    0%, 100% { 
        box-shadow: 
            0 4px 15px rgba(243, 156, 18, 0.3),
            0 0 20px rgba(243, 156, 18, 0.1);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 6px 25px rgba(243, 156, 18, 0.4),
            0 0 40px rgba(243, 156, 18, 0.2);
        transform: scale(1.02);
    }
}

.btn-next-chapter:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 
        0 8px 30px rgba(243, 156, 18, 0.5),
        0 0 50px rgba(243, 156, 18, 0.25);
    animation: none;
}

.btn-next-chapter:active {
    transform: translateY(0) scale(0.98);
}

.btn-next-chapter i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn-next-chapter:hover i {
    transform: translateX(4px);
}

/* Aperçu du chapitre suivant */
.next-chapter-preview {
    margin-top: 1.25rem;
    opacity: 0.5;
    font-size: 0.875rem;
}

.next-chapter-preview small {
    display: block;
}

/* ==========================================================================
   INDICATEUR DE LIGNE DE LECTURE
   ========================================================================== */

.reading-line-indicator {
    position: fixed;
    left: calc(50% - 24rem - 2.5rem);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
    display: none;
    transition: left var(--reader-transition);
}

/* Suivre le recentrage du texte quand les sidebars décalent la zone de lecture */
@media (min-width: 1024px) {
    .player-interface.toc-open .reading-line-indicator {
        left: calc(50% + 10rem - 24rem - 2.5rem);
    }
}

@media (min-width: 1280px) {
    .player-interface.settings-open .reading-line-indicator {
        left: calc(50% - 10rem - 24rem - 2.5rem);
    }

    .player-interface.toc-open.settings-open .reading-line-indicator {
        left: calc(50% - 24rem - 2.5rem);
    }
}

@media (min-width: 768px) {
    .reading-line-indicator {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

.reading-line-indicator .line {
    width: 2rem;
    height: 2px;
    background: linear-gradient(to right, transparent, currentColor);
    opacity: 0.4;
}

.reading-line-indicator .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    animation: pulse 2s ease-in-out infinite;
}

/* Indicateur mobile */
.reading-line-indicator-mobile {
    position: fixed;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
    display: flex;
}

@media (min-width: 768px) {
    .reading-line-indicator-mobile {
        display: none;
    }
}

.reading-line-indicator-mobile .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* ==========================================================================
   OVERLAYS DE FLOU PROGRESSIF
   ========================================================================== */

.blur-overlay {
    position: fixed;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 15; /* Au-dessus de reading-content (z-index: 10) pour que le backdrop-filter fonctionne */
    transition: left var(--reader-transition), right var(--reader-transition);
}

/* Décaler quand les sidebars sont ouvertes */
@media (min-width: 1024px) {
    .player-interface.toc-open .blur-overlay {
        left: 20rem;
    }
}

@media (min-width: 1280px) {
    .player-interface.settings-open .blur-overlay {
        right: 20rem;
    }
}

/* Overlay du haut - Effet de fade progressif (texte devient transparent vers le haut) */
/* Couvre tout le haut pour masquer le texte scrollé */
.blur-overlay-top {
    top: 0;
    bottom: 50%;
    height: auto;
}

/* Blur du bas - commence au milieu de l'écran et s'accentue vers le bas */
.blur-overlay-bottom {
    top: 50%;
    bottom: 0;
    height: auto;
}

/* Couche de flou unique — remplace les 3 couches précédentes (1 seule passe GPU) */
.blur-layer-1,
.blur-layer-2,
.blur-layer-3 {
    display: none;
}

/* Une seule couche blur masquée progressivement pour le bas */
.blur-overlay-bottom::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
}

/* L'overlay du haut utilise uniquement le gradient de couleur (pas de blur nécessaire) */

/* Gradient de couleur */
.blur-gradient {
    position: absolute;
    inset: 0;
}

/* Thème clair - overlay du haut : opaque en haut pour masquer le texte scrollé */
.blur-overlay-top .blur-gradient {
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.95) 30%,
        rgba(255, 255, 255, 0.7) 60%,
        rgba(255, 255, 255, 0.3) 85%,
        transparent 100%);
}

/* Thème clair - overlay du bas : fade progressif vers le blanc */
.blur-overlay-bottom .blur-gradient {
    background: linear-gradient(to bottom, 
        transparent 0%,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.7) 40%,
        rgba(255, 255, 255, 0.9) 70%,
        rgba(255, 255, 255, 0.98) 100%);
}

/* Thème sombre - overlay du haut : opaque en haut pour masquer le texte scrollé */
[data-theme="dark"] .blur-overlay-top .blur-gradient {
    background: linear-gradient(to bottom, 
        rgba(14, 20, 38, 0.98) 0%,
        rgba(14, 20, 38, 0.95) 30%,
        rgba(14, 20, 38, 0.7) 60%,
        rgba(14, 20, 38, 0.3) 85%,
        transparent 100%);
}

/* Thème sombre - overlay du bas : fade progressif vers le fond sombre */
[data-theme="dark"] .blur-overlay-bottom .blur-gradient {
    background: linear-gradient(to bottom, 
        transparent 0%,
        rgba(14, 20, 38, 0.4) 20%,
        rgba(14, 20, 38, 0.7) 40%,
        rgba(14, 20, 38, 0.9) 70%,
        rgba(14, 20, 38, 0.98) 100%);
}

/* ==========================================================================
   SIDEBAR DROITE - CONTRÔLES DE LECTURE
   ========================================================================== */

.player-interface .settings-sidebar {
    width: 20rem;
    border-left: 1px solid var(--reader-border);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--reader-bg);
    padding: 1.5rem;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 60; /* Au-dessus du book-header (z-index: 50) */
    /* Fermée par défaut - slide vers la droite */
    transform: translateX(100%);
    transition: transform var(--reader-transition);
}

/* Sidebar ouverte */
.player-interface .settings-sidebar.open {
    transform: translateX(0);
}

/* Bouton de fermeture en haut à gauche de la sidebar */
.settings-sidebar .sidebar-close-btn {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--reader-active);
    border: 1px solid var(--reader-border);
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    transition: all var(--reader-transition);
    font-size: 0.875rem;
    z-index: 10; /* Au-dessus du titre */
}

.settings-sidebar .sidebar-close-btn:hover {
    background: var(--reader-btn-default-bg);
    color: var(--reader-btn-default-text);
    border-color: var(--reader-btn-default-bg);
}

.settings-sidebar .settings-title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 1.5rem 0;
    padding-left: 2.5rem; /* Espace pour le bouton de fermeture */
    opacity: 0.6;
}

/* Groupes de paramètres */
.settings-group {
    margin-bottom: 2rem;
}

.settings-group-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    opacity: 0.8;
    margin-bottom: 1rem;
}

/* Boutons thème */
.theme-buttons {
    display: flex;
    gap: 0.5rem;
}

.theme-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--reader-radius);
    cursor: pointer;
    transition: all var(--reader-transition);
    border: 1px solid var(--reader-btn-outline-border);
    background: var(--reader-btn-outline-bg);
    color: inherit;
}

.theme-btn:hover {
    background: var(--reader-hover);
}

.theme-btn.active {
    background: var(--reader-btn-default-bg);
    color: var(--reader-btn-default-text);
    border-color: var(--reader-btn-default-bg);
}

/* Contenu du groupe de paramètres (avec bordure) */
.settings-group-content {
    border: 1px solid var(--reader-border);
    border-radius: var(--reader-radius-lg);
    padding: 1rem;
}

/* Ligne de contrôle */
.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
}

.control-row:first-child {
    padding-top: 0;
}

.control-row:last-child {
    padding-bottom: 0;
}

.control-row:not(:last-child) {
    border-bottom: 1px solid var(--reader-border);
}

.control-row label {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Ligne avec switch */
.switch-row {
    padding: 0.75rem 0;
}

.switch-row .switch-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.switch-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.switch-hint {
    font-size: 0.75rem;
    opacity: 0.5;
    margin: 0;
}

/* Boutons +/- */
.control-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--reader-btn-outline-border);
    background: transparent;
    color: inherit;
    border-radius: var(--reader-radius);
    cursor: pointer;
    transition: all var(--reader-transition);
    font-size: 0.875rem;
}

.control-btn:hover:not(:disabled) {
    background: var(--reader-hover);
}

.control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Valeur de contrôle (entre les boutons) */
.control-value {
    min-width: 3rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Switch toggle */
.switch-toggle {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--reader-switch-bg);
    border-radius: 9999px;
    cursor: pointer;
    transition: background var(--reader-transition);
    border: none;
    padding: 0;
}

.switch-toggle[aria-checked="true"] {
    background: var(--reader-btn-default-bg);
}

.switch-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: 50%;
    transition: transform var(--reader-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch-toggle[aria-checked="true"]::after {
    transform: translateX(1.25rem);
}

/* Info texte */
.setting-info {
    font-size: 0.75rem;
    opacity: 0.5;
    margin-top: 0.25rem;
}

/* Ligne avec description */
.setting-row-with-desc {
    flex-direction: column;
    align-items: flex-start;
}

.setting-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* ==========================================================================
   BOUTONS FLOTTANTS
   ========================================================================== */

/* Bouton Paramètres (mobile/tablette) */
.floating-settings-btn {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--reader-bg);
    border: 1px solid var(--reader-border);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 20;
    color: inherit;
    transition: all var(--reader-transition);
}

.floating-settings-btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

@media (min-width: 1280px) {
    .floating-settings-btn {
        display: none;
    }
}

/* Bouton Play/Pause */
.floating-play-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--reader-btn-default-bg);
    color: var(--reader-btn-default-text);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 20;
    transition: all var(--reader-transition);
}

.floating-play-btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.floating-play-btn.secondary {
    background: var(--reader-input-bg);
    color: var(--reader-text);
}

.floating-play-btn i {
    font-size: 1.25rem;
}

/* Bouton quitter le mode lecture */
.floating-exit-reader-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    background: var(--reader-bg);
    color: inherit;
    border: 1px solid var(--reader-border);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--reader-transition), box-shadow var(--reader-transition), transform var(--reader-transition), right var(--reader-transition);
}

.floating-exit-reader-btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.floating-exit-reader-btn i {
    font-size: 0.875rem;
    opacity: 0.85;
}

.floating-exit-reader-label {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .floating-exit-reader-btn {
        padding: 0;
        width: 2.5rem;
        justify-content: center;
        border-radius: 50%;
    }

    .floating-exit-reader-label {
        display: none;
    }
}

/* Laisser la place au bouton quitter plein écran */
.fullscreen-mode .floating-exit-reader-btn {
    right: 4.25rem;
}

@media (min-width: 1280px) {
    .player-interface.settings-open .floating-exit-reader-btn {
        right: calc(20rem + 1rem);
    }

    .fullscreen-mode.player-interface.settings-open .floating-exit-reader-btn,
    .player-interface.settings-open.fullscreen-mode .floating-exit-reader-btn {
        right: calc(20rem + 4.25rem);
    }
}

/* Bouton quitter plein écran */
.floating-exit-fullscreen {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 30;
    transition: background var(--reader-transition);
}

.floating-exit-fullscreen:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   PANNEAU MOBILE (Bottom Sheet)
   ========================================================================== */

.settings-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--reader-transition), visibility var(--reader-transition);
}

.settings-sheet-overlay.visible,
.settings-sheet-overlay.open {
    opacity: 1;
    visibility: visible;
}

.settings-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: var(--reader-bg);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: 1.5rem;
    overflow-y: auto;
    z-index: 100;
    transform: translateY(100%);
    transition: transform var(--reader-transition);
}

.settings-sheet::before {
    content: '';
    display: block;
    width: 3rem;
    height: 0.25rem;
    background: var(--reader-border);
    border-radius: 9999px;
    margin: 0 auto 1rem;
}

.settings-sheet.open {
    transform: translateY(0);
}

@media (min-width: 1280px) {
    .settings-sheet,
    .settings-sheet-overlay {
        display: none !important;
    }
}

/* Bouton quitter plein écran */
.exit-fullscreen-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 30;
    transition: background var(--reader-transition);
}

.exit-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

.fullscreen-mode .exit-fullscreen-btn {
    display: flex;
}

/* Style désactivé pour le bouton play */
.floating-play-btn.disabled-look {
    background: var(--reader-input-bg);
    color: var(--reader-text);
}

.floating-play-btn.active {
    background: var(--reader-btn-default-bg);
    color: var(--reader-btn-default-text);
}

/* Style actif pour le bouton play (en cours de défilement) */
.floating-play-btn.playing {
    background: linear-gradient(135deg, #fdd200 0%, #e36100 100%);
    color: #113759;
    box-shadow: 0 4px 20px rgba(253, 210, 0, 0.4);
    animation: pulse-playing 2s ease-in-out infinite;
}

.floating-play-btn.playing:hover {
    box-shadow: 0 6px 24px rgba(253, 210, 0, 0.5);
}

@keyframes pulse-playing {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ==========================================================================
   CLASSES UTILITAIRES
   ========================================================================== */

.lg-hidden {
    display: inline-flex;
}

@media (min-width: 1024px) {
    .lg-hidden {
        display: none;
    }
}

/* Police dyslexie */
.dyslexic-font .chapter-text {
    font-family: 'Comic Sans MS', 'OpenDyslexic', Verdana, sans-serif;
}

/* ==========================================================================
   TRANSITION D'INTRO
   ========================================================================== */

.chapter-transition-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 1000;
    transition: opacity 1.5s ease-out, visibility 1.5s ease-out;
}

.chapter-transition-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

.chapter-transition-screen.hidden {
    display: none;
}

.transition-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    padding: 2rem;
    max-width: 80%;
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIER CHAPITRE - Séquence sur 15 secondes :
   0s    : Écran noir
   2s    : Musique commence (géré en JS)
   4s    : Titre du livre apparaît
   6s    : Séparateur apparaît  
   8s    : Titre du chapitre apparaît
   10s   : Pause avant le fondu final
   13s   : Fondu vers la liseuse (géré en JS)
   ═══════════════════════════════════════════════════════════════════════ */

.transition-story-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0 0 0.75rem 0;
    opacity: 0;
    animation: fadeInUp 2s ease-out 4s forwards;
}

.transition-story-author {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    opacity: 0;
    color: rgba(255, 255, 255, 0.72);
    animation: fadeInUp 1.5s ease-out 5s forwards;
}

.transition-chapter-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
    opacity: 0;
    animation: fadeInUp 2s ease-out 8s forwards;
}

.transition-divider {
    width: 60px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 1.5rem auto;
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 6s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cacher le contenu pendant la transition */
body.showing-transition .player-main {
    opacity: 0;
}

.player-main {
    transition: opacity 1.5s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   SÉQUENCE D'APPARITION APRÈS LA TRANSITION
   1. Book-header + overlays de flou apparaissent d'abord
   2. Texte apparaît ensuite en fondu
   ═══════════════════════════════════════════════════════════════════ */

/* État initial pendant la transition : tout est masqué */
body.showing-transition .book-header,
body.showing-transition .blur-overlay,
body.showing-transition .chapter-container,
body.showing-transition .reader-background {
    opacity: 0 !important;
}

/* IMPORTANT : Le texte reste caché jusqu'à reveal-text */
/* Par défaut, le chapter-container est masqué */
body:not(.reveal-text) .chapter-container,
body:not(.reveal-text) .reader-background {
    opacity: 0;
}

/* Par défaut, le header et blur sont masqués */
body:not(.reveal-header) .book-header,
body:not(.reveal-header) .blur-overlay {
    opacity: 0;
}

/* Phase 1 : Header et overlays de flou apparaissent en fondu */
body.reveal-header .book-header {
    opacity: 1;
    transition: opacity 1s ease-out;
}

body.reveal-header .blur-overlay {
    opacity: 1;
    transition: opacity 1s ease-out;
}

/* Phase 2 : Texte apparaît en fondu après le header */
body.reveal-text .chapter-container {
    opacity: 1;
    transition: opacity 1.2s ease-out;
}

/* Book-header (titre + auteur) - disparaît en fondu au scroll (sans bouger) */
/* Utiliser une spécificité plus haute pour écraser body.reveal-header .book-header */
body.reveal-header .book-header.header-hidden,
.book-header.header-hidden {
    opacity: 0 !important;
    pointer-events: none;
}

/* ==========================================================================
   ONGLETS LATÉRAUX (TABS) - Version verticale
   ========================================================================== */

/* Onglet gauche - Chapitres (vertical, icône + texte sur même ligne) */
.sidebar-tab-left {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.5rem;
    background: var(--reader-bg);
    border: 1px solid var(--reader-border);
    border-left: none;
    border-radius: 0 var(--reader-radius-lg) var(--reader-radius-lg) 0;
    cursor: pointer;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    transition: all var(--reader-transition);
    /* Orientation verticale du bouton entier */
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.sidebar-tab-left:hover {
    padding-right: 0.75rem;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
}

.sidebar-tab-left i {
    font-size: 0.875rem;
}

.sidebar-tab-left span {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
    letter-spacing: 0.03em;
}

/* Masquer l'onglet quand la sidebar est ouverte */
.player-interface.toc-open .sidebar-tab-left {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-100%);
}

/* Histoire sans navigation par chapitres */
.player-interface.player-no-chapters .floating-toc-mobile-btn,
.player-interface.player-no-chapters .sidebar-tab-left,
.player-interface.player-no-chapters .toc-sidebar {
    display: none !important;
}

/* Onglet droit - Réglages (vertical, icône + texte sur même ligne) */
.sidebar-tab-right {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.5rem;
    background: var(--reader-bg);
    border: 1px solid var(--reader-border);
    border-right: none;
    border-radius: var(--reader-radius-lg) 0 0 var(--reader-radius-lg);
    cursor: pointer;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    transition: all var(--reader-transition);
    /* Orientation verticale du bouton entier */
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.sidebar-tab-right:hover {
    padding-left: 0.75rem;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
}

.sidebar-tab-right i {
    font-size: 0.875rem;
}

.sidebar-tab-right span {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
    letter-spacing: 0.03em;
}

/* Masquer l'onglet quand la sidebar est ouverte */
.player-interface.settings-open .sidebar-tab-right {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(100%);
}

/* Animation de pulse subtile pour attirer l'attention au premier chargement */
@keyframes tabPulse {
    0%, 100% { 
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }
    50% { 
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
    }
}

@keyframes tabPulseRight {
    0%, 100% { 
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    }
    50% { 
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
    }
}

.sidebar-tab-left.pulse {
    animation: tabPulse 2s ease-in-out 3;
}

.sidebar-tab-right.pulse {
    animation: tabPulseRight 2s ease-in-out 3;
}

/* Sur mobile/tablette, masquer les onglets desktop et utiliser les boutons flottants existants */
@media (max-width: 1023px) {
    .sidebar-tab-left {
        display: none;
    }
}

@media (max-width: 1279px) {
    .sidebar-tab-right {
        display: none;
    }
}

/* Overlay sombre quand une sidebar est ouverte (desktop) */
.sidebar-overlay-desktop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 55; /* Entre le book-header (50) et les sidebars (60) */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--reader-transition), visibility var(--reader-transition);
}

.player-interface.toc-open .sidebar-overlay-desktop,
.player-interface.settings-open .sidebar-overlay-desktop {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   CANVAS D'EFFETS VISUELS (pluie, neige, particules, etc.)
   ========================================================================== */

.visual-effects-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4; /* Au-dessus du fond, en dessous du blur overlay */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.visual-effects-overlay.active {
    opacity: 1;
}

/* Ajustement du z-index pour s'assurer que l'ordre est correct */
/* z-index hierarchy:
   0 - reader-background (image de fond)
   1 - chapter-container (contenu)
   4 - visual-effects-overlay (pluie, neige, etc.)
   6 - reader-background-effects (fonds dynamiques)
   10 - reading-content (texte scrollable)
   15 - blur-overlay (effet de flou progressif - doit être AU-DESSUS du texte pour backdrop-filter)
   16 - audio-indicator, sidebar tabs
   20 - floating buttons (play, settings)
   50 - book-header
   55 - sidebar-overlay-desktop
   60 - sidebars (toc, settings)
   100 - settings-sheet
   1000 - chapter-transition-screen
   9000 - visual-effects-css-layer
   9999 - audio-unlock-screen
*/

/* ==========================================================================
   MARQUEURS D'EFFETS SONORES (bruitages inline)
   ========================================================================== */

/* Supprimer tous les styles inline de background dans le texte du chapitre */
.chapter-text span,
.chapter-text mark,
.chapter-text [style*="background"],
.reading-content span,
.reading-content mark,
.reading-content [style*="background"]:not(.reader-background-effects):not(.reader-background-effects *):not(.chapter-intro-background) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Les marqueurs sont invisibles dans le player pour une lecture fluide */
.player-interface .effect-marker,
.reading-content .effect-marker,
.chapter-text .effect-marker,
span.effect-marker {
    position: relative;
    cursor: default;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Icône d'effet (masquée dans le player) */
.player-interface .effect-marker .effect-icon,
.reading-content .effect-marker .effect-icon,
.chapter-text .effect-marker .effect-icon,
.effect-marker > .effect-icon,
.effect-marker .effect-icon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ==========================================================================
   EFFETS DE FOND AVEC PORTÉE (TIMELINE)
   ========================================================================== */

/* Container des effets de fond dynamiques (liés aux paragraphes via timeline) */
.reader-background-effects {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 6; /* Au-dessus des blur-overlays (z-index: 5) pour être visible */
    /* Opacité par défaut - sera ajustée par JavaScript selon la config de l'effet */
    opacity: 0.12;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 
        opacity 0.8s ease-out,
        background-image 0.8s ease-out,
        background-color 0.8s ease-out,
        filter 0.8s ease-out;
}

.reader-background-effects.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 0%, transparent 38%, var(--reader-bg) 88%),
        linear-gradient(to bottom, var(--reader-bg) 0%, transparent 18%, transparent 82%, var(--reader-bg) 100%),
        linear-gradient(to right, var(--reader-bg) 0%, transparent 18%, transparent 82%, var(--reader-bg) 100%);
}

/* Transition de changement de fond */
.reader-background-effects.transitioning {
    opacity: 0;
}

/* Thème sombre : fond légèrement plus visible */
[data-theme="dark"] .reader-background-effects {
    opacity: 0.18;
}

/* Classes de fond prédéfinies */
.reader-background-effects.bg-effect-dark {
    background-color: #1a1a2e;
}

.reader-background-effects.bg-effect-light {
    background-color: #f8f9fa;
}

.reader-background-effects.bg-effect-sepia {
    background-color: #f4ecd8;
}

.reader-background-effects.bg-effect-blood-red {
    background: linear-gradient(180deg, #2d0a0a 0%, #1a0505 100%);
}

.reader-background-effects.bg-effect-ice-blue {
    background: linear-gradient(180deg, #0a1628 0%, #051020 100%);
}

.reader-background-effects.bg-effect-forest-green {
    background: linear-gradient(180deg, #0a2816 0%, #051a0d 100%);
}

.reader-background-effects.bg-effect-sunset-orange {
    background: linear-gradient(180deg, #2d1a0a 0%, #1a0f05 100%);
}

.reader-background-effects.bg-effect-midnight-purple {
    background: linear-gradient(180deg, #1a0a28 0%, #0f0518 100%);
}

/* Overlays animés */
.reader-background-effects.bg-effect-rain-overlay {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='10' y1='0' x2='8' y2='100' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='30' y1='0' x2='28' y2='100' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='50' y1='0' x2='48' y2='100' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='70' y1='0' x2='68' y2='100' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='90' y1='0' x2='88' y2='100' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 50px 50px;
    animation: rainFall 1s linear infinite;
}

@keyframes rainFall {
    0% { background-position-y: 0; }
    100% { background-position-y: 50px; }
}

.reader-background-effects.bg-effect-fog {
    background: radial-gradient(ellipse at center, transparent 0%, rgba(128, 128, 128, 0.3) 100%);
    animation: fogPulse 8s ease-in-out infinite;
}

@keyframes fogPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

/* Vignette */
.reader-vignette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease-out;
}

/* ==========================================================================
   INDICATEUR AUDIO (AMBIANCE)
   ========================================================================== */

.audio-indicator {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--reader-bg);
    border: 1px solid var(--reader-border);
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 15;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none;
}

.audio-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}

.audio-indicator .bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}

.audio-indicator .bar {
    width: 3px;
    background: var(--reader-text);
    border-radius: 1px;
    animation: audioBar 1s ease-in-out infinite;
}

.audio-indicator .bar:nth-child(1) {
    animation-delay: 0s;
    height: 6px;
}

.audio-indicator .bar:nth-child(2) {
    animation-delay: 0.2s;
    height: 12px;
}

.audio-indicator .bar:nth-child(3) {
    animation-delay: 0.4s;
    height: 8px;
}

.audio-indicator .bar:nth-child(4) {
    animation-delay: 0.6s;
    height: 14px;
}

@keyframes audioBar {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}

.audio-indicator .audio-label {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
}

/* ==========================================================================
   ANIMATIONS D'EFFETS TEXTE (avec portée)
   ========================================================================== */

/* Effet de tremblement */
.chapter-text p.effect-shake {
    animation: textShake 0.5s ease-in-out;
}

.chapter-text p.effect-shake-strong {
    animation: textShakeStrong 0.6s ease-in-out;
}

@keyframes textShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes textShakeStrong {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Effet de pulsation */
.chapter-text p.effect-pulse {
    animation: textPulse 2s ease-in-out infinite;
}

@keyframes textPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Effet de lueur */
.chapter-text p.effect-glow {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .chapter-text p.effect-glow {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.chapter-text p.effect-glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }
    50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.7); }
}

/* Effet de fondu entrant */
.chapter-text p.effect-fade-in {
    animation: textFadeIn 1s ease-out forwards;
}

@keyframes textFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Effet de flou */
.chapter-text p.effect-blur {
    filter: blur(2px);
    transition: filter 0.5s ease-out;
}

/* Effet de flottement */
.chapter-text p.effect-float {
    animation: textFloat 3s ease-in-out infinite;
}

@keyframes textFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Effet arc-en-ciel */
.chapter-text p.effect-rainbow {
    background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbowShift 3s linear infinite;
}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Effet néon */
.chapter-text p.effect-neon {
    color: #0ff;
    text-shadow: 
        0 0 5px #0ff,
        0 0 10px #0ff,
        0 0 20px #0ff,
        0 0 40px #0ff;
}

/* Effet glitch */
.chapter-text p.effect-glitch {
    animation: textGlitch 0.5s steps(2) infinite;
}

@keyframes textGlitch {
    0% { transform: translate(0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, 2px); }
    100% { transform: translate(0); }
}

/* Effet de rebond */
.chapter-text p.effect-bounce {
    animation: textBounce 0.8s ease-out;
}

@keyframes textBounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-15px); }
    50% { transform: translateY(-5px); }
    70% { transform: translateY(-8px); }
}

/* Effet de slide */
.chapter-text p.effect-slide-in-left {
    animation: slideInLeft 0.5s ease-out forwards;
}

.chapter-text p.effect-slide-in-right {
    animation: slideInRight 0.5s ease-out forwards;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Effet de typing / machine à écrire */
.chapter-text p.effect-typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid currentColor;
    animation: 
        typing 3s steps(40) forwards,
        blinkCursor 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCursor {
    50% { border-color: transparent; }
}

/* ==========================================================================
   ÉCRAN D'ACTIVATION AUDIO
   Overlay obligatoire pour débloquer l'autoplay audio du navigateur
   ========================================================================== */

.audio-unlock-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a12 0%, #1a1a2e 50%, #16213e 100%);
    animation: audioUnlockFadeIn 0.5s ease-out;
}

.audio-unlock-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(243, 156, 18, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(243, 156, 18, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

@keyframes audioUnlockFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.audio-unlock-screen.closing {
    animation: audioUnlockFadeOut 0.6s ease-in forwards;
}

@keyframes audioUnlockFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.audio-unlock-screen.hidden {
    display: none;
}

.audio-unlock-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    max-width: 450px;
    animation: audioUnlockContentIn 0.8s ease-out 0.2s both;
}

@keyframes audioUnlockContentIn {
    from { 
        opacity: 0; 
        transform: translateY(30px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Icône audio avec animation de pulse */
.audio-unlock-icon {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.audio-unlock-icon i {
    font-size: 3rem;
    color: #f39c12;
    position: relative;
    z-index: 2;
    animation: audioIconBounce 2s ease-in-out infinite;
}

@keyframes audioIconBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.audio-unlock-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(243, 156, 18, 0.15);
    animation: audioUnlockPulse 2s ease-in-out infinite;
}

.audio-unlock-pulse::before,
.audio-unlock-pulse::after {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    border: 2px solid rgba(243, 156, 18, 0.3);
    animation: audioUnlockRing 2s ease-out infinite;
}

.audio-unlock-pulse::after {
    inset: -30px;
    animation-delay: 0.5s;
}

@keyframes audioUnlockPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1.15); 
        opacity: 0.7; 
    }
}

@keyframes audioUnlockRing {
    0% { 
        transform: scale(0.8); 
        opacity: 1; 
    }
    100% { 
        transform: scale(1.5); 
        opacity: 0; 
    }
}

/* Titre */
.audio-unlock-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

/* Description */
.audio-unlock-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 2rem;
}

/* Bouton principal */
.audio-unlock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #0a0a12;
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(243, 156, 18, 0.4),
        0 0 30px rgba(243, 156, 18, 0.2);
    animation: audioUnlockBtnPulse 2.5s ease-in-out infinite;
}

@keyframes audioUnlockBtnPulse {
    0%, 100% { 
        box-shadow: 
            0 4px 15px rgba(243, 156, 18, 0.4),
            0 0 30px rgba(243, 156, 18, 0.2);
    }
    50% { 
        box-shadow: 
            0 6px 25px rgba(243, 156, 18, 0.6),
            0 0 50px rgba(243, 156, 18, 0.3);
    }
}

.audio-unlock-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 8px 30px rgba(243, 156, 18, 0.5),
        0 0 60px rgba(243, 156, 18, 0.3);
}

.audio-unlock-btn:active {
    transform: translateY(0) scale(0.98);
}

.audio-unlock-btn i {
    font-size: 1.25rem;
}

/* Option "continuer sans son" */
.audio-unlock-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.2s ease;
}

.audio-unlock-option:hover {
    color: rgba(255, 255, 255, 0.7);
}

.audio-unlock-option input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #f39c12;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 480px) {
    .audio-unlock-content {
        padding: 1.5rem;
    }
    
    .audio-unlock-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 1.5rem;
    }
    
    .audio-unlock-icon i {
        font-size: 2.5rem;
    }
    
    .audio-unlock-title {
        font-size: 1.5rem;
    }
    
    .audio-unlock-description {
        font-size: 0.9rem;
    }
    
    .audio-unlock-description br {
        display: none;
    }
    
    .audio-unlock-btn {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   EFFETS VISUELS CSS (depuis builder_effects)
   ========================================================================== */

/* Layer d'effets CSS overlay */
.visual-effects-css-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9000; /* Au-dessus de presque tout sauf l'écran d'activation audio */
}

/* --- Effets de vignette --- */
.effect-vignette-dark {
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.6);
}

.effect-vignette-light {
    box-shadow: inset 0 0 150px rgba(255, 255, 255, 0.4);
}

/* --- Effets de filtre écran --- */
.effect-sepia {
    background: rgba(112, 66, 20, 0.15);
}

.effect-grayscale::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: grayscale(1);
}

.effect-blur::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(3px);
}

/* --- Effets de flash --- */
.visual-effects-css-layer.effect-flash-white {
    animation: flash-white 0.8s ease-out forwards;
}

.visual-effects-css-layer.effect-flash-black {
    animation: flash-black 0.8s ease-out forwards;
}

@keyframes flash-white {
    0% { background: rgba(255, 255, 255, 1); }
    30% { background: rgba(255, 255, 255, 0.9); }
    100% { background: transparent; }
}

@keyframes flash-black {
    0% { background: rgba(0, 0, 0, 1); }
    30% { background: rgba(0, 0, 0, 0.9); }
    100% { background: transparent; }
}

/* --- Effets de lumière --- */
.effect-glow {
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.1);
    animation: glow-pulse 2s ease-in-out infinite;
}

.effect-glow-gold {
    box-shadow: inset 0 0 100px rgba(255, 215, 0, 0.15);
    animation: glow-pulse-gold 2s ease-in-out infinite;
}

.effect-neon {
    box-shadow: 
        inset 0 0 50px rgba(0, 255, 255, 0.1),
        inset 0 0 100px rgba(0, 255, 255, 0.05);
    animation: neon-pulse 1s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.1); }
    50% { box-shadow: inset 0 0 150px rgba(255, 255, 255, 0.2); }
}

@keyframes glow-pulse-gold {
    0%, 100% { box-shadow: inset 0 0 100px rgba(255, 215, 0, 0.15); }
    50% { box-shadow: inset 0 0 150px rgba(255, 215, 0, 0.25); }
}

@keyframes neon-pulse {
    0%, 100% { 
        box-shadow: 
            inset 0 0 50px rgba(0, 255, 255, 0.1),
            inset 0 0 100px rgba(0, 255, 255, 0.05);
    }
    50% { 
        box-shadow: 
            inset 0 0 80px rgba(0, 255, 255, 0.2),
            inset 0 0 150px rgba(0, 255, 255, 0.1);
    }
}

/* --- Effets de texte (appliqués aux paragraphes) --- */
.chapter-text p.effect-shake {
    display: inline-block;
    animation: text-shake 0.55s ease-in-out infinite;
}

.chapter-text p.effect-shake-strong {
    display: inline-block;
    animation: text-shake-strong 0.35s ease-in-out infinite;
}

.chapter-text p.effect-pulse {
    display: inline-block;
    animation: text-pulse 1.25s ease-in-out infinite;
}

.chapter-text p.effect-glitch {
    animation: text-glitch 0.5s ease-in-out infinite;
}

.chapter-text p.effect-typing {
    overflow: hidden;
    border-right: 2px solid var(--reader-text);
    animation: typing 3s steps(40) 1s forwards, blink-caret 0.75s step-end infinite;
}

@keyframes text-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

@keyframes text-shake-strong {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-8px, -2px); }
    20% { transform: translate(8px, 2px); }
    30% { transform: translate(-8px, 2px); }
    40% { transform: translate(8px, -2px); }
    50% { transform: translate(-5px, 0); }
    60% { transform: translate(5px, 0); }
    70% { transform: translate(-5px, 0); }
    80% { transform: translate(5px, 0); }
    90% { transform: translate(-2px, 0); }
}

@keyframes text-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.58; transform: scale(1.06); }
}

@keyframes text-glitch {
    0%, 100% { transform: translate(0); filter: none; }
    20% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
    40% { transform: translate(2px, -1px); filter: hue-rotate(180deg); }
    60% { transform: translate(-1px, 2px); filter: hue-rotate(270deg); }
    80% { transform: translate(1px, -2px); }
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--reader-text); }
}

/* ==========================================================================
   RÉGLAGES DU CHAPITRE - Thèmes additionnels
   Branchés depuis la modale "Réglages du chapitre" (builder)
   ========================================================================== */

[data-theme="sepia"] {
    --reader-bg: #f4ecd8;
    --reader-text: #4a3b28;
    --reader-border: rgba(74, 59, 40, 0.15);
    --reader-muted: #8a7355;
    --reader-hover: rgba(74, 59, 40, 0.06);
    --reader-active: rgba(74, 59, 40, 0.12);
    --reader-switch-bg: #cbb994;
    --reader-input-bg: #ebe0c6;
    --reader-btn-default-bg: #4a3b28;
    --reader-btn-default-text: #f4ecd8;
    --reader-btn-outline-border: rgba(74, 59, 40, 0.25);
}

[data-theme="paper"] {
    --reader-bg: #f7f4ec;
    --reader-text: #3a3631;
    --reader-border: rgba(58, 54, 49, 0.14);
    --reader-muted: #837c70;
    --reader-hover: rgba(58, 54, 49, 0.05);
    --reader-active: rgba(58, 54, 49, 0.1);
    --reader-switch-bg: #d2ccbe;
    --reader-input-bg: #ede8dc;
    --reader-btn-default-bg: #3a3631;
    --reader-btn-default-text: #f7f4ec;
    --reader-btn-outline-border: rgba(58, 54, 49, 0.22);
}

[data-theme="nature"] {
    --reader-bg: #10231a;
    --reader-text: #e7f3ea;
    --reader-border: rgba(231, 243, 234, 0.12);
    --reader-muted: #93b8a2;
    --reader-hover: rgba(231, 243, 234, 0.06);
    --reader-active: rgba(231, 243, 234, 0.12);
    --reader-switch-bg: #2f5443;
    --reader-input-bg: #1a3327;
    --reader-btn-default-bg: #7bc49a;
    --reader-btn-default-text: #0c1b14;
    --reader-btn-outline-border: rgba(231, 243, 234, 0.2);
}

[data-theme="night"] {
    --reader-bg: #060914;
    --reader-text: #dfe6f5;
    --reader-border: rgba(223, 230, 245, 0.1);
    --reader-muted: #8893b5;
    --reader-hover: rgba(223, 230, 245, 0.05);
    --reader-active: rgba(223, 230, 245, 0.1);
    --reader-switch-bg: #28324f;
    --reader-input-bg: #0e1426;
    --reader-btn-default-bg: #aab6e6;
    --reader-btn-default-text: #060914;
    --reader-btn-outline-border: rgba(223, 230, 245, 0.18);
}

/* Image de fond un peu plus visible sur les thèmes sombres additionnels */
[data-theme="nature"] .reader-background,
[data-theme="night"] .reader-background,
[data-theme="sepia"] .reader-background,
[data-theme="paper"] .reader-background {
    opacity: 0.12;
}

/* ==========================================================================
   RÉGLAGES DU CHAPITRE - Assombrissement du fond
   ========================================================================== */

.reader-darken-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #000;
    opacity: var(--chapter-bg-darken, 0);
    transition: opacity var(--reader-transition);
}

/* ==========================================================================
   RÉGLAGES DU CHAPITRE - Affichage du titre
   ========================================================================== */

.chapter-intro .chapter-title {
    animation: chapterTitleReveal var(--chapter-title-duration, 1s) ease-out var(--chapter-title-delay, 0s) both;
}

@keyframes chapterTitleReveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Masqué : aucun titre visible dans la liseuse */
.chapter-intro--hidden .chapter-title,
.transition-screen--hidden-title .transition-chapter-title,
.transition-screen--hidden-title .transition-divider {
    display: none !important;
}

/* Centré plein écran */
.chapter-intro--centered {
    min-height: 100vh;
}

.chapter-intro--centered .chapter-title {
    font-size: clamp(2rem, 6vw, 4rem);
}

/* Cinématique : titre clair sur fond assombri */
.chapter-intro--cinematic {
    min-height: 80vh;
}

.chapter-intro--cinematic .chapter-title {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    letter-spacing: 0.02em;
    text-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.6);
}

/* Superposition sur l'image de fond */
.chapter-intro--overlay .chapter-title {
    color: #fff;
    text-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.7);
}

.chapter-intro--overlay .chapter-intro-background {
    opacity: 0.9;
}

.chapter-intro--overlay .chapter-intro-background::after {
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%),
        linear-gradient(to bottom, var(--reader-bg) 0%, transparent 28%, transparent 72%, var(--reader-bg) 100%);
}

/* ==========================================================================
   RÉGLAGES DU CHAPITRE - Texte d'introduction (épigraphe)
   ========================================================================== */

.chapter-epigraph {
    position: relative;
    z-index: 1;
    max-width: min(90%, 34rem);
    margin: 0 auto clamp(2rem, 6vh, 3.5rem);
    padding: 0 1.5rem;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.7;
    color: var(--reader-muted);
    text-wrap: balance;
}

.chapter-epigraph::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 1px;
    margin: 0 auto 1.25rem;
    background: var(--reader-border);
}

/* ==========================================================================
   RÉGLAGES DU CHAPITRE - Transitions d'entrée du contenu
   ========================================================================== */

body.reveal-text .chapter-container.transition-in-fade {
    animation: chapterInFade 1.2s ease-out both;
}
body.reveal-text .chapter-container.transition-in-slide-left {
    animation: chapterInSlideLeft 0.9s ease-out both;
}
body.reveal-text .chapter-container.transition-in-slide-right {
    animation: chapterInSlideRight 0.9s ease-out both;
}
body.reveal-text .chapter-container.transition-in-zoom {
    animation: chapterInZoom 0.9s ease-out both;
}
body.reveal-text .chapter-container.transition-in-blur {
    animation: chapterInBlur 1.1s ease-out both;
}

@keyframes chapterInFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes chapterInSlideLeft {
    from { opacity: 0; transform: translateX(-6vw); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes chapterInSlideRight {
    from { opacity: 0; transform: translateX(6vw); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes chapterInZoom {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes chapterInBlur {
    from { opacity: 0; filter: blur(12px); }
    to   { opacity: 1; filter: blur(0); }
}

/* ==========================================================================
   RÉGLAGES DU CHAPITRE - Transitions de sortie (navigation)
   ========================================================================== */

.player-main {
    transition: opacity 1.5s ease-out, transform 0.5s ease-out, filter 0.5s ease-out;
}

body.transition-out-slide-left .player-main { transform: translateX(-6vw); opacity: 0; }
body.transition-out-slide-right .player-main { transform: translateX(6vw); opacity: 0; }

/* ==========================================================================
   RÉGLAGES DU CHAPITRE - Particules flottantes
   ========================================================================== */

.reader-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.reader-particles .particle {
    position: absolute;
    bottom: -12px;
    border-radius: 50%;
    background: var(--reader-text);
    opacity: 0;
    animation: particleFloat linear infinite;
    will-change: transform, opacity;
}

@keyframes particleFloat {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: var(--p-opacity, 0.4); }
    90%  { opacity: var(--p-opacity, 0.4); }
    100% { transform: translateY(-104vh) translateX(var(--p-drift, 0px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .reader-particles { display: none; }
    .chapter-intro .chapter-title,
    body.reveal-text .chapter-container[class*="transition-in-"] { animation: none !important; }
}