:root[data-blue-style] {
	/* Section body text: one size for every chapter's running text (founders, video list). */
	--section-text: clamp(1.05rem, 1.25vw, 1.3rem);
	--section-text-lh: 1.55;
	--blue-bg: #031321;
	--blue-text: #ffffff;
	--blue-muted: #e6f0f7;
	--blue-accent: #75d9cc;
	--blue-accent-text: #031321;
	--blue-radius: 8px;
	--blue-scale: 1;
	--blue-display: "Hanken Grotesk";
	--blue-body: "Hanken Grotesk";
	--blue-glow: #07446a;
	--blue-glow-x: 63%;
	--blue-glow-y: 47%;
	--blue-glow-size: 58%;
	--bg: var(--blue-bg);
	--bg-deep: var(--blue-bg);
	--ink: var(--blue-text);
	--ink-soft: var(--blue-muted);
	--ink-mute: var(--blue-muted);
	--red: var(--blue-secondary);
	--red-text: var(--blue-secondary);
	--line: #ffffff25;
	--line-strong: #ffffff45;
	--font-display: var(--blue-display), sans-serif;
	--font-body: var(--blue-body), sans-serif;
	--mc-page-bg: var(--blue-bg);
	--mc-stage-ink: var(--blue-text);
	--mc-ink-deep: var(--blue-text);
	--mc-font-body: var(--blue-body), sans-serif;
	--mc-red: var(--blue-secondary);
	--mc-red-text: var(--blue-secondary);
	--mc-red-text-light: var(--blue-secondary);
}
@media (max-width: 900px), (max-height: 570px) {
	:root[data-blue-style] {
		--section-text: clamp(1rem, 4.2vw, 1.15rem);
	}
}
@media (max-height: 570px), (max-width: 900px) and (orientation: landscape),
	(max-width: 900px) and (max-height: 640px) and (orientation: portrait) {
	:root[data-blue-style] {
		--section-text: 15px;
	}
}
:root[data-blue-style="horizon"] {
	--blue-glow: #075075;
	--blue-glow-x: 64%;
	--blue-glow-y: 83%;
	--blue-glow-size: 70%;
}
:root[data-blue-style="horizon-profond"] {
	--blue-glow: #063655;
	--blue-glow-x: 72%;
	--blue-glow-y: 98%;
	--blue-glow-size: 66%;
}
:root[data-blue-style="horizon-lunaire"] {
	--blue-glow: #315b75;
	--blue-glow-x: 38%;
	--blue-glow-y: 102%;
	--blue-glow-size: 77%;
}
:root[data-blue-style="horizon-boreal"] {
	--blue-glow: #076269;
	--blue-glow-x: 78%;
	--blue-glow-y: 92%;
	--blue-glow-size: 75%;
}
html[data-blue-style],
html[data-blue-style] body {
	background: var(--blue-night-bg, var(--blue-bg));
	color: var(--blue-text);
	--mc-stage-ink: var(--blue-text);
}
html[data-blue-style] body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(
			ellipse at 5% 3%,
			var(--blue-edge-one, #00070f9c),
			transparent 70%
		),
		radial-gradient(
			ellipse at 90% 12%,
			var(--blue-edge-two, #00040c88),
			transparent 65%
		),
		radial-gradient(
			ellipse at var(--blue-glow-x) var(--blue-glow-y),
			color-mix(
				in srgb,
				var(--blue-glow) var(--blue-glow-intensity, 100%),
				transparent
			),
			transparent var(--blue-glow-size)
		);
}
.blue-grain {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: var(--blue-grain-opacity, 0.17);
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' d='M0 0h192v192H0z'/%3E%3C/svg%3E");
}
.blue-stars {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	opacity: 0.7;
}
:root[data-blue-theme="light"] .blue-stars {
	display: none;
}
html[data-blue-style] #deck-shell,
html[data-blue-style] .dom-section,
html[data-blue-style] .stage,
html[data-blue-style] #app {
	background: transparent !important;
}
html[data-blue-style] #no-webgl-fallback {
	background: transparent;
	pointer-events: none;
}
html[data-blue-style] .no-webgl-wordmark {
	display: none;
}
html[data-blue-static-founder] #stage {
	visibility: hidden;
}
html[data-blue-style] .scrim,
html[data-blue-style] #dev-config-gear {
	display: none !important;
}
html[data-blue-style] #stage {
	mix-blend-mode: normal;
	z-index: 3;
	/* A section that hides or shows the field fades it, never cuts it. */
	transition:
		opacity 0.45s ease,
		visibility 0.45s;
}
@media (prefers-reduced-motion: reduce) {
	html[data-blue-style] #stage {
		transition: none;
	}
}
body:has(.hero-headline[aria-hidden="true"]) .hero-inner {
	visibility: hidden !important;
}
html[data-blue-style] .hero-inner {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: clamp(20px, 3vh, 36px);
	/* The published wordmark and description offsets move the group by their
	   mean: the bottom padding takes it back to the center of the free zone. */
	padding: var(--content-zone-top) 20px
		calc(
			var(--content-zone-bottom) +
			var(--blue-wordmark-y, 0px) +
			var(--blue-description-y, 0px)
		) !important;
	height: 100svh !important;
	max-height: none !important;
	transform: none !important;
}
.hero-sub:empty {
	display: none;
}
/* The headline and its trust badges (icon and label in a hairline pill). */
html[data-blue-style] .hero-lead {
	order: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
html[data-blue-style] .hero-badges {
	order: 3;
	position: relative;
	top: var(--blue-description-y, 0px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
/* Hero and booking badges: one quiet pill, bare icon, hairline, no shadow. */
html[data-blue-style] .hero-badge,
html[data-blue-style] .booking-badges li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 11px 0 9px;
	border: 1px solid rgb(31 158 146 / 0.3);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.55);
	box-shadow: none;
	color: #14232b;
	font:
		500 12.5px / 1 var(--blue-body),
		sans-serif;
	letter-spacing: 0.005em;
	white-space: nowrap;
}
html[data-blue-style] .hero-badge svg,
html[data-blue-style] .booking-badges svg {
	flex: none;
	width: 14px;
	height: 14px;
	padding: 0;
	background: none;
	color: #0f7d73;
}
html[data-blue-style][data-blue-theme="dark"] .hero-badge,
html[data-blue-style][data-blue-theme="dark"] .booking-badges li {
	border-color: rgb(117 217 204 / 0.3);
	background: rgb(255 255 255 / 0.04);
	color: #e9f2f1;
}
html[data-blue-style][data-blue-theme="dark"] .hero-badge svg,
html[data-blue-style][data-blue-theme="dark"] .booking-badges svg {
	color: #75d9cc;
}
@media (max-width: 560px) {
	html[data-blue-style] .hero-badges {
		gap: 6px;
	}
	html[data-blue-style] .hero-badge,
	html[data-blue-style] .booking-badges li {
		gap: 5px;
		height: 24px;
		padding: 0 10px 0 8px;
		font-size: 12px;
	}
	html[data-blue-style] .hero-badge svg,
	html[data-blue-style] .booking-badges svg {
		width: 13px;
		height: 13px;
	}
}
html[data-blue-style] .hero-headline {
	position: relative;
	top: var(--blue-description-y, 0px);
	order: 2;
	margin: 0 !important;
	font:
		500 clamp(1.4rem, 2.2vw, 2.2rem) / 1.25 var(--blue-display),
		sans-serif !important;
	letter-spacing: -0.02em;
	color: var(--blue-text) !important;
	opacity: 1;
	transform: none !important;
	max-width: 680px;
	text-wrap: balance;
}
html[data-blue-style] .hero-headline .blue-monaco {
	color: var(--blue-secondary);
}
html[data-blue-style] .hero-headline .ln-in {
	transform: none !important;
	opacity: 1 !important;
}
html[data-blue-style] #hero-wordmark-zone {
	order: 1;
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	width: min(
		calc(860px * var(--blue-wordmark-size, 1)),
		calc(80vw * var(--blue-wordmark-size, 1)),
		calc(100vw - 160px)
	) !important;
	height: calc(190px * var(--blue-wordmark-size, 1)) !important;
	min-height: 0 !important;
	flex: 0 0 auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 46px !important;
	overflow: visible !important;
	top: var(--blue-wordmark-y, 0px) !important;
}
#colibri {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
}
/* The static bird shows only where the live one cannot fly (motion off,
   reduced motion, no live canvas), at the perch the live bird takes
   (colibri-flight.js hoverPointFor "wordmark"): beside the wordmark zone, 42%
   down, with the plate width birdWidth() computes; above its left end on
   phones. Like the resting live bird, it faces right. Elsewhere nothing
   stands in: the live bird gathers from nothing. */
#colibri-home {
	--colibri-size: clamp(62px, 7.4vw, 112px);
	position: absolute;
	left: calc(100% + 18px);
	top: calc(42% - var(--colibri-size) / 2);
	width: var(--colibri-size);
	height: var(--colibri-size);
	z-index: 4;
	pointer-events: none;
}
@media (max-width: 767px) {
	#colibri-home {
		--colibri-size: clamp(62px, 16vw, 112px);
	}
}
@media (max-width: 768px) {
	#colibri-home {
		left: 16px;
		top: calc(-1 * var(--colibri-size) - 10px);
	}
}
#colibri-home img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
:root:not([data-colibri-live="false"]):not([data-blue-motion="off"])
	#colibri-home {
	display: none;
}
:root[data-blue-motion="off"] #colibri {
	visibility: hidden;
}
.blue-wordmark {
	display: none;
	font:
		400 calc(clamp(36px, 6vw, 96px) * var(--blue-wordmark-size, 1)) / 1
		"Pragma Wordmark",
		serif;
	letter-spacing: 0.04em;
	color: var(--blue-text);
}
:root:has(#no-webgl-fallback:not([hidden])) .blue-wordmark,
:root[data-blue-render="software"] .blue-wordmark {
	display: block;
}
/* Booking fallback and text-version links take the palette, not the
   browser default blue. */
html[data-blue-style] .booking-fallback a,
html[data-blue-style] .sec-foot a {
	color: var(--blue-text);
	text-decoration-color: color-mix(in srgb, var(--blue-text) 35%, transparent);
}
/* An empty hero description or extra-links block must not open phantom
   gaps in the centered hero column. */
html[data-blue-style] .hero-sub:empty,
html[data-blue-style] .blue-extra-links:empty {
	display: none !important;
}
html[data-blue-style] .hero-sub {
	order: 3;
	position: relative !important;
	top: var(--blue-description-y, 0px);
	margin: 0 !important;
	max-width: 860px;
	color: var(--blue-muted) !important;
	font:
		400 clamp(19px, 1.4vw, 24px) / 1.55 var(--blue-body),
		sans-serif !important;
	text-transform: none;
	letter-spacing: 0;
	text-wrap: balance;
}
html[data-blue-style] .hero-sub .blue-monaco {
	color: var(--blue-secondary);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}
/* Desktop: the headline and the description sit side by side under the
   wordmark, split by a hairline; narrower screens keep the stacked column. */
@media (min-width: 901px) and (min-height: 571px) {
	html[data-blue-style] .hero-inner {
		display: grid !important;
		/* Empty side columns take the wide wordmark's slack, so each text
		   column hugs its text and the gaps either side of the hairline match. */
		grid-template-columns: 1fr auto auto 1fr;
		grid-template-areas: "mark mark mark mark" ". head sub .";
		justify-content: center;
		align-content: center;
		/* Both columns hang from one top line: the first capitals of the
		   headline and of the description share it, and the hairline starts
		   there too. */
		align-items: start;
		column-gap: clamp(32px, 3.4vw, 56px);
		row-gap: 0;
	}
	html[data-blue-style] #hero-wordmark-zone {
		grid-area: mark;
		justify-self: center;
	}
	/* The two columns carry equal weight: a smaller headline, a larger and
	   darker description, both centred on the hairline. */
	html[data-blue-style] .hero-headline {
		grid-area: head;
		text-align: left;
		font-size: clamp(1.3rem, 1.8vw, 1.85rem) !important;
	}
	html[data-blue-style] .hero-lead {
		grid-area: head;
		align-items: flex-start;
	}
	html[data-blue-style] .hero-badges {
		justify-content: flex-start;
	}
	html[data-blue-style] .hero-headline .ln {
		font-size: min(1em, calc((50vw - 72px) / var(--hero-line-em)));
	}
	/* Hanken Grotesk: ascent 1, descent 0.303, cap 0.697 em, so a line box
	   holds (line-height - 1.303) / 2 + 0.303 em above its capitals and the
	   same below its baseline: 0.2765em at 1.25, 0.3765em at 1.45. */
	html[data-blue-style] .hero-headline .ln:first-child {
		margin-top: -0.2765em;
	}
	html[data-blue-style] .hero-sub {
		grid-area: sub;
		/* Each language's widest balanced line, so the box hugs its text and
		   the two columns centre on the wordmark. */
		--hero-sub-em: 17.6em;
		max-width: calc(var(--hero-sub-em) + clamp(32px, 3.4vw, 56px) + 1px);
		margin-top: -0.3765em !important;
		padding-left: clamp(32px, 3.4vw, 56px);
		text-align: left;
		font-size: clamp(19px, 1.5vw, 26px) !important;
		line-height: 1.45 !important;
		color: color-mix(
			in srgb,
			var(--blue-text) 80%,
			var(--blue-muted)
		) !important;
	}
	/* The hairline runs from the first capitals to the last baseline. */
	html[data-blue-style] .hero-sub::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.3765em;
		bottom: 0.3765em;
		border-left: 1px solid var(--line-strong, currentColor);
	}
	html[data-blue-style][lang="en"] .hero-sub {
		--hero-sub-em: 14.3em;
	}
	html[data-blue-style][lang="it"] .hero-sub {
		--hero-sub-em: 17.05em;
	}
	html[data-blue-style][lang="ru"] .hero-sub {
		--hero-sub-em: 15em;
	}
	html[data-blue-style] .blue-extra-links {
		grid-column: 1 / -1;
	}
}

html[data-blue-style] .hero-sub:empty {
	display: none !important;
}
html[data-blue-style] #bar {
	background: transparent;
	border-color: var(--line);
	color: var(--blue-text);
}
html[data-blue-style] .menu-item,
html[data-blue-style] .bar-brand,
html[data-blue-style] .lang-switch a {
	color: var(--blue-text);
}
html[data-blue-style] .bar-brand {
	font-family: "Pragma Wordmark", serif;
	font-weight: 300;
	width: max-content;
	white-space: nowrap;
	flex-shrink: 0;
	align-items: center;
}
html[data-blue-style] .bar-brand .plw {
	display: inline-flex;
	flex-wrap: nowrap;
}
.blue-brand-icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	object-fit: contain;
	margin-right: 8px;
}
.blue-night-controls {
	border: 0;
	border-top: 1px solid #ffffff25;
	padding: 18px 0 0;
	margin: 20px 0;
	display: grid;
	gap: 12px;
}
.blue-night-controls legend {
	padding: 0 8px 0 0;
}
.blue-night-controls label {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 10px;
	align-items: center;
}
.blue-night-controls input[type="range"] {
	grid-column: 1 / -1;
	width: 100%;
	height: 30px;
	accent-color: #75d9cc;
	cursor: pointer;
}
.blue-night-controls input[type="color"] {
	width: 44px;
	height: 34px;
	padding: 2px;
	border: 1px solid #577080;
	border-radius: 5px;
	background: none;
	cursor: pointer;
}
.blue-night-controls output {
	color: #75d9cc;
	font-variant-numeric: tabular-nums;
}
.blue-save-gate {
	margin-top: 20px;
}
.blue-save-gate[hidden] {
	display: none;
}
.blue-save-gate label {
	display: grid;
	gap: 6px;
	margin-bottom: 12px;
}
.blue-save-gate input {
	width: 100%;
	min-height: 44px;
	background: #031321;
	color: #eef5fa;
	border: 1px solid #577080;
	border-radius: 6px;
	padding: 8px;
}
/* The tagline is always two lines, broken at the comma: each line keeps one
   line and shrinks with the viewport so its longest line (in em) fits. */
html[data-blue-style] .hero-headline {
	--hero-line-em: 14.6;
	max-width: none !important;
}
html[data-blue-style][lang="en"] .hero-headline {
	--hero-line-em: 14;
}
html[data-blue-style][lang="it"] .hero-headline {
	--hero-line-em: 13;
}
html[data-blue-style][lang="ru"] .hero-headline {
	--hero-line-em: 20.1;
}
html[data-blue-style] .hero-headline .ln {
	display: block;
	white-space: nowrap;
	font-size: min(1em, calc((100vw - 48px) / var(--hero-line-em)));
}
html[data-blue-style] .menu-item--primary {
	color: var(--blue-secondary) !important;
	background: transparent !important;
	border-radius: var(--blue-radius);
}
html[data-blue-style] .menu-item-dot {
	display: none;
}
html[data-blue-style] .display,
html[data-blue-style] .lede,
html[data-blue-style] .studio-meta {
	color: var(--blue-text);
}
html[data-blue-style] .kicker {
	display: none;
}
.blue-gear {
	display: none !important;
}
.blue-theme-toggle {
	display: grid;
	place-items: center;
	color: var(--blue-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	padding: 0;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}
.blue-theme-toggle:hover {
	background: transparent;
	color: var(--blue-secondary);
}
@media (min-width: 761px) {
	.blue-theme-toggle {
		position: fixed;
		top: max(18px, env(safe-area-inset-top));
		right: 24px;
		z-index: 1000;
		width: 32px;
		height: 32px;
	}
}
@media (max-width: 760px) {
	.blue-theme-toggle {
		position: fixed !important;
		top: calc(8px + env(safe-area-inset-top)) !important;
		left: auto !important;
		right: 62px !important;
		z-index: 1000 !important;
		width: 48px !important;
		min-width: 48px !important;
		height: 48px !important;
		min-height: 48px !important;
		flex: 0 0 48px !important;
		border-radius: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: transparent !important;
		border: 0 !important;
		color: var(--blue-text) !important;
		cursor: pointer !important;
		margin: 0 !important;
		transform: none !important;
	}
}
@media (max-width: 360px) {
	html[data-blue-style] #bar .bar-brand {
		font-size: 10px !important;
		letter-spacing: 0.05em !important;
	}
}
:root[data-blue-theme="light"] {
	--line: #0d394625;
	--line-strong: #0d394645;
}
html[data-blue-theme="light"] .blue-grain {
	mix-blend-mode: soft-light;
}
html[data-blue-theme="light"] #app::before {
	display: none;
}
html[data-blue-theme="light"] .blue-gear,
html[data-blue-theme="light"] .blue-theme-toggle {
	border-color: transparent;
}
html[data-blue-theme="light"] #bar .menu-item {
	border-color: #0d394628;
}
html[data-blue-theme="light"] #bar::before {
	border-color: #0d39461c;
}
.blue-dialog {
	position: fixed;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	width: min(440px, calc(100vw - 32px));
	max-height: min(680px, calc(100dvh - 64px));
	overflow: auto;
	padding: 26px;
	color: #eef5fa;
	background: #071c2e;
	border: 1px solid #456072;
	border-radius: 16px;
	font:
		14px / 1.5 "Hanken Grotesk",
		sans-serif;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75);
	z-index: 12000;
}
.blue-dialog::backdrop {
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
:root[data-blue-theme="light"] .blue-dialog {
	color: var(--blue-text);
	background: var(--blue-bg);
	border-color: var(--line-strong);
	box-shadow: 0 24px 80px rgb(13 57 70 / 22%);
}
.blue-dialog[open] {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.blue-dialog-scroll {
	overflow-y: auto;
	min-height: 0;
	padding-right: 5px;
	scrollbar-width: thin;
	scrollbar-color: #456072 transparent;
}
.blue-dialog header,
.blue-dialog .blue-actions {
	flex-shrink: 0;
}
.blue-dialog .blue-actions {
	padding-top: 16px;
	border-top: 1px solid #ffffff25;
}
.blue-dialog .blue-quick-save,
.blue-dialog .blue-save {
	background: #75d9cc;
	border-color: #75d9cc;
	color: #031321;
}
.blue-dialog h2 {
	font:
		400 25px / 1.2 "Hanken Grotesk",
		sans-serif;
	margin: 0 0 8px;
}
.blue-dialog p {
	color: #b9cbd6;
	margin: 8px 0 20px;
}
.blue-dialog button,
.blue-dialog a {
	font: inherit;
	cursor: pointer;
}
.blue-dialog button {
	min-height: 44px;
	border: 1px solid #577080;
	background: transparent;
	color: #f4f6f5;
	border-radius: 6px;
	padding: 8px 12px;
}
.blue-dialog button:hover,
.blue-dialog button[aria-pressed="true"] {
	border-color: #75d9cc;
	background: #75d9cc15;
}
:root[data-blue-theme="light"] .blue-dialog p {
	color: var(--blue-text);
	opacity: 0.72;
}
:root[data-blue-theme="light"] .blue-dialog button {
	color: var(--blue-text);
	border-color: var(--line-strong);
}
:root[data-blue-theme="light"] .blue-dialog button:hover,
:root[data-blue-theme="light"] .blue-dialog button[aria-pressed="true"] {
	border-color: #087985;
	background: rgb(8 121 133 / 0.1);
}
:root[data-blue-theme="light"] .blue-dialog .blue-actions {
	border-top-color: var(--line-strong);
}
:root[data-blue-theme="light"]
	.blue-dialog
	input:not([type="range"], [type="color"]) {
	color: var(--blue-text);
	background: #fff;
	border-color: var(--line-strong);
}
.blue-dialog .blue-editor-gate button[type="submit"] {
	color: #031321;
	background: #75d9cc;
	border-color: #75d9cc;
	font-weight: 600;
}
:root[data-blue-theme="light"] .blue-dialog .blue-quick-save,
:root[data-blue-theme="light"] .blue-dialog .blue-save,
:root[data-blue-theme="light"]
	.blue-dialog
	.blue-editor-gate
	button[type="submit"] {
	color: #fff;
	background: #087985;
	border-color: #087985;
}
.blue-options {
	display: grid;
	gap: 22px;
	margin: 22px 0;
}
.blue-options[hidden] {
	display: none;
}
.blue-dialog.is-editor-locked .blue-options,
.blue-dialog.is-editor-locked .blue-night-controls,
.blue-dialog.is-editor-locked .blue-dialog-scroll > p,
.blue-dialog.is-editor-locked .blue-actions {
	display: none;
}
.blue-editor-gate {
	display: grid;
	gap: 14px;
	padding-block: 8px;
}
.blue-editor-gate label {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}
.blue-editor-gate input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	font: inherit;
	color: #eef5fa;
	background: #031321;
	border: 1px solid #577080;
	border-radius: 6px;
}
.blue-paper-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.blue-paper-group h3 {
	grid-column: 1 / -1;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.blue-options button {
	display: grid;
	grid-template-columns: 42px 1fr;
	text-align: left;
	gap: 9px;
	align-items: center;
	padding: 7px;
}

.blue-swatch {
	width: 42px;
	height: 34px;
	border-radius: 3px;
	background: radial-gradient(
		ellipse at var(--swatch-x) var(--swatch-y),
		var(--swatch-glow),
		var(--swatch-bg) 88%
	);
}
.blue-dialog small {
	display: block;
	color: #b9cbd6;
}
.blue-dialog a {
	color: #75d9cc;
}
.blue-dialog header,
.blue-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.blue-dialog header button {
	padding: 0;
	min-width: 44px;
	border: 0;
	font-size: 24px;
}
.blue-fields {
	display: grid;
	gap: 12px;
}
.blue-fields label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.blue-fields input,
.blue-fields select {
	max-width: 160px;
	min-height: 36px;
	color: #f4f6f5;
	background: #102e43;
	border: 1px solid #577080;
	border-radius: 4px;
	padding: 6px;
}
.blue-fields input[type="color"] {
	padding: 2px;
	width: 70px;
}
.blue-fields fieldset {
	border: 1px solid #456072;
	border-radius: 6px;
	margin: 12px 0;
	padding: 12px;
}
.blue-status {
	margin-top: 16px;
	display: block;
	color: #75d9cc;
}
[data-blue-editable="true"] {
	outline: 1px dashed #75d9cc80;
	outline-offset: 6px;
}
.blue-section-gear {
	position: absolute;
	right: 12px;
	top: 12px;
	z-index: 20;
	color: #75d9cc;
	background: #031321;
	border: 1px solid #577080;
	padding: 10px;
	border-radius: 50%;
	cursor: pointer;
}
:root[data-blue-loading] #deck-shell {
	visibility: hidden;
}
/* Light keeps a near-neutral bloom instead of the deep blue light source dark
   uses, so the paper reads as paper rather than as a tinted wash. */
:root[data-blue-theme="light"] {
	--blue-glow: #e9eeec;
	--line: #0d39462a;
}
:root[data-blue-density="compact"] .hero-inner {
	gap: 16px;
}
:root[data-blue-density="spacious"] .hero-inner {
	gap: 40px;
}
:root[data-blue-width="narrow"] .hero-inner {
	max-width: 640px !important;
}
:root[data-blue-width="wide"] .hero-inner {
	max-width: 1100px !important;
}
.blue-extra-links {
	order: 4;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: center;
}
.blue-extra-links:empty {
	display: none;
}
.blue-extra-links a {
	color: var(--blue-secondary);
	font:
		14px "Hanken Grotesk",
		sans-serif;
}
@media (max-width: 760px) {
	html[data-blue-style] .hero-inner {
		padding: calc(env(safe-area-inset-top, 0px) + 56px) 16px
			calc(110px + env(safe-area-inset-bottom, 0px)) !important;
		gap: clamp(16px, 3vh, 26px);
		justify-content: center !important;
	}
	html[data-blue-style] .hero-headline {
		font-size: clamp(19px, 5.2vw, 24px) !important;
		line-height: 1.25 !important;
		text-align: center !important;
		color: var(--blue-text) !important;
	}
	html[data-blue-style] .hero-sub {
		font-size: 18px !important;
		line-height: 1.45 !important;
		max-width: 350px !important;
		text-align: center !important;
	}
	html[data-blue-style] #hero-wordmark-zone {
		/* Maximize the particle field on phones: the zone rect drives both the
		   wordmark fit and its ambient ground-pool glow (blue-app.min.js), so a
		   taller/wider box grows the whole particle presence, not just the
		   crisp glyph. Bounded by dvh so it stays inside the hero's centered
		   flex band above the fixed bottom bar. */
		height: calc(
			clamp(200px, 40dvh, 320px) *
			var(--blue-wordmark-size, 1)
		) !important;
		margin: 0 0 30px !important;
		width: min(
			calc(94vw * var(--blue-wordmark-size, 1)),
			calc(100vw - 24px)
		) !important;
	}
	.blue-paper-group {
		grid-template-columns: 1fr;
	}
	html[data-blue-style] .menu-item-label .plw {
		display: inline-flex;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	html[data-blue-style] .menu-item-label {
		letter-spacing: 0.08em;
	}
	html[data-blue-style] #bar,
	html[data-blue-style] #bar[data-bar-state="realisations-expanded"] {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px 14px max(12px, env(safe-area-inset-bottom));
		backdrop-filter: none;
		border: 0;
		border-radius: 0 !important;
		box-shadow: none;
		background: linear-gradient(
			transparent,
			var(--blue-night-bg, var(--blue-bg)) 38%
		);
	}
	html[data-blue-style] #bar::before {
		content: "";
		position: fixed;
		inset: 0 0 auto;
		height: calc(64px + env(safe-area-inset-top));
		background: color-mix(
			in srgb,
			var(--blue-night-bg, var(--blue-bg)) 85%,
			transparent
		);
		border-bottom: 1px solid #ffffff16;
		pointer-events: none;
	}
	html[data-blue-style] #bar .bar-brand {
		position: fixed;
		left: 14px;
		top: calc(8px + env(safe-area-inset-top));
		min-height: 48px;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.11em;
		gap: 0.2em;
	}
	/* Phones: one 48px button for the current language; tapping it opens the
	   other three below it (blue-locale.js toggles data-open). */
	html[data-blue-style] #lang-switch {
		position: fixed;
		right: 14px;
		top: calc(8px + env(safe-area-inset-top));
		display: flex;
		flex-direction: column;
		gap: 0;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.04em;
		border-radius: var(--blue-radius);
	}
	html[data-blue-style] #lang-switch[data-open] {
		background: var(--blue-night-bg, var(--blue-bg));
		box-shadow: 0 0 0 1px var(--line-strong, #ffffff30);
	}
	html[data-blue-style] #lang-switch a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 48px;
		min-height: 48px;
		padding: 0;
	}
	html[data-blue-style] #lang-switch a[aria-current="true"] {
		order: -1;
	}
	html[data-blue-style] #lang-switch:not([data-open]) a[aria-current="false"] {
		display: none;
	}
	/* A closed list of four languages shows a small arrow: the button opens a picker. */
	html[data-blue-style]
		#lang-switch:has(a:nth-of-type(3)):not([data-open])
		a[aria-current="true"]::after {
		content: "";
		width: 5px;
		height: 5px;
		margin-left: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
	}
	/* A two-language site (pragma-serve.com) shows both, as on computers. */
	html[data-blue-style]
		#lang-switch:not(:has(a:nth-of-type(3)))
		a[aria-current="false"] {
		display: flex;
	}
	html[data-blue-style] #bar .menu-item {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
		min-height: 48px;
		justify-content: center;
		align-items: center;
		padding: 10px 8px;
		border: 1px solid #ffffff24;
		border-radius: var(--blue-radius);
		background: #ffffff05;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.04em;
	}
	html[data-blue-style] #bar .menu-item--primary {
		order: 2;
		flex-basis: 100%;
		font-size: 15px;
		font-weight: 600;
		padding: 12px 18px;
		border-color: color-mix(in srgb, var(--blue-secondary) 45%, transparent);
	}
	html[data-blue-style] #bar .menu-item:hover,
	html[data-blue-style] #bar .menu-item:focus-visible {
		background: #ffffff10;
		border-color: #ffffff60;
	}
	.blue-gear {
		display: none !important;
	}
}
@media (max-height: 570px) {
	html[data-blue-style] .hero-inner {
		padding: 20px 72px 76px !important;
		gap: 12px;
	}
	.blue-wordmark {
		width: 230px;
	}
	html[data-blue-style] #hero-wordmark-zone {
		/* Same ratio as before (~4.3:1), scaled up ~1.85x to use the extra
		   width/height a short landscape phone actually has free. */
		height: calc(140px * var(--blue-wordmark-size, 1)) !important;
		width: calc(600px * var(--blue-wordmark-size, 1)) !important;
		margin-bottom: 26px !important;
	}
	html[data-blue-style] .hero-headline {
		font-size: calc(23px * var(--blue-description-size, 1)) !important;
	}
	html[data-blue-style] .hero-sub {
		font-size: 14px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#colibri {
		display: none;
	}
	#colibri-home {
		display: block !important;
	}
}

