@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

	/*Mise en Colone des images */
	.gallery-container {
		width: min(1000px, 100%);
		margin: 0 auto;
		columns: 4 300px;
	}


	/*Propriétes images*/
	.image-container {
		width: 300px;
		margin: 5px 0 5px 0;
		border-radius: 8px;
		box-shadow: 6px 5px 1px 0px rgba(83, 10, 96, 0.75);
		animation: ImagesDemarage 2s ease 0s 1 normal forwards;
	}

	@keyframes ImagesDemarage {
		0% {
			transform: scale(0.5);
		}

		100% {
			transform: scale(1);
		}
	}

	/*Survole*/
	.image-container:hover {
		box-shadow: 0 0 20px #580601;

	}

	/* Carrousel d'images - Styles principaux */

	/* Images originales */
	img.imgGalerie {
		transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
		-webkit-tap-highlight-color: transparent;
		cursor: pointer;
	}

	img.imgGaleriehover {
		transform: scale(1.02);
		box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
		filter: brightness(1.05);
	}

	/* Modal */
	#imageModal {
		display: none;
		position: fixed;
		z-index: 9999;
		inset: 0;
		background: rgba(0, 0, 0, 0);
		cursor: pointer;
		transition: background 0.4s ease, backdrop-filter 0.4s ease;
		backdrop-filter: blur(0px);
	}

	#imageModal.is-open {
		background: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.95) 100%);
		backdrop-filter: blur(8px);
	}

	/* Image dans la modal */
	#modalImage {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0) rotate(-5deg);
		max-width: 85%;
		max-height: 85%;
		border-radius: 15px;
		box-shadow:
			0 25px 50px rgba(0, 0, 0, 0.8),
			0 0 0 1px rgba(255, 255, 255, 0.1),
			0 -5px 30px rgba(71, 216, 144, 0.753),
			0 5px 30px rgba(255, 69, 0, 0.4),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
		transition: transform 0.4s ease-out, opacity 0.3s ease, filter 0.3s ease;
		filter: brightness(1) contrast(1);
		cursor: default;
		user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
	}

	#modalImage.is-open {
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}

	#modalImage.is-loading {
		filter: brightness(0.8) contrast(1.1) blur(1px);
	}

	/* Boutons de navigation */
	.prev-btn,
	.next-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(71, 216, 144, 0.753);
		border: none;
		color: white;
		font-size: 24px;
		font-weight: bold;
		padding: 12px 16px;
		border-radius: 50%;
		cursor: pointer;
		z-index: 10001;
		transition: background 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
		opacity: 0.3;
		-webkit-tap-highlight-color: transparent;
		user-select: none;
	}

	.prev-btn {
		left: 20px;
	}

	.next-btn {
		right: 20px;
	}

	.prev-btn:hover,
	.next-btn:hover,
	.prev-btn:active,
	.next-btn:active {
		background: rgba(36, 199, 240, 0.664);
		opacity: 1;
		transform: translateY(-50%) scale(1.05);
	}

	/* Compteur d'images */
	#imageCounter {
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 10px 20px;
		border-radius: 25px;
		font-family: Arial, sans-serif;
		font-size: 14px;
		z-index: 10001;
		border: 2px solid rgba(255, 140, 0, 0.5);
		user-select: none;
	}

	/* Responsive */
	@media (max-width: 768px) {
		#modalImage {
			max-width: 95%;
			max-height: 95%;
		}

		.prev-btn,
		.next-btn {
			display: none;
		}

		#imageCounter {
			bottom: 20px;
			font-size: 12px;
		}

		#imageIndicators {
			bottom: 60px;
		}
	}