/* style.css - Thème Astro-Futuriste / Spiritualité 2.0 */

/* Import des polices Google */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Inter:wght@300;400;500;600;700&family=Lato:wght@300;400;700&display=swap');

/* Reset et styles de base */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Classes utilitaires Glassmorphism */
.glass-panel {
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(56, 189, 248, 0.2);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-card {
	background: rgba(30, 41, 59, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(167, 139, 250, 0.2);
	border-radius: 1rem;
	transition: all 0.3s ease;
}

.glass-card:hover {
	border-color: rgba(139, 92, 246, 0.4);
	box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

.neon-border {
	position: relative;
	border: 2px solid transparent;
	border-radius: 1rem;
	background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)) padding-box,
		linear-gradient(45deg, #8b5cf6, #06b6d4, #8b5cf6) border-box;
}

.neon-text {
	text-shadow:
		0 0 10px rgba(139, 92, 246, 0.7),
		0 0 20px rgba(139, 92, 246, 0.5),
		0 0 30px rgba(139, 92, 246, 0.3);
}

/* Animations */
@keyframes float {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}
}

@keyframes pulse-glow {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
	}
}

@keyframes slide-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.float-animation {
	animation: float 5s ease-in-out infinite;
}

.pulse-glow {
	animation: pulse-glow 2s ease-in-out infinite;
}

.slide-up {
	animation: slide-up 0.8s ease-out forwards;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(45deg, #8b5cf6, #06b6d4);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(45deg, #7c3aed, #0891b2);
}

/* Styles pour les éléments dépliants (accordéons) */
details {
	margin: 1rem 0;
}

details summary {
	cursor: pointer;
	padding: 1rem;
	border-radius: 0.5rem;
	background: rgba(30, 41, 59, 0.5);
	border: 1px solid rgba(139, 92, 246, 0.3);
	transition: all 0.3s ease;
}

details summary:hover {
	background: rgba(30, 41, 59, 0.7);
	border-color: rgba(139, 92, 246, 0.5);
}

details[open] summary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

details .content {
	padding: 1.5rem;
	border: 1px solid rgba(139, 92, 246, 0.3);
	border-top: none;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	background: rgba(15, 23, 42, 0.3);
}

/* Galerie Masonry */
.masonry-grid {
	column-count: 1;
	column-gap: 1rem;
}

@media (min-width: 768px) {
	.masonry-grid {
		column-count: 2;
	}
}

@media (min-width: 1024px) {
	.masonry-grid {
		column-count: 3;
	}
}

.masonry-item {
	break-inside: avoid;
	margin-bottom: 1rem;
}

/* Table de prix */
.pricing-table {
	display: grid;
	gap: 1rem;
}

.pricing-card {
	position: relative;
	overflow: hidden;
}

.pricing-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #8b5cf6, #06b6d4);
}

/* Navigation sticky */
.sticky-nav {
	position: sticky;
	top: 6rem;
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
	.masonry-grid {
		column-count: 1;
	}

	.sticky-nav {
		position: static;
		max-height: none;
	}
}

/* Styles pour les images */
.vignette_img {
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	transition: transform 0.3s ease;
}

.vignette_img:hover {
	transform: scale(1.02);
}

/* Effets de particules Three.js */
#three-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

/* Chargement progressif */
.fade-in {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.fade-in.visible {
	opacity: 1;
}


/* Correction pour les problèmes de performance mobile */
@media (max-width: 768px) {

	/* Désactiver les effets lourds sur mobile */
	.glass-card,
	.glass-panel {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(15, 23, 42, 0.9);
		/* Version plus opaque sans blur */
	}

	/* Désactiver certaines animations sur mobile */
	.float-animation,
	.pulse-glow {
		animation: none;
	}

	/* Optimiser le rendu des transitions */
	.glass-card,
	.vignette_img {
		transition: none;
		transform: none;
	}

	/* Désactiver les effets au survol sur mobile */
	.glass-card:hover,
	.vignette_img:hover {
		border-color: rgba(139, 92, 246, 0.2);
		box-shadow: none;
		transform: none;
	}

	/* Optimiser les sections très longues */
	#reiki .glass-card {
		max-height: 80vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}
/* Styles pour le menu burger */
#mobile-menu {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#mobile-menu a {
	position: relative;
	overflow: hidden;
}

