/* Animations végétales des paliers de fidélité (voir /js/fidelite-anim.js). */
.fa-stage { position: fixed; inset: 0; z-index: 9990; pointer-events: none; overflow: hidden; --u: 1vmin; }
@media (max-width: 720px) { .fa-stage { --u: 1.6vmin; } }

.fa-it {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: calc(var(--s, 8) * var(--u)); height: calc(var(--s, 8) * var(--u));
  margin: calc(var(--s, 8) * var(--u) * -.5) 0 0 calc(var(--s, 8) * var(--u) * -.5);
  color: var(--c, #2f7a4f);
  animation-delay: var(--d, 0s); animation-duration: var(--t, 2.5s); animation-fill-mode: both; animation-timing-function: ease;
}
.fa-it svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fa-hold { position: absolute; inset: 0; animation: fa-life var(--t, 4s) both; }
@keyframes fa-life { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* --- Briques génériques --- */
@keyframes fa-fall {
  0% { transform: translate(0, -14vh) rotate(var(--r0, 0deg)); opacity: 0; }
  8% { opacity: 1; }
  30% { transform: translate(var(--sx, 6vw), 26vh) rotate(calc(var(--r0, 0deg) + 110deg)); }
  60% { transform: translate(calc(var(--sx, 6vw) * -1), 60vh) rotate(calc(var(--r0, 0deg) + 220deg)); }
  92% { opacity: 1; }
  100% { transform: translate(0, 118vh) rotate(calc(var(--r0, 0deg) + 340deg)); opacity: 0; }
}
.fa-fall { top: 0; animation-name: fa-fall; animation-timing-function: linear; }

@keyframes fa-drop {
  0% { transform: translateY(-10vh) scaleY(1.4); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(var(--h, 60vh)) scaleY(1); opacity: 0; }
}
.fa-drop { top: 0; animation-name: fa-drop; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }

@keyframes fa-burst {
  0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot, 200deg)); }
  100% { transform: translate(calc(var(--dx) * 1.12), calc(var(--dy) + 30vh)) scale(.9) rotate(calc(var(--rot, 200deg) * 1.5)); opacity: 0; }
}
.fa-burst { animation-name: fa-burst; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }

@keyframes fa-pop {
  0% { transform: scale(0) rotate(-40deg); opacity: 0; }
  18% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  30% { transform: scale(1) rotate(0); }
  85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.6); opacity: 0; }
}
.fa-pop { animation-name: fa-pop; }

@keyframes fa-rise {
  0% { transform: translateY(110%); }
  22% { transform: translateY(-6%); }
  32%, 78% { transform: translateY(0); }
  100% { transform: translateY(125%); }
}
.fa-b { top: auto; bottom: 0; margin-top: 0; }
.fa-rise { animation-name: fa-rise; }

