/* Complète Tailwind CDN — animations & utilitaires du site Next */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --radius: 0.5rem;
}

*,
::after,
::before {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-scroll {
  animation: scroll 30s linear infinite;
}

.animate-scroll:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .animate-scroll {
    animation: none;
  }
}

.hero-animated-bg {
  background: linear-gradient(135deg, #ffffff 0%, #f5f3f6 30%, #ede9f0 60%, #e8e4ec 100%);
  position: relative;
  overflow: hidden;
}

.section-cv {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

@media (min-width: 640px) {
  .section-cv {
    contain-intrinsic-size: auto 620px;
  }
}

@media (min-width: 1024px) {
  .section-cv {
    contain-intrinsic-size: auto 720px;
  }
}

.usecases-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}

.usecases-track::-webkit-scrollbar {
  height: 6px;
}

.usecases-track::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.usecase-card {
  flex: 0 0 min(100%, 320px);
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .usecase-card {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

@media (min-width: 1024px) {
  .usecase-card {
    flex: 0 0 calc(33.333% - 0.67rem);
  }
}

.demo-panel-hidden {
  display: none;
}

.demo-panel-visible {
  display: block;
}