/*
 * content.css — typographie du contenu rédactionnel.
 *
 * Couvre ce qui est présent sur presque toutes les pages : rythme vertical,
 * paragraphes, titres, liens, listes, code en ligne, légendes. Les blocs plus
 * rares ont chacun leur feuille dans blocks/, chargée à la demande par
 * wp_enqueue_block_style().
 *
 * Transposé de src/styles/typography.css du thème Astro Lipi (MIT), dont les
 * règles ciblaient des éléments markdown ; elles visent ici le balisage de
 * blocs produit par WordPress.
 */

/* ═══ Rythme vertical ═══════════════════════════════════════════════════════
   Un seul intervalle par défaut entre blocs frères, resserré ou élargi ensuite
   au cas par cas. La marge n'est jamais posée sur le premier enfant : c'est le
   conteneur qui décide de son propre espacement d'entrée.
   ═════════════════════════════════════════════════════════════════════════ */

.entry-content > * + * {
	margin-block-start: 1.5rem;
}

.entry-content > :is(h2, h3, h4, h5, h6) {
	margin-block-start: 2.5rem;
}

.entry-content > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 1rem;
}

/* ═══ Paragraphes ═══════════════════════════════════════════════════════════ */

.entry-content p {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--foreground);
}

.entry-content strong,
.entry-content b {
	font-weight: 600;
	color: var(--foreground);
}

.entry-content em {
	font-style: italic;
}

.entry-content sup,
.entry-content sub {
	font-size: 0.7em;
	line-height: 0;
}

/* ═══ Titres ════════════════════════════════════════════════════════════════ */

.entry-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-content);
	color: var(--foreground);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;

	/* Une ancre visée depuis un sommaire ne doit pas finir sous l'en-tête collant. */
	scroll-margin-block-start: 6rem;
}

.entry-content h2 {
	font-size: var(--text-2xl);
	font-weight: 500;
	line-height: var(--leading-tight);
}

.entry-content h3 {
	font-size: var(--text-xl);
	font-weight: 500;
	line-height: var(--leading-snug);
}

.entry-content h4 {
	font-size: var(--text-lg);
	font-weight: 500;
	line-height: var(--leading-snug);
}

.entry-content :is(h5, h6) {
	font-size: var(--text-base);
	font-weight: 600;
}

/*
 * h1 n'a pas sa place dans le corps d'un article : le titre de la page en est
 * déjà un. Si un h1 traîne dans un contenu importé, il est ramené au rang
 * visuel d'un h2 pour ne pas casser la hiérarchie perçue.
 */
.entry-content h1 {
	font-size: var(--text-2xl);
	font-weight: 500;
	line-height: var(--leading-tight);
}

/* ═══ Ancres de titre ═══════════════════════════════════════════════════════ */

.heading-anchor {
	display: inline-block;
	width: 1rem;
	margin-inline-start: 0.5rem;
	color: var(--muted-foreground);
	text-align: center;
	text-decoration: none;
	opacity: 0;
	transition: opacity 200ms ease;
}

:is(h2, h3, h4):hover .heading-anchor,
.heading-anchor:focus-visible {
	opacity: 1;
}

/* ═══ Liens ═════════════════════════════════════════════════════════════════ */

.entry-content a:not(.wp-element-button) {
	color: var(--foreground);
	text-decoration: underline;
	text-decoration-color: var(--border);
	text-underline-offset: 4px;
}

.entry-content a:not(.wp-element-button):hover {
	color: var(--primary);
	text-decoration-color: var(--accent);
}

/* ═══ Listes ════════════════════════════════════════════════════════════════ */

.entry-content :is(ul, ol) {
	padding-inline-start: 1.25rem;
	line-height: var(--leading-relaxed);
}

.entry-content li + li {
	margin-block-start: 0.375rem;
}

.entry-content li::marker {
	color: var(--muted-foreground);
}

/* Une liste imbriquée reste solidaire de son parent. */
.entry-content li > :is(ul, ol) {
	margin-block-start: 0.375rem;
}

.entry-content dt {
	font-weight: 600;
}

.entry-content dd {
	margin-inline-start: 1.25rem;
	color: var(--muted-foreground);
}

/* ═══ Code en ligne ═════════════════════════════════════════════════════════
   Ne vise que le code hors bloc : le sélecteur laisse Prism intact.
   ═════════════════════════════════════════════════════════════════════════ */

.entry-content :not(pre) > code {
	padding: 0.15em 0.35em;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--accent-foreground);
	font-family: var(--font-code);
	font-size: 0.8em;
	word-break: break-word;
}

.entry-content kbd {
	padding: 0.15em 0.4em;
	border: 1px solid var(--border);
	border-block-end-width: 2px;
	border-radius: var(--radius);
	background: var(--muted);
	font-family: var(--font-code);
	font-size: 0.8em;
}

/* ═══ Légendes ══════════════════════════════════════════════════════════════ */

.entry-content figcaption,
.entry-content .wp-element-caption {
	margin-block-start: 0.75rem;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
	text-align: center;
}

/* ═══ Pagination interne d'article ══════════════════════════════════════════ */

.page-links {
	margin-block-start: 2rem;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--muted-foreground);
}

.page-links a {
	margin-inline: 0.25rem;
	color: var(--muted-foreground);
}