/* The bird lives on the hero only (blue-flight.js): off the hero it fades out
   with the hero's particles and fades back in on return. */
#colibri {
	transition: opacity 0.45s ease;
}
:root:has(.dom-section.is-active:not(#section-hero)) #colibri {
	opacity: 0;
}
:root:has(.dom-section.is-active:not(#section-hero)) #colibri-night,
:root:has(.dom-section.is-active:not(#section-hero)) #colibri-home {
	display: none !important;
	pointer-events: none !important;
}

:root:has(#section-realisations.is-active):not(:has(#page-ia.is-current))
	#stage,
:root:has(#section-studio.is-active) #stage,
:root:has(#section-contact.is-active) #stage {
	display: none !important;
	pointer-events: none !important;
}

#section-realisations .split-figure,
#section-realisations .reals-hub-figure-zone,
#section-realisations .site-figure-zone {
	display: none !important;
}
html[data-blue-theme="light"] #bar .menu-item {
	border-color: #0d394638;
	background: transparent;
}
html[data-blue-theme="light"] #bar .menu-item:hover,
html[data-blue-theme="light"] #bar .menu-item:focus-visible {
	border-color: #0d394678;
	background: transparent;
}

@media (max-width: 760px) {
	/* ── Mobile Layout: Vertically Centered Across All Stages ── */
	#section-realisations .stage-inner,
	.stage-inner:not(.testi-page) {
		height: 100% !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 54px) !important;
		padding-bottom: calc(122px + env(safe-area-inset-bottom, 0px)) !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 10px !important;
		box-sizing: border-box !important;
	}
	#section-realisations .reals-hub-figure {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
		height: auto !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#section-realisations .offer-head {
		flex: 0 0 auto !important;
		min-height: auto !important;
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		margin: 0 auto !important;
		width: 100% !important;
		max-width: 360px !important;
		gap: 6px !important;
	}
	#section-realisations .offer-head-title {
		font-size: clamp(22px, 6vw, 26px) !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		margin: 0 !important;
		text-align: center !important;
		color: var(--blue-text) !important;
	}
	#section-realisations .offer-tagline,
	#section-realisations .reals-hub-body {
		font-size: clamp(16px, 4.2vw, 17px) !important;
		line-height: 1.4 !important;
		max-width: 330px !important;
		margin: 0 auto !important;
		text-align: center !important;
		color: var(--blue-muted) !important;
	}
	#section-realisations .split-figure {
		display: none !important;
	}
	#section-realisations .reals-arrow {
		top: 55% !important;
	}
	.microlabel {
		font-size: 11.5px !important;
		letter-spacing: 0.16em !important;
	}

	/* ── Mobile Duo-screens (New Morning style) ── */
	#page-siteweb .stage-inner {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 52px) !important;
		padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
	}
	#page-siteweb .offer-head {
		text-align: center !important;
		align-self: center !important;
		max-width: 360px !important;
		margin: 0 auto !important;
		gap: 3px !important;
	}
	#page-siteweb .workstage {
		height: auto !important;
		width: 100% !important;
		max-width: 350px !important;
		margin: 2px auto 0 !important;
		position: relative !important;
	}
	#page-siteweb .workstage .wk {
		position: static !important;
		display: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
	}
	#page-siteweb .workstage .wk.on {
		display: block !important;
	}
	#page-siteweb .workstage .duoscreens {
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		align-items: stretch !important;
	}
	#page-siteweb .workstage .duoscreens .screen.a {
		width: 100% !important;
		height: auto !important;
	}
	#page-siteweb .workstage .duoscreens .screen.b {
		position: static !important;
		width: 88% !important;
		margin-left: auto !important;
		bottom: auto !important;
		height: auto !important;
		background: none !important;
	}
	#page-siteweb .workstage .duoscreens .screen.b .vp {
		box-shadow: none !important;
	}
	#page-siteweb .screen .vp {
		aspect-ratio: 16 / 9.5 !important;
		max-height: 105px !important;
		height: auto !important;
		border-radius: 4px !important;
		border: 1px solid rgba(255, 255, 255, 0.2) !important;
	}
	#page-siteweb .screen .plate-tag {
		font-size: 14px !important;
		margin-top: 2px !important;
		letter-spacing: 0.08em !important;
		color: var(--blue-text) !important;
	}
	#page-siteweb .screen .plate-tag a {
		color: var(--blue-accent, #75d9cc) !important;
	}
}

@media (min-width: 761px) {
	/* ── Desktop Typography & Vertical Balance ── */
	.offer-head-title,
	.stage-title {
		font-size: clamp(1.9rem, 2.6vw, 2.6rem) !important;
		line-height: 1.15 !important;
		letter-spacing: -0.02em !important;
		color: var(--blue-text) !important;
	}
	.offer-tagline,
	.reals-hub-body {
		font-size: clamp(1rem, 1.15vw, 1.2rem) !important;
		line-height: 1.5 !important;
		max-width: 44ch !important;
		color: var(--blue-muted) !important;
	}

	/* ── Desktop Duoscreens (New Morning Style) ── */
	#page-siteweb.stage {
		height: 100%;
	}
	#page-siteweb .stage-inner {
		display: grid;
		grid-template-columns: minmax(18rem, 36%) 1fr;
		column-gap: clamp(2rem, 4vw, 3.5rem);
		align-items: center;
		height: 100%;
		max-width: var(--w-wide);
		padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
		padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
	}
	#page-siteweb .offer-head {
		grid-column: 1;
		text-align: left;
		align-self: center;
		max-width: 420px;
	}
	#page-siteweb #work-carousel {
		grid-column: 2;
		align-self: center;
		width: 100%;
		margin: 0;
	}
	.workstage {
		position: relative;
		width: 100%;
		height: min(44vh, 27rem);
	}
	.workstage .wk {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.45s ease,
			visibility 0.45s ease;
	}
	.workstage .wk.on {
		opacity: 1;
		visibility: visible;
	}
	.workstage .duoscreens {
		position: relative;
		height: 100%;
		min-height: 0;
		display: flex;
		align-items: center;
	}
	.workstage .duoscreens .screen.a {
		width: 62%;
		position: relative;
		z-index: 1;
	}
	.workstage .duoscreens .screen.b {
		position: absolute;
		right: 0;
		bottom: 6%;
		width: 44%;
		z-index: 2;
		background: var(--blue-night-bg, var(--blue-bg, #031321));
		padding: 0;
	}
	.workstage .duoscreens .screen.b .vp {
		box-shadow: -18px -14px 0 0 var(--blue-night-bg, var(--blue-bg, #031321));
		border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.25));
	}
	.screen {
		position: relative;
	}
	.screen .vp {
		overflow: hidden;
		position: relative;
		aspect-ratio: 16 / 10.6;
		border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.25));
		background: #ffffff;
		border-radius: 4px;
	}
	.screen .vp img {
		display: block;
		width: 100%;
		height: auto;
		will-change: transform;
	}
	.screen .plate-tag {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin-top: 0.55rem;
		font-size: clamp(0.65rem, 0.85vw, 0.75rem);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		font-weight: 600;
		color: var(--blue-text);
	}
	.screen .plate-tag a {
		color: var(--blue-accent, #75d9cc);
		text-decoration: none;
		text-transform: lowercase;
		letter-spacing: 0.08em;
		border-bottom: 1px solid var(--line-strong, rgba(255, 255, 255, 0.25));
		padding-bottom: 0.15em;
		pointer-events: auto;
	}
	.screen .plate-tag a:hover {
		color: var(--blue-text);
		border-color: var(--blue-text);
	}
}

.scroll-vertical {
	--position: 0;
	position: fixed;
	left: 40px;
	top: 50%;
	height: min(44vh, 360px);
	width: 1px;
	transform: translateY(-50%);
	z-index: 90;
	color: var(--blue-text);
	touch-action: none;
}
.scroll-rail {
	position: absolute;
	inset: 0;
	width: 1px;
	background: color-mix(in srgb, var(--blue-text) 30%, transparent);
}
.scroll-progress {
	position: absolute;
	top: 0;
	width: 1px;
	height: calc(var(--position) * 100%);
	background: var(--blue-text);
	opacity: 0.5;
	transition: height 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-cursor {
	position: absolute;
	left: 50%;
	top: calc(var(--position) * 100%);
	z-index: 2;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	border-radius: 50%;
	background: var(--blue-secondary);
	transform: translateY(-50%);
	pointer-events: none;
	transition: top 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-step {
	position: absolute;
	/* Dots centre on the 1px rail at 50%, offset by layout margins (not transforms) so every browser paints them on whole pixels. */
	left: 50%;
	margin-left: -16px;
	transform: translateY(-50%);
	width: 32px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.scroll-step-dot {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--blue-text);
	opacity: 0.5;
	left: 50%;
	top: 50%;
	margin-left: -2.5px;
	transform: translateY(-50%);
}
.scroll-step[aria-current="true"] .scroll-step-dot,
.scroll-step.past .scroll-step-dot {
	opacity: 0.75;
}
.scroll-step-label {
	position: absolute;
	left: 36px;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: var(--blue-bg, #f6f8fc);
	border-radius: 3px;
	padding: 6px 10px;
	font-size: 12px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}
.scroll-step:hover .scroll-step-label,
.scroll-step:focus-visible .scroll-step-label {
	opacity: 1;
}
.scroll-horizontal {
	position: fixed;
	bottom: 110px;
	left: 73%;
	transform: translateX(-50%);
	width: 200px;
	z-index: 90;
	color: var(--blue-text);
}
.scroll-horizontal[hidden] {
	display: none;
}
.scroll-arrows {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-bottom: 15px;
}
.scroll-arrows button {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 24px;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
.scroll-arrows button:disabled {
	opacity: 0.5;
	cursor: default;
}
.scroll-count {
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	opacity: 0.65;
}
.scroll-track {
	position: relative;
	height: 24px;
	cursor: grab;
	touch-action: none;
}
.scroll-track:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 11px;
	height: 2px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--blue-text) 20%, transparent);
}
.scroll-thumb {
	position: absolute;
	top: 12px;
	left: 0;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--blue-text);
	transition:
		left 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		width 0.2s,
		height 0.2s;
	pointer-events: none;
}
.scroll-track:hover .scroll-thumb {
	width: 10px;
	height: 10px;
}
.scroll-track.dragging {
	cursor: grabbing;
}
.scroll-track.dragging .scroll-thumb {
	transition:
		width 0.2s,
		height 0.2s;
	width: 12px;
	height: 12px;
}
html[data-scroll-site] a[href^="tel:"] {
	white-space: nowrap;
}
/* Touch: every text link and toggle offers a 44px tall hit area. */
@media (pointer: coarse) {
	html[data-scroll-site] .fd-linkedin a,
	html[data-scroll-site] .sec-foot.studio-meta a,
	html[data-scroll-site] #section-services .services-secondary {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-block: 0;
		border-bottom: 0;
		text-decoration: underline;
		text-decoration-color: var(--line-strong);
		text-underline-offset: 5px;
	}
	html[data-scroll-site] .scroll-demo-sources summary {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

html[data-blue-style] #bar {
	grid-template-columns: 1fr auto auto auto 1fr;
	grid-template-areas: "brand c1 c2 c3 right";
	column-gap: clamp(0.8rem, 1.8vw, 1.6rem);
	border: 0;
	border-radius: 0 !important;
	overflow: visible;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
html[data-blue-style] #bar [data-menu="studio"] {
	grid-area: c1;
}
html[data-blue-style] #bar [data-menu="realisations"] {
	grid-area: c2;
	display: inline-flex;
}
html[data-blue-style] #bar [data-menu="contact"] {
	grid-area: c3;
	justify-self: center;
}
/* « Nos services » (2026-09-24): the base bar carries a fourth centre item.
   Scoped to that one state because this sheet is injected after style.css and
   its unscoped rules above are what every other bar state (audit, réalisations
   déployées) still reads. */
html[data-blue-style] #bar[data-bar-state="base"] {
	grid-template-columns: 1fr auto auto auto auto 1fr;
	grid-template-areas: "brand c1 c2 c3 c4 right";
}
html[data-blue-style] #bar[data-bar-state="base"] [data-menu="services"] {
	grid-area: c2;
	display: inline-flex;
}
html[data-blue-style] #bar[data-bar-state="base"] [data-menu="realisations"] {
	grid-area: c3;
}
html[data-blue-style] #bar[data-bar-state="base"] [data-menu="contact"] {
	grid-area: c4;
}
html[data-blue-style] #bar #lang-switch {
	grid-area: right;
}
html[data-blue-style] .fd-linkedin a {
	color: var(--blue-secondary);
}
.blue-audit-close {
	position: fixed;
	top: max(20px, env(safe-area-inset-top));
	right: 24px;
	z-index: 11001;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--blue-text);
	background: transparent;
	cursor: pointer;
}
.blue-audit-close[hidden] {
	display: none;
}
.blue-audit-close:hover {
	background: color-mix(in srgb, var(--blue-text) 8%, transparent);
}
html[data-blue-audit="true"] .blue-gear {
	right: 76px;
}
html[data-blue-audit="true"] .blue-theme-toggle {
	right: 128px;
}
html[data-blue-audit="true"] #bar {
	height: 0;
	min-height: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	backdrop-filter: none;
}
html[data-blue-audit="true"] #bar > .menu-item,
html[data-blue-audit="true"] #bar > .scroll-trust {
	display: none !important;
}
html[data-blue-audit="true"] #bar .bar-brand {
	position: fixed;
	top: 26px;
	left: 32px;
}
html[data-blue-audit="true"] #lang-switch {
	position: fixed;
	top: auto;
	bottom: 24px;
	left: 32px;
	right: auto;
	transform: none;
}
html[data-blue-style] #page-closing .offer-page {
	display: block;
	max-width: none;
	height: 100dvh !important;
	padding: 0 !important;
	margin: 0;
}
.blue-audit-panel {
	width: clamp(380px, 40vw, 540px);
	height: 100%;
	padding: 164px 40px 84px;
	border-right: 1px solid var(--line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: color-mix(
		in srgb,
		var(--blue-night-bg, var(--blue-bg)) 80%,
		transparent
	);
	pointer-events: auto;
	text-align: left;
}
.blue-audit-content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	overscroll-behavior: contain;
}
html[data-blue-style] #page-closing .audit-figure-zone {
	position: absolute;
	top: 18vh;
	left: calc(clamp(380px, 40vw, 540px) + 4vw);
	width: calc(92vw - clamp(380px, 40vw, 540px));
	height: 64vh;
}
html[data-blue-style] #page-closing .sec-foot {
	display: none;
}
@media (max-width: 1000px) and (min-width: 761px) {
	html[data-blue-style] #bar .bar-brand {
		font-size: 9px;
		letter-spacing: 0.08em;
	}
	html[data-blue-style] #bar {
		padding-inline: 20px;
		column-gap: 12px;
	}
	html[data-blue-style] #bar .menu-item {
		font-size: 9px;
		letter-spacing: 0.08em;
	}
}
@media (max-width: 760px) {
	html[data-blue-style] .microlabel {
		display: none;
	}
	html[data-blue-style] #bar {
		column-gap: 8px;
	}
	/* Four centre items never fit one 390px row at a legible width: two rows
	   of two, each item keeping about half the viewport. Mirrors style.css's
	   own mobile base template, which this sheet overrides. */
	html[data-blue-style] #bar[data-bar-state="base"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-areas:
			"brand brand . right"
			"c1 c1 c2 c2"
			"c3 c3 c4 c4";
		row-gap: 6px;
	}
	html[data-blue-audit="true"] #bar .bar-brand {
		left: 14px;
		top: calc(10px + env(safe-area-inset-top));
	}
	html[data-blue-audit="true"] #lang-switch {
		left: auto;
		right: 14px;
		bottom: auto;
		top: calc(10px + env(safe-area-inset-top));
	}
	.blue-audit-close {
		top: calc(76px + env(safe-area-inset-top));
		right: 14px;
	}
	html[data-blue-audit="true"] .blue-gear {
		right: 66px;
	}
	html[data-blue-audit="true"] .blue-theme-toggle {
		right: 118px;
	}
	.blue-audit-panel {
		width: 100%;
		padding: 148px 24px max(24px, env(safe-area-inset-bottom));
		border: 0;
		background: transparent;
	}
	html[data-blue-style] #page-closing .audit-figure-zone {
		display: none;
	}
	html[data-blue-style]:has(#section-contact.is-active) #stage {
		visibility: hidden;
		opacity: 0;
	}
}
@media (max-height: 570px) and (min-width: 761px) {
	html[data-blue-style] #page-ia .offer-page,
	html[data-blue-style] #page-siteweb .offer-page {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		gap: 24px;
		padding: 84px 32px 116px;
		height: 100%;
		text-align: left;
	}
	html[data-blue-style] #page-ia .offer-head,
	html[data-blue-style] #page-siteweb .offer-head {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		margin: 0;
		gap: 12px;
	}
	html[data-blue-style] #section-realisations .microlabel {
		display: none;
	}
	html[data-blue-style] #section-realisations .offer-head-title {
		font-size: 28px;
	}
	html[data-blue-style] #section-realisations .offer-tagline {
		font-size: 13px;
		text-align: left;
	}
	html[data-blue-style] #page-ia .ia-figure-zone,
	html[data-blue-style] #page-siteweb .site-figure-zone {
		grid-column: 2;
		grid-row: 1;
		height: 140px;
		width: 100%;
		margin: 0;
		transform: none;
	}
	.blue-audit-panel {
		padding: 136px 28px 72px;
		width: 48%;
	}
	html[data-blue-audit="true"] #lang-switch {
		bottom: 10px;
	}
	html[data-blue-style] #page-closing .audit-figure-zone {
		left: 54%;
		width: 40%;
	}
	html[data-blue-style] #bar {
		padding-block: 4px;
	}
}

