/* assets/styles/book/reader.css
 * Lecteur bilingue : un seul balisage, la langue pilotée par data-lang-mode.
 * Remplace .desktop-lang-columns et .mobile-lang-tabs.
 */

/* ---- Barre d'outils collante --------------------------------------------- */

.reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--ch-surface);
  border-bottom: 1px solid var(--ch-line);
}

.reader-progress { height: 3px; background: var(--ch-line-soft); }
.reader-progress__bar {
  width: 0;
  height: 100%;
  background: var(--ch-accent);
  transition: width .12s linear;
}

.reader-toolbar__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: .5625rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-wrap: wrap;
}
.reader-toolbar__crumbs { display: flex; align-items: baseline; gap: .375rem; min-width: 0; }
.reader-toolbar__sep { font-size: .875rem; color: var(--ch-faint); }
.reader-toolbar__back { font-size: .875rem; font-weight: 500; color: var(--ch-ink-soft); }
.reader-toolbar__back:hover { color: var(--ch-ink); }
.reader-toolbar__pos { font-size: .875rem; color: var(--ch-faint); }
.reader-toolbar__spacer { flex: 1; }
.reader-toolbar__actions { display: flex; gap: .375rem; }

/* Segmenté Français / Latin / Les deux */
.reader-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--ch-line-soft);
  border-radius: 8px;
}
.reader-seg button {
  padding: .375rem .75rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 500 .84375rem/1 var(--ch-font-ui);
  color: var(--ch-muted);
  cursor: pointer;
  white-space: nowrap;
}
.reader-seg button:hover { color: var(--ch-ink); }
.reader-seg__short { display: none; }
.reader-seg button[aria-pressed="true"] {
  background: var(--ch-surface);
  font-weight: 600;
  color: var(--ch-ink);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .10);
}

.reader-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 .75rem;
  border: 1px solid rgba(17, 24, 39, .18);
  border-radius: var(--ch-radius);
  background: var(--ch-surface);
  font: 500 .84375rem/1 var(--ch-font-ui);
  color: var(--ch-ink-soft);
  cursor: pointer;
}
.reader-btn:hover { background: var(--ch-bg-subtle); }
.reader-btn--icon { padding: 0; }

/* ---- Barre latérale des chapitres (panel_left) --------------------------- */
/* Base : .ch-list / .ch-list__head / .ch-list__row de theme.css. */

.reader-side { margin-bottom: 1rem; }
.reader-side .ch-list__head { padding: .75rem 1rem; }
.reader-side__book {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ch-ink);
}

.reader-side__row {
  align-items: baseline;
  gap: .625rem;
  padding: .625rem 1rem;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--ch-ink-soft);
}
.reader-side__num { flex: 0 0 1.25rem; font-size: .8125rem; color: var(--ch-faint); }
.reader-side__title { flex: 1; min-width: 0; }
.reader-side__row[aria-current="page"],
a.reader-side__row[aria-current="page"]:hover {
  background: var(--ch-accent-soft);
  color: var(--ch-accent);
  font-weight: 600;
}
.reader-side__row[aria-current="page"] .reader-side__num { color: var(--ch-accent); }

/* Sommaire (gauche) et widget liturgique (droite) restent visibles pendant la lecture.
   Les colonnes col-md-2 s'étirent sur toute la hauteur de la rangée : le sticky joue sur leur contenu. */
.reader-aside { display: flex; flex-direction: column; gap: 16px; }
.reader-aside .daily-liturgy-widget { margin-bottom: 0; }
@media (min-width: 768px) {
  .reader-side,
  .reader-aside { position: sticky; top: .75rem; }
}

/* ---- Corps de l'article -------------------------------------------------- */

.reader-article {
  --reader-fs: 18px; /* défaut avant/sans reader.js ; surchargé en ligne par A− / A+ */
  max-width: 700px;
  margin: 0 auto;
  padding: 2.375rem 1.5rem 2.125rem;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}
.reader-article[data-lang-mode="both"] { max-width: 1080px; }

