/* === faces === */
@font-face {
	font-family: 'Tomorrow';
	src: url('/letterset/tomorrow-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Tomorrow';
	src: url('/letterset/tomorrow-latin-700-normal.woff2') format('woff2');
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

/* === tokens === */
:root {
	--face-lead: 'Tomorrow', 'Trebuchet MS', sans-serif;
	--face-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;

	--color-primary: #ffd853;
	--color-focus: #8000f8;
	--color-press: #6c00da;
	--color-back: #12061e;
	--color-raised: #1d0d2f;
	--color-copy: #ffffff;
	--color-soft-text: #bebcbc;
	--color-edge: #33204a;
	--color-line-strong: #5b3a7d;
	--color-ramp-start: #c587fe;
	--color-fade-bottom: #912eff;
	--color-rg-banner: #a71e34;

	--rhythm-2xs: 2px;
	--rhythm-xs: 6px;
	--rhythm-sm: 10px;
	--rhythm-md: 14px;
	--rhythm-lg: 20px;
	--rhythm-xl: 28px;
	--rhythm-2xl: 48px;
	--rhythm-3xl: 72px;

	--radius-2xs: 2px;
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-xl: 26px;
	--radius-2xl: 34px;
	--radius-3xl: 44px;
	--radius-stadium: 9999px;
	--radius-orb: 50%;

	--text-size-xxl: 44px;
	--text-size-display-2: 34px;
	--text-size-display-3: 26px;
	--text-size-display-4: 20px;
	--text-size-sm-2: 16px;
	--text-size-xs-2: 14px;
	--text-size-copy: 16px;
	--text-size-fine: 14px;
	--text-size-tiny: 12px;

	--rhythm-dense: 1.2;
	--rhythm-even: 1.55;
	--rhythm-roomy: 1.7;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-thick: 700;

	--letter-snug: -0.01em;
	--letter-normal: 0;
	--letter-open: 0.02em;

	--drop-2xs: 0 1px 1px rgba(0, 0, 0, 0.05);
	--drop-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
	--drop-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
	--drop-md: 0 6px 18px rgba(0, 0, 0, 0.12);
	--drop-lg: 0 12px 32px rgba(0, 0, 0, 0.16);
	--drop-xl: 0 18px 44px rgba(0, 0, 0, 0.2);
	--drop-2xl: 0 24px 60px rgba(0, 0, 0, 0.24);
	--drop-3xl: 0 32px 80px rgba(0, 0, 0, 0.28);

	--speed-swift: 123ms;
	--speed-base: 240ms;
	--speed-calm: 408ms;
	--bezier-out: cubic-bezier(0.2, 0.57, 0.33, 0.98);
	--bezier-launch: cubic-bezier(0.47, 0.01, 0.58, 1);
	--bezier-swing: cubic-bezier(0.47, 0.01, 0.58, 1);
	--bezier-spring: cubic-bezier(0.33, 1.6, 0.68, 1.1);

	--frame-page: 1200px;
	--frame-narrow: 620px;
	--frame-pad-lg: 24px;
	--frame-pad-md: 32px;
	--frame-edge-narrow: 16px;

	--hair-light: 1px;
	--hair-medium: 2px;
	--hair-wide: 3px;

	--topbar-height-desktop: 64px;
	--topbar-h-sm: 56px;

	--sec-y: 48px;
	--tint-well: #2a1440;
	--ink-warm: #3a2408;
}

/* === narrow screens: scale overrides (desktop-first) === */
@media (max-width: 1040px) {
	:root {
		--frame-pad-lg: 32px;
	}
}

@media (max-width: 720px) {
	:root {
		--text-size-xxl: 30px;
		--text-size-display-2: 24px;
		--text-size-display-3: 20px;
		--text-size-display-4: 18px;
		--text-size-sm-2: 15px;
		--text-size-xs-2: 13px;
		--text-size-copy: 15px;
		--text-size-fine: 13px;
		--text-size-tiny: 11px;
		--frame-pad-lg: 16px;
		--sec-y: 34px;
	}
}

@media (max-width: 460px) {
	:root {
		--text-size-xxl: 26px;
		--text-size-display-2: 22px;
	}
}

/* === base === */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	overflow-x: clip;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--color-back);
	color: var(--color-copy);
	font-family: var(--face-body);
	font-size: var(--text-size-copy);
	line-height: var(--rhythm-even);
	-webkit-font-smoothing: antialiased;
}

.matter {
	flex: 1 0 auto;
	display: block;
	background: var(--color-back);
	color: var(--color-copy);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
}

