/* ============================================================
   histoire.css — « Histoire du clan Đinh Nho de Hương Sơn »
   Livre long intégré dans la vue #histoire du SPA.
   TOUS les sélecteurs sont scopés sous .hist-book afin d'éviter
   tout conflit avec main.css / livret.css.
   Palette aux noms distincts (--laque, --or… vs --lacquer, --gold).
   ============================================================ */

.hist-book{
  /* Palette alignée sur les primitives du design system (source unique). */
  --laque:var(--c-laque);
  --laque-clair:var(--c-laque-light);
  --or:var(--c-or);
  --or-clair:var(--c-or-soft);
  --jade:var(--c-jade);
  --jade-clair:#E7F0EC;
  --ivoire:var(--c-ivoire);
  --ivoire-2:var(--c-ivoire-2);
  --encre:var(--c-encre);
  --sepia:var(--c-sepia);
  --ligne:var(--c-ligne);
  --hb-maxw:42rem;

  background:var(--ivoire);
  color:var(--encre);
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  font-weight:400;
  font-size:1.02rem;
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
.hist-book *{box-sizing:border-box;}
.hist-book .han{font-family:'Noto Serif TC',serif;}

/* ---------- COUVERTURE ---------- */
.hist-book .cover{
  background:radial-gradient(120% 90% at 50% -10%, #92161A 0%, var(--laque) 45%, #5E0C0E 100%);
  color:var(--ivoire);
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:5rem 1.5rem;position:relative;overflow:hidden;
}
.hist-book .cover::before{content:"";position:absolute;inset:1.1rem;border:1px solid rgba(217,188,106,.45);pointer-events:none;}
.hist-book .cover::after{content:"";position:absolute;inset:1.5rem;border:1px solid rgba(217,188,106,.22);pointer-events:none;}
.hist-book .cover-han{font-family:'Noto Serif TC',serif;font-weight:700;font-size:clamp(1.9rem,7vw,3.3rem);color:var(--or-clair);letter-spacing:.35em;line-height:1.6;margin:0 0 .2rem;text-indent:.35em;}
.hist-book .cover-han-translit{font-family:var(--serif);font-style:italic;color:rgba(251,247,239,.78);font-size:clamp(.85rem,3.5vw,1.05rem);letter-spacing:.04em;margin-bottom:2.6rem;}
.hist-book .cover-seal{width:64px;height:64px;margin:0 auto 2.2rem;border:2px solid var(--or-clair);display:flex;align-items:center;justify-content:center;color:var(--or-clair);font-family:'Noto Serif TC',serif;font-weight:700;font-size:2rem;border-radius:4px;box-shadow:0 0 0 4px rgba(217,188,106,.12);}
.hist-book .cover h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,5.2vw,2.7rem);line-height:1.18;margin:0 0 1rem;color:#fff;max-width:24ch;}
.hist-book .cover .sous{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,3.6vw,1.25rem);color:var(--or-clair);margin-bottom:2.6rem;}
.hist-book .cover .rule{width:46px;height:2px;background:var(--or);margin:0 0 2.4rem;}
.hist-book .cover .place{font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(251,247,239,.7);}
.hist-book .cover .place strong{color:var(--or-clair);font-weight:600;}

/* ---------- STRUCTURE GÉNÉRALE ---------- */
.hist-book .hb-main{max-width:var(--hb-maxw);margin:0 auto;padding:0 1.4rem;}
.hist-book section{padding:3.4rem 0;border-top:1px solid var(--ligne);}
.hist-book .hb-main > section:first-of-type{border-top:none;}

.hist-book .eyebrow{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--or);font-weight:600;
  display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem;
}
.hist-book .eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--or);display:inline-block;}

.hist-book h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,4.6vw,2.05rem);
  line-height:1.16;color:var(--laque);
  margin:.15rem 0 1.3rem;letter-spacing:-.01em;
}
.hist-book h2 .gen{
  display:block;font-family:'Be Vietnam Pro',sans-serif;
  font-size:.8rem;font-weight:500;letter-spacing:.05em;
  color:var(--sepia);text-transform:none;margin-top:.4rem;
}
.hist-book h3{font-family:var(--serif);font-weight:600;font-size:1.18rem;color:var(--jade);margin:2.2rem 0 .7rem;}
.hist-book p{margin:0 0 1.05rem;}
.hist-book a{color:var(--laque-clair);}

