/* ==========================================================================
   AXIS — Stability & Performance
   Reproduction du storyboard. Toute règle susceptible de toucher plusieurs
   sections est délibérément absente : le cadrage des images est porté par
   chaque écran, jamais par une règle globale.
   ========================================================================== */

:root {
	/*
	 * Pile système, conformément aux consignes typographiques AXIS.
	 * Aucune police n'est téléchargée : sur iPhone et Safari le rendu est
	 * assuré par SF Pro, avec Helvetica Neue puis Arial en repli. Ne pas
	 * remplacer par une police Google, dont le dessin et les proportions
	 * diffèrent de la maquette.
	 */
	--axis-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

	--axis-black: #000;
	--axis-white: #fff;
	--axis-frame: #1d1d1d;

	/* Graisses et interlettrages du document de référence. */
	--axis-weight-title: 300;
	--axis-weight-label: 400;
	--axis-weight-body: 300;
	--axis-track-title: .04em;   /* grands titres */
	--axis-track: .18em;         /* sous-titres et accroches en capitales */
	--axis-track-label: .12em;   /* numéros, repères, menus, mention SWIPE */
	--axis-track-body: .01em;    /* textes courants */
	--axis-track-wide: .34em;    /* mot-symbole du bandeau */

	/*
	 * Titres d'affichage des écrans d'introduction. Le document fixe 0.04em
	 * pour les grands titres, valeur qui décrit le texte HTML du storyboard.
	 * Les titres composés dans les images sont nettement plus espacés : la
	 * mesure sur le fichier d'origine donne 0.19em, et 0.45em pour la mention
	 * qui les surmonte. Le document demandant la fidélité au rendu, ce sont
	 * ces valeurs qui sont retenues ici.
	 */
	--axis-track-display: .19em;
	--axis-track-kicker: .45em;

	--axis-line-body: 1.45;
	--axis-safe-top: env(safe-area-inset-top, 0px);
	--axis-safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	background: var(--axis-black);
	color: var(--axis-white);
	font-family: var(--axis-font);
	font-weight: var(--axis-weight-body);
	letter-spacing: var(--axis-track-body);
	line-height: var(--axis-line-body);
	-webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }

img { max-width: 100%; }

a { color: inherit; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.axis-skip {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 200;
	padding: 10px 14px;
	background: var(--axis-white);
	color: var(--axis-black);
	font-size: 12px;
	text-decoration: none;
}

.axis-skip:focus { top: calc(12px + var(--axis-safe-top)); }

:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

/* --------------------------------------------------------- Récit vertical */

.axis-vertical {
	position: fixed;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;
}

.axis-screen {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 100vh;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background: var(--axis-black);
}

.axis-screen__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
	-webkit-user-drag: none;
	/* object-fit et object-position sont posés écran par écran. */
}

/* -------------------------------------------------- Balayage horizontal */

.axis-swipe { touch-action: pan-x pan-y; }

.axis-swipe__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: auto;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
}

.axis-swipe__track::-webkit-scrollbar { display: none; }

.axis-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.axis-dots {
	position: absolute;
	z-index: 20;
	left: 50%;
	bottom: calc(16px + var(--axis-safe-bottom));
	display: flex;
	gap: 8px;
	padding: 8px 11px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: rgba(0, 0, 0, .28);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.axis-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	transition: transform .2s, background .2s;
}

.axis-dot.is-active {
	background: var(--axis-white);
	transform: scale(1.35);
}

/* ------------------------------------------------------- Barre supérieure */

.axis-bar {
	position: fixed;
	z-index: 60;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: calc(18px + var(--axis-safe-top)) 20px 0;
	pointer-events: none;
	opacity: 1;
	transition: opacity .35s ease;
}

/* Masquée sur l'écran courant, ou désactivée entièrement. */
.axis-bar--hidden { opacity: 0; }
.axis-bar--off { display: none; }