img {
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

:focus-visible {
	outline: var(--hair-medium) solid var(--color-primary);
	outline-offset: 2px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-step {
	position: absolute;
	left: var(--rhythm-sm);
	top: -200px;
	z-index: 200;
	padding: var(--rhythm-sm) var(--rhythm-md);
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: var(--color-back);
	font-weight: var(--weight-medium);
}

.skip-step:not(:focus) {
	top: -200px !important;
}

.skip-step:focus {
	top: var(--rhythm-sm);
}

/* === motion: reveal + intro === */
[data-enter] {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(10px);
	transition: opacity var(--speed-calm) var(--bezier-out), transform var(--speed-calm) var(--bezier-out), filter var(--speed-calm) var(--bezier-out);
}

[data-enter].is-in {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

@keyframes belvedereSequence {
	from {
		opacity: 0;
		transform: translateY(18px);
		filter: blur(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

.belvedere-matter > h1,
.belvedere-matter > .belvedere-kicker,
.belvedere-matter > .belvedere-note {
	opacity: 0;
	animation: belvedereSequence var(--speed-calm) var(--bezier-out) forwards;
}

.belvedere-matter > .belvedere-kicker {
	animation-delay: 90ms;
}

.belvedere-matter > .belvedere-note {
	animation-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	[data-enter] {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.belvedere-matter > h1,
	.belvedere-matter > .belvedere-kicker,
	.belvedere-matter > .belvedere-note {
		opacity: 1;
	}
}

/* === shared section frame === */
.belvedere-shell,
.chapitre-shell,
.imposte-shell,
.arcade-shell,
.tympan-shell,
.voussure-shell,
.mur-shell,
.bandeau-shell,
.repere-shell,
.cahier-shell,
.coffre-shell,
.ardoise-shell {
	width: 100%;
	max-width: calc(var(--frame-page) + 2 * var(--frame-pad-lg));
	margin-inline: auto;
	padding-inline: var(--frame-pad-lg);
}

/* === header (HEAD-MIRROR) === */
.zone {
	position: relative;
	z-index: 60;
	background: var(--color-back);
	color: var(--color-copy);
	box-shadow: var(--drop-sm);
}

.zone-hold {
	display: flex;
	align-items: center;
	gap: var(--rhythm-md);
	height: 64px;
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: var(--rhythm-xl);
}

.zone.is-shrunk .zone-hold {
	height: 56px;
}

.zone-routes {
	flex: 0 0 auto;
	display: block;
}

.zone-index {
	display: flex;
	align-items: center;
	gap: var(--rhythm-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.zone-node {
	position: relative;
	display: flex;
	align-items: center;
}

.zone-node[hidden] {
	display: none;
}

.zone-node + .zone-node::before {
	content: '|';
	margin-inline-end: var(--rhythm-sm);
	color: var(--color-line-strong);
	background: var(--color-back);
	font-size: var(--text-size-tiny);
}

.zone-node--more {
	position: relative;
}

.zone-step {
	display: inline-block;
	padding-block: var(--rhythm-sm);
	background: var(--color-back);
	color: var(--color-copy);
	font-family: var(--face-body);
	font-size: 14px;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: var(--letter-open);
	white-space: nowrap;
	transition: color var(--speed-swift) var(--bezier-out);
}

.zone-step:hover {
	background: var(--color-back);
	color: var(--color-primary);
	text-decoration: underline;
}

.zone-step[aria-current='page'] {
	background: var(--color-back);
	color: var(--color-primary);
	box-shadow: inset 0 3px 0 0 var(--color-primary);
}

.zone-more-knob {
	min-height: 44px;
	padding: 0 var(--rhythm-xs);
	border: 0;
	background: var(--color-back);
	color: var(--color-primary);
	font-family: var(--face-body);
	font-size: 14px;
	font-weight: 500;
	font-variant: small-caps;
	letter-spacing: var(--letter-open);
	white-space: nowrap;
	cursor: pointer;
}

.zone-more-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 220px;
	max-height: 70vh;
	overflow-y: auto;
	margin: 0;
	padding: var(--rhythm-sm);
	list-style: none;
	z-index: 80;
	border: var(--hair-light) solid var(--color-edge);
	border-radius: var(--radius-sm);
	background: var(--color-raised);
	color: var(--color-copy);
	box-shadow: var(--drop-lg);
}

.zone-more-menu.is-open {
	display: block;
}

.zone-more-menu .zone-step {
	display: block;
	padding: var(--rhythm-xs) var(--rhythm-sm);
	background: var(--color-raised);
	color: var(--color-copy);
}

.zone-more-menu .zone-step:hover {
	background: var(--color-raised);
	color: var(--color-primary);
}

.zone-actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--rhythm-sm);
	flex-shrink: 0;
}

.zone .zone-offer {
	min-height: 44px;
	padding-inline: 18px;
	font-size: 13px;
	border-radius: var(--radius-stadium);
	white-space: nowrap;
	flex-shrink: 0;
}

.zone-quiet {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 18px;
	border: var(--hair-light) solid var(--color-line-strong);
	border-radius: var(--radius-stadium);
	background: var(--color-raised);
	color: var(--color-primary);
	font-size: 13px;
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

.zone-quiet:hover {
	background: var(--color-primary);
	color: var(--color-back);
}

.zone-sign {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.zone-visual {
	display: block;
	height: 48px;
	width: auto;
	flex-shrink: 0;
}

.zone-menu-knob {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: var(--hair-light) solid var(--color-line-strong);
	border-radius: var(--radius-sm);
	background: var(--color-raised);
	color: var(--color-copy);
	cursor: pointer;
}

.zone-lines {
	position: relative;
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-copy);
}

.zone-lines::after {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 20px;
	height: 2px;
	background: var(--color-copy);
}

.zone-pane {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 70;
	max-height: 70vh;
	overflow-y: auto;
	padding: var(--rhythm-md) var(--rhythm-xl);
	border-top: var(--hair-light) solid var(--color-edge);
	background: var(--color-raised);
	color: var(--color-copy);
	box-shadow: var(--drop-lg);
}

.zone-pane.is-open {
	display: block;
}

.zone-tree {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.zone-leaf {
	display: block;
}

.zone-pane .zone-step {
	display: block;
	min-height: 44px;
	padding-block: var(--rhythm-sm);
	background: var(--color-raised);
	color: var(--color-copy);
}

.zone-pane .zone-step:hover {
	background: var(--color-raised);
	color: var(--color-primary);
}

@media (max-width: 900px) {
	.zone-menu-knob {
		display: inline-flex;
	}

	.zone-routes {
		display: none;
	}

	.zone-hold {
		padding-inline: var(--frame-pad-lg);
	}
}

@media (min-width: 901px) {
	.zone-pane,
	.zone-pane.is-open {
		display: none;
	}
}

@media (max-width: 460px) {
	.zone-hold {
		gap: var(--rhythm-sm);
		height: 56px;
	}

	.zone-visual {
		height: 30px;
	}

	.zone .zone-offer {
		padding-inline: 11px;
		font-size: 11px;
	}

	.zone-quiet {
		padding-inline: 11px;
		font-size: 11px;
	}
}

/* === responsible-gaming strip (RG-02) === */
.rg-strip {
	display: block;
	margin: 0;
	padding: var(--rhythm-xs) var(--frame-edge-narrow);
	text-align: center;
	background: var(--color-rg-banner);
	color: #ffffff;
	font-size: var(--text-size-tiny);
	line-height: var(--rhythm-even);
}

.rg-strip-step {
	background: var(--color-rg-banner);
	color: #ffffff;
	text-decoration: underline;
}

/* === hero (HERO-07) === */
.belvedere {
	background: var(--color-back);
	color: var(--color-copy);
}

.belvedere-figure {
	margin: 0;
}

.belvedere-visual {
	display: block;
	width: 100%;
	height: 400px;
	object-fit: cover;
}

.belvedere-shell {
	padding-block: var(--sec-y);
}

.belvedere-matter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rhythm-md);
}

.belvedere-matter h1 {
	margin: 0;
	font-family: var(--face-lead);
	font-size: var(--text-size-xxl);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
	letter-spacing: var(--letter-snug);
}

.belvedere-kicker {
	margin: 0;
	max-width: var(--frame-narrow);
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-sm-2);
	line-height: var(--rhythm-roomy);
}

.belvedere-note {
	display: block;
	max-width: var(--frame-narrow);
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-tiny);
	line-height: var(--rhythm-even);
}

@media (max-width: 720px) {
	.belvedere-visual {
		height: 220px;
	}
}

/* === page header (PHEAD-07) === */
.chapitre {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.chapitre-shell {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--rhythm-lg);
	align-items: start;
}

.chapitre-digit {
	align-self: start;
	background: var(--color-back);
	color: var(--color-ramp-start);
	font-family: var(--face-lead);
	font-size: calc(var(--text-size-xxl) * 1.4);
	font-weight: var(--weight-thick);
	line-height: 1;
}

.chapitre-matter h1 {
	margin: 0;
	font-family: var(--face-lead);
	font-size: var(--text-size-xxl);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
	letter-spacing: var(--letter-snug);
}

.chapitre-para {
	margin: var(--rhythm-md) 0 0;
	background: var(--color-back);
	color: var(--color-soft-text);
	line-height: var(--rhythm-roomy);
}

@media (max-width: 720px) {
	.chapitre-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rhythm-sm);
	}
}

/* === prose (PROSE-10) === */
.imposte {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.imposte-shell {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-xl);
}

.imposte-part {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-md);
}

.imposte-lede {
	margin: 0;
	margin-block-start: var(--rhythm-sm);
	font-family: var(--face-lead);
	font-size: var(--text-size-display-2);
	font-weight: 600;
	line-height: var(--rhythm-dense);
	letter-spacing: var(--letter-snug);
}

.imposte-para {
	margin: 0;
	background: var(--color-back);
	color: var(--color-copy);
	font-size: var(--text-size-copy);
	line-height: var(--rhythm-roomy);
}

.imposte-para--lead {
	background: var(--color-back);
	color: var(--color-copy);
	font-size: calc(var(--text-size-copy) * 1.25);
}

.imposte-para a,
.imposte-entry a {
	background: var(--color-back);
	color: var(--color-primary);
	text-decoration: underline;
	transition: color var(--speed-swift) var(--bezier-out);
}

.imposte-para a:hover,
.imposte-entry a:hover {
	background: var(--color-back);
	color: var(--color-ramp-start);
}

.imposte-stack {
	margin: 0;
	padding-inline-start: var(--rhythm-xl);
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-sm);
}

