/* ==========================================================================
   Bien-être Mental · article.css (articles seulement, après base.css)
   Maquettes : Article 1a (mobile 390 px) et Desktop 1c (1440 px).
   1. Icônes (masques SVG en data URI, aucune requête externe)
   2. Mise en page (fil d'Ariane, grille desktop : sommaire collant | article | colonne collante)
   3. En-tête de l'article, « L'essentiel à retenir »
   4. Sommaire (mobile repliable, colonne desktop, feuille + CTA collant)
   5. Image à la une
   6. Texte de l'article (titres, listes, liens, citations, figures, tableaux, vidéos)
   7. Blocs ajoutés au contenu (À lire aussi, Sources, FAQ en accordéon)
   8. Composants wwc (Wisewand) restylés dans le design system, quiz et outils Alpine
   9. « Quand consulter ? », signature de la rédaction
   10. Colonne droite (guide, rubrique, 3114)
   11. Pour aller plus loin
   12. Barre de progression, impression
   Points de rupture : 640 (grilles wwc), 768, 1024 (desktop), 1280 (colonne droite), 1440.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Icônes (Lucide) en masques : couleur = background-color de l'élément
   ---------------------------------------------------------------------- */
.bem-article-page {
	--bem-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
	--bem-i-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
	--bem-i-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
	--bem-i-important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
	--bem-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
	--bem-i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
	--bem-i-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5z'/%3E%3Cpath d='M15 3v6h6'/%3E%3C/svg%3E");
	--bem-i-example: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E");
	--bem-i-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E");
	--bem-i-pro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--bem-i-con: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
	--bem-i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
	--bem-i-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23595e65' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   2. Mise en page
   ---------------------------------------------------------------------- */
.bem-article-top {
	padding-top: 16px;
}

/* Fil d'Ariane : le titre de l'article (dernier élément) tient sur une ligne, tronqué au besoin (le H1 le donne en entier). */
.bem-article-top .bem-breadcrumb li:last-child {
	flex: 1 1 8em;
	min-width: 8em;
}

.bem-article-top .bem-breadcrumb li:last-child > [aria-current] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bem-article-layout__toc,
.bem-article-layout__aside {
	display: none;
}

.bem-article {
	max-width: 720px;
}

@media (min-width: 1024px) {
	.bem-article-top {
		padding-top: 36px;
	}

	.bem-article-layout {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 48px;
		align-items: start;
		padding-top: 32px;
		padding-bottom: 80px;
	}

	.bem-article-layout--no-toc {
		grid-template-columns: minmax(0, 720px);
	}

	.bem-article {
		max-width: none;
	}

	.bem-article-layout__toc {
		position: sticky;
		top: var(--header-offset);
		display: block;
		max-height: calc(100vh - var(--header-offset) - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-bottom: 8px;
	}

	.admin-bar .bem-article-layout__toc,
	.admin-bar .bem-article-layout__aside {
		top: calc(var(--header-offset) + 32px);
	}
}

@media (min-width: 1280px) {
	.bem-article-layout {
		grid-template-columns: 200px minmax(0, 1fr) 260px;
		gap: 40px;
	}

	.bem-article-layout--no-toc {
		grid-template-columns: minmax(0, 760px) 280px;
		justify-content: space-between;
	}

	.bem-article-layout__aside {
		position: sticky;
		top: var(--header-offset);
		display: block;
	}
}

@media (min-width: 1440px) {
	.bem-article-layout {
		grid-template-columns: 220px minmax(0, 700px) 300px;
		gap: 48px;
		justify-content: space-between;
	}

	.bem-article-layout--no-toc {
		grid-template-columns: minmax(0, 760px) 300px;
	}
}

/* -------------------------------------------------------------------------
   3. En-tête de l'article
   ---------------------------------------------------------------------- */
.bem-article__tags {
	margin: 14px 0 0;
}

/* Étiquettes liées : zone de clic agrandie au doigt. */
@media (pointer: coarse) {
	.bem-article__tags a.bem-tag {
		position: relative;
	}

	.bem-article__tags a.bem-tag::after {
		content: "";
		position: absolute;
		inset: -10px -3px;
	}
}

.bem-article__title {
	margin: 12px 0 0;
	font-size: 31px;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.bem-article__tags + .bem-article__title {
	margin-top: 12px;
}

.bem-article__chapo {
	margin: 14px 0 0;
	color: var(--color-neutral-800);
	font-size: 17px;
	line-height: 1.55;
}

.bem-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 14px 0 0;
	color: var(--color-neutral-700);
	font-size: 13px;
	line-height: 1.55;
}

.bem-article__by {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bem-article__by a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bem-article__by a:hover {
	color: var(--color-text);
}

.bem-article__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-accent-200);
}

.bem-article__avatar::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
}

@media (min-width: 1024px) {
	.bem-article__tags {
		margin-top: 0;
	}

	.bem-article__title,
	.bem-article__tags + .bem-article__title {
		margin-top: 16px;
		font-size: 52px;
		line-height: 1.05;
		letter-spacing: -0.015em;
	}

	.bem-article__head > .bem-article__title:first-child {
		margin-top: 0;
	}

	.bem-article__chapo {
		margin-top: 18px;
		font-size: 20px;
	}

	.bem-article__meta {
		gap: 8px 18px;
		margin-top: 20px;
		font-size: 14px;
	}

	.bem-article__by {
		gap: 8px;
		color: var(--color-text);
		font-weight: 700;
	}

	.bem-article__by a:hover {
		color: var(--color-accent-800);
	}

	.bem-article__avatar {
		width: 28px;
		height: 28px;
		background: var(--color-accent-300);
	}

	.bem-article__avatar::after {
		display: none;
	}
}

/* « L'essentiel à retenir » (repris du contenu, cf. inc/article.php) */
.bem-essentiel {
	margin: 22px 0 0;
	padding: 18px 18px 16px;
	border-radius: var(--radius-lg);
	background: var(--color-accent-100);
	box-shadow: inset 0 0 0 1.5px var(--color-accent-200);
}

