/* Site public de Murandel. CSS natif, aucune dépendance.
   Couleurs et polices : reprises de brand/tokens.css, sans rien y ajouter. */

@font-face {
	font-family: 'Karla';
	src: url('fonts/karla-variable.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IBM Plex Mono';
	src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IBM Plex Mono';
	src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--prune: #542344;
	--prune-clair: #73305d;
	--prune-pale: #f3edf1;
	--orange: #ff6600; /* accent — jamais de texte */
	--charbon: #2e3138;
	--papier: #f5fbef;
	--blanc: #ffffff; /* fond des rapports, et du formulaire Tally */
	--grenat: #a51c30; /* alertes réelles uniquement */
	/* Texte secondaire sur fond sombre. Le mauve n'y suffit pas (4,1 sur
	   charbon, 3,9 sur prune) ; le papier à 70 % passe 5:1 partout. */
	--texte-discret: color-mix(in srgb, var(--papier) 70%, transparent);
	--mauve: #9f87af;

	--font-display: 'Karla', system-ui, sans-serif;
	--font-body: 'Karla', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	--gouttiere: clamp(1.25rem, 5vw, 5rem);
	--filet-clair: color-mix(in srgb, var(--papier) 16%, transparent);
	--doux: cubic-bezier(0.2, 0.7, 0.1, 1);
}

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

/* Un élément masqué le reste, quel que soit le display de sa classe. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 3.5rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--charbon);
	color: var(--papier);
	font-family: var(--font-body);
	font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1,
h2,
h3,
p,
ol {
	margin: 0;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.98;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.9rem, 1.2rem + 6.6vw, 7rem);
}

h2 {
	font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.2rem);
}

h3 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
	letter-spacing: -0.02em;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 4px;
	border-radius: 4px;
}

.evitement {
	position: fixed;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--papier);
	color: var(--charbon);
	border-radius: 0.4rem;
}

.evitement:focus {
	top: 1rem;
}

.surtitre,
.mono,
.legende,
.rang {
	font-family: var(--font-mono);
	font-size: 0.72em;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.surtitre {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 1.4rem;
	color: var(--texte-discret);
}

/* Le trait orange : l'accent, sans jamais porter de texte. */
.surtitre::before {
	content: '';
	width: 2.2em;
	height: 2px;
	background: var(--orange);
}

.surtitre b {
	font-weight: 500;
	color: var(--papier);
}

/* ── Marque : le logo tient lieu de M, « urandel » s'y accole ───────── */

.marque {
	--taille: 26px;
	display: inline-flex;
	align-items: flex-end;
	line-height: 1;
	text-decoration: none;
	color: var(--papier);
}

.marque img {
	height: var(--taille);
	width: auto;
	display: block;
}

.marque span {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: calc(var(--taille) * 1.27);
	line-height: 0.74;
	letter-spacing: -0.035em;
	margin-left: calc(var(--taille) * 0.1);
}

/* ── Boutons ─────────────────────────────────────────────────────────── */

.bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.5em 0.5em 0.5em 1.3em;
	border-radius: 99px;
	background: var(--papier);
	color: var(--charbon);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: transform 0.4s var(--doux);
}

/* Pastille orange et sa flèche. */
.bouton i {
	position: relative;
	flex: none;
	width: 2.3em;
	height: 2.3em;
	border-radius: 50%;
	background: var(--orange);
	transition: transform 0.4s var(--doux);
}

.bouton i::before,
.bouton i::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--charbon);
}

.bouton i::before {
	width: 0.9em;
	height: 2px;
	transform: translate(-50%, -50%);
}

.bouton i::after {
	width: 0.5em;
	height: 0.5em;
	background: none;
	border-top: 2px solid var(--charbon);
	border-right: 2px solid var(--charbon);
	transform: translate(-25%, -50%) rotate(45deg);
}

.bouton:hover {
	transform: translateY(-2px);
}

.bouton:hover i {
	transform: translateX(3px);
}

.bouton.compact {
	font-size: 0.82em;
}

.lien {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--filet-clair);
	padding-bottom: 0.15em;
	transition: border-color 0.3s;
}

.lien:hover {
	border-color: var(--orange);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 2rem;
	margin-top: 2.4rem;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */

.entete {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding: 1rem var(--gouttiere);
	transition:
		background 0.4s,
		backdrop-filter 0.4s;
}

.entete.pose {
	background: color-mix(in srgb, var(--charbon) 82%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.entete nav {
	display: flex;
	gap: 2rem;
	margin-left: auto;
	font-size: 0.85em;
	font-weight: 500;
}

.entete nav a {
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.3s;
}

.entete nav a:hover {
	opacity: 1;
}

/* ── Récit ───────────────────────────────────────────────────────────── */

.recit {
	position: relative;
	background:
		radial-gradient(90% 70% at 72% 38%, color-mix(in srgb, var(--prune) 85%, transparent), transparent 70%),
		radial-gradient(70% 60% at 10% 100%, color-mix(in srgb, var(--prune-clair) 35%, transparent), transparent 70%),
		var(--charbon);
}

.plateau {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100lvh;
	overflow: hidden;
}

/* Trame de fond : une mire discrète. */
.plateau::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(color-mix(in srgb, var(--papier) 5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--papier) 5%, transparent) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent);
}

#scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.etiquettes span {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0.25em 0.6em;
	font-family: var(--font-mono);
	font-size: 0.62em;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--papier);
	background: color-mix(in srgb, var(--charbon) 78%, transparent);
	border: 1px solid var(--filet-clair);
	border-radius: 3px;
	opacity: 0;
	will-change: transform, opacity;
}

/* Le fil qui relie l'étiquette à son calculateur. */
.etiquettes span::before {
	content: '';
	position: absolute;
	left: -1px;
	top: 100%;
	width: 1px;
	height: var(--fil, 44px);
	background: var(--orange);
}

/* Des fils de longueurs différentes, et une étiquette posée à gauche du
   sien : les voisines ne se recouvrent pas. */
.etiquettes span.a-gauche {
	--fil: 24px;
}

.etiquettes span.a-gauche::before {
	left: auto;
	right: -1px;
}

.etiquettes span:nth-child(3) {
	--fil: 70px;
}

.etiquettes span:nth-child(5) {
	--fil: 84px;
}

.repere {
	position: absolute;
	left: var(--gouttiere);
	bottom: 2.2rem;
	display: flex;
	gap: 1.6rem;
	padding: 0;
	list-style: none;
	counter-reset: volet;
	font-family: var(--font-mono);
	font-size: 0.62em;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.5s;
}

.repere.visible {
	opacity: 1;
}

.repere li {
	counter-increment: volet;
	padding-top: 0.7rem;
	border-top: 2px solid var(--filet-clair);
	color: var(--texte-discret);
	min-width: 6.5rem;
	transition:
		color 0.4s,
		border-color 0.4s;
}

.repere li::before {
	content: '0' counter(volet) ' ';
}

.repere li.actif {
	color: var(--papier);
	border-color: var(--orange);
}

.invite {
	position: absolute;
	right: var(--gouttiere);
	bottom: 2.2rem;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-family: var(--font-mono);
	font-size: 0.62em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-discret);
	transition: opacity 0.5s;
}

.invite span {
	width: 1px;
	height: 3rem;
	background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 0 / 100% 40%, var(--filet-clair);
	animation: chute 2s var(--doux) infinite;
}

@keyframes chute {
	from {
		background-position: 0 -150%;
	}
	to {
		background-position: 0 250%;
	}
}

.volets {
	position: relative;
	margin-top: -100vh;
	margin-top: -100lvh;
	pointer-events: none;
}

.volet {
	min-height: 125vh;
	display: flex;
	align-items: center;
	padding: 6rem var(--gouttiere);
}