.imposte-stack--step {
	list-style: decimal;
}

.imposte-entry {
	background: var(--color-back);
	color: var(--color-copy);
	line-height: var(--rhythm-roomy);
}

.imposte-frame {
	margin: 0;
	margin-inline: auto;
}

.imposte-frame--wide {
	max-width: 700px;
}

.imposte-frame--square {
	max-width: 460px;
}

.imposte-frame--tall {
	max-width: 360px;
}

.imposte-visual {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.imposte-plug {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rhythm-sm);
}

.imposte-note {
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-tiny);
	line-height: var(--rhythm-even);
}

/* === items grid (GRID-08) === */
.arcade {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.arcade-hdr {
	margin: 0;
	font-family: var(--face-lead);
	font-size: var(--text-size-display-2);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
}

.arcade-stack {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rhythm-md);
	margin-block-start: var(--rhythm-lg);
}

.arcade-tile {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-sm);
	padding: var(--rhythm-lg);
	border-top: 4px solid var(--color-focus);
	border-right: var(--hair-light) solid var(--color-edge);
	border-bottom: var(--hair-light) solid var(--color-edge);
	border-left: var(--hair-light) solid var(--color-edge);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	background: var(--color-raised);
	color: var(--color-copy);
	box-shadow: var(--drop-sm);
	transition: border-color var(--speed-base) var(--bezier-out);
}

