.content-header {
	padding-top: 3rem;
	padding-bottom: 3rem;
	color: var(--white);
	background-color: var(--color-primary);
}

.content-header:not(:has(.media)) {
	padding-top: 5rem;
	padding-bottom: 4rem;
	background-image: url(/assets/images/header-bubbles-vertical.svg);
	background-repeat: no-repeat;
	background-position: calc(100% + 6.5rem) center;
	background-size: contain;
}

@media(min-width: 576px) {
	.content-header:not(:has(.media)) {
		background-image: url(/assets/images/header-bubbles.svg);
		background-position: calc(100% + 5.5rem) -1rem;
	}
}

.content-header-inner {
	margin: auto;
	padding: 0 1rem;
	max-width: 576px;
	color: var(--black-10);
}

@media(min-width: 576px) {
	.content-header-inner {
		padding: 0;
	}
}

@media(min-width: 1440px) {
	.content-header-inner {
		max-width: 736px;
	}
}

@media(min-width: 1920px) {
	.content-header-inner {
		max-width: 856px;
	}
}

.content-header header {
	padding-right: 1rem;
	padding-left: 1rem;
}

.content-header .media {
	margin-right: -1rem;
	margin-left: -1rem;
}

@media(min-width: 576px) {
	.content-header header {
		padding: 0;
	}

	.content-header .media {
		margin-right: initial;
		margin-left: initial;
	}
}

.content-header h1 {
	color: var(--white);
}

.content-header .subtitle {
	margin-top: 1rem;
	margin-bottom: 1rem;
	font: var(--xl);
}

.content-header header span[class^="icon-"] {
	margin-right: 1.5rem;
}

.content-header time,
.content-header .cat-presse,
.content-header .cat-event {
	margin-right: 1.5rem;
	padding-left: 1.5rem;
	background-size: 1.2rem;
	background-repeat: no-repeat;
	background-position: left 50%;
}

.content-header time {
	background-image: url(/assets/icons/calendar-blank--white.svg);
}

.content-header .cat-presse {
	background-image: url(/assets/icons/file--white.svg);
}

.content-header .cat-event {
	background-image: url(/assets/icons/calendar-blank--white.svg);
}

.content-header figcaption {
	padding-right: 1rem;
	padding-left: 1rem;
}

@media(min-width: 576px) {
	.content-header figcaption {
		padding: 0;
	}
}

.content-header figcaption {
	margin-top: 0.75rem;
	font: var(--s);
}

.content-header:not(:has(.media)) .content-header-inner {
	margin: auto;
	padding: 0 1rem;
	max-width: 696px;
}

@media(min-width: 696px) {
	.content-header:not(:has(.media)) .content-header-inner {
		padding: 0;
	}
}

@media(min-width: 1440px) {
	.content-header:not(:has(.media)) .content-header-inner {
		padding: 0;
		max-width: 1116px;
	}
}

@media(min-width: 1920px) {
	.content-header:not(:has(.media)) .content-header-inner {
		max-width: 1296px;
	}
}