/* ============================================ */
/* BURGER MENU MODERNE & ÉLÉGANT               */
/* Design premium avec animations fluides      */
/* Navigation mobile 100% fonctionnelle        */
/* ============================================ */

/* ============================= */
/* BURGER BUTTON - DESIGN MODERNE */
/* ============================= */

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: rgba(255, 255, 255, 0.05) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 12px;
	cursor: pointer;
	transition: all var(--transition-base);
	position: relative;
	overflow: hidden;
	z-index: 1002; /* CRITIQUE : Plus haut que le menu */
}

/* Effet de hover */
.nav-toggle:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(125, 168, 245, 0.3) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 15px rgba(125, 168, 245, 0.2);
}

/* Effet de clic */
.nav-toggle:active {
	transform: translateY(0) scale(0.98);
}

/* Container pour les lignes */
.nav-toggle-lines {
	width: 24px;
	height: 18px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Lignes du burger - NOUVEAU STYLE */
.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #f3f4f6 !important;
	border-radius: 2px;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform-origin: center;
	position: relative;
}

/* Gradient subtil sur les lignes */
.nav-toggle span::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #a8c7ff, #ddd6fe);
	border-radius: inherit;
	opacity: 0;
	transition: opacity var(--transition-base);
}

.nav-toggle:hover span::before {
	opacity: 1;
}

/* Ligne du milieu plus courte pour style moderne */
.nav-toggle span:nth-child(2) {
	width: 20px;
	margin-left: auto;
}

/* ============================= */
/* ANIMATIONS DE TRANSFORMATION   */
/* ============================= */

/* État actif - Transformation en X */
.nav-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
	background: #a8c7ff !important;
}

.nav-toggle.active span:nth-child(2) {
	opacity: 0;
	transform: scale(0);
	width: 24px; /* Reset width pour animation */
}

.nav-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
	background: #a8c7ff !important;
}

/* Effet glow quand actif */
.nav-toggle.active {
	background: rgba(125, 168, 245, 0.1) !important;
	border-color: rgba(125, 168, 245, 0.4) !important;
	box-shadow: 0 0 20px rgba(125, 168, 245, 0.3);
}

/* ============================= */
/* ALTERNATIVE : BURGER DOTS      */
/* Style avec points au lieu de lignes */
/* ============================= */

.nav-toggle.dots {
	gap: 4px;
}

.nav-toggle.dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f3f4f6 !important;
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.nav-toggle.dots:hover span {
	background: linear-gradient(135deg, #a8c7ff, #ddd6fe) !important;
	transform: scale(1.2);
}

.nav-toggle.dots.active span:nth-child(1) {
	transform: rotate(45deg) translate(3px, 3px) scale(0.8);
}

.nav-toggle.dots.active span:nth-child(2) {
	opacity: 0;
	transform: scale(0);
}

.nav-toggle.dots.active span:nth-child(3) {
	transform: rotate(-45deg) translate(3px, -3px) scale(0.8);
}

/* ============================= */
/* ALTERNATIVE : BURGER PREMIUM   */
/* Avec icône personnalisée        */
/* ============================= */

.nav-toggle.premium {
	background: linear-gradient(
		135deg,
		rgba(125, 168, 245, 0.1),
		rgba(196, 181, 253, 0.1)
	) !important;
	border: 1px solid rgba(125, 168, 245, 0.2) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-toggle.premium::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		transparent,
		rgba(255, 255, 255, 0.1),
		transparent
	);
	border-radius: inherit;
	opacity: 0;
	transition: opacity var(--transition-base);
}

.nav-toggle.premium:hover::before {
	opacity: 1;
}