.volet.ouverture {
	min-height: 100vh;
	min-height: 100svh;
}

:is(.volet, .textes) .texte {
	width: min(100%, 36rem);
	pointer-events: auto;
}

.volet.ouverture .texte {
	width: min(100%, 52rem);
}

.volet.a-droite {
	justify-content: flex-end;
}

:is(.volet, .textes) .lien {
	display: inline-block;
	margin-top: 0.4rem;
	color: var(--papier);
}

:is(.volet, .textes) p:not(.surtitre) {
	margin-top: 1.5rem;
	max-width: 32rem;
	color: color-mix(in srgb, var(--papier) 82%, transparent);
}

.chapo {
	font-size: 1.12em;
}

/* Titre d'ouverture : chaque ligne monte derrière son masque. */
.ligne {
	display: block;
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.ligne > span {
	display: block;
}

.js .ligne > span {
	transform: translateY(110%);
	animation: monte 1.1s var(--doux) forwards;
}

.js .ligne:nth-child(2) > span {
	animation-delay: 0.12s;
}

.js .ouverture .surtitre,
.js .ouverture .chapo,
.js .ouverture .actions {
	opacity: 0;
	animation: fondu 1s var(--doux) 0.5s forwards;
}

.js .ouverture .actions {
	animation-delay: 0.7s;
}

@keyframes monte {
	to {
		transform: none;
	}
}

@keyframes fondu {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Textes posés : empilés au même endroit, ils se relaient ──────────
   Le sortant s'efface vers le haut dans un léger flou ; l'entrant arrive
   par en dessous, son titre mot à mot. --sens inverse le mouvement quand
   on remonte. */

.textes {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	align-items: center;
	padding: 6rem var(--gouttiere);
	pointer-events: none;
}

.textes .texte {
	grid-area: 1 / 1;
	/* L'arrivée du bloc 01 avec la page : suit le défilement, sans transition. */
	translate: 0 var(--arrivee, 0px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(calc(var(--sens, 1) * -32px));
	filter: blur(10px);
	transition:
		opacity 0.45s ease,
		transform 0.6s var(--doux),
		filter 0.45s ease,
		visibility 0s 0.6s;
}

.textes .texte.actif {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	filter: none;
	transition:
		opacity 0.8s var(--doux) 0.3s,
		transform 1s var(--doux) 0.3s,
		filter 0.8s var(--doux) 0.3s,
		visibility 0s;
}

/* Prêt à entrer : en dessous (ou au-dessus quand on remonte). */
.textes .texte:not(.actif) .mot {
	transform: translateY(calc(var(--sens, 1) * 0.5em));
}

.textes .mot {
	display: inline-block;
	opacity: 0;
	filter: blur(6px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		filter 0.3s ease;
}

.textes .actif .mot {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity 0.7s var(--doux),
		transform 0.9s var(--doux),
		filter 0.7s var(--doux);
	transition-delay: calc(0.35s + var(--i) * 55ms);
}

/* Le paragraphe suit le titre. */
.textes .texte p:not(.surtitre) {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.textes .actif p:not(.surtitre) {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.8s var(--doux) 0.75s,
		transform 0.9s var(--doux) 0.75s;
}

/* Apparition au passage dans la fenêtre. */
.js .volet:not(.ouverture) .texte,
.js .apparait {
	opacity: 0;
	transform: translateY(36px);
	transition:
		opacity 0.9s var(--doux),
		transform 0.9s var(--doux);
}

.js .volet:not(.ouverture) .texte.vu,
.js .apparait.vu {
	opacity: 1;
	transform: none;
}

/* ── Sections ────────────────────────────────────────────────────────── */

.section {
	padding: clamp(5rem, 12vw, 11rem) var(--gouttiere);
}

.cadre {
	max-width: 78rem;
	margin-inline: auto;
}

.section.claire {
	background: var(--papier);
	color: var(--charbon);
}

.section.claire h2,
.section.claire h3 {
	color: var(--prune);
}

.section.claire .surtitre {
	color: var(--prune-clair);
}

.section.prune {
	background:
		radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--prune-clair) 70%, transparent), transparent 70%),
		var(--prune);
}

.section.sombre {
	background:
		radial-gradient(70% 90% at 50% 120%, color-mix(in srgb, var(--prune) 90%, transparent), transparent 70%),
		var(--charbon);
	text-align: center;
}

.titre-section {
	max-width: 46rem;
	margin-bottom: clamp(3rem, 7vw, 6rem);
}

/* ── Étapes : chaque rang se redresse en entrant dans la fenêtre ────── */

.etapes {
	position: relative;
	padding: 0;
	list-style: none;
	perspective: 1400px;
}

.etapes li {
	--p: 1;
	position: relative;
	display: grid;
	grid-template-columns: 5rem minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: baseline;
	gap: 1rem 2.5rem;
	padding: 2.2rem 0;
	border-top: 1px solid color-mix(in srgb, var(--prune-clair) 35%, transparent);
	transform-origin: 50% 0;
	transform: rotateX(calc((1 - var(--p)) * -62deg)) translateY(calc((1 - var(--p)) * 40px));
	opacity: calc(0.1 + var(--p) * 0.9);
	will-change: transform, opacity;
}

.etapes li:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--prune-clair) 35%, transparent);
}

/* Le filet se charge en orange à mesure que l'étape arrive. */
.etapes li::before {
	content: '';
	position: absolute;
	left: 0;
	top: -1px;
	height: 2px;
	width: 100%;
	background: var(--orange);
	transform-origin: 0 50%;
	transform: scaleX(calc(var(--p) * 0.08));
}

.etapes h3 {
	font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);
	letter-spacing: -0.035em;
}

.etapes .rang {
	color: var(--prune-clair);
}

.etapes p {
	max-width: 30rem;
}

/* ── Contact et pied ─────────────────────────────────────────────────── */

.section.sombre .surtitre {
	justify-content: center;
}

.geant {
	font-size: clamp(3.2rem, 1rem + 10vw, 10rem);
	letter-spacing: -0.045em;
	line-height: 0.9;
}

.section.sombre .chapo {
	margin: 2rem auto 0;
	max-width: 30rem;
	color: color-mix(in srgb, var(--papier) 82%, transparent);
}

.section.sombre .actions {
	justify-content: center;
	margin-top: 3rem;
}

.pied {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 2.5rem;
	padding: 2.5rem var(--gouttiere);
	border-top: 1px solid var(--filet-clair);
	font-size: 0.8em;
	color: color-mix(in srgb, var(--papier) 70%, transparent);
}

.pied .mono {
	margin-left: auto;
	font-size: 0.85em;
}

/* ── Écrans étroits ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	/* La scène occupe le haut, le texte se lit en bas sur un fond qui s'assombrit. */
	.volet,
	.volet.a-droite {
		min-height: 110vh;
		align-items: flex-end;
		justify-content: flex-start;
		padding-bottom: calc(5vh + 5rem);
	}

	.volet.ouverture {
		min-height: 100svh;
		padding-bottom: 2.5rem;
	}

	/* Les textes posés se lisent en bas, sous la scène. */
	.textes {
		align-items: end;
		padding-bottom: 5.5rem;
	}

	:is(.volet, .textes) .texte {
		position: relative;
	}

	:is(.volet, .textes) .texte::before {
		content: '';
		position: absolute;
		inset: -5rem calc(var(--gouttiere) * -1) -7rem;
		z-index: -1;
		background: linear-gradient(transparent, color-mix(in srgb, var(--charbon) 88%, transparent) 30%);
	}

	.volet.ouverture .texte::before {
		content: none;
	}

	/* Le repère se réduit à ses quatre traits. */
	.repere {
		gap: 0.5rem;
		right: var(--gouttiere);
		bottom: 1.4rem;
		font-size: 0;
	}

	.repere li {
		flex: 1;
		min-width: 0;
		padding: 0;
	}

	.invite {
		display: none;
	}
}

