/* ======================================
   Styles du Lecteur PDF/HTML
   ====================================== */

/* --- Variables PDF (palette sépia par défaut, surchargeables par thème) --- */
/* --pdf-bg-secondary également sur .hero-left pour qu'il soit résolu en plein écran */
.hero-left {
    --pdf-bg-secondary: #f5f4f2;
}

/* Affiché à la place du lecteur (masqué) quand le document n'est pas
   trouvé, ou existe mais n'a pas encore de contenu publié — cf.
   pages/pdf.js (#pdfEmptyState) et pdf-script.js::_showPdfEmptyState().
   Couleur neutre (var(--muted), même variable que .empty-message ailleurs
   sur le site) : "pas encore disponible" est un état normal/attendu, pas
   une erreur système — le rouge est réservé aux vrais dysfonctionnements. */
.pdf-empty-message {
    text-align: center;
    color: var(--muted, #999);
    font-size: 18px;
    padding: 60px 20px;
}

.pdf-viewer-container {
    --pdf-bg: #fafaf8;
    --pdf-bg-content: #eae6e1;
    --pdf-bg-secondary: #f5f4f2;
    --pdf-panel: #f8f8f6;
    --pdf-header-bg: #ffffff;
    --pdf-text: #333;
    --pdf-text-secondary: #666;
    --pdf-text-muted: #999;
    --pdf-border: #e0ddd8;
    --pdf-border-light: #e8e8e3;
    --pdf-input-border: #d4d4cf;
    --pdf-hover-bg: #f5f5f0;
    --pdf-accent: #8b7355;
    --pdf-wrap-bg: #525659;
    --pdf-highlight-hit: #fff59d;
    --pdf-highlight-active: #ffd54f;
    --pdf-highlight-outline: #ffb300;
}

/* --pdf-wrap-bg (fond derrière la page, visible autour/en dessous quand elle
   ne remplit pas tout le cadre) : gris fixe jusqu'ici, jamais surchargé bien
   que le commentaire ci-dessus l'annonce "surchargeable par thème". Les 3
   thèmes alignés sur les bodyBg déjà utilisées à l'intérieur de la page (cf.
   THEME_CSS dans public/js/pdf-iframe-helper.js) ; blanc reprend --pdf-bg-content
   (#eae6e1) déjà utilisé ailleurs dans ce même lecteur pour le thème blanc,
   plutôt qu'un blanc pur (trop peu de contraste avec la page) ou un gris
   arbitraire hors palette. */
body.theme-blanc .pdf-viewer-container {
    --pdf-wrap-bg: #eae6e1;
}
body.theme-beige .pdf-viewer-container {
    --pdf-wrap-bg: #C4A572;
}
body.theme-noir .pdf-viewer-container {
    --pdf-wrap-bg: #111;
}

/* Conteneur principal pour la zone hero */
.hero-left {
    display: flex;
    gap: 16px;
    width: 100%;
    position: relative;
    flex-wrap: wrap;
}

.pdf-viewer-container {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;
    background: var(--pdf-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--pdf-border);
}

.pdf-viewer-container.hidden {
    display: none;
}

/* Voile de transition plein écran — masque le blanc causé par le rechargement
   forcé de #viewerFrame/#compareFrame quand pdf-script.js les déplace vers
   <body> (_pdfReparentForFullscreen/_pdfUnreparentAfterFullscreen) : déplacer
   un <iframe> dans le DOM force son rechargement dans la quasi-totalité des
   navigateurs, entrée comme sortie. Classe (pas id) : en mode comparaison,
   UN voile par visionneuse (chacun cale sur SA propre zone), pas un seul
   rectangle fusionné qui enjamberait visuellement les deux comme si elles
   étaient une seule zone alors qu'elles sont côte à côte, séparées. top/
   left/width/height posés en inline par JS (épouse exactement le rectangle
   du conteneur — plein écran à l'entrée, petite zone du lecteur dans la
   page normale à la sortie — pas tout l'écran, pour laisser le reste de la
   page visible immédiatement à la sortie), couleur alignée sur le thème
   courant. z-index au-dessus de .pdf-viewer-container.pdf-is-fullscreen
   (99999) : en dessous, le voile restait invisible à l'entrée, caché sous
   le conteneur qui recharge. */
.pdf-fs-veil {
    position: fixed;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdf-fs-veil.active {
    opacity: 1;
    pointer-events: all;
}

/* Effet de chargement (au lieu d'un voile muet) — anneau neutre visible sur
   fond clair comme sombre, arc coloré à l'accent de la marque. Léger délai
   d'apparition : évite un clignotement perceptible si le rechargement de
   l'iframe finit très vite (cas fréquent hors iPad). */
.pdf-fs-veil-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(128, 128, 128, 0.25);
    border-top-color: #1A5238;
    opacity: 0;
    transition: opacity 0.2s ease 0.15s;
    animation: pdf-fs-veil-spin 0.8s linear infinite;
}
.pdf-fs-veil.active .pdf-fs-veil-spinner {
    opacity: 1;
}
@keyframes pdf-fs-veil-spin {
    to { transform: rotate(360deg); }
}

/* Mode plein écran - un seul viewer
   .pdf-is-fullscreen est ajouté par JS en même temps que requestFullscreen()
   car un sélecteur inconnu dans un groupe virgule fait ignorer tout le bloc.
   Chaque préfixe vendeur est isolé dans sa propre règle pour la même raison. */
.pdf-viewer-container:fullscreen,
.pdf-viewer-container.pdf-is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* 100dvh (hauteur de viewport dynamique) au lieu de 100vh : sur tablette,
       100vh est calculé sur la hauteur MAX du viewport (comme si la barre
       d'outils du navigateur était masquée), laissant un bandeau vide en bas
       tant qu'elle reste visible. dvh suit la hauteur réellement visible. Les
       navigateurs qui ne le supportent pas ignorent cette ligne et gardent
       100vh ci-dessus (repli). */
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 99999;
}
/* Safari — règle séparée pour ne pas polluer Chrome/Firefox */
.pdf-viewer-container:-webkit-full-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 99999;
}

