/**
 * Front page (landing) styles.
 *
 * Every length below is written in the numbers of the design mock-ups:
 * desktop mock = 1435 x 788 CSS px, mobile mock = 369 CSS px wide.
 * `--dh-u` is one design pixel: it equals exactly 1px at the mock width and
 * scales the whole block up/down proportionally between the clamp bounds,
 * so `calc(52 * var(--dh-u))` is literally "52px in the design".
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.dh-hero {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;
	--dh-header: 60px;   /* .top-header sits above the hero and scrolls with it */

	position: relative;
	width: 100%;
	max-width: none !important;
	margin-block: 0;
	background: var(--dh-navy);
	color: #fff;
	overflow: hidden;
}

/* Right-hand visual, cut by the diagonal.
   The box spans the right half of the section, so the diagonal that runs from
   61.5% (top) to 54.22% (bottom) of the section becomes 23% / 8.43% here. */
.dh-hero__media {
	position: absolute;
	z-index: 0;
	inset: 0 0 0 50%;
	clip-path: polygon(23% 0, 100% 0, 100% 100%, 8.43% 100%);
}

.dh-hero__media img,
.dh-hero__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.dh-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	/* The mock is 788 tall, but the hero has to reach the bottom of the first
	   screen whatever the window height, otherwise the next section peeks out
	   under it on load. This is a floor only — the padding and the content push
	   the hero taller on short viewports. */
	min-height: calc(100vh - var(--dh-header));
	min-height: calc(100svh - var(--dh-header));
	flex-direction: column;
	justify-content: center;
	padding: calc(72 * var(--dh-u)) calc(147 * var(--dh-u));
}

.dh-hero__col {
	width: 100%;
	max-width: calc(600 * var(--dh-u));
}

/* --- Eyebrow ------------------------------------------------------------ */

.dh-hero__eyebrow {
	margin: 0;
	font-size: calc(15.9 * var(--dh-u));
	font-weight: 500;
	line-height: calc(17.5 / 15.9);
	text-transform: uppercase;
}

/* --- Title -------------------------------------------------------------- */

.dh-hero__title {
	margin: calc(20.5 * var(--dh-u)) 0 0;
	font-family: Oswald, sans-serif;
	font-size: calc(51.9 * var(--dh-u));
	font-weight: 600;
	line-height: calc(55 / 51.9);
	text-transform: uppercase;
}

/* Orange rule under the last line of the title. */
.dh-hero__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(4 * var(--dh-u));
	text-underline-offset: calc(6 * var(--dh-u));
}

/* --- Lead --------------------------------------------------------------- */

.dh-hero__lead {
	max-width: calc(530 * var(--dh-u));
	margin: calc(50 * var(--dh-u)) 0 0;
	font-size: calc(15.9 * var(--dh-u));
	font-weight: 400;
	line-height: calc(18 / 15.9);
}

/* --- Scroll chevron (mobile only) --------------------------------------- */

.dh-hero__scroll {
	display: none;
	justify-content: center;
	margin-top: calc(21 * var(--dh-u));
	color: var(--dh-orange);
}

.dh-hero__scroll svg {
	display: block;
	width: calc(19.8 * var(--dh-u));
	height: auto;
}

/* --- Buttons ------------------------------------------------------------ */

.dh-hero__actions {
	display: flex;
	margin-top: calc(85 * var(--dh-u));
	gap: calc(18 * var(--dh-u));
}

.dh-btn {
	display: flex;
	min-width: calc(255 * var(--dh-u));
	min-height: calc(71 * var(--dh-u));
	align-items: center;
	justify-content: center;
	padding: calc(8 * var(--dh-u)) calc(37 * var(--dh-u));
	border: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(19.75 * var(--dh-u));
	font-weight: 700;
	line-height: calc(22 / 19.75);
	text-align: center;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dh-btn--primary {
	background: var(--dh-orange);
	color: var(--dh-navy);
}

.dh-btn--primary:hover,
.dh-btn--primary:focus-visible {
	background: #ff4a36;
}

.dh-btn--ghost {
	border: calc(3 * var(--dh-u)) solid #fff;
	background: transparent;
	color: #fff;
}

.dh-btn--ghost:hover,
.dh-btn--ghost:focus-visible {
	background: #fff;
	color: var(--dh-navy);
}

/* ==========================================================================
   2. Hero — mobile (mock: 369px wide)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-hero {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */
	}

	.dh-hero__media {
		display: none;
	}

	.dh-hero__inner {
		min-height: 0;
		align-items: center;
		padding: calc(57.5 * var(--dh-u)) calc(24 * var(--dh-u)) calc(32.5 * var(--dh-u));
	}

	.dh-hero__col {
		max-width: calc(321 * var(--dh-u));
		text-align: center;
	}

	.dh-hero__eyebrow {
		font-size: calc(13.6 * var(--dh-u));
		line-height: calc(15 / 13.6);
	}

	.dh-hero__title {
		max-width: calc(286 * var(--dh-u));
		margin: calc(14 * var(--dh-u)) auto 0;
		font-size: calc(30.9 * var(--dh-u));
		line-height: calc(33 / 30.9);
	}

	.dh-hero__title-rule {
		text-decoration-thickness: calc(3 * var(--dh-u));
		text-underline-offset: calc(4 * var(--dh-u));
	}

	.dh-hero__lead {
		max-width: calc(327 * var(--dh-u));
		margin: calc(35.5 * var(--dh-u)) auto 0;
		font-size: calc(13.6 * var(--dh-u));
		line-height: calc(15.5 / 13.6);
	}

	.dh-hero__scroll {
		display: flex;
	}

	.dh-hero__actions {
		flex-direction: column;
		align-items: center;
		margin-top: calc(23.5 * var(--dh-u));
		gap: calc(14 * var(--dh-u));
	}

	.dh-btn {
		width: calc(224 * var(--dh-u));
		min-width: 0;
		min-height: calc(62 * var(--dh-u));
		padding-inline: calc(12 * var(--dh-u));
		font-size: calc(17.3 * var(--dh-u));
		line-height: calc(20 / 17.3);
	}

	.dh-btn--ghost {
		border-width: calc(2.5 * var(--dh-u));
	}
}

/* ==========================================================================
   3. Audience — "Conçu pour tous ceux qui…"
   ========================================================================== */

.dh-audience {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;
	--dh-notch: calc(20.3 * var(--dh-u));   /* 45° cut, bottom-left corner */
	--dh-shadow-x: calc(10.4 * var(--dh-u));
	--dh-shadow-y: calc(8.2 * var(--dh-u));

	width: 100%;
	max-width: none !important;
	margin-block: 0;
	padding: calc(68.5 * var(--dh-u)) calc(17 * var(--dh-u)) calc(88 * var(--dh-u));
	background: #dfddd9;
	color: var(--dh-navy);
}

/* --- Section heading ---------------------------------------------------- */

.dh-audience__title {
	margin: 0 auto;
	font-family: Oswald, sans-serif;
	font-size: calc(52 * var(--dh-u));
	font-weight: 600;
	line-height: calc(55.3 / 52);
	text-align: center;
	text-transform: uppercase;
}

.dh-audience__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(3.3 * var(--dh-u));
	text-underline-offset: calc(9.6 * var(--dh-u));
}

/* Line breaks come from the mock-up: the desktop and mobile splits differ, so
   each break is rendered only at the width it belongs to. */
.dh-br-mobile {
	display: none;
}

/* --- Carousel ----------------------------------------------------------- */

.dh-audience__grid {
	display: flex;
	/* The track is centred and only as wide as the cards, so the row never
	   drifts to the left edge on screens wider than the mock-up. The padding
	   is what keeps the drop shadow inside the scroll container. */
	max-width: calc(1390.6 * var(--dh-u));
	margin: calc(77.3 * var(--dh-u)) auto 0;
	padding: 0 var(--dh-shadow-x) var(--dh-shadow-y) 0;
	gap: calc(30.8 * var(--dh-u));
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.dh-audience__grid::-webkit-scrollbar {
	display: none;
}

/* --- Card --------------------------------------------------------------- */

.dh-audience__item {
	position: relative;
	width: calc(251.4 * var(--dh-u));
	flex: 0 0 calc(251.4 * var(--dh-u));
	scroll-snap-align: start;
}

/* The shadow is the card's own silhouette, offset — a real element rather than
   a drop-shadow filter, which Chrome tiles (and visibly seams) on tall cards. */
.dh-audience__item::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: var(--dh-shadow-y);
	right: calc(-1 * var(--dh-shadow-x));
	bottom: calc(-1 * var(--dh-shadow-y));
	left: var(--dh-shadow-x);
	background: var(--dh-navy);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--dh-notch) 100%,
		0 calc(100% - var(--dh-notch))
	);
}

.dh-audience__card {
	position: relative;
	z-index: 1;
	display: flex;
	height: 100%;
	flex-direction: column;
	background: #fff;
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--dh-notch) 100%,
		0 calc(100% - var(--dh-notch))
	);
}

.dh-audience__media {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 251.4 / 221.8;
	align-items: center;
	justify-content: center;
	background: #f1f0ee;
	overflow: hidden;
}

.dh-audience__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stand-in until the photography lands; an <img> in the media covers it. */
.dh-audience__placeholder {
	display: flex;
	width: calc(175.3 * var(--dh-u));
	height: calc(65 * var(--dh-u));
	align-items: center;
	justify-content: center;
	background: #f9f8f8;
	color: #687582;
	font-family: Oswald, sans-serif;
	font-size: calc(18.8 * var(--dh-u));
	font-weight: 600;
	text-transform: uppercase;
	transform: rotate(17.4deg);
}

.dh-audience__body {
	padding: calc(31.8 * var(--dh-u)) calc(24 * var(--dh-u)) calc(29.5 * var(--dh-u));
}

.dh-audience__name {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(22 * var(--dh-u));
	font-weight: 600;
	line-height: calc(24.65 / 22);
	text-transform: uppercase;
}

.dh-audience__text {
	margin: calc(28.5 * var(--dh-u)) 0 0;
	font-size: calc(15.35 * var(--dh-u));
	font-weight: 400;
	line-height: calc(18.2 / 15.35);
}

/* --- Arrows ------------------------------------------------------------- */

.dh-audience__nav {
	display: flex;
	margin-top: calc(43.8 * var(--dh-u));
	gap: calc(30 * var(--dh-u));
	justify-content: center;
}

