/* ═══════════════════════════════════════════════════
   LECTEUR DE BIOGRAPHIES — « Les Vies des Prophètes »
   Overlay plein écran, typographie livre, tooltips citations
   ═══════════════════════════════════════════════════ */

/* ---- OVERLAY ---- */
#bio-reader{display:none;position:fixed;inset:0;z-index:400;background:linear-gradient(180deg,#08080f 0%,#06060f 100%)}
#bio-reader.open{display:block}
#br-scroll{position:absolute;inset:0;overflow-y:auto;scroll-behavior:smooth}
#br-scroll::-webkit-scrollbar{width:5px}
#br-scroll::-webkit-scrollbar-thumb{background:#8a7222;border-radius:3px}

/* Barre de progression de lecture */
#br-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#8a7222,#c9a227);width:0%;z-index:402;transition:width .1s linear;pointer-events:none}

/* Bouton fermer */
#br-close{position:fixed;top:14px;right:14px;z-index:401;width:42px;height:42px;border-radius:50%;background:rgba(13,13,26,.9);border:1px solid #1e1e35;color:#7a7885;font-size:1.2em;cursor:pointer;transition:all .2s;backdrop-filter:blur(10px)}
#br-close:hover{border-color:#c9a227;color:#c9a227;transform:rotate(90deg)}

/* ---- FEUILLE DU LIVRE ---- */
.br-sheet{max-width:780px;margin:0 auto;padding:70px 28px 60px}

