/*
 * Lecteur NT — ambiance papier chaud, chrome minimal.
 * Toutes les couleurs passent par des variables : le mode nuit prévu en V2 se
 * gréffera en réassignant ce bloc, sans toucher aux règles.
 */
:root {
  --bpb-paper:        #faf6ec;
  --bpb-bar:          #f6f0e2;
  --bpb-rule:         #ebe3d1;
  --bpb-rule-soft:    #efe8d8;
  --bpb-edge:         #e6ddc9;

  --bpb-ink:          #2c2620;
  --bpb-ink-title:    #3a3225;
  --bpb-ink-muted:    #6b5f47;
  --bpb-ink-faint:    #6f6448;
  --bpb-ink-fainter:  #786c50;

  /* Teintes atténuées calées sur WCAG AA contre le papier : 4.5:1 pour le
     texte, 3:1 pour les icônes. La maquette les voulait discrètes, pas
     illisibles — les numéros de verset étaient à 2.35:1. */
  --bpb-verse:        #786c50;
  --bpb-chevron:      #8a7c5e;

  --bpb-card:         #fbfaf6;
  --bpb-sep:          #c8b597;
  --bpb-ink-body:     #453d2e;
  --bpb-ink-def:      #5c5238;
  --bpb-scrim:        rgba(26, 20, 10, .30);
  --bpb-shadow:       0 10px 30px rgba(40, 30, 10, .22);

  --bpb-mark:         #eee0c4;
  --bpb-mark-rule:    #c9a86a;
  --bpb-accent:       #7a5a1f;
  --bpb-accent-bg:    #f3e9d2;

  --bpb-serif: Charter, "Source Serif Pro", Georgia, "Times New Roman", serif;
  --bpb-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bpb-measure: 600px;
}

/*
 * Mode nuit. Charbon chaud et encre blanc cassé, jamais noir ni blanc purs :
 * un contraste maximal fatigue autant qu'un contraste insuffisant sur un texte
 * qu'on lit longtemps. Seules les variables changent, aucune règle plus bas.
 *
 * Deux déclencheurs, dans cet ordre : le réglage du système, puis le choix
 * explicite du lecteur, qui l'emporte toujours.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-bpb-theme="light"]) {
    --bpb-paper:        #1c1917;
    --bpb-bar:          #232019;
    --bpb-rule:         #332e26;
    --bpb-rule-soft:    #2b2720;
    --bpb-edge:         #3a342b;

    --bpb-ink:          #e9e1d3;
    --bpb-ink-title:    #f2ebdd;
    --bpb-ink-muted:    #c0b49c;
    --bpb-ink-faint:    #b3a68c;
    --bpb-ink-fainter:  #a99c82;

    --bpb-verse:        #a99c82;
    --bpb-chevron:      #9b8f76;

    --bpb-card:         #232019;
    --bpb-sep:          #7d7263;
    --bpb-ink-body:     #ded5c4;
    --bpb-ink-def:      #cdc3ae;
    --bpb-scrim:        rgba(0, 0, 0, .58);
    --bpb-shadow:       0 10px 30px rgba(0, 0, 0, .55);

    --bpb-mark:         #3d3527;
    --bpb-mark-rule:    #8a7444;
    --bpb-accent:       #e0b972;
    --bpb-accent-bg:    #3a3122;
  }
}

:root[data-bpb-theme="dark"] {
  --bpb-paper:        #1c1917;
  --bpb-bar:          #232019;
  --bpb-rule:         #332e26;
  --bpb-rule-soft:    #2b2720;
  --bpb-edge:         #3a342b;

  --bpb-ink:          #e9e1d3;
  --bpb-ink-title:    #f2ebdd;
  --bpb-ink-muted:    #c0b49c;
  --bpb-ink-faint:    #b3a68c;
  --bpb-ink-fainter:  #a99c82;

  --bpb-verse:        #a99c82;
  --bpb-chevron:      #9b8f76;

  --bpb-card:         #232019;
  --bpb-sep:          #7d7263;
  --bpb-ink-body:     #ded5c4;
  --bpb-ink-def:      #cdc3ae;
  --bpb-scrim:        rgba(0, 0, 0, .58);
  --bpb-shadow:       0 10px 30px rgba(0, 0, 0, .55);

  --bpb-mark:         #3d3527;
  --bpb-mark-rule:    #8a7444;
  --bpb-accent:       #e0b972;
  --bpb-accent-bg:    #3a3122;
}

/* Le navigateur doit teinter ses propres surfaces (barres de défilement,
   champs de formulaire) au même rythme que la page. */