/* chapitre : numéro de sceau + titre */
.hist-book .chap-head{display:flex;gap:1.1rem;align-items:flex-start;margin-bottom:.4rem;}
.hist-book .chap-num{
  flex:0 0 auto;margin-top:.35rem;
  width:2.7rem;height:2.7rem;border-radius:5px;
  background:var(--laque);color:var(--or-clair);
  font-family:'Noto Serif TC',serif;font-weight:700;font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 rgba(123,17,19,.25), inset 0 0 0 1px rgba(217,188,106,.4);
}
.hist-book .chap-head .chap-titlewrap{flex:1 1 auto;}
.hist-book .chap-head .eyebrow{margin-bottom:.35rem;}
.hist-book .chap-head h2{margin-top:.1rem;}

/* lettrine */
.hist-book .lede::first-letter{
  font-family:var(--serif);font-weight:700;
  float:left;font-size:3.3rem;line-height:.82;
  padding:.32rem .55rem .1rem 0;color:var(--laque-clair);
}

.hist-book strong, .hist-book b{font-weight:600;color:var(--encre);}
.hist-book .nom{font-weight:600;color:var(--laque);white-space:nowrap;}
.hist-book em.dates{font-style:normal;color:var(--sepia);font-weight:500;font-size:.92em;}

/* citation / vers */
.hist-book blockquote{
  margin:1.6rem 0;padding:1.1rem 1.4rem;
  border-left:3px solid var(--or);
  background:var(--ivoire-2);
  font-family:var(--serif);font-style:italic;color:var(--encre);
}
.hist-book blockquote p{margin:0 0 .5rem;}
.hist-book blockquote p:last-child{margin-bottom:0;}
.hist-book blockquote .src{
  display:block;font-family:'Be Vietnam Pro',sans-serif;font-style:normal;
  font-size:.8rem;color:var(--sepia);margin-top:.6rem;letter-spacing:.02em;
}
.hist-book .vers{text-align:center;line-height:1.8;}

