/* ============================================================
 * Flou progressif en haut & bas de l'écran — GLOBAL (tout le site).
 * Deux fines bandes fixes qui floutent le contenu défilant sous elles ;
 * la bande du haut passe par-dessus le menu (effet « bord d'écran »).
 * z-index 130 : au-dessus du header (100), sous la bottom-nav (150) et les
 * overlays/drawers (199/200) — ceux-ci restent nets.
 * Aucun JS requis. Masque dégradé = flou concentré au bord, nul vers le centre.
 * ============================================================ */
.sfc-edge-blur {
	position: fixed;
	left: 0;
	right: 0;
	height: 56px;
	z-index: 130;
	pointer-events: none;
	-webkit-backdrop-filter: blur(7px);
	        backdrop-filter: blur(7px);
}
.sfc-edge-blur--top {
	top: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 14%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0%, #000 14%, transparent 100%);
}
.sfc-edge-blur--bottom {
	bottom: 0;
	-webkit-mask-image: linear-gradient(to top, #000 0%, #000 14%, transparent 100%);
	        mask-image: linear-gradient(to top, #000 0%, #000 14%, transparent 100%);
}
@media (max-width: 768px) {
	.sfc-edge-blur { height: 44px; }
}
/* Sans backdrop-filter : on masque les bandes (évite un voile gris inutile). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.sfc-edge-blur { display: none; }
}