.blue-audit-content .mc-ob {
	position: relative;
	inset: auto;
	width: 100%;
	height: auto;
	min-height: 100%;
	background: transparent;
	box-shadow: none;
	padding: 0;
	animation: none;
	color: var(--blue-text);
	--mc-ob-ink: var(--blue-text);
	--mc-ob-ink-soft: var(--blue-muted);
	--mc-ob-border: var(--line);
	--mc-ob-focus: var(--blue-secondary);
}
.blue-audit-content .mc-ob::before {
	content: none;
}
.blue-audit-content .mc-ob__chrome {
	padding: 0 0 16px;
}
.blue-audit-content .mc-ob__stage {
	padding: 0;
	overflow: visible;
}
.blue-audit-content .mc-ob__panel {
	position: relative;
	opacity: 1;
	transform: none;
	transition: none;
}
/* Step sizing follows the viewport height so every step fits without scrolling. */
.blue-audit-content .mc-ob__title {
	font-family: var(--blue-display, "Gilda Display"), serif;
	font-size: clamp(26px, min(2.6vw, 4.4dvh), 40px);
	line-height: 1.15;
	/* Even lines instead of a last line carrying only the question mark. */
	text-wrap: balance;
}
.blue-audit-content .mc-ob__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(8px, 1.4dvh, 12px);
}
.blue-audit-content .mc-ob__card {
	padding: clamp(12px, 2.2dvh, 20px) 20px;
	min-height: 0;
	border-radius: var(--blue-radius);
}
.blue-audit-content .mc-ob__card-title {
	font-size: clamp(19px, 2.6dvh, 22px);
}
.blue-audit-content .mc-ob__card-tagline {
	font-size: clamp(14px, 1.9dvh, 16px);
	line-height: 1.45;
}
.blue-audit-content .mc-ob__card-note {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--blue-secondary);
}
.blue-audit-content .mc-ob__input,
.blue-audit-content .mc-ob__textarea {
	background: color-mix(in srgb, var(--blue-text) 4%, transparent);
	color: var(--blue-text);
	font-size: 17px;
}
.blue-audit-content .mc-ob__continue {
	background: var(--blue-secondary);
	color: var(--blue-bg);
	font-size: 16px;
	font-weight: 600;
	padding: 14px 24px;
}
.blue-audit-content .mc-ob__screen {
	gap: clamp(12px, 2.2dvh, 20px);
	padding-top: 0;
}
.blue-audit-content .mc-ob__error:empty {
	display: none;
}
@media (max-width: 760px) {
	.blue-audit-panel {
		padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
		padding-bottom: calc(max(24px, env(safe-area-inset-bottom)) + 20px);
		padding-inline: 18px;
	}
	.blue-audit-content .mc-ob__title {
		font-size: clamp(24px, 6.8vw, 28px);
		margin-bottom: 16px;
	}
	.blue-audit-content .mc-ob__card {
		padding: 16px 18px;
		margin-bottom: 10px;
	}
	.blue-audit-content .mc-ob__card-title {
		font-size: 20px;
	}
	.blue-audit-content .mc-ob__card-tagline {
		font-size: 14px;
		line-height: 1.45;
	}
	.blue-audit-content .mc-ob__card-note {
		font-size: 14px;
	}
}
@media (max-height: 570px) and (min-width: 761px) {
	.blue-audit-panel {
		padding-top: 88px;
		padding-bottom: 32px;
	}
}
.blue-audit-content .mc-ob__chip[aria-pressed="true"] {
	border-color: var(--mc-red);
	background: color-mix(in srgb, var(--mc-red) 6%, transparent);
}
/* Privacy and legal notice: a small line inside the logo lockup, right under
   the wordmark and starting at its first letter. Out of flow so the lockup
   never moves; blue-navigation.js pins it to the wordmark in every layout and
   it stays hidden until placed. */
html[data-blue-style] #bar .bar-legal {
	position: fixed;
	z-index: 1;
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 9px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.03em;
	white-space: nowrap;
}
html[data-blue-style] #bar .bar-legal[data-stack] {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
html[data-blue-style] #bar .bar-legal:not([style]) {
	visibility: hidden;
}
html[data-blue-style] #bar .bar-legal a {
	color: var(--blue-text);
	opacity: 0.78;
	text-decoration: none;
}
html[data-blue-style] #bar .bar-legal a:hover,
html[data-blue-style] #bar .bar-legal a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

.blue-texture {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: var(--blue-grid-opacity, 1);
	background: var(--blue-paper-pattern);
}
:root[data-blue-texture="plain"] .blue-texture {
	display: none;
}
:root[data-blue-texture="dots"] .blue-texture {
	background:
		radial-gradient(
			circle,
			color-mix(in srgb, var(--blue-text) 18%, transparent) 0.7px,
			transparent 1px
		)
		0 0 / 32px 32px;
}
:root[data-blue-texture="contours"] .blue-texture {
	background: repeating-radial-gradient(
		ellipse at 86% 115%,
		transparent 0 35px,
		color-mix(in srgb, var(--blue-text) 9%, transparent) 36px,
		transparent 37px 65px
	);
}
:root[data-blue-theme="dark"] #colibri,
:root[data-blue-theme="dark"] #colibri-night,
:root[data-blue-theme="dark"] #colibri-home {
	filter: brightness(1.2) saturate(1.15);
}
#colibri-night {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	pointer-events: none;
}
#colibri-night[hidden] {
	display: none;
}
:root[data-blue-motion="off"] #colibri-night {
	visibility: hidden;
}
/* Dark mode has no red: its one accent is the turquoise of the logo. Light mode keeps the Monaco red. */
:root[data-blue-style] {
	--blue-red: #c41230;
	--blue-secondary: #59c9bd;
	--blue-on-secondary: #031321;
}
:root[data-blue-theme="light"] {
	--blue-secondary: var(--blue-red);
	--blue-on-secondary: #fff;
}
html[data-blue-style] .hero-headline .blue-monaco,
html[data-blue-style] #bar .menu-item--primary {
	color: var(--blue-secondary) !important;
}
html[data-blue-style] #bar .menu-item--primary {
	border-color: color-mix(in srgb, var(--blue-secondary) 55%, transparent);
}
html[data-blue-style] .blue-wordmark {
	letter-spacing: var(--blue-wordmark-tracking, 6px);
	/* Cancels the spacing after the last letter, so the word centres on its letters. */
	margin-right: calc(-1 * var(--blue-wordmark-tracking, 6px));
}
html[data-blue-style] #bar {
	min-height: 90px;
	padding-inline: 28px;
	column-gap: clamp(14px, 2vw, 32px);
}
html[data-blue-style] #bar .menu-item {
	font-size: clamp(12px, 1vw, 15px);
	min-height: 52px;
	letter-spacing: 0;
}
html[data-blue-style] #bar button.menu-item,
html[data-blue-style] #bar button.menu-item:hover,
html[data-blue-style] #bar button.menu-item:focus-visible {
	border: 0;
	border-radius: 0;
	background: transparent;
	text-transform: none;
}
html[data-blue-style] #bar button.menu-item::after {
	display: none;
}
html[data-blue-style] #bar button.menu-item .menu-item-label {
	position: relative;
}
html[data-blue-style] #bar button.menu-item .menu-item-label::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transition: transform 180ms ease;
}
html[data-blue-style]
	#bar
	button.menu-item:focus-visible
	.menu-item-label::after,
html[data-blue-style]
	#bar
	button.menu-item[aria-expanded="true"]
	.menu-item-label::after {
	transform: scaleX(1);
}
@media (hover: hover) {
	html[data-blue-style] #bar button.menu-item:hover .menu-item-label::after {
		transform: scaleX(1);
	}
}
html[data-blue-style] #bar .bar-brand {
	font-size: 13px;
}
html[data-blue-style] #bar #lang-switch {
	font-size: 13px;
}
html[data-blue-style] #bar .blue-brand-icon {
	width: 32px;
	height: 32px;
	flex-basis: 32px;
}
#blue-section-menu {
	position: absolute;
	inset: auto 0 100%;
	min-height: 76px;
	padding: 12px 0;
	border: 0;
	background: transparent;
}
#blue-section-menu[hidden],
.blue-nav-line[hidden],
#blue-section-menu > [hidden] {
	display: none !important;
}
#blue-section-menu > div:not([hidden]) {
	display: flex;
	width: max-content;
	position: relative;
	transform: translateX(-50%);
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
}
html[data-blue-style] #blue-section-menu button {
	position: relative;
	flex: 0 1 auto;
	min-width: 0;
	font:
		500 20px / 1.35 "Hanken Grotesk",
		sans-serif;
	letter-spacing: 0.01em;
	text-transform: none;
	padding: 12px 18px;
	min-height: 48px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--blue-muted);
	cursor: pointer;
}
html[data-blue-style] #blue-section-menu button + button::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 20px;
	transform: translateY(-50%);
	background: linear-gradient(
		transparent,
		color-mix(in srgb, var(--blue-text) 36%, transparent) 25% 75%,
		transparent
	);
	pointer-events: none;
}
html[data-blue-style] #blue-section-menu button[data-partner="romain"]::before {
	display: none !important;
	content: none !important;
}
html[data-blue-style] #blue-section-menu button[aria-pressed="true"],
html[data-blue-style] #blue-section-menu button:hover {
	color: var(--blue-secondary);
}
#blue-section-menu button:focus-visible {
	outline: 1px solid var(--blue-secondary);
	outline-offset: -3px;
}
.blue-nav-line {
	position: absolute;
	left: 0;
	top: -1px;
	width: 100%;
	height: 16px;
	color: color-mix(in srgb, var(--blue-text) 42%, transparent);
	pointer-events: none;
	overflow: visible;
}
html[data-blue-menu="realisations"] #section-realisations .stage-inner {
	padding-bottom: 190px;
}
html[data-blue-audit="true"] #blue-section-menu,
html[data-blue-audit="true"] .blue-nav-line {
	display: none !important;
}
html[data-blue-audit="true"] #bar {
	min-height: 0;
}
/* ── Desktop Typography Scaling ── */
@media (min-width: 761px) {
	html[data-blue-style] .stage-title,
	html[data-blue-style] .offer-head-title,
	html[data-blue-style] .reals-hub-title,
	html[data-blue-style] .display:not(.hero-headline) {
		font-size: clamp(2rem, 3vw, 3rem) !important;
		line-height: 1.15 !important;
	}
	html[data-blue-style] .offer-tagline,
	html[data-blue-style] .reals-hub-body {
		font-size: clamp(1.15rem, 1.25vw, 1.4rem) !important;
		line-height: 1.6 !important;
		max-width: 56ch !important;
	}
	html[data-blue-style] .microlabel {
		font-size: 13px !important;
		letter-spacing: 0.28em !important;
	}
}
@media (min-width: 761px) and (max-width: 1100px) {
	html[data-blue-style] #bar {
		padding-inline: 18px;
		column-gap: 12px;
	}
	html[data-blue-style] #bar .bar-brand {
		font-size: 11px;
		letter-spacing: 0.06em;
	}
	html[data-blue-style] #bar .menu-item {
		font-size: 12px;
		letter-spacing: 0.03em;
	}
	html[data-blue-style] #bar #lang-switch {
		font-size: 11px;
	}
}
@media (max-width: 760px) {
	html[data-blue-style] #bar {
		padding-inline: 14px;
		gap: 8px;
		min-height: 120px;
	}
	html[data-blue-style] #bar .menu-item {
		font-size: 13px;
		min-height: 48px;
		padding: 8px 8px;
		letter-spacing: 0.025em;
	}
	html[data-blue-style] #bar .bar-brand {
		font-size: 12px;
	}
	html[data-blue-style] #bar #lang-switch {
		font-size: 12px;
	}
	html[data-blue-style] #bar .blue-brand-icon {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
		margin-right: 5px;
	}
	html[data-blue-audit="true"] #bar {
		min-height: 0;
	}
}
@media (max-height: 570px) and (min-width: 761px) {
	html[data-blue-style] #bar {
		min-height: 62px;
	}
	#blue-section-menu {
		min-height: 58px;
		padding-block: 4px;
	}
	html[data-blue-style] #blue-section-menu button {
		min-height: 44px;
		font-size: 14px;
	}
}
:root[data-blue-style] #deck-shell,
:root[data-blue-style] #bar,
:root[data-blue-style] .blue-gear,
:root[data-blue-style] .blue-theme-toggle {
	transition: opacity 240ms ease;
}

html:not([data-company-menu]) [data-flag="companyMenu"],
[data-flag="companyMenu"],
button[data-partner="company"] {
	display: none !important;
}

.mob-copy {
	display: none;
}
@media (max-width: 760px) {
	.desk-copy {
		display: none !important;
	}
	.mob-copy {
		display: inline !important;
	}
}

@media (max-width: 760px) {
	/* ── Submenu Bar: Single row, larger touch targets, perfect dividers ── */
	#blue-section-menu {
		min-height: 50px !important;
		padding: 4px 0 !important;
	}
	#blue-section-menu > div:not([hidden]) {
		display: flex;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: center;
		width: max-content;
		max-width: calc(100vw - 16px) !important;
	}
	html[data-blue-style] #blue-section-menu button {
		font-size: 16px !important;
		line-height: 1.2 !important;
		padding: 6px !important;
		min-height: 44px !important;
		height: 44px !important;
		white-space: nowrap !important;
		flex: 0 0 auto !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		font-weight: 600 !important;
	}
	html[data-blue-style] #blue-section-menu button + button::before {
		height: 18px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
	}
	html[data-blue-style]
		#blue-section-menu
		button[data-partner="romain"]::before {
		display: none !important;
		content: none !important;
	}
	[data-flag="companyMenu"],
	button[data-partner="company"] {
		display: none !important;
	}
}

:root[data-blue-style] {
	--content-frame-width: 78rem;
	--content-frame-top: 72px;
	--content-frame-bottom: 190px;
	--content-copy-width: 27rem;
	--content-column-gap: clamp(4rem, 7vw, 7rem);
	--content-visual-height: min(52dvh, 30rem);
	--content-figure-width: 31.5rem;
	--content-zone-top: 62px;
	--content-zone-bottom: 90px;
	--content-rail-clear: 72px;
}

:root[data-blue-style][data-blue-theme="dark"] {
	--blue-muted: #e6f0f7 !important;
	--ink-soft: var(--blue-muted) !important;
	--ink-mute: var(--blue-muted) !important;
}

/* Every internal page uses this frame. The landing page keeps its own hero. */
html[data-blue-style] #section-realisations .stage-inner,
html[data-blue-style] #section-contact .stage-inner {
	width: min(100%, var(--content-frame-width));
	max-width: var(--content-frame-width);
	height: 100%;
	max-height: none;
	margin-inline: auto;
	padding: var(--content-frame-top) var(--grid-margin)
		var(--content-frame-bottom);
	box-sizing: border-box;
}

/* Two-column chapters: the text column and the figure box are one group spread
   evenly across the viewport, so the left margin, the middle gap and the right
   margin are one length, and both columns center on the free zone between the
   top controls and the bottom bar. --content-gutter is that length; the figure
   gives way before the gutter gets narrower than the rail. */
@media (min-width: 900px) {
	html[data-blue-style] #section-services,
	html[data-blue-style] #section-contact,
	:root:has(#section-services.is-active) #stage {
		--content-frame-width: 100%;
		--content-frame-top: var(--content-zone-top);
		--content-frame-bottom: var(--content-zone-bottom);
		--grid-margin: 0px;
		--content-figure-fit: min(
			var(--content-figure-width),
			calc(100vw - var(--content-copy-width) - 3 * var(--content-rail-clear))
		);
		--content-gutter: calc(
			(100vw - var(--content-copy-width) - var(--content-figure-fit)) /
			3
		);
	}
	html[data-blue-style] #section-services .split-page,
	html[data-blue-style] #page-closing .booking-panel {
		display: grid !important;
		grid-template-columns: var(--content-copy-width) var(--content-figure-fit);
		justify-content: space-evenly;
		column-gap: 0;
		align-items: center;
		justify-items: stretch;
		text-align: left;
	}
}

@media (min-width: 900px) {
	html[data-blue-style] #page-siteweb .stage-inner,
	html[data-blue-style] #page-ia .stage-inner,
	html[data-blue-style] #page-closing .offer-page,
	html[data-blue-style] #page-realisations-hub .reals-hub-figure {
		display: grid !important;
		grid-template-columns: minmax(18rem, 0.8fr) minmax(30rem, 1.2fr);
		column-gap: var(--content-column-gap);
		align-items: center;
		justify-items: stretch;
		text-align: left;
	}

	/* Réalisations: text and visual are peers on one centered grid row. */
	html[data-blue-style] #page-siteweb .stage-inner,
	html[data-blue-style] #page-ia .stage-inner {
		grid-template-rows: 1fr !important;
	}
	html[data-blue-style] #page-siteweb .offer-head,
	html[data-blue-style] #page-ia .offer-head {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		width: 100%;
		max-width: var(--content-copy-width);
		margin: 0;
	}
	html[data-blue-style] #page-siteweb #work-carousel,
	html[data-blue-style] #page-ia .ia-figure-zone {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		width: 100%;
		margin: 0;
	}
	html[data-blue-style] #page-siteweb .workstage {
		height: var(--content-visual-height);
	}
	html[data-blue-style] #page-ia .ia-figure-zone {
		height: var(--content-visual-height);
		aspect-ratio: auto;
		display: block !important;
	}

	html[data-blue-style] #page-realisations-hub .stage-inner {
		display: block !important;
	}
	html[data-blue-style] #page-realisations-hub .reals-hub-figure {
		grid-template-rows: 1fr !important;
		height: 100%;
	}
	html[data-blue-style] #page-realisations-hub .offer-head {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		width: 100%;
		max-width: var(--content-copy-width);
		margin: 0;
	}
	html[data-blue-style] #page-realisations-hub .reals-hub-figure-zone {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		justify-self: stretch;
		width: 100%;
		height: var(--content-visual-height);
		margin: 0;
		aspect-ratio: auto;
		display: block !important;
	}
	html[data-blue-style] #page-realisations-hub .reals-arrow {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	/* Audit uses the same frame instead of a left-edge drawer. The audit form
	   and call booking stack in the copy column; the page scrolls only when a
	   tall audit step still overflows a short window. */
	html[data-blue-style] #page-closing .offer-page {
		grid-template-rows: auto auto !important;
		align-content: safe center;
		row-gap: clamp(1rem, 3dvh, 2rem);
		max-width: var(--content-frame-width) !important;
		padding: var(--content-frame-top) var(--grid-margin)
			var(--content-frame-bottom) !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
	/* The panel grows with the step; a step taller than its row scrolls inside. */
	.blue-audit-panel {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		width: 100% !important;
		height: auto !important;
		max-height: 100% !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}
	html[data-blue-style] #page-closing .audit-figure-zone {
		position: static !important;
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		width: 100% !important;
		height: var(--content-visual-height) !important;
		margin: 0 !important;
		display: block !important;
	}

	/* The canvas is only visible inside the dedicated visual column. The mask
	   fades the particles out before the clip, so the column edge never shows
	   as a cut line. Both boundaries stay where the layout put them. */
	:root:has(#section-studio.is-active) #stage,
	:root:has(#section-realisations.is-active #page-ia.is-current) #stage,
	:root:has(#section-realisations.is-active #page-realisations-hub.is-current)
		#stage,
	:root:has(#section-contact.is-active) #stage {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		clip-path: inset(0 0 0 42%);
		-webkit-mask-image: linear-gradient(to right, transparent 42%, #000 50%);
		mask-image: linear-gradient(to right, transparent 42%, #000 50%);
	}
}

/* Site-web is deliberately media-only. */
:root:has(#section-realisations.is-active #page-siteweb.is-current) #stage {
	opacity: 0 !important;
	pointer-events: none !important;
}
#section-realisations .site-figure-zone {
	display: none !important;
}

/* Work previews: two clear presentations on desktop. */
@media (min-width: 761px) {
	#page-siteweb .workstage .wk {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.45s ease,
			visibility 0.45s ease;
	}
	#page-siteweb .workstage .wk.on {
		opacity: 1;
		visibility: visible;
	}
	#page-siteweb .duoscreens {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 3rem);
		align-items: center;
		height: 100%;
	}
	#page-siteweb .duoscreens .screen.a,
	#page-siteweb .duoscreens .screen.b {
		position: static;
		width: 100%;
		background: transparent;
	}
	#page-siteweb .duoscreens .screen.b .vp {
		box-shadow: none;
	}
}

@media (max-width: 899px) {
	:root[data-blue-style] {
		--content-frame-top: calc(env(safe-area-inset-top, 0px) + 76px);
		--content-frame-bottom: calc(env(safe-area-inset-bottom, 0px) + 182px);
		--content-copy-width: 22rem;
		--content-visual-height: clamp(8.5rem, 21dvh, 11rem);
	}
	html[data-blue-style] #section-realisations .stage-inner,
	html[data-blue-style] #section-contact .stage-inner {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: clamp(1rem, 2.5dvh, 1.4rem);
		padding: var(--content-frame-top) 1.25rem var(--content-frame-bottom) !important;
		text-align: center;
	}
	html[data-blue-style] #section-realisations .offer-head,
	html[data-blue-style] #section-contact .blue-audit-panel {
		width: 100%;
		max-width: var(--content-copy-width) !important;
		margin: 0 auto !important;
		text-align: center !important;
	}
	html[data-blue-style] #section-realisations .offer-head {
		order: 1;
	}
	html[data-blue-style] #page-ia .ia-figure-zone,
	html[data-blue-style] #page-realisations-hub .reals-hub-figure-zone {
		order: 2;
		display: block !important;
		width: min(100%, 22rem) !important;
		height: var(--content-visual-height) !important;
		flex: 0 0 var(--content-visual-height) !important;
		margin: 0 auto !important;
		aspect-ratio: auto !important;
	}
	html[data-blue-style] #page-siteweb #work-carousel {
		order: 2;
		width: min(100%, 22rem);
		margin: 0 auto;
	}
	html[data-blue-style] #page-siteweb .workstage {
		height: clamp(10rem, 25dvh, 12rem) !important;
	}

	/* One presentation at a time on touch widths. */
	#page-siteweb .workstage .wk {
		position: static !important;
		display: none !important;
		height: 100%;
	}
	#page-siteweb .workstage .wk.on {
		display: block !important;
	}
	#page-siteweb .duoscreens {
		display: block !important;
		height: 100%;
	}
	#page-siteweb .duoscreens .screen {
		display: none !important;
		position: static !important;
		width: 100% !important;
		margin: 0 !important;
		background: transparent !important;
	}
	#page-siteweb .duoscreens .screen.a,
	#page-siteweb .wk.mobile-show-secondary .duoscreens .screen.b {
		display: block !important;
	}
	#page-siteweb .wk.mobile-show-secondary .duoscreens .screen.a {
		display: none !important;
	}
	#page-siteweb .screen .vp {
		width: 100%;
		max-height: 9rem !important;
		aspect-ratio: 16 / 8.7 !important;
	}
	#page-siteweb .screen .plate-tag {
		margin-top: 0.55rem !important;
	}

	/* Mobile figures sit below the copy; the mask feathers both band edges so
	   the protected zone never reads as a cut, and the clip still guarantees it. */
	:root:has(#section-studio.is-active) #stage,
	:root:has(#section-realisations.is-active #page-ia.is-current) #stage,
	:root:has(#section-realisations.is-active #page-realisations-hub.is-current)
		#stage {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		clip-path: inset(41% 0 16% 0);
		-webkit-mask-image: linear-gradient(
			to bottom,
			transparent 41%,
			#000 47%,
			#000 78%,
			transparent 84%
		);
		mask-image: linear-gradient(
			to bottom,
			transparent 41%,
			#000 47%,
			#000 78%,
			transparent 84%
		);
	}

	/* Audit remains readable in one column on mobile. */
	html[data-blue-style] #page-closing .offer-page {
		display: flex !important;
		max-width: var(--content-frame-width) !important;
		padding: var(--content-frame-top) 1.25rem
			calc(env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
	}
	.blue-audit-panel {
		height: 100% !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}
	html[data-blue-style] #page-closing .audit-figure-zone {
		display: none !important;
	}
}