.arcade-tile:hover {
	border-right-color: var(--color-primary);
	border-bottom-color: var(--color-primary);
	border-left-color: var(--color-primary);
}

.arcade-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: var(--hair-light) solid var(--color-line-strong);
	border-radius: var(--radius-orb);
	background: var(--tint-well);
	color: var(--color-primary);
}

.arcade-mark {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.arcade-lede {
	margin: 0;
	background: var(--color-raised);
	color: var(--color-copy);
	font-family: var(--face-body);
	font-size: var(--text-size-display-3);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
}

.arcade-para {
	background: var(--color-raised);
	color: var(--color-soft-text);
	line-height: var(--rhythm-roomy);
}

@media (max-width: 1040px) {
	.arcade-stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.arcade-stack {
		grid-template-columns: minmax(0, 1fr);
	}
}

.arcade-plug {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rhythm-sm);
	padding-block: var(--rhythm-xs);
	background: var(--color-back);
	color: var(--color-copy);
}

.arcade-note {
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-tiny);
	line-height: var(--rhythm-even);
}

.arcade-offer {
	align-self: flex-start;
}

/* === faq (FAQ-01) === */
.tympan {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.tympan-hdr {
	margin: 0;
	font-family: var(--face-lead);
	font-size: var(--text-size-display-2);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
}

.tympan-stack {
	display: flex;
	flex-direction: column;
	margin-block-start: var(--rhythm-lg);
}

.tympan-entry {
	border-bottom: var(--hair-light) solid var(--color-edge);
	background: var(--color-back);
	color: var(--color-copy);
}

.tympan-ask {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--rhythm-md);
	min-height: 44px;
	padding-block: var(--rhythm-md);
	list-style: none;
	cursor: pointer;
}

.tympan-ask::-webkit-details-marker {
	display: none;
}

.tympan-lede {
	margin: 0;
	background: var(--color-back);
	color: var(--color-copy);
	font-family: var(--face-body);
	font-size: var(--text-size-sm-2);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-even);
}

.tympan-entry:hover .tympan-lede {
	background: var(--color-back);
	color: var(--color-primary);
}

.tympan-glyph {
	background: var(--color-back);
	color: var(--color-primary);
	font-size: 24px;
	line-height: 1;
	transition: transform var(--speed-base) var(--bezier-out);
}

.tympan-entry[open] .tympan-glyph {
	transform: rotate(45deg);
}

@keyframes tympanUnfold {
	from {
		opacity: 0;
		max-height: 0;
	}
	to {
		opacity: 1;
		max-height: 900px;
	}
}

.tympan-matter {
	padding-block: var(--rhythm-sm) var(--rhythm-md);
	overflow: hidden;
}

