/* Lien fléché : pastille 30 px + flèche 12×24, libellé à 10 px (maquette). */

.link-dot {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--c-accent);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	/* Deux couleurs distinctes : celle de l'aplat, et celle de la flèche une
	   fois l'aplat rempli. Les confondre dans « currentColor » rendait le
	   disque invisible au survol. */
	--dot-aplat: currentColor;
	--dot-encre: var(--c-bg);
}

/* Survol : l'aplat de la pastille croît depuis son centre, la flèche sort par
   la droite et sa copie entre par la gauche, le libellé avance de deux pixels.
   Rien que du « transform » et de l'opacité — aucun repeint, aucun reflow. La
   maquette ne dessine aucun état de survol : seul le mouvement est ajouté. */

.link-dot__dot {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--dot);
	height: var(--dot);
	position: relative;
	top: 2px; /* pastille 2 px sous la ligne de texte (maquette) */
	border: var(--rule) solid var(--dot-aplat);
	border-radius: 50%;
	/* Les flèches sortent du cercle : il faut les y enfermer. « isolation »
	   garde le z-index négatif de l'aplat dans cette pastille. */
	overflow: hidden;
	isolation: isolate;
}

.link-dot__dot::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--rule));
	z-index: -1;
	border-radius: 50%;
	background: var(--dot-aplat);
	transform: scale(0);
	transition: transform 0.45s var(--ease-reveal);
}

.link-dot__arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 24px;
	margin: -12px 0 0 -6px;
	color: var(--dot-aplat);
	transition:
		transform 0.42s var(--ease-reveal),
		color 0.3s var(--ease) 0.08s;
}

.link-dot__arrow--suivante {
	transform: translate3d(-190%, 0, 0);
}

.link-dot__label {
	white-space: nowrap;
	transition: transform 0.42s var(--ease-reveal);
}

.link-dot--on-dark {
	color: var(--c-light);
	--dot-encre: var(--c-accent);
}

.link-dot:hover .link-dot__dot::before,
.link-dot:focus-visible .link-dot__dot::before {
	transform: scale(1);
}

.link-dot:hover .link-dot__arrow,
.link-dot:focus-visible .link-dot__arrow {
	transform: translate3d(190%, 0, 0);
}

.link-dot:hover .link-dot__arrow--suivante,
.link-dot:focus-visible .link-dot__arrow--suivante {
	transform: none;
}

.link-dot:hover .link-dot__label,
.link-dot:focus-visible .link-dot__label {
	transform: translate3d(2px, 0, 0);
}

.link-dot:hover .link-dot__arrow,
.link-dot:focus-visible .link-dot__arrow {
	color: var(--dot-encre);
}

/* Lien discret « ➔ Libellé » — DIN Pro Medium 12 px, interligne 47 px. */
.link-micro {
	display: inline-block;
	font-weight: 500;
	font-size: var(--fs-micro);
	line-height: var(--lh-micro);
	letter-spacing: normal;
	opacity: var(--o-text);
	white-space: nowrap;
	transition: opacity var(--t-fast);
}

/* Icône 10 × 10 de la maquette (grommet-icons:link-next), plus un caractère :
   trait constant, couleur héritée, et le même dessin partout sur le site. */
.link-micro__arrow {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 0.35em;
	vertical-align: -1px;
}

.link-micro__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Destination hors du site : la même flèche, pointée en diagonale. */
.link-micro__arrow--externe {
	transform: rotate(-45deg);
}

/* Destination pas encore fournie : le lien reste dessiné mais inactif. */
.link-micro--pending {
	cursor: default;
}

.link-micro:hover,
.link-micro:focus-visible,
.card-article:hover .link-micro,
.card-service:hover .link-micro {
	opacity: 1;
}