@media (max-width: 860px) {
	.entete nav {
		display: none;
	}

	.entete .bouton {
		margin-left: auto;
	}

	.entete {
		gap: 1rem;
	}

	.entete .bouton {
		padding: 0.75em 1.2em;
		font-size: 0.74em;
		white-space: nowrap;
	}

	.entete .bouton i {
		display: none;
	}

	.etapes li {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	.bouton {
		font-size: 0.92em;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}

	.etapes li {
		transform: none;
		opacity: 1;
	}
}

/* ── Panneau du formulaire ───────────────────────────────────────────── */

.panneau {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(100%, 46rem);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	display: none;
	flex-direction: column;
	background: var(--blanc);
	color: var(--charbon);
	box-shadow: -40px 0 80px -40px var(--charbon);
}

.panneau[open] {
	display: flex;
	animation: entre 0.55s var(--doux);
}

.panneau::backdrop {
	background: color-mix(in srgb, var(--charbon) 70%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: fondu-seul 0.4s ease-out;
}

@keyframes entre {
	from {
		transform: translateX(100%);
	}
}

@keyframes fondu-seul {
	from {
		opacity: 0;
	}
}

.panneau-entete {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 2rem clamp(1.25rem, 4vw, 2.5rem) 1.4rem;
	border-bottom: 1px solid color-mix(in srgb, var(--prune-clair) 25%, transparent);
}

.panneau-entete .surtitre {
	margin-bottom: 0.8rem;
	color: var(--prune-clair);
}

.panneau-entete h2 {
	font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
	color: var(--prune);
}

.fermer {
	position: relative;
	flex: none;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid color-mix(in srgb, var(--prune-clair) 35%, transparent);
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: transform 0.4s var(--doux);
}

.fermer::before,
.fermer::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1rem;
	height: 2px;
	background: var(--prune);
	transform: translate(-50%, -50%) rotate(45deg);
}

.fermer::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.fermer:hover {
	transform: rotate(90deg);
}

.panneau-corps {
	position: relative;
	flex: 1;
	min-height: 0;
	/* Tally garde lui-même une marge d'environ 8 px : on complète pour
	   aligner le formulaire sur l'en-tête du panneau. */
	padding-inline: calc(clamp(1.25rem, 4vw, 2.5rem) - 8px);
}

.panneau iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* Le fond transparent de Tally laisse voir le blanc du panneau. */
	color-scheme: light;
	opacity: 0;
	transition: opacity 0.5s;
}

.panneau.charge iframe {
	opacity: 1;
}

.attente {
	position: absolute;
	inset: 2rem clamp(1.25rem, 4vw, 2.5rem) auto;
	font-family: var(--font-mono);
	font-size: 0.72em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--prune-clair);
}

.panneau.charge .attente {
	display: none;
}

.panneau-pied {
	padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem);
	border-top: 1px solid color-mix(in srgb, var(--prune-clair) 25%, transparent);
	font-size: 0.72em;
	color: color-mix(in srgb, var(--charbon) 75%, transparent);
}

.panneau-pied a {
	margin-left: 0.4em;
	font-weight: 700;
	color: var(--prune);
}

body:has(.panneau[open]) {
	overflow: hidden;
}

/* ── Pages « Vérifier un fichier » et « Résultat » ────────────────────── */

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

code {
	font-family: var(--font-mono);
	font-size: 0.86em;
}

.atelier {
	position: relative;
	padding: 0 var(--gouttiere) clamp(5rem, 9vw, 8rem);
	background:
		radial-gradient(50% 40% at 0% 70%, color-mix(in srgb, var(--prune-clair) 18%, transparent), transparent 70%),
		var(--charbon);
	overflow: hidden;
}

.cadre-large {
	position: relative;
	max-width: 78rem;
	margin-inline: auto;
}

/* ── Ouverture : le nuage de points, comme sur l'accueil ── */

.atelier-scene {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(78vh, 46rem);
	margin-inline: calc(var(--gouttiere) * -1);
	padding: 8rem var(--gouttiere) 9rem;
	background:
		radial-gradient(60% 70% at 75% 40%, color-mix(in srgb, var(--prune) 85%, transparent), transparent 70%),
		var(--charbon);
}

.atelier-scene-court {
	min-height: min(64vh, 38rem);
	padding-bottom: 5rem;
}

/* La mire, et un fondu vers le charbon en bas de l'ouverture. */
.atelier-scene::before,
.atelier-scene::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.atelier-scene::before {
	background-image:
		linear-gradient(color-mix(in srgb, var(--papier) 5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--papier) 5%, transparent) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent);
}

.atelier-scene::after {
	background: linear-gradient(transparent 60%, var(--charbon));
}

#scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.atelier-tete {
	z-index: 1;
	width: 100%;
}

.atelier-tete > * {
	max-width: 34rem;
}

.page-outil h1 {
	font-size: clamp(3rem, 1.4rem + 5.5vw, 6.4rem);
}

.atelier-tete .chapo {
	margin-top: 1.6rem;
	color: color-mix(in srgb, var(--papier) 82%, transparent);
}

/* ── Le poste : trois maillons côte à côte, reliés par le fil orange ── */

.poste {
	position: relative;
	z-index: 2;
	margin-top: -4rem;
	background: color-mix(in srgb, var(--charbon) 70%, transparent);
	border: 1px solid var(--filet-clair);
	border-radius: 24px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 60px 120px -50px color-mix(in srgb, #000 80%, transparent);
	overflow: hidden;
}

/*
 * La piste : de l'anneau 1 à l'anneau 3, en travers des colonnes. Les
 * colonnes font 1,5 / 1 / 1 : le troisième anneau est à 2,5 / 3,5 de la
 * largeur, soit 71,43 %, plus le même retrait que le premier.
 * Elle se remplit d'orange étape par étape (--rempli, de 0 à 1) ; pendant
 * le calcul, une lueur la parcourt.
 */
.poste {
	--anneau: 2.4rem;
	--marge-maillon: clamp(1.2rem, 2.2vw, 2rem);
}

.fil {
	position: absolute;
	z-index: 0;
	top: calc(2rem + var(--anneau) / 2);
	left: calc(var(--marge-maillon) + var(--anneau) / 2);
	width: calc((2.5 / 3.5) * 100%);
	height: 1px;
	background: color-mix(in srgb, var(--orange) 25%, transparent);
	overflow: hidden;
	pointer-events: none;
}

.fil span {
	position: absolute;
	inset: 0;
	background: var(--orange);
	transform-origin: 0 50%;
	transform: scaleX(var(--rempli, 0));
	transition: transform 1.8s var(--doux);
}

.fil::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 22%;
	background: linear-gradient(90deg, transparent, var(--papier), transparent);
	opacity: 0;
	transform: translateX(-100%);
}

.poste.calcul .fil::after {
	opacity: 0.9;
	animation: lueur 1.3s linear infinite;
}

@keyframes lueur {
	to {
		transform: translateX(560%);
	}
}

