/* Thèmes bibliques (themes.html). Uniquement les jetons de site.css.
   Mobile d'abord : une colonne, la fiche remplace la liste ; à partir de
   1000 px, la liste reste à gauche et la fiche s'ouvre à droite. */

.themes-crumb { font-size: .88rem; margin-bottom: var(--s2); }
.themes-crumb a { color: var(--ink-soft); }

.themes-layout { display: grid; gap: var(--s5); align-items: start; }
.themes-layout > * { min-width: 0; }
@media (max-width: 999px) {
  .themes-layout.is-reading .themes-side { display: none; }
}
@media (min-width: 1000px) {
  .themes-layout { grid-template-columns: 21rem minmax(0, 1fr); }
  .themes-side { position: sticky; top: calc(5rem + var(--safe-top)); }
  .themes-back { display: none; }
}

/* ------------------------------------------------------------ colonne */

.themes-side { display: grid; gap: var(--s3); }
.themes-help { font-size: .82rem; color: var(--ink-faint); margin: 0; }
.themes-count { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.themes-letters .chip { min-width: 2.1rem; padding-inline: .5rem; text-align: center; }
.themes-list { max-height: 60vh; }
@media (min-width: 1000px) { .themes-list { max-height: calc(100vh - 22rem); min-height: 16rem; } }

.themes-hit {
  grid-template-columns: minmax(0, 1fr) auto; text-decoration: none;
  min-height: var(--tap); align-items: center;
}
.themes-hit-main { display: grid; min-width: 0; }
.themes-hit-title { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.themes-en { font-size: .78rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.themes-hit-meta { display: grid; justify-items: end; gap: 2px; }
.themes-n { font-size: .75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.themes-src-0 { color: var(--blue-ink); }
.themes-src-1 { color: var(--orange-ink); }

/* -------------------------------------------------------------- fiche */

.themes-card { min-height: 20rem; scroll-margin-top: 5rem; }
.themes-card:focus { outline: none; }
.themes-back { margin-bottom: var(--s3); min-height: var(--tap); }
.themes-card-head h2 { margin-bottom: var(--s2); overflow-wrap: anywhere; }
.themes-card-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center;
  font-size: .85rem; color: var(--ink-soft);
}
.themes-desc { font-family: var(--font-read); font-size: 1.05rem; margin-top: var(--s3); }

.themes-items { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.themes-item { min-width: 0; }
.themes-item.lvl-0 { margin-top: var(--s2); }
.themes-item.lvl-0:first-child { margin-top: 0; }
.themes-item.lvl-0 > .themes-h { font-size: 1.05rem; font-weight: 700; }
.themes-item.lvl-1 { padding-left: var(--s4); }
.themes-item.lvl-1 > .themes-h { font-weight: 600; }
.themes-item.lvl-2 { padding-left: var(--s6); }
.themes-item.lvl-3 { padding-left: var(--s7); }
@media (max-width: 480px) {
  .themes-item.lvl-1 { padding-left: var(--s3); }
  .themes-item.lvl-2 { padding-left: var(--s4); }
  .themes-item.lvl-3 { padding-left: var(--s5); }
}
.themes-item:not(.lvl-0) { border-left: 2px solid var(--border); padding-top: 2px; }
.themes-item:not(.lvl-0) { margin-left: 0; }
/* L'intitulé et ses pastilles sur une même ligne quand la place le permet. */
.themes-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
.themes-h { overflow-wrap: anywhere; }
.themes-h.is-en, .themes-desc.is-en { color: var(--ink-soft); font-style: italic; }
.themes-en-mark {
  display: inline-block; margin-left: .4rem; padding: 0 .3rem; border-radius: 4px;
  border: 1px solid var(--border-strong); font-size: .62rem; font-style: normal;
  font-weight: 700; letter-spacing: .06em; color: var(--ink-faint);
  text-decoration: none; vertical-align: .15em;
}
.themes-refs { display: flex; flex-wrap: wrap; gap: .3rem; }
.themes-refs a { font-variant-numeric: tabular-nums; }
/* Sur écran tactile, chaque pastille atteint la cible de 44 px. */
@media (pointer: coarse) {
  .themes-refs a { min-height: var(--tap); display: inline-flex; align-items: center; padding-inline: .7rem; font-size: .85rem; }
  .themes-letters .chip, .themes-sources .chip, .themes-near { min-height: var(--tap); }
}

.themes-read {
  padding: .05rem .5rem; border-radius: 999px; border: 1px dashed var(--border-strong);
  background: none; color: var(--ink-soft); font: inherit; font-size: .75rem; cursor: pointer;
}
.themes-read:hover { border-color: var(--accent); color: var(--accent); }
@media (pointer: coarse) { .themes-read { min-height: var(--tap); } }
.themes-read[aria-expanded="true"] { background: var(--surface-2); border-style: solid; }
.themes-texts {
  margin-top: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--radius-sm);
  background: var(--bg-alt); font-family: var(--font-read); font-size: .95rem;
}
.themes-texts p { margin: 0 0 var(--s2); }
.themes-texts p:last-child { margin-bottom: 0; }
.themes-texts p > a { font-family: var(--font-ui); font-size: .78rem; font-weight: 700; margin-right: .3rem; }
.themes-verse b { font-family: var(--font-ui); font-size: .7rem; color: var(--ink-faint); font-weight: 600; }
.themes-more { color: var(--ink-faint); }

.themes-see { font-size: .85rem; color: var(--ink-soft); margin: var(--s1) 0 0; }
.themes-see-label { color: var(--ink-faint); }

.themes-neighbours { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--border); }
.themes-neighbours h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.themes-neighbours .filters { margin-bottom: var(--s3); }
.themes-near { text-decoration: none; display: inline-flex; align-items: center; }
.themes-near:hover { border-color: var(--accent); color: var(--accent); }
.themes-prevnext {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  font-size: .88rem; margin-bottom: var(--s3);
}
.themes-prevnext a { min-height: var(--tap); display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.themes-credit { font-size: .8rem; color: var(--ink-faint); margin: var(--s4) 0 0; }

.themes-welcome h2 { font-size: 1.3rem; }
.themes-picks { margin-bottom: var(--s4); }
.themes-hint { font-size: .88rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- aperçu */

.themes-tip {
  position: absolute; z-index: 60; max-width: calc(100vw - 24px);
  padding: var(--s3) var(--s4); border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); color: var(--ink);
  font-family: var(--font-read); font-size: .92rem; line-height: 1.5;
  pointer-events: none;
}
.themes-tip strong { font-family: var(--font-ui); font-size: .8rem; color: var(--blue-ink); margin-right: .3rem; }
.themes-tip[hidden] { display: none; }

#sources { scroll-margin-top: 5rem; }