.dh-audience__arrow {
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dh-orange);
	cursor: pointer;
}

.dh-audience__arrow svg {
	display: block;
	width: calc(23.6 * var(--dh-u));
	height: calc(20.8 * var(--dh-u));
}

.dh-audience__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ==========================================================================
   4. Audience — mobile (mock: 369px wide, one card per screen)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-audience {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */
		--dh-notch: calc(24.9 * var(--dh-u));
		--dh-shadow-x: calc(7.8 * var(--dh-u));
		--dh-shadow-y: calc(7.8 * var(--dh-u));

		padding: calc(57.5 * var(--dh-u)) calc(24 * var(--dh-u)) calc(48 * var(--dh-u));
	}

	.dh-audience__title {
		max-width: calc(320 * var(--dh-u));
		font-size: calc(32.3 * var(--dh-u));
		line-height: calc(33.9 / 32.3);
	}

	.dh-audience__title-rule {
		text-decoration: none;
	}

	.dh-audience__title-rule .dh-audience__title-rule-mobile {
		text-decoration: underline;
		text-decoration-color: var(--dh-orange);
		text-decoration-skip-ink: none;
		text-decoration-thickness: calc(3.1 * var(--dh-u));
		text-underline-offset: calc(7.3 * var(--dh-u));
	}

	.dh-br-desktop {
		display: none;
	}

	.dh-br-mobile {
		display: inline;
	}

	/* One card per screen, edge to edge. */
	.dh-audience__grid {
		max-width: none;
		margin: calc(68.5 * var(--dh-u)) calc(-24 * var(--dh-u)) 0;
		padding: 0 calc(21.25 * var(--dh-u)) var(--dh-shadow-y);
		gap: calc(21.25 * var(--dh-u));
		justify-content: flex-start;
	}

	.dh-audience__item {
		width: calc(326.5 * var(--dh-u));
		flex: 0 0 calc(326.5 * var(--dh-u));
		scroll-snap-align: center;
	}

	.dh-audience__card {
		text-align: center;
	}

	.dh-audience__media {
		aspect-ratio: 326.5 / 142.5;
	}

	.dh-audience__placeholder {
		width: calc(156.9 * var(--dh-u));
		height: calc(57.4 * var(--dh-u));
		font-size: calc(16.7 * var(--dh-u));
	}

	.dh-audience__body {
		padding: calc(17.4 * var(--dh-u)) calc(24 * var(--dh-u)) calc(21.8 * var(--dh-u));
	}

	.dh-audience__name {
		font-size: calc(19.5 * var(--dh-u));
		line-height: calc(21.2 / 19.5);
	}

	.dh-audience__text {
		margin-top: calc(10.3 * var(--dh-u));
		font-size: calc(13.8 * var(--dh-u));
		line-height: calc(16.3 / 13.8);
	}

	.dh-audience__nav {
		margin-top: calc(32.2 * var(--dh-u));
	}
}

/* ==========================================================================
   5. Friction — "Arrêtez de courir après le contenu."
   ========================================================================== */

.dh-friction {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;
	--dh-rule: #b0afaf;

	width: 100%;
	max-width: none !important;
	margin-block: 0;
	padding: calc(73.8 * var(--dh-u)) calc(147 * var(--dh-u)) calc(95 * var(--dh-u));
	background: #fff;
	color: var(--dh-navy);
}

/* --- Heading + lead ----------------------------------------------------- */

.dh-friction__title {
	max-width: calc(900 * var(--dh-u));
	margin: 0 auto;
	font-family: Oswald, sans-serif;
	font-size: calc(51.4 * var(--dh-u));
	font-weight: 600;
	line-height: calc(55.8 / 51.4);
	text-align: center;
	text-transform: uppercase;
}

.dh-friction__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(3 * var(--dh-u));
	text-underline-offset: calc(6.5 * var(--dh-u));
}

.dh-friction__lead {
	max-width: calc(780 * var(--dh-u));
	margin: calc(41 * var(--dh-u)) auto 0;
	font-size: calc(17.85 * var(--dh-u));
	font-weight: 400;
	line-height: calc(19.9 / 17.85);
	text-align: center;
}

/* --- Constats ----------------------------------------------------------- */

.dh-friction__grid {
	display: grid;
	margin-top: calc(49 * var(--dh-u));
	grid-template-columns: repeat(4, calc(269.7 * var(--dh-u)));
	justify-content: center;
}

.dh-friction__item {
	padding: calc(10.5 * var(--dh-u)) 0 calc(29 * var(--dh-u));
	text-align: center;
}

.dh-friction__item + .dh-friction__item {
	/* 3.5px dash / 0.5px gap, as measured on the mock-up */
	background-image: repeating-linear-gradient(
		to bottom,
		var(--dh-rule) 0 calc(3.5 * var(--dh-u)),
		transparent calc(3.5 * var(--dh-u)) calc(4 * var(--dh-u))
	);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 1px 100%;
}

.dh-friction__label {
	margin: 0;
	color: #717171;
	font-size: calc(15.6 * var(--dh-u));
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}

.dh-friction__statement {
	max-width: calc(206 * var(--dh-u));
	margin: calc(14 * var(--dh-u)) auto 0;
	font-family: Oswald, sans-serif;
	font-size: calc(21.8 * var(--dh-u));
	font-weight: 600;
	line-height: calc(26.9 / 21.8);
	text-transform: uppercase;
}

/* --- Solution ----------------------------------------------------------- */

.dh-friction__solution {
	position: relative;
	display: flow-root; /* keeps the child margins from collapsing out */
	width: calc(978.2 * var(--dh-u));
	margin: calc(-11.5 * var(--dh-u)) auto 0;
	text-align: center;
}

.dh-friction__bracket {
	position: absolute;
	top: 0;
	width: calc(251.3 * var(--dh-u));
	height: calc(121.7 * var(--dh-u));
	background-image:
		repeating-linear-gradient(to bottom, var(--dh-navy) 0 calc(3.5 * var(--dh-u)), transparent calc(3.5 * var(--dh-u)) calc(4 * var(--dh-u))),
		repeating-linear-gradient(to right, var(--dh-navy) 0 calc(3.5 * var(--dh-u)), transparent calc(3.5 * var(--dh-u)) calc(4 * var(--dh-u)));
	background-repeat: no-repeat, no-repeat;
	background-size: 1px 100%, 100% 1px;
	color: var(--dh-orange);
}

.dh-friction__bracket--left {
	left: 0;
	background-position: left top, left bottom;
}

.dh-friction__bracket--right {
	right: 0;
	background-position: right top, right bottom;
}

.dh-friction__chevron {
	position: absolute;
	bottom: 0;
	width: calc(23.4 * var(--dh-u));
	height: auto;
	transform: translateY(50%);
}

.dh-friction__bracket--left .dh-friction__chevron {
	left: 100%;
}

.dh-friction__bracket--right .dh-friction__chevron {
	right: 100%;
}

.dh-friction__scroll {
	display: none;
}

.dh-friction__solution-title {
	margin: calc(37.9 * var(--dh-u)) 0 0;
	font-family: Oswald, sans-serif;
	font-size: calc(51.4 * var(--dh-u));
	font-weight: 600;
	line-height: calc(55.8 / 51.4);
	text-transform: uppercase;
}

.dh-friction__brand {
	color: var(--dh-orange);
}

.dh-friction__solution-text {
	max-width: calc(480 * var(--dh-u));
	margin: calc(22.9 * var(--dh-u)) auto 0;
	font-size: calc(17.85 * var(--dh-u));
	font-weight: 400;
	line-height: calc(19.9 / 17.85);
}

/* ==========================================================================
   6. Friction — mobile (mock: 369px wide)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-friction {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		padding: calc(57.5 * var(--dh-u)) calc(24 * var(--dh-u)) calc(48 * var(--dh-u));
	}

	.dh-friction__title {
		max-width: calc(321 * var(--dh-u));
		font-size: calc(31.5 * var(--dh-u));
		line-height: calc(33.3 / 31.5);
	}

	.dh-friction__title-rule {
		text-decoration-thickness: calc(2.4 * var(--dh-u));
		text-underline-offset: calc(6.6 * var(--dh-u));
	}

	.dh-friction__lead {
		max-width: calc(320 * var(--dh-u));
		margin-top: calc(39 * var(--dh-u));
		font-size: calc(13.6 * var(--dh-u));
		line-height: calc(15.8 / 13.6);
	}

	.dh-friction__grid {
		margin-top: calc(51.7 * var(--dh-u));
		grid-template-columns: 1fr;
	}

	.dh-friction__item {
		padding: 0;
	}

	.dh-friction__item + .dh-friction__item {
		margin-top: calc(18.5 * var(--dh-u));
		padding-top: calc(18.5 * var(--dh-u));
		/* horizontal rule between the constats */
		background-image: repeating-linear-gradient(
			to right,
			var(--dh-rule) 0 calc(3.5 * var(--dh-u)),
			transparent calc(3.5 * var(--dh-u)) calc(4 * var(--dh-u))
		);
		background-position: left top;
		background-size: 100% 1.3px;
	}

	.dh-friction__label {
		font-size: calc(13.8 * var(--dh-u));
	}

	.dh-friction__statement {
		max-width: calc(285 * var(--dh-u));
		margin-top: calc(9.5 * var(--dh-u));
		font-size: calc(19.2 * var(--dh-u));
		line-height: calc(23.7 / 19.2);
	}

	.dh-friction__solution {
		width: 100%;
		margin-top: 0;
	}

	.dh-friction__bracket {
		display: none;
	}

	.dh-friction__scroll {
		display: flex;
		justify-content: center;
		margin-top: calc(48.4 * var(--dh-u));
		color: var(--dh-orange);
	}

	.dh-friction__scroll svg {
		display: block;
		width: calc(19.8 * var(--dh-u));
		height: auto;
	}

	.dh-friction__solution-title {
		margin-top: calc(20 * var(--dh-u));
		font-size: calc(31.5 * var(--dh-u));
		line-height: calc(34.7 / 31.5);
	}

	.dh-friction__solution-text {
		max-width: calc(320 * var(--dh-u));
		margin-top: calc(9 * var(--dh-u));
		font-size: calc(13.6 * var(--dh-u));
		line-height: calc(16 / 13.6);
	}
}

/* ==========================================================================
   7. Flow — "De l’idée à la vidéo publiée"
   ========================================================================== */

