:root {
	--beat: 90ms;
	--t-micro: calc(var(--beat) * 1.6);
	--t-state: calc(var(--beat) * 3);
	--t-arrive: calc(var(--beat) * 6);
	--t-draw: calc(var(--beat) * 12);
	--ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-snap: cubic-bezier(0.2, 0, 0, 1);
	--ease-hold: cubic-bezier(0.65, 0, 0.35, 1);
	--rail-w: 50px;
	--rail-tick: 14px;
}

.hero__facts, .map__overline, .map__caption, .step__num, .stage__index, .doc__meta, .doc__steps, .rail, .poletable, .article__meta {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

@supports not (animation-timeline: view()) {
	.reveal { transition: opacity var(--t-arrive) var(--ease-settle), transform var(--t-arrive) var(--ease-settle); }
	.stages .reveal:nth-child(2), .poles .reveal:nth-child(2), .nots .reveal:nth-child(2), .steps .reveal:nth-child(2), .phases .reveal:nth-child(2), .principles .reveal:nth-child(2), .artefacts .reveal:nth-child(2), .cards .reveal:nth-child(2), .informal__list .reveal:nth-child(2), .ways .reveal:nth-child(2) { transition-delay: var(--beat); }
	.stages .reveal:nth-child(3), .poles .reveal:nth-child(3), .nots .reveal:nth-child(3), .steps .reveal:nth-child(3), .phases .reveal:nth-child(3), .principles .reveal:nth-child(3), .artefacts .reveal:nth-child(3), .cards .reveal:nth-child(3), .informal__list .reveal:nth-child(3), .ways .reveal:nth-child(3) { transition-delay: calc(var(--beat) * 2); }
	.poles .reveal:nth-child(4), .steps .reveal:nth-child(4), .phases .reveal:nth-child(4), .principles .reveal:nth-child(4), .informal__list .reveal:nth-child(4), .ways .reveal:nth-child(4) { transition-delay: calc(var(--beat) * 3); }
	.steps .reveal:nth-child(5), .phases .reveal:nth-child(5), .principles .reveal:nth-child(5), .informal__list .reveal:nth-child(5) { transition-delay: calc(var(--beat) * 4); }
	.informal__list .reveal:nth-child(6) { transition-delay: calc(var(--beat) * 5); }
}

.rule::before { transition: transform var(--t-draw) var(--ease-snap); }
.btn { transition: box-shadow var(--t-state) var(--ease-settle), transform var(--t-state) var(--ease-settle), background-color var(--t-micro) var(--ease-snap), color var(--t-micro) var(--ease-snap); }
.btn::before { transition: transform calc(var(--beat) * 5) var(--ease-snap); }
.btn__mark { transition: transform var(--t-state) var(--ease-snap); }
.btn:active { transform: translateY(1px) scale(0.985); transition-duration: var(--beat); }
.link { transition: background-size var(--t-state) var(--ease-snap), text-decoration-color var(--t-micro); }
.site-nav__list a::after { transition: transform var(--t-state) var(--ease-snap); }
.site-nav__list a { transition: color var(--t-micro); }
.pole__title, .stage__title, .card__title, .step__num { transition: color var(--t-micro) var(--ease-snap); }
.faq__q span:first-child { transition: transform var(--t-state) var(--ease-snap); }
.faq__item::details-content { transition: height calc(var(--beat) * 4) var(--ease-snap), content-visibility calc(var(--beat) * 4) allow-discrete; }
.site-header { transition: border-color var(--t-state), background-color var(--t-state), transform calc(var(--beat) * 5) var(--ease-snap); }

.section-head { position: relative; }
.section-head::before,
.section-head::after {
	content: '';
	position: absolute;
	top: -13px;
	width: 11px;
	height: 11px;
	border-top: 1px solid var(--signal);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--t-state) var(--ease-snap), transform var(--t-state) var(--ease-snap);
}
.section-head::before { left: -13px; border-left: 1px solid var(--signal); transform: translate(6px, 6px); }
.section-head::after { left: 100%; margin-left: 2px; border-right: 1px solid var(--signal); transform: translate(-6px, 6px); }
.section-head.is-registered::before,
.section-head.is-registered::after { opacity: 0.5; transform: none; }
.section-head.is-registered::before { transition-delay: var(--beat); }
.section-head.is-registered::after { transition-delay: calc(var(--beat) * 2); }
.section--dark .section-head::before, .section--dark .section-head::after { border-color: var(--lilac); }
@media (max-width: 900px) { .section-head::before, .section-head::after { display: none; } }

