/**
 * Footer 3 — décor au-dessus de la vague (blob blanc + coquelicot + blob vert).
 *
 * Maquette : Figma 957:3864 (desktop, cadre 1920) et 957:3866 (mobile, cadre 402).
 * Une seule composition, mise à l'échelle par la largeur du bloc (--tv-deco-w) :
 * les pièces sont placées en % du groupe Figma (713 × 730). À 1024 px et moins,
 * le bloc est centré.
 *
 * Profondeur : les blobs et le coquelicot restent derrière la vague rose et le
 * bloc marron, à toutes les largeurs (le z-index 50 réglé dans Elementor sur le
 * coquelicot est neutralisé ici).
 *
 * Apparition, 100 % CSS. Sur une page avec FAQ (.faq-bmargin), les pièces montent
 * dès l'arrivée de la FAQ (Elementor pose .animated sur ses titres), sans attendre
 * le footer. Le conteneur rose est alors encore invisible : le décor est rendu
 * visible à part, et quand le rose fait ensuite son slideInUp, le bas du décor est
 * remonté d'autant (même durée, même courbe) pour qu'il ne reparte pas avec lui.
 * Sans FAQ, Elementor pose .animated sur le conteneur rose quand son entrée
 * démarre ; les pièces attendent la fin de cette entrée et de celle du footer
 * (délai 180 ms + 1,25 s, soit ~1,3 s après le rose), puis montent de
 * derrière la vague. Chaque pièce est une fenêtre (overflow: clip) qui descend
 * jusqu'au bas du bloc, caché par la vague : le dessin glisse dans cette fenêtre.
 * Le mouvement tv-vent (rotate) reste sur la pièce, la montée (translate) est sur
 * son contenu : les deux animations ne se marchent pas dessus.
 *
 * Ciblage par id d'élément Elementor (template Footer 3, post 2683) :
 *   9505259 : conteneur rose   511a9da : conteneur du décor
 *   9b6e520 : blob blanc (SVG)   4364440 : coquelicot (image)   7d86dfe : blob vert (SVG)
 */

/* Le footer forme son propre contexte d'empilement : les blobs (z-index -1)
   passent sous la vague et le bloc marron, sans passer sous les sections de la page. */
.elementor-2683.elementor {
	isolation: isolate;
}

body:not(.rtl) .elementor-2683 .e-con.elementor-element.elementor-element-511a9da,
body.rtl .elementor-2683 .e-con.elementor-element.elementor-element-511a9da {
	--tv-deco-w: clamp(260px, 37.14vw, 713px); /* 713 / 1920 */
	--tv-deco-h: calc(var(--tv-deco-w) * 730 / 713);
	/* Bas du bloc sous le haut du conteneur rose : le pied du coquelicot
	   descend sur le footer, les fenêtres des pièces s'arrêtent sous la vague. */
	/* Plafonnée : le bloc s'arrête à 713 px, la descente ne doit pas continuer à
	   grandir sur les très grands écrans (dézoom), sinon le blob blanc rejoint la vague. */
	--tv-deco-plonge: min(4.7vw, 90px);
	/* Coquelicot plus grand que le blob blanc (blanc : 86,68 % de large, 82 % de haut). */
	--tv-deco-rose-w: 36%;
	--tv-deco-rose-x: 38%;

	position: absolute;
	top: auto;
	bottom: calc(100% - var(--tv-deco-plonge));
	left: 6.25vw; /* 120 / 1920 */
	right: auto;
	z-index: auto;
	width: var(--tv-deco-w);
	height: var(--tv-deco-h);
	padding: 0;
	margin: 0;
	pointer-events: none;
}

@media (min-width: 1367px) {
	body:not(.rtl) .elementor-2683 .e-con.elementor-element.elementor-element-511a9da,
	body.rtl .elementor-2683 .e-con.elementor-element.elementor-element-511a9da {
		--tv-deco-rose-w: 40%;
		--tv-deco-rose-x: 36%;
		--tv-deco-blanc-y: -10%;
	}
}

/* 1024 px et moins : bloc centré, composition mobile (255 / 402 du cadre). */
@media (max-width: 1024px) {
	body:not(.rtl) .elementor-2683 .e-con.elementor-element.elementor-element-511a9da,
	body.rtl .elementor-2683 .e-con.elementor-element.elementor-element-511a9da {
		--tv-deco-w: clamp(230px, 63.4vw, 440px);
		--tv-deco-plonge: 9vw;

		left: 0;
		right: 0;
		margin-inline: auto;
	}
}

/* Pièces : fenêtres qui descendent jusqu'au bas du bloc. */
body:not(.rtl) .elementor-2683 .e-con.elementor-element-511a9da > .elementor-element,
body.rtl .elementor-2683 .e-con.elementor-element-511a9da > .elementor-element {
	position: absolute;
	right: auto;
	bottom: 0;
	margin: 0;
	max-width: none;
	overflow: clip;
}

/* Blob blanc : au fond, derrière la vague. */
body:not(.rtl) .elementor-2683 .e-con.elementor-element-511a9da > .elementor-element.elementor-element-9b6e520,
body.rtl .elementor-2683 .e-con.elementor-element-511a9da > .elementor-element.elementor-element-9b6e520 {
	z-index: -1;
	top: var(--tv-deco-blanc-y, -5%); /* remonté par rapport à Figma (0), davantage au-delà de 1366 px */
	left: 4%; /* décalé à droite par rapport à Figma (0) */
	width: 86.68%; /* 618 / 713 */
	/* tv-vent tourne autour du centre du blob, pas de la fenêtre. */
	transform-origin: 50% calc(var(--tv-deco-w) * 0.411);
}

