/* ==================================================================
   TYPOGRAPHIE ÉDITORIALE · .contenu
   ------------------------------------------------------------------
   Tout ce qui vient d'un éditeur ou d'un outil de rédaction passe par
   ce conteneur : articles du blog, texte des fiches, emplacement libre
   de l'accueil.

   Sans ces règles, un article de 2 500 mots arrive en un mur de
   paragraphes identiques. Le rédacteur n'a alors aucun moyen de faire
   respirer son texte, et le lecteur décroche avant la moitié.

   Les règles ci-dessous ne dépendent d'aucune classe posée dans le
   contenu : elles s'appliquent au HTML brut que produisent l'éditeur
   WordPress comme le portail de rédaction.
   ================================================================== */

/* Rythme vertical : l'espacement vit ENTRE les blocs, jamais sur le
   premier ni le dernier. Un `margin` par élément se cumule ou se
   fusionne selon le voisin et produit des trous irréguliers. */
.contenu > * { margin-block: 0; }
.contenu > * + * { margin-block-start: 1.15em; }

/* Largeur de lecture. Au-delà d'environ 70 caractères, l'œil perd la
   ligne suivante en revenant à la marge. */
.contenu { max-width: 36em; }
.contenu :is(figure, table, .alignwide, .alignfull) { max-width: none; }

/* ---------- Titres ---------- */
.contenu :is(h2, h3, h4) { text-wrap: balance; }
.contenu h2 {
	font-size: 1.5rem;
	margin-block-start: 2em;
	padding-block-end: .3em;
	border-bottom: 1px solid var(--ligne);
}
.contenu h3 { font-size: 1.2rem; margin-block-start: 1.8em; }
.contenu h4 {
	font-family: var(--police);
	font-size: 1rem;
	font-weight: 700;
	margin-block-start: 1.5em;
	color: var(--gris);
	letter-spacing: .01em;
}

/* Chapô : le premier paragraphe donne le ton et sert d'accroche.
   `:first-of-type` et non `:first-child`, un article peut commencer
   par une image. */
.contenu > p:first-of-type {
	font-size: 1.15em;
	line-height: 1.6;
	color: var(--bleu-nuit);
}

/* ---------- Listes ----------
   C'est ce qui manque le plus aux textes générés : une liste aère
   davantage qu'un paragraphe de plus. */
.contenu :is(ul, ol) { padding-inline-start: 1.4em; }
.contenu li + li { margin-block-start: .4em; }
.contenu li::marker { color: var(--bordeaux); font-weight: 700; }
.contenu li > :is(ul, ol) { margin-block-start: .4em; }

/* ---------- Citation ---------- */
.contenu blockquote {
	margin-inline: 0;
	padding: .2em 0 .2em 1.2em;
	border-inline-start: 3px solid var(--bordeaux);
	font-family: var(--police-titre);
	font-size: 1.15em;
	font-style: italic;
	color: var(--bleu-nuit);
}
.contenu blockquote cite {
	display: block;
	margin-block-start: .5em;
	font: 400 .88rem/1.4 var(--police);
	font-style: normal;
	color: var(--gris);
}

/* ---------- Images ---------- */
.contenu :is(img, figure img) { border-radius: var(--r); }
.contenu figure { margin-inline: 0; }
.contenu figcaption {
	margin-block-start: .5em;
	font-size: .88rem;
	line-height: 1.45;
	color: var(--gris);
}

/* ---------- Liens dans le texte ----------
   Soulignement décalé sous la ligne de base : lisible, et il ne coupe
   pas les jambages des lettres. */
.contenu p a,
.contenu li a {
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}
.contenu p a:hover,
.contenu li a:hover { text-decoration-thickness: 2px; }

/* ---------- Tableaux ----------
   Le conteneur de défilement est posé par article.js quand le tableau
   dépasse : sans lui, un tableau large fait défiler la PAGE entière. */
.contenu table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.contenu table :is(th, td) {
	padding: .6em .8em;
	border-block-end: 1px solid var(--ligne);
	text-align: start;
	vertical-align: top;
}
.contenu table th { font-weight: 700; color: var(--bleu-nuit); }
.contenu table tbody tr:hover { background: var(--creme); }
.contenu__scroll { overflow-x: auto; }

/* ---------- Divers ---------- */
.contenu hr {
	border: 0;
	border-block-start: 1px solid var(--ligne);
	margin-block: 2.4em;
}
.contenu :is(strong, b) { font-weight: 700; color: var(--bleu-nuit); }
.contenu abbr[title] { text-decoration-style: dotted; cursor: help; }

@media (max-width: 640px) {
	.contenu h2 { font-size: 1.32rem; }
	.contenu > p:first-of-type { font-size: 1.1em; }
}