.rail {
	position: fixed;
	left: max(18px, calc((100vw - var(--container)) / 2 - var(--rail-w) - 26px));
	top: 50%;
	z-index: 45;
	display: none;
	width: var(--rail-w);
	transform: translateY(-50%);
	color: var(--mute);
	transition: color var(--t-state) var(--ease-snap);
}
.rail.is-on-dark { color: var(--mute-light); }
.rail__list { list-style: none; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.rail__item { position: relative; }
.rail__link {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 26px;
	padding-left: 11px;
	color: inherit;
	cursor: pointer;
}
.rail__tick {
	position: relative;
	display: block;
	width: var(--rail-tick);
	height: 1px;
	background: currentColor;
	opacity: 0.32;
	transform-origin: left;
	transition: transform var(--t-state) var(--ease-snap), opacity var(--t-state) var(--ease-snap), background-color var(--t-state);
}
.rail__item.is-passed .rail__tick { opacity: 0.62; }
.rail__item.is-current .rail__tick { opacity: 1; background: var(--signal); transform: scaleX(1.85); }
.rail.is-on-dark .rail__item.is-current .rail__tick { background: var(--lilac); }
.rail__link:hover .rail__tick, .rail__link:focus-visible .rail__tick { opacity: 1; transform: scaleX(1.5); }
.rail__index {
	font-size: 0.5625rem;
	letter-spacing: 0.08em;
	line-height: 1;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--t-state) var(--ease-snap), transform var(--t-state) var(--ease-snap);
}
.rail__item.is-current .rail__index, .rail__link:hover .rail__index, .rail__link:focus-visible .rail__index { opacity: 1; transform: none; }
.rail__item.is-current .rail__index { color: var(--ink); }
.rail.is-on-dark .rail__item.is-current .rail__index { color: var(--paper); }
.rail__label {
	position: absolute;
	left: calc(var(--rail-tick) + 44px);
	top: 50%;
	max-width: 28ch;
	padding: 3px 9px;
	background: var(--ink);
	color: var(--paper);
	font-size: 0.5625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 0 var(--radius) var(--radius) 0;
	opacity: 0;
	transform: translate(-6px, -50%);
	pointer-events: none;
	transition: opacity var(--t-micro) var(--ease-snap), transform var(--t-micro) var(--ease-snap);
}
.rail__link:hover .rail__label, .rail__link:focus-visible .rail__label { opacity: 1; transform: translate(0, -50%); }
.rail__readout {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 14px 0 0 11px;
	padding-top: 12px;
	border-top: 1px solid currentColor;
	min-width: calc(var(--rail-tick) + 18px);
	font-size: 0.5625rem;
	letter-spacing: 0.08em;
	line-height: 1;
}
.rail__now { color: var(--ink); opacity: 1; }
.rail.is-on-dark .rail__now { color: var(--paper); }
.rail__sep { opacity: 0.4; }
.rail__gauge { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: 0.14; }
.rail__gauge span { display: block; width: 100%; height: 100%; background: var(--signal); transform: scaleY(0); transform-origin: top; }
.rail.is-on-dark .rail__gauge span { background: var(--lilac); }
@media (min-width: 1320px) and (pointer: fine) {
	.rail { display: block; }
	body.has-rail .reading-progress { display: none; }
}
@media print { .rail { display: none !important; } }