.dh-flow {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;

	position: relative;
	width: 100%;
	min-height: calc(744 * var(--dh-u));
	max-width: none !important;
	margin-block: 0;
	/* Horizontal geometry is proportional (11.43% = 164/1435 of the mock), so the
	   two halves keep their split on screens wider than the design. */
	padding: calc(84.5 * var(--dh-u)) 11.43% calc(40 * var(--dh-u));
	background: #fff;
	color: var(--dh-navy);
	overflow: hidden;
}

/* --- Slider stage (the skewed colour block) ----------------------------- */

.dh-flow__stage {
	position: absolute;
	z-index: 0;
	top: calc(378.3 * var(--dh-u));
	bottom: 0;
	left: 0;
	width: 51.6%;
	/* corners measured off the mock-up: the top edge drops 5°, the right edge
	   leans out as it goes down */
	clip-path: polygon(0 15.1%, 85.8% 0, 96.7% 100%, 0 100%);
}

.dh-flow__slides,
.dh-flow__slide {
	position: absolute;
	inset: 0;
}

.dh-flow__slide {
	background: var(--dh-orange);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.dh-flow__slide.is-active {
	opacity: 1;
}

.dh-flow__slide img,
.dh-flow__slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Intro -------------------------------------------------------------- */

.dh-flow__intro {
	position: relative;
	z-index: 1;
	max-width: calc(700 * var(--dh-u));
}

.dh-flow__title {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(52.2 * var(--dh-u));
	font-weight: 600;
	line-height: calc(54.5 / 52.2);
	text-transform: uppercase;
}

.dh-flow__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(3.25 * var(--dh-u));
	text-underline-offset: calc(9.8 * var(--dh-u));
}

.dh-flow__lead {
	margin: calc(41.65 * var(--dh-u)) 0 0;
	font-size: calc(17.9 * var(--dh-u));
	font-weight: 400;
	line-height: calc(20.05 / 17.9);
}

/* --- The cycle ---------------------------------------------------------- */

/* A square box the size of the dashed circle: the arcs fill it, the arrow
   heads sit on it and the five steps hang off it, all positioned in percent
   so the whole diagram scales with one width. */
.dh-flow__cycle {
	position: absolute;
	z-index: 1;
	/* centred in the right half of the section */
	top: calc(174.5 * var(--dh-u));
	left: 75%;
	width: calc(429.4 * var(--dh-u));
	height: calc(429.4 * var(--dh-u));
	transform: translateX(-50%);
}

.dh-flow__arcs {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Only one of the two arc sets is drawn: the phone diagram needs shorter arcs,
   because its labels take up more of the circle. */
.dh-flow__arcs--phone {
	display: none;
}

/* Lengths are SVG user units: 100 units = the width of the box above. */
.dh-flow__arc {
	stroke: var(--dh-orange);
	stroke-width: 0.57;
	stroke-dasharray: 0.56 0.82;
}

.dh-flow__arrow {
	position: absolute;
	top: var(--dh-y);
	left: var(--dh-x);
	width: calc(22 * var(--dh-u));
	color: var(--dh-orange);
	transform: translate(-50%, -50%) rotate(var(--dh-r));
}

.dh-flow__arrow:nth-of-type(1) { --dh-x: 80.09%; --dh-y: 10.07%; --dh-r: 37deg; }
.dh-flow__arrow:nth-of-type(2) { --dh-x: 99.08%; --dh-y: 59.54%; --dh-r: 101deg; }
.dh-flow__arrow:nth-of-type(3) { --dh-x: 53.05%; --dh-y: 99.91%; --dh-r: 176.5deg; }
.dh-flow__arrow:nth-of-type(4) { --dh-x: 1.09%; --dh-y: 60.40%; --dh-r: 258deg; }
.dh-flow__arrow:nth-of-type(5) { --dh-x: 18.87%; --dh-y: 10.87%; --dh-r: 321.5deg; }

.dh-flow__arrow svg {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Steps -------------------------------------------------------------- */

.dh-flow__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-flow__step {
	position: absolute;
	width: max-content;
	cursor: pointer;
	text-align: center;
	transform: translateX(-50%);
}

.dh-flow__step:nth-child(1) { top: -14.1%; left: 50.4%; }
.dh-flow__step:nth-child(2) { top: 23.5%; left: 97%; }
.dh-flow__step:nth-child(3) { top: 73.8%; left: 89.5%; }
.dh-flow__step:nth-child(4) { top: 73.6%; left: 12.3%; }
.dh-flow__step:nth-child(5) { top: 24.1%; left: 4.2%; }

.dh-flow__step-label {
	display: block;
	color: #7b7b7c;
	font-size: calc(15.4 * var(--dh-u));
	font-weight: 500;
	line-height: 1.1;
	text-transform: uppercase;
}

.dh-flow__step-title {
	display: block;
	margin-top: calc(2.5 * var(--dh-u));
	font-family: Oswald, sans-serif;
	font-size: calc(35.7 * var(--dh-u));
	font-weight: 600;
	line-height: calc(38.5 / 35.7);
	text-transform: uppercase;
}

/* the step the stage is currently showing */
.dh-flow__step.is-active .dh-flow__step-title,
.dh-flow__step:hover .dh-flow__step-title {
	color: var(--dh-orange);
}

.dh-flow__step-text {
	display: block;
	margin-top: calc(6 * var(--dh-u));
	font-size: calc(15.7 * var(--dh-u));
	font-weight: 500;
	line-height: calc(17.9 / 15.7);
	text-transform: uppercase;
}

/* --- Dots --------------------------------------------------------------- */

.dh-flow__dots {
	position: absolute;
	z-index: 1;
	bottom: calc(42.2 * var(--dh-u));
	left: 11.26%;
	display: flex;
	gap: calc(13.2 * var(--dh-u));
}

.dh-flow__dot {
	width: calc(13.8 * var(--dh-u));
	height: calc(13.8 * var(--dh-u));
	padding: 0;
	border: calc(2.5 * var(--dh-u)) solid var(--dh-navy);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.dh-flow__dot.is-active {
	background: var(--dh-navy);
}

/* ==========================================================================
   8. Flow — mobile (mock: 369px wide, dark section, stacked)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-flow {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		min-height: calc(795 * var(--dh-u));
		padding: calc(41.6 * var(--dh-u)) calc(24 * var(--dh-u)) 0;
		background: var(--dh-navy);
		color: #fff;
	}

	.dh-flow__stage {
		top: calc(585 * var(--dh-u));
		width: 100%;
		clip-path: polygon(0 11.4%, 73.2% 0, 100% 61.4%, 100% 100%, 0 100%);
	}

	.dh-flow__intro {
		max-width: none;
		text-align: center;
	}

	.dh-flow__title {
		font-size: calc(31.4 * var(--dh-u));
		line-height: calc(32.5 / 31.4);
	}

	.dh-flow__title-rule {
		text-decoration-thickness: calc(3 * var(--dh-u));
		text-underline-offset: calc(7.9 * var(--dh-u));
	}

	.dh-flow__lead {
		max-width: calc(320 * var(--dh-u));
		margin: calc(38.6 * var(--dh-u)) auto 0;
		font-size: calc(13.45 * var(--dh-u));
		line-height: calc(15.6 / 13.45);
	}

	.dh-flow__cycle {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: calc(227.2 * var(--dh-u));
		height: calc(227.2 * var(--dh-u));
		margin: calc(69 * var(--dh-u)) auto 0;
	}

	.dh-flow__arcs--web {
		display: none;
	}

	.dh-flow__arcs--phone {
		display: block;
	}

	.dh-flow__arc {
		stroke-width: 0.97;
		stroke-dasharray: 0.97 1.55;
	}

	.dh-flow__arrow {
		width: calc(15 * var(--dh-u));
	}

	.dh-flow__arrow:nth-of-type(1) { --dh-x: 81.47%; --dh-y: 11.14%; --dh-r: 39deg; }
	.dh-flow__arrow:nth-of-type(2) { --dh-x: 97.69%; --dh-y: 65.04%; --dh-r: 107.5deg; }
	.dh-flow__arrow:nth-of-type(3) { --dh-x: 48.69%; --dh-y: 99.98%; --dh-r: 181.5deg; }
	.dh-flow__arrow:nth-of-type(4) { --dh-x: 3.17%; --dh-y: 67.51%; --dh-r: 249.5deg; }
	.dh-flow__arrow:nth-of-type(5) { --dh-x: 18.20%; --dh-y: 11.42%; --dh-r: 320.5deg; }

	.dh-flow__step {
		width: calc(115 * var(--dh-u));
	}

	.dh-flow__step:nth-child(1) { top: -19.6%; left: 48.5%; }
	.dh-flow__step:nth-child(2) { top: 23.2%; left: 94.5%; }
	.dh-flow__step:nth-child(3) { top: 67.9%; left: 80.8%; }
	.dh-flow__step:nth-child(4) { top: 67.5%; left: 16.8%; }
	.dh-flow__step:nth-child(5) { top: 23.6%; left: 0.7%; }

	/* The label becomes the bare step number. */
	.dh-flow__step-label {
		color: var(--dh-orange);
		font-family: Oswald, sans-serif;
		font-size: calc(16.9 * var(--dh-u));
		font-weight: 600;
	}

	.dh-flow__step-word {
		display: none;
	}

	.dh-flow__step-title {
		margin-top: calc(4 * var(--dh-u));
		font-size: calc(21.2 * var(--dh-u));
		line-height: calc(22.3 / 21.2);
	}

	.dh-flow__step-text {
		max-width: calc(90 * var(--dh-u));
		margin: calc(4 * var(--dh-u)) auto 0;
		font-size: calc(10.3 * var(--dh-u));
		line-height: calc(12.4 / 10.3);
	}

	.dh-flow__dots {
		bottom: calc(26 * var(--dh-u));
		left: 50%;
		gap: calc(11.3 * var(--dh-u));
		transform: translateX(-50%);
	}

	.dh-flow__dot {
		width: calc(11.6 * var(--dh-u));
		height: calc(11.6 * var(--dh-u));
		border-color: #fff;
	}

	.dh-flow__dot.is-active {
		background: #fff;
	}
}

/* ==========================================================================
   9. Explore — "Explorez le parking à idées"
   ========================================================================== */

.dh-explore {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;

	position: relative;
	width: 100%;
	min-height: calc(660 * var(--dh-u));
	max-width: none !important;
	margin-block: 0;
	/* proportional side space, so the two columns keep their split above 1600px */
	padding: calc(84 * var(--dh-u)) 11.43% calc(84 * var(--dh-u));
	background: #fff;
	color: var(--dh-navy);
	overflow: hidden;
}

.dh-explore__inner {
	position: relative;
	z-index: 1;
	max-width: calc(440 * var(--dh-u));
}

.dh-explore__eyebrow {
	margin: 0;
	font-size: calc(15.9 * var(--dh-u));
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}

.dh-explore__title {
	margin: calc(19.5 * var(--dh-u)) 0 0;
	font-family: Oswald, sans-serif;
	font-size: calc(51 * var(--dh-u));
	font-weight: 600;
	line-height: calc(54.7 / 51);
	text-transform: uppercase;
}

.dh-explore__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(3.25 * var(--dh-u));
	text-underline-offset: calc(8.1 * var(--dh-u));
}

.dh-explore__lead {
	max-width: calc(430 * var(--dh-u));
	margin: calc(41 * var(--dh-u)) 0 0;
	font-size: calc(17.9 * var(--dh-u));
	font-weight: 400;
	line-height: calc(20.05 / 17.9);
}

.dh-explore__scroll {
	display: block;
	margin-top: calc(17.3 * var(--dh-u));
	color: var(--dh-orange);
}

.dh-explore__scroll svg {
	display: block;
	width: calc(21 * var(--dh-u));
	height: calc(22.8 * var(--dh-u));
}

.dh-explore__cta {
	display: flex;
	width: calc(254.7 * var(--dh-u));
	height: calc(71.5 * var(--dh-u));
	align-items: center;
	justify-content: center;
	margin-top: calc(26 * var(--dh-u));
	border: calc(2.2 * var(--dh-u)) solid currentColor;
	color: inherit;
	font-family: Oswald, sans-serif;
	font-size: calc(20 * var(--dh-u));
	font-weight: 700;
	line-height: calc(22.8 / 20);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dh-explore__cta:hover,
.dh-explore__cta:focus-visible {
	background: var(--dh-navy);
	color: #fff;
}

/* --- The screenshot / reel --------------------------------------------- */

/* The diagonal is measured off the mock-up: the left edge leans 9° as it
   goes down, and the block bleeds off the right of the screen. */
.dh-explore__media {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #dfddd9;
	clip-path: polygon(49.06% 0, 100% 0, 100% 100%, 41.76% 100%);
}

.dh-explore__media img,
.dh-explore__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Same stand-in as the audience cards: a tilted plate that a real <img> or
   <video> in the media simply covers. */
.dh-explore__placeholder {
	display: flex;
	width: calc(300 * var(--dh-u));
	height: calc(111 * var(--dh-u));
	align-items: center;
	justify-content: center;
	margin-left: 22%; /* centres it in the visible part of the trapezoid */
	background: #f9f8f8;
	color: #687582;
	font-family: Oswald, sans-serif;
	font-size: calc(32 * var(--dh-u));
	font-weight: 600;
	text-transform: uppercase;
	transform: rotate(17.4deg);
}

/* ==========================================================================
   10. Explore — mobile (mock: 369px wide, dark section, media below)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-explore {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		min-height: 0;
		padding: calc(52 * var(--dh-u)) calc(24 * var(--dh-u)) 0;
		background: var(--dh-navy);
		color: #fff;
	}

	.dh-explore__inner {
		max-width: none;
		text-align: center;
	}

	.dh-explore__eyebrow {
		font-size: calc(13.2 * var(--dh-u));
		line-height: calc(15.5 / 13.2);
	}

	.dh-explore__title {
		margin-top: calc(18 * var(--dh-u));
		font-size: calc(31.8 * var(--dh-u));
		line-height: calc(33.1 / 31.8);
	}

	.dh-explore__title-rule {
		text-decoration-thickness: calc(3 * var(--dh-u));
		text-underline-offset: calc(5.5 * var(--dh-u));
	}

	.dh-explore__lead {
		max-width: calc(300 * var(--dh-u));
		margin: calc(39 * var(--dh-u)) auto 0;
		font-size: calc(13.3 * var(--dh-u));
		line-height: calc(15.8 / 13.3);
	}

	.dh-explore__scroll {
		margin-top: calc(26 * var(--dh-u));
	}

	.dh-explore__scroll svg {
		width: calc(18 * var(--dh-u));
		height: calc(19.6 * var(--dh-u));
		margin: 0 auto;
	}

	.dh-explore__cta {
		width: calc(221 * var(--dh-u));
		height: calc(62 * var(--dh-u));
		margin: calc(26 * var(--dh-u)) auto 0;
		border-width: calc(2 * var(--dh-u));
		font-size: calc(17.5 * var(--dh-u));
		line-height: calc(20 / 17.5);
	}

	.dh-explore__cta:hover,
	.dh-explore__cta:focus-visible {
		background: #fff;
		color: var(--dh-navy);
	}

	/* Below the copy, full-bleed, with the diagonal on the top edge. */
	.dh-explore__media {
		position: relative;
		inset: auto;
		height: calc(257 * var(--dh-u));
		margin: calc(39 * var(--dh-u)) calc(-24 * var(--dh-u)) 0;
		clip-path: polygon(0 10.6%, 100% 0, 100% 100%, 0 100%);
	}

	.dh-explore__placeholder {
		width: calc(190 * var(--dh-u));
		height: calc(70 * var(--dh-u));
		margin-left: 0;
		font-size: calc(20 * var(--dh-u));
	}
}

/* ==========================================================================
   11. Toolkit — "Tout ce qu’il vous faut pour publier"
   ========================================================================== */

.dh-toolkit {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;
	--dh-rule: #b0afaf;

	width: 100%;
	max-width: none !important;
	margin-block: 0;
	padding: calc(74 * var(--dh-u)) calc(147 * var(--dh-u)) calc(138 * var(--dh-u));
	background: var(--dh-navy);
	color: #fff;
}

/* --- Heading + lead ----------------------------------------------------- */

.dh-toolkit__title {
	max-width: calc(1050 * var(--dh-u));
	margin: 0 auto;
	font-family: Oswald, sans-serif;
	font-size: calc(51.8 * var(--dh-u));
	font-weight: 600;
	line-height: calc(54.4 / 51.8);
	text-align: center;
	text-transform: uppercase;
}

.dh-toolkit__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(3 * var(--dh-u));
	text-underline-offset: calc(9.8 * var(--dh-u));
}

