/* ============================================================
 * Bottom-nav mobile fixe — design « Liquid Glass » (≤1024px)
 * Variante dev2 (Amélie Lash) : charcoal + accent orange signature.
 *
 * Langage visuel verre liquide (Apple 2025+ / tendance 2026) : surface
 * très translucide, backdrop-blur fort + saturate, reflets crème en haut,
 * capsule glass orange derrière l'item actif, sphère cuivrée pour le CTA.
 *
 * DA respectée via variables thème :
 *   - --color-white (#FFFFFF) → glass blanc translucide
 *   - --color-gold (#F76309) → reflets orange spéculaires + capsule active
 *   - --color-accent (#BC4F00) → item actif / CTA
 *
 * Aucun changement de markup HTML (selectors identiques à la version
 * stable). Rollback : `mv bottom-nav.css.bak bottom-nav.css`.
 * ============================================================ */

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

@media (max-width: 1024px) {

	/* ---------- BARRE (capsule de verre flottante) ---------- */
	.sfc-bottomnav {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 150;
		display: flex;
		align-items: center;
		padding: 6px 6px;
		isolation: isolate;
		border-radius: 28px;

		/* Couche 1 — verre blanc translucide, dégradé vertical */
		background:
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--color-white) 62%, transparent) 0%,
				color-mix(in srgb, var(--color-white) 78%, transparent) 100%
			);

		/* Backdrop frosted */
		-webkit-backdrop-filter: blur(26px) saturate(180%);
		        backdrop-filter: blur(26px) saturate(180%);

		/* Bord verre discret */
		border: 1px solid rgba(34, 34, 34, 0.12);

		/* Profondeur 3D — reflet haut, ombre interne basse, drop shadow */
		box-shadow:
			inset 0 1px 0 0 color-mix(in srgb, var(--color-white) 60%, transparent),
			inset 0 -1px 0 0 rgba(34, 34, 34, 0.12),
			0 14px 36px -10px rgba(0, 0, 0, 0.25),
			0 2px 10px rgba(0, 0, 0, 0.12);

		transition: transform 320ms cubic-bezier(.4, 0, .2, 1),
		            opacity 240ms ease;
	}

	/* Couche 2 — voile lumineux haut (specular highlight cream) */
	.sfc-bottomnav::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--color-cream) 14%, transparent) 0%,
			color-mix(in srgb, var(--color-cream) 4%,  transparent) 28%,
			transparent 60%
		);
		pointer-events: none;
		z-index: 0;
	}

	/* Couche 3 — filet orange spéculaire en haut (catch light signature) */
	.sfc-bottomnav::after {
		content: "";
		position: absolute;
		top: 0;
		left: 14%;
		right: 14%;
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent 0%,
			color-mix(in srgb, var(--color-gold) 55%, transparent) 50%,
			transparent 100%
		);
		pointer-events: none;
		z-index: 0;
	}

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

	.sfc-bottomnav__icon {
		width: 22px;
		height: 22px;
		stroke-width: 1.5;
		transition: transform 240ms cubic-bezier(.34, 1.56, .64, 1);
	}

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

	/* Capsule « verre liquide orange » derrière l'item actif (remplace l'ancien point) */
	.sfc-bottomnav__item::before {
		content: "";
		position: absolute;
		inset: 4px 6px;
		border-radius: 18px;
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--color-gold) 30%, transparent) 0%,
			color-mix(in srgb, var(--color-gold) 12%, transparent) 100%
		);
		border: 1px solid color-mix(in srgb, var(--color-gold) 42%, transparent);
		box-shadow:
			inset 0 1px 0 color-mix(in srgb, var(--color-cream) 30%, transparent),
			inset 0 -1px 0 color-mix(in srgb, var(--color-gold) 18%, transparent),
			0 4px 14px -4px color-mix(in srgb, var(--color-gold) 48%, transparent);
		-webkit-backdrop-filter: blur(8px);
		        backdrop-filter: blur(8px);
		opacity: 0;
		transform: scale(.78);
		transition:
			opacity 280ms cubic-bezier(.34, 1.56, .64, 1),
			transform 320ms cubic-bezier(.34, 1.56, .64, 1);
		z-index: -1;
		pointer-events: none;
	}

	.sfc-bottomnav__item.is-active {
		color: var(--color-accent);
	}
	.sfc-bottomnav__item.is-active::before {
		opacity: 1;
		transform: scale(1);
	}
	.sfc-bottomnav__item.is-active .sfc-bottomnav__icon {
		color: var(--color-accent);
		transform: translateY(-1px);
	}

	.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: linear-gradient(180deg,
			color-mix(in srgb, var(--color-accent) 100%, white 8%),
			var(--color-accent));
		color: var(--color-white);
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		box-shadow:
			0 0 0 1.5px color-mix(in srgb, var(--color-white) 70%, transparent),
			0 2px 6px -1px color-mix(in srgb, var(--color-gold) 60%, transparent);
	}

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

	/* ---------- CTA CENTRAL (sphère cuivrée surélevée) ---------- */
	.sfc-bottomnav__item--cta { color: var(--color-gold); }

	/* Pas de capsule active derrière le CTA — il a son propre traitement. */
	.sfc-bottomnav__item--cta::before { display: none; }

	.sfc-bottomnav__item--cta .sfc-bottomnav__iconwrap {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
		margin-top: -22px; /* surélève au-dessus de la barre */
		margin-bottom: 2px;
		border-radius: 18px;
		position: relative;
		isolation: isolate;

		/* Sphère orange : gradient radial cream → orange → orange profond */
		background:
			radial-gradient(
				120% 90% at 50% 0%,
				color-mix(in srgb, var(--color-cream) 38%, var(--color-gold)) 0%,
				var(--color-gold) 42%,
				var(--color-accent) 100%
			);
		color: var(--color-white);

		/* Halo de séparation avec la barre + ombre cuivrée chaude */
		border: 2px solid color-mix(in srgb, var(--color-white) 92%, transparent);
		box-shadow:
			inset 0 1px 0 color-mix(in srgb, var(--color-cream) 60%, transparent),
			inset 0 -2px 4px rgba(34, 34, 34, 0.25),
			0 10px 22px -6px color-mix(in srgb, var(--color-gold) 70%, transparent),
			0 4px 10px -2px rgba(0, 0, 0, 0.35);

		transition:
			transform 200ms cubic-bezier(.34, 1.56, .64, 1),
			box-shadow 240ms ease;
	}

	/* Reflet spéculaire ovale sur la sphère cuivrée */
	.sfc-bottomnav__item--cta .sfc-bottomnav__iconwrap::before {
		content: "";
		position: absolute;
		top: 4px;
		left: 8px;
		right: 8px;
		height: 14px;
		border-radius: 50% / 60%;
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--color-cream) 55%, transparent) 0%,
			transparent 100%);
		pointer-events: none;
		z-index: 1;
	}

	.sfc-bottomnav__item--cta .sfc-bottomnav__icon {
		width: 24px;
		height: 24px;
		position: relative;
		z-index: 2;
	}
	.sfc-bottomnav__item--cta .sfc-bottomnav__label { font-weight: 600; }
	.sfc-bottomnav__item--cta.is-active { color: var(--color-gold); }
	.sfc-bottomnav__item--cta:active .sfc-bottomnav__iconwrap {
		transform: scale(.92);
		box-shadow:
			inset 0 1px 0 color-mix(in srgb, var(--color-cream) 40%, transparent),
			0 4px 10px -3px color-mix(in srgb, var(--color-gold) 55%, transparent);
	}

	/* ---------- ETATS BARRE ---------- */
	body.sfc-drawer-open .sfc-bottomnav {
		transform: translateY(160%);
		opacity: 0;
	}

	body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

	.cky-btn-revisit-wrapper.cky-revisit-bottom-left,
	.grecaptcha-badge {
		display: none !important;
	}
}

/* ---------- FALLBACK : navigateurs sans backdrop-filter ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	@media (max-width: 1024px) {
		.sfc-bottomnav {
			background: color-mix(in srgb, var(--color-white) 94%, transparent);
		}
	}
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.sfc-bottomnav,
	.sfc-bottomnav__item,
	.sfc-bottomnav__icon,
	.sfc-bottomnav__item::before,
	.sfc-bottomnav__item--cta .sfc-bottomnav__iconwrap {
		transition: none;
		animation: none;
	}
}