/* ============================================================
 * 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: 22px;
		isolation: isolate;
		/* Liquid glass : fond primary 60% pour laisser passer la matière du fond,
		   blur fort + saturate pour effet iOS lumineux. */
		background:
			linear-gradient(180deg,
				color-mix(in srgb, var(--color-primary) 70%, transparent) 0%,
				color-mix(in srgb, var(--color-primary) 56%, transparent) 100%);
		-webkit-backdrop-filter: blur(22px) saturate(1.6);
		        backdrop-filter: blur(22px) saturate(1.6);
		border: 1px solid color-mix(in srgb, var(--color-cream) 32%, transparent);
		box-shadow:
			/* Reflet intérieur lumineux (effet « verre poli ») */
			0 1px 0 0 color-mix(in srgb, var(--color-cream) 28%, transparent) inset,
			/* Léger ombre interne base pour densifier */
			0 -1px 0 0 color-mix(in srgb, #000 25%, transparent) inset,
			/* Ombre portée signature */
			0 14px 36px -10px rgba(0, 0, 0, 0.5);
		transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
	}

	/* Liseré doré subtil au sommet — signature MH (effet « lumière qui passe »). */
	.sfc-bottomnav::before {
		content: "";
		position: absolute;
		top: 0;
		left: 20%;
		right: 20%;
		height: 1px;
		background: linear-gradient(90deg,
			transparent 0%,
			color-mix(in srgb, var(--color-cream) 70%, transparent) 50%,
			transparent 100%);
		border-radius: 1px;
		pointer-events: none;
	}

	/* Glow rose interne très diffus (effet « lumière dans le verre »). */
	.sfc-bottomnav::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		background: radial-gradient(140% 80% at 50% 110%,
			color-mix(in srgb, var(--color-cream) 16%, transparent) 0%,
			transparent 65%);
		pointer-events: none;
	}

	/* Scroll-down : masque la bottom-nav (driven by body.sfc-scroll-down). */
	body.sfc-scroll-down .sfc-bottomnav {
		transform: translateY(160%);
	}

	.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: color-mix(in srgb, var(--color-cream) 76%, transparent); /* inactif atténué */
		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; }

	/* Pastille de surbrillance de l'onglet actif (cream translucide) — remplace
	 * l'ancien point doré : plus lisible, sans le doré qui jurait sur le rose. */
	.sfc-bottomnav__item::before {
		content: "";
		position: absolute;
		inset: 4px 6px;
		border-radius: 14px;
		background: color-mix(in srgb, var(--color-cream) 18%, transparent);
		opacity: 0;
		transform: scale(.86);
		transition: opacity 200ms ease, transform 240ms cubic-bezier(.34, 1.56, .64, 1);
		z-index: -1;
	}

	.sfc-bottomnav__item.is-active { color: var(--color-white); }
	.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-white);
		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é, carré cream (plus de doré sur le rose) ---- */
	.sfc-bottomnav__item--cta { color: var(--color-white); }
	.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-cream);
		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-primary-deep, #a8525a) 55%, 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-white); }
	/* le bouton plein n'a pas de pastille de fond */
	.sfc-bottomnav__item--cta::before { display: none; } /* pas de pastille 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;
	}
}