/* encadré jade : note méthodo, certitudes/hypothèses */
.hist-book .note{margin:1.8rem 0;border:1px solid #BFD8CE;border-radius:6px;background:var(--jade-clair);overflow:hidden;}
.hist-book .note .note-h{
  background:var(--jade);color:#fff;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding:.5rem .95rem;display:flex;align-items:center;gap:.5rem;
}
.hist-book .note .note-h::before{content:"\2756";font-size:.8rem;color:var(--or-clair);}
.hist-book .note .note-b{padding:.9rem 1.1rem;font-size:.95rem;color:#234;}
.hist-book .note .note-b p{margin:0 0 .65rem;}
.hist-book .note .note-b p:last-child{margin-bottom:0;}

/* encadré correction (or) */
.hist-book .fix{margin:1.8rem 0;border:1px dashed var(--or);border-radius:6px;background:#FBF4E2;padding:.5rem 0;overflow:hidden;}
.hist-book .fix .note-h{
  color:var(--laque);background:transparent;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:.45rem 1.1rem .2rem;display:flex;align-items:center;gap:.5rem;
}
.hist-book .fix .note-h::before{content:"\270E";color:var(--or);}
.hist-book .fix .note-b{padding:.2rem 1.1rem .8rem;font-size:.95rem;color:#3a2f22;}
.hist-book .fix .note-b p{margin:0 0 .6rem;}
.hist-book .fix .note-b p:last-child{margin-bottom:0;}

/* sommaire */
.hist-book .toc{background:var(--ivoire-2);border-top:1px solid var(--ligne);}
.hist-book .toc ol{list-style:none;counter-reset:toc;padding:0;margin:1rem 0 0;}
.hist-book .toc li{
  counter-increment:toc;
  display:flex;gap:.9rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--ligne);
}
.hist-book .toc li::before{
  content:counter(toc,upper-roman);
  font-family:'Noto Serif TC',serif;color:var(--or);font-weight:700;
  flex:0 0 2.2rem;font-size:.95rem;
}
.hist-book .toc a{color:var(--encre);text-decoration:none;font-weight:500;cursor:pointer;}
.hist-book .toc a:hover{color:var(--laque);}
.hist-book .toc .tdesc{display:block;font-size:.82rem;color:var(--sepia);font-weight:400;}

/* fil de lignée */
.hist-book .thread{margin:1.6rem 0;padding:1.2rem 1.2rem;border:1px solid var(--ligne);border-radius:6px;background:#fff;}
.hist-book .thread .tlabel{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);font-weight:600;margin-bottom:.8rem;}
.hist-book .gens{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
.hist-book .gens .g{display:inline-flex;flex-direction:column;align-items:center;font-size:.78rem;color:var(--encre);line-height:1.2;}
.hist-book .gens .dot{width:.62rem;height:.62rem;border-radius:50%;background:var(--laque);margin-bottom:.25rem;box-shadow:0 0 0 3px rgba(123,17,19,.1);}
.hist-book .gens .arr{color:var(--or);font-weight:700;}
.hist-book .gens .g.branch .dot{background:var(--jade);box-shadow:0 0 0 3px rgba(46,111,94,.14);}

/* tableau des rameaux */
.hist-book .branches{display:grid;gap:.8rem;margin:1.4rem 0;}
.hist-book .bcard{border:1px solid var(--ligne);border-left:4px solid var(--or);border-radius:5px;background:#fff;padding:.9rem 1.05rem;}
.hist-book .bcard h3{margin:0 0 .25rem;font-family:var(--serif);font-size:1.05rem;color:var(--laque);}
.hist-book .bcard .tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--jade);font-weight:600;}
.hist-book .bcard p{margin:.35rem 0 0;font-size:.93rem;color:var(--sepia);}

.hist-book hr.soft{border:none;border-top:1px solid var(--ligne);margin:2.2rem 0;}

.hist-book .kvlist{margin:1.2rem 0;border-top:1px solid var(--ligne);}
.hist-book .kvlist .row{display:flex;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--ligne);font-size:.94rem;}
.hist-book .kvlist .k{flex:0 0 8.5rem;color:var(--or);font-weight:600;}
.hist-book .kvlist .v{flex:1 1 auto;color:var(--encre);}

/* Tableau de confrontation des sources (annexe Đinh Văn Tả).
   Même grammaire que .kvlist — filets couleur ligne, en-têtes à l'or — mais
   sur trois colonnes, parce qu'il met deux témoignages en regard d'un même
   point. Il déborde horizontalement plutôt que d'écraser la colonne du livre. */
.hist-book .hist-table-wrap{overflow-x:auto;margin:1.4rem 0;}
.hist-book .hist-table{
  width:100%;border-collapse:collapse;font-size:.94rem;
  border-top:1px solid var(--ligne);
}
.hist-book .hist-table th,
.hist-book .hist-table td{
  text-align:left;vertical-align:top;padding:.6rem .9rem .6rem 0;
  border-bottom:1px solid var(--ligne);
}
.hist-book .hist-table thead th{
  color:var(--or);font-weight:600;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.hist-book .hist-table tbody td:first-child{
  color:var(--or);font-weight:600;white-space:nowrap;padding-right:1.4rem;
}
@media (max-width:640px){
  .hist-book .hist-table{min-width:34rem;}
}

/* pied du livre */
.hist-book .hb-foot{
  background:var(--laque);color:rgba(251,247,239,.85);
  text-align:center;padding:3rem 1.5rem;margin-top:0;
  border-top:4px solid var(--or);
}
.hist-book .hb-foot .han{color:var(--or-clair);font-size:1.4rem;letter-spacing:.3em;display:block;margin-bottom:1rem;}
.hist-book .hb-foot p{margin:.3rem 0;font-size:.85rem;}
.hist-book .hb-foot .sources{font-size:.76rem;color:rgba(251,247,239,.6);max-width:34rem;margin:1.2rem auto 0;line-height:1.6;}

/* ---------- ENCART « jeunes générations » ---------- */
.hist-book .young-callout{
  margin:2.4rem 0 .2rem;
  padding:.95rem 1.2rem;
  background:rgba(184,137,59,.10);
  border:1px solid var(--ligne);
  border-left:3px solid var(--or);
  border-radius:0 8px 8px 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .85rem;
  font-size:.95rem;line-height:1.4;
}
.hist-book .young-callout .yc-ic{color:var(--laque);font-size:1.1rem;line-height:1;}
.hist-book .young-callout .yc-title{
  font-family:var(--serif);font-weight:600;color:var(--laque);
  text-decoration:none;border-bottom:1px solid rgba(123,17,19,.4);
}
.hist-book .young-callout .yc-title:hover{color:var(--laque-clair);border-bottom-color:var(--laque-clair);}
.hist-book .young-callout .yc-sep{color:var(--ligne);}
.hist-book .young-callout .yc-vn{font-size:.85rem;color:var(--sepia);text-decoration:none;border-bottom:1px solid var(--ligne);}
.hist-book .young-callout .yc-vn:hover{color:var(--jade);border-bottom-color:var(--jade);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:560px){
  .hist-book{font-size:.99rem;}
  .hist-book .chap-num{width:2.3rem;height:2.3rem;font-size:1.05rem;}
  .hist-book .kvlist .k{flex-basis:6.5rem;}
  .hist-book .gens{font-size:.72rem;}
}

/* ---------- IMPRESSION ---------- */
@media print{
  .hist-book{--hb-maxw:100%;font-size:11pt;line-height:1.5;background:#fff;}
  .hist-book .cover{min-height:auto;height:99vh;page-break-after:always;background:var(--laque) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .hist-book .cover-han,.hist-book .cover-seal,.hist-book .cover h1,.hist-book .cover .sous,.hist-book .cover .place strong,.hist-book .cover-han-translit{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .hist-book section{page-break-inside:auto;padding:1.4rem 0;}
  .hist-book h2,.hist-book h3{page-break-after:avoid;}
  .hist-book blockquote,.hist-book .note,.hist-book .fix,.hist-book .thread,.hist-book .bcard{page-break-inside:avoid;}
  .hist-book .chap-num,.hist-book .note .note-h,.hist-book .bcard,.hist-book .hb-foot{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .hist-book .toc{page-break-after:always;}
  .hist-book .young-callout{display:none;}
  .hist-book a{color:var(--encre);text-decoration:none;}
  .hist-book .hb-foot{page-break-before:always;}
}

/* ── Visibilité FR / VN / EN — état initial (le JS prend le relais) ── */
.hist-book[lang="vi"] { display: none; }
.hist-book[lang="en"] { display: none; }

/* ── Carte SVG Văn Miếu ── */
.vanmieu-svg { width: 100%; height: auto; display: block; }

/* Noms de figures cliquables (renvoi vers /figures) */
.hist-book a.nom{font-weight:600;color:var(--laque);white-space:nowrap;text-decoration:underline dotted rgba(169,128,58,.7);text-underline-offset:3px;}
.hist-book a.nom:hover{text-decoration-style:solid;}

/* ── Frise chronologique (après le sommaire) ── */
.hb-frise{margin:34px auto;max-width:900px;padding:0 8px;}
.hb-frise .fr-title{font-family:'Be Vietnam Pro',serif;font-size:1.3rem;color:var(--laque);margin-bottom:14px;text-align:center;}
.hb-frise ol{list-style:none;margin:0;padding:0;position:relative;}
.hb-frise ol::before{content:"";position:absolute;left:86px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--or),rgba(169,128,58,.25));}
.hb-frise li{display:flex;gap:18px;align-items:baseline;padding:7px 0;position:relative;}
.hb-frise .fy{flex:0 0 72px;text-align:right;font-family:'Be Vietnam Pro',serif;font-weight:700;font-size:1.08rem;color:var(--laque);white-space:nowrap;}
.hb-frise li::after{content:"";position:absolute;left:81px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--or);border:2px solid #fff;box-shadow:0 0 0 1px var(--or);}
.hb-frise .fl{flex:1;font-size:.95rem;color:var(--ink,#2c1e13);padding-left:16px;}
@media (max-width:560px){.hb-frise .fy{flex-basis:58px;font-size:.95rem}.hb-frise ol::before{left:70px}.hb-frise li::after{left:65px}}

/* ── Barre de chapitres collante ──
   Les styles .hb-sticky sont désormais dans design-system.css (feuille globale)
   car la barre est utilisée par plusieurs vues (histoire, jeunes, héritage,
   recueils). Ne rien redéfinir ici pour éviter la divergence. */

/* Carte du chapitre (déplacée depuis design-system.css — audit n°6 : le
   livre Histoire est entièrement stylé ici, feuille chargée avec sa vue). */
.hist-book .hb-map-wrap { margin: 2rem 0 2.4rem; }
.hist-book .hb-map-frame {
  position: relative; width: 100%;
  height: clamp(520px, 80vh, 1040px);
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.hist-book .hb-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 760px) {
  .hist-book .hb-map-frame { height: clamp(400px, 70vh, 600px); }
}

/* ── Le répertoire des rameaux (chapitres IV, VI, VII, VIII, IX) ──
   Cinq chapitres consécutifs de structure identique — une branche, ses
   lauréats, ses lieux — forment ~3 000 mots au milieu du récit. C'est de la
   matière de référence : le lecteur doit pouvoir la reconnaître comme telle et
   la parcourir, sans qu'elle soit pour autant repliée (elle resterait invisible
   sans JavaScript, et introuvable par la recherche du navigateur). Un filet en
   marge et un fond légèrement distinct suffisent à dire « on consulte ici ». */
.hist-book .hb-repertoire { background: var(--ivoire-2); border-left: 3px solid var(--or); }
.hist-book .hb-repertoire > * { padding-left: 1.15rem; padding-right: .4rem; }
@media (max-width: 640px) { .hist-book .hb-repertoire > * { padding-left: .8rem; } }

/* ── La note dépliable de l'annexe Đinh Văn Tả ──
   Repliée par défaut : c'est une divergence de source sur une lignée que les
   chefs de clan ont justement décidé de ne PAS rattacher. Elle doit rester
   consultable près de la question qu'elle éclaire, sans interrompre le récit. */
.hist-book .hb-annexe {
  margin: 1.6rem 0 .4rem; padding: 0 1rem; border: 1px solid var(--ligne);
  border-radius: var(--r-md, 8px); background: #fff;
}
.hist-book .hb-annexe > summary {
  cursor: pointer; padding: .85rem 0; font-weight: 600; color: var(--laque);
  font-size: .95rem; list-style-position: inside;
}
.hist-book .hb-annexe > summary:hover { color: var(--or); }
.hist-book .hb-annexe[open] > summary { border-bottom: 1px solid var(--ligne); margin-bottom: .6rem; }
.hist-book .hb-annexe > :last-child { margin-bottom: 1rem; }

/* Ce qui suit les onze chapitres, annoncé dès le sommaire. */
.hist-book .toc .toc-suite { margin: 1.1rem 0 0; font-size: .88rem; color: var(--sepia); }
.hist-book .toc .toc-suite a { font-weight: 600; }

/* ══════════════════ ILLUSTRATIONS DE CHAPITRE ══════════════════════════════
   Deux natures d'images, et la distinction est délibérée.

   · Les DOCUMENTS D'ÉPOQUE (.hb-fig) — le temple de Hoa Lư, une page de gia
     phả, le champ d'examen de 1897 — viennent de Wikimedia Commons et portent
     leur crédit : c'est la condition de leur usage, pas un ornement.

   · Les LIEUX DU CLAN avaient déjà leur place, au chapitre XI : une grille
     d'emplacements « photo-slot » que le site remplit dès qu'une photo arrive
     sur le serveur. On n'y a pas touché — la vérifier avant d'ajouter aurait
     évité d'en poser une seconde, en double.

   Les chapitres purement lignagers restent sans image : rien ne les documente,
   et un ornement n'aurait rien ajouté. */
.hist-book .hb-fig{
  width:min(460px,100%); margin:20px auto 24px; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.hist-book .hb-fig img{
  display:block; width:100%; height:auto; border-radius:10px;
  border:1px solid rgba(169,128,58,.34); background:rgba(169,128,58,.06);
}
.hist-book .hb-fig figcaption{
  font-size:.79rem; line-height:1.55; color:var(--c-sepia,#5d5346); font-style:italic;
}
.hist-book .hb-fig .hb-fig-src{
  display:block; margin-top:5px; font-style:normal; font-size:.72rem;
  color:var(--c-sepia-soft,#6d6154);
}
.hist-book .hb-fig .hb-fig-src a{
  color:inherit; text-decoration:underline;
  text-decoration-color:rgba(169,128,58,.5); text-underline-offset:2px;
}
.hist-book .hb-fig .hb-fig-src a:hover{ color:var(--c-or,#a9803a); }
@media (max-width:760px){
  .hist-book .hb-fig{ width:100%; margin:16px 0 20px; }
}
@media print{
  /* Hauteur bornée : une figure haute qu'on refuse de couper se fait renvoyer
     à la page suivante, en laissant une demi-page blanche derrière elle. */
  .hist-book .hb-fig{ width:auto; max-width:58%; margin:12px 0 16px;
    align-items:flex-start; break-inside:avoid; page-break-inside:avoid; }
  .hist-book .hb-fig img{ width:auto; max-width:100%; max-height:72mm;
    border-color:rgba(156,122,46,.5); }
}