/**
 * Widget Elementor "Accordéon + Image" (anetmo_accordion_image).
 *
 * Les valeurs par défaut des custom properties sont posées sur .anetmo-ai ;
 * Elementor les surcharge via ses propres règles ciblant
 * ".elementor-element-xxx .anetmo-ai" (plus spécifiques). Les classes
 * "anetmo-ai--*" (prefix_class) sont posées sur le wrapper Elementor, parent
 * de .anetmo-ai.
 */

.anetmo-ai {
	--anetmo-ai-accordion-width: 50%;
	--anetmo-ai-gap: 60px;
	--anetmo-ai-align: center;
	--anetmo-ai-content-duration: 350ms;
	--anetmo-ai-icon-size: 26px;
	--anetmo-ai-icon-spacing: 12px;
	--anetmo-ai-image-width: 100%;
	--anetmo-ai-image-align: center;
	--anetmo-ai-image-valign: auto; /* auto = suit --anetmo-ai-align (align-items de la grille) */
	--anetmo-ai-image-duration: 500ms;
	--anetmo-ai-splash-width: 130%;
	--anetmo-ai-splash-height: 110%;
	--anetmo-ai-splash-color: #1e3ee8;
	--anetmo-ai-splash-opacity: 1;
	--anetmo-ai-splash-blur: 0px;
	--anetmo-ai-splash-duration: 700ms;
	--anetmo-ai-splash-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--anetmo-ai-splash-base-x: 0%;
	--anetmo-ai-splash-base-y: 0%;
	/* Valeurs "par élément", recopiées par le JS sur .anetmo-ai__visual */
	--anetmo-ai-splash-x: 0%;
	--anetmo-ai-splash-y: 0%;
	--anetmo-ai-splash-rotate: 0deg;
	--anetmo-ai-splash-scale: 1;

	display: grid;
	grid-template-columns: var(--anetmo-ai-accordion-width) minmax(0, 1fr);
	gap: var(--anetmo-ai-gap);
	align-items: var(--anetmo-ai-align);
}

.anetmo-ai--accordion-right .anetmo-ai {
	grid-template-columns: minmax(0, 1fr) var(--anetmo-ai-accordion-width);
}

.anetmo-ai--accordion-right .anetmo-ai__accordion {
	order: 2;
}

/* ---------------------------------------------------------------------------
 * Accordéon
 * ------------------------------------------------------------------------ */

.anetmo-ai__accordion {
	min-width: 0;
}

