@font-face {
	font-family: 'Outfit';
	src: url('/fonte/outfit-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Outfit';
	src: url('/fonte/outfit-latin-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('/fonte/poppins-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('/fonte/poppins-latin-400-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('/fonte/poppins-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('/fonte/poppins-latin-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--t-prime: #821aff;
	--t-accent: #8b6bfe;
	--t-key-active: #684cfe;
	--t-backdrop: #040404;
	--t-raised: #101015;
	--t-type: #FFFFFF;
	--t-faint: #c0c0c0;
	--t-rule: #24242c;
	--t-stroke-heavy: #3b3b46;
	--t-grad-1: #1830ff;
	--t-ramp-end: #73ee89;
	--t-warn-band: #8b1e3f;

	--s-step-0: 4px;
	--s-step-1: 7px;
	--s-step-2: 11px;
	--s-step-3: 17px;
	--s-step-4: 26px;
	--s-step-5: 40px;
	--s-step-6: 60px;
	--s-step-7: 90px;

	--r-lozenge: 9999px;
	--r-dot: 50%;
	--r-step-0: 2px;
	--r-step-1: 3px;
	--r-step-2: 6px;
	--r-step-3: 8px;
	--r-step-4: 14px;
	--r-step-5: 20px;
	--r-step-6: 26px;
	--r-step-7: 34px;

	--f-heading: 'Outfit', 'Trebuchet MS', sans-serif;
	--f-copy: 'Poppins', 'Segoe UI', sans-serif;

	--z-xxl: clamp(30px, 5.4vw, 52px);
	--z-display-2: clamp(24px, 3.1vw, 36px);
	--z-lg-2: 20px;
	--z-display-4: 17px;
	--z-h5: 15px;
	--z-xs-2: 13px;
	--z-base: 16px;
	--z-caption: 13px;
	--z-tiny: 11px;

	--l-compact: 1.15;
	--l-base: 1.55;
	--l-relaxed: 1.7;

	--w-book: 400;
	--w-mid: 500;
	--w-black: 700;

	--e-close: 0;
	--e-regular: 0;
	--e-open: 0.02em;

	--d-step-0: 0 1px 1px rgba(0, 0, 0, 0.28);
	--d-step-1: 0 1px 2px rgba(0, 0, 0, 0.32);
	--d-step-2: 0 2px 4px rgba(0, 0, 0, 0.36);
	--d-step-3: 0 4px 10px rgba(0, 0, 0, 0.42);
	--d-step-4: 0 8px 20px rgba(0, 0, 0, 0.48);
	--d-step-5: 0 12px 28px rgba(0, 0, 0, 0.52);
	--d-step-6: 0 18px 38px rgba(0, 0, 0, 0.56);
	--d-step-7: 0 26px 54px rgba(0, 0, 0, 0.6);

	--t-snap: 127ms;
	--t-steady: 220ms;
	--t-calm: 336ms;

	--x-out: cubic-bezier(0.22, 0.85, 0.5, 0.93);
	--x-start: cubic-bezier(0.57, 0.08, 0.55, 0.98);
	--x-smooth: cubic-bezier(0.57, 0.08, 0.55, 0.98);
	--x-overshoot: cubic-bezier(0.32, 1.55, 0.72, 0.95);

	--v-full: 1140px;
	--v-narrow: 650px;
	--v-padding-desktop: 32px;
	--v-padding-tablet: 20px;
	--v-inset-mobile: 12px;

	--b-slim: 1px;
	--b-base: 2px;
	--b-wide: 3px;

	--h-h-lg: 58px;
	--h-short: 52px;

	--sec-y: 30px;
	--edge: var(--v-inset-mobile);
	--rg-h: 30px;
	--deep: #150a26;
	--tint: #17111f;
}

@media (min-width: 600px) {
	:root {
		--edge: var(--v-padding-tablet);
		--sec-y: 38px;
	}
}

@media (min-width: 900px) {
	:root {
		--z-lg-2: 24px;
		--z-display-4: 19px;
		--z-h5: 16px;
		--z-xs-2: 14px;
		--z-base: 17px;
		--z-caption: 14px;
		--z-tiny: 12px;
		--edge: var(--v-padding-desktop);
		--sec-y: 44px;
	}
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-block-start: 118px;
}

html,
body {
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--t-backdrop);
	color: var(--t-type);
	font-family: var(--f-copy);
	font-size: var(--z-base);
	font-weight: var(--w-book);
	line-height: var(--l-base);
	letter-spacing: var(--e-regular);
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	animation: veilIn var(--t-calm) var(--x-out) both;
}

@keyframes veilIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

h1, h2, h3, h4, h5, h6 {
	overflow-wrap: anywhere;
	margin: 0;
	font-family: var(--f-heading);
	line-height: var(--l-compact);
	letter-spacing: var(--e-close);
}

h1 {
	font-size: var(--z-xxl);
	font-weight: var(--w-black);
}

h2 {
	font-size: var(--z-display-2);
	font-weight: var(--w-mid);
}

h3 {
	font-size: var(--z-lg-2);
	font-weight: var(--w-mid);
}

h4 {
	font-size: var(--z-display-4);
	font-weight: var(--w-mid);
}

p {
	margin: 0 0 var(--s-step-3);
}

ul, ol {
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
}

a {
	color: var(--t-accent);
	transition: color var(--t-snap) var(--x-out);
}

a:hover {
	color: var(--t-key-active);
}

button {
	font: inherit;
}

table {
	border-collapse: collapse;
}

main {
	flex: 1 0 auto;
}

.plateau {
	padding-inline: var(--edge);
	padding-block: var(--sec-y);
}

.plateau-shell,
.tableau-shell,
.relief-shell,
.chapitre-shell,
.niche-shell,
.carnet-shell,
.placard-shell,
.tribune-shell,
.terrasse-shell,
.poteau-shell,
.secteur-shell,
.registre-shell,
.annexe-shell,
.voussure-shell,
.quai-shell {
	width: 100%;
	max-width: calc(var(--v-full) + 2 * var(--v-padding-desktop));
	margin-inline: auto;
	padding-inline: var(--edge);
}

.skip-link {
	position: absolute;
	inset-inline-start: var(--s-step-2);
	z-index: 300;
	padding: var(--s-step-2) var(--s-step-3);
	border-radius: var(--r-step-2);
	background: var(--t-prime);
	color: var(--t-type);
	font-size: var(--z-caption);
	text-decoration: none;
}

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

.skip-link:focus {
	top: var(--s-step-2);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--t-ramp-end);
	outline-offset: 2px;
}

/* — plaque 18+ (RG-01) — */

.aval {
	background: var(--t-warn-band);
	color: var(--t-type);
	display: block;
	text-align: center;
	padding: var(--s-step-1) var(--edge);
	margin: 0;
	font-size: var(--z-tiny);
	line-height: 1.35;
	letter-spacing: var(--e-open);
}

.aval-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 16px;
	margin-inline-end: var(--s-step-0);
	padding-inline: 5px;
	border-radius: var(--r-step-0);
	background: var(--t-type);
	color: var(--t-warn-band);
	font-family: var(--f-heading);
	font-weight: var(--w-black);
	font-size: 10px;
}

.aval-link {
	color: var(--t-type);
	text-underline-offset: 3px;
}

.aval-link:hover {
	color: var(--t-type);
	text-decoration: none;
}

/* — en-tête HEAD-PILL — */

.salon {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: var(--s-step-1);
	padding-inline: var(--edge);
	background: var(--t-backdrop);
}

.salon-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s-step-2);
	width: 100%;
	max-width: calc(var(--v-full) + 2 * var(--v-padding-desktop));
	min-height: 58px;
	margin-inline: auto;
	padding-inline: var(--s-step-3);
	border: var(--b-slim) solid var(--t-rule);
	border-radius: var(--r-step-5);
	background: var(--t-raised);
	box-shadow: var(--d-step-3);
	transition: background var(--t-steady) var(--x-out), border-color var(--t-steady) var(--x-out);
}

