/* Engendré par tools/build-web.mjs depuis config/typography.json — ne pas éditer. */

/* Le thème par défaut du socle est sombre et bascule en clair par la classe .light.
   On redéfinit les deux, avec la même spécificité que le socle pour gagner par l'ordre. */
html:not(.light) {
  --bg: #15130f;
  --bg-card: #1c1914;
  --bg-card-hover: #1c1914;
  --border: #332e25;
  --text: #e9e1d0;
  --text-dim: #b5ab95;
  --text-faint: #9a8f7c;
  --accent: #c9a35e;
  --accent-dim: #332e25;
}
html.light {
  --bg: #f7f3ea;
  --bg-card: #efe9db;
  --bg-card-hover: #efe9db;
  --border: #d8cfb9;
  --text: #211d17;
  --text-dim: #57503f;
  --text-faint: #6a6153;
  --accent: #8a6a3a;
  --accent-dim: #d8cfb9;
}

/* ---- la page ---------------------------------------------------------- */
body {
  font-family: 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
  font-size: 18px;
  line-height: 1.72;
  background: var(--bg);
  color: var(--text);
  padding: 38px 20px 84px;
}
.container { max-width: 40rem; }

a.back {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
}
a.back:hover { color: var(--accent); }

/* Le titre est centré, sous un filet : c'est le seuil de la page, pas une barre d'outils. */
header {
  display: block;
  text-align: center;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 26px 0 34px;
}
header h1 {
  font-weight: 400;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0;
}
header .subtitle {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text-faint);
  font-style: normal;
}
header::after {
  content: "";
  display: block;
  width: 74px;
  height: 1px;
  margin: 20px auto 0;
  background: var(--border);
}
header .nav { justify-content: center; margin-top: 18px; }
.nav a { font-size: 13px; color: var(--text-faint); }

/* ---- dissolution du chrome applicatif --------------------------------- */
.toc-section, .he-flow, .t-intro, .extra-block, .verse, .word {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.he-flow { padding: 0; }
.t-intro {
  padding: 0 0 4px;
  margin-bottom: 30px;
  font-size: 15.5px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 26px;
}

/* ---- le texte de prière ------------------------------------------------ */
/* Chaque ligne est une unité de sens, découpée sur la ponctuation du texte canonique.
   Donc : pas de justification, pas de césure, et un retrait sur les lignes trop longues
   pour qu'un débordement se lise comme la suite de la ligne et non comme une ligne neuve. */
.he-seg {
  font-size: 25px;
  line-height: 2.5;
  text-align: right;
  text-indent: 0;
  padding-right: 0;
  margin: 0 0 0.72em;
  hyphens: none;
  color: var(--text);
}
.he-seg br + * { display: inline; }

.seg-tr {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text-dim);
  font-style: normal;
  text-align: left;
  border-left: 0;
  padding-left: 1.6em;
  margin: -0.35em 0 1.5em;
}

/* L'instruction n'a jamais la voix de la prière : plus petite, en retrait, sans nikoud —
   c'est la distinction que porte le corpus et que le site perdait aussi. */
.rubric {
  display: block;
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-faint);
  text-align: right;
  margin: 1.1em 1.2em;
  hyphens: none;
}
.he-seg .rubric { font-size: 0.56em; line-height: 1.6; }
.he-seg small { font-size: 0.86em; }

.provenance {
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ---- sommaire ---------------------------------------------------------- */
.see-book {
  text-align: center;
  margin: 30px 0 6px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.see-book a { color: var(--accent); text-decoration: none; }
.see-book a:hover { text-decoration: underline; }

.part-title {
  margin: 52px 0 22px;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}
.part-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--border);
}
.toc-section { padding: 0; margin: 0 0 26px; }
.toc-section h3 {
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.toc-section ul { padding: 0; list-style: none; }
.toc-section li { font-size: 15.5px; margin: 5px 0; }
.toc-section a { color: var(--text-dim); }
.seg-count { color: var(--border); }

/* ---- pages d'étude ----------------------------------------------------- */
/* Une seule colonne. La grille héritée (3 colonnes, 2 sous 1100 px) est pensée pour une
   fiche d'entraînement qui tient dans un écran ; elle fait lire un texte de prière en
   zigzag, et c'est le contraire de ce qu'on cherche : la page doit se descendre.
   Le !important n'est pas un raccourci — style.css pose display, grid-template-columns et
   direction en !important, à specificité (0,1,1) et dans deux media queries. Rien de moins
   ne passe : deux tentatives sans lui n'ont rien changé du tout. */
html body .verses-grid {
  display: block !important;
  column-count: 1 !important;
  column-gap: 0 !important;
  gap: 0 !important;
}
html body .verses-grid .verse { padding: 0 !important; margin-bottom: 30px !important; }
html body .verses-grid .word .he { font-size: 27px !important; line-height: 1.25 !important; }
html body .verses-grid .word .tr { font-size: 13px !important; }
html body .verses-grid .word .fr { font-size: 12.5px !important; line-height: 1.35 !important; }
.verses-grid .verse { margin-bottom: 34px; padding: 0; }
.verse-num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  margin-bottom: 14px;
}
.verse-full { font-size: 24px; line-height: 2.2; }
.stich-translation {
  font-size: 14.5px;
  color: var(--text-dim);
  font-style: normal;
}
.verse-summary { font-size: 14px; color: var(--text-faint); }

/* Translittération classique : le mot entier, de gauche à droite, sous le mot. Elle reste
   une annotation et ne doit jamais peser autant que le texte. */
/* nowrap : sans lui le navigateur coupe à l'intérieur d'un mot annoté et laisse une
   syllabe seule en bout de ligne avec sa translittération en dessous. */
.he-seg ruby { ruby-position: under; ruby-align: center; white-space: nowrap; }
/* Résidu connu, deux réparations tentées et mesurées, aucune ne marche : sur un mot dont la
   romanisation est plus large que sa base (sheratzita sous שרצית), l'annotation descend sur
   une ligne à elle. white-space nowrap sur le rt ne change rien ; display inline-block sur
   le ruby annule ruby-position under et renvoie tous les sons AU-DESSUS des mots, ce qui est
   bien pire. Ne pas retenter ces deux-là.
   Note : cette feuille est un littéral de gabarit JS. Aucun accent grave dans les
   commentaires, il ferme la chaîne et le build casse — trois lancers perdus à cause de ça,
   masqués parce que la sortie était redirigée vers /dev/null. */
.he-seg rt {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Frank Ruhl Libre', Georgia, serif;
  font-size: 0.40em;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  opacity: 0.78;
}
.word .tr {
  font-family: 'Frank Ruhl Libre', Georgia, serif;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--text-faint);
}
.word .tr b { font-weight: 600; color: var(--text-dim); }
html.light .word .tr b { color: var(--text-dim); }

@media (max-width: 620px) {
  body { font-size: 17px; padding: 22px 16px 64px; }
  .he-seg { font-size: 21px; line-height: 2.35; }
  header h1 { font-size: 22px; }
}