.pdf-viewer-container:fullscreen .pdf-viewer-header,
.pdf-viewer-container.pdf-is-fullscreen .pdf-viewer-header,
.pdf-viewer-container:-webkit-full-screen .pdf-viewer-header {
    flex-shrink: 0;
}

.pdf-viewer-container:fullscreen .pdf-viewer-body,
.pdf-viewer-container.pdf-is-fullscreen .pdf-viewer-body,
.pdf-viewer-container:-webkit-full-screen .pdf-viewer-body {
    flex: 1;
    min-height: 0;
    max-height: none !important; /* annule le plafond 910px du mode fenêtré */
    overflow: hidden;
}

.pdf-viewer-container:fullscreen .pdf-viewer-wrap,
.pdf-viewer-container.pdf-is-fullscreen .pdf-viewer-wrap,
.pdf-viewer-container:-webkit-full-screen .pdf-viewer-wrap {
    flex: 1;
    height: 100% !important;
    /* max-height:700px vient du breakpoint tablette (pdf-mobile.css, 769-
       1024px) pensé pour le mode normal — jamais réinitialisé jusqu'ici,
       donc encore actif en plein écran et plafonnant le wrap à 700px quelle
       que soit la vraie hauteur disponible (diagnostic [FS-DEBUG] : wrap
       bloqué à 700px alors que .pdf-viewer-body faisait 1029px). */
    max-height: none !important;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.pdf-viewer-container:fullscreen .pdf-viewer-wrap iframe,
.pdf-viewer-container.pdf-is-fullscreen .pdf-viewer-wrap iframe,
.pdf-viewer-container:-webkit-full-screen .pdf-viewer-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
    min-height: 0;
    border-radius: 0;
}

.pdf-viewer-container:fullscreen .pdf-toc-panel,
.pdf-viewer-container.pdf-is-fullscreen .pdf-toc-panel,
.pdf-viewer-container:-webkit-full-screen .pdf-toc-panel {
    height: auto !important;
    max-height: 100%;
    min-height: 0;
}

/* Mode plein écran - hero-left (les deux viewers en mode comparaison)
   .pdf-is-fullscreen : repli JS quand requestFullscreen() échoue/est indisponible
   (cf. pdf-script.js _pdfEnterFallbackFullscreen) — même traitement visuel que :fullscreen. */
.hero-left:fullscreen,
.hero-left:-webkit-full-screen,
.hero-left.pdf-is-fullscreen {
    /* En plein écran natif, le navigateur positionne lui-même l'élément
       (top-layer) — cette règle passait donc inaperçue sans position:fixed.
       En repli CSS iOS (.pdf-is-fullscreen, aucune API native impliquée),
       rien d'autre ne sort .hero-left du flux normal : sans ceci, il reste
       à sa position naturelle dans <body> (constaté à top:1117px via
       [FS-DEBUG] chaîne complète) au lieu de couvrir l'écran — écran vide. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    background: var(--pdf-bg-secondary) !important;
    padding: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 8px;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* cf. commentaire .pdf-viewer-container:fullscreen plus haut */
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    transition: none !important;
    z-index: 99999;
}

/* Backdrop: évite le flash noir pendant le démarrage du plein écran */
.hero-left::backdrop {
    background: var(--pdf-bg-secondary) !important;
}

.hero-left:fullscreen .pdf-viewer-container,
.hero-left:-webkit-full-screen .pdf-viewer-container,
.hero-left.pdf-is-fullscreen .pdf-viewer-container {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.hero-left:fullscreen .pdf-viewer-body,
.hero-left:-webkit-full-screen .pdf-viewer-body,
.hero-left.pdf-is-fullscreen .pdf-viewer-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.hero-left:fullscreen .pdf-viewer-wrap,
.hero-left:-webkit-full-screen .pdf-viewer-wrap,
.hero-left.pdf-is-fullscreen .pdf-viewer-wrap {
    flex: 1;
    height: 100% !important;
    max-height: none;
    overflow: hidden;
}

.hero-left:fullscreen .pdf-toc-panel,
.hero-left:-webkit-full-screen .pdf-toc-panel,
.hero-left.pdf-is-fullscreen .pdf-toc-panel {
    height: auto !important;
    max-height: 100%;
}

.hero-left:fullscreen .pdf-viewer-wrap iframe,
.hero-left:-webkit-full-screen .pdf-viewer-wrap iframe,
.hero-left.pdf-is-fullscreen .pdf-viewer-wrap iframe {
    width: 100% !important;
    height: 100% !important;
}

.pdf-viewer-body {
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--pdf-bg-content);
    /* Plafonne à la même hauteur que .pdf-viewer-wrap (son sibling fixe à
       910px) : sans ça, une table des matières plus longue que 910px devient
       le plus grand enfant du flex row et étire toute la page au lieu de
       scroller en interne dans .pdf-toc-content (même correctif déjà
       appliqué au mode comparaison ci-dessous, généralisé ici au mode de
       base). */
    max-height: 910px;
}