.reader-head { display: flex; flex-direction: column; gap: .4375rem; padding-bottom: .375rem; }
.reader-head__kicker { font-size: .84375rem; font-weight: 500; color: var(--ch-faint); }
.reader-head__title {
  margin: 0;
  font-family: var(--ch-font-read);
  font-size: clamp(1.625rem, 3.2vw, 2.125rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* Contenu propre du chapitre (avant les paragraphes) */
.reader-chapter-content { font-family: var(--ch-font-read); font-size: var(--reader-fs); line-height: 1.75; color: var(--ch-ink-soft); }

/* ---- Paragraphes -------------------------------------------------------- */

/* Par défaut (mobile, et modes fr/la) : une colonne + gouttière de marque-page.
   Le latin est au-dessus du français. */
.reader-para {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 .75rem;
  align-items: start;
}

/* Tout le contenu en colonne 1, la gouttière à droite sur toute la hauteur. */
.reader-para > * { grid-column: 1; }
.reader-para > .reader-para__gutter { grid-column: 2; grid-row: 1 / span 4; }

.reader-para__la,
.reader-para__fr { margin: 0; font-family: var(--ch-font-read); }
/* Le contenu est du HTML riche (<p>…</p>) : conteneurs en <div>, marges externes neutralisées
   pour que latin et français démarrent sur la même ligne. */
.reader-para__la > :first-child,
.reader-para__fr > :first-child { margin-top: 0; }
.reader-para__la > :last-child,
.reader-para__fr > :last-child { margin-bottom: 0; }

/* Titre de paragraphe (facultatif). Bilingue : un titre par langue, masqué avec sa langue ;
   en empilé (mobile ou fr), seul le titre français reste. */
.reader-para__title {
  margin: 0 0 .375rem;
  font-family: var(--ch-font-read);
  font-size: calc(var(--reader-fs) + 1px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ch-ink);
}
.reader-para__title--la { display: none; }
.reader-article[data-lang-mode="la"] .reader-para__title--la { display: block; }
.reader-article[data-lang-mode="la"] .reader-para__title--fr { display: none; }

.reader-para__la {
  font-size: calc(var(--reader-fs) - 2px);
  font-style: italic;
  line-height: 1.7;
  color: var(--ch-muted);
}
.reader-para__fr {
  font-size: var(--reader-fs);
  line-height: 1.75;
  color: var(--ch-ink-soft);
}

/* Deux colonnes en regard : uniquement en mode "both", au-delà de 768px,
   et seulement pour les paragraphes réellement bilingues. */
@media (min-width: 768px) {
  .reader-article[data-lang-mode="both"] .reader-para--bilingual {
    grid-template-columns: 1fr 1fr auto;
    gap: 0 1.75rem;
    padding-bottom: .375rem;
  }
  /* Placement explicite : titres sur la ligne 1, textes sur la ligne 2, alignés deux à deux. */
  .reader-article[data-lang-mode="both"] .reader-para--bilingual .reader-para__title--la { display: block; grid-column: 1; grid-row: 1; }
  .reader-article[data-lang-mode="both"] .reader-para--bilingual .reader-para__title--fr { grid-column: 2; grid-row: 1; }
  .reader-article[data-lang-mode="both"] .reader-para--bilingual .reader-para__la { grid-column: 1; grid-row: 2; }
  .reader-article[data-lang-mode="both"] .reader-para--bilingual .reader-para__fr { grid-column: 2; grid-row: 2; }
  .reader-article[data-lang-mode="both"] .reader-para--bilingual > .reader-para__gutter { grid-column: 3; grid-row: 1 / span 2; }
}

/* Masquages : le CSS seul décide, aucun JS de mise en page. */
.reader-article[data-lang-mode="fr"] .reader-para__la { display: none; }
.reader-article[data-lang-mode="la"] .reader-para__fr { display: none; }

/* En latin seul, le latin devient le corps de texte plein. */
.reader-article[data-lang-mode="la"] .reader-para__la {
  font-size: var(--reader-fs);
  line-height: 1.75;
  color: var(--ch-ink-soft);
}

/* Paragraphe non bilingue : jamais de colonne latine. */
.reader-para--mono .reader-para__la { display: none; }
/* ...et en mode latin seul, on retombe sur le français pour ne rien masquer. */
.reader-article[data-lang-mode="la"] .reader-para--mono .reader-para__fr { display: block; }

/* Paragraphe latin seul : toujours affiché, quel que soit le mode (y compris « Français »),
   en corps de texte plein. Sélecteur volontairement plus spécifique que les masquages ci-dessus. */
.reader-article[data-lang-mode] .reader-para--la-only .reader-para__la {
  display: block;
  font-size: var(--reader-fs);
  line-height: 1.75;
  color: var(--ch-ink-soft);
}

/* Gouttière : marque-page + action auteur */
.reader-para__gutter {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  align-self: start;
  margin-top: calc(var(--reader-fs) * .35);
}
.reader-para__gutter form { margin: 0; }

.reader-mark {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ch-line);
  border-radius: 6px;
  background: transparent;
  font-size: .8125rem;
  color: var(--ch-faint);
  cursor: pointer;
}
.reader-mark:hover { color: var(--ch-ink-soft); border-color: rgba(17, 24, 39, .28); }
.reader-mark--on {
  border-color: var(--ch-accent);
  background: var(--ch-accent-soft);
  color: var(--ch-accent);
}

/* ---- Pied de chapitre --------------------------------------------------- */

.reader-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.375rem;
  margin-top: .5rem;
  border-top: 1px solid var(--ch-line);
}
.reader-foot__note { font-size: .875rem; color: var(--ch-faint); }
.reader-foot__next { font-size: .9375rem; font-weight: 600; }