.dh-toolkit__lead {
	max-width: calc(800 * var(--dh-u));
	margin: calc(42.5 * var(--dh-u)) auto 0;
	font-size: calc(18 * var(--dh-u));
	font-weight: 400;
	line-height: calc(20.2 / 18);
	text-align: center;
}

/* --- Grid --------------------------------------------------------------- */

.dh-toolkit__grid {
	display: grid;
	margin: calc(76 * var(--dh-u)) 0 0;
	padding: 0;
	column-gap: calc(146 * var(--dh-u));
	grid-template-columns: repeat(2, calc(400 * var(--dh-u)));
	justify-content: center;
	list-style: none;
	row-gap: calc(84 * var(--dh-u));
	text-align: center;
}

.dh-toolkit__name {
	position: relative;
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(35.75 * var(--dh-u));
	font-weight: 600;
	line-height: calc(38 / 35.75);
	text-transform: uppercase;
}

/* Zero-width marker: the chevron hangs to the left of the first line without
   taking part in the centring of the title. */
.dh-toolkit__chevron {
	position: relative;
	display: inline-block;
	width: 0;
	color: var(--dh-orange);
}

.dh-toolkit__chevron svg {
	position: absolute;
	top: calc(-25.9 * var(--dh-u));
	right: calc(12.4 * var(--dh-u));
	width: calc(22.65 * var(--dh-u));
	height: calc(20.8 * var(--dh-u));
}

.dh-toolkit__text {
	max-width: calc(400 * var(--dh-u));
	margin: calc(17.4 * var(--dh-u)) auto 0;
	font-size: calc(15.4 * var(--dh-u));
	font-weight: 400;
	line-height: calc(18.05 / 15.4);
}

/* Dots belong to the phone slider only. */
.dh-toolkit__dots {
	display: none;
}

/* ==========================================================================
   12. Toolkit — mobile (mock: 369px wide, light section + swipeable slider)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-toolkit {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		padding: calc(55.4 * var(--dh-u)) calc(24 * var(--dh-u)) calc(48 * var(--dh-u));
		background: #f1f0ee;
		color: var(--dh-navy);
	}

	.dh-toolkit__title {
		max-width: calc(300 * var(--dh-u));
		font-size: calc(30.6 * var(--dh-u));
		line-height: calc(32.5 / 30.6);
	}

	.dh-toolkit__title-rule {
		text-decoration: none;
	}

	.dh-toolkit__title-rule .dh-toolkit__title-rule-mobile {
		text-decoration: underline;
		text-decoration-color: var(--dh-orange);
		text-decoration-skip-ink: none;
		text-decoration-thickness: calc(3.1 * var(--dh-u));
		text-underline-offset: calc(7.8 * var(--dh-u));
	}

	.dh-toolkit__lead {
		max-width: calc(285 * var(--dh-u));
		margin-top: calc(40.3 * var(--dh-u));
		font-size: calc(13.1 * var(--dh-u));
		line-height: calc(15.4 / 13.1);
	}

	/* The grid turns into a full-bleed, snap-scrolling slider. */
	.dh-toolkit__grid {
		display: flex;
		margin: calc(40.8 * var(--dh-u)) calc(-24 * var(--dh-u)) 0;
		padding: 0 calc(8.35 * var(--dh-u));
		column-gap: 0;
		justify-content: flex-start;
		grid-template-columns: none;
		overflow-x: auto;
		row-gap: 0;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.dh-toolkit__grid::-webkit-scrollbar {
		display: none;
	}

	.dh-toolkit__item {
		display: flex;
		width: calc(352.3 * var(--dh-u));
		flex: 0 0 calc(352.3 * var(--dh-u));
		flex-direction: column;
		justify-content: flex-start;
		padding: calc(8.5 * var(--dh-u)) calc(26 * var(--dh-u)) calc(18.3 * var(--dh-u));
		scroll-snap-align: center;
	}

	.dh-toolkit__item + .dh-toolkit__item {
		/* 2.6px dash / 1.5px gap, as measured on the mock-up */
		background-image: repeating-linear-gradient(
			to bottom,
			var(--dh-rule) 0 calc(2.6 * var(--dh-u)),
			transparent calc(2.6 * var(--dh-u)) calc(4.1 * var(--dh-u))
		);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 1.3px 100%;
	}

	.dh-toolkit__name {
		font-size: calc(30.6 * var(--dh-u));
		line-height: calc(32.5 / 30.6);
	}

	.dh-toolkit__chevron {
		display: none;
	}

	.dh-toolkit__text {
		max-width: none;
		margin-top: calc(12.2 * var(--dh-u));
		font-size: calc(13.1 * var(--dh-u));
		line-height: calc(15.4 / 13.1);
	}

	.dh-toolkit__dots {
		display: flex;
		justify-content: center;
		margin-top: calc(53.7 * var(--dh-u));
		gap: calc(10.7 * var(--dh-u));
	}

	.dh-toolkit__dot {
		width: calc(12.2 * var(--dh-u));
		height: calc(12.2 * var(--dh-u));
		padding: 0;
		border: calc(3 * var(--dh-u)) solid var(--dh-orange);
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
	}

	.dh-toolkit__dot.is-active {
		background: var(--dh-navy);
	}
}

