div.blog-article {

	& h1 {
		font-size: 28px;
		line-height: 36px;
		font-weight: normal;
		border-bottom: none;
		color: white;
		text-align: left;
		text-shadow: 0 0 8px #28282880;
		margin: auto;
		padding-bottom: .5em;
	}

	& h2 {
		margin-top: 40px;
		margin-bottom: 20px;
		padding-bottom: .3rem;
		border-bottom: solid 4px var(--wyg-blue-alt);
		width: fit-content;
	}

	& :is(h2:first-child, div:first-child > h2) {
		margin-top: 0;
	}

	& h3 {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	& ul {
		list-style: disc;
		margin-left: 20px;
	}

	& li:first-child :is(.sous-titre-2, p:has(> .sous-titre-2)) {
		margin-top: 0;
	}

	& :is(.sous-titre-2, p:has(> .sous-titre-2)) {
		font-size: 18px;
		margin-top: 24px;
		margin-bottom: 6px;
	}

	& section.related-articles {
		padding: 24px 20px 12px 20px;
		display: none;
	}

	& section:not(.related-articles) {
		padding: 1.5rem 20px;
		background-color: var(--background);

		& > div {
			display: flex;
			flex-direction: column;
			max-width: 1320px;
			margin: 0 auto;
		}

		& img {
			max-width: 100%;
			min-height: 240px;
			align-self: center;
			object-position: center;
			margin-bottom: 1rem;
			object-fit: cover;
			border-radius: 4px;
			box-shadow: 0px 0 6px 2px #1B335F33;
		}
	}

	& section:first-child {
		padding: 0;

		& > img {
			position: absolute;
			top: calc(var(--currentScroll) * 0.5 + 4.5rem);
			width: 100%;
			height: 100%;
			max-width: unset;
			margin: 0;
			border-radius: 0;
			box-shadow: none;
		}

		& > div {
			position: absolute;
			background-image: linear-gradient(180deg, #28282800 0%, #282828e0 100%);
			inset: auto 0 0 0;
			max-width: unset;
			padding: 6rem 20px 1rem 20px;

			& > * {
				width: min(1320px, calc(100% - 40px));
			}
		}

		& div {
			margin: 0 auto;
			color: var(--wyg-blue-alt-10);
			font-size: 16px;
		}
	}

	& section:is(.intro, .conclusion) {
		background-color: white;
		padding: 2rem;
	}

	& span:has(+ h2) {
		font: normal normal bold 36px/42px "Playfair Display";
		color: var(--wyg-blue-alt);
		margin-right: 12px;
		margin-bottom: 38px;
	}

	& div.titre-numero {
		display: flex;
		align-items: center;
	}
}

.sommaire {

	& div.content {
		padding: 1rem;
	}

	& a {
		display: flex;
		align-items: flex-start;

		&.sommaire-h2 {
			font: normal normal bold 20px/32px "Playfair Display";
			margin-top: 1rem;
			color: var(--title);
		}

		&.sommaire-h3 {
			font: normal normal normal 16px/24px "Muli";
			margin-top: 10px;
			color: var(--text);

			&::before {
				content: "";
				background: var(--text) content-box;
				border-radius: 50%;
				display: inline-block;
				width: .3em;
				min-width: .3em;
				height: .3em;
				max-height: .3em;
				margin: .7em .5em;
			}
		}
	}
}

@media only screen and (min-width: 480px) {

	div.blog-article h1 {
		font-size: 36px;
		line-height: 48px;
	}
}

@media only screen and (min-width: 640px) {

	div.blog-article span:has(+ h2) {
		font-size: 48px;
		line-height: 72px;
	}

	div.blog-article section.intro:has(div.content) {
		padding: 2rem 20px 1rem 20px;
	}

	.sommaire a.sommaire-h2 {
		font-size: 24px;
		line-height: 36px;
	}

	.sommaire a.sommaire-h3 {
		font-size: 20px;
		line-height: 32px;
	}

	section.related-articles {
		padding: 40px 4rem 28px 4rem;
	}
}

@media only screen and (min-width: 720px) {

	div.blog-article {

		& section:not(.related-articles) {
			font-size: 18px;
			line-height: 30px;
		}

		& h1 {
			padding: 8rem 20px 2rem 20px;
			font-size: 48px;
			line-height: 72px;
		}

		& :is(.sous-titre-2, p:has(> .sous-titre-2)) {
			font-size: 20px;
		}

		& section.intro div.content {
			padding: 2rem;
		}
	}

	.sommaire div.content {
		padding: 2rem;
	}
}

@media only screen and (min-width: 800px) {
	section.related-articles {
		padding: 40px 8rem 28px 8rem;
	}
}

@media only screen and (min-width: 1024px) {

	div.blog-article section.intro div.content {
		padding: 2rem 4rem;
	}

	div.blog-article section.conclusion {
		padding: 4rem 2rem;
	}

	.sommaire div.content {
		padding: 2rem 4rem;
	}
}