/*
 * Barre de navigation mobile basse (inc/functions-mobile-footer-nav.php).
 *
 * Le conteneur .footer-device-mobile (position fixe, ombre, masquage < 1200 px) reste stylé par
 * Besa (css/template2.css) ; on ne redéfinit que ses entrées. Le préfixe .footer-device-mobile
 * est conservé pour passer devant les règles de Besa (.footer-device-mobile > * a, …).
 */
.footer-device-mobile {
	padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom));
}

.footer-device-mobile > .tm-mobile-nav-item {
	flex: 1 1 0;
	min-width: 0;
}

.footer-device-mobile > .tm-mobile-nav-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	color: var(--fg-3);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--fw-regular);
	line-height: var(--lh-snug);
}

.footer-device-mobile > .tm-mobile-nav-item:hover a,
.footer-device-mobile > .tm-mobile-nav-item a:focus-visible,
.footer-device-mobile > .tm-mobile-nav-item.active a {
	color: var(--fg-brand);
}

.footer-device-mobile > .tm-mobile-nav-item.active a {
	font-weight: var(--fw-medium);
}

.footer-device-mobile .tm-mobile-nav-icon-wrap {
	position: relative;
	display: block;
	line-height: 0;
}

.footer-device-mobile .tm-mobile-nav-icon {
	width: 24px;
	height: 24px;
}

.footer-device-mobile .tm-mobile-nav-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.footer-device-mobile .tm-mobile-nav-badge {
	position: absolute;
	top: -7px;
	left: calc(100% - 8px);
	min-width: 18px;
	padding: 0 4px;
	border-radius: var(--radius-xs);
	background: var(--bg-brand);
	color: var(--fg-inverse);
	font-size: var(--text-2xs);
	font-weight: var(--fw-semibold);
	line-height: 18px;
	text-align: center;
}