/* Blob vert : derrière la vague, devant le blanc. */
body:not(.rtl) .elementor-2683 .e-con.elementor-element-511a9da > .elementor-element.elementor-element-7d86dfe,
body.rtl .elementor-2683 .e-con.elementor-element-511a9da > .elementor-element.elementor-element-7d86dfe {
	z-index: -1;
	top: 63.5%; /* Figma : 66.85 % (488 / 730), remonté */
	left: 79.38%; /* 566 / 713 */
	width: 20.62%; /* 147 / 713 */
	transform-origin: 50% calc(var(--tv-deco-w) * 0.0933);
	/* Décalé d'une demi-période de tv-vent : les deux blobs ne tanguent pas en même temps. */
	animation-delay: -2.3s;
}

/* Coquelicot : pied posé sur le footer, derrière la vague rose et le bloc
   marron comme les blobs (prend le pas sur le z-index 50 d'Elementor). */
body:not(.rtl) .elementor-2683 .e-con.elementor-element-511a9da > .elementor-element.elementor-element-4364440,
body.rtl .elementor-2683 .e-con.elementor-element-511a9da > .elementor-element.elementor-element-4364440 {
	z-index: -1;
	top: auto;
	left: var(--tv-deco-rose-x);
	width: var(--tv-deco-rose-w);
}

/* Les SVG et l'image suivent la largeur de leur pièce (et non plus une taille fixe en px). */
.elementor-2683 .e-con.elementor-element-511a9da > .elementor-element .elementor-icon-wrapper,
.elementor-2683 .e-con.elementor-element-511a9da > .elementor-element .elementor-icon {
	display: block;
	font-size: 0;
	line-height: 0;
}

.elementor-2683 .e-con.elementor-element-511a9da > .elementor-element .elementor-icon svg,
.elementor-2683 .e-con.elementor-element-511a9da > .elementor-element.elementor-element-4364440 img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* Montée de derrière la vague, une fois le rose et le footer arrivés. */
@keyframes tv-deco-monte {
	/* Plus que la hauteur du bloc : la fenêtre du blob blanc commence au-dessus de lui. */
	from { translate: 0 calc(var(--tv-deco-h) * 1.15); }
	to   { translate: 0 0; }
}

/* Le rose descend de 100 % de sa hauteur au début de son slideInUp : le bas du décor
   remonte d'autant, puis revient à sa place au même rythme (1,25 s, ease, comme Elementor). */
@keyframes tv-deco-reste {
	from { bottom: calc(200% - var(--tv-deco-plonge)); }
	to   { bottom: calc(100% - var(--tv-deco-plonge)); }
}

@media (prefers-reduced-motion: no-preference) {
	/* Page sans FAQ : après l'arrivée du rose et du footer. */
	body:not(:has(.faq-bmargin)) .elementor-2683 .elementor-element-9505259.animated .elementor-element-511a9da > .elementor-element > .elementor-icon-wrapper,
	body:not(:has(.faq-bmargin)) .elementor-2683 .elementor-element-9505259.animated .elementor-element-511a9da > .elementor-element-4364440 img {
		animation: tv-deco-monte 1s cubic-bezier(0.22, 0.8, 0.3, 1) 1.3s both;
	}

	body:not(:has(.faq-bmargin)) .elementor-2683 .elementor-element-9505259.animated .elementor-element-511a9da > .elementor-element-4364440 img {
		animation-delay: 1.45s;
	}

	body:not(:has(.faq-bmargin)) .elementor-2683 .elementor-element-9505259.animated .elementor-element-511a9da > .elementor-element-7d86dfe > .elementor-icon-wrapper {
		animation-delay: 1.6s;
	}

	/* Page avec FAQ : dès l'arrivée de la FAQ. */
	body:has(.faq-bmargin .animated) .elementor-2683 .e-con.elementor-element-511a9da {
		visibility: visible;
	}

	body:has(.faq-bmargin .animated) .elementor-2683 .elementor-element-511a9da > .elementor-element > .elementor-icon-wrapper,
	body:has(.faq-bmargin .animated) .elementor-2683 .elementor-element-511a9da > .elementor-element-4364440 img {
		animation: tv-deco-monte 1s cubic-bezier(0.22, 0.8, 0.3, 1) 0.3s both;
	}

	body:has(.faq-bmargin .animated) .elementor-2683 .elementor-element-511a9da > .elementor-element-4364440 img {
		animation-delay: 0.45s;
	}

	body:has(.faq-bmargin .animated) .elementor-2683 .elementor-element-511a9da > .elementor-element-7d86dfe > .elementor-icon-wrapper {
		animation-delay: 0.6s;
	}

	body:has(.faq-bmargin) .elementor-2683 .elementor-element-9505259.animated .e-con.elementor-element-511a9da {
		animation: tv-deco-reste 1.25s ease both;
	}
}

/* Éditeur Elementor : décor posé d'emblée pour pouvoir le travailler. */
.elementor-editor-active .elementor-2683 .elementor-element-511a9da > .elementor-element,
.elementor-editor-active .elementor-2683 .elementor-element-511a9da > .elementor-element > .elementor-icon-wrapper,
.elementor-editor-active .elementor-2683 .elementor-element-511a9da > .elementor-element img {
	animation: none;
}