.bem-essentiel__title {
	margin: 0;
	color: var(--color-accent-800);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.bem-essentiel__body {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.5;
}

.bem-essentiel__body p,
.bem-essentiel__body ul,
.bem-essentiel__body ol {
	margin: 10px 0 0;
}

.bem-essentiel__body > :first-child {
	margin-top: 0;
}

.bem-essentiel__body strong,
.bem-essentiel__body b {
	font-weight: 700;
}

.bem-essentiel__body ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.bem-essentiel__body ul > li {
	position: relative;
	padding-left: 30px;
}

.bem-essentiel__body ul > li::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: var(--color-accent-600);
	-webkit-mask: var(--bem-i-pro) center / contain no-repeat;
	mask: var(--bem-i-pro) center / contain no-repeat;
}

@media (min-width: 1024px) {
	.bem-essentiel {
		margin-top: 32px;
		padding: 26px 28px;
		background: var(--color-accent-200);
		box-shadow: none;
		color: var(--color-accent-900);
	}

	.bem-essentiel__title {
		color: inherit;
		font-family: var(--font-heading);
		font-size: 24px;
		font-weight: var(--font-heading-weight);
		letter-spacing: -0.01em;
		line-height: 1.12;
		text-transform: none;
	}

	.bem-essentiel__body {
		font-size: 17px;
		line-height: 1.55;
	}

	.bem-essentiel__body ul {
		gap: 6px;
		padding-left: 20px;
		list-style: disc;
	}

	.bem-essentiel__body ul > li {
		padding-left: 0;
	}

	.bem-essentiel__body ul > li::before {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   4. Sommaire
   ---------------------------------------------------------------------- */
.bem-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bem-toc__link {
	display: flex;
	gap: 10px;
	text-decoration: none;
}

.bem-toc__num {
	flex: none;
	font-weight: 700;
}

/* Mobile : « Dans cet article », ouvert par défaut. */
.bem-toc--inline {
	margin: 16px 0 0;
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.bem-toc__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 14px 16px;
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.bem-toc__title {
	flex: 1;
}

.bem-toc__chevron {
	transition: transform 0.2s ease;
}

.bem-toc__toggle[aria-expanded="true"] .bem-toc__chevron {
	transform: rotate(180deg);
}

.bem-toc--inline .bem-toc__list {
	display: flex;
	flex-direction: column;
	padding: 0 16px 12px;
}

.bem-toc--inline .bem-toc__link {
	padding: 8px 0;
	color: var(--color-accent-800);
	font-size: 15px;
	line-height: 1.4;
}

.bem-toc--inline .bem-toc__link:hover {
	color: var(--color-accent-600);
}

.bem-toc--inline .bem-toc__num {
	width: 16px;
	color: var(--color-accent-600);
}

@media (pointer: coarse) {
	.bem-toc--inline .bem-toc__link {
		align-items: center;
		min-height: 44px;
	}
}

/* Desktop : colonne collante à gauche. */
.bem-toc__eyebrow {
	margin: 0 0 10px;
	color: var(--color-neutral-700);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.55;
	text-transform: uppercase;
}

.bem-toc--side .bem-toc__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bem-toc--side .bem-toc__link {
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 14.5px;
	line-height: 1.35;
	transition: background-color 0.15s ease;
}

.bem-toc--side .bem-toc__link:hover {
	background: var(--color-neutral-100);
	color: var(--color-text);
}

.bem-toc--side .bem-toc__link[aria-current="true"] {
	background: var(--color-accent-200);
}

.bem-toc--side .bem-toc__num {
	min-width: 0.7em;
	color: var(--color-accent-700);
}

@media (min-width: 1024px) {
	.bem-toc--inline {
		display: none;
	}
}

/* Feuille « Sommaire » et CTA collant (mobile). */
.bem-toc-cta {
	gap: 10px;
	padding: 13px 22px;
	font-size: 15px;
}

.bem-toc__sheet {
	margin-top: 14px;
}

.bem-toc__choice > .bem-toc__num {
	flex: none;
	width: 16px;
	color: var(--color-accent-600);
}

.bem-toc__choice[aria-current="true"] {
	background: var(--color-accent-200);
}

/* -------------------------------------------------------------------------
   5. Image à la une (après le texte clé ; chargée sans lazy, fetchpriority high : souvent l'élément LCP)
   ---------------------------------------------------------------------- */
.bem-article__figure {
	margin: 20px 0 0;
}

.bem-article__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.bem-article__caption {
	margin-top: 8px;
	color: var(--color-neutral-700);
	font-size: 13px;
	line-height: 1.45;
}

@media (min-width: 1024px) {
	.bem-article__figure {
		margin-top: 36px;
	}

	.bem-article__img {
		aspect-ratio: 16 / 9;
	}
}

/* -------------------------------------------------------------------------
   6. Texte de l'article
   ---------------------------------------------------------------------- */
.bem-article__content {
	margin-top: 24px;
	font-size: 17px;
	line-height: 1.65;
}

.bem-article__content p,
.bem-article__content ul,
.bem-article__content ol,
.bem-article__content dl {
	margin: 12px 0 0;
}

.bem-article__content h2 {
	margin: 32px 0 0;
	font-size: 24px;
	line-height: 1.15;
}

.bem-article__content h3 {
	margin: 26px 0 0;
	font-family: var(--font-body);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.bem-article__content h4,
.bem-article__content h5,
.bem-article__content h6 {
	margin: 22px 0 0;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.35;
}

.bem-article__content h2 + p,
.bem-article__content h3 + p,
.bem-article__content h4 + p {
	margin-top: 10px;
}

.bem-article__content strong,
.bem-article__content b {
	font-weight: 700;
}

.bem-article__content a {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bem-article__content a:hover {
	color: var(--color-accent-800);
	text-decoration-thickness: 2px;
}

.bem-article__content ul,
.bem-article__content ol {
	padding-left: 1.35em;
}

.bem-article__content li::marker {
	color: var(--color-accent-600);
}

.bem-article__content ol > li::marker {
	font-weight: 700;
}

.bem-article__content li + li {
	margin-top: 6px;
}

.bem-article__content li > ul,
.bem-article__content li > ol {
	margin-top: 6px;
}

.bem-article__content small {
	font-size: 0.85em;
}

.bem-article__content hr {
	height: 1px;
	margin: 32px 0;
	border: 0;
	background: var(--color-divider);
}

/* Citations. */
.bem-article__content blockquote {
	position: relative;
	margin: 24px 0 0;
	padding: 18px 20px 18px 54px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
	font-size: 17px;
	font-style: normal;
	line-height: 1.6;
}

.bem-article__content blockquote::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 20px;
	width: 22px;
	height: 22px;
	background-color: var(--color-accent-500);
	-webkit-mask: var(--bem-i-quote) center / contain no-repeat;
	mask: var(--bem-i-quote) center / contain no-repeat;
}

.bem-article__content blockquote > :first-child {
	margin-top: 0;
}

.bem-article__content blockquote p {
	margin: 0;
}

.bem-article__content blockquote p + p {
	margin-top: 8px;
}

.bem-article__content blockquote cite {
	display: block;
	margin-top: 8px;
	color: var(--color-accent-800);
	font-size: 14px;
	font-style: normal;
}

/* Figures et images. */
.bem-article__content figure {
	margin: 24px 0 0;
}

.bem-article__content figure img,
.bem-article__content p > img:only-child {
	width: 100%;
}

.bem-article__content img {
	border-radius: var(--radius-md);
}

.bem-article__content figcaption {
	margin-top: 8px;
	color: var(--color-neutral-700);
	font-size: 13px;
	line-height: 1.45;
}

.bem-article__content iframe,
.bem-article__content video {
	max-width: 100%;
	border: 0;
}

/* Vidéos (façade YouTube, cf. base.css). */
.bem-article__content .bem-yt {
	margin: 24px 0 0;
}

/* Tableaux : défilement horizontal, cadre arrondi. */
.bem-table {
	margin: 24px 0 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-md);
	background: var(--color-bg);
}

.bem-table:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.bem-article__content .bem-table table {
	width: 100%;
	min-width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.45;
}

.bem-article__content .bem-table caption {
	padding: 12px 14px 0;
	color: var(--color-neutral-700);
	font-size: 13px;
	text-align: left;
}

.bem-article__content .bem-table th,
.bem-article__content .bem-table td {
	min-width: 8.5em;
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--color-neutral-200);
	text-align: left;
	vertical-align: top;
}

.bem-article__content .bem-table th {
	background: var(--color-accent-100);
	color: var(--color-accent-900);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.bem-article__content .bem-table tr:last-child > td,
.bem-article__content .bem-table tbody tr:last-child > th {
	border-bottom: 0;
}

.bem-article__content .bem-table tbody tr:nth-child(even) > td {
	background: var(--color-neutral-100);
}

.bem-article__content .bem-table p {
	margin: 0;
}

@media (min-width: 1024px) {
	.bem-article__content {
		margin-top: 32px;
		font-size: 18px;
		line-height: 1.7;
	}

	.bem-article__content p,
	.bem-article__content ul,
	.bem-article__content ol,
	.bem-article__content dl {
		margin-top: 14px;
	}

	.bem-article__content h2 {
		margin-top: 44px;
		font-size: 32px;
		line-height: 1.12;
	}

	.bem-article__content h3 {
		margin-top: 32px;
		font-size: 21px;
	}

	.bem-article__content h2 + p,
	.bem-article__content h3 + p {
		margin-top: 14px;
	}

	.bem-article__content blockquote {
		padding: 20px 24px 20px 60px;
		font-size: 18px;
	}

	.bem-article__content blockquote::before {
		top: 24px;
		left: 24px;
	}

	.bem-article__content .bem-table table {
		font-size: 15.5px;
	}

	.bem-article__content .bem-table th {
		font-size: 14.5px;
	}
}

/* -------------------------------------------------------------------------
   7. Blocs ajoutés au contenu
   ---------------------------------------------------------------------- */

/* « À lire aussi » : carte de lien contextuel (p.bem-related-reading transformé). */
.bem-article__content .bem-related-reading {
	margin: 24px 0 0;
}

.bem-article__content .bem-related-reading__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bem-article__content .bem-related-reading__link:hover {
	background: var(--color-neutral-200);
	color: var(--color-text);
}

.bem-related-reading__text {
	flex: 1;
	min-width: 0;
}

.bem-related-reading__kicker {
	display: block;
	color: var(--color-accent-700);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.bem-related-reading__title {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

/* « À lire aussi » rédigé (div.bem-lire-aussi). */
.bem-article__content .bem-lire-aussi {
	margin: 24px 0 0;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-size: 15.5px;
	line-height: 1.5;
}

.bem-article__content .bem-lire-aussi p {
	margin: 0;
}

.bem-article__content .bem-lire-aussi p + p {
	margin-top: 8px;
}

.bem-lire-aussi__kicker {
	display: block;
	margin-bottom: 3px;
	color: var(--color-accent-700);
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.bem-article__content .bem-related-reading__link,
	.bem-article__content .bem-lire-aussi {
		padding: 18px 22px;
		background: var(--color-neutral-100);
	}

	.bem-article__content .bem-related-reading__link {
		gap: 14px;
	}

	.bem-related-reading__title {
		font-size: 17px;
	}

	.bem-article__content .bem-lire-aussi {
		font-size: 16.5px;
	}
}

/* Précision propre à l'article (p#bem-disclaimer, 4 articles) : gardée, en note discrète.
   L'encadré générique div#bem-disclaimer est, lui, retiré au rendu (inc/article.php). */
.bem-article__content p#bem-disclaimer {
	margin-top: 24px;
	color: var(--color-neutral-700);
	font-size: 14px;
	line-height: 1.5;
}

/* Sources nommées et liées. */
.bem-article__content .bem-sources {
	margin: 32px 0 0;
	padding: 18px;
	border-radius: var(--radius-md);
	background: var(--color-neutral-100);
	font-size: 15px;
	line-height: 1.5;
}

.bem-article__content .bem-sources h2 {
	margin: 0;
	color: var(--color-neutral-700);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.bem-article__content .bem-sources ul,
.bem-article__content .bem-sources ol {
	margin-top: 10px;
	padding-left: 1.1em;
}

.bem-article__content .bem-sources li + li {
	margin-top: 10px;
}

.bem-article__content .bem-sources p {
	margin-top: 8px;
}

.bem-article__content .bem-sources a {
	font-weight: 600;
}

@media (min-width: 1024px) {
	.bem-article__content .bem-sources {
		margin-top: 40px;
		padding: 24px 0 0;
		border-radius: 0;
		background: none;
		box-shadow: 0 -1px 0 var(--color-neutral-300);
		font-size: 15.5px;
	}

	.bem-article__content .bem-sources h2 {
		color: var(--color-text);
		font-size: 16px;
		letter-spacing: 0;
		text-transform: none;
	}
}

/* FAQ du contenu en accordéon (questions = H3, réponses en hidden="until-found"). */
.bem-article__content .bem-faq--article {
	margin-top: 14px;
}

.bem-article__content .bem-faq__q {
	margin: 0;
	font-family: var(--font-body);
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0;
	line-height: inherit;
}

.bem-article__content .bem-faq__a {
	font-size: 15px;
	line-height: 1.5;
}

.bem-article__content .bem-faq__a p,
.bem-article__content .bem-faq__a ul,
.bem-article__content .bem-faq__a ol {
	margin: 8px 0 0;
}

.bem-article__content .bem-faq__a > :first-child {
	margin-top: 0;
}

.bem-article__content .bem-faq__a li + li {
	margin-top: 4px;
}

/* Sans JavaScript, toutes les réponses restent lisibles (1.0.2 : avec leur marge basse, que base.css retire
   aux réponses fermées). */
.no-js .bem-faq--article .bem-faq__a[hidden] {
	display: block;
	content-visibility: visible;
	padding-bottom: 16px;
}

@media (min-width: 1024px) {
	.bem-article__content .bem-faq--article {
		margin-top: 16px;
	}

	.bem-article__content .bem-faq--article .bem-faq__item {
		background: var(--color-neutral-100);
	}

	.bem-article__content .bem-faq__a {
		font-size: 16px;
		line-height: 1.6;
	}

	.no-js .bem-faq--article .bem-faq__a[hidden] {
		padding-bottom: 20px;
	}
}

/* -------------------------------------------------------------------------
   8. Composants wwc (Wisewand) dans le design system « Bleu apaisant »
   Spécificité ≥ (0,2,0) : l'emporte sur wwc.min.css (:where(.wwc)…, .wwc{…}) quand il est chargé,
   et se suffit à lui-même quand il ne l'est pas. Les icônes distantes (api.iconify.design) ne sont jamais utilisées.
   ---------------------------------------------------------------------- */
.bem-prose .wwc {
	--wwc-primary: #457ac8;
	--wwc-success: #2a6969;
	--wwc-danger: #1e4275;
	--wwc-font-family: var(--font-body);
	--wwc-checkbox-icon: none;
	--wwc-icon-chevron: none;
	--wwc-icon-tip: none;
	--wwc-icon-info: none;
	--wwc-icon-calendar: none;
	--wwc-icon-clock: none;
	--wwc-icon-link: none;
	--wwc-icon-download: none;
	--wwc-icon-bookmark: none;
	--wwc-icon-quote: none;
	--wwc-icon-message: none;
	--wwc-icon-code: none;
	--wwc-icon-terminal: none;
	--wwc-icon-settings: none;
	--wwc-icon-list: none;
	--wwc-icon-file: none;
	--wwc-icon-image: none;
	--wwc-icon-check: none;
	--wwc-icon-star: none;
	--wwc-icon-zap: none;
	--wwc-icon-lock: none;
	--wwc-icon-shield: none;
	--wwc-icon-eye: none;
	--wwc-icon-user: none;
	--wwc-icon-users: none;
	--wwc-icon-heart: none;
	--wwc-icon-credit-card: none;
	--wwc-icon-gift: none;
	--wwc-icon-tag: none;
	--wwc-icon-book: none;
	--wwc-icon-graduation: none;
	--wwc-icon-map-pin: none;
	--wwc-icon-compass: none;
	--wwc-icon-globe: none;
	--wwc-icon-video: none;
	--wwc-icon-mic: none;
	--wwc-icon-camera: none;
	--wwc-icon-pro: none;
	--wwc-icon-con: none;
	position: relative;
	box-sizing: border-box;
	margin: 24px 0 0;
	padding: 16px 18px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-neutral-100);
	color: var(--color-text);
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	list-style: none;
}

.bem-prose .wwc > :first-child {
	margin-top: 0;
}

.bem-prose .wwc p {
	margin: 8px 0 0;
	font-size: inherit;
}

.bem-prose .wwc ul,
.bem-prose .wwc ol {
	margin: 8px 0 0;
	padding: 0 0 0 1.25em;
}

.bem-prose .wwc ul {
	list-style: disc;
}

.bem-prose .wwc ol {
	list-style: decimal;
}

.bem-prose .wwc li {
	margin: 0;
	padding: 0;
}

.bem-prose .wwc li + li {
	margin-top: 4px;
}

.bem-prose .wwc li::marker {
	color: currentColor;
}

.bem-prose .wwc strong,
.bem-prose .wwc b {
	font-weight: 700;
}

.bem-prose .wwc em,
.bem-prose .wwc i {
	font-style: italic;
}

.bem-prose .wwc a {
	color: var(--color-accent-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bem-prose .wwc a:hover {
	color: var(--color-accent-800);
}

.bem-prose .wwc :focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	box-shadow: none;
}

.bem-prose .wwc .wwc-title {
	display: block;
	margin: 0;
	color: inherit;
	font-family: var(--font-body);
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.35;
}

.bem-prose .wwc > .wwc-title + * {
	margin-top: 6px;
}

.bem-prose .wwc .wwc-subtitle {
	margin: 4px 0 0;
	color: var(--color-neutral-700);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}

.bem-prose .wwc .wwc-body {
	margin: 0;
	font-size: inherit;
}

.bem-prose .wwc > .wwc-title + .wwc-body {
	margin-top: 6px;
}

.bem-prose .wwc .wwc-header {
	margin: 0;
	padding: 0;
	border: 0;
}

.bem-prose .wwc .wwc-header + .wwc-body,
.bem-prose .wwc .wwc-body + .wwc-body {
	margin-top: 14px;
}

.bem-prose .wwc .wwc-footer {
	margin: 16px 0 0;
	padding: 14px 0 0;
	border: 0;
	border-top: 1px solid var(--color-divider);
	font-size: 15px;
	font-weight: 400;
}

/* Encadré simple (div.wwc sans variante) : même famille que « L'essentiel à retenir ». */
.bem-prose .wwc:not([class*="wwc-"]):not([x-data]) {
	border-radius: var(--radius-lg);
	background: var(--color-accent-100);
	box-shadow: inset 0 0 0 1.5px var(--color-accent-200);
	color: var(--color-accent-900);
}

/* Encadrés à icône. */
.bem-prose .wwc:is(.wwc-info, .wwc-tip, .wwc-warning, .wwc-important, .wwc-note, .wwc-example, .wwc-star, .wwc-book, .wwc-zap, .wwc-check) {
	padding-left: 50px;
}

.bem-prose .wwc:is(.wwc-info, .wwc-tip, .wwc-warning, .wwc-important, .wwc-note, .wwc-example, .wwc-star, .wwc-book, .wwc-zap, .wwc-check)::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 17px;
	width: 22px;
	height: 22px;
	background-color: var(--bem-wwc-ico, currentColor);
	-webkit-mask: var(--bem-wwc-icon, var(--bem-i-info)) center / contain no-repeat;
	mask: var(--bem-wwc-icon, var(--bem-i-info)) center / contain no-repeat;
}

.bem-prose .wwc.wwc-info {
	--bem-wwc-icon: var(--bem-i-info);
	--bem-wwc-ico: var(--color-accent-600);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

.bem-prose .wwc.wwc-tip {
	--bem-wwc-icon: var(--bem-i-tip);
	--bem-wwc-ico: var(--color-accent-2-600);
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-900);
}

.bem-prose .wwc.wwc-warning,
.bem-prose .wwc.wwc-important {
	--bem-wwc-icon: var(--bem-i-warning);
	--bem-wwc-ico: var(--color-accent-800);
	background: var(--color-accent-200);
	color: var(--color-accent-900);
}

.bem-prose .wwc.wwc-important {
	--bem-wwc-icon: var(--bem-i-important);
}

.bem-prose .wwc.wwc-note,
.bem-prose .wwc.wwc-example {
	--bem-wwc-icon: var(--bem-i-note);
	--bem-wwc-ico: var(--color-neutral-700);
	background: var(--color-neutral-100);
	color: var(--color-text);
}

.bem-prose .wwc.wwc-example {
	--bem-wwc-icon: var(--bem-i-example);
}

.bem-prose .wwc.wwc-star {
	--bem-wwc-icon: var(--bem-i-star);
	--bem-wwc-ico: var(--color-accent-600);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

.bem-prose .wwc.wwc-book {
	--bem-wwc-icon: var(--bem-i-book);
	--bem-wwc-ico: var(--color-accent-2-700);
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-900);
}

.bem-prose .wwc.wwc-zap {
	--bem-wwc-icon: var(--bem-i-zap);
	--bem-wwc-ico: var(--color-accent-800);
	background: var(--color-accent-200);
	color: var(--color-accent-900);
}

.bem-prose .wwc.wwc-check {
	--bem-wwc-icon: var(--bem-i-pro);
	--bem-wwc-ico: var(--color-accent-2-700);
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-900);
}

/* Citation (wwc-quote) : comme les citations du texte. */
.bem-prose .wwc.wwc-quote {
	padding: 18px 20px 18px 54px;
	background: var(--color-accent-100);
	color: var(--color-accent-900);
	font-size: 17px;
	line-height: 1.6;
}

.bem-prose .wwc.wwc-quote::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 20px;
	width: 22px;
	height: 22px;
	background-color: var(--color-accent-500);
	-webkit-mask: var(--bem-i-quote) center / contain no-repeat;
	mask: var(--bem-i-quote) center / contain no-repeat;
}

.bem-prose .wwc.wwc-quote p {
	margin: 0;
}

.bem-prose .wwc.wwc-quote p + p {
	margin-top: 8px;
}

/* Blockquote placé dans un wwc-quote (près de la moitié des blocs) : pas de deuxième boîte ni de deuxième guillemet. */
.bem-prose .wwc.wwc-quote > blockquote {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.bem-prose .wwc.wwc-quote > blockquote::before {
	content: none;
	display: none;
}

/* Grilles et colonnes (avantages / limites, chiffres). */
.bem-prose .wwc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.bem-prose .wwc.wwc-grid {
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.bem-prose .wwc .wwc-grid {
	margin: 12px 0 0;
}

.bem-prose .wwc .wwc-column {
	margin: 0;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: var(--color-neutral-100);
}

.bem-prose .wwc .wwc-column > .wwc-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
}

.bem-prose .wwc .wwc-column > .wwc-title + * {
	margin-top: 6px;
}

.bem-prose .wwc .wwc-column > p {
	margin: 6px 0 0;
}

.bem-prose .wwc .wwc-column[class*="wwc-icon-"] > .wwc-title::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: var(--bem-wwc-ico, currentColor);
	-webkit-mask: var(--bem-wwc-icon, var(--bem-i-info)) center / contain no-repeat;
	mask: var(--bem-wwc-icon, var(--bem-i-info)) center / contain no-repeat;
}

.bem-prose .wwc .wwc-column.wwc-icon-pro {
	--bem-wwc-icon: var(--bem-i-pro);
	--bem-wwc-ico: var(--color-accent-2-700);
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-900);
}

.bem-prose .wwc .wwc-column.wwc-icon-con {
	--bem-wwc-icon: var(--bem-i-con);
	--bem-wwc-ico: var(--color-neutral-700);
	background: var(--color-neutral-100);
	color: var(--color-text);
}

.bem-prose .wwc .wwc-column.wwc-icon-star {
	--bem-wwc-icon: var(--bem-i-star);
	--bem-wwc-ico: var(--color-accent-600);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

.bem-prose .wwc .wwc-column.wwc-icon-info {
	--bem-wwc-icon: var(--bem-i-info);
	--bem-wwc-ico: var(--color-accent-600);
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

/* Chiffre clé (résultat de quiz, encadré seul). */
.bem-prose .wwc .wwc-metric,
.bem-prose .wwc .wwc-column.wwc-metric {
	background: var(--color-bg);
	color: var(--color-text);
	text-align: center;
}

.bem-prose .wwc .wwc-metric > .wwc-title {
	justify-content: center;
	color: var(--color-accent-800);
	font-family: var(--font-heading);
	font-size: 34px;
	font-weight: var(--font-heading-weight);
	line-height: 1.1;
}

.bem-prose .wwc .wwc-metric > .wwc-title::before {
	display: none;
}

.bem-prose .wwc .wwc-metric > p {
	font-size: 14.5px;
}

.bem-prose .wwc.wwc-key-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	padding: 0;
	background: none;
}

.bem-prose .wwc.wwc-key-figures > .wwc-title {
	grid-column: 1 / -1;
}

.bem-prose .wwc.wwc-key-figures > .wwc-column {
	background: var(--color-accent-100);
	color: var(--color-accent-900);
}

.bem-prose .wwc.wwc-key-figures > .wwc-column > .wwc-title {
	color: var(--color-accent-800);
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: var(--font-heading-weight);
	line-height: 1.05;
}

.bem-prose .wwc.wwc-key-figures > .wwc-column > p {
	margin-top: 6px;
	font-size: 14.5px;
	line-height: 1.4;
}

/* Étapes. */
.bem-prose .wwc.wwc-steps {
	background: var(--color-surface);
}

.bem-prose .wwc.wwc-steps > ol {
	counter-reset: bem-step;
	margin-top: 12px;
	padding: 0;
	list-style: none;
}

.bem-prose .wwc.wwc-steps > ol > li {
	position: relative;
	min-height: 28px;
	padding-left: 40px;
	counter-increment: bem-step;
}

.bem-prose .wwc.wwc-steps > ol > li + li {
	margin-top: 10px;
}

.bem-prose .wwc.wwc-steps > ol > li::before {
	content: counter(bem-step);
	position: absolute;
	top: -1px;
	left: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-accent-700);
	color: var(--color-accent-100);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.bem-prose .wwc .wwc-step {
	margin: 10px 0 0;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: var(--color-bg);
}

.bem-prose .wwc.wwc-steps > .wwc-step:first-child {
	margin-top: 0;
}

.bem-prose .wwc .wwc-step > .wwc-title,
.bem-prose .wwc .wwc-step-title {
	font-size: 16px;
}

.bem-prose .wwc .wwc-step > p,
.bem-prose .wwc .wwc-step-content {
	margin: 4px 0 0;
	font-size: 15.5px;
}

.bem-prose .wwc .wwc-step-number {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0 0 6px;
	border-radius: 50%;
	background: var(--color-accent-700);
	color: var(--color-accent-100);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* Tableau wwc : le cadre est porté par .bem-table. */
.bem-prose .wwc.wwc-table {
	padding: 0;
	overflow: visible;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.bem-prose .wwc.wwc-table::before {
	display: none;
}

.bem-prose .wwc.wwc-table > .wwc-title {
	margin-bottom: 10px;
}

.bem-prose .wwc.wwc-table .bem-table {
	margin-top: 0;
}

/* Quiz et outils interactifs (Alpine : x-data, x-show, x-cloak ne sont jamais modifiés). */
.bem-prose .wwc[x-data],
.bem-prose .wwc.wwc-widget {
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--color-accent-100);
	box-shadow: inset 0 0 0 1.5px var(--color-accent-200);
	color: var(--color-text);
}

.bem-prose .wwc .wwc-header {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-accent-200);
}

.bem-prose .wwc .wwc-header .wwc-title {
	color: var(--color-accent-900);
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: var(--font-heading-weight);
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.bem-prose .wwc .wwc-header .wwc-subtitle {
	margin-top: 6px;
}

.bem-prose .wwc[x-data] .wwc-body > p:first-child {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
}

.bem-prose .wwc[x-data] .wwc-footer,
.bem-prose .wwc.wwc-widget .wwc-footer {
	border-top-color: var(--color-accent-200);
}

.bem-prose .wwc .wwc-column .wwc-title:empty,
.bem-prose .wwc .wwc-title:empty {
	min-height: 1.35em;
}

/* Résultats mis en avant par un style en ligne (font-size 2rem / 1.5rem / 1.2rem). */
.bem-prose .wwc [style*="font-size: 2rem"],
.bem-prose .wwc [style*="font-size:2rem"] {
	color: var(--color-accent-900);
	font-family: var(--font-heading) !important;
	font-size: 26px !important;
	font-weight: var(--font-heading-weight) !important;
	line-height: 1.12 !important;
}

.bem-prose .wwc [style*="font-size: 1.5rem"],
.bem-prose .wwc [style*="font-size:1.5rem"] {
	color: var(--color-accent-900);
	font-family: var(--font-heading) !important;
	font-size: 22px !important;
	font-weight: var(--font-heading-weight) !important;
	line-height: 1.15 !important;
}

.bem-prose .wwc [style*="font-size: 1.2rem"],
.bem-prose .wwc [style*="font-size:1.2rem"] {
	font-size: 18px !important;
	line-height: 1.35 !important;
}

/* Encadrés de résultat à l'intérieur d'un quiz (sans classe .wwc). */
.bem-prose .wwc :is(.wwc-zap, .wwc-tip, .wwc-info, .wwc-warning, .wwc-note):not(.wwc) {
	margin: 12px 0 0;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: var(--color-bg);
}

/* Boutons. */
.bem-prose .wwc button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 11px 20px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-accent-700);
	box-shadow: none;
	color: var(--color-accent-100);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.bem-prose .wwc button:hover {
	background: var(--color-accent-800);
	color: var(--color-accent-100);
}

.bem-prose .wwc button + button {
	margin-left: 8px;
}

.bem-prose .wwc button.wwc-secondary {
	justify-content: flex-start;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: var(--radius-md);
	background: var(--color-bg);
	box-shadow: inset 0 0 0 1.5px var(--color-neutral-300);
	color: var(--color-text);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

.bem-prose .wwc button.wwc-secondary:hover {
	background: var(--color-bg);
	box-shadow: inset 0 0 0 2px var(--color-accent-500);
	color: var(--color-text);
}

.bem-prose .wwc .wwc-footer button.wwc-secondary {
	justify-content: center;
	width: auto;
	border-radius: var(--radius-pill);
	text-align: center;
}

.bem-prose .wwc button:disabled,
.bem-prose .wwc button[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Options de quiz verrouillées après la réponse : pas d'opacité (contraste AA conservé), texte neutral-800. */
.bem-prose .wwc button.wwc-secondary:disabled,
.bem-prose .wwc button.wwc-secondary[disabled] {
	opacity: 1;
	color: var(--color-neutral-800);
	cursor: default;
}

.bem-prose .wwc button.wwc-secondary:disabled:hover,
.bem-prose .wwc button.wwc-secondary[disabled]:hover {
	box-shadow: inset 0 0 0 1.5px var(--color-neutral-300);
	color: var(--color-neutral-800);
}

/* Pas d'anneau wwc au clic souris (le focus clavier garde le contour :focus-visible). */
.bem-prose .wwc button:focus:not(:focus-visible) {
	box-shadow: none;
}

.bem-prose .wwc button.wwc-secondary:focus:not(:focus-visible) {
	box-shadow: inset 0 0 0 1.5px var(--color-neutral-300);
}

/* Champs. */
.bem-prose .wwc .wwc-field {
	margin: 16px 0 0;
}

.bem-prose .wwc .wwc-field:first-child {
	margin-top: 0;
}

.bem-prose .wwc .wwc-field > div {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
}

.bem-prose .wwc label {
	display: block;
	margin: 0 0 8px;
	color: var(--color-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.bem-prose .wwc input[type="radio"] + label,
.bem-prose .wwc input[type="checkbox"] + label {
	display: inline;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.bem-prose .wwc input[type="radio"],
.bem-prose .wwc input[type="checkbox"] {
	-webkit-appearance: auto;
	appearance: auto;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	accent-color: var(--color-accent-700);
	cursor: pointer;
}

.bem-prose .wwc input[type="range"] {
	-webkit-appearance: auto;
	appearance: auto;
	display: block;
	width: 100%;
	height: auto;
	margin: 4px 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	accent-color: var(--color-accent-700);
	cursor: pointer;
}

.bem-prose .wwc select,
.bem-prose .wwc textarea,
.bem-prose .wwc input:is([type="text"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="url"]) {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--radius-md);
	background-color: var(--color-bg);
	box-shadow: inset 0 0 0 1.5px var(--color-neutral-300);
	color: var(--color-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
}

.bem-prose .wwc select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px;
	background-image: var(--bem-i-select);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	cursor: pointer;
}

.bem-prose .wwc select:focus,
.bem-prose .wwc textarea:focus,
.bem-prose .wwc input:is([type="text"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="url"]):focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--color-accent-600);
}

@media (min-width: 640px) {
	.bem-prose .wwc-grid {
		grid-template-columns: repeat(var(--wwc-grid-cols, 2), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bem-prose .wwc {
		margin-top: 28px;
		padding: 20px 24px;
		font-size: 17px;
	}

	.bem-prose .wwc:is(.wwc-info, .wwc-tip, .wwc-warning, .wwc-important, .wwc-note, .wwc-example, .wwc-star, .wwc-book, .wwc-zap, .wwc-check) {
		padding-left: 58px;
	}

	.bem-prose .wwc:is(.wwc-info, .wwc-tip, .wwc-warning, .wwc-important, .wwc-note, .wwc-example, .wwc-star, .wwc-book, .wwc-zap, .wwc-check)::before {
		top: 22px;
		left: 22px;
	}

	.bem-prose .wwc.wwc-quote {
		padding: 20px 24px 20px 60px;
		font-size: 18px;
	}

	.bem-prose .wwc.wwc-quote::before {
		top: 24px;
		left: 24px;
	}

	.bem-prose .wwc.wwc-grid,
	.bem-prose .wwc.wwc-key-figures,
	.bem-prose .wwc.wwc-table {
		padding: 0;
	}

	.bem-prose .wwc .wwc-grid,
	.bem-prose .wwc.wwc-grid,
	.bem-prose .wwc.wwc-key-figures {
		gap: 12px;
	}

	.bem-prose .wwc[x-data],
	.bem-prose .wwc.wwc-widget {
		padding: 28px;
	}

	.bem-prose .wwc .wwc-header .wwc-title {
		font-size: 26px;
	}

	.bem-prose .wwc .wwc-column {
		padding: 18px 20px;
	}
}

/* -------------------------------------------------------------------------
   9. « Quand consulter ? » (variante inline de base.css, placée dans le corps avant la FAQ et les Sources
      par bem_article_insert_quand_consulter()) et signature
   ---------------------------------------------------------------------- */
.bem-article__qc {
	margin-top: 18px;
}

/* Dans le corps : les liens gardent la couleur du bloc sarcelle (et non l'accent des liens du texte). */
.bem-article__content .bem-qc a,
.bem-article__content .bem-qc a:hover {
	color: var(--color-accent-2-900);
}

/* Mobile (maquette Article 1a) : signature sarcelle, après les Sources. */
.bem-signature {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 16px 0 0;
	padding: 18px;
	border-radius: var(--radius-md);
	background: var(--color-accent-2-200);
	color: var(--color-accent-2-900);
}

.bem-signature__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-accent-2-100);
}

.bem-signature__avatar::after {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-accent);
}

.bem-signature__text {
	flex: 1;
	min-width: 0;
}

.bem-signature__name {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.bem-signature__name a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bem-signature__desc {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.bem-signature__desc {
	color: inherit;
}

.bem-signature__charte {
	display: flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin-top: 8px;
	color: var(--color-accent-2-900);
	font-weight: 700;
	text-underline-offset: 3px;
}

.bem-signature__charte:hover {
	color: var(--color-accent-2-900);
	text-decoration-thickness: 2px;
}

@media (min-width: 1024px) {
	.bem-article__qc {
		margin-top: 22px;
	}

	/* Desktop (maquette 1c) : signature en surface. */
	.bem-signature {
		align-items: center;
		gap: 16px;
		margin-top: 28px;
		padding: 22px;
		border-radius: var(--radius-lg);
		background: var(--color-surface);
		color: var(--color-text);
	}

	.bem-signature__avatar {
		width: 52px;
		height: 52px;
		background: var(--color-accent-300);
	}

	.bem-signature__avatar::after {
		display: none;
	}

	.bem-signature__name {
		font-size: 16px;
	}

	.bem-signature__desc {
		margin-top: 3px;
		color: var(--color-neutral-800);
		font-size: 14.5px;
	}

	.bem-signature__charte {
		display: inline;
		margin: 0;
		color: var(--color-accent-700);
		font-weight: 400;
	}

	.bem-signature__charte:hover {
		color: var(--color-accent-800);
	}

	.bem-signature__charte .bem-icon {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   10. Colonne droite (≥ 1280 px)
   ---------------------------------------------------------------------- */
.bem-aside {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bem-aside__kicker {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.55;
	text-transform: uppercase;
}

.bem-aside__guide {
	display: block;
	padding: 22px;
	border-radius: var(--radius-lg);
	background: var(--color-accent-700);
	color: var(--color-accent-100);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bem-aside__guide:hover {
	background: var(--color-accent-800);
	color: var(--color-accent-100);
}

.bem-aside__guide .bem-aside__kicker {
	color: var(--color-accent-200);
}

.bem-aside__guide-name {
	display: block;
	margin-top: 6px;
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1.12;
}

.bem-aside__guide-cta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
}

.bem-aside__rubrique {
	display: block;
	padding: 18px 22px;
	border-radius: var(--radius-lg);
	background: var(--color-neutral-100);
	color: var(--color-text);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bem-aside__rubrique:hover {
	background: var(--color-neutral-200);
	color: var(--color-text);
}

.bem-aside__rubrique .bem-aside__kicker {
	color: var(--color-neutral-700);
}

.bem-aside__rubrique-name {
	display: block;
	margin-top: 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.bem-aside__help {
	padding: 20px 22px;
	border-radius: var(--radius-lg);
	background: var(--color-accent-2-200);
	color: var(--color-accent-2-900);
}

.bem-aside__help p {
	margin: 0;
}

.bem-aside__help-lead {
	font-size: 15px;
	line-height: 1.45;
}

.bem-aside__help .bem-aside__help-num {
	margin-top: 4px;
	font-family: var(--font-heading);
	font-size: 34px;
	line-height: 1;
}

.bem-aside__help-num a {
	color: inherit;
	text-decoration: none;
}

.bem-aside__help-num a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.bem-aside__help-num a:focus-visible {
	outline-color: var(--color-accent-2-900);
}

.bem-aside__help .bem-aside__help-note {
	margin-top: 6px;
	font-size: 13.5px;
}

/* -------------------------------------------------------------------------
   11. Pour aller plus loin
   ---------------------------------------------------------------------- */
.bem-more {
	padding: 36px 0 40px;
}

.bem-more__title {
	margin: 0;
	font-size: 25px;
	line-height: 1.12;
}

.bem-more__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.bem-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 16px;
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bem-tile--guide {
	background: var(--color-accent-200);
	color: var(--color-accent-900);
}

.bem-tile--guide:hover {
	background: var(--color-accent-300);
	color: var(--color-accent-900);
}

.bem-tile--rubrique {
	background: var(--color-accent-2-200);
	color: var(--color-accent-2-900);
}

.bem-tile--rubrique:hover {
	background: var(--color-accent-2-300);
	color: var(--color-accent-2-900);
}

.bem-tile__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.55;
	text-transform: uppercase;
}

.bem-tile__label {
	font-family: var(--font-heading);
	font-size: 19px;
	line-height: 1.15;
}

.bem-more__cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 16px;
}

.bem-more__tiles + .bem-more__cards {
	margin-top: 18px;
}

/* 1.0.2 : « Sur le même thème », autres liens du bloc silo d'origine, en liste texte sous les cartes. */
.bem-more__silo {
	margin-top: 24px;
}

.bem-more__silo-title {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.bem-more__silo-list {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

/* Cibles tactiles d'au moins 44 px (21,7 px de texte + 2 × 12 px = 45,7 px). */
.bem-more__silo-link {
	display: block;
	padding: 12px 0;
	color: var(--color-accent-700);
	font-size: 15.5px;
	line-height: 1.4;
	text-wrap: pretty;
}

/* Mobile et tablette : cartes en ligne (vignette 76 px, étiquette, titre). */
@media (max-width: 1023.98px) {
	.bem-more .bem-card--stack {
		flex-direction: row;
		gap: 14px;
	}

	.bem-more .bem-card--stack .bem-card__media {
		width: 76px;
		height: 76px;
		aspect-ratio: auto;
		border-radius: var(--radius-sm);
	}

	.bem-more .bem-card--stack .bem-card__media.is-empty::after {
		bottom: -18px;
		left: -14px;
		width: 62px;
		height: 62px;
	}

	.bem-more .bem-card--stack .bem-card__body {
		padding-top: 0;
	}

	.bem-more .bem-card--stack .bem-card__title {
		margin-top: 6px;
		font-size: 15.5px;
		line-height: 1.3;
	}

	.bem-more .bem-card--stack .bem-card__body > .bem-card__title:first-child {
		margin-top: 0;
	}
}

@media (min-width: 1024px) {
	.bem-more {
		padding: 0 0 80px;
	}

	.bem-more__title {
		font-size: 36px;
		line-height: 1.1;
	}

	.bem-more__tiles {
		grid-template-columns: repeat(2, minmax(0, 320px));
		gap: 14px;
		margin-top: 24px;
	}

	.bem-more__cards {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
		margin-top: 24px;
	}

	.bem-more__tiles + .bem-more__cards {
		margin-top: 24px;
	}

	.bem-more__silo {
		margin-top: 32px;
	}

	.bem-more__silo-title {
		font-size: 19px;
	}

	.bem-more__silo-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
		margin-top: 8px;
	}

	.bem-more__silo-link {
		padding: 6px 0;
		font-size: 16px;
		line-height: 1.5;
	}
}

/* Écran large tactile (tablette en paysage) : 24 px de texte + 2 × 10 px = 44 px. */
@media (min-width: 1024px) and (pointer: coarse) {
	.bem-more__silo-link {
		padding: 10px 0;
	}
}

/* La colonne droite porte le guide et la rubrique dès 1280 px. */
@media (min-width: 1280px) {
	.bem-more__tiles,
	.bem-more--tiles-only {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   12. Barre de progression (mobile), impression
   ---------------------------------------------------------------------- */
.bem-progress {
	height: 3px;
	background: var(--color-neutral-200);
}

.bem-progress__bar {
	width: 0;
	height: 100%;
	border-radius: 0 3px 3px 0;
	background: var(--color-accent);
}

@media (min-width: 1024px) {
	.bem-progress {
		display: none;
	}
}

@media print {
	.bem-progress,
	.bem-toc,
	.bem-article-layout__toc,
	.bem-article-layout__aside,
	.bem-more,
	.bem-yt {
		display: none !important;
	}

	.bem-faq__a[hidden] {
		display: block !important;
		content-visibility: visible !important;
	}

	.bem-article-layout {
		display: block;
	}
}