.axis-bar--hidden .axis-bar__logo,
.axis-bar--hidden .axis-burger { pointer-events: none; }

.axis-bar__logo {
	pointer-events: auto;
	text-decoration: none;
	color: var(--axis-white);
}

.axis-bar__wordmark {
	display: block;
	font-size: 22px;
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track-wide);
	line-height: 1;
}

.axis-bar__tagline {
	display: block;
	margin-top: 6px;
	font-size: 7px;
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track);
}

.axis-burger {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--axis-white);
	font: inherit;
	cursor: pointer;
}

.axis-burger__label {
	font-size: 8px;
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
}

.axis-burger__lines {
	display: block;
	width: 26px;
}

.axis-burger__lines span {
	display: block;
	height: 1px;
	background: currentColor;
}

.axis-burger__lines span + span { margin-top: 7px; }

/*
 * La barre se pose sur des photographies de tonalités très variables. Une
 * ombre portée très douce garantit sa lisibilité sans ajouter de cartouche
 * ni de dégradé, que la direction artistique exclut.
 */
.axis-bar__logo,
.axis-burger {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}

/* Écrans clairs : la barre passe en sombre. */
.axis-bar--dark .axis-bar__logo,
.axis-bar--dark .axis-burger {
	color: #111;
	filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .5));
}

/* -------------------------------------------------------------- Le menu */

.axis-menu {
	position: relative;
	overflow: hidden;
	background: #0d0d0d;
}

.axis-menu--overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	height: 100svh;
}

.axis-menu--overlay[hidden] { display: none; }

.axis-menu__inner {
	position: absolute;
	inset: 0;
	z-index: 10;
}

.axis-menu__close {
	position: absolute;
	z-index: 20;
	top: calc(14px + var(--axis-safe-top));
	right: 14px;
	width: 48px;
	height: 48px;
	border: 0;
	background: none;
	color: var(--axis-white);
	font-size: 30px;
	font-weight: var(--axis-weight-title);
	line-height: 1;
	cursor: pointer;
}

.axis-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

.axis-menu__link {
	display: grid;
	grid-template-columns: 44px 1fr 28px;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--axis-white);
}

.axis-menu__number {
	font-size: 17px;
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
}

.axis-menu__labels {
	display: block;
	border-left: 1px solid rgba(255, 255, 255, .6);
	padding-left: 16px;
}

.axis-menu__title {
	display: block;
	font-size: 19px;
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track);
}

.axis-menu__subtitle {
	display: block;
	margin-top: 5px;
	font-size: 9px;
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
}

.axis-menu__arrow {
	font-size: 17px;
	text-align: right;
}

.axis-menu__hint {
	position: absolute;
	z-index: 20;
	left: 50%;
	bottom: calc(18px + var(--axis-safe-bottom));
	margin: 0;
	padding: 7px 10px;
	transform: translateX(-50%);
	border-radius: 999px;
	pointer-events: none;
	background: rgba(0, 0, 0, .3);
	color: var(--axis-white);
	font-size: 9px;
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/*
 * Pied du menu. Positions relevées sur la maquette, dont la zone utile
 * mesure 1672 pixels de haut : icônes à 84,03 %, liens légaux à 89 %,
 * mot-symbole à 93,6 %. --axis-mu vaut un pixel de cette maquette.
 */
.axis-menu__foot {
	--axis-mu: calc(100svh / 1672);

	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc(1405 * var(--axis-mu));
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--axis-white);
	text-align: center;
}

