/* ============================================================
 * Bottom-nav mobile fixe — barre flottante navy (≤1024px)
 * Composant global (enqueue via $modules). Respecte la DA :
 * navy --color-primary, accent --color-gold, texte --color-cream.
 * ============================================================ */

.sfc-bottomnav { display: none; } /* desktop : masquée */

@media (max-width: 1024px) {

	.sfc-bottomnav {
		display: flex; /* s'adapte à 4 ou 5 items (avec bouton central (CTA)) */
		align-items: center;
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 150; /* > header (100/110), < overlay (199) & drawers (200) */
		padding: 6px 4px;
		border-radius: 20px;
		background: color-mix(in srgb, var(--color-primary) 92%, transparent);
		-webkit-backdrop-filter: blur(12px);
		        backdrop-filter: blur(12px);
		border: 1px solid color-mix(in srgb, var(--color-gold) 35%, transparent);
		box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.45);
		transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
	}

	.sfc-bottomnav__item {
		position: relative;
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 56px;
		padding: 8px 4px;
		color: var(--color-cream);
		text-decoration: none;
		font-family: var(--font-body);
		font-size: 10.5px;
		font-weight: 500;
		letter-spacing: 0.02em;
		text-align: center;
		transition: color 200ms ease, transform 120ms ease;
	}

	.sfc-bottomnav__icon {
		width: 22px;
		height: 22px;
		stroke-width: 1.5;
	}

	.sfc-bottomnav__label { line-height: 1; }

	/* Point indicateur d'état actif (au-dessus de l'item) */
	.sfc-bottomnav__item::before {
		content: "";
		position: absolute;
		top: 2px;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--color-gold);
		opacity: 0;
		transform: scale(.4);
		transition: opacity 200ms ease, transform 200ms ease;
	}

	.sfc-bottomnav__item.is-active { color: var(--color-gold); }
	.sfc-bottomnav__item.is-active::before { opacity: 1; transform: scale(1); }
	.sfc-bottomnav__item:active { transform: scale(.94); }

	/* Badge panier */
	.sfc-bottomnav__iconwrap {
		position: relative;
		display: inline-flex;
	}

	.sfc-bottomnav__badge {
		position: absolute;
		top: -6px;
		right: -10px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 100px;
		background: var(--color-gold);
		color: var(--color-primary);
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
	}

	.sfc-bottomnav__badge.is-empty { display: none; }

	/* ---- Bouton central (CTA) — surélevé, accent or (couleurs via variables DA) ---- */
	.sfc-bottomnav__item--cta { color: var(--color-gold); }
	.sfc-bottomnav__item--cta .sfc-bottomnav__iconwrap {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin-top: -20px; /* surélève au-dessus de la barre */
		margin-bottom: 1px;
		border-radius: 16px;
		background: var(--color-gold);
		color: var(--color-primary);
		border: 3px solid var(--color-primary); /* halo de séparation avec la barre */
		box-shadow: 0 8px 18px -5px color-mix(in srgb, var(--color-gold) 60%, transparent);
		transition: transform 160ms ease, box-shadow 200ms ease;
	}
	.sfc-bottomnav__item--cta .sfc-bottomnav__icon { width: 24px; height: 24px; }
	.sfc-bottomnav__item--cta .sfc-bottomnav__label { font-weight: 600; }
	.sfc-bottomnav__item--cta.is-active { color: var(--color-gold); }
	.sfc-bottomnav__item--cta::before { display: none; } /* pas de point indicateur sur le bouton plein */
	.sfc-bottomnav__item--cta:active .sfc-bottomnav__iconwrap { transform: scale(.92); }

	/* Masquée quand un drawer / mini-cart plein écran est ouvert */
	body.sfc-drawer-open .sfc-bottomnav { transform: translateY(160%); }

	/* Espace bas : le contenu et le footer ne passent pas sous la barre */
	body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

	/* Masquage des éléments fixes tiers en collision avec la navbar :
	   - bouton « revisit » CookieYes (bottom-left)
	   - badge reCAPTCHA v3 (bottom-right)
	   NB : garder la mention reCAPTCHA texte visible près des formulaires. */
	.cky-btn-revisit-wrapper.cky-revisit-bottom-left,
	.grecaptcha-badge {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sfc-bottomnav,
	.sfc-bottomnav__item,
	.sfc-bottomnav__item::before {
		transition: none;
	}
}