:root[data-bpb-theme="dark"] { color-scheme: dark; }
:root[data-bpb-theme="light"] { color-scheme: light; }

.bpb {
  margin: 0;
  background: var(--bpb-paper);
  color: var(--bpb-ink);
  font-family: var(--bpb-serif);
  -webkit-text-size-adjust: 100%;
}

.bpb *,
.bpb *::before,
.bpb *::after { box-sizing: border-box; }

.bpb-skip {
  position: absolute;
  left: -9999px;
}
.bpb-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--bpb-bar);
  border: 1px solid var(--bpb-mark-rule);
  border-radius: 6px;
  font-family: var(--bpb-sans);
}

/* ---- barre fine : livre, chapitre, navigation ---- */

.bpb-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: var(--bpb-bar);
  border-bottom: 1px solid var(--bpb-rule);
  font-family: var(--bpb-sans);
  font-size: 14px;
  color: var(--bpb-ink-muted);
}

/* Les deux moitiés de la barre : sélecteurs + repère à gauche, sortie +
   flèches à droite. Le centre reste vide, c'est ce qui la garde calme. */
.bpb-bar-side {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.bpb-bar-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.bpb-bar-link:hover { color: var(--bpb-accent); }
.bpb-bar-link:focus-visible {
  outline: 2px solid var(--bpb-mark-rule);
  outline-offset: 3px;
  border-radius: 3px;
}

.bpb-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bpb-picker select {
  appearance: none;
  max-width: 46vw;
  padding: 5px 26px 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--bpb-chevron) 50%),
                    linear-gradient(135deg, var(--bpb-chevron) 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-overflow: ellipsis;
}
.bpb-picker select:hover { border-color: var(--bpb-rule); }
.bpb-picker select:focus-visible { outline: 2px solid var(--bpb-mark-rule); outline-offset: 1px; }

.bpb-sep { color: var(--bpb-sep); }

.bpb-nav { display: flex; align-items: center; gap: 4px; }

.bpb-nav a,
.bpb-nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--bpb-chevron);
  text-decoration: none;
  font-size: 19px;
  line-height: 1;
}
.bpb-nav a:hover { background: var(--bpb-rule); color: var(--bpb-ink-muted); }
.bpb-nav a:focus-visible { outline: 2px solid var(--bpb-mark-rule); outline-offset: -2px; }
.bpb-nav .is-off { opacity: .3; }

/* Le bouton de thème vit hors de .bpb-nav, que le JavaScript reconstruit à
   chaque changement de chapitre : dedans, il disparaîtrait. */
.bpb-tools { display: flex; align-items: center; gap: 4px; }

.bpb-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bpb-chevron);
  cursor: pointer;
}
.bpb-theme:hover { background: var(--bpb-rule); color: var(--bpb-ink-muted); }
.bpb-theme:focus-visible { outline: 2px solid var(--bpb-mark-rule); outline-offset: -2px; }

/* On montre l'icône de la destination, pas de l'état courant. */
.bpb-theme-sun { display: none; }
:root[data-bpb-theme="dark"] .bpb-theme-moon { display: none; }
:root[data-bpb-theme="dark"] .bpb-theme-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-bpb-theme="light"]) .bpb-theme-moon { display: none; }
  :root:not([data-bpb-theme="light"]) .bpb-theme-sun { display: block; }
}

/* ---- colonne de lecture ---- */

.bpb-page {
  max-width: var(--bpb-measure);
  margin: 0 auto;
  padding: 34px 26px 72px;
}

.bpb-title {
  margin: 0 0 26px;
  font-family: var(--bpb-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--bpb-ink-title);
  text-align: center;
}

.bpb-prose {
  margin: 0;
  font-size: 19px;
  line-height: 1.85;
  color: var(--bpb-ink);
}
.bpb-prose.is-justified { text-align: justify; hyphens: auto; }