.axis-menu__social {
	display: flex;
	align-items: center;
	gap: calc(67 * var(--axis-mu));   /* 98 px d'axe en axe, icônes de 31 px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.axis-menu__social a {
	display: block;
	padding: calc(6 * var(--axis-mu));
	color: inherit;
	opacity: .92;
	transition: opacity .2s ease, transform .2s ease;
}

.axis-menu__social a:hover,
.axis-menu__social a:focus-visible {
	opacity: 1;
	transform: scale(1.12);
}

.axis-icon {
	display: block;
	width: calc(31 * var(--axis-mu));
	height: calc(31 * var(--axis-mu));
}

.axis-menu__legal {
	margin-top: calc(46 * var(--axis-mu));
	font-size: calc(13 * var(--axis-mu));
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
}

.axis-menu__legal-list {
	display: flex;
	align-items: center;
	gap: calc(30 * var(--axis-mu));
	margin: 0;
	padding: 0;
	list-style: none;
}

.axis-menu__legal-list li { position: relative; }

/* Le filet vertical qui sépare les deux liens dans la maquette. */
.axis-menu__legal-list li + li::before {
	content: "";
	position: absolute;
	width: 1px;
	height: calc(13 * var(--axis-mu));
	margin-left: calc(-15 * var(--axis-mu));
	background: currentColor;
	opacity: .6;
}

.axis-menu__legal a {
	text-decoration: none;
	opacity: .85;
}

.axis-menu__legal a:hover { opacity: 1; }

.axis-menu__wordmark {
	margin-top: calc(56 * var(--axis-mu));
	font-size: calc(22 * var(--axis-mu));
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track-wide);
	text-indent: var(--axis-track-wide);
	line-height: 1;
	opacity: .9;
}

/* Sur un écran très court, le pied reprend le flux plutôt que de déborder. */
@media (max-height: 620px) {
	.axis-menu__foot {
		top: auto;
		bottom: calc(14px + var(--axis-safe-bottom));
	}
}

/* Mise en page par défaut, image de fond sans libellés. */
.axis-menu:not(.axis-menu--baked) .axis-menu__nav {
	position: absolute;
	left: 0;
	right: 0;
	top: 46%;
	transform: translateY(-50%);
	padding: 0 22px;
}

.axis-menu:not(.axis-menu--baked) .axis-menu__item + .axis-menu__item {
	border-top: 1px solid rgba(255, 255, 255, .45);
}

.axis-menu:not(.axis-menu--baked) .axis-menu__link { padding: 17px 0; }

/*
 * Mode « libellés déjà dans l'image ».
 * Chaque rubrique est positionnée en pourcentage sur le libellé correspondant
 * du visuel. Le texte est transparent : la zone reste cliquable, focalisable
 * et annoncée par les lecteurs d'écran, sans doublon visuel.
 */
.axis-menu--baked .axis-menu__item {
	position: absolute;
	left: 10.4%;
	width: 79.3%;
	height: 8%;
	top: calc(17.35% + var(--axis-row) * 8.94%);
	transform: translateY(-50%);
}

.axis-menu--baked .axis-menu__link {
	height: 100%;
	color: transparent;
}

.axis-menu--baked .axis-menu__labels { border-left: 0; }

.axis-menu--baked .axis-menu__link:focus-visible {
	outline: 1px solid rgba(255, 255, 255, .9);
	outline-offset: 0;
}

/* ---------------------------------------------- Couche de texte des écrans */

.axis-screen__text {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	padding: calc(64px + var(--axis-safe-top)) 26px calc(40px + var(--axis-safe-bottom));
	pointer-events: none;
}

.axis-tone-light .axis-screen__text { color: var(--axis-white); }
.axis-tone-dark .axis-screen__text { color: #111; }

.axis-screen__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 10px;
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
}

.axis-screen__number {
	font-size: 15px;
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
}

.axis-screen__head { margin-top: 26px; }

.axis-screen__title {
	margin: 0;
	font-size: clamp(30px, 9vw, 42px);
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track-title);
	line-height: 1.08;
}

.axis-screen__subtitle {
	margin: 10px 0 0;
	font-size: clamp(15px, 4.6vw, 20px);
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track);
}

.axis-screen__body {
	margin-top: auto;
	max-width: 34ch;
	font-size: 14px;
	line-height: var(--axis-line-body);
}

