/* ════════════════════════════════════════════════════════════════════
   Mon Coach Tefila — Lecteur de passage (réutilisable guest ↔ élève) — V4
   Requiert tokens.css. Style le HTML produit par js/ui/renderReader.js.
════════════════════════════════════════════════════════════════════ */

.reader {
  display: block;
  max-width: 760px;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.reader__head { margin-bottom: 14px; }
.reader__title {
  font: 600 26px/1.2 var(--mcbm-font-display);
  color: var(--mcbm-navy);
  margin: 0;
}
.reader__ref {
  margin-top: 4px;
  font: 600 11px/1.4 var(--mcbm-font-ui);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mcbm-gold-dark);
}
.reader__meta {
  margin-bottom: 14px;
  font: 400 13px/1.5 var(--mcbm-font-ui);
  color: var(--mcbm-ink-mid);
}
.reader__meta strong { color: var(--mcbm-navy); font-weight: 600; }

/* ── Notes (résumé / explication) ────────────────────────────────────── */
.reader-note {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--mcbm-cream);
  border: 1px solid rgba(201,162,83,.4);
  border-left: 3px solid var(--mcbm-gold);
  border-radius: var(--mcbm-r-md);
  box-shadow: var(--mcbm-shadow-soft);
}
.reader-note--expl { border-left-color: var(--mcbm-navy); }
.reader-note__label {
  font: 600 10.5px/1 var(--mcbm-font-ui);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mcbm-gold-dark);
  margin-bottom: 7px;
}
.reader-note--expl .reader-note__label { color: var(--mcbm-navy); }
.reader-note__text {
  font: 400 14px/1.6 var(--mcbm-font-ui);
  color: var(--mcbm-ink);
}

/* ── Résumé paracha (au-dessus de l'audio, sans boîte) ───────────────── */
.reader-resume--paracha {
  margin-bottom: 14px;
  font: 400 14px/1.6 var(--mcbm-font-ui);
  color: var(--mcbm-ink);
}

