/**
 * SecGram — blog.css
 * Expérience de lecture : articles / ressources / études de cas.
 *
 * La classe « sg-article » (à poser sur la section ou la rangée du
 * modèle d'article du Theme Builder) active la largeur de lecture ;
 * le contenu classique (#left-area, éditeur standard) est couvert
 * par défaut.
 */

/* ---- Largeur de lecture ---------------------------------------------- */
/* Contenu d'article : ligne confortable (~72 caractères). */
.sg-article .et_pb_post_content,
.sg-article .entry-content,
.single-post #left-area .entry-content {
	max-width: var(--sg-container-text);
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: var(--sg-leading-body);
}

/* Rythme vertical du contenu d'article. */
:where(.sg-article .et_pb_post_content, .single-post .entry-content)
	:where(p, ul, ol, blockquote, figure, pre, table) {
	margin-block: 0 var(--sg-space-md);
}

:where(.sg-article .et_pb_post_content, .single-post .entry-content) :where(h2) {
	margin-block: var(--sg-space-xl) var(--sg-space-sm);
}

:where(.sg-article .et_pb_post_content, .single-post .entry-content) :where(h3, h4) {
	margin-block: var(--sg-space-lg) var(--sg-space-xs);
}

/* ---- Métadonnées d'article ------------------------------------------- */
.post-meta,
.sg-article .post-meta {
	font-size: var(--sg-text-sm);
	color: var(--sg-color-muted);
}

/* ---- Citations ------------------------------------------------------- */
:where(.et_pb_post_content, .entry-content) blockquote {
	border-left: 4px solid var(--sg-color-primary);
	background: var(--sg-color-surface-alt);
	border-radius: 0 var(--sg-radius-md) var(--sg-radius-md) 0;
	padding: var(--sg-space-md) var(--sg-space-lg);
	font-style: normal;
	color: var(--sg-color-body);
}

:where(.et_pb_post_content, .entry-content) blockquote :where(p:last-child) {
	margin-block-end: 0;
}

/* ---- Code ------------------------------------------------------------ */
/* Code en ligne. */
:where(.et_pb_post_content, .entry-content) :where(code, kbd) {
	font-family: var(--sg-font-mono);
	font-size: 0.9em;
	background: var(--sg-color-surface-alt);
	border: var(--sg-border);
	border-radius: var(--sg-radius-sm);
	padding: 0.15em 0.4em;
}

/* Blocs de code : fond sombre, défilement horizontal interne
   (jamais de débordement de page). */
:where(.et_pb_post_content, .entry-content) pre {
	background: var(--sg-color-ink);
	color: #e2e8f0;
	border-radius: var(--sg-radius-md);
	padding: var(--sg-space-lg);
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.6;
	tab-size: 2;
}

:where(.et_pb_post_content, .entry-content) pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* ---- Images et légendes ---------------------------------------------- */
:where(.et_pb_post_content, .entry-content) :where(figcaption, .wp-caption-text) {
	font-size: var(--sg-text-sm);
	color: var(--sg-color-muted);
	text-align: center;
	margin-block-start: var(--sg-space-xs);
}

:where(.et_pb_post_content, .entry-content) :where(.wp-block-image img, figure img) {
	border-radius: var(--sg-radius-md);
}

/* ---- Tableaux -------------------------------------------------------- */
/* Tableaux de contenu : défilement interne sur petit écran. */
:where(.et_pb_post_content, .entry-content) table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sg-text-sm);
	display: block;
	overflow-x: auto;
}

:where(.et_pb_post_content, .entry-content) :where(th, td) {
	border: var(--sg-border);
	padding: var(--sg-space-xs) var(--sg-space-sm);
	text-align: left;
}

:where(.et_pb_post_content, .entry-content) th {
	background: var(--sg-color-surface-alt);
	font-weight: 600;
}

/* ---- Zone « contenus liés » ------------------------------------------ */
/* Wrapper à poser sur la section « À lire ensuite » du modèle
   d'article (modules Blog ou colonnes de cartes). */
.sg-related {
	border-top: var(--sg-border);
	margin-block-start: var(--sg-space-2xl);
	padding-block-start: var(--sg-space-xl);
}

/* ---- Pagination ------------------------------------------------------ */
.pagination a,
.wp-pagenavi a,
.wp-pagenavi span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--sg-space-sm);
}