.anetmo-ai__item {
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.anetmo-ai__header {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.anetmo-ai__trigger {
	display: flex;
	align-items: center;
	gap: var(--anetmo-ai-icon-spacing);
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-align: left;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.anetmo-ai__trigger:hover,
.anetmo-ai__trigger:focus {
	background: none;
	color: inherit;
}

.anetmo-ai__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.anetmo-ai--icon-right .anetmo-ai__trigger {
	flex-direction: row-reverse;
	justify-content: space-between;
}

.anetmo-ai__icon {
	position: relative;
	flex: 0 0 auto;
	width: var(--anetmo-ai-icon-size);
	height: var(--anetmo-ai-icon-size);
	font-size: var(--anetmo-ai-icon-size);
	line-height: 1;
}

.anetmo-ai__icon--inactive,
.anetmo-ai__icon--active {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.anetmo-ai__icon i {
	font-size: inherit;
	line-height: 1;
}

.anetmo-ai__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.anetmo-ai__icon--active {
	opacity: 0;
	transform: scale(0.6);
}

.anetmo-ai__item.is-active .anetmo-ai__icon--inactive {
	opacity: 0;
	transform: scale(0.6);
}

.anetmo-ai__item.is-active .anetmo-ai__icon--active {
	opacity: 1;
	transform: scale(1);
}

.anetmo-ai__title {
	flex: 1 1 auto;
	min-width: 0;
	transition: color 0.25s ease;
}

/* Ouverture/fermeture animée sans mesurer la hauteur : grille 0fr -> 1fr. */
.anetmo-ai__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--anetmo-ai-content-duration) ease;
}

.anetmo-ai__content {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear var(--anetmo-ai-content-duration);
}

.anetmo-ai__item.is-active .anetmo-ai__panel {
	grid-template-rows: 1fr;
}

.anetmo-ai__item.is-active .anetmo-ai__content {
	visibility: visible;
	transition-delay: 0s;
}

.anetmo-ai__content-inner > :last-child {
	margin-bottom: 0;
}

.anetmo-ai--content-indent-yes .anetmo-ai__content-inner {
	padding-left: calc(var(--anetmo-ai-icon-size) + var(--anetmo-ai-icon-spacing)) !important;
}

.anetmo-ai--content-indent-yes.anetmo-ai--icon-right .anetmo-ai__content-inner {
	padding-left: 0 !important;
	padding-right: calc(var(--anetmo-ai-icon-size) + var(--anetmo-ai-icon-spacing)) !important;
}

/* ---------------------------------------------------------------------------
 * Zone image + splash
 * ------------------------------------------------------------------------ */

.anetmo-ai__visual {
	position: relative;
	min-width: 0;
	display: flex;
	justify-content: var(--anetmo-ai-image-align);
	/* Alignement vertical propre à l'image dans sa cellule de grille ; le splash
	 * étant positionné par rapport à .anetmo-ai__visual, il suit l'image. */
	align-self: var(--anetmo-ai-image-valign);
}

.anetmo-ai__images {
	position: relative;
	z-index: 1;
	display: grid;
	width: var(--anetmo-ai-image-width);
	max-width: 100%;
}

/* Toutes les images dans la même cellule : le conteneur prend la taille de la plus grande. */
.anetmo-ai__image {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--anetmo-ai-image-duration) ease, transform var(--anetmo-ai-image-duration) ease;
}

.anetmo-ai__image img {
	display: block;
	width: 100%;
	height: auto;
}

.anetmo-ai__image.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.anetmo-ai--image-fade-up .anetmo-ai__image:not(.is-active) {
	transform: translateY(24px);
}

.anetmo-ai--image-zoom .anetmo-ai__image:not(.is-active) {
	transform: scale(0.94);
}

.anetmo-ai--image-none .anetmo-ai__image {
	transition: none;
}

.anetmo-ai__splash {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	width: var(--anetmo-ai-splash-width);
	height: var(--anetmo-ai-splash-height);
	opacity: var(--anetmo-ai-splash-opacity);
	filter: blur(var(--anetmo-ai-splash-blur));
	pointer-events: none;
	transform:
		translate(-50%, -50%)
		translate(
			calc(var(--anetmo-ai-splash-base-x) + var(--anetmo-ai-splash-x)),
			calc(var(--anetmo-ai-splash-base-y) + var(--anetmo-ai-splash-y))
		)
		rotate(var(--anetmo-ai-splash-rotate))
		scale(var(--anetmo-ai-splash-scale));
	transition: transform var(--anetmo-ai-splash-duration) var(--anetmo-ai-splash-easing);
	will-change: transform;
}

.anetmo-ai__splash svg,
.anetmo-ai__splash img {
	display: block;
	width: 100%;
	height: 100%;
}

.anetmo-ai__splash svg {
	overflow: visible;
}

.anetmo-ai__splash path {
	fill: var(--anetmo-ai-splash-color);
}

/* Type "Image" : une <img> par URL, empilées, fondu vers celle de l'élément ouvert. */
.anetmo-ai__splash--image .anetmo-ai__splash-img {
	position: absolute;
	inset: 0;
	object-fit: contain;
	opacity: 0;
	transition: opacity var(--anetmo-ai-splash-duration) var(--anetmo-ai-splash-easing);
}

.anetmo-ai__splash--image .anetmo-ai__splash-img.is-active {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Responsive : empilement des colonnes
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.anetmo-ai--stack-tablet .anetmo-ai {
		grid-template-columns: minmax(0, 1fr);
	}

	.anetmo-ai--stack-tablet .anetmo-ai__accordion {
		order: 2;
	}

	.anetmo-ai--stack-tablet.anetmo-ai--stack-order-accordion-first .anetmo-ai__accordion {
		order: 0;
	}
}

@media (max-width: 767px) {
	.anetmo-ai--stack-mobile .anetmo-ai {
		grid-template-columns: minmax(0, 1fr);
	}

	.anetmo-ai--stack-mobile .anetmo-ai__accordion {
		order: 2;
	}

	.anetmo-ai--stack-mobile.anetmo-ai--stack-order-accordion-first .anetmo-ai__accordion {
		order: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Accessibilité : moins d'animations si demandé par l'OS
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.anetmo-ai__panel,
	.anetmo-ai__image,
	.anetmo-ai__splash,
	.anetmo-ai__splash-img,
	.anetmo-ai__icon--inactive,
	.anetmo-ai__icon--active {
		transition-duration: 0.01ms !important;
	}
}