/* Popup fin minuteur */
#minuteur-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 30000;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.minuteur-popup-content {
    background: var(--panel-light, #fff);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    padding: 2.5em 3em 2em 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px;
    max-width: 90vw;
    border: 1px solid var(--border-color, rgba(0,0,0,0.06));
}

.minuteur-popup-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-green);
    margin-bottom: 0.7em;
}

.minuteur-popup-message {
    font-size: 1.05rem;
    color: var(--text-primary, #333);
    margin-bottom: 1.4em;
    text-align: center;
}

.minuteur-popup-close {
    background: var(--brand-green);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.6em 1.8em;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.minuteur-popup-close:hover {
    background: #14412b;
}

.minuteur-popup-close:active {
    transform: scale(0.96);
}

/* Champ de durée minuteur (sidebar et fullscreen) */
.timer-duration {
    font-size: 1.08rem;
    padding: 6px 10px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    width: 3.8em;
    background: white;
    color: var(--text-secondary, #444);
    margin-left: 0.7em;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.timer-duration:focus {
    border-color: var(--brand-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 82, 56, 0.15);
}

/* Forcer la couleur et la taille du SVG dans le bouton de mode */
.stopwatch-btn.mode svg,
.stopwatch-btn-fullscreen.mode svg {
    display: block;
    width: 1.25em !important;
    height: 1.25em !important;
    margin: 0 auto;
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Masquer le book-viewer tant que le loader est visible */
#book-loading:where(:not([style*="display: none"]))~.book-viewer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(.4, 0, .2, 1);
}

.book-viewer {
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(.4, 0, .2, 1);
}

/* Hide body/html scrollbars when reader is in fullscreen - only container scrolls */
body:has(.reader-notes-container.fullscreen),
html:has(.reader-notes-container.fullscreen) {
    overflow: hidden;
}

/* Fallback for browsers without :has() support (uses JS-added class) */
body.reader-fullscreen,
html:has(body.reader-fullscreen) {
    overflow: hidden;
}

main {
    padding-left: 0px;
}

/* Layout global de hero-left pour cette page */
.hero-left {
    width: 100%;
    margin: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

/* Brand variables — now centralized in common-styles.css */
:root {
    --brand-green: var(--accent);
    --accent-dark: #234739;
    --brand-beige: #efe3c6;
    /* warm beige */
    --brand-gold: #b8860b;
    /* doré */
    --btn-border: #dcdcdc;
}

/* Style de sélection : suit le THÈME LECTEUR, pas le thème du site.
   body[data-reader-theme] a une spécificité (0,2,2) > body.theme-* (0,1,2),
   ce qui garantit que le thème lecteur gagne sur desktop.
   Sur mobile (data-reader-theme absent), les règles body.theme-* s'appliquent. */
.book-content *::selection {
    background: #1A5238;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.book-content *::-moz-selection {
    background: #1A5238;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
body[data-reader-theme="blanc"] .book-content *::selection {
    background: #1A5238;
    color: white;
}
body[data-reader-theme="blanc"] .book-content *::-moz-selection {
    background: #1A5238;
    color: white;
}
body[data-reader-theme="noir"] .book-content *::selection {
    background: #5ab88a;
    color: white;
}
body[data-reader-theme="noir"] .book-content *::-moz-selection {
    background: #5ab88a;
    color: white;
}
body[data-reader-theme="beige"] .book-content *::selection {
    background: #3d5a2e;
    color: white;
}
body[data-reader-theme="beige"] .book-content *::-moz-selection {
    background: #3d5a2e;
    color: white;
}

/* Boutons d'action de sélection (note, copier, rechercher) */
.selection-action-btn {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.selection-action-btn:hover {
    background: var(--panel);
    transform: scale(1.08);
}

.selection-action-btn:active {
    transform: scale(0.95);
}

/* Surlignage des résultats de recherche — vert cohérent avec glossaire/footnotes */
.search-highlight {
    background-color: rgba(74, 145, 120, 0.35) !important;
    color: #fff !important;
    padding: 2px 0px !important;
    border-radius: 3px !important;
    transition: all 0.2s ease;
}

/* Occurrence active (résultat actuel) : fond doré pour distinguer des autres occurrences */
.search-highlight.search-highlight-active {
    background-color: rgba(184, 150, 11, 0.85) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 2px 0px !important;
    border-radius: 3px !important;
}

.search-highlight:hover {
    box-shadow: 0 0 0 3px rgba(74, 145, 120, 0.3) !important;
}

/* Texte d'info de recherche */
#search-results-info {
    font-size: 13px;
    color: var(--text-secondary, #666);
    min-width: 80px;
    text-align: center;
}
body.theme-noir #search-results-info {
    color: #e8e8e8;
}

/* Mode sombre du lecteur : vert plus lumineux */
body[data-reader-theme="noir"] .search-highlight {
    background-color: rgba(110, 202, 160, 0.4) !important;
    color: #fff !important;
}
body[data-reader-theme="noir"] .search-highlight.search-highlight-active {
    background-color: rgba(184, 150, 11, 0.85) !important;
    color: #fff !important;
}

.selection-action-btn svg {
    display: block;
}

/* Visual style for actions that require login: appear disabled but still show a message on click */
.selection-action-btn.requires-login {
    opacity: 0.5;
    cursor: default;
    filter: grayscale(0.6);
}

/* Note popup : fond défini par le THÈME LECTEUR (pas le thème de la page) */
/* Ces variables surchargent celles définies par body.theme-* dans common-styles-themes.css */
body[data-reader-theme="blanc"] {
    --note-popup-bg: white;
    --note-popup-border: rgba(26, 82, 56, 0.3);
    --note-popup-shadow: 0 4px 14px rgba(0,0,0,0.15);
    --note-popup-text: #222;
    --note-popup-text-sub: #555;
    --note-popup-text-small: #888;
    --note-popup-edit-btn: #555;
    --note-popup-close-btn: #888;
    --note-popup-tag-bg: #e8f5e9;
    --note-popup-tag-color: #2e7d32;
    --note-text-main: #222;
    --note-text-sub: #555;
    --note-text-small: #888;
    --note-edit-btn: #555;
    --note-tag-bg: #e8f5e9;
    --note-tag-color: #2e7d32;
}
body[data-reader-theme="beige"] {
    --note-popup-bg: #f5f0e6;
    --note-popup-border: rgba(139, 115, 85, 0.45);
    --note-popup-shadow: 0 4px 12px rgba(80,60,30,0.18);
    --note-popup-text: #3b2e1a;
    --note-popup-text-sub: #5c4b37;
    --note-popup-text-small: #8b7355;
    --note-popup-edit-btn: #5c4b37;
    --note-popup-close-btn: #8b7355;
    --note-popup-tag-bg: #e8f0e0;
    --note-popup-tag-color: #3d5a2e;
    --note-text-main: #3b2e1a;
    --note-text-sub: #5c4b37;
    --note-text-small: #8b7355;
    --note-edit-btn: #5c4b37;
    --note-tag-bg: #e8f0e0;
    --note-tag-color: #3d5a2e;
}
body[data-reader-theme="noir"] {
    --note-popup-bg: #2a3035;
    --note-popup-border: rgba(90, 184, 138, 0.45);
    --note-popup-shadow: 0 4px 14px rgba(0,0,0,0.55);
    --note-popup-text: #e8e8e8;
    --note-popup-text-sub: #b0b8bc;
    --note-popup-text-small: #7a8a90;
    --note-popup-edit-btn: #8bddba;
    --note-popup-close-btn: #7a8a90;
    --note-popup-tag-bg: rgba(138,221,186,0.15);
    --note-popup-tag-color: #8bddba;
    --note-text-main: #e8e8e8;
    --note-text-sub: #b0b8bc;
    --note-text-small: #7a8a90;
    --note-edit-btn: #8bddba;
    --note-tag-bg: rgba(138,221,186,0.15);
    --note-tag-color: #8bddba;
}

#note-popup {
    background: var(--note-popup-bg, white);
    border-color: var(--note-popup-border, rgba(26, 82, 56, 0.3));
    box-shadow: var(--note-popup-shadow, 0 4px 14px rgba(0,0,0,0.15));
}

/* Desktop: reader theme beats site theme for the selection popup.
   data-reader-theme is only set on desktop, so these rules don't
   apply on mobile (where site theme is the correct fallback).    */
body[data-reader-theme="blanc"] #note-popup {
    background: white !important;
    border-color: rgba(26, 82, 56, 0.3) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
}
body[data-reader-theme="beige"] #note-popup {
    background: #f5f0e6 !important;
    border-color: rgba(139, 115, 85, 0.45) !important;
    box-shadow: 0 4px 12px rgba(80,60,30,0.18) !important;
}
body[data-reader-theme="noir"] #note-popup {
    background: #2a3035 !important;
    border-color: rgba(90, 184, 138, 0.45) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.55) !important;
}

/* Button colors per reader theme */
body[data-reader-theme="blanc"] #note-popup .selection-action-btn {
    background: white;
    color: #1A5238;
}
body[data-reader-theme="blanc"] #note-popup .selection-action-btn:hover {
    background: #e8f5ee;
    color: #0f3322;
}
body[data-reader-theme="noir"] #note-popup .selection-action-btn {
    background: transparent;
    color: #8bddba;
}
body[data-reader-theme="noir"] #note-popup .selection-action-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #a8eacc;
}
body[data-reader-theme="beige"] #note-popup .selection-action-btn {
    background: transparent;
    color: #6b5344;
}
body[data-reader-theme="beige"] #note-popup .selection-action-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #3d2b1a;
}

/* Animation pour le feedback du toast */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    90% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Container horizontal : 3 colonnes (lecteur + toggle bar + notes) */
.reader-notes-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 250px;
    column-gap: 0;
    row-gap: 0.5rem;
    width: 100%;
    align-items: stretch;
    height: auto;
    overflow: visible;
    transition: grid-template-columns 0.3s ease;
}

/* Quand la sidebar est cachée en dehors du plein écran */
.reader-notes-container.sidebar-collapsed:not(.fullscreen) {
    grid-template-columns: minmax(0, 1fr) auto 0px;
}

.reader-notes-container.sidebar-collapsed:not(.fullscreen) .sidebar-column {
    overflow: hidden;
    opacity: 0;
    padding: 0;
    min-width: 0;
    pointer-events: none;
}

/* Colonne 1 : Lecteur complet (navigation, contrôles, viewer) */
.book-reader-fullscreen {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 100%;
    min-width: 0;
    padding: 0 0.8rem 0.8rem 0.8rem;
}

/* Colonne 3 : Sidebar container */
.sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* height: 0 empêche la sidebar de gonfler la ligne grid ;
       min-height: 100% la fait s'étirer à la hauteur du book-reader */
    height: 0;
    min-height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    background-color: var(--panel);
    grid-column: 3;
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* Onglets de la sidebar */
.sidebar-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.sidebar-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: var(--hover-bg);
    cursor: pointer;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary, #666);
    transition: all 0.2s ease;
}

.sidebar-tab:hover {
    background: var(--border-color);
}

