/**
 * MOBILE MENU FIX - NiyaPress
 * Assure que le menu hamburger fonctionne correctement sur mobile
 */

/* ══════════════════════════════════════════════
   1. BOUTON HAMBURGER - Visible sur mobile
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {
	.menu-toggle {
		display: inline-flex !important;
		flex-direction: column !important;
		gap: 4px !important;
		width: 36px !important;
		height: 36px !important;
		padding: 0 !important;
		background: rgba(255,255,255,0.1) !important;
		border: 1px solid rgba(255,255,255,0.2) !important;
		border-radius: 6px !important;
		cursor: pointer !important;
		align-items: center !important;
		justify-content: center !important;
		z-index: 9999 !important;
		position: relative !important;
	}
	
	.menu-toggle-bar {
		width: 18px !important;
		height: 2px !important;
		background: #fff !important;
		border-radius: 1px !important;
		transition: transform 0.3s ease, opacity 0.3s ease !important;
		display: block !important;
	}
	
	/* Animation du hamburger quand ouvert */
	.menu-toggle.is-active .menu-toggle-bar:nth-child(1) {
		transform: translateY(6px) rotate(45deg) !important;
	}
	
	.menu-toggle.is-active .menu-toggle-bar:nth-child(2) {
		opacity: 0 !important;
	}
	
	.menu-toggle.is-active .menu-toggle-bar:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg) !important;
	}
}

/* ══════════════════════════════════════════════
   2. MENU MOBILE - Dropdown
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {
	.header-nav-bar {
		display: none !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		background: #001D83 !important;
		border-top: 2px solid #FAA31B !important;
		box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
		z-index: 8999 !important;
		max-height: calc(100vh - 100px) !important;
		overflow-y: auto !important;
	}
	
	.header-nav-bar.is-open {
		display: block !important;
	}
	
	.header-nav-inner {
		display: flex !important;
		flex-direction: column !important;
		padding: 16px !important;
		gap: 16px !important;
	}
	
	/* Menu principal */
	.main-navigation {
		width: 100% !important;
		overflow-x: visible !important;
		overflow-y: visible !important;
	}
	
	.primary-menu {
		display: flex !important;
		flex-direction: column !important;
		gap: 4px !important;
		width: 100% !important;
	}
	
	.primary-menu li {
		width: 100% !important;
	}
	
	.primary-menu a {
		display: block !important;
		width: 100% !important;
		height: 44px !important;
		padding: 0 16px !important;
		text-align: right !important;
		justify-content: flex-start !important;
		border-radius: 6px !important;
		font-size: 0.9375rem !important;
		font-weight: 700 !important;
		color: rgba(255,255,255,0.9) !important;
		transition: background 0.2s ease !important;
	}
	
	.primary-menu a:hover,
	.primary-menu .current-menu-item > a {
		background: rgba(255,255,255,0.15) !important;
		color: #FAA31B !important;
	}
	
	/* Search dans le menu mobile */
	.header-nav-aside {
		width: 100% !important;
		flex-direction: column !important;
		gap: 12px !important;
	}
	
	.header-search {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.header-search__field {
		width: 100% !important;
		height: 44px !important;
		font-size: 16px !important;
	}
	
	/* Social icons dans le menu mobile */
	.header-social {
		display: block !important;
	}
	
	.header-social .social-icons {
		display: flex !important;
		justify-content: center !important;
		gap: 8px !important;
	}
}

/* ══════════════════════════════════════════════
   3. OVERLAY quand menu ouvert
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {
	body.header-nav-open {
		overflow: hidden !important;
	}
	
	body.header-nav-open::before {
		content: '' !important;
		position: fixed !important;
		inset: 0 !important;
		background: rgba(0,0,0,0.5) !important;
		z-index: 8998 !important;
		opacity: 1 !important;
		animation: fadeInOverlay 0.3s ease !important;
	}
}

@keyframes fadeInOverlay {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ══════════════════════════════════════════════
   4. DESKTOP - Menu hamburger caché
   ══════════════════════════════════════════════ */

@media (min-width: 769px) {
	.menu-toggle {
		display: none !important;
	}
	
	.header-nav-bar {
		display: block !important;
		position: static !important;
		background: transparent !important;
		border-top: none !important;
		box-shadow: none !important;
	}
}

/* ══════════════════════════════════════════════
   5. Z-INDEX FIXES pour menu mobile
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {
	/* Header doit être au-dessus du contenu */
	.site-header,
	.site-header.site-header--magazine {
		position: relative !important;
		z-index: 9000 !important;
	}
	
	/* Menu toggle au-dessus de tout dans le header */
	.site-header .header-top-tools {
		position: relative !important;
		z-index: 10000 !important;
	}
	
	/* Menu dropdown sous le toggle mais au-dessus du contenu */
	.header-nav-bar.is-open {
		z-index: 8999 !important;
	}
	
	/* Contenu sous le menu */
	.site-content,
	.site-main {
		position: relative !important;
		z-index: 10 !important;
	}
}

/* ══════════════════════════════════════════════
   6. SMOOTH ANIMATIONS
   ══════════════════════════════════════════════ */

@media (max-width: 768px) {
	.header-nav-bar {
		transition: opacity 0.3s ease, transform 0.3s ease !important;
		transform-origin: top center !important;
	}
	
	.header-nav-bar:not(.is-open) {
		opacity: 0 !important;
		transform: translateY(-10px) !important;
		pointer-events: none !important;
	}
	
	.header-nav-bar.is-open {
		opacity: 1 !important;
		transform: translateY(0) !important;
		pointer-events: auto !important;
	}
}

/* ══════════════════════════════════════════════
   7. ACCESSIBILITY - Focus states
   ══════════════════════════════════════════════ */

.menu-toggle:focus-visible {
	outline: 3px solid #FAA31B !important;
	outline-offset: 2px !important;
}

.primary-menu a:focus-visible {
	outline: 2px solid #FAA31B !important;
	outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════
   8. RESPONSIVE - Très petits écrans
   ══════════════════════════════════════════════ */

@media (max-width: 480px) {
	.header-nav-bar {
		max-height: calc(100vh - 80px) !important;
	}
	
	.primary-menu a {
		font-size: 0.875rem !important;
		height: 40px !important;
	}
}