#mobile-menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #8b5cf6, #06b6d4);
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

#mobile-menu a:hover::after {
	width: 100px;
}

#burger-menu span {
	transition: all 0.3s ease;
}

/* Optimisation mobile pour le menu */
@media (max-width: 1024px) {

	/* Cacher la nav desktop sur tablette */
	.lg\\:flex {
		display: none !important;
	}
}

/* Animation d'entrée du menu mobile */
@keyframes slideInFromLeft {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}

#mobile-menu.translate-x-0 {
	animation: slideInFromLeft 0.3s ease-out;
}

/* Désactiver le backdrop-filter sur mobile pour performance */
@media (max-width: 1024px) {
	#mobile-menu {
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
}
/* Correction du défilement horizontal mobile */
@media (max-width: 768px) {

	/* Empêcher tout débordement horizontal */
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
		position: relative;
	}

	/* Conteneur principal avec largeur limitée */
	.container {
		max-width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Correction spécifique pour la page contact */
	.mobile-scroll-fix {
		max-width: 100vw;
		overflow-x: hidden;
	}

	/* Correction des cartes de service */
	.pricing-card {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* Correction des boutons dans les cartes */
	.pricing-card button {
		white-space: normal;
		word-break: break-word;
		width: 100%;
		max-width: 100%;
	}

	/* Correction des images dans la section presse */
	.neon-border {
		max-width: 100%;
		overflow: hidden;
	}

	.neon-border img {
		width: 100%;
		height: auto;
		max-width: 100%;
	}

	/* Correction des sections avec flex sur mobile */
	.flex.flex-col.lg\:flex-row {
		flex-direction: column;
		align-items: stretch;
	}

	/* Correction des marges et paddings excessifs */
	.glass-card {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Correction spécifique pour les listes à puces */
	.space-y-6.mobile-scroll-fix>div {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	/* Désactiver certains effets qui peuvent causer des problèmes */
	.hover\\:scale-105 {
		transform: none !important;
	}

	/* Forcer le contenu à rester dans les limites */
	* {
		max-width: 100vw;
		box-sizing: border-box;
	}

	/* Correction pour le conteneur grid */
	.grid.lg\\:grid-cols-2 {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* Correction spécifique pour très petits écrans */
@media (max-width: 480px) {

	/* Réduire encore plus les espacements */
	.glass-card {
		padding: 1.5rem !important;
	}

	/* Ajuster la taille du texte */
	.text-2xl,
	.text-3xl {
		font-size: 1.5rem !important;
	}

	/* Réduire les marges des éléments flex */
	.flex.items-center.gap-4 {
		gap: 1rem !important;
	}

	/* Correction pour les cartes de prix */
	.pricing-card .flex-col.lg\\:flex-row {
		gap: 1rem;
	}

	.pricing-card .lg\\:text-right {
		text-align: center !important;
		width: 100%;
		margin-top: 1rem;
	}

	/* Ajuster les images de la presse */
	.grid.md\\:grid-cols-2 {
		gap: 1rem !important;
	}
}

/* Correction du footer sur mobile */
@media (max-width: 768px) {
	footer .grid.md\\:grid-cols-3 {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center !important;
	}

	footer .md\\:text-left,
	footer .md\\:text-right {
		text-align: center !important;
	}
}
/* Badge Nouveau Service */
.badge-nouveau {
	position: absolute;
	top: -8px;
	right: -8px;
	background: linear-gradient(45deg, #10b981, #34d399);
	color: white;
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	z-index: 10;
	animation: pulse-glow 2s ease-in-out infinite;
}