/* ════════════════════════════════════════════════════════════════════════
   Le rendu d'une causerie — la mise en forme du texte écrit par l'imam.

   Cette feuille est chargée par **deux** pages : la page publique d'un sohbet
   et l'éditeur de L'Atelier, qui en montre l'aperçu. C'est la raison d'être du
   fichier : deux copies d'une mise en forme finissent toujours par diverger,
   et c'est alors l'aperçu qui ment à celui qui écrit.

   Les règles s'appuient sur les jetons `--b-*` du site. L'Atelier les fait
   correspondre aux siens sur le conteneur de l'aperçu (cf. atelier.css), donc
   la prose y suit le thème du panneau — papier ou nuit — comme elle suit celui
   du site chez le visiteur.
   ════════════════════════════════════════════════════════════════════════ */

.b-prose {
  font-size: 15px;
  line-height: 1.8;
  color: var(--b-ink-soft);
  text-wrap: pretty;
}
.b-prose > *:first-child { margin-top: 0; }
.b-prose > *:last-child { margin-bottom: 0; }
.b-prose p { margin: 0 0 1.05em; }
.b-prose h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--b-ink);
  margin: 1.7em 0 0.55em;
  line-height: 1.25;
}
.b-prose h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--b-ink);
  margin: 1.4em 0 0.4em;
}
.b-prose h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b-gold-soft);
  margin: 1.4em 0 0.4em;
}
.b-prose strong { color: var(--b-ink); font-weight: 600; }
/* Le surlignage : `<mark>` est la seule syntaxe que le rendu accepte pour lui
   (ni `==` ni `~~` ne produisent quoi que ce soit), et son jaune de navigateur
   jurerait autant sur la crème du site que sur le parchemin de L'Atelier. */
/* `<ins>` et `<del>` traversent le rendu — ils sont dans la liste blanche —
   mais n'y paraissaient jamais faute de syntaxe markdown pour les écrire. Un
   collage depuis un traitement de texte en apporte : ils méritent leur trait
   plutôt que le style par défaut du navigateur. */
.b-prose ins {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.b-prose del { opacity: 0.7; }
.b-prose mark {
  background: rgba(var(--b-bronze-rgb), 0.3);
  color: inherit;
  padding: 0 0.15em;
  border-radius: 2px;
}
.b-prose em { color: var(--b-gold-soft); }
.b-prose ul, .b-prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.b-prose ul { list-style: none; padding-left: 1.2em; }
.b-prose li { margin-bottom: 0.45em; position: relative; }
.b-prose ul > li::before {
  content: '◆';
  position: absolute;
  left: -1.2em; top: 0.5em;
  font-size: 0.6em;
  color: var(--b-gold);
}
.b-prose blockquote {
  border-left: 2px solid var(--b-gold);
  background: linear-gradient(to right, rgba(var(--b-bronze-rgb), 0.08), transparent);
  margin: 1.3em 0;
  padding: 0.9em 1.2em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17.5px;
  color: var(--b-ink);
}
.b-prose blockquote p { margin: 0; }
.b-prose blockquote p + p { margin-top: 0.6em; }
.b-prose a {
  color: var(--b-gold-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.b-prose hr { border: none; border-top: 1px solid var(--b-line); margin: 2em auto; width: 60%; }
.b-prose code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.88em;
  border: 1px solid var(--b-line);
  background: rgba(var(--b-ink-rgb), 0.04);
  padding: 1px 5px;
}