/**
 * Article template. Everything is scoped under .af so it outranks the
 * Elementor kit (0,1,1) still present on the site during the transition.
 */

/* --------------------------------------------------------------------------
   Colonne de lecture
   -------------------------------------------------------------------------- */

.af .af-art {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 24px;
}

.af .af-art--large {
	max-width: var(--af-max);
}

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */

.af .af-fil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--af-muted);
}

.af .af-fil li { display: flex; align-items: center; gap: 8px; }

.af .af-fil li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--af-border);
}

.af .af-fil a,
.af .af-fil a:link,
.af .af-fil a:visited {
	color: var(--af-muted) !important;
	text-decoration: none !important;
}

.af .af-fil a:hover {
	color: var(--af-navy) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.af .af-fil [aria-current] { color: var(--af-text); }

/* --------------------------------------------------------------------------
   En-tête de l'article
   -------------------------------------------------------------------------- */

.af .af-arthead { padding: 38px 0 0; }

.af .af-arthead__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.af .af-arthead__title {
	font-family: var(--af-titre);
	margin: 0 0 18px;
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--af-navy);
}

.af .af-arthead__lead {
	margin: 0 0 24px;
	font-size: 20px;
	line-height: 1.55;
	color: var(--af-text-soft);
}

.af .af-arthead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 16px 0;
	border-top: 1px solid var(--af-border-soft);
	border-bottom: 1px solid var(--af-border-soft);
	font-size: 14px;
	color: var(--af-muted);
}

.af .af-arthead__meta strong { color: var(--af-text); font-weight: 600; }

.af .af-arthead__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--af-border);
}

.af .af-arthead__media {
	margin: 30px 0 0;
}

.af .af-arthead__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--af-r-xl);
}

/* --------------------------------------------------------------------------
   Sommaire
   -------------------------------------------------------------------------- */

.af .af-toc {
	margin: 34px 0 0;
	padding: 22px 26px;
	border: 1px solid var(--af-border);
	border-radius: var(--af-r-lg);
	background: var(--af-surface);
}

.af .af-toc__legend {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--af-muted);
}

.af .af-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: af-toc; }

.af .af-toc li { counter-increment: af-toc; }

.af .af-toc li + li { margin-top: 2px; }

.af .af-toc a,
.af .af-toc a:link,
.af .af-toc a:visited {
	display: flex;
	gap: 12px;
	padding: 7px 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--af-text) !important;
	text-decoration: none !important;
}

.af .af-toc a::before {
	content: counter(af-toc, decimal-leading-zero);
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--af-accent-fonce);
	padding-top: 2px;
}

.af .af-toc a:hover {
	color: var(--af-navy) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Sur grand écran, le sommaire passe à droite et suit la lecture. En dessous,
   il reprend sa place au-dessus du texte : une colonne latérale sur un écran
   étroit prendrait la largeur dont le texte a besoin. */

@media (min-width: 1200px) {
	/* Seulement quand un sommaire est rendu : sinon la colonne de 290 px
	   restait réservée dans le vide et poussait tout le contenu à gauche.
	   La classe est posée par le gabarit, pas devinée en CSS. */
	.af .af-art--toc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 290px;
		column-gap: 56px;
		max-width: 1306px;
	}

	.af .af-art--toc > nav,
	.af .af-art--toc .af-arthead,
	.af .af-art--toc .af-body,
	.af .af-art--toc .af-auteur { grid-column: 1; }

	.af .af-art--toc > .af-toc {
		grid-column: 2;
		/* span, et pas 2 / -1 : sans grid-template-rows déclarées, -1 désigne
		   la fin de la grille explicite, donc la ligne 1, et le sommaire
		   remontait écraser le fil d'Ariane. */
		grid-row: 2 / span 20;
		align-self: start;
		position: sticky;
		top: 116px;
		margin: 38px 0 0;
		max-height: calc(100vh - 150px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.af .af-art > .af-toc a { font-size: 15px; padding: 6px 0; }
}

/* --------------------------------------------------------------------------
   Corps de l'article
   -------------------------------------------------------------------------- */

.af .af-body { padding-top: 10px; }

.af .af-body > * { margin-top: 0; margin-bottom: 22px; }

.af .af-body p,
.af .af-body li {
	font-size: 19px;
	line-height: 1.68;
	color: var(--af-text-soft);
}

.af .af-body h2 {
	font-family: var(--af-titre);
	margin-top: 52px;
	margin-bottom: 18px;
	font-size: clamp(25px, 2.6vw, 31px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--af-navy);
	scroll-margin-top: 110px;
}

.af .af-body h3 {
	font-family: var(--af-titre);
	margin-top: 38px;
	margin-bottom: 14px;
	font-size: clamp(20px, 2vw, 23px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--af-navy);
	scroll-margin-top: 110px;
}

.af .af-body h4 {
	font-family: var(--af-titre);
	margin-top: 30px;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--af-navy);
}

.af .af-body ul,
.af .af-body ol { padding-left: 22px; }

.af .af-body li + li { margin-top: 8px; }

.af .af-body ul { list-style: none; padding-left: 0; }

.af .af-body ul > li {
	position: relative;
	padding-left: 26px;
}

.af .af-body ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 12px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--af-accent);
}

/* Pas de !important ici : la spécificité suffit à battre le kit Elementor,
   et laisse le dessin propre des encarts reprendre la main sur ses boutons. */

.af .af-body a,
.af .af-body a:link,
.af .af-body a:visited {
	color: var(--af-navy);
	text-decoration: underline;
	text-decoration-color: var(--af-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.af .af-body a:hover {
	text-decoration-color: var(--af-navy);
}

.af .af-body strong { color: var(--af-navy); font-weight: 700; }

.af .af-body img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--af-r-lg);
}

.af .af-body figure { margin-left: 0; margin-right: 0; }

.af .af-body figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--af-muted);
}

.af .af-body blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--af-accent);
}

.af .af-body blockquote p {
	font-size: 19px;
	line-height: 1.6;
	color: var(--af-text);
}

.af .af-body hr {
	height: 1px;
	margin: 44px 0;
	border: 0;
	background: var(--af-border);
}

.af .af-body > table,
.af .af-body > .wp-block-table { font-size: 16px; }

/* Le sommaire et la date de mise à jour sont rendus par le gabarit. Les
   versions que les extensions insèrent dans le contenu feraient doublon. */

.af .af-body .lwptoc,
.af .af-body .lwptoc_i,
.af .af-body .post-modified-info { display: none; }