/* ==========================================================================
   13. Compare — "Plus qu’une banque d’idées"
   ========================================================================== */

.dh-compare {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;
	--dh-rule: #b0afaf;

	width: 100%;
	max-width: none !important;
	margin-block: 0;
	padding: calc(95 * var(--dh-u)) calc(147 * var(--dh-u)) calc(70 * var(--dh-u));
	background: #dfddd9;
	color: var(--dh-navy);
}

.dh-compare__title {
	margin: 0 auto;
	font-family: Oswald, sans-serif;
	font-size: calc(51.5 * var(--dh-u));
	font-weight: 600;
	line-height: calc(54.9 / 51.5);
	text-align: center;
	text-transform: uppercase;
}

.dh-compare__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(4.3 * var(--dh-u));
	text-underline-offset: calc(6.5 * var(--dh-u));
}

.dh-compare__lead {
	max-width: calc(790 * var(--dh-u));
	margin: calc(42 * var(--dh-u)) auto 0;
	font-size: calc(18 * var(--dh-u));
	font-weight: 400;
	line-height: calc(20.1 / 18);
	text-align: center;
}

/* --- The two columns ---------------------------------------------------- */

.dh-compare__grid {
	position: relative;
	display: grid;
	margin-top: calc(64 * var(--dh-u));
	column-gap: calc(128 * var(--dh-u));
	grid-template-columns: repeat(2, calc(330 * var(--dh-u)));
	justify-content: center;
}

/* dashed divider down the middle of the gap */
.dh-compare__grid::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: calc(-4 * var(--dh-u));
	left: 50%;
	width: 1px;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--dh-rule) 0 calc(3.3 * var(--dh-u)),
		transparent calc(3.3 * var(--dh-u)) calc(3.9 * var(--dh-u))
	);
}

.dh-compare__col-title {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(35.6 * var(--dh-u));
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
}

.dh-compare__col-word {
	color: var(--dh-orange);
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(2.7 * var(--dh-u));
	text-underline-offset: calc(6.5 * var(--dh-u));
}

.dh-compare__list {
	display: grid;
	margin: calc(26 * var(--dh-u)) 0 0;
	padding: 0;
	grid-auto-rows: calc(71.9 * var(--dh-u));
	list-style: none;
}

/* The mark hangs on the left edge of the column while the copy stays centred. */
.dh-compare__item {
	position: relative;
	padding: 0 0 0 calc(40 * var(--dh-u));
	text-align: center;
}

.dh-compare__icon {
	position: absolute;
	top: calc(1 * var(--dh-u));
	left: calc(11.7 * var(--dh-u));
	display: block;
	color: var(--dh-orange);
}

.dh-compare__mark {
	display: block;
	width: calc(17.4 * var(--dh-u));
	height: calc(17.4 * var(--dh-u));
}

.dh-compare__mark--check {
	width: calc(17.9 * var(--dh-u));
	height: calc(14.7 * var(--dh-u));
}

.dh-compare__text {
	display: block;
	margin-top: calc(4.7 * var(--dh-u));
	font-size: calc(15.4 * var(--dh-u));
	font-weight: 600;
	line-height: calc(17.9 / 15.4);
	text-transform: uppercase;
}

.dh-compare__scroll {
	display: none;
}

/* ==========================================================================
   14. Compare — mobile (mock: 369px wide, one list under the other)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-compare {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		padding: calc(57.5 * var(--dh-u)) calc(24 * var(--dh-u)) calc(48 * var(--dh-u));
	}

	.dh-compare__title {
		max-width: calc(320 * var(--dh-u));
		font-size: calc(31.7 * var(--dh-u));
		line-height: calc(33 / 31.7);
	}

	.dh-compare__title-rule {
		text-decoration: none;
	}

	.dh-compare__title-rule .dh-compare__title-rule-mobile {
		text-decoration: underline;
		text-decoration-color: var(--dh-orange);
		text-decoration-skip-ink: none;
		text-decoration-thickness: calc(3 * var(--dh-u));
		text-underline-offset: calc(5.5 * var(--dh-u));
	}

	.dh-compare__lead {
		max-width: calc(300 * var(--dh-u));
		margin-top: calc(42 * var(--dh-u));
		font-size: calc(13.5 * var(--dh-u));
		line-height: calc(15.5 / 13.5);
	}

	.dh-compare__grid {
		margin-top: calc(45 * var(--dh-u));
		grid-template-columns: 1fr;
	}

	.dh-compare__grid::before {
		display: none;
	}

	.dh-compare__col-title {
		font-size: calc(26.8 * var(--dh-u));
		text-align: center;
	}

	.dh-compare__col-word {
		text-decoration-thickness: calc(3 * var(--dh-u));
		text-underline-offset: calc(5 * var(--dh-u));
	}

	.dh-compare__list {
		margin-top: calc(21 * var(--dh-u));
		grid-auto-rows: auto;
	}

	.dh-compare__item {
		padding: calc(19.3 * var(--dh-u)) 0 calc(14.8 * var(--dh-u)) calc(114 * var(--dh-u));
		text-align: left;
	}

	.dh-compare__item + .dh-compare__item {
		background-image: repeating-linear-gradient(
			to right,
			var(--dh-rule) 0 calc(3 * var(--dh-u)),
			transparent calc(3 * var(--dh-u)) calc(3.4 * var(--dh-u))
		);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 100% 1.3px;
	}

	.dh-compare__icon {
		top: calc(20 * var(--dh-u));
		left: calc(63.5 * var(--dh-u));
	}

	.dh-compare__mark,
	.dh-compare__mark--check {
		width: calc(15 * var(--dh-u));
		height: calc(15 * var(--dh-u));
	}

	.dh-compare__mark--check {
		height: calc(12.3 * var(--dh-u));
	}

	.dh-compare__text {
		margin-top: 0;
		font-size: calc(13.3 * var(--dh-u));
		line-height: calc(15.5 / 13.3);
	}

	/* the chevron that leads from one list to the other */
	.dh-compare__scroll {
		display: flex;
		justify-content: center;
		margin: calc(30.5 * var(--dh-u)) 0 calc(31 * var(--dh-u));
		color: var(--dh-orange);
	}

	.dh-compare__scroll svg {
		display: block;
		width: calc(18 * var(--dh-u));
		height: calc(20 * var(--dh-u));
	}
}

/* ==========================================================================
   15. Offer — "Voici l’outil qui manquait à votre vie"
   ========================================================================== */

.dh-offer {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;

	position: relative;
	display: flex;
	width: 100%;
	min-height: calc(210 * var(--dh-u));
	max-width: none !important;
	align-items: center;
	justify-content: space-between;
	margin-block: 0;
	padding: calc(24 * var(--dh-u)) 10.45% calc(24 * var(--dh-u)) 17.73%;
	background: #fff;
	color: var(--dh-navy);
	overflow: hidden;
}

/* The light half, cut by the diagonal. */
.dh-offer__pane {
	position: absolute;
	z-index: 0;
	inset: 0;
	background: #f1f0ee;
	clip-path: polygon(0 0, 65.7% 0, 63% 100%, 0 100%);
}

.dh-offer__question {
	position: relative;
	z-index: 1;
	max-width: calc(640 * var(--dh-u));
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(30 * var(--dh-u));
	font-weight: 400;
	line-height: calc(34.2 / 30);
}

/* Zero-width marker: the chevron hangs to the left of the first line. */
.dh-offer__chevron {
	position: relative;
	display: inline-block;
	width: 0;
	color: var(--dh-orange);
}

.dh-offer__chevron svg {
	position: absolute;
	top: calc(-24.6 * var(--dh-u));
	right: calc(14 * var(--dh-u));
	width: calc(22.2 * var(--dh-u));
	height: calc(20.1 * var(--dh-u));
}

.dh-offer__cta {
	position: relative;
	z-index: 1;
	text-align: right;
}

.dh-offer__title {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(27.6 * var(--dh-u));
	font-weight: 600;
	line-height: calc(32 / 27.6);
	text-transform: uppercase;
}

.dh-offer__button {
	display: flex;
	width: calc(260.3 * var(--dh-u));
	height: calc(71 * var(--dh-u));
	align-items: center;
	justify-content: center;
	margin: calc(20.5 * var(--dh-u)) 0 0 auto;
	background: var(--dh-orange);
	color: var(--dh-navy);
	font-family: Oswald, sans-serif;
	font-size: calc(19.8 * var(--dh-u));
	font-weight: 700;
	line-height: calc(21.7 / 19.8);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.dh-offer__button:hover,
.dh-offer__button:focus-visible {
	background: var(--dh-navy);
	color: #fff;
}

/* ==========================================================================
   16. Offer — mobile (mock: 369px wide, the orange block only)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-offer {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		display: block;
		min-height: calc(230 * var(--dh-u));
		padding: calc(46.8 * var(--dh-u)) calc(24 * var(--dh-u)) calc(51 * var(--dh-u));
		/* the leaning orange block sits on the same grey as the compare section
		   above it, so the two read as one field */
		background: #dfddd9;
		text-align: center;
	}

	/* the pane becomes the orange block itself */
	.dh-offer__pane {
		background: var(--dh-orange);
		clip-path: polygon(6.6% 0, 100% 6.6%, 100% 100%, 0 100%, 0 48.5%);
	}

	.dh-offer__question {
		display: none;
	}

	.dh-offer__cta {
		text-align: center;
	}

	.dh-offer__title {
		font-size: calc(25 * var(--dh-u));
		line-height: calc(26.9 / 25);
	}

	.dh-offer__button {
		width: calc(215.8 * var(--dh-u));
		height: calc(60.7 * var(--dh-u));
		margin: calc(19 * var(--dh-u)) auto 0;
		border: calc(2.4 * var(--dh-u)) solid var(--dh-navy);
		background: transparent;
		font-size: calc(16.8 * var(--dh-u));
		line-height: calc(19.6 / 16.8);
	}

	.dh-offer__button:hover,
	.dh-offer__button:focus-visible {
		background: var(--dh-navy);
		color: var(--dh-orange);
	}
}

