/* ifs/mobile-nav — navigation mobile façon e-Slovénie : tab bar fixe en bas
   + springboard plein écran. Valeurs en px : main.css impose html{62.5%}.
   Desktop : tout est masqué (le méga-menu classique reste la nav). */

.ifs-mobnav,
.ifs-mobnav-sheet {
	display: none;
}

/* Icônes Lucide au trait : un CSS hérité (main.css) force fill sur les svg. */
.ifs-mobnav svg,
.ifs-mobnav-sheet svg {
	fill: none;
}

@media (max-width: 781px) {

	/* ---------- Tab bar basse ---------- */
	.ifs-mobnav {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-top: 1px solid #e5e5e5;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		transition: transform 0.3s ease;
	}

	/* Masquée quand on défile vers le bas (JS), revient en remontant. */
	.ifs-mobnav.is-hidden { transform: translateY(100%); }

	.ifs-mobnav__tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 9px 2px 7px;
		font-size: 10px;
		font-weight: 600;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;
		color: #6b7280;
		background: none;
		border: none;
		cursor: pointer;
	}

	.ifs-mobnav__tab svg { width: 22px; height: 22px; flex: none; }

	.ifs-mobnav__tab.is-active { color: var(--wp--preset--color--primary, #3558A2); }

	/* ---------- Springboard plein écran ---------- */
	.ifs-mobnav-sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 1001;
		background: #fff;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.ifs-mobnav-sheet.is-open { opacity: 1; visibility: visible; }

	.ifs-mobnav-sheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px;
		border-bottom: 1px solid #ececec;
		flex: none;
	}

	.ifs-mobnav-sheet__head img { width: 90px; height: auto; display: block; }

	.ifs-mobnav-sheet__close {
		background: none;
		border: none;
		padding: 8px;
		margin-right: -8px;
		color: #111;
		cursor: pointer;
	}

	.ifs-mobnav-sheet__close svg { width: 24px; height: 24px; display: block; }

	.ifs-mobnav-sheet__body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 20px;
	}

	.ifs-mobnav__section-label {
		margin: 0 0 12px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #9ca3af;
	}

	.ifs-mobnav__section-label + .ifs-mobnav__tiles { margin-bottom: 24px; }

	.ifs-mobnav__tiles {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.ifs-mobnav__tile {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 80px;
		padding: 14px 8px;
		border: 1px solid #ececec;
		border-radius: 14px;
		background: var(--wp--preset--color--light_gray, #f6f6f6);
		text-align: center;
		text-decoration: none;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.2;
		color: #374151;
	}

	.ifs-mobnav__tile svg { width: 22px; height: 22px; }

	.ifs-mobnav__tile.is-active {
		color: var(--wp--preset--color--primary, #3558A2);
		border-color: rgba(53, 88, 162, 0.45);
		background: rgba(53, 88, 162, 0.08);
	}

	.ifs-mobnav-sheet__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid #ececec;
		flex: none;
	}

	.ifs-mobnav__lang {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--wp--preset--color--primary, #3558A2);
	}

	.ifs-mobnav__lang svg,
	.ifs-mobnav__search svg { width: 20px; height: 20px; }

	.ifs-mobnav__search { color: #374151; display: flex; padding: 6px; }
}

/* Aperçu éditeur. */
.ifs-mobnav--editor {
	padding: 12px;
	border: 1px dashed var(--wp--preset--color--dark_blue, #869ece);
	border-radius: 6px;
	background: var(--wp--preset--color--light_gray, #f6f6f6);
	color: var(--wp--preset--color--primary, #3558a2);
	text-align: center;
	font-size: 13px;
}