/* Petits ajustements par-dessus Tailwind CDN */

html {
  scroll-behavior: smooth;
}

.alert {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.alert-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.alert-success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* --- Landing page : scroll-reveal + animations douces --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { transition: none; opacity: 1; transform: none; }
  .hero-blob, .hero-float, .hero-float-2, .hero-float-3 { animation: none !important; }
}

/* Fond quadrillé à points pour les sections vitrines (fond noir dominant). */
.dot-grid {
  background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}
.corner-mark {
  position: absolute;
  color: rgba(255, 255, 255, .22);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 300;
  user-select: none;
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4%, 6%) scale(1.08); }
  66% { transform: translate(-3%, -4%) scale(0.95); }
}
.hero-blob {
  animation: blobMove 16s ease-in-out infinite;
}

@keyframes floatY {
  0%   { transform: translateY(0)     rotate(var(--tilt, 0deg)); }
  25%  { transform: translateY(-7px)  rotate(var(--tilt, 0deg)); }
  50%  { transform: translateY(-14px) rotate(var(--tilt, 0deg)); }
  75%  { transform: translateY(-7px)  rotate(var(--tilt, 0deg)); }
  100% { transform: translateY(0)     rotate(var(--tilt, 0deg)); }
}
/* Une seule déclaration `animation` par élément est possible en CSS : popIn et
   floatY sont donc combinées ici plutôt que sur deux classes séparées, sinon
   la seconde appliquée écraserait silencieusement la première. */
.hero-float {
  --tilt: -6deg;
  animation: popIn .6s cubic-bezier(.22, 1, .36, 1) both,
             floatY 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-float-2 {
  --tilt: 4deg;
  animation: popIn .6s cubic-bezier(.22, 1, .36, 1) both,
             floatY 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-float-3 {
  --tilt: 0deg;
  animation: popIn .6s cubic-bezier(.22, 1, .36, 1) both,
             floatY 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.feature-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(234, 88, 12, .35);
  border-color: rgba(249, 115, 22, .5);
}

.btn-glow {
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(234, 88, 12, .45);
}

/* --- Chiffres façon compteur de stats (défilement rapide au scroll) --- */
/* voir assets/js/count-up.js */