.nav-toggle.premium span {
	background: linear-gradient(90deg, #a8c7ff, #ddd6fe) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================= */
/* ALTERNATIVE : BURGER GLASS     */
/* Effet glassmorphism             */
/* ============================= */

.nav-toggle.glass {
	background: rgba(255, 255, 255, 0.03) !important;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.nav-toggle.glass span {
	background: rgba(255, 255, 255, 0.9) !important;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.nav-toggle.glass:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(125, 168, 245, 0.3) !important;
	box-shadow: 0 12px 40px rgba(125, 168, 245, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ============================= */
/* RESPONSIVE OPTIMISÉ            */
/* ============================= */

@media (max-width: 768px) {
	.nav-toggle {
		display: flex !important;
		width: 52px; /* Légèrement plus grand sur mobile */
		height: 52px;
		z-index: 1002; /* CRITIQUE : Assure la visibilité */
	}

	.nav-toggle span {
		width: 26px;
		height: 3px; /* Plus épais sur mobile */
	}

	.nav-toggle span:nth-child(2) {
		width: 22px;
	}
}

@media (max-width: 480px) {
	.nav-toggle {
		width: 56px; /* Encore plus grand sur petits écrans */
		height: 56px;
	}

	.nav-toggle span {
		width: 28px;
		height: 3px;
	}

	.nav-toggle span:nth-child(2) {
		width: 24px;
	}
}

/* ============================= */
/* INTEGRATION NAVBAR CORRIGÉE    */
/* ============================= */

/* Assure que le burger est visible sur mobile */
@media (max-width: 768px) {
	.navbar .nav-toggle {
		display: flex;
		z-index: 1002; /* CRITIQUE : Plus haut que le menu */
	}

	/* Menu mobile - Z-INDEX CORRIGÉ */
	.nav-menu {
		position: fixed;
		top: 0;
		right: -100%;
		width: 85%;
		max-width: 400px;
		height: 100vh;
		height: 100dvh; /* Support moderne */
		background: rgba(0, 0, 0, 0.95) !important;
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: var(--space-2xl);
		box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
		transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		z-index: 1001 !important; /* CRITIQUE : Sous le burger mais au-dessus du héro */
		border-left: 2px solid rgba(125, 168, 245, 0.3);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
	}

	.nav-menu.active {
		right: 0;
	}

	/* Style des liens dans le menu mobile */
	.nav-menu a {
		color: #f3f4f6 !important;
		font-size: var(--text-xl);
		padding: var(--space-lg) var(--space-xl);
		margin: var(--space-sm) 0;
		border-radius: var(--radius-lg);
		transition: all var(--transition-base);
		text-align: center;
		min-width: 200px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		display: block;
		text-decoration: none;
	}

	.nav-menu a:hover {
		background: rgba(125, 168, 245, 0.1) !important;
		border-color: rgba(125, 168, 245, 0.3) !important;
		color: #a8c7ff !important;
		transform: translateX(10px);
	}

	/* CTA dans menu mobile */
	.nav-menu .nav-cta {
		background: linear-gradient(135deg, #7da8f5, #c4b5fd) !important;
		color: #000000 !important;
		border: none !important;
		margin-top: var(--space-xl);
		font-weight: var(--font-semibold);
		box-shadow: 0 10px 30px rgba(125, 168, 245, 0.4);
	}

	.nav-menu .nav-cta:hover {
		transform: translateY(-2px) !important;
		box-shadow: 0 15px 40px rgba(125, 168, 245, 0.6);
		color: #000000 !important;
	}
}

/* ============================= */
/* OVERLAY POUR FERMER LE MENU    */
/* Z-INDEX CRITIQUE CORRIGÉ        */
/* ============================= */

.nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	/* z-index: 1000; CRITIQUE : Sous le menu et le burger mais au-dessus du héro */
}

.nav-overlay.active {
	opacity: 1;
	visibility: visible;
}

/* ============================= */
/* STYLES POUR DIFFÉRENTS THÈMES  */
/* ============================= */

/* Burger minimal */
.nav-toggle.minimal {
	background: none !important;
	border: none !important;
	border-radius: 8px;
}

.nav-toggle.minimal:hover {
	background: rgba(255, 255, 255, 0.05) !important;
}

/* Burger coloré */
.nav-toggle.colorful span {
	background: linear-gradient(90deg, #a8c7ff, #ddd6fe, #86efac) !important;
}

.nav-toggle.colorful.active span:nth-child(1),
.nav-toggle.colorful.active span:nth-child(3) {
	background: linear-gradient(90deg, #86efac, #a8c7ff) !important;
}

/* ============================= */
/* MICROANIMATIONS                */
/* ============================= */

@keyframes burger-bounce {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

.nav-toggle:active {
	animation: burger-bounce 0.3s ease;
}

/* Animation des lignes au hover */
.nav-toggle:hover span:nth-child(1) {
	transform: translateX(-2px);
}

.nav-toggle:hover span:nth-child(3) {
	transform: translateX(2px);
}

/* Reset animations quand actif */
.nav-toggle.active:hover span:nth-child(1),
.nav-toggle.active:hover span:nth-child(3) {
	transform: rotate(45deg) translate(6px, 6px);
}

.nav-toggle.active:hover span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* ============================= */
/* PRÉVENTION SCROLL BODY         */
/* Empêche le scroll quand menu ouvert */
/* ============================= */

body.menu-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

/* ============================= */
/* ACCESSIBILITÉ AMÉLIORÉE        */
/* ============================= */

.nav-toggle:focus-visible {
	outline: 2px solid #7da8f5;
	outline-offset: 2px;
}

.nav-menu a:focus-visible {
	outline: 2px solid #7da8f5;
	outline-offset: 2px;
	background: rgba(125, 168, 245, 0.1) !important;
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	.nav-toggle span,
	.nav-menu,
	.nav-overlay {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================= */
/* SUPPORT TACTILE OPTIMISÉ       */
/* ============================= */

@media (pointer: coarse) {
	.nav-toggle {
		min-width: 48px;
		min-height: 48px;
	}

	.nav-menu a {
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}