@media (max-width: 360px) {
	#blue-section-menu > div:not([hidden]) {
		width: calc(100vw - 12px);
	}
	html[data-blue-style] #blue-section-menu button {
		flex: 1 1 0 !important;
		height: auto !important;
		min-height: 44px !important;
		padding: 5px 4px !important;
		font-size: 12px !important;
		line-height: 1.08 !important;
		white-space: normal !important;
	}
}

/* Short landscape screens keep the audit chrome visible while giving the
   question panel the available height. Longer questions scroll inside the
   dedicated audit content region instead of being hidden behind the footer. */
@media (max-height: 570px) and (min-width: 761px) {
	:root[data-blue-style] {
		--content-frame-top: calc(env(safe-area-inset-top, 0px) + 64px);
		--content-frame-bottom: calc(env(safe-area-inset-bottom, 0px) + 36px);
	}
	html[data-blue-style] #page-closing .offer-page {
		padding: var(--content-frame-top) 1.25rem var(--content-frame-bottom) !important;
	}
	html[data-blue-style] #section-contact .blue-audit-panel {
		max-width: 28rem !important;
	}
}

html[data-blue-style][data-scroll-site] #bar,
html[data-blue-style][data-scroll-site] #bar[data-bar-state] {
	grid-template-columns: 1fr auto auto auto auto 1fr;
	grid-template-areas: "brand c1 c2 c3 trust right";
	gap: clamp(12px, 1.6vw, 28px);
}
html[data-blue-style][data-scroll-site]
	#bar[data-bar-state]
	[data-menu="services"] {
	display: inline-flex;
	grid-area: c2;
}
html[data-blue-style][data-scroll-site]
	#bar[data-bar-state]
	[data-menu="realisations"] {
	display: inline-flex;
	grid-area: c3;
}
html[data-blue-style][data-scroll-site]
	#bar[data-bar-state]
	[data-menu="contact"] {
	grid-area: right;
	justify-self: end;
}
.scroll-trust {
	grid-area: trust;
	border: 0;
	background: none;
	color: var(--blue-text);
	font: inherit;
	cursor: pointer;
	padding: 12px 0;
	white-space: nowrap;
}
.scroll-trust:hover,
.scroll-trust[aria-current="true"] {
	text-decoration: underline;
	text-underline-offset: 6px;
}
html[data-scroll-site] .scroll-utilities {
	position: fixed;
	right: 24px;
	top: 18px;
	display: flex;
	align-items: center;
	gap: 22px;
	z-index: 1001;
	height: 44px;
}
/* The contact chapter's close button takes the top-right corner. */
html[data-scroll-site][data-blue-audit="true"] .scroll-utilities {
	right: 80px;
}
html[data-scroll-site] .scroll-articles-link {
	color: var(--blue-text);
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.03em;
	padding: 12px 0;
}
.scroll-articles-link:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}
html[data-blue-style][data-scroll-site] .scroll-utilities #lang-switch {
	position: static;
	display: flex;
	grid-area: auto;
	font-size: 12px;
}
html[data-scroll-site] .scroll-utilities .blue-theme-toggle {
	position: static !important;
	transform: none !important;
	margin: 0 !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
}
html[data-scroll-site] #reals-hub-prev,
html[data-scroll-site] #reals-hub-next,
html[data-scroll-site] #reals-hub-back,
html[data-scroll-site] #blue-section-menu,
html[data-scroll-site] .blue-nav-line {
	display: none !important;
}
html[data-blue-style][data-scroll-site] #reals-hub-body {
	font-size: clamp(16px, 1.3vw, 20px);
	line-height: 1.65;
	max-width: 36ch;
}
html[data-blue-style][data-scroll-site] #page-realisations-hub .offer-head,
html[data-blue-style][data-scroll-site]
	#page-realisations-hub
	.offer-head-title,
html[data-blue-style][data-scroll-site] #reals-hub-body {
	text-align: left !important;
	align-items: flex-start !important;
}
.scroll-count {
	white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
	html[data-scroll-site] * {
		scroll-behavior: auto !important;
	}
	.scroll-progress,
	.scroll-cursor,
	.scroll-thumb {
		transition: none !important;
	}
}

.scroll-mobile-label {
	display: none;
}
/* Software WebGL draws no particle figure: paint the source image the
   particles are sampled from, as a luminance mask in the text colour. */
html[data-scroll-site][data-blue-render="software"] .services-figure-zone,
html[data-scroll-site][data-blue-render="software"] #ia-figure-zone {
	--soft-figure: url("brain-left.webp");
	background: var(--blue-text);
	mask: var(--soft-figure) center / contain no-repeat luminance;
	opacity: 0.85;
}
html[data-scroll-site][data-blue-render="software"] #ia-figure-zone {
	--soft-figure: url("figure-ia.webp");
}
html[data-blue-render="software"] #services-transition-ia-figure-zone {
	--soft-figure: url("fig-svc-transition-ia.svg");
}
html[data-blue-render="software"] #services-developpement-figure-zone {
	--soft-figure: url("fig-svc-dev-service.webp");
}
html[data-blue-render="software"] #services-croissance-figure-zone {
	--soft-figure: url("fig-svc-croissance.webp");
}
/* References: the static logo grid stands in for the particle logo cycle. */
@media (min-width: 901px) and (min-height: 571px) {
	html[data-scroll-site][data-blue-render="software"] #reals-hub-logostrip {
		display: grid;
		position: absolute;
		top: 50%;
		right: 6vw;
		width: min(46vw, 640px);
		transform: translateY(-50%);
		grid-template-columns: repeat(4, 1fr);
		gap: 8px 16px;
		border-top: 0;
	}
	html[data-scroll-site][data-blue-render="software"]
		#reals-hub-logostrip
		.logo-strip-item {
		height: clamp(64px, 11dvh, 110px);
		opacity: 1;
	}
	html[data-scroll-site][data-blue-render="software"] #reals-hub-logostrip img {
		height: 100%;
		max-width: none;
		border-radius: 6px;
		filter: invert(1) grayscale(1);
	}
}
/* The bar item of the chapter on screen keeps its hover hairline. */
html[data-blue-style][data-scroll-site]
	#bar
	button.menu-item[aria-current="true"]
	.menu-item-label::after {
	transform: scaleX(1);
}

@media (max-width: 900px), (max-height: 570px) {
	html[data-scroll-site] {
		--scroll-header: calc(64px + env(safe-area-inset-top, 0px));
		--scroll-footer: calc(72px + env(safe-area-inset-bottom, 0px));
		--scroll-controls: 56px;
		--scroll-gutter: clamp(18px, 4vw, 28px);
	}
	html[data-blue-style][data-scroll-site] #bar,
	html[data-blue-style][data-scroll-site] #bar[data-bar-state] {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-template-areas: "c1 c2 c3 trust right";
		gap: 4px;
		height: var(--scroll-footer);
		min-height: var(--scroll-footer);
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
		background: var(--blue-night-bg, var(--blue-bg));
		border-top: 1px solid var(--line);
		box-sizing: border-box;
	}
	html[data-blue-style][data-scroll-site] #bar::before {
		content: "";
		position: fixed;
		inset: 0 0 auto;
		height: var(--scroll-header);
		background: var(--blue-night-bg, var(--blue-bg));
		border-bottom: 1px solid var(--line);
		pointer-events: none;
	}
	html[data-blue-style][data-scroll-site] #bar .bar-brand {
		position: fixed;
		left: var(--scroll-gutter);
		top: calc(10px + env(safe-area-inset-top, 0px));
		min-height: 44px;
		font-size: 14px;
		letter-spacing: 0.08em;
		gap: 4px;
	}
	html[data-scroll-site] .scroll-utilities {
		top: calc(10px + env(safe-area-inset-top, 0px));
		/* The theme icon, 16px inside its button, ends on the gutter like the offer button. */
		right: calc(var(--scroll-gutter) - 16px);
		gap: 4px;
		align-items: flex-start;
	}
	html[data-scroll-site] .scroll-articles-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 6px;
	}
	html[data-blue-style][data-scroll-site] #bar .menu-item,
	html[data-blue-style][data-scroll-site] #bar .scroll-trust {
		width: 100%;
		min-width: 0;
		min-height: 48px;
		margin: 0;
		padding: 8px 4px;
		border: 0;
		border-radius: 6px;
		background: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		font: 500 14px / 1.2 var(--blue-body);
		letter-spacing: 0;
		text-align: center;
		text-transform: none;
		white-space: normal;
		color: var(--blue-text);
	}
	html[data-blue-style][data-scroll-site]
		#bar
		[data-mobile-label]
		> :not(.scroll-mobile-label) {
		display: none;
	}
	html[data-blue-style][data-scroll-site] #bar .scroll-mobile-label {
		display: block;
		font-size: 14px;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: none;
		text-wrap: balance;
	}
	html[data-blue-style][data-scroll-site] #bar [data-menu="contact"] {
		background: color-mix(in srgb, var(--blue-text) 8%, transparent);
	}
	/* The tab of the chapter on screen: a rounded pill tinted with the text colour and a hairline, quieter than the offer button in both themes. */
	html[data-blue-style][data-scroll-site]
		#bar
		.menu-item:not(.menu-item--primary)[aria-current="true"] {
		border-radius: 999px;
		background: color-mix(in srgb, var(--blue-text) 16%, transparent);
		box-shadow: inset 0 0 0 1px
			color-mix(in srgb, var(--blue-text) 30%, transparent);
	}
	html[data-scroll-site] .scroll-vertical {
		left: 16px;
		top: calc(
			var(--scroll-header) +
			(
				100dvh -
				var(--scroll-header) -
				var(--scroll-footer) -
				var(--scroll-controls)
			) /
			2
		);
		/* 9 steps of 44px: hit areas touch without overlapping. */
		height: 396px;
	}
	/* The 44px hit area starts at the screen edge: the dot stays on the rail. */
	html[data-scroll-site] .scroll-step {
		width: 44px;
		height: 44px;
	}
	html[data-scroll-site] .scroll-step-dot {
		left: 16px;
	}
	html[data-scroll-site] .scroll-step-label {
		display: none;
	}
	html[data-blue-style][data-scroll-site] .scroll-horizontal {
		left: 50%;
		bottom: var(--scroll-footer);
		width: min(220px, calc(100vw - 88px));
		height: var(--scroll-controls);
		padding: 6px 12px;
		box-sizing: border-box;
		background: var(--blue-night-bg, var(--blue-bg));
	}
	html[data-scroll-site] .scroll-track {
		display: none;
	}
	html[data-scroll-site] .scroll-arrows {
		gap: 24px;
		margin: 0;
	}
	html[data-scroll-site] .scroll-arrows button {
		width: 44px;
		height: 44px;
	}
	html[data-scroll-site] .scroll-count {
		font-size: 12px;
		letter-spacing: 0.06em;
	}
	html[data-blue-style][data-scroll-site] #section-realisations .stage-inner,
	html[data-blue-style][data-scroll-site] #section-contact .stage-inner,
	html[data-blue-style][data-scroll-site] .hero-inner {
		position: absolute;
		inset: var(--scroll-header) 0
			calc(var(--scroll-footer) + var(--scroll-controls));
		width: 100%;
		max-width: none;
		height: auto !important;
		max-height: none !important;
		padding: 24px var(--scroll-gutter) 24px 44px !important;
		margin: 0;
		display: flex !important;
		flex-direction: column !important;
		justify-content: safe center !important;
		align-items: center !important;
		gap: 24px !important;
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		scrollbar-width: none;
		box-sizing: border-box;
	}
	html[data-blue-style][data-scroll-site] .stage-inner > * {
		flex-shrink: 0;
		min-width: 0;
	}
	html[data-blue-style][data-scroll-site] .hero-inner {
		bottom: var(--scroll-footer);
		padding-inline: 36px !important;
		padding-bottom: calc(
			24px +
			var(--blue-wordmark-y, 0px) +
			var(--blue-description-y, 0px)
		) !important;
		gap: 22px !important;
	}
	html[data-blue-style][data-scroll-site] #hero-wordmark-zone {
		width: min(100%, calc(88vw * var(--blue-wordmark-size, 1))) !important;
		height: clamp(96px, 21dvh, 200px) !important;
		flex-shrink: 0;
		margin: 0 !important;
	}
	html[data-blue-style][data-scroll-site] .hero-headline {
		font-size: clamp(20px, 5.9vw, 28px) !important;
		line-height: 1.25 !important;
	}
	html[data-blue-style][data-scroll-site] .hero-sub {
		font-size: clamp(18px, 4.9vw, 21px) !important;
		color: color-mix(
			in srgb,
			var(--blue-text) 80%,
			var(--blue-muted)
		) !important;
	}
	/* Russian keeps its long tagline small: its description follows it down. */
	html[data-blue-style][data-scroll-site][lang="ru"] .hero-sub {
		font-size: 15px !important;
		color: var(--blue-muted) !important;
	}
	html[data-blue-style][data-scroll-site] #section-realisations .offer-head {
		width: 100%;
		max-width: 34rem !important;
		gap: 14px !important;
		margin: 0 !important;
		align-items: flex-start !important;
		text-align: left !important;
	}
	html[data-blue-style][data-scroll-site]
		#section-realisations
		.offer-head-title {
		font-size: clamp(28px, 7.4vw, 38px) !important;
		line-height: 1.12 !important;
		text-align: left !important;
	}
	html[data-blue-style][data-scroll-site] #section-realisations .offer-tagline,
	html[data-blue-style][data-scroll-site] #reals-hub-body {
		font-size: 17px !important;
		line-height: 1.55 !important;
		text-align: left !important;
		max-width: 100% !important;
		margin: 0 !important;
	}
	/* Same column as the bio above it, not the narrower shared copy width. */
	html[data-blue-style][data-scroll-site]
		#page-realisations-hub
		.reals-hub-figure {
		display: flex !important;
		flex-direction: column;
		gap: 24px;
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
	}
	html[data-blue-style][data-scroll-site] #page-ia .ia-figure-zone,
	html[data-blue-style][data-scroll-site]
		#page-realisations-hub
		.reals-hub-figure-zone {
		display: block !important;
		width: min(100%, 34rem) !important;
		height: clamp(100px, 18dvh, 160px) !important;
		min-height: 100px;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb #work-carousel {
		width: 100% !important;
		max-width: 34rem;
		height: auto !important;
		margin: 0 !important;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb .screen .vp {
		max-height: none !important;
		aspect-ratio: 16 / 10 !important;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb .screen .plate-tag {
		font-size: 12px !important;
		letter-spacing: 0;
		gap: 12px;
		flex-wrap: wrap;
	}
	html[data-blue-style][data-scroll-site] #section-contact .stage-inner {
		bottom: max(20px, env(safe-area-inset-bottom, 0px));
		padding-top: 20px !important;
		padding-right: 24px !important;
	}
	/* Contact hides the nav: drop its band and rule too. */
	html[data-blue-style][data-scroll-site][data-blue-audit="true"] #bar,
	html[data-blue-style][data-scroll-site][data-blue-audit="true"]
		#bar[data-bar-state] {
		height: 0;
		min-height: 0;
		padding: 0;
		border: 0;
	}
	html[data-scroll-site][data-blue-audit="true"] .scroll-trust {
		display: none !important;
	}
	html[data-scroll-site][data-blue-audit="true"] .scroll-utilities {
		right: 72px;
	}
	html[data-scroll-site] .blue-audit-close {
		top: calc(10px + env(safe-area-inset-top, 0px));
		right: 14px;
	}
	html[data-blue-style][data-scroll-site] #section-contact .blue-audit-panel {
		width: 100% !important;
		max-width: 34rem !important;
		height: 100% !important;
		padding: 0 !important;
		text-align: left !important;
	}
	html[data-scroll-site] .blue-editor-overlay,
	html[data-scroll-site] .blue-dialog {
		max-width: calc(100vw - 24px);
		max-height: calc(100dvh - 24px);
		overflow: auto;
	}
}

@media (max-height: 570px) and (min-width: 560px) {
	html[data-scroll-site] {
		--scroll-header: calc(48px + env(safe-area-inset-top, 0px));
		--scroll-footer: calc(52px + env(safe-area-inset-bottom, 0px));
		/* The pager sits in the bar's right end, so it reserves no height. */
		--scroll-controls: 0px;
	}
	html[data-blue-style][data-scroll-site] #bar .bar-brand,
	html[data-scroll-site] .scroll-utilities {
		top: calc(2px + env(safe-area-inset-top, 0px));
	}
	html[data-blue-style][data-scroll-site] #bar,
	html[data-blue-style][data-scroll-site] #bar[data-bar-state] {
		padding: 4px 236px calc(4px + env(safe-area-inset-bottom, 0px)) 10px;
	}
	html[data-blue-style][data-scroll-site] #bar .menu-item,
	html[data-blue-style][data-scroll-site] #bar .scroll-trust {
		min-height: 44px;
		padding-block: 4px;
	}
	html[data-blue-style][data-scroll-site] .scroll-horizontal {
		left: auto;
		right: max(8px, env(safe-area-inset-right, 0px));
		bottom: env(safe-area-inset-bottom, 0px);
		transform: none;
		width: 220px;
		height: 52px;
		padding: 4px 0;
		background: transparent;
		z-index: 11002;
	}
	html[data-blue-style][data-scroll-site] #section-realisations .stage-inner,
	html[data-blue-style][data-scroll-site] #section-contact .stage-inner {
		gap: 12px !important;
		padding: 12px max(var(--scroll-gutter), env(safe-area-inset-right, 0px))
			12px max(var(--scroll-gutter), env(safe-area-inset-left, 0px)) !important;
	}
	html[data-blue-style][data-scroll-site]
		#section-realisations
		.offer-head-title {
		font-size: 26px !important;
	}
	html[data-blue-style][data-scroll-site] #section-realisations .offer-tagline,
	html[data-blue-style][data-scroll-site] #reals-hub-body {
		font-size: 15px !important;
		line-height: 1.45 !important;
	}
	/* Demo column scrolls inside its own half; the title column stays put. */
	html[data-blue-style][data-scroll-site]
		#section-realisations
		#page-ia
		.stage-inner {
		grid-template-rows: minmax(0, 1fr) !important;
		align-items: start !important;
		overflow: hidden;
	}
	html[data-scroll-site] #page-ia .scroll-demo {
		max-height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	html[data-scroll-site] #page-ia .scroll-demo-graph {
		height: 120px;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb .stage-inner,
	html[data-blue-style][data-scroll-site] #page-ia .stage-inner,
	html[data-blue-style][data-scroll-site]
		#page-realisations-hub
		.reals-hub-figure {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		align-items: center !important;
		gap: 28px !important;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb .screen .vp,
	html[data-scroll-site] #page-siteweb .scroll-work-frame .vp {
		aspect-ratio: 16 / 6.5 !important;
	}
	html[data-blue-style][data-scroll-site] .hero-inner {
		gap: 12px !important;
		padding-block: 12px !important;
	}
	html[data-blue-style][data-scroll-site] #hero-wordmark-zone {
		height: 100px !important;
		width: min(70vw, 500px) !important;
	}
	html[data-scroll-site] .scroll-arrows button {
		height: 44px;
	}
}

@media (max-width: 360px) {
	html[data-scroll-site] #bar .bar-brand-sep,
	html[data-scroll-site] #bar .bar-word:last-child {
		display: none;
	}
	/* The close button leaves no room for Articles beside the wordmark. */
	html[data-scroll-site][data-blue-audit="true"] .scroll-articles-link {
		display: none;
	}
}
@media (max-width: 440px) {
	html[data-scroll-site][data-blue-audit="true"] #bar .bar-brand-sep,
	html[data-scroll-site][data-blue-audit="true"] #bar .bar-word:last-child {
		display: none;
	}
}
@media (max-width: 760px) {
	/* The open language list drops down from the button, inside the viewport. */
	html[data-blue-style][data-scroll-site] .scroll-utilities #lang-switch {
		flex-direction: column;
		align-self: flex-start;
		margin-left: 8px;
	}
	/* Two languages (pragma-serve.com) sit side by side, as on computers. */
	html[data-blue-style][data-scroll-site]
		.scroll-utilities
		#lang-switch:not(:has(a:nth-of-type(3))) {
		flex-direction: row;
		align-self: center;
	}
	html[data-blue-style][data-scroll-site]
		.scroll-utilities
		#lang-switch:not(:has(a:nth-of-type(3)))
		a {
		order: 0;
		font-size: 13px;
	}
	html[data-blue-style][data-scroll-site]
		.scroll-utilities
		#lang-switch:not(:has(a:nth-of-type(3)))
		a[aria-current="false"] {
		font-weight: 400;
	}
}
/* Phones and landscape phones navigate with the bottom bar: no side rail. */
@media (max-width: 480px), (max-height: 570px) {
	html[data-scroll-site] .scroll-vertical {
		display: none;
	}
	html[data-blue-style][data-scroll-site] #section-realisations .stage-inner,
	html[data-blue-style][data-scroll-site] #section-contact .stage-inner {
		padding-left: max(
			var(--scroll-gutter),
			env(safe-area-inset-left, 0px)
		) !important;
	}
}
@media (max-width: 900px), (max-height: 570px) {
	/* No pager on this slide: give its band back to the stage. */
	html[data-scroll-site]:has(.scroll-horizontal[hidden]) {
		--scroll-controls: 0px;
	}
}
@media (max-width: 900px) and (min-height: 571px) {
	html[data-scroll-site] #page-ia .scroll-demo-graph {
		height: clamp(96px, 15dvh, 200px);
		margin-block: 8px;
	}
	html[data-blue-style][data-scroll-site]
		#section-realisations
		#page-ia
		.stage-inner {
		gap: 12px !important;
		padding-block: 16px !important;
	}
}

/* Phones: the place name leaves room for the language, Produits and Articles links. */
@media (max-width: 520px) {
	html[data-blue-style][data-scroll-site] #bar .bar-brand-sep,
	html[data-blue-style][data-scroll-site]
		#bar
		.bar-brand
		.bar-word
		+ .bar-brand-sep
		+ .bar-word {
		display: none;
	}
}

/* Top bar: Produits and Articles keep a 44px-tall hit area with tighter side
   padding, and a 320px bar keeps only the mark so nothing collides. */
@media (max-width: 400px) {
	html[data-scroll-site] .scroll-articles-link {
		padding: 0 3px;
	}
}
@media (max-width: 355px) {
	html[data-scroll-site] #bar .bar-word {
		display: none;
	}
}
/* Short landscape phones: four 44px language targets, no overline. */
@media (max-height: 570px) and (min-width: 761px) {
	html[data-blue-style][data-scroll-site] #lang-switch a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
	html[data-blue-style] .microlabel {
		display: none;
	}
}
/* Landscape phones of 360px or less: the wordmark and headline fit between the bars. */
@media (max-height: 360px) and (orientation: landscape) {
	html[data-blue-style][data-scroll-site] .hero-inner {
		gap: 8px !important;
		padding-block: 8px !important;
	}
	html[data-blue-style][data-scroll-site] #hero-wordmark-zone {
		height: 72px !important;
	}
	html[data-blue-style][data-scroll-site] .hero-headline {
		font-size: 22px !important;
	}
}
/* Short landscape phones: the bar keeps its right end for the pager only while a pager shows. */
@media (max-height: 570px) and (min-width: 560px) {
	html[data-blue-style][data-scroll-site]:has(.scroll-horizontal[hidden]) #bar,
	html[data-blue-style][data-scroll-site]:has(.scroll-horizontal[hidden])
		#bar[data-bar-state] {
		padding-right: 10px;
	}
}

