/* ===================================
   PORTFOLIO SECTION - Galerie de photos
   =================================== */

.portfolio {
	background: #1f2937;
	padding: var(--spacing-24) 0;
}

/* Filtres de catégories */
.portfolio-filters {
	display: flex;
	justify-content: center;
	gap: var(--spacing-4);
	margin-bottom: var(--spacing-12);
	flex-wrap: wrap;
}

.filter-btn {
	padding: var(--spacing-2) var(--spacing-6);
	border-radius: var(--radius-full);
	font-weight: 500;
	transition: var(--transition-normal);
	border: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.filter-btn:not(.active) {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-text-light);
}

.filter-btn:not(.active):hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--color-text-primary);
}

.filter-btn.active {
	background: var(--gradient-primary);
	color: var(--color-text-primary);
}

.filter-btn.active::before {
	content: '';
	position: absolute;
	inset: -2px;
	background: var(--gradient-primary);
	border-radius: inherit;
	blur: 8px;
	opacity: 0.3;
	z-index: -1;
}

/* Grille du portfolio */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: var(--spacing-6);
	margin-bottom: var(--spacing-12);
}

/* Élément du portfolio */
.portfolio-item {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	cursor: pointer;
	transition: var(--transition-normal);
	opacity: 1;
	transform: scale(1);
}

.portfolio-item.hiding {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}

.portfolio-item.showing {
	animation: portfolioShow 0.6s ease-out;
}

@keyframes portfolioShow {
	from {
		opacity: 0;
		transform: scale(0.8) translateY(2rem);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.portfolio-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-2xl);
}

/* Image du portfolio */
.portfolio-image {
	position: relative;
	height: 25rem;
	overflow: hidden;
}

.portfolio-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.portfolio-item:hover .portfolio-image img {
	transform: scale(1.1);
}

/* Overlay du portfolio */
.portfolio-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.8) 0%,
		transparent 50%,
		transparent 100%
	);
	opacity: 0;
	transition: opacity var(--transition-slow);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--spacing-6);
}

.portfolio-item:hover .portfolio-overlay {
	opacity: 1;
}

/* Contenu de l'overlay */
.portfolio-content {
	transform: translateY(2rem);
	transition: transform var(--transition-slow);
}

.portfolio-item:hover .portfolio-content {
	transform: translateY(0);
}

.portfolio-title {
	font-size: var(--font-size-2xl);
	font-weight: 300;
	margin-bottom: var(--spacing-2);
	color: var(--color-text-primary);
}

/* Métadonnées */
.portfolio-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.portfolio-location {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

.portfolio-location .icon {
	width: 1rem;
	height: 1rem;
}

/* Actions du portfolio */
.portfolio-actions {
	display: flex;
	gap: var(--spacing-4);
	align-items: center;
}

.portfolio-action {
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	transition: var(--transition-normal);
	background: none;
	border: none;
	cursor: pointer;
}

.portfolio-action:hover {
	color: var(--color-text-primary);
	transform: scale(1.05);
}

.portfolio-action .icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* Bouton "Voir plus" */
.portfolio-more {
	text-align: center;
}

.portfolio-more .btn {
	padding: var(--spacing-4) var(--spacing-8);
	font-size: var(--font-size-lg);
}

/* Responsive Design */
@media (max-width: 1024px) {
	.portfolio-grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: var(--spacing-4);
	}

	.portfolio-image {
		height: 20rem;
	}
}

@media (max-width: 768px) {
	.portfolio {
		padding: var(--spacing-16) 0;
	}

	.portfolio-filters {
		gap: var(--spacing-2);
		margin-bottom: var(--spacing-8);
	}

	.filter-btn {
		padding: var(--spacing-2) var(--spacing-4);
		font-size: var(--font-size-sm);
	}

	.portfolio-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-4);
	}

	.portfolio-image {
		height: 18rem;
	}

	.portfolio-title {
		font-size: var(--font-size-xl);
	}

	.portfolio-overlay {
		padding: var(--spacing-4);
	}

	/* Sur mobile, on affiche toujours l'overlay */
	.portfolio-overlay {
		opacity: 1;
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.9) 0%,
			rgba(0, 0, 0, 0.3) 50%,
			transparent 100%
		);
	}

	.portfolio-content {
		transform: translateY(0);
	}
}

/* Lightbox pour les images (optionnel) */
.portfolio-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.95);
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition-normal);
}

.portfolio-lightbox.active {
	opacity: 1;
	visibility: visible;
}

.portfolio-lightbox-content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
}

.portfolio-lightbox-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.portfolio-lightbox-close {
	position: absolute;
	top: -3rem;
	right: 0;
	width: 2.5rem;
	height: 2.5rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-primary);
	cursor: pointer;
	transition: var(--transition-normal);
	border: none;
}

.portfolio-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Animation de masquage d'éléments lors du filtrage */
.portfolio-item[data-category]:not([data-category*='all']) {
	transition: var(--transition-normal);
}

/* États de chargement */
.portfolio-loading .portfolio-item {
	pointer-events: none;
	opacity: 0.6;
}

.portfolio-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: 2rem;
	margin: -1rem 0 0 -1rem;
	border: 2px solid transparent;
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

/* Effet de parallax pour les images */
@media (prefers-reduced-motion: no-preference) {
	.portfolio-image {
		overflow: hidden;
	}

	.portfolio-image img {
		transform: translateY(-5%);
		transition: transform var(--transition-slow);
	}

	.portfolio-item:hover .portfolio-image img {
		transform: translateY(0) scale(1.05);
	}
}

/* Animation d'entrée pour les éléments du portfolio */
.portfolio-item:not(.animated) {
	opacity: 0;
	transform: translateY(1.5rem);
}

.portfolio-item.animated {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Exception pour l'affichage initial - tous les éléments visibles par défaut */
.portfolio-item[data-category] {
	opacity: 1;
	transform: translateY(0);
}

.portfolio-item[data-category]:not(.animated) {
	opacity: 0;
	transform: translateY(1.5rem);
}

/* Transitions fluides pour le filtrage - simplifiées */
.portfolio-item {
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* États pendant le filtrage */
.portfolio-item.filtering-out {
	opacity: 0;
	transform: scale(0.9);
}

.portfolio-item.filtering-in {
	opacity: 1;
	transform: scale(1);
}