/* Critical CSS - Styles essentiels pour éviter FOUC */
/* Optimisé pour Core Web Vitals - Inline minimal */

/* CSS Variables (correspond à globals.css) */
: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: 158 64% 52%;
  --primary-foreground: 210 40% 98%;
  --secondary: 160 84% 39%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 84 81% 44%;
  --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: 158 64% 52%;
  --radius: 0.75rem;
}

.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.2 91.2% 59.8%;
  --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.3 76.3% 48%;
}

/* Base reset pour éviter layout shift */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  line-height: 1.6;
}

body {
  min-height: 100vh;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prévention horizontal scroll */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Layout utilities critiques */
.flex { display: flex; }
.block { display: block; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
/* Note: .hidden supprimé pour permettre les classes Tailwind responsive comme hidden md:flex */

/* Spacing critique */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Liens - Reset navigateur */
a {
  color: inherit;
  text-decoration: none;
}
a:visited {
  color: inherit;
}

/* Buttons primaires */
.bg-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.bg-primary:hover {
  background-color: hsl(var(--primary) / 0.9);
}

/* Classes thème */
body:not(.admin-theme) {
  overflow-x: hidden;
}

.admin-theme {
  /* Styles admin spécifiques */
}

.public-theme {
  /* Styles publics spécifiques */
}

/* Animations critiques */
.animate-spin {
  animation: spin 1s linear infinite;
}

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

/* Optimisations Core Web Vitals */
img, video {
  max-width: 100%;
  height: auto;
}

/* Lazy loading optimization */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Skeleton loading pour réduire CLS */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Focus outline optimisé pour a11y */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Transitions performantes - avoid layout thrashing */
.transition-opacity { transition: opacity 150ms ease-in-out; }
.transition-colors { transition: color 150ms ease-in-out, background-color 150ms ease-in-out; }

/* Print styles */
@media print {
  .no-print { display: none !important; }
}