html[data-scroll-site] #page-siteweb .scroll-work-frame {
	width: 100%;
	max-width: 660px;
	margin: auto;
}
html[data-scroll-site] #page-siteweb .scroll-work-frame .screen {
	position: static !important;
	width: 100% !important;
	margin: 0 !important;
	display: block !important;
	background: transparent;
}
html[data-scroll-site] #page-siteweb .scroll-work-frame .screen[hidden] {
	display: none !important;
}
html[data-scroll-site] #page-siteweb .scroll-work-frame .vp {
	max-height: none !important;
	aspect-ratio: 16 / 10 !important;
	overflow-y: auto;
	scrollbar-width: thin;
}
html[data-scroll-site] #page-siteweb .scroll-work-frame img {
	transform: none !important;
}
.scroll-work-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 12px;
	font-size: 13px;
}
.scroll-work-controls button {
	width: 44px;
	height: 44px;
	background: transparent;
	color: var(--blue-text);
	border: 1px solid var(--line);
	border-radius: 50%;
	font-size: 22px;
	cursor: pointer;
}
.scroll-work-controls button:disabled {
	opacity: 0.35;
	cursor: default;
}
@media (prefers-reduced-motion: no-preference) {
	html[data-blue-render="software"] #services-transition-ia-figure-zone {
		animation: service-shield-float 10s ease-in-out infinite;
	}
	html[data-blue-motion="off"] #services-transition-ia-figure-zone {
		animation: none;
	}
}
@keyframes service-shield-float {
	50% {
		transform: translateY(-4px);
	}
}

/* « Nos services ». Loaded last of the blue sheets, so it can
   opt #section-services into the shared content frame (blue-content-layout
   .css) and out of the blanket canvas hide (blue-responsive.css) without
   editing either. Nothing here is section-agnostic: every selector is
   scoped to #section-services or to the bar item that opens it. */

/* ── The shared internal-page frame ─────────────────────────────────── */
html[data-blue-style] #section-services .stage-inner {
	width: min(100%, var(--content-frame-width));
	max-width: var(--content-frame-width);
	height: 100%;
	max-height: none;
	margin-inline: auto;
	padding: var(--content-frame-top) var(--grid-margin)
		var(--content-frame-bottom);
	box-sizing: border-box;
}

/* ── Copy ───────────────────────────────────────────────────────────── */
/* The bar already names the section: its heading is for screen readers and
   crawlers only. */
#section-services .services-heading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* One reading order on every viewport: the title dominates, the label is
   an accent label held close under it, the promise follows, then one call
   to action. The spacing lives on the children, so the shared .offer-head
   gap is cancelled here. */
html[data-blue-style] #section-services .offer-head {
	gap: 0;
}
html[data-blue-style] #section-services .offer-head-title {
	min-height: var(--services-title-height, 0px);
	font-size: clamp(1.75rem, 8vw, 2.1rem) !important;
	line-height: 1.12 !important;
}
html[data-blue-style] #section-services .services-label {
	min-height: var(--services-label-height, 0px);
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--blue-accent);
}
html[data-blue-style] #section-services .offer-tagline {
	margin: 1.25rem auto 0;
	max-width: 26rem !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--ink-soft) !important;
}
html[data-blue-style] #section-services .offer-head .services-secondary {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0;
	border-bottom: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--blue-text);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
html[data-blue-style] #section-services .offer-head .services-secondary:hover,
html[data-blue-style]
	#section-services
	.offer-head
	.services-secondary:focus-visible {
	text-decoration-color: currentColor;
}
#section-services .offer-head > * {
	align-self: center;
}
/* Fixed block across the services: the link closes it on every slide. */
html[data-blue-style] #section-services .offer-head {
	height: var(--services-copy-height, auto);
}
html[data-blue-style]
	#section-services
	.offer-head
	> :has(+ .services-secondary) {
	margin-bottom: 1rem;
}
html[data-blue-style] #section-services .offer-head .services-secondary {
	margin-top: auto;
}
@media (min-width: 900px) {
	#section-services .offer-head > * {
		align-self: flex-start;
	}
	html[data-blue-style] #section-services .offer-head-title {
		font-size: clamp(2.4rem, 3.1vw, 3rem) !important;
	}
	html[data-blue-style] #section-services .services-label {
		margin-top: 1rem;
	}
	html[data-blue-style] #section-services .offer-tagline {
		margin: 1.5rem 0 0;
		font-size: 1.1rem !important;
		line-height: 1.6 !important;
	}
}

/* ── Desktop: copy left, particle figure right ──────────────────────── */
@media (min-width: 900px) {
	/* Wide enough for every title on one line once the title size is reached. */
	html[data-blue-style] #section-services,
	:root:has(#section-services.is-active) #stage {
		--content-copy-width: min(36.5rem, 38vw);
	}
	html[data-blue-style] #section-services .split-page {
		grid-template-rows: minmax(0, 1fr);
	}
	/* Fixed rows across the services: the title, the label and the link hold
	   their place on every slide (blue-chapter-rows.js measures the tallest). */
	html[data-blue-style] #section-services .offer-head {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		width: 100%;
		max-width: var(--content-copy-width);
		margin: 0;
	}
	html[data-blue-style] #section-services .services-figure-zone {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		width: 100%;
		height: var(--content-visual-height);
		margin: 0;
		display: block !important;
	}
	/* The field is clipped to the figure side of the middle gap and feathered
	   across that gap, so the boundary never reads as a cut. */
	:root:has(#section-services.is-active) #stage {
		--stage-clear: calc(var(--content-gutter) + var(--content-copy-width));
		--stage-solid: calc(var(--stage-clear) + var(--content-gutter));
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		clip-path: inset(0 0 0 var(--stage-clear));
		-webkit-mask-image: linear-gradient(
			to right,
			transparent var(--stage-clear),
			#000 var(--stage-solid)
		);
		mask-image: linear-gradient(
			to right,
			transparent var(--stage-clear),
			#000 var(--stage-solid)
		);
	}
}
/* ── Mobile: figure above the copy ──────────────────────────────────── */
@media (max-width: 899px) {
	/* The figure takes the room left above the bar once the copy block is kept,
	   its link included, and what remains centers the
	   band: the figure starts `--services-lead` below the frame's top. All on
	   :root so the #stage clip below reads the same lengths. */
	:root:has(#section-services.is-active) {
		--services-gap: clamp(1rem, 2.5dvh, 1.4rem);
		--services-avail: calc(
			100dvh -
			2 *
			var(--content-frame-top) +
			var(--scroll-header, 64px) -
			var(--scroll-footer, 72px) -
			var(--services-gap) -
			var(--services-copy-height, 22rem)
		);
		--content-visual-height: clamp(11rem, var(--services-avail), 21rem);
		--services-lead: max(
			0px,
			calc((var(--services-avail) - var(--content-visual-height)) / 2)
		);
		--services-figure-top: calc(
			var(--content-frame-top) +
			var(--services-lead)
		);
	}
	html[data-blue-style] #section-services .stage-inner {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		/* Top-aligned from the lead: the particle band below is computed from
		   it, so the figure zone must start exactly there whatever the height
		   of the copy under it. */
		justify-content: flex-start !important;
		gap: var(--services-gap) !important;
		padding: var(--content-frame-top) 1.25rem var(--content-frame-bottom) !important;
		text-align: center;
	}
	html[data-blue-style] #section-services .services-figure-zone {
		order: 1;
		display: block !important;
		width: min(100%, 22rem) !important;
		height: var(--content-visual-height) !important;
		flex: 0 0 var(--content-visual-height) !important;
		margin: var(--services-lead) auto 0 !important;
	}
	html[data-blue-style] #section-services .offer-head {
		order: 2;
		width: 100%;
		max-width: var(--content-copy-width) !important;
		margin: 0 auto !important;
		text-align: center !important;
	}
	/* The visible band is the reserved figure zone itself, expressed in the
	   same lengths the layout above uses rather than in guessed percentages:
	   the copy below it can never be crossed by stray particles however the
	   frame tokens change. */
	:root:has(#section-services.is-active) #stage {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		clip-path: inset(
			calc(var(--services-figure-top) - 10px) 0
				calc(
					100dvh -
					var(--services-figure-top) -
					var(--content-visual-height) -
					10px
				)
				0
		);
		-webkit-mask-image: linear-gradient(
			to bottom,
			transparent calc(var(--services-figure-top) - 10px),
			#000 calc(var(--services-figure-top) + 12px),
			#000
				calc(var(--services-figure-top) + var(--content-visual-height) - 12px),
			transparent
				calc(var(--services-figure-top) + var(--content-visual-height))
		);
		mask-image: linear-gradient(
			to bottom,
			transparent calc(var(--services-figure-top) - 10px),
			#000 calc(var(--services-figure-top) + 12px),
			#000
				calc(var(--services-figure-top) + var(--content-visual-height) - 12px),
			transparent
				calc(var(--services-figure-top) + var(--content-visual-height))
		);
	}
}

@media (max-width: 760px) {
	html[data-blue-style] #blue-section-menu [data-blue-group="services"] button {
		font-size: 15px !important;
		padding: 6px 4px !important;
	}
}

/* ── Landscape phones: copy left, figure right, both between the bars ── */
@media (max-width: 899px) and (max-height: 570px) and (orientation: landscape) {
	:root:has(#section-services.is-active) {
		--content-visual-height: calc(
			100dvh -
			var(--scroll-header, 64px) -
			var(--scroll-footer, 72px) -
			24px
		);
	}
	html[data-blue-style] #section-services .stage-inner {
		padding: calc(var(--scroll-header, 64px) + 12px) 1.5rem
			calc(var(--scroll-footer, 72px) + 12px) 4rem !important;
		flex-direction: row;
		align-items: center;
		justify-content: center !important;
		gap: 1.5rem;
		text-align: left;
	}
	html[data-blue-style] #section-services .services-figure-zone {
		order: 2;
		width: 42% !important;
		margin: 0 !important;
	}
	html[data-blue-style] #section-services .offer-head {
		order: 1;
		flex: 1 1 0;
		text-align: left !important;
	}
	html[data-blue-style] #section-services .offer-head > * {
		align-self: flex-start;
	}
	:root:has(#section-services.is-active) #stage {
		clip-path: inset(0 0 0 50%);
		-webkit-mask-image: linear-gradient(to right, transparent 50%, #000 56%);
		mask-image: linear-gradient(to right, transparent 50%, #000 56%);
	}
}

/* Landscape phones, every chapter: copy left, figure right, both between the
   bars with no inner scroll (#section-services .stage outranks the blue-clean.css pins). */
@media (max-width: 899px) and (max-height: 570px) and (orientation: landscape) {
	html[data-blue-style] #section-services .stage .stage-inner {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 12px !important;
		padding: var(--scroll-header, 48px)
			max(16px, env(safe-area-inset-right, 0px)) var(--scroll-footer, 52px)
			max(16px, env(safe-area-inset-left, 0px)) !important;
		overflow: hidden !important;
	}
	html[data-blue-style] #section-services .stage .offer-head {
		display: flex !important;
		flex: 1 1 0 !important;
		flex-flow: row wrap;
		column-gap: 12px;
		min-width: 0;
		height: auto;
		padding-block: 0 !important;
		margin: 0 !important;
		max-width: none !important;
		align-self: center !important;
	}
	/* Title and label share one baseline when they fit; the rest stacks. */
	html[data-blue-style] #section-services .stage .offer-head > * {
		flex: 0 0 100%;
	}
	html[data-blue-style] #section-services .stage .offer-head-title,
	html[data-blue-style] #section-services .stage .services-label {
		flex-basis: auto;
		align-self: baseline !important;
	}
	html[data-blue-style] #section-services .stage .offer-head-title {
		font-size: 22px !important;
		line-height: 1.15 !important;
	}
	html[data-blue-style] #section-services .stage .services-label {
		margin-top: 0 !important;
		font-size: 14px !important;
	}
	html[data-blue-style] #section-services .stage .offer-tagline,
	html[data-blue-style] #section-services .stage .service-usecase {
		margin: 6px 0 0 !important;
		max-width: none !important;
		text-align: left !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
	}
	html[data-blue-style] #section-services .stage .services-secondary {
		margin-top: 4px !important;
		min-height: 32px !important;
	}
	html[data-blue-style] #section-services .stage .services-figure-zone {
		order: 2;
		flex: 0 0 30% !important;
		width: 30% !important;
		height: calc(100% - 16px) !important;
		align-self: center !important;
		margin: 0 !important;
	}
}

html[data-blue-style][data-scroll-site] #bar,
html[data-blue-style][data-scroll-site] #bar[data-bar-state] {
	grid-template-columns: 1fr auto auto auto 1fr;
	grid-template-areas: "brand trust c2 c1 right";
}
html[data-blue-style][data-scroll-site] #bar [data-menu="testimonials"] {
	display: inline-flex !important;
	grid-area: trust !important;
}
html[data-blue-style][data-scroll-site] #bar [data-menu="studio"] {
	grid-area: c1 !important;
}
html[data-blue-style][data-scroll-site] #bar [data-menu="services"] {
	grid-area: c2 !important;
}
html[data-blue-style][data-scroll-site] #bar [data-menu="contact"] {
	grid-area: right !important;
}
.service-usecase {
	max-width: 38ch;
	font-size: 15px;
	line-height: 1.65;
	margin: 24px 0 0;
	color: var(--ink-soft);
}
html[data-blue-style] #section-services .services-page {
	overflow: hidden;
}
/* Every chapter fits its viewport: no scroll area ever paints a scrollbar. */
html,
html * {
	scrollbar-width: none;
}
html[data-blue-style] #section-services .services-label {
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}
html::-webkit-scrollbar,
html *::-webkit-scrollbar {
	display: none;
}
html[data-blue-style] #section-services .offer-head {
	padding-block: 24px;
}
html[data-blue-style] #section-services .offer-tagline {
	max-width: 36ch !important;
}
@media (min-width: 900px) {
	html[data-blue-style] #section-services .offer-tagline,
	html[data-blue-style] #section-services .service-usecase {
		max-width: none !important;
	}
}
@media (max-width: 900px), (max-height: 570px) {
	html[data-blue-style][data-scroll-site] #bar,
	html[data-blue-style][data-scroll-site] #bar[data-bar-state] {
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
		grid-template-areas: "trust c2 c1 right";
	}
	/* A page without « Nos services » (app.js) shows « Comment ça marche » in its place. */
	html[data-blue-style][data-scroll-site]
		#bar:not(:has([data-menu="services"])) {
		grid-template-areas: "trust pipe c1 right";
	}
	/* The offer button's label is the longest: a wider column keeps it on two balanced lines. */
	html[data-blue-style][data-scroll-site][data-blue-button]
		#bar
		.menu-item.menu-item--primary {
		padding-inline: 10px;
		text-wrap: balance;
	}
	html[data-blue-style] #section-services .offer-head {
		padding-block: 0 24px;
	}
	/* On the booking chapter the booking tab hides: the other tabs spread from gutter to gutter. */
	html[data-blue-style][data-scroll-site]
		#bar:has(.menu-item--primary[aria-current="true"]) {
		grid-template-columns: repeat(3, auto);
		grid-template-areas: "trust c2 c1";
		justify-content: space-between;
		padding-inline: calc(var(--scroll-gutter) - 4px);
	}
	html[data-blue-style][data-scroll-site]
		#bar:not(:has([data-menu="services"])):has(
			.menu-item--primary[aria-current="true"]
		) {
		grid-template-areas: "trust pipe c1";
	}
	html[data-blue-style][data-scroll-site]
		#bar:has(.menu-item--primary[aria-current="true"])
		.menu-item {
		width: auto;
	}
	html[data-blue-style][data-scroll-site]
		#bar
		.menu-item--primary[aria-current="true"] {
		display: none;
	}
	/* Content fades into the bar instead of meeting its edge. */
	html[data-blue-style][data-scroll-site] #bar::after {
		content: "";
		position: absolute;
		inset: auto 0 100%;
		height: 28px;
		background: linear-gradient(
			to top,
			var(--blue-night-bg, var(--blue-bg)),
			transparent
		);
		pointer-events: none;
	}
}
/* On phones, equal tabs are too narrow for "Témoignages": each tab takes its label's width, one even gap between them. */
@media (max-width: 520px) {
	html[data-blue-style][data-scroll-site] #bar,
	html[data-blue-style][data-scroll-site] #bar[data-bar-state] {
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
		/* Tab text sits 4px inside its tab; the filled offer button ends on the gutter itself. */
		padding-inline: calc(var(--scroll-gutter) - 4px) var(--scroll-gutter);
	}
	html[data-blue-style][data-scroll-site] #bar .scroll-mobile-label {
		white-space: nowrap;
	}
	/* Tabs share the offer button's height, so the marked tab lines up with it. */
	html[data-blue-style][data-scroll-site]
		#bar
		.menu-item:not(.menu-item--primary) {
		min-height: 44px;
		padding-inline: 8px;
	}
}
@media (max-width: 360px) {
	html[data-blue-style][data-scroll-site] #bar .scroll-mobile-label {
		font-size: 13px;
	}
	html[data-blue-style][data-scroll-site][data-blue-button]
		#bar
		.menu-item.menu-item--primary {
		padding-inline: 12px;
	}
}
/* Short and landscape viewports have no room to distribute: a compact pin. */
@media (max-width: 900px) and (max-height: 699px), (max-height: 570px) {
	html[data-blue-style] #section-services .services-figure-zone {
		height: 180px !important;
		flex-basis: 180px !important;
		margin-top: 0 !important;
	}
	:root:has(#section-services.is-active) {
		--content-visual-height: 180px;
		--services-lead: 0px;
	}
}
@media (max-width: 360px) {
	html[data-blue-style][data-scroll-site] #bar {
		padding-inline: 4px;
	}
}

@media (max-width: 899px) {
	:root:has(#section-services.is-active) {
		--content-frame-top: calc(var(--scroll-header, 64px) + 20px);
	}
}
@media (max-width: 899px) and (max-height: 570px) and (orientation: landscape) {
	html[data-blue-style] #section-services .stage-inner {
		align-items: flex-start !important;
	}
	html[data-blue-style] #section-services .offer-head {
		align-self: flex-start !important;
	}
}

/* Short portrait phones: a smaller figure and tighter copy keep one service
   between the bars. */
@media (max-width: 900px) and (max-height: 640px) and (orientation: portrait) {
	:root[data-blue-style] {
		--content-frame-top: calc(env(safe-area-inset-top, 0px) + 64px);
	}
	:root:has(#section-services.is-active) {
		--content-visual-height: 72px;
		--services-gap: 0.5rem;
	}
	html[data-blue-style] #section-services .services-figure-zone {
		height: 72px !important;
		flex-basis: 72px !important;
	}
	html[data-blue-style] #section-services .offer-tagline {
		margin-top: 8px;
		line-height: 1.4 !important;
	}
	html[data-blue-style] #section-services .service-usecase {
		margin-top: 8px;
		line-height: 1.4;
	}
	html[data-blue-style] #section-services .stage .services-secondary {
		min-height: 40px !important;
	}
}
/* Short landscape phones: compact copy column so the link stays above the bar;
   an overflowing column scrolls from its top instead of being cut on both ends. */
@media (max-width: 900px) and (max-height: 570px) and (orientation: landscape) {
	html[data-blue-style] #section-services .stage-inner {
		align-items: safe center;
		overflow-y: auto;
	}
	html[data-blue-style] #section-services .offer-head-title {
		font-size: 1.5rem !important;
	}
	html[data-blue-style] #section-services .offer-tagline {
		margin-top: 0.5rem;
		font-size: 14px !important;
		line-height: 1.45 !important;
	}
	html[data-blue-style] #section-services .services-label {
		margin-top: 0.4rem;
	}
	html[data-blue-style] #section-services .service-usecase {
		margin-top: 8px;
		font-size: 14px;
		line-height: 1.45;
	}
	html[data-blue-style] #section-services .offer-head .services-secondary {
		margin-top: 0.25rem;
	}
}
/* The privacy label: a hairline tag, never a claim of certification. */
html[data-blue-style] .rgpd-badge {
	display: inline-block;
	width: fit-content;
	padding: 1px 6px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	font: 600 11px / 1.4 var(--blue-body);
	letter-spacing: 0.02em;
	color: var(--ink-soft);
	text-decoration: none;
	transition:
		color 120ms ease,
		border-color 120ms ease;
}
@media (hover: hover) {
	html[data-blue-style] .rgpd-badge:hover {
		border-color: var(--blue-accent);
		color: var(--ink);
	}
}
html[data-blue-style] #section-services .rgpd-badge {
	margin-top: 10px;
}
/* The privacy link sits under the logo: the banner repeats no RGPD tag. */
html[data-blue-style] .replay-consent .rgpd-badge {
	display: none;
}
/* Until the menu module sets the final tabs, none shows: no label flashes, then jumps. */
html[data-blue-style] #bar:not([data-nav-ready]) .menu-item {
	visibility: hidden;
}
@media (max-width: 900px), (max-height: 570px) {
	/* The phone header melts into the page on an eased fade, like the bottom bar, with no divider line. */
	html[data-blue-style][data-scroll-site] #bar::before {
		height: calc(var(--scroll-header) + 28px);
		border-bottom: 0;
		background: linear-gradient(
			to bottom,
			var(--blue-night-bg, var(--blue-bg)) 0,
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 100.0%,
					transparent
				)
				calc(var(--scroll-header) + 0px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 98.7%,
					transparent
				)
				calc(var(--scroll-header) + 2px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 95.0%,
					transparent
				)
				calc(var(--scroll-header) + 4px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 89.1%,
					transparent
				)
				calc(var(--scroll-header) + 6px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 81.2%,
					transparent
				)
				calc(var(--scroll-header) + 8px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 71.7%,
					transparent
				)
				calc(var(--scroll-header) + 10px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 61.1%,
					transparent
				)
				calc(var(--scroll-header) + 12px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 50.0%,
					transparent
				)
				calc(var(--scroll-header) + 14px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 38.9%,
					transparent
				)
				calc(var(--scroll-header) + 16px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 28.3%,
					transparent
				)
				calc(var(--scroll-header) + 18px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 18.8%,
					transparent
				)
				calc(var(--scroll-header) + 20px),
			color-mix(
					in srgb,
					var(--blue-night-bg, var(--blue-bg)) 10.9%,
					transparent
				)
				calc(var(--scroll-header) + 22px),
			color-mix(in srgb, var(--blue-night-bg, var(--blue-bg)) 5.0%, transparent)
				calc(var(--scroll-header) + 24px),
			color-mix(in srgb, var(--blue-night-bg, var(--blue-bg)) 1.3%, transparent)
				calc(var(--scroll-header) + 26px),
			color-mix(in srgb, var(--blue-night-bg, var(--blue-bg)) 0.0%, transparent)
				calc(var(--scroll-header) + 28px)
		);
	}
}
@media (max-width: 760px) {
	/* Two languages (pragma-serve.com): 44px targets keep FR beside EN, one gap along the row. */
	html[data-blue-style][data-scroll-site]
		.scroll-utilities
		#lang-switch:not(:has(a:nth-of-type(3)))
		a {
		min-width: 44px;
	}
}

/* Contact: the call booker sits on the page itself (app.js loadBookingSlots).
   Copy on the left, days, times and the form on the right; one screen, no scroll. */