/* ==========================================================================
   17. Learn — "Apprenez. Progressez. Développez votre marque."
   ========================================================================== */

.dh-learn {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;
	--dh-slant: 10.5%;   /* how far the slanted edge leans over the height */
	--dh-line: calc(5.5 * var(--dh-u));   /* how far the rule sits out sideways */
	--dh-rule: calc(4.4 * var(--dh-u));   /* how far it sits out vertically */

	width: 100%;
	max-width: none !important;
	margin-block: 0;
	padding: calc(95 * var(--dh-u)) 14.56% calc(95 * var(--dh-u));
	background: var(--dh-navy);
	color: #fff;
}

.dh-learn__eyebrow {
	margin: 0;
	font-size: calc(16 * var(--dh-u));
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

.dh-learn__title {
	margin: calc(28 * var(--dh-u)) auto 0;
	font-family: Oswald, sans-serif;
	font-size: calc(52 * var(--dh-u));
	font-weight: 600;
	line-height: calc(55.1 / 52);
	text-align: center;
	text-transform: uppercase;
}

.dh-learn__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(3.3 * var(--dh-u));
	text-underline-offset: calc(3 * var(--dh-u));
}

.dh-learn__lead {
	max-width: calc(860 * var(--dh-u));
	margin: calc(43.6 * var(--dh-u)) auto 0;
	font-size: calc(18 * var(--dh-u));
	font-weight: 400;
	line-height: calc(20.2 / 18);
	text-align: center;
}

/* --- The three picture rows -------------------------------------------- */

.dh-learn__rows {
	margin: calc(85 * var(--dh-u)) 0 0;
	padding: 0;
	list-style: none;
}

.dh-learn__row {
	display: grid;
	column-gap: calc(59.2 * var(--dh-u));
	grid-template-columns: calc(679 * var(--dh-u)) 1fr;
}

/* Rows overlap the way the mock-up staggers them; the earlier row stays on top. */
.dh-learn__row:nth-child(1) { position: relative; z-index: 3; }
.dh-learn__row:nth-child(2) { position: relative; z-index: 2; margin-top: calc(33 * var(--dh-u)); }
.dh-learn__row:nth-child(3) { position: relative; z-index: 1; margin-top: calc(-50 * var(--dh-u)); }

.dh-learn__row--media-right {
	grid-template-columns: 1fr calc(679 * var(--dh-u));
}

.dh-learn__row--media-right .dh-learn__media {
	order: 2;
}

/* --- The picture -------------------------------------------------------- */

/* Three stacked copies of the same shape: the orange rule, a navy sliver that
   opens the gap the mock-up leaves, and the picture itself on top. */
.dh-learn__media {
	--dh-shape: polygon(0 0, 100% 0, calc(100% - var(--dh-slant)) 100%, 0 100%);

	position: relative;
	height: calc(313 * var(--dh-u));
}

.dh-learn__row--media-right .dh-learn__media {
	--dh-shape: polygon(var(--dh-slant) 0, 100% 0, 100% 100%, 0 100%);
}

/* The rule is the same silhouette, offset up and to the right — the two edges
   it peeks out from are exactly the ones the mock-up outlines. */
.dh-learn__media::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--dh-rule)) calc(-1 * var(--dh-line)) var(--dh-rule) var(--dh-line);
	background: var(--dh-orange);
	clip-path: var(--dh-shape);
}

.dh-learn__row--media-right .dh-learn__media::before {
	inset: var(--dh-rule) var(--dh-line) calc(-1 * var(--dh-rule)) calc(-1 * var(--dh-line));
}

.dh-learn__picture {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: block;
	background: #dfddd9;
	clip-path: var(--dh-shape);
}

.dh-learn__picture img,
.dh-learn__picture video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stand-in until the photography lands. */
.dh-learn__placeholder {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	display: flex;
	width: calc(300 * var(--dh-u));
	height: calc(111 * var(--dh-u));
	align-items: center;
	justify-content: center;
	background: #e9e8e5;
	color: #8d96a0;
	font-family: Oswald, sans-serif;
	font-size: calc(32 * var(--dh-u));
	font-weight: 600;
	text-transform: uppercase;
	transform: translate(-50%, -50%) rotate(-6deg);
}

/* --- The copy ----------------------------------------------------------- */

.dh-learn__body {
	padding-top: calc(25 * var(--dh-u));
}

/* Row 3 slides under row 2's picture, so its copy starts lower — the mock-up
   drops it by the same amount. */
.dh-learn__row:nth-child(3) .dh-learn__body {
	padding-top: calc(107.5 * var(--dh-u));
}

.dh-learn__chevron {
	display: block;
	color: var(--dh-orange);
}

.dh-learn__chevron svg {
	display: block;
	width: calc(23.5 * var(--dh-u));
	height: calc(19.6 * var(--dh-u));
}

.dh-learn__chevron path {
	stroke-width: 4;
}

.dh-learn__name {
	margin: calc(18 * var(--dh-u)) 0 0;
	font-family: Oswald, sans-serif;
	font-size: calc(22 * var(--dh-u));
	font-weight: 600;
	line-height: calc(24 / 22);
	text-transform: uppercase;
}

.dh-learn__text {
	margin: calc(12 * var(--dh-u)) 0 0;
	font-size: calc(15.4 * var(--dh-u));
	font-weight: 400;
	line-height: calc(18.3 / 15.4);
}

.dh-learn__nav {
	display: none;
}

/* ==========================================================================
   18. Learn — mobile (mock: 369px wide, swipeable cards)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-learn {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		padding: calc(57.5 * var(--dh-u)) calc(24 * var(--dh-u)) calc(48 * var(--dh-u));
	}

	.dh-learn__eyebrow {
		font-size: calc(14.1 * var(--dh-u));
		line-height: calc(16 / 14.1);
	}

	.dh-learn__title {
		max-width: calc(320 * var(--dh-u));
		margin-top: calc(22 * var(--dh-u));
		font-size: calc(32.1 * var(--dh-u));
		line-height: calc(33.3 / 32.1);
	}

	.dh-learn__title-rule {
		text-decoration: none;
	}

	.dh-learn__title-rule .dh-learn__title-rule-mobile {
		text-decoration: underline;
		text-decoration-color: var(--dh-orange);
		text-decoration-skip-ink: none;
		text-decoration-thickness: calc(3 * var(--dh-u));
		text-underline-offset: calc(4 * var(--dh-u));
	}

	.dh-learn__lead {
		max-width: calc(310 * var(--dh-u));
		margin-top: calc(40 * var(--dh-u));
		font-size: calc(13.6 * var(--dh-u));
		line-height: calc(15.7 / 13.6);
	}

	/* The rows turn into a full-bleed, snap-scrolling row of cards. */
	.dh-learn__rows {
		display: flex;
		margin: calc(45 * var(--dh-u)) calc(-24 * var(--dh-u)) 0;
		padding: 0;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.dh-learn__rows::-webkit-scrollbar {
		display: none;
	}

	.dh-learn__row,
	.dh-learn__row--media-right {
		display: block;
		width: calc(369 * var(--dh-u));
		flex: 0 0 calc(369 * var(--dh-u));
		margin-top: 0;
		scroll-snap-align: center;
	}

	.dh-learn__row + .dh-learn__row {
		/* dashed divider between the cards */
		background-image: repeating-linear-gradient(
			to bottom,
			#9f9e9e 0 calc(3.4 * var(--dh-u)),
			transparent calc(3.4 * var(--dh-u)) calc(4.4 * var(--dh-u))
		);
		background-repeat: no-repeat;
		background-position: left calc(222 * var(--dh-u));
		background-size: 1.3px calc(205 * var(--dh-u));
	}

	.dh-learn__media,
	.dh-learn__row--media-right .dh-learn__media {
		height: calc(221.8 * var(--dh-u));
	}

	.dh-learn__media::before,
	.dh-learn__row--media-right .dh-learn__media::before {
		display: none;
	}

	.dh-learn__row:nth-child(3) .dh-learn__body {
		padding-top: calc(27 * var(--dh-u));
	}

	.dh-learn__picture {
		clip-path: none;
	}

	.dh-learn__placeholder {
		width: calc(230 * var(--dh-u));
		height: calc(85 * var(--dh-u));
		font-size: calc(22 * var(--dh-u));
	}

	.dh-learn__body {
		padding: calc(27 * var(--dh-u)) calc(55 * var(--dh-u)) 0;
		text-align: center;
	}

	.dh-learn__chevron {
		display: none;
	}

	.dh-learn__name {
		margin-top: 0;
		font-size: calc(19.7 * var(--dh-u));
		line-height: calc(20.7 / 19.7);
	}

	.dh-learn__text {
		margin-top: calc(13.6 * var(--dh-u));
		font-size: calc(13.5 * var(--dh-u));
		line-height: calc(15.6 / 13.5);
	}

	.dh-learn__nav {
		display: flex;
		margin-top: calc(34.8 * var(--dh-u));
		gap: calc(30 * var(--dh-u));
		justify-content: center;
	}

	.dh-learn__arrow {
		display: flex;
		padding: 0;
		border: 0;
		background: none;
		color: var(--dh-orange);
		cursor: pointer;
	}

	.dh-learn__arrow svg {
		display: block;
		width: calc(23.6 * var(--dh-u));
		height: calc(20.8 * var(--dh-u));
	}

	.dh-learn__arrow:disabled {
		opacity: 0.35;
		cursor: default;
	}
}

/* ==========================================================================
   19. Pricing — "Commencez à bâtir votre moteur de contenu"
   ========================================================================== */

