/* Accueil animé (module accueil). Repères en pixels de l'illustration d'origine (1920 × 1080), comme la scène.
   La scène (assets/scene/scene.svg) reprend celle de la page de maintenance : Martin respire, penche la tête vers sa
   plante, cligne des yeux ; arbres au vent ; petits jardiniers qui taillent ; oiseaux, papillon ; feuilles au vent. */

/* --- Scène dans la section d'en-tête (190a604) ------------------------------------- */
.elementor-element-190a604 > .jm-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.elementor-element-190a604 > .elementor-container { position: relative; z-index: 1; }
.elementor-element-190a604.jm-scene-prete { background-image: none !important; }
/* Téléphone : la scène, calée à droite, mettait Martin et les arbres sous le texte et le formulaire. Elle ne garde que
   le bas de la section (derrière la bulle « 27 €/h »), fondue vers le haut ; texte plus foncé sur le fond clair. */
@media (max-width: 767px) {
	.elementor-element-190a604 > .jm-scene {
		top: auto;
		height: 350px;
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 90px);
		mask-image: linear-gradient(to bottom, transparent, #000 90px);
	}
	body .elementor-20 .elementor-element:is(.elementor-element-8c8a042, .elementor-element-cebd971, .elementor-element-2628299,
		.elementor-element-cfc7f5f) .elementor-heading-title { color: #2f4a47; } /* « body » : plus fort que le CSS de la page */
	body .elementor-20 .elementor-element.elementor-element-5866c24 .elementor-heading-title { font-size: 12px; }
}
.jm-scene svg { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; }
.jm-scene svg * { transform-box: view-box; }

.jm-scene .jm-s-martin { transform-origin: 1700px 1080px; animation: jm-s-balance 8s ease-in-out infinite alternate; }
.jm-scene .jm-s-respire { transform-origin: 1700px 1080px; animation: jm-s-respire 4.2s ease-in-out infinite; }
.jm-scene .jm-s-tete { transform-origin: 1735px 652px; animation: jm-s-tete 9s ease-in-out infinite; }
.jm-scene .jm-s-sourcils { animation: jm-s-sourcils 9s ease-in-out infinite; }
.jm-scene .jm-s-paupiere { transform: scaleY(0); animation: jm-s-cligne 5.2s linear infinite; }
.jm-scene .jm-s-paupiere.jm-s-g { transform-origin: 1661px 556px; }
.jm-scene .jm-s-paupiere.jm-s-d { transform-origin: 1714px 563px; }
.jm-scene .jm-s-plante { transform-origin: 1566px 862px; animation: jm-s-plante 6s ease-in-out infinite; }
@keyframes jm-s-balance { from { transform: rotate(-.35deg); } to { transform: rotate(.35deg); } }
@keyframes jm-s-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.003, 1.011); } }
@keyframes jm-s-tete { 0%, 100% { transform: rotate(0); } 18%, 40% { transform: rotate(-1.8deg); } 56%, 78% { transform: rotate(.7deg); } }
@keyframes jm-s-sourcils { 0%, 14%, 46%, 100% { transform: translateY(0); } 20%, 38% { transform: translateY(-3px); } }
@keyframes jm-s-cligne { 0%, 93% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
@keyframes jm-s-plante { 0%, 100% { transform: rotate(-1.2deg) scale(1); } 50% { transform: rotate(1.2deg) scale(1.018); } }

.jm-scene .jm-s-vent { animation: jm-s-vent 7s ease-in-out infinite alternate; }
.jm-scene .jm-s-secoue { animation: jm-s-secoue 1.6s linear infinite; }
@keyframes jm-s-vent { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
@keyframes jm-s-secoue { 0%, 46%, 72%, 100% { transform: rotate(0); } 52% { transform: rotate(.9deg); } 60% { transform: rotate(-.5deg); } }

.jm-scene .jm-s-bras { transform-origin: 2px -33.5px; animation: jm-s-bras 1.6s ease-in-out infinite; }
.jm-scene .jm-s-lame-h, .jm-scene .jm-s-lame-b { transform-origin: 0 0; animation: jm-s-lame-h 1.6s ease-in-out infinite; }
.jm-scene .jm-s-lame-b { animation-name: jm-s-lame-b; }
@keyframes jm-s-bras { 0%, 30%, 70%, 100% { transform: rotate(0); } 44% { transform: rotate(-7deg); } 52% { transform: rotate(3deg); } }
@keyframes jm-s-lame-h { 0%, 36%, 64%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(0); } }
@keyframes jm-s-lame-b { 0%, 36%, 64%, 100% { transform: rotate(22deg); } 50% { transform: rotate(0); } }

.jm-scene .jm-s-feuille { opacity: 0; transform-origin: 0 0; animation: jm-s-chute 3.2s linear infinite; }
@keyframes jm-s-chute {
	0% { opacity: 0; transform: translate(0, 0) rotate(0); }
	6% { opacity: 1; }
	25% { transform: translate(-4px, calc(var(--h) * .25)) rotate(80deg); }
	50% { transform: translate(3px, calc(var(--h) * .5)) rotate(160deg); }
	75% { transform: translate(-3px, calc(var(--h) * .75)) rotate(240deg); }
	88% { opacity: 1; }
	100% { opacity: 0; transform: translate(1px, var(--h)) rotate(320deg); }
}

.jm-scene .jm-s-oiseau { opacity: 0; animation: jm-s-vol 30s linear infinite; }
.jm-scene .jm-s-ailes { transform-origin: 0 0; animation: jm-s-ailes .5s ease-in-out infinite alternate; }
@keyframes jm-s-vol {
	0% { opacity: 0; transform: translate(2000px, 0); }
	4% { opacity: 1; }
	52% { opacity: 1; }
	60%, 100% { opacity: 0; transform: translate(1080px, -60px); }
}
@keyframes jm-s-ailes { from { transform: scaleY(1); } to { transform: scaleY(-.45); } }
.jm-scene .jm-s-papillon-x { animation: jm-s-papillon-x 7s ease-in-out infinite alternate; }
.jm-scene .jm-s-papillon-y { animation: jm-s-papillon-y 4.4s ease-in-out infinite alternate; }
.jm-scene .jm-s-battement { transform-origin: 0 0; animation: jm-s-battement .18s ease-in-out infinite alternate; }
@keyframes jm-s-papillon-x { from { transform: translateX(-46px); } to { transform: translateX(46px); } }
@keyframes jm-s-papillon-y { from { transform: translateY(-28px); } to { transform: translateY(26px); } }
@keyframes jm-s-battement { from { transform: scaleX(1); } to { transform: scaleX(.2); } }

/* Feuilles portées par le vent à travers tout l'en-tête (ajout de l'accueil). */
.jm-scene .jm-s-envol { opacity: 0; animation: jm-s-envol var(--d) linear infinite; animation-delay: var(--r); }
@keyframes jm-s-envol {
	0% { opacity: 0; transform: translate(2000px, var(--y)) rotate(0); }
	4% { opacity: .75; }
	25% { transform: translate(1500px, calc(var(--y) + 90px)) rotate(130deg); }
	50% { transform: translate(1000px, calc(var(--y) + 30px)) rotate(250deg); }
	75% { transform: translate(500px, calc(var(--y) + 150px)) rotate(380deg); }
	94% { opacity: .75; }
	100% { opacity: 0; transform: translate(-80px, calc(var(--y) + 210px)) rotate(500deg); }
}

/* --- Autres animations de l'accueil --------------------------------------------------- */
/* Bulle « 27 €/h » : arrive en rebondissant, puis flotte. */
.elementor-element-ac8a7ce img { transform-origin: 50% 60%; animation: jm-bulle-arrivee .9s cubic-bezier(.3, 1.5, .5, 1) .3s both, jm-bulle 6s ease-in-out 1.2s infinite; }
@keyframes jm-bulle-arrivee { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes jm-bulle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }

/* Bouton « Réservez Martin » : reflet qui passe toutes les quelques secondes. */
.elementor-element-2d0299b .pc-submit { overflow: hidden; }
.elementor-element-2d0299b .pc-submit::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg);
	animation: jm-reflet 5s ease-in-out 2s infinite;
}
@keyframes jm-reflet { 0%, 70% { left: -40%; } 100% { left: 130%; } }