.booking-days:empty,
.booking-slots:empty,
.booking-week[hidden],
.booking-slots[hidden],
.booking-form[hidden],
.booking-page[hidden] {
	display: none !important;
}
html[data-blue-style] #page-closing .audit-figure-zone {
	display: none !important;
}
:root:has(#section-contact.is-active) #stage {
	visibility: hidden !important;
	opacity: 0 !important;
}
@media (min-width: 900px) {
	html[data-blue-style] #section-contact {
		--content-copy-width: 27rem;
		--content-figure-width: 36rem;
	}
}
html[data-blue-style] #page-closing .booking-panel {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	width: 100%;
	max-width: none !important;
	margin: 0;
	text-align: left;
}
.booking-intro {
	display: grid;
	gap: 1rem;
	justify-items: start;
}
html[data-blue-style] #page-closing .booking-intro > * {
	margin: 0;
}
html[data-blue-style] #page-closing .booking-intro .audit-chips {
	justify-content: flex-start;
	gap: 10px;
}
/* The call line leads the block: no title above it, badges under it. */
html[data-blue-style] #page-closing .booking-intro {
	align-self: center;
	gap: 1.5rem;
}
html[data-blue-style] #page-closing .booking-intro .booking-lead {
	font-family: inherit;
	font-size: clamp(1.375rem, 0.8rem + 1vw, 1.875rem);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-wrap: balance;
}
html[data-blue-style] #page-closing .booking-intro .booking-audience {
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink-soft);
	text-wrap: pretty;
}
.booking-picker {
	display: grid;
	gap: 0.875rem;
	min-width: 0;
}
.booking-picker > p {
	margin: 0;
}
.booking-slots {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.5rem;
}
.booking-day,
.booking-slot,
.booking-page {
	border: 1px solid var(--line-strong);
	border-radius: var(--blue-radius);
	background: transparent;
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	transition:
		background-color 0.15s,
		border-color 0.15s,
		color 0.15s;
}
.booking-day {
	display: grid;
	gap: 0.1rem;
	place-items: center;
	padding: 0.5rem 0.25rem;
	line-height: 1.2;
}
.booking-day span {
	color: var(--ink-soft);
	font-size: 0.75rem;
}
.booking-day strong {
	font-size: 0.95rem;
	white-space: nowrap;
}
.booking-slot {
	min-height: 2.5rem;
	padding: 0.25rem;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}
.booking-page {
	width: 44px;
	align-self: center;
	height: 44px;
}
.booking-page:disabled {
	opacity: 0.3;
	cursor: default;
}
.booking-day[aria-pressed="true"],
.booking-day[aria-pressed="true"] span {
	color: var(--blue-accent-text);
}
@media (hover: hover) and (pointer: fine) {
	.booking-day:hover,
	.booking-slot:hover,
	.booking-page:not(:disabled):hover {
		border-color: var(--blue-accent);
	}
	.booking-slot:hover {
		background: var(--blue-accent);
		color: var(--blue-accent-text);
	}
}
.booking-day:active,
.booking-slot:active,
.booking-page:active {
	transform: translateY(1px);
}
.booking-day:focus-visible,
.booking-slot:focus-visible,
.booking-page:focus-visible,
.booking-back:focus-visible,
.booking-form input:focus-visible,
.booking-form .audit-send:focus-visible {
	outline: 2px solid var(--blue-accent);
	outline-offset: 2px;
}
.booking-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1rem;
}
.booking-selected {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0 1rem;
	margin: 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--line);
	font-weight: 700;
}
.booking-selected span::first-letter {
	text-transform: uppercase;
}
.booking-back {
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.booking-form label {
	display: grid;
	gap: 0.3rem;
	font-size: 0.8rem;
	font-weight: 600;
}
.booking-form input {
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--blue-radius);
	background: transparent;
	color: var(--ink);
	font: inherit;
}
html[data-blue-style] .booking-form .audit-send {
	align-self: end;
	min-height: 2.75rem;
	border: 1px solid var(--blue-accent);
	border-radius: var(--blue-radius);
	background: var(--blue-accent);
	color: var(--blue-accent-text);
}
.booking-form .audit-send:disabled {
	opacity: 0.6;
}
.booking-status {
	font-weight: 600;
}
.booking-status:empty {
	display: none;
}
/* A failed booking shows the direct contact in the note's place. */
.booking-picker:has(.booking-fallback:not([hidden])) .booking-note {
	display: none;
}
.booking-note {
	color: var(--ink-soft);
	font-size: 0.75rem;
	line-height: 1.45;
}
.booking-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.75rem;
	line-height: 1.45;
}
.booking-legal a:not(.rgpd-badge) {
	color: inherit;
}
/* The bar already shows the privacy and legal links under the logo: the form keeps
   its GDPR tag and the Google source, never a second copy of the two links. */
:root:has(#bar .bar-legal[style])
	.booking-legal
	> :is([data-i18n="legal.privacy"], [data-i18n="legal.notice"]) {
	display: none;
}
/* The privacy tag beside it is the same hairline pill, at the same size. */
html[data-blue-style] .booking-legal .rgpd-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font: 600 0.75rem / 1.45 var(--blue-body);
}
/* Google's preferred-source link: a hairline pill like the privacy tag, with Google's G. */
.preferred-source {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid var(--line-strong, #0d394640);
	border-radius: 999px;
	color: var(--ink-soft, #476369);
	font-weight: 600;
	text-decoration: none;
	transition:
		border-color 120ms ease,
		color 120ms ease;
}
.booking-legal .preferred-source {
	color: var(--ink-soft, #476369);
}
.preferred-source svg {
	flex: none;
}
.preferred-source[hidden] {
	display: none;
}
@media (hover: hover) {
	.preferred-source:hover {
		border-color: var(--blue-accent, #087985);
		color: var(--ink, #0d3946);
	}
}
@media (prefers-reduced-motion: reduce) {
	.booking-day,
	.booking-slot,
	.booking-page {
		transition: none;
	}
}

/* Phones: one column; four days a page and the form replaces the times. */
@media (max-width: 760px) {
	html[data-blue-style] #page-closing .booking-panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
	.booking-intro {
		gap: 0.5rem;
	}
	html[data-blue-style] #page-closing .booking-intro .audit-chips {
		gap: 8px;
	}
	/* style.css shrinks every tagline on short screens; this lead stays large. */
	html[data-blue-style] #page-closing .booking-intro {
		gap: 0.75rem;
	}
	html[data-blue-style] #page-closing .booking-intro .booking-lead {
		font-size: 1.25rem;
		line-height: 1.3;
	}
	/* While the form is open the intro keeps only its lead line. */
	html[data-blue-style]
		#page-closing
		.booking-panel:has(.booking-form:not([hidden]))
		:is(.audit-chips, .booking-audience) {
		display: none;
	}
	.booking-day {
		padding-inline: 0.125rem;
	}
	.booking-day strong {
		font-size: 0.8125rem;
	}
	.booking-selected {
		font-size: 0.875rem;
	}
	.booking-back {
		font-size: 0.8125rem;
	}
	.booking-picker {
		gap: 0.625rem;
	}
	.booking-slots {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.booking-form {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}
@media (max-width: 360px) {
	.booking-slots {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.booking-day strong {
		font-size: 0.75rem;
	}
}
/* Narrow two-column and phone pickers: smaller dates so the chips fit their row. */
@media (max-width: 1100px) {
	.booking-day {
		padding-inline: 0.125rem;
	}
}
@media (min-width: 361px) and (max-width: 1100px) {
	.booking-day strong {
		font-size: 0.8125rem;
	}
}
/* The bottom navigation stays on contact: the scroll box ends above it, so the
   last times and the note scroll into view. */
@media (max-width: 900px), (max-height: 570px) {
	html[data-blue-style][data-scroll-site] #section-contact .stage-inner {
		bottom: var(--scroll-footer);
	}
}
/* One column, level on both sides of the viewport and clear of the tablet rail. */
@media (max-width: 760px) {
	html[data-blue-style][data-scroll-site] #section-contact .stage-inner {
		padding-inline: 20px !important;
	}
}
@media (min-width: 761px) and (max-width: 899px) {
	html[data-blue-style][data-scroll-site] #section-contact .stage-inner {
		padding-inline: var(--content-rail-clear) !important;
	}
}
/* Short phones: five times a row. */
@media (max-width: 760px) and (max-height: 700px) {
	.booking-slots {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0.375rem;
	}
}
/* Dark theme: the days, times, form fields and the privacy and Google tags are
   light surfaces with dark text; the picked day is solid turquoise with a ring. */
html[data-blue-style][data-blue-theme="dark"]
	:is(
		.booking-day,
		.booking-slot,
		.booking-form input,
		.booking-legal .rgpd-badge,
		.booking-legal .preferred-source
	) {
	--btn-card: #f3f7f8;
	--btn-warm: #c8a46a;
	--ink: #031321;
	--ink-soft: #3d5662;
	--line-strong: #c9d8dc;
}
html[data-blue-style][data-blue-theme="dark"]
	:is(
		.booking-form input,
		.booking-legal .rgpd-badge,
		.booking-legal .preferred-source
	) {
	border-color: var(--line-strong);
	background: var(--btn-card);
	color: var(--ink);
}
html[data-blue-style][data-blue-theme="dark"]
	.booking-day[aria-pressed="true"] {
	box-shadow:
		0 0 0 2px var(--blue-bg),
		0 0 0 4px var(--blue-accent);
}
@media (hover: hover) and (pointer: fine) {
	html[data-blue-style][data-blue-theme="dark"]
		:is(.booking-legal .rgpd-badge, .booking-legal .preferred-source):hover {
		border-color: var(--blue-accent);
		color: var(--ink);
	}
}
/* The two founders the visitor will talk to, large above the lead, side by
   side; each site opens with its own founder (#studio-swap data-founder-first). */
.booking-founders {
	--bf-size: clamp(8.5rem, 22vh, 11rem);
	display: flex;
	gap: 1rem;
}
.booking-founder {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	margin: 0;
}
.booking-founder img {
	display: block;
	width: var(--bf-size);
	height: var(--bf-size);
	border-radius: 50%;
	object-fit: cover;
}
html[data-blue-style][data-blue-theme="dark"] .booking-founder img {
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55);
}
.booking-founder figcaption {
	font-size: 0.8125rem;
	color: var(--ink-soft);
}
:root:has(#studio-swap[data-founder-first="benjamin"])
	.booking-founder[data-founder="benjamin"] {
	order: -1;
}
@media (max-width: 760px) {
	.booking-founders {
		/* Two photos and their 1rem gap span the 20px-padded phone column. */
		--bf-size: min(calc((100vw - 40px - 1rem) / 2), 11rem);
	}
	.booking-founder figcaption {
		font-size: 0.75rem;
	}
}

/* The heading is a short question line, then one line per gain. */
html[data-blue-style] #page-closing .booking-lead-line {
	display: block;
}
/* Days and times share one column grid: the arrows hold the outer columns. */
.booking-week {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.5rem;
}
.booking-days {
	display: contents;
}
.booking-day {
	min-width: 0;
}
#booking-prev {
	justify-self: start;
}
#booking-next {
	justify-self: end;
}
@media (max-width: 760px) {
	.booking-week {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}
@media (max-width: 760px) and (max-height: 700px) {
	.booking-week {
		gap: 0.375rem;
	}
}

/* « Comment ça marche »: five steps in one viewport, each with its own image. The field draws
   only the title's bolt: once built (blue-pipeline-figure.js) the bolt's mask hides. Until then,
   at reduced motion and in the compact layout, the mask shows and the field stays off. */
:root:has(#section-pipeline.is-active) #stage {
	opacity: 0 !important;
	pointer-events: none !important;
}
:root[data-pipeline-particles]:has(#section-pipeline.is-active) #stage {
	opacity: 1 !important;
}
html[data-pipeline-particles] #section-pipeline .pipeline-bolt {
	visibility: hidden;
}
#section-pipeline .pipeline-page {
	position: relative;
}
.pipeline-figure-zone {
	position: absolute;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	html[data-pipeline-particles] #section-pipeline .pipeline-bolt {
		visibility: visible;
	}
}
html[data-blue-style] #section-pipeline .pipeline-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: clamp(20px, 4vh, 44px);
	width: min(100%, var(--content-frame-width));
	max-width: var(--content-frame-width);
	height: 100%;
	max-height: none;
	margin-inline: auto;
	padding: var(--content-zone-top)
		calc(
			var(--pipe-margin) +
			var(--pipe-tail, 0px) *
			var(--pipe-n) /
			(var(--pipe-n) - 1)
		)
		var(--content-zone-bottom) var(--pipe-margin);
	box-sizing: border-box;
	overflow: hidden;
	text-align: left;
	/* One vertical axis per step, from the column grid: the centre of the square each icon
	   draws in (left-anchored, as wide as its column at most). Dot, rule, title icon and the
	   particle figure (blue-pipeline-figure.js reads the same image boxes) sit on it. */
	container-type: inline-size;
	/* The side margin clears the rail. A title held on one line past its column is
	   the tail (blue-chapter-rows.js): the right padding takes it back so the
	   drawn timeline, not its box, is centered. */
	--pipe-margin: max(var(--grid-margin), var(--content-rail-clear));
	--pipe-n: 5;
	--pipe-gap: clamp(16px, 2.2vw, 36px);
	--pipe-img: min(22vh, 210px);
	--pipe-term: 30px;
	--pipe-axis: calc(
		min(
			(100cqi - (var(--pipe-n) - 1) * var(--pipe-gap)) /
			var(--pipe-n),
			var(--pipe-img)
		) /
		2
	);
}
html[data-blue-style]
	#section-pipeline
	.pipeline-page:has(.pipeline-step--pay) {
	--pipe-n: 6;
}
/* The title, then one continuous timeline: a dot per step, joined by one rule,
   ending on the pay-at-the-end milestone (pragma-serve.com only, data-offer). */
html[data-blue-style] #section-pipeline .pipeline-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	/* The title icon centres on the first step's axis. */
	padding-left: max(0px, calc(var(--pipe-axis) - var(--pipe-term) / 2));
	color: var(--blue-text);
	font-family: var(--font-display);
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}
/* The key words carry the hero's highlight; the bolt follows the last word in the same color,
   a mask over the source the particle figure draws, for when the field is off or on phones.
   Its square is wider than its ink, so it tucks in and overflows the title's line box. */
html[data-blue-style] .pipeline-title .blue-monaco {
	color: var(--blue-secondary);
	white-space: nowrap;
}
.pipeline-bolt {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin: -0.25em 0 -0.25em -0.1em;
	vertical-align: -0.15em;
	background: var(--blue-secondary);
	mask: url("pipeline/bolt.webp") center / contain no-repeat;
}
.pipeline-term-icon {
	flex: none;
	width: var(--pipe-term);
	height: var(--pipe-term);
	fill: none;
	stroke: var(--blue-accent);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pipeline-steps {
	--pipe-dot: 13px;
	--pipe-rule: 2px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--pipe-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pipeline-step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	align-content: start;
	column-gap: 10px;
	row-gap: 6px;
	padding-top: 34px;
	color: var(--blue-text);
}
.pipeline-step::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--pipe-axis) - var(--pipe-dot) / 2);
	z-index: 1;
	width: var(--pipe-dot);
	height: var(--pipe-dot);
	border-radius: 50%;
	background: var(--blue-accent);
}
/* Each step draws the rule from its dot to the next one, so the line stops on the last point. */
.pipeline-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc((var(--pipe-dot) - var(--pipe-rule)) / 2);
	left: var(--pipe-axis);
	width: calc(100% + var(--pipe-gap));
	height: var(--pipe-rule);
	background: var(--blue-accent);
}
.pipeline-step img {
	grid-column: 1 / -1;
	width: 100%;
	height: var(--pipe-img);
	margin-bottom: 8px;
	object-fit: contain;
	object-position: left center;
}
/* The drawings are dark ink on transparency: on the night paper they turn light, hue kept. */
:root[data-blue-theme="dark"] .pipeline-step img {
	filter: invert(1) hue-rotate(180deg);
}
.pipeline-num {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
}
.pipeline-step h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
/* The longest title holds one line where free space on its right takes it. */
.pipeline-page:has(.pipeline-step--pay) .pipeline-step:nth-child(5) h3 {
	white-space: nowrap;
}
@media (min-width: 1200px) {
	.pipeline-step:nth-child(5) h3 {
		white-space: nowrap;
	}
}
/* The Russian title is wider than its column: it wraps. */
html[lang="ru"] .pipeline-step:nth-child(5) h3 {
	white-space: normal;
}
.pipeline-step p {
	grid-column: 1 / -1;
	margin: 0;
	max-width: 30ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-soft);
	text-wrap: pretty;
}
/* The last point: a wallet in an accent disc on the line, the pay sentence its callout
   above it, joined to the disc by a stem. */
.pipeline-step--pay {
	--pipe-disc: 22px;
	--pipe-stem: 24px;
	--pipe-note: 250px;
	--pipe-rise: calc(100% + var(--pipe-disc) - var(--pipe-dot) / 2);
	grid-template-rows: auto;
	padding-top: 44px;
}
.pipeline-step--pay::before {
	display: none;
}
.pipeline-step--pay::after {
	content: "";
	position: absolute;
	bottom: var(--pipe-rise);
	left: calc(var(--pipe-axis) - 0.5px);
	width: 1px;
	height: var(--pipe-stem);
	background: var(--blue-accent);
}
.pipeline-pay-mark {
	position: absolute;
	top: calc(var(--pipe-dot) / 2 - 22px);
	left: calc(var(--pipe-axis) - 22px);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--blue-accent);
}
.pipeline-pay-icon {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--blue-bg);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
html[data-blue-style] #section-pipeline .pipeline-step--pay p {
	position: absolute;
	bottom: calc(var(--pipe-rise) + var(--pipe-stem) + 6px);
	left: calc(var(--pipe-axis) - var(--pipe-note) / 2);
	width: var(--pipe-note);
	max-width: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--blue-text);
	text-align: center;
	text-wrap: balance;
}

/* Desktop bar: the item sits between « Nos services » and « Qui sommes-nous »
   (blue-clean.css owns the other areas). The phone bar keeps its four items;
   the chapter rail and swipes reach this section there. */
@media (min-width: 901px) and (min-height: 571px) {
	html[data-blue-style][data-scroll-site] #bar,
	html[data-blue-style][data-scroll-site] #bar[data-bar-state] {
		grid-template-columns: 1fr auto auto auto auto 1fr;
		grid-template-areas: "brand trust c2 pipe c1 right";
	}
	html[data-blue-style][data-scroll-site] #bar [data-menu="pipeline"] {
		display: inline-flex !important;
		grid-area: pipe !important;
	}
	/* A page without « Nos services » (app.js) closes its column. */
	html[data-blue-style][data-scroll-site]
		#bar:not(:has([data-menu="services"])) {
		grid-template-columns: 1fr auto auto auto 1fr;
		grid-template-areas: "brand trust pipe c1 right";
	}
}
/* Phones show « Comment ça marche » only where « Nos services » left the bar: four tabs at most. */
@media (max-width: 900px), (max-height: 570px) {
	html[data-blue-style][data-scroll-site] #bar [data-menu="pipeline"] {
		grid-area: pipe !important;
	}
	html[data-blue-style][data-scroll-site]
		#bar:has([data-menu="services"])
		[data-menu="pipeline"] {
		display: none !important;
	}
}

/* Phones and portrait tablets: one compact row per step, image beside its text.
   On phones the page box is the shared phone frame (blue-responsive.css), which centres its children. */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
	html[data-blue-style] #section-pipeline .pipeline-page {
		--pipe-img: 64px;
		--pipe-term: 24px;
		padding-top: var(--scroll-header, var(--content-zone-top)) !important;
		padding-bottom: var(--scroll-footer, var(--content-zone-bottom)) !important;
	}
	/* The bolt is too small here to read as particles: it stays the image, the field off. */
	html[data-pipeline-particles] #section-pipeline .pipeline-bolt {
		visibility: visible;
	}
	:root[data-pipeline-particles]:has(#section-pipeline.is-active) #stage {
		opacity: 0 !important;
	}
	/* The title icon centres on the vertical rule (17px in, see .pipeline-steps). */
	html[data-blue-style] #section-pipeline .pipeline-title {
		padding-left: calc(17px - var(--pipe-term) / 2);
		align-self: stretch;
		margin-bottom: 6px;
		font-size: 20px;
	}
	/* The timeline turns vertical: dots on a rule down the left edge. */
	/* The pay disc (34px) is the widest point on the rule: inset so it starts on the page gutter. */
	.pipeline-steps {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		--pipe-gap: 12px;
		padding-left: calc(17px - var(--pipe-dot) / 2);
	}
	.pipeline-step {
		grid-template-columns: var(--pipe-img) auto minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 8px;
		row-gap: 2px;
		padding: 0 0 0 28px;
	}
	/* Each dot sits on its icon's horizontal mid-line, the rule runs dot to dot. */
	.pipeline-step::before {
		top: calc(var(--pipe-img) / 2 - var(--pipe-dot) / 2);
		left: 0;
	}
	.pipeline-step:not(:last-child)::after {
		top: calc(var(--pipe-img) / 2);
		left: calc((var(--pipe-dot) - var(--pipe-rule)) / 2);
		width: var(--pipe-rule);
		height: calc(100% + var(--pipe-gap));
	}
	.pipeline-step img {
		grid-column: 1;
		grid-row: 1 / 3;
		width: var(--pipe-img);
		height: var(--pipe-img);
		margin: 0 6px 0 0;
	}
	.pipeline-step h3 {
		font-size: 15px;
	}
	.pipeline-page:has(.pipeline-step--pay) .pipeline-step:nth-child(5) h3 {
		white-space: normal;
	}
	.pipeline-num {
		font-size: 14px;
	}
	.pipeline-step p {
		grid-column: 2 / -1;
		max-width: none;
		font-size: 13px;
		line-height: 1.4;
	}
	/* The pay disc (34px) centres on the same mid-line, a stem runs from it to its sentence. */
	.pipeline-step--pay {
		grid-template-columns: 1fr;
		padding: max(0px, calc(var(--pipe-img) / 2 - 17px)) 0 0 28px;
	}
	.pipeline-pay-mark {
		top: max(0px, calc(var(--pipe-img) / 2 - 17px));
		left: calc(var(--pipe-dot) / 2 - 17px);
		width: 34px;
		height: 34px;
	}
	.pipeline-step--pay::after {
		top: calc(max(0px, var(--pipe-img) / 2 - 17px) + 17px);
		bottom: auto;
		left: calc(var(--pipe-dot) / 2 + 17px);
		width: 12px;
		height: 1px;
	}
	.pipeline-pay-icon {
		width: 18px;
		height: 18px;
	}
	html[data-blue-style] #section-pipeline .pipeline-step--pay p {
		position: static;
		grid-column: 1;
		display: flex;
		align-items: center;
		width: auto;
		min-height: 34px;
		padding: 0 0 0 14px;
		font-size: 14px;
		text-align: left;
		text-wrap: pretty;
	}
}
/* Portrait tablets: clear of the chapter rail, larger images. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
	html[data-blue-style] #section-pipeline .pipeline-page {
		padding-inline: var(--content-rail-clear) !important;
	}
	html[data-blue-style] #section-pipeline .pipeline-page {
		--pipe-img: 96px;
	}
	.pipeline-steps {
		--pipe-gap: 20px;
	}
	.pipeline-step h3 {
		font-size: 17px;
	}
	.pipeline-step p {
		font-size: 15px;
	}
	html[data-blue-style] #section-pipeline .pipeline-step--pay p {
		font-size: 17px;
	}
}
/* Short phones: smaller images and type so the six rows fit between the bars. */
@media (max-width: 760px) and (max-height: 700px) {
	/* !important: the shared phone frame (blue-responsive.css) sets these with !important. */
	html[data-blue-style] #section-pipeline .pipeline-page {
		justify-content: safe center !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
	}
	html[data-blue-style] #section-pipeline .pipeline-title {
		gap: 10px;
		margin-bottom: 0;
		font-size: 16px;
	}
	html[data-blue-style] #section-pipeline .pipeline-page {
		--pipe-img: 40px;
		--pipe-term: 20px;
	}
	.pipeline-steps {
		--pipe-gap: 8px;
	}
	.pipeline-step h3,
	.pipeline-num {
		font-size: 13px;
	}
	.pipeline-step p {
		font-size: 12px;
		line-height: 1.3;
	}
	html[data-blue-style] #section-pipeline .pipeline-step--pay p {
		font-size: 12px;
		line-height: 1.35;
	}
}
/* Short landscape screens: the columns stay, the images shrink. */
@media (max-height: 570px) and (min-width: 761px) {
	html[data-blue-style] #section-pipeline .pipeline-page {
		gap: 10px;
		padding: 56px 56px 60px 72px;
	}
	html[data-blue-style] #section-pipeline .pipeline-title {
		font-size: 18px;
	}
	.pipeline-step {
		padding-top: 24px;
		row-gap: 2px;
	}
	/* No room above the line here: the stem and the sentence hang under the disc. */
	.pipeline-step--pay {
		--pipe-stem: 6px;
		--pipe-note: 180px;
	}
	.pipeline-step--pay::after {
		top: calc(var(--pipe-dot) / 2 + var(--pipe-disc));
		bottom: auto;
	}
	html[data-blue-style] #section-pipeline .pipeline-step--pay p {
		top: calc(var(--pipe-dot) / 2 + var(--pipe-disc) + var(--pipe-stem) + 4px);
		bottom: auto;
		font-size: 13px;
		line-height: 1.3;
	}
	html[data-blue-style] #section-pipeline .pipeline-page {
		--pipe-img: 13vh;
	}
	.pipeline-step img {
		margin-bottom: 2px;
	}
	.pipeline-step h3,
	.pipeline-num {
		font-size: 14px;
	}
	.pipeline-step p {
		font-size: 12px;
		line-height: 1.35;
	}
}