/* Table des matières */
.pdf-toc-panel {
    width: 280px;
    align-self: stretch;
    display: flex;
    background: var(--panel);
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pdf-toc-panel.hidden {
    width: 0;
    min-width: 0;
    border-right: none;
    opacity: 0;
}

.pdf-toc-header {
    padding: 12px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pdf-toc-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--pdf-text);
}

.pdf-toc-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--pdf-text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.pdf-toc-close:hover {
    background: var(--pdf-border-light);
    color: var(--pdf-text);
}

.pdf-toc-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 10px;
    margin: 0;
    background: #f9f9f9;
    /* Fige la largeur de mise en page du texte à la largeur normale du
       panneau (280px), indépendamment de l'animation de .pdf-toc-panel
       (width: 280px → 0 à la fermeture). Sans ça, le texte des entrées se
       re-enveloppe dans une colonne de plus en plus étroite pendant la
       transition — chaque entrée peut alors atteindre 200-300px de haut
       (quasi un mot par ligne), ce qui gonfle .pdf-toc-content (flex item)
       et avec lui tout .pdf-viewer-body à plusieurs milliers de pixels.
       .pdf-toc-panel garde son overflow:hidden, qui masque simplement ce
       contenu figé en largeur au lieu de le forcer à se ré-agencer. */
    min-width: 280px;
}

.pdf-toc-empty {
    color: var(--pdf-text-muted);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

.pdf-toc-item {
    padding: 8px 0;
    cursor: pointer;
    border-radius: 6px;
    flex: 1;
    min-width: 0;
    transition: all 0.2s;
    font-size: 14px;
    color: var(--pdf-text);
    text-decoration: none;
    line-height: 1.4;
    display: block;
}

.pdf-toc-item:hover {
    background: var(--pdf-hover-bg);
    color: var(--pdf-accent);
}

.pdf-toc-item.level-1 {
    font-weight: 600;
}

.pdf-toc-item.level-2 {
    font-weight: 500;
    font-size: 13px;
}

.pdf-toc-item.level-3 {
    font-size: 12px;
    color: var(--pdf-text-secondary);
}

.pdf-toc-content::-webkit-scrollbar {
    width: 6px;
}

.pdf-toc-content::-webkit-scrollbar-track {
    background: var(--pdf-hover-bg);
}

.pdf-toc-content::-webkit-scrollbar-thumb {
    background: var(--pdf-input-border);
    border-radius: 3px;
}

.pdf-toc-content::-webkit-scrollbar-thumb:hover {
    background: var(--pdf-accent);
}

/* Collapsible TOC */
.pdf-toc-group {
    margin-bottom: 0;
}

/* Ligne = [toggle/espaceur] + [lien] */
.pdf-toc-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    margin-left: 5px;
    padding: 4px 6px 4px 14px;
}

/* Indentation relative au niveau hiérarchique */
.pdf-toc-row.level-2 { padding-left: 10px; }
.pdf-toc-row.level-3 { padding-left: 20px; }
.pdf-toc-row.level-4 { padding-left: 30px; }

.pdf-toc-page {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--pdf-text-muted);
    margin-left: auto;
    padding-left: 6px;
    white-space: nowrap;
}

/* Espaceur invisible pour les feuilles (alignement avec les parents qui ont un toggle) */
.pdf-toc-spacer {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.pdf-toc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--pdf-text-muted);
    font-size: 13px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 4px;
    transition: all 0.2s;
}

.pdf-toc-toggle:hover {
    background: var(--pdf-border-light);
    color: var(--pdf-text);
}