/* ── Audio ───────────────────────────────────────────────────────────── */
.reader-audio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.reader-audio--empty {
  padding: 12px 16px;
  background: var(--mcbm-cream-2);
  border: 1px dashed rgba(201,162,83,.45);
  border-radius: var(--mcbm-r-md);
  font: italic 400 13px/1.4 var(--mcbm-font-display);
  color: var(--mcbm-ink-light);
  text-align: center;
}
.reader-audio__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: var(--mcbm-navy);
  background-image: radial-gradient(420px 160px at 90% 0%, rgba(201,162,83,.22), transparent 65%);
  border-radius: var(--mcbm-r-md);
  box-shadow: var(--mcbm-shadow-soft);
}
/* v5.1.42 — Boucle A-B (régression V3 restaurée, cf ID_057) */
.reader-audio__ab {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.reader-audio__label {
  flex-shrink: 0;
  font: 600 11px/1.3 var(--mcbm-font-ui);
  letter-spacing: .04em;
  color: var(--mcbm-gold-soft);
}
/* L'audio natif HTML5 cache son ▶ si sa hauteur passe sous ~32px. La classe
   .audio-r2 (ajoutée dynamiquement par guestPage.js) lutte ici en spécificité
   et Chrome retombe parfois sur sa hauteur intrinsèque (16px). On force avec
   !important pour garantir le ▶ visible quel que soit le viewport. */
.reader-audio__player {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box;
  display: block;
}

/* ── Images Tikkoun (paracha) ────────────────────────────────────────── */
.reader-tikkun {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.reader-tikkun--toggle { display: block; }
.reader-tikkun--empty {
  padding: 32px 20px;
  text-align: center;
  background: var(--mcbm-cream-2);
  border: 1px dashed rgba(201,162,83,.45);
  border-radius: var(--mcbm-r-md);
  font: italic 400 14px/1.5 var(--mcbm-font-display);
  color: var(--mcbm-ink-light);
}
.reader-tikkun__img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(201,162,83,.45);
  border-radius: var(--mcbm-r-md);
  box-shadow: var(--mcbm-shadow-soft);
  background: var(--mcbm-cream);
}

/* Toggle avec / sans taamim — bascule CSS pure pilotée par les radios */
.reader-tikkun__radio {
  position: absolute;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}
.reader-tikkun__toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--mcbm-cream-2);
  border: 1px solid rgba(201,162,83,.4);
  border-radius: var(--mcbm-r-pill);
}
.reader-tikkun__tab {
  flex: 1;
  padding: 9px 14px;
  text-align: center;
  cursor: pointer;
  border-radius: var(--mcbm-r-pill);
  font: 600 12.5px/1.3 var(--mcbm-font-ui);
  color: var(--mcbm-ink-mid);
  transition: background .15s, color .15s;
}
.reader-tikkun__radio--with:checked    ~ .reader-tikkun__toggle .reader-tikkun__tab--with,
.reader-tikkun__radio--without:checked ~ .reader-tikkun__toggle .reader-tikkun__tab--without {
  background: var(--mcbm-navy);
  color: var(--mcbm-gold-soft);
  box-shadow: var(--mcbm-shadow-soft);
}
.reader-tikkun__set {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.reader-tikkun__radio--with:checked    ~ .reader-tikkun__set--with,
.reader-tikkun__radio--without:checked ~ .reader-tikkun__set--without {
  display: flex;
}

/* ── Texte hébreu vocalisé ───────────────────────────────────────────── */
.reader-heb {
  margin-bottom: 16px;
  padding: 22px 22px;
  border: 1px solid rgba(201,162,83,.4);
  border-radius: var(--mcbm-r-md);
  background-color: var(--mcbm-parchment);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0 0.08  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.reader-heb .heb-nikud {
  direction: rtl;
  text-align: justify;
  font-family: 'ShlomoPro', var(--mcbm-font-heb), serif;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--mcbm-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  word-break: break-word;
}

/* ── format acrostic (ex : MA_45_achrei, MA_184_echet_hail) ─────────────
   1ère lettre de chaque verset wrappée dans <strong> par le script
   scripts/format-acrostic.js — on la met en exergue gold-dark 1.5em pour
   matérialiser l'alphabet א ב ג ד … */
.reader-heb .heb-nikud[data-format="acrostic"] strong {
  font-size: 1.5em;
  color: var(--mcbm-gold-dark);
  font-weight: 700;
  margin-inline-end: 2px;
}

/* ── ID_066 — format split-by-verse (ex : MA_3_brachot) ─────────────────
   Versets séparés visuellement par un filet or, 1er mot (בָּרוּךְ) en exergue
   navy, numéro de bénédiction (.vn) ré-affiché en gros chiffre or. */
.reader-heb .heb-nikud[data-format="split-by-verse"] > p {
  border-bottom: 1px dashed rgba(201,162,83,.4);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.reader-heb .heb-nikud[data-format="split-by-verse"] > p:last-child {
  border-bottom: 0;
}
.reader-heb .heb-nikud[data-format="split-by-verse"] .vn {
  display: inline-block !important;
  font-size: 1.4em;
  font-weight: 700;
  color: var(--mcbm-gold-dark);
  margin-left: 8px;
  font-family: 'Inter', sans-serif;
  vertical-align: baseline;
}
.reader-heb .heb-nikud[data-format="split-by-verse"] strong {
  font-size: 1.2em;
  color: var(--mcbm-navy);
  font-weight: 700;
}

/* ── États ───────────────────────────────────────────────────────────── */
.reader-state {
  padding: 32px 20px;
  text-align: center;
  font: italic 400 14px/1.5 var(--mcbm-font-display);
  color: var(--mcbm-ink-light);
}
.reader-state--empty {
  background: var(--mcbm-cream-2);
  border: 1px dashed rgba(201,162,83,.45);
  border-radius: var(--mcbm-r-md);
}

@media (max-width: 720px) {
  .reader__title { font-size: 22px; }
  .reader-heb { padding: 16px 14px; }
  .reader-heb .heb-nikud { font-size: 1.4rem; }
  /* overflow:visible pour ne pas crop le ▶ natif sur Chrome mobile / F12 sim. */
  .reader-audio__item { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; overflow: visible; }
  /* Cible tap iOS/Android : 48px min — sinon le bouton ▶ est inatteignable.
     !important pour battre .audio-r2 (ajoutée dynamiquement par guestPage.js). */
  .reader-audio__player {
    height: 48px !important;
    min-height: 48px !important;
    width: 100%; max-width: 100%; min-width: 0;
    box-sizing: border-box; display: block;
  }
}