.axis-screen__body p { margin: 0 0 14px; }

.axis-screen__meta {
	margin: 22px 0 0;
	font-size: 10px;
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
}

.axis-rule {
	display: block;
	width: 34px;
	height: 1px;
	margin: 0 0 18px;
	background: currentColor;
}

.axis-align-top .axis-screen__body { margin-top: 22px; margin-bottom: auto; }
.axis-align-center .axis-screen__text { justify-content: center; }
.axis-align-center .axis-screen__body { margin-top: 22px; }
.axis-align-bottom .axis-screen__head { margin-top: auto; }

/*
 * Disposition centrée des écrans d'introduction.
 *
 * Les valeurs sont relevées sur le fichier d'origine, dont la zone utile
 * mesure 1536 pixels de haut. L'unité --axis-u vaut donc un pixel de la
 * maquette : les mesures sont transcrites telles quelles, et comme l'image
 * est cadrée en cover sur un écran plus étroit que son propre rapport, elle
 * est mise à l'échelle par sa hauteur exactement comme ce texte.
 */
.axis-align-centered {
	--axis-u: calc(100svh / 1536);
}

.axis-align-centered .axis-screen__text {
	align-items: center;
	padding: calc(228 * var(--axis-u)) 22px calc(40px + var(--axis-safe-bottom));
	text-align: center;
}

.axis-align-centered .axis-screen__head {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.axis-align-centered .axis-screen__kicker {
	margin: 0;
	font-size: calc(22 * var(--axis-u));
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track-kicker);
	line-height: 1;
	text-indent: var(--axis-track-kicker); /* compense l'espace ajouté après la dernière lettre */
}

.axis-rule--centered {
	width: calc(66 * var(--axis-u));
	height: calc(2 * var(--axis-u));
	margin: calc(36 * var(--axis-u)) 0 0;
	opacity: .75;
}

.axis-align-centered .axis-screen__title {
	margin: calc(40 * var(--axis-u)) 0 0;
	font-size: calc(39 * var(--axis-u));
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track-display);
	line-height: 1.487;
	text-indent: var(--axis-track-display);
}

.axis-align-centered .axis-screen__subtitle {
	margin: calc(34 * var(--axis-u)) 0 0;
	font-size: calc(16 * var(--axis-u));
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track);
	line-height: 1.7;
	text-indent: var(--axis-track);
}

.axis-align-centered .axis-screen__body {
	margin: calc(46 * var(--axis-u)) auto 0;
	max-width: 38ch;
	font-size: calc(19 * var(--axis-u));
	line-height: 1.7;
}

/*
 * Chevron de défilement.
 *
 * Mesuré sur la maquette : 48 × 33 pixels, centré, bas du trait à 176 pixels
 * du bord inférieur. Sa couleur est réglée écran par écran et ne suit pas
 * celle du texte : sur les écrans d'introduction, le titre est sombre sur le
 * ciel tandis que le chevron est clair sur la roche.
 */
.axis-chevron {
	position: absolute;
	z-index: 12;
	left: 50%;
	bottom: calc(176 * var(--axis-u, calc(100svh / 1536)) + var(--axis-safe-bottom));
	width: calc(48 * var(--axis-u, calc(100svh / 1536)));
	transform: translateX(-50%);
}