.maillons {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.maillon {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 2rem var(--marge-maillon) 2.2rem;
}

.maillon + .maillon {
	border-left: 1px solid var(--filet-clair);
}

/* L'anneau au-dessus du titre : le fil passe à sa hauteur, sans barrer le texte. */
.maillon-tete {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
}

.maillon-tete h2 {
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
	letter-spacing: -0.025em;
}

.anneau {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: var(--anneau);
	height: var(--anneau);
	border-radius: 50%;
	border: 1.5px solid var(--orange);
	background: var(--charbon);
	font-family: var(--font-mono);
	font-size: 0.8em;
	font-weight: 500;
	transition:
		background 0.4s,
		border-color 0.4s,
		color 0.3s,
		transform 0.5s var(--doux);
}

/* Fait : une coche, centrée dans l'anneau. Vérifié : l'anneau se remplit. */
.maillon.fait .anneau,
.maillon[data-etat='ok'] .anneau {
	color: transparent;
}

.maillon.fait .anneau {
	border-color: var(--prune-clair);
	background: var(--prune-clair);
}

.maillon[data-etat='ok'] .anneau {
	border-color: var(--orange);
	background: var(--orange);
	transform: scale(1.08);
}

.maillon.fait .anneau::before,
.maillon[data-etat='ok'] .anneau::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--papier);
	border-bottom: 2px solid var(--papier);
	transform: translate(-50%, -70%) rotate(-45deg);
}

.maillon[data-etat='ok'] .anneau::before {
	border-color: var(--charbon);
}

/* En défaut : une croix sur grenat. */
.maillon[data-etat='ko'] .anneau {
	color: transparent;
	border-color: var(--grenat);
	background: var(--grenat);
	transform: scale(1.08);
}

.maillon[data-etat='ko'] .anneau::before,
.maillon[data-etat='ko'] .anneau::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.85rem;
	height: 2px;
	background: var(--papier);
	transform: translate(-50%, -50%) rotate(45deg);
}

.maillon[data-etat='ko'] .anneau::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.maillon-aide {
	font-size: 0.88em;
	line-height: 1.5;
	color: var(--texte-discret);
}

.maillon-aide code {
	color: var(--papier);
}

.maillon-etat {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 1.4em;
	font-size: 0.85em;
	font-weight: 700;
}

.maillon-etat:empty {
	display: none;
}

.maillon-etat::before {
	content: '';
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--texte-discret);
}

.maillon.fait .maillon-etat::before,
.maillon[data-etat='ok'] .maillon-etat::before {
	background: var(--orange);
}

.maillon[data-etat='ko'] .maillon-etat::before {
	background: var(--grenat);
	box-shadow: 0 0 0 2px var(--papier);
}

.facultatif {
	margin-left: 0.3rem;
	padding: 0.2em 0.6em;
	border: 1px solid var(--filet-clair);
	border-radius: 99px;
	font-family: var(--font-mono);
	font-size: 0.42em;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: 0.4em;
	color: var(--texte-discret);
}

/* La zone de dépôt, avec son dossier qui s'ouvre au survol. */
.depot-cadre {
	position: relative;
	flex: 1;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 1rem;
	margin-top: 0.4rem;
	padding: 2rem 1rem;
	text-align: center;
	border: 1px dashed color-mix(in srgb, var(--papier) 28%, transparent);
	border-radius: 16px;
	overflow: hidden;
	transition:
		border-color 0.3s,
		background 0.3s;
}

.poste.survol .depot-cadre {
	border-style: solid;
	border-color: var(--orange);
	background: color-mix(in srgb, var(--prune) 50%, transparent);
}

.dossier {
	width: 4.2rem;
	height: auto;
	overflow: visible;
}

.dossier .dos {
	fill: color-mix(in srgb, var(--papier) 10%, transparent);
	stroke: var(--papier);
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.dossier .rabat {
	fill: var(--charbon);
	stroke: var(--papier);
	stroke-width: 1.8;
	stroke-linejoin: round;
	transform-origin: 50% 100%;
	transition: transform 0.5s var(--doux);
}

.dossier .point {
	fill: var(--orange);
}

.poste.survol .dossier .rabat {
	transform: perspective(200px) rotateX(-38deg);
}

.depot-titre {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.03em;
}

.depot-choix {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.8rem 1rem;
}

.depot-choix label {
	position: relative;
	cursor: pointer;
}

.depot-choix input {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	cursor: pointer;
}

.depot-choix label:focus-within {
	outline: 2px solid var(--orange);
	outline-offset: 4px;
}

.bouton-fantome {
	display: inline-flex;
	align-items: center;
	padding: 0.85em 1.4em;
	border: 1px solid var(--filet-clair);
	border-radius: 99px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.3s;
}

.bouton-fantome:hover {
	border-color: var(--papier);
}

/* Pendant le calcul : un plan de lecture balaie le cadre, une barre avance. */
.balayage {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--orange);
	box-shadow: 0 0 24px 4px color-mix(in srgb, var(--orange) 45%, transparent);
	opacity: 0;
}

.poste.calcul .balayage {
	opacity: 1;
	animation: lecture 1.4s ease-in-out infinite alternate;
}

@keyframes lecture {
	to {
		transform: translateY(var(--hauteur, 200px));
	}
}

.progression {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	opacity: 0;
	transition: opacity 0.4s;
}

.progression span {
	display: block;
	height: 100%;
	width: calc(var(--avance, 0) * 100%);
	background: var(--orange);
	transition: width 0.2s;
}

.poste.calcul .progression {
	opacity: 1;
}

.reference summary {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	list-style: none;
	cursor: pointer;
	font-size: 0.85em;
	font-weight: 700;
	color: var(--texte-discret);
	transition: color 0.3s;
}

.reference summary::-webkit-details-marker {
	display: none;
}

.reference summary::before {
	content: '';
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.3s var(--doux);
}

.reference[open] summary::before {
	transform: rotate(45deg);
}

.reference summary:hover {
	color: var(--papier);
}

.reference textarea,
.maillon input[type='text'],
.recherche input {
	width: 100%;
	padding: 0.85em 1em;
	font: 500 0.78em/1.6 var(--font-mono);
	color: var(--papier);
	background: color-mix(in srgb, var(--papier) 5%, transparent);
	border: 1px solid var(--filet-clair);
	border-radius: 12px;
	transition: border-color 0.3s;
}

.reference textarea {
	margin-top: 0.7rem;
	resize: vertical;
}

.reference textarea::placeholder,
.maillon input[type='text']::placeholder,
.recherche input::placeholder {
	color: var(--texte-discret);
}

.reference textarea:focus-visible,
.maillon input[type='text']:focus-visible,
.recherche input:focus-visible {
	outline: none;
	border-color: var(--orange);
}

/* ── Le renvoi : la piste prolongée en pointillés jusqu'au résultat ── */

.renvoi {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	overflow: visible;
	pointer-events: none;
}

.renvoi path {
	fill: none;
}

/* Le masque se dessine d'un trait ; les points défilent vers le résultat. */
.renvoi-revele {
	stroke: #fff;
	stroke-width: 8;
	stroke-dasharray: var(--longueur);
	stroke-dashoffset: 0;
}

.renvoi.dessine .renvoi-revele {
	animation: dessiner 4.2s cubic-bezier(0.45, 0, 0.25, 1) both;
}

@keyframes dessiner {
	from {
		stroke-dashoffset: var(--longueur);
	}
}

.renvoi-points {
	stroke: var(--orange);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 0 9;
	animation: defiler 0.9s linear infinite;
}

@keyframes defiler {
	to {
		stroke-dashoffset: -9;
	}
}

.renvoi-fin {
	fill: var(--orange);
}

.renvoi-onde {
	fill: none;
	stroke: var(--orange);
	stroke-width: 1;
	transform-box: fill-box;
	transform-origin: center;
	animation: onde 3s ease-out infinite;
}

.renvoi.dessine .renvoi-onde {
	animation-delay: 4s;
}

.renvoi.dessine .renvoi-fin {
	animation: apparait 0.6s var(--doux) 4s both;
}

@keyframes onde {
	from {
		transform: scale(1);
		opacity: 0.45;
	}
	to {
		transform: scale(2);
		opacity: 0;
	}
}

@keyframes apparait {
	from {
		transform: scale(0);
	}
}