.tympan-entry[open] .tympan-matter {
	animation: tympanUnfold var(--speed-base) var(--bezier-out);
}

.tympan-para {
	margin: 0;
	background: var(--color-back);
	color: var(--color-soft-text);
	line-height: var(--rhythm-roomy);
}

/* === reviews (REV-10) === */
.voussure {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.voussure-hdr {
	margin: 0;
	font-family: var(--face-lead);
	font-size: var(--text-size-display-2);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
}

.voussure-stack {
	margin: var(--rhythm-lg) 0 0;
	padding: 0;
	list-style: none;
}

.voussure-entry {
	padding-block: var(--rhythm-md);
	border-bottom: var(--hair-light) dotted var(--color-line-strong);
	background: var(--color-back);
	color: var(--color-copy);
}

.voussure-band {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--rhythm-xs);
}

.voussure-signer {
	background: var(--color-back);
	color: var(--color-copy);
	font-weight: var(--weight-medium);
}

.voussure-score {
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-fine);
}

.voussure-day {
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-fine);
}

.voussure-para {
	margin-block-start: var(--rhythm-xs);
	background: var(--color-back);
	color: var(--color-copy);
	line-height: var(--rhythm-roomy);
}

.voussure-plug {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rhythm-sm);
	padding-block: var(--rhythm-lg);
	background: var(--color-back);
	color: var(--color-copy);
}

.voussure-note {
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-tiny);
	line-height: var(--rhythm-even);
}

.voussure-offer {
	align-self: flex-start;
}

/* === data table (TABLE-03) === */
.mur {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.mur-hdr {
	margin: 0;
	font-family: var(--face-lead);
	font-size: var(--text-size-display-2);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
}

.mur-scroll {
	margin-block-start: var(--rhythm-lg);
	overflow-x: auto;
}

.mur-grid {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-raised);
	color: var(--color-copy);
}

.mur-band {
	background: var(--color-raised);
}

.mur-band--head {
	background: var(--color-focus);
}

.mur-cap {
	padding: var(--rhythm-md);
	text-align: start;
	background: var(--color-focus);
	color: #ffffff;
	font-size: var(--text-size-fine);
	font-weight: var(--weight-thick);
	letter-spacing: var(--letter-open);
}

.mur-cell {
	padding: var(--rhythm-md);
	border-top: var(--hair-light) solid var(--color-edge);
	background: var(--color-raised);
	color: var(--color-copy);
	font-size: var(--text-size-fine);
	line-height: var(--rhythm-even);
}

@media (max-width: 560px) {
	.mur-grid,
	.mur-band,
	.mur-cell {
		display: block;
	}

	.mur-band--head {
		display: none;
	}

	.mur-band {
		margin-block-end: var(--rhythm-md);
		padding: var(--rhythm-md);
		border-radius: var(--radius-md);
		background: var(--color-raised);
	}

	.mur-cell {
		padding: var(--rhythm-xs) 0;
		border-top: 0;
	}

	.mur-cell::before {
		content: attr(data-label);
		display: block;
		background: var(--color-raised);
		color: var(--color-ramp-start);
		font-size: var(--text-size-tiny);
		letter-spacing: var(--letter-open);
		text-transform: uppercase;
	}
}

/* === cta block (CTA-09) === */
.bandeau {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.bandeau-shell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rhythm-sm);
}

.bandeau-eye {
	background: var(--color-back);
	color: var(--color-ramp-start);
	font-size: var(--text-size-tiny);
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.bandeau-hdr {
	margin: 0;
	font-family: var(--face-lead);
	font-size: var(--text-size-display-2);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
}

.bandeau-para {
	margin: 0;
	max-width: var(--frame-narrow);
	background: var(--color-back);
	color: var(--color-soft-text);
	line-height: var(--rhythm-roomy);
}

.bandeau-note {
	display: block;
	max-width: var(--frame-narrow);
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-tiny);
	line-height: var(--rhythm-even);
}

.bandeau-slim {
	padding-block: var(--rhythm-lg);
	background: var(--color-back);
	color: var(--color-copy);
}

.bandeau-shell--slim {
	gap: var(--rhythm-xs);
}

.bandeau-offer--slim {
	margin-block-end: var(--rhythm-2xs);
}

/* === author byline (BYLINE-05) === */
.passerelle {
	padding-block: var(--rhythm-lg);
	background: var(--color-primary);
	color: var(--color-back);
}

.passerelle-hold {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rhythm-md);
	width: 100%;
	max-width: calc(var(--frame-page) + 2 * var(--frame-pad-lg));
	margin-inline: auto;
	padding-inline: var(--frame-pad-lg);
}

.passerelle-who {
	display: flex;
	align-items: center;
	gap: var(--rhythm-md);
}