.ouverture { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.ouverture span { position: absolute; background: var(--signal); opacity: 0.55; }
.ouverture__v { top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top; animation: ouv-v calc(var(--beat) * 5) var(--ease-snap) forwards; }
.ouverture__v--l { left: calc((var(--vw, 100vw) - min(var(--container), var(--vw, 100vw))) / 2 + var(--gutter)); }
.ouverture__v--r { right: calc((var(--vw, 100vw) - min(var(--container), var(--vw, 100vw))) / 2 + var(--gutter)); animation-delay: calc(var(--beat) * 0.6); }
.ouverture__h { left: 0; right: 0; top: var(--header-h); height: 1px; transform: scaleX(0); transform-origin: left; animation: ouv-h calc(var(--beat) * 6) var(--ease-snap) calc(var(--beat) * 2) forwards; }
.ouverture { animation: ouv-clear calc(var(--beat) * 4) var(--ease-hold) calc(var(--beat) * 10) forwards; }
@keyframes ouv-v { to { transform: scaleY(1); } }
@keyframes ouv-h { to { transform: scaleX(1); } }
@keyframes ouv-clear { to { opacity: 0; } }

::view-transition-old(root) { animation: calc(var(--beat) * 2) var(--ease-snap) both vt-out; }
::view-transition-new(root) { animation: calc(var(--beat) * 5) var(--ease-settle) both vt-in; }

@supports (animation-timeline: view()) {
	.reveal, .reveal.is-visible, .section-head { animation-timing-function: var(--ease-settle); }
	.rail__gauge span { animation: rail-fill linear both; animation-timeline: scroll(root); animation-range: 0% 100%; }
}
@keyframes rail-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px var(--violet); }
	.step:hover .step__num::after { transform: rotate(90deg) scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
	.ouverture { display: none; }
	.section-head::before, .section-head::after { opacity: 0.5; transform: none; }
	.rail__gauge span { animation: none; }
}

/* ——— Composition : le brouillon qui se fixe ——— */