/* « Comment ça marche » : le téléphone flotte, les étapes s'allument une à une, les flèches descendent. */
.elementor-element-ce636a8 img { animation: jm-flotte 7s ease-in-out infinite; }
@keyframes jm-flotte { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-12px) rotate(.6deg); } }
.jm-etapes .elementor-element-0100d81 .elementor-icon,
.jm-etapes .elementor-element-fc509ee .elementor-icon,
.jm-etapes .elementor-element-3120264 .elementor-icon,
.jm-etapes .elementor-element-a4772de .elementor-icon { animation: jm-onde 4s ease-out infinite; }
.jm-etapes .elementor-element-fc509ee .elementor-icon { animation-delay: 1s; }
.jm-etapes .elementor-element-3120264 .elementor-icon { animation-delay: 2s; }
.jm-etapes .elementor-element-a4772de .elementor-icon { animation-delay: 3s; }
@keyframes jm-onde {
	0% { box-shadow: 0 0 0 0 rgba(35, 166, 154, .55); transform: scale(1); }
	8% { transform: scale(1.12); }
	16% { transform: scale(1); }
	30%, 100% { box-shadow: 0 0 0 16px rgba(35, 166, 154, 0); }
}
.elementor-element-14c0059 .elementor-icon, .elementor-element-4de157f .elementor-icon, .elementor-element-96f64f4 .elementor-icon { animation: jm-descend 2.4s ease-in-out infinite; }
@keyframes jm-descend { 0%, 100% { transform: translateY(-3px); opacity: .6; } 50% { transform: translateY(4px); opacity: 1; } }

/* Prix « 27 €/h* » : compté de 0 à 27 à l'arrivée dans l'écran (accueil.js), avec un petit rebond. */
.elementor-element-3bb3d16 .jm-compteur { display: inline-block; min-width: 1.15em; text-align: right; }
.elementor-element-3bb3d16.jm-compte-fini .elementor-heading-title { animation: jm-rebond .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes jm-rebond { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.jm-scene *, .elementor-element-ac8a7ce img, .elementor-element-2d0299b .pc-submit::after, .elementor-element-ce636a8 img,
	.jm-etapes .elementor-icon, .elementor-element-14c0059 .elementor-icon, .elementor-element-4de157f .elementor-icon,
	.elementor-element-96f64f4 .elementor-icon { animation: none !important; }
}