.passerelle-headshot {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--radius-orb);
	object-fit: cover;
}

.passerelle-para {
	display: flex;
	flex-direction: column;
}

.passerelle-cap {
	background: var(--color-primary);
	color: var(--ink-warm);
	font-size: var(--text-size-tiny);
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.passerelle-signer {
	background: var(--color-primary);
	color: var(--color-back);
	font-weight: var(--weight-thick);
}

.passerelle-duty {
	background: var(--color-primary);
	color: var(--ink-warm);
	font-size: var(--text-size-fine);
	line-height: var(--rhythm-even);
}

.passerelle-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	flex-shrink: 0;
	padding: var(--rhythm-sm) var(--rhythm-md);
	border: var(--hair-light) solid var(--color-back);
	border-radius: var(--radius-stadium);
	background: var(--color-primary);
	color: var(--color-back);
	font-weight: var(--weight-medium);
	transition: background-color var(--speed-base) var(--bezier-out);
}

.passerelle-more:hover {
	background: var(--color-back);
	color: var(--color-primary);
}

@media (max-width: 720px) {
	.passerelle-hold {
		flex-direction: column;
		align-items: stretch;
	}
}

/* === author card (AUTH-02) === */
.repere {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.repere-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.repere-headshot {
	width: 140px;
	height: 140px;
	max-width: none;
	flex-shrink: 0;
	margin-block-end: var(--rhythm-lg);
	border-radius: var(--radius-orb);
	object-fit: cover;
}

.repere-duty {
	background: var(--color-back);
	color: var(--color-ramp-start);
	font-size: var(--text-size-fine);
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.repere-signer {
	margin: var(--rhythm-xs) 0 var(--rhythm-md);
	font-family: var(--face-lead);
	font-size: var(--text-size-display-2);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
}

.repere-para {
	margin: 0;
	background: var(--color-back);
	color: var(--color-soft-text);
	line-height: var(--rhythm-roomy);
}

.repere-stack {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rhythm-xs);
	margin: var(--rhythm-md) 0 0;
	padding: 0;
	list-style: none;
}

.repere-entry {
	padding: var(--rhythm-xs) var(--rhythm-md);
	border: var(--hair-light) solid var(--color-edge);
	border-radius: var(--radius-stadium);
	background: var(--color-raised);
	color: var(--color-copy);
	font-size: var(--text-size-fine);
}

.repere-articles {
	width: 100%;
	max-width: calc(var(--frame-page) + 2 * var(--frame-pad-lg));
	margin-inline: auto;
	padding: var(--rhythm-lg) var(--frame-pad-lg) 0;
}

.repere-hdr {
	margin: 0 0 var(--rhythm-md);
	font-family: var(--face-lead);
	font-size: var(--text-size-display-4);
	font-weight: var(--weight-thick);
}

.repere-tree {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.repere-leaf {
	line-height: var(--rhythm-roomy);
}

.repere-step {
	background: var(--color-back);
	color: var(--color-primary);
	text-decoration: underline;
}

.repere-step:hover {
	background: var(--color-back);
	color: var(--color-ramp-start);
}

/* === legal section (LEGAL-04) === */
.cahier {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.cahier-box {
	position: relative;
	padding: var(--rhythm-2xl);
	border: var(--hair-light) solid var(--color-edge);
	border-radius: var(--radius-lg);
	background: var(--color-raised);
	color: var(--color-copy);
	box-shadow: var(--drop-sm);
}

.cahier-detail {
	position: absolute;
	top: var(--rhythm-md);
	right: var(--rhythm-md);
	background: var(--color-raised);
	color: var(--color-soft-text);
	font-size: var(--text-size-tiny);
}

.cahier-part {
	margin-block-start: var(--rhythm-xl);
}

.cahier-lede {
	margin: 0 0 var(--rhythm-sm);
	font-family: var(--face-lead);
	font-size: var(--text-size-display-3);
	font-weight: 600;
	line-height: var(--rhythm-dense);
}

.cahier-para {
	margin: 0 0 var(--rhythm-md);
	background: var(--color-raised);
	color: var(--color-copy);
	line-height: var(--rhythm-roomy);
}

.cahier-para--lead {
	background: var(--color-raised);
	color: var(--color-copy);
	font-size: calc(var(--text-size-copy) * 1.25);
}

.cahier-para--fine {
	background: var(--color-raised);
	color: var(--color-soft-text);
	font-size: var(--text-size-fine);
}

.cahier-para a {
	background: var(--color-raised);
	color: var(--color-primary);
	text-decoration: underline;
}

.cahier-stack {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-xs);
	margin: var(--rhythm-lg) 0 0;
	padding-inline-start: var(--rhythm-xl);
}

.cahier-entry {
	background: var(--color-raised);
	color: var(--color-soft-text);
	line-height: var(--rhythm-roomy);
}

@media (max-width: 720px) {
	.cahier-box {
		padding: var(--rhythm-lg);
	}

	.cahier-detail {
		position: static;
		display: block;
		margin-block-end: var(--rhythm-sm);
	}
}

/* === contact form (FORM-05) === */
.coffre {
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.coffre-box {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-lg);
	padding: var(--rhythm-xl);
	border: var(--hair-medium) solid var(--color-focus);
	border-radius: var(--radius-md);
	background: var(--color-back);
	color: var(--color-copy);
}

.coffre-input {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-2xs);
	flex: 0 0 auto;
}

.coffre-cap {
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-tiny);
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.coffre-slot {
	min-height: 44px;
	padding-block: var(--rhythm-sm);
	border: 0;
	border-bottom: var(--hair-light) solid var(--color-line-strong);
	background: var(--color-back);
	color: var(--color-copy);
	font-family: var(--face-body);
	font-size: var(--text-size-sm-2);
}

.coffre-slot--wide {
	min-height: 120px;
	resize: vertical;
}

.coffre-action {
	align-self: flex-start;
	min-height: 44px;
	padding: var(--rhythm-sm) var(--rhythm-xl);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-focus);
	color: #ffffff;
	font-family: var(--face-body);
	font-size: var(--text-size-sm-2);
	font-weight: var(--weight-medium);
	cursor: pointer;
}