.reader-credit {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
  font-size: .8125rem;
  color: var(--ch-faint);
  text-align: center;
}

/* ---- Sommaire escamotable ---------------------------------------------- */

.reader-toc { border-top: 1px solid var(--ch-line); background: var(--ch-bg-subtle); }
.reader-toc__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .25rem 1.5rem;
}
.reader-toc a {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: var(--ch-radius-sm);
  font-size: .9375rem;
  color: var(--ch-ink-soft);
}
.reader-toc a:hover { background: var(--ch-surface); }
.reader-toc a[aria-current="true"] { font-weight: 600; color: var(--ch-accent); }
.reader-toc__num { flex: 0 0 1.5rem; font-size: .8125rem; color: var(--ch-faint); }

/* Sommaire de la barre : mobile seulement (≥ 768px, la barre latérale le remplace),
   hauteur bornée pour ne pas repousser le texte hors de l'écran sous la barre collée. */
.reader-toc--mobile { max-height: 60vh; overflow-y: auto; }
.reader-toc__head,
.reader-toc__actions {
  max-width: 1080px;
  margin: 0 auto;
  padding: .5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  font-size: .9375rem;
}
.reader-toc__head { border-bottom: 1px solid var(--ch-line); }
.reader-toc__actions { border-top: 1px solid var(--ch-line); }
.reader-toc__head a,
.reader-toc__actions a { color: var(--ch-ink-soft); font-weight: 500; }
.reader-toc__pos { margin-left: auto; font-size: .8125rem; color: var(--ch-faint); }
@media (min-width: 768px) {
  .reader-toc--mobile { display: none; }
}

/* Panneau « Infos » du chapitre (réutilise .reader-toc comme conteneur escamotable) */
.reader-info {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem 1.5rem;
}
.reader-info dt { font-size: .8125rem; font-weight: 500; color: var(--ch-muted); }
.reader-info dd { margin: 0; font-size: .9375rem; color: var(--ch-ink-soft); }

@media (max-width: 767.98px) {
  /* Barre sur UNE ligne : pleine largeur (compense la gouttière de la colonne), fil d'Ariane,
     position, Infos et menu auteur retirés (repris dans le panneau Sommaire), libellés courts. */
  .reader-toolbar { margin: 0 -.75rem; }
  .reader-toolbar__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .25rem;
    padding: .375rem .5rem;
  }
  .reader-toolbar__crumbs,
  .reader-toolbar__pos,
  .reader-toolbar__spacer { display: none; }
  .reader-toolbar__actions { gap: .25rem; }
  .reader-seg { flex: none; }
  .reader-seg button { min-width: 44px; padding: 0 .5rem; }
  .reader-seg__long { display: none; }
  .reader-seg__short { display: inline; }
  .reader-toc__head,
  .reader-toc__actions { padding: 0 1rem; }
  .reader-toc__head a,
  .reader-toc__actions a { display: inline-flex; align-items: center; min-height: 44px; }
  .reader-article { padding: 1.75rem 1.125rem 1.5rem; }

  /* Cibles tactiles ≥ 44px */
  .reader-btn,
  .reader-seg button { min-height: 44px; }
  .reader-btn { min-width: 44px; }
  .reader-mark { width: 44px; height: 44px; }
  .reader-toolbar__back { display: inline-flex; align-items: center; min-height: 44px; }
  .reader-foot__next,
  a.reader-foot__note { display: inline-flex; align-items: center; min-height: 44px; }
  .reader-toolbar .dropdown-item { display: flex; align-items: center; min-height: 44px; }
  .reader-toc a { min-height: 44px; align-items: center; }
}