/*
  NJ — Typographie du contenu d'article (.post-body)
  ----------------------------------------------------
  Style le HTML brut produit par l'éditeur WordPress natif (theme-post-content)
  à l'intérieur de la section .post-body du template "NJ — Article de blog
  (single)" — donc TOUT futur article suit ce style automatiquement, sans
  classe à ajouter manuellement dans l'éditeur.

  Source de vérité : les mêmes design tokens que le reste du site
  (nj-tokens.css : --fg, --fg-dim-*, --line-*, --accent, --panel-*, --font),
  et les mêmes valeurs que .post-body dans le fichier statique de référence
  /Users/macbookpro/Documents/NjakaDev_v4/styles.css.

  Portée volontairement large ("toutes les propriétés") : titres H2-H6,
  paragraphes (dont le premier, en intro plus grande automatiquement),
  gras/italique, liens, listes à puces et numérotées, citations, tableaux,
  images, séparateurs, code inline/bloc — un futur article peut utiliser
  n'importe lequel de ces éléments dans l'éditeur classique/blocs et
  obtient le bon style sans intervention.
*/
:root{
    --fg-dim-72 : rgba(244, 242, 238, 0.72)
}
.post-body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-dim-72);
  font-weight: 300;
  word-spacing: normal;
}

/* Pas de marge parasite en haut/bas du bloc de contenu. */
.post-body > *:first-child { margin-top: 0; }
.post-body > *:last-child { margin-bottom: 0; }

/* ===================== PARAGRAPHES ===================== */
.post-body p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--fg-dim-72);
  font-weight: 300;
  letter-spacing: normal;
  word-spacing: normal;
  margin: 0 0 24px;
}

/* Premier paragraphe = chapô/intro, automatiquement plus grand et plus
   clair — reproduit .post-intro du design d'origine sans classe à poser. */
.post-body > p:first-of-type {
  font-size: 20px;
  line-height: 1.65;
  color: var(--fg-dim-82);
  font-weight: 300;
}

.post-body strong,
.post-body b {
  color: var(--fg);
  font-weight: 500;
}

.post-body em,
.post-body i {
  font-style: italic;
  color: inherit;
}

/* ===================== TITRES (H2-H6) ===================== */
.post-body h2 {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 52px 0 20px;
  scroll-margin-top: 34px;
}

.post-body h3 {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 40px 0 16px;
  scroll-margin-top: 34px;
}

.post-body h4 {
  font-family: var(--font);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 32px 0 12px;
}

.post-body h5,
.post-body h6 {
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-dim-60);
  margin: 28px 0 10px;
}

/* ===================== LIENS ===================== */
.post-body a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line-16);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.post-body a:hover,
.post-body a:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

/* ===================== LISTES ===================== */
.post-body ul,
.post-body ol {
  margin: 0 0 24px;
  padding: 0;
  color: var(--fg-dim-72);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
}

.post-body ul { list-style: none; }
.post-body ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.post-body ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.post-body ol {
  list-style: decimal;
  padding-left: 22px;
}
.post-body ol li {
  padding-left: 6px;
  margin-bottom: 10px;
}
.post-body ol li::marker {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.post-body li > p { margin-bottom: 8px; }
.post-body li ul,
.post-body li ol { margin-top: 10px; margin-bottom: 0; }

/* ===================== CITATIONS ===================== */
.post-body blockquote {
  margin: 40px 0;
  padding: 28px 30px;
  border-left: 2px solid var(--accent);
  background: var(--panel-02);
  border-radius: 0 8px 8px 0;
}
.post-body blockquote p {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg);
  font-weight: 300;
}
.post-body blockquote p + p { margin-top: 12px; }
.post-body blockquote cite {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-style: normal;
  color: var(--fg-dim-46);
}

/* ===================== TABLEAUX ===================== */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 32px;
  font-size: 15px;
}
.post-body th,
.post-body td {
  padding: 16px 12px 16px 2px;
  border-bottom: 1px solid var(--line-10);
  text-align: left;
  font-weight: 300;
  color: var(--fg-dim-82);
}
.post-body thead th {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim-40);
  font-weight: 500;
  border-bottom: 1px solid var(--line-14);
}
.post-body tbody tr:last-child th,
.post-body tbody tr:last-child td { border-bottom: none; }

/* ===================== IMAGES / MÉDIAS ===================== */
.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 32px 0;
}
.post-body figure { margin: 32px 0; }
.post-body figure img { margin: 0; }
.post-body figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-dim-40);
  text-align: center;
}

/* ===================== SÉPARATEUR ===================== */
.post-body hr {
  border: 0;
  border-top: 1px solid var(--line-10);
  margin: 48px 0;
}

/* ===================== CODE ===================== */
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--fg-dim-90);
  background: var(--panel-03);
  padding: 2px 6px;
  border-radius: 4px;
}
.post-body pre {
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px solid var(--line-09);
  border-radius: 8px;
  background: #0e0f11;
  overflow-x: auto;
}
.post-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-dim-82);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 640px) {
  .post-body,
  .post-body p,
  .post-body ul,
  .post-body ol { font-size: 16px; }
  .post-body > p:first-of-type { font-size: 18px; }
  .post-body blockquote { padding: 22px 22px; margin: 32px 0; }
  .post-body table { font-size: 13.5px; }
}