.pdf-toc-children {
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.pdf-toc-children.collapsed {
    max-height: 0 !important;
    overflow: hidden;
}

.pdf-viewer-header {
    display: flex;
    gap: 8px 12px;
    padding: 10px 16px;
    background: var(--pdf-header-bg);
    align-items: center;
    border-bottom: 1px solid var(--pdf-border-light);
    flex-wrap: wrap;
    min-height: 48px;
    flex-shrink: 0; /* ne jamais comprimer le header en dessous de sa hauteur
        réelle (lignes wrappées comprises) — laisser .pdf-viewer-body
        rétrécir plutôt que couper des boutons via overflow:hidden */
    border-radius: 10px 10px 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
    justify-content: flex-start;
}

.pdf-viewer-header input,
.pdf-viewer-header select {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

.pdf-viewer-left {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.pdf-viewer-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    flex: 0 0 auto;
    margin-right: auto;
}

.pdf-viewer-input,
.pdf-viewer-select,
.pdf-viewer-page-input {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--panel-light);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pdf-viewer-input:focus,
.pdf-viewer-select:focus,
.pdf-viewer-page-input:focus {
    outline: none;
    border-color: var(--brand-green);
    background: var(--panel);
    box-shadow: 0 0 0 3px rgba(26, 82, 56, 0.1);
}

.pdf-viewer-input {
    min-width: 220px;
}

.pdf-viewer-input::placeholder {
    color: var(--text-secondary);
}

.pdf-viewer-page-input {
    width: 52px;
    min-width: 52px;
    text-align: center;
    font-weight: 500;
    padding: 6px 4px !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pdf-viewer-page-input::-webkit-inner-spin-button,
.pdf-viewer-page-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pdf-viewer-btn {
    background: transparent;
    border: 1px solid var(--pdf-input-border);
    color: var(--pdf-text);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    line-height: 1;
    /* Même correctif défensif que .xmind-controls (xmind-style.css) — pas de
       touch-action:none trouvé sur un ancêtre ici (contrairement à Xmind),
       donc probablement pas la même cause, mais sans risque et cohérent
       avec le reste des boutons de contrôle du site. */
    touch-action: manipulation;
}

.pdf-viewer-btn svg,
.pdf-toc-expand-btn svg,
.pdf-toc-toggle svg {
    display: block;
    flex-shrink: 0;
}

.pdf-viewer-btn:hover {
    background: var(--pdf-hover-bg);
    border-color: var(--pdf-accent);
    color: var(--pdf-accent);
}

.pdf-viewer-btn:active {
    transform: scale(0.98);
}

.pdf-viewer-btn.pdf-viewer-ghost {
    background: transparent;
    border: 1px solid var(--pdf-border-light, #e8e8e3);
    color: var(--pdf-text-secondary, #666);
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 400;
}

.pdf-viewer-btn.pdf-viewer-ghost:hover {
    background: var(--pdf-hover-bg, #f5f5f0);
    border-color: var(--pdf-accent, #8b7355);
    color: var(--pdf-accent, #8b7355);
}

.pdf-viewer-btn.pdf-viewer-close {
    background: transparent;
    border: none;
    color: var(--pdf-text-secondary);
    font-size: 20px;
    padding: 4px 12px;
    font-weight: 300;
}

.pdf-viewer-btn.pdf-viewer-close:hover {
    background: var(--pdf-hover-bg);
    color: var(--pdf-text);
}

.pdf-viewer-controls-group {
    display: flex;
    gap: 4px;
    align-items: center;
    background: var(--pdf-bg-secondary);
    padding: 3px;
    border-radius: 6px;
    border: 1px solid var(--pdf-border-light);
}

/* Navigation de page en mode comparaison : chaque panneau n'a que la moitié
   de la largeur, ces boutons peuvent donc être plus compacts (le groupe de
   zoom, lui, garde sa taille — ciblé via :has() plutôt que la classe
   générique .pdf-viewer-controls-group, partagée avec lui). */
.hero-left.compare-active .pdf-viewer-controls-group:has(#pageInput),
.hero-left.compare-active .pdf-viewer-controls-group:has(#comparePageInput) {
    gap: 2px;
}

.hero-left.compare-active .pdf-viewer-controls-group:has(#pageInput) .pdf-viewer-btn,
.hero-left.compare-active .pdf-viewer-controls-group:has(#comparePageInput) .pdf-viewer-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 13px;
}

/* Un peu d'air entre les flèches et le numéro de page (le gap du groupe
   reste serré entre le champ de saisie et le total "/ N", qui forment un
   même bloc visuel "1 / 1"). */
.hero-left.compare-active #prevPage,
.hero-left.compare-active #comparePrevPage {
    margin-right: 10px;
}

.hero-left.compare-active #nextPage,
.hero-left.compare-active #compareNextPage {
    margin-left: 10px;
}

.hero-left.compare-active #pageInput,
.hero-left.compare-active #comparePageInput {
    width: 30px;
    min-width: 30px;
    font-size: 13px;
}

.hero-left.compare-active .pdf-viewer-controls-group:has(#pageInput) #pageTotal,
.hero-left.compare-active .pdf-viewer-controls-group:has(#comparePageInput) #comparePageTotal {
    min-width: 0;
    margin-left: 2px;
}

.pdf-viewer-separator {
    width: 1px;
    height: 20px;
    background: var(--pdf-border);
    margin: 0 4px;
}

.pdf-viewer-status,
.pdf-viewer-note {
    color: var(--pdf-text-secondary);
    font-size: 13px;
    margin-left: 4px;
    white-space: nowrap;
    font-weight: 400;
    flex-shrink: 0;
}

.pdf-viewer-status {
    min-width: 36px;
}

.pdf-viewer-zoom-label {
    min-width: 50px;
    text-align: center;
    color: var(--pdf-text);
    font-size: 13px;
    font-weight: 500;
    padding: 0 4px;
}

.pdf-viewer-wrap {
    display: flex;
    flex-direction: column;
    background: var(--pdf-wrap-bg);
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 0;
    max-height: 910px;
    height: 910px;
}

.pdf-viewer-wrap.hidden {
    display: none;
}

/* Plein écran : classe ajoutée directement sur l'élément par JS (plus fiable que les sélecteurs descendants :fullscreen) */
.pdf-viewer-wrap.pdf-wrap-fullscreen {
    height: 100% !important;
    /* cf. commentaire sur .pdf-viewer-container:fullscreen .pdf-viewer-wrap
       plus haut — même correctif nécessaire ici (max-height:700px du
       breakpoint tablette, pdf-mobile.css, jamais réinitialisé). */
    max-height: none !important;
    min-height: 0;
}

.pdf-viewer-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--pdf-wrap-bg);
    display: block;
    border-radius: 0;
    box-shadow: none;
    /* Optimisations Chrome pour forcer le rendu */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Styles pour les highlights dans l'iframe (injectés via helperScript) */
mark.__phv_hit {
    background: var(--pdf-highlight-hit);
    color: #000;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

mark.__phv_active {
    background: var(--pdf-highlight-active);
    color: #000;
    padding: 3px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
    outline: 2px solid var(--pdf-highlight-outline);
    outline-offset: 2px;
    font-weight: 500;
}

/* Responsive pour le lecteur PDF */
/* En mode comparaison, toujours côte à côte */
.hero-left.compare-active {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 10px;
    align-items: flex-start;
    align-self: flex-start;
    height: fit-content;
}

/* Limiter la hauteur des viewers en mode comparaison pour éviter l'extension excessive */
.hero-left.compare-active .pdf-viewer-wrap {
    height: min(910px, calc(90vh - 120px)) !important;
    max-height: min(910px, calc(90vh - 120px)) !important;
}

/* Empêcher le pdf-viewer-body de s'étirer au-delà de la hauteur du wrap */
.hero-left.compare-active .pdf-viewer-body {
    max-height: min(910px, calc(90vh - 120px));
    overflow: hidden;
}

/* Plein écran en mode comparaison : annuler les contraintes de hauteur du
   mode hors plein écran. .pdf-is-fullscreen : repli iOS (voir commentaire
   plus haut sur .hero-left:fullscreen) — sans cette variante, la hauteur
   plafonnée du mode fenêtré (.hero-left.compare-active .pdf-viewer-body
   ci-dessus) restait active sur iPad malgré le vrai plein écran, laissant
   une grande marge vide sous les en-têtes. */
.hero-left:fullscreen.compare-active,
.hero-left:-webkit-full-screen.compare-active,
.hero-left.pdf-is-fullscreen.compare-active {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    align-items: stretch !important;
    align-self: auto !important;
}

.hero-left:fullscreen.compare-active .pdf-viewer-wrap,
.hero-left:-webkit-full-screen.compare-active .pdf-viewer-wrap,
.hero-left.pdf-is-fullscreen.compare-active .pdf-viewer-wrap {
    height: 100% !important;
    max-height: none !important;
}

.hero-left:fullscreen.compare-active .pdf-viewer-body,
.hero-left:-webkit-full-screen.compare-active .pdf-viewer-body,
.hero-left.pdf-is-fullscreen.compare-active .pdf-viewer-body {
    max-height: none !important;
}

@media (max-width: 1400px) {
    .hero-left:not(.compare-active) {
        flex-direction: column;
    }

    .pdf-viewer-container {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .pdf-viewer-header {
        padding: 16px 20px;
        gap: 12px;
    }

    .pdf-viewer-wrap {
        padding: 16px;
    }

    .pdf-viewer-input {
        min-width: 180px;
    }

    .pdf-viewer-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .pdf-toc-panel {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .pdf-viewer-header {
        padding: 12px 16px;
        flex-direction: column;
        /* flex-wrap:wrap (règle de base) créerait plusieurs "colonnes" côte à
           côte en mode column au lieu d'empiler simplement les 2 blocs —
           chacun gère déjà son propre wrap interne en ligne. */
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .pdf-viewer-left,
    .pdf-viewer-right {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .pdf-viewer-wrap {
        padding: 12px;
    }

    .pdf-viewer-separator {
        display: none;
    }

    .pdf-viewer-input {
        min-width: 100%;
    }

    .pdf-viewer-controls-group {
        flex-wrap: wrap;
    }

    /* TOC en overlay sur mobile */
    .pdf-toc-panel {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 100;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }

    .pdf-toc-panel.hidden {
        transform: translateX(-100%);
    }
}

/* ======================================
   Recherche intégrée (flèches + input)
   ====================================== */
.pdf-search-group {
    gap: 2px !important;
}

.pdf-search-input {
    min-width: 160px !important;
    max-width: 200px;
    padding: 6px 10px !important;
    border: none !important;
    background: transparent !important;
    font-size: 13px;
}

.pdf-search-input:focus {
    background: #fff !important;
}

/* ======================================
   Surlignage (highlight)
   ====================================== */
.pdf-highlight-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pdf-highlight-color {
    width: 28px;
    height: 28px;
    border: 1px solid #d4d4cf;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

.pdf-highlight-color::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.pdf-highlight-color::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* Titre du livre comparé */
.pdf-compare-title-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shared toolbar book titles */
.pdf-shared-title-left,
.pdf-shared-title-right {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 8px;
    max-width: 100%;
}

.pdf-shared-title-left {
    color: #8b7355;
}

.pdf-shared-title-right {
    color: #2c6f5a;
    text-align: right;
}

/* Compare button: icon + label alignment — already handled by .pdf-viewer-btn flex */
#compareBtn svg,
#sharedCompareBtn svg {
    flex-shrink: 0;
}

.compare-btn-label {
    white-space: nowrap;
}

/* Compare-only controls: hidden by default, shown during compare */
.pdf-compare-only-controls {
    display: none !important;
}

.hero-left.compare-active .pdf-compare-only-controls {
    display: flex !important;
}

/* ======================================
   Modal de comparaison
   ====================================== */
.pdf-compare-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.pdf-compare-modal.hidden {
    display: none;
}

.pdf-compare-modal-content {
    background: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 560px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid #e0ddd8;
    overflow: hidden;
}

.pdf-compare-modal-header {
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0ddd8;
    background: #f8f8f6;
}

.pdf-compare-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.pdf-compare-search {
    margin: 12px 16px;
    min-width: auto !important;
}

.pdf-compare-inline-picker {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: var(--panel);
}

.pdf-compare-inline-picker.hidden {
    display: none;
}


#pdfViewerCompare.compare-picking .compare-reader-only {
    display: none !important;
}

/* In picker mode the viewer-wrap is hidden, so give the body an explicit height
   matching the main reader so both panels are the same size */
.hero-left.compare-active #pdfViewerCompare.compare-picking .pdf-viewer-body {
    height: min(910px, calc(90vh - 120px));
    max-height: min(910px, calc(90vh - 120px));
}

.pdf-compare-book-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 16px;
}

.pdf-compare-book-item {
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.pdf-compare-book-item:hover {
    background: var(--hover-bg, var(--panel-light));
    border-color: var(--brand-green);
    color: var(--brand-green);
}

.pdf-compare-book-item .book-category {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ======================================
   Shared Toolbar (compare mode)
   ====================================== */
.pdf-shared-toolbar {
    width: 100%;
    flex-basis: 100%;
    background: #ffffff;
    border: 1px solid #e0ddd8;
    border-radius: 10px;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pdf-shared-toolbar.hidden {
    display: none;
}

.pdf-shared-toolbar-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pdf-shared-toolbar-controls input {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

/* Three-zone layout: left title, center controls, right title */
.pdf-shared-toolbar-zone {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Les deux zones de titre se partagent équitablement (flex-grow/shrink/basis
   identiques) l'espace laissé par la zone centrale : toujours la même
   largeur des deux côtés, quelle que soit la longueur réelle de chaque
   titre. Le texte (déjà en white-space:nowrap + text-overflow:ellipsis, voir
   .pdf-shared-title-left/right plus bas) se tronque progressivement au lieu
   de disparaître d'un coup — jusqu'à un seuil où il ne resterait plus qu'une
   lettre + les points de suspension (illisible, inutile) : le titre est
   alors masqué entièrement. Container query sur la zone elle-même (pas un
   seuil de viewport deviné, cf. tentative précédente) : elle mesure
   directement la largeur réellement disponible pour LE texte.
*/
.pdf-shared-zone-left,
.pdf-shared-zone-right {
    flex: 1 1 0;
    container-type: inline-size;
}

.pdf-shared-zone-left {
    justify-content: flex-start;
}

.pdf-shared-zone-right {
    justify-content: flex-end;
}

@container (max-width: 48px) {
    .pdf-shared-title-left,
    .pdf-shared-title-right {
        display: none;
    }
}

.pdf-shared-zone-center {
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 900px) {
    #sharedModeSelect {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Hide individual controls during compare mode */
.hero-left.compare-active .pdf-viewer-individual-controls {
    display: none !important;
}

/* Hide compare button wrapper during compare mode (it's in shared toolbar instead) */
.hero-left.compare-active .pdf-compare-btn-wrapper {
    display: none !important;
}

/* Compare button wrapper: inline flex to keep separator + button together */
.pdf-compare-btn-wrapper {
    display: contents;
}

/* Hide individual search bars and mode selects during compare mode */
.hero-left.compare-active .pdf-search-group,
.hero-left.compare-active .pdf-viewer-left .pdf-viewer-note,
.hero-left.compare-active #modeSelect,
.hero-left.compare-active #pdfGlossaireBtn,
.hero-left.compare-active #pdfRefsBtn,
.hero-left.compare-active #openSearchBtn {
    display: none !important;
}

.pdf-viewer-individual-controls {
    display: contents;
}

/* Croix, sommaire, effacer-surlignage, glossaire, références, recherche,
   comparer : même famille de boutons dans les en-têtes de livre, un peu
   moins larges que le padding par défaut de .pdf-viewer-ghost. */
.pdf-header-action-btn {
    padding-left: 9px !important;
    padding-right: 9px !important;
}

/* Recherche, sommaire, effacer-surlignage : icône (18px) plus petite que
   glossaire/références/comparer (20px) dans cette même famille de boutons —
   padding augmenté en compensation pour garder EXACTEMENT le même gabarit de
   bouton que les autres, l'icône seule doit paraître plus petite, pas le
   bouton. Deux contextes, deux gabarits de référence à retrouver :
   - barre commune (padding par défaut 6px 12px, boutons 46×34) ;
   - en-tête de livre, avec .pdf-header-action-btn (boutons 40×34), plus
     spécifique donc prioritaire quand les deux classes sont posées. */
.pdf-icon-compact {
    padding: 7px 13px !important;
}

.pdf-header-action-btn.pdf-icon-compact {
    padding: 7px 10px !important;
}

/* ======================================
   Icon-only highlight buttons (no emoji, no text)
   Dimensions volontairement identiques à .pdf-viewer-ghost (pas de padding/
   font-size réduits) : ce bouton est groupé avec la croix de fermeture et le
   sommaire dans l'en-tête de chaque livre, ils doivent avoir la même taille.
   ====================================== */
.pdf-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Pencil (crayon) icon via inline SVG */
.icon-highlight {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Eraser icon via inline SVG */
.icon-eraser {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20H7L3 16c-.8-.8-.8-2 0-2.8L14.6 1.6c.8-.8 2-.8 2.8 0l5 5c.8.8.8 2 0 2.8L12 20'/%3E%3Cpath d='M6 11l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Trash icon via inline SVG */
.icon-trash {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pdf-btn-icon:hover .icon-highlight {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
}

.pdf-btn-icon:hover .icon-eraser {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20H7L3 16c-.8-.8-.8-2 0-2.8L14.6 1.6c.8-.8 2-.8 2.8 0l5 5c.8.8.8 2 0 2.8L12 20'/%3E%3Cpath d='M6 11l4 4'/%3E%3C/svg%3E");
}

.pdf-btn-icon:hover .icon-trash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

/* ======================================
   TOC expand/collapse all buttons
   ====================================== */
.pdf-toc-header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pdf-toc-expand-btn {
    background: none;
    border: 1px solid #e0ddd8;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pdf-toc-expand-btn:hover {
    background: #e8e8e3;
    color: #333;
    border-color: #c4c0ba;
}

/* ======================================
   Fullscreen modal fix: modals inside hero-left
   When hero-left is fullscreen, fixed positioning
   is relative to the fullscreen element
   ====================================== */
.hero-left:fullscreen .pdf-compare-modal,
.hero-left:-webkit-full-screen .pdf-compare-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Ensure confirm-delete modal is visible in fullscreen too */
.hero-left:fullscreen .pdf-compare-modal.hidden,
.hero-left:-webkit-full-screen .pdf-compare-modal.hidden {
    display: none;
}

.pdf-viewer-container:fullscreen .pdf-compare-modal,
.pdf-viewer-container.pdf-is-fullscreen .pdf-compare-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ======================================
   Unified search group in shared toolbar
   ====================================== */
.pdf-shared-search-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f5f4f2;
    border-radius: 6px;
    padding: 2px 6px;
    border: 1px solid #e0ddd8;
}

.pdf-shared-search-target-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px !important;
    padding: 4px 8px !important;
    white-space: nowrap;
    border-right: 1px solid #e0ddd8 !important;
    border-radius: 4px 0 0 4px !important;
    min-width: 90px;
    justify-content: center;
}

.pdf-shared-search-target-btn.target-main {
    color: #8b7355;
    background: rgba(139, 115, 85, 0.08);
}

.pdf-shared-search-target-btn.target-compare {
    color: #2c6f5a;
    background: rgba(44, 111, 90, 0.08);
}

.pdf-shared-search-arrow {
    font-size: 10px;
    opacity: 0.6;
}

.pdf-shared-search-input {
    min-width: 130px !important;
    max-width: 170px;
    border: none !important;
    background: transparent !important;
}

.pdf-shared-search-group .pdf-viewer-note {
    font-size: 11px;
    white-space: nowrap;
    min-width: 65px;
    text-align: center;
}

/* ======================================
   Hide headbars toggle (fullscreen)
   ====================================== */
.pdf-headbar-toggle-float {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 200;
    background: var(--panel-light, #f8f8f6);
    border: 1px solid var(--border-color, #d4d4cf);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--text-primary, #333);
    line-height: 1;
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    touch-action: manipulation;
}

.pdf-headbar-toggle-float:hover {
    background: var(--hover-bg, #f0f0f0);
    border-color: var(--accent, #1a5238);
    color: var(--accent, #1a5238);
}

/* Floating toggle specific to compare mode - positioned at top-right of hero-left */
.pdf-compare-headbar-float {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 300;
}

/* Only show it inside hero-left fullscreen — .pdf-is-fullscreen : repli iOS
   (pas de vraie Fullscreen API Safari), cf. commentaire plus haut sur
   .hero-left:fullscreen. Sans cette variante le bouton ne s'affiche jamais
   sur iPad, seule la vraie fullscreen API le révèle. */
.hero-left:fullscreen .pdf-compare-headbar-float,
.hero-left:-webkit-full-screen .pdf-compare-headbar-float,
.hero-left.pdf-is-fullscreen .pdf-compare-headbar-float {
    display: flex;
}

/* When headbars are hidden (compare fullscreen) */
.pdf-headbars-hidden .pdf-viewer-header {
    display: none !important;
}

.pdf-headbars-hidden .pdf-shared-toolbar {
    display: none !important;
}

.pdf-headbars-hidden .pdf-viewer-container {
    border-radius: 0;
}

/* When headbars are hidden in fullscreen compare, viewers fill remaining height via grid */

/* ======================================
   Selection Popup (like lecture.html)
   ====================================== */
#pdfSelectionPopup {
    position: fixed;
    background: white;
    border: 2px solid #1A5238;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 20030;
    display: none;
    gap: 4px;
    align-items: center;
}

.pdf-selection-action-btn {
    background: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1A5238;
    transition: all 0.2s ease;
}

.pdf-selection-action-btn:hover {
    background: #f0f0f0;
    transform: scale(1.08);
}

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

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

.pdf-selection-action-btn.requires-login {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

/* Aperçu au survol glossaire/références (HTML natif) : plus de CSS ici — la
   popup tourne DANS l'iframe et réutilise Lecture-style.css directement
   (.glossary-term, .glossary-popup*, .arabic-ref-tooltip*), cf.
   pdf-script.js::tagGlossaryAndRefTerms et public/js/pdf-iframe-glossref.js. */

/* Search popup (like Lecture.html openSearchPopup) */
#pdfSearchPopup {
    display: none;
}

/* Document switcher buttons in search popup */
.pdf-search-popup-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid #e0ddd8;
    border-radius: 6px;
    background: #fafaf8;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
}

.pdf-search-popup-doc-btn:hover {
    border-color: #1A5238;
    color: #1A5238;
}

.pdf-search-popup-doc-btn.active {
    border-color: var(--accent, #1A5238);
    background: var(--accent, #1A5238);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(26, 82, 56, 0.3);
}

/* Color picker inside the popup */
.pdf-popup-color-picker {
    width: 22px;
    height: 22px;
    border: 2px solid #d4d4cf;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    vertical-align: middle;
    align-self: center;
    margin: 0 2px;
}

.pdf-popup-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.pdf-popup-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

/* Solo viewer headbar hidden */
.pdf-viewer-container.pdf-headbar-hidden .pdf-viewer-header {
    display: none !important;
}

.pdf-viewer-container.pdf-headbar-hidden .pdf-headbar-toggle-float {
    top: 6px;
}

/* Shared toolbar in fullscreen — .pdf-is-fullscreen : repli iOS (pas de vraie
   Fullscreen API Safari), cf. commentaire sur .hero-left:fullscreen plus haut
   dans ce fichier. */
.hero-left:fullscreen .pdf-shared-toolbar,
.hero-left:-webkit-full-screen .pdf-shared-toolbar,
.hero-left.pdf-is-fullscreen .pdf-shared-toolbar {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* Fullscreen compare: CSS grid fills exact height — toolbar auto, viewers 1fr.
   When toolbar is hidden (display:none), the auto row collapses and viewers fill 100%.
   Cette grille était absente pour .pdf-is-fullscreen : sur iPad (repli, pas de
   vraie Fullscreen API), .hero-left retombait sur son flex par défaut
   (flex-wrap, gap) au lieu de ce grid — d'où la grande marge observée entre
   la barre commune et les en-têtes de chaque livre. */
.hero-left:fullscreen.compare-active,
.hero-left:-webkit-full-screen.compare-active,
.hero-left.pdf-is-fullscreen.compare-active {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;
}

.hero-left:fullscreen.compare-active .pdf-shared-toolbar,
.hero-left:-webkit-full-screen.compare-active .pdf-shared-toolbar,
.hero-left.pdf-is-fullscreen.compare-active .pdf-shared-toolbar {
    grid-column: 1 / -1;
    grid-row: 1;
}

.hero-left:fullscreen.compare-active .pdf-viewer-container,
.hero-left:-webkit-full-screen.compare-active .pdf-viewer-container,
.hero-left.pdf-is-fullscreen.compare-active .pdf-viewer-container {
    grid-row: 2;
    width: 100% !important;
    flex: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0;
    overflow: hidden;
}

/* Shared toolbar title in fullscreen — zones can expand */
.hero-left:fullscreen .pdf-shared-zone-left,
.hero-left:-webkit-full-screen .pdf-shared-zone-left,
.hero-left.pdf-is-fullscreen .pdf-shared-zone-left,
.hero-left:fullscreen .pdf-shared-zone-right,
.hero-left:-webkit-full-screen .pdf-shared-zone-right,
.hero-left.pdf-is-fullscreen .pdf-shared-zone-right {
    max-width: 300px;
}

/* ======================================
   Panneau d'erreur PDF (chargement échoué)
   — reprend les tokens de thème du site (var(--panel-light), --error-*,
   --accent…) plutôt que la palette --pdf-* figée du reader, pour que le
   panneau suive le thème actif (clair/beige/sombre) au lieu de rester
   toujours clair.
   ====================================== */
.pdf-error-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--panel-light, #fff);
    border: 1px solid var(--error-border, #fecaca);
    border-left: 3px solid var(--error-text, #991b1b);
    border-radius: var(--card-radius, 8px);
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.12));
    color: var(--text-primary, #333);
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.pdf-error-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.pdf-error-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pdf-error-open-link {
    color: var(--accent, #1A5238);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.pdf-error-btn {
    border: none;
    border-radius: var(--card-radius, 8px);
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.pdf-error-btn:hover {
    opacity: 0.85;
}

.pdf-error-btn-primary {
    background: var(--accent, #1A5238);
    color: #fff;
}

.pdf-error-btn-close {
    background: var(--panel, #f0f0f0);
    color: var(--text-primary, #333);
    border: 1px solid var(--border-color, #e0e0e0);
}