@supports (backdrop-filter: blur(2px)) {
	.salon-bar {
		background: #101015ee;
		backdrop-filter: blur(14px);
	}
}

.salon.is-stuck .salon-bar {
	border-color: var(--t-stroke-heavy);
	box-shadow: var(--d-step-5);
}

.salon-glyph {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

.salon-glyph-pic {
	display: block;
	width: auto;
	height: 30px;
	flex-shrink: 0;
}

.salon-menu-knob {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	order: 4;
	width: 42px;
	min-height: 42px;
	margin-inline-start: auto;
	padding: 0;
	border: var(--b-slim) solid var(--t-rule);
	border-radius: var(--r-step-0);
	background: var(--tint);
	color: var(--t-type);
	cursor: pointer;
}

.salon-menu-knob:hover {
	background: var(--t-prime);
	color: var(--t-type);
}

.salon-lines {
	display: block;
	width: 16px;
	height: 16px;
	background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
	background-size: 6px 6px;
	background-position: 0 0, 10px 0, 0 10px, 10px 10px;
	background-repeat: no-repeat;
}

.salon-nav {
	display: none;
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.salon-stack {
	display: flex;
	align-items: center;
	gap: var(--s-step-2);
	list-style: none;
}

.salon-cell {
	position: relative;
	display: flex;
	align-items: center;
}

.salon-cell[hidden] {
	display: none;
}

.salon-stack > .salon-cell + .salon-cell::before {
	content: '';
	position: absolute;
	inset-inline-start: calc(var(--s-step-2) / -2);
	top: 50%;
	width: 1px;
	height: 13px;
	margin-block-start: -6px;
	background: var(--t-stroke-heavy);
}

.salon-stack > .salon-cell[data-first]::before {
	content: none;
}

.salon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding-inline: var(--s-step-0);
	color: var(--t-faint);
	font-family: var(--f-copy);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: var(--e-regular);
	white-space: nowrap;
	text-decoration: none;
}

.salon-link:hover {
	color: var(--t-type);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.salon-link[aria-current='page'] {
	color: var(--t-type);
}

.salon-link[aria-current='page']::after {
	content: '';
	position: absolute;
	inset-inline-start: -5px;
	top: 50%;
	width: 2px;
	height: 16px;
	margin-block-start: -8px;
	background: var(--t-accent);
}

.salon-more-opener {
	display: inline-flex;
	align-items: center;
	gap: var(--s-step-0);
	min-height: 42px;
	padding-inline: var(--s-step-1);
	border: 0;
	border-radius: var(--r-step-0);
	background: transparent;
	color: var(--t-faint);
	font-family: var(--f-copy);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}

.salon-more-opener:hover {
	color: var(--t-type);
}

.salon-more-opener::after {
	content: '';
	width: 6px;
	height: 6px;
	border-inline-end: var(--b-base) solid currentColor;
	border-block-end: var(--b-base) solid currentColor;
	transform: rotate(45deg);
	margin-block-start: -3px;
}

.salon-more-menu {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + var(--s-step-1));
	z-index: 20;
	display: none;
	min-width: 208px;
	max-height: 64vh;
	overflow-y: auto;
	padding: var(--s-step-1);
	list-style: none;
	border: var(--b-slim) solid var(--t-stroke-heavy);
	border-radius: var(--r-step-3);
	background: var(--t-raised);
	box-shadow: var(--d-step-4);
}

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

.salon-more-menu .salon-cell {
	display: block;
}

.salon-more-menu .salon-cell::before {
	content: none;
}

.salon-more-menu .salon-link {
	display: flex;
	min-height: 40px;
	padding-inline: var(--s-step-2);
	border-radius: var(--r-step-2);
}

.salon-more-menu .salon-link:hover {
	background: var(--tint);
	color: var(--t-type);
	text-decoration: none;
}

.salon-tools {
	display: flex;
	align-items: center;
	gap: var(--s-step-2);
	flex-shrink: 0;
	order: 3;
	margin-inline-start: auto;
}

.salon-nav ~ .salon-tools {
	margin-inline-start: var(--s-step-2);
}

.salon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: var(--s-step-3);
	border: var(--b-slim) solid var(--t-stroke-heavy);
	border-radius: var(--r-step-0);
	background: var(--tint);
	color: var(--t-type);
	font-family: var(--f-heading);
	font-size: 14px;
	font-weight: var(--w-black);
	white-space: nowrap;
	text-decoration: none;
}

