@tailwind base;
@tailwind components;
@tailwind utilities;

/* Critical CSS for hero section LCP optimization */
.hero-container {
  display: grid;
  min-height: 90vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  contain: layout style paint;
}

.hero-content {
  display: flex;
  align-items: center;
  min-height: 90vh;
  position: relative;
  z-index: 30;
  width: 100%;
  contain: layout style;
}

.hero-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  text-rendering: optimizeSpeed;
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 3.75rem;
  }
}

/* Performance optimizations */
.performance-optimized {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 1px 400px;
}

.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221 83% 53%;

    --radius: 0.75rem;

    /* Custom colors for brand */
    --accent-blue: 220 37% 45%; /* #48629c */
    --gradient-dark-start: 240 11% 9%; /* #17171a */
    --gradient-dark-mid: 227 62% 16%; /* #172554 */
    --gradient-dark-end: 0 0% 6%; /* #0e0e0f */

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 217 91% 60%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224 76.3% 48%;
    
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    /* Optimisation des polices pour éviter les layout shifts */
    font-display: swap;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  }
  
  /* Réservation d'espace pour éviter CLS */
  .form-container {
    min-height: 400px; /* Espace réservé pour formulaire multi-étapes */
    contain: layout style;
  }
  
  .hero-title {
    font-size: clamp(2rem, 5vw, 4rem); /* Responsive fluid typography */
    line-height: 1.2;
    contain: layout;
  }
  
  /* Optimisations de performance pour réduire les repaints */
  .benefit-card,
  .testimonial-card,
  .process-step {
    contain: layout style paint;
  }
  
  /* Preload des polices critiques */
  @font-face {
    font-family: 'Inter';
    font-display: swap;
    src: local('Inter');
  }
}

/* Prevent horizontal scroll on desktop only */
@media (min-width: 1024px) {
  html, body {
    overflow-x: clip;
  }
}

@layer utilities {
  .glass-card {
    @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border border-gray-200 dark:border-gray-800;
  }
}

#root {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

/* Animations personnalisées */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.5s ease-out forwards;
}

/* Optimisations de performance pour réduire TBT */
@keyframes shimmer-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

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

.animate-shimmer-slide {
  animation: shimmer-slide 2s ease-in-out infinite;
}

/* Optimisation GPU pour les animations */
.animate-fade-in,
.animate-scale-in,
.hover-scale {
  will-change: transform, opacity;
  transform: translateZ(0); /* Force GPU compositing */
}

/* Reset will-change après animation */
.animate-fade-in:not(:hover),
.animate-scale-in:not(:hover) {
  will-change: auto;
}

/* Cache d'images optimisé */
.optimized-image {
  content-visibility: auto;
  contain-intrinsic-size: 300px 200px;
}

/* Réduction des repaints pour les sections */
.section-cached {
  contain: layout style paint;
  transform: translateZ(0);
}

/* Animation du cercle de compatibilité */
@keyframes fillCircle {
  0% {
    stroke-dashoffset: 534.07; /* 2 * PI * 85 = ~534.07 */
  }
  100% {
    stroke-dashoffset: 53.407; /* 10% du cercle (90% rempli) */
  }
}