.renvoi-fin {
	transform-box: fill-box;
	transform-origin: center;
}

/* La pastille en bas d'écran, tant que le résultat n'est pas visible. */
.vers-resultat {
	position: fixed;
	z-index: 40;
	left: 50%;
	bottom: 1.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.8em 1.3em 0.8em 1.4em;
	border: 1px solid var(--filet-clair);
	border-radius: 99px;
	background: color-mix(in srgb, var(--charbon) 82%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font: inherit;
	font-size: 0.9em;
	font-weight: 700;
	color: var(--papier);
	cursor: pointer;
	transform: translateX(-50%);
	box-shadow: 0 20px 40px -20px #000;
	animation: monte-pastille 0.6s var(--doux) both;
}

.vers-resultat span {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--orange);
	border-bottom: 2px solid var(--orange);
	transform: translateY(-0.15rem) rotate(45deg);
	animation: rebond 1.4s ease-in-out infinite;
}

@keyframes monte-pastille {
	from {
		opacity: 0;
		transform: translate(-50%, 1rem);
	}
}

@keyframes rebond {
	50% {
		transform: translateY(0.1rem) rotate(45deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.renvoi-points,
	.renvoi-onde,
	.vers-resultat span {
		animation: none;
	}
}

@media print {
	.renvoi,
	.vers-resultat {
		display: none !important;
	}
}

/* ── Le verdict : une phrase, quatre nombres ── */

.verdict {
	/* La pastille « Voir le résultat » pose le verdict sous l'en-tête fixe. */
	scroll-margin-top: 8rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem clamp(2rem, 5vw, 5rem);
	align-items: end;
	margin-top: clamp(3.5rem, 7vw, 5.5rem);
}

.verdict-tete h2,
.page-outil .atelier-tete h1#verdict-titre {
	font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
	letter-spacing: -0.035em;
}

.verdict-texte {
	margin-top: 1.2rem;
	max-width: 32rem;
	color: color-mix(in srgb, var(--papier) 82%, transparent);
}

.verdict-ton {
	display: inline-block;
	margin-bottom: 1.2rem;
	padding: 0.35em 1em;
	border-radius: 99px;
	font-family: var(--font-mono);
	font-size: 0.7em;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--filet-clair);
}

.verdict-ton:empty {
	display: none;
}

[data-ton='accord'] .verdict-ton {
	border-color: var(--orange);
}

[data-ton='alerte'] .verdict-ton {
	border-color: var(--grenat);
	background: var(--grenat);
}

.verdict-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.6rem;
	padding-top: 2rem;
	border-top: 1px solid var(--filet-clair);
}

/* Apparition : le verdict monte, les nombres suivent un à un. */
.verdict.montre .verdict-tete,
.verdict.montre .verdict-actions {
	animation: fondu 0.7s var(--doux) both;
}

.verdict.montre .verdict-actions {
	animation-delay: 0.45s;
}

.compteurs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	background: var(--filet-clair);
	border: 1px solid var(--filet-clair);
	border-radius: 18px;
	overflow: hidden;
}

.compteurs-larges {
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	margin-top: 3rem;
}

.compteur {
	position: relative;
	padding: 1.4rem 1.5rem 1.3rem;
	background: var(--charbon);
	animation: fondu 0.6s var(--doux) both;
	animation-delay: calc(var(--rang, 0) * 90ms);
}

.compteur::before {
	content: '';
	position: absolute;
	left: 1.5rem;
	top: 0;
	width: 2rem;
	height: 2px;
	background: var(--filet-clair);
}

.compteur dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem);
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.compteur dt {
	margin-top: 0.5rem;
	font-size: 0.85em;
	color: var(--texte-discret);
}

.compteur.conforme:not(.zero)::before {
	background: var(--orange);
}

.compteur.different:not(.zero) {
	background: color-mix(in srgb, var(--grenat) 30%, var(--charbon));
}

.compteur.different:not(.zero)::before {
	background: var(--papier);
}

.compteur.zero dd,
.compteur.zero dt {
	opacity: 0.4;
}

/* ── Questions fréquentes ── */

.faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 2rem clamp(2.5rem, 6vw, 6rem);
	margin-top: clamp(6rem, 11vw, 9rem);
	scroll-margin-top: 6rem;
}

.faq-titre h2 {
	position: sticky;
	top: 7rem;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
}

.faq-liste details {
	border-bottom: 1px solid var(--filet-clair);
}

.faq-liste details:first-child {
	border-top: 1px solid var(--filet-clair);
}

.faq-liste summary {
	position: relative;
	padding: 1.3rem 3rem 1.3rem 0;
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 1.05em;
	letter-spacing: -0.01em;
}

.faq-liste summary::-webkit-details-marker {
	display: none;
}

/* Un plus orange, qui pivote en croix à l'ouverture. */
.faq-liste summary::before,
.faq-liste summary::after {
	content: '';
	position: absolute;
	right: 0.55rem;
	top: 50%;
	width: 0.8rem;
	height: 2px;
	background: var(--orange);
	transition: transform 0.4s var(--doux);
}

.faq-liste summary::after {
	transform: rotate(90deg);
}

.faq-liste details[open] summary::before {
	transform: rotate(45deg);
}

.faq-liste details[open] summary::after {
	transform: rotate(135deg);
}

.faq-liste details p {
	max-width: 40rem;
	padding: 0 3rem 1.5rem 0;
	color: color-mix(in srgb, var(--papier) 82%, transparent);
	animation: fondu 0.4s var(--doux);
}

/* ── Page de résultat ── */

.resultat-date {
	margin-top: 1.4rem;
	font-family: var(--font-mono);
	font-size: 0.72em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-discret);
}

.aucun {
	margin-top: 1rem;
}

.sceau-carte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.2rem 2.5rem;
	margin: 1.4rem 0 0;
	padding: 1.5rem 1.6rem;
	border: 1px solid var(--filet-clair);
	border-radius: 18px;
}

.sceau-carte dt {
	font-size: 0.85em;
	color: var(--texte-discret);
}

.sceau-carte dd {
	margin: 0.35rem 0 0;
	font-family: var(--font-mono);
	font-size: 0.8em;
	word-break: break-all;
}

.sceau-etat {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-weight: 700;
}

.sceau-etat::before {
	content: '';
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--texte-discret);
}

.sceau-etat.authentique::before {
	background: var(--orange);
}

.sceau-etat.remplace::before {
	background: var(--grenat);
	box-shadow: 0 0 0 2px var(--papier);
}

.detail {
	margin-top: clamp(3.5rem, 7vw, 5rem);
}

.detail-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-bottom: 1.2rem;
}

.detail-barre h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
	margin-right: auto;
}

.filtres {
	display: flex;
	gap: 0.3rem;
	padding: 0.3rem;
	border: 1px solid var(--filet-clair);
	border-radius: 99px;
}

.filtres button {
	padding: 0.55em 1.1em;
	border: 0;
	border-radius: 99px;
	background: none;
	font: inherit;
	font-size: 0.85em;
	font-weight: 700;
	color: var(--texte-discret);
	cursor: pointer;
	transition:
		background 0.3s,
		color 0.3s;
}

.filtres button span {
	margin-left: 0.3em;
	font-weight: 400;
	opacity: 0.8;
}

.filtres button[aria-pressed='true'] {
	background: var(--papier);
	color: var(--charbon);
}

.recherche {
	flex: 0 1 16rem;
}

.recherche input {
	font-family: var(--font-body);
	font-size: 0.88em;
	border-radius: 99px;
	padding-inline: 1.2em;
}

/* La liste : des lignes aérées, pas un tableau de terminal. Elle défile
   dans son cadre, 300 fichiers ne repoussent pas la page. */
