/**
 * Page « introuvable ».
 *
 * Aucune maquette : la composition est déduite de celles des pages
 * intérieures, qui partagent toutes le même dispositif — colonne de texte
 * calée sur le logo, grand disque de couleur débordant à droite, anneau à
 * cheval sur les deux. Les proportions sont donc exprimées comme les leurs,
 * en cqw sur une scène plafonnée à la largeur de maquette, et les repères
 * ci-dessous sont ceux d'une page de 1440 :
 *
 *   disque  780 / -140 / Ø 700     anneau  centre 760 / 350, Ø 420
 *   colonne 100 /   90 / l. 430    hauteur du bloc 620
 *
 * Le vert plutôt que l'or, l'orange ou le sable : aucune section du site ne
 * l'emploie pour son disque, et cette page n'appartient à aucune.
 *
 * Emplacement : assets/css/components/erreur-404.css
 */

.erreur {
	overflow: hidden;   /* le disque déborde à droite, comme dans les autres blocs */
}

.erreur__scene {
	container-type: inline-size;
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	aspect-ratio: 1440 / 620;
}

/* ── Grand disque vert ─────────────────────────────────────── */

/* Le haut du disque sort par le haut de la scène, que overflow rogne : c'est
   le même geste que sous les bandeaux des pages intérieures, où le cercle
   passe sous la photographie. */
.erreur__cercle {
	position: absolute;
	top: -9.722cqw;
	left: 54.167cqw;
	width: 48.611cqw;           /* 700 px */
	aspect-ratio: 1;
	background-color: var(--e4y-green);
	border-radius: var(--radius-full);
}

/* ── Colonne de texte ──────────────────────────────────────── */

/* left : le bord gauche du conteneur, pour que la colonne s'aligne
   verticalement sur le logo de l'en-tête — voir hub-intro.css, qui détaille
   le calcul. */
.erreur__colonne {
	position: absolute;
	top: 6.25cqw;
	left: calc((min(1440px, 100vw) - min(var(--container-max), 100vw)) / 2 + var(--gutter));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 29.861cqw;           /* 430 px */
}

/* Sur-titre discret : le code d'erreur s'affiche en grand dans l'anneau, il
   n'a pas à peser une seconde fois sur la colonne. Il y reste néanmoins, car
   celui de l'anneau est masqué aux technologies d'assistance. */
.erreur__code {
	margin: 0;
	font-size: 1.389cqw;        /* 20 px */
	font-weight: var(--fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--e4y-orange);
}

.erreur__titre {
	margin-block-start: 1.25cqw;
	font-size: 3.333cqw;        /* 48 px */
	line-height: 1.19;
	color: var(--color-text);
}

.erreur__texte {
	margin-block-start: 1.25cqw;
	font-size: 1.389cqw;        /* 20 px */
	line-height: 1.25;
	color: var(--color-text);
}

/* Le bouton suit l'échelle de la scène, sinon il paraîtrait démesuré une fois
   la composition réduite. */
.erreur__bouton {
	margin-block-start: 2.5cqw;
	gap: 0.6cqw;
	min-height: 3.4cqw;         /* 49 px */
	padding: 0.6cqw 0.9cqw;
	font-size: 1.111cqw;        /* 16 px */
}

.erreur__bouton .btn__icon--arrow {
	width: 1.46cqw;
	height: auto;
}

/* ── Anneau et code d'erreur ───────────────────────────────── */

.erreur__anneau {
	position: absolute;
	top: 9.722cqw;
	left: 38.194cqw;
	width: 29.167cqw;           /* 420 px */
}

/* Le disque intérieur est blanc : l'anneau chevauche le vert, et le nombre a
   besoin d'un fond propre pour rester lisible des deux côtés. */
.erreur__anneau .anneau__contenu {
	background-color: var(--e4y-white);
}

.erreur__nombre {
	font-family: var(--font-display);
	font-size: 8.5cqw;          /* ~122 px, soit un tiers du diamètre */
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--e4y-green);
}

/* ── Destinations ──────────────────────────────────────────── */

/* Ce qui rattrape vraiment une page introuvable : les liens du menu, repris
   tels quels pour n'avoir rien à tenir à jour. */
.erreur__pistes {
	padding-block: var(--space-8) var(--section-gap);
	text-align: center;
}

.erreur__pistes-titre {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--color-text);
}

.erreur__pistes-liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La pilule reprend le bouton fantôme du site, en plus menu : ces liens sont
   une aide, pas l'action principale de la page. */
.erreur__pistes-liste a {
	display: block;
	padding: var(--space-3) var(--space-5);
	font-size: var(--fs-body);
	color: var(--e4y-green);
	text-decoration: none;
	border: 1px solid var(--e4y-green);
	border-radius: var(--radius-full);
	transition:
		color var(--duration) var(--ease),
		background-color var(--duration) var(--ease);
}

.erreur__pistes-liste a:hover,
.erreur__pistes-liste a:focus-visible {
	color: var(--color-text-inverse);
	background-color: var(--e4y-green);
}


/* ============================================================
   Sous 1200px — la composition se déplie

   Même repli que les blocs d'introduction des pages intérieures : à 402 px,
   un cqw ne vaut plus que 4 et le titre tomberait à 13 px. Le disque, qui ne
   porte aucun texte ici, se retire au profit de l'anneau — qui reste, lui, le
   seul élément coloré dont la page ait besoin.
   ============================================================ */

@media (max-width: 1199px) {

	.erreur__scene {
		--erreur-anneau: min(280px, 72vw);
		display: flex;
		flex-direction: column;
		align-items: center;
		aspect-ratio: auto;
		padding-block: var(--space-8) var(--space-7);
	}

	.erreur__cercle {
		display: none;
	}

	.erreur__colonne {
		position: static;
		order: 1;
		width: 100%;
		max-width: var(--container-narrow);
		padding-inline: var(--gutter);
	}

	.erreur__code {
		font-size: var(--fs-small);
	}

	.erreur__titre {
		margin-block-start: var(--space-2);
		font-size: var(--fs-h1);
	}

	.erreur__texte {
		margin-block-start: var(--space-3);
		font-size: var(--fs-body);
	}

	.erreur__bouton {
		margin-block-start: var(--space-6);
		gap: var(--space-3);
		min-height: 49px;
		padding: var(--space-3) var(--space-5);
		font-size: var(--fs-body);
	}

	.erreur__bouton .btn__icon--arrow {
		width: 21px;
	}

	.erreur__anneau {
		position: static;
		order: 2;
		width: var(--erreur-anneau);
		margin-block-start: var(--space-8);
	}

	/* Le nombre se mesure au diamètre de l'anneau, pas à la scène. L'anneau
	   n'est pas un conteneur de requête : un cqw s'y résoudrait contre la
	   scène, large de 402 px, et donnerait un « 404 » trois fois trop gros
	   pour son disque. */
	.erreur__nombre {
		font-size: calc(var(--erreur-anneau) * 0.29);
	}

	/* Deux colonnes égales plutôt qu'un enroulement libre : à six liens de
	   longueurs inégales, les pilules se rangeaient en escalier. La largeur
	   posée sur le lien seul restait sans effet — c'est l'élément de liste qui
	   dimensionne, et il s'ajuste à son contenu. */
	.erreur__pistes-liste {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}

	.erreur__pistes-liste a {
		text-align: center;
	}

}