/* Mise en page commune aux articles et guides. */
.article-page .article-content {
	display: grid;
	gap: 18px;
}

.article-page .article-content > .content {
	scroll-margin-top: 88px;
}

.article-page .article-content .body {
	padding: clamp(20px, 2.5vw, 28px);
	border: 0;
	border-radius: inherit;
}

.article-page .article-content .title {
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 0;
	color: var(--news-ink);
	font-family: "Exo2", Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.article-page .article-content .text {
	color: #475569;
	font-size: 1rem;
	line-height: 1.7;
}

.article-page .article-content .text p {
	max-width: 76ch;
	margin: 0 0 1em;
}

.article-page .article-content .text p:last-child {
	margin-bottom: 0;
}

.article-page .article-content .article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	color: #64748b;
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.5;
}

.article-page .article-content ul {
	margin: 16px 0;
	padding-left: 24px;
}

.article-page .article-content li {
	padding-left: 5px;
}

.article-page .article-content li + li {
	margin-top: 8px;
}

.article-page .article-content li::marker {
	color: var(--news-green);
}

.article-page .article-content a {
	color: var(--news-green-dark);
	font-weight: 650;
	text-decoration-color: rgba(14, 79, 71, 0.4);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.article-page .article-content a:focus-visible {
	color: var(--news-green);
	text-decoration-color: currentColor;
}

.article-page .article-content a:focus-visible {
	border-radius: 3px;
	outline: 3px solid rgba(23, 108, 96, 0.25);
	outline-offset: 3px;
}

.article-page .article-content h3 {
	margin: 1.35em 0 0.4em;
	color: var(--news-ink);
	font-family: "Exo2", Arial, Helvetica, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

.article-page .article-content .text h3:first-child {
	margin-top: 0;
}

/* Tableaux éditoriaux communs aux articles. */
.article-page .article-content .table-responsive {
	overflow-x: auto;
	margin-bottom: 16px;
}

.article-page .article-content table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.5;
}

.article-page .article-content caption {
	caption-side: top;
	padding: 0 0 16px;
	color: #64748b;
	text-align: left;
}

.article-page .article-content th,
.article-page .article-content td {
	padding: 14px 16px;
	border-bottom: 1px solid #e2e8ed;
	text-align: left;
	vertical-align: top;
}

.article-page .article-content thead th {
	background: #f4f7f9;
	color: var(--news-ink);
	font-weight: 600;
}

.article-page .article-content tbody th {
	min-width: 150px;
	font-weight: 500;
}

.article-page .article-content tbody th a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.article-page .article-content tbody th img {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	object-fit: contain;
}

.article-page .article-content tbody tr:last-child th,
.article-page .article-content tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 767px) {
	.article-page .article-content {
		gap: 16px;
	}

	.article-page .article-content .text {
		line-height: 1.68;
	}
}