/*
 * Les épingles d'actualité, sous le hero et le bandeau tricolore — sujet 2,
 * étape 4b.
 *
 * Centrées et reparties par la seule force du flex-wrap centré : une seule
 * épingle se retrouve au centre, deux côte à côte centrées, trois réparties
 * — comportement natif, vérifié aux trois cas plutôt que traité par nombre
 * (brief étape 4b).
 */
.aspacam-pins {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--aspacam-theme-space-sm);
	margin: 0;
	padding: var(--aspacam-theme-space-md) 0;
	list-style: none;
}

/*
 * Pastille : bordure fine, coins entièrement arrondis (999px, jamais
 * atteint) — même esthétique plate que le reste du site, forme distincte
 * des tuiles et des boutons rectangulaires.
 */
.aspacam-pins__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: calc(var(--aspacam-theme-space-xs) / 2) var(--aspacam-theme-space-sm);
	border: 1px solid var(--aspacam-theme-color-border);
	border-radius: 999px;
	font-size: var(--aspacam-theme-font-size-small);
	text-decoration: none;
	color: var(--aspacam-theme-color-text);
	background-color: var(--aspacam-theme-color-background);
}

a.aspacam-pins__pill:hover,
a.aspacam-pins__pill:focus {
	border-color: var(--aspacam-theme-color-text-muted);
}

/*
 * L'icône (assets/pin.svg) : calée sur la hauteur d'une majuscule, ou très
 * légèrement au-dessus (étape 4f, sujet 1) — mesurée, pas posée au jugé.
 * La hauteur d'une majuscule à la taille de police des pastilles (14px)
 * mesure 10px (canvas measureText, lettres H/M/A/T, toutes identiques).
 * 0,75em (10,5px) semblait pourtant déjà l'atteindre sur le papier, mais se
 * lisait nettement plus petit à l'écran qu'un « F » voisin : le tracé du
 * fichier ne remplit que 28px sur les 32px de son cadre (mesuré via
 * getBBox()), un trait fin et diagonal plutôt qu'un aplat comme une lettre,
 * qui a besoin d'un cadre plus grand pour paraître aussi haut. Recalée à
 * l'œil sur ce même repère (la hauteur d'un « F ») une fois ce constat fait :
 * 1em (14px) donne un tracé visible d'environ 12px, à hauteur de majuscule
 * ou très légèrement au-dessus, sans la dominer.
 *
 * Fichier utilisé tel quel (SITE.md, même règle que le logo de
 * l'association) ; sa seule adaptation est la couleur, imposée par CSS
 * sans toucher au fichier — il arrive avec un tracé plein sans "fill"
 * explicite, donc noir par défaut.
 */
.aspacam-pins__icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
	flex: none;
}

.aspacam-pins__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.aspacam-pins__icon svg path {
	fill: #767470;
}