.liste-fichiers {
	max-height: 70vh;
	margin: 0;
	padding: 0;
	overflow: auto;
	list-style: none;
	border: 1px solid var(--filet-clair);
	border-radius: 18px;
}

.fichier-ligne {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.2rem;
	padding: 0.9rem 1.3rem;
	border-bottom: 1px solid color-mix(in srgb, var(--papier) 7%, transparent);
	transition: box-shadow 0.2s;
	animation: fondu 0.4s var(--doux) both;
}

.fichier-ligne:last-child {
	border-bottom: 0;
}

/* Au survol, un voile clair s'ajoute au fond de la ligne, quelle qu'en
   soit la couleur : le même effet pour chaque résultat. */
.fichier-ligne:hover {
	box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--papier) 5%, transparent);
}

.fichier-ligne.different {
	background: color-mix(in srgb, var(--grenat) 16%, transparent);
}

.fichier-nom {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.fichier-nom small {
	display: block;
	margin-top: 0.15rem;
	font-weight: 400;
	font-size: 0.82em;
	color: var(--texte-discret);
}

.fichier-hash {
	font-size: 0.78em;
	color: var(--texte-discret);
	cursor: help;
}

.pastille-etat {
	justify-self: start;
	padding: 0.3em 0.85em;
	border: 1px solid var(--filet-clair);
	border-radius: 99px;
	font-size: 0.78em;
	font-weight: 700;
	white-space: nowrap;
	color: var(--texte-discret);
}

.conforme .pastille-etat {
	border-color: var(--prune-clair);
	background: var(--prune-clair);
	color: var(--papier);
}

.different .pastille-etat {
	border-color: var(--grenat);
	background: var(--grenat);
	color: var(--papier);
}

.liste-vide {
	padding: 2rem 0;
	color: var(--texte-discret);
}

.resultat-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.6rem;
	margin-top: 2.5rem;
}

.resultat-actions .bouton,
.verdict-actions .bouton {
	border: 0;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

#recommencer {
	padding: 0 0 0.15em;
	background: none;
	border-top: 0;
	border-inline: 0;
	font: inherit;
	font-weight: 700;
	color: var(--papier);
	cursor: pointer;
}

/* L'attestation n'existe qu'à l'impression. */
.attestation {
	display: none;
}

/* ── Écrans étroits ── */

@media screen and (max-width: 960px) {
	.maillons {
		grid-template-columns: 1fr;
	}

	/* Les maillons s'empilent : les anneaux numérotés suffisent, sans piste. */
	.fil {
		display: none;
	}

	.maillon + .maillon {
		border-left: 0;
		border-top: 1px solid var(--filet-clair);
	}

	.verdict,
	.faq {
		grid-template-columns: 1fr;
	}

	.faq-titre h2 {
		position: static;
	}

	.atelier-scene {
		min-height: 34rem;
		padding-bottom: 7rem;
	}

	/* Sur écran étroit, la scène de la vérification passe derrière le texte :
	   on l'estompe. Elle seule : ailleurs, la scène garde le haut de l'écran. */
	.atelier-scene #scene {
		opacity: 0.35;
	}
}

@media screen and (max-width: 600px) {
	.fichier-ligne {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}

	.recherche {
		flex-basis: 100%;
	}

	.depot-choix label {
		font-size: 0.88em;
		white-space: nowrap;
	}
}

/* ── Attestation : la page de résultat imprimée ──────────────────────────
   Noir sur blanc, comme les rapports : en-tête, verdict, compteurs,
   empreintes, fichiers à examiner, liste complète, signature. */

@media print {
	@page {
		size: A4;
		margin: 16mm 14mm;
	}

	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		animation: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 10pt;
	}

	.evitement,
	.entete,
	.atelier-scene,
	.detail,
	.resultat-actions,
	.aucun,
	.pied {
		display: none !important;
	}

	.atelier {
		padding: 0;
		background: none;
	}

	/* L'ordre de l'attestation : ses blocs passent devant les compteurs. */
	#detail {
		display: flex !important;
		flex-direction: column;
	}

	.attestation {
		display: contents;
	}

	.attestation-entete {
		order: 1;
		display: flex;
		align-items: center;
		gap: 5mm;
		padding-bottom: 5mm;
		margin-bottom: 6mm;
		border-bottom: 1.5pt solid var(--prune);
	}

	.attestation-entete img {
		height: 12mm;
		width: auto;
	}

	.attestation-titre {
		font-family: var(--font-display);
		font-weight: 800;
		font-size: 16pt;
		letter-spacing: -0.02em;
		color: var(--prune);
	}

	#attestation-date {
		font-size: 9pt;
		color: var(--charbon);
	}

	.attestation-verdict {
		order: 2;
		font-family: var(--font-display);
		font-weight: 800;
		font-size: 13pt;
		line-height: 1.3;
	}

	.compteurs {
		order: 3;
		margin-top: 5mm;
		background: none;
		border: 0;
		gap: 4mm;
	}

	.compteur {
		padding: 2mm 0 0;
		background: none !important;
		border-top: 1pt solid var(--prune-clair);
	}

	.compteur::before {
		content: none;
	}

	.compteur dd {
		font-size: 20pt;
		color: #000;
	}

	.compteur dt,
	.compteur.zero dd,
	.compteur.zero dt {
		color: #000;
		opacity: 1;
	}

	.sceau-carte {
		order: 4;
		margin-top: 5mm;
		padding: 3mm 4mm;
		border: 0.75pt solid var(--prune-clair);
		border-radius: 0;
	}

	.sceau-carte dt {
		color: #000;
	}

	.sceau-etat::before {
		background: var(--prune) !important;
		box-shadow: none !important;
	}

	#attestation-tables {
		order: 5;
	}

	#attestation-tables section {
		margin-top: 6mm;
	}

	#attestation-tables h2 {
		margin-bottom: 2mm;
		font-size: 11pt;
		color: var(--prune);
	}

	.fichiers {
		width: 100%;
		border-collapse: collapse;
		font-size: 7pt;
	}

	.fichiers th {
		padding: 1.2mm 1.5mm;
		text-align: left;
		font-family: var(--font-mono);
		font-size: 6.5pt;
		font-weight: 500;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		background: var(--prune-clair);
		color: #fff;
	}

	.fichiers td {
		padding: 0.7mm 1.5mm;
		vertical-align: middle;
		border-bottom: 0.5pt solid color-mix(in srgb, var(--prune-clair) 35%, #fff);
	}

	.fichiers tr {
		break-inside: avoid;
	}

	.fichiers .hash {
		font-family: var(--font-mono);
		font-size: 6.5pt;
		white-space: nowrap;
	}

	.fichiers .etat {
		text-align: right;
	}

	.fichiers .etat span {
		display: inline-block;
		padding: 0.3mm 1.8mm;
		border: 0.5pt solid #000;
		border-radius: 99px;
		font-family: var(--font-mono);
		font-size: 6pt;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.fichiers .conforme .etat span {
		background: var(--prune-clair);
		border-color: var(--prune-clair);
		color: #fff;
	}

	.fichiers .different .etat span {
		background: var(--grenat);
		border-color: var(--grenat);
		color: #fff;
	}

	.attestation-pied {
		order: 6;
		margin-top: 8mm;
		font-size: 9pt;
		break-inside: avoid;
	}

	.signature {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10mm;
		margin-top: 8mm;
	}

	.signature p {
		padding-bottom: 14mm;
		border-bottom: 0.75pt solid #000;
	}
}

/* ── Page « Prestations » ────────────────────────────────────────────────
   Le contenu à gauche, la scène à droite, fixe pendant la lecture : elle
   prend la forme de l'analyse au milieu de l'écran. */

.prestations {
	/* clip et non hidden : hidden ferait de la page son propre conteneur de
	   défilement, et la scène ne resterait plus collée à l'écran. */
	overflow: clip;
	padding-top: clamp(7rem, 11vw, 9rem);
	background:
		radial-gradient(50% 60% at 85% 30%, color-mix(in srgb, var(--prune) 75%, transparent), transparent 70%),
		radial-gradient(50% 40% at 0% 80%, color-mix(in srgb, var(--prune-clair) 18%, transparent), transparent 70%),
		var(--charbon);
}

.prestations-grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	max-width: 84rem;
	margin-inline: auto;
}