.bpb-vn {
  margin-right: 2px;
  font-family: var(--bpb-sans);
  font-size: 11px;
  color: var(--bpb-verse);
  vertical-align: super;
  line-height: 0;
  scroll-margin-top: 80px;
}

.bpb-w {
  cursor: pointer;
  border-radius: 2px;
  /* Zone tactile élargie sans casser l'interligne : la marge négative reprend
     l'espace que la marge ajoute, donc les lignes ne s'écartent pas. */
  padding: 2px 1px;
  margin: -2px -1px;
  /* Supprime le délai de 300 ms et le surlignage bleu au tap. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bpb-w:hover,
.bpb-w.is-kin {
  background: var(--bpb-mark);
  box-shadow: inset 0 -1px 0 var(--bpb-mark-rule);
}
.bpb-w:focus-visible { outline: 2px solid var(--bpb-mark-rule); outline-offset: 1px; }

:target.bpb-vn { color: var(--bpb-accent); }

/* ---- page des livres ---- */

.bpb-index { max-width: 760px; margin: 0 auto; padding: 40px 26px 72px; }

.bpb-family + .bpb-family { margin-top: 34px; }

.bpb-family h2 {
  margin: 0 0 12px;
  font-family: var(--bpb-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bpb-ink-fainter);
}

.bpb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bpb-grid a {
  display: block;
  padding: 12px 14px;
  background: var(--bpb-card);
  border: 1px solid var(--bpb-edge);
  border-radius: 8px;
  color: var(--bpb-ink);
  text-decoration: none;
  font-size: 16px;
}
.bpb-grid a:hover { background: var(--bpb-mark); border-color: var(--bpb-mark-rule); }
.bpb-grid a:focus-visible { outline: 2px solid var(--bpb-mark-rule); outline-offset: 1px; }

.bpb-grid .bpb-count {
  display: block;
  margin-top: 2px;
  font-family: var(--bpb-sans);
  font-size: 11.5px;
  color: var(--bpb-ink-fainter);
}

/* ---- popup d'étude ---- */

.bpb-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bpb-scrim);
}
.bpb-overlay[hidden] { display: none; }

.bpb-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--bpb-card);
  border: 1px solid var(--bpb-edge);
  border-radius: 12px;
  box-shadow: var(--bpb-shadow);
  overflow: hidden;
}

.bpb-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--bpb-ink-fainter);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.bpb-close:hover { background: var(--bpb-rule); }

.bpb-card-body {
  overflow-y: auto;
  /* L'arborescence Thayer arrive après le bloc « Definition » et s'insère
     au-dessus : sans cela, l'ancrage du navigateur fait descendre la fiche. */
  overflow-anchor: none;
  padding: 16px 18px 18px;
  font-family: var(--bpb-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bpb-ink-body);
}

/* Le titre porte le nom accessible de la modale, l'en-tête de fiche l'affiche. */
.bpb-card-title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- le verset en grec ---- */

.bpb-verse-head {
  margin-bottom: 10px;
  padding-right: 30px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bpb-ink-fainter);
}

.bpb-greek {
  font-family: var(--bpb-serif);
  font-size: 19px;
  line-height: 1.9;
  color: var(--bpb-ink);
}

.bpb-gw {
  padding: 1px 2px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.bpb-gw:hover { background: var(--bpb-mark); box-shadow: inset 0 -1px 0 var(--bpb-mark-rule); }
.bpb-gw:focus-visible { outline: 2px solid var(--bpb-mark-rule); outline-offset: 1px; }

/* Forme rencontrée dans le verset, distincte du lemme de dictionnaire. */
.bpb-form {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--bpb-ink-faint);
}
.bpb-form-word { font-family: var(--bpb-serif); font-size: 16px; color: var(--bpb-ink); }
.bpb-form-morph { font-style: italic; }

/* Le numéro de verset devient cliquable quand le grec est disponible. */
.bpb-vn[role="button"] { cursor: pointer; }
.bpb-vn[role="button"]:hover { color: var(--bpb-accent); }
.bpb-vn[role="button"]:focus-visible {
  outline: 2px solid var(--bpb-mark-rule);
  outline-offset: 1px;
  border-radius: 2px;
}