@supports (animation-timeline: view()) {
    .hero { view-timeline-name: --hero; view-timeline-axis: block; }
    .hero__text {
        animation: hero-release linear both;
        animation-timeline: --hero;
        animation-range: exit 15% exit 100%;
    }
}
@keyframes hero-release {
    from { opacity: 1; transform: none; }
    to { opacity: 0.18; transform: translateY(-24px); }
}
@media (prefers-reduced-motion: reduce), print {
    .hero__text { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.schema__links .schema__link { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--t-draw) var(--ease-snap), opacity var(--t-state) var(--ease-snap); }
.stage.is-visible .schema__links .schema__link { stroke-dashoffset: 0; }
.stage.is-visible .schema__links .schema__link:nth-child(2) { transition-delay: var(--beat); }
.stage.is-visible .schema__links .schema__link:nth-child(3) { transition-delay: calc(var(--beat) * 2); }
.schema__links .schema__link--soft { opacity: 0; transition: opacity var(--t-arrive) var(--ease-settle) calc(var(--beat) * 3); }
.stage.is-visible .schema__links .schema__link--soft { opacity: 1; }
.schema__nodes circle, .schema__ring { transition: opacity var(--t-state) var(--ease-snap); }
.stages.is-sonde .schema__links .schema__dep { opacity: 0.12; transition-delay: 0s; }
.schema__ring { transform-box: fill-box; transform-origin: center; }

.sonde { transition: color var(--t-micro) var(--ease-snap), border-color var(--t-micro) var(--ease-snap); }
.sonde::before { transition: background-color var(--t-state) var(--ease-snap), box-shadow var(--t-state) var(--ease-snap); }

.schema__flow::before { transform: scaleX(0); transform-origin: left; transition: transform var(--t-draw) var(--ease-snap); }
.schema--flux.is-visible .schema__flow::before { transform: none; }
.schema__post::after { opacity: 0; transition: opacity var(--t-state) var(--ease-settle) calc(var(--beat) * 3); }
.schema--flux.is-visible .schema__post::after { opacity: 1; }
@media (max-width: 720px) {
	.schema__flow::before { transform: scaleY(0); transform-origin: top; }
}
.schema__ties span { transform: scaleY(0); transform-origin: top; transition: transform var(--t-arrive) var(--ease-settle) calc(var(--beat) * 4); }
.schema--flux.is-visible .schema__ties span { transform: none; }

.schema__etape-mark { transform: scale(0); transform-origin: center; transition: transform var(--t-state) var(--ease-snap); }
.schema--ruban.is-visible .schema__etape-mark { transform: none; }
.schema--ruban.is-visible .schema__etape:nth-child(2) .schema__etape-mark { transition-delay: var(--beat); }
.schema--ruban.is-visible .schema__etape:nth-child(3) .schema__etape-mark { transition-delay: calc(var(--beat) * 2); }
.schema--ruban.is-visible .schema__etape:nth-child(4) .schema__etape-mark { transition-delay: calc(var(--beat) * 3); }
.schema--ruban.is-visible .schema__etape:nth-child(5) .schema__etape-mark { transition-delay: calc(var(--beat) * 4); }
.schema--ruban.is-visible .schema__etape a:hover .schema__etape-mark { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
	.schema__links .schema__link { stroke-dashoffset: 0; transition: none; }
	.schema__links .schema__link--soft { opacity: 1; transition: none; }
	.schema__flow::before, .schema__ties span, .schema__etape-mark { transform: none; transition: none; }
	.schema__post::after { opacity: 1; transition: none; }
	.schema__post-mark .shape, .schema__etape a:hover .schema__etape-mark { transition: none; }
	.schema__nodes circle, .schema__ring, .sonde, .sonde::before { transition: none; }
}

@media print {
	.sonde-bar { display: none !important; }
	.schema__links .schema__link { stroke-dashoffset: 0; }
	.schema__links .schema__link--soft { opacity: 1; }
	.schema__flow::before, .schema__ties span, .schema__etape-mark { transform: none; }
	.schema__post::after { opacity: 1; }
}

.hero, .page-head:not(.page-head--article) { position: relative; isolation: isolate; }
.page-head:not(.page-head--article) { overflow: hidden; }
.trame {
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
	pointer-events: none; overflow: hidden; color: var(--line); contain: strict; will-change: transform;
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.45), #000 48%), linear-gradient(to bottom, #000 62%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.45), #000 48%), linear-gradient(to bottom, #000 62%, transparent);
	mask-composite: intersect;
}
.hero > .trame { opacity: 0.7; }
.trame__dot { fill: var(--plan); }
.trame__major { fill: none; stroke: var(--plan); stroke-width: 1; }
.trame__trace { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: square; stroke-linejoin: miter; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: trame-draw var(--cycle, 16s) linear var(--delay, 0s) infinite; }
.trame__origin, .trame__node { fill: currentColor; transform-box: fill-box; transform-origin: center; opacity: 0; animation: trame-node var(--cycle, 16s) var(--ease-settle) var(--delay, 0s) infinite; }
.trame__origin { animation-name: trame-origin; }
.trame__node--ring { fill: none; stroke: currentColor; stroke-width: 1.25; }
.trame__scan { animation: trame-scan 34s linear infinite; }
.trame__scan-line { stroke: currentColor; stroke-width: 1; opacity: 0.7; }
@keyframes trame-draw {
	0% { stroke-dashoffset: 1; }
	28% { stroke-dashoffset: 0; }
	66% { stroke-dashoffset: 0; }
	94%, 100% { stroke-dashoffset: -1; }
}
@keyframes trame-node {
	0%, 27% { opacity: 0; transform: scale(0.3); }
	33% { opacity: 1; transform: none; }
	66% { opacity: 1; transform: none; }
	74%, 100% { opacity: 0; transform: none; }
}
@keyframes trame-origin {
	0% { opacity: 0; transform: scale(0.3); }
	4% { opacity: 1; transform: none; }
	66% { opacity: 1; }
	70%, 100% { opacity: 0; }
}
@keyframes trame-scan {
	0% { transform: translateX(0); }
	70%, 100% { transform: translateX(calc(var(--w, 100vw) + 140px)); }
}
@media (max-width: 720px) {
	.trame { -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), #000 40%, transparent); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), #000 40%, transparent); -webkit-mask-composite: source-over; mask-composite: add; }
}
@media (prefers-reduced-motion: reduce), print {
	.trame__trace { animation: none; stroke-dashoffset: 0; }
	.trame__origin, .trame__node { animation: none; opacity: 1; transform: none; }
	.trame__scan { display: none; }
}
@media print {
	.trame { display: none; }
}