/* The film chapter, first after the hero: the four promises on the left, the vertical film
   in a phone on the right (stacked on a phone). The phone is the chapter's only visual: the
   particle field fades out while it is on screen. List and phone share one vertical centre and sit
   evenly: left margin, middle gap and right margin equal. */
:root:has(#section-video.is-active) #stage {
	opacity: 0 !important;
	transition: opacity 0.45s ease;
	pointer-events: none !important;
}
html[data-blue-style] #section-video .video-page {
	display: grid;
	/* The list column hugs its text up to 34rem, so the three spacers come out equal. */
	grid-template-columns:
		minmax(var(--content-rail-clear), 1fr) fit-content(34rem)
		minmax(2rem, 1fr) auto minmax(2rem, 1fr);
	align-items: center;
	column-gap: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--content-zone-top) 0 var(--content-zone-bottom);
	box-sizing: border-box;
	text-align: left;
}
html[data-blue-style] #section-video .video-copy {
	grid-column: 2;
}
html[data-blue-style] #section-video .video-phone {
	grid-column: 4;
}
/* The four promises: one line each, a bare line icon in the ink colour (no tile behind
   it) and the key words bold in the same ink, at lead size: no accent colour in the list.
   Icons are CSS masks so a language swap keeps them. */
html[data-blue-style] #section-video .video-points {
	display: grid;
	gap: clamp(1.4rem, 3.2vh, 2.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--section-text);
	font-weight: 500;
	line-height: var(--section-text-lh);
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: pretty;
}
html[data-blue-style] #section-video .video-points li {
	display: grid;
	grid-template-columns: 1.5em minmax(0, 1fr);
	column-gap: 0.9em;
	align-items: center;
	margin: 0;
	padding: 0;
}
html[data-blue-style] #section-video .video-points li::before {
	content: "";
	grid-area: 1 / 1;
	place-self: center;
	width: 1.3em;
	height: 1.3em;
	background: var(--ink);
	mask: var(--icon) center / contain no-repeat;
}
html[data-blue-style] #section-video .video-points b {
	font-weight: 700;
	color: var(--ink);
}
html[data-blue-style] #section-video .video-points li:nth-child(1) {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}
html[data-blue-style] #section-video .video-points li:nth-child(2) {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9.5 2h5'/%3E%3C/svg%3E");
}
html[data-blue-style] #section-video .video-points li:nth-child(3) {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-3.6 8-10V5l-8-3-8 3v7c0 6.4 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
html[data-blue-style] #section-video .video-points li:nth-child(4) {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
html[data-blue-style] #section-video .video-play:focus-visible {
	outline: 2px solid var(--blue-accent);
	outline-offset: 3px;
}
/* The phone: a thin dark bezel around the 576x1024 film, about 70% of the viewport tall. */
#section-video .video-phone {
	position: relative;
	height: min(
		70vh,
		calc(100dvh - var(--content-zone-top) - var(--content-zone-bottom))
	);
	aspect-ratio: 596 / 1044;
	padding: 10px;
	border-radius: 44px;
	background: linear-gradient(155deg, #1d2d33, #081216 60%, #0f1b20);
	border: 1px solid color-mix(in oklab, var(--blue-accent) 28%, #081216);
	box-shadow:
		0 24px 60px -18px rgba(3, 12, 16, 0.55),
		0 2px 6px rgba(3, 12, 16, 0.3);
	box-sizing: border-box;
}
[data-blue-theme="dark"] #section-video .video-phone {
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06),
		0 24px 70px -20px
		color-mix(in oklab, var(--blue-secondary) 35%, transparent);
}
#section-video .video-film {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 34px;
	background: #081216;
}
#section-video .video-play {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: 0 0 0 4px;
	border: 1px solid color-mix(in oklab, var(--blue-accent) 40%, transparent);
	border-radius: 50%;
	background: color-mix(in oklab, #081216 72%, transparent);
	color: #ffffff;
	cursor: pointer;
}
#section-video .video-play[hidden] {
	display: none;
}
@media (hover: hover) and (pointer: fine) {
	#section-video .video-play:hover {
		background: color-mix(in oklab, var(--blue-accent) 55%, #081216);
	}
}
/* Phone width: the words above, the phone below, between the header and the bottom bar. */
@media (max-width: 900px), (max-height: 570px) {
	html[data-blue-style][data-scroll-site] #section-video .video-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 24px !important;
		padding: calc(var(--scroll-header, 64px) + 22px) var(--scroll-gutter, 20px)
			calc(var(--scroll-footer, 72px) + 22px) !important;
		text-align: center;
	}
	html[data-blue-style] #section-video .video-points {
		gap: 1.1rem;
		max-width: 24rem;
		text-align: left;
		text-wrap: pretty;
	}
	#section-video .video-phone {
		flex: 1 1 0;
		height: auto;
		min-height: 0;
		max-width: 100%;
		padding: 7px;
		border-radius: 30px;
	}
	#section-video .video-film {
		border-radius: 23px;
	}
}

/* Buttons in the Colibri app's treatment (GTM app/style_controls.css btn-gradient, app/globals.css reply-area wash),
   on the site's own colours: --btn is the button's colour (the teal accent, or the red secondary for the menu call to action).
   Primary: the colour's matte drift, lit at the top left and warm at the bottom right, a darker hairline, a soft shadow.
   Secondary: the card's white (a faint lift of the night background in dark) with the same teal and warm hints and a teal hairline. */
html[data-blue-style] {
	--btn-card: #ffffff;
	--btn-warm: #c8a46a;
	--btn-drift: 26%;
}
html[data-blue-style][data-blue-theme="dark"] {
	--btn-card: color-mix(in oklab, var(--blue-bg), white 7%);
	--btn-warm: #8a6a33;
	/* The light teal of the night theme turns khaki under the full warm share. */
	--btn-drift: 10%;
}
html[data-blue-style]
	:is(
		.booking-form .audit-send,
		.booking-day[aria-pressed="true"],
		.blue-audit-content .mc-ob__continue,
		.proof-dialog .proof-cta
	),
:root[data-blue-button="solid"] #bar .menu-item--primary {
	--btn: var(--blue-accent);
	background-color: var(--btn) !important;
	background-image: linear-gradient(
		155deg,
		color-mix(in oklab, var(--btn), white 10%) 0%,
		var(--btn) 55%,
		color-mix(in oklab, var(--btn), #8a6a33 var(--btn-drift)) 100%
	) !important;
	border: 1px solid color-mix(in oklab, var(--btn), black 14%) !important;
	box-shadow: 0 1px 2px color-mix(in oklab, var(--btn) 22%, transparent);
	color: var(--blue-accent-text);
	transition:
		filter 0.15s,
		translate 0.1s;
}
html[data-blue-style]
	:is(.blue-audit-content .mc-ob__continue, .proof-dialog .proof-cta),
:root[data-blue-button="solid"] #bar .menu-item--primary {
	--btn: var(--blue-secondary);
}
:root[data-blue-button]:not([data-blue-button="text"])
	#bar
	.menu-item--primary {
	align-self: center;
	min-height: 2.75rem;
	padding: 0 18px;
}
:root[data-blue-button]:not([data-blue-button="text"])
	#bar
	.menu-item--primary::after {
	display: none;
}
:root[data-blue-button="solid"] #bar .menu-item--primary {
	color: #ffffff !important;
}
:root[data-blue-theme="dark"][data-blue-button="solid"]
	#bar
	.menu-item--primary {
	color: var(--blue-bg) !important;
}
html[data-blue-style]
	:is(
		.booking-day:not([aria-pressed="true"]),
		.booking-slot,
		.replay-consent button
	),
:root[data-blue-button="outline"] #bar .menu-item--primary {
	background-image: linear-gradient(
		155deg,
		color-mix(in oklab, var(--btn-card), var(--blue-accent) 8%) 0%,
		var(--btn-card) 55%,
		color-mix(in oklab, var(--btn-card), var(--btn-warm) 18%) 100%
	);
	border: 1px solid
		color-mix(in oklab, var(--blue-accent) 16%, var(--line-strong));
	color: var(--ink);
	transition:
		border-color 0.15s,
		translate 0.1s;
}
:root[data-blue-button="outline"] #bar .menu-item--primary {
	color: var(--blue-secondary) !important;
}
@media (hover: hover) and (pointer: fine) {
	html[data-blue-style]
		:is(
			.booking-form .audit-send,
			.booking-day[aria-pressed="true"],
			.blue-audit-content .mc-ob__continue
		):hover:not(:disabled),
	:root[data-blue-button="solid"] #bar .menu-item--primary:hover {
		filter: brightness(1.1) saturate(1.05);
	}
	html[data-blue-style]
		:is(
			.booking-day:not([aria-pressed="true"]),
			.booking-slot,
			.replay-consent button
		):hover:not(:disabled),
	:root[data-blue-button="outline"] #bar .menu-item--primary:hover {
		background-color: transparent;
		background-image: linear-gradient(
			155deg,
			color-mix(in oklab, var(--btn-card), var(--blue-accent) 16%) 0%,
			color-mix(in oklab, var(--btn-card), var(--blue-accent) 5%) 55%,
			color-mix(in oklab, var(--btn-card), var(--btn-warm) 30%) 100%
		);
		border-color: color-mix(
			in oklab,
			var(--blue-accent) 36%,
			var(--line-strong)
		);
		color: var(--ink);
	}
}
html[data-blue-style]
	:is(
		.booking-day,
		.booking-slot,
		.booking-form .audit-send,
		.replay-consent button,
		.blue-audit-content .mc-ob__continue
	):active:not(:disabled),
:root[data-blue-button]:not([data-blue-button="text"])
	#bar
	.menu-item--primary:active {
	transform: none;
	translate: 0 1px;
}
html[data-blue-style]
	:is(
		.booking-day,
		.booking-slot,
		.booking-form .audit-send,
		.replay-consent button,
		.blue-audit-content .mc-ob__continue
	):focus-visible,
:root[data-blue-button]:not([data-blue-button="text"])
	#bar
	.menu-item--primary:focus-visible {
	outline: 2px solid var(--blue-accent);
	outline-offset: 2px;
}
html[data-blue-style] :is(.booking-page, .booking-form .audit-send):disabled {
	opacity: 0.5;
	cursor: not-allowed;
	filter: none;
}
@media (prefers-reduced-motion: reduce) {
	html[data-blue-style]
		:is(
			.booking-day,
			.booking-slot,
			.booking-form .audit-send,
			.replay-consent button,
			.blue-audit-content .mc-ob__continue
		),
	#bar .menu-item--primary {
		transition: none;
	}
}
/* The site's arrow control: an arrow in the secondary colour (red in light, turquoise in dark) in a thin tinted ring, filled
   with the contrasting arrow on hover. Each context sets its own size. */
html[data-blue-style]
	:is(
		.testi-controls button,
		.scroll-arrows button,
		.scroll-work-controls button,
		.booking-page
	) {
	--arrow-ring: color-mix(in srgb, var(--blue-secondary) 38%, transparent);
	display: grid;
	min-width: 44px;
	min-height: 44px;
	place-items: center;
	padding: 0;
	border: 1px solid var(--arrow-ring);
	border-radius: 50%;
	background: transparent;
	color: var(--blue-secondary);
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}
html[data-blue-style][data-blue-theme="dark"]
	:is(
		.testi-controls button,
		.scroll-arrows button,
		.scroll-work-controls button,
		.booking-page
	) {
	--arrow-ring: color-mix(in srgb, var(--blue-secondary) 75%, transparent);
	background: color-mix(in srgb, var(--blue-secondary) 10%, transparent);
}
@media (hover: hover) and (pointer: fine) {
	html[data-blue-style]
		:is(
			.testi-controls button,
			.scroll-arrows button,
			.scroll-work-controls button,
			.booking-page
		):hover:not(:disabled) {
		border-color: var(--blue-secondary);
		background: var(--blue-secondary);
		color: var(--blue-on-secondary);
	}
}
html[data-blue-style]
	:is(
		.testi-controls button,
		.scroll-arrows button,
		.scroll-work-controls button,
		.booking-page
	):active:not(:disabled) {
	border-color: var(--blue-secondary);
	background: var(--blue-secondary);
	color: var(--blue-on-secondary);
}
html[data-blue-style]
	:is(
		.testi-controls button,
		.scroll-arrows button,
		.scroll-work-controls button,
		.booking-page
	):focus-visible {
	outline: 2px solid var(--blue-secondary);
	outline-offset: 3px;
}
/* The booking button fades out while its own booking section is on screen (the bar marks it current there). */
:root #bar .menu-item--primary,
:root[data-blue-button] #bar .menu-item--primary {
	transition:
		opacity 0.4s ease,
		visibility 0.4s,
		filter 0.15s,
		translate 0.1s;
}
:root #bar .menu-item--primary:is([aria-current="true"], [aria-current="page"]),
:root[data-blue-button]
	#bar
	.menu-item--primary:is([aria-current="true"], [aria-current="page"]) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	:root[data-blue-button] #bar .menu-item--primary {
		transition: none;
	}
}

/* One portrait system for testimonials and founders. The published papers rule
   the page with lines 17px and 23px apart: every diameter is a whole number of
   23px cells, and blue-paper-grid.js puts each centre on an intersection through
   --paper-x and --paper-y, moving the composition so a portrait stays centred. */
html[data-blue-style] #section-testimonials .testi-page {
	translate: var(--paper-x, 0) var(--paper-y, 0);
}
/* Founders: one screen per founder, one composition for both. Both screens stay
   laid out in the same grid, the one off show only invisible, and they share its
   rows through subgrid: the longer bio sizes the row for the shorter one, so no
   element moves between Benjamin and Romain in any language. Photo, text and
   particle figure each own a column, so the figure never reaches the text. */
html[data-blue-style][data-scroll-site] #section-studio {
	--founder-size: 322px;
	--founder-copy: clamp(30rem, 34vw, 38rem);
	--founder-fig: clamp(
		min(120px, var(--founder-size)),
		100vw -
		var(--founder-size) -
		var(--founder-copy) -
		128px,
		var(--founder-size)
	);
	--founder-gap: max(
		16px,
		(100vw - var(--founder-size) - var(--founder-copy) - var(--founder-fig)) /
		4
	);
	--founder-name: clamp(2.2rem, 3vw, 3.2rem);
	--founder-text: var(--section-text);
}
html[data-blue-style][data-scroll-site] #section-studio .stage-team {
	display: grid !important;
	grid-template-columns: var(--founder-size) var(--founder-copy) var(
			--founder-fig
		);
	grid-template-rows: 1fr repeat(6, auto) 1fr;
	gap: 0 var(--founder-gap) !important;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 62px var(--founder-gap) 90px !important;
	box-sizing: border-box;
	text-align: left;
}
html[data-blue-style][data-scroll-site] #section-studio .brains-figure {
	position: static;
	grid-column: 3;
	grid-row: 1 / -1;
	place-self: center;
	width: var(--founder-fig);
	height: var(--founder-fig);
	visibility: hidden;
	pointer-events: none;
}
html[data-blue-style][data-scroll-site] #section-studio .studio-swap {
	display: grid;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	gap: normal;
	min-height: 0;
	translate: var(--paper-x, 0) var(--paper-y, 0);
}
html[data-blue-style][data-scroll-site] #section-studio .stage-founder,
html[data-blue-style][data-scroll-site] #section-studio .stage-founder[hidden] {
	display: grid !important;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	grid-template-areas:
		"photo . ."
		"photo name ."
		"photo role ."
		"photo bio ."
		"photo links ."
		"photo . ."
		"photo . ."
		"photo . .";
	align-items: stretch;
	gap: normal;
	width: auto;
	max-width: none;
	margin: 0;
	text-align: inherit;
}
html[data-blue-style][data-scroll-site] #section-studio .stage-founder[hidden] {
	visibility: hidden;
}
html[data-blue-style][data-scroll-site] #section-studio .ph {
	grid-area: photo;
	place-self: center;
	width: var(--founder-size);
	height: var(--founder-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
}
html[data-blue-style][data-scroll-site] #section-studio .ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: none;
}
html[data-blue-style][data-scroll-site] #section-studio .fd-name {
	grid-area: name;
	margin: 0;
	color: var(--blue-text);
	font-size: var(--founder-name) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	text-align: inherit;
}
html[data-blue-style][data-scroll-site] #section-studio .fd-role {
	grid-area: role;
	text-wrap: balance;
	margin: 8px 0 0;
	color: var(--blue-muted);
	font-size: var(--founder-text);
	line-height: 1.35;
	text-align: inherit;
}
html[data-blue-style][data-scroll-site] #section-studio .fd-bio-original {
	grid-area: bio;
	max-width: none !important;
	margin: 20px 0 0;
	color: var(--blue-muted);
	font-size: var(--founder-text) !important;
	line-height: var(--section-text-lh) !important;
	text-align: inherit;
}
html[data-blue-style][data-scroll-site] #section-studio .fd-linkedin {
	grid-area: links;
	margin: 14px 0 0;
	text-align: inherit;
}
html[data-blue-style][data-scroll-site] #section-studio .studio-meta {
	display: flex;
	flex-wrap: wrap;
	grid-column: 2;
	grid-row: 6;
	gap: 4px 16px;
	width: 100%;
	max-width: none;
	margin: 22px 0 0;
	text-align: inherit;
	translate: var(--paper-x, 0) var(--paper-y, 0);
}
html[data-blue-style][data-scroll-site] #section-studio .studio-controls {
	display: flex;
	grid-column: 2;
	grid-row: 7;
	gap: 14px;
	align-items: center;
	margin-top: 22px;
	translate: var(--paper-x, 0) var(--paper-y, 0);
}
@media (min-width: 1700px) and (min-height: 1000px) {
	html[data-blue-style][data-scroll-site] #section-studio {
		--founder-size: 368px;
	}
}
@media (max-height: 850px) {
	html[data-blue-style][data-scroll-site] #section-studio {
		--founder-size: 276px;
	}
}
@media (max-width: 1100px) {
	html[data-blue-style][data-scroll-site] #section-studio {
		--founder-size: 230px;
	}
}
/* Under the desktop frame the chapter sits between the bars and scrolls alone. */
@media (max-width: 900px), (max-height: 570px) {
	html[data-blue-style][data-scroll-site] #section-studio {
		--founder-name: clamp(1.6rem, 7vw, 2.2rem);
	}
	html[data-blue-style][data-scroll-site] #section-studio .stage-team {
		position: absolute;
		inset: var(--scroll-header) 0
			calc(var(--scroll-footer) + var(--scroll-controls));
		height: auto !important;
		padding-block: 12px !important;
		overflow: hidden auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
	}
}
/* The figure owns its zone beside the portrait here, so the canvas is not cut
   to the band under the copy that other chapters use. */
@media (max-width: 899px) {
	:root:has(#section-studio.is-active) #stage {
		clip-path: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
}
/* Landscape phones: the two columns stay, with a four-cell portrait. */
@media (max-height: 570px), (max-width: 900px) and (orientation: landscape) {
	html[data-blue-style][data-scroll-site] #section-studio {
		--founder-size: 92px;
		--founder-copy: min(66vw, 34rem);
		--founder-name: 24px;
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-role {
		margin-top: 2px;
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-bio-original {
		margin-top: 6px;
		line-height: 1.4 !important;
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-linkedin {
		margin-top: 2px;
	}
	html[data-blue-style][data-scroll-site] #section-studio .studio-meta {
		margin-top: 4px;
	}
}
/* Portrait screens: one column, portrait centred and text left-aligned, the rows
   still shared by both founders. */
@media (max-width: 900px) and (orientation: portrait) {
	html[data-blue-style][data-scroll-site] #section-studio {
		--founder-size: 276px;
		--founder-copy: 34rem;
		--founder-pad: 44px;
	}
	html[data-blue-style][data-scroll-site] #section-studio .stage-team {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: safe center !important;
		gap: 14px !important;
		padding-inline: var(--founder-pad) !important;
	}
	/* One centred column: the paper snap moves it vertically only, never toward an edge. */
	html[data-blue-style][data-scroll-site]
		#section-studio
		:is(.studio-swap, .studio-meta, .studio-controls) {
		translate: 0 var(--paper-y, 0);
	}
	html[data-blue-style][data-scroll-site] #section-studio .studio-swap {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(5, auto);
		width: 100%;
		max-width: var(--founder-copy);
		margin-inline: auto;
	}
	html[data-blue-style][data-scroll-site] #section-studio .stage-founder,
	html[data-blue-style][data-scroll-site]
		#section-studio
		.stage-founder[hidden] {
		grid-template-areas: "photo" "name" "role" "bio" "links";
	}
	html[data-blue-style][data-scroll-site] #section-studio .studio-meta {
		max-width: var(--founder-copy);
		margin: 0 auto;
	}
	/* The portrait moves to the left of its row and the figure takes the
	   right of the same row: its negative bottom margin gives the row back.
	   The box stops 32px above the row's foot, so the figure's drawn edge
	   stays clear of the name below. */
	html[data-blue-style][data-scroll-site] #section-studio .brains-figure {
		--founder-fig: calc(var(--founder-size) - 32px);
		flex: none;
		width: var(--founder-size);
		height: var(--founder-fig);
		margin: 0 max(0px, (100% - var(--founder-copy)) / 2)
			calc(-14px - var(--founder-fig)) auto;
	}
	html[data-blue-style][data-scroll-site] #section-studio .ph {
		justify-self: start;
	}
	html[data-blue-style][data-scroll-site] #section-studio .studio-controls {
		width: 100%;
		max-width: var(--founder-copy);
		margin: 0 auto;
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-name {
		margin-top: 14px;
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-bio-original {
		margin-top: 12px;
	}
}
@media (max-width: 480px) and (orientation: portrait) {
	html[data-blue-style][data-scroll-site] #section-studio {
		--founder-size: 161px;
		--founder-pad: var(--scroll-gutter);
	}
}
@media (max-width: 900px) and (max-height: 760px) and (orientation: portrait) {
	html[data-blue-style][data-scroll-site] #section-studio {
		--founder-size: 115px;
	}
}
@media (max-width: 900px) and (max-height: 640px) and (orientation: portrait) {
	html[data-blue-style][data-scroll-site] #section-studio {
		--founder-size: 69px;
	}
}
/* Without a graphics card no particle figure draws in the third column: photo
   and text become one pair centred on the page, three equal gaps around it. */