.bpb-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding-right: 30px;
}

.bpb-tab {
  padding: 5px 12px;
  border: 1px solid var(--bpb-edge);
  border-radius: 20px;
  background: transparent;
  color: var(--bpb-ink-faint);
  font-family: var(--bpb-serif);
  font-size: 17px;
  cursor: pointer;
}
.bpb-tab[aria-selected="true"] {
  background: var(--bpb-mark);
  border-color: var(--bpb-mark-rule);
  color: var(--bpb-ink);
}

.bpb-entry + .bpb-entry {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bpb-rule-soft);
}

.bpb-entry-head { padding-right: 30px; }

.bpb-lemma {
  font-family: var(--bpb-serif);
  font-size: 24px;
  color: var(--bpb-ink);
}
.bpb-translit { font-size: 16px; color: var(--bpb-ink-faint); }

.bpb-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--bpb-ink-fainter);
}

.bpb-pill {
  display: inline-block;
  margin: 12px 0 4px;
  padding: 5px 12px;
  border: 0;
  border-radius: 20px;
  background: var(--bpb-accent-bg);
  color: var(--bpb-accent);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.bpb-pill:hover { background: var(--bpb-mark); }

.bpb-outline { margin-top: 12px; }

.bpb-sense { margin-bottom: 8px; }
.bpb-l1 { padding-left: 12px; }
.bpb-l2 { padding-left: 24px; }

.bpb-marker {
  margin-right: 5px;
  color: var(--bpb-ink-faint);
}

.bpb-none { color: var(--bpb-ink-fainter); font-style: italic; }

.bpb-def {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bpb-rule-soft);
  color: var(--bpb-ink-def);
}
/* Reprise du haut : même contenu, mais elle ouvre la fiche au lieu de la
   clore, donc le filet passe dessous. */
.bpb-def-top {
  margin-top: 14px;
  padding-top: 0;
  padding-bottom: 12px;
  border-top: 0;
  border-bottom: 1px solid var(--bpb-rule-soft);
}
.bpb-def p { margin: 4px 0 0; }
.bpb-derivation { color: var(--bpb-ink-fainter); font-size: 12.5px; }

.bpb-label {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--bpb-ink-fainter);
}

.bpb-back,
.bpb-occ-count {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--bpb-ink-fainter);
}
.bpb-back { cursor: pointer; color: var(--bpb-accent); }

.bpb-occ-item {
  display: block;
  padding: 8px 0;
  border-top: 1px solid var(--bpb-rule-soft);
  color: inherit;
  text-decoration: none;
}
.bpb-occ-item:hover { background: var(--bpb-mark); }

.bpb-occ-ref {
  display: block;
  font-size: 12px;
  color: var(--bpb-accent);
}
.bpb-occ-text {
  display: block;
  font-family: var(--bpb-serif);
  font-size: 14px;
  color: var(--bpb-ink);
}

@media (max-width: 480px) {
  .bpb-overlay { padding: 0; align-items: flex-end; }
  .bpb-card { max-width: none; max-height: 88vh; border-radius: 12px 12px 0 0; }
}

/* ---- pied ---- */

.bpb-foot {
  max-width: var(--bpb-measure);
  margin: 0 auto;
  padding: 0 26px 40px;
  font-family: var(--bpb-sans);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--bpb-ink-fainter);
  text-align: center;
}
.bpb-foot a { color: inherit; }

.bpb-empty {
  max-width: var(--bpb-measure);
  margin: 60px auto;
  padding: 20px 26px;
  font-family: var(--bpb-sans);
  font-size: 14px;
  color: var(--bpb-ink-muted);
  text-align: center;
}

/*
 * Sélecteurs, deux liens et deux flèches ne tiennent pas sur une ligne de
 * téléphone : les libellés se chevauchaient et la barre élargissait le
 * document, ce qui faisait déborder la popup. Deux lignes, chacune tenue par
 * ses extrémités.
 */
/* La page des livres n'a qu'une sortie : la barre reste en flux simple. */
@media (max-width: 620px) {
  .bpb-bar.is-simple { display: flex; }
}

