/**
 * Boutons de partage.
 *
 * Pastilles rondes bordées de vert, comme les flèches de carrousel : c'est le
 * même geste — une commande discrète posée à côté du contenu, pas un appel à
 * l'action. La cible fait 44 px, minimum confortable au doigt.
 *
 * Emplacement : assets/css/components/partage.css
 */

.partage {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
}

.partage__titre {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	color: var(--color-text-muted);
}

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

.partage__lien {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--e4y-green);
	background: none;
	border: 1px solid var(--e4y-green);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition:
		color var(--duration) var(--ease),
		background-color var(--duration) var(--ease);
}

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

.partage__icone {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Les pictogrammes de réseaux du thème sont pleins, celui du lien est tracé.
   La couleur passe par currentColor dans les deux cas. */
.partage__copie .partage__icone {
	fill: none;
	stroke: currentColor;
}

/* Retour de la copie, annoncé aussi aux lecteurs d'écran par aria-live. */
.partage__retour {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--e4y-green);
}

.partage__retour:empty {
	display: none;
}