.salon-btn:hover {
	background: var(--t-type);
	color: var(--t-backdrop);
}

.salon-pane {
	position: absolute;
	inset-inline: var(--edge);
	top: calc(100% - var(--s-step-1));
	z-index: 90;
	display: none;
	max-height: 72vh;
	overflow-y: auto;
	padding: var(--s-step-2);
	border: var(--b-slim) solid var(--t-stroke-heavy);
	border-radius: var(--r-step-4);
	background: var(--t-raised);
	box-shadow: var(--d-step-5);
}

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

.salon-pane-stack {
	list-style: none;
}

.salon-pane-cell {
	display: block;
	border-block-end: var(--b-slim) solid var(--t-rule);
}

.salon-pane-cell:last-child {
	border-block-end: 0;
}

.salon-pane-link {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding-inline: var(--s-step-2);
	color: var(--t-faint);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.salon-pane-link:hover {
	color: var(--t-type);
}

.salon-pane-link[aria-current='page'] {
	color: var(--t-type);
	box-shadow: inset 2px 0 0 var(--t-accent);
}

@media (min-width: 900px) {
	.salon-glyph-pic {
		height: 36px;
	}

	.salon-nav {
		display: block;
	}

	.salon-menu-knob {
		display: none;
	}

	.salon-pane {
		display: none;
	}

	.salon-bar {
		padding-inline: var(--s-step-4);
		gap: var(--s-step-3);
	}
}

@media (max-width: 460px) {
	.salon-btn {
		font-size: 13px;
		padding-inline: var(--s-step-2);
	}
}

/* — premier écran HERO-11 — */

.tableau {
	padding-block: 0;
	padding-inline: 0;
}

.tableau-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-step-4);
	align-items: center;
	padding-block: var(--sec-y);
}

.tableau-matter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-step-2);
}

.tableau-eyebrow {
	display: inline-block;
	padding: 4px var(--s-step-2);
	border-radius: var(--r-lozenge);
	background: var(--deep);
	color: var(--t-accent);
	font-family: var(--f-heading);
	font-size: var(--z-tiny);
	font-weight: var(--w-black);
	letter-spacing: var(--e-open);
	text-transform: uppercase;
}

.tableau-under {
	margin: 0;
	max-width: var(--v-narrow);
	color: var(--t-faint);
	font-size: var(--z-display-4);
	line-height: var(--l-base);
}

.tableau-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-step-2);
	margin-block-start: var(--s-step-1);
}

.tableau-fine {
	display: block;
	color: var(--t-faint);
	font-size: var(--z-tiny);
	line-height: 1.5;
}

