/* ============================================
   📱 LECTURE-MOBILE.CSS
   Responsive pour la page de lecture (Lecture.html)
   Mobile-first, puis tablette
   ============================================ */

/* --- Éléments créés par JS, cachés par défaut sur desktop --- */
.sidebar-mobile-overlay,
.sidebar-mobile-handle {
    display: none;
}

/* --- Ne jamais altérer les containers de mesure off-screen --- */
.measure-container,
.measure-container * {
    all: revert;
    box-sizing: border-box;
}

/* ===== PROTECTION DESKTOP : garantir le grid layout ===== */
@media (min-width: 769px) {
    .reader-notes-container {
        display: grid !important;
        flex-direction: unset !important;
    }

    .sidebar-column {
        position: relative !important;
        display: flex !important;
        width: auto !important;
        height: 0 !important;
        min-height: 100% !important;
        transform: none !important;
        grid-column: 3 !important;
        border-radius: 0 !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        z-index: 10 !important;
        overflow: hidden !important;
    }
}

/* ===== MOBILE ≤ 768px ===== */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {

    /* --- En-tête du livre --- */
    .book-header {
        margin-bottom: 1rem;
        padding: 0 0.5rem;
    }

    .book-title-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .book-header h1 {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .badge-level,
    .badge-category {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }

    .author-link {
        font-size: 0.8rem;
    }

    #book-estimated-time.book-badge,
    .book-badge {
        font-size: 11px;
        padding: 3px 6px;
    }

    /* --- Layout principal : grille → colonne unique --- */
    .reader-notes-container {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        gap: 0 !important;
        min-width: unset !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    /* Forcer le mode page simple sur mobile */
    .reader-notes-container {
        /* JS devrait aussi forcer singlePageMode, on aide visuellement */
    }

    /* Cacher la sidebar toggle bar (verticale) sur mobile */
    .sidebar-toggle-bar {
        display: none !important;
    }

    /* --- Poignée de fermeture en haut du bottom-sheet --- */
    .sidebar-mobile-handle {
        display: flex;
        justify-content: center;
        padding: 8px 0 4px;
        cursor: pointer;
    }

    .sidebar-mobile-handle-bar {
        width: 44px;
        height: 5px;
        border-radius: 3px;
        background: var(--muted, #ccc);
        opacity: 0.4;
    }

    /* --- Sidebar → bottom sheet cohérent avec les autres popups --- */
    .sidebar-column {
        visibility: hidden;
        pointer-events: none;
        position: fixed !important;
        bottom: 70px;
        left: 16px;
        right: 16px;
        top: auto !important;
        width: auto !important;
        max-width: 500px;
        height: auto !important;
        min-height: 0 !important;
        max-height: 75vh !important;
        z-index: 20200;
        background: var(--panel-light, #fff);
        border-radius: 24px;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.12), 0 15px 50px rgba(0,0,0,0.2);
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 18px 16px;
        margin: auto;
        transform: translateY(150%);
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.4s;
        grid-column: unset !important;
        border: 1px solid var(--border-color, rgba(0,0,0,0.06));
    }

    /* Quand la sidebar mobile est ouverte */
    .sidebar-column.mobile-open {
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
        z-index: 200000 !important;
    }

    /* Flex layout for internal scroll on notes-list / tab-toc only */
    .sidebar-column .stopwatch-widget,
    .sidebar-column .sidebar-tabs {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
    }

    .sidebar-column .notes-widget {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .sidebar-column .tab-content {
        display: none !important;
    }

    .sidebar-column .tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Only #notes-list scrolls inside the notes tab */
    .sidebar-column #notes-list {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Only #toc-list scrolls inside the TOC tab */
    .sidebar-column #toc-list {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Overlay pour fermer la sidebar mobile */
    .sidebar-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 199999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .sidebar-mobile-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .lecture-sidebar {
        padding-top: 0;
        gap: 0.5rem;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* --- Navigation du livre --- */
    .book-navigation {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.6rem;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        justify-content: center;
    }

    .page-navigation-group {
        order: 1;
        flex: 0 0 auto;
    }

    .nav-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
        min-width: 36px;
    }

    .page-indicator {
        font-size: 0.8rem;
        min-width: 100px;
        margin: 0 0.4rem;
    }

    /* Barre de progression : pleine largeur sur mobile */
    .reading-progress-container {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
        min-width: unset;
    }

    /* Cacher les éléments secondaires de nav sur mobile */
    .page-jump-nav {
        display: none !important;
    }

    .nav-group-tools {
        order: 2;
    }

    .nav-divider {
        display: none !important;
    }

    /* Fullscreen toggle */
    .fullscreen-toggle-btn {
        order: 2;
    }

    /* Bouton recalc */
    .nav-btn-recalc {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }

    /* Saut de page */
    .page-jump {
        display: none;
        /* cacher sur mobile, les flèches suffisent */
    }

    /* --- Loading message: positionné dans la zone du livre, pas sur la nav --- */
    .book-loading {
        position: relative;
        top: 0;
        height: auto;
        min-height: 300px;
        padding-top: 80px;
    }

    /* --- Book Viewer --- */
    .book-viewer {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem;
        margin: 0;
        border-radius: 0;
        border-left: none;
        box-shadow: none;
        /* Simplifier les ombres de livre sur mobile */
    }

    /* Cacher les effets de livre (pseudo-éléments) sur mobile */
    .book-viewer::before,
    .book-viewer::after {
        display: none;
    }

    /* Fades haut/bas simplifiées */
    .book-viewer-fade-top,
    .book-viewer-fade-bottom {
        height: 16px;
    }

    /* Zone de contenu pour le défilement vertical mobile */
    .book-content {
        flex-direction: column;
        gap: 0;
        min-height: 300px;
        font-size: 0.95rem;
        line-height: 1.7;
        overflow-y: visible;
        padding-bottom: 52px; /* Juste assez pour la barre fixe en bas */
    }

    /* Cacher le trait central (une seule page sur mobile) */
    .book-content::after {
        display: none;
    }

    /* Pages : défilement vertical libre sur mobile (plus de hauteur fixe) */
    .page-container {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        height: auto !important;
        min-height: auto;
        overflow: visible;
        margin: 0;
    }

    .page-content {
        padding: 0;
    }

    /* Titres dans le contenu */
    .page-title-h1 {
        font-size: 1.4em;
    }

    .page-title-h2 {
        font-size: 1.2em;
    }

    /* Notes de bas de page */
    .book-footnotes {
        font-size: 12px;
        padding-top: 10px;
    }

    /* --- Chronomètre / Stopwatch dans la sidebar --- */
    .stopwatch-widget {
        padding: 0.5rem;
    }

    .stopwatch-display {
        font-size: 1.3rem;
    }

    .stopwatch-controls {
        gap: 0.3rem;
    }

    .stopwatch-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }

    /* --- Notes de la sidebar --- */

    .sidebar-widget h3 {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    /* --- Sidebar tabs : tailles confortables au doigt --- */
    .sidebar-column .sidebar-tabs {
        margin-bottom: 0.6rem !important;
        border-bottom: 1px solid var(--border-color, #ddd) !important;
        gap: 0 !important;
        display: flex !important;
    }
    .sidebar-column .sidebar-tab {
        padding: 12px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border: none !important;
        background: transparent !important;
        color: var(--text-secondary, #888) !important;
        border-bottom: 2px solid transparent !important;
        cursor: pointer;
        transition: all 0.2s;
        flex: 1;
        text-align: center;
        letter-spacing: 0.04em;
    }
    .sidebar-column .sidebar-tab.active {
        color: var(--brand-green, #1A5238) !important;
        border-bottom: 2px solid var(--brand-green, #1A5238) !important;
        background: transparent !important;
    }

    /* ===== Notes : tailles confortables ===== */

    /* Notes header row */
    .sidebar-column #tab-notes > div:first-child {
        margin-bottom: 0.6rem !important;
        align-items: center !important;
    }
    .sidebar-column #tab-notes h3,
    .sidebar-column #tab-notes > div:first-child h3 {
        font-size: 14px !important;
        margin: 0 !important;
        letter-spacing: 0.04em;
    }

    /* Prev/next note buttons → boutons cliquables au doigt */
    .sidebar-column .notes-navigation button {
        width: 40px !important;
        height: 36px !important;
        min-width: 40px !important;
        min-height: 36px !important;
        margin: 0 3px !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        border-radius: 10px !important;
        border: 1px solid var(--border-color, #e0e0e0) !important;
        background: var(--panel, #f0f0f0) !important;
        color: var(--text-primary, #333) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .sidebar-column .notes-navigation span,
    .sidebar-column #current-note-index {
        font-size: 0.85rem !important;
        min-width: 36px !important;
        text-align: center !important;
        color: var(--text-secondary, #888);
    }

    /* Search box : pleine largeur, hauteur confortable */
    .sidebar-column .search-box {
        padding: 8px 14px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
        background: var(--panel, #f0f0f0) !important;
        border: 1px solid var(--border-color, #e0e0e0) !important;
    }
    .sidebar-column .search-box input {
        background: transparent !important;
        padding: 4px 0 !important;
        font-size: 14px !important;
        width: 100%;
        border: none !important;
        outline: none !important;
        color: var(--text-primary, #333) !important;
    }

    /* Notes stats row */
    .sidebar-column .notes-stats {
        font-size: 0.8rem !important;
        margin: 0.3rem 0 0.5rem !important;
        padding: 2px 4px !important;
    }

    /* Note item card */
    .sidebar-column .note-item {
        padding: 5px 7px !important;
        margin-bottom: 4px !important;
    }

    /* Action buttons inside note item */
    .sidebar-column .note-item .edit-note-btn,
    .sidebar-column .note-item .delete-note-btn {
        padding: 3px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: 24px !important;
        height: 24px !important;
        line-height: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .sidebar-column .note-item .edit-note-btn svg,
    .sidebar-column .note-item .delete-note-btn svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        display: block !important;
        flex-shrink: 0 !important;
    }

    /* Color square button */
    .sidebar-column .note-item .change-color-btn {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: inline-block !important;
        border-radius: 4px !important;
    }

    /* More spacing between action icons */
    .sidebar-column .note-item .edit-note-btn + .delete-note-btn,
    .sidebar-column .note-item .delete-note-btn + .change-color-btn {
        margin-left: 4px !important;
    }

    /* TOC heading + list gap */
    .sidebar-column #tab-toc h3 {
        font-size: 12px !important;
        margin-bottom: 0.4rem !important;
    }
    .sidebar-column #toc-list {
        gap: 4px !important;
    }

    /* --- Hide stopwatch inside sidebar on mobile (already in bottom sheet) --- */
    .sidebar-column .stopwatch-widget {
        display: none !important;
    }

    /* --- notes-widget: no extra padding on mobile --- */
    .sidebar-column .notes-widget {
        padding: 0 !important;
    }
    .sidebar-column .sidebar-widget {
        padding: 0 !important;
    }

    /* --- Widgets auteur et livres --- */
    .author-card {
        gap: 0.75rem;
    }

    .author-icon {
        width: 40px;
        height: 40px;
    }

    .books-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

    .book-thumb-title {
        font-size: 0.65rem;
    }

    /* --- Onglets de sidebar --- */
    .sidebar-tabs {
        gap: 0;
        margin-bottom: 0.5rem;
    }

    .sidebar-tabs .tab-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
    }

    /* --- Popup de note (sélection de texte) --- */
    .note-popup {
        position: fixed !important;
        bottom: 48px !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0;
        transform: none !important;
        max-height: 50vh;
        overflow-y: auto;
        z-index: 30000;
    }

    /* --- Carrés de couleur dans popup note --- */
    .color-option {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
    }

    #create-note-add-custom-color-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
    }

    /* --- Mode édition couleurs : indicateur visuel --- */
    .color-edit-active .color-option {
        border-style: dashed !important;
        border-color: #888 !important;
        opacity: 0.85;
    }

    /* --- Glossaire popup --- */
    .glossary-popup {
        position: fixed !important;
        bottom: 48px !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset;
        border-radius: 16px 16px 0 0;
        transform: translateY(8px) !important;
        z-index: 100001;
    }

    .glossary-popup.visible {
        transform: translateY(0) !important;
    }

    .glossary-popup::before {
        display: none;
        /* pas de flèche en bottom-sheet */
    }

    /* --- Sélecteur de thème sidebar --- */
    .theme-selector {
        justify-content: center;
    }

    .theme-btn-sidebar {
        width: 36px;
        height: 36px;
    }

    /* --- Timer popup (chronomètre contexte) --- */
    .timer-popup {
        width: 90vw !important;
        max-width: 340px;
    }

    .reader-notes-container.fullscreen .sidebar-mobile-overlay {
        position: absolute;
    }

    /* --- Mode plein écran sur mobile --- */
    .reader-notes-container.fullscreen .book-navigation {
        padding: 0.6rem;
        gap: 0.4rem;
        border-radius: 6px;
        left: 5%;
        width: 90%;
        bottom: 0.75rem;
        transform: translateX(0) translateY(10px);
        z-index: 20150;
    }

    .reader-notes-container.fullscreen.show-nav .book-navigation {
        transform: translateX(0) translateY(0);
    }

    .reader-notes-container.fullscreen .book-navigation .nav-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }

    .reader-notes-container.fullscreen .book-navigation .page-indicator {
        font-size: 0.75rem;
        min-width: 80px;
    }

    /* Chrono fullscreen — ne touche que l'offset vertical : le centrage
       horizontal (left:50% + translateX(-50%)) vient de la règle de base
       dans Lecture-style.css et ne doit pas être re-précisé ici (ajouter
       "right" en plus de "left" l'étirerait au lieu de le centrer). */
    .reader-notes-container.fullscreen .fullscreen-stopwatch-container {
        top: 0.6rem;
    }

    .stopwatch-widget-fullscreen {
        padding: 0.6rem;
        border-radius: 6px;
    }

    .stopwatch-display-fullscreen {
        font-size: 1.2rem;
    }

    .stopwatch-btn-fullscreen {
        width: 34px;
        height: 34px;
    }

    /* Sidebar fullscreen : même comportement bottom-sheet via .mobile-open */
    .reader-notes-container.fullscreen .sidebar-column {
        position: fixed !important;
        top: auto !important;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100% !important;
        height: 85vh !important;
        max-height: 85vh !important;
        border-radius: 16px 16px 0 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 20200;
        /* Utiliser les variables du thème — identique au bottom-sheet normal */
        background-color: var(--panel-light, #f0efe9) !important;
        color: var(--text-primary, #333) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        border-left: none !important;
    }

    .reader-notes-container.fullscreen .sidebar-column:not(.mobile-open) {
        display: none !important;
    }

    .reader-notes-container.fullscreen .sidebar-column.mobile-open {
        display: block !important;
        transform: translateY(0);
    }

    .reader-notes-container.fullscreen .sidebar-column .lecture-sidebar {
        overflow-y: visible;
    }

    /* Reset des styles desktop fullscreen pour les widgets — thème normal */
    .reader-notes-container.fullscreen .notes-widget {
        background-color: transparent !important;
        color: inherit !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .reader-notes-container.fullscreen .stopwatch-widget {
        background-color: transparent !important;
        color: inherit !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .reader-notes-container.fullscreen .sidebar-widget {
        color: inherit !important;
    }

    .reader-notes-container.fullscreen.sidebar-hidden .sidebar-column:not(.mobile-open) {
        display: none !important;
        pointer-events: none;
    }

    /* Indicateur toggle sidebar en fullscreen */
    .sidebar-toggle-indicator {
        width: 60px;
        height: 36px;
        top: auto !important;
        bottom: 10px !important;
        right: 10px !important;
        border-radius: 18px;
    }

    .sidebar-toggle-indicator .chev {
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        /* pointe vers le haut = ouvre le bottom-sheet */
    }

    .reader-notes-container.fullscreen:not(.sidebar-hidden) .sidebar-toggle-indicator {
        right: 10px;
        bottom: calc(65vh + 10px);
    }

    .reader-notes-container.fullscreen:not(.sidebar-hidden) .sidebar-toggle-indicator .chev {
        transform: rotate(-135deg);
        /* pointe vers le bas = ferme */
    }

    /* Livre ouvert → pas d'effet double page sur mobile */
    .reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer {
        box-shadow: none;
        background-image: none;
        border-radius: 0;
    }

    .reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer::before,
    .reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer::after {
        display: none;
    }

    /* Fullscreen livre : simplifier les ombres */
    .reader-notes-container.fullscreen .book-viewer {
        box-shadow: none;
        border: none;
        border-radius: 0;
    }

    .reader-notes-container.fullscreen .book-viewer::before,
    .reader-notes-container.fullscreen .book-viewer::after {
        display: none;
    }

    /* Supprimer les nav-dividers fullscreen sur mobile */
    .reader-notes-container.fullscreen .book-navigation .nav-divider {
        display: none;
    }

    /* Cacher page-jump dans la nav fullscreen */
    .reader-notes-container.fullscreen .page-jump-nav {
        display: none !important;
    }
}

/* ===== PETIT MOBILE ≤ 480px ===== */
@media (max-width: 480px) {

    .book-header h1 {
        font-size: 1rem;
    }

    .book-navigation {
        padding: 0.4rem;
    }

    .nav-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
        min-width: 32px;
    }

    .page-indicator {
        font-size: 0.75rem;
        min-width: 80px;
    }

    .book-content {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .page-container {
        min-height: auto;
    }

    .page-title-h1 {
        font-size: 1.2em;
    }

    .page-title-h2 {
        font-size: 1.05em;
    }

    /* Theme selector compact */
    .nav-dropdown-panel .theme-btn-sidebar,
    .theme-btn {
        width: 26px;
        height: 26px;
    }

    /* Fullscreen nav encore plus compacte */
    .reader-notes-container.fullscreen .book-navigation {
        width: 96%;
        left: 2%;
        padding: 0.5rem;
    }

    .reader-notes-container.fullscreen .book-navigation .nav-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
    }

    .stopwatch-display-fullscreen {
        font-size: 1rem;
    }

    .stopwatch-btn-fullscreen {
        width: 30px;
        height: 30px;
    }

    /* Sidebar bottom sheet : ajuster hauteur sur petit écran */
    .sidebar-column.mobile-open {
        height: 60vh !important;
    }
}

/* ===== TRÈS PETIT MOBILE ≤ 360px ===== */
@media (max-width: 360px) {

    .book-header h1 {
        font-size: 0.9rem;
    }

    .badge-level,
    .badge-category {
        font-size: 0.6rem;
    }

    .nav-btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
    }

    .page-indicator {
        font-size: 0.7rem;
        min-width: 60px;
    }

    .book-content {
        font-size: 0.85rem;
    }
}

/* ===== TABLETTE 769px – 1024px ===== */
@media (min-width: 769px) and (max-width: 1024px) {

    .reader-notes-container {
        grid-template-columns: 1fr auto 200px !important;
    }

    /* Respecter la fermeture de la sidebar (js/lecture-ui.js: setupSidebarCollapseToggle) :
       sans ce !important, la règle ci-dessus (elle-même !important) gagne toujours face à
       .sidebar-collapsed:not(.fullscreen) (Lecture-style.css), qui n'a pas !important — la
       3e colonne restait verrouillée à 200px même sidebar "fermée", laissant un espace vide. */
    .reader-notes-container.sidebar-collapsed:not(.fullscreen) {
        grid-template-columns: minmax(0, 1fr) auto 0px !important;
    }

    .sidebar-column {
        width: 200px;
    }

    .book-header h1 {
        font-size: 1.5rem;
    }

    .book-navigation {
        gap: 0.5rem;
        padding: 0.7rem;
    }

    .page-indicator {
        font-size: 0.9rem;
        min-width: 120px;
    }

    /* Viewer : un peu moins de padding */
    .book-viewer {
        padding: 1rem;
    }

    .page-container {
        flex: 0 0 260px;
        width: 260px;
        max-width: 260px;
        min-width: 260px;
    }

    /* Sidebar widgets plus compacts */
    .sidebar-widget {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .sidebar-widget h3 {
        font-size: 0.75rem;
    }

    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Glossaire popup dimensionné */
    .glossary-popup {
        max-width: 350px;
    }
}

/* ===== TABLETTE PAYSAGE 1024px – 1200px ===== */
@media (min-width: 1024px) and (max-width: 1200px) {

    .reader-notes-container {
        grid-template-columns: minmax(0, 1fr) auto 230px !important;
    }

    /* Même raison que le bloc 769-1024px ci-dessus : respecter la fermeture de la sidebar. */
    .reader-notes-container.sidebar-collapsed:not(.fullscreen) {
        grid-template-columns: minmax(0, 1fr) auto 0px !important;
    }

    .sidebar-column {
        width: 230px;
    }

    .page-container {
        flex: 0 0 280px;
        width: 280px;
        max-width: 280px;
        min-width: 280px;
    }
}

/* ===== ORIENTATION PAYSAGE MOBILE ===== */
@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {

    /* En paysage, on a plus de largeur mais moins de hauteur */
    .book-navigation {
        padding: 0.4rem 0.6rem;
    }

    .sidebar-column.mobile-open {
        height: 55vh !important;
        max-height: 55vh !important;
    }

    .note-popup {
        max-height: 50vh !important;
    }

    .glossary-popup {
        max-height: 50vh;
    }

    /* Fullscreen : navigation plus compacte en hauteur */
    .reader-notes-container.fullscreen .book-navigation {
        padding: 0.5rem 0.8rem;
    }

    .reader-notes-container.fullscreen .fullscreen-stopwatch-container {
        top: 0.4rem;
    }

    .stopwatch-widget-fullscreen {
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .stopwatch-display-fullscreen {
        font-size: 1.1rem;
    }
}

/* Couleur dorée forcée sur les indicateurs de références arabes (mobile) */
@media (max-width: 768px) {
    .arabic-ref--available {
        color: var(--brand-gold) !important;
    }
}

/* ===== PRÉFÉRENCE : réduire les animations ===== */
@media (prefers-reduced-motion: reduce) {

    .sidebar-column,
    .sidebar-column.mobile-open,
    .note-popup,
    .glossary-popup,
    .sidebar-toggle-indicator,
    .reader-notes-container.fullscreen .book-navigation,
    .reader-notes-container.fullscreen .fullscreen-stopwatch-container {
        transition: none !important;
    }
}

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  .book-reader-fullscreen { height: auto !important; overflow: visible !important; }
  .book-viewer-container { height: auto !important; overflow: visible !important; }
  .book-viewer { height: auto !important; overflow: visible !important; }
  .page-container { height: auto !important; overflow: visible !important; }
  /* Mode "page par page" : pas de règle dédiée nécessaire — .page-container
     ci-dessus (height:auto + overflow:visible) suffit déjà à laisser le
     conteneur .mobile-paged épouser tout son contenu (2 pages précalculées
     assemblées, voir showPage). Si ça dépasse l'écran, la page défile
     normalement au niveau du document, sans scroll interne confiné. */
}
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { .nav-group-tools .nav-dropdown#theme-dropdown { display: none !important; } }
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { .page-navigation-group, .page-indicator, .nav-divider { display: none !important; } }
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { #book-content, .book-viewer, .book-reader-fullscreen, .reader-notes-container { background: transparent !important; background-color: transparent !important; } }
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { .book-viewer, #book-content { padding-bottom: 52px !important; } }

/* Mobile Top Bar */
.mobile-top-bar { position: fixed; top: 0; left: 0; right: 0; background: var(--panel-light, #fff); box-shadow: 0 2px 12px rgba(0,0,0,0.08); display: flex; align-items: center; padding: 6px 10px; z-index: 99999; border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06)); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease; gap: 2px; }
.mobile-top-bar.hidden { transform: translateY(-110%); opacity: 0; }
.mobile-bar-btn { background: none; border: none; padding: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-color, #333); cursor: pointer; border-radius: 12px; transition: background 0.2s; touch-action: manipulation; }
.mobile-bar-btn:active { background: rgba(0,0,0,0.06); }
.mobile-bar-btn.is-active { background: rgba(26, 82, 56, 0.12); color: var(--brand-green, #1A5238); }
.mobile-bar-spacer { flex: 1; }

/* 8 boutons dans la top bar : resserrer sur les très petits écrans pour éviter le débordement */
@media (max-width: 360px) {
    .mobile-top-bar { padding: 6px 6px; gap: 0; }
    .mobile-bar-btn { padding: 8px 6px; }
}

/* Mobile Bottom Bar */
.mobile-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel-light, #fff); box-shadow: 0 -2px 12px rgba(0,0,0,0.08); padding: 6px 16px 8px; z-index: 99999; border-top: 1px solid var(--border-color, rgba(0,0,0,0.06)); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease; }
.mobile-bottom-bar.hidden { transform: translateY(110%); opacity: 0; }
.mobile-bottom-bar-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mobile-chapter-name { font-size: 12px; font-weight: 600; color: var(--text-secondary, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 65%; }
.mobile-page-info { font-size: 12px; font-weight: 600; color: var(--text-secondary, #888); white-space: nowrap; }
.mobile-progress-row { display: flex; align-items: center; gap: 6px; }
.mobile-toc-btn-bottom { padding: 10px 14px 10px 0 !important; flex-shrink: 0; min-width: 44px; min-height: 44px; touch-action: manipulation; }
.mobile-progress-bar-container { flex: 1; padding: 4px 0; }
.mobile-progress-bar { position: relative; width: 100%; height: 6px; background: var(--border-color, #e0e0e0); border-radius: 3px; cursor: pointer; touch-action: none; }
.mobile-progress-fill { height: 100%; background: var(--brand-green, #1A5238); border-radius: 3px; transition: width 0.15s ease; pointer-events: none; }
.mobile-progress-thumb { position: absolute; top: 50%; width: 18px; height: 18px; background: var(--brand-green, #1A5238); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.18); transform: translate(-50%, -50%); transition: left 0.15s ease; pointer-events: none; }

/* Page separator (mobile continuous scroll) */
.mobile-page-separator { padding: 0; margin: 0; border: none; height: 0; overflow: hidden; }
.mobile-page-separator-label { display: none; }

/* ===== ÉLÉMENTS BARRE FLOTTANTE — styles extraits du template JS ===== */
#mobile-nav-chrono-btn {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    letter-spacing: -0.3px;
}
#mobile-nav-settings-btn span {
    font-weight: 700;
    font-size: 16px;
}
#mobile-font-decrease {
    width: 52px;
    height: 44px;
    margin-right: 10px;
    gap: 1px;
}
#mobile-font-increase {
    width: 52px;
    height: 44px;
    gap: 1px;
}
.mobile-font-letter-sm  { font-size: 13px; font-weight: 700; line-height: 1; }
.mobile-font-letter-lg  { font-size: 20px; font-weight: 700; line-height: 1; }
.mobile-font-operator   { font-size: 15px; font-weight: 600; line-height: 1; margin-bottom: 2px; }
.mobile-controls-slider { margin-left: 10px; }
.mobile-timer-label     { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary, #333); margin-bottom: 12px; }
.mobile-timer-unit      { font-size: 14px; font-weight: 600; color: var(--text-primary, #333); }
.mobile-timer-duration-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
#mobile-timer-settings {
    display: none;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color, #ddd);
    text-align: center;
}
#mobile-timer-decrease,
#mobile-timer-increase {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #e0e0e0);
    background: var(--panel, #f0f0f0);
    color: var(--text-primary, #333);
    cursor: pointer; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
}
#mobile-timer-duration {
    width: 60px; padding: 8px;
    text-align: center;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    font-size: 16px; font-weight: 600;
    background: var(--panel-light, #fff);
    color: var(--text-primary, #333);
}

.mobile-bottom-sheet { position: fixed; bottom: 70px; left: 16px; right: 16px; background: var(--panel-light, #fff); border-radius: 24px; box-shadow: 0 -4px 30px rgba(0,0,0,0.12), 0 15px 50px rgba(0,0,0,0.2); z-index: 1001; padding: 14px 18px 20px; transform: translateY(150%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); border: 1px solid var(--border-color, rgba(0,0,0,0.06)); margin: auto; max-width: 500px; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-bottom-sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 3px; background: var(--muted, #ccc); margin: 0 auto 12px auto; opacity: 0.4; }
.mobile-bottom-sheet.open { transform: translateY(0); }
.mobile-bottom-sheet-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.mobile-bottom-sheet-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-sheet-header { text-align: center; margin-bottom: 12px; }
.mobile-sheet-header h3 { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-secondary, #888); letter-spacing: 0.08em; text-transform: uppercase; }

.mobile-settings-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 14px; }
.mobile-settings-row:last-child { margin-bottom: 0; }
.mobile-settings-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary, #333); flex-shrink:0; }
.mobile-settings-controls { display: flex; align-items: center; gap: 10px; flex-grow:1; justify-content: flex-end; }
.mobile-settings-btn { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--border-color, #e0e0e0); background: var(--panel, #f0f0f0); color: var(--text-primary, #333); display: flex; align-items:center; justify-content:center; cursor: pointer; font-size: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s; }
.mobile-settings-btn:active { transform: scale(0.95); }
.mobile-settings-btn.active { border-color: var(--brand-green, #1A5238); border-width: 2px; color: var(--brand-green, #1A5238); }
.mobile-settings-slider { width: 100%; height: 4px; border-radius: 2px; background: var(--border-color, #e0e0e0); appearance: none; outline: none; margin: 0 8px; }
.mobile-settings-slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-green, #1A5238); border: 3px solid #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.15s; }
.mobile-settings-slider::-webkit-slider-thumb:active { transform: scale(1.15); }
.mobile-settings-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-green, #1A5238); border: 3px solid #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.15s; }
.mobile-settings-slider::-moz-range-thumb:active { transform: scale(1.15); }
.mobile-theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--border-color, #e0e0e0); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; }
.mobile-theme-btn:active { transform: scale(0.92); }
/* Couleurs fixes des icônes pour rester lisibles indépendamment du thème site */
.mobile-theme-blanc { background: #ffffff; color: #333333; }
.mobile-theme-beige { background: #f4ecd8; color: #5C4A32; }
.mobile-theme-noir { background: #1a1a1a; color: #f0f0f0; border-color: #555; }
/* Force les SVG (qui utilisent stroke=currentColor) à utiliser la couleur fixe ci-dessus */
.mobile-theme-blanc svg { stroke: #333333 !important; }
.mobile-theme-beige svg { stroke: #5C4A32 !important; }
.mobile-theme-noir svg { stroke: #f0f0f0 !important; }
.mobile-theme-btn.active { border-color: var(--brand-green, #1A5238); border-width: 3px; transform: scale(1.1); box-shadow: 0 2px 10px rgba(26, 82, 56, 0.25); }

/* Chrono Sheet Overrides */
.mobile-bottom-sheet .stopwatch-widget-fullscreen { width: 100%; border: none !important; box-shadow: none !important; background: transparent !important; padding: 10px 0 !important; }
.mobile-bottom-sheet #stopwatch-display-fullscreen { font-size: 46px !important; font-weight: 800; text-align: center; color: var(--brand-green, #1A5238); margin-bottom: 28px; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.mobile-bottom-sheet .stopwatch-controls-fullscreen { justify-content: center; gap: 32px; padding-bottom: 20px; }
.mobile-bottom-sheet .stopwatch-controls-fullscreen button { transform: scale(1.3); }
.mobile-bottom-sheet .stopwatch-controls-fullscreen { display: flex !important; justify-content: center !important; width: 100%; }

/* Mobile chrono display in bottom sheet */
.mobile-chrono-title { padding-top: 8px; text-align: center; }
.mobile-chrono-title h3 { margin: 0 0 8px 0; font-size: 13px; font-weight: 700; color: var(--text-secondary, #888); letter-spacing: 0.08em; text-transform: uppercase; }
#mobile-stopwatch-display { font-size: 56px !important; font-weight: 800; text-align: center; color: var(--brand-green, #1A5238); margin-bottom: 32px; letter-spacing: 2px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mobile-chrono-controls { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; }
.mobile-chrono-controls button { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--border-color, #e0e0e0); background: var(--panel, #f0f0f0); color: var(--text-primary, #333); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.2s ease; }
.mobile-chrono-controls button:active { transform: scale(0.92); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.mobile-chrono-controls button#mobile-stopwatch-toggle { background: var(--brand-green, #1A5238); color: white; transform: scale(1.15); box-shadow: 0 6px 20px rgba(26, 82, 56, 0.3); border: none; }
.mobile-chrono-controls button#mobile-stopwatch-toggle:active { transform: scale(1.05); }

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { .book-navigation { display: none !important; } }

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { .book-footnotes { display: none !important; } }

/* Remove container backgrounds */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { body.has-book-open { background-color: var(--bg-color); } .hero-left, .wrap, main, .page-container, .reader-notes-container, .book-reader-fullscreen, #book-content { background: transparent !important; background-color: transparent !important; } }

/* Fix white edges */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { .book-viewer-fade-top, .book-viewer-fade-bottom { display: none !important; } .book-viewer, #book-content { padding-top: 0 !important; padding-bottom: 52px !important; } body:not(.theme-blanc) .page-container, body:not(.theme-blanc) .book-viewer { color: inherit !important; } }

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { .book-footnotes { display: none !important; } }

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { body:not(.theme-blanc) .hero-left, body:not(.theme-blanc) .reader-notes-container, body:not(.theme-blanc) .book-reader-fullscreen, body:not(.theme-blanc) #book-content { background-color: transparent !important; background: transparent !important; } }

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { body:not(.theme-blanc) .page-container, body:not(.theme-blanc) .book-viewer, body:not(.theme-blanc) .wrap, body:not(.theme-blanc) main { background-color: transparent !important; background: transparent !important; } }

/* Hide unnecessary sidebars that stack at bottom on mobile */


@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) { .mobile-top-bar, .mobile-bottom-bar { z-index: 99999 !important; } .mobile-bottom-sheet { z-index: 999999 !important; } .mobile-bottom-sheet-overlay { z-index: 99998 !important; } }

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  .book-title-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
}

/* ===== SUPPORT DARK MODE POUR LE MENU FLOTTANT ===== */
body.theme-noir .mobile-top-bar,
body.theme-noir .mobile-bottom-bar,
body.theme-noir .mobile-bottom-sheet {
    background: #2a3a3d !important;
    border-color: #3d5054 !important;
    color: #e8e8e8 !important;
}

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    body.theme-noir .sidebar-column {
        background: #2a3a3d !important;
        border-color: #3d5054 !important;
        color: #e8e8e8 !important;
    }
}

body.theme-noir .mobile-settings-btn {
    background: #1a2628 !important;
    border-color: #3d5054 !important;
    color: #e8e8e8 !important;
}

body.theme-noir .mobile-bar-btn,
body.theme-noir .mobile-chapter-name,
body.theme-noir .mobile-page-info,
body.theme-noir .mobile-settings-label,
body.theme-noir .mobile-bottom-sheet h3,
body.theme-noir #mobile-stopwatch-display,
body.theme-noir .mobile-timer-label,
body.theme-noir .mobile-timer-unit,
body.theme-noir #mobile-timer-duration,
/* #stopwatch-display-fullscreen (chiffres chrono/minuteur, cf. Lecture-style.css
   .mobile-bottom-sheet #stopwatch-display-fullscreen) gardait sa couleur verte
   fixe (--brand-green) même en thème sombre, contrairement à l'ancien
   #mobile-stopwatch-display déjà couvert ci-dessus — illisible sur le fond
   sombre du tiroir (#2a3a3d, cf. règle juste au-dessus). */
body.theme-noir .mobile-bottom-sheet #stopwatch-display-fullscreen {
    color: #e8e8e8 !important;
}

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    body.theme-noir .sidebar-column .sidebar-widget h3,
    body.theme-noir .sidebar-column .notes-stats,
    body.theme-noir .sidebar-column .notes-navigation span {
        color: #e8e8e8 !important;
    }
    body.theme-noir .sidebar-column .sidebar-tab {
        background: transparent !important;
        color: #8a9a9e !important;
        border-color: transparent !important;
    }
    body.theme-noir .sidebar-column .sidebar-tab.active {
        background: transparent !important;
        color: #66BB6A !important;
        border-bottom-color: #66BB6A !important;
    }
    body.theme-noir .sidebar-column .search-box {
        background: #1a2628 !important;
        border-color: #3d5054 !important;
    }
    body.theme-noir .sidebar-column .search-box input {
        color: #e8e8e8 !important;
    }
    body.theme-noir .sidebar-column .sidebar-mobile-handle-bar {
        background: #5a7a7e !important;
    }
    body.theme-noir .sidebar-column .notes-navigation button {
        background: #3d5054 !important;
    }
    body.theme-noir .sidebar-column .toc-item {
        color: #e8e8e8 !important;
        background: transparent !important;
        border-left-color: #3d5054 !important;
    }
}

body.theme-noir .mobile-bar-btn .mobile-nav-divider {
    background: #3d5054 !important;
}

body.theme-noir .mobile-chrono-controls button {
    background: #1a2628 !important;
    color: #e8e8e8 !important;
    border: 1px solid #3d5054 !important;
}

body.theme-noir .mobile-chrono-controls button#mobile-stopwatch-toggle {
    background: var(--brand-green, #1A5238) !important;
    color: white !important;
    border: none !important;
}

body.theme-noir #mobile-timer-decrease,
body.theme-noir #mobile-timer-increase {
    background: #1a2628 !important;
    border-color: #3d5054 !important;
    color: #e8e8e8 !important;
}

body.theme-noir #mobile-timer-duration {
    background: #1a2628 !important;
    border-color: #3d5054 !important;
}

body.theme-noir #mobile-timer-settings {
    border-top-color: #3d5054 !important;
}

/* ===== SUPPORT BEIGE MODE ===== */
body.theme-beige .mobile-top-bar,
body.theme-beige .mobile-bottom-bar,
body.theme-beige .mobile-bottom-sheet {
    background: #F3E5CA !important;
    border-color: #C4A572 !important;
}

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    body.theme-beige .sidebar-column {
        background: #F3E5CA !important;
        border-color: #C4A572 !important;
    }
}

body.theme-beige .mobile-settings-btn {
    background: #EBD8B4 !important;
    border-color: #C4A572 !important;
    color: #2C3539 !important;
}

body.theme-beige .mobile-bar-btn,
body.theme-beige .mobile-chapter-name,
body.theme-beige .mobile-page-info,
body.theme-beige .mobile-settings-label,
body.theme-beige .mobile-bottom-sheet h3,
body.theme-beige .mobile-timer-label,
body.theme-beige .mobile-timer-unit,
body.theme-beige #mobile-timer-duration {
    color: #2C3539 !important;
}

@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    body.theme-beige .sidebar-column .sidebar-widget h3,
    body.theme-beige .sidebar-column .notes-stats,
    body.theme-beige .sidebar-column .notes-navigation span {
        color: #2C3539 !important;
    }
    body.theme-beige .sidebar-column .sidebar-tab {
        background: transparent !important;
        color: #8a7a5a !important;
        border-color: transparent !important;
    }
    body.theme-beige .sidebar-column .sidebar-tab.active {
        background: transparent !important;
        color: var(--brand-green) !important;
        border-bottom-color: var(--brand-green) !important;
    }
    body.theme-beige .sidebar-column .search-box {
        background: #EBD8B4 !important;
        border-color: #C4A572 !important;
    }
    body.theme-beige .sidebar-column .search-box input {
        color: #2C3539 !important;
    }
    body.theme-beige .sidebar-column .sidebar-mobile-handle-bar {
        background: #C4A572 !important;
    }
}

body.theme-beige .mobile-bar-btn .mobile-nav-divider {
    background: #C4A572 !important;
}

body.theme-beige .mobile-chrono-controls button {
    background: #EBD8B4 !important;
    color: #2C3539 !important;
}

body.theme-beige #mobile-timer-decrease,
body.theme-beige #mobile-timer-increase {
    background: #EBD8B4 !important;
    border-color: #C4A572 !important;
    color: #2C3539 !important;
}

body.theme-beige #mobile-timer-duration {
    background: #F3E5CA !important;
    border-color: #C4A572 !important;
    color: #2C3539 !important;
}

body.theme-beige #mobile-timer-settings {
    border-top-color: #C4A572 !important;
}

/* Cacher le menu mobile sur desktop */
@media (min-width: 769px) {
    #mobile-floating-nav-container,
    .mobile-top-bar,
    .mobile-bottom-bar,
    .mobile-bottom-sheet,
    .mobile-bottom-sheet-overlay {
        display: none !important;
    }
}

/* ===== MODAL LIVRE TERMINÉ — MOBILE (bottom sheet) ===== */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    /* Ancrer l'overlay en bas (bottom-sheet sur mobile) */
    .book-complete-overlay {
        align-items: flex-end;
        padding: 0;
    }

    /* Panneau en bottom-sheet : coins arrondis en haut, pleine largeur */
    .book-complete-modal {
        border-radius: 20px 20px 0 0;
        max-width: 100%;
        width: 100%;
        padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
        animation: bcSlideUpMobile 0.3s ease;
    }

    @keyframes bcSlideUpMobile {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .book-complete-title {
        font-size: 1.2rem;
    }

    /* Boutons en colonne, toute la largeur */
    .book-complete-actions {
        flex-direction: column;
        gap: 10px;
    }

    .book-complete-btn {
        width: 100%;
        padding: 13px 22px;
        font-size: 1rem;
    }
}

/* Le padding-bottom:52px (règle "Fix white edges" plus haut) est pensé pour
   le scroll continu. En mode page par page, une page assemblée (2 pages
   précalculées, cf. showPage) dépasse elle aussi souvent l'écran et défile
   normalement au niveau du document (cf. commentaire plus haut) — sans
   clearance, sa dernière ligne finit alors cachée derrière la barre du bas
   une fois scrollée en butée. Un padding avait été mis à 0 ici pour éviter
   une barre de scroll verticale indésirable sur une page COURTE (qui tient
   déjà dans l'écran) ; mais ça cassait alors toute page plus longue que
   l'écran. Un léger padding (pas la hauteur pleine de #mobile-bottom-bar,
   ≈82px — trop de vide visible en bas des pages qui tiennent déjà à
   l'écran) suffit à dégager les dernières lignes dans les cas courants. */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  .book-viewer:has(.page-container.mobile-paged),
  #book-content:has(.page-container.mobile-paged) {
      padding-bottom: 14px !important;
  }
}

/* .wrap-body est en flex-direction:row avec align-items:stretch (valeur par
   défaut) : ses enfants (.wrap-left, la sidebar desktop réduite à largeur 0
   sur mobile, ET main#app) sont donc étirés sur tout l'axe transverse (la
   hauteur) l'un comme l'autre, indépendamment de leur propre contenu — d'où
   la persistance du débordement même après avoir neutralisé main seul (la
   sidebar, elle aussi étirée, suffisait à maintenir .wrap-body en hauteur
   pleine). En mode page par page (page souvent plus courte que l'écran), ça
   forçait tout ~136px plus haut que nécessaire, débordant le document (barre
   de scroll verticale indésirable). align-items:flex-start sur .wrap-body
   règle les deux enfants d'un coup — scopé au mode pages pour ne rien
   changer ailleurs sur le site. */
@media (max-width: 500px) and (pointer: coarse),
       (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
  .wrap-body:has(.page-container.mobile-paged) {
      align-items: flex-start !important;
  }
  main#app:has(.page-container.mobile-paged) {
      flex: 0 1 auto !important;
      min-height: 0 !important;
      /* Réservé pour la barre de navigation générique du site (icônes
         accueil/bibliothèque/etc.), déjà remplacée par la barre du bas
         propre à la lecture (#mobile-bottom-bar) — même redondance que
         .mobile-header, même effet de débordement en mode pages. */
      padding-bottom: 0 !important;
  }
  /* #book-content a min-height:300px + justify-content:center (règle
     générale, non spécifique au mode pages). Pour un écran à une seule page
     courte (typiquement la toute dernière page du livre, sans page suivante
     à assembler — voir showPage), ça centre le texte dans cette boîte de
     300px minimum au lieu de le coller en haut : gros vide visible avant le
     texte. flex-start + min-height:0 le colle en haut comme toutes les
     autres pages. */
  #book-content:has(.page-container.mobile-paged) {
      justify-content: flex-start !important;
      min-height: 0 !important;
  }
}

/* NOTE : .mobile-header (en-tête générique du site) a été un temps masqué
   ici pour réduire le débordement du document en mode pages, mais sa boîte
   fournit aussi la clearance sous laquelle #mobile-top-bar (fixed) se
   positionne — le masquer remontait tout le contenu SOUS la barre du haut
   (titre du livre invisible, caché derrière). Retiré : les correctifs sur
   main#app/.wrap-body ci-dessous suffisent à éliminer le débordement sans
   toucher à .mobile-header. */