.dh-pricing {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;

	display: grid;
	width: 100%;
	max-width: none !important;
	margin-block: 0;
	padding: calc(110 * var(--dh-u)) calc(24 * var(--dh-u));
	column-gap: calc(67 * var(--dh-u));
	/* both columns keep their measured widths and stay together, whatever the
	   screen is wider than the design */
	grid-template-columns: calc(450 * var(--dh-u)) calc(556.3 * var(--dh-u));
	justify-content: center;
	background: #dfddd9;
	color: var(--dh-navy);
}

.dh-pricing__title {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(51.5 * var(--dh-u));
	font-weight: 600;
	line-height: calc(54.8 / 51.5);
	text-transform: uppercase;
}

.dh-pricing__title-rule {
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(3.8 * var(--dh-u));
	text-underline-offset: calc(7 * var(--dh-u));
}

.dh-pricing__lead {
	max-width: calc(430 * var(--dh-u));
	margin: calc(43 * var(--dh-u)) 0 0;
	font-size: calc(17.9 * var(--dh-u));
	font-weight: 400;
	line-height: calc(20.1 / 17.9);
}

/* --- The card ----------------------------------------------------------- */

/* The card is notched at the bottom-left; the shadow repeats the same shape.
   It cannot be clipped, because the orange banner runs out of it sideways —
   so the notch is a triangle of the section colour laid over the corner. */
.dh-pricing__card {
	--dh-notch: calc(37 * var(--dh-u));

	position: relative;
	isolation: isolate;
}

.dh-pricing__card::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc(8.7 * var(--dh-u)) calc(-9.8 * var(--dh-u)) calc(-8.7 * var(--dh-u)) calc(9.8 * var(--dh-u));
	background: var(--dh-navy);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--dh-notch) 100%, 0 calc(100% - var(--dh-notch)));
}

.dh-pricing__card::after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: var(--dh-notch);
	height: var(--dh-notch);
	background: #dfddd9;
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.dh-pricing__head {
	display: flex;
	height: calc(120 * var(--dh-u));
	align-items: center;
	justify-content: space-between;
	padding: 0 calc(32 * var(--dh-u)) 0 calc(43 * var(--dh-u));
	background: #f1f0ee;
}

.dh-pricing__plan {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(33 * var(--dh-u));
	font-weight: 600;
	line-height: calc(36 / 33);
	text-transform: uppercase;
}

.dh-pricing__price {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(55 * var(--dh-u));
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.dh-pricing__price sup {
	font-size: 0.55em;
	vertical-align: 0.55em;
}

.dh-pricing__per {
	font-size: calc(20 * var(--dh-u));
	font-weight: 600;
}

.dh-pricing__body {
	position: relative;
	padding: calc(33.7 * var(--dh-u)) calc(43 * var(--dh-u)) calc(32 * var(--dh-u));
	background: #fff;
}

/* The ribbon's fold: a navy triangle filling the step between the card's
   shadow and the banner's overhang, sitting on the banner's top edge. It hangs
   off the body — the banner's own clip-path would cut a pseudo-element off. */
.dh-pricing__body::after {
	content: "";
	position: absolute;
	right: calc(-48 * var(--dh-u));
	bottom: 0;
	width: calc(38.2 * var(--dh-u));
	height: calc(38.2 * var(--dh-u));
	background: var(--dh-navy);
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.dh-pricing__claim {
	max-width: calc(415 * var(--dh-u));
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(21.9 * var(--dh-u));
	font-weight: 600;
	line-height: calc(25 / 21.9);
	text-transform: uppercase;
}

.dh-pricing__included {
	margin: calc(24 * var(--dh-u)) 0 0;
	color: var(--dh-orange);
	font-family: Oswald, sans-serif;
	font-size: calc(21.5 * var(--dh-u));
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
}

.dh-pricing__list {
	margin: calc(9 * var(--dh-u)) 0 0;
	padding: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(21.7 * var(--dh-u));
	font-weight: 400;
	line-height: calc(30 / 21.7);
	list-style: none;
}

.dh-pricing__list li::before {
	content: "- ";
}

/* --- The orange banner across the card ---------------------------------- */

.dh-pricing__banner {
	position: relative;
	z-index: 1;
	display: grid;
	min-height: calc(238 * var(--dh-u));
	align-items: center;
	/* it runs out of the card on both sides, the way the mock-up lays it over
	   the left column */
	margin: 0 calc(-48 * var(--dh-u)) 0 calc(-514 * var(--dh-u));
	padding: calc(30 * var(--dh-u)) 0;
	column-gap: 0;
	grid-template-columns: calc(554.2 * var(--dh-u)) 1fr;
	background: var(--dh-orange);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 4.5% 100%);
}

.dh-pricing__deal {
	padding-right: calc(107.8 * var(--dh-u));
	text-align: right;
}

.dh-pricing__deal-title {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(41.4 * var(--dh-u));
	font-weight: 600;
	line-height: calc(44 / 41.4);
	text-transform: uppercase;
}

.dh-pricing__deal-bonus {
	margin: calc(30 * var(--dh-u)) 0 0;
	font-family: Oswald, sans-serif;
	font-size: calc(43.8 * var(--dh-u));
	font-weight: 600;
	line-height: 1.05;
	text-transform: uppercase;
}

.dh-pricing__deal-bonus sup {
	font-size: 0.55em;
	vertical-align: 0.5em;
}

.dh-pricing__free {
	padding-right: calc(48 * var(--dh-u));
}

.dh-pricing__free-title {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(30.2 * var(--dh-u));
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
}

.dh-pricing__free-line {
	max-width: calc(415 * var(--dh-u));
	margin: calc(18 * var(--dh-u)) 0 0;
	font-family: Oswald, sans-serif;
	font-size: calc(21.7 * var(--dh-u));
	font-weight: 400;
	line-height: calc(26 / 21.7);
}

.dh-pricing__free-line strong {
	font-weight: 600;
}

/* --- The footer --------------------------------------------------------- */

.dh-pricing__foot {
	padding: calc(32 * var(--dh-u)) calc(43 * var(--dh-u)) calc(39 * var(--dh-u));
	background: #fff;
}

.dh-pricing__button {
	display: flex;
	width: calc(254.5 * var(--dh-u));
	height: calc(70 * var(--dh-u));
	align-items: center;
	justify-content: center;
	border: calc(2.7 * var(--dh-u)) solid currentColor;
	color: inherit;
	font-family: Oswald, sans-serif;
	font-size: calc(20 * var(--dh-u));
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dh-pricing__button:hover,
.dh-pricing__button:focus-visible {
	background: var(--dh-navy);
	color: #fff;
}

/* ==========================================================================
   20. Pricing — mobile (mock: 369px wide, card under the copy)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-pricing {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		display: block;
		padding: calc(57.5 * var(--dh-u)) calc(24 * var(--dh-u)) calc(48 * var(--dh-u));
		text-align: center;
	}

	.dh-pricing__title {
		font-size: calc(31.9 * var(--dh-u));
		line-height: calc(32.9 / 31.9);
	}

	.dh-pricing__title-rule {
		text-decoration-thickness: calc(3 * var(--dh-u));
		text-underline-offset: calc(6 * var(--dh-u));
	}

	.dh-pricing__lead {
		max-width: calc(320 * var(--dh-u));
		margin: calc(42 * var(--dh-u)) auto 0;
		font-size: calc(13.6 * var(--dh-u));
		line-height: calc(15.8 / 13.6);
	}

	.dh-pricing__card {
		margin-top: calc(43 * var(--dh-u));
		/* the banner is inset on the right, so the card itself has to carry the
		   white there — its children stop at the banner's edge */
		background: #fff;
		text-align: left;
	}

	.dh-pricing__card::before,
	.dh-pricing__card::after {
		display: none;
	}

	.dh-pricing__head {
		height: calc(99 * var(--dh-u));
		padding: 0 calc(26 * var(--dh-u));
		background: #c3bfb9;
	}

	.dh-pricing__plan {
		font-size: calc(26 * var(--dh-u));
		line-height: calc(28 / 26);
	}

	.dh-br-desktop {
		display: none;
	}

	.dh-pricing__price {
		font-size: calc(40 * var(--dh-u));
	}

	.dh-pricing__per {
		font-size: calc(15 * var(--dh-u));
	}

	.dh-pricing__body {
		padding: calc(26 * var(--dh-u)) calc(26 * var(--dh-u)) calc(24 * var(--dh-u));
	}

	/* the fold moves to the left, where the banner now overhangs */
	.dh-pricing__body::after {
		right: auto;
		left: calc(-10 * var(--dh-u));
		width: calc(10 * var(--dh-u));
		height: calc(10 * var(--dh-u));
		clip-path: polygon(100% 0, 100% 100%, 0 100%);
	}

	.dh-pricing__claim {
		max-width: none;
		font-size: calc(18.5 * var(--dh-u));
		line-height: calc(22 / 18.5);
	}

	.dh-pricing__included {
		margin-top: calc(18 * var(--dh-u));
		font-size: calc(18 * var(--dh-u));
	}

	.dh-pricing__list {
		font-size: calc(18 * var(--dh-u));
		line-height: calc(26 / 18);
	}

	/* The banner becomes a plain block of its own, overhanging on the left. */
	.dh-pricing__banner {
		display: flex;
		min-height: 0;
		align-items: stretch;
		flex-direction: column;
		margin: 0 calc(23 * var(--dh-u)) 0 calc(-10 * var(--dh-u));
		padding: calc(22 * var(--dh-u)) calc(26 * var(--dh-u)) calc(28 * var(--dh-u));
		clip-path: none;
	}

	.dh-pricing__deal {
		order: 2;
		padding-right: 0;
		text-align: left;
	}

	.dh-pricing__deal-title {
		margin-top: calc(18 * var(--dh-u));
		font-size: calc(24 * var(--dh-u));
		line-height: calc(26 / 24);
	}

	.dh-pricing__deal-bonus {
		margin-top: calc(4 * var(--dh-u));
		font-size: calc(22 * var(--dh-u));
		font-weight: 400;
	}

	.dh-pricing__free {
		padding-right: 0;
	}

	.dh-pricing__free-title {
		font-size: calc(24.5 * var(--dh-u));
	}

	.dh-pricing__free-line {
		max-width: none;
		margin-top: calc(12 * var(--dh-u));
		font-size: calc(18.9 * var(--dh-u));
		line-height: calc(19.8 / 18.9);
	}

	/* the title sits a touch further off than the gap between the two lists */
	.dh-pricing__free-title + .dh-pricing__free-line {
		margin-top: calc(14 * var(--dh-u));
	}

	.dh-pricing__foot {
		padding: calc(22 * var(--dh-u)) calc(26 * var(--dh-u)) calc(26 * var(--dh-u));
	}

	.dh-pricing__button {
		width: calc(216 * var(--dh-u));
		height: calc(62 * var(--dh-u));
		margin: 0 auto;
		font-size: calc(17.5 * var(--dh-u));
	}
}