@media (min-width: 901px) and (min-height: 571px) {
	html[data-blue-style][data-scroll-site][data-blue-render="software"]
		#section-studio {
		--founder-fig: 0px;
		--founder-gap: max(
			16px,
			(100vw - var(--founder-size) - var(--founder-copy)) /
			3
		);
	}
	html[data-blue-style][data-scroll-site][data-blue-render="software"]
		#section-studio
		.stage-team {
		padding-right: 0 !important;
	}
}
/* Contact facts: the links and the facts share one two-column grid, every
   link in one style, each fact led by a bare line icon. */
html[data-blue-style][data-scroll-site] #section-studio .fd-linkedin,
html[data-blue-style][data-scroll-site] #section-studio .studio-meta {
	display: grid;
	/* The first column holds the mail address, the longest fact. */
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 14px 24px;
	align-items: center;
	color: var(--blue-text);
	font-size: var(--founder-text);
	font-weight: 400;
	line-height: 1.4;
}
html[data-blue-style][data-scroll-site] #section-studio .studio-meta > * {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
	margin: 0;
	white-space: nowrap;
}
html[data-blue-style][data-scroll-site]
	#section-studio
	:is(.fd-linkedin, .studio-meta)
	a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
	padding: 0;
	border: 0;
	color: var(--blue-text);
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
html[data-blue-style][data-scroll-site]
	#section-studio
	:is(.fd-linkedin, .studio-meta)
	a:is(:hover, :focus-visible) {
	color: var(--blue-text);
	text-decoration-color: var(--blue-secondary);
}
html[data-blue-style][data-scroll-site]
	#section-studio
	:is(.fd-linkedin a, .studio-meta > *)::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--blue-muted);
	-webkit-mask: var(--fact-icon) center / contain no-repeat;
	mask: var(--fact-icon) center / contain no-repeat;
}
#section-studio .studio-meta > span:nth-child(1) {
	--fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}
#section-studio .studio-meta > span:nth-child(2) {
	--fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V8l8-5 8 5v13z'/%3E%3Cpath d='M9 21v-6h6v6M9 10h.01M15 10h.01'/%3E%3C/svg%3E");
}
#section-studio .studio-meta > a[href^="mailto:"] {
	--fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
}
#section-studio .studio-meta > a[href^="tel:"] {
	--fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.5l1.8 4.5-2.3 1.5a11 11 0 0 0 6.5 6.5l1.5-2.3 4.5 1.8V19a1.5 1.5 0 0 1-1.6 1.5A17 17 0 0 1 3.5 5.1 1.5 1.5 0 0 1 5 3.5z'/%3E%3C/svg%3E");
}
#section-studio .fd-linkedin a[href*="linkedin.com"] {
	--fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M8 10.5V17M8 7.5v.01M12 17v-6.5M12 13.5c0-1.7 1-3 2.5-3S17 11.5 17 13v4'/%3E%3C/svg%3E");
}
#section-studio .fd-linkedin a:not([href*="linkedin.com"]) {
	--fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}
/* Every row of facts sits one row gap below the last: on a computer the facts
   row follows the links row by that gap, on touch screens every fact keeps the
   44px row its links need. */
@media (min-width: 901px) and (min-height: 571px) {
	html[data-blue-style][data-scroll-site] #section-studio .studio-meta {
		margin-top: 14px;
	}
}
@media (pointer: coarse) {
	html[data-blue-style][data-scroll-site] #section-studio .studio-meta > span {
		min-height: 44px;
	}
}
/* Phones: the facts stack one per row on one left edge; a founder's links share
   one row, so a founder without a site leaves no hole in the list. */
@media (max-width: 480px) {
	html[data-blue-style][data-scroll-site] #section-studio .studio-meta {
		grid-template-columns: minmax(0, 1fr);
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-linkedin {
		grid-template-columns: repeat(2, max-content);
	}
}
/* The contact rows start one clear step below the bio, never at its line pitch. */
html[data-blue-style][data-scroll-site] #section-studio .fd-linkedin {
	align-content: start;
	margin-top: 32px;
}
/* Night mode: a light hairline keeps the round portrait whole on the dark sky,
   as the booking photos do. */
html[data-blue-style][data-scroll-site][data-blue-theme="dark"]
	#section-studio
	.ph {
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55);
}
/* The particle layer centres an emblem on its ink mass: the quill's mass sits
   right of its outline, so its box moves right to centre the outline in the
   column as the gear's is. */
@media (min-width: 901px) and (min-height: 571px) {
	html[data-blue-style][data-scroll-site]
		#section-studio:has(#studio-view-romain:not([hidden]))
		.brains-figure {
		translate: 19px 0;
	}
}

/* The pay note's link: under its sentence, inside the note's own box, so it follows
   the note wherever a viewport places it. */
html[data-blue-style] #section-pipeline .pay-how-link {
	position: relative;
	display: block;
	width: fit-content;
	margin: 2px auto 0;
	padding: 0;
	font: inherit;
	font-weight: 400;
	color: var(--blue-secondary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	cursor: pointer;
}
html[data-blue-style] #section-pipeline .pay-how-link::after {
	content: "";
	position: absolute;
	inset: -8px -6px;
}
html[data-blue-style] #section-pipeline .pay-how-link:hover {
	text-decoration-thickness: 2px;
}
html[data-blue-style] #section-pipeline .pay-how-link:focus-visible {
	outline: 2px solid var(--blue-secondary);
	outline-offset: 3px;
	border-radius: 2px;
}
html[data-blue-style] #section-pipeline .pay-how-gear {
	position: absolute;
	top: auto;
	right: auto;
	bottom: calc(100% + 4px);
	left: calc(50% - 20px);
}
/* Phones: the note is a row beside the disc. The link hangs under the sentence, out of
   the flow, so the rows above and the disc keep their place. */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
	html[data-blue-style] #section-pipeline .pipeline-step--pay p {
		position: relative;
		inset: auto;
	}
	html[data-blue-style] #section-pipeline .pay-how-link {
		position: absolute;
		top: 100%;
		left: 14px;
		margin: 0;
		text-align: left;
	}
	html[data-blue-style] #section-pipeline .pay-how-gear {
		right: 0;
		bottom: -44px;
		left: auto;
	}
}
/* Short landscape: the note hangs under the disc against step 5's title, so the link
   sits beside the disc, in the free end of the line. */
@media (max-height: 570px) and (min-width: 761px) {
	html[data-blue-style] #section-pipeline .pay-how-link {
		position: absolute;
		bottom: calc(100% + 8px);
		left: calc(50% + 32px);
		width: 96px;
		margin: 0;
		line-height: 1.2;
		text-align: left;
	}
}
.blue-dialog.pay-how-dialog {
	padding: 0;
}
.pay-how-body {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 26px;
}
.pay-how-dialog h2 {
	margin-bottom: 14px;
}
.pay-how-dialog .blue-dialog-scroll p {
	margin: 0 0 12px;
}
.pay-how-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 4px;
}

/* The hero's "productivité" link and the studies dialog it opens. The accent is the
   theme's own: turquoise in dark, the Monaco red in light. */
html[data-blue-style] .hero-sub [data-proof-open] {
	pointer-events: auto;
	cursor: pointer;
	border-radius: 3px;
	transition: text-decoration-thickness 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
	html[data-blue-style] .hero-sub [data-proof-open]:hover {
		text-decoration-thickness: 0.16em;
	}
}
html[data-blue-style] .hero-sub [data-proof-open]:focus-visible {
	outline: 2px solid var(--blue-secondary);
	outline-offset: 3px;
}
.blue-dialog.proof-dialog {
	--proof-surface: #071c2e;
	width: min(1120px, calc(100vw - 48px));
	max-height: min(820px, calc(100dvh - 80px));
	padding: 0;
	border-radius: 20px;
}
.proof-dialog[open] {
	animation: proof-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes proof-in {
	from {
		opacity: 0;
		transform: translate(-50%, calc(-50% + 18px)) scale(0.98);
	}
}
/* The close button's band stays put; the content scrolls under it, never beneath the button. */
.proof-bar {
	display: flex;
	flex-shrink: 0;
	justify-content: flex-end;
	position: relative;
	z-index: 1;
	margin-bottom: -60px;
	padding: 40px 40px 0;
}
.blue-dialog.proof-dialog .proof-close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
}
.proof-body {
	padding: 18px 40px 40px;
	/* Rows scrolling up fade out under the close band instead of meeting a hard edge. */
	--proof-fade-top: 18px;
	mask:
		linear-gradient(
			to bottom,
			transparent,
			rgb(0 0 0 / 0.08) 18%,
			rgb(0 0 0 / 0.3) 40%,
			rgb(0 0 0 / 0.62) 62%,
			rgb(0 0 0 / 0.88) 82%,
			#000
		)
		top / 100% var(--proof-fade-top) no-repeat,
		linear-gradient(#000, #000) 0 var(--proof-fade-top) / 100%
		calc(100% - var(--proof-fade-top) - 28px) no-repeat,
		linear-gradient(
			to top,
			transparent,
			rgb(0 0 0 / 0.08) 18%,
			rgb(0 0 0 / 0.3) 40%,
			rgb(0 0 0 / 0.62) 62%,
			rgb(0 0 0 / 0.88) 82%,
			#000
		)
		bottom / 100% 28px no-repeat;
}
:root:not([data-blue-theme="light"]) .blue-dialog.proof-dialog .proof-cta {
	color: #031321;
}
.blue-dialog.proof-dialog h2 {
	margin: 0 56px 12px 0;
	font-size: clamp(26px, 2.5vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	outline: none;
}
.blue-dialog.proof-dialog h2 span {
	display: block;
	text-wrap: balance;
}
.blue-dialog.proof-dialog h2 span + span {
	opacity: 1;
}
.blue-dialog.proof-dialog h2 {
	color: inherit;
}
:root .blue-dialog.proof-dialog .proof-lede {
	color: inherit;
	opacity: 0.78;
	max-width: 70ch;
	margin: 0 0 20px;
	font-size: var(--section-text, 17px);
	line-height: var(--section-text-lh, 1.55);
	text-wrap: pretty;
}
/* Gains beside losses, equal heights; figures stand on the surface in the text colour. */
.proof-split {
	display: grid;
	/* Three equal study columns, 40px between texts and 40px each side of the divider. */
	grid-template-columns: calc((100% - 121px) * 2 / 3 + 40px) minmax(0, 1fr);
	gap: 40px;
}
.proof-side {
	display: flex;
	flex-direction: column;
}
.blue-dialog.proof-dialog .proof-side h3 {
	margin: 0 0 16px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	font-stretch: normal;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.3;
}
.proof-end {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 32px;
	padding-top: 40px;
	border-top: 1px solid var(--line-strong);
}
.proof-side--loss {
	padding-left: 40px;
	border-left: 1px solid #ffffff24;
}
:root[data-blue-theme="light"]
	:is(.proof-side--loss, .proof-dialog .proof-pragma) {
	border-color: var(--line-strong);
}
.proof-side ol {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.proof-side--loss ol {
	grid-template-columns: 1fr;
}
@media (min-width: 761px) {
	.proof-split {
		grid-template-rows: auto auto auto;
		row-gap: 24px;
	}
	.proof-side {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
	}
	.blue-dialog.proof-dialog .proof-side h3 {
		margin: 0;
	}
	.proof-side ol {
		grid-row: span 2;
		grid-template-rows: subgrid;
	}
}
/* Centred on the figure's cap height. */
.proof-trend {
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.12em;
	vertical-align: 0.1em;
}
.proof-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.proof-figure {
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.blue-dialog.proof-dialog .proof-row p {
	margin: 0;
	font-size: var(--section-text, 16px);
	line-height: var(--section-text-lh, 1.5);
	text-wrap: pretty;
}
:root .blue-dialog.proof-dialog .proof-row p {
	color: inherit;
	opacity: 0.72;
}
.blue-dialog.proof-dialog .proof-row a {
	width: fit-content;
	font-size: 13.5px;
	color: inherit;
	opacity: 0.72;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-wrap: pretty;
}
.proof-nowrap {
	white-space: nowrap;
}
.blue-dialog.proof-dialog .proof-row a svg {
	margin-left: 3px;
	vertical-align: -1px;
}
@media (hover: hover) and (pointer: fine) {
	.blue-dialog.proof-dialog .proof-row a:hover {
		opacity: 1;
		text-decoration-thickness: 2px;
	}
}
/* The conclusion: a level up from the study notes, set apart by a rule. */
:root .blue-dialog.proof-dialog .proof-pragma {
	color: inherit;
	opacity: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	text-wrap: balance;
}
.proof-dock {
	display: none;
}
.proof-pragma span {
	display: block;
}
:root:not([data-blue-theme="light"]) .blue-dialog.proof-dialog::backdrop {
	background: rgb(2 13 24 / 70%);
}
.blue-dialog.proof-dialog .proof-cta {
	align-self: flex-start;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
	cursor: pointer;
}
/* Phones: a full-screen sheet rising from the bottom, gains then losses. */
@media (max-width: 760px) {
	.blue-dialog.proof-dialog,
	html[data-scroll-site] .blue-dialog.proof-dialog {
		inset: 0;
		transform: none;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border: 0;
		border-radius: 0;
	}
	.proof-dialog[open] {
		animation-name: proof-sheet;
	}
	@keyframes proof-sheet {
		from {
			transform: translateY(40px);
			opacity: 0;
		}
	}
	html[data-scroll-site] .blue-dialog.proof-dialog[open] {
		overflow: hidden;
	}
	/* Phones: no control floats over the text. The close button sits in a header row above the
	   scrolling text and the booking button in a dock below it, both always in reach. */
	.proof-end .proof-cta {
		display: none;
	}
	.proof-bar {
		margin: 0;
		padding: calc(20px + env(safe-area-inset-top)) 20px 0;
		margin-bottom: -20px;
	}
	.blue-dialog.proof-dialog[open] {
		display: flex;
		flex-direction: column;
	}
	.proof-dock {
		position: relative;
		display: flex;
		gap: 12px;
		padding: 4px 20px calc(20px + env(safe-area-inset-bottom));
	}
	.blue-dialog.proof-dialog .proof-dock .proof-cta {
		flex: 1;
		min-height: 52px;
		align-self: auto;
	}
	.proof-body {
		/* Lines leaving the top or bottom edge dissolve on an eased curve instead of being sliced; the
		   bottom fade lifts once the end is reached, so the last sentence is never washed. */
		--proof-fade-end: 56px;
		/* A resting row always starts just under the hidden top band, so no part of the row above shows. */
		scroll-snap-type: y proximity;
		scroll-padding-top: 36px;
		mask:
			linear-gradient(to bottom, transparent 0 30px, #000 36px) top / 100% 36px
			no-repeat,
			linear-gradient(#000, #000) 0 36px / 100%
			calc(100% - 36px - var(--proof-fade-end)) no-repeat,
			linear-gradient(
				to top,
				transparent,
				transparent 50%,
				rgb(0 0 0 / 0.04) 54%,
				rgb(0 0 0 / 0.1) 58%,
				rgb(0 0 0 / 0.19) 62%,
				rgb(0 0 0 / 0.3) 66%,
				rgb(0 0 0 / 0.43) 70%,
				rgb(0 0 0 / 0.56) 74%,
				rgb(0 0 0 / 0.69) 78%,
				rgb(0 0 0 / 0.8) 83%,
				rgb(0 0 0 / 0.89) 88%,
				rgb(0 0 0 / 0.95) 93%,
				rgb(0 0 0 / 0.99) 97%,
				#000
			)
			bottom / 100% var(--proof-fade-end) no-repeat;
		flex: 1;
		min-height: 0;
		padding: 36px 20px 32px;
	}
	.blue-dialog.proof-dialog h2 {
		margin-right: 0;
		font-size: 24px;
	}
	.proof-split {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.proof-end {
		align-items: flex-start;
		flex-direction: column;
		margin-top: 32px;
		padding-top: 28px;
	}
	.proof-side--loss {
		padding: 28px 0 0;
		border-left: 0;
		border-top: 1px solid #ffffff24;
	}
	.proof-side ol {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.proof-split {
		grid-template-columns: 1fr;
	}
	.proof-figure {
		font-size: 36px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.proof-dialog[open] {
		animation: none;
	}
}
:root[data-blue-theme="light"] .blue-dialog.proof-dialog {
	--proof-surface: var(--blue-bg);
}
:root[data-blue-theme="light"] .blue-dialog.proof-dialog .proof-pragma {
	border-color: var(--line-strong);
}
@media (max-width: 760px) {
	.proof-dialog.proof-at-end .proof-body {
		--proof-fade-end: 0px;
	}
}
@media (max-width: 760px) {
	.proof-body > h2,
	.proof-side h3,
	.proof-row,
	.proof-end {
		scroll-snap-align: start;
	}
}

/* The offer dialog (blue-offer.js): it wears the studies dialog's frame (blue-proof.css);
   these rules add its openers, the answer-time simulator and the three support levels. */
html[data-blue-style] #page-pipeline [data-plans-open] {
	pointer-events: auto;
	cursor: pointer;
}
html[data-blue-style] #page-pipeline .offer-link {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
}
html[data-blue-style] #page-pipeline [data-plans-open]:focus-visible {
	outline: 2px solid var(--blue-secondary);
	outline-offset: 3px;
	border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) {
	html[data-blue-style] #page-pipeline [data-plans-open]:hover {
		text-decoration-thickness: 0.14em;
	}
}
.offer-sim {
	display: grid;
	gap: 6px;
	margin: 0 0 28px;
	padding: 14px 22px;
	border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
	border-radius: 16px;
}
.offer-sim label {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	font-size: 15px;
}
.offer-sim output {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
/* A plain slider in the ink: filled up to the value (--p, set by blue-offer.js), round thumb. */
.offer-sim input {
	width: 100%;
	height: 22px;
	margin: 0;
	background: transparent;
	appearance: none;
	cursor: pointer;
}
.offer-sim input::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(
		to right,
		var(--offer-ink) var(--p),
		color-mix(in oklab, var(--offer-ink) 18%, transparent) var(--p)
	);
}
.offer-sim input::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(
		to right,
		var(--offer-ink) var(--p),
		color-mix(in oklab, var(--offer-ink) 18%, transparent) var(--p)
	);
}
.offer-sim input::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--offer-ink);
	appearance: none;
}
.offer-sim input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: var(--offer-ink);
}
.offer-sim input:focus-visible {
	outline: 2px solid var(--blue-secondary);
	outline-offset: 4px;
	border-radius: 4px;
}
/* Our work in the accent, each review's wait as a hatched gap that widens with the slider. */
.offer-line {
	display: flex;
	gap: 3px;
	height: 14px;
}
.offer-line i {
	border-radius: 4px;
	transition: flex-grow 0.25s ease;
}
/* Ink, not the accent: the button below stays the window's one accent. The ink is the
   dialog's text colour (blue-settings.css .blue-dialog), shared by the bars and their swatch. */
.blue-dialog.offer-dialog {
	--offer-ink: #eef5fa;
}
:root[data-blue-theme="light"] .blue-dialog.offer-dialog {
	--offer-ink: var(--blue-text);
}
.offer-work {
	flex: var(--work) 1 0;
	background: color-mix(in oklab, var(--offer-ink) 78%, transparent);
}
.offer-wait {
	flex: var(--wait) 1 0;
	background: repeating-linear-gradient(
		135deg,
		color-mix(in oklab, currentColor 30%, transparent) 0 3px,
		transparent 3px 6px
	);
}
:root .blue-dialog.offer-dialog .offer-legend {
	display: flex;
	gap: 20px;
	margin: 0;
	font-size: 13px;
	color: inherit;
	opacity: 1;
}
.offer-key {
	color: color-mix(in oklab, currentColor 72%, transparent);
}
.offer-key::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 8px;
	margin-right: 8px;
	border-radius: 2px;
	vertical-align: 1px;
}
.offer-key--work::before {
	background: color-mix(in oklab, var(--offer-ink) 78%, transparent);
}
.offer-key--wait::before {
	background: repeating-linear-gradient(
		135deg,
		color-mix(in oklab, currentColor 45%, transparent) 0 2px,
		transparent 2px 4px
	);
}
/* The result leads the simulator's last row; the legend sits at its end. */
.offer-sim-foot {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 20px;
}
.blue-dialog.offer-dialog .offer-result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
}
.offer-result strong {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.offer-result span {
	font-size: 15px;
	opacity: 0.72;
	white-space: nowrap;
}
.blue-dialog.offer-dialog h3 {
	margin: 0 0 4px;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 500;
}
.offer-after {
	display: flex;
	flex-direction: column;
}
.offer-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.offer-plan {
	padding: 14px 18px;
	border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
	border-radius: 16px;
}
.offer-dock {
	display: none;
}
/* Name, then price, in every card and language alike. */
.offer-plan-head {
	display: grid;
	gap: 2px;
	margin-bottom: 10px;
}
.blue-dialog.offer-dialog .offer-plan h4 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}
.blue-dialog.offer-dialog .offer-price {
	margin: 0;
}
.offer-price strong {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.offer-price span {
	font-size: 13px;
	opacity: 0.72;
}
.offer-plan ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.offer-plan li li,
.offer-plan ul li {
	display: flex;
	gap: 8px;
	font-size: 14px;
	line-height: 1.45;
}
.offer-plan svg {
	flex-shrink: 0;
	margin-top: 3px;
	opacity: 0.6;
}
/* The button and the terms line share the window's last row. */
.offer-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 12px;
}
.blue-dialog.offer-dialog .offer-terms {
	flex: 1 1 320px;
	margin: 0;
	font-size: 13.5px;
	opacity: 0.72;
}
/* Computers: the close button and title start 40px from the top, the sides' and bottom's
   gutter (blue-proof.css sets the bar at 53px). */
@media (min-width: 761px) {
	.blue-dialog.offer-dialog .proof-bar {
		padding-top: 39px;
	}
}
@media (max-width: 760px) {
	/* Phones: no control floats over the text; close and the booking button sit in a dock
	   under the sheet, as in the studies dialog. */
	.blue-dialog.offer-dialog .proof-bar,
	.blue-dialog.offer-dialog .offer-foot .proof-cta,
	.blue-dialog.offer-dialog::before {
		display: none;
	}
	.offer-dock {
		display: flex;
		flex-shrink: 0;
		gap: 12px;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid color-mix(in oklab, currentColor 14%, transparent);
	}
	.blue-dialog.offer-dialog .offer-dock .proof-cta {
		flex: 1;
		min-height: 52px;
		align-self: auto;
	}
	.blue-dialog.offer-dialog .offer-dock .proof-close {
		display: grid;
		place-items: center;
		flex-shrink: 0;
		width: 52px;
		height: 52px;
		padding: 0;
		border-radius: 50%;
	}
	.blue-dialog.offer-dialog .proof-body {
		flex: 1;
		height: auto;
		min-height: 0;
		padding-top: 24px;
	}
	.offer-sim {
		padding: 18px;
	}
	.offer-plans {
		grid-template-columns: 1fr;
	}
	/* Phones read the terms before the button. */
	.blue-dialog.offer-dialog .offer-terms {
		order: -1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.offer-line i {
		transition: none;
	}
}
/* The result, the prices and the plan lists read at full strength (.blue-dialog p is muted). */
:root
	.blue-dialog.offer-dialog
	:is(.offer-result, .offer-price, .offer-sim label) {
	color: inherit;
	opacity: 1;
}
.blue-dialog.offer-dialog :is(h2, .offer-result strong) {
	text-wrap: balance;
}
/* No word alone on a last line in the window's running text. */
.blue-dialog.offer-dialog :is(.offer-plan li span, .proof-lede, .offer-terms) {
	text-wrap: pretty;
}
.blue-dialog.offer-dialog .offer-foot .proof-cta {
	flex-shrink: 0;
}
:root .blue-dialog.offer-dialog .proof-lede {
	max-width: none;
	margin-bottom: 12px;
	line-height: 1.5;
}