.coffre-action:hover {
	background: var(--color-press);
	color: #ffffff;
}

.coffre-done {
	margin: 0;
	background: var(--color-back);
	color: var(--color-primary);
}

.coffre-stack {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-xs);
	margin: var(--rhythm-lg) 0 0;
	padding: 0;
	list-style: none;
}

.coffre-entry {
	background: var(--color-back);
	color: var(--color-soft-text);
	line-height: var(--rhythm-roomy);
}

.coffre-step {
	background: var(--color-back);
	color: var(--color-primary);
	text-decoration: underline;
}

.coffre-step:hover {
	background: var(--color-back);
	color: var(--color-ramp-start);
}

/* === error block (ERR-06) === */
.matter:has(> .ardoise) {
	display: flex;
	flex-direction: column;
}

.ardoise {
	display: flex;
	align-items: center;
	flex: 1 0 auto;
	padding-block: var(--sec-y);
	background: var(--color-back);
	color: var(--color-copy);
}

.ardoise-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rhythm-md);
	max-width: var(--frame-narrow);
	margin-inline: auto;
	padding: var(--rhythm-2xl);
	border: var(--hair-medium) solid var(--color-focus);
	border-radius: var(--radius-lg);
	background: var(--color-raised);
	color: var(--color-copy);
	box-shadow: var(--drop-md);
	text-align: center;
}

.ardoise-eye {
	background: var(--color-raised);
	color: var(--color-ramp-start);
	font-family: var(--face-lead);
	font-size: 56px;
	font-weight: var(--weight-thick);
	line-height: 1;
}

.ardoise-lede {
	margin: 0;
	font-family: var(--face-lead);
	font-size: var(--text-size-display-2);
	font-weight: var(--weight-thick);
	line-height: var(--rhythm-dense);
}

.ardoise-para {
	background: var(--color-raised);
	color: var(--color-soft-text);
	line-height: var(--rhythm-roomy);
}

.ardoise-action {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--rhythm-sm) var(--rhythm-xl);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-back);
	font-weight: var(--weight-medium);
	transition: transform var(--speed-base) var(--bezier-out);
}

.ardoise-action:hover {
	background: var(--color-ramp-start);
	color: var(--color-back);
	transform: translateY(-5px);
}

/* === cookie banner (COOK-09) === */
.rosace {
	position: fixed;
	inset-block-end: var(--rhythm-lg);
	inset-inline-start: var(--rhythm-lg);
	inset-inline-end: auto;
	z-index: 90;
	max-width: min(420px, calc(100vw - 2 * var(--rhythm-lg)));
}

.rosace[hidden] {
	display: none;
}

.rosace-tile {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-sm);
	padding: var(--rhythm-lg);
	border-inline-start: 4px solid var(--color-focus);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--color-back);
	color: var(--color-copy);
	box-shadow: var(--drop-lg);
	opacity: 0;
	clip-path: inset(100% 0 0 0);
	transition: clip-path var(--speed-calm) var(--bezier-out), opacity var(--speed-base) var(--bezier-out), transform var(--speed-base) var(--bezier-out);
}

.rosace.is-in .rosace-tile {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}

.rosace.is-gone .rosace-tile {
	opacity: 0;
	transform: translateY(240%);
}

.rosace-blurb {
	margin: 0;
	background: var(--color-back);
	color: var(--color-copy);
	font-size: var(--text-size-fine);
	line-height: var(--rhythm-even);
}

.rosace-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--rhythm-sm);
}