.prestations-contenu {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.prestations-scene {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100lvh;
	margin-top: calc(clamp(7rem, 11vw, 9rem) * -1);
}

/* Le cadre d'une analyse, où la scène se pose sur téléphone. */
.prestation-cadre {
	display: none;
}

.prestations-scene::before,
.prestation-cadre::before {
	content: '';
	position: absolute;
	inset: 10% 0;
	background-image:
		linear-gradient(color-mix(in srgb, var(--papier) 5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--papier) 5%, transparent) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(60% 50% at 50% 50%, #000, transparent);
}

/* L'identifiant l'emporte sur la règle #scene de la page de vérification. */
.prestations-scene #scene {
	position: absolute;
	inset: auto;
	top: 0;
	left: -14%;
	/* Elle déborde de sa colonne, vers la gouttière et l'intervalle : les
	   formes ne sont plus coupées net au bord. */
	width: calc(114% + var(--gouttiere));
	height: 100%;
}

/* La légende de la scène : quelle forme on regarde. */
.scene-legende {
	opacity: 0;
	transition: opacity 0.5s;
	position: absolute;
	left: 50%;
	bottom: 2.4rem;
	display: flex;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 0.66em;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-discret);
}

.scene-legende.visible {
	opacity: 1;
}

.scene-legende li {
	padding-top: 0.6rem;
	border-top: 2px solid var(--filet-clair);
	transition:
		color 0.4s,
		border-color 0.4s;
}

.scene-legende li.actif {
	color: var(--papier);
	border-color: var(--orange);
}

.prestations-tete h1 {
	font-size: clamp(2.8rem, 1.4rem + 4.4vw, 5.4rem);
}

.prestations-tete .chapo {
	margin-top: 1.6rem;
	max-width: 34rem;
	color: color-mix(in srgb, var(--papier) 82%, transparent);
}

/* ── Les trois analyses ── */

.prestation {
	position: relative;
	margin-top: clamp(4rem, 9vw, 7rem);
	padding: 2rem 0 0;
	border-top: 1px solid var(--filet-clair);
	scroll-margin-top: 7rem;
	transition: opacity 0.5s;
}

/* Le filet se charge en orange quand l'analyse est au milieu de l'écran. */
.prestation::before {
	content: '';
	position: absolute;
	left: 0;
	top: -1px;
	height: 2px;
	width: 100%;
	background: var(--orange);
	transform-origin: 0 50%;
	transform: scaleX(0.06);
	transition: transform 1s var(--doux);
}

.prestation.lue::before {
	transform: scaleX(1);
}

.prestation-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.prestation-num {
	font-family: var(--font-mono);
	font-size: 0.8em;
	font-weight: 500;
	color: var(--texte-discret);
}

.prestation h2 {
	margin-top: 1rem;
	font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);
	letter-spacing: -0.035em;
}

.prestation-accroche {
	margin-top: 1rem;
	max-width: 36rem;
	font-size: 1.08em;
	color: color-mix(in srgb, var(--papier) 85%, transparent);
}

.prestation-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}

.prestation h3 {
	margin-bottom: 0.9rem;
	font-family: var(--font-mono);
	font-size: 0.68em;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-discret);
}

.releves,
.quand {
	margin: 0;
	padding: 0;
	list-style: none;
}

.releves li {
	position: relative;
	padding: 0.55rem 0 0.55rem 1.4rem;
	border-bottom: 1px solid color-mix(in srgb, var(--papier) 8%, transparent);
	font-size: 0.95em;
}

.releves li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--orange);
}

.quand {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.quand li {
	padding: 0.45em 0.9em;
	border: 1px solid var(--filet-clair);
	border-radius: 99px;
	font-size: 0.82em;
	font-weight: 700;
}

/* ── Explorer le véhicule ── */

.explorer {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: 1.6rem 1.7rem 1.6rem;
	border: 1px solid var(--filet-clair);
	border-radius: 18px;
	background: color-mix(in srgb, var(--papier) 3%, transparent);
}

/* Sur sa page, le module suit l'en-tête. */
.page-explorer .prestations-contenu {
	padding-bottom: clamp(4rem, 8vw, 6rem);
}

.retour {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.6rem;
	font-size: 0.85em;
	font-weight: 700;
	text-decoration: none;
	color: var(--texte-discret);
	transition: color 0.3s;
}

.retour::before {
	content: '←';
	transition: transform 0.3s var(--doux);
}

.retour:hover {
	color: var(--papier);
}

.retour:hover::before {
	transform: translateX(-3px);
}

.prestation-suite {
	margin-top: 1.4rem;
}

.explorer-aide {
	font-size: 0.9em;
	color: color-mix(in srgb, var(--papier) 80%, transparent);
}

.explorer-onglets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.explorer-onglets button {
	padding: 0.5em 0.95em;
	border: 1px solid var(--filet-clair);
	border-radius: 99px;
	background: none;
	font: inherit;
	font-size: 0.84em;
	font-weight: 700;
	color: var(--papier);
	cursor: pointer;
	transition:
		background 0.3s,
		border-color 0.3s,
		color 0.3s;
}

.explorer-onglets button:hover {
	border-color: var(--papier);
}

.explorer-onglets button[aria-selected='true'] {
	border-color: var(--papier);
	background: var(--papier);
	color: var(--charbon);
}

/* « Et les autres » : en pointillés, comme une liste qui continue. */
.explorer-onglets button[data-calculateur='autres']:not([aria-selected='true']) {
	border-style: dashed;
	color: var(--texte-discret);
}

.explorer-fiche {
	min-height: 7.5rem;
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid color-mix(in srgb, var(--papier) 8%, transparent);
}

.explorer-fiche.montre > * {
	animation: fondu 0.5s var(--doux) both;
}

.explorer-fiche.montre > :nth-child(2) {
	animation-delay: 0.08s;
}

.explorer-fiche.montre > :nth-child(3) {
	animation-delay: 0.16s;
}

.explorer-fiche h4 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.explorer-fiche p {
	margin-top: 0.45rem;
	max-width: 36rem;
	color: color-mix(in srgb, var(--papier) 85%, transparent);
}

.explorer-fiche .explorer-note {
	font-size: 0.8em;
	color: var(--texte-discret);
}

.explorer-vide {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--texte-discret);
}

.explorer-vide::before {
	content: '';
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--orange);
	animation: pulsation 2.4s ease-out infinite;
}

/* Les repères sur la voiture : un anneau qui respire, le nom au choix. */
.reperes-calculateurs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s;
}

.reperes-calculateurs.visible {
	opacity: 1;
}

.reperes-calculateurs.visible .repere-calculateur {
	pointer-events: auto;
}

.repere-calculateur {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.2rem;
	height: 2.2rem;
	margin: -1.1rem 0 0 -1.1rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	will-change: transform;
}

.repere-calculateur::before,
.repere-calculateur::after {
	content: '';
	position: absolute;
	inset: 0.55rem;
	border-radius: 50%;
	border: 1.5px solid var(--papier);
	transition:
		background 0.3s,
		border-color 0.3s,
		inset 0.3s var(--doux);
}

.repere-calculateur::after {
	border-color: var(--orange);
	animation: pulsation 2.4s ease-out infinite;
}