.tableau-fine a {
	color: var(--t-faint);
	text-underline-offset: 3px;
}

.tableau-fine a:hover {
	color: var(--t-type);
}

.tableau-frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: var(--b-slim) solid var(--t-rule);
	border-radius: var(--r-step-4);
	background: var(--tint);
}

.tableau-pic {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

@media (min-width: 900px) {
	.tableau-shell {
		grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
		gap: var(--s-step-5);
	}

	.tableau-pic {
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* — chapeau de page PHEAD-07 — */

.relief-shell {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: var(--s-step-3);
	align-items: start;
	padding-block: var(--sec-y);
}

.relief-index {
	font-family: var(--f-heading);
	font-size: 40px;
	font-weight: var(--w-black);
	line-height: 1;
	color: var(--t-accent);
}

.relief-matter {
	min-width: 0;
}

.relief-note {
	margin: var(--s-step-2) 0 0;
	color: var(--t-faint);
}

.relief-extra {
	display: block;
	margin-block-start: var(--s-step-2);
	color: var(--t-faint);
	font-size: var(--z-caption);
}

@media (min-width: 900px) {
	.relief-shell {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: var(--s-step-4);
	}

	.relief-index {
		font-size: 68px;
	}
}

/* — texte courant PROSE-15 — */

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

.tribune-part + .tribune-part {
	margin-block-start: var(--s-step-4);
}

.tribune h2 {
	margin-block-start: 0;
	margin-block-end: var(--s-step-2);
	font-weight: var(--w-mid);
}

.tribune p {
	margin: 0 0 var(--s-step-2);
	color: var(--t-faint);
	line-height: var(--l-relaxed);
}

.tribune p:last-child {
	margin-block-end: 0;
}

.tribune-lede {
	color: var(--t-type) !important;
	font-weight: var(--w-black);
}

.tribune ul {
	margin: 0 0 var(--s-step-2);
	padding-inline-start: var(--s-step-4);
	color: var(--t-faint);
	line-height: var(--l-relaxed);
}

.tribune ol {
	margin: 0 0 var(--s-step-2);
	padding-inline-start: var(--s-step-4);
	color: var(--t-faint);
	line-height: var(--l-relaxed);
}

.tribune li {
	margin-block-end: var(--s-step-0);
}

.tribune-figure {
	margin: var(--s-step-3) 0;
	text-align: center;
	background: var(--t-backdrop);
}

.tribune-pic {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 52vh;
	margin-inline: auto;
	border: var(--b-slim) solid var(--t-rule);
	border-radius: var(--r-step-3);
}

/* — cartes GRID-13 — */

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

.chapitre-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-step-3);
	margin-block-start: var(--s-step-3);
}

.chapitre-tile {
	display: flex;
	flex-direction: column;
	gap: var(--s-step-1);
	padding: var(--s-step-4);
	border: var(--b-slim) solid var(--t-rule);
	border-radius: var(--r-step-3);
	background: var(--t-raised);
	transition: border-color var(--t-steady) var(--x-out);
}

.chapitre-tile::after {
	content: '';
	display: block;
	width: 0;
	height: 3px;
	margin-block-start: auto;
	background: var(--t-accent);
	transition: width var(--t-steady) var(--x-out);
}

.chapitre-tile:hover {
	border-color: var(--t-stroke-heavy);
}

.chapitre-tile:hover::after {
	width: 56px;
}

.chapitre-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 8px;
	border: var(--b-slim) solid var(--t-stroke-heavy);
	border-radius: var(--r-step-2);
	background: var(--deep);
	color: var(--t-accent);
}

.chapitre-pic {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.chapitre-top {
	font-size: var(--z-h5);
	font-family: var(--f-heading);
}

.chapitre-note {
	color: var(--t-faint);
	font-size: var(--z-caption);
	line-height: var(--l-base);
}

@media (min-width: 600px) {
	.chapitre-stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1240px) {
	.chapitre-stack {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* — tableau de données TABLE-07 — */

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

.terrasse-scroll {
	margin-block-start: var(--s-step-3);
	overflow-x: auto;
	border: var(--b-slim) solid var(--t-rule);
	border-radius: var(--r-step-3);
}

.terrasse-grid {
	width: 100%;
	background: var(--t-raised);
	font-size: var(--z-caption);
}

.terrasse-grid th {
	padding: var(--s-step-2) var(--s-step-3);
	background: var(--t-prime);
	color: var(--t-type);
	font-family: var(--f-heading);
	font-size: var(--z-xs-2);
	font-weight: var(--w-black);
	text-align: start;
	letter-spacing: var(--e-open);
}

.terrasse-grid td {
	padding: var(--s-step-2) var(--s-step-3);
	border-block-start: var(--b-slim) solid var(--t-rule);
	background: var(--t-raised);
	color: var(--t-faint);
	vertical-align: top;
}

.terrasse-grid td:nth-child(even) {
	background: var(--tint);
	color: var(--t-type);
}

.terrasse-grid td:first-child {
	color: var(--t-type);
	font-weight: var(--w-mid);
}

@media (min-width: 640px) {
	.terrasse-grid {
		min-width: 560px;
	}
}

/* — avis REV-04 — */

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

.carnet-feature {
	margin: var(--s-step-3) 0 0;
	padding: var(--s-step-4);
	border: var(--b-slim) solid var(--t-stroke-heavy);
	border-radius: var(--r-step-4);
	background: var(--deep);
	color: var(--t-type);
}

.carnet-words {
	margin: 0;
}

.carnet-words p {
	margin: 0;
	font-size: var(--z-display-4);
	font-style: italic;
	line-height: var(--l-base);
	color: var(--t-type);
}

.carnet-by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-step-2);
	margin-block-start: var(--s-step-3);
}

.carnet-author {
	color: var(--t-type);
	font-family: var(--f-heading);
	font-weight: var(--w-black);
	font-size: var(--z-caption);
}

.carnet-score {
	color: var(--t-ramp-end);
	font-size: var(--z-caption);
	letter-spacing: 1px;
}

.carnet-stamp {
	color: var(--t-faint);
	font-size: var(--z-tiny);
}

.carnet-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-step-3);
	margin-block-start: var(--s-step-4);
}

