/* Conteneur plein écran + padding 15px */

/* Home */
.baiboly-title{font-size:28px;margin:20px 0 10px}
.baiboly-columns{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.baiboly-columns h3{margin:0 0 10px;font-size:18px;opacity:.9}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.book-btn{
  appearance:none;border:0;cursor:pointer;border-radius:10px;
  padding:10px 12px;background:#2a71ff;color:#fff;font-weight:600;
}
.book-btn:hover{filter:brightness(1.05)}

/* Vue chapitre */
.chapter-head{display:flex;align-items:center;gap:12px;margin:10px 0}
.chapter-head h3{margin:0;font-size:20px}
.chapter-head .back{border:0;background:#222;color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}

.chapter-body{display:grid;grid-template-columns:160px 1fr;gap:16px}
.num-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:6px}
.num-grid .num{border:0;background:#eee;border-radius:8px;padding:6px 0;cursor:pointer}
.num-grid .num:hover{background:#ddd}

.verses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.verse{background:#0f1b2b;color:#cfe3ff;border-radius:10px;padding:12px 14px;}
.verse b{display:inline-block;min-width:22px;margin-right:8px;color:#7fb1ff}

/* Optionnel: pour limiter à 3 lignes dans certaines listes, dé-commente :
.verse{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
*/

.loading{padding:30px 0;opacity:.7}
@media (max-width: 800px){
  .chapter-body{grid-template-columns:1fr}
}

/* ========== RFM2A Baiboly — thème rapide ==========
   Tu peux changer ces couleurs librement
   ================================================ */
/* ===== Cartes & versets ===== */
#rfm2a-baiboly .verse, #baiboly .verse{
  background: var(--rfm-card-bg, #0a2030);
  border: 1px solid var(--rfm-card-bd, rgba(255,255,255,.12));
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  line-height: 1.55;
  color: var(--rfm-card-fg, #d9e7ff);
}

/* Petit carré du numéro au début du verset */
#rfm2a-baiboly .verse .vnum, #baiboly .verse .vnum{
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  background: var(--rfm-chip-bg, #12283a);
  color: var(--rfm-chip-fg, #a5c6ff);
  border: 1px solid var(--rfm-chip-bd, rgba(255,255,255,.18));
  border-radius: 7px;
  font-weight: 700; font-size: 13px;
  margin-right: 10px;
}

/* ===== Rail (colonne) des numéros — petits carrés ===== */
#rfm2a-baiboly .verse-rail, #baiboly .verse-rail{
  position: sticky; top: 96px;    /* reste visible au scroll */
  display: grid;
  grid-template-columns: repeat(5, 32px); /* 5 colonnes */
  gap: 8px 12px;
  align-content: flex-start;       /* <- corrige "start" */
}

/* Les petits carrés cliquables du rail */
#rfm2a-baiboly .verse-rail button, #baiboly .verse-rail button{
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--rfm-chip-bg, #12283a);
  color: var(--rfm-chip-fg, #a5c6ff);
  border: 1px solid var(--rfm-chip-bd, rgba(255,255,255,.18));
  border-radius: 7px;
  font-size: 13px;
  outline: 0;
  transition: transform .125s, background .125s, color .125s;
  cursor: pointer;
}

#rfm2a-baiboly .verse-rail button:hover,
#baiboly .verse-rail button:hover{
  transform: translateY(-1px);
  background: var(--rfm-card-bg, #0a2030);
  color: var(--rfm-rail-fg-active, #fff);
}

#rfm2a-baiboly .verse-rail button,
#baiboly .verse-rail a,
#baiboly .verse-rail button{
  display:flex;
  width:28px; height:28px;
  align-items:center; justify-content:center;
  border-radius:6px;
  background: var(--rfm-chip-bg);
  color: var(--rfm-chip-fg);
  text-decoration:none;
  border: 1px solid var(--rfm-card-bd);
  font-weight:600; font-size:13px;
  transition: transform .12s, background .12s, color .12s;
  cursor: pointer;
}

#rfm2a-baiboly .verse-rail a:hover,
#rfm2a-baiboly .verse-rail button:hover,
#baiboly .verse-rail a:hover,
#baiboly .verse-rail button:hover{
  transform: translateY(-1px);
  background: var(--rfm-chip-active);
  color: #001a2b;
}

/* État actif/verset courant si tu ajoutes la classe .is-active
   ou aria-current="true" au bouton/lien */
#rfm2a-baiboly .verse-rail .is-active,
#baiboly .verse-rail .is-active,
#rfm2a-baiboly .verse-rail [aria-current="true"],
#baiboly .verse-rail [aria-current="true"]{
  background: var(--rfm-chip-active);
  color:#001a2b;
}

/* ===== Variables – tu peux tout changer ici ===== */
:root{
  --rfm-bg: #0f2333;

  /* cartes (versets) */
  --rfm-card-bg: #0a2030;
  --rfm-card-bd: rgba(255,255,255,.12);
  --rfm-card-fg: #d9e7ff;

  /* puces / petits carrés */
  --rfm-chip-bg: #12283a;
  --rfm-chip-fg: #a5c6ff;
  --rfm-chip-bd: rgba(255,255,255,.18);

  /* taille d’un petit carré (rail & numéro) */
  --chip-size: 26px; /* ⇦ change 26px si tu veux encore plus petit/grand */
  --chip-radius: 6px;
}

/* fond + padding de la page Bible */
.baiboly-app{ padding:0 15px; }
#baiboly, #rfm2a-baiboly{ background: var(--rfm-bg, #0f2333)

.baiboly-app { padding: 0 15px; }

#baiboly, #rfm2a-baiboly {
  background: var(--rfm-bg, #0f2333);
}

/* Empêcher le rail de s'étirer comme la colonne des versets */
.chapter-body {
  align-items: flex-start;   /* au lieu de stretch */
}

/* Rail des numéros : compact et calé en haut */
#rfm2a-baiboly .verse-rail,
#baiboly .verse-rail{
  position: sticky; top: 96px;
  display: grid;
  grid-template-columns: repeat(5, 28px);
  grid-auto-rows: 28px;
  gap: 8px 10px;
  align-content: flex-start;
  justify-content: flex-start;
  align-self: flex-start;
}

/* Chaque verset en 2 colonnes: puce + texte */
.verse{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}
.verse b{ grid-column: 1; margin: 0; }
.verse .vnum{
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  background: var(--rfm-chip-bg,#12283a);
  color: var(--rfm-chip-fg,#a5c6ff);
  border: 1px solid var(--rfm-chip-bd,rgba(255,255,255,.18));
  border-radius: 7px;
  font-weight: 700; font-size: 13px;
}
.verse b + *{ grid-column: 2; } /* le texte en colonne 2 */