/* Scroll fade-in */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.fade-in-stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.12s; }
.fade-in-stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.24s; }

/* Petite volée de feuilles (clic/survol des boutons "Demander un devis") —
   maison, sans dépendance externe. */
.leaf-particle {
  position: fixed;
  z-index: 999;
  font-size: 1.15rem;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: leaf-fly 0.85s ease-out forwards;
}

@keyframes leaf-fly {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.5);
    opacity: 0;
  }
}

/* Voile de transition entre les pages (déclenché en JS avant de naviguer,
   et affiché brièvement en arrivant sur la page suivante). */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.page-transition.is-active {
  opacity: 1;
  pointer-events: all;
}

/* Sur les pages d'arrivée : on part opaque puis on efface le voile. */
.page-transition--in {
  opacity: 1;
  pointer-events: all;
  animation: page-transition-reveal 0.5s ease forwards;
}

@keyframes page-transition-reveal {
  0% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}