.carnet-cell {
	padding-block-start: var(--s-step-3);
	border-block-start: var(--b-slim) solid var(--t-rule);
}

.carnet-file {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-step-2);
	margin-block-end: var(--s-step-1);
}

.carnet-note {
	color: var(--t-faint);
	font-size: var(--z-caption);
	line-height: var(--l-base);
}

@media (min-width: 900px) {
	.carnet-stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-step-4);
	}
}

/* — questions FAQ-01 — */

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

.niche-stack {
	margin-block-start: var(--s-step-3);
}

.niche-cell {
	border-block-end: var(--b-slim) solid var(--t-rule);
}

.niche-ask {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 26px;
	align-items: center;
	gap: var(--s-step-2);
	padding-block: var(--s-step-3);
	cursor: pointer;
	list-style: none;
}

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

.niche-top {
	font-family: var(--f-copy);
	font-size: var(--z-h5);
	font-weight: var(--w-black);
	line-height: var(--l-base);
	color: var(--t-type);
}

.niche-ask:hover .niche-top {
	color: var(--t-accent);
}

.niche-mark {
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	color: var(--t-accent);
	transition: transform var(--t-steady) var(--x-out);
}

.niche-mark::before,
.niche-mark::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	margin: -1px 0 0 -8px;
	background: currentColor;
}

.niche-mark::after {
	transform: rotate(90deg);
}

.niche-cell[open] .niche-mark {
	transform: rotate(45deg);
}

.niche-reply {
	padding-block-end: var(--s-step-3);
	animation: replyOpen var(--t-steady) var(--x-out) both;
}

.niche-reply p {
	margin: 0;
	color: var(--t-faint);
	line-height: var(--l-relaxed);
	font-size: var(--z-caption);
}

@keyframes replyOpen {
	from { opacity: 0; max-height: 0; }
	to { opacity: 1; max-height: 640px; }
}

/* — appel à l'action CTA-09 — */

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

.placard-eyebrow {
	display: block;
	margin-block-end: var(--s-step-1);
	color: var(--t-accent);
	font-family: var(--f-heading);
	font-size: var(--z-tiny);
	font-weight: var(--w-black);
	letter-spacing: var(--e-open);
	text-transform: uppercase;
}

.placard-note {
	max-width: var(--v-narrow);
	margin: var(--s-step-2) 0 var(--s-step-3);
	color: var(--t-faint);
	line-height: var(--l-relaxed);
}

.placard-fine {
	display: block;
	margin-block-start: var(--s-step-2);
	color: var(--t-faint);
	font-size: var(--z-tiny);
}

.placard-fine a {
	color: var(--t-faint);
	text-underline-offset: 3px;
}

.placard-fine a:hover {
	color: var(--t-type);
}

/* — invitation en cours de page INLINE-CTA-02 — */

.quai {
	display: block;
	padding-inline: var(--edge);
}

.quai-shell {
	padding-block: var(--s-step-3);
}

.quai-tile {
	max-width: var(--v-narrow);
	margin-inline: auto;
	padding: var(--s-step-4);
	border: var(--b-slim) solid var(--t-stroke-heavy);
	border-radius: var(--r-step-3);
	background: var(--t-raised);
	text-align: center;
}

.quai-top {
	font-size: var(--z-display-4);
	font-family: var(--f-heading);
	font-weight: var(--w-black);
}

.quai-under {
	margin: var(--s-step-1) 0 var(--s-step-3);
	color: var(--t-faint);
	font-size: var(--z-caption);
}

/* — juridique LEGAL-05 — */

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

.poteau-intro {
	margin: 0 0 var(--s-step-4);
	color: var(--t-faint);
	line-height: var(--l-relaxed);
}

.poteau-stack {
	margin: 0;
}