@media (max-width: 620px) {
  /* Grille explicite : laisser le flux répartir quatre blocs sur une ligne de
     téléphone faisait chevaucher « Chapitre 1 » et « Nouveau Testament ».
     display:contents fait remonter les enfants des deux moitiés comme items
     de la grille, sans toucher au DOM ni à la mise en page de bureau.
       ligne 1 : sélecteurs        flèches
       ligne 2 : Nouveau Testament Accueil */
  .bpb-bar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 16px;
  }
  /* Ligne du haut : sortir du chapitre et régler le thème — on n'y touche que
     rarement. Ligne du bas : le livre, le chapitre et les flèches, contre le
     texte, là où le pouce les trouve en lisant.
     Le bouton de thème est en haut aussi parce que ses 44 px rognaient le
     sélecteur de livre jusqu'à « Je… » quand il partageait leur ligne. */
  .bpb-bar-side,
  .bpb-tools { display: contents; }
  .bpb-bar-side:first-child .bpb-bar-link { grid-column: 1; grid-row: 1; }
  .bpb-theme { grid-column: 2; grid-row: 1; }
  .bpb-bar-side:last-child .bpb-bar-link { grid-column: 3; grid-row: 1; justify-self: end; }
  .bpb-picker { grid-column: 1; grid-row: 2; }
  .bpb-nav { grid-column: 2 / 4; grid-row: 2; justify-self: end; }
  /* Les flèches sont prioritaires. Un <select> se dimensionne sur son option
     la plus longue — « 1 Thessaloniciens » pour les livres — alors que
     « Chapitre 24 » est court et stable : c'est donc le sélecteur de livre
     qui cède et tronque, celui de chapitre garde sa largeur. */
  .bpb-picker { min-width: 0; gap: 6px; }
  .bpb-picker select { max-width: none; }
  .bpb-picker select:first-of-type { flex: 0 1 auto; min-width: 4em; }
  .bpb-picker select:last-of-type { flex: 0 0 auto; }
}