@keyframes fa-fly {
  0% { transform: translate(var(--x0), var(--y0)); }
  35% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .35), calc(var(--y0) + var(--wy))); }
  70% { transform: translate(calc(var(--x0) + (var(--x1) - var(--x0)) * .7), calc(var(--y0) - var(--wy) * .8)); }
  100% { transform: translate(var(--x1), var(--y1)); }
}
.fa-fly { left: 0; top: 0; animation-name: fa-fly; animation-timing-function: ease-in-out; }
.fa-in { width: 100%; height: 100%; rotate: calc(var(--fx, 1) * 85deg); }
.fa-wl, .fa-wr { transform-box: fill-box; animation: fa-flap .2s ease-in-out infinite alternate; }
.fa-wl { transform-origin: 100% 50%; }
.fa-wr { transform-origin: 0% 50%; }
@keyframes fa-flap { from { transform: scaleX(1); } to { transform: scaleX(.22); } }
.fa-lady .fa-in { rotate: calc(var(--fx, 1) * 90deg); }
.fa-lady .fa-in svg { animation: fa-wob .26s ease-in-out infinite alternate; }
@keyframes fa-wob { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

@keyframes fa-toss {
  0% { transform: translate(0, 0) scale(.5) rotate(0); opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  8% { opacity: 1; }
  48% { transform: translate(calc(var(--dx) * .5), calc(var(--h) * -1)) scale(1) rotate(180deg); animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
  88% { opacity: 1; }
  100% { transform: translate(var(--dx), 14vh) scale(1) rotate(420deg); opacity: 0; }
}
.fa-toss { animation-name: fa-toss; animation-timing-function: linear; }

@keyframes fa-twk {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  20% { opacity: 1; }
  40% { opacity: .25; }
  60% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
  80% { opacity: .3; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.6), calc(var(--dy) * 1.6)) scale(.6); }
}
.fa-twk { animation-name: fa-twk; }
.fa-ff i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #fff8b8 0, #ffe45c 32%, rgba(255, 228, 92, 0) 70%); }
.fa-night { position: absolute; inset: 0; background: rgba(18, 12, 40, .5); animation: fa-fade 4.5s both; }
@keyframes fa-fade { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* --- Pousse (graine → tige → feuilles → fleur) : ancre = point au sol --- */
.fa-germ { scale: var(--k, 1); width: 0; height: 0; margin: 0; --H: calc(var(--h, 22) * var(--u)); --L: calc(var(--ls, 8) * var(--u)); --Hd: calc(var(--hs, 9) * var(--u)); animation-name: fa-life; animation-timing-function: linear; }
.fa-germ > * { position: absolute; display: block; }
.fa-seed {
  width: calc(3 * var(--u)); height: calc(4.2 * var(--u)); left: calc(-1.5 * var(--u)); top: calc(-4.2 * var(--u));
  background: #8a5a34; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: fa-seedfall .9s ease-in var(--d, 0s) both;
}
@keyframes fa-seedfall {
  0% { transform: translateY(-80vh) rotate(-30deg); opacity: 0; }
  6% { opacity: 1; }
  60% { transform: translateY(0) rotate(0); }
  72% { transform: translateY(calc(var(--u) * -3)); }
  84% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(calc(var(--u) * 2)) scale(0); opacity: 0; }
}
.fa-stem {
  width: calc(var(--sw, 1.1) * var(--u)); left: calc(var(--sw, 1.1) * var(--u) * -.5);
  height: var(--H); top: calc(var(--H) * -1);
  background: var(--sc, linear-gradient(#5aa75f, #2f7a4f)); border-radius: 999px 999px 0 0;
  transform-origin: 50% 100%;
  animation: fa-grow 1.1s cubic-bezier(.3, .8, .3, 1) calc(var(--d, 0s) + .8s) both;
}
@keyframes fa-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.fa-lf { width: var(--L); height: var(--L); left: calc(var(--L) * -.5); transform-origin: 50% 100%; animation: fa-leafout .6s cubic-bezier(.3, 1.5, .5, 1) calc(var(--d, 0s) + var(--d2, 1.6s)) both; }
.fa-lf.l { top: calc(var(--H) * -.45 - var(--L)); rotate: -55deg; }
.fa-lf.r { top: calc(var(--H) * -.72 - var(--L)); rotate: 55deg; --d2: 1.85s; }
@keyframes fa-leafout { from { transform: scale(0); } to { transform: scale(1); } }
.fa-hd { width: var(--Hd); height: var(--Hd); left: calc(var(--Hd) * -.5); top: calc(var(--H) * -1 - var(--Hd) * .5); animation: fa-bloom .8s cubic-bezier(.3, 1.4, .5, 1) calc(var(--d, 0s) + 2.1s) both; }
.fa-sun .fa-hd { animation: fa-bloom .8s cubic-bezier(.3, 1.4, .5, 1) calc(var(--d, 0s) + 2.1s) both, fa-spin 4s linear calc(var(--d, 0s) + 2.2s) both; }
@keyframes fa-bloom { from { transform: scale(0) rotate(-120deg); } to { transform: scale(1) rotate(0); } }
@keyframes fa-spin { to { rotate: 60deg; } }
.fa-cn {
  width: calc(var(--cs) * var(--u)); height: calc(var(--cs) * var(--u));
  left: calc((var(--cx) - var(--cs) / 2) * var(--u)); top: calc((var(--cy) - var(--cs) / 2) * var(--u));
  border-radius: 50%; background: var(--cc); animation: fa-blob .7s cubic-bezier(.3, 1.5, .5, 1) calc(var(--d, 0s) + var(--d2)) both;
}
@keyframes fa-blob { from { transform: scale(0); } to { transform: scale(1); } }

/* --- Éclosion --- */
@keyframes fa-bloomfull {
  0% { transform: scale(0) rotate(-120deg); opacity: 0; }
  25% { transform: scale(1.15) rotate(10deg); opacity: 1; }
  38%, 78% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.35) rotate(15deg); opacity: 0; }
}
.fa-bloomfull { animation-name: fa-bloomfull; }
@keyframes fa-halo { 0% { transform: scale(.2); opacity: 0; } 25% { opacity: .85; } 100% { transform: scale(2.2); opacity: 0; } }
.fa-halo { animation-name: fa-halo; border-radius: 50%; background: radial-gradient(circle, rgba(244, 166, 193, .6), rgba(244, 166, 193, 0) 68%); }
.fa-halo.y { background: radial-gradient(circle, rgba(242, 194, 48, .55), rgba(242, 194, 48, 0) 68%); }

/* --- Trèfle --- */
@keyframes fa-spinin {
  0% { transform: scale(0) rotate(-540deg); opacity: 0; }
  30% { transform: scale(1.12) rotate(0); opacity: 1; }
  40%, 80% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.4) rotate(40deg); opacity: 0; }
}
.fa-spinin { animation-name: fa-spinin; }