.poteau-term {
	position: relative;
	margin-block-start: var(--s-step-4);
	margin-block-end: var(--s-step-1);
	padding-block-start: var(--s-step-2);
	font-family: var(--f-heading);
	font-size: var(--z-display-4);
	font-weight: var(--w-black);
	color: var(--t-type);
}

.poteau-term::before {
	content: '';
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 30px;
	height: 2px;
	background: var(--t-accent);
}

.poteau-def {
	margin-inline-start: 0;
	margin-block-end: var(--s-step-3);
	color: var(--t-faint);
	line-height: var(--l-relaxed);
}

.poteau-def p {
	margin: 0 0 var(--s-step-2);
}

.poteau-def p:last-child {
	margin-block-end: 0;
}

.poteau-help {
	margin-block-start: var(--s-step-4);
	padding: var(--s-step-3);
	border: var(--b-slim) solid var(--t-rule);
	border-radius: var(--r-step-3);
	background: var(--t-raised);
}

.poteau-help-top {
	margin-block-end: var(--s-step-1);
	font-family: var(--f-heading);
	font-size: var(--z-h5);
	font-weight: var(--w-black);
	color: var(--t-type);
}

.poteau-help-stack {
	list-style: none;
	color: var(--t-faint);
	font-size: var(--z-caption);
	line-height: var(--l-relaxed);
}

.poteau-fine {
	display: block;
	margin-block-start: var(--s-step-3);
	color: var(--t-faint);
	font-size: var(--z-tiny);
	line-height: 1.6;
}

.poteau-stamp {
	display: block;
	margin-block-start: var(--s-step-2);
	color: var(--t-faint);
	font-size: var(--z-tiny);
}

/* — formulaire FORM-02 — */

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

.secteur-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-step-4);
	margin-block-start: var(--s-step-3);
}

.secteur-side {
	align-self: start;
	padding: var(--s-step-4);
	border: var(--b-slim) solid var(--t-rule);
	border-radius: var(--r-step-3);
	background: var(--deep);
	color: var(--t-type);
}

.secteur-side-top {
	margin-block-end: var(--s-step-2);
	font-family: var(--f-heading);
	font-size: var(--z-display-4);
	font-weight: var(--w-black);
}

.secteur-note {
	margin: 0 0 var(--s-step-3);
	color: var(--t-faint);
	font-size: var(--z-caption);
	line-height: var(--l-base);
}

.secteur-stack {
	list-style: none;
	color: var(--t-faint);
	font-size: var(--z-caption);
	line-height: var(--l-relaxed);
}

.secteur-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-step-3);
}

.secteur-line {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--s-step-0);
}

.secteur-cap {
	color: var(--t-faint);
	font-size: var(--z-caption);
	font-weight: var(--w-mid);
}

.secteur-input {
	padding: var(--s-step-2) var(--s-step-3);
	border: var(--b-slim) solid var(--t-stroke-heavy);
	border-radius: var(--r-step-2);
	background: var(--t-raised);
	color: var(--t-type);
	font-family: var(--f-copy);
	font-size: var(--z-caption);
}

.secteur-input:focus {
	border-color: var(--t-accent);
	outline: none;
}

textarea.secteur-input {
	min-height: 128px;
	resize: vertical;
}

.secteur-btn {
	align-self: flex-start;
	min-height: 48px;
	padding-inline: var(--s-step-5);
	border: 0;
	border-radius: var(--r-step-2);
	background: var(--t-prime);
	color: var(--t-type);
	font-family: var(--f-heading);
	font-size: var(--z-caption);
	font-weight: var(--w-black);
	letter-spacing: var(--e-open);
	cursor: pointer;
	transition: background var(--t-snap) var(--x-out);
}

.secteur-btn:hover {
	background: var(--t-key-active);
	color: var(--t-type);
}

.secteur-words {
	display: none;
	padding: var(--s-step-3);
	border: var(--b-slim) solid #1f5f3a;
	border-radius: var(--r-step-2);
	background: #0d2318;
	color: var(--t-type);
	font-size: var(--z-caption);
}

.secteur-words.is-visible {
	display: block;
}

@media (min-width: 900px) {
	.secteur-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}

/* — fiche autrice AUTH-06 — */

.registre {
	background: var(--deep);
}

.registre-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-step-4);
	align-items: start;
	padding-block: var(--s-step-6);
}

.registre-face {
	width: 200px;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--r-step-4);
	box-shadow: var(--d-step-4);
	background: var(--tint);
}

.registre-face-pic {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
}

.registre-eyebrow {
	display: block;
	margin-block-end: var(--s-step-1);
	color: var(--t-accent);
	font-family: var(--f-heading);
	font-size: var(--z-caption);
	font-weight: var(--w-black);
	letter-spacing: var(--e-open);
	text-transform: uppercase;
}

.registre-bio {
	margin: var(--s-step-3) 0 0;
	color: var(--t-type);
	font-size: var(--z-display-4);
	line-height: var(--l-base);
}