.repere-calculateur:hover::before {
	inset: 0.4rem;
}

.repere-calculateur.choisi::before {
	inset: 0.45rem;
	border-color: var(--orange);
	background: var(--orange);
}

/* Le nom, en étiquette, seulement pour le calculateur choisi. */
.repere-calculateur span {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 0.5rem);
	padding: 0.25em 0.6em;
	border: 1px solid var(--filet-clair);
	border-radius: 4px;
	background: color-mix(in srgb, var(--charbon) 85%, transparent);
	font-family: var(--font-mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--papier);
	opacity: 0;
	transform: translate(-50%, 4px);
	transition:
		opacity 0.3s,
		transform 0.3s var(--doux);
	/* Invisible tant qu'on ne survole pas : elle ne doit pas prendre le toucher d'un repère voisin. */
	pointer-events: none;
}

.repere-calculateur.choisi span,
.repere-calculateur:hover span {
	opacity: 1;
	transform: translate(-50%, 0);
}

@keyframes pulsation {
	from {
		transform: scale(1);
		opacity: 0.7;
	}
	to {
		transform: scale(2.2);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.repere-calculateur::after,
	.explorer-vide::before {
		animation: none;
	}
}

/* La note d'une analyse : ce qu'en dit le rapport, ses précautions. */
.prestation-note {
	margin-top: 1.8rem;
	padding-left: 1rem;
	border-left: 2px solid var(--orange);
	max-width: 38rem;
	font-size: 0.92em;
	color: color-mix(in srgb, var(--papier) 82%, transparent);
}

@media screen and (max-width: 960px) {
	.prestations-grille {
		grid-template-columns: 1fr;
	}

	/* La scène quitte sa colonne. En haut de page, un bandeau qui défile avec
	   le reste ; puis elle se pose dans le cadre de l'analyse qu'on lit
	   (prestations.js). La légende n'a plus d'objet : chaque cadre a son titre. */
	.prestations-scene {
		order: -1;
		position: relative;
		height: 44svh;
		margin: calc(clamp(7rem, 11vw, 9rem) * -1 + 4rem) calc(var(--gouttiere) * -1) 0;
	}

	.prestations-tete {
		margin-top: -1rem;
	}

	.scene-legende {
		display: none;
	}

	.prestation-cadre {
		display: block;
		position: relative;
		height: 40svh;
		margin: 0.5rem calc(var(--gouttiere) * -1) 0;
	}

	/* Un seul canevas, plein écran, derrière le texte : la forme y est dessinée
	   à l'endroit du cadre lu, et passe de l'un à l'autre (prestations.js). */
	.page-prestations main:not(.page-explorer) #scene {
		position: fixed;
		inset: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* Analyse data, en détail : la voiture reste en haut de l'écran pendant
	   qu'on choisit un calculateur ; la page est courte. */
	.page-explorer .prestations-scene {
		position: sticky;
		top: 0;
		z-index: 2;
		height: 48svh;
		margin-top: calc(clamp(7rem, 11vw, 9rem) * -1);
		background: linear-gradient(var(--charbon) 90%, transparent);
	}

	.page-explorer .prestations-tete {
		margin-top: 0;
		padding-top: 1.5rem;
	}

	.repere-calculateur {
		width: 1.9rem;
		height: 1.9rem;
		margin: -0.95rem 0 0 -0.95rem;
	}

	.prestation-colonnes {
		grid-template-columns: 1fr;
	}
}

/* ── Menu sur écran étroit ───────────────────────────────────────────── */

.menu-bouton,
.nav-mission {
	display: none;
}

@media (max-width: 860px) {
	.menu-bouton {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.7em 1em;
		border: 1px solid var(--filet-clair);
		border-radius: 99px;
		background: color-mix(in srgb, var(--charbon) 70%, transparent);
		font: inherit;
		font-size: 0.78em;
		font-weight: 700;
		color: var(--papier);
		cursor: pointer;
	}

	/* « Menu » et « Fermer » dans la même case de grille : le bouton prend
	   la largeur du plus long et n'en change plus. Le mot caché n'est pas lu. */
	.menu-libelle {
		display: inline-grid;
	}

	.menu-libelle > span {
		grid-area: 1 / 1;
	}

	.menu-fermer,
	.entete.ouvert .menu-ouvrir {
		visibility: hidden;
	}

	.entete.ouvert .menu-fermer {
		visibility: visible;
	}

	/* Deux traits, qui se croisent à l'ouverture. */
	.menu-icone {
		position: relative;
		width: 1rem;
		height: 0.6rem;
	}

	.menu-icone::before,
	.menu-icone::after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--orange);
		transition: transform 0.35s var(--doux), top 0.35s var(--doux);
	}

	.menu-icone::before {
		top: 0;
	}

	.menu-icone::after {
		top: calc(100% - 2px);
	}

	.entete.ouvert .menu-icone::before {
		top: calc(50% - 1px);
		transform: rotate(45deg);
	}

	.entete.ouvert .menu-icone::after {
		top: calc(50% - 1px);
		transform: rotate(-45deg);
	}

	/* Le panneau : la navigation, en grand, sous l'en-tête. */
	.entete nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0.6rem var(--gouttiere) 1.6rem;
		background: color-mix(in srgb, var(--charbon) 96%, transparent);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-bottom: 1px solid var(--filet-clair);
		font-size: 1.3rem;
		font-weight: 800;
		letter-spacing: -0.02em;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity 0.3s,
			transform 0.35s var(--doux),
			visibility 0s 0.35s;
	}

	.entete.ouvert nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition:
			opacity 0.3s,
			transform 0.35s var(--doux),
			visibility 0s;
	}

	.entete nav a {
		padding: 0.9rem 0;
		opacity: 1;
		border-bottom: 1px solid color-mix(in srgb, var(--papier) 8%, transparent);
	}

	.entete nav a[aria-current='page'] {
		color: var(--papier);
		box-shadow: inset 3px 0 0 var(--orange);
		padding-left: 0.9rem;
	}

	/* L'en-tête ouvert prend un fond, même tout en haut de la page. */
	.entete.ouvert {
		background: color-mix(in srgb, var(--charbon) 96%, transparent);
	}
}

/* Très étroit : le bouton « Confier une mission » passe dans le menu. */
@media (max-width: 520px) {
	.entete > .bouton.compact {
		display: none;
	}

	.entete .menu-bouton {
		margin-left: auto;
	}

	.nav-mission {
		display: block;
		color: var(--orange);
	}

	.entete nav a.nav-mission {
		border-bottom: 0;
		color: var(--papier);
	}

	.entete nav a.nav-mission::after {
		content: ' →';
		color: var(--orange);
	}
}

/* ── Mentions légales ────────────────────────────────────────────────── */

.mentions-cadre {
	max-width: 46rem;
	margin-inline: auto;
	padding-top: clamp(8rem, 14vw, 11rem);
}

.page-outil .mentions h1 {
	margin-top: 0.8rem;
	font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem);
	letter-spacing: -0.035em;
}

.mentions section {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.4rem;
	border-top: 1px solid var(--filet-clair);
}

.mentions h2 {
	margin-bottom: 1rem;
	font-family: var(--font-mono);
	font-size: 0.7em;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-discret);
}

.mentions dl {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	gap: 0.6rem 1.5rem;
	margin: 0;
}

.mentions dt {
	color: var(--texte-discret);
}

.mentions dd {
	margin: 0;
}

.mentions p {
	max-width: 40rem;
	color: color-mix(in srgb, var(--papier) 85%, transparent);
}

.mentions p + p {
	margin-top: 1rem;
}

.mentions strong {
	color: var(--papier);
}

@media (max-width: 640px) {
	.mentions dl {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.mentions dd + dt {
		margin-top: 0.7rem;
	}
}