.axis-chevron--light { color: var(--axis-white); }
.axis-chevron--dark { color: #111; }

.axis-chevron svg { width: 100%; height: auto; display: block; }

.axis-screen__position {
	position: absolute;
	z-index: 12;
	right: 26px;
	top: calc(66px + var(--axis-safe-top));
	font-weight: var(--axis-weight-label);
	font-size: 10px;
	letter-spacing: var(--axis-track-label);
}

/* --------------------------------------------------------- Cercle AXIS */

/*
 * Relevé sur la maquette : centre à 51,3 % de la hauteur, rayon égal à
 * 10,8 % de la hauteur, soit un diamètre de 21,62 %.
 *
 * L'unité --axis-cs vaut 1 % de la hauteur tant que l'écran garde les
 * proportions de la maquette, et bascule sur la largeur dès que l'appareil
 * est plus étroit. Sans cela, les libellés latéraux sortiraient du cadre sur
 * un iPhone, car la composition d'origine occupe presque toute la largeur.
 */
.axis-circle {
	--axis-cs: min(1svh, 1.78vw);
	--axis-gap: calc(3.2 * var(--axis-cs));

	position: absolute;
	z-index: 11;
	left: 50%;
	top: 51.3svh;
	width: calc(21.62 * var(--axis-cs));
	height: calc(21.62 * var(--axis-cs));
	transform: translate(-50%, -50%);
	color: var(--axis-white);
}

.axis-tone-dark .axis-circle { color: #111; }

.axis-circle__ring {
	position: absolute;
	inset: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .55;
}

.axis-circle__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none;
}

.axis-circle__wordmark {
	font-size: calc(3.1 * var(--axis-cs));
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track-wide);
	line-height: 1;
	text-indent: var(--axis-track-wide);
}

.axis-circle__tagline {
	margin-top: calc(.8 * var(--axis-cs));
	font-size: calc(.95 * var(--axis-cs));
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track);
	text-indent: var(--axis-track);
	opacity: .85;
}

/* Les quatre repères, posés sur la circonférence. */
.axis-circle__node {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	color: inherit;
	text-decoration: none;
}

.axis-circle__node--top { top: 0; left: 50%; }
.axis-circle__node--bottom { top: 100%; left: 50%; }
.axis-circle__node--left { top: 50%; left: 0; }
.axis-circle__node--right { top: 50%; left: 100%; }

.axis-circle__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(1.15 * var(--axis-cs));
	height: calc(1.15 * var(--axis-cs));
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: currentColor;
	transition: transform .25s ease;
}

.axis-circle__label {
	position: absolute;
	display: block;
	width: max-content;
	transition: transform .25s ease, opacity .25s ease;
}

.axis-circle__title {
	display: block;
	font-size: calc(1.28 * var(--axis-cs));
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track);
	text-indent: var(--axis-track);
	white-space: nowrap;
}

.axis-circle__sub {
	display: block;
	margin-top: calc(.55 * var(--axis-cs));
	font-size: calc(1.02 * var(--axis-cs));
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
	text-indent: var(--axis-track-label);
	white-space: nowrap;
	opacity: .78;
}

/* Placement autour du cercle. */
.axis-circle__node--top .axis-circle__label {
	bottom: var(--axis-gap);
	left: 0;
	transform: translateX(-50%);
	text-align: center;
	transform-origin: bottom center;
}

.axis-circle__node--bottom .axis-circle__label {
	top: var(--axis-gap);
	left: 0;
	transform: translateX(-50%);
	text-align: center;
	transform-origin: top center;
}

.axis-circle__node--left .axis-circle__label {
	right: var(--axis-gap);
	top: 0;
	transform: translateY(-50%);
	text-align: right;
	transform-origin: right center;
}

.axis-circle__node--right .axis-circle__label {
	left: var(--axis-gap);
	top: 0;
	transform: translateY(-50%);
	text-align: left;
	transform-origin: left center;
}

/*
 * Agrandissement au survol. Le point d'origine est placé du côté du trait :
 * le libellé grandit en s'éloignant du cercle et ne vient pas le recouvrir.
 */
@media (hover: hover) {
	.axis-circle__node--top:hover .axis-circle__label,
	.axis-circle__node--bottom:hover .axis-circle__label {
		transform: translateX(-50%) scale(1.18);
	}

	.axis-circle__node--left:hover .axis-circle__label,
	.axis-circle__node--right:hover .axis-circle__label {
		transform: translateY(-50%) scale(1.18);
	}

	.axis-circle__node:hover .axis-circle__dot {
		transform: translate(-50%, -50%) scale(1.75);
	}

	.axis-circle__node:hover .axis-circle__sub { opacity: 1; }
}