.registre-stack {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-step-1);
	margin-block-start: var(--s-step-3);
	list-style: none;
}

.registre-chip {
	padding: 5px var(--s-step-2);
	border-radius: var(--r-lozenge);
	background: var(--tint);
	color: var(--t-faint);
	font-size: var(--z-tiny);
}

@media (min-width: 900px) {
	.registre-shell {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--s-step-6);
	}

	.registre-face {
		width: 240px;
	}
}

/* — signature BYLINE-05 — */

.voussure {
	display: block;
	background: var(--deep);
}

.voussure-shell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-step-3);
	padding-block: var(--s-step-4);
}

.voussure-who {
	display: flex;
	align-items: center;
	gap: var(--s-step-3);
}

.voussure-face {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--r-dot);
	object-fit: cover;
}

.voussure-note {
	min-width: 0;
}

.voussure-author {
	margin: 0;
	font-family: var(--f-heading);
	font-size: var(--z-h5);
	font-weight: var(--w-black);
}

.voussure-author a {
	color: var(--t-type);
	text-decoration: none;
}

.voussure-author a:hover {
	color: var(--t-accent);
}

.voussure-duty {
	margin: 0;
	color: var(--t-faint);
	font-size: var(--z-caption);
}

.voussure-stamp {
	display: block;
	margin-block-start: 3px;
	color: var(--t-faint);
	font-size: var(--z-tiny);
}

.voussure-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--s-step-3);
	border: var(--b-slim) solid var(--t-accent);
	border-radius: var(--r-step-0);
	background: var(--deep);
	color: var(--t-accent);
	font-size: var(--z-caption);
	font-weight: var(--w-mid);
	text-decoration: none;
	white-space: nowrap;
}

.voussure-link:hover {
	background: var(--t-accent);
	color: var(--t-backdrop);
}

@media (max-width: 599px) {
	.voussure-link {
		width: 100%;
		justify-content: center;
	}
}

/* — page introuvable ERR-03 — */

.annexe-shell {
	padding-block: var(--s-step-6);
	text-align: center;
}

.annexe-matter {
	max-width: var(--v-narrow);
	margin-inline: auto;
}

.annexe-top {
	font-size: var(--z-display-2);
	font-weight: var(--w-black);
}

.annexe-note {
	margin: var(--s-step-3) 0;
	color: var(--t-faint);
	line-height: var(--l-relaxed);
}

.annexe-return {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--s-step-4);
	border-radius: var(--r-step-2);
	background: var(--t-prime);
	color: var(--t-type);
	font-family: var(--f-heading);
	font-weight: var(--w-black);
	font-size: var(--z-caption);
	text-decoration: none;
}

.annexe-return:hover {
	background: var(--t-key-active);
	color: var(--t-type);
}

/* — pied de page FOOT-02 — */

.loggia {
	margin-block-start: var(--sec-y);
	border-block-start: var(--b-slim) solid var(--t-rule);
	background: var(--t-backdrop);
}

.loggia-deck {
	width: 100%;
	max-width: calc(var(--v-full) + 2 * var(--v-padding-desktop));
	margin-inline: auto;
	padding-inline: var(--edge);
	padding-block: var(--s-step-5);
}

.loggia-file {
	display: flex;
	flex-direction: column;
	gap: var(--s-step-3);
}

.loggia-file--bottom {
	margin-block-start: var(--s-step-4);
	padding-block-start: var(--s-step-3);
	border-block-start: var(--b-slim) solid var(--t-rule);
}

.loggia-glyph {
	display: inline-flex;
	line-height: 0;
}

.loggia-glyph-pic {
	display: block;
	width: auto;
	height: 32px;
}

.loggia-stack {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-step-2) var(--s-step-3);
	list-style: none;
}

.loggia-link {
	color: var(--t-faint);
	font-size: var(--z-caption);
	text-decoration: none;
}

.loggia-link:hover {
	color: var(--t-type);
}

.loggia-fine {
	display: block;
	color: var(--t-faint);
	font-size: var(--z-tiny);
	line-height: 1.6;
}

.loggia-mark {
	display: block;
	margin-block-start: var(--s-step-1);
	color: var(--t-faint);
	font-size: var(--z-tiny);
}

.loggia-invite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-step-3);
	margin-block-end: var(--s-step-4);
	padding: var(--s-step-4);
	border: var(--b-slim) solid var(--t-stroke-heavy);
	border-radius: var(--r-step-3);
	background: var(--deep);
}

.loggia-invite-note {
	margin: 0;
	color: var(--t-type);
	font-size: var(--z-caption);
	max-width: var(--v-narrow);
}

@media (min-width: 900px) {
	.loggia-file {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.loggia-glyph-pic {
		height: 34px;
	}
}

/* — bandeau cookies COOK-01 — */

.billet {
	position: fixed;
	inset-inline: var(--s-step-3);
	inset-block-end: var(--s-step-3);
	z-index: 120;
	display: none;
	max-width: var(--v-narrow);
	margin-inline: auto;
	padding: var(--s-step-3);
	border: var(--b-slim) solid var(--t-stroke-heavy);
	border-radius: var(--r-step-3);
	background: var(--t-raised);
	box-shadow: var(--d-step-4);
	color: var(--t-type);
}

.billet.is-visible {
	display: block;
	animation: billetRise var(--t-calm) var(--x-out) both;
}

@keyframes billetRise {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: translateY(0); }
}