.sidebar-tab.active {
    background: white;
    color: var(--brand-green);
    border-bottom: 3px solid var(--brand-green);
}
body.theme-noir .sidebar-tab.active {
    color: var(--accent-gold, #b89e14);
    border-bottom-color: var(--accent-gold, #b89e14);
}
body.theme-beige .sidebar-tab.active {
    background: var(--panel-light);
}

/* Contenu des onglets */
.tab-content {
    display: none;
    flex: 1;
    /* Prendre l'espace disponible */
    min-height: 0;
    /* Important pour le scroll */
    overflow: hidden;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
}

/* Message de connexion dans l'onglet Notes (utilisateur non connecté) */
.notes-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    gap: 10px;
}
.notes-login-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #2C3539);
    margin: 0;
}
.notes-login-desc {
    font-size: 0.82rem;
    color: var(--text-secondary, #6b7280);
    line-height: 1.5;
    margin: 0;
    max-width: 220px;
}
.notes-login-btn {
    display: inline-block;
    margin-top: 6px;
    background: var(--brand-green);
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.notes-login-btn:hover {
    opacity: 0.85;
}
body.theme-noir .notes-login-btn {
    background: var(--accent-gold, #b89e14);
}

/* Hauteur limitée pour l'onglet TOC (conserver le scroll) */
#tab-toc {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Notes tab : ne pas forcer d'overflow (laisser le contenu s'étendre) */
#tab-notes {
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

/* Items du sommaire */
.toc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    background: var(--panel-light);
    border-left: 3px solid var(--border-color);
}

.toc-item:hover {
    background: var(--panel);
    border-left-color: var(--brand-green);
}

/* Widget Chronomètre - version compacte */
.stopwatch-widget {
    text-align: center;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stopwatch-widget h3 {
    margin: 0 0 0.5rem 0;
    color: #8c7b6c;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.stopwatch-compact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
}

.stopwatch-compact>div:first-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}

.stopwatch-controls {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 0.4em;
    justify-content: center;
    align-items: center;
}

.stopwatch-display {
    font-family: 'Inter', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem;
    /* Slightly larger, clearer */
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    flex: 1;
}

.stopwatch-controls {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.stopwatch-btn {
    font-family: 'Inter', sans-serif;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--panel, #f0f0f0);
    color: var(--text-primary, #555);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.stopwatch-btn:hover {
    background-color: var(--brand-green);
    color: white;
    border-color: var(--brand-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(26, 82, 56, 0.15);
}

.stopwatch-btn:active {
    transform: scale(0.92);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Remove separate styles to unify design */
.stopwatch-btn.primary {
    background: var(--brand-green);
    color: #fff;
    border-color: var(--brand-green);
    box-shadow: 0 6px 20px rgba(26, 82, 56, 0.3);
}
body.theme-noir .stopwatch-btn.primary {
    background: var(--accent-gold, #b89e14);
    border-color: var(--accent-gold, #b89e14);
}

.stopwatch-btn.secondary {
    background: var(--panel, #f0f0f0);
    color: var(--text-primary, #555);
    border-color: var(--border-color, #e0e0e0);
}

.stopwatch-btn.mode {
    background: var(--panel, #f0f0f0);
    color: var(--text-primary, #555);
    border-color: var(--border-color, #e0e0e0);
}

.stopwatch-btn.primary:hover,
.stopwatch-btn.secondary:hover,
.stopwatch-btn.mode:hover {
    /* unified hover emphasis keeps brand-green for strong feedback */
    background-color: var(--brand-green);
    color: white;
    border-color: var(--brand-green);
}
body.theme-noir .stopwatch-btn.primary:hover,
body.theme-noir .stopwatch-btn.secondary:hover,
body.theme-noir .stopwatch-btn.mode:hover {
    background-color: var(--accent-gold-light, #d4af5f);
    border-color: var(--accent-gold-light, #d4af5f);
}

/* Timer settings (minuteur mode) */
.timer-settings {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color, #e0e0e0);
    text-align: center;
}

.timer-settings-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary, #888);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.timer-settings-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.timer-adjust-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--panel, #f0f0f0);
    color: var(--text-primary, #333);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.timer-adjust-btn:hover {
    background: var(--brand-green);
    color: white;
    border-color: var(--brand-green);
}

.timer-adjust-btn:active {
    transform: scale(0.92);
}

.timer-settings .timer-duration {
    width: 3.5em;
    padding: 6px;
    text-align: center;
    border: 1.5px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    background: var(--panel-light, #fff);
    color: var(--text-primary, #333);
}

.timer-unit {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #888);
}

/* Fullscreen timer settings — .stopwatch-widget-fullscreen (parent) est en
   flex-wrap:wrap : flex-basis:100% force ce panneau sur sa PROPRE ligne au
   lieu de s'entasser à droite des boutons dans la même rangée (incohérence
   visuelle signalée — le panneau dépassait la pilule au lieu de s'y intégrer). */
.timer-settings-fullscreen {
    flex-basis: 100%;
    border-top-color: rgba(255,255,255,0.2);
}

.timer-settings-fullscreen .timer-settings-label {
    /* !important nécessaire : body.theme-noir .timer-settings-label
       (common-styles-themes.css, gris #6b7b80 pensé pour le panneau minuteur
       normal de la sidebar) a une spécificité plus élevée que ce sélecteur
       (body.theme-X + classe > 2 classes) et écrasait sinon ce blanc en
       thème sombre malgré la valeur posée ici. Le fond de la pilule reste
       toujours sombre quel que soit le thème du site (vert/olive/etc.) :
       blanc plein garde un contraste correct dans tous les cas, contrairement
       à ce gris pensé pour un fond de panneau clair. */
    color: #ffffff !important;
}

/* Mêmes 40px que .stopwatch-btn-fullscreen (cible tactile cohérente entre
   les deux jeux de boutons du même widget) — 36px de base un peu juste. */
/* Fond translucide plutôt que transparent + simple contour : sur fond
   transparent, le contraste du texte blanc dépend de ce qu'il y a DERRIÈRE
   (contenu du livre, thème clair...) et devient illisible par endroits —
   un fond propre à ces contrôles garantit un contraste stable quel que soit
   le contexte. */
/* !important sur background/color partout ici : body.theme-noir .timer-adjust-btn
   / .timer-duration (common-styles-themes.css, pensés pour le panneau minuteur
   normal de la sidebar) ont une spécificité plus élevée (body.theme-X + 1
   classe > 2 classes) et écrasaient sinon ces styles en thème sombre — même
   piège que .timer-settings-label/.timer-unit ci-dessus. */
.timer-settings-fullscreen .timer-adjust-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

.timer-settings-fullscreen .timer-settings-controls {
    gap: 12px;
}

.timer-settings-fullscreen .timer-adjust-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: white !important;
}

.timer-settings-fullscreen .timer-duration {
    -webkit-appearance: none;
    appearance: none;
    width: 3.2em;
    padding: 8px 6px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

/* La règle générique .timer-duration:focus (bordure verte) est quasi
   invisible sur le fond déjà vert de la pilule — variante blanche ici. */
.timer-settings-fullscreen .timer-duration:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.timer-settings-fullscreen .timer-unit {
    /* !important — même raison que .timer-settings-label ci-dessus
       (body.theme-noir .timer-unit, common-styles-themes.css, écrasait
       sinon). */
    color: #ffffff !important;
}

.book-header {
    margin-bottom: 1.5rem;
}

.book-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.book-header h1 {
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-level {
    background-color: var(--brand-green);
    color: white;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-category {
    color: white;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Couleurs spécifiques pour chaque catégorie */
.badge-category[data-category="Biographies"] {
    background-color: var(--cat-biographies);
}

.badge-category[data-category="Comportement"] {
    background-color: var(--cat-comportement);
}

.badge-category[data-category="Dogme"] {
    background-color: var(--cat-dogme);
}

.badge-category[data-category="Jurisprudence"] {
    background-color: var(--cat-jurisprudence);
}

.badge-category[data-category="Coran"] {
    background-color: var(--cat-coran);
}

.badge-category[data-category="Hadith"] {
    background-color: var(--cat-hadith);
}

.author-link {
    color: var(--brand-green);
    text-decoration: underline;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Hover state for author links: more contrast and subtle lift */
.author-link:hover {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    transform: translateY(-1px);
    transition: color 150ms ease, transform 120ms ease, font-weight 120ms ease;
}

/* Dark mode: author links use gold */
body.theme-noir .author-link {
    color: var(--accent-gold);
}
body.theme-noir .author-link:hover {
    color: var(--accent-gold-light, #d4af5f);
}

/* Navigation */
.book-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--panel);
    /* Beige clair */
    padding: 0.8rem 0.8rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

/* Groupe 1 : navigation de pages + progression (s'étire) */
.nav-group-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    gap: 0.75rem;
}

/* Groupe 2 : thème, outils, plein écran (compact, ne s'étire pas).
   align-self:flex-end : quand .nav-group-nav s'enroule sur 2 lignes (fenêtre
   étroite), sa hauteur augmente et .book-navigation (align-items:center)
   centrerait sinon .nav-group-tools au milieu de cette hauteur au lieu de
   le coller en bas. */
.nav-group-tools {
    display: flex;
    align-items: center;
    align-self: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* ── Dropdowns (hover-to-open) ────────────────────────────────────────── */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    display: flex;
    flex-direction: row;
    gap: 6px;
    background: var(--panel-light, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 2000;
    white-space: nowrap;
}

.nav-dropdown.open .nav-dropdown-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Boutons dans le panneau boîte à outils */
.nav-tool-btn {
    appearance: none;
    border: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
}
.nav-tool-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}
.nav-tool-btn:active { transform: scale(0.92); }

.page-navigation-group {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-btn {
    background: white;
    border: 2px solid #d6cbb8;
    color: #7a746b;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover:not(:disabled) {
    background: #fafaf8;
    color: var(--brand-green);
    border-color: var(--brand-green);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(26, 82, 56, 0.15);
}

.nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--hover-bg, #f5f5f5);
    border-color: var(--border-color, #e0e0e0);
}

.nav-btn-recalc {
    background: var(--brand-green);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
}

.nav-btn-recalc:hover {
    background: var(--brand-green);
    color: white;
}

.page-indicator {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--text-secondary, #555);
    font-size: 1rem;
    margin: 0 0.75rem;
    min-width: 140px;
    text-align: center;
    white-space: nowrap;
}

/* Badge pour l'estimation du temps de lecture (affiché près du titre) */
#book-estimated-time.book-badge,
.book-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    vertical-align: middle;
}


.page-jump {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.page-jump label {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

.page-jump input {
    width: 60px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    -moz-appearance: textfield;
}
.page-jump input::-webkit-outer-spin-button,
.page-jump input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-jump input:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(26, 82, 56, 0.15);
}
body.theme-noir .page-jump input:focus {
    border-color: var(--accent-gold, #b89e14);
    box-shadow: 0 0 0 3px rgba(184, 158, 20, 0.2);
}

.page-jump button {
    padding: 0.3rem 0.8rem;
    background: var(--brand-green);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s;
}
.page-jump button:hover {
    background: var(--brand-green);
}
body.theme-noir .page-jump button,
body.theme-noir .page-jump button:hover {
    background: var(--accent-gold, #b89e14);
}

/* Viewer (Zone de texte) */

.book-viewer {
    height: auto;
    width: fit-content;
    max-width: 100%;
    /* Largeur naturelle du contenu */
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color, #fcfbf9);
    /* Blanc cassé / papier */
    padding: 1.5rem;
    overflow: visible;
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    /* Transform sera appliqué dynamiquement par JS pour scale */
    transform-origin: top left;
    /* Effet livre réaliste (mode page simple = livre fermé) */
    border-radius: 4px 10px 10px 4px;
    border-left: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 2px 0 6px rgba(0, 0, 0, 0.06),
        inset -2px 0 5px rgba(0, 0, 0, 0.04),
        4px 4px 0 -2px var(--bg-color, #f5f0e6),
        4px 4px 3px -1px rgba(0, 0, 0, 0.08),
        7px 6px 0 -3px var(--bg-color, #ede5d3),
        7px 6px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Page curl droite (hors plein écran) */
.book-viewer::after {
    content: '';
    position: absolute;
    top: 6px;
    right: -1px;
    bottom: 6px;
    width: 14px;
    background: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.015) 40%,
            rgba(0, 0, 0, 0.04) 100%);
    border-radius: 0 8px 8px 0;
    pointer-events: none;
    z-index: 5;
}

/* Reliure gauche (hors plein écran) */
.book-viewer::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    bottom: 4px;
    width: 8px;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.07) 0%,
            rgba(0, 0, 0, 0.03) 30%,
            transparent 100%);
    border-radius: 4px 0 0 4px;
    pointer-events: none;
    z-index: 5;
}

/* Livre ouvert (double page) hors plein écran */
.reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer {
    border-radius: 6px;
    border-left: none;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.15),
        0 3px 8px rgba(0, 0, 0, 0.08),
        inset 0 0 20px rgba(0, 0, 0, 0.03),
        -3px 3px 0 -2px var(--bg-color, #f5f0e6),
        -3px 3px 3px -1px rgba(0, 0, 0, 0.06),
        -6px 5px 0 -3px var(--bg-color, #ede5d3),
        -6px 5px 3px -2px rgba(0, 0, 0, 0.04),
        3px 3px 0 -2px var(--bg-color, #f5f0e6),
        3px 3px 3px -1px rgba(0, 0, 0, 0.06),
        6px 5px 0 -3px var(--bg-color, #ede5d3),
        6px 5px 3px -2px rgba(0, 0, 0, 0.04);
    background-image:
        linear-gradient(to right,
            rgba(0, 0, 0, 0.02) 0%,
            transparent 2.5%,
            transparent 49%,
            rgba(0, 0, 0, 0.04) 49.5%,
            rgba(0, 0, 0, 0.04) 50.5%,
            transparent 51%,
            transparent 97.5%,
            rgba(0, 0, 0, 0.02) 100%);
    background-color: var(--bg-color, #fcfbf9);
}

/* En double page hors plein écran : symétrie des pseudo-éléments */
.reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer::before {
    width: 14px;
    background: linear-gradient(to left,
            transparent 0%,
            rgba(0, 0, 0, 0.015) 40%,
            rgba(0, 0, 0, 0.04) 100%);
    border-radius: 6px 0 0 6px;
}

.reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer::after {
    border-radius: 0 6px 6px 0;
}

/* ================================================================
   VOLUME DU LIVRE — PREMIÈRE ET DERNIÈRE PAGE
   Masquer les pages empilées quand il n'y a plus de pages de ce côté.
   ================================================================ */

/* Page unique — dernière page : pas de pages après = pas de volume à droite */
.book-viewer--last-page {
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 2px 0 6px rgba(0, 0, 0, 0.06),
        inset -2px 0 5px rgba(0, 0, 0, 0.04);
}

/* Page unique — dernière page : masquer le curl droit */
.book-viewer--last-page::after {
    opacity: 0;
}

/* Double page — premier spread (pages 1-2) : pas de volume à gauche */
.reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer--first-page {
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.15),
        0 3px 8px rgba(0, 0, 0, 0.08),
        inset 0 0 20px rgba(0, 0, 0, 0.03),
        3px 3px 0 -2px var(--bg-color, #f5f0e6),
        3px 3px 3px -1px rgba(0, 0, 0, 0.06),
        6px 5px 0 -3px var(--bg-color, #ede5d3),
        6px 5px 3px -2px rgba(0, 0, 0, 0.04);
}

/* Double page — dernier spread : pas de volume à droite */
.reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer--last-page {
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.15),
        0 3px 8px rgba(0, 0, 0, 0.08),
        inset 0 0 20px rgba(0, 0, 0, 0.03),
        -3px 3px 0 -2px var(--bg-color, #f5f0e6),
        -3px 3px 3px -1px rgba(0, 0, 0, 0.06),
        -6px 5px 0 -3px var(--bg-color, #ede5d3),
        -6px 5px 3px -2px rgba(0, 0, 0, 0.04);
}

/* Double page — dernier spread : masquer le curl droit */
.reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer--last-page::after {
    opacity: 0;
}

/* Double page — premier spread : masquer le bord gauche qui dépasse */
.reader-notes-container:not(.fullscreen):not(.single-page-mode) .book-viewer--first-page::before {
    opacity: 0;
}


.book-viewer-fade-top,
.book-viewer-fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 32px;
    pointer-events: none;
    z-index: 6;
}

.book-viewer-fade-top {
    top: 0;
    background: linear-gradient(to bottom,
            var(--bg-color, #fcfbf9) 0%,
            rgba(252, 251, 249, 0) 100%);
    border-radius: 4px 10px 0 0;
}

.book-viewer-fade-bottom {
    bottom: 0;
    background: linear-gradient(to top,
            var(--bg-color, #fcfbf9) 0%,
            rgba(252, 251, 249, 0) 100%);
    border-radius: 0 0 10px 4px;
}

/* Les effets visuels du livre en plein écran sont définis plus bas */


/* Zone de contenu du livre */
.book-content {
    display: flex;
    gap: 3rem;
    justify-content: center;
    min-height: 425px;
    width: auto;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color, #333);
    text-align: left;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* ✅ Empêcher la sélection au niveau conteneur (évite le saut interligne) */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Masquer les artefacts visuels pendant la transition plein écran */
.reader-notes-container.fullscreen-transitioning {
    background: var(--bg, #F3F0E9) !important;
}

.reader-notes-container.fullscreen-transitioning .book-viewer,
.reader-notes-container.fullscreen-transitioning .book-navigation,
.reader-notes-container.fullscreen-transitioning .fullscreen-stopwatch-container,
.reader-notes-container.fullscreen-transitioning .fullscreen-progress-container,
.reader-notes-container.fullscreen-transitioning .sidebar-column {
    opacity: 0 !important;
    transition: none !important;
}

/* Trait vertical fin entre les deux pages */
.book-content::after {
    content: '';
    position: absolute;
    left: var(--center-line-x, 50%);
    top: 2rem;
    bottom: 2rem;
    width: 2px;
    /* Use a CSS variable so JS can change the center line color per theme */
    background: linear-gradient(to bottom, transparent 0%, var(--center-line-color, #ccc) 5%, var(--center-line-color, #ccc) 95%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

.book-content::-webkit-scrollbar {
    display: none;
}

/* Styles pour le contenu injecté (depuis Google Docs) */
.book-content h1,
.book-content h2,
.book-content h3 {
    font-family: var(--font-serif);
    color: var(--text-color, #2c2c2c);
    margin-top: 0;
    break-after: avoid;
}

.book-content p {
    margin-bottom: 1rem;
}

/* Generated page element classes (used by Lecture-script.js) */
.page-container {
    flex: 0 0 300px;
    /* ✅ Ne pas grandir/shrink, toujours 300px */
    width: 300px;
    max-width: 300px;
    min-width: 300px;
    /* ✅ Largeur fixe définie dans PAGINATION_CONFIG - ne pas dépasser */
    min-height: 405px;
    /* ✅ Hauteur = maxPageHeight (360px) + buffer (5px) */
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* ✅ Pour voir les débordements pendant le développement */
    font-family: 'Merriweather', Georgia, serif;
    font-size: 15px;
    /* ✅ Taille fixe pour pagination stable (comme dans le test) */
    color: inherit;
    line-height: 1.8;
    padding: 0;
    /* ✅ Pas de padding interne */
    margin: 0 auto;
    /* ✅ Centrer la page */
    box-sizing: border-box;
    /* ✅ Éviter les problèmes de padding */
    /* ✅ Empêcher la sélection au niveau conteneur (évite le saut interligne) */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* ✅ Box-sizing sur tous les enfants pour éviter les problèmes de calcul */
.page-container * {
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
    hyphens: none;
    unicode-bidi: plaintext;
}

.page-content {
    flex: 1;
    overflow: visible;
    padding: 0 5px;
    /* ✅ 2px latéral pour ne pas rogner les empattements/anti-aliasing */
    margin: 0;
    /* ✅ Pas de margin */
}

/* Widget fin de lecture */
.book-end-widget {
    text-align: center;
    padding: 8px 10px 8px;
    margin-top: 4px;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
    font-family: 'Inter', sans-serif;
}
.book-end-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.book-end-ornament {
    display: block;
    margin: 0 auto;
    max-width: 140px;
    height: 36px;
    object-fit: contain;
    opacity: 0.6;
}
.book-end-text {
    font-size: 12px;
    color: #888;
    margin: 0 0 16px;
    line-height: 1.5;
}
.book-end-quiz-btn {
    display: inline-block;
    padding: 11px 28px;
    background: #1a5238;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.15s, transform 0.1s;
    pointer-events: auto;
}
.book-end-quiz-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}
/* Desktop : la couleur suit le thème du lecteur (data-reader-theme), pas le thème de la page */
body[data-reader-theme="noir"] .book-end-ornament { filter: invert(1); opacity: 0.45; }
body[data-reader-theme="noir"] .book-end-text { color: rgba(255,255,255,0.45); }
body[data-reader-theme="noir"] .book-end-quiz-btn { background: #5ab88a; }
body[data-reader-theme="noir"] .page-basmalah { filter: invert(1); }

.page-basmalah {
    width: 65%;
    margin: 0 auto 0.6em auto;
    text-align: center;
}

.page-basmalah svg {
    width: 100%;
    height: auto;
    display: block;
}

.page-title {
    font-weight: 700;
    margin: 0.5em 0;
    /* ✅ Marges identiques au test */
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.page-title-h1 {
    font-size: 1.8em;
    margin-top: 0;
}

.page-title-h2 {
    font-size: 1.5em;
    margin-top: 0;
}

.page-paragraph {
    margin-bottom: 0.8em;
    margin-top: 0;
    text-align: left;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* ✅ Réactiver la sélection de texte sur les paragraphes */
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

.page-title,
.page-span,
.book-footnotes,
.book-footnote,
.note-highlight {
    /* ✅ Réactiver la sélection de texte sur les titres, spans, footnotes et highlights */
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

.page-span {
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.book-footnotes {
    margin-top: auto;
    padding-top: 15px;
    /* ✅ Identique au test (15px = 1rem) */
    border-top: 1px solid var(--footnote-border-color, #ccc);
    font-size: 13px;
    /* ✅ Identique au test */
    color: var(--footnote-color, inherit);
}

/* Individual footnote */
.book-footnote {
    margin-top: 8px;
    /* ✅ Identique au test */
    color: var(--footnote-color, inherit);
    line-height: 1.4;
}

.book-content .title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-color, #1a1a1a);
}

.book-content .subtitle {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    margin-bottom: 1.5rem;
}

/* --- Sidebar (Droite) --- */
.lecture-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding-top: 50px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-widget {
    border-radius: 12px;
    padding: 1rem;
    font-size: 0.9rem;
    /* Ne pas forcer la hauteur : éviter d'étirer le widget (stopwatch) */
}

.notes-widget {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Occupes l'espace restant dans la sidebar */
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    /* important pour le scroll interne */
}

#notes-list {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    /* Prendre l'espace disponible */
    min-height: 0;
    /* Important pour le scroll dans flexbox */
    padding-right: 4px;
}

#notes-list::-webkit-scrollbar {
    width: 6px;
}

#notes-list::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 3px;
}

#notes-list::-webkit-scrollbar-thumb {
    background: var(--muted);
    border-radius: 3px;
}

#notes-list::-webkit-scrollbar-thumb:hover {
    background: #777;
}


.sidebar-widget h3 {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary, #555);
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Notes Widget */
.notes-navigation button {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--text-secondary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
}

.notes-navigation button:hover {
    background: var(--text-secondary);
    transform: scale(1.1);
}

.notes-navigation button:active {
    transform: scale(0.95);
}

.search-box,
.note-input {
    background: var(--panel-light, #fff);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    border: 1px solid var(--border-color, transparent);
    color: var(--text-primary);
}

.search-box input,
.note-input input {
    border: none;
    outline: none;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    background: transparent;
}

.notes-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin-top: 1rem;
}

.notes-count {
    font-weight: 700;
    color: var(--text-primary);
}

/* Author Widget */
.author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.author-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #444);
}

.add-bio-btn {
    background: none;
    border: none;
    color: var(--text-secondary, #666);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
}

/* Books Widget */
.books-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.other-book-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.book-thumb {
    aspect-ratio: 2/3;
    border-radius: var(--cover-radius, 4px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}

.book-thumb-cover {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* Forcer haute qualité sur Chrome/Edge */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.book-thumb-title {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-primary);
    text-align: center;
    transition: color 0.3s ease;
}

/* Hover sur l'item entier affecte cover ET titre */
.other-book-item:hover .book-thumb {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.other-book-item:hover .book-thumb-title {
    color: var(--brand-green);
}

/* Highlights de notes */
.note-highlight {
    /* Background géré par JS via background-color (compatible iOS Safari) */
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    position: relative;
    display: inline;
}

/* Hover des notes géré par JS */

/* Popup de détail de note */
#note-detail-popup {
    animation: notePopupFadeIn 0.15s ease-out;
}

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

/* Boutons éditer/supprimer dans notes */
.edit-note-btn:hover {
    color: var(--text-primary);
}

.delete-note-btn:hover {
    color: var(--danger-hover);
}

.note-detail-edit-btn:hover {
    color: var(--text-primary) !important;
}

.note-detail-delete-btn:hover {
    color: var(--danger-hover) !important;
}

.note-detail-close-btn:hover {
    color: var(--text-primary) !important;
}

/* Reader-theme-scoped hover: override site CSS variables with reader-appropriate colors */
body[data-reader-theme="blanc"] #note-detail-popup .note-detail-edit-btn:hover,
body[data-reader-theme="blanc"] #note-detail-popup .note-detail-close-btn:hover {
    color: #1A5238 !important;
}
body[data-reader-theme="blanc"] #note-detail-popup .note-detail-delete-btn:hover {
    color: #c0392b !important;
}
body[data-reader-theme="beige"] #note-detail-popup .note-detail-edit-btn:hover,
body[data-reader-theme="beige"] #note-detail-popup .note-detail-close-btn:hover {
    color: #3d2b1a !important;
}
body[data-reader-theme="beige"] #note-detail-popup .note-detail-delete-btn:hover {
    color: #a0321e !important;
}
body[data-reader-theme="noir"] #note-detail-popup .note-detail-edit-btn:hover,
body[data-reader-theme="noir"] #note-detail-popup .note-detail-close-btn:hover {
    color: #a8eacc !important;
}
body[data-reader-theme="noir"] #note-detail-popup .note-detail-delete-btn:hover {
    color: #f87171 !important;
}

/* Mode 1 page : classe ajoutée par JS (seule source de vérité — voir
   detectPageMode() dans js/lecture-ui.js). Ne pas dupliquer ces règles
   dans un @media indépendant : la largeur seule ne suffit pas à décider
   du mode (contenu qui déborde même largeur ok, plein écran, etc.),
   d'où la désynchronisation possible entre CSS et état JS. */
.reader-notes-container.single-page-mode .book-viewer {
    width: fit-content;
}

.reader-notes-container.single-page-mode .book-content::after {
    display: none;
}

.reader-notes-container.single-page-mode .book-content .page-container:nth-child(2) {
    display: none;
}

.reader-notes-container.single-page-mode {
    grid-template-columns: minmax(0, 1fr) auto 220px;
}

/* Si la colonne notes/TOC devient trop étroite pour 3 colonnes côte à côte,
   elle passe sous le texte plutôt que de forcer un scroll horizontal (peu
   découvrable). Pas de pointer:coarse ici volontairement : couvre le vrai
   desktop réduit ET les tablettes tactiles entre 501-768px — en dessous de
   500px tactile, Lecture-mobile.css prend le relais avec son propre
   bottom-sheet (!important), qui reste prioritaire. */
@media (max-width: 768px) {
    /* !important nécessaire : .reader-notes-container.single-page-mode (plus
       spécifique) et .sidebar-toggle-bar (même spécificité mais définie plus
       bas dans le fichier) gagneraient sinon la cascade. */
    .reader-notes-container {
        grid-template-columns: 1fr !important;
        min-width: unset;
    }

    .sidebar-toggle-bar {
        display: none !important;
    }

    .sidebar-column {
        grid-column: 1;
        width: 100%;
        /* Le hack height:0/min-height:100% (desktop) suppose une ligne de
           grille partagée avec le viewer ; ici la sidebar a sa propre ligne,
           il faut donc qu'elle se dimensionne naturellement à son contenu. */
        height: auto;
        min-height: 0;
        max-height: 60vh;
        overflow-y: auto;
    }

    .reader-notes-container>.notes-widget {
        font-size: 0.8rem;
        min-width: unset;
    }
}

/* Responsive pour mode fullscreen */
@media (max-width: 1100px) {
    /* supprimé pour garantir le centrage horizontal fullscreen */
}

@media (max-width: 768px) {
    .reader-notes-container.fullscreen {
        grid-template-columns: 1fr;
        min-width: auto;
        overflow-x: auto;
    }

    .reader-notes-container.fullscreen .sidebar-column {
        width: 220px;
        top: 8px;
        bottom: 8px;
    }

    .reader-notes-container.fullscreen .notes-widget {
        font-size: 0.8rem;
        min-width: 180px;
    }
}

/* Fullscreen toggle button */
.fullscreen-toggle-btn {
    appearance: none;
    border: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    box-sizing: border-box;
    transition: background 0.15s ease, transform 0.1s ease;
}

.fullscreen-toggle-btn:active {
    transform: scale(0.92);
}


.fullscreen-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
}

/* Le bouton fullscreen est géré par le gap de .nav-group-tools */

/* Fullscreen : reader-notes-container occupe tout l'écran */
.reader-notes-container.fullscreen {
    background-color: var(--bg, #F3F0E9);
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    isolation: isolate;
    touch-action: pan-x pan-y;
    transition: none;
}

/* En plein écran, la sidebar est un overlay COMPLÈTEMENT ISOLÉ du layout
   Elle ne participe PAS à la grille et flotte par-dessus le contenu */
.reader-notes-container.fullscreen .sidebar-column {
    position: fixed !important;
    top: 12px !important;
    right: 8px !important;
    bottom: 12px !important;
    left: auto !important;
    width: 250px !important;
    height: auto;
    max-height: calc(100vh - 24px);
    /* dvh = zone réellement visible sur iOS Safari quand la barre d'outils
       reste affichée (vh y inclut à tort la zone masquée dessous) */
    max-height: calc(100dvh - 24px);
    z-index: 20005 !important;
    overflow-y: auto;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(0);
    opacity: 1;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    margin: 0;
    grid-column: unset !important;
    grid-row: unset !important;
}

/* Fullscreen with sidebar hidden: slide it off-screen */
.reader-notes-container.fullscreen.sidebar-hidden .sidebar-column {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* Le contenu du livre en fullscreen : toute la largeur/hauteur viewport, centré.
   On utilise 100vw/100vh plutôt que 100% pour s'affranchir de la largeur de la
   colonne grid (qui peut être réduite par la sidebar en mode page simple). */
.reader-notes-container.fullscreen .book-reader-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    /* dvh = zone réellement visible sur iOS Safari quand la barre d'outils
       reste affichée (vh y inclut à tort la zone masquée dessous) */
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* Sidebar toggle indicator: small vertical tab */
.sidebar-toggle-indicator {
    position: fixed !important;
    right: 0;
    top: 30px !important;
    width: 40px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    background: rgba(26, 82, 56, 0.98);
    /* Couleur verte solide */
    backdrop-filter: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    opacity: 0;
    /* Caché par défaut, apparaît avec show-nav */
    pointer-events: none;
    transform: translateX(10px);
    transition: opacity 0.28s ease, transform 0.28s ease, right 0.3s ease, background 160ms ease, box-shadow 160ms ease;
    z-index: 20010;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-noir .sidebar-toggle-indicator {
    background: rgba(140, 110, 8, 0.98);
}

.sidebar-toggle-indicator:hover {
    background: rgba(34, 120, 78, 1);
    /* slightly lighter green on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    transform: scale(1.04);
}
body.theme-noir .sidebar-toggle-indicator:hover {
    background: rgba(180, 148, 12, 1);
}

/* Afficher l'indicateur quand show-nav est actif */
.reader-notes-container.fullscreen.show-nav .sidebar-toggle-indicator {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.sidebar-toggle-indicator .chev {
    width: 14px;
    height: 14px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
    opacity: 1;
    transition: transform 160ms ease, border-color 160ms ease;
}

/* When sidebar is visible, rotate chevron to point right (to hide)
   and move the indicator to the left edge of the sidebar.
   Position entièrement gérée par CSS avec transition. */
.reader-notes-container.fullscreen:not(.sidebar-hidden) .sidebar-toggle-indicator {
    right: 258px;
    border-radius: 8px 0 0 8px;
}

.reader-notes-container.fullscreen:not(.sidebar-hidden) .sidebar-toggle-indicator .chev {
    transform: rotate(135deg);
}

/* Hide the fullscreen sidebar indicator outside of fullscreen */
.reader-notes-container:not(.fullscreen) .sidebar-toggle-indicator {
    display: none;
}

/* Barre toggle sidebar hors plein écran : barre verticale fine avec chevron */
.sidebar-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    align-self: stretch;
    cursor: pointer;
    background: #f0efe9;
    border-radius: 6px 0 0 6px;
    transition: background 0.2s ease;
    position: relative;
    z-index: 15;
    flex-shrink: 0;
    grid-column: 2;
    margin-left: 0.5rem;
}

.sidebar-toggle-bar:hover {
    background: rgba(26, 82, 56, 0.15);
}

/* Chevron dans la barre toggle (flèche vers la droite = fermer) */
.sidebar-toggle-bar-chev {
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--brand-green, #1a5238);
    border-bottom: 2.5px solid var(--brand-green, #1a5238);
    transform: rotate(-45deg);
    transition: transform 0.25s ease;
    opacity: 0.6;
}
body.theme-noir .sidebar-toggle-bar-chev {
    border-right-color: var(--accent-gold, #b89e14);
    border-bottom-color: var(--accent-gold, #b89e14);
}

.sidebar-toggle-bar:hover .sidebar-toggle-bar-chev {
    opacity: 1;
}

/* Quand la sidebar est cachée, tourner le chevron vers la gauche (= ouvrir) */
.reader-notes-container.sidebar-collapsed .sidebar-toggle-bar-chev {
    transform: rotate(135deg);
}

/* Masquer la barre toggle en plein écran */
.reader-notes-container.fullscreen .sidebar-toggle-bar {
    display: none;
}

/* Masquer l'indicateur sidebar en plein écran (sidebar cachée, nav non affichée) — même traitement que sidebar-toggle-bar */
.reader-notes-container.fullscreen.sidebar-hidden:not(.show-nav) .sidebar-toggle-indicator {
    display: none !important;
}

/* Make the indicator less obtrusive on small screens */
@media (max-width: 768px) {
    .sidebar-toggle-indicator {
        display: none;
    }
}

/* Cette règle est remplacée par celle définie plus haut - on la laisse pour référence mais elle est surchargée */
/* En fullscreen, book-reader-fullscreen occupe toute la hauteur et centre le book-viewer */

/* Masquer le conteneur du chronomètre fullscreen par défaut (hors plein écran) */
.fullscreen-stopwatch-container {
    display: none;
}

/* En mode plein écran, afficher le chronomètre comme une fine barre
   horizontale centrée en haut, qui descend depuis le bord supérieur — ni un
   coin (gauche pris par la croix de sortie native sur iPad, bas trop étroit
   en paysage), ni un bloc large : une barre légère, au milieu, qui glisse
   depuis le haut. translateX(-50%) centre horizontalement ; translateY very
   négatif = totalement hors-écran au-dessus avant révélation. */
.reader-notes-container.fullscreen .fullscreen-stopwatch-container {
    display: block;
    position: absolute;
    top: 0.75rem;
    left: 50%;
    z-index: 20020;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-130%);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

/* Barre de progression en plein écran - désormais intégrée dans la nav bar */
.reader-notes-container.fullscreen .fullscreen-progress-container {
    display: none;
}

.fullscreen-progress-bar {
    width: 200px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    transition: height 0.15s ease;
}

.fullscreen-progress-bar:hover {
    height: 10px;
}

.fullscreen-progress-fill {
    height: 100%;
    background: rgba(26, 82, 56, 0.95);
    transition: width 0.3s ease;
}

.fullscreen-progress-text {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 40px;
}

/* En mode plein écran, repositionner la navigation au centre en bas */
/* bottom inclut env(safe-area-inset-bottom) : en plein écran natif WebKit sur
   iPad, l'OS réserve une bande en bas pour le geste de la home indicator ;
   sans cette marge, la barre se retrouve partiellement sous cette bande. */
.reader-notes-container.fullscreen .book-navigation {
    position: absolute;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    z-index: 20020;
    opacity: 0;
    pointer-events: none;
    /* Défensif — voir .xmind-controls (xmind-style.css) pour le même correctif
       et son explication détaillée (touch-action:none hérité d'un ancêtre
       pannable peut rendre le click peu fiable sur les enfants interactifs
       en WebKit/iOS). .reader-notes-container.fullscreen a touch-action:
       pan-x pan-y (moins restrictif que none), donc probablement pas le
       même mécanisme ici, mais sans risque. */
    touch-action: manipulation;
    transition: opacity 0.28s ease, transform 0.28s ease;
    background: rgba(26, 82, 56, 0.95);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    white-space: nowrap;
}
body.theme-noir .reader-notes-container.fullscreen .book-navigation {
    background: rgba(140, 110, 8, 0.95);
}

/* Sidebar est un overlay en plein écran, la nav reste identique peu importe l'état sidebar */

/* Créer une zone de détection invisible en haut de l'écran */
.reader-notes-container.fullscreen::after {
    /* Detection zone moved to bottom for nav show; reduce interference
       with page interaction: make smaller and non-interactive so text
       selection in the bottom of the page is not blocked. JS handles
       show/hide behavior as primary mechanism. */
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    /* smaller hit area */
    z-index: 19990;
    /* keep behind most UI so it doesn't block selection */
    pointer-events: none;
    /* avoid blocking clicks/selections; JS drives nav */
}

/* Afficher la navigation et le chronomètre au survol */
.reader-notes-container.fullscreen::after:hover~.book-reader-fullscreen .book-navigation,
.reader-notes-container.fullscreen .book-navigation:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.reader-notes-container.fullscreen::after:hover~.book-reader-fullscreen .fullscreen-stopwatch-container,
.reader-notes-container.fullscreen .fullscreen-stopwatch-container:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* fullscreen-progress-container est maintenant dans la nav bar */

/* Alternative: utiliser JavaScript pour détecter la position de la souris */
.reader-notes-container.fullscreen.show-nav .book-navigation {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.reader-notes-container.fullscreen.show-nav .fullscreen-stopwatch-container {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* fullscreen-progress-container est caché en plein écran, progression intégrée dans la nav */

/* Styles des boutons de navigation en mode plein écran */
.reader-notes-container.fullscreen .book-navigation .nav-btn {
    background: white;
    border: 2px solid #d6cbb8;
    color: #7a746b;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem 0.9rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    min-width: 40px;
}

.reader-notes-container.fullscreen .book-navigation .nav-btn:hover:not(:disabled) {
    background: #fafaf8;
    color: var(--brand-green);
    border-color: var(--brand-green);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(26, 82, 56, 0.15);
}

.reader-notes-container.fullscreen .book-navigation .nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.reader-notes-container.fullscreen .book-navigation .page-indicator {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 0.5rem;
    min-width: 140px;
    text-align: center;
    white-space: nowrap;
}

.reader-notes-container.fullscreen .book-navigation .fullscreen-toggle-btn,
.reader-notes-container.fullscreen .book-navigation .nav-tool-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.reader-notes-container.fullscreen .book-navigation .fullscreen-toggle-btn:hover,
.reader-notes-container.fullscreen .book-navigation .nav-tool-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Panel dropdown en mode fullscreen — suit le thème lecteur */
.reader-notes-container.fullscreen .book-navigation .nav-dropdown-panel {
    background: var(--panel-light, #f9f9f9);
    border-color: var(--border-color, rgba(0,0,0,0.12));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    color: var(--text-primary, #333);
}
body[data-reader-theme="beige"] .reader-notes-container.fullscreen .book-navigation .nav-dropdown-panel {
    background: rgba(230, 208, 167, 0.97);
    border-color: rgba(44, 36, 22, 0.2);
    color: #2c2416;
}
body[data-reader-theme="noir"] .reader-notes-container.fullscreen .book-navigation .nav-dropdown-panel {
    background: rgba(30, 30, 30, 0.96);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.reader-notes-container.fullscreen .book-navigation .nav-dropdown-panel .nav-tool-btn {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
}
.reader-notes-container.fullscreen .book-navigation .nav-dropdown-panel .nav-tool-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}
body[data-reader-theme="noir"] .reader-notes-container.fullscreen .book-navigation .nav-dropdown-panel .nav-tool-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
body[data-reader-theme="noir"] .reader-notes-container.fullscreen .book-navigation .nav-dropdown-panel .nav-tool-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Diviseur vertical dans la navigation */
.nav-divider {
    width: 1px;
    height: 24px;
    background: rgba(122, 116, 107, 0.3);
    margin: 0;
    flex-shrink: 1;
    transition: opacity 0.15s ease, width 0.15s ease;
}

/* Dividers cachés dynamiquement par JS quand ils sont en début/fin de ligne */
.nav-divider.nav-divider-hidden {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* En plein écran, les dividers restent identiques que la sidebar soit visible ou non */
.reader-notes-container.fullscreen .book-navigation .nav-divider {
    background: rgba(255, 255, 255, 0.3);
    height: 28px;
    display: block;
}

/* Cacher les dividers si la nav fullscreen wrappe */
@media (max-width: 1000px) {
    .reader-notes-container.fullscreen .book-navigation .nav-divider {
        display: none;
    }
}

/* Afficher tous les contrôles dans book-navigation en mode normal */
.book-navigation .page-jump-nav,
.book-navigation .nav-divider,
.book-navigation .nav-btn-small {
    display: flex;
    align-items: center;
}

/* Fullscreen nav bar: nav-btn-small uses inverted gold/green logic */
.reader-notes-container.fullscreen .book-navigation .nav-btn-small {
    background: var(--accent-gold, #b89e14);
}
body.theme-noir .reader-notes-container.fullscreen .book-navigation .nav-btn-small {
    background: var(--brand-green);
}

/* Le diviseur doit s'afficher comme bloc vertical */
.book-navigation .nav-divider {
    display: block;
}

/* Styles en mode plein écran pour reading-progress */
.reader-notes-container.fullscreen .book-navigation .reading-progress-bar {
    background: rgba(255, 255, 255, 0.2);
    height: 10px;
}

.reader-notes-container.fullscreen .book-navigation .reading-progress-bar:hover {
    height: 12px;
}

.reader-notes-container.fullscreen .book-navigation .reading-progress-fill {
    background: linear-gradient(90deg, rgba(184, 150, 11, 0.9) 0%, var(--accent-gold, #b89e14) 100%);
}
body.theme-noir .reader-notes-container.fullscreen .book-navigation .reading-progress-fill {
    background: linear-gradient(90deg, rgba(74, 145, 120, 0.9) 0%, var(--brand-green) 100%);
}

.reader-notes-container.fullscreen .book-navigation .reading-progress-fill::after {
    width: 16px;
    height: 16px;
    background: white;
    border: 2px solid var(--accent-gold, #b89e14);
    right: -8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
body.theme-noir .reader-notes-container.fullscreen .book-navigation .reading-progress-fill::after {
    border-color: var(--brand-green);
}

.reader-notes-container.fullscreen .book-navigation .reading-progress-text {
    color: white;
    font-size: 0.85rem;
}

/* Chronomètre en plein écran — fine barre horizontale (pilule), affichage et
   boutons alignés en ligne plutôt qu'empilés, pour rester "léger" en hauteur
   une fois centré en haut de l'écran (cf. règle de positionnement plus haut). */
.stopwatch-widget-fullscreen {
    background: rgba(26, 82, 56, 0.92);
    padding: 0.5rem 1rem;
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
}
body.theme-noir .stopwatch-widget-fullscreen {
    background: rgba(140, 110, 8, 0.92);
}

.stopwatch-display-fullscreen {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: white;
    text-align: center;
    letter-spacing: 0.03em;
}

.stopwatch-controls-fullscreen {
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    align-items: center;
}

/* 40px : proche du minimum recommandé pour une cible tactile fiable (44px) —
   30px testé en pratique s'est révélé trop petit et trop serré au doigt. */
.stopwatch-btn-fullscreen {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stopwatch-btn-fullscreen:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    transform: scale(1.05);
}

.stopwatch-btn-fullscreen:active {
    transform: scale(0.95);
}

/* Unify specific buttons styles in fullscreen */
.stopwatch-btn-fullscreen.primary {
    background: var(--brand-green);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

.stopwatch-btn-fullscreen.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.45);
}

.stopwatch-btn-fullscreen.mode {
    background: var(--brand-gold);
    color: #2b2108;
    border-color: rgba(255, 255, 255, 0.5);
}
body.theme-noir .stopwatch-btn-fullscreen.mode {
    background: var(--brand-green);
    color: white;
}

.stopwatch-btn-fullscreen.primary:hover,
.stopwatch-btn-fullscreen.secondary:hover,
.stopwatch-btn-fullscreen.mode:hover {
    transform: scale(1.05);
}

/* Masquer le chronomètre de la sidebar en plein écran */
.reader-notes-container.fullscreen .sidebar-column .stopwatch-widget {
    display: none;
}

/* Contrôles de page dans la navigation */
.page-jump-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-jump-nav input {
    width: 60px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color, rgba(0,0,0,0.2));
    border-radius: 4px;
    text-align: center;
    font-size: 0.85rem;
    background: transparent;
    color: var(--text-primary, #333);
    -moz-appearance: textfield;
}
.page-jump-nav input::-webkit-outer-spin-button,
.page-jump-nav input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* En plein écran, l'input ressemble à la version hors plein écran */
.reader-notes-container.fullscreen .book-navigation .page-jump-nav input {
    background: white;
    color: #333;
    border-color: #d6cbb8;
}

.nav-btn-small {
    color: white;
    background: var(--brand-green);
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    box-shadow: 0 1px 6px rgba(26, 82, 56, 0.08);
}

.nav-btn-small:hover {
    /* subtle darken + lift while keeping white text for contrast */
    background: #14412b;
    /* darker shade of --brand-green */
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(20, 65, 43, 0.18);
}

.nav-btn-small:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 82, 56, 0.14);
}
body.theme-noir .nav-btn-small {
    background: var(--accent-gold, #b89e14);
}
body.theme-noir .nav-btn-small:hover {
    background: var(--accent-gold-light, #d4af5f);
    transform: translateY(-2px) scale(1.03);
}

/* Sélecteur de thème (sidebar) */
.theme-selector {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Panel dropdown du sélecteur de thème dans la nav */
#theme-dropdown .nav-dropdown-panel {
    gap: 8px;
}

.theme-btn,
.theme-btn-sidebar {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-color, #ddd);
    border-radius: 50%;
    /* Boutons ronds pour les symboles */
    cursor: pointer;
    background: var(--panel-light, white);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

/* Couleurs spécifiques pour chaque thème */
.theme-btn[data-theme="blanc"],
.theme-btn-sidebar[data-theme="blanc"] {
    background: #f9f9f9;
    color: var(--text-secondary);
}

.theme-btn[data-theme="beige"],
.theme-btn-sidebar[data-theme="beige"] {
    background: #e6d0a7;
    color: #8B7355;
}

.theme-btn[data-theme="noir"],
.theme-btn-sidebar[data-theme="noir"] {
    background: #223235;
    color: #e8e8e8;
}

.theme-btn:hover,
.theme-btn-sidebar:hover {
    transform: scale(1.1);
    border-color: var(--brand-green);
    box-shadow: 0 2px 8px rgba(26, 82, 56, 0.3);
}
body.theme-noir .theme-btn:hover,
body.theme-noir .theme-btn-sidebar:hover {
    border-color: var(--accent-gold, #b89e14);
    box-shadow: 0 2px 8px rgba(184, 158, 20, 0.3);
}

/* État actif (sélectionné) */
.theme-btn.active,
.theme-btn-sidebar.active {
    border-color: var(--brand-green);
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(26, 82, 56, 0.3), 0 2px 8px rgba(26, 82, 56, 0.4);
}
body.theme-noir .theme-btn.active,
body.theme-noir .theme-btn-sidebar.active {
    border-color: var(--accent-gold, #b89e14);
    box-shadow: 0 0 0 2px rgba(184, 158, 20, 0.3), 0 2px 8px rgba(184, 158, 20, 0.4);
}

/* Plein écran : logique inversée (or en thème clair, vert en thème sombre) */
.reader-notes-container.fullscreen .book-navigation #theme-dropdown .theme-btn-sidebar.active {
    background: var(--accent-gold, #b89e14);
    border-color: var(--accent-gold, #b89e14);
    color: #fff;
}
body.theme-noir .reader-notes-container.fullscreen .book-navigation #theme-dropdown .theme-btn-sidebar.active {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: white;
}

.reader-notes-container.fullscreen .book-navigation .theme-btn-sidebar:hover {
    border-color: var(--accent-gold, #b89e14);
    box-shadow: 0 2px 8px rgba(184, 158, 20, 0.3);
}
body.theme-noir .reader-notes-container.fullscreen .book-navigation .theme-btn-sidebar:hover {
    border-color: var(--brand-green);
    box-shadow: 0 2px 8px rgba(26, 82, 56, 0.3);
}

/* Notes widget en fullscreen - style sombre pour overlay sidebar */
.reader-notes-container.fullscreen .notes-widget {
    position: static;
    height: 100vh;
    /* dvh = zone réellement visible sur iOS Safari quand la barre d'outils
       reste affichée (vh y inclut à tort la zone masquée dessous) */
    height: 100dvh;
    padding: 0.5rem;
    border-radius: 6px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-primary);
}

/* Note: widgets keep their original backgrounds; only the sidebar container
   receives the green background to avoid duplicating widget styles. */

/* Masquer le bloc controls-normal en mode fullscreen pour éviter doublons */
.reader-notes-container.fullscreen .controls-normal {
    display: none !important;
}

.reader-notes-container.fullscreen .stopwatch-widget {
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0.25rem;
    padding: 0.5rem;
    border-radius: 6px;
    box-shadow: none;
    color: var(--text-primary);
}

/* When in fullscreen, scale the book viewer to fill viewport height */
/* Le scale est calculé dynamiquement par JavaScript (calculateFullscreenScale)
   pour s'adapter précisément à l'espace disponible sur tous les appareils */
.reader-notes-container.fullscreen .book-viewer {
    /* Transform sera appliqué dynamiquement par JS */
    transform-origin: center center !important;
    transition: transform 180ms ease;
    overflow: visible;
    max-width: 100%;
    margin-bottom: 0 !important;
    overscroll-behavior: contain;
    position: relative;
    /* Styles par défaut (mode page simple) - livre fermé */
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.35),
        inset 3px 0 8px rgba(0, 0, 0, 0.08),
        inset -3px 0 8px rgba(0, 0, 0, 0.05),
        0 2px 6px rgba(0, 0, 0, 0.2),
        6px 6px 0 -2px var(--bg-color, #f5f0e6),
        6px 6px 4px -1px rgba(0, 0, 0, 0.15),
        10px 10px 0 -4px var(--bg-color, #ede5d3),
        10px 10px 6px -3px rgba(0, 0, 0, 0.1);
    border-radius: 4px 12px 12px 4px;
    border-left: 3px solid rgba(0, 0, 0, 0.12);
}

/* === LIVRE OUVERT : mode double page en plein écran === */
.reader-notes-container.fullscreen:not(.single-page-mode) .book-viewer {
    /* Ombre de livre ouvert : symétrique des deux côtés */
    box-shadow:
        /* Ombre principale (livre posé) */
        0 15px 50px rgba(0, 0, 0, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.2),
        /* Courbure intérieure (pliure centrale) */
        inset 0 0 30px rgba(0, 0, 0, 0.05),
        /* Bords de pages empilées - côté gauche */
        -4px 4px 0 -2px var(--bg-color, #f5f0e6),
        -4px 4px 3px -1px rgba(0, 0, 0, 0.1),
        -7px 6px 0 -3px var(--bg-color, #ede5d3),
        -7px 6px 4px -2px rgba(0, 0, 0, 0.07),
        /* Bords de pages empilées - côté droit */
        4px 4px 0 -2px var(--bg-color, #f5f0e6),
        4px 4px 3px -1px rgba(0, 0, 0, 0.1),
        7px 6px 0 -3px var(--bg-color, #ede5d3),
        7px 6px 4px -2px rgba(0, 0, 0, 0.07);
    /* Bordure symétrique : coins arrondis des deux côtés */
    border-radius: 8px;
    border-left: none;
    /* Légère texture de papier */
    background-image:
        linear-gradient(to right,
            rgba(0, 0, 0, 0.03) 0%,
            transparent 3%,
            transparent 49%,
            rgba(0, 0, 0, 0.06) 49.5%,
            rgba(0, 0, 0, 0.06) 50.5%,
            transparent 51%,
            transparent 97%,
            rgba(0, 0, 0, 0.03) 100%);
    background-color: var(--bg-color, #fcfbf9);
}

/* Pseudo-éléments pour le livre ouvert : courbure de pages */
/* Côté droit : page qui se soulève */
.reader-notes-container.fullscreen .book-viewer::after {
    content: '';
    position: absolute;
    top: 8px;
    right: -1px;
    bottom: 8px;
    width: 20px;
    background: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.02) 40%,
            rgba(0, 0, 0, 0.06) 100%);
    border-radius: 0 8px 8px 0;
    pointer-events: none;
    z-index: 5;
}

/* Côté gauche : reliure / pliure */
.reader-notes-container.fullscreen .book-viewer::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    bottom: 4px;
    width: 12px;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.04) 30%,
            transparent 100%);
    border-radius: 8px 0 0 8px;
    pointer-events: none;
    z-index: 5;
}

/* En mode livre ouvert, la reliure gauche devient aussi une courbure de page */
.reader-notes-container.fullscreen:not(.single-page-mode) .book-viewer::before {
    width: 20px;
    background: linear-gradient(to left,
            transparent 0%,
            rgba(0, 0, 0, 0.02) 40%,
            rgba(0, 0, 0, 0.06) 100%);
    border-radius: 8px 0 0 8px;
}

/* En mode livre ouvert, le côté droit est symétrique */
.reader-notes-container.fullscreen:not(.single-page-mode) .book-viewer::after {
    border-radius: 0 8px 8px 0;
}

/* Fullscreen page unique — dernière page : pas de pages après = pas de volume à droite */
.reader-notes-container.fullscreen .book-viewer--last-page {
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.35),
        inset 3px 0 8px rgba(0, 0, 0, 0.08),
        inset -3px 0 8px rgba(0, 0, 0, 0.05),
        0 2px 6px rgba(0, 0, 0, 0.2);
}
.reader-notes-container.fullscreen .book-viewer--last-page::after {
    opacity: 0;
}

/* Fullscreen double page — premier spread : pas de volume à gauche */
.reader-notes-container.fullscreen:not(.single-page-mode) .book-viewer--first-page {
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.05),
        4px 4px 0 -2px var(--bg-color, #f5f0e6),
        4px 4px 3px -1px rgba(0, 0, 0, 0.1),
        7px 6px 0 -3px var(--bg-color, #ede5d3),
        7px 6px 4px -2px rgba(0, 0, 0, 0.07);
}
.reader-notes-container.fullscreen:not(.single-page-mode) .book-viewer--first-page::before {
    opacity: 0;
}

/* Fullscreen double page — dernier spread : pas de volume à droite */
.reader-notes-container.fullscreen:not(.single-page-mode) .book-viewer--last-page {
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.2),
        inset 0 0 30px rgba(0, 0, 0, 0.05),
        -4px 4px 0 -2px var(--bg-color, #f5f0e6),
        -4px 4px 3px -1px rgba(0, 0, 0, 0.1),
        -7px 6px 0 -3px var(--bg-color, #ede5d3),
        -7px 6px 4px -2px rgba(0, 0, 0, 0.07);
}
.reader-notes-container.fullscreen:not(.single-page-mode) .book-viewer--last-page::after {
    opacity: 0;
}

/* Quand on détecte que le viewer dépasse (via JS), activer une classe qui
   force le conteneur à permettre le scroll et réduit les transformations
   additionnelles si nécessaire. */
.reader-notes-container.fullscreen.allow-overflow {
    overflow: auto;
}

.reader-notes-container.fullscreen.allow-overflow .book-viewer {
    /* Garder le scale mais permettre le scroll interne sans couper le contenu */
    transform-origin: top center !important;
}

/* Also slightly increase the gap between pages in fullscreen for better separation */
.reader-notes-container.fullscreen .book-content {
    gap: 2rem;
}

/* Temporary visual style for a just-selected text while creating a note */
/* Temporary selection wrapper removed; selection styling uses ::selection rules */

/* Notes widget: hidden by default to avoid a flash on load when the
   authentication check hasn't completed. Shown by JS only when the is
   confirmed logged in. */
.reader-notes-container .notes-widget {
    display: none;
}

/* ===== BARRE DE PROGRESSION DE LECTURE ===== */

/* Container de la barre de progression (hors plein écran) */
.reading-progress-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 120px;
    max-width: 600px;
}

/* En plein écran, afficher la barre de progression dans la nav bar (entre thème et fullscreen) */
.reader-notes-container.fullscreen .reading-progress-container {
    display: flex;
    min-width: 200px;
    max-width: 400px;
    flex: 2;
}

.reading-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(122, 116, 107, 0.2);
    border-radius: 4px;
    overflow: visible;
    position: relative;
    cursor: pointer;
    transition: height 0.15s ease;
    /* Sans ça, hérite du touch-action: pan-x pan-y posé sur
       .reader-notes-container.fullscreen : le navigateur capte le glissé comme
       un pan natif avant que setupProgressBarInteraction() (Lecture-script.js)
       ne reçoive les touchmove — le tap fonctionne (touchstart), pas le drag. */
    touch-action: none;
}

.reading-progress-bar:hover {
    height: 10px;
}

.reading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-green) 0%, #2a7a4f 100%);
    border-radius: 4px;
    width: 0%;
    transition: width 0.15s ease;
    position: relative;
}
body.theme-noir .reading-progress-fill {
    background: linear-gradient(90deg, var(--accent-gold, #b89e14) 0%, var(--accent-gold-light, #d4af5f) 100%);
}

/* Curseur/thumb sur la barre de progression */
.reading-progress-fill::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--brand-green);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.theme-noir .reading-progress-fill::after {
    background: var(--accent-gold, #b89e14);
}

.reading-progress-bar:hover .reading-progress-fill::after {
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.reading-progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #7a746b;
    min-width: 35px;
    width: 35px;
    text-align: right;
    flex-shrink: 0;
}

/* Barre de progression plein écran (en haut) */
.fullscreen-progress-container {
    display: none;
}

.reader-notes-container.fullscreen .fullscreen-progress-container {
    display: none;
}

/* fullscreen-progress-container caché, progression dans la nav bar */

.fullscreen-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    min-width: 150px;
    cursor: pointer;
    transition: height 0.15s ease;
    /* Voir .reading-progress-bar plus haut : même raison (touch-action hérité
       du conteneur plein écran empêchait le drag tactile). */
    touch-action: none;
}

.fullscreen-progress-bar:hover {
    height: 10px;
}

.fullscreen-progress-fill {
    height: 100%;
    background: white;
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

.fullscreen-progress-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    min-width: 40px;
    text-align: right;
}

.book-loading {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    /* décale sous la barre de progression */
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
    background: none !important;
    z-index: 100;
    box-shadow: none;
    border: none;
    margin: 0;
    pointer-events: none;
    min-height: 200px;
}

/* ===========================
   📖 GLOSSAIRE - Styles
   =========================== */

/* .translit-underline (règle de base : text-decoration) vit dans
   common-styles.css — chargé sur toutes les pages (Lecture, PDF, Glossaire),
   contrairement à ce fichier qui n'est actif que sur la page Lecture. */

/* Dans un terme glossaire : Chrome mobile ne propage pas color à travers un span
   inline position:relative — bypasser l'héritage et pointer la valeur directement. */
.glossary-term .translit-underline {
    color: var(--accent-dark);
}
#book-content[data-reading-theme="noir"] .glossary-term .translit-underline,
body[data-reader-theme="noir"] #book-content .glossary-term .translit-underline {
    color: #6ecaa0;
}
#book-content[data-reading-theme="beige"] .glossary-term .translit-underline,
body[data-reader-theme="beige"] #book-content .glossary-term .translit-underline {
    color: #3d5a2e;
}

/* Termes du glossaire dans le texte */
.glossary-term {
    border-bottom: 2px solid rgba(26, 82, 56, 0.6);
    cursor: default;
    transition: all 0.2s ease;
    position: relative;
    color: var(--accent-dark);
    font-weight: 500;
}

.glossary-term:hover {
    color: #0e3622;
    border-bottom-color: #0e3622;
}

/* .translit-underline a sa propre couleur explicite (ligne ~3114, contournement
   Chrome mobile) qui ne suit donc pas le survol du parent sans cette règle. */
.glossary-term:hover .translit-underline {
    color: #0e3622;
}

/* Couleur de fond partagée entre .glossary-popup et .arabic-ref-tooltip —
   une seule source de vérité par thème de lecture, posée sur body (héritée
   par les deux popups quel que soit leur point d'attache dans le DOM), pour
   qu'elles restent visuellement cohérentes. Avant, chaque popup définissait
   sa propre variable (--glossary-popup-bg / --ref-tooltip-bg) avec la même
   valeur codée en dur à deux endroits — un risque de divergence silencieuse
   si l'une des deux était modifiée sans l'autre. */
body:not([data-reader-theme]):not(.theme-beige):not(.theme-noir),
body[data-reader-theme="blanc"],
body.theme-blanc:not([data-reader-theme]) {
    --reader-popup-bg: #fff;
}
/* Desktop (thème lecteur indépendant du thème du site, cf. commentaire beige
   plus bas) : couleur fixe codée en dur, proche de --note-popup-bg (#2a3035,
   cf. common-styles-themes.css) plutôt qu'un gris neutre arbitraire (#2a2a2a)
   qui tranchait avec le reste du site en thème sombre. */
body[data-reader-theme="noir"] {
    --reader-popup-bg: #2a3035;
}
/* Mobile (pas de thème lecteur séparé, la lecture suit toujours le thème du
   site) : on peut donc suivre var(--note-popup-bg) en direct sans risque. */
body.theme-noir:not([data-reader-theme]) {
    --reader-popup-bg: var(--note-popup-bg, #2a3035);
}
body[data-reader-theme="beige"] {
    --reader-popup-bg: #E2CC9F;
}
body.theme-beige:not([data-reader-theme]) {
    --reader-popup-bg: var(--panel, #E2CC9F);
}

/* Popup du glossaire */
.glossary-popup {
    position: fixed;
    z-index: 100000;
    min-width: 250px;
    max-width: 400px;
    background: var(--reader-popup-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    border: 1px solid var(--glossary-popup-border, rgba(60, 140, 108, 0.2));
}

.glossary-popup.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.glossary-popup.below {
    transform: translateY(-8px);
}

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

/* Flèche de la popup (optionnel) */
.glossary-popup::before {
    content: '';
    position: absolute;
    bottom: -8px;
    /* --popup-arrow-left (posée en JS par positionPopup, glossaire.js) :
       distance depuis le bord gauche de la popup jusqu'au centre du terme
       cliqué. 50% par défaut (centrée sur la popup) tant que rien ne la
       pose — cas normal quand la popup peut se centrer librement sur le
       terme. Quand le bornage d'écran décale la popup (bord d'écran,
       fenêtre étroite), la popup ne reste plus centrée sur le terme : sans
       cette variable, la flèche resterait fixée au centre de la popup et
       pointerait à côté du terme réel. */
    left: var(--popup-arrow-left, 50%);
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--reader-popup-bg, #fff);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.glossary-popup.below::before {
    bottom: auto;
    top: -8px;
    border-top: none;
    border-bottom: 8px solid var(--reader-popup-bg, #fff);
}

/* Contenu de la popup */
.glossary-popup-content {
    padding: 16px 20px;
}

.glossary-popup-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    /* Teinté avec l'accent vert du glossaire (comme .arabic-ref-tooltip-sourate
       est teinté avec le doré des refs), au lieu d'un gris neutre générique. */
    border-bottom: 1px solid var(--glossary-popup-header-border, rgba(26, 82, 56, 0.22));
}

.glossary-popup-terme {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--glossary-popup-terme, #1A5238);
}

/* Cf. .glossary-term .translit-underline plus haut : même contournement de la
   non-propagation de color par Chrome mobile sur un span inline. */
.glossary-popup-terme .translit-underline {
    color: var(--glossary-popup-terme, #1A5238);
}

.glossary-popup-arabe {
    font-size: 1.2rem;
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    color: var(--glossary-popup-arabe, #5C4A32);
    direction: rtl;
}

.glossary-popup-definition {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--glossary-popup-def, #2C3539);
}

/* Thème de lecture sombre (reading zone = noir, indépendant du thème de la page) */
#book-content[data-reading-theme="noir"] .glossary-term,
body[data-reader-theme="noir"] #book-content .glossary-term {
    color: #6ecaa0;
    border-bottom-color: rgba(90, 184, 138, 0.4);
}

#book-content[data-reading-theme="noir"] .glossary-term:hover,
body[data-reader-theme="noir"] #book-content .glossary-term:hover {
    color: #8bddba;
    border-bottom-color: #8bddba;
}

#book-content[data-reading-theme="noir"] .glossary-term:hover .translit-underline,
body[data-reader-theme="noir"] #book-content .glossary-term:hover .translit-underline {
    color: #8bddba;
}

/* Note highlights en thème sombre mobile — pas besoin de règle spéciale, box-shadow gère la couleur via JS */

/* Thème noir : data-reader-theme (desktop) ET body.theme-noir (mobile, où
   applyTheme() ne pose jamais data-reader-theme — cf. lecture-ui.js). Les deux
   sélecteurs ne font que définir les mêmes variables lues par .glossary-popup
   ci-dessus, donc peu importe lequel matche, la popup reste correctement
   théméee. Le garde-fou :not([data-reader-theme]) évite un conflit de
   spécificité si le thème du site et le thème lecteur diffèrent sur desktop
   (le thème lecteur doit rester prioritaire). */
.glossary-popup.reading-theme-noir,
body[data-reader-theme="noir"] .glossary-popup,
body.theme-noir:not([data-reader-theme]) .glossary-popup {
    /* --reader-popup-bg déjà posé sur body (voir plus haut) */
    --glossary-popup-border: rgba(90, 184, 138, 0.3);
    --glossary-popup-header-border: rgba(90, 184, 138, 0.2);
    --glossary-popup-terme: #5ab88a;
    --glossary-popup-arabe: #aaa;
    --glossary-popup-def: #ddd;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Popup glossaire collée en bas sur mobile (portrait ET paysage téléphone) */
@media (max-width: 768px), (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    .glossary-popup.mobile {
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0;
        transform: translateY(12px);
    }
    .glossary-popup.mobile.visible {
        transform: translateY(0);
    }
    .glossary-popup.mobile::before {
        display: none;
    }
}

/* Thème de lecture sépia/beige */
#book-content[data-reading-theme="beige"] .glossary-term,
body[data-reader-theme="beige"] #book-content .glossary-term {
    color: #3d5a2e;
    border-bottom-color: rgba(61, 90, 46, 0.6);
}

#book-content[data-reading-theme="beige"] .glossary-term:hover,
body[data-reader-theme="beige"] #book-content .glossary-term:hover {
    color: #2a4020;
    border-bottom-color: #2a4020;
}

#book-content[data-reading-theme="beige"] .glossary-term:hover .translit-underline,
body[data-reader-theme="beige"] #book-content .glossary-term:hover .translit-underline {
    color: #2a4020;
}

/* Thème beige : le thème lecteur (desktop) est indépendant du thème du
   site -- il garde donc une couleur fixe (#E2CC9F, la même valeur que
   --panel aujourd'hui, mais codée en dur pour ne jamais suivre le thème du
   SITE si celui-ci diffère du thème de lecture choisi). Le repli mobile
   (pas de thème lecteur séparé) peut en revanche utiliser var(--panel)
   sans risque : le sélecteur exige déjà body.theme-beige. */
.glossary-popup.reading-theme-beige,
body[data-reader-theme="beige"] .glossary-popup {
    /* --reader-popup-bg et --glossary-popup-terme PAS redéfinis ici
       volontairement : le vert du mot reste identique à tous les thèmes
       clairs (blanc/beige) — seul le noir (fond sombre) l'éclaircit, par
       contraste réel. En revanche la bordure ET le trait horizontal
       (--glossary-popup-header-border) doivent rester assortis entre eux :
       tous deux teintés marron ici, comme ils sont tous deux teintés vert
       clair en thème noir (cf. bloc noir ci-dessus). */
    --glossary-popup-border: rgba(139, 115, 85, 0.3);
    --glossary-popup-header-border: rgba(139, 115, 85, 0.22);
    --glossary-popup-arabe: #8b7355;
    --glossary-popup-def: #5c4b37;
}
body.theme-beige:not([data-reader-theme]) .glossary-popup {
    --glossary-popup-border: rgba(139, 115, 85, 0.3);
    --glossary-popup-header-border: rgba(139, 115, 85, 0.22);
    --glossary-popup-arabe: #8b7355;
    --glossary-popup-def: #5c4b37;
}

/* Footnote Links & Popups */
.footnote-link { color: var(--accent, #3c8c6c); cursor: pointer; font-weight: bold; padding: 0 3px; border-radius: 4px; pointer-events: auto; text-decoration: none; }

/* Desktop : la couleur suit le thème du lecteur (data-reader-theme), pas le thème de la page */
body[data-reader-theme="blanc"] .footnote-link,
body[data-reader-theme="blanc"] .footnote-link * { color: #1A5238; }
body[data-reader-theme="beige"] .footnote-link,
body[data-reader-theme="beige"] .footnote-link * { color: #3d5a2e; }
body[data-reader-theme="noir"] .footnote-link,
body[data-reader-theme="noir"] .footnote-link * { color: #6ecaa0; }

.footnote-popup {
    position: fixed;
    z-index: 100000;
    min-width: 220px;
    max-width: 380px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
    padding: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    border: 1px solid rgba(60,140,108,0.2);
}
.footnote-popup.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.footnote-popup.below {
    transform: translateY(-8px);
}
.footnote-popup.below.visible {
    transform: translateY(0);
}
.footnote-popup::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}
.footnote-popup.below::before {
    bottom: auto;
    top: -8px;
    border-top: none;
    border-bottom: 8px solid #fff;
}
.footnote-popup-content {
    padding: 14px 18px;
}
.footnote-popup-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.footnote-popup-num {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1A5238;
}
.footnote-popup-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #2C3539;
    font-family: var(--font-serif);
}
/* Thème lecteur sombre — tooltip desktop */
body[data-reader-theme="noir"] .footnote-popup {
    background: #2a2a2a;
    border-color: rgba(90,171,138,0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
body[data-reader-theme="noir"] .footnote-popup::before { border-top-color: #2a2a2a; }
body[data-reader-theme="noir"] .footnote-popup.below::before { border-bottom-color: #2a2a2a; border-top-color: transparent; }
body[data-reader-theme="noir"] .footnote-popup-header { border-bottom-color: #444; }
body[data-reader-theme="noir"] .footnote-popup-num { color: #5ab88a; }
body[data-reader-theme="noir"] .footnote-popup-text { color: #ddd; }

/* Popup mobile (bas d'écran, clic) */
.footnote-popup-mobile {
    position: fixed;
    z-index: 100000;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    background: var(--panel-light, #FAF9F6);
    color: var(--text-primary);
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color, #e0ddd5);
    border-bottom: none;
    font-size: 0.95rem;
    font-family: var(--font-serif);
}
.footnote-popup-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color, #e0ddd5);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.footnote-popup-mobile-close {
    flex-shrink: 0;
}
body[data-reader-theme="noir"] .footnote-popup-mobile {
    background: #2a2a2a;
    border-color: #444;
    color: #ddd;
}
body[data-reader-theme="noir"] .footnote-popup-mobile-header { border-bottom-color: #444; }


/* ====================================================================== */
/* === MOBILE : tous les popups/menus suivent le THÈME SITE (theme-*)  === */
/* Sur mobile il n'existe qu'un seul thème (le thème global du site),     */
/* pas de "thème lecteur" séparé. Les règles ci-dessous ne s'appliquent   */
/* QUE dans le viewport mobile, et utilisent body.theme-noir / .theme-beige. */
/* IMPORTANT : on utilise !important sur les popups parce que le JS leur  */
/* applique des styles inline (popup.style.cssText = ...) qui sinon       */
/* gagneraient par spécificité.                                            */
/* pointer:coarse obligatoire : sans ça, un desktop redimensionné sous     */
/* 768px se fait forcer ce theming "mobile only" (ex: texte blanc forcé)   */
/* par-dessus le thème lecteur (blanc/beige) toujours actif sur desktop —  */
/* texte illisible. DevTools moderne définit correctement pointer:coarse  */
/* en émulation tactile, donc pas de perte pour les tests responsive.     */
/* ====================================================================== */

@media (max-width: 768px) and (pointer: coarse) {

    /* ---- TEXTE DU LIVRE EN THÈME SOMBRE (site) : blanc, pas gris ---- */
    body.theme-noir #book-content,
    body.theme-noir #book-content *,
    body.theme-noir .page-container,
    body.theme-noir .page-container *,
    body.theme-noir .book-content,
    body.theme-noir .book-content * {
        color: #ffffff;
    }
    body.theme-noir #book-content .glossary-term {
        color: #6ecaa0;
        border-bottom-color: rgba(90, 184, 138, 0.4);
    }
    body.theme-noir #book-content .glossary-term .translit-underline,
    body.theme-noir .page-container .glossary-term .translit-underline {
        color: #6ecaa0;
    }
    body.theme-noir #book-content .footnote-link,
    body.theme-noir #book-content .footnote-link * {
        color: #6ecaa0;
    }
    body.theme-noir .book-end-ornament { filter: invert(1); opacity: 0.45; }
    body.theme-noir .book-end-text { color: rgba(255,255,255,0.45); }
    body.theme-noir .book-end-quiz-btn { background: #5ab88a; }
    body.theme-noir .page-basmalah { filter: invert(1); }

    /* ---- NOTE POPUP (action sur sélection) ---- */
    /* !important nécessaire : styles inline appliqués par JS */
    body.theme-noir #note-popup,
    body.theme-beige #note-popup {
        background: var(--note-popup-bg) !important;
        border-color: var(--note-popup-border) !important;
        box-shadow: var(--note-popup-shadow) !important;
    }
    body.theme-noir #note-popup .selection-action-btn { color: var(--note-edit-btn) !important; }
    body.theme-beige #note-popup .selection-action-btn { color: var(--note-edit-btn) !important; }

    /* ---- POPUP NOTE (création / édition / détail) ---- */
    /* !important nécessaire : Lecture-script-Notes.js applique popup.style.cssText
       avec background, color etc. en inline → on doit forcer la surcharge.       */
    body.theme-noir .note-popup,
    body.theme-noir #note-detail-popup,
    body.theme-noir #create-note-popup,
    body.theme-noir #edit-note-popup {
        background: #2a3035 !important;
        background-color: #2a3035 !important;
        color: #ffffff !important;
        border: 1px solid rgba(90, 184, 138, 0.45) !important;
    }
    body.theme-noir .note-popup *:not(.note-detail-edit-btn):not(.note-detail-delete-btn):not(.note-detail-close-btn):not(button):not(input):not(textarea),
    body.theme-noir #note-detail-popup *:not(.note-detail-edit-btn):not(.note-detail-delete-btn):not(.note-detail-close-btn):not(button):not(input):not(textarea),
    body.theme-noir #create-note-popup *:not(button):not(input):not(textarea),
    body.theme-noir #edit-note-popup *:not(button):not(input):not(textarea) {
        color: #ffffff !important;
    }
    body.theme-noir .note-popup input,
    body.theme-noir .note-popup textarea,
    body.theme-noir #note-detail-popup input,
    body.theme-noir #note-detail-popup textarea,
    body.theme-noir #create-note-popup input,
    body.theme-noir #create-note-popup textarea,
    body.theme-noir #edit-note-popup input,
    body.theme-noir #edit-note-popup textarea {
        background-color: #1a2024 !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
    }
    body.theme-beige .note-popup,
    body.theme-beige #note-detail-popup,
    body.theme-beige #create-note-popup,
    body.theme-beige #edit-note-popup {
        background: #f5f0e6 !important;
        background-color: #f5f0e6 !important;
        color: #3d2b1a !important;
        border: 1px solid rgba(139, 115, 85, 0.45) !important;
    }

    /* ---- TOOLTIP RÉFÉRENCE ARABE ---- */
    /* Fond/bordure/flèche/texte principal : gérés par les variables
       --ref-tooltip-* (cf. règles body.theme-*:not([data-reader-theme])
       plus haut dans ce fichier) — plus besoin de les dupliquer ici.
       Seuls les accents sourate/hadith restent codés en dur : ils n'ont
       pas d'équivalent variable, ce bloc mobile reste leur unique source
       de theming (le bloc data-reader-theme ne s'applique pas ici).
       Beige ne redéfinit pas -sourate-ar/-hadith-nom (le doré/marron
       principal) : il reste identique au thème blanc, seul le noir
       (fond sombre) l'éclaircit par contraste réel. */
    body.theme-noir .arabic-ref-tooltip-sourate-ar { color: #d4af5f !important; }
    body.theme-noir .arabic-ref-tooltip-sourate-sub { color: #c9a44e !important; }
    body.theme-noir .arabic-ref-tooltip-hadith-nom { color: #d4af5f !important; }
    body.theme-noir .arabic-ref-tooltip-hadith-liste { color: #c9a44e !important; }
    body.theme-beige .arabic-ref-tooltip-sourate-sub { color: #9a7040 !important; }
    body.theme-beige .arabic-ref-tooltip-hadith-liste { color: #9a7040 !important; }

    /* ---- GLOSSARY POPUP ---- */
    /* Fond/bordure/flèche/texte : gérés par les variables --glossary-popup-*
       (cf. règles body.theme-*:not([data-reader-theme]) dans la section
       glossaire plus haut) — plus besoin de les dupliquer ici. */

    /* ---- FOOTNOTE POPUP MOBILE ---- */
    body.theme-noir .footnote-popup-mobile {
        background: #2a2a2a;
        border-color: #444;
        color: #ffffff;
    }
    body.theme-noir .footnote-popup-mobile * { color: #ffffff; }

    /* ---- BARRES MOBILES (top / bottom / bottom-sheet) ---- */
    body.theme-noir .mobile-top-bar,
    body.theme-noir .mobile-bottom-bar,
    body.theme-noir .mobile-bottom-sheet {
        background-color: #1a2628;
        border-color: rgba(255,255,255,0.1);
        color: #ffffff;
    }
    body.theme-noir .mobile-top-bar *,
    body.theme-noir .mobile-bottom-bar *,
    body.theme-noir .mobile-bottom-sheet * { color: #ffffff; }
    body.theme-noir .mobile-bar-btn:active { background: rgba(255,255,255,0.1); }
    body.theme-noir .mobile-settings-btn,
    body.theme-noir .mobile-chrono-controls button {
        background: #2a3a3d;
        border-color: rgba(255,255,255,0.15);
        color: #ffffff;
    }
    body.theme-beige .mobile-top-bar,
    body.theme-beige .mobile-bottom-bar,
    body.theme-beige .mobile-bottom-sheet {
        background-color: #f3e5ca;
        color: #2c3539;
        border-color: rgba(139, 115, 85, 0.2);
    }
    body.theme-beige .mobile-top-bar *,
    body.theme-beige .mobile-bottom-bar *,
    body.theme-beige .mobile-bottom-sheet * { color: #2c3539; }

    /* ---- MODAL LIVRE TERMINÉ ---- */
    body.theme-noir .book-complete-modal {
        background: #2a3035;
        color: #ffffff;
        border-color: rgba(255,255,255,0.15);
    }
    body.theme-noir .book-complete-title,
    body.theme-noir .book-complete-text { color: #ffffff; }
    body.theme-noir .book-complete-btn.btn-later {
        background: #1a2024;
        color: #ffffff;
        border-color: rgba(255,255,255,0.15);
    }

    /* ---- MODAL GLOSSAIRE ---- */
    body.theme-noir .glossaire-modal {
        background: #2a3035;
        color: #ffffff;
    }
    body.theme-noir .glossaire-modal-header { border-bottom-color: rgba(255,255,255,0.1); }

    /* ---- SIDEBAR (notes, TOC) en bottom-sheet ---- */
    body.theme-noir .sidebar-column {
        background: #1a2628;
        color: #ffffff;
        border-color: rgba(255,255,255,0.1);
    }
    body.theme-noir .sidebar-column *:not(.glossary-term):not(.note-item-color):not(.color-option) {
        color: #ffffff;
    }
    body.theme-beige .sidebar-column {
        background: #f3e5ca;
        color: #2c3539;
        border-color: rgba(139, 115, 85, 0.25);
    }

}

/* ============================================================== */
/* === NOTE-ITEM — THÈME SITE (!important pour surcharger JS)   === */
/* Les note-items ont un background inline défini par JS.         */
/* !important est nécessaire pour forcer le bon fond de thème.    */
/* ============================================================== */
body.theme-beige .note-item { background: var(--panel-light, #fff) !important;; box-shadow: 0 1px 3px rgba(80,60,30,0.1) !important; }
body.theme-beige .note-item:hover { background: #ece4d0 !important; }
body.theme-noir .note-item { background: #333a40 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; }
body.theme-noir .note-item:hover { background: #3a4248 !important; }

/* ============================================================== */
/* === MODALES NOTE / COULEUR — ADAPTATION AU THÈME SITE       === */
/* Ces modales (note-modal, edit-note-modal, *-color-modal) sont  */
/* créées en JS avec `background: white` et autres styles inline.  */
/* On surcharge avec les variables générales du THÈME SITE         */
/* (--text-*, --panel*, --border-color, --muted, déjà définies par */
/* body.theme-* dans common-styles-themes.css). Volontairement PAS */
/* --note-popup-*/--note-text-* : ces variables sont redéfinies par */
/* body[data-reader-theme] plus haut dans ce fichier et suivraient  */
/* donc le thème LECTEUR plutôt que le thème du site sur desktop.   */
/* Un seul jeu de règles piloté par variables s'applique ainsi      */
/* automatiquement aux 4 thèmes (blanc/beige/noir/maquette) sans    */
/* dupliquer ni risquer d'en oublier un comme précédemment.         */
/* ============================================================== */
[data-modal-type="note-modal"] > div,
[data-modal-type="edit-note-modal"] > div,
[data-modal-type="change-color-modal"] > div,
[data-modal-type="create-color-modal"] > div,
[data-modal-type="edit-color-code-modal"] > div {
    background: var(--panel-light) !important;
    background-color: var(--panel-light) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
[data-modal-type="note-modal"] h3,
[data-modal-type="note-modal"] label,
[data-modal-type="note-modal"] p,
[data-modal-type="note-modal"] span:not([style*="background"]),
[data-modal-type="note-modal"] small,
[data-modal-type="edit-note-modal"] h3,
[data-modal-type="edit-note-modal"] label,
[data-modal-type="edit-note-modal"] p,
[data-modal-type="edit-note-modal"] span:not([style*="background"]),
[data-modal-type="edit-note-modal"] small,
[data-modal-type="change-color-modal"] h3,
[data-modal-type="change-color-modal"] label,
[data-modal-type="change-color-modal"] p,
[data-modal-type="create-color-modal"] h3,
[data-modal-type="create-color-modal"] label,
[data-modal-type="edit-color-code-modal"] h3,
[data-modal-type="edit-color-code-modal"] label {
    color: var(--text-primary) !important;
}
/* Citation/blockquote dans la note modal */
[data-modal-type="note-modal"] > div > div[style*="background"],
[data-modal-type="edit-note-modal"] > div > div[style*="background"] {
    background: var(--panel) !important;
    background-color: var(--panel) !important;
    color: var(--text-secondary) !important;
}
[data-modal-type="note-modal"] input[type="text"],
[data-modal-type="note-modal"] input[type="number"],
[data-modal-type="note-modal"] textarea,
[data-modal-type="edit-note-modal"] input[type="text"],
[data-modal-type="edit-note-modal"] input[type="number"],
[data-modal-type="edit-note-modal"] textarea,
[data-modal-type="change-color-modal"] input[type="text"],
[data-modal-type="create-color-modal"] input[type="text"],
[data-modal-type="edit-color-code-modal"] input[type="text"] {
    background: var(--panel) !important;
    background-color: var(--panel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
[data-modal-type="note-modal"] input::placeholder,
[data-modal-type="note-modal"] textarea::placeholder,
[data-modal-type="edit-note-modal"] input::placeholder,
[data-modal-type="edit-note-modal"] textarea::placeholder {
    color: var(--muted) !important;
}
[data-modal-type] .modal-btn:not(.modal-btn-primary):not(.modal-btn-danger) {
    background: var(--panel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Bouton "Modifier" dans les modales note/couleur (id #change-edit-mode-btn,
   #create-note-edit-mode-btn) — style inline `background: white; color: inherit`
   le rend invisible hors thème blanc. On cible UNIQUEMENT l'état inactif via
   l'attribut style (qui contient "background: white" hors edit mode) pour
   préserver l'état actif (background:brand-green), et on laisse le thème blanc
   tel quel (son fond inline `white` lui correspond déjà).                     */
body:not(.theme-blanc) #change-edit-mode-btn[style*="background: white"],
body:not(.theme-blanc) #create-note-edit-mode-btn[style*="background: white"] {
    background: var(--panel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}
body:not(.theme-blanc) #change-edit-mode-btn[style*="background: white"] svg path,
body:not(.theme-blanc) #create-note-edit-mode-btn[style*="background: white"] svg path {
    fill: var(--text-primary) !important;
}
[data-modal-type="note-modal"] [id$="tag-suggestions"],
[data-modal-type="edit-note-modal"] [id$="tag-suggestions"] {
    background: var(--panel) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ===== Mode édition couleurs ===== */
.color-edit-active .color-option {
    border-style: dashed !important;
    border-color: var(--muted) !important;
    opacity: 0.85;
}


/* ===== MODAL LIVRE TERMINÉ ===== */
.book-complete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: bcFadeIn 0.25s ease;
}

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

.book-complete-modal {
    position: relative;
    background: var(--panel, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.1));
    border-radius: 16px;
    padding: 36px 32px 28px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    animation: bcSlideUp 0.28s ease;
}

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

.book-complete-close {
    position: absolute;
    top: 12px;
    right: 14px;
}

.book-complete-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary, #222);
    margin: 0 0 8px;
    font-family: 'Lora', serif;
}

.book-complete-text {
    font-size: 0.95rem;
    color: var(--text-secondary, #666);
    margin: 0 0 24px;
    line-height: 1.5;
}

.book-complete-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.book-complete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
}
.book-complete-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.book-complete-btn.btn-quiz {
    background: var(--accent, #c5983b);
    color: #fff;
}

.book-complete-btn.btn-later {
    background: var(--panel-light, #f5e7c6);
    color: var(--text-primary, #333);
    border: 1px solid var(--border, rgba(0,0,0,0.1));
}

/* ================================================================
 * RÉFÉRENCES ARABES (versets et hadiths)
 * Indicateurs cliquables [X:X] / [X:Ø] et popup associé.
 * ================================================================ */
.arabic-ref {
    font-weight: 600;
}

.arabic-ref--available {
    color: var(--brand-gold);
    cursor: default;
    border-bottom: 2px solid rgba(184, 134, 11, 0.5);
    padding: 0 1px;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 600;
}

.arabic-ref--available:hover {
    color: #8b6914;
    border-bottom-color: #8b6914;
}

.arabic-ref--available:focus-visible {
    outline: 2px solid rgba(184, 134, 11, 0.55);
    outline-offset: 1px;
}

.arabic-ref--missing {
    /* Reste rendu comme texte normal, non cliquable */
    color: inherit;
    cursor: default;
    font-weight: inherit;
}

#book-content[data-reading-theme="noir"] .arabic-ref--available,
body[data-reader-theme="noir"] #book-content .arabic-ref--available {
    color: #d4af5f;
    border-bottom-color: rgba(212, 175, 95, 0.4);
}

#book-content[data-reading-theme="noir"] .arabic-ref--available:hover,
body[data-reader-theme="noir"] #book-content .arabic-ref--available:hover {
    color: #f0e68c;
    border-bottom-color: #f0e68c;
}

#book-content[data-reading-theme="beige"] .arabic-ref--available,
body[data-reader-theme="beige"] #book-content .arabic-ref--available {
    color: #a0690f;
    border-bottom-color: rgba(160, 105, 15, 0.5);
}

#book-content[data-reading-theme="beige"] .arabic-ref--available:hover,
body[data-reader-theme="beige"] #book-content .arabic-ref--available:hover {
    color: #8b5a0b;
    border-bottom-color: #8b5a0b;
}

/* Tooltip survol texte arabe */
.arabic-ref-tooltip {
    position: fixed;
    z-index: 100000;
    background: var(--reader-popup-bg, #fff);
    border: 1px solid var(--ref-tooltip-border, rgba(184, 134, 11, 0.25));
    border-radius: 12px;
    box-shadow: var(--ref-tooltip-shadow, 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08));
    padding: 12px 18px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.arabic-ref-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.arabic-ref-tooltip.below {
    transform: translateY(-8px);
}

.arabic-ref-tooltip.below.visible {
    transform: translateY(0);
}

/* Flèche */
.arabic-ref-tooltip::before {
    content: '';
    position: absolute;
    bottom: -8px;
    /* Cf. .glossary-popup::before — même mécanisme (posé par
       positionTooltip, arabic-references-reader.js). */
    left: var(--popup-arrow-left, 50%);
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--reader-popup-bg, #fff);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
}

.arabic-ref-tooltip.below::before {
    bottom: auto;
    top: -8px;
    border-top: none;
    border-bottom: 8px solid var(--reader-popup-bg, #fff);
}

.arabic-ref-tooltip-text {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 1.35rem;
    line-height: 2;
    direction: rtl;
    text-align: right;
    color: var(--ref-tooltip-text, #2C3539);
    max-width: 480px;
}

/* En-tête sourate : affiché au-dessus du texte arabe pour les versets coraniques */
.arabic-ref-tooltip-sourate {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(184, 134, 11, 0.22);
}

/* Verset : une seule ligne, phonétique à gauche, nom arabe à droite */
.arabic-ref-tooltip-sourate--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Ligne 1 : nom arabe précédé de سورة (tout RTL) */
.arabic-ref-tooltip-sourate-ar {
    font-family: 'Amiri', 'Noto Naskh Arabic', serif;
    font-size: 1rem;
    direction: rtl;
    text-align: right;
    color: var(--brand-gold);
    font-weight: 600;
    margin-bottom: 3px;
}

/* Ligne 2 : « Sourate translittération (traduction) » */
.arabic-ref-tooltip-sourate-sub {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-gold);
    letter-spacing: 0.01em;
    text-align: right;
}

/* En-tete recueil (hadiths) : meme bloc .arabic-ref-tooltip-sourate, lignes LTR */
/* Taille alignée sur .arabic-ref-tooltip-sourate-ar (même rôle : nom
   principal identifiant la référence) — avant, 1.1rem contre 1.35rem
   donnait moins de prominence au nom du recueil qu'au nom de la sourate.
   font-family reste "inherit" (pas 'Amiri') : ce nom est en écriture
   latine (ex. "Sahih Muslim"), 'Amiri' est optimisée pour l'arabe. */
.arabic-ref-tooltip-hadith-nom {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-gold);
    text-align: left;
    margin-bottom: 3px;
}

/* Liste des recueils (collectifs : Les Sept, Les Six, ...) */
.arabic-ref-tooltip-hadith-liste {
    font-family: inherit;
    font-size: 0.8rem;
    color: #a07820;
    letter-spacing: 0.01em;
    text-align: left;
    opacity: 0.9;
}

/* Thème noir */
body[data-reader-theme="noir"] .arabic-ref-tooltip-sourate {
    border-bottom-color: rgba(212, 175, 95, 0.2);
}
body[data-reader-theme="noir"] .arabic-ref-tooltip-sourate-ar {
    color: #d4af5f;
}
body[data-reader-theme="noir"] .arabic-ref-tooltip-sourate-sub {
    color: #c9a44e;
}
body[data-reader-theme="noir"] .arabic-ref-tooltip-hadith-nom {
    color: #d4af5f;
}
body[data-reader-theme="noir"] .arabic-ref-tooltip-hadith-liste {
    color: #c9a44e;
}

/* Thème beige — le doré/marron (accent principal sourate/recueil) reste
   identique à tous les thèmes clairs (blanc/beige), volontairement pas
   redéfini ici : seul le thème noir (fond sombre) l'éclaircit, par contraste
   réel avec un fond sombre. Seules les infos secondaires (sub/liste) restent
   ajustées pour ce thème. */
body[data-reader-theme="beige"] .arabic-ref-tooltip-sourate {
    border-bottom-color: rgba(139, 115, 85, 0.22);
}
body[data-reader-theme="beige"] .arabic-ref-tooltip-sourate-sub {
    color: #9a7040;
}
body[data-reader-theme="beige"] .arabic-ref-tooltip-hadith-liste {
    color: #9a7040;
}

/* Mobile : centrer */
@media (max-width: 768px) {
    .arabic-ref-tooltip-sourate-ar {
        text-align: center;
    }
    .arabic-ref-tooltip-sourate-sub {
        text-align: center;
    }
    .arabic-ref-tooltip-hadith-nom {
        text-align: center;
    }
    .arabic-ref-tooltip-hadith-liste {
        text-align: center;
    }
    /* Le verset (--row) reste justify-content:space-between hérité du
       desktop (secondaire à gauche, nom arabe à droite) : sur la largeur
       pleine du bottom-sheet mobile, ça écarte les deux aux extrémités au
       lieu de les centrer comme groupe — on le recentre ici pour rester
       cohérent avec le reste de l'en-tête. */
    .arabic-ref-tooltip-sourate--row {
        justify-content: center;
        gap: 6px 10px;
    }

    /* En-tête du glossaire (mot + terme arabe) centré, pour la même raison
       et la même cohérence visuelle que l'en-tête sourate/recueil ci-dessus. */
    .glossary-popup-header {
        justify-content: center;
        text-align: center;
    }
}

/* Tooltip références arabes : thème lecteur (data-reader-theme, desktop) en
   priorité, repli sur le thème du site (body.theme-*, actif partout y
   compris mobile — cf. applyTheme() dans lecture-ui.js qui ne pose jamais
   data-reader-theme sur mobile) via les mêmes variables que .arabic-ref-tooltip
   ci-dessus. */
/* Blanc (défaut ou explicite) — --reader-popup-bg déjà posé sur body */
body:not([data-reader-theme]):not(.theme-beige):not(.theme-noir) .arabic-ref-tooltip,
body[data-reader-theme="blanc"] .arabic-ref-tooltip,
body.theme-blanc:not([data-reader-theme]) .arabic-ref-tooltip {
    --ref-tooltip-border: rgba(184, 134, 11, 0.25);
    --ref-tooltip-text: #2C3539;
}

/* Thème lecteur noir — --reader-popup-bg déjà posé sur body */
body[data-reader-theme="noir"] .arabic-ref-tooltip,
#book-content[data-reading-theme="noir"] ~ .arabic-ref-tooltip,
body.theme-noir:not([data-reader-theme]) .arabic-ref-tooltip {
    --ref-tooltip-border: rgba(212, 175, 95, 0.3);
    --ref-tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --ref-tooltip-text: #f0f0f0;
}

/* Thème beige — --reader-popup-bg déjà posé sur body (voir plus haut) */
body[data-reader-theme="beige"] .arabic-ref-tooltip {
    --ref-tooltip-border: rgba(139, 115, 85, 0.3);
    --ref-tooltip-text: #3d2b1a;
}
body.theme-beige:not([data-reader-theme]) .arabic-ref-tooltip {
    --ref-tooltip-border: rgba(139, 115, 85, 0.3);
    --ref-tooltip-text: #3d2b1a;
}

/* Mobile : collé en bas d'écran (portrait ET paysage téléphone — cf. device-helpers.js) */
@media (max-width: 768px), (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    .arabic-ref-tooltip.mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
        padding: 16px 20px 24px;
        text-align: center;
    }

    .arabic-ref-tooltip.mobile::before {
        display: none;
    }

    .arabic-ref-tooltip-text {
        font-size: 1.3rem;
        text-align: center;
        max-width: none;
    }
}

/* ===== SOMMAIRE (TOC) — styles extraits de lecture-highlights.js ===== */
.toc-item {
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-primary, #333);
    border-left: 3px solid var(--border-color, #ddd);
    background: var(--panel-light, #fff) !important;
    display: flex;
    align-items: center;
    gap: 4px;
}
.toc-item--h1 {
    font-size: 13px;
    font-weight: 600;
    border-left-color: var(--brand-green);
}
.toc-item:hover { background: var(--hover-bg, #f0f0f0); }
.toc-item-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    gap: 8px;
    min-width: 0;
}
.toc-item-title {
    flex: 1;
    word-wrap: break-word;
    line-height: 1.4;
    min-width: 0;
}
.toc-item-page {
    color: var(--text-secondary, #999);
    font-size: 11px;
    flex-shrink: 0;
}
.toc-children {
    display: block;
    margin-left: 16px;
    border-left: 2px solid var(--border-color, #e0e0e0);
    padding-left: 2px;
}