/* Même traitement au clavier, pour les repères devenus des liens. */
.axis-circle__node--top:focus-visible .axis-circle__label,
.axis-circle__node--bottom:focus-visible .axis-circle__label {
	transform: translateX(-50%) scale(1.18);
}

.axis-circle__node--left:focus-visible .axis-circle__label,
.axis-circle__node--right:focus-visible .axis-circle__label {
	transform: translateY(-50%) scale(1.18);
}

.axis-circle__node:focus-visible .axis-circle__dot {
	transform: translate(-50%, -50%) scale(1.75);
}

.axis-circle__node:focus-visible { outline: none; }

.axis-circle__node:focus-visible .axis-circle__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.axis-circle__label,
	.axis-circle__dot { transition: none; }
}

/* Ligne seule en bas d'écran, comme « LA STABILITÉ SE CONSTRUIT ». */
.axis-align-centered .axis-screen__body--meta-only {
	margin-top: auto;
	margin-bottom: calc(150 * var(--axis-u));
}

.axis-align-centered .axis-screen__meta {
	display: flex;
	flex-direction: column-reverse; /* le filet passe sous le texte */
	align-items: center;
	gap: calc(18 * var(--axis-u));
	margin: 0;
}

.axis-align-centered .axis-screen__meta .axis-rule { margin: 0; }

/* ------------------------------------------------------------- Contact */

/*
 * Les corps sont relevés sur la maquette, dont la zone utile mesure 1672
 * pixels de haut : --axis-cu vaut donc un pixel de cette maquette. Un
 * encadrement par clamp évite que le texte devienne minuscule sur un écran
 * court ou démesuré sur un grand écran.
 */
.axis-contact {
	--axis-cu: calc(100svh / 1672);
	background: #f4f1ec;
}

