/**
 * Widget "Emotions French Panda".
 *
 * Ecrit en mobile-first : les regles de base reproduisent le bloc existant
 * (texte puis visuel, empiles), et le montage a deux colonnes avec visuel fixe
 * n'apparait qu'a partir de 1025px, soit le breakpoint desktop d'Elementor.
 *
 * Toutes les valeurs reglables passent par des variables CSS posees sur
 * .fp-emotions par les `selectors` des controles du widget.
 */

.fp-emotions {
	--fp-emotions-media-width: 50%;
	--fp-emotions-gap: 60px;
	--fp-emotions-offset: 174px;
	--fp-emotions-step-height: 80vh;
	--fp-emotions-text-gap: 30px;
	--fp-emotions-text-offset: 20px;
	--fp-emotions-inline-width: 75%;
	--fp-emotions-inactive-opacity: 0.35;
	--fp-emotions-duration: 400ms;

	/* Marge de securite sous le visuel fixe, pour qu'il tienne dans l'ecran. */
	--fp-emotions-media-bottom-space: 40px;
}

.fp-emotions__step {
	display: flex;
	flex-direction: column;
	gap: var(--fp-emotions-text-gap);
}

.fp-emotions__title,
.fp-emotions__subtitle {
	margin: 0;
}

.fp-emotions__text > *:first-child {
	margin-top: 0;
}

.fp-emotions__text > *:last-child {
	margin-bottom: 0;
}

.fp-emotions__text {
	margin-top: var(--fp-emotions-text-offset);
}

.fp-emotions__visual,
.fp-emotions__visual-inline {
	margin: 0;
}

.fp-emotions__visual img,
.fp-emotions__visual-inline img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	margin-inline: auto;
}

/* --- Tablette et mobile : empilement, comme le bloc d'origine --- */

.fp-emotions__media {
	display: none;
}

.fp-emotions__visual-inline {
	width: var(--fp-emotions-inline-width);
	margin-inline: auto;
}

/* --- Desktop : deux colonnes, colonne visuelle fixe --- */

@media (min-width: 1025px) {

	/*
	 * Le theme Healthify pose `body,html{overflow-x:hidden}` dans
	 * healthify-frontend.min.css. `hidden` sur un axe force l'autre a `auto` :
	 * html et body deviennent des conteneurs de defilement, et
	 * `position: sticky` s'y ancre au lieu de la fenetre, donc ne colle plus.
	 *
	 * `clip` masque le debordement horizontal exactement pareil, mais ne cree
	 * pas de conteneur de defilement : le sticky retrouve la fenetre comme
	 * reference. Cette feuille n'etant chargee que sur les pages qui utilisent
	 * le widget, la regle ne deborde pas sur le reste du site.
	 *
	 * La feuille du theme est chargee APRES celle-ci. A specificite egale elle
	 * l'emporterait, d'ou des selecteurs volontairement plus specifiques que
	 * `html` et `body` (0,0,1) : `:root` vaut (0,1,0) et `html body` (0,0,2).
	 * La cascade est ainsi gagnee par la specificite et non par l'ordre, ce qui
	 * evite un `!important` et resiste a un changement d'ordre des feuilles.
	 */
	:root,
	html body {
		overflow-x: clip;
	}

	/*
	 * Pas de `align-items: start` ici, ni de `align-self` sur la colonne
	 * visuelle : elle doit s'etirer sur toute la hauteur de la colonne texte,
	 * sinon `position: sticky` n'a aucune course et le visuel ne colle pas.
	 */
	.fp-emotions {
		display: grid;
		grid-template-columns: var(--fp-emotions-media-width) 1fr;
		gap: var(--fp-emotions-gap);
	}

	/*
	 * Le visuel reste en premier dans le DOM quelle que soit sa position a
	 * l'ecran : on le deplace par placement de grille, pas par `order`, pour
	 * que l'ordre de lecture au clavier reste celui du document.
	 */
	.fp-emotions--media-right {
		grid-template-columns: 1fr var(--fp-emotions-media-width);
	}

	.fp-emotions--media-right .fp-emotions__media {
		grid-column: 2;
		grid-row: 1;
	}

	.fp-emotions--media-right .fp-emotions__content {
		grid-column: 1;
		grid-row: 1;
	}

	.fp-emotions__media {
		display: block;
	}

	.fp-emotions__media-inner {
		position: sticky;
		top: var(--fp-emotions-offset);

		/*
		 * Les visuels partagent une seule cellule de grille : ils se
		 * superposent sans positionnement absolu, et la hauteur du bloc est
		 * celle du plus grand. Pas de saut de mise en page au changement.
		 */
		display: grid;
	}

	/*
	 * Fondu sans creux de luminosite.
	 *
	 * Un fondu croise classique fait descendre la sortante pendant que
	 * l'entrante monte. Les deux opacites etant complementaires, l'opacite du
	 * composite vaut alpha + (1 - alpha)^2, soit 0,75 a mi-parcours : un quart
	 * du fond traverse les deux images, qui paraissent delavees. Le phenomene
	 * tient a la composition alpha, pas a la courbe d'interpolation.
	 *
	 * D'ou ce montage : la sortante garde une opacite pleine, en dessous, le
	 * temps que l'entrante monte de 0 a 1 par-dessus. Le composite vaut alors
	 * alpha + 1 x (1 - alpha) = 1 a chaque instant. Le JS retire `is-leaving`
	 * une fois le fondu termine, quand la sortante est de toute facon masquee.
	 */
	.fp-emotions__visual {
		grid-area: 1 / 1;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		z-index: 0;
		transition: opacity var(--fp-emotions-duration) ease;
	}

	/*
	 * La transition reste active : au rythme normal la sortante est deja a 1,
	 * donc rien ne bouge. Sur un scroll rapide, elle est interrompue a
	 * mi-fondu et y remonte en douceur au lieu de sauter d'un coup.
	 */
	.fp-emotions__visual.is-leaving {
		opacity: 1;
		z-index: 1;
	}

	.fp-emotions__visual.is-active {
		opacity: 1;
		z-index: 2;
	}

	.fp-emotions__visual img {
		max-height: calc(100vh - var(--fp-emotions-offset) - var(--fp-emotions-media-bottom-space));
	}

	.fp-emotions__visual-inline {
		display: none;
	}

	.fp-emotions__step {
		min-height: var(--fp-emotions-step-height);
		justify-content: center;
		opacity: var(--fp-emotions-inactive-opacity);
		transition: opacity var(--fp-emotions-duration) ease;
	}

	.fp-emotions__step.is-active {
		opacity: 1;
	}

	/*
	 * Sans JavaScript, aucun bloc ne recoit `is-active` au fil du scroll : on
	 * retire alors l'attenuation pour que les quatre textes restent lisibles.
	 */
	.fp-emotions:not(.fp-emotions--ready) .fp-emotions__step {
		opacity: 1;
	}

	/*
	 * Dans l'iframe de l'editeur, le visuel fixe masque les blocs en cours
	 * d'edition : on y retombe sur le rendu empile, plus pratique pour saisir
	 * le contenu. Le rendu reel se verifie en apercu ou sur le site.
	 */
	.fp-emotions--editor {
		display: block;
	}

	.fp-emotions--editor .fp-emotions__media {
		display: none;
	}

	.fp-emotions--editor .fp-emotions__visual-inline {
		display: block;
	}

	.fp-emotions--editor .fp-emotions__step {
		min-height: 0;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.fp-emotions__visual,
	.fp-emotions__step {
		transition: none;
	}

	.fp-emotions__step {
		opacity: 1;
	}
}