/**
 * Barre de navigation basse persistante — esprit application.
 *
 * Mobile uniquement : seuil de 699px, même convention que cac-child.
 * --mdc-bottom-nav-height expose la hauteur de cette barre comme point
 * d'ancrage pour de futurs éléments flottants du thème — même principe que
 * --mdc-anchor-ad-height (assets/js/anchor-ad-watcher.js), mais une valeur
 * CSS statique plutôt que mesurée en JS : la hauteur de cette barre est
 * connue par construction, pas besoin de la mesurer dynamiquement.
 */

/*
 * display:none par défaut (desktop) — DOIT rester avant le media query
 * mobile ci-dessous : à spécificité strictement égale, c'est l'ordre des
 * règles dans le fichier qui tranche, pas la présence d'un media query.
 */
.mdc-bottom-nav {
	display: none;
}

@media (max-width: 699px) {
	:root {
		--mdc-bottom-nav-height: calc(4rem + env(safe-area-inset-bottom, 0px));
	}

	.mdc-bottom-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		/*
		 * --mdc-anchor-ad-height : la barre ne doit jamais être recouverte
		 * par la bannière adhésion Mediavine (brief explicite) — remonte
		 * au-dessus d'elle. .mdc-bottom-nav est exclue de sa propre
		 * détection (assets/js/anchor-ad-watcher.js, OWN_SELECTOR).
		 */
		bottom: var(--mdc-anchor-ad-height, 0px);
		z-index: 1600;
		height: var(--mdc-bottom-nav-height);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: var(--mdc-teal-hover);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
	}
}

.mdc-bottom-nav-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2em;
	min-height: 44px;
	padding: 0.35em 0;
	color: #fff;
	text-decoration: none;
	font-family: inherit;
	font-size: 0.7rem;
}

.mdc-bottom-nav-item svg {
	width: 1.5em;
	height: 1.5em;
	flex: 0 0 auto;
}

/* Icône de la page active : accent terracotta (contraste fort sur le fond
   teal foncé de la barre — 4.7:1 mesuré, largement AA pour un pictogramme +
   libellé de cette taille). */
.mdc-bottom-nav-item--active {
	color: var(--mdc-terracotta);
}

/*
 * Bug réel constaté (retour utilisateur : icône invisible au survol/focus
 * sur mobile) : la règle générique a:hover/a:focus-visible (base.css,
 * color: var(--mdc-teal-hover)) a plus de spécificité qu'un simple
 * .mdc-bottom-nav-item — elle s'applique donc ici, et --mdc-teal-hover est
 * exactement la couleur de fond de cette barre (background ci-dessus) :
 * l'icône/le texte survolé devenait de la même couleur que son propre
 * fond. Reprend explicitement les couleurs de repos (blanc, ou terracotta
 * pour l'entrée active) au survol/focus plutôt que de laisser la règle
 * générique l'emporter.
 */
.mdc-bottom-nav-item:hover,
.mdc-bottom-nav-item:focus-visible {
	color: #fff;
}

.mdc-bottom-nav-item--active:hover,
.mdc-bottom-nav-item--active:focus-visible {
	color: var(--mdc-terracotta);
}

/*
 * Sauts visibles si Mediavine redimensionne son encart après coup (l'encart
 * "cherche sa place" — plusieurs redimensionnements successifs avant de se
 * stabiliser). Transition douce sur `bottom` plutôt qu'un repositionnement
 * instantané. Retirée sous prefers-reduced-motion.
 */
@media (prefers-reduced-motion: no-preference) {
	.mdc-bottom-nav {
		transition: bottom 0.2s ease;
	}
}