@media (max-width: 480px) {
  .bpb-page { padding: 26px 18px 60px; }
  .bpb-prose { font-size: 18px; }
  /* La justification sur colonne étroite creuse des rivières blanches. */
  .bpb-prose.is-justified { text-align: left; hyphens: none; }
  .bpb-title { font-size: 22px; }
  .bpb-index { padding: 28px 18px 60px; }
  .bpb-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/*
 * Confort tactile. Au doigt, la cible d'un mot est sa hauteur de ligne : un
 * interligne plus généreux donne de la marge d'erreur au tap sans écarter les
 * mots entre eux, et les commandes passent à 44 px, la taille recommandée.
 *
 * Les deux conditions déclenchent les mêmes règles : « pointer: coarse » vise
 * le doigt quel que soit l'écran, la largeur rattrape les navigateurs qui ne
 * rapportent pas le type de pointeur.
 */
@media (pointer: coarse), (max-width: 480px) {
  .bpb-prose { line-height: 2; }
  .bpb-w { padding: 5px 2px; margin: -5px -2px; }
  /* Un exposant de 12 px ne se touche pas. La marge négative reprend
     l'espace ajouté : la prose ne bouge pas d'un pixel. */
  .bpb-vn[role="button"] { padding: 11px 7px; margin: -11px -5px; }
  .bpb-nav a,
  .bpb-nav span,
  .bpb-theme { width: 44px; height: 44px; }
  .bpb-picker select { padding-top: 9px; padding-bottom: 9px; }
  .bpb-occ-item { padding: 12px 0; }
  .bpb-close { width: 44px; height: 44px; top: 4px; right: 4px; }
  .bpb-pill,
  .bpb-tab { padding-top: 9px; padding-bottom: 9px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* BPBEN-ONLY ════════════════════════════════════════════════════════════════
 * Tout ce qui suit est propre au lecteur anglais.
 *
 * Ce marqueur n'est pas décoratif, et il doit rester la PREMIÈRE ligne du
 * bloc : tools/package.sh coupe ici, compare tout ce qui précède avec
 * assets/css/reader.css du lecteur français, et refuse l'archive si les deux
 * ont divergé. C'est la contrepartie assumée du choix « deux plugins » — le
 * design partagé reste identique par contrôle, pas par bonne volonté. Les
 * règles anglaises vivent donc ici, et nulle part ailleurs.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* --- page d'entrée : 66 livres sous deux testaments --- */

.bpb-testament {
  margin: 44px 0 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bpb-edge);
  font-family: var(--bpb-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--bpb-ink);
}
.bpb-testament:first-of-type { margin-top: 28px; }

/* Le testament prend le <h2> ; les familles descendent d'un cran. La règle
   .bpb-family h2 reste au-dessus, inutilisée : elle appartient au cœur
   partagé, et la retoucher ferait échouer le contrôle de non-divergence. */
.bpb-family h3 {
  margin: 0 0 12px;
  font-family: var(--bpb-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bpb-ink-fainter);
}

/* --- particularités de la KJV --- */

/*
 * Mot fourni par les traducteurs, en italique depuis 1611. Il peut porter un
 * numéro Strong : .bpb-w et .bpb-add se cumulent alors sur le même élément,
 * et le mot reste cliquable.
 */
.bpb-add { font-style: italic; }

/*
 * Paroles du Christ, à la manière des éditions « red letter ».
 *
 * La variable suit le même montage à trois temps que le cœur partagé — base,
 * préférence système, choix explicite — parce que ce cœur est comparé octet
 * pour octet au lecteur français et ne peut pas accueillir une variable de
 * plus.
 *
 * Les deux teintes sont choisies au contraste mesuré, pas à l'œil : 7,34:1 sur
 * la crème et 7,47:1 sur le sombre, là où le seuil du texte courant est 4,5.
 * En mode nuit, la teinte est volontairement désaturée : un rouge franc sur
 * fond presque noir vibre et fatigue au bout d'un chapitre.
 */
:root { --bpb-wj: #9b2226; }

@media (prefers-color-scheme: dark) {
  :root:not([data-bpb-theme="light"]) { --bpb-wj: #e8938a; }
}
:root[data-bpb-theme="dark"] { --bpb-wj: #e8938a; }

.bpb-wj { color: var(--bpb-wj); }

/* Titre de psaume : du texte canonique, mais sans numéro de verset. */
.bpb-psalm-title {
  display: block;
  margin-bottom: 4px;
  color: var(--bpb-ink-faint);
}

/* --- hébreu, de droite à gauche --- */

/*
 * L'hébreu vocalisé est dense : points-voyelles sous la ligne, accents de
 * cantillation au-dessus. À la taille du grec, les signes se collent.
 */
.bpb-hebrew {
  direction: rtl;
  text-align: right;
  font-size: 25px;
  line-height: 2.2;
}
.bpb-hw { padding: 2px 3px; }

/*
 * Un chip sans numéro Strong : article ou conjonction préfixée, que la
 * concordance ne numérote pas. Il s'affiche — il fait partie du verset — mais
 * il n'ouvre aucune fiche, et le curseur doit le dire.
 */
.bpb-gw.is-off { cursor: default; opacity: .55; }
.bpb-gw.is-off:hover { background: transparent; box-shadow: none; }

/*
 * Isolation bidirectionnelle. Partout où de l'hébreu voisine de l'anglais,
 * le texte passe par <bdi>. Sans cela, l'algorithme bidi d'Unicode rattache
 * la ponctuation neutre au voisin de droite : le tiret de
 * « בָּרָא — verb, Qal perfect » se retrouve en tête de ligne, et le lecteur
 * croit à un bug d'affichage. <bdi> isole chaque fragment comme une citation.
 */
.bpb-lemma bdi,
.bpb-form-word,
.bpb-card-title bdi,
.bpb-tab bdi { unicode-bidi: isolate; }

/* Les codes de morphologie restent lus de gauche à droite, même à côté de
   l'hébreu : « Qal perfect 3rd pers. » n'est pas du texte RTL. */
.bpb-form-morph { unicode-bidi: isolate; direction: ltr; }

/* Une définition BDB mêle hébreu et anglais sur la même ligne. */
.bpb-sense bdi { unicode-bidi: isolate; }

/* L'étiquette du lexique, au-dessus de l'arborescence. */
.bpb-outline .bpb-label { display: block; margin-bottom: 8px; }