/*
 * Liens d'évitement (voir src/Accessibility/SkipLinks.php) : invisibles tant qu'on n'a pas appuyé sur Tab, puis visibles au focus.
 * Par défaut la barre s'insère dans la page et la pousse vers le bas ; `.is-fluid` (réglage « Liens d'évitement fluides ») la fait glisser
 * par-dessus le haut de la page, sans rien décaler.
 *
 * Variables : --millv2-skip-bg (fond), --millv2-skip-color (texte), --millv2-skip-focus (contour du lien focalisé), --millv2-skip-padding (marges à gauche et à droite),
 *   --millv2-skip-gap (espace entre les liens), --millv2-skip-z (z-index), --millv2-skip-speed (glissement, .25s), --millv2-skip-height (hauteur
 *   minimale de la barre, 3.5rem).
 * Barre visible : --millv2-skip-shift vaut sa hauteur, sur :root (0 sinon). Un en-tête fixe du thème (position: fixed, que la barre ne pousse pas)
 *   s'en sert pour descendre d'autant : `top: var(--millv2-skip-shift, 0)` ; sinon la barre le recouvre.
 * Apparence dans @layer millv2-blocks : le CSS du thème l'emporte.
 */
.millv2-skip-links {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:root:has(.millv2-skip-links:focus-within) {
	--millv2-skip-shift: var(--millv2-skip-height, 3.5rem);
}

.millv2-skip-links:focus-within {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

.millv2-skip-links.is-fluid {
	inset: 0 0 auto;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	transform: translateY(-100%);
}

.millv2-skip-links.is-fluid:focus-within {
	position: absolute;
	transform: none;
}

@layer millv2-blocks {
	.millv2-skip-links {
		box-sizing: border-box;
		z-index: var(--millv2-skip-z, 9999);
		display: flex;
		align-items: center;
		min-height: var(--millv2-skip-height, 3.5rem);
		padding: 0 var(--millv2-skip-padding, 1.25rem);
		background: var(--millv2-skip-bg, #1d1d1b);
		color: var(--millv2-skip-color, #fff);
	}

	.millv2-skip-links.is-fluid {
		transition: transform var(--millv2-skip-speed, 0.25s) ease;
	}

	.millv2-skip-links ul {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0.5rem var(--millv2-skip-gap, 1.875rem);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.millv2-skip-links a {
		color: inherit;
	}

	.millv2-skip-links a:focus-visible {
		outline: 2px solid var(--millv2-skip-focus, #0a76f6);
		outline-offset: 2px;
	}

	@media (prefers-reduced-motion: reduce) {
		.millv2-skip-links.is-fluid {
			transition: none;
		}
	}
}