.rosace-confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--rhythm-xs) var(--rhythm-md);
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: var(--color-back);
	font-family: var(--face-body);
	font-size: var(--text-size-fine);
	font-weight: var(--weight-medium);
	white-space: nowrap;
	cursor: pointer;
}

.rosace-confirm:hover {
	background: var(--color-ramp-start);
	color: var(--color-back);
}

.rosace-skip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--rhythm-xs) var(--rhythm-md);
	border: var(--hair-light) solid var(--color-line-strong);
	border-radius: var(--radius-sm);
	background: var(--color-raised);
	color: var(--color-copy);
	font-family: var(--face-body);
	font-size: var(--text-size-fine);
	white-space: nowrap;
	cursor: pointer;
}

.rosace-skip:hover {
	background: var(--color-line-strong);
	color: var(--color-copy);
}

@media (max-width: 720px) {
	.rosace {
		inset-inline: var(--rhythm-sm);
		inset-block-end: var(--rhythm-sm);
		max-width: none;
	}

	.rosace-tile {
		gap: 8px;
		padding: 12px 14px;
	}

	.rosace-blurb {
		font-size: 13px;
		line-height: 1.35;
	}

	.rosace-confirm,
	.rosace-skip {
		flex: 1 1 auto;
		min-height: 40px;
		padding: 8px 14px;
		font-size: 12px;
	}
}

@media (max-width: 430px) {
	.rosace-actions {
		flex-direction: column;
	}

	.rosace-confirm,
	.rosace-skip {
		white-space: normal;
	}
}

/* === footer (FOOT-03) === */
.vignette {
	padding-block: var(--sec-y);
	border-top: var(--hair-light) solid var(--color-edge);
	background: var(--color-back);
	color: var(--color-copy);
}

.vignette-hold {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rhythm-lg);
	width: 100%;
	max-width: calc(var(--frame-page) + 2 * var(--frame-pad-lg));
	margin-inline: auto;
	padding-inline: var(--frame-pad-lg);
	text-align: center;
}

.vignette-sign {
	display: inline-flex;
}

.vignette-visual {
	display: block;
	height: 80px;
	width: auto;
}

.vignette-cap {
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-tiny);
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.vignette-cap--legal {
	margin-block-start: var(--rhythm-sm);
}

.vignette-routes {
	width: 100%;
}

.vignette-tree {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rhythm-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vignette-leaf {
	display: inline-flex;
}

.vignette-step {
	background: var(--color-back);
	color: var(--color-copy);
	font-family: var(--face-lead);
	font-size: var(--text-size-copy);
	font-weight: var(--weight-medium);
	transition: color var(--speed-swift) var(--bezier-out);
}

.vignette-step:hover {
	background: var(--color-back);
	color: var(--color-primary);
}

.vignette-step--fine {
	font-family: var(--face-body);
	font-size: var(--text-size-tiny);
	letter-spacing: var(--letter-open);
	text-transform: uppercase;
}

.vignette-para {
	margin: 0;
	max-width: var(--frame-narrow);
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-fine);
	line-height: var(--rhythm-roomy);
}

.vignette-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rhythm-sm);
}

.vignette-dot {
	background: var(--color-back);
	color: var(--color-soft-text);
}

.vignette-mark {
	background: var(--color-back);
	color: var(--color-soft-text);
	font-size: var(--text-size-tiny);
}

/* === offer button placement === */
.belvedere-offer,
.bandeau-offer,
.imposte-offer {
	align-self: flex-start;
	max-width: 100%;
}

.imposte-offer {
	margin-block-start: var(--rhythm-2xs);
}

/* === offer buttons === */
.palier-jump{display:inline-flex;align-items:center;justify-content:center;padding:var(--rhythm-sm) var(--rhythm-md);min-height:44px;border-radius:var(--radius-stadium);border:var(--hair-light) solid var(--color-back);font-weight:var(--weight-medium)}
.palier-jump{
  background:#0D9488;color:#12061E;text-decoration:none;
  transition:background 0.26s cubic-bezier(.2,.7,.3,1);}
.palier-jump.palier-jump{color:#12061E;text-decoration:none;}
.palier-jump:hover{background:#0F766E;color:#FFFFFF;animation:none}
.palier-jump.palier-jump:hover{color:#FFFFFF;text-decoration:none}
.palier-jump:hover::after{animation:none}
.palier-jump:active{background:#115E59;color:#FFFFFF}
.palier-jump:focus-visible{outline:3px solid #12061E;outline-offset:3px}
@keyframes palier-sweep{0%{transform:translateX(0)}12.903%{transform:translateX(5px)}25.806%,100%{transform:translateX(0)}}
.palier-jump{animation:palier-sweep 1.55s ease infinite}
@media (prefers-reduced-motion:reduce){.palier-jump,.palier-jump::after{animation:none!important;transition:none!important}}