/* --- Abeille --- */
@keyframes fa-bee {
  0% { transform: translate(var(--px), var(--py)); }
  15% { transform: translate(20vw, 40vh); }
  30% { transform: translate(34vw, 64vh); }
  45% { transform: translate(52vw, 24vh); }
  60% { transform: translate(66vw, 52vh); }
  76% { transform: translate(82vw, 28vh); }
  100% { transform: translate(116vw, 46vh); }
}
.fa-bee { left: 0; top: 0; animation-name: fa-bee; animation-timing-function: ease-in-out; }
.fa-bee svg { animation: fa-wob .12s ease-in-out infinite alternate; }

/* --- Pissenlit --- */
@keyframes fa-seedblow {
  0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 160deg)) scale(1); opacity: 0; }
}
.fa-seedblow { animation-name: fa-seedblow; animation-timing-function: cubic-bezier(.3, .5, .4, 1); }

/* --- Prairie --- */
.fa-gr { height: calc(var(--h) * var(--u)); transform-origin: 50% 100%; animation: fa-gup .8s cubic-bezier(.3, 1.3, .5, 1) var(--d, 0s) both, fa-sway 1.3s ease-in-out calc(var(--d, 0s) + .8s) infinite alternate; }
@keyframes fa-gup { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fa-sway { from { rotate: -5deg; } to { rotate: 5deg; } }
.fa-tulip { height: calc(var(--s) * var(--u) * 1.83); }

/* --- Plante grimpante --- */
.fa-vine { position: absolute; bottom: 0; top: 0; height: 100%; animation: fa-life var(--t, 4.2s) both; overflow: visible; }
.fa-vine.r { right: 0; transform: scaleX(-1); }
.fa-vine.l { left: 0; }
.fa-vp { fill: none; stroke: #3f8f58; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fa-draw 2.4s ease-out both; }
@keyframes fa-draw { to { stroke-dashoffset: 0; } }
.fa-vl { transform-box: fill-box; transform-origin: 50% 100%; animation: fa-leafout .6s cubic-bezier(.3, 1.5, .5, 1) both; }

/* --- Bouquet --- */
.fa-bq { width: 0; height: 0; margin: 0; scale: var(--k, 1); animation-name: fa-life; }
.fa-bq > * { position: absolute; display: block; }
.fa-sf { width: calc(1.2 * var(--u)); left: calc(-.6 * var(--u)); bottom: 0; transform-origin: 50% 100%; rotate: var(--r); height: 0; background: linear-gradient(#5aa75f, #2f7a4f); border-radius: 99px; animation: fa-sgrow .9s cubic-bezier(.3, .9, .4, 1) var(--d) both; }
@keyframes fa-sgrow { from { height: 0; } to { height: calc(var(--hh) * var(--u)); } }
.fa-sh { position: absolute; width: calc(12 * var(--u)); height: calc(12 * var(--u)); left: calc(-5.4 * var(--u)); top: calc(-6 * var(--u)); animation: fa-bloom .6s cubic-bezier(.3, 1.5, .5, 1) calc(var(--d) + .75s) both; }
.fa-wrap { left: calc(-13 * var(--u)); top: calc(-2 * var(--u)); width: 0; height: 0; border-left: calc(13 * var(--u)) solid transparent; border-right: calc(13 * var(--u)) solid transparent; border-top: calc(17 * var(--u)) solid #d9b48a; animation: fa-conein .7s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes fa-conein { from { transform: translateY(120%); } to { transform: translateY(0); } }


/* --- Notification de palier --- */
.fa-toast {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 9991; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1rem; width: min(94vw, 40rem);
  padding: 1rem 1.5rem; background: #fff; border: .0625rem solid #bfe0c9; border-left: .25rem solid var(--wsh-green);
  border-radius: .875rem; box-shadow: 0 .5rem 2rem rgba(74, 32, 80, .22); cursor: pointer;
  animation: fa-toastin .5s cubic-bezier(.3, 1.4, .5, 1) both;
}
.fa-toast.is-out { animation: fa-toastout .35s ease-in both; }
.fa-toast-ico { flex-shrink: 0; width: 2.75rem; height: 2.75rem; padding: .55rem; border-radius: 50%; background: var(--wsh-green-bg); color: var(--wsh-green); }
.fa-toast-ico svg { display: block; width: 100%; height: 100%; }
.fa-toast strong { display: block; font-size: 1rem; color: var(--wsh-primary); }
.fa-toast span.fa-toast-txt { display: block; font-size: .9375rem; color: #50474e; line-height: 1.4; }
@keyframes fa-toastin { from { transform: translate(-50%, 150%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes fa-toastout { to { transform: translate(-50%, 150%); opacity: 0; } }

.fa-stage.fa-emerge { animation: fa-emerge .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fa-emerge { from { transform: scale(.04); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- Plantes dessinées (germination, arrosage, tournesol, pissenlit, arbre) --- */
.fa-plant { height: calc(var(--s) * var(--u) * var(--ar, 1.5)); margin: 0; translate: -50% -100%; transform-origin: 50% 100%; scale: var(--k, 1); animation-name: fa-life; animation-timing-function: linear; }
.fa-plant svg { transform-origin: 50% 100%; animation: fa-psway 2.8s ease-in-out 1.8s infinite alternate; }
@keyframes fa-psway { from { rotate: -1.4deg; } to { rotate: 1.4deg; } }
.fa-sp { fill: none; stroke: var(--sc, #4c9a5f); stroke-width: var(--sw, 2); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fa-draw var(--gd, 1.4s) cubic-bezier(.3, .7, .3, 1) var(--sd, .2s) both; }
.fa-soil { animation: fa-fadein .7s ease both; }
@keyframes fa-fadein { from { opacity: 0; } to { opacity: 1; } }
.fa-ph { transform-box: fill-box; transform-origin: 50% 50%; animation: fa-bloom .9s cubic-bezier(.3, 1.4, .5, 1) var(--hd, 1.7s) both; }
.fa-ph.spin { animation: fa-bloom .9s cubic-bezier(.3, 1.4, .5, 1) var(--hd, 1.7s) both, fa-spin 6s linear calc(var(--hd, 1.7s) + .8s) both; }
.fa-blob2 { transform-box: fill-box; transform-origin: 50% 50%; animation: fa-blob .7s cubic-bezier(.3, 1.5, .5, 1) both; }

/* --- Départ du point du palier : projection dans l'écran, lancer, vol --- */
@keyframes fa-scatter {
  0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 0; animation-timing-function: cubic-bezier(.15, .8, .3, 1); }
  8% { opacity: 1; }
  38% { transform: translate(calc(var(--dx) * .85), calc(var(--dy) * .85)) scale(1) rotate(var(--rot)); animation-timing-function: ease-in-out; }
  65% { transform: translate(calc(var(--dx) + var(--sx)), calc(var(--dy) + 9vh)) scale(1) rotate(calc(var(--rot) * 1.4)); animation-timing-function: ease-in-out; opacity: 1; }
  100% { transform: translate(calc(var(--dx) - var(--sx)), calc(var(--dy) + 38vh)) scale(.9) rotate(calc(var(--rot) * 2)); opacity: 0; }
}
.fa-scatter { animation-name: fa-scatter; }
@keyframes fa-launch {
  0% { transform: translate(0, 0) scale(0) rotate(-30deg); opacity: 0; }
  35% { transform: translate(var(--dx), var(--dy)) scale(1.15) rotate(8deg); opacity: 1; }
  48%, 85% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; }
}
.fa-launch { animation-name: fa-launch; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
@keyframes fa-ffly {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  30% { opacity: .3; } 45% { opacity: 1; } 60% { opacity: .35; } 75% { opacity: 1; } 90% { opacity: .4; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
.fa-ffly { animation-name: fa-ffly; animation-timing-function: ease-out; }
.fa-base { translate: -50% -100%; margin: 0; }
.fa-vine { left: 0; top: 0; }