.pageArticlePage {
	display: flex;
	flex-direction: column;
	font-family: var(--font-family-rubik);
	margin-bottom: 4.5rem;
  	margin-top: 1rem;


	.tag {
		margin-top: 3.5rem;
		background: var(--color-2);
    	color: var(--white);
		font-size: 0.75rem;
		font-weight: 500;
		border-radius: 1.875rem;
		padding: 0.375rem 1rem;
		margin-right: auto;
	}

	.tag:hover {
		background: var(--color);
	}

	.page-article-page--title {
		font-size: 1.375rem;
		line-height: 1.75rem;
		color: var(--blue);
		font-weight: 700;
		text-transform: uppercase;
		margin: 1rem 0 0;
	}

	.page-article-page--summary {
		font-size: 1.375rem;
		line-height: 1.75rem;
		color: var(--blue);
		font-weight: 300;
		text-transform: uppercase;
		margin: 0;
	}

	.page-article-page--content {
		margin-top: 1.625rem;
		display: flex;
		flex-direction: column;
		gap: 1.875rem;

		.component-wrapper-video {
			width: 100%;
			height: 100%;
		}

		.page-article-page--blocks {
			display: flex;
			flex-direction: column;
			gap: 1.875rem;

			.topic-title-text,
			.component-title-cta-images-and-caption {
				background-color: var(--light-grey-2);
				padding: 1.875rem;
				display: flex;
				flex-direction: column;
				gap: 2rem;

				.topic-title-text--text,
				.component-title-cta-images-and-caption--description {
					position: relative;
					font-size: 1rem;
					font-weight: 100;
					line-height: 1.375rem;
					color: var(--blue);
					text-align: center;
					padding-top: 2rem;

					p {
						margin: 0;
					}
				}

				.topic-title-text--text::before,
				.component-title-cta-images-and-caption--description::before {
					position: absolute;
					content: '';
					display: inline-block;
					width: 0.5rem;
					height: 0.5rem;
					top: 0.125rem;
					left: 50%;
					transform: translateX(-50%);
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg id='Groupe_179' data-name='Groupe 179' transform='translate(-204 -601)'%3E%3Ccircle id='Ellipse_2' data-name='Ellipse 2' cx='4' cy='4' r='4' transform='translate(204 601)' fill='%236a3135'/%3E%3C/g%3E%3C/svg%3E");
					background-color: transparent;
					background-size: cover;
					background-repeat: no-repeat;
				}

				.component-cta {
					position: relative;
					color: var(--white);
					font-size: 1rem;
					font-weight: 700;
					background-color: var(--brown);
					border: 0.125rem solid var(--brown);
					border-radius: 0.5rem;
					padding: 0.875rem 1.25rem 0.875rem 2.25rem;
					margin: 0 auto;
					transition: opacity 0.3s;

					svg {
						display: none;
					}
				}

				.component-cta:hover {
					opacity: 0.7;
				}
				
				.component-cta::before {
					position: absolute;
					content: '';
					display: inline-block;
					width: 1rem;
					height: 0.875rem;
					top: 50%;
					left: 0.875rem;
					transform: translateY(-50%);
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.618' height='13.4' viewBox='0 0 14.618 13.4'%3E%3Cg id='Download' transform='translate(-4 -5)'%3E%3Cpath id='Tracé_93' data-name='Tracé 93' d='M18.618,16.572V14.136a.609.609,0,0,0-1.218,0v2.436a.609.609,0,0,1-.609.609H5.827a.609.609,0,0,1-.609-.609V14.136a.609.609,0,1,0-1.218,0v2.436A1.827,1.827,0,0,0,5.827,18.4H16.79A1.827,1.827,0,0,0,18.618,16.572Zm-3.886-3.179-3.045,2.436a.609.609,0,0,1-.755,0L7.886,13.393a.609.609,0,0,1,.755-.95L10.7,14.087V5.609a.609.609,0,1,1,1.218,0v8.478l2.059-1.644a.609.609,0,1,1,.755.95Z' transform='translate(0 0)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
					background-color: transparent;
					background-size: cover;
					background-repeat: no-repeat;
				}
			}
		}
	}

	.page-article-page--additional-blocks {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 5.5rem;
	}
}


/* DESKTOP */
@media screen and (min-width: 64rem) {
	.pageArticlePage {
		.page-article-page--title {
			font-size: 1.875rem;
			line-height: 2.375rem;
		}
		.page-article-page--summary {
			font-size: 1.875rem;
			line-height: 2.375rem;
		}

		.page-article-page--content { 
			display: grid;
			grid-template-columns: 2fr 1fr;

			.component-wrapper-video {
				grid-column: 1;
				margin-bottom: auto;
				height: auto;
			}

			.page-article-page--blocks {
				grid-column: 2;
			}
		}
	}
}
/* ==================================================================
   PAGE ARTICLE (fiche vidéo) — refonte 2026
   Maquettes : desktop 68:1243 (1440) / mobile 68:1858 (390)
   Unités relatives uniquement (rem), base 16.
   ================================================================== */

.pageArticlePage.pageArticlePage {
	margin: 0;
	background-color: var(--lx-gray-100);
}

