/* Lecteur Serein - typography.css */
/* Rythme vertical, colonnes, filets, hiérarchie */

article {
  font-size: var(--font-size, 18px);
  line-height: var(--line-height, 1.6);
  color: var(--text);
  letter-spacing: var(--reader-letter-spacing);
  column-count: 1;
  transition: font-size var(--transition), line-height var(--transition);
}

article[data-columns="2"] {
  column-count: 2;
  column-gap: 48px;
  column-rule: 1px solid rgba(255, 255, 255, 0.06);
}

article[data-columns="3"] {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid rgba(255, 255, 255, 0.06);
}

/* Titres */
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  font-weight: 500;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
  text-shadow: 0 0 1px var(--glow);
  column-span: all;
}

article h1 { font-size: 1.75em; }
article h2 { font-size: 1.45em; }
article h3 { font-size: 1.25em; }
article h4 { font-size: 1.1em; }

article h1:first-child,
article h2:first-child,
article h3:first-child {
  margin-top: 0;
}

/* Paragraphes */
article p {
  margin-bottom: 1em;
  text-align: justify;
  text-shadow: 0 0 1px var(--glow);
  hyphens: auto;
  -webkit-hyphens: auto;
  orphans: 3;
  widows: 3;
}

/* Emphase */
article b,
article strong {
  font-weight: 600;
}

article i,
article em {
  font-style: italic;
}

/* Liens */
article a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(201, 162, 75, 0.4);
  transition: border-bottom-style var(--transition);
}

article a:hover {
  border-bottom-style: solid;
}

/* Citations */
article blockquote {
  margin: 1.5em 0;
  padding: 0.8em 1.4em;
  border-left: 2px solid var(--accent);
  font-style: italic;
  opacity: 0.88;
  break-inside: avoid;
}

article blockquote p:last-child {
  margin-bottom: 0;
}

/* Listes */
article ul,
article ol {
  margin-bottom: 1em;
  padding-left: 1.8em;
}

article li {
  margin-bottom: 0.35em;
  break-inside: avoid;
}

article li::marker {
  color: var(--accent);
}

/* Séparateurs */
article hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 2.2em auto;
  width: 55%;
  column-span: all;
}

/* Code */
article pre {
  background: rgba(0, 0, 0, 0.35);
  padding: 1em 1.2em;
  border-radius: 5px;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.82em;
  line-height: 1.45;
  margin-bottom: 1em;
  break-inside: avoid;
}

article code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88em;
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 5px;
  border-radius: 3px;
}

article pre code {
  background: none;
  padding: 0;
}

/* Images */
article img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0.5em 0;
}

/* Tableaux */
article table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.2em;
  font-size: 0.92em;
  break-inside: avoid;
}

article th,
article td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

article th {
  font-weight: 600;
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* Surlignage */
article mark {
  background: rgba(201, 162, 75, 0.18);
  color: var(--text);
  padding: 0 2px;
}

/* Responsive colonnes */
@media (max-width: 1100px) {
  article[data-columns="3"] {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  article[data-columns="2"],
  article[data-columns="3"] {
    column-count: 1;
  }

  article p {
    text-align: left;
  }
}