@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulseWine {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107, 29, 42, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(107, 29, 42, 0); }
}

@keyframes drawLine {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Visible par défaut — évite page blanche si JS absent ou en retard */
.fade-in-up,
.fade-in-left,
.fade-in-right {
  opacity: 1;
}

html.js-anim .fade-in-up:not(.visible),
html.js-anim .fade-in-left:not(.visible),
html.js-anim .fade-in-right:not(.visible) {
  opacity: 0;
}

.fade-in-up.visible {
  animation: fadeInUp 0.7s ease forwards;
}

.fade-in-left.visible {
  animation: fadeInLeft 0.7s ease forwards;
}

.fade-in-right.visible {
  animation: fadeInRight 0.7s ease forwards;
}

.hero-graph .chart-line {
  stroke-dasharray: 200;
  animation: drawLine 4s ease-in-out infinite alternate;
}

.hero-graph .bar-anim {
  transform-origin: bottom;
  animation: barGrow 1.5s ease forwards, floatSlow 6s ease-in-out infinite;
}

.hero-graph .circle-progress {
  animation: floatSlow 8s ease-in-out infinite;
}

.check-icon path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: drawLine 1s ease forwards 0.3s;
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(27, 42, 74, 0.2);
  border-top-color: var(--color-wine);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 0.5rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn.loading {
  pointer-events: none;
  opacity: 0.85;
}