/* ------------------------------------------------------------- HERO */

/* La couleur ne va pas de bord à bord : la maquette (68:1248) pose une
   carte arrondie de 1344 px dans les gouttières. */
.pageArticlePage--hero {
	padding: 0 var(--lx-gutter-mobile);
	text-align: left;
}

.pageArticlePage--hero--inner {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 100%;
	max-width: 84rem;
	margin-inline: auto;
	padding: 1.5rem;
	border-radius: 0.75rem;
	/* Couleur de la thématique parente, posée sur <main>. */
	background-color: var(--lx-theme, var(--lx-accent-main));
}

.pageArticlePage--hero--main {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
}

/* ------------------------------------------------------ FIL D'ARIANE */

.pageArticlePage--hero--breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--lx-font-main);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--lx-neutral-very-light);
}

/* Séparateur décoratif : en CSS pour rester hors du texte lu. */
.pageArticlePage--hero--breadcrumb li + li::before {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-right: 0.25rem;
	vertical-align: -0.1875rem;
	background-color: currentColor;
}

.pageArticlePage--hero--breadcrumb a {
	color: inherit;
	text-decoration: underline;
}

.pageArticlePage--hero--breadcrumb a:hover {
	color: var(--lx-accent-second-light);
}

/* ------------------------------------------------------------ TEXTES */

.pageArticlePage--hero--text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.pageArticlePage--hero--tag {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	background-color: var(--lx-gray-100);
	font-family: var(--lx-font-main);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--lx-main);
	text-decoration: none;
}

.pageArticlePage--hero--tag:hover {
	background-color: var(--lx-gray-100);
	color: var(--lx-main);
}

.pageArticlePage--hero--title {
	margin: 0;
	font-family: var(--lx-font-main);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--lx-gray-100);
	overflow-wrap: break-word;
}

.pageArticlePage--hero--summary {
	margin: 0;
	font-family: var(--lx-font-main);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--lx-neutral-very-light);
}

/* -------------------------------------------------- CARTE RÉCAPITULATIVE */

.pageArticlePage--hero--infos {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	border-radius: 0.5rem;
	background-color: rgba(255, 255, 255, 0.2);
}

.pageArticlePage--hero--duration {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--lx-font-main);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--lx-gray-100);
}

.pageArticlePage--hero--duration-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--lx-accent-main);
}

.pageArticlePage--hero--duration-icon::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--lx-gray-100);
}

.pageArticlePage--hero--group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pageArticlePage--hero--group-title {
	margin: 0;
	font-family: var(--lx-font-main);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lx-gray-100);
}

.pageArticlePage--hero--chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pageArticlePage--hero--chips li {
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	background-color: var(--lx-gray-100);
	font-family: var(--lx-font-main);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--lx-main);
}

/* ------------------------------------------------------------- BLOCS */

.pageArticlePage--blocks {
	width: 100%;
	max-width: 84rem;
	margin-inline: auto;
	padding: 1rem var(--lx-gutter-mobile) 0;
	text-align: left;
}

/* ------------------------------------------------------------ VIDÉO */

/* Haut réduit : le bloc d'introduction au-dessus a déjà sa marge basse,
   les deux s'additionnaient (retour client). */
.pageArticlePage--video {
	padding: 0.5rem var(--lx-gutter-mobile) 3.5rem;
}

.pageArticlePage--video--player {
	width: 100%;
	max-width: 84rem;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 0.75rem;
	background-color: var(--lx-main);
	aspect-ratio: 16 / 9;
}

.pageArticlePage--video--media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==================================================================
   DESKTOP — à partir de 64rem (1024px)
   ================================================================== */

@media screen and (min-width: 64rem) {

	.pageArticlePage--hero {
		padding: 0 var(--lx-gutter-desktop);
	}

	.pageArticlePage--hero--inner {
		padding: 1.5rem 3rem 3rem;
	}

	.pageArticlePage--hero--inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 3rem;
	}

	.pageArticlePage--hero--main {
		/* 816 px dans la maquette. */
		flex: 0 1 51rem;
		gap: 4rem;
	}

	.pageArticlePage--hero--title {
		font-size: 3.5rem;
	}

	.pageArticlePage--hero--summary {
		font-size: 1.25rem;
		max-width: 31.125rem;
	}

	.pageArticlePage--hero--infos {
		/* 384 px dans la maquette. */
		flex: 0 0 24rem;
		margin-top: 3.6875rem;
	}

	.pageArticlePage--blocks {
		padding: 3rem var(--lx-gutter-desktop) 0;
	}

	.pageArticlePage--video {
		padding: 1rem var(--lx-gutter-desktop) 6rem;
	}
}

/* La vidéo et ses onglets partagent une rangée (maquette 68:1289). */
.pageArticlePage--video--inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	max-width: 84rem;
	margin-inline: auto;
}

.pageArticlePage--video--player {
	flex: 1 1 auto;
	min-width: 0;
}

@media screen and (min-width: 64rem) {

	.pageArticlePage--video--inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.5rem;
	}

	/* 432 px dans la maquette. */
	.pageArticlePage--video--aside {
		flex: 0 0 27rem;
	}
}