/* En-tête du chapitre */
.br-head{text-align:center;margin-bottom:45px}
.br-head .br-ar{font-family:Amiri,serif;font-size:clamp(3rem,9vw,5rem);color:#c9a227;line-height:1.2}
.br-head .br-name{font-family:Amiri,serif;font-size:clamp(1.8rem,5vw,2.6rem);color:#e8e6e3;margin-top:8px}
.br-head .br-title{color:#7a7885;font-size:.95em;margin-top:8px;font-style:italic}
.br-head .br-count{display:inline-block;margin-top:16px;padding:4px 16px;border:1px solid #8a7222;border-radius:20px;color:#c9a227;font-size:.72em;letter-spacing:.15em;text-transform:uppercase}
.br-ornament{color:#8a7222;font-size:1.3em;margin-top:22px;letter-spacing:.5em}

/* Épigraphe */
.br-epigraph{margin:35px auto 50px;max-width:560px;text-align:center;padding:28px 24px;background:rgba(201,162,39,.05);border:1px solid rgba(201,162,39,.25);border-radius:14px;position:relative}
.br-epigraph::before{content:'❝';position:absolute;top:-16px;left:50%;transform:translateX(-50%);color:#c9a227;background:#08080f;padding:0 14px;font-size:1.6em}
.br-epigraph .ep-ar{font-family:Amiri,serif;font-size:1.45em;color:#c9a227;line-height:1.9;direction:rtl}
.br-epigraph .ep-fr{color:#c8c6c2;font-style:italic;margin-top:14px;font-size:.92em;line-height:1.65}
.br-epigraph .ep-note{color:#7a7885;font-size:.78em;margin-top:12px}
.br-epigraph .ep-ref{color:#8a7222;font-size:.72em;margin-top:10px;letter-spacing:.08em}

/* ---- SECTIONS ---- */
.br-sec{margin:34px 0 25px;display:flex;align-items:baseline;gap:14px}
.br-sec .sn{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid #8a7222;display:flex;align-items:center;justify-content:center;color:#c9a227;font-size:.85em;font-weight:700;font-family:Amiri,serif}
.br-sec h3{font-family:Amiri,serif;color:#c9a227;font-size:clamp(1.25rem,3.5vw,1.6rem);border-bottom:1px solid #1e1e35;padding-bottom:8px;flex-grow:1;margin:0}

/* ---- BARRE D'ONGLETS (une par section) ---- */
.br-tabs{position:sticky;top:0;z-index:20;display:flex;gap:6px;padding:10px 6px;margin:8px -6px 26px;background:rgba(8,8,15,.96);backdrop-filter:blur(12px);border-bottom:1px solid #1e1e35;overflow-x:auto;scrollbar-width:none}
.br-tabs::-webkit-scrollbar{display:none}
.br-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:20px;background:#0d0d1a;border:1px solid #1e1e35;color:#8a8794;cursor:pointer;white-space:nowrap;font-family:Inter,sans-serif;font-size:.78em;transition:all .2s;flex-shrink:0}
.br-tab .tn{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.05);color:#8a7222;font-weight:800;font-size:.9em}
.br-tab .tt{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.br-tab:hover{border-color:#8a7222;color:#c9c7d0}
.br-tab.active{background:rgba(201,162,39,.13);border-color:#c9a227;color:#e0be4a}
.br-tab.active .tn{background:#c9a227;color:#06060f}
.br-tab.tab-all{border-style:dashed}
.br-tab.tab-all.active{border-style:solid}

/* ---- CARTES D'HYPOTHÈSES (enquêtes) ---- */
.br-hyp{margin-bottom:30px}
.br-hyp .lbl{color:#7a7885;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.hyp-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 18px;margin-bottom:10px;transition:border-color .3s}
.hyp-card:hover{border-color:rgba(201,162,39,.4)}
.hyp-card h4{color:#c9a227;font-size:.92em;margin-bottom:8px;font-weight:600}
.hyp-card p{color:#c9c7d0;font-size:.85em;line-height:1.7}
.hyp-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hyp-bar .track{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.hyp-bar .fill{height:100%;border-radius:3px}
.hyp-bar .pct{font-size:.75em;font-weight:700;min-width:2.5em;text-align:right}
.hyp-tag{display:inline-block;font-size:.62em;padding:2px 10px;border-radius:10px;margin-bottom:8px;letter-spacing:.08em;font-weight:700}
.br-count.enq{border-color:#8ab4f8;color:#8ab4f8}

/* Sidebar : groupe enquêtes */
#br-sidebar .sb-group{color:#55534f;font-size:.6em;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:14px 10px 6px;border-top:1px dashed rgba(255,255,255,.08);margin-top:8px}
#br-sidebar .sb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* Pagination bas de page : ← précédente / suivante → */
.br-pagenav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:34px 0 8px;padding-top:22px;border-top:1px dashed rgba(201,162,39,.25)}
.pg-btn{display:flex;flex-direction:column;gap:4px;padding:13px 16px;background:#0d0d1a;border:1px solid #1e1e35;border-radius:12px;cursor:pointer;transition:all .25s;text-align:left;font-family:Inter,sans-serif;min-width:0}
.pg-btn .pg-dir{color:#8a7222;font-size:.64em;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.pg-btn .pg-title{color:#c9c7d0;font-size:.82em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-btn:hover{border-color:#c9a227;transform:translateY(-2px)}
.pg-btn:hover .pg-title{color:#e0be4a}
.pg-btn.pg-prev{text-align:left}
.pg-btn.pg-next{text-align:right;align-items:flex-end}
.pg-btn.pg-chapter{background:rgba(201,162,39,.07);border-color:rgba(201,162,39,.35)}
.pg-btn.disabled{opacity:.35;pointer-events:none}
.pg-btn.pg-next:hover{transform:translateY(-2px)}

/* Paragraphes — typographie livre */
.br-sheet p.br-p{font-size:1.02em;line-height:1.85;color:#c8c6c2;text-align:justify;margin:0 0 22px;hyphens:auto}
.br-sheet p.br-p.first::first-letter{float:left;font-family:Amiri,serif;font-size:3.2em;line-height:.82;color:#c9a227;padding:5px 10px 0 0}

/* ---- MARQUEURS DE CITATION ---- */
.cit{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 4px;margin:0 2px;border-radius:50%;background:rgba(201,162,39,.14);border:1px solid #8a7222;color:#e0be4a;font-size:.62em;font-weight:700;vertical-align:super;line-height:1;cursor:pointer;transition:all .2s;font-family:Inter,sans-serif;text-decoration:none}
.cit:hover,.cit.active{background:#c9a227;color:#06060f;border-color:#c9a227;transform:scale(1.12)}
.cit-demo{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 4px;margin:0 2px;border-radius:50%;background:rgba(201,162,39,.14);border:1px solid #8a7222;color:#e0be4a;font-size:.62em;font-weight:700;vertical-align:middle;line-height:1;font-family:Inter,sans-serif}

/* ---- TOOLTIP ---- */
#cit-tip{position:fixed;z-index:500;max-width:440px;width:max-content;background:#0d0d1a;border:1px solid #c9a227;border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.7),0 0 0 1px rgba(201,162,39,.08);padding:0;display:none;overflow:hidden;animation:tipin .18s ease-out}
#cit-tip.show{display:block}
@keyframes tipin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ct-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;background:rgba(201,162,39,.1);border-bottom:1px solid rgba(201,162,39,.25)}
.ct-src{font-size:.68em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c9a227}
.ct-ref{font-size:.72em;color:#8a7222;font-weight:600}
.ct-body{padding:12px 16px;max-height:38vh;overflow-y:auto}
.ct-body::-webkit-scrollbar{width:4px}
.ct-body::-webkit-scrollbar-thumb{background:#8a7222;border-radius:2px}
.ct-ar{font-family:Amiri,serif;font-size:1.25em;color:#e8e6e3;line-height:2;direction:rtl;text-align:right}
.ct-fr{color:#b9b7b3;font-size:.85em;line-height:1.6;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.12);font-style:italic}
.ct-trnote{color:#55534f;font-size:.62em;margin-top:6px;letter-spacing:.05em}
.ct-hint{padding:6px 14px;background:rgba(255,255,255,.02);border-top:1px solid #1e1e35;color:#55534f;font-size:.62em;text-align:center}
#cit-tip::after{content:'';position:absolute;left:var(--tipx,50%);bottom:-6px;width:10px;height:10px;background:#0d0d1a;border-right:1px solid #c9a227;border-bottom:1px solid #c9a227;transform:translateX(-50%) rotate(45deg)}
#cit-tip.below::after{bottom:auto;top:-6px;transform:translateX(-50%) rotate(225deg)}

/* ---- PIED DE CHAPITRE ---- */
.br-tail{margin-top:60px;border-top:1px solid #1e1e35;padding-top:30px}
.br-surats{margin-bottom:30px}
.br-surats .lbl{color:#7a7885;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.br-surats .chips{display:flex;flex-wrap:wrap;gap:6px}
.br-surats .chip{font-size:.75em;padding:3px 10px;background:#0d0d1a;border:1px solid #1e1e35;border-radius:12px;color:#8a7a55;cursor:pointer;transition:all .2s}
.br-surats .chip:hover{border-color:#c9a227;color:#c9a227}

.br-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:35px}
.br-nav .nv{background:#0d0d1a;border:1px solid #1e1e35;border-radius:12px;padding:16px 18px;cursor:pointer;transition:all .25s}
.br-nav .nv:hover{border-color:#c9a227;transform:translateY(-2px)}
.br-nav .nv.next{text-align:right}
.br-nav .nv .dir{color:#8a7222;font-size:.68em;letter-spacing:.12em;text-transform:uppercase}
.br-nav .nv .who{font-family:Amiri,serif;color:#e8e6e3;font-size:1.15em;margin-top:4px}
.br-nav .nv .who .ar-inline{font-family:Amiri,serif;color:#c9a227;margin:0 6px}
.br-nav .nv.disabled{opacity:.35;pointer-events:none}

/* ---- SIDEBAR FLOTTANTE DES CHAPITRES ---- */
#br-sidebar{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:401;width:236px;max-height:74vh;overflow-y:auto;background:rgba(13,13,26,.94);border:1px solid #1e1e35;border-radius:16px;padding:8px;backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(0,0,0,.5);scrollbar-width:thin}
#br-sidebar::-webkit-scrollbar{width:4px}
#br-sidebar::-webkit-scrollbar-thumb{background:#8a7222;border-radius:2px}
#br-sidebar .sb-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 10px;border-bottom:1px solid #1e1e35;margin-bottom:6px}
#br-sidebar .sb-head .t{color:#c9a227;font-size:.68em;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
#br-sidebar .sb-head .x{background:none;border:none;color:#7a7885;cursor:pointer;font-size:1em;padding:2px 6px;border-radius:6px}
#br-sidebar .sb-head .x:hover{color:#c9a227;background:rgba(201,162,39,.1)}
#br-sidebar .sb-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:none;background:none;border-radius:9px;cursor:pointer;color:#8a8794;font-size:.8em;transition:all .18s;text-align:left;font-family:Inter,sans-serif}
#br-sidebar .sb-item .n{flex-shrink:0;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.05);color:#8a7222;font-weight:800;font-size:.85em}
#br-sidebar .sb-item .ar{font-family:Amiri,serif;color:#c9a227;font-size:1.15em;flex-shrink:0}
#br-sidebar .sb-item .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#br-sidebar .sb-item:hover{color:#e0be4a;background:rgba(201,162,39,.08)}
#br-sidebar .sb-item.active{color:#e0be4a;background:rgba(201,162,39,.16)}
#br-sidebar .sb-item.active .n{background:#c9a227;color:#06060f}
#br-sb-toggle{display:none;position:fixed;bottom:22px;left:16px;z-index:402;width:50px;height:50px;border-radius:50%;background:#c9a227;color:#06060f;border:none;font-size:1.25em;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.6);align-items:center;justify-content:center}
#br-sb-backdrop{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.55)}

/* Mode rétractable (mobile / écran étroit) */
@media(max-width:1280px){
  #br-sidebar{left:-270px;top:60px;transform:none;transition:left .3s ease;max-height:calc(100vh - 150px);box-shadow:0 10px 60px rgba(0,0,0,.8)}
  #br-sidebar.open{left:12px}
  #br-sb-toggle{display:flex}
  #br-sb-backdrop.show{display:block}
}
/* Délai/fondu d'ouverture */
#bio-reader .br-sheet{animation:sheetin .4s ease-out}
@keyframes sheetin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:640px){
.br-sheet{padding:60px 16px 40px}
.br-sheet p.br-p{font-size:.95em;text-align:left}
#cit-tip{max-width:calc(100vw - 24px)}
.ct-ar{font-size:1.1em}
.br-nav .nv .who{font-size:1em}
}