.axis-contact__veil {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.axis-contact__veil--light { background: rgba(244, 241, 236, .58); }
.axis-contact__veil--dark { background: rgba(8, 10, 12, .48); }

.axis-contact__inner {
	position: absolute;
	inset: 0;
	z-index: 10;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: calc(58px + var(--axis-safe-top)) 26px calc(34px + var(--axis-safe-bottom));
}

/* Tonalités. Une seule variable porte la couleur, les filets en héritent. */
.axis-contact--tone-dark .axis-contact__inner { color: #111; }
.axis-contact--tone-light .axis-contact__inner { color: var(--axis-white); }

.axis-contact__kicker {
	margin: 0 0 calc(29 * var(--axis-cu));
	font-size: clamp(11px, calc(18 * var(--axis-cu)), 20px);
	font-weight: var(--axis-weight-label);
	letter-spacing: .24em;
	line-height: 1;
}

.axis-contact__kicker + .axis-rule {
	width: clamp(30px, calc(49 * var(--axis-cu)), 54px);
	height: 2px;
	margin: 0 0 calc(56 * var(--axis-cu));
	opacity: .8;
}

.axis-contact__title {
	margin: 0 0 calc(55 * var(--axis-cu));
	font-size: clamp(30px, calc(62 * var(--axis-cu)), 68px);
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track-title);
	line-height: 1.14;
}

.axis-contact__intro {
	max-width: 30ch;
	margin-bottom: calc(60 * var(--axis-cu));
	font-size: clamp(14px, calc(22 * var(--axis-cu)), 24px);
	line-height: var(--axis-line-body);
	opacity: .88;
}

.axis-contact__intro p { margin: 0 0 1em; }
.axis-contact__intro p:last-child { margin-bottom: 0; }

.axis-contact__notice {
	margin: 0 0 22px;
	padding: 12px 14px;
	border-left: 2px solid currentColor;
	font-size: clamp(13px, calc(19 * var(--axis-cu)), 20px);
	line-height: 1.4;
}

.axis-contact__field { margin: 0 0 calc(38 * var(--axis-cu)); }

.axis-contact__field label {
	display: block;
	margin-bottom: calc(10 * var(--axis-cu));
	font-size: clamp(10px, calc(15 * var(--axis-cu)), 16px);
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
	text-transform: uppercase;
	opacity: .75;
}

.axis-contact__field input,
.axis-contact__field textarea {
	width: 100%;
	padding: calc(8 * var(--axis-cu)) 0 calc(12 * var(--axis-cu));
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-weight: var(--axis-weight-body);
	/* 16 px au minimum : en deçà, Safari iOS agrandit la page à la saisie. */
	font-size: clamp(16px, calc(21 * var(--axis-cu)), 23px);
	line-height: 1.4;
	outline: none;
}

.axis-contact__field input:focus,
.axis-contact__field textarea:focus { border-bottom-width: 2px; }

.axis-contact__field input.is-invalid,
.axis-contact__field textarea.is-invalid { border-bottom-width: 2px; }

.axis-contact__error {
	display: block;
	margin-top: calc(8 * var(--axis-cu));
	font-size: clamp(11px, calc(15 * var(--axis-cu)), 16px);
	letter-spacing: var(--axis-track-body);
	opacity: .8;
}

.axis-contact__field textarea {
	min-height: calc(90 * var(--axis-cu));
	resize: none;
}

.axis-contact__trap {
	position: absolute;
	left: -9999px;
}

.axis-contact__submit { margin: calc(46 * var(--axis-cu)) 0 0; }

.axis-contact__submit button {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: calc(22 * var(--axis-cu)) calc(26 * var(--axis-cu));
	border: 1px solid transparent;
	font-family: inherit;
	font-size: clamp(11px, calc(17 * var(--axis-cu)), 18px);
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track);
	cursor: pointer;
}

.axis-contact--tone-dark .axis-contact__submit button {
	background: #111;
	color: #fff;
}

.axis-contact--tone-light .axis-contact__submit button {
	background: var(--axis-white);
	color: #111;
}

.axis-contact__email {
	margin: calc(40 * var(--axis-cu)) 0 0;
	font-size: clamp(12px, calc(18 * var(--axis-cu)), 19px);
	letter-spacing: .06em;
}

.axis-contact__email a {
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	text-decoration: none;
}

.axis-contact__footer {
	margin: calc(40 * var(--axis-cu)) 0 0;
	font-size: clamp(10px, calc(14 * var(--axis-cu)), 15px);
	font-weight: var(--axis-weight-label);
	letter-spacing: var(--axis-track-label);
	opacity: .7;
}

/* --------------------------------------------------------- État vide */

.axis-empty {
	display: grid;
	place-items: center;
	text-align: center;
	font-size: 13px;
	letter-spacing: .08em;
}

/* --------------------------------------------- Pages secondaires */

.axis-doc {
	position: fixed;
	inset: 0;
	overflow-y: auto;
	padding: calc(90px + var(--axis-safe-top)) 26px 60px;
	background: #0d0d0d;
}

.axis-doc__article {
	max-width: 62ch;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.65;
}

.axis-doc__title {
	font-size: 30px;
	font-weight: var(--axis-weight-title);
	letter-spacing: var(--axis-track-title);
}

/* ----------------------------------------------------- Cadre desktop */

@media (min-width: 700px) {
	body { background: var(--axis-frame); }

	.axis-vertical,
	.axis-menu--overlay,
	.axis-bar,
	.axis-doc {
		width: 430px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	.axis-vertical { box-shadow: 0 0 70px rgba(0, 0, 0, .6); }
}

@media (prefers-reduced-motion: reduce) {
	.axis-vertical { scroll-behavior: auto; }
	.axis-dot { transition: none; }
}