Confirmed. So used to use flags I guess nobody tested using lang code there.

First aspect to change is to get this

This to let choose when we have languages for different countries: de-DE, de-AT, etc. and correct useless whitespace between badges.

Code would be

<dd class="association">
	<span class="icon-globe icon-fw" aria-hidden="true"></span>
	<?php echo Text::_('JASSOCIATIONS'); ?>
	<?php foreach ($associations as $association) : ?>
		<?php if ($displayData['item']->params->get('flags', 1) && $association['language']->image) : ?>
			<?php $flag = HTMLHelper::_('image', 'mod_languages/' . $association['language']->image . '.gif', $association['language']->title_native, array('title' => $association['language']->title_native), true); ?>
			<a href="<?php echo Route::_($association['item']); ?>"><?php echo $flag; ?></a>
		<?php else : ?>
			<?php $class = 'badge bg-secondary badge-' . strtolower($association['language']->lang_code); ?>
			<a class="<?php echo $class; ?>" title="<?php echo $association['language']->title_native; ?>" href="<?php echo Route::_($association['item']); ?>"><?php echo $association['language']->lang_code; ?></a>
		<?php endif; ?>
	<?php endforeach; ?>
</dd>
<?php endif; ?>

then we have an issue with the hover colour. Remark that in backend managers we have no hover.
Looking at it now.

What do you think about this?

EDIT: same modifications for list category

remark that there is no "on-hover" when it is flags

What do you think about this?

Looks fine for me.

According to the bootstrap 5 documentation badges should no longer have focus or hover styles for links. https://getbootstrap.com/docs/5.0/components/badge/

the PR (to come) will change badges to buttons.

See #32992 closing