/* ==========================================================================
   Lien fléché (CTA) : libellé en capitales + flèche fine.
   Au survol, une seconde flèche apparaît, décalée dans le sens de la flèche.
   Directions : --droite (→), --gauche (←), --bas (↓), --haut (↑).
   ========================================================================== */

.lien-fleche {
	--fleche-rotation: 0deg;
	display: inline-flex;
	align-items: center;
	gap: var(--cta-gap);
	padding-block: var(--cta-zone);
	margin-block: calc(-1 * var(--cta-zone));
	font-family: var(--ff-sans);
	font-weight: var(--fw-medium);
	font-size: var(--fs-cta);
	line-height: var(--lh-cta);
	text-transform: uppercase;
	white-space: nowrap; /* un libellé fléché ne se coupe jamais (« Retour en haut ») */
	color: inherit;
}

.lien-fleche--gauche {
	--fleche-rotation: 180deg;
}

.lien-fleche--bas {
	--fleche-rotation: 90deg;
}

.lien-fleche--haut {
	--fleche-rotation: -90deg;
}

/* Boîte de la flèche : dimensions inversées pour les flèches verticales. */
.lien-fleche__fleche {
	position: relative;
	flex: none;
	width: var(--fleche-long);
	height: var(--fleche-larg);
	color: var(--c-ink);
}

.lien-fleche--bas .lien-fleche__fleche,
.lien-fleche--haut .lien-fleche__fleche {
	width: var(--fleche-larg);
	height: var(--fleche-long);
}

.lien-fleche__fleche .fleche__svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--fleche-long);
	max-width: none;
	height: var(--fleche-larg);
	transform: translate(-50%, -50%) rotate(var(--fleche-rotation));
	transition: opacity var(--t-hover), transform var(--t-hover);
}

/* Seconde flèche : cachée, superposée à la première. */
.lien-fleche__fleche .fleche__svg + .fleche__svg {
	opacity: 0;
}

.lien-fleche:hover .fleche__svg + .fleche__svg,
.lien-fleche:focus-visible .fleche__svg + .fleche__svg {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(var(--fleche-rotation)) translateX(var(--hover-decalage-fleche));
}