.billet-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-step-3);
}

.billet-words {
	flex: 1 1 260px;
	margin: 0;
	color: var(--t-faint);
	font-size: var(--z-caption);
	line-height: var(--l-base);
}

.billet-tools {
	display: flex;
	gap: var(--s-step-2);
}

.billet-approve,
.billet-skip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding-inline: var(--s-step-3);
	border-radius: var(--r-step-2);
	font-family: var(--f-heading);
	font-size: var(--z-tiny);
	font-weight: var(--w-black);
	letter-spacing: var(--e-open);
	cursor: pointer;
}

.billet-approve {
	border: 0;
	background: var(--t-prime);
	color: var(--t-type);
}

.billet-approve:hover {
	background: var(--t-key-active);
	color: var(--t-type);
}

.billet-skip {
	border: var(--b-slim) solid var(--t-stroke-heavy);
	background: var(--tint);
	color: var(--t-type);
}

.billet-skip:hover {
	background: var(--t-stroke-heavy);
	color: var(--t-type);
}

@media (max-width: 720px) {
	.billet {
		padding: 12px 14px;
	}

	.billet-body {
		gap: 8px;
	}

	.billet-words {
		font-size: 13px;
		line-height: 1.35;
	}

	.billet-tools {
		width: 100%;
	}

	.billet-approve,
	.billet-skip {
		flex: 1 1 auto;
		min-height: 36px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

/* Offer CTA — scripts/cta-style.mjs (orange #F97316, shine, 4s) */
.bitd-act {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 34px;
	border: 2px solid #040404;
	border-radius: 0;
	background: #F97316;
	color: #040404;
	text-decoration: none;
	font-family: var(--f-heading);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 #040404;
	transition: background 127ms var(--x-out), color 127ms var(--x-out), transform 127ms var(--x-out), box-shadow 127ms var(--x-out);
}

.bitd-act::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	transform: none;
	pointer-events: none;
	background-image: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .42) 50%, transparent 100%);
	background-size: 45% 100%;
	background-repeat: no-repeat;
	background-position: -60% 0;
	animation: shine_bitd 4s var(--x-out) infinite;
}

@keyframes shine_bitd {
	0% { background-position: -60% 0; }
	32.500%, 100% { background-position: 200% 0; }
}

.bitd-act:hover {
	background: #C2410C;
	color: #FFFFFF;
	box-shadow: 1px 1px 0 #040404;
	transform: translateY(-6px);
	animation: none;
}

.bitd-act:hover::after {
	animation: none;
}

.bitd-act:active {
	background: #9A3412;
	color: #FFFFFF;
	transform: translateY(0);
}

.bitd-act:focus-visible {
	outline: 3px solid #F97316;
	outline-offset: 3px;
}

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

/* barre d'en-tête sur petits écrans */
@media (max-width: 640px) {
	.salon-bar {
		flex-wrap: wrap;
		row-gap: var(--s-step-1);
		min-height: 62px;
		padding-block: var(--s-step-1);
	}

	.salon-glyph {
		order: 1;
	}

	.salon-menu-knob {
		order: 2;
		margin-inline-start: auto;
	}

	.salon-tools,
	.salon-nav ~ .salon-tools {
		order: 3;
		flex-basis: 100%;
		margin-inline-start: 0;
	}

	.salon-tools .bitd-act,
	.salon-tools .salon-btn {
		width: 100%;
	}

	.salon-pane {
		top: calc(100% - var(--s-step-1));
	}
}

@media (max-width: 380px) {
	.salon-glyph-pic {
		height: 26px;
	}

	.bitd-act {
		padding: 0 18px;
		letter-spacing: 1.6px;
	}
}

/* — racines de sections et enveloppes — */
.matiere,
.chapitre,
.niche,
.carnet,
.terrasse,
.placard,
.poteau,
.secteur,
.relief,
.annexe,
.tribune,
.registre-matter {
	display: block;
	min-width: 0;
}

.salon-pane-nav,
.loggia-nav,
.loggia-legal-nav {
	display: block;
	min-width: 0;
}

.salon-cell--more {
	margin-inline-start: 0;
}

.loggia-file--top {
	align-items: center;
}

.loggia-cell {
	display: inline-flex;
	align-items: center;
}

.poteau-help-cell {
	margin-block-end: var(--s-step-1);
}

.secteur-cell {
	margin-block-end: var(--s-step-0);
}

.tableau-btn,
.quai-btn,
.placard-btn {
	align-self: flex-start;
	max-width: 100%;
}

@media (max-width: 496px) {
  .salon-nav,
  .salon-stack,
  .salon-link { display: none !important; }
  .salon-more-opener { display: flex !important; }
}