: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);
}

: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-studio .stage-inner,
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;
}

@media (min-width: 900px) {
	html[data-blue-style] #section-studio .split-page,
	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;
	}

	/* Studio: copy and meta form one centered left block, particles own right. */
	html[data-blue-style] #section-studio .stage-team {
		grid-template-rows: 1fr auto auto 1fr !important;
		row-gap: 0 !important;
	}
	html[data-blue-style] #section-studio .studio-swap {
		grid-column: 1;
		grid-row: 2;
		align-self: end !important;
		width: 100%;
		max-width: var(--content-copy-width);
	}
	html[data-blue-style] #section-studio .studio-meta {
		grid-column: 1;
		grid-row: 3;
		align-self: start;
		width: 100%;
		max-width: var(--content-copy-width);
		margin: 1.25rem 0 0 !important;
		text-align: left;
	}
	html[data-blue-style] #section-studio .brains-figure {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: center;
		width: 100% !important;
		height: var(--content-visual-height) !important;
		margin: 0 !important;
		aspect-ratio: auto !important;
		display: block !important;
	}
	html[data-blue-style] #section-studio .stage-founder {
		width: 100%;
		max-width: var(--content-copy-width);
	}
	html[data-blue-style] #section-studio .fd-name {
		white-space: nowrap;
	}

	/* 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. */
	html[data-blue-style] #page-closing .offer-page {
		grid-template-rows: 1fr !important;
		max-width: var(--content-frame-width) !important;
		padding: var(--content-frame-top) var(--grid-margin)
			var(--content-frame-top) !important;
	}
	/* The panel grows with the step and never exceeds the row: no inner scroll. */
	.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;
		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-studio .stage-inner,
	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-studio .studio-swap,
	html[data-blue-style] #section-studio .studio-meta,
	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-studio .studio-swap,
	html[data-blue-style] #section-realisations .offer-head {
		order: 1;
	}
	html[data-blue-style] #section-studio .brains-figure,
	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] #section-studio .studio-meta {
		order: 3;
	}
	html[data-blue-style] #section-studio .fd-name {
		white-space: nowrap;
		font-size: clamp(1.35rem, 6vw, 1.65rem) !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;
	}
}

/* Keep the landing colibri visually attached to the centered wordmark. */
@media (min-width: 761px) {
	#colibri-home {
		left: calc(50% - 22rem);
		top: calc(50% - 10.5rem);
	}
}
@media (max-width: 760px) {
	#colibri-home {
		left: calc(50% - 11rem);
		top: calc(50% - 7.5rem);
	}
}

@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;
	}
}