/*
 * 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;

  /*
   * Teintes de famille pour la page des livres. Très basse saturation et base
   * chaude commune : elles se lisent comme des nuances de papier, pas comme
   * des couleurs. Chacune est vérifiée à 4.5:1 sur le compteur de chapitres,
   * qui est le texte le plus fragile du bouton.
   */
  --tint-pentateuque: #eaf0f7;
  --tint-historiques: #f6efe2;
  --tint-poetiques: #f4f0f8;
  --tint-grands: #fbf0ee;
  --tint-petits: #f9f0e6;
  --tint-evangiles: #eaf3ec;
  --tint-actes: #e8f2f2;
  --tint-paul: #f6f3e4;
  --tint-pastorales: #f1f2e6;
  --tint-galates: #faf0dd;
  --tint-generales: #eef1ea;
  --tint-apocalypse: #faeff3;
  --tint-galates-rule: #c9974a;
}

/*
 * 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;

    --tint-pentateuque: #1e2530;
    --tint-historiques: #282218;
    --tint-poetiques: #241f2c;
    --tint-grands: #2c1e1d;
    --tint-petits: #2b2118;
    --tint-evangiles: #1d2620;
    --tint-actes: #1b2626;
    --tint-paul: #26241a;
    --tint-pastorales: #242618;
    --tint-galates: #3a2c12;
    --tint-generales: #20241d;
    --tint-apocalypse: #291d24;
    --tint-galates-rule: #b8862f;
  }
}

: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;

  --tint-pentateuque: #1e2530;
  --tint-historiques: #282218;
  --tint-poetiques: #241f2c;
  --tint-grands: #2c1e1d;
  --tint-petits: #2b2118;
  --tint-evangiles: #1d2620;
  --tint-actes: #1b2626;
  --tint-paul: #26241a;
  --tint-pastorales: #242618;
  --tint-galates: #3a2c12;
  --tint-generales: #20241d;
  --tint-apocalypse: #291d24;
  --tint-galates-rule: #b8862f;
}

/* 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-bar-testaments {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Nom entier par défaut, sigle sur téléphone. */
.bpb-bar-link .is-short { display: none; }

.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;
}
/* La teinte vient de la famille du livre, posée par le gabarit. */
.bpb-grid a[data-tint] { background: var(--tint, var(--bpb-card)); }
.bpb-grid a[data-tint="pentateuque"] { --tint: var(--tint-pentateuque); }
.bpb-grid a[data-tint="historiques"] { --tint: var(--tint-historiques); }
.bpb-grid a[data-tint="poetiques"] { --tint: var(--tint-poetiques); }
.bpb-grid a[data-tint="grands"] { --tint: var(--tint-grands); }
.bpb-grid a[data-tint="petits"] { --tint: var(--tint-petits); }
.bpb-grid a[data-tint="evangiles"] { --tint: var(--tint-evangiles); }
.bpb-grid a[data-tint="actes"] { --tint: var(--tint-actes); }
.bpb-grid a[data-tint="paul"] { --tint: var(--tint-paul); }
.bpb-grid a[data-tint="pastorales"] { --tint: var(--tint-pastorales); }
.bpb-grid a[data-tint="galates"] { --tint: var(--tint-galates); }
.bpb-grid a[data-tint="generales"] { --tint: var(--tint-generales); }
.bpb-grid a[data-tint="apocalypse"] { --tint: var(--tint-apocalypse); }

/* Galates : le fond seul ne peut pas le distinguer davantage sans faire
   passer le compteur sous le seuil de contraste. Un liseré, lui, n'est
   derrière aucun texte — il signale sans rien coûter. */
.bpb-grid a[data-tint="galates"] { border-color: var(--tint-galates-rule); }

.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);
}

/* Les deux testaments se suivent sans se confondre. */
.bpb-testament + .bpb-testament { margin-top: 8px; }

.bpb-testament-rule {
  max-width: 760px;
  margin: 46px auto;
  border: 0;
  border-top: 1px solid var(--bpb-rule);
}

/* ---- 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; }

/*
 * Hébreu. Le sens d'écriture est posé sur le seul conteneur du verset : la
 * fiche, les numéros et le reste de l'interface restent de gauche à droite.
 * Corps plus grand parce que les points-voyelles sont minuscules, interligne
 * plus large parce qu'ils débordent sous la ligne.
 */
.bpb-greek.is-hebrew {
  font-family: "SBL Hebrew", "Ezra SIL", "Taamey Frank CLM", "Times New Roman", serif;
  font-size: 23px;
  line-height: 2.1;
  text-align: right;
}
.bpb-greek.is-hebrew .bpb-gw { padding: 2px 3px; }

/* Le mot hébreu de la fiche s'écrit dans son sens, sa glose dans le nôtre. */
.bpb-form-word:dir(rtl),
.bpb-lemma:dir(rtl) { unicode-bidi: isolate; }

/* 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; }
  /* Le groupe des testaments reste un seul item : c'est ce qui empêche les
     deux liens de se superposer dans la même case. */
  .bpb-bar-testaments { grid-column: 1; grid-row: 1; gap: 14px; }
  .bpb-bar-link .is-long { display: none; }
  .bpb-bar-link .is-short { display: inline; }
  .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; }
}