/* MDW Portfolio — Text Reveal / Image Spread
   Chargé par mu-plugins/mdw-portfolio.php uniquement sur les pages
   dont les données Elementor contiennent .mdw-card-portfolio. */

.mdw-card-portfolio {
	--image-height: 77vh;
	--image-width: 62vh;
	--maximum-move: 80vh;
	--maximum-rotate: 6deg;
}

.mdw-gradient {
	--gradient-color-1: #302a27;
	--gradient-color-2: #965f39;
	--gradient-color-3: #e1a57d;
	--gradient-color-4: #afd3ec;
	--gradient-color-5: #445f88;
}

@media (max-width: 1024px) {
	.mdw-card-portfolio {
		--image-height: 77vh;
		--image-width: 62vh;
		--maximum-move: 65vh;
		--maximum-rotate: 6deg;
	}
}

@media (max-width: 767px) {
	.mdw-card-portfolio {
		--image-height: 450px;
		--image-width: 375px;
		--maximum-move: 350px;
		--maximum-rotate: 3deg;
	}
}

/* overflow-x: clip au lieu de hidden : ne cree pas de conteneur de defilement,
   donc ne casse ni position:sticky ni window.scrollTop(). */
body.mdw-portfolio-page {
	overflow-x: clip;
	background-color: #000;
}

/* ---------- Images ----------
   top / left viennent d'Elementor : les widgets portent _offset_x et _offset_y
   a 50%, ce qui produit `body:not(.rtl) ... { left: 50%; top: 50% }`. Ce
   selecteur a une specificite de 0,4,1 et ecrase toute regle posee ici sans
   !important — d'ou le reglage cote donnees plutot que cote feuille de style.

   Le recentrage de -50% passe par la propriete `translate` et non `transform` :
   le script pilote `transform`, les deux se composent au lieu de s'ecraser
   (translate est applique avant transform). */

.mdw-card-portfolio {
	position: relative;
}

.mdw-card-portfolio-image-left,
.mdw-card-portfolio-image-right {
	translate: -50% -50%;
	margin: 0;
	width: var(--image-width);
	height: var(--image-height);
	max-width: none;
	will-change: transform;
}

/* Elementor pose une transition `transform` de 0.4s sur le widget image.
   Elle entre en conflit avec l'animation pilotee au scroll : chaque frame
   relancerait un easing de 400 ms, d'ou un effet caoutchouteux et en retard.
   On la neutralise au-dessus de 767px ; en mobile la transition est voulue,
   c'est elle qui anime le passage a l'etat .passed. */
@media (min-width: 768px) {
	.mdw-card-portfolio-image-left,
	.mdw-card-portfolio-image-right {
		transition: none !important;
	}
}

.mdw-card-portfolio-image-left img,
.mdw-card-portfolio-image-right img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Deux des huit photos sont tres sombres (luminance moyenne 26 et 32 sur 255)
   et disparaissent sur le fond noir. Un liseré d'un pixel suffit a redonner
   le contour sans toucher aux photos claires. Retirer ce bloc si les visuels
   sont remplaces par des images plus lumineuses. */
.mdw-card-portfolio-image-left img,
.mdw-card-portfolio-image-right img {
	/* outline plutot que box-shadow inset : sur un element remplace comme
	   <img>, une ombre interne est peinte sous le contenu, donc invisible.
	   outline peint au-dessus et ne modifie pas la boite. */
	outline: 1px solid rgba(255, 255, 255, .14);
	outline-offset: -1px;
}

/* ---------- Texte en degrade ---------- */

.mdw-gradient.elementor-widget-heading .elementor-heading-title {
	background: var(--gradient-color-1, #fff);
	background: linear-gradient(90deg,
		var(--gradient-color-1, #fff) 0%,
		var(--gradient-color-2, #fff) 25%,
		var(--gradient-color-3, #fff) 50%,
		var(--gradient-color-4, #fff) 75%,
		var(--gradient-color-5, #fff) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Divider : le degrade porte sur le widget lui-meme, pour rester compatible
   avec le markup optimise d'Elementor (plus de .elementor-widget-container). */
.mdw-gradient.elementor-widget-divider,
.mdw-gradient.elementor-widget-divider > .elementor-widget-container {
	background: var(--gradient-color-1, #fff);
	background: linear-gradient(90deg,
		var(--gradient-color-1, #fff) 0%,
		var(--gradient-color-2, #fff) 25%,
		var(--gradient-color-3, #fff) 50%,
		var(--gradient-color-4, #fff) 75%,
		var(--gradient-color-5, #fff) 100%);
}

/* ---------- Bloc email ---------- */

.mdw-email-box {
	cursor: pointer;
}

.mdw-email-box .elementor-heading-title {
	transition: transform .2s ease-in-out;
	word-break: break-all;
	text-align: center;
}

.mdw-email-box:hover .elementor-heading-title {
	transform: scale(.98);
}

.mdw-email-copy {
	height: var(--min-height, 22px);
}

.mdw-email-copy .e-con-inner {
	height: auto;
}

.mdw-email-copy .elementor-widget {
	transition: transform .2s ease-in-out;
}

.mdw-email-copy.copy .elementor-widget {
	transform: translateY(-100%);
}

.mdw-email-copy.copied .elementor-widget {
	transform: translateY(-200%);
}

/* ---------- Animations d'entree ----------
   Scopees sur .mdw-portfolio-page pour ne pas ecraser les animations
   Elementor du reste du site. */

.mdw-portfolio-page .elementor-element.animated.fadeInUp {
	animation: mdwFadeInUp 1s ease-in-out forwards !important;
}

.mdw-portfolio-page .elementor-element.animated.fadeIn {
	animation: fadeIn 1.3s ease-in-out .5s forwards !important;
	opacity: 0;
}

@keyframes mdwFadeInUp {
	0% {
		transform: translateY(50px);
		opacity: 0;
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	}
	100% {
		transform: translateY(0);
		opacity: 1;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

.elementor-edit-area .animated {
	animation-fill-mode: forwards !important;
}

/* ---------- Mobile : etat pilote par la classe .passed ---------- */

@media (max-width: 767px) {
	.mdw-card-portfolio-image-left {
		transition: transform .6s ease-in-out;
		transform: translateX(-30px) rotate(-1deg) !important;
	}

	.mdw-card-portfolio-image-right {
		transition: transform .6s ease-in-out;
		transform: translateX(30px) rotate(1deg) !important;
	}

	.mdw-card-portfolio.passed .mdw-card-portfolio-image-left {
		transition: transform .8s ease-in-out;
		transform: translateX(calc(-1 * var(--maximum-move))) rotate(calc(-1 * var(--maximum-rotate))) !important;
	}

	.mdw-card-portfolio.passed .mdw-card-portfolio-image-right {
		transition: transform .8s ease-in-out;
		transform: translateX(calc(1 * var(--maximum-move))) rotate(calc(1 * var(--maximum-rotate))) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mdw-card-portfolio-image-left,
	.mdw-card-portfolio-image-right,
	.mdw-email-copy .elementor-widget,
	.mdw-email-box .elementor-heading-title {
		transition: none !important;
	}

	.mdw-portfolio-page .elementor-element.animated.fadeInUp,
	.mdw-portfolio-page .elementor-element.animated.fadeIn {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
}