/* ==========================================================================
   21. FAQ — "Questions fréquentes"
   ========================================================================== */

.dh-faq {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;
	--dh-rule: #707070;

	width: 100%;
	max-width: none !important;
	margin-block: 0;
	padding: calc(90 * var(--dh-u)) calc(164.6 * var(--dh-u)) calc(100 * var(--dh-u));
	background: #fff;
	color: var(--dh-navy);
}

.dh-faq__title {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(52 * var(--dh-u));
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	text-decoration: underline;
	text-decoration-color: var(--dh-orange);
	text-decoration-skip-ink: none;
	text-decoration-thickness: calc(2.9 * var(--dh-u));
	text-transform: uppercase;
	text-underline-offset: calc(7.6 * var(--dh-u));
}

.dh-faq__list {
	margin: calc(78 * var(--dh-u)) 0 0;
	padding: 0;
	border-bottom: calc(2.5 * var(--dh-u)) solid var(--dh-rule);
	list-style: none;
}

.dh-faq__item {
	border-top: calc(2.5 * var(--dh-u)) solid var(--dh-rule);
	transition: background-color 0.25s ease;
}

.dh-faq__item.is-open {
	background: #f7f7f6;
}

.dh-faq__head {
	position: relative;
	display: block;
	width: 100%;
	padding: calc(32.5 * var(--dh-u)) calc(60 * var(--dh-u)) calc(31 * var(--dh-u));
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	text-align: center;
}

.dh-faq__icon {
	position: absolute;
	top: calc(38 * var(--dh-u));
	left: calc(34.5 * var(--dh-u));
	display: block;
	width: calc(19.2 * var(--dh-u));
	color: var(--dh-orange);
	transition: transform 0.25s ease;
}

.dh-faq__icon svg {
	display: block;
	width: 100%;
	height: auto;
}

.dh-faq__item.is-open .dh-faq__icon {
	transform: rotate(180deg);
}

.dh-faq__question {
	display: block;
	max-width: calc(1000 * var(--dh-u));
	margin: 0 auto;
	font-family: Oswald, sans-serif;
	font-size: calc(36 * var(--dh-u));
	font-weight: 600;
	line-height: calc(37.8 / 36);
	text-transform: uppercase;
}

/* The answer slides open through the grid row, so nothing needs a fixed height. */
.dh-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.dh-faq__item.is-open .dh-faq__answer {
	grid-template-rows: 1fr;
}

.dh-faq__answer > p {
	max-width: calc(745 * var(--dh-u));
	margin: 0 auto;
	overflow: hidden;
	font-size: calc(15.4 * var(--dh-u));
	font-weight: 400;
	line-height: calc(18 / 15.4);
	text-align: center;
}

.dh-faq__item.is-open .dh-faq__answer > p {
	padding-bottom: calc(33 * var(--dh-u));
}

/* ==========================================================================
   22. FAQ — mobile (mock: 369px wide, questions ranged left)
   ========================================================================== */

@media (max-width: 900px) {

	.dh-faq {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		padding: calc(45 * var(--dh-u)) calc(24 * var(--dh-u)) calc(48 * var(--dh-u));
	}

	.dh-faq__title {
		max-width: calc(260 * var(--dh-u));
		margin: 0 auto;
		font-size: calc(32.2 * var(--dh-u));
		line-height: calc(32.9 / 32.2);
		text-decoration: none;
	}

	/* on the phone only the second line carries the rule */
	.dh-faq__title-rule {
		text-decoration: underline;
		text-decoration-color: var(--dh-orange);
		text-decoration-skip-ink: none;
		text-decoration-thickness: calc(3 * var(--dh-u));
		text-underline-offset: calc(6 * var(--dh-u));
	}

	.dh-faq__list {
		margin-top: calc(27 * var(--dh-u));
	}

	.dh-faq__head {
		padding: calc(28 * var(--dh-u)) 0 calc(27 * var(--dh-u)) calc(55 * var(--dh-u));
		text-align: left;
	}

	.dh-faq__icon {
		top: calc(31 * var(--dh-u));
		left: calc(12 * var(--dh-u));
		width: calc(17 * var(--dh-u));
	}

	.dh-faq__question {
		max-width: none;
		margin: 0;
		font-size: calc(19.5 * var(--dh-u));
		line-height: calc(21 / 19.5);
	}

	.dh-faq__answer > p {
		max-width: none;
		margin: 0 0 0 calc(55 * var(--dh-u));
		font-size: calc(14.6 * var(--dh-u));
		line-height: calc(17.5 / 14.6);
		text-align: left;
	}

	.dh-faq__item.is-open .dh-faq__answer > p {
		padding-bottom: calc(28 * var(--dh-u));
	}
}

/* ==========================================================================
   23. Final — "Votre équipe est capable…"
   ========================================================================== */

.dh-final {
	--dh-u: clamp(0.767px, 0.0697vw, 1.115px); /* 1px @ 1435 */
	--dh-navy: #00172e;
	--dh-orange: #ff2d16;

	position: relative;
	width: 100%;
	height: calc(547 * var(--dh-u));
	max-width: none !important;
	margin-block: 0;
	background: #dfddd9;
	overflow: hidden;
}

/* Two leaning bands: the light one runs off the left edge, the dark one off
   the right, and they overlap in the middle. */
.dh-final__pane {
	position: absolute;
}

/* Horizontal geometry is proportional so the two bands keep overlapping the
   same way on screens wider than the design. */
.dh-final__pane--light {
	top: calc(86.4 * var(--dh-u));
	left: 0;
	/* the inner edge is measured from the centre, so the bands keep overlapping
	   the same way while they bleed off both sides of a wider screen */
	width: calc(50% + 253.4 * var(--dh-u));
	height: calc(241.8 * var(--dh-u));
	padding: calc(57.6 * var(--dh-u)) 0 0 calc(233.8 * var(--dh-u));
	background: #fff;
	color: var(--dh-navy);
	clip-path: polygon(0 0, 100% 0, calc(100% - 45 * var(--dh-u)) 100%, 0 100%);
}

.dh-final__pane--dark {
	top: calc(259.1 * var(--dh-u));
	right: 0;
	width: calc(50% + 112.9 * var(--dh-u));
	height: calc(239 * var(--dh-u));
	padding: calc(41.5 * var(--dh-u)) calc(275.7 * var(--dh-u)) 0 0;
	background: var(--dh-navy);
	color: #fff;
	clip-path: polygon(calc(46 * var(--dh-u)) 0, 100% 0, 100% 100%, 0 100%);
	text-align: right;
}

.dh-final__hi {
	color: var(--dh-orange);
}

.dh-final__claim {
	position: relative;
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(38.2 * var(--dh-u));
	font-weight: 600;
	line-height: calc(44.9 / 38.2);
	text-transform: uppercase;
}

/* Zero-width marker: the chevron hangs to the left of the first line. */
.dh-final__chevron {
	position: relative;
	display: inline-block;
	width: 0;
	color: var(--dh-orange);
}

.dh-final__chevron svg {
	position: absolute;
	top: calc(-30 * var(--dh-u));
	right: calc(11 * var(--dh-u));
	width: calc(31 * var(--dh-u));
	height: calc(24.8 * var(--dh-u));
}

.dh-final__kicker {
	margin: 0;
	font-family: Oswald, sans-serif;
	font-size: calc(39.3 * var(--dh-u));
	font-weight: 600;
	line-height: calc(41.5 / 39.3);
	text-transform: uppercase;
}

.dh-final__scroll {
	display: none;
}

.dh-final__button {
	display: flex;
	width: calc(253.4 * var(--dh-u));
	height: calc(70.2 * var(--dh-u));
	align-items: center;
	justify-content: center;
	margin: calc(28 * var(--dh-u)) 0 0 auto;
	border: calc(2.5 * var(--dh-u)) solid currentColor;
	color: inherit;
	font-family: Oswald, sans-serif;
	font-size: calc(20 * var(--dh-u));
	font-weight: 700;
	line-height: calc(22 / 20);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dh-final__button:hover,
.dh-final__button:focus-visible {
	background: #fff;
	color: var(--dh-navy);
}

/* ==========================================================================
   24. Final — mobile (mock: 369px wide, one leaning navy block)
   ========================================================================== */

@media (max-width: 900px) {

	/* The section itself becomes the block: cut across the top and down the
	   right corner, everything centred inside it. */
	.dh-final {
		--dh-u: clamp(0.867px, 0.271vw, 1.3px); /* 1px @ 369 */

		height: auto;
		padding: calc(87 * var(--dh-u)) calc(24 * var(--dh-u)) calc(57 * var(--dh-u));
		background: var(--dh-navy);
		color: #fff;
		clip-path: polygon(0 calc(63 * var(--dh-u)), 84.7% 0, 100% calc(186 * var(--dh-u)), 100% 100%, 0 100%);
		text-align: center;
	}

	.dh-final__pane,
	.dh-final__pane--light,
	.dh-final__pane--dark {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		background: none;
		color: inherit;
		clip-path: none;
		text-align: center;
	}

	.dh-final__claim {
		font-size: calc(18 * var(--dh-u));
		line-height: calc(21.3 / 18);
	}

	.dh-final__chevron {
		display: none;
	}

	.dh-final__kicker {
		margin-top: calc(31 * var(--dh-u));
		font-size: calc(18.2 * var(--dh-u));
		line-height: calc(20.3 / 18.2);
	}

	.dh-final__scroll {
		display: flex;
		justify-content: center;
		margin-top: calc(19 * var(--dh-u));
		color: var(--dh-orange);
	}

	.dh-final__scroll svg {
		display: block;
		width: calc(17.4 * var(--dh-u));
		height: calc(18.8 * var(--dh-u));
	}

	.dh-final__button {
		width: calc(218.7 * var(--dh-u));
		height: calc(60.5 * var(--dh-u));
		margin: calc(17 * var(--dh-u)) auto 0;
		font-size: calc(17.5 * var(--dh-u));
	}
}