.wd-anims-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-image 0.5s ease-in-out;
	//z-index: -1;
}

.char {
  display: inline-block;
  opacity: 0;
  transform: translate(0%, 120%) scale(0.7, 2.3);
  transform-origin: 50% 0%;
  will-change: opacity, transform;
  white-space: pre;
}

.char.visible {
  animation: floatIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.char.hidden {
  animation: floatOut 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes floatIn {
  0% {
	opacity: 0;
	transform: translate(0%, 120%) scale(0.7, 2.3);
  }
  100% {
	opacity: 1;
	transform: translate(0%, 0%) scale(1, 1);
  }
}

@keyframes floatOut {
  0% {
	opacity: 1;
	transform: translate(0%, 0%) scale(1, 1);
  }
  100% {
	opacity: 0;
	transform: translate(0%, 120%) scale(0.7, 2.3);
  }
}

.word {
	display: inline-block;
	transition: opacity 0.3s ease, filter 0.3s ease;
	margin: 0 0.1em;
}


.wd-anims-slideLeft {
	opacity: 0;
	transform: translateX(-100px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.wd-anims-slideLeft.visible {
	opacity: 1;
	transform: translateX(0);
}

.wd-anims-slideRight {
	opacity: 0;
	transform: translateX(100px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.wd-anims-slideRight.visible {
	opacity: 1;
	transform: translateX(0);
}






.fullscreen-tabs-container {
	height: 66vh;
	display: flex;
	position: relative;
	.tab-item {
		flex: 1;
		position: relative;
		cursor: pointer;
		overflow: hidden;
		transition: flex 0.8s cubic-bezier(0.4, 0, 0.2, 1);
		background: transparent;
		border-right: 1px solid rgba(255, 255, 255, 0.2);
	}
	
	.tab-item:last-child {
		border-right: none;
	}
	
	.tab-item.active {
		flex: 4;
	}
	
	.tab-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		opacity: 1;
		transform: scale(1.05);
		filter: brightness(0.3);
		transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
	}
	
	.tab-item:not(.active):hover .tab-background {
		opacity: 1;
		transform: scale(1.15);
		filter: brightness(0.45);
	}
	
	.tab-item.active .tab-background {
		opacity: 1;
		transform: scale(1);
		filter: brightness(1);
	}
	
	.tab-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: transparent;
		transition: background 0.6s ease;
		pointer-events: none;
	}
	
	.tab-item.active .tab-overlay {
		background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
	}
	
	.tab-header {
		position: absolute;
		bottom: 0px;
		left: 50%;
		white-space: nowrap;
		z-index: 10;
		transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		max-width: 80vh;
	}
	
	.tab-item.active .tab-header {
		opacity: 0;
		pointer-events: none;
	}
	
	.tab-title {
		color: #fff;
		font-size: 1.2rem;
		font-weight: 300;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
		transition: color 0.3s ease;
		display: inline-block;
		padding: 10px 20px 10px 0px;
		transform: rotate(-90deg);
		transform-origin: 0%;
	}
	
	.tab-item:hover:not(.active) .tab-title {
		color: #fff;
		text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
	}
	
	.tab-content {
		position: absolute;
		top: 50%;
		left: 0px;
		transform: translateY(-50%);
		color: white;
		width: 100%;
		padding: 80px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 10;
	}
	
	.tab-item.active .tab-content {
		opacity: 1;
		pointer-events: auto;
		animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
	}
	
	@keyframes slideIn {
		from {
			opacity: 0;
			transform: translateY(-50%) translateX(-30px);
		}
		to {
			opacity: 1;
			transform: translateY(-50%) translateX(0);
		}
	}
	
	.content-title {
		//font-size: 3.5rem;
		font-weight: 300;
		margin-bottom: 30px;
		letter-spacing: 0.05em;
		line-height: 1.2;
		text-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	
	.content-divider {
		width: 60px;
		height: 2px;
		background: white;
		margin-bottom: 30px;
	}
	
	.content-description {
		font-size: 1.1rem;
		line-height: 1.8;
		color: rgba(255, 255, 255, 1);
		text-shadow: 0 1px 2px rgba(0,0,0,.3);
		margin-bottom: 40px;
	}
	
	
	
	.tab-number {
		position: absolute;
		top: 40px;
		left: 40px;
		color: white;
		font-size: 1rem;
		font-weight: 300;
		opacity: 0;
		transition: opacity 0.6s ease 0.4s;
		z-index: 10;
	}
	
	.tab-item.active .tab-number {
		opacity: 0.7;
	}
	
	.tab-plus-icon {
		position: absolute;
		top: 10%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 2.5rem;
		color: #fff;
		opacity: 0.5;
		transition: opacity 0.4s ease, transform 0.4s ease;
		z-index: 5;
		pointer-events: none;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	}
	
	.tab-item:not(.active):hover .tab-plus-icon {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.2);
	}
	
	.tab-item.active .tab-plus-icon {
		opacity: 0;
	}
	@media (max-width: 1140px) {
		.tab-content {
			padding: 40px;
		}
	}
	/* Responsive Mobile */
	@media (max-width: 768px) {
		& {
			flex-direction: column;
		}
	
		.tab-item {
			flex: 1;
			transition: flex 0.8s cubic-bezier(0.4, 0, 0.2, 1);
			border-right: none;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		}
	
		.tab-item:last-child {
			border-bottom: none;
		}
	
		.tab-item.active {
			flex: 4;
		}
	
		.tab-header {
			bottom: auto;
			left: 50%;
			top: 70%;
			transform: translate(-50%, -50%);
			white-space: normal;
			text-align: center;
		}
	
		.tab-title {
			font-size: 1rem;
			letter-spacing: 0.1em;
			transform: none;
		}
		.tab-plus-icon {
			font-size:1.8rem;
			top:30%;
		}
		.tab-content {
			//left: 20px;
			//right: 20px;
			top: 50%;
			transform: translateY(-50%);
			max-width: none;
			padding-right: 20px;
		}
	
		.content-title {
			font-size: 1.4rem;
			margin-bottom: 20px;
		}
	
		.content-divider {
			width: 40px;
			margin-bottom: 20px;
		}
	
		.content-description {
			font-size: 0.95rem;
			line-height: 1.6;
			margin-bottom: 30px;
		}
	
		.read-more-btn {
			padding: 12px 30px;
			font-size: 0.75rem;
		}
	
		.tab-number {
			top: 20px;
			left: 20px;
			font-size: 0.875rem;
		}
	}
	
	@media (max-width: 480px) {
		.content-title {
			font-size: 1.5rem;
		}
	
		.content-description {
			font-size: 0.875rem;
		}
	
		.tab-title {
			font-size: 1rem;
		}
	}
}



/* Section avec animation - hauteur augmentée pour l'effet de scroll */
.contact-section {
	position: relative;
	height: 300vh;
	background: #1a1a1a;
}

.contact-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.contact-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #1a1a1a;
	z-index: 1;
}

.contact-background img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
}

.contact-text {
	position: absolute;
	text-align: center;
	z-index: 20;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.contact-title {
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	color: #999;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.contact-heading {
	font-size: 4.5rem;
	font-weight: 300;
	color: #fff;
	margin-bottom: 3rem;
	line-height: 1.2;
}

.contact-button {
	display: inline-block;
	padding: 1.2rem 3rem;
	background: transparent;
	color: #fff;
	text-decoration: none;
	border: 2px solid #fff;
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: all 0.3s ease;
}

.contact-button:hover {
	background: #fff;
	color: #1a1a1a;
}

.svg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events: none;
}

.svg-mask {
	width: 100%;
	height: 100%;
}

.footer-section {
	height: 100vh;
	background: #0a0a0a;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-section h2 {
	font-size: 2rem;
	color: #fff;
	font-weight: 300;
}

@media (max-width: 768px) {
	.contact-heading {
		font-size: 2.5rem;
	}

	.contact-title {
		font-size: 1rem;
	}

	.contact-button {
		padding: 1rem 2rem;
		font-size: 0.9rem;
	}
}


	.scroll-section {
	position: relative;
	overflow: hidden;
	padding: 3rem 0;
}

.scroll-text {
	white-space: nowrap;

}